/* ===========================================================================
   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;
}

/* THE 2026-09-04 TYPOGRAPHY DIRECTIVE. Manrope carries the display line and
   Inter the reading line; Fredoka stays as the brand accent. Same files the app
   serves, copied here as the first pair was, and `swap` rather than the app's
   `optional` for the same reason as before: a marketing first visit must show
   the brand face even on a cold cache, and the two latin files are preloaded
   from every page's head so a visible swap stays the rare case. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-v20-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-v20-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: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-v20-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: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-v20-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;
  --blue-ink: #3373a6;    /* the app's --pa-brand-blue-deep as TEXT — 4.57:1 on the blue tint */
  --blue-tint: #edf4fb;   /* pale wash of the brand blue (#e9f1fa fails 4.5:1 by a hair) */
  /* Two waiver-signature tints that otherwise live only as hardcoded SVG hex in
     the live grid — named here so the skin-slider's .is-exec layer can re-point
     them like every other brand colour. Arcade keeps the exact original hex. */
  --sig-line: #e8ccd8;    /* the pale-pink signature baseline           */
  --sig-ink: #c23f6d;     /* the pink signature stroke                  */
  --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: 'Manrope', 'Inter', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --font-body: var(--font-ui);
  --font-accent: 'Fredoka', 'Baloo 2', system-ui, sans-serif;

  /* THE MARKETING TYPE SCALE (directive section 4). Desktop values here;
     the two overrides below step them at the site's existing breakpoints,
     rather than scaling everything by one proportion, because a hero and a
     caption do not want the same treatment on a phone. */
  --text-hero: 64px;      --lh-hero: 68px;
  --text-h2: 44px;        --lh-h2: 52px;
  --text-h3: 30px;        --lh-h3: 38px;
  --text-h4: 22px;        --lh-h4: 28px;
  --text-body-lg: 20px;   --lh-body-lg: 32px;
  --text-body: 16px;      --lh-body: 26px;
  --text-body-sm: 14px;   --lh-body-sm: 22px;
  --text-caption: 12px;   --lh-caption: 18px;
  --weight-display: 700;
  --weight-hero: 800;
  --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: var(--text-body);
  line-height: var(--lh-body);
  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,
   the owner'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, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--teal-deep);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: var(--lh-hero); font-weight: var(--weight-hero); }
h2 { font-size: var(--text-h2);   line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3);   line-height: var(--lh-h3); }
h4 { font-size: var(--text-h4);   line-height: var(--lh-h4); }
p  { max-width: 62ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  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); }
.eyebrow--blue   { background: var(--blue-tint); color: var(--blue-ink); }  /* hero only — the app-chip blue */

/* ---- Buttons --------------------------------------------------------------
   FLAT, like the app's (owner ruling, 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-ui);
  font-size: var(--text-body); line-height: 24px;
  font-weight: var(--weight-button, 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
   (owner ruling, 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-ui);
  font-weight: var(--weight-nav, 500);
  font-size: var(--text-body-sm); line-height: var(--lh-body-sm);
  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: var(--text-body-sm); line-height: var(--lh-body-sm); }
.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: var(--text-body-lg); line-height: var(--lh-body-lg);
  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 (owner: "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: var(--text-body); line-height: var(--lh-card-title, 24px); margin-bottom: 2px; }
.sell p { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); 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: var(--text-body-lg); line-height: var(--lh-body-lg); }
@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: var(--radius-tile); 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 h3 { 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: var(--radius);
  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-caps { font-size: 0.9rem; color: var(--muted); margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
/* Optional owner-set tagline, published into the PA:CARD region above the bullets. */
.price-tagline { font-size: 0.95rem; color: var(--ink); font-weight: 600; margin-top: 0.5rem; }
.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-cta { margin-top: auto; display: grid; gap: 10px; }
.price-cta .btn { margin-top: 0; }
.price-trial-note { margin-top: 14px; font-size: 1rem; color: var(--ink); }
.price-trial-note strong { color: var(--teal-deep); }
.price-fineprint { margin-top: 30px; color: var(--muted); font-size: 0.95rem; max-width: 74ch; }
.price-fineprint strong { color: var(--ink); }
.price-blurb { font-size: 0.92rem; color: var(--muted); margin-top: 2px; }

