/* ===========================================================================
   PlayAreaOS marketing site — "Porcelain Playground"
   Direction 01 (design-options) + tile treatment B "Live Windows"
   (tile-options) grown into the whole page.
   Porcelain ivory canvas, deep teal ink, soft-clay cards, the four brand
   accents — and one motion signature everywhere: the clay bounce
   (cubic-bezier(.34,1.56,.64,1)), self-drawing strokes, springy staggers,
   quiet loops phased by --ph so grids shimmer instead of pulsing.
   Zero external requests: the APP'S OWN two faces, self-hosted.
   =========================================================================== */

/* THE APP'S OWN TWO FACES — the same variable woff2 files the product serves
   (copied from apps/web/public/fonts, provenance in that folder's README):
   Fredoka is the display face (headings, wordmark), Nunito the body face —
   exactly as packages/ui/src/tokens.css declares them. `unicode-range` is
   verbatim from the app, so latin-ext is only fetched when an accented glyph
   is actually drawn. `swap` rather than the app's `optional`: a marketing
   first visit must show the brand face even on a cold cache, and both latin
   files are preloaded from index.html so a visible swap is the rare case. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/fredoka-v17-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/fredoka-v17-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('assets/fonts/nunito-v32-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('assets/fonts/nunito-v32-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --teal-deep: #0f4c4a;   /* the product's primary-dark — ink anchor    */
  --teal: #53c3be;        /* the product's primary — illustration mid   */
  --teal-tint: #e4f5f4;   /* wash for cards and illustration fills      */
  --yellow: #ffcd05;      /* accent fill — always carries dark ink      */
  --pink: #f06496;        /* accent fill (decorative)                   */
  --pink-ink: #bb3a67;    /* pink as TEXT — 5.37:1 on white, 4.78:1 on the pink tint */
  --pink-tint: #fdeef4;
  --green: #7ac143;       /* accent fill (decorative)                   */
  --green-ink: #3f7d1e;   /* green as TEXT — 5.04:1 on white            */
  --green-tint: #eef7e4;
  --slate: #2f5bbd;       /* Executive counterpoint — back office       */
  --slate-tint: #e9eefb;
  --paper: #f7f6f2;       /* porcelain ivory canvas                     */
  --surface: #ffffff;
  --ink: #17201f;         /* 15.4:1 on porcelain                        */
  --muted: #5f6563;       /* 5.5:1 on porcelain                         */
  --line: rgba(15, 76, 74, 0.14);
  --radius: 14px;
  --radius-tile: 20px;
  --shadow-clay: 0 10px 22px rgba(15, 76, 74, 0.10), inset 0 2px 4px rgba(255, 255, 255, 0.95);
  --shadow-soft: 0 1px 2px rgba(15, 76, 74, 0.05), 0 10px 26px -16px rgba(15, 76, 74, 0.18);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* the clay bounce */
  /* The app's token stacks, verbatim (--pa-font-display / --pa-font-body). */
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --wrap: 1140px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

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

a { color: var(--teal-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 420px) { .wrap { padding: 0 16px; } }

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--teal-deep); color: #fff; padding: 10px 18px;
  border-radius: 999px; z-index: 99;
}
.skip-link:focus { left: 8px; }

/* ---- Type ---------------------------------------------------------------- */
/* 500, not 600: the app's Fredoka display weight (--pa-font-display-weight,
   Ahmad's "no bold font anywhere" ruling) — with the real face loading now,
   600 would read heavier than the sign-in page this site must match. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.15rem, 5.6vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.22rem; line-height: 1.3; }
p  { max-width: 62ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow--yellow { background: var(--yellow); color: var(--ink); }
.eyebrow--pink   { background: var(--pink-tint); color: var(--pink-ink); }
.eyebrow--green  { background: var(--green-tint); color: var(--green-ink); }
.eyebrow--slate  { background: var(--slate-tint); color: var(--slate); }
.eyebrow--teal   { background: var(--teal-tint); color: var(--teal-deep); }

/* ---- Buttons --------------------------------------------------------------
   FLAT, like the app's (Ahmad, 2026-08-18: "remove the shadows from buttons").
   Face and weight are the app's shared <Button>: --pa-font-body at 600.
   Every colour rule is written as a.btn--* / .site-nav a.btn--* beats-proof:
   the header "Try it now" used to render label-invisible because
   `.site-nav a { color: var(--teal-deep) }` (0,1,1) outranked
   `.btn--primary { color: #fff }` (0,1,0) — teal-on-teal, in every browser. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2.5px solid var(--teal-deep);
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms var(--spring), background-color 160ms ease;
}
a.btn--primary, .btn--primary { background: var(--teal-deep); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); }
.btn--primary:active { transform: translateY(1px); }
a.btn--ghost, .btn--ghost { background: transparent; color: var(--teal-deep); }
.btn--ghost:hover { background: var(--teal-tint); }
a.btn--sun, .btn--sun { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.btn--sun:hover { transform: translateY(-2px); }

/* ---- Header -------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 246, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px;
}
/* The brand is the sign-in page's lockup image — icon + "PlayAreaOs" wording
   as one artwork, the wordmark's blue->green gradient baked into the file
   (Ahmad, 2026-08-18: "copy the logo from sign in page with the wording").
   Sized exactly like the app header's .pa-logo-lockup: 40px tall, width free,
   capped at min(52vw, 240px) so the burger never lands on the "Os". */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 40px; width: auto; max-width: min(52vw, 240px); object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 24px; }
