/* WkBot sales site - one stylesheet for every page.

   LIGHT, WITH NAVY AS THE BRAND SURFACE. The same rule the desktop client follows: its rail is navy
   in both themes and everything else is light. Here the bands that carry the brand - the nav, the
   hero and the footer - are navy (`.navy`), and the page between them is the client's own light
   grey and white. The client's screens shown on the stage use its light theme, so the site and the
   product read as one thing.

   ONE SET OF TOKENS, TWO SURFACES. :root holds the light values; `.navy` redefines the same tokens
   for a dark band. A component written against the tokens works on either without a second rule.

   Type: Chakra Petch for display (cut corners, a HUD's letters - headings and labels only), IBM Plex
   Sans for reading, Plex Mono for code and the API. Motion: slow, low-contrast, ambient - see
   site.js. */

:root {
  /* The brand scale, sampled from wk.png - the same values the client declares. */
  --navy-950: #050f24;
  --navy-900: #071634;
  --navy-800: #0a2149;
  --navy-700: #092c66;
  --navy-600: #0d3677;
  --brand: #4bb4ff;

  /* Light: the client's own light theme. */
  --bg: #f2f5fa;
  --bg-2: #ffffff;
  --bg-3: #f7f9fc;
  --bg-code: #fbfcfe;
  --line: #dce3ed;
  --line-soft: #e8edf4;
  --line-strong: #c3cede;
  --text: #0e1a2b;
  --text-2: #2e3d55;
  --dim: #56647a;
  --faint: #8793a6;
  --accent: #1662d6;
  --accent-2: #0d3677;
  --accent-soft: rgba(22, 98, 214, .08);
  --accent-line: rgba(22, 98, 214, .3);
  --glow: rgba(22, 98, 214, .35);
  --fill: rgba(13, 54, 119, .045);
  --fill-hi: rgba(13, 54, 119, .08);
  --glass: rgba(255, 255, 255, .8);
  --warn: #c87b16;
  --danger: #ce3a3a;

  /* The main action on a light surface is the rail's navy, as in the client. */
  --primary-bg: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  --primary-fg: #ffffff;
  --primary-shadow: rgba(7, 22, 52, .26);
  --primary-shadow-hi: rgba(7, 22, 52, .38);

  --shadow-sm: 0 1px 2px rgba(7, 22, 52, .05);
  --shadow-md: 0 1px 2px rgba(7, 22, 52, .04), 0 14px 34px -18px rgba(7, 22, 52, .24);
  --shadow-lg: 0 2px 4px rgba(7, 22, 52, .04), 0 40px 80px -42px rgba(7, 22, 52, .4);

  /* Lua highlighting - the client's editor palette for light. */
  --t-kw: #1e5aaa;
  --t-fn: #147868;
  --t-str: #a0502a;
  --t-num: #7846a0;
  --t-var: #be6e14;
  --t-com: #6f8a7e;

  --radius: 16px;
  --maxw: 1120px;
  --nav-h: 62px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* A navy band: the brand surface. Same tokens, dark values. */
.navy {
  --bg: var(--navy-900);
  --bg-2: var(--navy-800);
  --bg-3: #0d2858;
  --bg-code: #061230;
  --line: rgba(140, 180, 240, .16);
  --line-soft: rgba(140, 180, 240, .1);
  --line-strong: rgba(140, 180, 240, .3);
  --text: #eef4fd;
  --text-2: #c9d7ee;
  --dim: #9ab0d2;
  --faint: #6f89b0;
  --accent: var(--brand);
  --accent-2: #2b86ff;
  --accent-soft: rgba(75, 180, 255, .14);
  --accent-line: rgba(75, 180, 255, .34);
  --glow: rgba(75, 180, 255, .5);
  --fill: rgba(120, 160, 220, .08);
  --fill-hi: rgba(120, 160, 220, .14);
  --glass: rgba(10, 33, 73, .55);

  /* On navy the main action is the logo's highlight, so it lifts off the surface. */
  --primary-bg: linear-gradient(180deg, var(--brand), #2b86ff);
  --primary-fg: #04101f;
  --primary-shadow: rgba(43, 134, 255, .32);
  --primary-shadow-hi: rgba(43, 134, 255, .48);

  --t-kw: #7cc4ff;
  --t-fn: #4fd1bf;
  --t-str: #e0a47a;
  --t-num: #c39bf0;
  --t-var: #f2b45e;
  --t-com: #7f9c90;

  background-color: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* `hidden` means hidden, whatever display a class gives the element (.btn is inline-flex). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* A short page (thanks.html) still ends on the navy footer, not on a strip of grey under it. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(75, 180, 255, .28); }

.icon { width: 18px; height: 18px; flex: none; }

/* ── Brand ─────────────────────────────────────────────────────────────── */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: .02em;
}

/* The wordmark: WkBot, charged. Every few seconds the letters ease a little apart and back, and a
   light runs through them from W to t, outlining each as it passes - slow and soft, never a flash.
   One span per letter (--i is its place); --o is its distance from the middle, so the word spreads
   from its centre. Off under reduced motion, like all the site's motion. */
.wordmark { display: inline-flex; }
.wordmark i {
  --o: calc(var(--i) - 2);
  display: inline-block; font-style: normal;
  animation: wm-spread 8s ease-in-out infinite, wm-charge 8s ease-in-out infinite;
  animation-delay: 0s, calc(var(--i) * 120ms);
}
@keyframes wm-spread {
  0%, 52%, 100% { transform: translateX(0); }
  68%           { transform: translateX(calc(var(--o) * 2.4px)); }
}
@keyframes wm-charge {
  0%, 56%, 92%, 100% { text-shadow: 0 0 0 rgba(75, 180, 255, 0); color: inherit; }
  70% {
    color: #f1f9ff;
    text-shadow: 0 0 1px #9fd9ff, 0 0 7px rgba(75, 180, 255, .8), 0 0 16px rgba(43, 134, 255, .4);
  }
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(75, 180, 255, .22), 0 6px 18px rgba(43, 134, 255, .22);
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
/* Navy, like the client's rail. Clear at the top of the page, so the hero's navy and its glow run
   up behind it; a navy glass bar once the page has moved (or from the start, `.is-solid`, on a
   page with no hero under it). */
.nav-wrap {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  background-color: rgba(7, 22, 52, 0);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background-color .4s, backdrop-filter .4s;
}
.nav-wrap.is-scrolled, .nav-wrap.is-solid {
  border-bottom-color: var(--line-soft); background-color: rgba(7, 22, 52, .95);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; height: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.btn) { color: var(--dim); font-size: 15px; transition: color .2s; }
.nav-links a:not(.btn):hover { color: var(--text); }
/* API Docs is the last stop before signing in - the one link in the accent. */
.nav-links a.nav-docs { color: var(--accent); font-weight: 500; }
.nav-links a.nav-docs:hover { color: #8fd0ff; }
.nav-links a.nav-docs[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]:not(.nav-docs) { color: var(--text); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .25s, opacity .4s, filter .4s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-primary {
  background: var(--primary-bg); color: var(--primary-fg);
  box-shadow: 0 8px 26px var(--primary-shadow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px var(--primary-shadow-hi); }
.btn-ghost { background: var(--bg-2); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--line-strong); }
.navy .btn-ghost { background: var(--fill); box-shadow: none; }
.navy .btn-ghost:hover { background: var(--fill-hi); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-lg .icon { width: 20px; height: 20px; }
.btn[disabled], .btn[disabled]:hover {
  cursor: not-allowed; transform: none; box-shadow: none; opacity: .42; filter: saturate(.35);
}

/* ── Shared type ───────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .24em;
  font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 16px;
}
.accent { color: var(--accent); }
.lead { margin: 22px auto 0; max-width: 640px; font-size: clamp(16px, 2.1vw, 19px); color: var(--dim); }

.section { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section-head { text-align: center; }
.section-head h2 {
  font-family: var(--display); font-size: clamp(28px, 4vw, 42px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.005em;
}
.section-lead { color: var(--dim); margin: 14px auto 0; max-width: 620px; }

/* ── Motion primitives ─────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Hero lines arrive one after another on load. */
.js .rise { animation: rise .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }

/* Sections arrive the first time they scroll into view (site.js adds .is-in). */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* A navy band from the top of the page: it slides up under the nav (which is clear until the page
   moves), so the navy and the glow have no top edge to show. Clipped, so nothing in the field
   bleeds onto the light page below. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 104px) 24px 76px;
}
.hero > :not(.hero-field) { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Where the band meets the page: a hairline of the logo's highlight, brightest in the middle. */
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 180, 255, .45) 30%, rgba(75, 180, 255, .45) 70%, transparent);
}
.hero h1 {
  font-family: var(--display); font-size: clamp(38px, 6.4vw, 68px); line-height: 1.04;
  font-weight: 700; letter-spacing: -.012em;
}
/* The thesis' last words carry a light that drifts across them, slowly. */
.hero h1 .accent {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #b9e4ff 50%, var(--accent) 65%, var(--accent) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen { 0%, 20% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--dim); }

/* The field: a tile grid drifting like a map being panned, a glow breathing above it, and the
   odd waypoint lighting up. Masked so it fades out long before the edges. */
.hero-field {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 76% at 50% 34%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 62% 76% at 50% 34%, #000 25%, transparent 80%);
}
.hero-grid {
  position: absolute; inset: -44px;
  background-image:
    linear-gradient(rgba(120, 160, 220, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 220, .085) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: drift 36s linear infinite;
}
@keyframes drift { to { transform: translate(44px, 44px); } }
.hero-aura {
  position: absolute; left: 50%; top: -160px; width: 1000px; height: 640px;
  translate: -50% 0;
  background:
    radial-gradient(closest-side at 42% 50%, rgba(43, 134, 255, .30), transparent),
    radial-gradient(closest-side at 64% 46%, rgba(75, 200, 255, .16), transparent);
  filter: blur(8px);
  animation: breathe 16s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: translate3d(-40px, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(40px, 18px, 0) scale(1.08); opacity: 1; }
}
.hero-blips { position: absolute; inset: 0; }
.blip {
  position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 10px 1px rgba(75, 180, 255, .7);
  opacity: 0; animation: blip 6s var(--ease) infinite both;
}
.blip::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(75, 180, 255, .55);
  animation: inherit; animation-name: blip-ring;
}
@keyframes blip {
  0%   { opacity: 0; transform: scale(.4); }
  12%  { opacity: .9; transform: scale(1); }
  55%  { opacity: .35; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes blip-ring {
  0%   { opacity: 0; transform: scale(.3); }
  12%  { opacity: .8; }
  70%, 100% { opacity: 0; transform: scale(1.8); }
}

/* Ribbon: every module at a glance, one chip each. */
.ribbon {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 64px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--glass);
  color: var(--dim); font-size: 13.5px; font-weight: 500;
  transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease);
}
.chip .icon { width: 15px; height: 15px; color: var(--accent); }
.chip:hover { color: var(--text); border-color: var(--line-strong); background: rgba(13, 40, 88, .92); transform: translateY(-1px); }
.js .chip { animation: rise .7s var(--ease) both; animation-delay: calc(560ms + var(--k, 0) * 45ms); }

/* ── Modules showcase ──────────────────────────────────────────────────── */
.modules { margin-top: 104px; scroll-margin-top: 84px; }

.showcase {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px; margin-top: 52px; align-items: start;
}

/* One column, grouped like the client's own sidebar - the stage is the module's screen. */
.mod-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.mod-group {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  padding: 14px 2px 4px; font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
}
.mod-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mod-group:first-child { padding-top: 0; }

.mod {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line-soft);
  background: var(--bg-2); box-shadow: var(--shadow-sm);
  color: var(--text); font: inherit;
  transition: border-color .3s, background .3s, box-shadow .35s, transform .3s var(--ease);
}
.mod:hover { border-color: var(--line); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.mod:focus-visible { outline-offset: 2px; border-radius: 14px; }
.mod-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-soft); color: var(--dim);
  transition: color .3s, background .3s, border-color .3s, box-shadow .35s;
}
.mod-icon .icon { width: 19px; height: 19px; }
.mod-name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.mod-line { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--dim); }

