/* Desaverse landing — flat-vector + bold charcoal outline + hard-press.
   Mirrors the in-app kit (harness/design/ui-kit.md): the locked icon palette,
   charcoal #1C1D26 outline on every surface, solid deep-stop drop blocks,
   press = travel. Typeface is Cause for all Latin chrome (the landing's own
   choice; the in-app kit uses Cause/Andika) with Amiri kept for Jawi. The old
   glassmorphism skin (blur, gradient pills, dark veil) was the superseded
   style — replaced here.

   The ad-variant pages still read white-on-dark over the kampung world; the
   sales page (.demo) and checkout (.co) wear the bright kit (see the bottom). */

:root {
  /* type — Cause for all Latin chrome (display + text); Jawi stays Amiri */
  --font-display: "Cause", system-ui, sans-serif;  /* logo, titles, buttons */
  --font-text:    "Cause", system-ui, sans-serif;  /* body, reading, inputs */
  --font-head: var(--font-display);                 /* legacy alias */
  --font-body: var(--font-text);                    /* legacy alias */

  /* ink + surfaces */
  --ink:     #1C1D26;
  --surface: #FFFFFF;
  --cream:   #ECE2CC;
  --cream-d: #D8C9A8;
  --ground:  #F6F0E1;   /* bright page ground for the sales + checkout pages */

  /* locked icon palette — base (fill) + deep (hard-shadow block) */
  --c-blue:#2BA8E0;   --c-blue-d:#1C6FB8;
  --c-red:#E85C54;    --c-red-d:#C8413B;
  --c-yellow:#F4C12E; --c-yellow-d:#E1A115;
  --c-green:#5CBF5A;  --c-green-d:#3E9E54;
  --c-purple:#8A5BC2; --c-purple-d:#6A3F9E;
  --c-teal:#2FB9AE;   --c-teal-d:#1E8E86;
  --c-orange:#F2902F; --c-orange-d:#D9701C;
  --c-pink:#F2849F;   --c-pink-d:#D85F80;
  --c-slate:#3C4656;  --c-slate-d:#2A3340;

  /* shape + press */
  --radius:     26px;   /* cards */
  --radius-md:  18px;   /* small cards, frames */
  --radius-btn: 18px;   /* buttons, chips */
  --press:      6px;    /* button drop-block depth */
  --bw:         3px;    /* outline weight (4px on big surfaces) */
  --shadow-card: 0 8px 0 var(--cream-d), 0 12px 18px rgba(28,29,38,.18);

  /* legacy aliases → kit palette (existing selectors recolour in place) */
  --brand:  var(--c-orange);  --brand2: var(--c-pink);
  --gold:   var(--c-yellow);  --green:  var(--c-green);
  --muted:  var(--c-slate);   --line:   var(--cream-d);
  --panel:  var(--surface);   --txt-sh: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ~90% of traffic is mobile ads: nothing may ever scroll sideways */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #14241c;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; }

/* Kampung world backdrop (same bg.jpg as the app). Dark by default for the ad
   variant pages; the bright sales + checkout pages re-wash it (bottom of file). */
.world-bg {
  position: fixed; inset: 0; z-index: -3;
  background: url("https://desaverse.sgp1.cdn.digitaloceanspaces.com/assets/base/ui/bg.jpg") center/cover no-repeat;
  transform: scale(1.08);
}

.world-veil {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(10,24,18,.45) 0%, rgba(10,24,18,.66) 55%, rgba(8,18,14,.84) 100%);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 0.6em;
  color: var(--ink);
}

/* Fluid type: comfortable at 390px, capped at the previous mobile sizes;
   the >=768px overrides below keep desktop punchy */
