/* CleaverKit landing page. Tokens copied from the app theme (DESIGN.md). */

:root {
  --ink: #1F2B3D;
  --ink2: #4A5568;
  --ground: #E4F2EE;
  --paper: #FFFFFF;
  --sun: #FFC23D;
  --sun-soft: #FFE7A8;
  --sea: #2B6FB8;
  /* Darker sea for link text: plain sea is 4.48:1 on ground, just under AA. */
  --sea-text: #22598F;
  --leaf-text: #16683F;
  --leaf-soft: #E9F6EF;
  --coral-text: #B23A1A;
  --coral-soft: #FFF4F0;

  --line: 3px solid var(--ink);
  --lift: 0 6px 0 var(--ink);
  --lift-pressed: 0 2px 0 var(--ink);
  --r-card: 24px;
  --r-frame: 28px;
  --r-field: 14px;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;
  --page: 1160px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

/* Component display rules (.btn, img, video) must not beat the hidden attribute. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
p { margin: 0 0 1em; }

a { color: var(--sea-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  background: var(--paper);
  border: var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  color: var(--ink);
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons (sticker: ink outline + solid drop shadow) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--lift);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn:hover { color: var(--ink); transform: translateY(1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: var(--lift-pressed); }
.btn:focus-visible { border-radius: 999px; }
.btn[disabled] { cursor: not-allowed; opacity: .6; transform: none; box-shadow: var(--lift-pressed); }
.btn--small { min-height: 44px; padding: 8px 18px; font-size: 1rem; box-shadow: 0 4px 0 var(--ink); }
.btn--small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn--paper { background: var(--paper); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
}

/* ---------- Header ---------- */

.site-header { padding: 14px 0; }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  margin-right: auto;
}
.brand img { width: 44px; height: 44px; }
.site-header { position: relative; z-index: 20; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
/* Below 920px the section links are left out: the page is one scroll and the
   header keeps only the logo and "Ikut beta". */
@media (max-width: 919px) {
  .site-nav { display: none; }
  /* Single-column text runs the full width here, so drifting shapes would sit on it. */
  .drift { display: none; }
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sun); }

/* ---------- Hero ---------- */

.hero { padding: 24px 0 56px; }
.hero .wrap {
  display: grid;
  gap: 40px;
  align-items: center;
}
.hero__lead { font-size: 1.15rem; max-width: 34em; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 28px 0 22px;
}
.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--ink2);
  font-weight: 700;
  font-size: .98rem;
}
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts li::before {
  content: "";
  width: 10px; height: 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--sun);
  transform: rotate(45deg);
  flex: none;
}
.hero__visual { position: relative; padding-top: 34px; }
.hero__visual .hoho {
  position: absolute;
  z-index: 2;
  width: clamp(84px, 20vw, 128px);
  height: auto;
  top: -6px;
  left: -8px;
  transform: rotate(-8deg);
}

/* ---------- Screenshot frames (tablet as a sticker) ---------- */

.shot { margin: 0; }
.shot__frame {
  position: relative;
  /* Screens are cropped below the status bar and above the taskbar. */
  aspect-ratio: var(--ar, 1600 / 890);
  background: var(--ink);
  border: var(--line);
  border-radius: var(--r-frame);
  box-shadow: var(--lift);
  padding: clamp(8px, 1.4vw, 14px);
}
.shot__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-frame) - 12px);
  overflow: hidden;
  background: #F1F7F5;
}
.shot__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  border: 3px dashed var(--ink2);
  border-radius: inherit;
  color: var(--ink2);
  font-size: clamp(.85rem, .8rem + .3vw, 1rem);
  line-height: 1.35;
}
.shot__placeholder strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
}
.shot__screen.is-missing .shot__placeholder { display: flex; }
.shot figcaption {
  margin-top: 16px;
  color: var(--ink2);
  font-size: .98rem;
  font-weight: 600;
}

/* Frames sit a little crooked, like stickers pressed into an exercise book
   (DESIGN.md: "rapi seperti stiker di buku tulis anak"). */