/* :not(.btn): the nav's link ink must never repaint a button's label —
   this exact rule once turned the header CTA teal-on-teal (see Buttons). */
.site-nav a:not(.btn) {
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem;
  color: var(--teal-deep); text-decoration: none;
}
.site-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2.5px; text-decoration-color: var(--yellow); }
.site-nav .btn { padding: 9px 20px; font-size: 0.95rem; }
.nav-toggle {
  display: none;
  background: none; border: 2.5px solid var(--teal-deep); border-radius: 10px;
  width: 44px; height: 40px; cursor: pointer; color: var(--teal-deep);
  align-items: center; justify-content: center;
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 2px solid var(--line);
    padding: 8px 24px 20px;
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 12px 4px; font-size: 1.1rem; }
  .site-nav .btn { margin-top: 10px; justify-content: center; }
}

/* ---- Hero ----------------------------------------------------------------
   The loved hero, evolved per Option 1's mock: same copy, same ensemble,
   now with floating groups, a self-drawing signature and the bouncing ball. */
.hero { position: relative; overflow: hidden; padding: 72px 0 84px; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px; align-items: center;
}
.hero-copy .lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--muted); margin: 22px 0 30px;
}
.hero-copy .lead strong { color: var(--ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 14px; font-size: 0.92rem; color: var(--muted); }
.hero-art { position: relative; }
.hero-art svg { width: 100%; }
.hero::before {
  content: "";
  position: absolute; right: -140px; top: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--teal-tint);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute; left: -110px; bottom: -160px;
  width: 300px; height: 300px; border-radius: 50%;
  background: var(--pink-tint);
  z-index: -1;
}
@media (max-width: 900px) {
  .hero { padding: 44px 0 60px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { width: min(100%, 480px); margin: 0 auto; }
}

/* hero motion — motion-safe only */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 90ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 180ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 270ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 340ms; }
  .hero-art { animation: rise 700ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  /* the timer ring slowly sweeps — origin pinned to the ring's centre
     (view-box coordinates: the ring lives at 432,178 in the hero SVG) */
  .ring-sweep { animation: sweep 6s linear infinite; transform-box: view-box; transform-origin: 432px 178px; }
  @keyframes sweep { to { transform: rotate(360deg); } }
  /* floating groups (Option 1 mock) */
  .fl { transform-box: fill-box; transform-origin: center; animation: floaty 5.4s ease-in-out infinite; }
  .fla { animation-delay: 0s; }
  .flb { animation-delay: 1.3s; animation-duration: 6.2s; }
  .flc { animation-delay: 2.1s; }
  .fld { animation-delay: 0.7s; animation-duration: 4.6s; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  /* the waiver signature draws itself once the page settles */
  .sig { stroke-dasharray: 170; stroke-dashoffset: 170; animation: drawonce 1.4s 1s ease forwards; }
  @keyframes drawonce { to { stroke-dashoffset: 0; } }
  /* the bouncing ball, squash and stretch pinned to its base */
  .ballg { transform-box: fill-box; transform-origin: 50% 100%; animation: bounce 1.9s cubic-bezier(0.35, 0, 0.65, 1) infinite; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1.08, 0.9); }
    18% { transform: translateY(-8px) scale(1, 1); }
    50% { transform: translateY(-64px) scale(0.96, 1.05); }
    82% { transform: translateY(-8px) scale(1, 1); }
  }
}

/* ---- Why owners switch — logic visuals, icon-led rows ---------------------
   The 2026-08-18 rebuild: the 8 flat tinted cards read as a wall of pastel
   boxes (Ahmad: "ugly ... use logic visuals instead"). Now each claim leads
   with a small drawn explanation on a white clay tile — the rows themselves
   are chromeless, so the section reads as a list, not a box wall.
   .section.sec-sell: same 0,1,0 as .section otherwise, and .section is later
   in the file — the double class keeps this hug-the-hero padding winning. */
.section.sec-sell { padding: 0 0 10px; }
.sec-sell .section-head { margin-bottom: 26px; }
.sell-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px 44px; }
@media (min-width: 720px) { .sell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; } }
.sell { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
/* the visual's tile — the app's clay recipe at pocket size, glow rotating
   through the brand set exactly as the live grid's tiles do */
.sell-art {
  --glow: var(--teal);
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--glow) 16%, transparent),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -3px 5px color-mix(in srgb, var(--glow) 7%, transparent);
}
.sell:nth-child(4n+1) .sell-art { --glow: var(--yellow); }
.sell:nth-child(4n+2) .sell-art { --glow: var(--teal); }
.sell:nth-child(4n+3) .sell-art { --glow: var(--pink); }
.sell:nth-child(4n)   .sell-art { --glow: var(--green); }
/* No blanket transform-box here: the wristband/star groups carry attribute
   transforms with their own origins, and fill-box would re-base them. The
   .armed .popin rule already sets fill-box on the popping accents alone. */
