:root{--ink:#1F3A5F;--ink-deep:#0F2440;--muted:#3D5873;--sky:#DDEFF7;--focus:#C2552F;--current:#A8441F;--sun:#FFC93C;--sun-ink:#3A2418;--leaf:#9ED486;--leaf-ink:#1F3A24;--leaf-edge:#3F6B2E;--card:#FFFFFF;--paper:#FFFDF7;--paper-edge:#E7D8BF;--cocoa:#5A3B2E;--nav-tint:#F4FAFD;--line:#E5F0F6;--head-line:#D6E8F1;--card-edge:#C9DCE6;--foot-text:#E6F0F6;--foot-muted:#B9CEDE;--foot-rule:#36557D;--leaf-tint:#E3F2DA;--leaf-tint-ink:#2F5222;--butter:#FFF6CF;--butter-edge:#E6CF7E;--sea:#2B6F95;--cocoa-text:#4E3A2C;--step-tint:#F2F7FA;--drop-edge:#9CB9CC;--soft-button:#EAF3F8}
@font-face{font-family:'Plus Jakarta Sans';src:url(/assets/site/fonts/plus-jakarta-sans.153fc85b.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url(/assets/site/fonts/caveat.15f96380.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Grandstander';src:url(/assets/site/fonts/grandstander.a17701ea.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
/*
 * The MomTesla site (spec §3.5, §5). scripts/build-site.mjs puts the colour tokens (:root, from tokens.ts) and the
 * font-face rules in front of this file and serves it hashed. Rules: no script, no full-viewport-height hero, max width 1200px,
 * 16px gutters on phones, the nav folds into <details> below 900px, tilted cards straighten below 480px,
 * tap targets ≥ 44px, a 3px focus outline.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The footer sits at the bottom of short pages (the 404 page) without any viewport-height section. */
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* The Worker shows one of a pair of live blocks (data-live-when) by toggling `hidden`: no class may undo it. */
[hidden] {
  display: none !important;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
}

p,
ul,
figure {
  margin: 0;
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--ink-deep);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

main {
  flex: 1 0 auto;
}

.nowrap {
  white-space: nowrap;
}

/* A price, a date, an account number or a name never breaks in the middle ("Lestari / S."). */
[data-live] {
  white-space: nowrap;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--card);
  border-radius: 12px;
  font-weight: 800;
}

.skip:focus {
  top: 12px;
}

/* Buttons and standalone links: always at least 44px tall. */
/* Block (not flex) boxes: a link's text may hold inline children (an English name, a live price), and flex would
   drop the spaces around them. */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 16px 26px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--card);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.btn:hover {
  background: var(--ink-deep);
  color: var(--card);
}

.btn-small {
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 15px;
  white-space: nowrap;
}

.text-link {
  display: inline-block;
  min-height: 44px;
  padding: 9px 0;
  font-size: 17px;
  font-weight: 800;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.hand {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--sun-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

/* Header and nav (mockup board Nav). */
.site-head {
  position: relative;
  z-index: 5;
  background: var(--card);
  border-bottom: 2px solid var(--head-line);
}

.head-row {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
}

.logo img {
  width: auto;
  height: 40px;
}

.site-head nav {
  font-size: 16px;
  font-weight: 700;
}

.site-head nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.site-head nav a:hover {
  text-decoration: underline;
}

.site-head nav a.on {
  color: var(--current);
}

.site-head nav a.masuk {
  font-size: 15px;
  font-weight: 800;
}

.nav-wide {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
}

.nav-wide .masuk {
  margin-left: auto;
}

.nav-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--nav-tint);
}

.nav-label {
  color: var(--muted);
}

.menu {
  display: none;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

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

.menu summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.menu[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.menu nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 16px 20px;
  background: var(--card);
  border-bottom: 2px solid var(--head-line);
  box-shadow: 0 18px 30px rgba(31, 58, 95, 0.12);
}

.menu .nav-group {
  flex-direction: column;
  align-items: stretch;
  padding: 6px 14px;
}

.menu nav a {
  min-height: 48px;
}

@media (max-width: 899px) {
  .nav-wide {
    display: none;
  }

  .menu {
    display: block;
  }

  .head-row {
    justify-content: space-between;
  }

  .head-row .btn-small {
    margin-left: auto;
  }
}

/* Hero. */
.hero {
  padding: 40px 0;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
}

.hero-text {
  flex: 1 1 560px;
  min-width: 0;
}

.hero h1 {
  margin-bottom: 12px;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -1px;
  text-wrap: balance;
}

.lead {
  max-width: 52ch;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 19px;
}

.duo {
  flex: 1 1 340px;
  min-width: 0;
}

.duo-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: min(320px, 100%);
  margin: 0 auto;
}

.duo-cards .tilt-card {
  width: 48%;
}

.duo-cards .tilt-right {
  margin-top: 40px;
}

.duo .hand {
  margin-top: 12px;
  color: var(--muted);
  font-size: 24px;
  text-align: center;
}

.duo-single .tilt-card {
  width: min(220px, 60%);
  margin: 0 auto;
}

.tilt-card {
  padding: 8px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 18px 36px rgba(31, 58, 95, 0.18);
}

.tilt-card img {
  width: 100%;
  border-radius: 18px;
}

.tilt-left {
  transform: rotate(-4deg);
}

.tilt-right {
  transform: rotate(4deg);
}

/* Sections. */
.block {
  padding-bottom: 80px;
}

.block-last {
  padding-bottom: 96px;
}

.block h2 {
  margin-bottom: 24px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Hub: products. */
.products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}

.feature {
  display: flex;
  flex: 2 1 520px;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 30px 60px rgba(31, 58, 95, 0.12);
}

.feature-text {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.wordmark {
  align-self: flex-start;
}

.wordmark img {
  width: auto;
  height: 48px;
}

.feature-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.feature-art {
  flex: 0 1 240px;
  margin: 0 auto;
  transform: rotate(3deg);
  background: var(--nav-tint);
}

.side-cards {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.paper-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  border: 2px solid var(--paper-edge);
  border-radius: 6px;
  background: var(--paper);
}

.paper-card h3 {
  color: var(--cocoa);
  font-size: 24px;
  line-height: 1.25;
}

.paper-card p {
  color: var(--muted);
}

.paper-card .text-link {
  align-self: flex-start;
}

/* Dian with a crayon fills the card's foot while the next-product card stays hidden (first in the source, so the
   text can flow around her when the card spans the width; shown last here). */
.paper-art {
  order: 9;
  align-self: flex-end;
  width: 140px;
  margin-top: auto;
}

/* Below 900px the card spans the whole width: Dian sits beside the text instead of under it, so the card has no
   empty foot. */
@media (max-width: 899px) {
  .paper-card {
    display: block;
  }

  .paper-art {
    float: right;
    width: 120px;
    margin: 0 0 8px 16px;
  }

  .paper-card p {
    margin-top: 10px;
  }

  .paper-card .text-link {
    margin-top: 6px;
  }
}

@media (max-width: 479px) {
  .paper-card {
    padding: 22px 20px 16px;
  }

  .paper-art {
    width: 92px;
    margin-left: 12px;
  }
}



.next-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 26px;
  border: 2px dashed var(--muted);
  border-radius: 6px;
}

.next-card h3 {
  color: var(--muted);
  font-size: 18px;
}

.next-card p {
  color: var(--muted);
  font-size: 16px;
}

/* Hub: the trust strip. */
.strip {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
  list-style: none;
  overflow: hidden;
}

.strip li {
  flex: 1 1 260px;
  padding: 26px 28px;
  box-shadow: 2px 0 0 var(--line), 0 2px 0 var(--line);
}

.strip h3 {
  margin-bottom: 6px;
  font-size: 19px;
}

.strip p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/*
 * "Where to go next" (layout/MoreLinks.tsx): whole-row links with a chevron, one column on phones, a row of columns
 * on wide screens. On the hub a white panel like the trust strip; inside a white box (/keamanan) plain rows.
 */
.more {
  margin-top: 40px;
}

.block .more-title {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

.more-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
  list-style: none;
  overflow: hidden;
}

/* Side by side only where three columns have room for a label and its note. */
@media (min-width: 900px) {
  .more-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.more-list li {
  display: flex;
  box-shadow: 2px 0 0 var(--line), 0 2px 0 var(--line);
}

.more-list a {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 16px 52px 16px 22px;
  text-decoration: none;
}

/* The chevron: drawn with two borders, like the menu button's. */
.more-list a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.more-list a:hover .more-label {
  text-decoration: underline;
}

.more-list a:focus-visible {
  outline-offset: -4px;
}

.more-label {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.more-note {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.more-list.more-plain {
  grid-template-columns: 1fr;
  margin-top: 16px;
  border-radius: 0;
  background: none;
  box-shadow: 0 -2px 0 var(--line);
}

.more-plain li {
  box-shadow: 0 2px 0 var(--line);
}

.more-plain a {
  padding-left: 0;
}

.legal-box .more {
  margin-top: 0;
}

/* Shared blocks of the Wonderwhy pages (mockup boards Home, Belajar, Harga, CaraBayar). */
.block-top {
  padding-top: 80px;
}

.narrow {
  max-width: 908px;
}

.center {
  text-align: center;
}

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

.small-print {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}

/* Real content set off a little (the cara-bayar anti-fraud line and invoice glossary): body size, not small print. */
.pay-note {
  margin-top: 14px;
  font-size: 16px;
}

.ww-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.ww-mark img {
  width: auto;
  height: 44px;
}

.shot-card img {
  border-radius: 14px;
}

.badge-leaf {
  background: var(--leaf-tint);
  color: var(--leaf-tint-ink);
}

.btn-sun {
  background: var(--sun);
  color: var(--sun-ink);
}

.btn-sun:hover {
  background: var(--sun);
  color: var(--ink-deep);
}

/* A row of plain facts, quotable (the Home fact strip; the Harga "kalau dihitung" strip). */
.facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
  overflow: hidden;
}

.facts > div {
  flex: 1 1 200px;
  padding: 22px 26px;
  box-shadow: 2px 0 0 var(--line), 0 2px 0 var(--line);
}

.facts dt {
  color: var(--muted);
  font-size: 16px;
}

.facts dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.facts-big dt {
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.facts-big dd {
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}

/* Text beside pictures. */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
}

.split-text {
  display: flex;
  flex: 1 1 460px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.split-text h2 {
  margin-bottom: 0;
}

.split-text p {
  max-width: 58ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.shot-pair {
  display: flex;
  flex: 1 1 380px;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}

.shot-pair > * {
  width: 48%;
  max-width: 300px;
}

.shot-pair > :last-child {
  margin-top: 36px;
}

.birthday-card {
  max-width: 200px;
  background: var(--butter);
}

/* Home hero: the letter to Bunda and the picture stack. */
.ww-hero {
  align-items: flex-start;
}

.letter {
  flex: 1 1 560px;
  min-width: 0;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 4.5vw, 60px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 30px 60px rgba(31, 58, 95, 0.14);
  transform: rotate(-0.8deg);
}

.letter h1 {
  margin-bottom: 18px;
}

.letter .lead {
  max-width: 56ch;
  margin-bottom: 14px;
}

.letter-greet {
  margin-bottom: 6px;
  color: var(--sea);
  font-size: 36px;
  line-height: 1.1;
}

.letter-note {
  max-width: 56ch;
  margin-bottom: 24px;
  color: var(--muted);
}

.letter-sign {
  margin-top: 22px;
  font-size: 30px;
  line-height: 1.1;
}

.ww-hero-art {
  flex: 0 1 400px;
  margin: 0 auto;
  min-width: 0;
}

.ww-hero-row2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: 28px;
}

.ww-hero-row2 .shot-card {
  width: 58%;
  max-width: 240px;
}

.pair-card {
  width: 38%;
  max-width: 170px;
  margin-top: 18px;
  background: var(--paper);
  text-align: center;
}

.pair-art {
  display: flex;
  align-items: flex-end;
}

.pair-art img {
  width: 50%;
  border-radius: 0;
}

.pair-card .hand {
  color: var(--cocoa);
  font-size: 22px;
}

/* The green book band (the game's world). */
.leaf-band {
  padding: 72px 0 84px;
  background: var(--leaf);
  color: var(--leaf-ink);
}

.book-heading {
  margin-bottom: 12px;
  font-family: 'Grandstander', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.06;
  text-shadow: 0 3px 0 var(--card);
}

.leaf-lead {
  max-width: 60ch;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 600;
}

.leaf-card {
  padding: 26px 28px;
  border: 4px solid var(--leaf-edge);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--leaf-edge);
  color: var(--ink);
}

.leaf-card h3 {
  margin-bottom: 10px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.leaf-card p {
  color: var(--muted);
}

.leaf-card .leaf-kicker {
  margin-bottom: 6px;
  color: var(--leaf-edge);
  font-family: 'Grandstander', 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.world-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 56px;
  margin-bottom: 64px;
}

.world-row-flip {
  flex-direction: row-reverse;
}

.world-row .leaf-card {
  flex: 1 1 420px;
  min-width: 0;
}

.round-shot {
  flex: none;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 10px solid var(--card);
  border-radius: 50%;
  box-shadow: 0 10px 0 var(--leaf-edge);
  overflow: hidden;
}

.round-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.world-shot {
  flex: 0 1 380px;
  margin: 0 auto;
}

.places h3 {
  font-size: 24px;
}

.places > p {
  margin-bottom: 20px;
}

.places a {
  font-weight: 800;
}

.places-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.places-cols > div {
  flex: 1 1 380px;
  min-width: 0;
}

.places-cols h4 {
  margin: 0 0 10px;
  color: var(--leaf-edge);
  font-size: 17px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--leaf-tint);
  font-size: 16px;
}

.chips-outside li {
  background: var(--butter);
}

/* The storybook card: the reports and the monthly Journey book. */
.storybook {
  display: flex;
  flex-wrap: wrap;
  border: 6px solid var(--cocoa);
  border-radius: 28px 28px 40px 40px;
  background: var(--paper);
  box-shadow: 0 14px 0 var(--cocoa);
  overflow: hidden;
}

.storybook-text {
  display: flex;
  flex: 1 1 460px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: clamp(26px, 4vw, 52px);
  color: var(--cocoa-text);
  font-size: 18px;
  line-height: 1.65;
}

.cocoa-heading {
  color: var(--cocoa);
  font-family: 'Grandstander', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
}

.storybook-note {
  color: var(--sea);
  font-size: 30px;
  line-height: 1.2;
}

.storybook-art {
  display: flex;
  flex: 1 1 320px;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  /* The dashed spine on both sides, pulled 4px out: beside the text the top one is clipped by the card, and once the
     card stacks the left one is, so the spine always runs between text and pictures and never as a stray stub. */
  margin: -4px 0 0 -4px;
  padding: 28px 24px 0;
  border-top: 4px dashed var(--paper-edge);
  border-left: 4px dashed var(--paper-edge);
}

.storybook-art img {
  width: 44%;
  max-width: 220px;
}

/* The parents' stories (#cerita): built hidden; the Worker adds the cards and shows it, or removes it (plan Task 5). */
.block .stories-note {
  max-width: 62ch;
  margin: -12px 0 28px;
  color: var(--muted);
}

.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.story {
  margin: 0;
  padding: 26px 26px 22px;
  border: 2px dashed var(--butter-edge);
  background: var(--butter);
  color: var(--ink);
  transform: rotate(-1.2deg);
}

.story:nth-child(3n + 2) {
  border-color: var(--leaf-edge);
  background: var(--leaf-tint);
  transform: rotate(1deg);
}

.story:nth-child(3n) {
  transform: rotate(-0.6deg);
}

.story .stars {
  margin: 0 0 10px;
  color: var(--current);
  font-size: 20px;
  letter-spacing: 2px;
}

.story blockquote {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.55;
  white-space: pre-line;
}

.story figcaption {
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 479px) {
  .story,
  .story:nth-child(3n + 2),
  .story:nth-child(3n) {
    transform: none;
  }
}

/* Text for screen readers only (the stars' rating). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Questions (<details>). */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.faq details {
  border-radius: 6px;
  background: var(--card);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.faq details[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.faq details p {
  padding: 0 24px 20px;
  color: var(--muted);
  font-size: 17px;
}

.faq details p a {
  font-weight: 800;
}

/* The closing card. */
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 52px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 30px 60px rgba(31, 58, 95, 0.12);
}

.closing > div:first-child {
  flex: 1 1 380px;
  min-width: 0;
}

.closing h2 {
  margin-bottom: 10px;
}

.closing p {
  color: var(--muted);
  font-size: 18px;
}

.closing-actions {
  display: flex;
  flex: 0 1 300px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  text-align: center;
}

.closing-actions .btn {
  text-align: center;
}

/* The two quieter ways on, side by side under the button (stacked, they read as a bare list of links). */
.closing-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
}

/* Belajar: the map picture, the lesson steps, the book list. */
.hero-shot {
  flex: 0 1 380px;
  margin: 0 auto;
}

.hero-shot img {
  border-radius: 14px;
}

.panel {
  padding: clamp(24px, 4vw, 52px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.panel h2 {
  margin-bottom: 8px;
}

.panel-lead {
  max-width: 60ch;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 18px;
}

.center .panel-lead {
  margin-right: auto;
  margin-left: auto;
}

.lesson-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-shot {
  margin-bottom: 14px;
  padding: 8px;
  border-radius: 18px;
  background: var(--step-tint);
}

.step-shot img {
  border-radius: 12px;
}

.lesson-steps h3 {
  margin-bottom: 6px;
  font-size: 19px;
  line-height: 1.25;
}

.lesson-steps p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.featured-books {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 40px;
}

.featured-books .leaf-card {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.book-title {
  font-family: 'Grandstander', 'Plus Jakarta Sans', sans-serif;
}

.leaf-card .book-meta {
  color: var(--leaf-edge);
  font-size: 16px;
  font-weight: 700;
}

.book-group h3 {
  margin-bottom: 14px;
  font-size: 22px;
}

.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-bottom: 36px;
  padding: 0;
  list-style: none;
}

.book-group:last-child .book-list {
  margin-bottom: 0;
}

.book-list li {
  padding: 16px 20px;
  border: 3px solid var(--leaf-edge);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
}

.book-name {
  margin: 0 0 4px;
  font-size: 20px;
}

.book-list p {
  color: var(--muted);
  font-size: 16px;
}

.reasons {
  display: flex;
  flex: 1 1 440px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 0;
  list-style: none;
}

.reasons li {
  padding: 20px 24px;
  border-radius: 6px;
  background: var(--card);
}

.reasons h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

.reasons p {
  color: var(--muted);
  font-size: 16px;
}

/* Harga: the price card, the included list, the side notes, the payment steps. */
.hero-tight {
  padding-bottom: 32px;
}

.h1-narrow {
  max-width: 22ch;
}

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 32px;
}

.price-card {
  display: flex;
  flex: 3 1 600px;
  flex-wrap: wrap;
  min-width: 0;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 30px 60px rgba(31, 58, 95, 0.14);
  overflow: hidden;
}

.price-main {
  flex: 1 1 300px;
  min-width: 0;
  padding: clamp(26px, 4vw, 48px);
}

.price-launch-label {
  margin-bottom: 2px;
  color: var(--current);
  font-size: 34px;
  line-height: 1.1;
}

.price-main h2 {
  margin-bottom: 16px;
  font-size: 24px;
}

.price-was {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 22px;
}

.price-was .badge {
  margin-left: 6px;
  vertical-align: middle;
}

.price-big {
  white-space: nowrap;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}

.price-per {
  margin-top: 8px;
  color: var(--muted);
}

.price-promise {
  max-width: 40ch;
  margin-top: 16px;
  font-weight: 700;
}

.price-main .btn {
  margin-top: 24px;
}

.price-incl {
  flex: 1 1 260px;
  min-width: 0;
  padding: clamp(26px, 4vw, 44px);
  border-left: 3px dashed var(--butter-edge);
  background: var(--butter);
}

.price-incl h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.price-incl .ticks {
  gap: 10px;
}

.price-side {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.free-card {
  position: relative;
  background: var(--leaf);
  color: var(--leaf-ink);
}

.free-card h3 {
  padding-right: 90px;
  color: var(--leaf-ink);
  font-size: 24px;
}

.leaf-card.free-card p {
  color: var(--leaf-ink);
}

.free-art {
  position: absolute;
  top: -48px;
  right: -10px;
  width: 110px;
}

.note-card {
  padding: 24px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.1);
}

.note-card h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.note-card p {
  color: var(--muted);
  font-size: 16px;
}

.ink-panel {
  padding: clamp(26px, 4vw, 52px);
  border-radius: 6px;
  background: var(--ink);
  color: var(--foot-text);
}

.ink-panel h2 {
  margin-bottom: 8px;
  color: var(--card);
}

.ink-panel .panel-lead {
  color: var(--foot-text);
}

.ink-panel a {
  color: var(--card);
}

.ink-panel :focus-visible,
.help-card :focus-visible {
  outline-color: var(--sun);
}

.ink-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.ink-steps li {
  padding-top: 14px;
  border-top: 3px solid var(--sun);
  font-size: 17px;
  counter-increment: step;
}

.ink-steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 6px;
  color: var(--sun);
  font-size: 22px;
  font-weight: 800;
}

/* Cara bayar: the steps with their app pictures, and what happens next. */
.crumbs {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 16px;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.pay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.pay-steps {
  display: flex;
  flex: 1 1 600px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-step {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.pay-step > h2 {
  margin-bottom: 6px;
  font-size: 20px;
  line-height: 1.3;
}

.pay-step > p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 16px;
}

.app-pic figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.app-pic-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--nav-tint);
}

.app-plan p {
  color: var(--muted);
}

.app-plan-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.app-plan .app-save {
  color: var(--leaf-tint-ink);
  font-weight: 800;
}

.app-plan .app-plan-price {
  color: var(--muted);
  font-size: 18px;
}

.app-plan strong {
  color: var(--ink);
  font-size: 20px;
}

.app-plan .app-small {
  font-size: 16px;
}

.app-amount {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--butter);
}

.app-amount-value {
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}

.code {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--sun);
}

.pic-btn {
  display: inline-block;
  text-align: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  user-select: none;
}

.pic-btn-ink {
  background: var(--ink);
  color: var(--card);
}

.pic-btn-line {
  border: 2px solid var(--ink);
  background: var(--card);
}

.pic-btn-wide {
  display: block;
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  font-size: 19px;
}

.app-bank {
  padding: 18px 20px;
  border: 2px solid var(--card-edge);
  border-radius: 12px;
  background: var(--card);
}

.app-label {
  color: var(--muted);
  font-size: 16px;
}

.app-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.app-value {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 800;
}

.pic-btn-pill {
  padding: 8px 16px;
  border-radius: 999px;
}

.app-account-no {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
}

.pay-aside {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--nav-tint);
}

.pay-aside h3 {
  margin-bottom: 4px;
  font-size: 17px;
}

.pay-aside p {
  color: var(--muted);
  font-size: 16px;
}

.app-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 18px;
  border: 3px dashed var(--drop-edge);
  border-radius: 12px;
  background: var(--card);
  font-weight: 800;
}