/* The client's own on/off switch, in miniature: the selected module is the one switched on. */
.mod-switch {
  position: relative; width: 26px; height: 15px; border-radius: 99px;
  background: var(--line); transition: background .4s;
}
.mod-switch span {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(7, 22, 52, .2); transition: transform .45s var(--ease), background .4s;
}
.mod.is-active {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px rgba(22, 98, 214, .08), 0 16px 34px -18px rgba(13, 54, 119, .45);
}
/* The active card's icon is the client's active nav item: navy, with the logo's highlight. */
.mod.is-active .mod-icon {
  color: var(--brand); background: var(--navy-800); border-color: var(--navy-700);
  box-shadow: 0 6px 16px -6px rgba(7, 22, 52, .5);
}
.mod.is-active .mod-switch { background: var(--navy-800); }
.mod.is-active .mod-switch span { transform: translateX(11px); }

/* The tour's timer: a line filling under the active card. Its end is what moves the tour on. */
.mod-progress {
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(22, 98, 214, .15), var(--accent));
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.showcase.is-touring .mod.is-active .mod-progress {
  opacity: .85; animation: progress var(--tour, 7s) linear forwards; animation-play-state: paused;
}
.showcase.is-touring.is-visible .mod.is-active .mod-progress { animation-play-state: running; }
.showcase.is-touring.is-visible:hover .mod.is-active .mod-progress { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
/* A module with a film: the line follows the film instead (home.js), and the film's end moves on. */
.showcase.is-touring.is-demo .mod.is-active .mod-progress { animation: none; opacity: .85; }

/* The stage: a window onto the selected module. */
.stage {
  position: sticky; top: 92px; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
}
.stage::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(22, 98, 214, .35), transparent);
}
.stage-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg-3);
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
}
.stage-mark { width: 18px; height: 18px; border-radius: 50%; }
.stage-path b { color: var(--text); font-weight: 500; }
.stage-sep { color: var(--faint); margin: 0 2px; }