.sell-art svg { width: 46px; height: 46px; }
.sell h3 { font-size: 1.02rem; margin-bottom: 2px; }
.sell p { font-size: 0.9rem; color: var(--muted); max-width: none; }

/* ---- Section scaffolding ------------------------------------------------- */
.section { padding: 84px 0; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.08rem; }
@media (max-width: 700px) { .section { padding: 60px 0; } }

/* ===========================================================================
   SCROLL TRANSITIONS — one family, a different clay accent per section.
   JS adds .armed to <html> only when motion is allowed; .in when visible.
   =========================================================================== */
.armed .rv { opacity: 0; }
.armed .rv.in { opacity: 1; }

/* default: clay rise with overshoot (Option 1 signature) */
.armed .rv { transform: translateY(26px) scale(0.98); }
.armed .rv.in { transform: none; transition: opacity 0.6s ease, transform 0.65s var(--spring); }

/* live grid: tiles pop up one by one (delays set on the grid below) */

/* a day with it: the moments swing in from the side they sit on */
.armed .rv--l { transform: translateX(-34px) rotate(-0.8deg); }
.armed .rv--r { transform: translateX(34px) rotate(0.8deg); }
.armed .rv--l.in, .armed .rv--r.in { transform: none; transition: opacity 0.6s ease, transform 0.7s var(--spring); }

/* how it works: steps pop from small — springiest of the set */
.armed .rv--pop { transform: translateY(30px) scale(0.9); }
.armed .rv--pop.in { transform: none; transition: opacity 0.55s ease, transform 0.7s var(--spring); }

/* trust: deliberately calm — a slow, bounce-free settle */
.armed .rv--calm { transform: translateY(14px) scale(1); }
.armed .rv--calm.in { transform: none; transition: opacity 0.95s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }

/* stagger utilities */
.armed .dl1.in { transition-delay: 0.08s; }
.armed .dl2.in { transition-delay: 0.16s; }
.armed .dl3.in { transition-delay: 0.24s; }
.armed .dl4.in { transition-delay: 0.32s; }

/* self-drawing strokes, armed per revealed block (Option 1 tile language).
   Long paths set --dashv inline so no dash gap is ever visible. */
.armed .draw { stroke-dasharray: var(--dashv, 320); stroke-dashoffset: var(--dashv, 320); }
.armed .in .draw, .armed .in.draw { animation: drawin 1.1s 0.15s ease forwards; }
.armed .in .draw.d2 { animation-delay: 0.4s; }
.armed .in .draw.d3 { animation-delay: 0.65s; }
@keyframes drawin { to { stroke-dashoffset: 0; } }
/* small fills pop in after the strokes */
.armed .popin { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; }
.armed .in .popin { animation: popin 0.5s 0.9s var(--spring) forwards; }
.armed .in .popin.p2 { animation-delay: 1.15s; }
@keyframes popin { to { opacity: 1; transform: scale(1); } }

/* ===========================================================================
   THE LIVE GRID — treatment B "Live Windows", grown from 4 tiles to 8.
   Each tile is a tiny working screen framed in clay. Loops are phased by
   --ph so the grid shimmers instead of pulsing in sync.
   =========================================================================== */
.sec-live { padding-top: 64px; }
.live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .live-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.live-grid .t:nth-child(1) { --ph: 0s; }
.live-grid .t:nth-child(2) { --ph: -1.05s; }
.live-grid .t:nth-child(3) { --ph: -2.1s; }
.live-grid .t:nth-child(4) { --ph: -3.15s; }
.live-grid .t:nth-child(5) { --ph: -4.2s; }
.live-grid .t:nth-child(6) { --ph: -5.25s; }
.live-grid .t:nth-child(7) { --ph: -6.3s; }
.live-grid .t:nth-child(8) { --ph: -7.35s; }
/* entrance stagger — the grid builds itself */
.armed .live-grid .t.in:nth-child(2) { transition-delay: 0.06s; }
.armed .live-grid .t.in:nth-child(3) { transition-delay: 0.12s; }
.armed .live-grid .t.in:nth-child(4) { transition-delay: 0.18s; }
.armed .live-grid .t.in:nth-child(5) { transition-delay: 0.24s; }
.armed .live-grid .t.in:nth-child(6) { transition-delay: 0.3s; }
.armed .live-grid .t.in:nth-child(7) { transition-delay: 0.36s; }
.armed .live-grid .t.in:nth-child(8) { transition-delay: 0.42s; }