h1 { font-size: clamp(1.9rem, 1.05rem + 3.5vw, 2.1rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 1.6rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }
.no-mb { margin-bottom: 0; }

/* white text for headings/leads that sit straight on the dark world (variants) */
.on-world { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.center { text-align: center; }

.jawi {
  font-family: "Amiri", serif;
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 700;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
/* Reading column: ~66ch keeps long-form copy in the comfortable measure. */
.container.narrow { max-width: 660px; }

.section { padding: 40px 0; }

.section-lead { font-size: 1.02rem; max-width: 720px; color: var(--c-slate); }
.section-lead.center { margin-left: auto; margin-right: auto; }
.on-world.section-lead { color: rgba(255, 255, 255, .92); }

/* Card — flat white surface, charcoal outline, hard cream block */
.panel {
  background: var(--surface);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}

.panel h2, .panel h3 { color: var(--ink); }
.panel p { color: var(--ink); }
/* Payoff line in a wall of copy: heavier ink gives the eye a scan anchor */
.panel strong, .story-quote strong, .compare-table strong { color: var(--ink); font-weight: 800; }

/* The hard-press button (signature component) — flat fill, charcoal outline,
   solid deep-stop drop block, travels on press. */
.btn {
  --fill: var(--c-orange);
  --deep: var(--c-orange-d);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: var(--fill);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-btn);
  box-shadow: 0 var(--press) 0 var(--deep), 0 calc(var(--press) + 3px) 10px rgba(28,29,38,.22);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}

.btn-primary { --fill: var(--c-orange); --deep: var(--c-orange-d); color: #fff; }

.btn:hover { transform: translateY(-1px); }
.btn:active {                          /* press → drop into the block */
  transform: translateY(calc(var(--press) - 1px));
  box-shadow: 0 1px 0 var(--deep), 0 2px 5px rgba(28,29,38,.3);
}

.btn-big { font-size: 1.15rem; padding: 18px 36px; --press: 7px; }
/* >=44px tall on touch */
.btn-small { font-size: 0.92rem; padding: 11px 20px; }

/* 1. Header — flat solid bar, charcoal underline, sticky */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--ink);
}

.header-wordmark { display: block; }

/* 2. Hero — tight at 390px so headline + sub + CTA land in the first viewport */
.hero { padding: 28px 0 44px; }

.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero-copy h1 { font-size: clamp(1.9rem, 1rem + 3.7vw, 2.15rem); color: var(--ink); }

.hero-sub {
  font-size: clamp(0.98rem, 0.9rem + 0.6vw, 1.08rem);
  color: var(--c-slate);
  max-width: 540px;
}

.trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 20px 0 0;
}

.trust-strip li {
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 3px 0 var(--cream-d);
}

.hero-visual { position: relative; }

/* Browser-style frame around real screenshots — flat outline + hard block */
.shot-frame {
  margin: 0;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 0 var(--cream-d), 0 12px 18px rgba(28,29,38,.18);
  overflow: hidden;
}

.shot-frame-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: var(--cream);
  border-bottom: var(--bw) solid var(--ink);
}

.shot-frame-bar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff;
}

.shot-frame-bar i:first-child { background: var(--c-red); }
.shot-frame-bar i:nth-child(2) { background: var(--c-yellow); }
.shot-frame-bar i:nth-child(3) { background: var(--c-green); }

.shot-frame img { display: block; width: 100%; }
/* Portrait (4:5) game shots: full-width on mobile, capped + centred on desktop
   so the tall image doesn't dominate its feature-row column. */
.shot-frame-portrait { max-width: 360px; margin-left: auto; margin-right: auto; }

.shot-frame figcaption {
  font-family: var(--font-text);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-slate);
  background: var(--surface);
  padding: 10px 14px;
}

.hero-sprite {
  position: absolute;
  width: 72px;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(28,29,38,.28));
  z-index: 2;
}

.hero-sprite-left { left: 0; bottom: -12px; }
.hero-sprite-right { right: 0; bottom: -10px; width: 64px; }

/* Characters — cream outlined cards, ink caption */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.character-card {
  margin: 0;
  background: var(--cream);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 0 var(--cream-d);
  padding: 18px 12px 12px;
  text-align: center;
}

.character-card img { width: 110px; height: 110px; object-fit: contain; }

.character-card figcaption {
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 8px;
  color: var(--ink);
}