/* Arduino mode: a switch on the bar, and the board in the stage's corner while it is on. */
.ard-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 3px 4px 3px 10px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg-2); cursor: pointer;
  font: 500 12px var(--font); color: var(--dim); transition: border-color .25s, color .25s, background .25s;
}
.ard-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.ard-switch { position: relative; width: 26px; height: 15px; border-radius: 99px; background: var(--line); transition: background .3s; }
.ard-switch span {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(7, 22, 52, .25); transition: transform .35s var(--ease);
}
.ard-toggle[aria-checked="true"] { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }
.ard-toggle[aria-checked="true"] .ard-switch { background: var(--navy-800); }
.ard-toggle[aria-checked="true"] .ard-switch span { transform: translateX(11px); }

.stage-view { position: relative; }
.ard {
  /* Top left, over the top of the client's rail: the one corner no film uses. */
  position: absolute; left: 1.6%; top: 2.6%; z-index: 2; width: clamp(64px, 15.5%, 118px); aspect-ratio: 1;
  border-radius: 12px; overflow: hidden; pointer-events: none;
  background: radial-gradient(90% 90% at 50% 40%, #142546, #070c18);
  border: 1px solid rgba(140, 180, 240, .28);
  box-shadow: 0 16px 34px -12px rgba(7, 22, 52, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(-8px) scale(.94); transform-origin: left top;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.stage.is-arduino .ard { opacity: 1; transform: none; }
.ard video, .ard-board { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ard-pwr { fill: #ff5a4f; filter: drop-shadow(0 0 2px rgba(255, 90, 79, .9)); }
.ard-led { fill: #3a3016; transition: fill .05s; }
.ard-glow { fill: #ffd84a; opacity: 0; filter: blur(3px); transition: opacity .05s; }
.ard.is-tx .ard-tx { fill: #ffe066; }
.ard.is-tx .ard-glow-tx { opacity: .55; }
.ard.is-rx .ard-rx { fill: #ffe066; }
.ard.is-rx .ard-glow-rx { opacity: .45; }
.ard-tag {
  position: absolute; left: 7px; top: 6px; display: inline-flex; align-items: center; gap: 5px;
  font: 600 9px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(220, 232, 250, .75);
}
.ard-tag i { width: 5px; height: 5px; border-radius: 50%; background: #4bd17a; box-shadow: 0 0 6px #4bd17a; }

/* The chapters of a long film. */
.stage-chapters {
  display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft); background: var(--bg-3);
}
.stage-chapters::-webkit-scrollbar { display: none; }
.chap {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; overflow: hidden;
  padding: 4px 11px 4px 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2);
  font: 500 12.5px var(--font); color: var(--dim); cursor: pointer;
  transition: border-color .25s, color .25s, box-shadow .25s;
}
.chap:hover { color: var(--text); border-color: var(--line-strong); }
.chap b {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  font: 600 10.5px var(--font); background: var(--bg); color: var(--faint); transition: background .25s, color .25s;
}
.chap i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; opacity: .8;
}
.chap.is-done b { background: var(--accent-soft); color: var(--accent); }
.chap.is-on { color: var(--text); border-color: var(--accent-line); box-shadow: 0 6px 16px -10px rgba(13, 54, 119, .45); }
.chap.is-on b { background: var(--navy-800); color: var(--brand); }

.stage-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 45%, rgba(22, 98, 214, .06), transparent 70%), var(--bg);
  border-bottom: 1px solid var(--line-soft);
  transition: opacity .22s ease;
}
.stage-media::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13, 54, 119, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 54, 119, .05) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
          mask-image: radial-gradient(closest-side, #000, transparent);
}
.stage-media.is-out { opacity: 0; }
.stage-gif { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Until a module has its preview: its icon, with the rings the client's sign-in screen breathes. */
.stage-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.ph-ring {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s);
  translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(22, 98, 214, .2);
  animation: wave 6s ease-in-out infinite;
}
.ph-ring:nth-child(1) { --s: 128px; }
.ph-ring:nth-child(2) { --s: 212px; border-color: rgba(22, 98, 214, .13); animation-delay: 1s; }
.ph-ring:nth-child(3) { --s: 304px; border-color: rgba(22, 98, 214, .09); border-style: dashed; animation-delay: 2s; }
@keyframes wave { 0%, 100% { scale: 1; opacity: .55; } 50% { scale: 1.04; opacity: 1; } }
.ph-icon {
  position: relative; width: 78px; height: 78px; border-radius: 22px;
  display: grid; place-items: center; color: var(--brand);
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--navy-600);
  box-shadow: 0 18px 40px -14px rgba(7, 22, 52, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: float 7s ease-in-out infinite;
}
.ph-icon .icon { width: 34px; height: 34px; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

.stage-body { padding: 22px 26px 26px; transition: opacity .22s ease, transform .22s var(--ease); }
.stage-body.is-out { opacity: 0; transform: translateY(6px); }
.stage-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stage-head h3 { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.2; }
.stage-group {
  font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
  padding: 2px 9px; border: 1px solid var(--line); border-radius: 99px;
}
.stage-sub { margin-top: 2px; font-size: 15px; color: var(--dim); }
.stage-points { list-style: none; display: grid; gap: 9px; margin-top: 18px; }
.stage-points li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.stage-points li::before {
  content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px;
  border: 1.5px solid var(--accent); border-radius: 2px; transform: rotate(45deg);
}
.js .stage-points li { animation: rise .55s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms + 40ms); }
.stage-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  color: var(--accent); font-weight: 600; font-size: 14.5px;
}
.stage-link[hidden] { display: none; }
.stage-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stage-links:not(:has(a:not([hidden]))) { display: none; }
.stage-video svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.stage-video svg path { fill: currentColor; stroke: none; }
.stage-link span { transition: transform .25s var(--ease); }
.stage-link:hover span { transform: translateX(3px); }

/* The modules as plain HTML (index.html, #mod-index): what a reader without scripts gets - search
   engines, AI assistants, a browser with scripts off. With scripts on, home.js turns them into the
   showcase above and the list is not shown. */
.mod-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 28px; }
.mod-index article { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.mod-index h3 { font-family: var(--display); font-size: 18px; }
.mod-index p { font-size: 14px; color: var(--dim); }
.mod-index ul { margin: 10px 0 0 18px; font-size: 14px; color: var(--text-2); }
.js .mod-index { display: none; }

/* ── Arduino mode ──────────────────────────────────────────────────────── */
/* A navy band between the modules and the scripting: the board is WkBot's edge, so it gets the
   brand's surface. Its film plays on a stage like the modules', its steps beside it; then why it
   matters, the hardware that works, and - in amber, not to be missed - what setting a board up does
   to it. */
.ard-band {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 132px; padding: 104px 0 112px; scroll-margin-top: 40px;
}
.ard-band::before, .ard-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 180, 255, .45) 30%, rgba(75, 180, 255, .45) 70%, transparent);
}
.ard-band::before { top: 0; }
.ard-band::after { bottom: 0; }
.ard-field {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
}
.ard-aura {
  position: absolute; left: 50%; top: 80px; width: 1100px; height: 700px; translate: -50% 0;
  background:
    radial-gradient(closest-side at 38% 50%, rgba(43, 134, 255, .24), transparent),
    radial-gradient(closest-side at 66% 44%, rgba(75, 209, 122, .08), transparent);
  filter: blur(8px);
  animation: breathe 18s ease-in-out infinite alternate;
}
.ard-band .section-head h2 { font-family: var(--display); }