.shot--tilt-l .shot__frame { transform: rotate(-1.2deg); }
.shot--tilt-r .shot__frame { transform: rotate(1.2deg); }

/* Sticker label: names the feature a screenshot shows. */
.tag {
  position: absolute;
  z-index: 3;
  display: inline-block;
  padding: 4px 14px;
  background: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.82rem, .74rem + .35vw, 1.02rem);
  line-height: 1.3;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.tag--paper { background: var(--paper); }
.tag--tl { left: 4%; top: -14px; }
.tag--tr { right: 4%; top: -14px; transform: rotate(3deg); }
.tag--bl { left: 4%; bottom: -14px; }
.tag--br { right: 4%; bottom: -14px; transform: rotate(2deg); }

/* Zoom: one detail of the app, enlarged and stuck on the frame's corner. */
.zoom {
  position: absolute;
  z-index: 2;
  width: var(--zw, 36%);
  transform: rotate(var(--zr, 3deg));
}
.zoom img {
  width: 100%;
  height: auto;
  background: var(--paper);
  border: var(--line);
  border-radius: 18px;
  box-shadow: var(--lift);
}
.zoom .tag { left: 10px; top: -16px; }
/* On a right-hand zoom the label grows leftwards, toward the frame. */
.zoom--tr .tag, .zoom--br .tag { left: auto; right: 10px; }
.zoom--tr { right: -3%; top: -9%; }
.zoom--br { right: -3%; bottom: -12%; }
.zoom--bl { left: -3%; bottom: -12%; --zr: -3deg; }
/* Room under a frame whose zoom hangs off the bottom edge (% of width). */
.shot--zoom-low figcaption { margin-top: calc(16px + 10%); }

/* Two screens of one flow, the earlier one behind. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.stack > .shot__frame { grid-area: 1 / 1; }
.stack__back {
  width: 74%;
  align-self: start;
  justify-self: start;
  transform: rotate(-2.5deg);
}
.stack__front {
  width: 80%;
  align-self: end;
  justify-self: end;
  margin-top: 22%;
  transform: rotate(1.5deg);
}

/* ---------- Sections ---------- */

.section { padding: 56px 0; }
main > section { overflow-x: clip; }
.section__intro { max-width: 40em; }
.section__intro p { font-size: 1.1rem; }

/* Video: one centered stage */
.video-stage { max-width: 960px; margin: 0 auto; text-align: center; }
.video-stage .section__intro { margin: 0 auto 28px; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: var(--line);
  border-radius: var(--r-frame);
  box-shadow: var(--lift);
  overflow: hidden;
}
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.video-missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: #F1F7F5;
  color: var(--ink2);
  text-align: center;
}
.video-missing[hidden] { display: none; }
.video-missing img { width: 72px; height: 72px; }
.video-missing strong { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); }

/* Split rows: text + screenshot */
.split {
  display: grid;
  gap: 36px;
  align-items: center;
}
.split__text > :last-child { margin-bottom: 0; }

.sub-point { margin-top: 26px; }
.sub-point h3 { margin-bottom: .3em; }

/* Question bank shelf: real counts from content/seed */
.shelf {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shelf li {
  background: var(--paper);
  border: var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  line-height: 1.3;
}
.shelf b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.shelf span { color: var(--ink2); font-weight: 700; font-size: .95rem; }
.shelf-note { margin-top: 12px; color: var(--ink2); font-size: .98rem; }

/* Simulation: score sticker */
.score-card {
  background: var(--paper);
  border: var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 20px 22px;
  margin-top: 26px;
  max-width: 420px;
}
.score-card h3 { margin-bottom: 12px; }
.score-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.score-card dl div {
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 8px 6px;
  text-align: center;
  background: var(--sun-soft);
}
.score-card dt { font-weight: 800; font-size: .95rem; }
.score-card dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; }
.score-card p { margin: 0; color: var(--ink2); font-size: .98rem; }