.pay-side {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.after-card {
  padding: 26px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 24px 48px rgba(31, 58, 95, 0.12);
  transform: rotate(0.8deg);
}

.after-card h2 {
  margin-bottom: 10px;
  color: var(--sea);
  font-size: 30px;
  font-weight: 700;
}

.after-card ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 16px;
}

.help-card {
  padding: 26px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--foot-text);
}

.help-card h2 {
  margin-bottom: 8px;
  color: var(--card);
  font-size: 18px;
}

.help-card p {
  margin-bottom: 6px;
  font-size: 16px;
}

.help-card a {
  color: var(--sun);
}

.help-card a:hover {
  color: var(--card);
}

.pay-side .small-print {
  margin-top: 0;
}

.preview-label {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.block .preview-label {
  margin-bottom: 14px;
  font-size: 17px;
  letter-spacing: 0;
}

.sent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}

.sent-row .app-pic {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 620px;
}

.sent-text {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  color: var(--muted);
  font-size: 18px;
}

.app-status {
  font-size: 20px;
  font-weight: 800;
}

.invoice {
  max-width: 560px;
  padding: 26px 28px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.invoice-head,
.invoice-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
}

.invoice-head {
  margin-bottom: 14px;
}

.invoice-head strong {
  font-size: 20px;
}