.ard-show {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: center;
  margin-top: 56px;
}
.ard-film {
  overflow: hidden; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--bg-2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(75, 180, 255, .08);
}
.ard-film .stage-bar { background: var(--bg-3); border-bottom-color: var(--line); }
.ard-film-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px;
  border: 1px solid var(--accent-line); border-radius: 99px; background: var(--accent-soft);
  font: 500 12px var(--font); color: var(--text);
}
.ard-film-tag i { width: 6px; height: 6px; border-radius: 50%; background: #4bd17a; box-shadow: 0 0 7px #4bd17a; }
.ard-media { border-bottom: 0; }

.ard-steps { position: relative; list-style: none; display: grid; gap: 26px; }
/* The line the three steps hang on, with a light that runs down it. */
.ard-steps::before {
  content: ""; position: absolute; left: 20px; top: 22px; bottom: 22px; width: 1px;
  background: linear-gradient(var(--accent-line), var(--line));
}
.ard-steps::after {
  content: ""; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 3px; border-radius: 2px;
  background: linear-gradient(transparent, var(--brand), transparent) no-repeat;
  background-size: 100% 22%; background-position: 0 -30%;
  animation: ard-run 6s ease-in-out infinite;
}
@keyframes ard-run { 0%, 10% { background-position: 0 -40%; } 80%, 100% { background-position: 0 140%; } }
.ard-steps li { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.ard-step-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--accent);
  background: var(--bg-2); border: 1px solid var(--accent-line);
  box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -8px rgba(43, 134, 255, .55);
}
.ard-steps h3 { margin-top: 8px; font-family: var(--display); font-size: 19px; font-weight: 700; }
.ard-steps p { margin-top: 3px; font-size: 14.5px; color: var(--dim); }

.ard-why { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.ard-why li {
  padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--fill-hi), var(--fill));
  transition: border-color .3s, transform .3s var(--ease);
}
.ard-why li:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ard-why-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.ard-why-icon .icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ard-why h3 { margin-top: 16px; font-size: 17px; font-weight: 600; }
.ard-why p { margin-top: 4px; font-size: 14.5px; color: var(--dim); }

