@font-face {
  font-family: "Hiruko Panfu";
  src: url("/site/assets/HirukoPro-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}

:root {
  --panfu-sky: #69d2ef;
  --panfu-leaf: #73b91f;
  --panfu-leaf-dark: #3e8e1d;
  --panfu-lime: #a8d91f;
  --panfu-sun: #ffb820;
  --panfu-magenta: #c62ed0;
  --panfu-ink: #244f46;
  --panfu-paper: #fffdf6;
  --panfu-wood: #9a4b18;
  --panfu-wood-dark: #65310f;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--panfu-ink);
  background: #f7faef;
}

h1,
h2,
h3,
.button,
.site-nav a,
.page-board,
.billboard-copy,
.chapter-number,
.hand-note,
.small-wood-sign,
.wooden-message {
  font-family: "Hiruko Panfu", "Trebuchet MS", Arial, sans-serif;
}

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, .48);
  background: linear-gradient(180deg, rgba(98, 207, 239, .98), rgba(69, 184, 222, .94));
  box-shadow: 0 4px 18px rgba(28, 99, 120, .12);
}

.landing-header {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(180deg, rgba(58, 159, 203, .32), rgba(58, 159, 203, 0));
  box-shadow: none;
  border: 0;
}

.site-header .brand img {
  display: block;
  width: min(178px, 33vw);
  height: auto;
  filter: drop-shadow(0 3px 0 rgba(25, 105, 54, .18));
}

.site-nav a {
  letter-spacing: .01em;
}

.landing-hero {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background: #79d9f1;
}

.landing-sky,
.landing-trees,
.landing-ground {
  position: absolute;
  pointer-events: none;
}

.landing-sky {
  inset: 0;
  z-index: -3;
  background-color: #71d7f2;
  background-image: url("/site/assets/panfu-landing-background.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
}

.landing-trees {
  inset: auto 0 0;
  z-index: -2;
  height: min(57vw, 500px);
  min-height: 350px;
  background: url("/site/assets/panfu-landing-trees.png") center bottom / auto 100% repeat-x;
}

.landing-ground {
  inset: auto 0 0;
  z-index: -1;
  height: 112px;
  background: linear-gradient(180deg, #9cda17 0%, #73b91f 62%, #5ba31c 100%);
}

.landing-stage {
  position: relative;
  z-index: 2;
  display: block;
  width: min(1180px, calc(100% - 42px));
  min-height: 610px;
  margin: 0 auto;
  padding: 132px 0 66px;
}

.landing-character {
  position: absolute;
  left: max(18px, calc(50% - 570px));
  bottom: 66px;
  width: min(27vw, 340px);
  min-width: 0;
}

.landing-character video {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 14px rgba(32, 94, 34, .16));
}

.home-billboard {
  position: relative;
  z-index: 2;
  width: 399px;
  aspect-ratio: 399 / 329;
  margin: 0 auto;
  background: url("/site/assets/panfu-home-board.png") center top / 100% auto no-repeat;
  filter: drop-shadow(0 14px 12px rgba(81, 53, 20, .2));
}

.billboard-copy {
  position: absolute;
  inset: 8.5% 7.5% 11%;
  color: #fff;
  text-shadow: 0 2px 0 rgba(85, 43, 11, .78);
}

.billboard-copy h1 {
  margin: 0 0 6%;
  color: #fff;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.billboard-copy ul {
  display: grid;
  gap: clamp(7px, 1.2vw, 13px);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.billboard-copy li {
  display: grid;
  grid-template-columns: clamp(26px, 3.1vw, 38px) 1fr;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.12;
}

.billboard-copy li img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(60, 25, 4, .35));
}

.billboard-button {
  position: absolute;
  left: 50%;
  bottom: -18%;
  display: grid;
  place-items: center;
  width: 70%;
  min-height: clamp(52px, 6.3vw, 64px);
  padding: 8px 18px;
  transform: translateX(-50%);
  border: 3px solid rgba(120, 20, 141, .45);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #e463ec 0%, #bf2ecd 58%, #9b1fb4 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .34), 0 7px 0 #7e2794, 0 12px 18px rgba(78, 26, 94, .25);
  font: 700 clamp(18px, 2.2vw, 27px) "Hiruko Panfu", "Trebuchet MS", sans-serif;
  text-align: center;
  text-shadow: 0 2px 0 rgba(91, 20, 104, .5);
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}