.invoice-head span {
  color: var(--muted);
}

.invoice-line {
  padding-top: 12px;
  border-top: 2px solid var(--line);
}

.invoice-total {
  margin-top: 12px;
}

.invoice + .small-print {
  max-width: 560px;
}

/* Info pages (mockup boards Tentang, Keamanan, Bantuan, Workbook) and the Indonesian legal texts. */
.section-lead {
  max-width: 60ch;
  margin: -12px 0 22px;
  color: var(--muted);
  font-size: 17px;
}

/* Keamanan: the three promises on ink. */
.promises {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--foot-text);
  list-style: none;
  overflow: hidden;
}

.promises li {
  flex: 1 1 280px;
  padding: 28px 30px;
  box-shadow: 2px 0 0 var(--foot-rule), 0 2px 0 var(--foot-rule);
}

.block .promises h2 {
  margin-bottom: 6px;
  color: var(--card);
  font-size: 22px;
  letter-spacing: 0;
}

.promises p {
  font-size: 16px;
  line-height: 1.55;
}

/* Keamanan: the data table scrolls sideways inside its own box; the page never does. */
.table-scroll {
  max-width: 100%;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.data-table thead {
  background: var(--nav-tint);
}

.data-table th,
.data-table td {
  padding: 14px 20px;
  vertical-align: top;
}

.data-table thead th {
  font-weight: 800;
}

.data-table tbody tr {
  border-top: 2px solid var(--line);
}

.data-table tbody th {
  width: 26%;
  font-weight: 700;
}

.data-table td {
  color: var(--muted);
}

.table-hint {
  display: none;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

/* The table is 640px wide at least: below that, say it scrolls (the page itself never does). Phones get the rows as
   cards instead (the phone audit section at the end), so nothing to scroll there. */
@media (min-width: 600px) and (max-width: 719px) {
  .table-hint {
    display: block;
  }
}

.after-table {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

/* Keamanan: what a parent controls, beside the screen-time picture. */
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.controls strong {
  color: var(--ink);
}

.shot-tilt {
  flex: 0 1 340px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 18px 36px rgba(31, 58, 95, 0.18);
  transform: rotate(3deg);
}

.shot-tilt img {
  border-radius: 16px;
}

.legal-box {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.block .legal-box h2 {
  margin-bottom: 12px;
  font-size: 26px;
}

.legal-box > p {
  color: var(--muted);
}

/* Bantuan: the topic list beside the questions, then the WhatsApp block. */
.help-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 40px;
}

.help-topics {
  display: flex;
  flex: 0 1 220px;
  flex-direction: column;
  font-weight: 800;
}

/* Beside the questions (wide screens), the topic list stays in view while the page scrolls. */
@media (min-width: 900px) {
  .help-topics {
    position: sticky;
    top: 24px;
  }
}

.help-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Above the questions (narrow screens), the topics are a compact row of jump buttons, each as wide as its words (an
   even grid breaks "Akun dan perangkat" onto two lines), not a column of big links. */
@media (max-width: 899px) {
  .help-topics {
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 10px;
  }

  .help-topics a {
    justify-content: center;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 2px 0 var(--card-edge);
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  .help-topics a:hover {
    text-decoration: underline;
  }
}

.help-main {
  display: flex;
  flex: 1 1 600px;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.block .help-group h2 {
  margin-bottom: 14px;
  font-size: 28px;
}

.wa-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
  padding: clamp(24px, 4vw, 32px);
  border-radius: 6px;
  background: var(--ink);
  color: var(--foot-text);
}

.wa-art {
  flex: none;
  width: 96px;
  border-radius: 18px;
}

.wa-text {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 17px;
}

.block .wa-text h2 {
  margin-bottom: 4px;
  color: var(--card);
  font-size: 24px;
}

.wa-text strong {
  color: var(--card);
}

.wa-text a:not(.btn) {
  color: var(--card);
  font-weight: 800;
}

.wa-actions {
  margin: 6px 0;
}

.wa-block :focus-visible {
  outline-color: var(--sun);
}

/* Tentang. */
.chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--card);
  font-weight: 800;
  text-decoration: none;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 48px;
}

.block .story-item h2 {
  margin-bottom: 10px;
  font-size: clamp(24px, 2.4vw, 30px);
}

.story-item p {
  max-width: 58ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.origin-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.origin-art {
  flex: 0 1 220px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 6px;
  background: var(--butter);
  transform: rotate(-3deg);
}

.origin-text {
  flex: 1 1 420px;
  min-width: 0;
}

.block .origin-text h2 {
  margin-bottom: 12px;
}

.origin-text p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.letter-card {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--card-edge), 0 24px 48px rgba(31, 58, 95, 0.12);
  transform: rotate(-0.6deg);
}

.letter-card > p:first-child {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.letter-close {
  margin-top: 18px;
  color: var(--muted);
}

.letter-name {
  font-size: 32px;
  line-height: 1.15;
}

.letter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 20px;
}

/* Workbook. */
.kicker {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.body-text {
  max-width: 56ch;
  margin-bottom: 14px;
  color: var(--muted);
}

.soon {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 800;
}

.signature {
  margin-top: 22px;
  color: var(--sea);
  font-size: 30px;
}

.workbook-art {
  flex: 0 1 380px;
  margin: 0 auto;
}

/* The Indonesian legal texts. */
.legal-lang {
  margin-bottom: 16px;
  font-size: 16px;
}

.legal-lang a {
  font-weight: 800;
}

.legal-text {
  padding: clamp(22px, 4vw, 44px);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 14px 28px rgba(31, 58, 95, 0.08);
}

.legal-text h1 {
  margin-bottom: 12px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}

.legal-text h2 {
  margin: 28px 0 8px;
  font-size: 22px;
  line-height: 1.25;
}

.legal-text p,
.legal-text ul {
  margin-bottom: 10px;
}

.legal-text ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 22px;
}

.legal-text > p:last-child {
  margin-top: 24px;
  font-weight: 700;
}

/* Tilted info cards straighten on small phones. */
@media (max-width: 479px) {
  .shot-tilt,
  .origin-art,
  .letter-card {
    transform: none;
  }
}

/*
 * Phones and short landscape screens: the hero's main action moves up under the heading, so it sits in the first
 * screen. Visual order only: nothing focusable comes before it in the source, so keyboard order is unchanged.
 */
@media (max-width: 599px), (max-height: 800px) {
  .cta-early {
    display: flex;
    flex-direction: column;
  }

  .cta-early > * {
    order: 2;
  }

  .cta-early > .crumbs,
  .cta-early > .ww-mark,
  .cta-early > .letter-greet,
  .cta-early > h1 {
    order: 0;
  }

  .cta-early > .actions {
    order: 1;
    margin-bottom: 18px;
  }

  .cta-early > h1 {
    margin-bottom: 14px;
  }
}

@media (max-height: 500px) {
  .hero {
    padding-top: 20px;
  }

  .ww-mark {
    margin-bottom: 8px;
  }

  .ww-mark img {
    height: 32px;
  }

  .letter-greet {
    display: none;
  }

  .letter {
    padding-top: 22px;
  }

  .hero h1 {
    font-size: clamp(28px, 4vw, 40px);
  }
}

/* Footer (mockup board Footer). */
.site-foot {
  background: var(--ink);
  color: var(--foot-text);
  font-size: 16px;
}

.site-foot a {
  color: var(--card);
}

/* The orange outline is too faint on the dark footer (non-text contrast < 3:1): the sun shows there instead. */
.site-foot :focus-visible {
  outline-color: var(--sun);
}

.site-foot a:hover {
  color: var(--sun);
}

.foot-main {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  padding-top: 48px;
  padding-bottom: 36px;
}

.foot-about {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.foot-blurb {
  max-width: 38ch;
}

.foot-logo {
  align-self: flex-start;
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card);
}

.foot-logo img {
  width: auto;
  height: 36px;
}

.foot-groups {
  display: flex;
  flex: 0 1 auto;
  gap: 36px 56px;
}

.foot-links {
  flex: 0 1 190px;
  min-width: 0;
  font-weight: 700;
}

.foot-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-links a,
.foot-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  line-height: 1.3;
}

.foot-links a {
  text-decoration: none;
}

.foot-contact {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  font-weight: 700;
}

.foot-contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-head {
  margin-bottom: 4px;
  color: var(--sun);
  font-weight: 800;
}

.foot-note {
  margin-top: -6px;
  color: var(--foot-muted);
  font-size: 15px;
  font-weight: 500;
}

.foot-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-foot .foot-play {
  color: var(--sun);
  font-weight: 800;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 18px;
  padding-bottom: 28px;
  border-top: 1px solid var(--foot-rule);
  color: var(--foot-muted);
  font-size: 15px;
}

/* Tablets and small laptops: the blurb on its own row, then Produk, MomTesla and the contact block as three even
   columns (the one-row layout needs about 1100px). */
@media (min-width: 600px) and (max-width: 1099px) {
  .foot-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
  }

  .foot-about {
    grid-column: 1 / -1;
  }

  .foot-groups {
    display: contents;
  }
}