.ard-hw { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.ard-specs { padding: 28px 28px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.ard-specs h3 { margin-top: 6px; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.2; }
.ard-specs-lead { margin-top: 8px; font-size: 14.5px; color: var(--dim); }
.ard-specs-lead strong { color: var(--text); font-weight: 600; }
.ard-boards { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.ard-boards li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--fill);
}
.ard-boards .icon { width: 18px; height: 18px; fill: none; stroke: #4bd17a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ard-boards b { font-weight: 600; font-size: 15px; }
.ard-boards span { font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }
.ard-req { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--line-soft); }
.ard-req div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.ard-req dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.ard-req dd { font-size: 14px; color: var(--text-2); }
.ard-no { display: flex; gap: 10px; margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.ard-no b { color: var(--text); font-weight: 600; }
.ard-no .icon { width: 17px; height: 17px; margin-top: 2px; fill: none; stroke: #ff8a80; stroke-width: 1.9; stroke-linecap: round; }

.ard-notes { display: grid; gap: 14px; }
.ard-note, .ard-warn { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 20px 22px; border-radius: 16px; }
.ard-note { border: 1px solid var(--line); background: var(--fill); }
.ard-note-icon, .ard-warn-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.ard-note-icon { background: var(--accent-soft); color: var(--accent); }
.ard-note-icon .icon, .ard-warn-icon .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ard-note h3, .ard-warn h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.ard-note p, .ard-warn p { margin-top: 4px; font-size: 14px; color: var(--dim); }
.ard-note a { color: var(--accent); white-space: nowrap; }
.ard-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The one thing nobody should miss: amber, a stripe down its edge, its icon pulsing softly. */
.ard-warn {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 184, 77, .55);
  background: linear-gradient(135deg, rgba(255, 170, 51, .16), rgba(255, 170, 51, .06) 60%);
  box-shadow: 0 18px 40px -24px rgba(255, 170, 51, .45);
}
.ard-warn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ffb84d; }
.ard-warn-icon { background: #ffb84d; color: #2a1800; box-shadow: 0 0 0 0 rgba(255, 184, 77, .5); animation: ard-pulse 2.6s ease-out infinite; }
@keyframes ard-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 184, 77, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 184, 77, 0); } }
.ard-warn-kicker { font: 700 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #ffc46b; margin: 0 0 6px !important; }
.ard-warn h3 { color: #fff3df; }
.ard-warn p { color: #e8d6bb; }
.ard-warn strong { color: #fff; font-weight: 600; }

.ard-try {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text);
  font: 500 14.5px var(--font); text-align: left; transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.ard-try:hover { background: var(--fill-hi); border-color: var(--brand); transform: translateY(-1px); }
.ard-try-board { position: relative; flex: none; width: 30px; height: 18px; border-radius: 3px; background: #173c7d; border: 1px solid #0e2a5c; }
.ard-try-board i { position: absolute; right: 5px; top: 4px; width: 5px; height: 3px; border-radius: 1px; background: #ffe066; box-shadow: 0 0 6px #ffd84a; animation: ard-blink 1.6s steps(1) infinite; }
@keyframes ard-blink { 0%, 12%, 30%, 42% { opacity: 1; } 6%, 24%, 36%, 100% { opacity: .15; } }
.ard-try-go { margin-left: auto; color: var(--accent); transition: transform .25s var(--ease); }
.ard-try:hover .ard-try-go { transform: translateX(3px); }

/* ── Scripting ─────────────────────────────────────────────────────────── */
.api {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center;
  margin-top: 150px;
}
.api-copy h2 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.12; }
.api-copy p:not(.eyebrow) { margin: 16px 0 28px; color: var(--dim); font-size: 16.5px; }

.code-window {
  overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-code);
  box-shadow: var(--shadow-lg);
}
.code-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg-3);
}
.code-dots { display: inline-flex; gap: 6px; }
.code-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.code-file { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.code-window pre { margin: 0; padding: 20px 22px 22px; overflow-x: auto; font: 13.5px/1.75 var(--mono); color: var(--text); }
/* A caret resting at the end of the script - it fades, it does not blink. */
.code-window code::after {
  content: ""; display: inline-block; width: 8px; height: 1.15em; margin-left: 3px;
  vertical-align: text-bottom; background: var(--accent); border-radius: 1px;
  animation: caret 1.8s ease-in-out infinite;
}
@keyframes caret { 0%, 100% { opacity: .9; } 50% { opacity: .12; } }

.t-kw  { color: var(--t-kw); font-weight: 600; }
.t-fn  { color: var(--t-fn); font-weight: 600; }
.t-str { color: var(--t-str); }
.t-num { color: var(--t-num); }
.t-var { color: var(--t-var); font-weight: 600; }
.t-com { color: var(--t-com); font-style: italic; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.pricing { margin-top: 150px; text-align: center; scroll-margin-top: 84px; }

/* As many columns as plans on sale (home.js sets --plans), centred: one plan sits in the middle. */
.plan-grid {
  display: grid; grid-template-columns: repeat(var(--plans, 3), minmax(0, 340px));
  justify-content: center; gap: 16px; margin-top: 44px;
}
.plan-card {
  position: relative; padding: 30px 24px; text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.plan-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.plan-card.is-best {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px rgba(22, 98, 214, .1), 0 24px 60px -26px rgba(13, 54, 119, .4);
}
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(100deg, var(--navy-800) 35%, #2f64c0 50%, var(--navy-800) 65%) var(--navy-800);
  background-size: 300% 100%; background-position: 100% 0;
  color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  animation: badge-sheen 7s ease-in-out infinite;
}
@keyframes badge-sheen { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.plan-name { font-family: var(--display); font-size: 21px; font-weight: 700; }
.plan-dur { color: var(--dim); font-size: 14px; margin-top: 2px; }
.plan-price { font-size: 26px; font-weight: 600; margin: 18px 0 20px; }
/* The currency code beside a price: "$13.99 USD", so a dollar sign is never read as someone's own currency. */
.plan-cur { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--dim); }
/* The amount Stripe actually charges (reais), when it differs from the one shown. */
.plan-charged { margin: -12px 0 20px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.plan-card .btn { width: 100%; }

.plan-row { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.plan-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow-sm);
  border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.plan-pill:hover { border-color: var(--line-strong); background: var(--bg-3); }
.plan-pill-price { color: var(--dim); }
.pricing-note { margin-top: 28px; font-size: 13px; color: var(--dim); }

/* ── The launch list (while nothing is on sale) ────────────────────────── */
/* The hero's note, above the eyebrow: a light that breathes, and where to go. */
.launch-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 16px 7px 12px;
  border-radius: 99px; border: 1px solid var(--accent-line); background: rgba(13, 40, 88, .65);
  font-size: 14px; font-weight: 500; color: var(--text);
  box-shadow: 0 10px 30px -14px rgba(43, 134, 255, .55);
  animation: rise .9s var(--ease) both;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.launch-pill:hover { border-color: var(--brand); background: rgba(13, 40, 88, .9); transform: translateY(-1px); }
.launch-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); animation: pill-breathe 2.4s ease-in-out infinite; }
@keyframes pill-breathe { 50% { opacity: .45; box-shadow: 0 0 3px var(--brand); } }
.launch-pill b { color: var(--accent); font-weight: 600; }
.launch-pill b span { display: inline-block; transition: transform .25s var(--ease); }
.launch-pill:hover b span { transform: translateX(3px); }

/* Under the plans: what to do while they can't be bought. */
.notify-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px; align-items: center; max-width: 920px; margin: 30px auto 0; padding: 30px 32px;
  border-radius: 20px; border: 1px solid var(--accent-line); text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, rgba(22, 98, 214, .07), transparent 55%), var(--bg-2);
  box-shadow: var(--shadow-md);
}
.notify-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.notify-copy .eyebrow { margin-bottom: 8px; }
.notify-copy h3 { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.15; }
.notify-copy p:not(.eyebrow) { margin-top: 8px; font-size: 15px; color: var(--dim); }
.notify-row { display: flex; gap: 10px; }
.notify-row .buy-input { flex: 1; min-width: 0; }
.notify-row .buy-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 98, 214, .15); }
.notify-row .btn { flex: none; }
.notify .check { margin-top: 12px; padding: 11px 14px; font-size: 13.5px; }
.notify-msg { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.notify-msg.is-ok { color: #1d8a4a; font-weight: 500; }
.notify-msg.is-bad { color: var(--danger); }
.notify.is-busy { opacity: .75; }
.notify.is-done .notify-row, .notify.is-done .check { display: none; }
.notify.is-done .notify-msg { margin-top: 0; padding: 14px 16px; border-radius: 12px; background: rgba(29, 138, 74, .08); border: 1px solid rgba(29, 138, 74, .25); }

/* The same form in the download card, smaller. */
.dl-notify { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.dl-notify-head { margin-bottom: 10px; font-size: 14px; color: var(--dim); }
.dl-notify-head b { color: var(--text); }
.notify.is-compact .buy-input { padding: 11px 14px; font-size: 15px; }

/* ── Checkout dialog: one question (which account), then Stripe ────────── */
.buy {
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--text);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible;
}
.buy::backdrop { background: rgba(7, 22, 52, .42); backdrop-filter: blur(6px); }
.buy[open] { animation: buy-in .32s var(--ease); }
.buy[open]::backdrop { animation: buy-fade .32s ease; }
@keyframes buy-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes buy-fade { from { opacity: 0; } }
.buy-card {
  position: relative; isolation: isolate; padding: 30px 28px 24px; text-align: left;
  border-radius: 22px; border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: 0 40px 90px -30px rgba(7, 22, 52, .5);
}
.buy-card .eyebrow { margin-bottom: 10px; }
.buy-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--dim);
  background: transparent; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.buy-close:hover { color: var(--text); background: var(--fill); border-color: var(--line); }
.buy-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.buy-plan {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 16px;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.buy-name { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.15; }
.buy-dur { grid-row: 2; color: var(--dim); font-size: 14px; }
.buy-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 24px; font-weight: 600; }
.buy-billed { grid-column: 1 / -1; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.buy-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.buy-input {
  width: 100%; padding: 13px 16px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-strong); outline: none;
  transition: border-color .2s, box-shadow .25s;
}
.buy-input::placeholder { color: var(--faint); }
.buy-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 98, 214, .15); }
.buy-input.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(206, 58, 58, .12); }
.buy-input[readonly] { opacity: .7; }
.buy-help { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--dim); }
.buy-error { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--danger); }
.buy-go { position: relative; width: 100%; margin-top: 20px; padding-top: 13px; padding-bottom: 13px; }
.buy-spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary-fg) 30%, transparent); border-top-color: var(--primary-fg);
  animation: buy-spin .8s linear infinite;
}
.buy-go.is-busy .buy-go-text { opacity: .6; }
.buy-go.is-busy .buy-spin { display: inline-block; }
.buy-go.is-busy, .buy-go.is-busy:hover { opacity: 1; filter: none; cursor: progress; }
@keyframes buy-spin { to { transform: rotate(360deg); } }
.buy-methods { margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-2); }
.buy-methods span { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.buy-terms { margin-top: 10px; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.buy-terms a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.buy-terms a:hover { color: var(--accent); }
.buy-new { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--dim); text-align: center; }
.buy-new a { color: var(--accent); }
.buy-new a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── After the payment (thanks.html) ───────────────────────────────────── */
.paid { padding-top: 96px; }
.paid-card { max-width: 480px; margin: 0 auto; text-align: center; padding: 38px 32px 30px; }
.paid-icon {
  position: relative; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg-3);
  transition: background .4s, border-color .4s, box-shadow .5s;
}
.paid-icon > * { grid-area: 1 / 1; }
.paid-icon svg { width: 30px; height: 30px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: none; }
.paid-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: buy-spin .9s linear infinite;
}
.paid-card[data-state="ok"] .paid-icon {
  background: var(--primary-bg); border-color: transparent;
  box-shadow: 0 12px 34px -8px var(--primary-shadow-hi);
}
.paid-card[data-state="ok"] .paid-ok { display: block; stroke: var(--primary-fg); stroke-dasharray: 24; animation: paid-tick .5s var(--ease) .1s backwards; }
@keyframes paid-tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.paid-card[data-state="bad"] .paid-icon { border-color: rgba(200, 123, 22, .45); background: rgba(200, 123, 22, .08); }
.paid-card[data-state="bad"] .paid-bad { display: block; stroke: var(--warn); }
.paid-card:is([data-state="ok"], [data-state="bad"]) .paid-spin { display: none; }
.paid-title { font-family: var(--display); font-size: clamp(26px, 4vw, 32px); font-weight: 700; line-height: 1.15; }
.paid-lead { margin-top: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.paid-facts { margin-top: 24px; text-align: left; }
.paid-next { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.paid-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
/* Navy, the band that closes the page the way the hero opens it: what WkBot is, where to go next,
   the legal pages, how to reach us - and, at the very bottom, that we are nobody's official tool. */
.footer {
  margin-top: 140px; padding: 56px 24px 0; color: var(--dim);
  border-top: 1px solid rgba(75, 180, 255, .25);
}
.footer-top, .footer-bottom { max-width: calc(var(--maxw) - 48px); margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px;
  padding-bottom: 44px;
}
.footer .brand { color: var(--text); font-size: 20px; }
.footer .brand-mark { width: 28px; height: 28px; }
.footer-about p { max-width: 380px; margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.footer-about .footer-made { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.footer-col h4 {
  margin-bottom: 4px; font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text);
}
.footer-col a { color: var(--dim); transition: color .2s, transform .25s var(--ease); }
.footer-col a:hover { color: var(--text); transform: translateX(2px); }
.footer-col span { font-size: 13.5px; color: var(--faint); }
.footer-col .footer-soon { font-size: 12.5px; }
.footer-bottom { display: grid; gap: 14px; padding: 22px 0 34px; border-top: 1px solid var(--line-soft); }
.footer-copy { font-size: 13px; color: var(--faint); }
.footer-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px;
  background: var(--fill); border: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.6; color: var(--dim);
}
.footer-note svg {
  flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--accent);
  stroke-width: 1.9; stroke-linecap: round;
}

/* The 404 page: its hero says it all, the footer follows straight on. */
.lost .cta-row { justify-content: flex-start; }
.lost::after { display: none; }
.footer.is-flush { margin-top: 0; border-top: 0; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--navy-800); border: 1px solid var(--navy-700); color: #eef4fd;
  box-shadow: 0 14px 34px -12px rgba(7, 22, 52, .5);
  padding: 12px 20px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); z-index: 50;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ══ API Docs page ══════════════════════════════════════════════════════ */
