/* Tamanly landing v5.2 — shared styles
   Craft guidance: unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */

@font-face {
  font-family: "Inter";
  src: url("/assets/landing/fonts/Inter-Variable-c6876acd.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --white: #fff;
  --lilac-1: #F7F5FA;
  --lilac-2: #EDE6F8;
  --indigo: #3D2B6B;
  --indigo-d: #2A1D4D;
  /* v4 accents, sampled from the logo mark (logo.jpg), plus light tints mixed with white */
  --red: #FA5147;      /* roofs in the mark. Large text or marks only (3.32:1 on white) */
  --orange: #FEA91E;   /* gold roof and sprout. Never text, never under white text */
  --red-ink: #B43A33;  /* the same red at 72% (mixed with black), for small accent text */
  --red-88: #FEEAE9;
  --red-80: #FEDCDA;
  --orange-92: #FFF8ED;
  --orange-88: #FFF5E4;
  --orange-80: #FFEED2;

  --text: #2A1D4D;
  --text-2: #4F4766;
  --text-3: #6E6685;
  --line: rgba(42, 29, 77, .10);
  --line-2: rgba(42, 29, 77, .18);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1440px;
  --pad: 40px;
  --header-h: 72px;
  /* Full drawing, 1920 x 296, aspect-fit to the viewport so nothing is sliced. */
  --street-h: calc(100vw * 296 / 1920);
  --shadow-sm: 0 1px 2px rgba(24, 18, 40, .06);
  --shadow: 0 12px 32px rgba(24, 18, 40, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 500; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--indigo); color: #fff; padding: 8px 16px; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* Icons */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-d); }
.btn-secondary { background: var(--white); color: var(--indigo); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--lilac-1); border-color: rgba(42, 29, 77, .28); }

/* Official store badges. Artwork is unmodified vendor files in badges/.
   --badge-h is the visible badge body (Apple min 40px; we use 48 / 44).
   Clear space between badges is 1/4 of that height, per Apple, Google and Huawei rules.
   The official Google Play PNG already includes that pad; we scale and clip so the
   black body matches the others, and the flex gap supplies the required clear space. */
:root {
  --badge-h: 48px;
  --badge-gap: 12px;
}
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--badge-gap);
  margin-top: 16px;
}
.store-badge {
  display: inline-flex;
  align-items: stretch;
  height: var(--badge-h);
  border-radius: 8px;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  transition: opacity 160ms var(--ease);
}
.store-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}
.store-badge:hover { opacity: .88; }
.store-badge:active { opacity: .8; }
.store-badge:focus { outline: none; }
.store-badge:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}
/* Google EN official web generic: canvas 646×250, badge body 564×168, pad 41 */
.store-badge--play {
  width: calc(var(--badge-h) * 564 / 168);
  overflow: hidden;
}
.store-badge--play img {
  height: calc(var(--badge-h) * 250 / 168);
  width: auto;
  max-width: none;
  margin-top: calc(var(--badge-h) * -41 / 168);
  margin-left: calc(var(--badge-h) * -41 / 168);
}
/* Google MS official file uses a different crop: body 638×184, pad 4 / 33 */
html[lang="ms"] .store-badge--play {
  width: calc(var(--badge-h) * 638 / 184);
}
html[lang="ms"] .store-badge--play img {
  height: calc(var(--badge-h) * 250 / 184);
  margin-top: calc(var(--badge-h) * -33 / 184);
  margin-left: calc(var(--badge-h) * -4 / 184);
}
.store-legal {
  margin-top: 12px !important;
  font-size: 12px !important;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 40rem;
}

/* Header. The hairline and shadow appear after a short scroll (site.js adds .is-scrolled). */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(24, 18, 40, .06);
}
.bar { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.logo { display: block; flex: none; border-radius: 6px; }
.logo img { height: 32px; width: auto; }
.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a, .footer-links a {
  color: var(--text-2); text-decoration: none; font-size: 15px;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.nav a { padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--text); background: var(--lilac-1); }
.nav a[aria-current="page"] { background: var(--lilac-2); color: var(--indigo); font-weight: 500; }
.nav a[aria-current="page"]:hover { background: var(--lilac-2); color: var(--indigo); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 10px; }
.lang button {
  height: 28px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-3); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--lilac-2); color: var(--indigo); }