/* Real gameplay shots: swipeable snap carousel on mobile, grid on desktop */
.shots-row {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.shots-row::-webkit-scrollbar { display: none; }

.shots-row .shot-frame {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Game module tiles — cream frame, charcoal outline, hard cream block; the
   flat colour icon is the hero (mirrors the in-app course grid). */
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.module {
  position: relative;
  background: var(--cream);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 7px 0 var(--cream-d), 0 11px 16px rgba(28,29,38,.16);
  padding: 16px 14px;
  min-height: 150px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 6px;
  color: var(--ink);
}

.module-icon {
  width: 72px; height: 72px;
  object-fit: contain;
}

.module h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.module p { margin: 0; color: var(--c-slate); font-weight: 600; font-size: 0.85rem; }

/* the per-game gradients are gone (flat kit) — the icon carries the colour */
.m-huruf, .m-tangkap, .m-kembar, .m-sukukata, .m-eja,
.m-roda, .m-pasar, .m-menulis, .m-cerita { background: var(--cream); }

.stats-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 0 var(--cream-d);
  padding: 14px 24px;
  min-width: 104px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1.1;
}

.stat-label { font-size: 0.82rem; font-weight: 700; color: var(--c-slate); }

.section-cta { text-align: center; margin-top: 32px; }

/* Steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.step {
  background: var(--surface);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.step h3 { color: var(--ink); }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 10px;
  box-shadow: 0 4px 0 var(--c-yellow-d);
}

.step p { margin: 0; color: var(--c-slate); font-size: 0.95rem; }

/* Curriculum checklist */
.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--ink);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-green);
  border: 2px solid var(--ink);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 9px;
  height: 5px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}

/* Value stack + offer */
.value-stack {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: grid;
  gap: 14px;
}

.value-stack .panel { padding: 20px 22px; }
.value-stack h3 { margin-bottom: 6px; }
.value-stack p { margin: 0; font-size: 0.95rem; }

.anchor-value {
  margin-top: 10px !important;
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink) !important;
  background: var(--c-yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
}

.offer-box {
  background: var(--surface);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--c-yellow-d), 0 12px 22px rgba(28,29,38,.20);
  padding: 32px 24px;
  text-align: center;
  color: var(--ink);
}

.offer-price {
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1;
  margin: 4px 0;
  color: var(--c-orange);
}

.offer-currency { font-size: 1.8rem; vertical-align: super; }

.offer-once { font-weight: 800; color: var(--ink); margin-bottom: 16px; }

.offer-anchor { font-weight: 600; color: var(--c-slate); margin-bottom: 18px; }

.offer-bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  max-width: 400px;
  text-align: left;
}

.offer-bullets li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.offer-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--c-yellow);
  border: 2px solid var(--ink);
}

/* Guarantee */
.guarantee-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.guarantee-card h2 { font-size: 1.3rem; }

.guarantee-badge {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-green); color: #fff;
  border: var(--bw) solid var(--ink);
  font-size: 1.4rem; font-weight: 900; line-height: 1;
}

/* Social proof — live game-play count line (hero + offer) */
.social-proof {
  margin: 14px 0 0;
  font-weight: 700;
  color: var(--c-slate);
  font-size: 0.92rem;
}
.social-proof strong { color: var(--c-orange-d); font-weight: 800; }

/* FAQ */
.faq { margin-top: 24px; }

.faq-item {
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  box-shadow: 0 5px 0 var(--cream-d);
  overflow: hidden;
  color: var(--ink);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  position: relative;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--c-orange);
  border-bottom: 3px solid var(--c-orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.faq-item p {
  padding: 0 20px 16px;
  margin: 0;
  color: var(--c-slate);
  font-size: 0.95rem;
}

/* Final CTA (default = dark world; .demo overrides to ink) */
/* ---- pakej chooser: two or three options, with the bundle dominant. Shared
   by the jawi, matematik, and matematik-sains sales pages; page-scoped styles
   choose the two-column layout when a subject-only third option is irrelevant. ---- */
.pakej-grid { list-style: none; padding: 18px 0 0; margin: 0 auto; max-width: 940px;
  display: grid; gap: 16px; align-items: stretch; }
.pakej { position: relative; background: var(--surface); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius-md);
  box-shadow: 0 5px 0 var(--cream-d); padding: 22px 18px 20px; text-align: center;
  display: flex; flex-direction: column; }
.pakej h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pakej-price { font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: 2.3rem; line-height: 1; margin: 4px 0 6px; }
.pakej-price span { font-size: 1rem; vertical-align: .55em; margin-right: 2px; }
.pakej-note { color: var(--c-slate); font-size: .86rem; margin: 0 0 18px; min-height: 1.2em; }
.pakej-note s { opacity: .75; }
.pakej-pick { margin-top: auto; display: inline-block; font-family: var(--font-display);
  font-weight: 800; text-decoration: none; color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--radius-btn);
  padding: 12px 18px; box-shadow: 0 4px 0 var(--cream-d); transition: transform .1s, box-shadow .1s; }
