/* ==========================================================================
   POM - Piece of Mind
   Layout language borrowed from gabrielrocco.io/projetos/rubio (measured with
   computed styles): floating dark panel, huge tight two-colour title, numbered
   monospaced section labels, very round cards, pill buttons.
   Palette derived from the logo (assets/pom_logo_white.png): a single gradient
   that runs navy #134598 -> teal #14b8ae, left to right through the mark.
   ========================================================================== */

/* ------------------------------- tokens ---------------------------------- */
:root {
  color-scheme: light;

  /* brand, sampled from the logo */
  --blue:        #123f8f;   /* navy at the start of the logo gradient */
  --blue-bright: #4f9bff;
  --cyan:        #0d7297;   /* mid gradient, darkened for AA on off-white */
  --cyan-bright: #35c9f0;
  --teal:        #0b8279;   /* teal at the end of the gradient */
  --teal-bright: #2fdcc8;

  /* page */
  --bg:        #f8f6f7;
  --bg-2:      #fffefb;
  --ink:       #18151b;
  --ink-2:     #4a4551;
  --ink-3:     #6d6775;
  --line:      rgba(24, 21, 27, .12);
  --line-soft: rgba(24, 21, 27, .07);
  --card:      rgba(255, 255, 255, .78);
  --card-solid:#ffffff;
  --shadow:    0 18px 58px rgba(6, 30, 62, .10);
  --shadow-hi: 0 26px 72px rgba(6, 30, 62, .17);
  --shadow-lg: 0 45px 120px rgba(6, 30, 62, .22);

  --accent:      var(--blue);
  --accent-soft: rgba(18, 63, 143, .10);

  /* the floating dark panel: identical in both themes */
  --panel:       #080f18;
  --panel-2:     #0d1a2a;
  --panel-ink:   #ffffff;
  --panel-ink-2: rgba(255, 255, 255, .66);
  --panel-ink-3: rgba(255, 255, 255, .56);
  --panel-line:  rgba(255, 255, 255, .13);
  --panel-fill:  rgba(255, 255, 255, .055);

  /* cake animation: it sits on the hero panel, which is dark in both themes,
     so these are fixed and never redefined by the dark palette */
  --cake-line: rgba(255, 255, 255, .22);
  --cake-ink: #ffffff;
  --cake-muted: rgba(255, 255, 255, .7);
  --cake-accent: #6fd6f3;
  --cake-chat: rgba(255, 255, 255, .06);
  --cake-question: #2a64d6;
  --cake-answer: rgba(79, 155, 255, .16);
  --cake-answer-line: rgba(255, 255, 255, .14);
  --cake-screen: #3a4959;
  --cake-screen-inner: #0d1520;
  --cake-track: rgba(255, 255, 255, .18);
  --cake-on-accent: #04182b;
  --cake-plate: #2b3947;
  --cake-plate-highlight: #3b4b5b;
  --cake-frosting: #f3e7cf;
  --cake-frosting-detail: #b08a5a;
  --cake-knife: #cbd9e3;
  --cake-knife-edge: #a9bcca;
  --cake-packet-core: #eafbf9;
  --cake-network-card: rgba(255, 255, 255, .06);

  --shell: 1180px;
  --pad: clamp(18px, 4vw, 34px);
  --r-card: 26px;
  --r-big: 34px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark palette. Declared twice on purpose: once behind the system preference
   (unless the reader forced light) and once behind the explicit toggle, so the
   toggle wins in both directions without JavaScript writing any colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --blue:        #4f9bff;
    --cyan:        #35c9f0;
    --teal:        #2fdcc8;

    --bg:        #0b0a0f;
    --bg-2:      #131119;
    --ink:       #f4f2f7;
    --ink-2:     #b6b1bf;
    --ink-3:     #8f8a99;
    --line:      rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --card:      rgba(255, 255, 255, .045);
    --card-solid:#16141d;
    --shadow:    0 18px 58px rgba(0, 0, 0, .5);
    --shadow-hi: 0 26px 72px rgba(0, 0, 0, .62);
    --shadow-lg: 0 45px 120px rgba(0, 0, 0, .65);

    --accent:      var(--blue);
    --accent-soft: rgba(79, 155, 255, .14);

    --panel:   #0b1421;
    --panel-2: #102338;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --blue:        #4f9bff;
  --cyan:        #35c9f0;
  --teal:        #2fdcc8;

  --bg:        #0b0a0f;
  --bg-2:      #131119;
  --ink:       #f4f2f7;
  --ink-2:     #b6b1bf;
  --ink-3:     #8f8a99;
  --line:      rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .08);
  --card:      rgba(255, 255, 255, .045);
  --card-solid:#16141d;
  --shadow:    0 18px 58px rgba(0, 0, 0, .5);
  --shadow-hi: 0 26px 72px rgba(0, 0, 0, .62);
  --shadow-lg: 0 45px 120px rgba(0, 0, 0, .65);

  --accent:      var(--blue);
  --accent-soft: rgba(79, 155, 255, .14);

  --panel:   #0b1421;
  --panel-2: #102338;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.015em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