/* ---- Pricing comparison: monthly/yearly toggle + head-to-head matrix ------- */
.price-compare { margin-top: 22px; }
/* The real control is the label pill; the checkbox stays keyboard-reachable but
   out of the visual flow. CSS-only — no script — swaps the price spans. */
.price-billing-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.price-billing { display: flex; justify-content: center; margin-bottom: 22px; }
.price-billing-pill { display: inline-flex; align-items: stretch; border: 1.5px solid var(--teal-deep); border-radius: 999px; overflow: hidden; cursor: pointer; font-family: var(--font-display); font-weight: 600; user-select: none; }
.pb-opt { padding: 9px 20px; font-size: 0.95rem; color: var(--teal-deep); transition: background 0.2s ease, color 0.2s ease; }
.pb-m { background: var(--teal-deep); color: #fff; }
.pb-y { background: transparent; }
.price-billing-toggle:checked ~ .price-billing .pb-m { background: transparent; color: var(--teal-deep); }
.price-billing-toggle:checked ~ .price-billing .pb-y { background: var(--teal-deep); color: #fff; }
.price-billing-toggle:focus-visible ~ .price-billing .price-billing-pill { outline: 3px solid var(--teal); outline-offset: 3px; }
/* Monthly shown by default; yearly revealed when the toggle is on. */
.price-y { display: none; }
.price-billing-toggle:checked ~ .price-grid .price-m { display: none; }
.price-billing-toggle:checked ~ .price-grid .price-y { display: block; }

.price-matrix-wrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-matrix { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
.price-matrix th, .price-matrix td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line, #e7e4dc); }
.price-matrix thead th { font-family: var(--font-display); font-size: 1rem; color: var(--ink); border-bottom: 2px solid var(--teal-deep); }
.price-matrix thead th:first-child { text-align: left; }
.price-matrix tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); }
.price-matrix td.yes { color: var(--green); font-weight: 700; }
.price-matrix td.no { color: var(--muted); }
.price-matrix tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--teal) 5%, transparent); }
@media (prefers-reduced-motion: reduce) { .pb-opt { transition: none; } }

/* ---- 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;
  /* BATCH18 #10 — the + still sat low (owner ruling, 0825). Root cause: with
     `place-items:center` the grid centres the LINE BOX, so line-height cannot
     move the ink at all (the earlier line-height fix was a no-op here) —
     Fredoka's tall ascent then parks the + ink 2px below the circle's centre
     (measured via canvas TextMetrics against the loaded font: ink centre y=17
     in the 30px circle). The nudges are those measurements. The open-state
     one composes WITH the rotation: rotate(180deg) flips the dash's own 2.5px
     sag into a 2.5px rise, so its correction runs the other way (functions
     apply right-to-left: rotate first, then the screen-space translate). */
  transform: translateY(-2px);
  transition: transform 0.3s var(--spring), background-color 0.2s ease;
}
.faq-item[open] summary::after { content: "–"; transform: translateY(2.5px) 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 ==================================== */

/* ======================== CONTENT PAGES ===================================
   Additive, marketing-site-only styles for the /features/ and /guides/ pages.
   The homepage uses none of these, so this block is safe to add or remove
   wholesale. Everything reuses the existing tokens and type scale. ========= */

/* Heading-links on the feature hub cards: read as a heading, reveal on hover. */
.mod h3 a { color: var(--teal-deep); text-decoration: none; }
.mod h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Breadcrumb above a page H1. */
.crumb { font-family: var(--font-display); font-weight: 500; font-size: 0.9rem;
  color: var(--muted); margin-bottom: 14px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--teal-deep); }
.crumb span { opacity: 0.55; margin: 0 8px; }