.pakej-pick:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
.pakej .btn { margin-top: auto; }
/* the bundle — dominant + pre-highlighted as the obvious pick */
.pakej-best { border-width: 4px; box-shadow: 0 7px 0 var(--c-yellow-d); background: #FFFDF5; }
.pakej-best .pakej-price { color: var(--c-orange-d); font-size: 2.7rem; }
.pakej-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--c-green); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px; font-family: var(--font-display);
  font-weight: 800; font-size: .72rem; padding: 4px 13px; box-shadow: 0 3px 0 var(--c-green-d); }
@media (min-width: 760px) {
  .pakej-grid { grid-template-columns: 1fr 1.22fr 1fr; align-items: center; gap: 20px; }
  .pakej-best { transform: scale(1.04); z-index: 1; }
}

.section-final-cta { text-align: center; padding: 72px 0; }

.final-cta-inner { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.final-cta-inner h2 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.final-cta-inner p { color: rgba(255, 255, 255, .92); }

/* Footer — flat cream, charcoal top line */
.site-footer {
  background: var(--cream);
  border-top: var(--bw) solid var(--ink);
  text-align: center;
  padding: 36px 20px 88px;
  color: var(--ink);
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-contact { font-size: 0.85rem; color: var(--c-slate); margin: 0 0 8px; }
.footer-contact a { color: var(--ink); text-decoration: underline; }
.footer-copy { font-size: 0.85rem; color: var(--c-slate); margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 10px; font-size: 0.9rem; }
.footer-links a { color: var(--ink); text-decoration: underline; }

/* Sticky mobile CTA — flat surface bar, charcoal top line */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--bw) solid var(--ink);
  box-shadow: 0 -6px 18px rgba(28,29,38,.16);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}

.sticky-cta.visible { transform: translateY(0); visibility: visible; }

.sticky-cta .btn { white-space: nowrap; flex-shrink: 0; }

.sticky-cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0; /* >=44px tap target */
}

/* Desktop — sizes/layout from the pre-mobile-first identity */
@media (min-width: 768px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.9rem; }

  .section { padding: 56px 0; }

  .site-header { padding: 14px 40px; }

  .btn-small { padding: 10px 20px; }

  .hero { padding: 64px 0 80px; }

  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .hero-copy { flex: 1 1 50%; }
  .hero-copy h1 { font-size: 2.7rem; }
  .hero-visual { flex: 1 1 50%; }

  .hero-sprite { width: 130px; }
  .hero-sprite-left { left: -22px; bottom: -26px; }
  .hero-sprite-right { right: -16px; bottom: -20px; width: 110px; }

  .characters-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .character-card img { width: 130px; height: 130px; }

  .shots-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .module-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .module { padding: 20px; min-height: 178px; }
  .module-icon { width: 92px; height: 92px; }
  .module h3 { font-size: 1.3rem; }
  .module p { font-size: 0.9rem; }

  .panel { padding: 34px 38px; }

  .steps { grid-template-columns: repeat(3, 1fr); }

  .guarantee-card {
    flex-direction: row;
    text-align: left;
  }

  .offer-box { padding: 44px 48px; }

  .sticky-cta { display: none; }

  .site-footer { padding-bottom: 36px; }
}

/* ---------------------------------------------------------------------------
   Shared page utilities (offer lead, minimal hero, compare table, …).
   Same tokens, same identity. */

/* Optional lead line above the price in offer_box(lead=...) */
.offer-lead { font-weight: 700; color: var(--ink); margin-bottom: 4px; }

/* Copy-only hero (no screenshot, no sprites). Default = dark world. */
.hero-minimal { padding: 36px 20px 28px; max-width: 760px; margin: 0 auto; }
.hero-minimal h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero-minimal p { color: rgba(255, 255, 255, .92); }

/* Two-way comparison: stacked panels on mobile, side by side on desktop */
.compare-table { display: grid; gap: 14px; margin: 24px 0; }
.compare-table > div {
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
}
.compare-table h3 { color: var(--ink); }
.compare-table p, .compare-table li { color: var(--c-slate); }