/* the clay tile base — same recipe family as the app's .pa-tile */
.t { --glow: var(--teal-deep);
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 10px 10px 12px; min-height: 150px;
  background: #fff; border-radius: 20px; text-align: center;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--glow) 15%, transparent),
    inset 0 2px 4px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px color-mix(in srgb, var(--glow) 6%, transparent);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.18s ease;
}
@media (hover: hover) {
  .t:hover { transform: translateY(-4px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--glow) 22%, transparent),
      inset 0 2px 5px rgba(255, 255, 255, 0.96),
      inset 0 -3px 7px color-mix(in srgb, var(--glow) 8%, transparent); }
}
.t h4 { margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; line-height: 1.15; letter-spacing: 0.2px; color: var(--teal-deep); }
.t svg * { transform-box: fill-box; transform-origin: center; }

/* the window — a tiny screen framed in clay */
.bw { position: relative; width: 100%; aspect-ratio: 5/4; border-radius: 14px;
  border: 2px solid var(--teal-deep); padding: 9px; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: inset 0 2px 6px rgba(15, 76, 74, 0.10); }
.w1 { background: #fffdf4; }
.w2 { background: var(--teal-deep); }
.w3 { background: var(--pink-tint); }
.w4 { background: var(--green-tint); }
.w5 { background: #fdf6d8; }
.w6 { background: var(--slate-tint); }
.w7 { background: var(--teal-tint); }
.w8 { background: #fffdf4; }

/* shared loop keyframes (tile-options, verbatim family) */
@keyframes kRoll { 0%, 15% { transform: translateY(0); } 22%, 40% { transform: translateY(-100%); }
  47%, 65% { transform: translateY(-200%); } 72%, 90% { transform: translateY(-300%); }
  97%, 100% { transform: translateY(-400%); } }
@keyframes kPop { 0% { opacity: 0; transform: scale(0.3); } 7% { opacity: 1; transform: scale(1.15); }
  11% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes kBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kSweep { to { transform: rotate(360deg); } }
@keyframes kDraw { 0% { stroke-dashoffset: var(--dash); opacity: 1; }
  42% { stroke-dashoffset: 0; opacity: 1; } 74% { stroke-dashoffset: 0; opacity: 1; }
  86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kDrain { from { transform: scaleX(1); } to { transform: scaleX(0.06); } }
@keyframes kPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.55); opacity: 0.4; } }
@keyframes kBlinkSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes kRow { 0% { opacity: 0; transform: translateX(-6px); } 5% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes kTot { 0%, 16% { transform: translateY(0); } 22%, 30% { transform: translateY(-100%); }
  36%, 100% { transform: translateY(-200%); } }
@keyframes kSway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes kBarUp { 0% { transform: scaleY(0.08); } 12% { transform: scaleY(1); }
  82% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0.08); } }

/* rolling digit strips — tabular, springy, staggered by --ph */
.strip { display: inline-flex; flex-direction: column; height: 1.18em; overflow: hidden;
  vertical-align: bottom; font-variant-numeric: tabular-nums; }
.strip i { font-style: normal; display: block; height: 1.18em; line-height: 1.18;
  animation: kRoll 9s var(--spring) infinite; animation-delay: var(--ph, 0s); }

/* window 1 — POS till (treatment B, verbatim) */
.bbar { height: 9px; border-radius: 5px; background: var(--teal-tint); flex: 0 0 auto; }
.brow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-weight: 800; font-size: 10.5px; color: var(--teal-deep);
  animation: kRow 7s ease infinite; animation-delay: var(--ph, 0s); }
.brow b { font-variant-numeric: tabular-nums; font-weight: 800; }
.brow.r2 { animation-delay: calc(var(--ph, 0s) + 0.8s); }
.brow.r3 { animation-delay: calc(var(--ph, 0s) + 1.6s); }
.btot { margin-top: auto; border-top: 1.5px dashed rgba(15, 76, 74, 0.28); padding-top: 5px;
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 800; font-size: 11.5px; color: var(--teal-deep);
  animation: kRow 7s ease infinite; animation-delay: var(--ph, 0s); }
.btot b { font-variant-numeric: tabular-nums; }
.btot .strip i { animation: kTot 7s var(--spring) infinite; animation-delay: var(--ph, 0s); }