/* Long-form article body for a feature or guide page: one comfortable column. */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: var(--ink); font-size: 1.06rem; line-height: 1.6; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul > li + li, .prose ol > li + li { margin-top: 8px; }
.prose li::marker { color: var(--teal); }
.prose strong { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.prose .lead { font-size: 1.18rem; line-height: 1.5; color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* "Updated <date>" line directly under a guide's H1 (SEO-015). Scoped because
   `.section-head p` would otherwise size it like the lead paragraph. */
.section-head .meta-line { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }

/* An honest, quiet callout for "this is on the roadmap, not shipped" notes. */
.note { border-left: 4px solid var(--yellow); background: var(--yellow-tint, #fff8dc);
  padding: 14px 18px; border-radius: 0 12px 12px 0; font-size: 0.98rem; }
.note strong { font-family: var(--font-display); }

/* FAQ list on a content page (native details/summary). */
.qa { border-top: 1px solid var(--line, #e7ece9); }
.qa details { border-bottom: 1px solid var(--line, #e7ece9); padding: 4px 0; }
.qa summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: 1.4rem; color: var(--teal-deep); line-height: 1; }
.qa details[open] summary::after { content: "\2013"; }
.qa details > p { padding: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 680px; }

/* "Related" internal-link row at the foot of a content page. */
.related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.related a { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem;
  border: 1.5px solid var(--line, #e7ece9); border-radius: 999px; padding: 8px 16px;
  color: var(--teal-deep); text-decoration: none; }
.related a:hover { background: var(--teal-tint); border-color: var(--teal-tint); }

/* ===== "illustration" — each letter its own colour, gently jiggling ======== */
.illus { display: inline-block; white-space: nowrap;
  /* The word itself reads ~5px larger than the sentence around it, keeping its
     per-letter rainbow and inline flow. calc(1em + 5px) is exactly +5px over the
     inherited caption size whatever that is; line-height:1 + baseline align keep
     the bigger word from opening up the caption's line spacing. */
  font-size: calc(1em + 5px); line-height: 1; vertical-align: baseline; }
.illus > span {
  display: inline-block;
  animation: illusWiggle 1.9s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.illus > span:nth-child(6n+1) { color: var(--yellow); }
.illus > span:nth-child(6n+2) { color: var(--teal); }
.illus > span:nth-child(6n+3) { color: var(--pink); }
.illus > span:nth-child(6n+4) { color: var(--green); }
.illus > span:nth-child(6n+5) { color: var(--teal-deep); }
.illus > span:nth-child(6n)   { color: var(--pink-ink, #c23f6d); }
.illus > span:nth-child(2n)   { animation-delay: 0.12s; }
.illus > span:nth-child(3n)   { animation-delay: 0.24s; }
.illus > span:nth-child(4n)   { animation-delay: 0.36s; }
.illus > span:nth-child(5n)   { animation-delay: 0.48s; }
@keyframes illusWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-6deg); }
  60%      { transform: translateY(2px)  rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .illus > span { animation: none; }
}

/* ===========================================================================
   T11 — MINI / mobile SKIN-REVEAL SLIDER over the tile board
   A before/after image-comparison handle. The Arcade tiles sit on top (the
   default the counter sees); dragging the handle LEFT wipes them back to reveal
   the SAME tiles in the sober Executive skin underneath. Only on phones
   (<=700px); at every wider size this collapses to the plain Arcade grid the
   page already had. Self-contained, no deps. The Executive skin is not new art
   — it is the arcade grid cloned by site.js and re-themed through the brand
   colour variables below (.is-exec), so the two layers are pixel-identical in
   layout and differ only in palette.
   =========================================================================== */

/* Everything the slider adds is hidden until site.js has cloned + themed the
   Executive layer and wired the range, at which point it adds .ready to
   .skin-compare and the chrome switches on (see the .ready block further down,
   which now applies at ALL widths). With JS off, .ready never lands, so the
   board is simply the Arcade grid — a clean, graceful fallback. */
.skin-pane--exec,
.skin-range,
.skin-seam,
.skin-knob,
.skin-tag,
.skin-hint { display: none; }

/* The Executive skin — the app's REAL Executive DESIGN, replicated by the inch
   from packages/ui/src/tokens.css (:root[data-skin='executive']). Not a recolour
   of arcade tiles: the clone re-points CHROME (tighter radii, the clay glow
   collapsed to a flat 1px hairline ring, Nunito for the display face) AND the
   full sober slate-blue palette (one working blue + cool greys; the four
   carnival accents desaturate into the blue/grey family). So the reveal shows
   the office look the app actually ships. Scoped to .is-exec, which exists only
   inside the phone compare layer — desktop/tablet and the arcade pane never see
   it, and the arcade pane stays byte-identical. */
.is-exec {
  /* palette — app Executive values (tokens.css) mapped onto the site's vars */
  --teal-deep: #1f4364;   /* app --pa-primary-dark — structure & ink        */
  --teal:      #3373a6;   /* app --pa-primary — the ONE working blue         */
  --teal-tint: #eaf1f8;   /* pale cool wash for card fills                   */
  --yellow:    #c9d3e6;   /* desaturated: the yellow accent, now cool steel  */
  --pink:      #b6c1d8;   /* desaturated: the pink accent, now cool steel    */
  --pink-ink:  #3373a6;   /* pink-as-text folds to the working blue          */
  --pink-tint: #eef2f8;
  --green:     #a9bcd0;   /* desaturated: the green accent, now cool steel   */
  --green-ink: #3373a6;   /* green-as-text folds to the working blue         */
  --green-tint:#eef2f8;
  --slate:     #35528a;   /* the executive blue, a touch deeper             */
  --slate-tint:#e9eefb;
  --blue-ink:  #3373a6;
  --blue-tint: #edf4fb;
  --paper:     #f6f8fc;   /* app Executive --pa-bg neutral                   */
  --surface:   #ffffff;
  --ink:       #121722;   /* app --pa-text                                  */
  --muted:     #667187;   /* app --pa-text-muted                            */
  --line:      #e0e5ee;   /* app --pa-line hairline                         */
  /* the two waiver-signature SVG hexes (see :root) go cool + steel here,
     which also folds in the old hand-mapped `.is-exec .bsig` override. */
  --sig-line:  #d7dce6;
  --sig-ink:   #7c88a6;
  /* CHROME — the half that was missing. App Executive tightens the radii,
     collapses the clay glow to a flat 1px ring, drops the ambient to a whisper,
     and steps the display face down to the body family. Mirrors --pa-radius 8 /
     --pa-radius-tile 10, --pa-clay-* -> hairline, --pa-font-display -> Nunito. */
  --radius: 8px;
  --radius-tile: 16px;   /* moderate rounded card corner, matching the app tiles */
  --shadow-clay: 0 0 0 1px var(--line);
  --shadow-soft: 0 1px 2px rgba(18, 23, 34, 0.05);
  --font-display: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --exec-icon: #3373a6;  /* the ONE sober logo-blue the line-icons are drawn in */
}
/* Executive tiles are the app's REAL Executive home tiles, NOT recoloured
   arcade windows: a flat white card with a thin hairline edge, ONE centred
   sober-blue line-icon, and an uppercase letter-spaced slate label. site.js
   blanks each cloned Live-Window and drops the tile's line-icon into the .bw;
   the .bw stays in place as an invisible fixed-height spacer (border-box +
   aspect-ratio pin its height), so every Executive tile keeps its arcade twin's
   EXACT height and the reveal clip stays edge-to-edge. Scoped to .is-exec, which
   only ever renders inside the phone compare layer — the arcade pane and
   desktop/tablet never see any of this. */
.is-exec .t {
  background: #fff;
  box-shadow: var(--shadow-clay);   /* flat 1px hairline ring — a border with */
}                                    /* zero layout impact (no clay glow)      */
.is-exec .bw {                       /* the framed screen becomes a blank spacer */
  border: 0; background: transparent; box-shadow: none; padding: 0;
  align-items: center; justify-content: center;
}
.is-exec .exec-ic {                  /* the single sober line-icon, logo-blue stroke */
  width: 46px; height: 46px; display: block;
  fill: none; stroke: var(--exec-icon);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.is-exec .t h3 {                     /* uppercase, letter-spaced, calm slate label */
  text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 600; font-size: 12px; color: #5b6473;
  /* keep the label's line box the same height as the arcade twin's 14px/1.15
     label (16.1px) so the smaller face adds no per-row drift and the reveal clip
     stays row-aligned with the arcade pane. */
  line-height: 16px;
}

/* The compare wrapper + slider chrome, working at ALL widths (phone, tablet,
   landscape, desktop). Both skin panes share the SAME cloned .live-grid, so
   whatever column count the grid takes at a given width (2 up to 900px, 4 above
   it) applies to both layers — the seam therefore wipes edge-to-edge and the
   tile rows stay aligned at every size, with no per-breakpoint tuning. */
.skin-compare {
  position: relative;
  /* 0–100 seam position from the LEFT. Arcade fills LEFT of the seam, Executive
     fills RIGHT of it. Defaults to the MIDDLE so both skins — and both corner
     tags — show at rest and invite the drag. site.js keeps it synced with the
     range and mirrors it onto data-dom for the tag rule below. */
  --pos: 50;
  isolation: isolate;
}

/* Arcade is the BASE layer, in normal flow: it sets the height and its Live
   Windows keep animating, unclipped. Executive is laid over it and CLIPPED to
   the RIGHT of the seam (inset from the left by --pos%), so arcade shows to the
   left of the seam and executive to the right. Gated on .ready so that, with JS
   off, nothing is clipped and the full arcade board shows. */
.skin-compare.ready .skin-pane--arcade { position: relative; z-index: 0; }
.skin-compare.ready .skin-pane--exec {
  display: block; position: absolute; inset: 0; z-index: 1;
  clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }

/* the seam + knob ride the reveal position */
.skin-compare.ready .skin-seam { display: block; position: absolute; top: 0; bottom: 0;
  left: calc(var(--pos) * 1%); width: 2px; margin-left: -1px; z-index: 3;
  background: var(--teal-deep); opacity: 0.85; pointer-events: none; }
.skin-compare.ready .skin-knob { display: grid; place-items: center; position: absolute; top: 50%;
  left: calc(var(--pos) * 1%); transform: translate(-50%, -50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 999px; background: #fff;
  border: 2px solid var(--teal-deep); color: var(--teal-deep);
  box-shadow: 0 6px 16px rgba(15, 76, 74, 0.22); pointer-events: none; }
.skin-compare.ready .skin-knob svg { width: 22px; height: 22px; }

/* the control itself: a full-area transparent range on top of everything.
   touch-action:pan-y so a vertical swipe still scrolls the page while a
   horizontal drag moves the handle. */
.skin-compare.ready .skin-range { display: block; position: absolute; inset: 0; width: 100%;
  height: 100%; margin: 0; z-index: 4; cursor: ew-resize; opacity: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
  touch-action: pan-y; }
.skin-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 48px; height: 240px; }
.skin-range::-moz-range-thumb { width: 48px; height: 240px; border: 0;
  background: transparent; }
.skin-range:focus-visible { outline: none; }
.skin-range:focus-visible ~ .skin-knob {
  box-shadow: 0 0 0 3px var(--slate-tint), 0 6px 16px rgba(15, 76, 74, 0.22); }

/* corner tags naming each side */
.skin-compare.ready .skin-tag { display: inline-block; position: absolute; top: 8px; z-index: 3;
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 999px; pointer-events: none; transition: opacity 0.25s ease; }
.skin-tag--arcade { left: 8px; background: var(--yellow); color: var(--ink); }
.skin-tag--exec { right: 8px; background: #2c3552; color: #fff; }

/* Label rule (the owner's exact wording): near the MIDDLE both tags show; a
   deliberate drag collapses to ONLY the dominant side's tag. site.js sets
   data-dom = mid | arcade | exec off --pos with a ~46–54% tolerance band, so
   the rest position shows both and any real drag shows one. Hidden tags fade
   (opacity), staying in place; pointer-events are off regardless. */
.skin-compare.ready[data-dom="arcade"] .skin-tag--exec,
.skin-compare.ready[data-dom="exec"] .skin-tag--arcade { opacity: 0; }

.skin-compare.ready .skin-hint { display: block; text-align: center; margin: 12px 0 0;
  font-size: 0.85rem; font-weight: 700; color: var(--muted); }

/* Motion-safe: a gentle idle sway on the knob invites the drag; stripped when
   the reader asks for less motion (the slider stays fully usable either way,
   and the clip follows the drag with no transition regardless). */
@media (prefers-reduced-motion: no-preference) {
  .skin-compare.ready .skin-knob { animation: skinSway 3.4s ease-in-out infinite; }
  @keyframes skinSway {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(calc(-50% - 4px), -50%); }
  }
  /* Draw-the-eye cue: a soft pulse ring radiating off the knob so the board
     reads as interactive, not static art. site.js adds .skin-cue only when
     motion is allowed and removes it on the first real interaction, so the
     pulse — like the scroll-triggered auto-demo — never fights the reader. It
     rides a ::after ring, leaving the knob's own idle sway untouched. */
  .skin-compare.ready.skin-cue .skin-knob::after {
    content: ""; position: absolute; inset: -5px; border-radius: 999px;
    border: 2px solid var(--teal-deep); pointer-events: none;
    animation: skinCue 1.9s ease-out infinite; }
  @keyframes skinCue {
    0%   { transform: scale(0.82); opacity: 0.55; }
    70%  { opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
  }
}
/* Reduced motion: the tag fade also drops to an instant swap. */
@media (prefers-reduced-motion: reduce) {
  .skin-compare.ready .skin-tag { transition: none; }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE TYPE STEPS (directive section 5). Only the display line and the
   large reading line move; the operational sizes (body, small, caption) hold,
   because shrinking them is what makes a phone page hard to read rather than
   compact. Placed last so a token override is never fighting source order.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --text-hero: 52px;     --lh-hero: 58px;
    --text-h2: 38px;       --lh-h2: 46px;
  }
}
@media (max-width: 700px) {
  :root {
    --text-hero: 40px;     --lh-hero: 44px;
    --text-h2: 32px;       --lh-h2: 38px;
    --text-h3: 26px;       --lh-h3: 32px;
    --text-body-lg: 18px;  --lh-body-lg: 28px;
  }
}

/* The hero eyebrow takes the directive's own hero figure (section 17); the
   section eyebrows stay at their smaller label size, because inflating every
   label to 16px would change the page's rhythm rather than its hero. */
.hero .eyebrow { font-size: 16px; line-height: 24px; }


/* ===========================================================================
   HEADER DROPDOWNS (owner 2026-09-04: "hideous congested header, I prefer it
   as drop downs"). Ten flat links collapse to five top-level items — Product ▾,
   For your venue, Resources ▾, Pricing, Try it now. Desktop opens on hover AND
   keyboard focus AND click (JS pins it); mobile is an accordion under the
   existing hamburger. Colours come from the site tokens so it tracks the theme.
   =========================================================================== */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-weight: var(--weight-nav, 500);
  font-size: var(--text-body-sm); line-height: var(--lh-body-sm);
  color: var(--teal-deep); background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-caret { transition: transform 0.18s ease; margin-top: 1px; }
.nav-group-btn[aria-expanded="true"] .nav-caret,
.nav-group:hover .nav-caret { transform: rotate(180deg); }
/* invisible bridge so the 10px gap to the panel doesn't drop the hover */
.nav-group::after { content: ""; position: absolute; top: 100%; left: -8px; right: -8px; height: 12px; }
.nav-menu {
  position: absolute; top: 100%; left: 0; margin-top: 10px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; padding: 8px;
  background: var(--card, #ffffff); border: 1.5px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 34px -16px rgba(15, 76, 74, 0.30);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a:not(.btn) {
  padding: 9px 12px; border-radius: 10px; white-space: nowrap;
  font-size: var(--text-body-sm); line-height: var(--lh-body-sm);
}
.nav-menu a:not(.btn):hover {
  background: var(--teal-tint, rgba(15, 76, 74, 0.07));
  text-decoration: none;
}
@media (max-width: 860px) {
  .nav-group { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-group-btn { justify-content: space-between; width: 100%; padding: 12px 4px; font-size: 1.1rem; }
  .nav-group::after { display: none; }
  .nav-menu {
    position: static; opacity: 1; transform: none; visibility: hidden; display: none;
    box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 2px 0 6px 14px; min-width: 0;
  }
  .nav-group.open .nav-menu { display: flex; visibility: visible; }
  .nav-menu a:not(.btn) { padding: 10px 4px; font-size: 1.02rem; }
}