/* One huge number with a label under it */
.big-stat { text-align: center; margin: 28px 0; }
.big-stat .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 2rem + 6vw, 5rem);
  line-height: 1;
  color: var(--c-orange);
}
.big-stat .label {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Testimonial / story panel with a yellow spine */
.story-quote {
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-left: 8px solid var(--c-yellow);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 0 var(--cream-d);
  padding: 20px 22px;
  margin: 18px 0;
}
.story-quote p { color: var(--c-slate); }
.story-quote p:last-child { margin-bottom: 0; }

/* li.yes = green check, li.no = red cross — pure CSS, no glyphs */
.check-cross-list { list-style: none; padding: 0; margin: 18px 0; }
.check-cross-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-weight: 600;
}
.check-cross-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.check-cross-list li.yes::before { background: var(--c-green); }
.check-cross-list li.no::before { background: var(--c-red); }
.check-cross-list li.yes::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 9px;
  height: 5px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
.check-cross-list li.no::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 8.5px;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(45deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%);
}

/* Numbered vertical steps (auto-numbered, unlike the 3-up .steps grid) */
.step-flow { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; counter-reset: stepflow; }
.step-flow li {
  position: relative;
  counter-increment: stepflow;
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 0 var(--cream-d);
  padding: 18px 18px 18px 66px;
}
.step-flow li::before {
  content: counter(stepflow);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--c-yellow-d);
}
.step-flow li h3 { margin: 0 0 4px; color: var(--ink); }
.step-flow li p { margin: 0; color: var(--c-slate); font-size: 0.95rem; }

@media (min-width: 768px) {
  .compare-table { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-minimal { padding: 64px 20px 40px; }
}

/* Purchase-first CTA stack (shared by all pages) */
.cta-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }

/* ===========================================================================
   BRIGHT PAGES — the sales page (.demo) and the checkout (.co) wear the in-app
   flat-vector kit: warm light ground, faint kampung world, ink-on-cream chrome.
   (The .demo page-scoped layout lives in jawi_prasekolah.html's <style>.)
   =========================================================================== */

/* Re-wash the world: bright sky band up top fading to a near-solid warm ground
   so flat ink-on-light chrome reads cleanly down the long sales page. */
body:has(.demo) .world-bg,
body:has(.co) .world-bg,
body:has(.ebook) .world-bg,
body:has(.guide) .world-bg,
body:has(.front-home) .world-bg {
  filter: saturate(1.03) brightness(1.05);
  transform: scale(1.04);
}
body:has(.demo) .world-veil,
body:has(.co) .world-veil,
body:has(.ebook) .world-veil,
body:has(.guide) .world-veil,
body:has(.front-home) .world-veil {
  background: linear-gradient(180deg,
    rgba(182, 227, 246, .30) 0%,
    rgba(246, 240, 225, .90) 36%,
    rgba(246, 240, 225, .96) 100%);
}