code, .mono, pre { font-family: var(--mono); }

code {
  font-size: .88em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: .12em .4em;
  border-radius: 6px;
  word-break: break-word;
}

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

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 999px;
  font: 700 13px/1 var(--sans); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* -------------------------------- topbar --------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 12px var(--pad);
  display: flex; align-items: center; gap: 18px;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex: 0 0 auto;
}
.brand .lockup { height: 26px; width: auto; }
.brand-sub {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--ink-3);
  border-left: 1px solid var(--line); padding-left: 11px; line-height: 1;
}

/* The lockup ships as two files - the gradient one for light grounds, the white
   one for dark grounds - and the swap is pure CSS, so the toggle wins in both
   directions and the page is still right with JavaScript off. Stacked in the
   same grid cell so neither reserves layout width when hidden. */
.mark-pair { display: grid; }
.mark-pair > .lockup { grid-area: 1 / 1; }
.lockup-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup-light { display: none; }
  :root:not([data-theme="light"]) .lockup-dark  { display: block; }
}
:root[data-theme="dark"] .lockup-light { display: none; }
:root[data-theme="dark"] .lockup-dark  { display: block; }

.nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
  min-width: 0;
}
.nav a {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-3);
  text-decoration: none; padding: 8px 10px; border-radius: 999px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--ink); background: var(--accent-soft); }

/* The language switch itself is styled in i18n.css, shared with the holding
   page; only where it sits belongs here. */
.footer-langs { margin-left: auto; }
.footer-langs + .footer-links { margin-left: 0; }
.nav a[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }

.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  flex: 0 0 auto;
}

.topbar-cta {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  color: #ffffff; text-decoration: none;
  background: linear-gradient(96deg, var(--blue), var(--teal));
  border-radius: 999px; padding: 9px 15px;
  transition: filter .15s ease, transform .15s ease;
}
.topbar-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav + .topbar-cta { margin-left: 6px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .topbar-cta { margin-left: auto; }
}
@media (max-width: 600px) {
  .topbar-cta { display: none; }
}

/* ------------------------------ typography ------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.tick {
  display: inline-block; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  flex: 0 0 auto;
}
.eyebrow-hero { color: var(--panel-ink-3); }

.h2 {
  font-size: clamp(30px, 5vw, 45px);
  font-weight: 900;
  letter-spacing: -.067em;
  word-spacing: .12em;
  line-height: .96;
  margin: 0 0 20px;
  max-width: 20ch;
}
.h3 {
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.14;
  margin: 0 0 10px;
}
.lede {
  font-size: 17px; color: var(--ink-2);
  max-width: 62ch; margin: 0 0 42px;
}
.lede strong { color: var(--ink); font-weight: 700; }

.section { padding: clamp(64px, 9vw, 112px) 0 0; }
.h2 + .grid { margin-top: 34px; }
.section:last-of-type { padding-bottom: clamp(64px, 9vw, 112px); }

/* --------------------------------- hero ---------------------------------- */
.hero-wrap { padding-top: clamp(20px, 4vw, 40px); }

.hero {
  position: relative;
  isolation: isolate;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-lg);
  padding: clamp(34px, 5.5vw, 76px) clamp(22px, 5vw, 72px) clamp(30px, 4vw, 52px);
  color: var(--panel-ink);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(52% 60% at 50% 8%, rgba(79, 155, 255, .30), transparent 68%),
    radial-gradient(44% 52% at 82% 40%, rgba(47, 220, 200, .22), transparent 70%),
    radial-gradient(38% 48% at 12% 62%, rgba(53, 201, 240, .14), transparent 72%);
  z-index: -1; pointer-events: none;
}