/* The inner pages open on a shorter navy band, under the nav like the home hero. */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 76px) 24px 64px;
}
.page-hero > :not(.hero-field) { max-width: calc(var(--maxw) - 48px); margin-left: auto; margin-right: auto; }
.page-hero .hero-field {
  -webkit-mask-image: radial-gradient(ellipse 55% 95% at 30% 20%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 55% 95% at 30% 20%, #000 20%, transparent 78%);
}
.page-hero .hero-aura { left: 30%; top: -200px; width: 820px; }
.page-hero h1 { font-family: var(--display); font-size: clamp(36px, 5.4vw, 56px); font-weight: 700; line-height: 1.06; }
.page-hero .lead { margin: 16px 0 0; max-width: 640px; }
.page-hero .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.page-hero .hero-meta span {
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  border: 1px solid var(--line-soft); background: var(--glass); padding: 4px 11px; border-radius: 99px;
}

.docs-layout {
  max-width: var(--maxw); margin: 56px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start;
}
.toc {
  position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 2px 6px 24px 0;
  scrollbar-width: thin; scrollbar-color: rgba(13, 54, 119, .2) transparent;
}
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-thumb { background: rgba(13, 54, 119, .2); border-radius: 3px; }
.toc-group {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); margin: 16px 0 5px;
}
.toc-group:first-child { margin-top: 0; }
.toc a {
  display: block; padding: 3px 0 3px 13px; border-left: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--dim);
  transition: color .2s, border-color .2s;
}
.toc a.is-plain { font-family: var(--font); font-size: 14px; }
.toc a:hover { color: var(--text); }
.toc a.is-current { color: var(--accent); border-left-color: var(--accent); }