/* ---- Public homepage (/) ---- */
.front-home { color: var(--ink); }
.front-hero { padding: 44px 0 54px; }
.front-hero-inner { display: grid; gap: 30px; align-items: center; }
.front-hero-copy { max-width: 610px; }
.front-kicker {
  display: inline-block; margin-bottom: 10px; color: var(--c-orange-d);
  font-family: var(--font-display); font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.front-hero h1 { max-width: 680px; margin-bottom: 14px; font-size: clamp(2.35rem, 9vw, 4.8rem); line-height: .98; }
.front-hero-copy > p { max-width: 570px; color: var(--c-slate); font-size: 1.08rem; }
.front-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; margin-top: 24px; }
.front-login { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-weight: 800; }
.front-hero-shot { align-self: center; }
.front-hero-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.front-programs { padding: 52px 0 68px; background: rgba(246, 240, 225, .74); border-block: var(--bw) solid var(--ink); }
.front-section-head { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.front-section-head h2 { margin-bottom: 0; font-size: clamp(1.8rem, 6vw, 3rem); }
.front-grid { display: grid; gap: 20px; }
.front-card {
  min-width: 0; overflow: hidden; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 4px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-card); transition: transform .12s ease, box-shadow .12s ease;
}
.front-card:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--cream-d); }
.front-card-shot { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--cream); }
.front-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.front-card-copy { padding: 20px; }
.front-card-age {
  display: inline-block; margin-bottom: 8px; padding: 4px 9px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--cream); font-size: .72rem; font-weight: 800; line-height: 1.2;
}
.front-card h3 { margin-bottom: 7px; font-size: 1.45rem; }
.front-card p { min-height: 3.2em; margin-bottom: 15px; color: var(--c-slate); font-size: .92rem; line-height: 1.55; }
.front-card strong { color: var(--c-orange-d); }
.front-card-maths strong { color: var(--c-blue-d); }
.front-card-science strong, .front-card-upkk strong { color: var(--c-green-d); }
.front-upkk-art {
  aspect-ratio: 16 / 9; display: grid; place-content: center; text-align: center;
  border-bottom: 4px solid var(--ink); background: var(--c-green); color: var(--ink);
}
.front-upkk-art span { font-family: var(--font-display); font-size: clamp(2.3rem, 10vw, 4.2rem); font-weight: 900; line-height: .85; }
.front-upkk-art b { color: #fff; font-size: 1.15rem; letter-spacing: .3em; text-shadow: 2px 2px 0 var(--ink); }

.front-close { padding: 70px 0 78px; }
.front-close-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px;
  padding: 30px; background: var(--surface); border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.front-close h2 { max-width: 640px; margin-bottom: 8px; }
.front-close p { margin: 0; color: var(--c-slate); }

@media (hover: hover) and (pointer: fine) {
  .front-card:hover { transform: translateY(-4px); box-shadow: 0 12px 0 var(--cream-d), 0 16px 22px rgba(28,29,38,.2); }
}
@media (min-width: 760px) {
  .front-hero { padding: 78px 0 88px; }
  .front-hero-inner { grid-template-columns: 1.02fr .98fr; gap: 54px; }
  .front-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .front-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .front-card-shot, .front-upkk-art { height: 100%; aspect-ratio: auto; border-right: 4px solid var(--ink); border-bottom: 0; }
  .front-card-copy { display: flex; flex-direction: column; justify-content: center; padding: 24px 22px; }
}

/* ---- Checkout (/beli, /beli/status) ---- */
body:has(.co) .site-header .btn { display: none; }   /* no CTA on the buy page */
body:has(.co) .sticky-cta { display: none !important; }

/* ---- Ebook (/ebook/prasekolah) — reading mode: no sales chrome ---- */
body:has(.ebook) .site-header .btn { display: none; }
body:has(.ebook) .sticky-cta { display: none !important; }
/* the status page uses .hero-minimal/.hero-sub on the bright ground → ink */
body:has(.co) .hero-minimal h1,
body:has(.co) .hero-minimal p,
.co .hero-sub { color: var(--ink); text-shadow: none; }

.checkout-hero { padding: 40px 0 40px; }
.checkout-wrap { max-width: 940px; }

.checkout-head { text-align: center; max-width: 600px; margin: 0 auto 26px; }
.checkout-kicker {
  display: inline-block; font-weight: 800; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-orange-d);
  margin-bottom: 10px;
}
.checkout-head h1 {
  color: var(--ink); margin: 0 0 12px;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 2.4rem); line-height: 1.08;
}
.checkout-h1-accent { color: var(--c-orange); }
.checkout-lede {
  margin: 0;
  font-size: clamp(0.98rem, 0.9rem + 0.6vw, 1.08rem);
  color: var(--c-slate);
}

/* form card first (mobile), reward second; side by side ≥768 */
.checkout-grid { display: grid; gap: 16px; text-align: left; }

.checkout-form-panel p, .checkout-note { color: var(--c-slate); }
.checkout-form-panel strong { color: var(--ink); }

/* --- Form card: the action. Clean white, the pay button is the only pop. --- */
.checkout-form-panel { padding: 18px 16px 20px; }

/* Order summary at the top of the form: what + how much, at a glance. */
.co-summary {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--cream);
  border: var(--bw) solid var(--ink);
}
.co-summary-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); font-size: 1.2rem;
  background: var(--c-yellow);
  border: var(--bw) solid var(--ink);
}
.co-summary-meta { flex: 1 1 auto; min-width: 0; }
.co-summary-name { display: block; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1.2; }
.co-summary-sub { display: block; font-size: .8rem; font-weight: 700; color: var(--c-slate); }
.co-summary-price { flex: 0 0 auto; text-align: right; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; }
.co-summary-price .cur { font-size: .82rem; vertical-align: .35em; margin-right: 1px; }
.co-summary-price .amt { font-size: 1.7rem; }

/* --- Unlock card: what the child gets, yellow hard block like a game pack. --- */
.reward-card {
  position: relative;
  text-align: center;
  box-shadow: 0 8px 0 var(--c-yellow-d), 0 12px 22px rgba(28,29,38,.20);
}
.reward-mascot { position: relative; margin: 0 0 6px; display: flex; justify-content: center; pointer-events: none; }
.reward-mascot::before {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 150px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(244, 193, 46, .45), rgba(244, 193, 46, 0) 66%);
}
.reward-mascot img {
  position: relative; z-index: 1; width: auto; height: 122px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(28,29,38,.22));
  animation: reward-float 4s ease-in-out infinite;
}
@keyframes reward-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.reward-kicker {
  font-weight: 800; color: var(--c-slate); margin: 0 0 12px;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}

