/* ==========================================================================
   Tokora Studio — one stylesheet, no build step, no dependency.

   Reading order:
     1.  Tokens                     every colour, size and easing
     2.  Reset and base
     3.  Shared pieces              buttons, tags, pills, scroll reveal
     4.  Top bar, mega menu, drawer
     5.  Rail
     6.  Hero                       ten logos drifting on four rings
     7.  Story                      sticky intro, six animated cards
     8.  Section headers
     9.  Flow                       pinned toolbar, one panel per step
     10. Library                    blue panel, three marquees
     11. Connect                    folder fills up, then feeds the tools
     12. Steps                      five panels dragged sideways
     13. Benefits
     14. Pricing and matrix
     15. FAQ
     16. Closing banner
     17. Footer
     18. Breakpoints
     19. Reduced motion

   Two rules worth knowing before you edit:

   — The type scale lives in one place (part 1) and is re-declared per
     breakpoint (part 18). No heading has its own media query: changing
     --fs-h2 is enough.
   — Anything hidden before it scrolls into view is hidden under `.js`.
     With scripts switched off nothing is invisible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ink and surfaces ----------------------------------------------------- */
  --ink: #151515;          /* headings                                      */
  --body: #242424;         /* running text                                  */
  --muted: #767676;        /* helper text, tags                             */
  --faint: #a1a1a1;        /* disabled, meta                                */
  --line: #cecece;         /* every 1 px border                             */
  --line-soft: #e7e7e7;    /* table rules                                   */
  --surface: #ffffff;      /* cards, top bar                                */
  --surface-sunk: #f1f1f1; /* banner, matrix group rows                     */
  --canvas: #ffffff;       /* page                                          */

  /* The blue exists in three shades on purpose. --blue passes AA on white
     (5.99:1) but not on the blue panel; --blue-onblue is the light tint used
     for text over it. Change one and you have to change all three. */
  --blue: #0a4fdf;         /* 5.99:1 on white                               */
  --blue-hover: #134cc8;   /* 6.87:1 on white                               */
  --blue-deep: #0b3a9d;    /* 9.35:1 on white                               */
  --blue-onblue: #ffffff;  /* 6.16:1 on --blue                              */
  --blue-tint: #eef3fe;    /* rail active row, chips                        */
  --blue-ring: #b7c5e1;    /* the hero rings                                */

  --green: #16a34a;
  --green-soft: #dcfce7;
  --green-ink: #166534;
  --amber: #f59e0b;
  --red-soft: #fde8e8;
  --red-ink: #b80808;

  /* Type ----------------------------------------------------------------- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-display: 57px;  --lh-display: 68px;   /* hero and section titles     */
  --fs-h2: 48px;       --lh-h2: 56px;
  --fs-h3: 40px;       --lh-h3: 48px;
  --fs-h4: 33px;       --lh-h4: 40px;
  --fs-h5: 28px;       --lh-h5: 32px;
  --fs-lead: 19px;     --lh-lead: 28px;      /* body large                  */
  --fs-body: 16px;     --lh-body: 24px;
  --fs-sm: 14px;       --lh-sm: 20px;
  --fs-xs: 12px;       --lh-xs: 16px;

  /* Two headings are drawn on the viewport rather than the scale: the
     "How Tokora Works" title and the step titles. One clamp each, declared
     here so they never need a media query of their own. */
  --fs-jumbo: clamp(40px, 7.97vw, 130px);   --lh-jumbo: 0.92;
  --fs-jumbo-body: clamp(16px, 2.04vw, 34px); --lh-jumbo-body: 1.2;
  --fs-step: clamp(33px, 4.38vw, 72px);     --lh-step: 1;

  --tracking-tight: -0.02em;  /* every heading; the original ships -2%      */

  /* Space ---------------------------------------------------------------- */
  --gutter: 76px;      /* left/right padding of a full-width section        */
  --content: 1200px;   /* the width everything lines up on                  */
  --topbar-h: 64px;
  --rail-w: 85px;

  /* Shape ---------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-card: 0 10px 26px rgb(15 23 42 / 0.12);
  --shadow-float: 0 12px 32px rgb(21 21 21 / 0.1);
  --shadow-badge: 0 20px 48px rgb(21 21 21 / 0.09),
                  0 6px 16px rgb(21 21 21 / 0.06),
                  0 1px 3px rgb(21 21 21 / 0.05);

  /* Motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* the signature curve      */
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);  /* flips                    */
  --dur-reveal: 0.6s;
  --dur-scene: 0.92s;
  --dur-ui: 0.18s;

  /* The hero scales as one block. Part 18 steps this down per breakpoint;
     main.js refines it to the exact ratio once it runs. */
  --hero-scale: 1;

  color-scheme: light;
}

/* Dark mode is a token swap, nothing else. The rail button toggles the
   attribute; the media query covers the first visit. */
:root[data-theme="dark"] {
  --ink: #f5f5f5;
  --body: #d6d6d6;
  --muted: #a1a1a1;
  --faint: #767676;
  --line: #3a3a3a;
  --line-soft: #2c2c2c;
  --surface: #1c1c1c;
  --surface-sunk: #232323;
  --canvas: #141414;
  --blue: #5b8cff;         /* 6.24:1 on --canvas                            */
  --blue-hover: #7ba3ff;
  --blue-deep: #a8c2ff;
  --blue-tint: #1b2540;
  --blue-ring: #33415e;
  --green-soft: #12331f;
  --green-ink: #6ee7a0;
  --red-soft: #3a1414;
  --red-ink: #ff9b9b;
  --shadow-card: 0 10px 26px rgb(0 0 0 / 0.5);
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.55);
  --shadow-badge: 0 20px 48px rgb(0 0 0 / 0.5), 0 6px 16px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f5f5f5;
    --body: #d6d6d6;
    --muted: #a1a1a1;
    --faint: #767676;
    --line: #3a3a3a;
    --line-soft: #2c2c2c;
    --surface: #1c1c1c;
    --surface-sunk: #232323;
    --canvas: #141414;
    --blue: #5b8cff;
    --blue-hover: #7ba3ff;
    --blue-deep: #a8c2ff;
    --blue-tint: #1b2540;
    --blue-ring: #33415e;
    --green-soft: #12331f;
    --green-ink: #6ee7a0;
    --red-soft: #3a1414;
    --red-ink: #ff9b9b;
    --shadow-card: 0 10px 26px rgb(0 0 0 / 0.5);
    --shadow-float: 0 12px 32px rgb(0 0 0 / 0.55);
    --shadow-badge: 0 20px 48px rgb(0 0 0 / 0.5), 0 6px 16px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* `clip`, not `hidden`: `hidden` would turn the root into a scroll container
   and every `position: sticky` further down the page would stop working. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--blue); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* An empty target so `#top` lands under the fixed top bar. */