.billboard-button:hover {
  transform: translate(-50%, -3px);
  filter: brightness(1.07);
}

.welcome-section {
  position: relative;
  padding: clamp(90px, 11vw, 150px) 24px clamp(80px, 10vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 70%, rgba(167, 218, 48, .22) 0 120px, transparent 121px),
    linear-gradient(180deg, #faffee 0%, #fffdf8 52%, #eef8d8 100%);
}

.welcome-section::before {
  content: "";
  position: absolute;
  top: -36px;
  left: -3%;
  width: 106%;
  height: 72px;
  border-radius: 50%;
  background: #faffee;
}

.welcome-path {
  position: absolute;
  right: -70px;
  bottom: 30px;
  width: 420px;
  height: 190px;
  border: 34px solid rgba(221, 196, 125, .2);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.welcome-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  width: min(1120px, 100%);
  margin: 0 auto;
}

.welcome-copy h2,
.chapter-copy h2,
.download-note-section h2,
.help-section h2 {
  max-width: 760px;
  margin: 10px 0 22px;
  color: #24554b;
  font-size: clamp(34px, 4.7vw, 62px);
  line-height: .98;
  letter-spacing: -.035em;
}

.welcome-copy p,
.chapter-copy p,
.download-note-section p,
.help-section p {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.7;
}

.welcome-actions,
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.text-link {
  color: #4b8d25;
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.scenery-window {
  position: relative;
  margin: 0;
  padding: 12px;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(38, 91, 58, .18), 0 0 0 1px rgba(60, 130, 74, .12);
}

.scenery-window img {
  display: block;
  width: 100%;
  aspect-ratio: 772 / 480;
  border-radius: 26px;
  object-fit: cover;
}

.scenery-window figcaption {
  padding: 14px 12px 5px;
  color: #527060;
  font-weight: 800;
  text-align: center;
}

.tilted-window {
  transform: rotate(1.2deg);
}

.remember-section {
  position: relative;
  padding: clamp(70px, 9vw, 125px) 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(91, 159, 29, .88), rgba(60, 133, 29, .91)),
    url("/site/assets/explore-jungle-clean.png") center 46% / cover no-repeat;
}

.wooden-message {
  position: relative;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: clamp(35px, 5vw, 58px);
  border: 8px solid #6e340f;
  border-radius: 30px;
  color: #fff9dc;
  background:
    repeating-linear-gradient(1deg, transparent 0 35px, rgba(80, 29, 4, .16) 36px 39px),
    linear-gradient(90deg, #9f511d, #b76122 52%, #984717);
  box-shadow: inset 0 0 0 5px rgba(255, 190, 91, .24), 0 24px 30px rgba(45, 73, 22, .3);
  text-align: center;
  text-shadow: 0 2px 0 rgba(77, 31, 5, .65);
}

.wooden-message::before,
.wooden-message::after {
  content: "";
  position: absolute;
  top: -88px;
  width: 24px;
  height: 100px;
  border-radius: 12px;
  background: #774017;
  box-shadow: inset 4px 0 rgba(255, 255, 255, .08);
}

.wooden-message::before { left: 10%; }
.wooden-message::after { right: 10%; }

.sign-kicker,
.small-wood-sign > span {
  color: #ffe774;
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wooden-message h2 {
  width: min(730px, 100%);
  margin: 10px auto 32px;
  color: #fff;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.04;
}

.remember-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.remember-list > div {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 20px 15px;
  border: 2px solid rgba(255, 235, 161, .25);
  border-radius: 20px;
  background: rgba(78, 32, 7, .2);
}

.remember-list img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.remember-list strong {
  color: #fff;
  font-size: 21px;
}

.remember-list span {
  max-width: 220px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  line-height: 1.45;
}

.home-finale {
  padding: clamp(70px, 9vw, 110px) 24px;
  background: linear-gradient(180deg, #eef8d8, #dff1b7);
}

.finale-shell {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 30px;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.finale-shell h2 {
  margin: 5px 0 10px;
  color: #28574b;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1;
}

.finale-shell p {
  margin: 0;
  font-size: 18px;
}

.bolly-runner {
  display: block;
  width: 96px;
  height: 96px;
  background-image: url("/site/assets/bolly.png");
  background-repeat: no-repeat;
  background-size: 2304px 96px;
  animation: bolly-walk 1.35s steps(24) infinite;
  filter: drop-shadow(0 8px 5px rgba(57, 100, 26, .25));
}

@keyframes bolly-walk {
  to { background-position: -2304px 0; }
}

.page-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(470px, 60vw, 650px);
  padding: 90px 24px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.inner-page .page-hero {
  min-height: 390px;
  padding: 95px 24px 120px;
  background-color: #6fd4ef;
  background-image: url("/site/assets/panfu-landing-background.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
}

.inner-page .page-hero::after {
  width: 100%;
  height: 220px;
  background-image: url("/site/assets/panfu-landing-trees.png");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
}

.page-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 124, 155, .08), rgba(40, 100, 42, .3));
}

.page-scene-jungle { background-image: url("/site/assets/explore-jungle-clean.png"); }
.page-scene-download {
  background-color: #6fd3ef;
  background-image:
    linear-gradient(180deg, rgba(105, 213, 243, .08) 0 55%, rgba(130, 197, 41, .08) 55% 100%),
    url("/site/assets/panfu-landing-trees.png"),
    url("/site/assets/panfu-landing-background.png");
  background-position: center, center bottom, center top;
  background-size: cover, auto 72%, auto 100%;
  background-repeat: no-repeat, repeat-x, repeat-x;
}
.page-scene-treehouse { background-image: url("/site/assets/explore-treehouse-clean.png"); }

.page-board {
  position: relative;
  z-index: 1;
  width: min(690px, 92vw);
  padding: clamp(35px, 6vw, 62px);
  border: 8px solid #69310f;
  border-radius: 30px;
  color: #fff7d2;
  background:
    repeating-linear-gradient(1deg, transparent 0 42px, rgba(66, 24, 3, .18) 43px 46px),
    linear-gradient(100deg, rgba(156, 74, 24, .96), rgba(181, 91, 31, .96), rgba(143, 62, 19, .97));
  box-shadow: inset 0 0 0 5px rgba(255, 196, 99, .24), 0 24px 50px rgba(40, 48, 19, .3);
  text-align: center;
  text-shadow: 0 2px 0 rgba(75, 29, 5, .6);
}

.page-board::before,
.page-board::after {
  content: "";
  position: absolute;
  top: -124px;
  width: 22px;
  height: 130px;
  border-radius: 10px;
  background: #6e3a16;
}

.page-board::before { left: 12%; }
.page-board::after { right: 12%; }

.page-board > span {
  color: #ffe879;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-board h1 {
  margin: 9px 0 16px;
  color: #fff;
  font-size: clamp(39px, 6vw, 72px);
  line-height: .98;
}

.page-board p {
  width: min(540px, 100%);
  margin: 0 auto;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}

.compact-board {
  width: min(640px, 92vw);
}

.chapter-shell {
  padding: clamp(75px, 10vw, 140px) 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 20%, rgba(164, 213, 53, .14) 0 150px, transparent 151px),
    radial-gradient(circle at 95% 70%, rgba(96, 196, 230, .14) 0 180px, transparent 181px),
    #fffdf7;
}

.panfu-chapter {
  display: grid;
  grid-template-columns: minmax(390px, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(44px, 8vw, 110px);
  width: min(1120px, 100%);
  margin: 0 auto clamp(100px, 14vw, 175px);
}

.panfu-chapter:last-child {
  margin-bottom: 0;
}

.panfu-chapter.reverse .chapter-picture {
  order: 2;
}

.chapter-picture {
  position: relative;
  margin: 0;
  padding: 12px;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(38, 91, 58, .17);
}

.chapter-picture::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20px -22px -22px 24px;
  border-radius: 36px;
  background: #b5d956;
  transform: rotate(-2deg);
}

.reverse .chapter-picture::before {
  inset: 20px 24px -22px -22px;
  background: #71cdea;
  transform: rotate(2deg);
}

.chapter-picture img {
  display: block;
  width: 100%;
  aspect-ratio: 772 / 480;
  border-radius: 25px;
  object-fit: cover;
}

.chapter-picture figcaption {
  padding: 15px 12px 6px;
  color: #527060;
  font-weight: 800;
  text-align: center;
}

.chapter-copy {
  position: relative;
}

.chapter-number {
  position: absolute;
  z-index: -1;
  top: -76px;
  right: 0;
  color: rgba(92, 168, 36, .09);
  font-size: 142px;
  line-height: 1;
}

.chapter-copy h2 {
  font-size: clamp(35px, 4.2vw, 56px);
}

.hand-note {
  display: inline-block;
  margin-top: 13px;
  padding: 12px 18px;
  border-radius: 15px;
  color: #75470f;
  background: #fff0a6;
  transform: rotate(-1deg);
  box-shadow: 0 5px 0 #e1c966;
}

.chapter-ticks {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
}

.chapter-ticks li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-right: 10px;
  border-radius: 50%;
  color: #fff;
  background: #72b72d;
}

.explore-finale {
  padding: 110px 24px 85px;
  background: linear-gradient(180deg, #81cb27, #5fa61f);
}

.small-wood-sign {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 45px 45px 72px;
  border: 7px solid #64300f;
  border-radius: 28px;
  color: #fff;
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(67, 25, 4, .16) 41px 44px),
    linear-gradient(100deg, #9b4918, #b25e22, #914116);
  box-shadow: inset 0 0 0 5px rgba(255, 193, 95, .23), 0 22px 35px rgba(47, 87, 21, .35);
  text-align: center;
  text-shadow: 0 2px 0 rgba(75, 29, 5, .62);
}

.small-wood-sign h2 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: clamp(34px, 5vw, 55px);
  line-height: 1;
}

.small-wood-sign p {
  margin: 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 18px;
}

.small-wood-sign .billboard-button {
  bottom: -30px;
  width: min(310px, 75%);
}

.refreshed-download {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}

.refreshed-download .release-card {
  border: 1px solid rgba(76, 137, 64, .15);
  box-shadow: 0 22px 50px rgba(39, 90, 53, .13);
}

.download-security-guide {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  width: min(920px, 100%);
  margin: 32px auto 0;
  padding: 22px 24px;
  border: 2px solid #f0d37b;
  border-radius: 22px;
  color: #604b20;
  background: linear-gradient(135deg, #fff9dc, #fffdf1);
  box-shadow: 0 14px 32px rgba(106, 83, 23, .1);
}

.security-shield {
  display: grid;
  place-items: center;
  width: 54px;
  height: 60px;
  color: #fff;
  background: linear-gradient(180deg, #7fca3e, #4a9c26);
  clip-path: polygon(50% 0, 94% 16%, 88% 70%, 50% 100%, 12% 70%, 6% 16%);
  font: 700 28px "Trebuchet MS", sans-serif;
  text-shadow: 0 2px 0 rgba(41, 92, 20, .4);
}

.download-security-guide h2 {
  margin: 0 0 7px;
  color: #6d4a17;
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.05;
}

.download-security-guide p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.download-security-guide p + p { margin-top: 10px; }

.download-security-guide code {
  display: inline-block;
  max-width: 100%;
  color: #4f622b;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.client-loading-preview {
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(38, 91, 58, .18), 0 0 0 1px rgba(60, 130, 74, .12);
}

.client-preview-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  color: #5b6f66;
  background: #f8fbf6;
  font: 800 13px "Trebuchet MS", sans-serif;
}

.client-preview-titlebar strong { grid-column: 2; }

.preview-window-dots {
  display: flex;
  gap: 6px;
}

.preview-window-dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.preview-window-dots i:nth-child(1) { background: #f57463; }
.preview-window-dots i:nth-child(2) { background: #f5bf42; }
.preview-window-dots i:nth-child(3) { background: #75c850; }

.client-preview-scene {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #6bd3ef url("/site/assets/panfu-landing-trees.png") center bottom / auto 76% repeat-x;
}

.client-preview-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62px;
  background: linear-gradient(180deg, #a6dc1f 0%, #78bf20 58%, #5da51b 100%);
}

.client-preview-logo {
  position: absolute;
  z-index: 3;
  top: 19px;
  left: 25px;
  width: 132px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(20, 80, 69, .18));
}

.client-preview-pandas {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: 38px;
  width: 53%;
  max-height: 72%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 10px 9px rgba(37, 87, 36, .16));
}

.client-preview-board {
  position: absolute;
  z-index: 3;
  top: 80px;
  right: 5%;
  display: grid;
  width: 43%;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  padding: 24px 18px 19px;
  border: 7px solid #7e3d0e;
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(90deg, rgba(93,40,7,.14), transparent 22% 78%, rgba(93,40,7,.14)), repeating-linear-gradient(0deg, #a95112 0 28px, #9b430d 29px 31px);
  box-shadow: inset 0 0 0 3px rgba(218,122,48,.65), 0 12px 18px rgba(69,44,18,.2);
  text-align: center;
  text-shadow: 0 2px 0 rgba(81,36,8,.65);
}

.client-preview-board strong {
  font: 700 clamp(20px, 2.6vw, 31px) "Hiruko Panfu", "Trebuchet MS", sans-serif;
}

.client-preview-board span {
  margin: 8px 0 15px;
  font-size: 13px;
  font-weight: 800;
}

.client-preview-board b {
  min-width: 130px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e45eeb, #b724cb 65%, #921aab);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 #741487;
  font: 700 17px "Hiruko Panfu", "Trebuchet MS", sans-serif;
}

@media (max-width: 620px) {
  .client-preview-scene { min-height: 330px; background-size: auto 71%; }
  .client-preview-logo { width: 110px; }
  .client-preview-pandas { left: -3%; bottom: 38px; width: 59%; }
  .client-preview-board { top: 73px; right: 3%; width: 48%; min-height: 160px; padding-inline: 10px; }
  .client-preview-board span { font-size: 11px; }
}

.download-note-section,
.help-section {
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(42px, 7vw, 88px);
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(80px, 10vw, 130px) 0;
}

.refreshed-content {
  padding-top: 30px;
}

.refreshed-content .info-card {
  border-color: rgba(83, 146, 51, .14);
  box-shadow: 0 18px 40px rgba(38, 91, 58, .1);
}

.passport-surface,
.account-dashboard-surface {
  background-color: #dff4c5;
  background-image:
    linear-gradient(180deg, rgba(105, 211, 240, .9) 0 34%, rgba(156, 217, 29, .82) 34% 100%),
    url("/site/assets/panfu-landing-trees.png");
  background-repeat: no-repeat, repeat-x;
  background-position: center, center bottom;
  background-size: cover, auto 45%;
}

.passport-card,
.passport-story,
.dashboard {
  box-shadow: 0 24px 55px rgba(37, 93, 55, .18);
}

.passport-story {
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(239, 250, 208, .96));
}

.passport-story .key-character {
  max-width: min(390px, 86%);
}

/* Login and registration are normal account screens, not a passport layout. */
.auth-surface {
  padding: 126px 20px 82px;
}

.auth-shell {
  grid-template-columns: minmax(310px, 390px) minmax(430px, 555px);
  gap: 24px;
  width: min(980px, calc(100vw - 40px));
}

.auth-art {
  min-height: 555px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, .92);
  border-radius: 30px;
  color: #264a42;
  background: #fff;
  box-shadow: 0 24px 55px rgba(37, 93, 55, .2);
}

.register-art {
  display: block;
}

.register-room-art {
  display: block;
  width: 100%;
  height: 555px;
  object-fit: cover;
  object-position: center;
}

.register-art::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(180deg, transparent, rgba(18, 69, 42, .58));
  pointer-events: none;
}

.register-art-copy {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 3px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
  color: #315a28;
  background: rgba(255, 253, 225, .94);
  box-shadow: 0 12px 30px rgba(24, 69, 40, .25);
}

.register-art-copy .bolly-sprite {
  width: 58px;
  height: 58px;
  background-size: 1392px 58px;
}

.register-art-copy div {
  display: grid;
  gap: 3px;
}

.register-art-copy strong {
  font-size: 17px;
  line-height: 1.05;
}

.register-art-copy small {
  color: #5f7568;
  font: 700 12px/1.35 "Segoe UI", Arial, sans-serif;
}

.login-art {
  display: grid;
  place-items: end center;
  min-height: 510px;
  background:
    url("/site/assets/panfu-landing-trees.png") center bottom / auto 62% repeat-x,
    linear-gradient(180deg, #74d5f1 0 59%, #9fdc22 59% 100%);
}

.login-art .key-character {
  width: min(330px, 90%);
  height: 465px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 11px rgba(31, 76, 44, .26));
}

.auth-card {
  min-height: 0;
  padding: 38px 40px 32px;
  border: 6px solid rgba(255, 255, 255, .94);
  border-radius: 30px;
  background: rgba(255, 254, 248, .98);
  box-shadow: 0 24px 55px rgba(37, 93, 55, .2), inset 0 0 0 1px rgba(91, 151, 71, .13);
}

.auth-card h1 {
  margin-top: 8px;
}

.auth-card .intro {
  margin-bottom: 24px;
}

.footer-logo {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 18px;
  background: #fff;
}

.footer-logo img {
  display: block;
  width: 152px;
  height: auto;
  filter: none !important;
  opacity: 1;
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(28, 86, 58, .98), rgba(20, 64, 48, 1)),
    url("/site/assets/panfu-landing-trees.png") center bottom / auto 100% repeat-x;
}