/* window 2 — play timer (treatment B, verbatim) */
.thead { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #bfe8e6; }
.thead b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: kPulse 2.4s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.ttime { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px 0; }
.ttime .big { font-family: var(--font-display); font-weight: 600;
  font-size: 23px; line-height: 1.18; color: #fff; font-variant-numeric: tabular-nums; }
.tname { font-size: 9px; font-weight: 700; color: #bfe8e6; }
.tbar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; flex: 0 0 auto; }
.tbar .fill { display: block; height: 100%; border-radius: 4px; background: var(--yellow);
  transform-origin: left; animation: kDrain 8s linear infinite; animation-delay: var(--ph, 0s); }
.trow2 { display: flex; justify-content: center; gap: 7px; font-weight: 700; font-size: 9px; color: #bfe8e6; }
.trow2 b { color: #fff; font-variant-numeric: tabular-nums; }
.trow2 b.warn { color: var(--yellow); animation: kBlinkSoft 1.4s ease-in-out infinite; }

/* window 3 — waivers (treatment B, verbatim) */
.phone { position: relative; margin: auto; width: 76%; background: #fff; border: 2px solid var(--teal-deep);
  border-radius: 12px; padding: 9px 9px 5px; transform: rotate(-2deg); }
.phone .ln { display: block; height: 5px; border-radius: 3px; background: #efdde5; margin-bottom: 5px; }
.phone .ln.short { width: 62%; }
.sigbox { display: block; width: 100%; height: auto; }
.bsig { animation: kDraw 5s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.okchip { position: absolute; top: -9px; right: -9px; background: var(--green-ink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 8.5px;
  padding: 3px 8px; border-radius: 999px;
  animation: kPop 5s ease infinite; animation-delay: calc(var(--ph, 0s) + 2.2s); }

/* window 4 — parties (treatment B, verbatim) */
.cal { margin: auto; width: 82%; background: #fff; border: 2px solid var(--teal-deep); border-radius: 10px; padding: 6px; }
.chead { background: var(--teal-deep); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 9px; letter-spacing: 0.12em; text-align: center;
  border-radius: 5px; padding: 2px 0; }
.cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 5px; }
.cgrid i { display: block; aspect-ratio: 1; border-radius: 5px; background: var(--teal-tint); }
.cday { display: grid; place-items: center; aspect-ratio: 1; border-radius: 5px; background: var(--yellow);
  font-weight: 800; font-size: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cconf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cconf circle { animation: kPop 4.5s ease infinite; }
.cconf .f1 { animation-delay: var(--ph, 0s); }
.cconf .f2 { animation-delay: calc(var(--ph, 0s) + 1.5s); }
.cconf .f3 { animation-delay: calc(var(--ph, 0s) + 3s); }

/* window 5 — passes: a punch card stamping itself */
.pcard { margin: auto; width: 86%; background: #fff; border: 2px solid var(--teal-deep);
  border-radius: 10px; padding: 7px 8px 8px; }
.phead { font-family: var(--font-display); font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep); text-align: center; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; justify-items: center; }
.pgrid .slot { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed rgba(15, 76, 74, 0.35); position: relative; }
.pgrid .slot .st { position: absolute; inset: -2px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; animation: kPop 6.5s ease infinite; }
.pgrid .slot .st svg { width: 10px; height: 10px; }
.pgrid .slot:nth-child(1) .st { animation-delay: var(--ph, 0s); }
.pgrid .slot:nth-child(2) .st { animation-delay: calc(var(--ph, 0s) + 0.5s); }
.pgrid .slot:nth-child(3) .st { animation-delay: calc(var(--ph, 0s) + 1s); }
.pgrid .slot:nth-child(4) .st { animation-delay: calc(var(--ph, 0s) + 1.5s); }
.pgrid .slot:nth-child(5) .st { animation-delay: calc(var(--ph, 0s) + 2s); }
.pleft { margin-top: 6px; text-align: center; font-weight: 800; font-size: 9px; color: var(--pink-ink);
  animation: kBlinkSoft 2.8s ease-in-out infinite; animation-delay: var(--ph, 0s); }

/* window 6 — reports: a chart drawing itself, a number rolling */
.rtop { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-weight: 800; font-size: 10px; color: var(--slate); }
.rtop b { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.rchart { flex: 1; display: flex; align-items: stretch; }
.rchart svg { width: 100%; height: 100%; }
.t svg .rbar, .moment-scene svg .rbar {
  transform-box: fill-box; transform-origin: center bottom;
  animation: kBarUp 7s ease infinite; }
.rbar.b1 { animation-delay: var(--ph, 0s); }
.rbar.b2 { animation-delay: calc(var(--ph, 0s) + 0.18s); }
.rbar.b3 { animation-delay: calc(var(--ph, 0s) + 0.36s); }
.rbar.b4 { animation-delay: calc(var(--ph, 0s) + 0.54s); }
.rbar.b5 { animation-delay: calc(var(--ph, 0s) + 0.72s); }
.rline { animation: kDraw 7s ease-in-out infinite; animation-delay: calc(var(--ph, 0s) + 0.6s); }

/* window 7 — rota: the week filling itself in */
.wkcal { margin: auto; width: 88%; background: #fff; border: 2px solid var(--teal-deep); border-radius: 10px; padding: 6px; }
.wkhead { background: var(--teal-deep); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 8.5px; letter-spacing: 0.12em; text-align: center;
  border-radius: 5px; padding: 2px 0; }
.wkgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 5px; }
.wkgrid i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--paper); position: relative; overflow: hidden; }
.wkgrid i::after { content: ""; position: absolute; inset: 0; border-radius: 4px;
  animation: kPop 8s ease infinite; }
.wkgrid i.sh1::after { background: var(--teal); animation-delay: var(--ph, 0s); }
.wkgrid i.sh2::after { background: var(--yellow); animation-delay: calc(var(--ph, 0s) + 0.35s); }
.wkgrid i.sh3::after { background: var(--pink); animation-delay: calc(var(--ph, 0s) + 0.7s); }
.wkgrid i.sh4::after { background: var(--green); animation-delay: calc(var(--ph, 0s) + 1.05s); }
.wkok { margin-top: 6px; text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: 9px; color: var(--green-ink); animation: kPop 8s ease infinite;
  animation-delay: calc(var(--ph, 0s) + 1.6s); }

/* window 8 — campaigns: a birthday note sending itself */
.bub { max-width: 88%; border-radius: 11px; padding: 5px 8px; font-weight: 700; font-size: 9px;
  text-align: left; animation: kRow 7.5s ease infinite; }
.bub svg { display: inline-block; vertical-align: -2px; width: 10px; height: 10px; }
.bub.out { align-self: flex-end; background: var(--teal-deep); color: #fff;
  border-bottom-right-radius: 3px; animation-delay: var(--ph, 0s); }
.bub.in2 { align-self: flex-start; background: #fff; color: var(--teal-deep);
  border: 1.5px solid var(--line); border-bottom-left-radius: 3px;
  animation-delay: calc(var(--ph, 0s) + 1.1s); }
.sentchip { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 8.5px; color: var(--green-ink);
  animation: kPop 7.5s ease infinite; animation-delay: calc(var(--ph, 0s) + 0.6s); }
.sentchip svg { width: 10px; height: 10px; }

/* the honesty caption under the grid */
.live-cap { margin-top: 18px; color: var(--muted); font-size: 0.92rem; max-width: none; }
.live-cap strong { color: var(--ink); }

/* ---- The stat band — treatment C's rolling strips, clearly staged --------- */
.statband {
  margin-top: 26px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-clay);
  padding: 22px 26px 18px;
}
.statband .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
@media (min-width: 760px) { .statband .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat:nth-child(1) { --ph: 0s; }
.stat:nth-child(2) { --ph: -2.2s; }
.stat:nth-child(3) { --ph: -4.4s; }
.stat:nth-child(4) { --ph: -6.6s; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.18;
  color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.stat .lbl { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto;
  animation: kPulse 2.4s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.statband .stage-note { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line);
  font-size: 0.85rem; color: var(--muted); max-width: none; }

/* ===========================================================================
   A DAY WITH PLAYAREAOS — three moments, drawn scenes, zig-zag rows
   =========================================================================== */
.sec-day { background: var(--surface); border-block: 2px solid var(--line); }
.moments { display: grid; gap: 34px; }
.moment {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px; align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-soft);
  padding: 34px 36px;
}
.moment--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.moment--flip .moment-scene { order: 2; }
.moment--flip .moment-copy { order: 1; }
@media (max-width: 860px) {
  .moment, .moment--flip { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .moment--flip .moment-scene { order: 0; }
  .moment--flip .moment-copy { order: 1; }
  .moment-scene { max-width: 380px; margin: 0 auto; }
}
.moment-scene svg { width: 100%; }
.mtime {
  display: inline-block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
}
.moment--front .mtime { background: var(--yellow); color: var(--ink); }
.moment--floor .mtime { background: var(--pink-tint); color: var(--pink-ink); }
.moment--office .mtime { background: var(--slate-tint); color: var(--slate); }
.moment-copy h3 { font-size: 1.45rem; margin-bottom: 12px; }
.moment-copy p { color: var(--muted); }
.moment-copy p + p { margin-top: 10px; }
.moment-copy strong { color: var(--ink); }
.mchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mchips span {
  font-family: var(--font-display); font-weight: 500; font-size: 0.82rem;
  background: var(--surface); color: var(--teal-deep);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.day-close { margin-top: 26px; color: var(--muted); font-size: 1rem; max-width: none; }
.day-close strong { color: var(--ink); }

/* scene loops (quiet, phased) */
@media (prefers-reduced-motion: no-preference) {
  .sc-sweep { transform-box: view-box; animation: kSweep 8s linear infinite; }
  .sc-bob { transform-box: fill-box; transform-origin: center; animation: kBob 3.6s ease-in-out infinite; }
  .sc-bob.z2 { animation-delay: 0.9s; } .sc-bob.z3 { animation-delay: 1.7s; }
  .sc-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: kSway 3s ease-in-out infinite alternate; }
  .sc-blink { animation: kBlinkSoft 1.4s ease-in-out infinite; }
  .sc-loopdraw { animation: kDraw 7s ease-in-out infinite; }
}

/* ---- "Nothing is hardcoded" ribbon --------------------------------------- */
.yours {
  margin-top: 40px;
  background: var(--teal-deep);
  border-radius: var(--radius-tile);
  padding: 30px 34px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow-clay);
}
.yours svg { flex: 0 0 auto; width: 64px; height: 64px; }
.yours p { color: var(--teal-tint); font-size: 1.05rem; max-width: none; flex: 1 1 320px; }
.yours strong { font-family: var(--font-display); color: #fff; }
/* the sliders slide when the ribbon arrives */
.yours .knob { transition: transform 0.7s var(--spring); }
.armed .yours .knob { transform: translateX(0); }
.armed .yours.in .knob.k1 { transform: translateX(14px); transition-delay: 0.35s; }
.armed .yours.in .knob.k2 { transform: translateX(-12px); transition-delay: 0.5s; }
.armed .yours.in .knob.k3 { transform: translateX(9px); transition-delay: 0.65s; }

/* ---- How it works --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; margin-top: 10px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 560px; } }
.step {
  counter-increment: step;
  background: var(--surface);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-clay);
  padding: 34px 28px;
  position: relative;
}
.step::before {
  content: counter(step);
  position: absolute; top: -20px; left: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  box-shadow: 0 4px 0 rgba(15, 76, 74, 0.18);
}
.step:nth-child(1)::before { background: var(--yellow); color: var(--ink); }
.step:nth-child(2)::before { background: var(--pink); color: #fff; }
.step:nth-child(3)::before { background: var(--green); color: var(--ink); }
.step svg { width: 96px; height: 96px; margin: 8px 0 16px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.98rem; color: var(--muted); }

/* ---- Trust strip ---------------------------------------------------------- */
.trust { background: var(--teal-deep); color: #fff; }
.trust h2 { color: #fff; }
.trust .section-head p { color: rgba(247, 246, 242, 0.85); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-tile);
  padding: 24px 22px;
}
.trust-card svg { width: 44px; height: 44px; margin-bottom: 14px; }
.trust-card h3 { color: var(--yellow); font-size: 1.05rem; margin-bottom: 8px; }
.trust-card p { font-size: 0.93rem; color: rgba(247, 246, 242, 0.92); }

/* ---- Pricing -------------------------------------------------------------- */
.pricing-note {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--yellow); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  border-radius: 999px; padding: 8px 20px; margin-bottom: 34px;
  box-shadow: 0 4px 0 rgba(23, 32, 31, 0.15);
}
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; } }
.price-card { --glow: var(--teal);
  background: var(--surface);
  border-radius: var(--radius-tile);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--glow) 15%, transparent),
    inset 0 2px 4px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px color-mix(in srgb, var(--glow) 6%, transparent);
  padding: 32px 30px 36px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.18s ease;
}
@media (hover: hover) {
  .price-card:hover { transform: translateY(-4px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--glow) 22%, transparent),
      inset 0 2px 5px rgba(255, 255, 255, 0.96),
      inset 0 -3px 7px color-mix(in srgb, var(--glow) 8%, transparent); }
}
.price-card--a { --glow: var(--yellow); }
.price-card--hero { --glow: var(--teal-deep); border: 2.5px solid var(--teal-deep); }
.price-card--c { --glow: var(--slate); }
.price-flag {
  position: absolute; top: -14px; right: 22px;
  background: var(--pink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(194, 63, 109, 0.35);
}
.price-card h3 { font-size: 1.3rem; }
.price-amount { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-amount span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-amount--early { font-size: 1.9rem; color: var(--teal-deep); }
.price-draft { font-size: 0.85rem; color: var(--pink-ink); font-weight: 700; }
.pricing-note a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.price-card ul { list-style: none; display: grid; gap: 9px; margin-top: 6px; }
.price-card li { padding-left: 26px; position: relative; font-size: 0.95rem; }
.price-card li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green);
}
.price-card .btn { margin-top: auto; justify-content: center; }
.price-fineprint { margin-top: 30px; color: var(--muted); font-size: 0.95rem; max-width: 74ch; }
.price-fineprint strong { color: var(--ink); }

/* ---- What's inside — the module index ------------------------------------- */
.sec-inside { padding-top: 64px; }
.mods { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mods { grid-template-columns: repeat(3, 1fr); } }
.mod {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 24px;
}
/* each card carries a little clay tile in the brand rotation — the app's board in miniature */
.mod::before {
  content: "";
  display: block; width: 26px; height: 26px;
  border-radius: 9px; margin-bottom: 12px;
  box-shadow: inset 0 -3px 0 rgba(15, 76, 74, 0.14), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.mod:nth-child(4n+1)::before { background: var(--yellow); }
.mod:nth-child(4n+2)::before { background: var(--teal); }
.mod:nth-child(4n+3)::before { background: var(--pink); }
.mod:nth-child(4n)::before   { background: var(--green); }
.mod h3 { font-size: 1.05rem; margin-bottom: 6px; }
.mod p { font-size: 0.93rem; color: var(--muted); }
/* gentle column stagger as the grid reveals */
.armed .mods .mod.in:nth-child(3n+2) { transition-delay: 0.07s; }
.armed .mods .mod.in:nth-child(3n)   { transition-delay: 0.14s; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq-list { max-width: 800px; display: grid; gap: 14px; }
.faq-item {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-clay);
  border: 1.5px solid var(--line);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--teal-deep);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-deep);
  font-size: 1.3rem; font-family: var(--font-display);
  /* line-height 1, not the body's inherited 1.65: the inherited line box was
     ~34px tall inside the 30px circle, shoving the + off-centre. */
  line-height: 1;
  transition: transform 0.3s var(--spring), background-color 0.2s ease;
}
.faq-item[open] summary::after { content: "–"; transform: rotate(180deg); background: var(--yellow); color: var(--ink); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--muted); font-size: 0.98rem; }
.faq-item .faq-body p + p { margin-top: 10px; }

