/* Pocket Wex landing page (index.php). Builds on legal/legal.css (scene, paper cards, tiles, rows, buttons). */

/* ------------------------------------------------------------------ day / night by hand (the sun and the moon, or the button) */
:root[data-mode="night"] {
  --ink: #F1E6D6; --soft: #C9B7A3; --paper: #2B241F; --cream: #342B25; --edge: #5E4A37; --page: #17120F; --green-d: #8FD79F;
  --sky-a: #0E1236; --sky-b: #2B2B72; --sky-c: #B56A7C; --h3: #27503F; --h2: #1D3F33; --h1: #142C23; --water-a: #2E5F92; --water-b: #1B3E66;
  --glow: rgba(255, 180, 90, .75); --prop: brightness(.62) saturate(.85); --night: 1; --shadow: 0 10px 30px rgba(0, 0, 0, .45); color-scheme: dark;
}
:root[data-mode="day"] {
  --ink: #6B4A3C; --soft: #7D5E4B; --paper: #FFFBF0; --cream: #FFF3DA; --edge: #D9B98E; --page: #FFF3DA; --green-d: #3E8E5A;
  --sky-a: #7EC4F0; --sky-b: #C5E6F8; --sky-c: #FFE2B5; --h3: #A6DB8E; --h2: #86CB6A; --h1: #5FAE49; --water-a: #8CCBF5; --water-b: #5BA7E0;
  --glow: rgba(255, 214, 120, .9); --prop: none; --night: 0; --shadow: 0 10px 30px rgba(107, 74, 60, .16); color-scheme: light;
}
body { transition: background-color .5s, color .5s; overflow-x: hidden; }
.scene, .paper, .toc, .tile, .row, .pill, .chip { transition: background-color .5s, border-color .5s, color .5s; }
button { font-family: inherit; }
button:focus-visible, a:focus-visible, .phone:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------------ the hero scene, now to be touched */
.scene { height: clamp(590px, 90vh, 800px); }
.scene .prop { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene .cloud, .scene::after, .fire-glow, .flies { pointer-events: none; }
.sun, .moon { cursor: pointer; pointer-events: auto; }
.hero { inset: 7% 0 auto 0; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero h1 { pointer-events: none; }
.logo-btn { display: inline-block; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.logo-btn:active .logo { transform: scale(.9); }
.tagline { max-width: 560px; margin: 14px auto 0; color: #fff; font: 700 clamp(16px, 2.4vw, 21px)/1.35 var(--display); text-shadow: 0 2px 0 rgba(107, 74, 60, .7), 0 6px 14px rgba(40, 24, 10, .55); pointer-events: none; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 16px; margin-top: 20px; }
.ctas .cta { margin: 0; }
.store { display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px 8px 16px; border: 2px solid #fff; border-radius: 16px; cursor: pointer; text-decoration: none; color: #fff; background: #1d1a18;
  box-shadow: 0 6px 0 #000, 0 14px 22px rgba(40, 24, 10, .35); transition: transform .12s, box-shadow .12s; text-align: left; font: inherit; }
.store svg { width: 32px; height: 32px; flex: none; }
.store span { display: block; font: 800 22px/1.05 var(--display); } .store small { display: block; font: 700 11.5px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.store:hover { transform: translateY(2px); box-shadow: 0 4px 0 #000, 0 10px 16px rgba(40, 24, 10, .3); } .store:active { transform: translateY(6px); box-shadow: 0 0 0 #000; }
.hint { left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; z-index: 5; color: #fff; font: 800 15px var(--display); text-shadow: 0 2px 6px rgba(0, 0, 0, .55); animation: hintPulse 2.6s ease-in-out infinite; pointer-events: none; transition: opacity .6s; }
.hint.gone { opacity: 0; }
.scene .prop, .hills { transition: translate .35s ease-out; }
.tree-l, .tree-b { translate: calc(var(--lean, 0px) * 1.6) 0; } .tree-r, .mill { translate: calc(var(--lean, 0px) * -1.2) 0; } .hills { translate: calc(var(--lean, 0px) * .4) 0; }
@keyframes hintPulse { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-4px); opacity: 1; } }

.hud { top: 14px; left: 14px; z-index: 6; display: flex; gap: 8px; }
.topbtns { top: 14px; right: 14px; z-index: 6; display: flex; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 3px solid var(--edge); box-shadow: 0 6px 14px rgba(60, 40, 20, .2); backdrop-filter: blur(6px); }
.pill img { width: 26px; height: 26px; } .pill b { font: 800 17px/1 var(--display); min-width: 1.2ch; }
.pill.soft { box-shadow: none; } .pill.bump { animation: bump .35s ease-out; }
@keyframes bump { 50% { transform: scale(1.18); } }
.round { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; cursor: pointer; text-decoration: none; color: var(--ink); font: 800 14px var(--display);
  background: color-mix(in srgb, var(--paper) 90%, transparent); border: 3px solid var(--edge); box-shadow: 0 6px 14px rgba(60, 40, 20, .2); backdrop-filter: blur(6px); transition: transform .15s; }
.round:hover { transform: translateY(-2px); } .round:active { transform: scale(.94); }
button.round { padding: 0; width: 46px; }
.ico-sun { width: 22px; height: 22px; border-radius: 50%; background: #FFC94A; box-shadow: 0 0 0 4px rgba(255, 201, 74, .35); transition: all .4s; }
:root[data-mode="night"] .ico-sun { background: transparent; box-shadow: inset -7px -3px 0 0 #F3E7C2; transform: rotate(-20deg); }

/* ------------------------------------------------------------------ effects layer */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.fxp { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: 0; will-change: transform, opacity; }
.fxp.dot { width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; }
.bubble { position: absolute; padding: 6px 13px; border-radius: 16px; background: #fff; color: #6B4A3C; font: 800 15px/1.2 var(--display); border: 2px solid #D9B98E; box-shadow: 0 8px 16px rgba(60, 40, 20, .25); white-space: nowrap; transform: translate(-50%, -100%); will-change: transform, opacity; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 210; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 20px; border-radius: 18px; background: var(--green-d); color: #fff;
  font: 800 17px/1.25 var(--display); border: 3px solid #fff; box-shadow: 0 10px 24px rgba(40, 24, 10, .35); text-align: center; animation: toastIn .35s cubic-bezier(.2, 1.4, .4, 1); }
:root[data-mode="night"] .toast { color: #10281a; }
.toast.out { opacity: 0; transform: translate(-50%, 14px); transition: all .35s; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px) scale(.9); } }

/* ------------------------------------------------------------------ sections */
html.js .reveal.hide { opacity: 0; transform: translateY(26px); }
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1), background-color .5s, border-color .5s; }
main { max-width: 980px; }
.toc a.on { background: var(--green-d); color: #fff; } :root[data-mode="night"] .toc a.on { color: #10281a; }

/* world viewer */
.viewer { display: grid; grid-template-columns: minmax(250px, 310px) 1fr; gap: 30px; align-items: center; margin-top: 18px; }
.viewer > * { min-width: 0; }
.phone-wrap { display: grid; justify-items: center; gap: 14px; perspective: 1000px; }
.phone { position: relative; width: 100%; max-width: 300px; aspect-ratio: 540 / 1170; border-radius: 40px; border: 9px solid #3A2C26; background: #1b1411; overflow: hidden; touch-action: pan-y; cursor: grab;
  box-shadow: 0 0 0 3px #6d584b, 0 26px 40px rgba(60, 40, 20, .35), inset 0 0 0 2px rgba(255, 255, 255, .08); transition: transform .25s ease-out; transform-style: preserve-3d; user-select: none; }
.phone:active { cursor: grabbing; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .55s ease, transform .8s ease; -webkit-user-drag: none; pointer-events: none; }
.shot.on { opacity: 1; transform: none; }
.dots { display: flex; gap: 7px; } .dots i { width: 9px; height: 9px; border-radius: 99px; background: var(--edge); cursor: pointer; transition: all .3s; } .dots i.on { width: 26px; background: var(--green); }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 9px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 9px; border-radius: 999px; cursor: pointer; font: 800 15px/1 var(--display); color: var(--ink); background: var(--cream); border: 2px solid var(--edge); transition: transform .15s, background-color .25s, color .25s; }
.chip img { width: 26px; height: 26px; } .chip:hover { transform: translateY(-2px); border-color: var(--green); }
.chip.on { background: var(--green-d); border-color: var(--green-d); color: #fff; box-shadow: 0 6px 12px rgba(40, 24, 10, .2); } :root[data-mode="night"] .chip.on { color: #10281a; }
.caption { margin-top: 18px; padding: 18px 20px; border-radius: 22px; background: var(--cream); border: 2px dashed var(--edge); min-height: 128px; }
.caption h3 { margin: 0 0 4px; font-size: 24px; } .caption p { margin: 0; font-size: 18px; }
.caption.swap h3, .caption.swap p { animation: capIn .45s ease both; } .caption.swap p { animation-delay: .06s; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } }

/* farm */
.plot.nudge .ground { animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 50% { filter: brightness(1.18) saturate(1.2); transform: scale(1.03); } }
.farm { margin-top: 14px; }
.farm-top { display: flex; align-items: center; gap: 12px; }
.lvl { flex: none; padding: 5px 14px; border-radius: 999px; font: 800 17px/1 var(--display); color: #5a3b10; background: var(--yellow); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(60, 40, 20, .2); }
.xp { flex: 1; height: 16px; border-radius: 99px; overflow: hidden; background: var(--cream); border: 2px solid var(--edge); } .xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #C4E86E); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 14px; padding: 18px 16px 12px; border-radius: 28px; border: 3px solid var(--edge); background: linear-gradient(180deg, var(--h3), var(--h2)); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .06); }
.plot { position: relative; aspect-ratio: 188 / 150; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.plot:active { transform: scale(.96); }
.plot .ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: filter .2s; } .plot:hover .ground { filter: brightness(1.08); }
.plot .crop { position: absolute; width: 74.5%; left: 12.8%; bottom: 1.3%; transform-origin: 50% 95%; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(40, 24, 10, .2)); animation: grow .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes grow { from { transform: scale(.3); opacity: .2; } }
.plot.ready .crop { animation: ready 1.1s ease-in-out infinite; }
@keyframes ready { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07) translateY(-3%); } }
.plot.ready::after { content: "✦"; position: absolute; right: 12%; top: 4%; font-size: 26px; color: #FFD84A; text-shadow: 0 0 10px #fff, 0 0 18px #FFB02E; animation: twinkle2 1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes twinkle2 { from { transform: scale(.7) rotate(0); opacity: .6; } to { transform: scale(1.15) rotate(30deg); opacity: 1; } }
.plot .prog { position: absolute; left: 20%; right: 20%; bottom: 4%; height: 7px; border-radius: 9px; background: rgba(40, 24, 10, .28); overflow: hidden; pointer-events: none; } .plot .prog i { display: block; width: 0; height: 100%; background: #C4E86E; transition-property: width; transition-timing-function: linear; }
.plot.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
.pick-label { margin: 16px 0 6px; }
.seeds { display: flex; gap: 8px; flex-wrap: wrap; }
.seed { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 7px; border-radius: 16px; cursor: pointer; font: 800 14.5px/1.1 var(--display); color: var(--ink); background: var(--cream); border: 2px solid var(--edge); transition: transform .15s, border-color .2s, background-color .2s; text-align: left; }
.seed img { width: 32px; height: 32px; } .seed small { display: block; font: 700 11.5px/1.2 var(--display); color: var(--soft); }
.seed:hover { transform: translateY(-2px); } .seed.on { border-color: var(--green-d); background: color-mix(in srgb, var(--green) 24%, var(--paper)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 40%, transparent); }
.bag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-height: 40px; }
.bagitem { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 5px; border-radius: 999px; background: var(--cream); border: 2px solid var(--edge); font: 800 15px/1 var(--display); animation: grow .4s cubic-bezier(.2, 1.6, .4, 1); }
.bagitem img { width: 26px; height: 26px; }

/* fishing */
.fishing { margin-top: 14px; }
.pond { position: relative; height: clamp(210px, 34vw, 280px); border-radius: 28px; overflow: hidden; border: 3px solid var(--edge); background: linear-gradient(180deg, var(--water-a), var(--water-b)); box-shadow: inset 0 -16px 30px rgba(0, 20, 60, .2); user-select: none; }
.water { position: absolute; inset: 0; }
.rip { position: absolute; width: 60px; height: 22px; border: 3px solid rgba(255, 255, 255, .6); border-radius: 50%; opacity: 0; animation: ripple 5s ease-out infinite; }
.r1 { left: 18%; top: 34%; } .r2 { left: 68%; top: 58%; animation-delay: -1.7s; } .r3 { left: 40%; top: 74%; animation-delay: -3.2s; }
@keyframes ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.reeds i { position: absolute; bottom: -8px; width: 12px; height: 46%; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #4C9A4F, #7BC96F); transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite; }
.reeds i:nth-child(1) { left: 3%; height: 56%; } .reeds i:nth-child(2) { left: 7%; animation-delay: -1s; } .reeds i:nth-child(3) { right: 4%; height: 60%; animation-delay: -2s; } .reeds i:nth-child(4) { right: 9%; height: 40%; animation-delay: -3s; }
.float { position: absolute; left: 50%; top: 54%; width: 70px; height: 80px; margin: -40px 0 0 -35px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 3; }
.float[hidden] { display: none; }
.float .bob { position: absolute; left: 50%; top: 26px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; border: 2px solid #5a3b2c; background: linear-gradient(180deg, #E96A5F 50%, #fff 50%); box-shadow: 0 4px 6px rgba(0, 20, 60, .3); animation: bobIdle 2.2s ease-in-out infinite; }
.float::before { content: ""; position: absolute; left: 50%; top: 56px; width: 36px; height: 12px; margin-left: -18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); }
.float.bite .bob { animation: dip .32s ease-in-out infinite; } .float.bite::after { content: "!"; position: absolute; left: 50%; top: -6px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #D8564B; font: 800 22px/1 var(--display); box-shadow: 0 6px 12px rgba(0, 20, 60, .3); animation: bump .5s infinite; }
@keyframes bobIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes dip { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(18px); } }
.status { position: absolute; left: 0; right: 0; top: 14px; text-align: center; color: #fff; font: 800 20px/1.2 var(--display); text-shadow: 0 2px 0 rgba(0, 20, 60, .4), 0 6px 12px rgba(0, 20, 60, .3); pointer-events: none; }
.jumper { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none; z-index: 4; filter: drop-shadow(0 8px 6px rgba(0, 20, 60, .35)); }
.jumper[hidden] { display: none; }
.fishing > .cta { margin: 14px 0 0; } .fishing > .cta.hot { --c: #D8564B; animation: bump .5s infinite; }
.album-h { margin-top: 22px; display: flex; justify-content: space-between; align-items: baseline; } .album-h span { font: 800 17px var(--display); color: var(--soft); }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.slot { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 7px; border-radius: 18px; background: var(--cream); border: 2px solid var(--edge); text-align: center; }
.slot img { width: 54px; height: 54px; transition: filter .4s; } .slot span { font: 800 11.5px/1.15 var(--display); color: var(--soft); min-height: 2.3em; display: grid; place-items: center; }
.slot.locked img { filter: brightness(0); opacity: .22; } .slot b { position: absolute; top: 4px; right: 7px; font: 800 12px var(--display); color: var(--green-d); }
.slot[data-r="1"] { border-color: var(--green); } .slot[data-r="2"] { border-color: var(--purple); } .slot[data-r="3"] { border-color: var(--yellow); box-shadow: 0 0 14px color-mix(in srgb, var(--yellow) 60%, transparent); }
.slot.locked { border-color: var(--edge); box-shadow: none; } .slot.fresh { animation: grow .6s cubic-bezier(.2, 1.6, .4, 1); }

/* friends */
button.tile { display: block; width: 100%; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.tile:active { transform: scale(.96); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; text-align: center; }
.stats div { padding: 14px 6px; border-radius: 20px; background: var(--cream); border: 2px dashed var(--edge); }
.stats b { display: block; font: 800 clamp(30px, 6vw, 46px)/1 var(--display); color: var(--green-d); } .stats span { font: 800 13.5px var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }

/* download band + info */
.band { text-align: center; background: linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--yellow) 24%, var(--paper))); }
.band-ico { width: 84px; height: 84px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(60, 40, 20, .25)); } .band h2 { margin-top: 4px; } .band p { max-width: 520px; margin: 8px auto; font-size: 18px; }
.links { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.linkrow { margin: 0; text-decoration: none; color: inherit; transition: transform .15s, border-color .2s; align-items: center; } .linkrow:hover { transform: translateY(-3px); border-color: var(--green); }
.linkrow b { display: block; } .linkrow p { overflow-wrap: anywhere; }
footer { padding-bottom: calc(50px + env(safe-area-inset-bottom)); } footer img { margin-bottom: 8px; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 760px) {
  .viewer { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .phone { max-width: 250px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 8px; scroll-snap-type: x proximity; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: center; }
  .caption { min-height: 0; } .caption h3 { font-size: 21px; } .caption p { font-size: 16.5px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .field { gap: 8px; padding: 14px 10px 8px; }
}
@media (max-width: 560px) {
  .scene { height: clamp(600px, 92vh, 720px); } .hero { inset: 8% 0 auto 0; } .hero .logo { width: 62px; height: 62px; }
  .store span { font-size: 20px; } .store { padding: 7px 20px 7px 13px; } .ctas { margin-top: 16px; }
  .hud { top: 10px; left: 10px; } .topbtns { top: 10px; right: 10px; }
  .pill { padding-right: 11px; } .pill img { width: 22px; height: 22px; } .pill b { font-size: 15px; }
  .round { height: 42px; min-width: 42px; } button.round { width: 42px; }
  .album { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ contrast fixes for the manual night mode */
.ribbon { background: #3E8E5A; }
:root[data-mode="night"] .cta, :root[data-mode="day"] .cta { --c: #3E8E5A; }
.linkrow { font-weight: 400; } .linkrow b { font-weight: 800; }

/* ------------------------------------------------------------------ v2: the hero grows with the pre-registration card, the story comes first */
.scene { height: auto; min-height: clamp(640px, 100svh, 900px); }
.scene > .hero { position: relative; inset: auto; padding: 76px 18px 150px; z-index: 3; }
.hero .logo { width: 68px; height: 68px; }
.hero .tagline { margin-top: 12px; }
.hint { bottom: 16px; }
.topbtns .langsw { backdrop-filter: blur(6px); }

.prereg { position: relative; max-width: 680px; margin: 34px auto 0; padding: 28px 24px 16px; border-radius: 30px; background: var(--paper); border: 3px solid var(--edge); color: var(--ink); text-align: center;
  box-shadow: 0 22px 44px rgba(40, 24, 10, .35), 0 0 0 7px rgba(255, 255, 255, .35); }
.prereg::before { content: ""; position: absolute; inset: 7px; border-radius: 23px; border: 2px dashed color-mix(in srgb, var(--edge) 55%, transparent); pointer-events: none; }
.prereg > * { position: relative; }
.prereg .flag { position: absolute; top: -19px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 7px 22px 8px; border-radius: 14px; background: #E96A5F; color: #fff; border: 3px solid #fff; white-space: nowrap;
  font: 800 16px/1 var(--display); box-shadow: 0 8px 16px rgba(40, 24, 10, .3); animation: flagPulse 2.6s ease-in-out infinite; z-index: 2; }
@keyframes flagPulse { 0%, 100% { transform: translateX(-50%) rotate(-2deg) scale(1); } 50% { transform: translateX(-50%) rotate(2deg) scale(1.06); } }
.prereg h2 { margin: 8px 0 4px; font: 800 clamp(23px, 3.8vw, 31px)/1.15 var(--display); color: var(--ink); }
.pr-step[hidden] { display: none; }
.pr-p { margin: 4px 0 12px; font-size: 16.5px; color: var(--soft); overflow-wrap: anywhere; }
.perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0 0 14px; }
.perks li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 13px 5px 7px; border-radius: 999px; background: var(--cream); border: 2px solid var(--edge); font: 800 13.5px/1.2 var(--display); text-align: left; }
.perks img { width: 24px; height: 24px; flex: none; }
.prform { display: flex; gap: 10px; align-items: stretch; }
.prform input { flex: 1; min-width: 0; margin: 0; }
.prform .cta { margin: 0; white-space: nowrap; padding: 12px 22px 16px; font-size: 17px; }
.prform .cta:disabled { opacity: .6; cursor: wait; }
.consent { display: flex; gap: 9px; align-items: flex-start; margin: 11px 2px 0; text-align: left; text-transform: none; letter-spacing: 0; font: 600 13px/1.4 "Nunito", system-ui, sans-serif; color: var(--soft); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-d); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pr-count { margin: 12px 0 2px; font: 800 14.5px/1.3 var(--display); color: var(--green-d); }
.pr-sub { margin: 10px 0 0; font-size: 14px; color: var(--soft); }
.pr-links { margin: 8px 0 0; font-size: 14px; color: var(--soft); }
.linkbtn { background: none; border: 0; padding: 0; font: 700 14px "Nunito", system-ui, sans-serif; color: var(--green-d); text-decoration: underline; cursor: pointer; }
.linkbtn[disabled] { color: var(--soft); text-decoration: none; cursor: default; }
.pr-err { display: none; margin: 10px 0 0; padding: 9px 14px; border-radius: 14px; color: #fff; background: #D8564B; font: 700 14.5px/1.3 "Nunito", system-ui, sans-serif; }
.pr-err.show { display: block; animation: shake .35s; }
.codebox { text-align: center; font: 800 26px/1 var(--display) !important; letter-spacing: .35em; text-indent: .35em; }
.founder { display: inline-grid; justify-items: center; margin: 8px 0 2px; padding: 8px 38px 12px; border-radius: 22px; color: #5a3b10; border: 3px solid #fff; background: linear-gradient(135deg, #FFE9A0, #FFC94A);
  box-shadow: 0 10px 22px rgba(60, 40, 20, .3), 0 0 30px rgba(255, 214, 90, .6); animation: breathe 3s ease-in-out infinite; }
.founder .fn { font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; } .founder b { font: 800 66px/1.05 var(--display); text-shadow: 0 3px 0 rgba(255, 255, 255, .5); }
.ctas { margin-top: 22px; }
.toc a.accent { background: #E96A5F; color: #fff; border-color: #fff; animation: accent 2.4s ease-in-out infinite; } @keyframes accent { 50% { box-shadow: 0 0 0 5px rgba(233, 106, 95, .3); } }
.toc a.accent.on { background: #E96A5F; }

/* the story: chapters as cards that talk */
.story { margin-top: 16px; }
.story-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 16px; margin: 0 -6px; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.story-track::-webkit-scrollbar { display: none; }
.chap { position: relative; flex: 0 0 min(84%, 350px); aspect-ratio: 3 / 4.5; border-radius: 28px; overflow: hidden; scroll-snap-align: center; isolation: isolate; color: #fff;
  background: #2b2b3a var(--img) center 22% / cover no-repeat; border: 3px solid #fff; box-shadow: var(--shadow); transition: transform .35s; }
.chap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 30, .1) 0%, rgba(12, 10, 30, .3) 30%, rgba(10, 8, 24, .94) 78%); }
.chap-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 16px; }
.chap .num { align-self: flex-start; padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); font: 800 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.chap h3 { margin: 8px 0 6px; color: #fff; font: 800 clamp(22px, 5vw, 26px)/1.1 var(--display); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.chap p { margin: 0; font-size: 15px; line-height: 1.42; color: rgba(255, 255, 255, .93); }
.quote { display: none; margin-top: 12px; padding: 9px 13px 10px; border-radius: 14px; background: rgba(255, 255, 255, .15); border-left: 4px solid #FFD84A; backdrop-filter: blur(6px); }
.quote.on { display: block; animation: capIn .4s ease both; }
.quote .q { margin: 0; font: italic 700 15px/1.35 "Nunito", system-ui, sans-serif; color: #fff; min-height: 2.7em; }
.quote .q.typing::after { content: "▍"; margin-left: 1px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.quote .who { display: block; margin-top: 5px; font: 800 12.5px/1.2 var(--display); color: #FFD84A; }
.listen { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 12px; padding: 7px 16px 7px 9px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px/1 var(--display); color: #4a3326; background: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 10px 18px rgba(0, 0, 0, .3); transition: transform .12s, box-shadow .12s; }
.listen img { width: 24px; height: 24px; } .listen:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.story-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; }
.sdots { display: flex; gap: 7px; } .sdots i { width: 9px; height: 9px; border-radius: 99px; background: var(--edge); cursor: pointer; transition: all .3s; } .sdots i.on { width: 26px; background: var(--purple); }
.band.mid { background: linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--purple) 20%, var(--paper))); }
.band .cta { margin-top: 10px; }

@media (max-width: 560px) {
  .scene { min-height: 0; }
  .scene > .hero { padding: 66px 14px 130px; }
  .hero .tagline { font-size: 15.5px; }
  .prereg { margin-top: 30px; padding: 26px 16px 14px; border-radius: 26px; }
  .prform { flex-direction: column; } .prform .cta { width: 100%; justify-content: center; }
  .perks li { font-size: 12.5px; }
  .founder b { font-size: 56px; }
}
.hero .tagline { display: inline-block; padding: 8px 18px 10px; border-radius: 18px; background: rgba(34, 26, 64, .34); backdrop-filter: blur(4px); }

.pr-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 14px; text-align: left; font: 600 13.5px/1.4 "Nunito", system-ui, sans-serif; color: var(--ink); background: color-mix(in srgb, var(--yellow) 24%, var(--paper)); border: 2px solid var(--yellow); }
.consent.need { color: #D8564B; animation: shake .35s; } .consent.need input { outline: 3px solid #D8564B; outline-offset: 1px; }
.prform .cta:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.25); }