.hero-sub {
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  color: var(--panel-ink-2);
  max-width: 60ch;
  margin: 0 0 32px;
}
.hero-sub strong { color: var(--panel-ink); font-weight: 700; }
.hero-sub code {
  background: var(--panel-fill);
  color: var(--cyan-bright);
}

/* buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-solid { background: #ffffff; color: #14121a; }
.btn-solid:hover { background: #e8e6ef; }

.btn-ghost {
  background: var(--panel-fill);
  color: var(--panel-ink);
  border-color: var(--panel-line);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }

.btn-outline {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-outline[aria-disabled="true"] { color: var(--ink-3); }

.btn-lg { padding: 16px 32px; font-size: 15.5px; }

.btn-accent {
  background: linear-gradient(96deg, var(--blue), var(--teal));
  color: #ffffff;
}
.btn-accent:hover { filter: brightness(1.08); }

.hero-note {
  margin: -22px 0 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel-ink-3);
}

/* --------------------------------- cards --------------------------------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid > * { min-width: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 38px);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card p { color: var(--ink-2); margin: 0; font-size: 15.5px; }
.card p + p { margin-top: 12px; }

.card-accent {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: linear-gradient(180deg, var(--accent-soft), var(--card));
}

.stepnum {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; color: var(--accent);
  margin: 0 0 12px !important;
}
.step-grid { margin-top: 22px; }

/* --------------------------- cake animation ----------------------------- */
/* The scene sits straight on the hero panel, with no ground of its own, and
   picks its own layout from the stage width (cake-animation.js): a wide one,
   and a portrait one capped so it never towers. */
.cake-animation { margin: 6px 0 30px; }
.cake-bar {
  display: flex; justify-content: flex-end;
  margin-bottom: 4px;
}
.cake-toggle {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel-ink-2);
  background: var(--panel-fill);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cake-toggle:hover { color: var(--panel-ink); border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.cake-toggle:focus-visible { outline-color: var(--cyan-bright); }
.cake-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
.cake-icon { width: 11px; height: 11px; fill: currentColor; flex: 0 0 auto; }
.cake-when-paused,
.cake-when-ended,
.cake-animation.is-paused .cake-when-playing,
.cake-animation.is-ended .cake-when-playing { display: none !important; }
.cake-animation.is-paused .cake-when-paused,
.cake-animation.is-ended .cake-when-ended { display: inline-flex !important; }
.cake-animation:not(.is-ready) .cake-bar { display: none; }

.cake-stage { margin: 0; }
.cake-scene {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.cake-scene[data-layout="narrow"] { max-width: 480px; }
.cake-animation:not(.is-ready) .cake-scene { display: none; }
.cake-fallback {
  padding: 22px;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--panel-ink-2);
}
.cake-fallback p {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 15px;
}
.cake-animation.is-ready .cake-fallback { display: none; }
/* ------------------------------ code blocks ------------------------------ */
.code-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.code-card {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-big);
  box-shadow: var(--shadow);
  padding: 24px 0 8px;
  overflow: hidden;
}
.code-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; color: var(--panel-ink-3);
  margin: 0 26px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--panel-line);
}
.code {
  margin: 0; padding: 0 26px 22px;
  overflow-x: auto;
  font-size: 12.5px; line-height: 1.8;
  color: var(--panel-ink-2);
  -webkit-overflow-scrolling: touch;
}
.code code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }
.c-k { color: var(--teal-bright); }
.c-s { color: var(--cyan-bright); }
.c-n { color: var(--blue-bright); }
.c-c { color: rgba(255, 255, 255, .56); font-style: italic; }

/* -------------------------------- tagline -------------------------------- */
/* The one line the page stands on, set in the hero title's voice. */
.tagline-wrap { padding: clamp(64px, 9vw, 112px) 0 0; }
.tagline {
  margin: 0 auto;
  max-width: 22em;
  text-align: center;
  font-size: clamp(32px, 5.6vw, 64px);
  font-weight: 900;
  letter-spacing: -.07em;
  word-spacing: .12em;
  line-height: 1;
  text-wrap: balance;
}
.tagline-a, .tagline-b { display: block; }
.tagline-a { color: var(--ink); }
.tagline-b {
  margin-top: .12em;
  background: linear-gradient(96deg, var(--blue) 0%, var(--cyan) 48%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tagline-b { color: var(--accent); background: none; }
}

/* --------------------------------- steps --------------------------------- */
/* A numbered path, however many steps it takes, joined by one brand rule. */
.steps {
  list-style: none; margin: 0; padding: 0;
  max-width: 820px;
  display: grid; gap: 14px;
  position: relative;
}
.steps::before {
  content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--teal));
  opacity: .5;
}
/* The number straddles the card's left edge, centred on the rule. */
.steps { padding-left: 26px; }
.step {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 22px 26px 22px 0;
}
.step-num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  margin-left: -27px;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #ffffff;
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--bg);
}
.step .h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* -------------------------------- networks ------------------------------- */
.plan-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); margin: 0 0 12px !important;
}
.net-card { display: flex; flex-direction: column; }
.net-best {
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px !important;
  color: var(--ink-3) !important;
}
.net-card .h3 + p { margin-bottom: 16px; }