.doc { min-width: 0; }
.doc-section { margin-bottom: 64px; scroll-margin-top: 90px; }
.doc-section > h2 {
  font-family: var(--display); font-size: 27px; font-weight: 700;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.doc-section > h2 small { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--dim); margin-left: 10px; letter-spacing: 0; }
.doc p, .doc li { color: var(--text-2); font-size: 15.5px; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 12px; }
.doc ul { padding-left: 20px; display: grid; gap: 6px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc :not(pre) > code {
  font-family: var(--mono); font-size: .86em; color: var(--text);
  background: var(--fill); border: 1px solid var(--line-soft); padding: 1px 6px; border-radius: 6px;
  white-space: nowrap;
}
.doc pre {
  margin-top: 14px; overflow-x: auto; padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-code); font: 13.5px/1.7 var(--mono);
}

.fn { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.fn:first-of-type { padding-top: 6px; }
.fn:last-child { border-bottom: 0; }
.fn h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--dim); }
.fn h3 .fn-name { color: var(--accent); }
.fn h3 .anchor { font-family: var(--font); font-size: 15px; color: var(--faint); opacity: 0; transition: opacity .2s; }
.fn:hover h3 .anchor, .fn h3 .anchor:focus-visible { opacity: 1; }
.doc .fn-sum { margin-top: 6px; font-size: 16.5px; color: var(--text); }

.params { width: 100%; border-collapse: collapse; margin: 18px 0 4px; font-size: 14.5px; }
.params th {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line-strong);
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.doc .params code { white-space: normal; }
.params th:nth-child(1) { width: 26%; }
.params th:nth-child(2) { width: 20%; }
.params td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.params td:first-child { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.params td:nth-child(2) { font-family: var(--mono); font-size: 13px; color: var(--t-var); white-space: nowrap; }
.opt { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--faint); font-style: italic; }
.doc .returns { margin-top: 14px; }
.returns-label {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-right: 8px;
}
.doc .callout {
  margin-top: 16px; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}

/* ══ Legal pages: the same layout as the API Docs, with tabs between the three documents ═ */
.legal-tabs {
  display: flex; gap: 6px; width: calc(100% - 48px); max-width: calc(var(--maxw) - 48px); margin: 34px auto 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-tabs a {
  flex: none; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-weight: 600; font-size: 14.5px; color: var(--dim); transition: color .2s, border-color .2s;
}
.legal-tabs a:hover { color: var(--text); }
.legal-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.docs-layout.legal { margin-top: 40px; }
.legal .doc-section { margin-bottom: 44px; }
.legal .doc-section > h2 { font-size: 23px; }
.legal .doc a { color: var(--accent); }
.legal .doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal .doc ul { gap: 8px; }

/* ══ Download page ══════════════════════════════════════════════════════ */
.dl { margin-top: 48px; }
.dl-grid {
  display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 64px; align-items: start;
}

/* The card. Its one motion is a light that travels the border, slowly - a full lap in 14 s. */
@property --lap { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dl-card {
  position: relative; isolation: isolate; padding: 30px;
  border-radius: 22px; border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
}
.dl-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lap), transparent 0deg 250deg, rgba(22, 98, 214, .7) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lap 14s linear infinite;
}
@keyframes lap { to { --lap: 360deg; } }
.dl-head { display: flex; align-items: center; gap: 16px; }
.dl-logo {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(13, 54, 119, .15), 0 10px 26px -8px rgba(7, 22, 52, .45);
}
.dl-head h2 { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.15; }
.dl-version { margin-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.dl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 22px; }
.dl-tags li {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
  padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-3);
}

/* Terms: a real checkbox, drawn. The tick draws itself in when it is checked. */
.check {
  position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-3);
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
  transition: border-color .3s, background .3s;
}
.check:hover { border-color: var(--line-strong); }
.check:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: var(--bg-2);
  transition: background .3s, border-color .3s, box-shadow .35s;
}
.check-box svg {
  width: 14px; height: 14px; fill: none; stroke: var(--primary-fg); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--ease) .05s;
}
.check input:checked + .check-box {
  background: var(--primary-bg); border-color: transparent;
  box-shadow: 0 4px 12px -2px var(--primary-shadow);
}
.check input:checked + .check-box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check a { color: var(--accent); }
.check a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dl-btn { width: 100%; margin-top: 16px; }
.dl-hint { margin-top: 10px; text-align: center; font-size: 13px; color: var(--faint); transition: color .3s; }
.dl-hint.is-ok { color: var(--dim); }

.dl-facts { margin-top: 24px; border-top: 1px solid var(--line-soft); }
.dl-facts div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.dl-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-facts dt {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.dl-facts dd { font-size: 14px; color: var(--text-2); }
.dl-facts a { color: var(--accent); }
.dl-sha { color: var(--dim) !important; }
.dl-sha.is-hash { font-family: var(--mono); font-size: 12px !important; word-break: break-all; color: var(--text-2) !important; }

/* Before you install. */
.notices { padding-top: 6px; }
.notices h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 32px); font-weight: 700; line-height: 1.1; }
.notice-list { list-style: none; margin-top: 18px; }
.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.notice:last-child { border-bottom: 0; }
.notice-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.notice-icon .icon { width: 20px; height: 20px; }
.notice h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.notice p { margin-top: 3px; font-size: 14.5px; color: var(--dim); }
.notice a, .faq-item a, .faq-foot a { color: var(--accent); }

/* Requirements. */
.req { margin-top: 140px; }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.spec {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 22px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-sm);
}
.spec-label {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.spec-value { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25; margin-top: 4px; }
.spec-note { font-size: 13px; color: var(--dim); }

.sub-head {
  display: flex; align-items: center; gap: 14px; margin: 48px 0 16px;
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint);
}
.sub-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.runtime-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.runtime {
  display: flex; flex-direction: column; padding: 22px;
  border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg-2); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.runtime:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.runtime.is-optional { border-style: dashed; border-color: var(--line-strong); background: transparent; box-shadow: none; }