.reward-medal {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 auto 20px; padding: 7px 16px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink);
  background: var(--c-yellow);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 0 var(--c-yellow-d);
}
.reward-medal-star { color: var(--ink); }

.reward-games-label { font-weight: 800; color: var(--ink); font-size: .9rem; margin: 0 0 12px; text-align: left; }
.reward-games {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.reward-games[hidden] { display: none; }
.rg {
  position: relative; border-radius: 16px;
  min-height: 78px; padding: 8px 6px 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--cream-d);
}
.rg img { position: relative; width: 44px; height: 44px; object-fit: contain; }
.rg span { position: relative; font-family: var(--font-display); font-weight: 700; font-size: .72rem; line-height: 1; }
.rg-more {
  background: var(--surface); color: var(--ink);
  border: 2px dashed var(--ink); box-shadow: none; justify-content: center; gap: 1px;
}
.rg-more b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.rg-more span { font-size: .68rem; font-weight: 700; color: var(--c-slate); }

.reward-perks { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 9px; }
.reward-perks li { position: relative; padding-left: 28px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.reward-perks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-green); color: #fff;
  border: 2px solid var(--ink);
  font-size: 10px; font-weight: 900; line-height: 17px; text-align: center;
}

/* --- Form panel: quest steps, fields, secure line --- */
.checkout-steps { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 18px; }
.checkout-steps .step { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-weight: 800; font-size: .82rem; color: var(--c-slate); background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.checkout-steps .step b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-size: .8rem; }
.checkout-steps .step-active { color: var(--ink); }
.checkout-steps .step-active b { background: var(--c-orange); color: #fff; }
.checkout-steps .step-line { flex: 1 1 auto; height: 3px; min-width: 14px; background: var(--ink); border-radius: 2px; opacity: .25; }

.checkout-field { display: block; margin-bottom: 16px; }
.checkout-field span { display: block; font-family: var(--font-display); font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.checkout-field em { font-weight: 600; color: var(--c-slate); font-style: normal; }
.checkout-field input {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  transition: box-shadow .12s ease;
}
.checkout-field input:focus { outline: none; box-shadow: 0 0 0 3px var(--c-blue); }
.checkout-submit { display: block; width: 100%; text-align: center; cursor: pointer; margin-top: 4px; }
.checkout-error {
  background: #FCE4E2;
  color: var(--c-red-d);
  border: 2px solid var(--c-red);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.checkout-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 2px; font-size: .86rem; font-weight: 700; color: var(--c-slate); }
.checkout-secure svg { flex: 0 0 auto; width: 15px; height: 15px; fill: var(--c-green-d); }
.checkout-note { font-size: .9rem; margin-top: 10px; }
.checkout-note a { color: var(--c-orange-d); font-weight: 700; }
.checkout-redirect { color: var(--c-slate); margin-top: 4px; }
.co-trust { text-align: center; font-weight: 700; color: var(--c-slate); }
.checkout-help { text-align: center; }

/* Compact guarantee card scoped for the narrow checkout column */
.checkout-guarantee { margin-top: 16px; padding: 14px 16px; gap: 12px; text-align: left; }
.checkout-guarantee h2 { font-size: 1.02rem; margin: 0 0 2px; }
.checkout-guarantee p { margin: 0; font-size: .88rem; color: var(--c-slate); }
.checkout-status .checkout-form-panel { max-width: 520px; margin: 26px auto 0; text-align: center; }

@media (min-width: 768px) {
  .checkout-hero { padding: 48px 0 56px; }
  .checkout-grid { grid-template-columns: .92fr 1.08fr; gap: 22px; align-items: start; }
  .reward-card { order: -1; }   /* form stays first in the DOM (mobile), reward goes left here */
  .checkout-form-panel { padding: 26px 26px 28px; }
  .reward-games { gap: 10px; }
}


/* ---- Parent guides (/panduan/, /istilah/, /data/, /tentang, /metodologi,
   /pembetulan) — reading mode: no sales chrome, answer first ---- */
body:has(.guide) .sticky-cta { display: none !important; }
.guide { padding: 22px 0 56px; }
.guide .g-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.g-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; padding: 0; font-size: .85rem; }
.g-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--c-slate); }
.g-crumbs a { color: var(--c-blue-d); }
.g-crumbs [aria-current] { color: var(--c-slate); }
.guide h1 { font-size: clamp(1.55rem, 1.2rem + 1.8vw, 2.1rem); line-height: 1.2; margin: 0 0 16px; }
.g-answer { background: var(--surface); border: 4px solid var(--ink); border-left-width: 12px; border-left-color: var(--c-orange);
  border-radius: var(--radius-md); padding: 14px 18px 4px; margin: 0 0 20px; }