/*
 * The footer on phones: compact and in groups, not one long column. A small logo and the blurb's first sentence; the
 * two link groups side by side; the contact block framed as one panel; the credit lines at caption size. Every link
 * keeps a 44px tap height through its padding, not through big type.
 */
@media (max-width: 599px) {
  .site-foot .foot-main {
    display: grid;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .foot-about {
    gap: 12px;
  }

  /* 26px logo + 9px padding: a 44px tap target. */
  .foot-logo {
    padding: 9px 12px;
    border-radius: 10px;
  }

  .foot-logo img {
    height: 26px;
  }

  .foot-more {
    display: none;
  }

  .foot-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .foot-head {
    margin-bottom: 0;
  }

  .foot-links a {
    padding: 8px 0;
  }

  .foot-contact {
    padding: 16px 18px 8px;
    border: 1px solid var(--foot-rule);
    border-radius: 14px;
  }

  .foot-wa {
    font-size: 17px;
  }

  .foot-note {
    margin-top: -8px;
    margin-bottom: 4px;
    font-size: 14px;
  }

  .foot-pair {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    width: 100%;
    margin-top: 6px;
    border-top: 1px solid var(--foot-rule);
  }

  .site-foot .foot-base {
    flex-direction: column;
    gap: 2px;
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .foot-base {
    font-size: 14px;
  }
}

/* Phones. */
@media (max-width: 599px) {
  .wrap {
    padding: 0 16px;
  }

  .head-row {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* The logo gives way first when big system text widens the button and the menu: the row never runs off. */
  .logo {
    flex: 0 1 auto;
    min-width: 72px;
  }

  .logo img {
    width: 100%;
    max-width: 124px;
    height: auto;
  }

  .menu summary {
    padding: 0 10px;
  }

  /* Phone type scale: headings stay a step below the desktop sizes, so a phone set to larger text still reads as
     a page, not a poster. */
  .hero h1,
  .book-heading {
    font-size: clamp(28px, 7.4vw, 32px);
    letter-spacing: -0.5px;
  }

  .block h2 {
    margin-bottom: 18px;
    font-size: clamp(24px, 6.6vw, 28px);
  }

  .lead {
    font-size: 17px;
  }

  .btn {
    padding: 14px 22px;
    font-size: 17px;
  }

  .btn-small {
    padding: 12px 14px;
    font-size: 15px;
  }

  .feature-title {
    font-size: 20px;
  }

  .paper-card h3 {
    font-size: 22px;
  }

  .strip li {
    padding: 20px 22px;
  }

  .strip h3 {
    font-size: 18px;
  }

  .more {
    margin-top: 28px;
  }

  .more-list a {
    padding: 14px 48px 14px 18px;
  }

  .more-list a::after {
    right: 20px;
  }

  .more-plain a {
    padding-left: 0;
  }

  .hero {
    padding: 28px 0 36px;
  }

  .block {
    padding-bottom: 56px;
  }

  .block-top {
    padding-top: 56px;
  }

  .leaf-band {
    padding: 52px 0 60px;
  }

  .world-row {
    margin-bottom: 44px;
  }

  .letter-greet {
    font-size: 30px;
  }

  .faq summary {
    padding: 16px 18px;
    font-size: 17px;
  }

  .faq details p {
    padding: 0 18px 18px;
  }
}

/* The narrowest phones (or a 360px phone at its largest text): the header row tightens a little more. */
@media (max-width: 359px) {
  .head-row {
    gap: 6px;
  }

  .logo {
    min-width: 56px;
  }

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

  .menu summary {
    padding: 0 8px;
  }

  .menu summary::after {
    margin-left: 6px;
  }
}

/* Tilted cards straighten on small phones. */
@media (max-width: 479px) {
  .tilt-left,
  .tilt-right,
  .feature-art,
  .letter,
  .after-card {
    transform: none;
  }

  .shot-pair {
    flex-direction: column;
    align-items: center;
  }

  .shot-pair > * {
    width: 100%;
  }

  .shot-pair > :last-child {
    margin-top: 0;
  }

  .birthday-card {
    width: 60%;
  }

  .duo-cards {
    width: min(260px, 100%);
  }

  .duo-cards .tilt-right {
    margin-top: 24px;
  }
}

/*
 * Phone audit (2026-10-24): what the live pages showed at 360–412px and with large system text. Last in the file on
 * purpose: these rules must win over the phone type scale above.
 */
@media (max-width: 599px) {
  /* Card headings keep their own sizes: the phone `.block h2` rule above would lift them to section size, so a payment
     step title read bigger than the section it sits in. */
  .block .pay-step > h2 {
    margin-bottom: 6px;
    font-size: 20px;
  }

  .block .price-main h2 {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .block .after-card h2 {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .block .help-card h2 {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .block .help-group h2 {
    font-size: 24px;
  }

  .block .closing h2 {
    margin-bottom: 10px;
  }

  .block .panel h2,
  .block .ink-panel h2 {
    margin-bottom: 8px;
  }

  .block .split-text h2 {
    margin-bottom: 0;
  }

  /* Wonderwhy hero: the Biru and Dian pair only. The second row (a lesson screen too small to read, a second character
     card) made a long, staggered collage; the same screens come again further down. */
  .ww-hero-row2 {
    display: none;
  }

  /* The fact list: the two short facts share a row, the long ones keep the full width. */
  .facts:not(.facts-big) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts:not(.facts-big) > div {
    grid-column: 1 / -1;
    padding: 16px 18px;
  }

  .facts:not(.facts-big) > div:nth-child(-n + 2) {
    grid-column: auto;
  }

  .facts:not(.facts-big) dd {
    font-size: 18px;
  }

  /* The book places: a two-column grid, the place over its book, not thirteen pills one per line. */
  .leaf-card {
    padding: 22px 20px;
  }

  .chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
    gap: 8px;
  }

  .chips li {
    padding: 8px 12px;
    line-height: 1.3;
  }

  /* An odd last place takes the whole row, not half of it beside a gap. */
  .chips li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .chips strong {
    display: block;
  }

  .chip-sep {
    display: none;
  }

  /* Harga: each payment step's number sits beside its text, not on a line of its own. */
  .ink-steps {
    gap: 14px;
  }

  .ink-steps li {
    position: relative;
    padding-left: 34px;
  }

  .ink-steps li::before {
    position: absolute;
    top: 12px;
    left: 0;
    margin: 0;
    line-height: 1.3;
  }

  /* Keamanan: each row of the data table becomes a small card (data, what for, who fills it in), so no column is
     cut off and nothing scrolls sideways. The column headers stay for screen readers. */
  .table-scroll {
    padding-bottom: 4px;
    background: none;
    box-shadow: none;
  }

  .data-table {
    min-width: 0;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }

  .data-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .data-table tbody tr {
    padding: 16px 18px;
    border-top: 0;
    border-radius: 6px;
    background: var(--card);
    box-shadow: 0 2px 0 var(--card-edge);
  }

  .data-table tbody th {
    width: auto;
    padding: 0 0 4px;
    font-size: 17px;
  }

  .data-table td {
    padding: 8px 0 0;
  }

  .data-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
  }

  /* The legal texts: one card inside the page gutter, so a tighter inner padding and list indent keep the measure. */
  .legal-text {
    padding: 22px 18px;
  }

  .legal-text ul {
    padding-left: 18px;
  }

  .letter-sign,
  .signature {
    font-size: 28px;
  }
}

/* Small phones: the screen-time picture and Biru's birthday card stay side by side (stacked, the card left a tall,
   empty cream block). */
@media (max-width: 479px) {
  .shot-pair.shot-pair-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .shot-pair-row > :first-child {
    width: 62%;
  }

  .shot-pair-row > .birthday-card {
    width: 34%;
  }
}