/* ---- Final CTA band ------------------------------------------------------- */
.cta-band { padding: 90px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { margin: 0 auto 30px; color: var(--muted); font-size: 1.1rem; }
.cta-band .hero-ctas { justify-content: center; }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1;
}
.cta-band::before { width: 220px; height: 220px; background: var(--green-tint); left: -80px; top: 30px; }
.cta-band::after  { width: 260px; height: 260px; background: var(--teal-tint); right: -90px; bottom: -60px; }

/* ---- Footer --------------------------------------------------------------- */
.site-foot { background: var(--teal-deep); color: var(--paper); padding: 54px 0 40px; }
.site-foot .wrap {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start;
}
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-nav a { color: var(--paper); text-decoration: none; font-size: 0.95rem; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-meta { width: 100%; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(247, 246, 242, 0.25); display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; font-size: 0.9rem; color: rgba(247, 246, 242, 0.85); }
.foot-meta a { color: var(--paper); }

/* ===========================================================================
   REDUCED MOTION — everything lands on its end state, numerals at final
   values, signatures drawn, grids filled. No movement anywhere.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .armed .rv, .armed .rv--l, .armed .rv--r, .armed .rv--pop, .armed .rv--calm {
    opacity: 1 !important; transform: none !important; }
  .btn, .btn:hover, .btn:active, .t:hover, .price-card:hover { transform: none !important; }
  .strip i { transform: translateY(-300%) !important; }
  .btot .strip i { transform: translateY(-200%) !important; }
  .sig, .bsig, .rline, .sc-loopdraw, .armed .draw {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .armed .popin { opacity: 1 !important; transform: none !important; }
  .brow, .btot, .okchip, .cconf circle, .bub, .sentchip, .wkok, .pleft,
  .pgrid .slot .st, .wkgrid i::after { opacity: 1 !important; transform: none !important; }
  .tbar .fill { transform: scaleX(0.45) !important; }
  .rbar { transform: scaleY(1) !important; }
  .phone { transform: rotate(-2deg) !important; }
  .armed .yours .knob.k1 { transform: translateX(14px) !important; }
  .armed .yours .knob.k2 { transform: translateX(-12px) !important; }
  .armed .yours .knob.k3 { transform: translateX(9px) !important; }
}

/* ===========================================================================
   JOY PASS (additive, 2026-08-18). Delete this whole block, the three JOY
   blocks in index.html and joy.js to restore the previous page exactly.
   1) hero floating-balls ambient layer
   3) the "See the joy" footage band (hidden until files exist)
   4) playful hover states on the module cards
   All motion is transform/opacity (plus one small canvas); the site's
   existing reduced-motion block already stills every keyframe added here.
   =========================================================================== */

/* -- 1) hero ambient balls — elements injected by joy.js, painted behind the copy -- */
.hero.has-orbs .wrap { position: relative; z-index: 1; }
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-orbs i { position: absolute; display: block; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-orbs i { animation: joyFloat var(--od, 11s) ease-in-out var(--ph, 0s) infinite; }
}
@keyframes joyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@media (max-width: 700px) { .hero-orbs i:nth-child(n+5) { display: none; } }

/* -- 3) the footage band -- */
.sec-joy { padding-top: 64px; }
.joy-media { display: grid; gap: 14px; }
.joy-main, .joy-cell {
  position: relative; margin: 0; overflow: hidden;
  background: var(--teal-tint); border: 1.5px solid var(--line);
  border-radius: var(--radius-tile); box-shadow: var(--shadow-soft);
}
.joy-cell { border-radius: var(--radius); }
.joy-main video, .joy-main img, .joy-cell video, .joy-cell img {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
}
.joy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .joy-grid { grid-template-columns: repeat(4, 1fr); } }
.joy-note { margin-top: 14px; color: var(--muted); font-size: 0.85rem; max-width: none; }

/* -- 4) playful hover states on the 18 module cards (hover devices, motion allowed) -- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mod { transition: transform 0.22s var(--spring), box-shadow 0.22s ease; }
  .mod::before { transition: transform 0.35s var(--spring); }
  .mod:hover {
    transform: translateY(-5px) rotate(0.6deg);
    box-shadow: 0 1px 2px rgba(15, 76, 74, 0.05), 0 16px 30px -14px rgba(15, 76, 74, 0.28);
  }
  .mod:nth-child(even):hover { transform: translateY(-5px) rotate(-0.6deg); }
  .mod:hover::before { transform: translateY(-3px) rotate(-10deg) scale(1.15); }
}
/* ======================== end JOY PASS ==================================== */