@media (max-width: 920px) {
  .landing-stage {
    grid-template-columns: minmax(330px, 1fr) minmax(320px, 399px);
    width: min(900px, calc(100% - 28px));
  }

  .welcome-shell,
  .panfu-chapter,
  .download-note-section,
  .help-section {
    grid-template-columns: 1fr;
  }

  .welcome-copy {
    text-align: center;
  }

  .welcome-actions {
    justify-content: center;
  }

  .welcome-shell .scenery-window {
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .panfu-chapter {
    width: min(760px, 100%);
    gap: 55px;
  }

  .panfu-chapter.reverse .chapter-picture {
    order: 0;
  }

  .chapter-copy {
    text-align: center;
  }

  .chapter-ticks {
    display: inline-grid;
    text-align: left;
  }

  .finale-shell {
    grid-template-columns: 90px 1fr;
  }

  .finale-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 1000px) {
  .landing-character {
    display: none;
  }
}

@media (max-width: 720px) {
  .landing-header {
    position: relative;
    background: linear-gradient(180deg, #62cbed, #4cbde2);
  }

  .landing-hero {
    min-height: 490px;
  }

  .landing-stage {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    width: 100%;
    min-height: 480px;
    padding: 30px 16px 66px;
  }

  .landing-character {
    display: none;
  }

  .home-billboard {
    order: 1;
    width: min(399px, calc(100vw - 32px));
    margin: 0 auto;
    justify-self: center;
    align-self: center;
  }

  .billboard-copy {
    inset: 8.5% 8% 11%;
  }

  .billboard-copy h1 {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .billboard-copy ul {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .billboard-copy h1 {
    font-size: clamp(17px, 5.5vw, 23px);
  }

  .billboard-copy li {
    grid-template-columns: 30px 1fr;
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .billboard-button {
    left: 50%;
    bottom: -18%;
    width: min(72%, 280px);
    min-height: 54px;
    transform: translateX(-50%);
    font-size: clamp(18px, 5.5vw, 24px);
  }

  .landing-ground {
    height: 68px;
  }

  .welcome-section {
    padding-top: 85px;
  }

  .remember-list {
    grid-template-columns: 1fr;
  }

  .wooden-message::before,
  .wooden-message::after,
  .page-board::before,
  .page-board::after {
    display: none;
  }

  .finale-shell {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .page-scene {
    min-height: 530px;
    padding: 60px 18px;
  }

  .page-board {
    padding: 35px 25px;
  }

  .page-board h1 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .chapter-shell {
    padding-inline: 18px;
  }

  .panfu-chapter {
    grid-template-columns: 1fr;
  }

  .chapter-picture {
    padding: 8px;
  }

  .chapter-picture::before {
    inset: 15px -10px -14px 12px;
  }

  .reverse .chapter-picture::before {
    inset: 15px 12px -14px -10px;
  }

  .download-note-section,
  .help-section {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 680px);
  }

  .refreshed-download {
    margin-top: -38px;
  }

  .download-security-guide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .auth-surface {
    padding: 104px 12px 60px;
  }

  .auth-shell,
  .login-passport.auth-shell {
    grid-template-columns: 1fr;
    width: min(560px, calc(100vw - 24px));
    gap: 16px;
  }

  .auth-art {
    min-height: 205px;
    margin: 0;
    border-radius: 25px;
  }

  .register-room-art {
    height: 250px;
  }

  .register-art-copy {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .login-art {
    min-height: 260px;
  }

  .login-art .key-character {
    width: 220px;
    height: 260px;
  }

  .auth-card {
    padding: 30px 24px 26px;
    border-radius: 25px;
  }
}

@media (max-width: 430px) {
  .landing-hero {
    min-height: 470px;
  }

  .landing-stage {
    min-height: 460px;
    padding: 24px 16px 58px;
  }

  .home-billboard {
    width: min(360px, calc(100vw - 32px));
  }

  .billboard-copy {
    inset-inline: 8%;
  }

  .billboard-copy ul {
    gap: 6px;
  }

  .billboard-copy li {
    grid-template-columns: 26px 1fr;
    gap: 7px;
    font-size: 14px;
  }

  .billboard-copy h1 {
    margin-bottom: 5%;
    font-size: 17px;
  }

  .welcome-copy h2,
  .chapter-copy h2,
  .download-note-section h2,
  .help-section h2 {
    font-size: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bolly-runner { animation: none; }
  .billboard-button { transition: none; }
}

/* The forest PNG already contains its own foreground grass. Continue from
   that exact final pixel instead of covering it with another green panel or
   repeating a cropped copy of the forest below it. */
body[data-page="home"] {
  --home-ground: #a9d21d;
  --home-ground-deep: #91bd20;
  background: var(--home-ground-deep);
}

body[data-page="home"] .landing-trees {
  bottom: -1px;
}

body[data-page="home"] .landing-ground,
body[data-page="home"] .home-ground-foliage {
  display: none;
}

.home-ground-flow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 14% 18%, rgba(103, 153, 24, .13) 0 94px, transparent 96px),
    radial-gradient(ellipse at 83% 42%, rgba(196, 222, 43, .16) 0 125px, transparent 127px),
    linear-gradient(180deg, var(--home-ground) 0%, #a4ce1d 44%, var(--home-ground-deep) 100%);
}

.home-ground-flow::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px 0 auto;
  height: 126px;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(ellipse at 8% 62%, #7cab22 0 24px, transparent 26px),
    radial-gradient(ellipse at 29% 30%, #96c51e 0 17px, transparent 19px),
    radial-gradient(ellipse at 58% 72%, #7eae21 0 31px, transparent 33px),
    radial-gradient(ellipse at 88% 25%, #9bc91f 0 21px, transparent 23px);
}

body[data-page="home"] .welcome-section,
body[data-page="home"] .remember-section,
body[data-page="home"] .home-finale {
  position: relative;
  z-index: 1;
  background: transparent;
}

body[data-page="home"] .welcome-section {
  padding-top: clamp(74px, 8vw, 112px);
}

body[data-page="home"] .welcome-section::before {
  display: none;
}

body[data-page="home"] .welcome-path {
  border-color: rgba(232, 211, 126, .24);
  border-left-color: transparent;
  border-bottom-color: transparent;
}

body[data-page="home"] .welcome-copy {
  padding: clamp(28px, 4vw, 46px);
  border: 6px solid rgba(255, 251, 220, .9);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 253, 225, .96), rgba(247, 244, 194, .94));
  box-shadow: 0 20px 0 rgba(65, 120, 23, .16), 0 28px 44px rgba(49, 98, 24, .18), inset 0 0 0 1px rgba(168, 133, 46, .16);
}

body[data-page="home"] .remember-section {
  padding-top: clamp(86px, 10vw, 135px);
  padding-bottom: clamp(86px, 10vw, 135px);
}

body[data-page="home"] .home-finale {
  margin: 0 auto clamp(70px, 8vw, 105px);
  width: min(1130px, calc(100% - 36px));
  padding: clamp(42px, 6vw, 68px);
  border: 6px solid rgba(255, 250, 212, .82);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(247, 255, 214, .94), rgba(224, 242, 171, .92));
  box-shadow: 0 20px 0 rgba(55, 109, 21, .18), 0 28px 46px rgba(42, 87, 19, .2);
}

body[data-page="home"] .site-footer {
  border-top: 0;
}

@media (max-width: 720px) {
  body[data-page="home"] .welcome-section { padding-top: 70px; }
  body[data-page="home"] .welcome-copy { padding: 26px 22px; border-width: 5px; }
  body[data-page="home"] .home-finale { width: calc(100% - 24px); padding: 34px 22px; }
}