/* Adventure: full-width paper band */
.band {
  background: var(--paper);
  border-top: var(--line);
  border-bottom: var(--line);
  padding: 64px 0;
}
.adventure-top {
  display: grid;
  gap: 36px;
  align-items: start;
}
.games h3 { margin-bottom: 10px; }
.games ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: game;
  display: grid;
  gap: 6px;
}
.games ol li {
  counter-increment: game;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
}
.games ol li::before {
  content: counter(game);
  flex: none;
  min-width: 2.1em;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 0 4px;
  line-height: 1.5;
}
.skills {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skills li {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 4px 12px;
  font-weight: 800;
  background: var(--ground);
}
.adventure-pair {
  display: grid;
  gap: 36px;
  margin-top: 48px;
}
.adventure-pair .shot__frame { box-shadow: 0 5px 0 var(--ink); }
.adventure-pair p { margin-top: 10px; }

/* Parent area */
.parent-list { margin: 22px 0 0; display: grid; gap: 16px; }
.parent-list dt { font-weight: 800; font-size: 1.08rem; }
.parent-list dd { margin: 2px 0 0; color: var(--ink2); }

/* ---------- Join form ---------- */

.join { padding: 64px 0 72px; }
.join__grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
.card {
  background: var(--paper);
  border: var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: clamp(20px, 3vw, 32px);
}
.notice {
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--sun-soft);
}
.notice[hidden] { display: none; }
.notice p { margin: 0; }
.notice p + p { margin-top: 6px; }
.notice--error { background: var(--coral-soft); border-color: var(--coral-text); }
.notice--error strong { color: var(--coral-text); }
.notice .btn { margin-top: 10px; }

.field { margin-bottom: 20px; }
.field > label,
.field legend {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  padding: 0;
}
.req, .opt { font-weight: 600; color: var(--ink2); }
.help { margin: 6px 0 0; color: var(--ink2); font-size: .95rem; }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-field);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline-offset: 2px; border-radius: var(--r-field); }
.field.has-error input,
.field.has-error textarea { border-color: var(--coral-text); border-width: 3px; }
.error {
  margin: 6px 0 0;
  color: var(--coral-text);
  font-weight: 800;
  font-size: .95rem;
}
.error:empty { display: none; }
.error::before { content: "! "; }

fieldset.field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--r-field);
  background: var(--paper);
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
.choice input:checked + span {
  background: var(--sun);
  border-width: 3px;
  box-shadow: 0 3px 0 var(--ink);
}
.choice input:checked + span::before { content: "\2713\00a0"; }
.choice input:focus-visible + span { outline: 3px solid var(--sea); outline-offset: 3px; }
.field.has-error .choice span { border-color: var(--coral-text); }

.counter { float: right; color: var(--ink2); font-weight: 700; font-size: .9rem; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 700;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.consent-row { padding: 6px 0; min-height: 44px; }

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-row { margin-top: 8px; }
.submit-row .btn { width: 100%; }

.success h3 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.success__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.success__head img { width: 72px; height: 72px; flex: none; }
.success__head h3 { margin: 0; }
.success:focus { outline: none; }
.success:focus-visible { outline: 3px solid var(--sea); outline-offset: 4px; }
.steps { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 10px; }
.steps li { padding-left: 4px; }
.steps li::marker { font-family: var(--font-display); font-weight: 600; }

.questions h3 { margin-bottom: 14px; }
.questions details {
  border-bottom: 2px solid rgba(31, 43, 61, .25);
}
.questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
}
.questions details[open] summary::after { content: "\2212"; background: var(--sun); }
.questions details > div { padding: 0 0 14px; }
.questions details p:last-child,
.questions details ol:last-child { margin-bottom: 0; }
.questions ol { padding-left: 1.3em; margin: 0 0 1em; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: var(--line);
  background: var(--paper);
  padding: 32px 0 40px;
  font-size: .98rem;
}
.site-footer .wrap { display: grid; gap: 18px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.credits { color: var(--ink2); margin: 0; }

/* ---------- Privacy page ---------- */

.doc { padding: 24px 0 64px; }
.doc .card { max-width: 820px; margin: 0 auto; }
.doc h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); }
.doc h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin-top: 1.6em; }
.doc ul { padding-left: 1.3em; display: grid; gap: 6px; margin: 0 0 1em; }
.doc .meta { color: var(--ink2); font-weight: 700; }
.doc .highlight {
  background: var(--sun-soft);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 4px 18px 8px;
  margin-top: 1.6em;
}
.doc .highlight h2 { margin-top: .6em; }