.example {
  margin-top: 22px;
  display: grid; gap: clamp(22px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  background: var(--panel);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-big);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 48px);
  position: relative; isolation: isolate; overflow: hidden;
}
.example::before {
  content: ""; position: absolute; inset: -30% -10% auto 30%; height: 150%;
  background: radial-gradient(45% 55% at 60% 40%, rgba(47, 220, 200, .18), transparent 70%);
  z-index: -1; pointer-events: none;
}
.example .plan-tag { color: var(--cyan-bright); font-size: 10px; }
.example-copy p { color: var(--panel-ink-2); font-size: 15.5px; margin: 0; }
.model-chips {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.model-chips li {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  background: var(--panel-fill);
  border-radius: 999px; padding: 6px 12px;
}
.example-art { margin: 0; }
.ex-model {
  display: grid; gap: 10px; margin-bottom: 18px;
}
.ex-model-name {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--panel-ink-3);
}
.ex-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ex-bar i { height: 16px; border-radius: 5px; }
.ex-bar i:nth-child(1) { background: var(--blue-bright); }
.ex-bar i:nth-child(2) { background: #42b2f7; }
.ex-bar i:nth-child(3) { background: var(--cyan-bright); }
.ex-bar i:nth-child(4) { background: var(--teal-bright); }
.ex-pcs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  position: relative;
}
.ex-pcs::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 34px;
  border-top: 2px dashed rgba(255, 255, 255, .22);
  z-index: 0;
}
.ex-pcs li {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 4px; text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  padding: 14px 6px 12px;
  min-width: 0;
}
.ex-pcs strong { font-size: 13px; color: var(--panel-ink); letter-spacing: -.01em; }
.ex-vram { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--cyan-bright); }
.ex-city {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  color: var(--panel-ink-3);
  overflow-wrap: anywhere;
}
/* a home graphics card, drawn plainly: a board with two fans */
.ex-gpu {
  width: 46px; height: 24px; border-radius: 5px;
  background:
    radial-gradient(circle at 30% 50%, var(--panel) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 50%, var(--panel) 0 5px, transparent 6px),
    #3a4959;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  margin-bottom: 6px;
}
.ex-pcs li:nth-child(1) .ex-gpu { border-bottom: 3px solid var(--blue-bright); }
.ex-pcs li:nth-child(2) .ex-gpu { border-bottom: 3px solid #42b2f7; }
.ex-pcs li:nth-child(3) .ex-gpu { border-bottom: 3px solid var(--cyan-bright); }
.ex-pcs li:nth-child(4) .ex-gpu { border-bottom: 3px solid var(--teal-bright); }
.example-art figcaption {
  margin-top: 14px; font-size: 13px; color: var(--panel-ink-3); text-align: center;
}
@media (max-width: 860px) {
  .example { grid-template-columns: minmax(0, 1fr); }
}
/* the worked sum: the line that does not fit, then the one that does */
.math { display: grid; gap: 8px; margin: 20px 0; }
.math-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 !important;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--panel-line);
  background: var(--panel-fill);
  font-size: 14px !important;
}
.math-eq { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--panel-ink); }
.math-no { color: #ff9b9b !important; }
.math-no .math-eq { text-decoration: line-through; text-decoration-color: rgba(255, 155, 155, .7); }
.math-yes { color: var(--teal-bright) !important; border-color: rgba(47, 220, 200, .4); }
.example-note { font-size: 14px !important; }
.example-note strong { color: var(--panel-ink); }

/* comparison table: wide content scrolls inside its own frame */
.table-scroll {
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-big);
  background: var(--card);
  box-shadow: var(--shadow);
}
.table-scroll:focus-visible { outline-offset: -2px; }
.cmp { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14px; }
.cmp-cap {
  margin: 34px 0 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.cmp th, .cmp td {
  padding: 14px 22px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
}
.cmp thead th {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: -.02em; }
.cmp td { color: var(--ink-2); }
.cmp td:nth-child(2), .cmp td:nth-child(3), .cmp td:last-child { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.cmp td:last-child { color: var(--accent); font-weight: 700; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.table-note { margin-top: 12px; font-size: 13px; }

@media (max-width: 480px) {
  .ex-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-pcs::before { display: none; }
}

/* ---------------------------- for developers ----------------------------- */
.dev { margin-top: 26px; }
.dev > summary {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 18px;
  transition: border-color .15s ease, background .15s ease;
}
.dev > summary::-webkit-details-marker { display: none; }
.dev > summary::before {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: -45deg; transition: rotate .15s ease;
}
.dev[open] > summary::before { rotate: 45deg; }
.dev > summary:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------ screenshots and videos ------------------------- */
/* Placeholders until the real captures exist: the frame keeps the shape the
   image will have, so swapping one in changes nothing around it. */
.shot { margin: 0; padding: 14px 14px clamp(22px, 3vw, 28px); }
.shot figcaption { padding: 18px 10px 0; }
.shot-frame, .video-frame {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  overflow: hidden;
}
.shot-frame {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
}
.shot-dots {
  position: absolute; top: 12px; left: 14px;
  display: flex; gap: 6px;
}
.shot-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.shot-soon {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; color: var(--panel-ink-3);
  border: 1px dashed var(--panel-line);
  border-radius: 999px;
  padding: 7px 14px;
}
/* six videos: three by two, then two by three, then one column; never an orphan */
.videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .videos { grid-template-columns: minmax(0, 1fr); } }
.video { padding: 14px 14px clamp(22px, 3vw, 28px); }
.video .stepnum, .video .h3 { padding-inline: 10px; }
.video .stepnum { margin-top: 18px !important; }
.video-frame {
  aspect-ratio: 16 / 9;
  flex-direction: column; gap: 16px;
  margin: 0;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(79, 155, 255, .28), transparent 70%),
    radial-gradient(50% 70% at 80% 80%, rgba(47, 220, 200, .2), transparent 70%),
    var(--panel);
  border: 1px solid var(--line);
}
.video-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
}
.video-play svg { width: 20px; height: 20px; fill: #ffffff; margin-left: 3px; }

/* ------------------------------- downloads ------------------------------- */
/* The download is the page's main call to action, so it gets the same dark
   floating panel as the hero. */
.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-lg);
  padding: clamp(34px, 5vw, 64px) clamp(22px, 5vw, 64px);
  color: var(--panel-ink);
}
.cta-panel::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%; height: 140%;
  background:
    radial-gradient(46% 60% at 20% 10%, rgba(79, 155, 255, .26), transparent 70%),
    radial-gradient(40% 50% at 86% 30%, rgba(47, 220, 200, .2), transparent 70%);
  z-index: -1; pointer-events: none;
}
.cta-panel .lede { color: var(--panel-ink-2); }
.cta-panel .card {
  background: var(--panel-fill);
  border-color: var(--panel-line);
  box-shadow: none;
}
.cta-panel .card:hover { border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.cta-panel .card p { color: var(--panel-ink-2); }
.cta-panel .dl-icon { background: rgba(255, 255, 255, .08); color: var(--cyan-bright); }
.cta-panel .dl-file { color: var(--panel-ink) !important; }
.cta-panel .dl-meta { color: var(--panel-ink-3) !important; }
.cta-panel .dl-card .btn { width: 100%; margin-top: auto; }
.cta-panel .dl-meta { margin-bottom: 22px !important; }
.cta-panel .fineprint { color: var(--panel-ink-3); }
.cta-panel .fineprint a { color: var(--cyan-bright); }
.cta-panel :focus-visible { outline-color: var(--cyan-bright); }

.dl-card { display: flex; flex-direction: column; align-items: flex-start; }
.dl-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 18px;
}
.dl-file {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink) !important;
  word-break: break-all;
}
.dl-meta { font-size: 13px !important; color: var(--ink-3) !important; margin-top: 4px !important; }
.dl-card .btn { margin-top: 20px; }