.anchor { display: block; height: 0; }

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-ui), border-color var(--dur-ui), color var(--dur-ui);
}
.btn.is-sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-sm); }
.btn.is-md { min-height: 40px; padding: 0 16px; font-size: var(--fs-sm); }
.btn.is-lg { min-height: 52px; padding: 0 24px; font-size: var(--fs-lead); }

.btn.is-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.is-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn.is-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn.is-outline:hover { background: var(--blue-tint); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.tags li + li::before { content: "•"; margin-right: 16px; color: var(--faint); }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.pill.is-yes { background: var(--green-soft); color: var(--green-ink); }
.pill.is-no { background: var(--red-soft); color: var(--red-ink); }

/* Scroll reveal ------------------------------------------------------------
   The hidden state only exists under `.js`, which enhance.js adds in <head>.
   main.js then adds .is-in when the block reaches 15% from the bottom of the
   viewport — measured on the viewport, so a block taller than the screen
   still reveals. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(150px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The page shell: the rail is fixed, so the content is pushed aside. */
.shell {
  padding-top: var(--topbar-h);
  padding-left: var(--rail-w);
}

/* --------------------------------------------------------------------------
   4. Top bar, mega menu, drawer
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; height: 26px; }
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .footer-brand img { filter: invert(1) hue-rotate(180deg); }

/* Karet, Kortex and the JSON picto are near-black artwork, which vanishes on a
   dark badge. */
:root[data-theme="dark"] .orbit-badge[data-tool="karet"] .orbit-logo,
:root[data-theme="dark"] .orbit-badge[data-tool="kortex"] .orbit-logo,
:root[data-theme="dark"] .orbit-badge[data-tool="json"] .orbit-logo,
:root[data-theme="dark"] .connect-tools img[src*="karet"],
:root[data-theme="dark"] .connect-tools img[src*="kortex"] { filter: invert(1) brightness(1.15); }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
}

.topbar-link,
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--body);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-ui);
}
.topbar-link:hover,
.menu-trigger:hover { background: var(--surface-sunk); }

.menu-chevron { width: 20px; height: 20px; transition: transform var(--dur-ui) var(--ease-out); }
.menu-trigger[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.topbar-link.is-quiet { padding: 0 12px; }

/* The mega menu. It sits under the bar, full width, and only opens once
   main.js has wired the trigger — so it can never trap a keyboard user
   behind a script that failed to load. */
.menu { position: static; }

.menu-panel {
  position: absolute;
  inset: 100% 0 auto;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 40px;
  padding: 32px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out),
              visibility var(--dur-ui);
}
.menu-trigger[aria-expanded="true"] + .menu-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.menu-list { display: grid; gap: 4px; align-content: start; }
.menu-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-ui);
}
.menu-item:hover,
.menu-item.is-current { background: var(--blue-tint); }
.menu-item-label { color: var(--ink); font-weight: 600; }
.menu-item-helper { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }

.menu-promo { display: grid; gap: 12px; justify-items: start; }
.menu-promo img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); }
.menu-promo h3 { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.menu-promo p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }

.drawer-toggle {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.drawer-toggle-bars,
.drawer-toggle-bars::before,
.drawer-toggle-bars::after {
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
}
.drawer-toggle-bars::before,
.drawer-toggle-bars::after { content: ""; position: relative; }
.drawer-toggle-bars::before { top: -5px; }
.drawer-toggle-bars::after { top: 3.5px; }

.drawer {
  position: fixed;
  inset: var(--topbar-h) 0 auto;
  z-index: 95;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.drawer nav { display: grid; gap: 4px; }
.drawer a {
  padding: 12px 8px;
  color: var(--body);
  font-weight: 500;
  text-decoration: none;
}
.drawer .btn { margin-top: 8px; color: #fff; }

/* --------------------------------------------------------------------------
   5. Rail
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: var(--rail-w);
  padding: 8px 0;
  border-right: 1px solid var(--line);
  background: var(--canvas);
}

.rail-list { display: grid; gap: 4px; align-content: start; }

.rail-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px;
  border-left: 3px solid transparent;
  color: var(--body);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-ui), color var(--dur-ui);
}
.rail-item svg { width: 22px; height: 22px; }
.rail-item:hover { background: var(--surface-sunk); }
.rail-item.is-current {
  border-left-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue);
}

.rail-foot { margin-top: auto; display: grid; justify-items: center; gap: 8px; }
.rail-theme {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  color: var(--body);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.rail-theme svg { width: 22px; height: 22px; }
.rail-theme-moon { display: none; }
.rail-theme[aria-pressed="true"] .rail-theme-sun { display: none; }
.rail-theme[aria-pressed="true"] .rail-theme-moon { display: block; }
.rail-theme-label { color: var(--muted); }

.rail-version {
  width: 100%;
  padding: 10px 4px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------------
   The section is 175 vh tall and its inner block sticks: that extra 75 vh is
   the scroll budget the drifting logos spend. main.js writes --progress from
   0 to 1 across it. */

.hero {
  position: relative;
  height: 175dvh;
  background: linear-gradient(0deg, rgb(255 255 255 / 0) 50%, rgb(10 159 223 / 0.07) 100%);
}
:root[data-theme="dark"] .hero {
  background: linear-gradient(0deg, rgb(20 20 20 / 0) 50%, rgb(10 159 223 / 0.1) 100%);
}

.hero-pin {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
}

.hero-inner {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 32px 20px;
  overflow: hidden;
}

/* Both the rings and the text sit in the same grid cell, stacked. */
.orbit,
.hero-content { grid-area: 1 / 1; }

.orbit {
  position: relative;
  width: calc(1200px * var(--hero-scale));
  height: calc(675px * var(--hero-scale));
  overflow: visible;
}
.orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { stroke: url(#ring-fade); stroke-width: 1px; }
.orbit-ring-accent { stroke: url(#ring-accent); stroke-width: 1.75px; stroke-linecap: round; }

/* Where each badge sits, and when it flips.
     --r     the ring it rides, in the 1200 × 675 drawing space
     --a     its starting angle, 0deg being three o'clock
     --dir   which way it drifts as the hero scrolls
     --swap  the progress at which the tool logo becomes a token icon
   Ten different values, so ten rules — but all in one place, and renaming a
   tool means editing one line instead of hunting through the markup. */
.orbit-badge[data-tool="astera"]   { --r: 400px; --a: 170deg; --dir: 1;  --swap: 0.06; }
.orbit-badge[data-tool="tokora-mcp"] { --r: 400px; --a: 10deg;  --dir: 1;  --swap: 0.01; }
.orbit-badge[data-tool="aurin"]   { --r: 480px; --a: 220deg; --dir: -1; --swap: 0.21; }
.orbit-badge[data-tool="karet"]   { --r: 480px; --a: -40deg; --dir: -1; --swap: 0.05; }
.orbit-badge[data-tool="kortex"]    { --r: 480px; --a: 150deg; --dir: -1; --swap: 0.11; }
.orbit-badge[data-tool="canvo"]    { --r: 480px; --a: 40deg;  --dir: -1; --swap: 0.10; }
.orbit-badge[data-tool="json"]     { --r: 560px; --a: 180deg; --dir: 1;  --swap: 0.05; }
.orbit-badge[data-tool="css"]      { --r: 560px; --a: 0deg;   --dir: 1;  --swap: 0.37; }
.orbit-badge[data-tool="fluxo"]    { --r: 640px; --a: 195deg; --dir: -1; --swap: 0.02; }
.orbit-badge[data-tool="nuvo"]      { --r: 640px; --a: -15deg; --dir: -1; --swap: 0.18; }

.orbit-badge[data-tool="astera"] .orbit-token,
.orbit-badge[data-tool="json"] .orbit-token   { --icon: url("data:image/svg+xml,<svg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M4 4.75h5.69l2 2H20c.35 0 .63.12.88.37s.37.53.37.88v10c0 .35-.12.63-.37.88s-.53.37-.88.37H4c-.35 0-.63-.12-.88-.37s-.37-.53-.37-.88V6c0-.35.12-.63.37-.88S3.65 4.75 4 4.75Z%22 stroke=%22black%22 stroke-width=%221.5%22/><path d=%22M13 10.2H6M18 13.2H6M15 16.2H6%22 stroke=%22black%22 stroke-width=%221.5%22/></svg>"); }
.orbit-badge[data-tool="tokora-mcp"] .orbit-token,
.orbit-badge[data-tool="canvo"] .orbit-token  { --icon: url("data:image/svg+xml,<svg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.5%22 xmlns=%22http://www.w3.org/2000/svg%22><rect x=%223.5%22 y=%223.5%22 width=%227.5%22 height=%227.5%22 rx=%221.25%22 fill=%22black%22 stroke=%22none%22/><rect x=%2213%22 y=%223.5%22 width=%227.5%22 height=%227.5%22 rx=%221.25%22/><rect x=%223.5%22 y=%2213%22 width=%227.5%22 height=%227.5%22 rx=%221.25%22/><rect x=%2213%22 y=%2213%22 width=%227.5%22 height=%227.5%22 rx=%221.25%22 fill=%22black%22 stroke=%22none%22/></svg>"); }
.orbit-badge[data-tool="aurin"] .orbit-token,
.orbit-badge[data-tool="nuvo"] .orbit-token    { --icon: url("data:image/svg+xml,<svg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M5 5V7M5 5h14v2M12 5v14M9 19h6%22 stroke=%22black%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>"); }
.orbit-badge[data-tool="karet"] .orbit-token,
.orbit-badge[data-tool="css"] .orbit-token    { --icon: url("data:image/svg+xml,<svg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M12 3a9 9 0 1 0 0 18c1 0 1.5-.6 1.5-1.3 0-.9-.8-1.3-.8-2.2 0-.6.5-1 1.1-1H15a5 5 0 0 0 5-5c0-4.6-3.6-8.5-8-8.5Z%22 stroke=%22black%22 stroke-width=%221.5%22/><circle cx=%227.5%22 cy=%2211.5%22 r=%221.3%22 fill=%22black%22/><circle cx=%2210.5%22 cy=%228%22 r=%221.3%22 fill=%22black%22/><circle cx=%2215%22 cy=%228%22 r=%221.3%22 fill=%22black%22/></svg>"); }
.orbit-badge[data-tool="kortex"] .orbit-token,
.orbit-badge[data-tool="fluxo"] .orbit-token  { --icon: url("data:image/svg+xml,<svg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22m8.5 8-4.5 4 4.5 4M15.5 8l4.5 4-4.5 4%22 stroke=%22black%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>"); }

/* Polar placement. --a-now adds the drift: 8 degrees over the whole pin,
   one way or the other depending on --dir. */
.orbit-badge {
  --a-now: calc(var(--a) + var(--progress, 0) * 8deg * var(--dir));
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: calc(72px * var(--hero-scale));
  height: calc(72px * var(--hero-scale));
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-badge);
  transform:
    translate(-50%, -50%)
    rotate(var(--a-now))
    translateX(calc(var(--r) * var(--hero-scale)))
    rotate(calc(-1 * var(--a-now)));
}

/* The tool logo fades out and the token icon fades in, each badge on its own
   --swap point, so they do not all flip at the same moment. */
.orbit-logo,
.orbit-token {
  grid-area: 1 / 1;
  width: 55%;
  height: 55%;
}
.orbit-logo { object-fit: contain; opacity: clamp(0, calc((var(--swap) + 0.3 - var(--progress, 0)) / 0.3), 1); }
.orbit-token {
  background-color: var(--blue);
  mask-image: var(--icon);
  mask-position: 50%;
  mask-size: contain;
  mask-repeat: no-repeat;
  opacity: clamp(0, calc((var(--progress, 0) - var(--swap)) / 0.3), 1);
}

/* Hover card. Hidden by default, shown on hover, focus, or when main.js
   walks through the badges one by one. */
.tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 3;
  display: grid;
  gap: 4px;
  width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  /* --tip-x decides which way the card unfolds. The hero clips its overflow,
     so a badge near the left edge has to open to the right, and the other
     way round — otherwise the card is cut in half. */
  transform: translate(var(--tip-x, -50%), 8px);
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out),
              visibility var(--dur-ui);
}
.tip-title { color: var(--ink); font-weight: 600; }
.orbit-badge:hover .tip,
.orbit-badge:focus-within .tip,
.orbit-badge.is-tip .tip { visibility: visible; opacity: 1; transform: translate(var(--tip-x, -50%), 0); }

.orbit-badge[data-tool="astera"],
.orbit-badge[data-tool="aurin"],
.orbit-badge[data-tool="kortex"],
.orbit-badge[data-tool="json"],
.orbit-badge[data-tool="fluxo"] { --tip-x: -6%; }

.orbit-badge[data-tool="tokora-mcp"],
.orbit-badge[data-tool="karet"],
.orbit-badge[data-tool="canvo"],
.orbit-badge[data-tool="css"],
.orbit-badge[data-tool="nuvo"] { --tip-x: -94%; }

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32px * var(--hero-scale));
  width: 100%;
  max-width: calc(640px * var(--hero-scale));
  text-align: center;
}

.hero-title {
  display: flex;
  flex-direction: column;
  font-size: calc(var(--fs-display) * var(--hero-scale));
  line-height: calc(var(--lh-display) * var(--hero-scale));
  font-weight: 700;
}

.hero-body {
  max-width: calc(600px * var(--hero-scale));
  font-size: calc(var(--fs-body) * var(--hero-scale));
  line-height: calc(var(--lh-body) * var(--hero-scale));
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(20px * var(--hero-scale)) calc(56px * var(--hero-scale));
}
.hero-stats li { display: grid; gap: 2px; }
.hero-stats strong {
  color: var(--ink);
  font-size: calc(var(--fs-h5) * var(--hero-scale));
  line-height: calc(var(--lh-h5) * var(--hero-scale));
  font-weight: 700;
}
.hero-stats span {
  color: var(--body);
  font-size: calc(var(--fs-body) * var(--hero-scale));
  line-height: calc(var(--lh-body) * var(--hero-scale));
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* --------------------------------------------------------------------------
   7. Story
   -------------------------------------------------------------------------- */

.story { padding: 112px var(--gutter); background: var(--canvas); }

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  max-width: var(--content);
  margin-inline: auto;
}

.story-intro { position: sticky; top: calc(var(--topbar-h) + 56px); align-self: start; }
.story-intro h2 {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.story-helper { margin-top: 24px; }

.story-cards { display: grid; gap: 64px; }
.story-card { display: flex; flex-direction: column; gap: 20px; }

.story-visual {
  position: relative;
  aspect-ratio: 34 / 16;
  border-radius: var(--radius-md);
  background: rgb(183 197 225 / 0.2);
  overflow: hidden;
}
.story-copy h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.story-copy p { margin-top: 12px; }
.story-copy .tags { margin-top: 20px; }

/* Each scene is a small mock UI. They all share the same entrance: up from
   80 px with a hair of overshoot, 0.92 s on the signature curve. */
.scene { position: absolute; inset: 0; display: grid; place-items: center; }
.js .story-visual .scene > * { opacity: 0; }
.js .story-visual.is-in .scene > * {
  animation: scene-enter var(--dur-scene) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes scene-enter {
  0% { opacity: 0; transform: translateY(80px) scale(0.92); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

/* 7.1 The colour picker + its modal ---------------------------------------- */
.picker {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 40%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.picker-sv {
  position: relative;
  height: 72px;
  border-radius: 4px;
  background:
    linear-gradient(to top, #000, rgb(0 0 0 / 0)),
    linear-gradient(to right, #fff, #235cd7);
}
.picker-sv-thumb,
.picker-hue-thumb {
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
}
.picker-sv-thumb { top: 34%; left: 62%; background: #235cd7; }
.picker-hue {
  position: relative;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.picker-hue-thumb { top: -1px; left: 62%; background: #235cd7; }
.picker-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border-radius: 4px;
  background: var(--surface-sunk);
  font-size: 10px;
  text-align: center;
}
.picker-tabs span { padding: 4px 0; color: var(--muted); }
.picker-tabs .is-current { border-radius: 4px; background: var(--surface); color: var(--blue); font-weight: 600; }
.picker-value {
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.modal {
  position: absolute;
  top: 18%;
  right: 6%;
  width: 46%;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.modal-head { display: flex; align-items: start; gap: 8px; }
.modal-title { color: var(--blue); font-size: var(--fs-body); line-height: var(--lh-body); }
.modal-desc { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 14px; }
.modal-close { flex: none; margin-left: auto; color: var(--muted); }
.modal-close svg { width: 14px; height: 14px; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 12px; }
.modal-actions .btn { min-height: 26px; padding: 0 10px; font-size: 11px; }

/* The pointer that reaches for the button, with its click ring. */
.hand {
  position: absolute;
  top: 62%;
  left: 48%;
  width: 26px; height: 26px;
}
.hand-icon {
  position: absolute;
  inset: 0;
  background: var(--ink);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v10.5L6.5 11 5 12.5l4.8 6.5H17l1.5-6.2c.3-1.2-.4-2.3-1.6-2.3H13V3a2 2 0 0 0-4 0Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}
.hand-ring {
  position: absolute;
  inset: -8px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
}
.js .story-visual.is-in .hand { animation: hand-move 3.6s var(--ease-both) 0.9s infinite; }
.js .story-visual.is-in .hand-ring { animation: hand-tap 3.6s ease-out 0.9s infinite; }

@keyframes hand-move {
  0%, 12% { transform: translate(0, 0); }
  36%, 62% { transform: translate(30%, -18%); }
  86%, 100% { transform: translate(0, 0); }
}
@keyframes hand-tap {
  0%, 34% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.9; transform: scale(0.8); }
  56% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* 7.2 The font list -------------------------------------------------------- */
.fontlist {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 40%;
  height: 76%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fontlist-track { display: grid; }
.js .story-visual.is-in .fontlist-track { animation: fontlist-scroll 9s steps(1) 1.2s infinite; }
.fontlist span {
  padding: 6px 12px;
  color: var(--ink);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.fontlist .is-current { background: var(--green-soft); font-weight: 600; }

@keyframes fontlist-scroll {
  0%, 24% { transform: translateY(0); }
  28%, 52% { transform: translateY(-28px); }
  56%, 80% { transform: translateY(-56px); }
  84%, 100% { transform: translateY(0); }
}

/* 7.3 The prompt router ---------------------------------------------------- */
.router-log {
  position: absolute;
  top: 10%;
  left: 8%;
  right: 8%;
  display: grid;
  gap: 6px;
}
.router-log li {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface);
  font-size: 11px;
}
.router-skill { color: var(--ink); font-weight: 600; }
.router-note { color: var(--muted); }

.router-field {
  position: absolute;
  top: 52%;
  left: 8%;
  right: 8%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.router-text { flex: 1; color: var(--body); font-size: var(--fs-sm); }
.router-caret {
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ink);
}
.js .story-visual.is-in .router-caret { animation: caret 0.84s step-end infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.router-send {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.router-send svg { width: 16px; height: 16px; }

.router-result {
  position: absolute;
  top: 74%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 11px;
}
.router-result-name { color: var(--blue); font-weight: 600; }
.router-dots { display: flex; gap: 3px; }
.router-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.js .story-visual.is-in .router-dots i { animation: dot 0.9s ease-in-out infinite; }
.js .story-visual.is-in .router-dots i:nth-child(2) { animation-delay: 0.15s; }
.js .story-visual.is-in .router-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* 7.4 The component tiles -------------------------------------------------- */
.tiles {
  position: absolute;
  inset: 12% 6%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  place-content: center;
}
.tiles span {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
}
.js .story-visual.is-in .tiles span { animation: tile-flip 0.56s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes tile-flip {
  0% { transform: rotateY(0) scale(1); }
  48% { transform: rotateY(90deg) scale(0.96); }
  52% { transform: rotateY(-90deg) scale(0.96); }
  100% { transform: rotateY(0) scale(1); }
}

/* 7.5 The tech stack logos ------------------------------------------------- */
.stacks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.stacks li {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-badge);
}
.stacks img { width: 34px; height: 34px; }
.stacks li:nth-child(1) { --i: 0; }
.stacks li:nth-child(2) { --i: 1; }
.stacks li:nth-child(3) { --i: 2; }
.stacks li:nth-child(4) { --i: 3; }
.stacks li:nth-child(5) { --i: 4; }
.stacks li:nth-child(6) { --i: 5; }
.js .story-visual.is-in .stacks li {
  animation: stack-float 3.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 90ms);
}

@keyframes stack-float { from { transform: translateY(4px); } to { transform: translateY(-6px); } }

/* 7.6 The guideline checklist ---------------------------------------------- */
.guidelines {
  position: absolute;
  inset: 10% 8%;
  display: grid;
  align-content: start;
  gap: 6px;
  border-radius: var(--radius-sm);
  background: #faf7f0;
  padding: 12px;
  overflow: hidden;
}
:root[data-theme="dark"] .guidelines { background: #26241e; }
.guidelines li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-sm); }
.guideline-mark { width: 22px; height: 22px; border-radius: 50%; }
.guideline-mark.is-blue { background: var(--blue); }
.guideline-mark.is-green { background: var(--green); }
.guideline-mark.is-amber { background: var(--amber); }
.guideline-name { color: var(--ink); font-weight: 600; }
.guideline-count { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.js .story-visual.is-in .guidelines li:nth-child(n + 4) { opacity: 0.45; }

/* --------------------------------------------------------------------------
   8. Section headers
   -------------------------------------------------------------------------- */

.section-head {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
  padding: 0 20px 48px;
  text-align: center;
}
.section-head.is-wide { padding-top: 120px; }

.section-title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.section-title.is-left { align-items: start; text-align: left; }
.section-title.is-oncolor { color: var(--blue-onblue); }

.section-body { display: grid; gap: 16px; max-width: 680px; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 16px; }

/* The install command block ------------------------------------------------ */
.install {
  width: min(600px, 100%);
  margin-bottom: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  overflow: hidden;
}
.install-tabs { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.install-tab {
  padding: 6px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.install-tab.is-current { border-bottom-color: var(--ink); color: var(--ink); }
.install-copy {
  margin-left: auto;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.install-copy svg { width: 18px; height: 18px; }
.install-line {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  white-space: pre-wrap;
  word-break: break-all;
}
.terminal-prompt { color: var(--faint); }

/* --------------------------------------------------------------------------
   9. Flow
   -------------------------------------------------------------------------- */

.flow { position: relative; height: 600dvh; }
.flow-pin {
  position: sticky;
  top: var(--topbar-h);
  display: grid;
  place-items: center;
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}
.flow-stage { display: grid; justify-items: center; gap: 32px; width: 100%; }

.flow-bar {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.flow-bar-btn {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: background-color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), color 0.28s var(--ease-out);
}
.flow-bar-btn svg { width: 24px; height: 24px; }
.flow-bar-btn.is-current { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }

.flow-panels { position: relative; width: 100%; height: 340px; }
.flow-panel {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 24px;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
  transform: translateY(16px);
  pointer-events: none;
}
.flow-panel.is-current { opacity: 1; transform: none; }

/* Without JavaScript the panels have no active step to follow, so they are
   laid out one after another instead of stacked. */
html:not(.js) .flow { height: auto; padding-bottom: 80px; }
html:not(.js) .flow-pin { position: static; height: auto; padding: 40px 20px; }
html:not(.js) .flow-panels { height: auto; display: grid; gap: 64px; }
html:not(.js) .flow-panel { position: static; opacity: 1; transform: none; }

.flow-card {
  display: grid;
  gap: 12px;
  width: min(360px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.flow-card.is-wide { width: min(560px, 100%); }
.flow-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flow-card label,
.flow-field { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.flow-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.flow-input svg { width: 18px; height: 18px; color: var(--muted); }
.flow-sep { height: 1px; margin: 4px 0; border: 0; background: var(--line); }

.contrast { display: grid; gap: 8px; margin-top: 4px; font-size: var(--fs-sm); }
.contrast li { display: flex; justify-content: space-between; gap: 12px; }
.contrast-score { font-weight: 600; }
.contrast-score.is-pass { color: var(--green-ink); }
.contrast-score.is-fail { color: var(--red-ink); }

.flow-components {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.flow-components span {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
}

.flow-card.is-terminal { width: min(520px, 100%); padding: 0; }
.terminal-tabs { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.terminal-tabs .is-current { color: var(--ink); font-weight: 600; }
.terminal-line { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-all; }

.flow-card.is-ready { justify-items: center; text-align: center; }
.flow-ready-title { color: var(--ink); font-size: var(--fs-lead); font-weight: 600; }

.flow-desc { max-width: 600px; color: var(--body); text-align: center; }

/* --------------------------------------------------------------------------
   10. Library
   --------------------------------------------------------------------------
   The blue panel slides up under the flow: that negative margin is the
   overlap, and the section keeps its own scroll budget so the marquees have
   time to be seen. */

.library { position: relative; margin-top: -320px; height: 260dvh; }
.library-inner {
  position: sticky;
  top: var(--topbar-h);
  display: grid;
  align-content: center;
  gap: 56px;
  height: calc(100dvh - var(--topbar-h));
  padding: 100px 0;
  background: var(--blue);
  overflow: hidden;
}

.library-head {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
  padding: 0 20px;
  text-align: center;
}
.library-helper { max-width: 640px; color: var(--blue-onblue); }

/* The word that flips over. Both faces share one grid cell so the box never
   changes size mid-flip. */
.rotate { display: inline-grid; perspective: 600px; vertical-align: bottom; }
.rotate-word {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
}
.rotate-word.is-out { animation: flip-out 0.6s var(--ease-both) both; }
.rotate-word.is-in { animation: flip-in 0.6s var(--ease-both) both; }
@keyframes flip-in { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
@keyframes flip-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotateX(90deg); } }

.library-rows { display: grid; gap: 16px; }
.library-row { overflow: hidden; }
.library-strip { display: flex; gap: 16px; width: max-content; }
.js .library-row.is-in .library-strip { animation: marquee var(--speed, 60s) linear infinite; }
.library-row[data-dir="-1"] .library-strip { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  color: #0b1020;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
/* A tile is a coloured square with a white glyph punched out of it. The
   colour is one class, the glyph another, so a new component only needs a
   pair of class names. */
.chip-tile {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
}
.chip-tile.is-amber { background: var(--amber); }
.chip-tile.is-green { background: var(--green); }
.chip-tile.is-blue { background: var(--blue); }

.chip-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: #fff;
  mask-image: var(--glyph);
  mask-size: contain;
  mask-position: 50%;
  mask-repeat: no-repeat;
}
.chip-tile.is-lines { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.chip-tile.is-alert { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 22 20H2Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.chip-tile.is-pill  { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='6' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.chip-tile.is-box   { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 10h16' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.chip-tile.is-check { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4 10-10' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip-tile.is-arrow { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   11. Connect
   -------------------------------------------------------------------------- */

.connect { position: relative; height: 520dvh; background: var(--canvas); }
.connect-pin {
  position: sticky;
  top: var(--topbar-h);
  display: grid;
  place-items: center;
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}

.connect-stage { position: relative; width: 480px; max-width: 100%; height: 620px; }

/* The folder: back sheet, the pills that drop into it, then the front sheet
   that hides their lower half. */
.connect-folder {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 160px;
  height: 132px;
  filter: drop-shadow(0 12px 20px rgb(21 21 21 / 0.12));
  transform: translateX(-50%);
}
.connect-folder-back { position: absolute; inset: 0; width: 160px; }
.connect-folder-front { position: absolute; top: 40px; left: 0; width: 160px; z-index: 2; }

/* Each pill falls in turn: number six lands at progress 0.37, which is when
   the badge below flips to a green check. */
.connect-pills { position: absolute; top: 0; left: 0; z-index: 1; width: 160px; height: 46px; }
.connect-pill {
  --arrivee: clamp(0, calc((var(--progress, 0) - var(--i) * 0.05) / 0.12), 1);
  position: absolute;
  top: 8px;
  left: calc(26px + var(--i) * 22px);
  width: 30px; height: 30px;
  border-radius: 50%;
  opacity: var(--arrivee);
  transform: translateY(calc(-140px * (1 - var(--arrivee))));
}
.connect-pill:nth-child(1) { --i: 0; }
.connect-pill:nth-child(2) { --i: 1; }
.connect-pill:nth-child(3) { --i: 2; }
.connect-pill:nth-child(4) { --i: 3; }
.connect-pill:nth-child(5) { --i: 4; }
.connect-pill:nth-child(6) { --i: 5; }
.connect-pill.is-green { background: var(--green); }
.connect-pill.is-amber { background: var(--amber); }
.connect-pill.is-blue { background: var(--blue); }

.connect-badge {
  position: absolute;
  top: 178px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 66px; height: 66px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  transform: translateX(-50%);
}
.connect-badge-mark { display: grid; place-items: center; width: 24px; height: 24px; }
.connect-badge-mark img,
.connect-badge-check { grid-area: 1 / 1; width: 24px; height: 24px; }
.connect-badge-mark img { opacity: clamp(0, calc((0.47 - var(--progress, 0)) / 0.1), 1); }
.connect-badge-check { color: var(--green); opacity: clamp(0, calc((var(--progress, 0) - 0.37) / 0.1), 1); }
.connect-badge-label { color: var(--ink); font-size: 10px; font-weight: 600; }

/* The wire draws itself downwards: a dash pattern whose height follows the
   progress. */
.connect-wire {
  position: absolute;
  top: 244px;
  left: 50%;
  width: 2px;
  height: calc(140px * clamp(0, calc((var(--progress, 0) - 0.4) / 0.2), 1));
  background: repeating-linear-gradient(to bottom, var(--muted) 0 7px, transparent 7px 14px);
  transform: translateX(-50%);
}

.connect-screen {
  position: absolute;
  top: 384px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 160px;
  padding: 20px 12px 28px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transform: translateX(-50%);
}
.connect-screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 16px;
  background: var(--blue);
}
.connect-screen-label { color: var(--ink); font-size: var(--fs-xs); font-weight: 700; }

/* The stand: a neck under the screen and a base line, both plain boxes. */
.connect-stand {
  position: absolute;
  top: 505px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%);
}
.connect-stand::before {
  content: "";
  position: absolute;
  inset: 0 24px 6px;
  border: 1.5px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.connect-stand::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -44px;
  width: 172px;
  height: 1.5px;
  background: var(--ink);
}

/* The five tools fan out at the end of the section. */
.connect-tools {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  gap: 20px;
  transform: translateX(-50%);
}
.connect-tools li:nth-child(1) { --i: 0; }
.connect-tools li:nth-child(2) { --i: 1; }
.connect-tools li:nth-child(3) { --i: 2; }
.connect-tools li:nth-child(4) { --i: 3; }
.connect-tools li:nth-child(5) { --i: 4; }
.connect-tools li {
  --venue: clamp(0, calc((var(--progress, 0) - 0.62 - var(--i) * 0.06) / 0.12), 1);
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: var(--venue);
  transform: translateY(calc(24px * (1 - var(--venue))));
}
.connect-tools img { width: 28px; height: 28px; object-fit: contain; }
.connect-tools span { color: var(--muted); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   12. Steps
   --------------------------------------------------------------------------
   With JavaScript the track is dragged sideways by the page scroll. Without
   it — and on narrow screens, where the original does the same — it is a
   plain scroll-snap carousel that swipes and reaches its last card with the
   keyboard alone. */

.steps-intro {
  display: grid;
  justify-items: center;
  gap: 32px;
  max-width: var(--content);
  margin: -48px auto 0;
  /* That 820 px of air is deliberate: it is the runway the step carousel
     needs before it takes over the screen, and the original leaves it too. */
  padding: 0 40px 820px;
  text-align: center;
}
.steps-intro h2 { font-size: var(--fs-jumbo); line-height: var(--lh-jumbo); }
.steps-intro p {
  max-width: 960px;
  margin-block: 30px;
  font-size: var(--fs-jumbo-body);
  line-height: var(--lh-jumbo-body);
}

.steps { position: relative; }

.steps-track {
  display: flex;
  gap: 40px;
  padding: 0 20px 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.step {
  flex: none;
  width: min(1200px, 92vw);
  scroll-snap-align: center;
}
.step article { display: grid; gap: 32px; }
.step h3 { font-size: var(--fs-step); line-height: var(--lh-step); }
.step-media {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  overflow: hidden;
}
.step-media img,
.step-media video { width: 100%; }
.step-support { display: grid; align-content: start; justify-items: start; gap: 24px; max-width: 620px; }

.step-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.step-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-float);
  transform: translate(-50%, -50%);
}
.step-play-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--ink);
  transform: translate(-50%, -50%);
}

.steps-status {
  max-width: var(--content);
  margin: 16px auto 0;
  padding: 0 20px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Above 745 px, and only with JavaScript, the carousel becomes the pinned
   horizontal track of the original. */
@media (width >= 745px) {
  .js .steps { height: 600dvh; }
  .js .steps-pin {
    position: sticky;
    top: var(--topbar-h);
    display: grid;
    align-content: center;
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
  }
  /* max-content states out loud what the grid would work out anyway: the
     track is as wide as its five cards and overflows the frame, which clips
     it. main.js then slides it by --x. */
  .js .steps-track {
    width: max-content;
    padding: 0 40px;
    overflow: visible;
    scroll-snap-type: none;
    transform: translateX(var(--x, 0px));
  }
  .js .step { width: min(1274px, calc(100vw - var(--rail-w) - 80px)); }
  .js .step article { grid-template-columns: minmax(0, 581px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 56px; }
  .js .step h3 { grid-column: 1 / -1; }
  .js .steps-status { position: absolute; bottom: 32px; left: 0; right: 0; }
}

/* --------------------------------------------------------------------------
   13. Benefits
   -------------------------------------------------------------------------- */

.benefits {
  display: grid;
  gap: 56px;
  max-width: var(--content);
  margin: 120px auto 0;
  padding: 16px var(--gutter);
}

.benefits-image { position: relative; }
.benefits-photo { width: 100%; border-radius: var(--radius-xl); }
.benefits-card,
.benefits-modal { position: absolute; border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.benefits-card { top: 6%; right: 3%; width: 26%; }
.benefits-modal { bottom: 8%; left: 6%; width: 32%; }

.benefits-body {
  display: grid;
  grid-template-columns: minmax(0, 416px) minmax(0, 1fr);
  gap: 60px;
  padding: 60px;
  border-radius: var(--radius-xl);
  background: var(--surface-sunk);
}
.benefits-heading { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.benefits-list { display: grid; gap: 40px; }
.benefit h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.benefit p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   14. Pricing and matrix
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  gap: 40px;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 64px var(--gutter) 80px;
}
.pricing-helper { max-width: 900px; margin-top: -24px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.plan {
  display: grid;
  /* auto / 1fr / auto: the feature list absorbs the difference, so the three
     cards end up the same height with their button on the bottom edge. */
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.plan.is-featured { border-color: var(--blue); }

.plan-top,
.plan-body,
.plan-foot { display: grid; gap: 24px; padding: 24px; }
.plan-top { align-content: start; }
.plan-body { align-content: start; border-block: 1px solid var(--line); }

.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plan-head h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.plan-badge {
  padding: 4px 12px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.plan-desc { color: var(--body); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { color: var(--ink); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; letter-spacing: var(--tracking-tight); }
.plan-price span { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.plan-group { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.plan-list { display: grid; gap: 12px; color: var(--body); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.plan-list li { display: flex; gap: 8px; }
.plan-list li::before { content: "✓"; color: var(--green-ink); }
.plan-list.is-limits li::before { content: "—"; color: var(--faint); }
.plan-cta { width: 100%; }

.matrix-scroll { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; text-align: left; }
.matrix th,
.matrix td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.matrix thead th { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.matrix tbody th { color: var(--body); font-weight: 400; }
.matrix td { color: var(--body); }
.matrix-group th { background: var(--surface-sunk); color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 56px;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 40px var(--gutter) 80px;
}
.faq-intro { display: grid; justify-items: start; gap: 20px; align-content: start; }
.faq-heading { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.faq-heading span { color: var(--blue); }

.faq-list { display: grid; gap: 16px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* Chromium leaves <summary> in content-box whatever `*` says, and those two
   extra pixels show up as a misaligned outline. */
.faq-item summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-sign { position: relative; flex: none; width: 20px; height: 20px; }
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.28s var(--ease-out);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }

.faq-answer { padding: 0 24px 20px; color: var(--body); }
/* A closed <details> is hidden with content-visibility, so @keyframes never
   replay on reopen — main.js restarts this one by hand. */
.faq-item[open] .faq-answer { animation: faq-open 0.28s var(--ease-out) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   16. Closing banner
   -------------------------------------------------------------------------- */

.cta {
  display: grid;
  justify-items: center;
  gap: 32px;
  max-width: var(--content);
  margin: 16px auto 0;
  padding: 64px 20px;
  border-radius: var(--radius-xl);
  background: var(--surface-sunk);
  text-align: center;
}
.cta-title { font-size: var(--fs-display); line-height: var(--lh-display); }
.cta-body { display: grid; gap: 4px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.cta-checks li { display: flex; align-items: center; gap: 8px; }
.cta-check {
  width: 18px; height: 18px;
  background: var(--green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 20 2 12.4l1.75-1.9L9 16.2 20.25 4 22 5.9Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer {
  margin: 100px 0 0 var(--rail-w);
  padding: 48px 56px 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.footer-brand { display: grid; justify-items: start; gap: 12px; }
.footer-brand img { width: auto; height: 24px; }
.footer-brand p { color: var(--muted); }
.footer-social {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-column h2 { margin-bottom: 12px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.footer-column ul { display: grid; gap: 8px; }
.footer-column a { color: var(--body); text-decoration: none; }
.footer-column a:hover { color: var(--blue); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-bottom a { margin-left: 16px; color: var(--muted); }

/* --------------------------------------------------------------------------
   18. Breakpoints
   --------------------------------------------------------------------------
   The type scale is re-declared here and nowhere else. --hero-scale steps
   down with it, and main.js refines it further to the exact ratio. */

@media (width <= 1280px) {
  :root { --gutter: 48px; --hero-scale: 0.86; }
}

@media (width <= 1024px) {
  :root { --hero-scale: 0.74; }
  .menu-panel { grid-template-columns: minmax(0, 1fr); }
  .benefits-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 32px; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .plan-top, .plan-body, .plan-foot { padding: 20px; }
  .plans { gap: 20px; }
}

/* The rail is a desktop affordance; below 960 px the original drops it too. */
@media (width <= 960px) {
  :root { --rail-w: 0px; --gutter: 32px; --hero-scale: 0.62; }
  .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rail { display: none; }
  .footer { margin-left: 0; padding-inline: 32px; }
  .topbar-nav, .topbar-actions { display: none; }
  .drawer-toggle { display: grid; place-items: center; }
}

@media (width <= 744px) {
  :root {
    --fs-display: 40px; --lh-display: 48px;
    --fs-h2: 40px;      --lh-h2: 48px;
    --fs-h3: 33px;      --lh-h3: 40px;
    --fs-h4: 28px;      --lh-h4: 32px;
    --fs-h5: 24px;      --lh-h5: 30px;
    --fs-lead: 16px;    --lh-lead: 24px;
    --gutter: 20px;
    --hero-scale: 0.7;
  }

  /* The hero stops being one scaled block: it just stacks and scrolls. */
  .hero { height: auto; }
  .hero-pin { position: static; height: auto; }
  .hero-inner { padding: 80px 20px 104px; overflow: visible; }
  .orbit { display: none; }
  .hero-content { max-width: 100%; gap: 24px; }
  .hero-title,
  .hero-body,
  .hero-stats strong,
  .hero-stats span { font-size: revert; line-height: revert; }
  .hero-title { font-size: var(--fs-display); line-height: var(--lh-display); }
  .hero-body { max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
  .hero-stats { gap: 16px 32px; }
  .hero-stats strong { font-size: var(--fs-h5); line-height: var(--lh-h5); }
  .hero-stats span { font-size: var(--fs-sm); line-height: var(--lh-sm); }

  .story { padding: 64px var(--gutter); }
  .story-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .story-intro { position: static; }
  .story-cards { gap: 64px; }

  /* The pinned sections stay pinned: the original keeps them on a phone,
     and dropping them here cut a third off the page. Only their contents
     shrink. */
  .flow-panels { height: 420px; }
  .flow-bar { gap: 4px; padding: 6px; }
  .flow-bar-btn { width: 44px; height: 44px; }
  .flow-bar-btn svg { width: 20px; height: 20px; }

  .library { margin-top: -120px; }
  .library-inner { padding: 64px 0; gap: 32px; }

  .connect { height: 520dvh; }
  /* Scaled from the middle, not the top: scaling from the top left a block
     of empty screen under the fan of logos. */
  .connect-stage { height: 560px; transform: scale(0.68); transform-origin: center; }

  .steps-intro { margin-top: 0; padding-bottom: 64px; }

  /* On a phone the original stops sliding sideways and simply stacks the
     five steps. A column is easier to read and easier to reach than a
     carousel you have to swipe five times. */
  .steps-track {
    display: grid;
    gap: 64px;
    padding: 0 var(--gutter) 40px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .step { width: auto; }
  .step article { gap: 24px; }
  .steps-status { display: none; }


  .benefits { margin-top: 64px; padding-inline: var(--gutter); gap: 32px; }
  .benefits-card, .benefits-modal { display: none; }
  .benefits-body { padding: 32px 24px; }

  .pricing { padding: 40px var(--gutter) 56px; }
  .faq { padding: 24px var(--gutter) 56px; gap: 32px; }
  .faq-item summary { padding: 16px; font-size: var(--fs-body); }
  .faq-answer { padding: 0 16px 16px; }

  .cta { margin-inline: var(--gutter); padding: 40px 20px; }

  .footer { padding: 40px var(--gutter) 20px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 480px) {
  .footer-columns { grid-template-columns: minmax(0, 1fr); }
  .chip { font-size: var(--fs-sm); }
  .step { width: 88vw; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   --------------------------------------------------------------------------
   Delays are movement spread over time, so they are zeroed as well: an
   element that appears half a second late still reads as animation. */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .js .story-visual .scene > * { opacity: 1; }
}