.g-answer-label { font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-orange-d); margin: 0 0 4px; }
.g-answer p { font-size: 1.05rem; }
.g-hero { margin: 0 0 22px; }
.g-hero img { display: block; width: 100%; height: auto; border: var(--bw) solid var(--ink); border-radius: var(--radius-md); background: var(--cream); }
.g-body { font-size: 1rem; line-height: 1.65; }
.g-body h2 { margin: 1.8em 0 .5em; }
.g-body h3 { margin: 1.4em 0 .4em; }
.g-body ul, .g-body ol, .g-answer ul { padding-left: 1.3em; margin: 0 0 1em; }
.g-body li { margin-bottom: .3em; }
.g-body a, .g-sources a, .g-faq a, .g-children a, .g-review a { color: var(--c-blue-d); text-decoration: underline; overflow-wrap: anywhere; }
.g-body blockquote { margin: 0 0 1.2em; padding: 12px 16px 2px; background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-md); }
.g-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.2em; max-width: 100%; font-size: .93rem; }
.g-body th, .g-body td { border: 2px solid var(--cream-d); padding: 8px 10px; text-align: left; vertical-align: top; min-width: 7em; }
.g-body th { background: var(--cream); }
.g-body [lang="ms-Arab"], .g-faq [lang="ms-Arab"] { font-family: "Amiri", serif; font-size: 1.25em; font-weight: 700; }
.g-children ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.g-children li { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-md); padding: 10px 14px; }
.g-children li a { font-weight: 800; }
.g-children li p { margin: 2px 0 0; font-size: .9rem; color: var(--c-slate); }
.g-faq dt { font-family: var(--font-display); font-weight: 800; margin: 1.1em 0 .25em; }
.g-faq dd { margin: 0; }
.g-sources ol { padding-left: 1.3em; font-size: .93rem; }
.g-sources li { margin-bottom: .6em; }
.g-review { margin-top: 36px; padding: 14px 18px; background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-md); font-size: .92rem; }
.g-review p { margin: 0 0 .4em; }
.g-review p:last-child { margin: 0; }
.g-section { margin-top: 32px; }

/* ===========================================================================
   Poster pages (/prasekolah/<subject>, landing/poster_page.html): a stack of
   full-width 1024x1536 poster images in a phone-width column, paper ground,
   always-on checkout bar. Manifest: landing/poster_pages.py.
   =========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body:has(.poster-page) { background: #F2EBDD; }
body:has(.poster-page) .world-bg,
body:has(.poster-page) .world-veil { display: none; }
/* the bar is fixed over the bottom: keep the footer scrollable clear of it */
body:has(.poster-page) .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

.poster-page {
  max-width: 480px; margin: 0 auto; background: #fff;
  box-shadow: 0 0 40px rgba(28, 29, 38, .16);
}
.poster-page img { display: block; width: 100%; height: auto; }
.poster-link { display: block; }

.poster-proof {
  margin: 0; padding: 12px 16px; text-align: center;
  font-size: .95rem; color: var(--c-slate); background: #F2EBDD;
}
.poster-proof strong { color: var(--ink); }

.poster-cta {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 50; width: 100%; max-width: 480px; text-align: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: var(--bw) solid var(--ink);
  box-shadow: 0 -6px 18px rgba(28, 29, 38, .16);
}
.poster-cta-btn {
  display: flex; width: 100%; padding: 14px 20px; font-size: 1.1rem;
  --press: 6px; --fill: #F46A36; --deep: #202126;
  border-color: #202126;
}
.poster-cta-note { margin: 12px 0 0; font-size: .78rem; line-height: 1.2; color: var(--c-slate); }
.poster-cta-btn.is-disabled { opacity: .45; pointer-events: none; filter: grayscale(1); }