.signin {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--indigo); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.signin:hover { background: var(--lilac-1); }
.signin:active { transform: scale(.98); }
.menu-btn {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer;
}
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav a {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  min-height: 44px; margin: 2px 0; padding: 0 12px; border-radius: 8px;
  color: var(--text); text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.mobile-nav a:hover { background: var(--lilac-1); }
.mobile-nav a[aria-current="page"] { background: var(--lilac-2); color: var(--indigo); font-weight: 500; }
.mobile-nav a[aria-current="page"]:hover { background: var(--lilac-2); color: var(--indigo); }
.mobile-nav .wrap { display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; padding-bottom: 12px; }

/* Sections — 96px desktop, 64px below 640px. Alternate .sec-white and .sec-lilac. */
.sec { padding: 96px 0; }
.sec-white { background: #fff; }
.sec-lilac { background: var(--lilac-1); --plate-ring: var(--lilac-1); }
.sec-head { max-width: 680px; margin-bottom: 56px; }
.sec h1, .sec h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
.sec h2.highlights-title { font-size: 28px; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 24px; }
.sec-lede { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 36rem; }
.label { font-size: 14px; font-weight: 500; color: var(--red-ink); margin-bottom: 12px; }

/* ---------- Hero ----------
   At 1440 the street is 222px (the whole 1920 x 296 drawing).
   Header 72 + copy band + that street = 900. Nothing sits on the drawing. */
.hero { background: var(--lilac-1); overflow: hidden; }
.hero-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: end;
  min-height: calc(900px - var(--header-h) - var(--street-h));
  padding-top: 72px; padding-bottom: 72px; align-content: center;
}
.hero h1 { font-size: clamp(40px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -0.03em; max-width: 9.6em; }
:lang(ms) .hero h1 { max-width: 11em; }
.hero h1 .hl { color: var(--red); }
.hero-lede { margin-top: 20px; font-size: 18px; line-height: 28px; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-get { max-width: 528px; padding-left: 32px; border-left: 2px solid var(--orange); }
.get-title { font-size: 18px; line-height: 26px; color: var(--text); font-weight: 500; }
.get-sub { text-wrap: balance; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.listing-link { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }

.street {
  position: relative; height: var(--street-h); aspect-ratio: 1920 / 296;
  background: var(--lilac-1); overflow: hidden;
}
.scene { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.street-row { display: none; }

/* Street drawing palette (inline SVG, so it can animate and use Inter).
   Unscoped s- classes so they also reach the <use> copies of houses and durians. */
.sw { fill: #fff; }
.sl1 { fill: var(--lilac-1); }
.sl2 { fill: var(--lilac-2); }
.sr { fill: var(--red); }
.so { fill: var(--orange); }
.so2 { fill: var(--orange-80); }
.si { fill: var(--indigo); }
.sn { fill: none; }
.slo { fill: none; stroke-width: 8; }
.sli { fill: none; stroke: #fff; stroke-width: 4; }
.slp { fill: none; stroke: var(--lilac-2); stroke-width: 4; }
.sleg { fill: none; stroke-width: 7; }
.snum { font: 500 8px "Inter", system-ui, sans-serif; fill: var(--indigo); stroke: none; }
.ssign { font: 500 12px "Inter", system-ui, sans-serif; fill: var(--indigo); stroke: none; }
.sreg { font: 600 14px "Inter", system-ui, sans-serif; fill: var(--indigo); stroke: none; }

/* Resting poses are the end poses. No-JS, reduced motion, and ?still=1 show these.
   Street visitor end pose: boom down behind the car, card shown, guard's hand raised,
   car drawn through the gate (viewBox x 786–888, inside the phone crop x 392–910;
   closed arm ends at x 750).
   px in these SVG transforms are viewBox units. */
.cast .arm { transform-box: fill-box; transform-origin: 0 50%; }
.cast .guard-arm { transform-box: fill-box; transform-origin: 0 100%; }
.cast .sway, .cast .idle-leaf { transform-box: fill-box; transform-origin: 50% 100%; }
.cast .act { transform-box: fill-box; transform-origin: 50% 100%; }
.illo-guard .scan { transform-box: view-box; transform-origin: 342px 246px; }
.illo-pay .fan { transform-box: view-box; transform-origin: 400px 36px; }
.illo .pin, .illo .letter { transform-box: fill-box; transform-origin: 50% 0; }

/* Play-once holds the from pose until .cast.play, then runs once.
   Idle (trees, leaves) stays paused until .cast.inview. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.still) .cast:not(.play) .car { transform: translateX(-904px); }
  html.js:not(.still) .cast:not(.play) .reg { opacity: 0; transform: translateY(6px); }
  html.js:not(.still) .cast:not(.play) .guard-arm { transform: rotate(143deg); }
  html.js:not(.still) .cast:not(.play) .act-aisyah { transform: translateX(-10px); }
  html.js:not(.still) .cast:not(.play) .act-reach { transform: translateX(10px); }
  html.js:not(.still) .cast:not(.play) .scan { transform: rotate(8deg); }
  html.js:not(.still) .cast:not(.play) .pass { transform: translate(8px, 8px); }
  html.js:not(.still) .cast:not(.play) .show-slip { transform: translate(-8px, 6px); }
  html.js:not(.still) .cast:not(.play) .show-phone { transform: translate(8px, 6px); }
  html.js:not(.still) .cast:not(.play) .fan { transform: rotate(-50deg); }
  html.js:not(.still) .cast:not(.play) .pin { transform: translateY(-18px); }
  html.js:not(.still) .cast:not(.play) .letter { transform: translateY(-22px); }

  /* Visitor at the gate: one 10 s timeline (+0.3 s), so each step waits for the last. */
  html.js:not(.still) .cast.play .car { animation: car-visit 10s 0.3s both; }
  html.js:not(.still) .cast.play .reg { animation: reg-cue 10s 0.3s both; }
  html.js:not(.still) .cast.play .guard-arm { animation: guard-check 10s 0.3s both; }
  html.js:not(.still) .cast.play .arm { animation: gate-cycle 10s 0.3s both; }
  html.js:not(.still) .cast.play .act-aisyah { animation: step-in 1.1s var(--ease) 0.2s both; }
  html.js:not(.still) .cast.play .act-reach { animation: reach-in 1.3s var(--ease) 0.45s both; }
  html.js:not(.still) .cast.play .scan { animation: scan-once 1.15s var(--ease) both; }
  html.js:not(.still) .cast.play .pass { animation: pass-once 0.9s var(--ease) 120ms both; }
  html.js:not(.still) .cast.play .show-slip { animation: slip-once 0.8s var(--ease) both; }
  html.js:not(.still) .cast.play .show-phone { animation: phone-once 0.8s var(--ease) 220ms both; }
  html.js:not(.still) .cast.play .fan { animation: fan-once 1.1s var(--ease) both; }
  html.js:not(.still) .cast.play .pin { animation: pin-drop 0.7s var(--ease) both; }
  html.js:not(.still) .cast.play .pin-2 { animation-delay: 120ms; }
  html.js:not(.still) .cast.play .pin-3 { animation-delay: 240ms; }
  html.js:not(.still) .cast.play .pin-4 { animation-delay: 360ms; }
  html.js:not(.still) .cast.play .letter { animation: letter-drop 0.75s var(--ease) both; }

  html.js:not(.still) .cast .sway,
  html.js:not(.still) .cast .idle-leaf {
    animation: tree-idle 8s ease-in-out infinite;
    animation-play-state: paused;
  }
  html.js:not(.still) .cast .sway-b,
  html.js:not(.still) .illo-letter .idle-leaf { animation-delay: 2s; }
  html.js:not(.still) .cast.inview .sway,
  html.js:not(.still) .cast.inview .idle-leaf { animation-play-state: running; }

  /* Hide only after the head script marks html.js, and never for ?still=1.
     A stagger group hides its children; a single block hides itself. */
  html.js:not(.still) .reveal:not(.reveal-stagger) {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  }
  html.js:not(.still) .reveal:not(.reveal-stagger).in { opacity: 1; transform: none; }
  html.js:not(.still) .reveal.reveal-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 360ms var(--ease), transform 360ms var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  html.js:not(.still) .reveal.reveal-stagger.in > * { opacity: 1; transform: none; }
}
/* Visitor timeline, 1% = 0.1 s:
   0–2.6 s   car drives in and eases to a stop at the closed boom (x 482–584; post at 592,
             arm across the lane at bonnet height y 294–302, pivot on the post at 600, 298)
   3.0–3.4   "Visitor registered" card with tick fades up (0.4 s after the stop)
   3.8–4.4   guard holds the scanner out; 4.4–5.0 holds
   5.0–5.6   guard raises his hand; boom lifts 5.4–6.6 (2 s after the tick)
   7.0–8.6   car drives through and parks by the lamp post
   9.0–10.0  boom lowers */
@keyframes car-visit {
  0% { transform: translateX(-904px); animation-timing-function: ease-out; }
  26%, 70% { transform: translateX(-304px); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  86%, 100% { transform: none; }
}
@keyframes reg-cue {
  0%, 30% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  34%, 100% { opacity: 1; transform: none; }
}
@keyframes guard-check {
  0%, 38% { transform: rotate(143deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  44%, 50% { transform: rotate(70deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  56%, 100% { transform: none; }
}
@keyframes gate-cycle {
  0%, 54% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  66%, 90% { transform: rotate(-72deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: none; }
}
@keyframes step-in { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes reach-in {
  from { transform: translateX(10px); }
  60% { transform: translateX(-3px) rotate(-2deg); }
  to { transform: none; }
}
@keyframes scan-once {
  from { transform: rotate(8deg); }
  55% { transform: rotate(-6deg); }
  to { transform: none; }
}
@keyframes pass-once { from { transform: translate(8px, 8px); } to { transform: none; } }
@keyframes slip-once { from { transform: translate(-8px, 6px); } to { transform: none; } }
@keyframes phone-once { from { transform: translate(8px, 6px); } to { transform: none; } }
@keyframes fan-once {
  from { transform: rotate(-50deg); }
  45% { transform: rotate(-70deg); }
  to { transform: rotate(0deg); }
}
@keyframes pin-drop { from { transform: translateY(-18px); } to { transform: none; } }
@keyframes letter-drop { from { transform: translateY(-22px); } to { transform: none; } }
@keyframes tree-idle {
  0%, 55% { transform: rotate(0deg); }
  70% { transform: rotate(-1.1deg); }
  85% { transform: rotate(0.7deg); }
  100% { transform: rotate(0deg); }
}

/* ?still=1 paints the end state before site.js. Hide rules stay non-important so this wins. */
html.still .cast, html.still .cast * { animation: none !important; }
html.still .reveal, html.still .reveal > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ---------- What it is ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.about-copy .body { margin-top: 28px; font-size: 17px; line-height: 1.7; max-width: 40rem; }
.roles { margin-top: 40px; border-top: 1px solid var(--line); }
.roles div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.roles dt { color: var(--text); font-weight: 500; }
.roles dd { color: var(--text-2); }
.about-art { margin-top: 8px; }
.about-art img { width: 100%; max-width: 420px; margin-left: auto; }
.art-cap { margin-top: 12px; font-size: 14px; color: var(--text-3); text-align: right; }
.intro-more { margin-top: 16px; font-size: 17px; line-height: 1.7; max-width: 40rem; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.highlight {
  display: block; padding: 24px; border-radius: 16px; text-decoration: none; color: var(--text-2);
  border: 1px solid var(--line);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.highlight h3 { font-size: 19px; line-height: 1.3; color: var(--text); }
.highlight p { margin-top: 8px; }
.highlight-res { background: var(--orange-92); }
.highlight-guard { background: var(--lilac-1); }
.highlight-mgmt { background: var(--red-88); }
.highlight:hover { border-color: var(--line-2); }
.highlights-more { display: inline-flex; margin-top: 24px; font-weight: 500; }
.notice-block { max-width: 420px; margin: 0 0 80px; }
.notice-block img { width: 100%; }
.notice-block .art-cap { text-align: left; }
.page-hero { background: var(--lilac-1); padding: 72px 0 56px; }
.page-hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; max-width: 18em; }
.page-hero + .sec { padding-top: 96px; }

/* ---------- Features ---------- */
.features { padding-top: 0; padding-bottom: 80px; }
.feat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.feat + .feat { margin-top: 112px; }
.feat-guard { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.feat h3 { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
.feat-intro { margin-top: 12px; font-size: 17px; line-height: 1.65; max-width: 34rem; }
.feat-art img { width: 100%; }
.feat-art figcaption { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--text-3); }
.feat-art.panel { background: var(--lilac-1); border-radius: 24px; padding: 32px 32px 24px; }
.feat-res .feat-art.panel { background: var(--orange-92); }
.feat-guard .feat-art img { max-width: 560px; margin-left: auto; }
.feat-guard .feat-art figcaption { text-align: right; }
.ticks { margin-top: 28px; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.ticks .ic { margin-top: 3px; color: var(--indigo); }

/* ---------- Gotong-royong break ---------- */
.break { padding: 72px 0 56px; margin-top: 32px; background: var(--orange-88); }
.break img { width: 100%; max-width: 1200px; margin: 0 auto; }
.break-cap { max-width: 1200px; margin: 16px auto 0; padding: 0; display: flex; justify-content: space-between; gap: 24px; font-size: 15px; color: var(--text-2); }
.break-cap span:last-child { color: var(--red-ink); font-size: 14px; font-weight: 500; text-align: right; }

/* ---------- How it works ---------- */
.steps {
  --step-count: 4;
  --step-gap: 40px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--step-count), 1fr);
  gap: var(--step-gap);
}
.steps-3 { --step-count: 3; }
/* Line runs from the centre of the first plate to the centre of the last, and stops there. */
.steps::before {
  content: "";
  position: absolute;
  left: 20px;
  right: calc(100% / var(--step-count) - var(--step-gap) * (var(--step-count) - 1) / var(--step-count) - 20px);
  top: 15px;
  height: 0;
  border-top: 2px dashed var(--orange);
}
.steps li { position: relative; }
.plate {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 32px; border-radius: 4px; background: var(--indigo); color: #fff;
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--plate-ring, #fff);
  z-index: 1;
}
.steps h3 { margin-top: 24px; font-size: 19px; line-height: 1.3; }
.steps p { margin-top: 8px; font-size: 15px; line-height: 1.6; }

.how { padding-bottom: 72px; }

/* ---------- Pricing ---------- */
.pricing { background: var(--lilac-1); }
.ledger { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--red); }
.ledger > div { padding: 32px 48px 8px 0; }
.ledger > div + div { padding-left: 48px; border-left: 1px solid var(--line); }
.ledger h3 { font-size: 15px; color: var(--text-3); font-weight: 400; }
.ledger .fig { margin-top: 12px; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; color: var(--text); font-weight: 500; }
.ledger p { margin-top: 12px; max-width: 30rem; }
.ledger .sub { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--line-2); }
.ledger .sub h4 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ledger .sub h4 .ic { color: var(--red-ink); }
.ledger .sub p { margin-top: 6px; font-size: 15px; }
.ledger .more { display: inline-flex; margin-top: 20px; font-weight: 500; }

/* ---------- App: second download CTA ---------- */
.app { padding: 112px 0; }
.app-panel {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: center;
  padding: 40px 64px; border-radius: 24px; background: var(--red-88);
}
.app-art { width: 100%; max-width: 280px; }
.app h1, .app h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
.app-copy > p { margin-top: 16px; max-width: 34rem; font-size: 17px; }
.app .stores { margin-top: 28px; }
.app-note { margin-top: 16px !important; font-size: 14px !important; color: var(--text-3); }

/* ---------- Contact ---------- */
.contact { padding: 96px 0; background: var(--orange-80); }
.contact-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: end; }
.contact h1, .contact h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
.contact p { margin-top: 16px; max-width: 34rem; font-size: 17px; }
.contact-line { font-size: 20px !important; color: var(--text); }
.contact-line a { font-weight: 500; }
.contact-art img { width: 100%; max-width: 320px; }

/* ---------- Footer: brand, product, company, legal ---------- */
.site-footer { padding: 64px 0 40px; border-top: 4px solid var(--red); background: #fff; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.footer-grid .logo img { height: 28px; }
.footer-blurb { margin-top: 16px; max-width: 36rem; color: var(--text-2); line-height: 1.6; }
.biz { margin-top: 20px; color: var(--text); }
.biz .mark-ph { margin-right: 8px; }
.biz-sub { margin-top: 4px; color: var(--text-2); }
.footer-badges { margin-top: 28px; }
.site-footer .footer-stores { margin-top: 0; }
.footer-badges .listing-link { margin-top: 8px; }
@media (min-width: 641px) {
  .site-footer .footer-stores { flex-wrap: nowrap; }
}
.footer-grid h4 { font-size: 14px; color: var(--red-ink); font-weight: 500; margin-bottom: 12px; }
.footer-links li + li { margin-top: 8px; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--indigo); font-weight: 500; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 13px;
}
.footer-lang { flex: none; }

/* ---------- Legal pages ---------- */
.legal-hero { background: var(--orange-92); border-bottom: 2px solid var(--orange); overflow: hidden; padding-bottom: 24px; }
.legal-hero .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; min-height: 220px; padding-top: 48px; }
.legal-hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
.legal-hero-copy { padding-bottom: 40px; max-width: 40rem; }
.legal-lead { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.legal-hero .updated { display: block; font-weight: 400; line-height: 1.5; margin-top: 8px; font-size: 14px; color: var(--text-3); letter-spacing: 0; }
.legal-hero img, .legal-hero .illo { display: block; width: 220px; height: auto; flex: none; }
.legal-banner {
  display: flex; gap: 12px; align-items: flex-start; margin: 40px 0 0; padding: 16px 20px;
  border: 1px solid rgba(250, 81, 71, .28); border-radius: 12px;
  background: var(--red-88); color: var(--text); font-size: 15px;
}
.legal-banner strong { font-weight: 600; color: var(--red-ink); }
.legal-banner .ic { margin-top: 3px; color: var(--red-ink); }
.legal { display: grid; grid-template-columns: 240px minmax(0, 680px); gap: 80px; padding-top: 48px; padding-bottom: 72px; }
.legal-toc { position: sticky; top: 104px; align-self: start; font-size: 14px; }
.legal-toc h2 { font-size: 14px; color: var(--red-ink); font-weight: 500; margin-bottom: 12px; }
.legal-toc li + li { margin-top: 4px; }
.legal-toc a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 8px; color: var(--text-2); text-decoration: none; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.legal-toc a:hover { background: var(--lilac-1); color: var(--text); }
.legal-body { font-size: 16px; line-height: 1.75; counter-reset: legal-sec; }
.legal-body h2 { font-size: 22px; line-height: 1.3; margin: 48px 0 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; scroll-margin-top: 96px; }
.legal-body h2::before {
  counter-increment: legal-sec;
  content: counter(legal-sec);
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--lilac-2);
  color: var(--indigo);
  font-size: 14px;
  font-weight: 500;
}
.legal-close { padding: 64px 0; background: var(--lilac-2); }
.legal-close .contact-line { font-size: 20px; color: var(--text); }
.legal-close .contact-line a { font-weight: 500; }
.legal-close-note { margin-top: 12px; max-width: 36rem; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: 12px; }
.legal-body ul { list-style: disc; padding-left: 20px; }
.legal-body li + li { margin-top: 6px; }
.legal-body strong { font-weight: 500; color: var(--text); }
.mark-ph { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--red-88); color: var(--red-ink); font-size: 12px; font-weight: 500; }

/* ---------- v5.1 primitives: crumbs, cards, splits, checklist, FAQ, CTA ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li:not(:last-child)::after { content: "/"; color: var(--text-3); }
.crumbs a { color: var(--indigo); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 500; }
.page-hero .crumbs, .legal-hero .crumbs { margin-bottom: 16px; }
.crumb-bar { background: var(--lilac-1); padding: 16px 0; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px; border-radius: 16px; border: 1px solid var(--line);
  background: #fff; color: var(--text-2); text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.card .ic { width: 22px; height: 22px; color: var(--indigo); }
.card h3 { font-size: 19px; line-height: 1.3; color: var(--text); }
.card p { line-height: 1.6; }
.card:hover { border-color: var(--line-2); background: var(--lilac-1); }
.card-res { background: var(--orange-92); }
.card-guard { background: var(--lilac-1); }
.card-mgmt { background: var(--red-88); }
.card-res:hover, .card-guard:hover, .card-mgmt:hover { border-color: var(--line-2); }
.text-link { display: inline-flex; margin-top: 24px; font-weight: 500; }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center; padding: 40px 0;
}
.split + .split { border-top: 1px solid var(--line); }
.split h3 { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
.split p { margin-top: 12px; font-size: 17px; line-height: 1.65; max-width: 36rem; }
.split-art {
  background: var(--lilac-1); border-radius: 24px; padding: 24px;
}
.sec-lilac .split-art { background: #fff; }
.split-art img, .split-art .illo { width: 100%; height: auto; max-height: 380px; margin: 0 auto; }
.split-art img { object-fit: contain; }
.split-art .illo { display: block; }
.split-flip .split-copy { order: 2; }

.checklist { display: grid; gap: 16px; margin-top: 32px; max-width: 40rem; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.checklist .ic { margin-top: 4px; color: var(--indigo); }

.faq { display: grid; gap: 8px; max-width: 720px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 20px;
}
.sec-white .faq-item { background: var(--lilac-1); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-right: 4px;
  border-right: 1.5px solid var(--indigo); border-bottom: 1.5px solid var(--indigo);
  transform: rotate(45deg); transition: transform 200ms var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-a { padding: 0 32px 16px 0; color: var(--text-2); line-height: 1.65; }

.cta-band { padding: 96px 0; background: var(--lilac-2); }
.cta-panel {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.cta-band h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
.cta-band .cta-lede { margin-top: 16px; font-size: 18px; line-height: 1.6; max-width: 36rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta-aside {
  padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hero-top { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; padding-bottom: 40px; }
  .hero h1 { max-width: 18ch; }
  .hero-get { margin-top: 32px; padding: 24px 0 0; border-left: 0; border-top: 2px solid var(--orange); max-width: 560px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-art img { margin: 0; }
  .art-cap { text-align: left; }
  .feat, .feat-guard { grid-template-columns: 1fr; gap: 40px; }
  .feat .feat-art { order: -1; }
  .feat-guard .feat-art img { margin: 0; }
  .feat-guard .feat-art figcaption { text-align: left; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .steps-3::before { display: block; }
  .app-panel { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 40px; }
}

@media (max-width: 1100px) {
  .nav, .header-actions .signin { display: none; }
  .menu-btn { display: inline-flex; }
  .bar { justify-content: space-between; }
  .mobile-nav.open { display: block; }
}

@media (max-width: 800px) {
  .highlights { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-art { order: 2; }
  .contact-art img { max-width: 240px; }
  .ledger { grid-template-columns: 1fr; }
  .ledger > div { padding-right: 0; }
  .ledger > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 24px; }
  .legal { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .card-grid, .split, .cta-panel { grid-template-columns: 1fr; }
  .split { gap: 32px; padding: 32px 0; }
  .split-flip .split-copy { order: 0; }
  .split-art { order: -1; }
  .steps-3 { grid-template-columns: 1fr; row-gap: 32px; }
  .steps-3::before { display: none; }
  .steps-3 li:not(:last-child)::after {
    content: ""; position: absolute; left: 19px; top: 32px; bottom: -32px; width: 0;
    border-left: 2px dashed var(--orange);
  }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --header-h: 64px; }
  html { scroll-padding-top: 72px; }
  .bar { gap: 12px; }
  .logo img { height: 28px; }
  .sec, .cta-band { padding: 64px 0; }
  .page-hero + .sec { padding-top: 64px; }
  .sec-head { margin-bottom: 40px; }
  .sec h1, .sec h2, .contact h1, .contact h2, .app h1, .app h2, .page-hero h1, .legal-hero h1, .cta-band h2 { font-size: 30px; }
  .split h3 { font-size: 24px; }
  .sec h2.highlights-title { font-size: 24px; }
  .page-hero { padding: 48px 0 40px; }
  .highlights { grid-template-columns: 1fr; }

  .hero-top { padding-top: 40px; padding-bottom: 32px; }
  /* Put the gate scene above the download block so the pakcik, gate and visitor car sit in the first screen. */
  .hero { display: flex; flex-direction: column; }
  .hero-top { display: contents; }
  .hero-copy { order: 1; padding: 32px var(--pad) 16px; }
  .street { order: 2; }
  .street-row { order: 3; }
  .hero-get { order: 4; margin: 8px var(--pad) 32px; max-width: none; }
  .hero h1 { font-size: 36px; line-height: 1.08; letter-spacing: -0.02em; }
  .hero-lede { font-size: 17px; line-height: 26px; margin-top: 16px; }
  .hero-actions { margin-top: 28px; }
  .hero-actions .btn { flex: 1 1 0; padding: 0 16px; }
  :root { --badge-h: 44px; --badge-gap: 11px; }
  .store-badge { border-radius: 7px; }


  /* Phone crop of the street: x 392–910, from the durian tree's edge to the lamp post,
     so the guardhouse, the pakcik, the gate and the visitor car are whole */
  .street { height: auto; aspect-ratio: 518 / 296; overflow: hidden; }
  .scene { position: absolute; top: 0; height: 100%; width: calc(100% * 1920 / 518); left: calc(-100% * 392 / 518); }
  /* Terrace strip sits under the gate: houses 8–16 and the rambutan, viewBox x 1064–1786 */
  .street-row { display: block; }
  .street-row svg { display: block; width: 100%; height: auto; }

  .roles div { grid-template-columns: 1fr; gap: 2px; }
  .feat + .feat { margin-top: 80px; }
  .feat h3 { font-size: 24px; }
  .feat-art.panel { margin: 0 calc(-1 * var(--pad)); border-radius: 0; padding: 24px 20px 20px; }
  .break-cap { flex-direction: column; gap: 4px; padding: 0 var(--pad); }
  .break-cap span:last-child { text-align: left; }
  .steps { grid-template-columns: 1fr; row-gap: 32px; }
  .steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 20px; }
  .steps h3 { margin-top: 4px; grid-column: 2; }
  .steps p { grid-column: 2; }
  .plate { grid-row: 1 / span 2; }
  .steps::before { display: none; }
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 19px; top: 32px; bottom: -32px; width: 0; height: auto;
    border-top: 0; border-left: 2px dashed var(--orange);
  }
  .app { padding: 72px 0; }
  .break { padding: 48px 0 40px; margin-top: 24px; }
  .app-panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; margin: 0 calc(-1 * var(--pad)); border-radius: 0; }
  .app-art { max-width: 200px; }
  .ledger .fig { font-size: 26px; }
  .contact { padding: 72px 0; }
  .contact-line { font-size: 17px !important; word-break: break-word; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .legal-hero .wrap { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 32px; gap: 0; }
  .legal-hero-copy { padding-bottom: 24px; }
  .legal-hero img, .legal-hero .illo { width: 160px; align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .btn:active, .signin:active { transform: none; }
  html.js .reveal, html.js .reveal > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Features and How it works (run 2) ----------
   Home .steps is unchanged. These pages use their own layout. */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 380px);
  gap: 48px 64px;
  align-items: center;
}
.page-hero-art { margin: 0; }
.page-hero-art img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  margin-inline: auto;
}
.page-hero-art figcaption,
.split-art figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-3);
}
.jump-label { margin-top: 28px; margin-bottom: 8px; font-size: 14px; color: var(--text-3); }
.jump-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.jump-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
  color: var(--indigo); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.jump-nav a:hover { background: var(--lilac-2); }
.split.flush-top { padding-top: 0; }
.role-cards { margin-top: 8px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist.cols-2 {
  max-width: none;
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
  gap: 16px 48px;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.setup-card {
  --plate-ring: var(--lilac-1);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--lilac-1);
}
.setup-card .plate { margin-bottom: 16px; }
.setup-card h3 { font-size: 19px; line-height: 1.3; }
.setup-card p { margin-top: 8px; line-height: 1.6; }
.flow { counter-reset: flow; margin-top: 8px; }
.flow li {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.flow li:last-child { border-bottom: 1px solid var(--line); }
.flow li::before {
  content: counter(flow);
  font-weight: 500;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.flow h3 { font-size: 17px; line-height: 1.35; }
.flow p { margin-top: 4px; }
.timeline { max-width: 720px; }
.timeline li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  position: relative;
  padding-bottom: 28px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 36px;
  bottom: 0;
  border-left: 2px dashed var(--orange);
}
.timeline .plate { position: relative; z-index: 1; }
.timeline h3 { margin-top: 4px; font-size: 19px; line-height: 1.3; }
.timeline p { margin-top: 6px; }

/* Inlined drawings (Opus batch 1). Same box as the old <img>; one gotong viewport at a time. */
.page-hero-art .illo { display: block; width: 100%; height: auto; max-height: 380px; margin-inline: auto; }
.break .illo { display: block; width: 100%; height: auto; max-width: 1200px; margin: 0 auto; }
.break .illo-gotong-narrow { display: none; }
@media (max-width: 640px) {
  .break .illo-gotong-wide { display: none; }
  .break .illo-gotong-narrow { display: block; }
}

/* Features/How parts. Resting markup is the end pose. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.still) .cast:not(.play) .stamp { transform: translateY(-14px); }
  html.js:not(.still) .cast:not(.play) .settle { transform: translateY(6px); }
  html.js:not(.still) .cast:not(.play) .birds { transform: translateX(-12px); }
  html.js:not(.still) .cast:not(.play) .gr { transform: translateX(-10px); }

  html.js:not(.still) .cast.play .stamp { animation: stamp-once 1.2s var(--ease) 300ms both; }
  html.js:not(.still) .cast.play .settle { animation: settle-once 0.9s var(--ease) both; }
  html.js:not(.still) .cast.play .birds { animation: birds-once 1.6s var(--ease) 200ms both; }
  html.js:not(.still) .cast.play .gr { animation: step-in 1.1s var(--ease) both; }
  html.js:not(.still) .cast.play .gr-drain { animation-delay: 150ms; }
  html.js:not(.still) .cast.play .gr-kid { animation-delay: 300ms; }
  html.js:not(.still) .cast.play .gr-bag { animation-delay: 450ms; }
  html.js:not(.still) .cast.play .gr-barrow { animation-delay: 600ms; }

  /* Scroll-drawn connector. Only after site.js adds .tl-draw, so a JS failure leaves it drawn.
     Segments live on li 1–6 only, so the line ends at plate 7. */
  .timeline.tl-draw li::before { clip-path: inset(0 0 calc((1 - var(--draw, 0)) * 100%) 0); }
}
@keyframes stamp-once {
  from { transform: translateY(-14px); }
  50% { transform: none; }
  65% { transform: translateY(-4px); }
  to { transform: none; }
}
@keyframes settle-once { from { transform: translateY(6px); } to { transform: none; } }
@keyframes birds-once { from { transform: translateX(-12px); } to { transform: none; } }

@media (max-width: 920px) {
  .page-hero-grid,
  .card-grid.cols-2,
  .checklist.cols-2,
  .setup-grid { grid-template-columns: 1fr; }
  .page-hero-art { max-width: 280px; }
  .page-hero-art img, .page-hero-art .illo { max-height: 280px; }
}

/* ---------- Pricing, Contact, Download (run 3) ---------- */
.page-hero .contact-line { margin-top: 20px; max-width: 36rem; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.plan-card .plan-price {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.plan-card .plan-price:hover { text-decoration: underline; }
.plan-note { margin-top: 20px; max-width: 42rem; color: var(--text-3); font-size: 15px; line-height: 1.6; }
.compare-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.compare-wrap:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}
.compare caption {
  caption-side: bottom;
  text-align: left;
  padding: 12px 20px 16px;
  color: var(--text-3);
  font-size: 14px;
}
.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.compare thead th {
  color: var(--text);
  font-weight: 500;
  border-bottom: 2px solid var(--red);
}
.compare tbody th { color: var(--text); font-weight: 500; width: 22%; }
.compare td { color: var(--text-2); }
.about-story p + p { margin-top: 16px; max-width: 42rem; }
.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
}
.hours-note { margin-top: 20px; max-width: 42rem; }
.badge-stage {
  margin-top: 28px;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  max-width: 40rem;
}
.badge-stage .stores { margin-top: 0; }
.subhead {
  margin-top: 56px;
  margin-bottom: 8px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.req-list { display: grid; gap: 12px; margin-top: 20px; max-width: 40rem; }
.req-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); }
.qr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.qr-ph { margin: 0; }
.qr-box {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  background: var(--lilac-1);
}
.btn.contact-mail {
  height: auto;
  min-height: 48px;
  padding: 12px 24px;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
}
.qr-ph figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text-3); max-width: 16rem; }
.inline-ph { margin-left: 8px; vertical-align: middle; }

@media (max-width: 920px) {
  .plan-grid,
  .hours-grid,
  .qr-grid { grid-template-columns: 1fr; }
  .subhead { font-size: 24px; }
}

@media (max-width: 640px) {
  .plan-card .plan-price { font-size: 24px; }
  .badge-stage { padding: 20px; }
}