.fineprint {
  margin: 26px 0 0;
  font-size: 14px; color: var(--ink-3);
}
.fineprint a code { background: none; padding: 0; }
.fineprint a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------- enterprise ------------------------------ */
.soon-tag {
  margin-left: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: .16em;
}
.ent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 18px;
}
.ent-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ent-cta { margin: 30px 0 0; }
.btn[aria-disabled="true"] { cursor: default; }

/* ------------------------------ closing CTA ------------------------------ */
.final-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-big);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--card);
  box-shadow: var(--shadow);
}
.final-cta .h2 { margin: 0; max-width: 18ch; }
.final-cta .btn-solid { background: var(--ink); color: var(--bg); }
.final-cta .btn-solid:hover { background: var(--accent); color: #ffffff; }

/* --------------------------------- footer -------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(38px, 5vw, 56px) 0 clamp(30px, 4vw, 44px);
  background: var(--bg-2);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px 40px;
}
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand .lockup { height: 34px; width: auto; }
.footer-tag {
  margin: 0; font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .2em; color: var(--ink-3);
  border-left: 1px solid var(--line); padding-left: 13px; line-height: 1;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.footer-links a {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2);
  text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.footer-links a:hover { border-color: var(--accent); color: var(--accent); }
.footer-note.company-legal { font-size: 12px; line-height: 1.6; }
.footer-note {
  flex: 1 1 100%;
  margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); max-width: 62ch;
}

/* The hero is the one place a load sequence belongs, so it runs on load
   rather than on scroll: it is already on screen. Same vocabulary as the
   cards, same easing, one step slower, top to bottom in the order the eye
   reads it. Gated on .js the same way, and app.js is what lights it. */

.js .hero-lit > * {
  opacity: 0;
  translate: 0 16px;
}

.js .hero-lit.is-lit > * {
  opacity: 1;
  translate: none;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              translate .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.hero-lit > .eyebrow-hero    { --i: 0; }
.hero-lit > .cake-animation  { --i: 1; }
.hero-lit > .hero-sub        { --i: 2; }
.hero-lit > .btn-row         { --i: 3; }
.hero-lit > .hero-note       { --i: 4; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-lit > * {
    opacity: 1; translate: none; transition: none;
  }
}

/* -------------------------------- motion ---------------------------------
   One idea, used everywhere: a group of cards arrives in reading order, the
   way hidden state moves down the chain. The wave is triggered on the group
   rather than on each card, so a section lands as one gesture instead of six
   unrelated ones, and the delay comes from the card's position in the grid.

   Nothing is hidden until the page has said it has JavaScript (.js is set by
   the inline script in the head, before the first paint) and app.js has said
   it can observe. With scripting off, every card is simply there. */

/* The rise uses `translate`, not `transform`, on purpose: a card also moves
   on hover, and the two would otherwise be the same property fighting over
   one value, with the reveal's deeper selector winning permanently. The two
   properties compose, so each animation owns one and neither knows about the
   other. A browser without `translate` just fades, which is fine. */
.js .reveal-group > * {
  opacity: 0;
  translate: 0 14px;
}

.js .reveal-group.is-in > * {
  opacity: 1;
  translate: none;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              translate .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 65ms);
}

/* Reading order, plainly. The grids are auto-fit, so how many cards share a
   row changes with the viewport; anything cleverer than counting would put a
   later card ahead of an earlier one at some width. Six is the longest grid,
   which puts the last card 325 ms behind the first. */
.reveal-group > *:nth-child(1) { --i: 0; }
.reveal-group > *:nth-child(2) { --i: 1; }
.reveal-group > *:nth-child(3) { --i: 2; }
.reveal-group > *:nth-child(4) { --i: 3; }
.reveal-group > *:nth-child(5) { --i: 4; }
.reveal-group > *:nth-child(6) { --i: 5; }

/* Hover: the same one pixel lift the buttons already use, scaled to the size
   of a card, plus the border picking up the accent. No scale, no glow. */
.card, .code-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover, .code-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: var(--shadow-hi);
}
.card-accent:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* A card that holds the focused control should not be moving. */
.card:focus-within, .code-card:focus-within { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-group > * {
    opacity: 1; translate: none; transition: none;
  }
  .card, .code-card { transition: border-color .18s ease, box-shadow .18s ease; }
  .card:hover, .code-card:hover { transform: none; }
}

/* -------------------------------- narrow --------------------------------- */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .brand-sub { display: none; }
  /* the nav is gone at this width, so the switch takes over pushing right */
  .topbar-inner .langs { margin-left: auto; }
  .lang span { display: none; }
  .lang { padding: 5px; }
  .btn-row .btn { flex: 1 1 100%; }
}