/* ---------- Wider screens ---------- */

/* ---------- Phones (below 640px): a smaller register, not the desktop shrunk ---------- */
@media (max-width: 639px) {
  body { font-size: 1rem; line-height: 1.55; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.12rem; }

  .site-header { padding: 10px 0; }
  .site-header .wrap { gap: 8px; }
  .brand { font-size: 1.2rem; gap: 8px; }
  .brand img { width: 36px; height: 36px; }

  .hero { padding: 8px 0 36px; }
  .hero .wrap { gap: 28px; }
  .hero__lead { font-size: 1.02rem; }
  .hero__actions { margin: 20px 0 16px; gap: 8px 18px; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { font-size: .92rem; }
  .hero__visual { padding-top: 26px; }

  .section { padding: 36px 0; }
  .band { padding: 40px 0; }
  .join { padding: 40px 0 48px; }
  .section__intro p { font-size: 1rem; }
  .video-stage .section__intro { margin-bottom: 20px; }

  .split, .adventure-top, .join__grid { gap: 26px; }
  .adventure-pair { margin-top: 32px; gap: 32px; }
  .sub-point { margin-top: 18px; }
  .shot figcaption { margin-top: 12px; font-size: .92rem; }
  .shot--zoom-low figcaption { margin-top: calc(12px + 10%); }

  .shelf { margin-top: 22px; gap: 8px; }
  .shelf b { font-size: 1.15rem; }
  .shelf span { font-size: .88rem; }
  .shelf-note { font-size: .92rem; }
  .score-card { padding: 16px; margin-top: 20px; }
  .score-card dd { font-size: 1.4rem; }
  .parent-list { margin-top: 16px; gap: 12px; }
  .parent-list dt { font-size: 1rem; }
  .skills-title { margin-top: 18px; }

  .card { padding: 18px 16px; }
  .questions summary { font-size: 1rem; min-height: 48px; }
  .site-footer { padding: 24px 0 32px; font-size: .95rem; }

  .tag { padding: 3px 10px; border-width: 2px; }
}

/* Narrow phones: a slightly smaller logo and button in the header. */
@media (max-width: 419px) {
  .site-header .wrap { gap: 6px; }
  .brand { font-size: 1.08rem; gap: 6px; }
  .brand img { width: 32px; height: 32px; }
  .site-header .btn--small { padding: 8px 12px; font-size: .95rem; }
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .submit-row .btn { width: auto; }
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer .wrap { grid-template-columns: 1fr auto; align-items: center; }
  .credits { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  .adventure-pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 920px) {
  :root { --gutter: 32px; }
  .site-nav ul { display: flex; }
  .hero { padding: 40px 0 80px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .section { padding: 80px 0; }
  .band { padding: 88px 0; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; }
  .split--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .split--flip .shot { order: -1; }
  .adventure-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
  .join { padding: 88px 0 96px; }
  .join__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
}

/* ---------- Motion (DESIGN.md dial MOTION 3) ----------
   main.js adds .motion to <html> only when the visitor has not asked for
   reduced motion, so without JS (or with reduced motion) nothing is hidden. */

/* Sticker shapes drifting behind a section, like in the promo video. */
.has-drift { position: relative; overflow: hidden; }
.has-drift > .wrap { position: relative; z-index: 1; }
.drift { position: absolute; inset: 0; pointer-events: none; }
.drift span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: center / contain no-repeat;
  animation: drift var(--d, 10s) ease-in-out var(--delay, 0s) infinite;
}
.drift .star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20,2 24.7,13.5 37.1,14.4 27.6,22.5 30.6,34.6 20,28 9.4,34.6 12.4,22.5 2.9,14.4 15.3,13.5' fill='%23FFC23D' stroke='%231F2B3D' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.drift .star--paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20,2 24.7,13.5 37.1,14.4 27.6,22.5 30.6,34.6 20,28 9.4,34.6 12.4,22.5 2.9,14.4 15.3,13.5' fill='%23FFFFFF' stroke='%231F2B3D' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.drift .dot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%23FFFFFF' stroke='%231F2B3D' stroke-width='3'/%3E%3C/svg%3E"); }
.drift .dot--sun { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%23FFE7A8' stroke='%231F2B3D' stroke-width='3'/%3E%3C/svg%3E"); }
.drift .dot--sea { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%23C7E1F5' stroke='%231F2B3D' stroke-width='3'/%3E%3C/svg%3E"); }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -18px) rotate(24deg); }
}

/* Hoho keeps bobbing next to the hero screenshot. */
.hero__visual .hoho { animation: hoho-bob 3.4s ease-in-out infinite; }
@keyframes hoho-bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}

/* The main call to action gives a small wiggle now and then. */
.btn--nudge { animation: nudge 6s ease-in-out 2.5s infinite; }
.btn--nudge:hover, .btn--nudge:focus-visible { animation: none; }
@keyframes nudge {
  0%, 10%, 100% { rotate: 0deg; }
  2% { rotate: -3deg; }
  4% { rotate: 3deg; }
  6% { rotate: -2deg; }
  8% { rotate: 1deg; }
}

/* Reveal on scroll. Uses the individual transform properties (translate,
   rotate, scale) so a frame's own tilt (transform) is left alone. */
.motion .reveal,
.motion .stagger > * {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .5s ease-out, translate .7s cubic-bezier(.34, 1.56, .64, 1);
}
.motion .stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }
.motion .reveal.is-in,
.motion .stagger.is-in > * { opacity: 1; translate: 0 0; }

/* A screenshot lands like a sticker slapped on the page. */
.motion .shot.reveal .shot__frame { transition: rotate .7s cubic-bezier(.34, 1.56, .64, 1), scale .7s cubic-bezier(.34, 1.56, .64, 1), translate .7s cubic-bezier(.34, 1.56, .64, 1); }
.motion .shot.reveal:not(.is-in) .shot__frame { rotate: 5deg; scale: .9; }
.motion .shot.reveal:not(.is-in) .stack__back { translate: -12% 0; rotate: -6deg; }
.motion .shot.reveal:not(.is-in) .stack__front { translate: 18% 6%; rotate: 9deg; }
.motion .shot.reveal .stack__front { transition-delay: .15s; }

/* Zooms and labels pop in after their frame has landed. */
.motion .shot.reveal .zoom,
.motion .shot.reveal .tag { transition: scale .45s cubic-bezier(.34, 1.56, .64, 1) .45s; }
.motion .shot.reveal .tag { transition-delay: .65s; }
.motion .shot.reveal:not(.is-in) .zoom,
.motion .shot.reveal:not(.is-in) .tag { scale: 0; }

/* Pointer devices: a frame lifts a little and its zoom wiggles. */
@media (hover: hover) {
  .motion .shot.reveal.is-in .shot__frame { transition-delay: 0s; }
  .motion .shot.reveal.is-in:hover .shot__frame { scale: 1.015; }
  .motion .shot:hover .zoom img { animation: wiggle .5s ease-in-out; }
}
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -4deg; }
  60% { rotate: 3deg; }
}

@media (max-width: 639px) {
  .zoom { --zw: 42%; }
  .zoom img { border-width: 2px; border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skills-title { margin-top: 24px; }
.success__contact { margin-top: 16px; }
.doc .back-link { margin-top: 2em; }
.field input::placeholder { color: var(--ink2); opacity: 1; }