.runtime-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.runtime-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.runtime.is-optional .runtime-icon { color: var(--dim); background: var(--fill); border-color: var(--line); }
.tag {
  font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
}
.tag-req { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.tag-rec { color: var(--dim); border: 1px solid var(--line-strong); }
.runtime h4 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.runtime-ver { margin-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.runtime.is-optional .runtime-ver { color: var(--dim); }
.runtime p:not(.runtime-ver) { margin: 12px 0 18px; font-size: 14px; color: var(--dim); }
.runtime-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.runtime-link .icon { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.runtime-link:hover .icon { transform: translate(2px, -2px); }

/* Install steps, joined by a line a soft light runs along now and then. */
.steps { margin-top: 140px; }
.step-list {
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 48px;
}
.step-list::before, .step-list::after {
  content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 1px; pointer-events: none;
}
.step-list::before { background: linear-gradient(90deg, var(--accent-line), var(--line)); }
.step-list::after {
  background: linear-gradient(90deg, transparent, rgba(22, 98, 214, .8), transparent);
  background-size: 18% 100%; background-repeat: no-repeat; background-position: -20% 0;
  animation: travel 9s ease-in-out infinite;
}
@keyframes travel { 0%, 15% { background-position: -30% 0; } 75%, 100% { background-position: 130% 0; } }
.step { position: relative; }
.step-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--accent);
  background: var(--bg-2); border: 1px solid var(--accent-line);
  box-shadow: 0 0 0 6px var(--bg), 0 8px 20px -8px rgba(22, 98, 214, .45);
}
.step h3 { margin-top: 18px; font-size: 17px; font-weight: 600; }
.step p { margin-top: 4px; font-size: 14.5px; color: var(--dim); }

/* FAQ */
.faq { margin-top: 140px; }
.faq-list { max-width: 820px; margin: 44px auto 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 4px; font-size: 16px; font-weight: 600; transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-mark {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--bg-2); transition: transform .35s var(--ease), border-color .3s, background .3s;
}
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 1px;
  background: var(--accent); translate: -50% -50%;
}
.faq-mark::after { rotate: 90deg; }
.faq-item[open] .faq-mark { transform: rotate(45deg); border-color: var(--accent-line); background: var(--accent-soft); }
.faq-item p { padding: 0 48px 22px 4px; font-size: 15px; color: var(--dim); }
.faq-item[open] p { animation: rise .45s var(--ease) both; }
.faq-foot { margin-top: 28px; text-align: center; color: var(--dim); font-size: 15px; }

@media (max-width: 1060px) {
  .dl-grid { gap: 44px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .spec-grid, .runtime-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dl-grid { grid-template-columns: 1fr; gap: 56px; }
  .dl-card { max-width: 520px; }
  .step-list { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .step-list::before, .step-list::after { display: none; }
}
@media (max-width: 620px) {
  .dl { margin-top: 36px; }
  .dl-card { padding: 22px; }
  .req, .steps, .faq { margin-top: 104px; }
  .runtime-grid, .step-list { grid-template-columns: 1fr; }
  .faq-item p { padding-right: 4px; }
}
@media (max-width: 440px) {
  .spec-grid { grid-template-columns: 1fr; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .showcase { grid-template-columns: 290px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .api { grid-template-columns: 1fr; gap: 36px; }
  .ard-show { grid-template-columns: 1fr; gap: 40px; }
  .ard-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ard-steps::before, .ard-steps::after { display: none; }
  .ard-steps li { grid-template-columns: 1fr; gap: 6px; }
  .ard-hw { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ard-why { grid-template-columns: 1fr; }
  .ard-steps { grid-template-columns: 1fr; }
  .ard-steps li { grid-template-columns: 42px 1fr; gap: 14px; }
}

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 18px; }
  .stage { position: relative; top: 0; }
  /* The cards become one sideways strip above the stage. */
  .mod-list {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -24px; padding: 2px 24px 10px; scrollbar-width: none;
  }
  .mod-list::-webkit-scrollbar { display: none; }
  .mod-group, .mod-line, .mod-switch { display: none; }
  .mod { flex: none; grid-template-columns: auto auto; gap: 9px; padding: 9px 14px 9px 10px; scroll-snap-align: center; border-radius: 999px; }
  .mod:hover { transform: none; }
  .mod-icon { width: 28px; height: 28px; border-radius: 50%; }
  .mod-icon .icon { width: 16px; height: 16px; }
  .mod-name { font-size: 14px; white-space: nowrap; }
  .mod-progress { left: 18px; right: 18px; }

  .docs-layout { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .toc {
    position: static; max-height: none; overflow: visible; padding: 18px 20px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
    columns: 2; column-gap: 24px;
  }
  .toc-group { break-after: avoid; }
  .toc a { break-inside: avoid; }
}

@media (max-width: 620px) {
  :root { --nav-h: 58px; }
  .nav { padding: 0 16px; }
  .nav-links { gap: 16px; }
  .nav-links a:not(.btn):not(.nav-docs) { display: none; }
  .section, .hero, .page-hero, .docs-layout, .footer { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 56px; }
  .ribbon { display: none; }
  .mod-list { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .stage-body { padding: 18px 18px 20px; }
  .modules { margin-top: 76px; }
  .api, .pricing { margin-top: 110px; }
  .notify-card { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .notify-row { flex-direction: column; }
  .launch-pill { font-size: 13px; }
  .ard-band { margin-top: 96px; padding: 76px 0 84px; }
  .ard-specs { padding: 22px 18px; }
  .ard-boards li { grid-template-columns: auto 1fr; }
  .ard-boards span { grid-column: 2; text-align: left; }
  .ard-req div { grid-template-columns: 1fr; gap: 2px; }
  .ard-note, .ard-warn { padding: 18px; gap: 12px; }
  .plan-grid { grid-template-columns: 1fr; }
  /* On a phone the contents are a block of chips, not a column as long as the screen. */
  .toc { columns: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
  .toc-group { display: none; }
  .toc a {
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px;
    font-size: 12px; background: var(--bg-3);
  }
  .toc a.is-plain { font-size: 12.5px; }
  .toc a.is-current { border-color: var(--accent-line); }
  .params th, .params td { padding-left: 8px; padding-right: 8px; }
  .params td:nth-child(2) { white-space: normal; }
  .footer { padding-top: 44px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .legal-tabs { width: calc(100% - 32px); margin-top: 24px; }
  .legal-tabs a { padding: 10px 10px; font-size: 13.5px; }
}

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