/* SWD Editor — swdeditor.com
   A product by YNX Labs.
   House style: clean, calm, precise, a little technical.
   Near-black theme. One signal color: the SWD yellow (#e7ff00), used sparingly
   (primary CTA, the "PDF" word, active/selected states). Everything else neutral.
   Type: Space Grotesk (display) + Inter (body), self-hosted, latin subset. */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk var';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-latin-var.woff2') format('woff2');
}
/* the dotted-matrix face used only for the .swd wordmark */
@font-face {
  font-family: 'SWD Mark';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/swd-mark-var.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  /* Darker, near-black. The house palette is black + one signal yellow (#e7ff00). */
  --bg:        #050609;
  --panel:     #0a0c11;
  --panel-2:   #0e1016;
  --line:      #1b1f28;
  --line-soft: #14171e;

  --ink:       #e9ecf2;
  --muted:     #8b93a4;
  --faint:     #737b8c;   /* raised from #5c6474 to clear WCAG AA (4.5:1) on --bg for small text */

  /* THE accent: the SWD yellow. Used sparingly — signal, not fill. */
  --yellow:    #e7ff00;
  --yellow-ink:#e7ff00;   /* yellow text on black reads fine at this brightness */
  --yellow-dim:#3a4400;   /* very dark yellow for faint tints/rings */
  --accent:    var(--yellow);
  --on-yellow: #0a0a00;   /* the ONE dark ink used on yellow fills (no blue cast) */

  /* Blue is intentionally DORMANT — kept only as reference tokens, not used anywhere in
     the live design. The house palette is black + one yellow signal. */
  --blue:      #6f9bc4;
  --blue-ink:  #9fb6cc;
  --blue-dim:  #223142;

  --ok:        #7bdca6;
  --bad:       #ff6b6b;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-pill: 20px;
  --line-hover: #2c333f;   /* the one hover-border grey (was #2c333f / #333b4d scattered) */
  --maxw:      1120px;
  --gutter:    clamp(20px, 5vw, 40px);

  --sans: 'Inter var', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk var', 'Inter var', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 30px rgba(0,0,0,.35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* form controls don't inherit color/font by default — force it so no button text
   falls back to the OS default (dark-on-dark). */
button, input, select, textarea { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Inter: use its contextual alternates + tabular figures where it helps readability */
  font-feature-settings: "cv05" 1, "ss01" 1;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--yellow-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
/* headings in Space Grotesk — the premium display face */
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0; }
p { margin: 0; }
::selection { background: var(--yellow); color: var(--on-yellow); }

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

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
/* Generous, uneven vertical rhythm — sections breathe, no dividers between them. */
.section { padding-block: clamp(52px, 9vw, 104px); }
.section--tight { padding-block: clamp(32px, 5vw, 58px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}

.section-head { max-width: 620px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 17px; }

/* editorial: a large, calm lead paragraph that carries a section on its own */
.lead {
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.42; letter-spacing: -.01em;
  color: var(--ink); max-width: 30ch; font-weight: 400;
}
.section .lead { max-width: 24ch; }
#problem .lead, #security .lead { max-width: none; }
/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* the one loud accent: yellow on black. lifts slightly and casts a soft yellow glow on hover */
.btn--primary { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); font-weight: 650; }
.btn--primary:hover { background: #f2ff4d; transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--yellow) 28%, transparent); }
.btn--primary:active { transform: translateY(0); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--line-hover); background: var(--panel); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0); }
/* the arrow icon in the "see what's inside" ghost button nudges on hover */
.btn--ghost:hover .ico { transform: translate(1px, -1px); }
.btn .ico { transition: transform .18s ease; }
.btn--sm { padding: 8px 13px; font-size: 14px; }
.btn--pill { border-radius: 99px; padding-left: 18px; padding-right: 18px; }
.btn--lg { padding: 13px 22px; font-size: 16px; }
/* disabled buttons read as inert (e.g. "Upgrade plan" greyed out while already Plus) */
.btn:disabled, .btn[disabled] {
  background: var(--panel-2); color: var(--faint); border-color: var(--line);
  cursor: not-allowed; box-shadow: none; transform: none;
}
.btn:disabled:hover, .btn[disabled]:hover { background: var(--panel-2); transform: none; box-shadow: none; }
.btn .ico { width: 16px; height: 16px; flex: none; }

/* ---------- header ---------- */
/* ---- liquid-glass header: a floating pill, black + yellow ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 12px var(--gutter) 0;
  background: transparent; border: 0;
}
.site-header > .wrap { padding-inline: 0; }
.nav {
  position: relative; display: flex; align-items: center; gap: 24px;
  height: 70px; padding: 0 24px 0 32px;
  border-radius: 99px; overflow: visible;
  /* the glass body */
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  /* layered depth: outer hull + top light edge + bottom refraction */
  box-shadow:
    0 20px 50px -18px rgba(0,0,0,.7),
    0 4px 14px -6px rgba(0,0,0,.5),
    inset 0 1px 0 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -1px 0 0 rgba(0,0,0,.4),
    inset 0 0 0 1px var(--line);
  transition: box-shadow .4s ease, background .4s ease;
}
/* the wet top-reflection band */
.nav::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 1px; left: 8px; right: 8px; height: 46%;
  border-radius: 99px 99px 40px 40px / 99px 99px 20px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent) 0%, transparent 100%);
}
/* mouse-follow glare (JS feeds --gx/--gy); yellow-tinted so it reads on brand */
.nav__glare {
  position: absolute; inset: 0; z-index: 1; border-radius: 99px; overflow: hidden; pointer-events: none;
}
.nav__glare::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle 120px at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--yellow) 16%, transparent) 0%, transparent 70%);
}
.nav:hover .nav__glare::after { opacity: 1; }
/* everything real sits above the glass effects */
.nav__brand, .nav__links, .nav__cta { position: relative; z-index: 3; }
.nav__brand {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; margin-right: auto; line-height: 1;
}
.nav__brand:hover { text-decoration: none; }
/* the wordmark is the text ".swd" set in the dotted-matrix mark face, all in yellow */
.nav__word {
  display: block;
  font-family: 'SWD Mark', var(--display);
  font-size: 40px; font-weight: 700; letter-spacing: .02em;
  color: var(--yellow); line-height: 1;
}
.nav__word-dot { color: var(--yellow); }
/* "editor" sits centred under the wordmark, letter-spaced to span its width */
.nav__brand .editor {
  display: block; width: 100%;
  font-family: var(--mono);
  font-size: 15px; font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: -2px 0 0; padding: 0;
  transition: color .15s ease;
}
.nav__brand:hover .editor { color: var(--ink); }
.nav__links { display: flex; gap: 2px; align-items: center; margin-inline: auto; }
.nav__links a {
  position: relative; color: var(--muted); font-size: 14.5px; font-weight: 550;
  padding: 8px 15px; border-radius: 99px; transition: color .25s ease;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }
/* the pill that slides behind the hovered/current link (JS positions it) */
.nav__pill {
  position: absolute; z-index: -1; top: 50%; left: 0; height: 34px;
  transform: translate(0, -50%); border-radius: 99px;
  background: var(--yellow); opacity: 0;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--yellow) 30%, transparent);
  transition: transform .45s cubic-bezier(.34,1.15,.64,1), width .45s cubic-bezier(.34,1.15,.64,1), opacity .25s ease;
}
.nav__links.pill-on .nav__pill { opacity: 1; }
/* when the yellow pill is under a link, its text flips to dark ink for contrast */
.nav__links a.pill-target { color: var(--on-yellow); }
@media (prefers-reduced-motion: reduce) { .nav__pill { transition: opacity .25s ease; } }
.nav__cta { display: flex; gap: 10px; align-items: center; }
/* plain "Sign in" nav link (not a button); reaches the account area */
.nav__signin {
  color: var(--muted); font-size: 14.5px; font-weight: 500;
  padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center;
}
.nav__signin:hover { color: var(--ink); text-decoration: none; }

/* hamburger toggle: hidden on desktop, shown at the mobile breakpoint */
.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle:hover { border-color: var(--line-hover); }
.nav__toggle-bar { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  /* links become a floating glass card under the pill, revealed by the toggle */
  .nav__links {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 20px 50px -18px rgba(0,0,0,.7);
    padding: 8px 12px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__pill { display: none; }   /* no sliding pill in the stacked mobile menu */
  .nav__links a { padding: 13px 12px; font-size: 16px; border-radius: 12px; border-bottom: 1px solid var(--line-soft); }
  .nav__links a:last-child { border-bottom: 0; }
  .site-header { position: sticky; }   /* keep positioning context for the dropdown */
}
/* "Sign in" inside the mobile menu — only shown in the stacked menu, hidden elsewhere */
.nav__links-signin { display: none; }
/* very narrow: drop the header "Sign in" link so the bar stays on one line (brand +
   primary CTA + hamburger). Sign in stays reachable from the menu and the CTA. */
@media (max-width: 460px) {
  .nav { gap: 12px; padding: 0 12px 0 16px; }
  .nav__signin { display: none; }
  .nav__cta { gap: 8px; }
}
@media (max-width: 860px) {
  /* in the stacked menu, reveal the Sign in item */
  .nav__links.is-open .nav__links-signin { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 84px); }
/* Rolling-boxes field, drawn by hero-dots.js: rounded squares tumble corner-over-
   corner across staggered lanes. Faint and ambient. Masked so the boxes read from
   the top and bottom bands and fade behind the hero copy in the middle. */
.hero__dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; display: block;
  /* no-JS fallback: a faint static dot grid */
  background-image: radial-gradient(rgba(128,134,148,.18) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  /* vertical fade: visible top & bottom, dimmed through the middle text band */
  mask-image: linear-gradient(180deg, #000 0%, #000 16%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.22) 66%, #000 90%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 16%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.22) 66%, #000 90%, #000 100%);
}
/* once JS paints the canvas, drop the CSS fallback grid so it doesn't double up */
.hero__dots.is-live { background-image: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__copy { padding-block: clamp(20px, 4vw, 40px); }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--yellow); }

/* --- subtle glitch on the headline: two faint chromatic ghosts that flicker briefly
   every few seconds. The real text never moves or loses contrast; the ghosts are
   clipped to thin bands and mostly invisible. --- */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0; white-space: pre-line;
  font: inherit; letter-spacing: inherit; line-height: inherit;
  pointer-events: none; opacity: 0;
}
.glitch::before {
  color: var(--yellow);
  clip-path: polygon(0 12%, 100% 12%, 100% 34%, 0 34%);
  animation: glitchTop 7s infinite steps(1);
}
.glitch::after {
  color: #35e0ff;   /* a cold cyan ghost — reads as digital, used only in the flicker */
  clip-path: polygon(0 62%, 100% 62%, 100% 88%, 0 88%);
  animation: glitchBot 7s infinite steps(1);
}
/* the flicker windows are tiny: ~2% of a 7s loop, so it happens rarely and briefly */
@keyframes glitchTop {
  0%, 92%, 100% { opacity: 0; transform: none; }
  93%  { opacity: .55; transform: translateX(-3px); }
  94%  { opacity: .5;  transform: translateX(2px); }
  95%  { opacity: 0;   transform: none; }
  97%  { opacity: .4;  transform: translateX(-2px); }
  98%  { opacity: 0; }
}
@keyframes glitchBot {
  0%, 93%, 100% { opacity: 0; transform: none; }
  94%  { opacity: .5;  transform: translateX(3px); }
  95%  { opacity: .45; transform: translateX(-2px); }
  96%  { opacity: 0; }
  98%  { opacity: .35; transform: translateX(2px); }
  99%  { opacity: 0; }
}
/* a more visible variant for a single-line heading: bursts more often (every ~3s),
   with larger offsets so the glitch actually reads, still clean between bursts. */
.glitch--strong::before, .glitch--strong::after { clip-path: none; mix-blend-mode: screen; }
.glitch--strong::before { color: #ff2e63; animation: glitchStrongA 3.2s infinite steps(1); }
.glitch--strong::after  { color: #35e0ff; animation: glitchStrongB 3.2s infinite steps(1); }
@keyframes glitchStrongA {
  0%, 85%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  86% { opacity: .8; transform: translate(-4px, -1px); clip-path: inset(0 0 55% 0); }
  88% { opacity: .7; transform: translate(3px, 1px);   clip-path: inset(40% 0 20% 0); }
  90% { opacity: 0;  transform: none; }
  93% { opacity: .6; transform: translate(-3px, 0);    clip-path: inset(70% 0 0 0); }
  95% { opacity: 0; }
}
@keyframes glitchStrongB {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  87% { opacity: .75; transform: translate(4px, 1px);  clip-path: inset(20% 0 40% 0); }
  89% { opacity: .65; transform: translate(-3px, -1px); clip-path: inset(55% 0 10% 0); }
  91% { opacity: 0;   transform: none; }
  94% { opacity: .5;  transform: translate(3px, 0);    clip-path: inset(10% 0 70% 0); }
  96% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { animation: none; opacity: 0; }
}
.hero__sub { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 34ch; margin-bottom: 24px; }
/* the biggest selling point, in yellow */
.hero__hook {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(16px, 1.7vw, 19px); font-weight: 600; color: var(--yellow-ink);
  letter-spacing: -.01em; margin-bottom: 28px;
}
.hero__hook svg { width: 20px; height: 20px; flex: none; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hero__avail { font-size: 13.5px; color: var(--faint); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__sub { max-width: 46ch; }
}

/* ---------- hero showcase ---------- */
/* hero showcase image: one sealed screen with content bursting out of it. The PNG is
   transparent with its own glow, so it just scales to fill the hero's right column and
   is free to bleed a little past its box for presence. No frame, no clipping. */
.hero__demo { position: relative; }
.hero__showcase {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto; max-width: 620px;
  margin-inline: auto;
  /* no upscale: the whole burst must show edge to edge, never clipped by .hero's
     overflow:hidden (which exists for the dot-field canvas). */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
/* slow white illumination drifting behind the image, so the scene feels alive.
   Sized LARGER than the image and brighter so it halos out around the edges rather
   than hiding behind the dark screen in the middle of the art. */
.hero__glow {
  position: absolute; z-index: 0; left: 50%; top: 48%;
  width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  /* tighter and brighter at the core, falls off fast so it hugs the object */
  background: radial-gradient(circle at 50% 50%,
    rgba(220,233,255,.42) 0%, rgba(198,218,255,.20) 22%, rgba(170,198,255,.05) 40%, rgba(255,255,255,0) 55%);
  filter: blur(20px);
  animation: heroGlowDrift 16s ease-in-out infinite alternate;
}
@keyframes heroGlowDrift {
  0%   { transform: translate(-55%, -52%) scale(.96); opacity: .7; }
  50%  { transform: translate(-47%, -44%) scale(1.14); opacity: 1; }
  100% { transform: translate(-51%, -49%) scale(1.02); opacity: .8; }
}
@media (max-width: 900px) {
  .hero__showcase { max-width: 460px; transform: none; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; }
}


/* ---------- feature: editorial two-column (statement + quiet list) ---------- */
.feature {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; gap: 36px; } }
.feature__text { align-self: center; }
.feature__text h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; margin-bottom: 16px; }
.feature__text p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 40ch; }
.feature__text p + p { margin-top: 14px; }
.feature__list { list-style: none; padding: 0; margin: 0; display: grid; }
.feature__list li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.feature__list li:first-child { padding-top: 0; border-top: 0; }
/* the per-item illustration: a crisp yellow line icon in a subtle framed tile */
.feat-ico {
  flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--yellow);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.feat-ico svg { width: 30px; height: 30px; }
.feature__list li:hover .feat-ico { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .feature__list li:hover .feat-ico { transform: none; } }
.feat-body { min-width: 0; }
.feature__list h3 { font-size: 17px; margin-bottom: 6px; }
.feature__list p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 52ch; }


/* ---------- problem: PDF vs SWD, as a head-to-head of live visuals ----------
   Each row is one capability shown twice: the PDF cell is frozen, the SWD cell is the
   same thing running live. No captions on the cells: the motion is the argument. The
   left (PDF) column never animates; the right (SWD) column always does. Reduced-motion
   freezes every SWD cell to its resting state. */
.vs {
  margin-top: clamp(36px, 6vw, 56px);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
}
/* caption | frozen PDF viz | live SWD viz */
.vs__head, .vs__row {
  display: grid; grid-template-columns: 160px 1fr 1fr; align-items: stretch;
}
.vs__head {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--line-soft) 32%, transparent);
}
.vs__ch {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; padding: 13px 20px; align-self: center; text-align: center;
}
.vs__ch--pdf { color: var(--faint); }
.vs__ch--swd { color: var(--yellow-ink); border-left: 1px solid var(--line-soft); }

.vs__row + .vs__row, .vs__head + .vs__row { border-top: 1px solid var(--line-soft); }
.vs__cap {
  align-self: center; padding: 18px 20px; font-size: 14.5px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.vs__cell { display: flex; align-items: center; justify-content: center; padding: 20px; min-width: 0; }
.vs__cell--swd { border-left: 1px solid var(--line-soft); background: color-mix(in srgb, var(--yellow) 2.5%, transparent); }
.vs__viz {
  width: 108px; height: 62px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); position: relative; overflow: hidden; display: grid; place-items: center;
}
.vs__cell--pdf .vs__viz { opacity: .72; }
.vs__cell--swd .vs__viz { border-color: color-mix(in srgb, var(--yellow) 26%, var(--line)); box-shadow: 0 0 20px color-mix(in srgb, var(--yellow) 9%, transparent); }

/* palette helpers for the inline svg cells */
.vsx-fyel { fill: var(--yellow); }
.vsx-fdim { fill: var(--faint); } .vsx-sbad { stroke: var(--bad); }

/* 1. VIDEO — a play button and a scrubber that fills across */
@keyframes vzVidFill { 0% { width: 6%; } 100% { width: 88%; } }
@keyframes vzVidHead { 0% { left: 6%; } 100% { left: 88%; } }
.vz-vid { width: 100%; height: 100%; position: relative; }
.vz-vid__play { position: absolute; inset: 0; display: grid; place-items: center; }
.vz-vid__bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--yellow) 18%, var(--line)); }
.vz-vid__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; background: var(--yellow); border-radius: 3px; animation: vzVidFill 3s ease-in-out infinite alternate; }
.vz-vid__head { position: absolute; top: -3px; left: 6%; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); transform: translateX(-50%); animation: vzVidHead 3s ease-in-out infinite alternate; }

/* 2. 3D — a wireframe cube that rotates; PDF is a single flat static face */
@keyframes vzCube { to { transform: rotateX(-18deg) rotateY(360deg); } }
.vz-3dwrap { perspective: 240px; display: grid; place-items: center; width: 100%; height: 100%; }
.vz-cube { width: 32px; height: 32px; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(0); animation: vzCube 5.5s linear infinite; }
.vz-cube__f { position: absolute; inset: 0; border: 1.5px solid var(--yellow); }
.vz-cube__f:nth-child(1) { transform: translateZ(16px); }
.vz-cube__f:nth-child(2) { transform: rotateY(90deg) translateZ(16px); }
.vz-cube__f:nth-child(3) { transform: rotateY(180deg) translateZ(16px); }
.vz-cube__f:nth-child(4) { transform: rotateY(270deg) translateZ(16px); }
.vz-cube__f:nth-child(5) { transform: rotateX(90deg) translateZ(16px); }
.vz-cube__f:nth-child(6) { transform: rotateX(-90deg) translateZ(16px); }
.vz-flat { width: 34px; height: 34px; border: 1.5px solid var(--faint); position: relative; display: block; }
.vz-flat::before { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--faint) 60%, transparent); }

/* 3. CHARTS — bars that re-sort their heights; PDF bars are static and dim */
@keyframes vzBarA { 0%, 100% { height: 8px; } 50% { height: 32px; } }
@keyframes vzBarB { 0%, 100% { height: 32px; } 50% { height: 15px; } }
@keyframes vzBarC { 0%, 100% { height: 15px; } 50% { height: 36px; } }
@keyframes vzBarD { 0%, 100% { height: 25px; } 50% { height: 10px; } }
@keyframes vzBarE { 0%, 100% { height: 12px; } 50% { height: 28px; } }
.vz-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
.vz-bars i { width: 8px; background: var(--yellow); border-radius: 2px; display: block; }
.vz-bars i:nth-child(1) { height: 8px; animation: vzBarA 2.6s ease-in-out infinite; }
.vz-bars i:nth-child(2) { height: 32px; animation: vzBarB 2.6s ease-in-out infinite; }
.vz-bars i:nth-child(3) { height: 15px; animation: vzBarC 2.6s ease-in-out infinite; }
.vz-bars i:nth-child(4) { height: 25px; animation: vzBarD 2.6s ease-in-out infinite; }
.vz-bars i:nth-child(5) { height: 12px; animation: vzBarE 2.6s ease-in-out infinite; }
.vz-bars--pdf i { background: var(--faint); animation: none !important; }

/* 4. FORMS — a blinking caret and a result that ticks in; PDF shows an unsolved "= ?" */
@keyframes vzCaret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes vzResult { 0%, 30% { opacity: 0; transform: translateY(4px) scale(.9); } 44%, 100% { opacity: 1; transform: none; } }
.vz-form { font-family: var(--mono); font-size: 14px; color: var(--yellow); display: flex; align-items: center; gap: 5px; }
.vz-form__box { border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--line)); border-radius: 4px; padding: 3px 6px; display: flex; align-items: center; gap: 2px; }
.vz-form__caret { width: 1.5px; height: 15px; background: var(--yellow); animation: vzCaret 1s step-end infinite; }
.vz-form__eq { color: var(--faint); }
.vz-form__res { color: var(--yellow); font-weight: 700; animation: vzResult 3s ease-in-out infinite; }
.vz-form--pdf { color: var(--faint); }
.vz-form--pdf .vz-form__box { border-color: var(--line); }

/* 5. PRIVACY
   PDF sequence (4s loop): a green link runs from your screen to the document and the
   document reads green (safe). Then the document blinks yellow (warning) and flips red,
   opening a second, red-only link to a server it phones home to. That second link never
   turns green: it is the leak.
   SWD: an outside source pushes packets down a wire toward the sealed bubble; each
   packet travels the wire and stops at the barrier. Nothing crosses in. */
.vz-home { width: 96px; height: 52px; }
.vz-home__dev { fill: none; stroke: var(--faint); stroke-width: 1.4; }

/* the two links. --good (screen->doc) is green the whole time; --bad (doc->server) is
   invisible until the doc goes bad, then draws in red. */
.vz-home__link { stroke-width: 1.8; stroke-linecap: round; }
.vz-home__link--good { stroke: var(--ok); animation: vzLinkGood 4s ease-in-out infinite; }
.vz-home__link--bad {
  stroke: var(--bad); stroke-dasharray: 27; stroke-dashoffset: 27; opacity: 0;
  animation: vzLinkBad 4s ease-in-out infinite;
}
@keyframes vzLinkGood {
  0%, 55% { stroke: var(--ok); opacity: 1; }
  70%, 100% { stroke: color-mix(in srgb, var(--ok) 45%, transparent); opacity: .6; }
}
@keyframes vzLinkBad {
  0%, 55% { opacity: 0; stroke-dashoffset: 27; }
  70% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

/* the document changes state: green (safe) -> yellow blink (warning) -> red (leaking) */
.vz-home__doc { fill: var(--panel); stroke: var(--ok); stroke-width: 1.6; animation: vzDocState 4s ease-in-out infinite; }
.vz-home__docline { stroke-width: 1.3; stroke-linecap: round; animation: vzDocLine 4s ease-in-out infinite; }
@keyframes vzDocState {
  0%, 35% { stroke: var(--ok); }                    /* safe/green */
  42% { stroke: var(--yellow); }                    /* blink */
  48% { stroke: var(--ok); }
  54% { stroke: var(--yellow); }                    /* blink */
  60%, 100% { stroke: var(--bad); }                 /* gone bad/red */
}
@keyframes vzDocLine {
  0%, 35% { stroke: color-mix(in srgb, var(--ok) 80%, transparent); }
  42%, 54% { stroke: color-mix(in srgb, var(--yellow) 80%, transparent); }
  60%, 100% { stroke: color-mix(in srgb, var(--bad) 75%, transparent); }
}

/* a red packet that runs the leak line to the server once it opens */
.vz-home__packet { fill: var(--bad); offset-path: path('M 61 31 L 88 31'); offset-distance: 0%; opacity: 0; animation: vzPacket 4s ease-in-out infinite; }
@keyframes vzPacket {
  0%, 66% { offset-distance: 0%; opacity: 0; }
  70% { opacity: 1; }
  90% { offset-distance: 100%; opacity: 1; }
  94%, 100% { offset-distance: 100%; opacity: 0; }
}
.vz-home__server { fill: none; stroke: var(--bad); stroke-width: 1.4; }
.vz-home__serverline { stroke: var(--bad); stroke-width: 1.2; stroke-linecap: round; opacity: .7; }

.vz-sealed { width: 100px; height: 52px; }
.vz-sealed__src { fill: none; stroke: var(--faint); stroke-width: 1.4; }
.vz-sealed__wire { stroke: color-mix(in srgb, var(--bad) 55%, var(--line)); stroke-width: 1.4; }
.vz-sealed__bubble { fill: color-mix(in srgb, var(--yellow) 5%, transparent); stroke: var(--yellow); stroke-width: 1.5; }
.vz-sealed__shield { stroke: var(--yellow); stroke-width: 1.5; stroke-linejoin: round; }
.vz-sealed__check { stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* packets travel the wire from the source (x=15) toward the bubble edge (x=33) and stop */
.vz-sealed__bit { fill: var(--bad); offset-path: path('M 15 31 L 33 31'); offset-distance: 0%; opacity: 0; }
.vz-sealed__bit--1 { animation: vzBit 1.8s ease-in infinite; }
.vz-sealed__bit--2 { animation: vzBit 1.8s ease-in infinite .6s; }
.vz-sealed__bit--3 { animation: vzBit 1.8s ease-in infinite 1.2s; }
@keyframes vzBit {
  0% { offset-distance: 0%; opacity: 0; }
  15% { opacity: 1; }
  80% { offset-distance: 100%; opacity: 1; }   /* reaches the barrier */
  90% { offset-distance: 100%; opacity: 0; }   /* absorbed/stopped, does not pass */
  100% { offset-distance: 100%; opacity: 0; }
}
/* a small vertical flash on the barrier each time a packet is stopped */
.vz-sealed__block { stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; opacity: 0; animation: vzBlock 1.8s ease-out infinite; }
@keyframes vzBlock {
  0%, 72% { opacity: 0; }
  80% { opacity: .9; }
  100% { opacity: 0; }
}

/* mobile: drop the caption column, put the two viz cells side by side under a small label */
@media (max-width: 620px) {
  .vs__head { grid-template-columns: 1fr 1fr; }
  .vs__head .vs__ch:first-child { display: none; }
  .vs__row { grid-template-columns: 1fr 1fr; }
  .vs__cap {
    grid-column: 1 / -1; padding: 14px 16px 2px; text-align: left;
    font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  .vs__cell { padding: 16px; }
  .vs__cell--swd { border-left: 0; border-top: 1px solid var(--line-soft); }
  .vs__viz { width: 100%; max-width: 128px; }
}
/* JS pauses all cell animations while the section is scrolled out of view */
.vs--paused .vz-vid__fill, .vs--paused .vz-vid__head, .vs--paused .vz-cube,
.vs--paused .vz-bars i, .vs--paused .vz-form__caret, .vs--paused .vz-form__res,
.vs--paused .vz-home__link, .vs--paused .vz-home__doc, .vs--paused .vz-home__docline,
.vs--paused .vz-home__packet, .vs--paused .vz-sealed__bit,
.vs--paused .vz-sealed__block { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .vz-vid__fill, .vz-vid__head, .vz-cube, .vz-bars i, .vz-form__caret, .vz-form__res,
  .vz-home__link, .vz-home__doc, .vz-home__docline, .vz-home__packet,
  .vz-sealed__bit, .vz-sealed__block { animation: none !important; }
  .vz-vid__fill { width: 60%; } .vz-vid__head { left: 60%; }
  /* reduced-motion rests in the "leaking" end state: doc red, red link drawn, packet at server */
  .vz-home__doc { stroke: var(--bad); } .vz-home__docline { stroke: color-mix(in srgb, var(--bad) 75%, transparent); }
  .vz-home__link--bad { opacity: 1; stroke-dashoffset: 0; }
  .vz-home__packet { offset-distance: 60%; opacity: 1; }
  .vz-sealed__bit { offset-distance: 100%; opacity: .8; }
}


/* ---------- zero attack surface: headline + an open list of sealed properties ----------
   No boxes. A clean two-column split: a big headline on the right, and an open list on
   the left where each property is a crisp line-icon, a title, and one line. Generous
   vertical rhythm and thin dividers keep it airy rather than pressed into cards. */
.surface {
  display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(40px, 6vw, 88px);
  align-items: center; margin-top: clamp(48px, 7vw, 84px);
}
@media (max-width: 900px) { .surface { grid-template-columns: 1fr; gap: 40px; } }

/* the headline block sits on the right; the list is on the left (grid order) */
.surface__head { order: 2; }
.surface__list { order: 1; }
@media (max-width: 900px) { .surface__head { order: 1; } .surface__list { order: 2; } }

.surface__head .eyebrow { color: var(--yellow-ink); }
.surface__title {
  font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.035em; line-height: 1.02;
  margin: 10px 0 20px;
}
.surface__lead { color: var(--muted); font-size: 17px; line-height: 1.62; max-width: 40ch; margin: 0; }

/* the open list */
.surface__list { list-style: none; padding: 0; margin: 0; }
.seal-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 22px 0;
}
.seal-item + .seal-item { border-top: 1px solid var(--line-soft); }
.seal-item:first-child { padding-top: 4px; }
.seal-item:last-child { padding-bottom: 4px; }

/* crisp line-icon, no fill, no chip. Sized generously and vertically centred to the title. */
.seal-item__ico {
  width: 44px; height: 44px; color: var(--yellow);
  display: grid; place-items: center;
}
.seal-item__ico svg { width: 30px; height: 30px; display: block; }
.seal-item__body { min-width: 0; padding-top: 2px; }
.seal-item h3 {
  font-size: 18px; letter-spacing: -.015em; margin: 0 0 6px; color: var(--ink);
  line-height: 1.2;
}
.seal-item p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; max-width: 40ch; }

/* ---------- fold-out brand visual (unfold cube net -> sealed box) ---------- */
.foldbox-wrap { text-align: center; margin: 0 auto clamp(48px, 7vw, 80px); max-width: 440px; }
/* centred placement: the cube sits centred above the "one file holds all of it" copy,
   as part of this section. Sized ~20% larger than the old corner cube. */
.foldbox-wrap--corner {
  text-align: center; margin: 0 auto clamp(24px, 4vw, 40px); max-width: 300px;
}
.foldbox-wrap--corner .foldbox {
  --tile: clamp(48px, 6vw, 64px);   /* +20% over the old 40-54px */
  margin: 4px auto;
}
.foldbox {
  --tile: clamp(68px, 10.5vw, 92px);   /* slightly smaller cubes */
  --gap: 6px;                          /* tiny air between the faces */
  width: calc(var(--tile) * 3);
  height: calc(var(--tile) * 3);
  margin: 8px auto;
  position: relative;
  perspective: 1100px;
  cursor: pointer;
}
.foldbox:focus-visible { outline: 2px solid var(--yellow); outline-offset: 10px; border-radius: 6px; }
.foldbox__scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* NET: nearly face-on so the labels read clearly (was too steep at 56deg) */
  transform: rotateX(22deg) rotateZ(0deg);
  transition: transform 2.4s cubic-bezier(.65,0,.25,1);
}
/* BOX: tilt to an isometric view so the folded cube reads as 3D. The angle change
   between states is part of the motion and adds interest. */
.foldbox.is-folded .foldbox__scene { transform: rotateX(52deg) rotateZ(-40deg); }
/* instant fold (dev preview + reduced-motion): skip transitions so it snaps to state */
.foldbox.is-instant, .foldbox.is-instant * { transition: none !important; animation: none !important; }

.foldbox__tile {
  position: absolute; width: var(--tile); height: var(--tile);
  box-sizing: border-box;
  /* inset the visible face by --gap so neighbours don't touch: tiny air between cubes.
     the tile cell stays --tile (hinge geometry unchanged); only the painted face shrinks. */
  padding: var(--gap);
  transition: transform 2.4s cubic-bezier(.65,0,.25,1), opacity 1s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* the painted face lives in ::before so the padding gives the seam */
.foldbox__tile { display: block; }
.foldbox__tile .face {
  position: absolute; inset: var(--gap);
  border: 1.5px solid color-mix(in srgb, var(--yellow) 34%, var(--line));
  background: var(--panel-2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .6s ease, box-shadow .6s ease, border-color .6s ease;
}
/* clean, crisp icon centred in each tile; no label text, no yellow fill */
.foldbox__tile svg { width: 46%; height: 46%; color: var(--yellow); }

/* Net layout on the flat plane: each tile placed by grid cell (left/top), and each
   arm hinges on its INNER edge (shared with the center) so it folds UP into a wall. */
.foldbox__tile.center { left: var(--tile);            top: var(--tile); }
.foldbox__tile.up     { left: var(--tile);            top: 0;                       transform-origin: 50% 100%; }
.foldbox__tile.down   { left: var(--tile);            top: calc(var(--tile) * 2);   transform-origin: 50% 0%; }
.foldbox__tile.left   { left: 0;                      top: var(--tile);             transform-origin: 100% 50%; }
.foldbox__tile.right  { left: calc(var(--tile) * 2);  top: var(--tile);             transform-origin: 0% 50%; }
/* the lid starts stacked on the center, hidden, and rides up to cap the box */
.foldbox__tile.top    { left: var(--tile);            top: var(--tile); opacity: 0; }

/* the center tile reads as the viewport (the screen): a crisp yellow border, no fill */
.foldbox__tile.center .face {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow) 45%, transparent) inset;
}

/* FOLDED: arms rotate 90° up around their inner edge → four walls closing into a box,
   staggered so it reads as folding up. The lid then rises to seal the top. */
.foldbox.is-folded .foldbox__tile.up    { transform: rotateX(-90deg); transition-delay: 0s; }
.foldbox.is-folded .foldbox__tile.right { transform: rotateY(-90deg); transition-delay: .2s; }
.foldbox.is-folded .foldbox__tile.down  { transform: rotateX( 90deg); transition-delay: .4s; }
.foldbox.is-folded .foldbox__tile.left  { transform: rotateY( 90deg); transition-delay: .6s; }
.foldbox.is-folded .foldbox__tile.top   { opacity: 1; transform: translateZ(var(--tile)); transition-delay: .95s; }
/* when folded, the faces read as a solid box (neutral fill, not yellow) with the yellow
   border carrying the accent; the lid is a touch lighter so the top reads as the cap. */
.foldbox.is-folded .foldbox__tile:not(.top) .face { background: var(--panel); border-color: color-mix(in srgb, var(--yellow) 55%, var(--line)); }
.foldbox.is-folded .foldbox__tile.top .face { background: var(--panel-2); border-color: var(--yellow); }

/* the sealing ring — one sweep of yellow when it becomes sealed (the fingerprint beat) */
.foldbox__seal {
  position: absolute; inset: -8%; border-radius: 16px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0turn, transparent 0 78%, var(--yellow) 88%, transparent 92% 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82%);
          mask: radial-gradient(closest-side, transparent 80%, #000 82%);
}
.foldbox.is-folded .foldbox__seal { animation: foldSeal 800ms cubic-bezier(.4,0,.2,1) .55s 1 both; }
@keyframes foldSeal {
  from { transform: rotate(-90deg); opacity: 0; }
  40%  { opacity: .85; }
  to   { transform: rotate(270deg); opacity: 0; }
}

/* shared icon chip: one spec for section icons (Use cases, Security). */
/* crisp yellow icon, NO tinted box — the yellow glyph carries the accent on its own */
.ico-chip, .trust__ico {
  display: inline-flex; width: 28px; height: 28px; margin-bottom: 14px;
  align-items: center; justify-content: center;
}
.ico-chip svg, .trust__ico svg { width: 28px; height: 28px; color: var(--yellow); }

/* ---------- use cases ---------- */
/* seamless hairline grid (deliberate: reads as one unified block, cells on --panel) */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft);
        border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uses { grid-template-columns: 1fr; } }
.use {
  background: var(--panel); padding: 24px;
  transition: background .18s ease;
}
.use:hover { background: var(--panel-2); }
.use h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 6px; }
.use p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
/* icon nudges up on card hover */
.use .ico-chip { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.use:hover .ico-chip { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .use:hover .ico-chip { transform: none; } }

/* ---------- MCP / AI ---------- */
.mcp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 820px) { .mcp { grid-template-columns: 1fr; gap: 32px; } }
.mcp__text h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; margin-bottom: 14px; }
.mcp__text > p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 42ch; margin-bottom: 18px; }
.mcp__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mcp__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); align-items: flex-start; }
.mcp__list li .chk { color: var(--faint); flex: none; margin-top: 2px; }
.mcp__list li .mono { color: var(--ink); }
/* a small chat mockup showing the AI making a .swd */
.mcp__chat {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 20px; display: grid; gap: 12px;
}
.mcp__bubble { font-size: 14px; line-height: 1.5; padding: 12px 15px; border-radius: 12px; max-width: 86%; }
.mcp__bubble--you { justify-self: end; background: var(--panel-2); color: var(--ink); border-bottom-right-radius: 4px; }
.mcp__bubble--ai {
  justify-self: start; background: color-mix(in srgb, var(--yellow) 8%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--ink);
  border-bottom-left-radius: 4px; display: flex; align-items: flex-start; gap: 9px;
}
/* the dot sits beside the whole message; the text flows normally so inline chips (.swd)
   stay in the sentence instead of breaking it into columns */
.mcp__ai-mark { width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); flex: none; margin-top: 6px; }
.mcp__bubble-text { flex: 1; min-width: 0; }

/* the "changes being made" work panel inside the chat */
.mcp__work {
  align-self: start; width: 100%; max-width: 92%;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 13px 15px;
}
.mcp__work-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.mcp__work-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
/* dot pulses only while the panel is actively "working" */
.mcp__chat[data-state="working"] .mcp__work-dot { animation: workPulse 1s ease-in-out infinite; }
@keyframes workPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mcp__work-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.mcp__work-list li {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); line-height: 1.4;
}
.mcp__work-list li .mono { color: var(--ink); }
.mcp__op-check {
  width: 16px; height: 16px; flex: none; border-radius: 4px;
  border: 1px solid var(--line); position: relative;
}
/* a checked op: yellow check drawn in */
.mcp__work-list li.is-done .mcp__op-check { border-color: var(--yellow); }
.mcp__work-list li.is-done .mcp__op-check::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--yellow); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mcp__work-list li.is-done { color: var(--ink); }

/* animation entry: each step is hidden until JS reveals it (data-shown) */
.mcp__chat[data-anim] > [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.mcp__chat[data-anim] > [data-step].is-shown { opacity: 1; transform: none; }
.mcp__chat[data-anim] .mcp__work-list li { opacity: .35; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .mcp__chat[data-anim] > [data-step] { opacity: 1; transform: none; }
  .mcp__chat[data-anim] .mcp__work-list li { opacity: 1; }
  .mcp__chat[data-state="working"] .mcp__work-dot { animation: none; }
}


/* ---------- MCP connect box (pick your AI client) ---------- */
.connect { margin-top: clamp(40px, 6vw, 64px); max-width: 760px; }
.connect__head h3 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
.connect__head p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.connect__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.connect__tab {
  font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 14px; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.connect__tab:hover { border-color: var(--line-hover); color: var(--ink); }
.connect__tab.is-active {
  color: var(--yellow-ink); border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 8%, var(--panel));
}
.connect__panel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.connect__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.connect__file { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.connect__copy {
  font: inherit; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px;
  transition: border-color .15s ease, color .15s ease;
}
.connect__copy:hover { border-color: var(--line-hover); color: var(--ink); }
.connect__copy.is-copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.connect__code { margin: 0; padding: 16px 18px; overflow-x: auto; }
.connect__code code { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre; }
.connect__note { color: var(--faint); font-size: 12.5px; margin: 12px 0 0; }
.connect__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 14px; color: var(--yellow-ink); font-weight: 550;
}
.connect__more .ico { width: 15px; height: 15px; transition: transform .18s ease; }
.connect__more:hover { text-decoration: none; }
.connect__more:hover .ico { transform: translate(1px, -1px); }

/* ---------- security: definition list ---------- */
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr; } }
.trust__item {
  padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--panel); transition: border-color .18s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.trust__item:hover { border-color: color-mix(in srgb, var(--yellow) 34%, var(--line)); transform: translateY(-2px); }
/* .trust__ico visual comes from the shared .ico-chip rule above */
.trust__ico { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.trust__item:hover .trust__ico { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .trust__item:hover { transform: none; }
  .trust__item:hover .trust__ico { transform: none; }
}
.trust__item h3 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trust__item p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.trust__plus {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--yellow-ink); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  border-radius: 20px; padding: 2px 8px; font-weight: 600;
}
/* legacy dl fallback (unused now) */
.trust dt {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px;
}
.trust dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .pricing { grid-template-columns: 1fr; } }
.pricing { position: relative; }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 26px; height: 100%; position: relative; z-index: 1;
  display: flex; flex-direction: column;
}
/* the CTA (and its supporting line) sits at the bottom of the card, so both plans'
   buttons line up on the same baseline no matter how long each feature list is. */
.plan__foot { margin-top: auto; }
.plan__foot .plan__terms { margin-bottom: 16px; }
.plan__foot .plan__micro { margin-bottom: 0; }
/* Free is the loud, primary path: crisp yellow frame draws the eye. */
.plan--free { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset, var(--shadow); }
/* Plus is the paid offer. Its background matches the Free card (near-black panel); a
   very faint top glow gives it a slight lift without turning the whole card yellow. */
.plan--plus {
  border-color: color-mix(in srgb, var(--yellow) 20%, var(--line));
  background: var(--panel);
  overflow: hidden;
}
.plan--plus::before {
  content: ""; position: absolute; z-index: 0; inset: -40% -20% auto -20%; height: 70%;
  background: radial-gradient(55% 60% at 50% 0%,
    color-mix(in srgb, var(--yellow) 6%, transparent) 0%, transparent 68%);
  pointer-events: none;
  animation: plusGlow 6s ease-in-out infinite alternate;
}
.plan--plus > * { position: relative; z-index: 1; }
@keyframes plusGlow {
  0%   { opacity: .5; }
  100% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) { .plan--plus::before { animation: none; } }

/* scroll-reveal: elements rise + fade in when they enter view (JS adds .is-in).
   Used on the Plus offer and, via JS auto-tagging, on section headings and card grids.
   Gated behind .js so that with JavaScript off, content is simply visible (no hidden state). */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal--1 { transition-delay: .05s; }
.reveal--2 { transition-delay: .13s; }
.reveal--3 { transition-delay: .21s; }
.reveal--4 { transition-delay: .29s; }
/* auto-reveal: JS stamps .reveal-auto on groups and sets --i per child for a gentle stagger.
   Uses an ANIMATION (not a transition) so it never clobbers each child's own hover transition. */
.js .reveal-auto > * { opacity: 0; }
.js .reveal-auto.is-in > * { animation: revealRise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(min(var(--i, 0), 5) * 45ms); }
@keyframes revealRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal-auto > * { opacity: 1; }
  .js .reveal-auto.is-in > * { animation: none; }
}
.plan__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.plan--free .plan__tag { color: var(--yellow-ink); }
.plan--plus .plan__tag { color: var(--muted); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.plan__price .amt { font-size: 38px; font-weight: 680; letter-spacing: -.03em; }
.plan__price .per { color: var(--muted); font-size: 14px; }
.plan__price .was {
  color: var(--faint); font-size: 17px; text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--faint) 70%, transparent);
  align-self: center;
}
.plan__price .save {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yellow); background: transparent; border: 1.5px solid var(--yellow);
  padding: 0 10px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); align-self: center; font-weight: 700; line-height: 1;
}
.plan__price .was[hidden], .plan__price .save[hidden] { display: none; }
.plan__note { color: var(--faint); font-size: 13px; margin-bottom: 18px; }
.plan__micro { color: var(--faint); font-size: 12.5px; margin-top: 12px; text-align: center; }
.plan__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); align-items: flex-start; }
.plan__list li .chk { color: var(--faint); flex: none; margin-top: 2px; }
/* the spacer reserves the same vertical room as Plus's term selector, so both cards'
   feature lists begin on the same line. The Free list then flows from the top; any
   remaining space falls below it, above the (bottom-pinned) button. */
.plan__spacer { height: 138px; }
.plan .btn { width: 100%; justify-content: center; }

/* small top space so the corner "Limited" badge has room; it sits on the box corner */
/* extra top margin gives the floating "Limited" flag clear room above the 2-year box */
/* position:relative so the "Limited" flag can sit above the first column. The extra top
   margin gives that flag room; the term boxes themselves stay tight and equal. */
.plan__terms { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 20px; align-items: stretch; }
/* four-term selector (5y / 2y / 1y / Monthly) */
.plan__terms--4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.plan__terms--4 .term { padding: 11px 6px; }
.term {
  position: relative;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 11px 10px; background: var(--panel); cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* The yellow ring is a state, and it follows the pointer: it rests on the currently
   selected term, and jumps to whichever term is hovered while the pointer is over the
   group. Selected always keeps a yellow border so the current choice stays legible. */
.term[aria-pressed="true"] {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px var(--yellow) inset, 0 6px 18px color-mix(in srgb, var(--yellow) 14%, transparent);
  transform: translateY(-1px);
}
/* while a hover is active, the selected term hands the ring over to the hovered one */
.plan__terms:has(.term:hover) .term[aria-pressed="true"]:not(:hover) {
  box-shadow: none; transform: none;
  border-color: color-mix(in srgb, var(--yellow) 38%, var(--line));
}
.plan__terms .term:hover {
  border-color: var(--yellow); transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--yellow) inset, 0 6px 18px color-mix(in srgb, var(--yellow) 14%, transparent);
}

/* the "Limited" flag sits ABOVE the selector, centred over the first column, so no term
   box needs extra top padding for it. Default left = 1/6 (three columns); the four-column
   selector overrides it to 1/8 (the first of four columns). */
.plan__terms-flag {
  position: absolute; bottom: calc(100% + 6px); left: 16.67%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--on-yellow); background: var(--yellow);
  padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; pointer-events: none;
}
.plan__terms--4 .plan__terms-flag { left: 12.5%; }
.term .t-price { width: 100%; text-align: center; font-weight: 680; font-size: 18px; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.term .t-price small { color: var(--muted); font-weight: 400; font-size: 13px; }
.term .t-label { width: 100%; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.term[aria-pressed="true"] .t-price { color: var(--yellow-ink); }
.term[aria-pressed="true"] .t-label { color: var(--yellow-ink); }

/* the pushed 2-year term has a soft yellow glow that gently breathes in a slow wave.
   It is one glow, not an arc layered on top of the border, so nothing looks doubled.
   The 2-year term drops its plain base border (below) so the glow is the only edge. */
.term__glow {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow:
    0 0 0 1.5px var(--yellow),
    0 0 12px color-mix(in srgb, var(--yellow) 40%, transparent);
  animation: termWave 5.5s ease-in-out infinite;
}
@keyframes termWave {
  0%, 100% {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
                0 0 7px color-mix(in srgb, var(--yellow) 22%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1.5px var(--yellow),
                0 0 18px color-mix(in srgb, var(--yellow) 50%, transparent);
  }
}
.term > :not(.term__glow) { position: relative; z-index: 1; }
/* the glowing term drops its plain border so the glow is the single, clean edge */
.term:has(.term__glow) { border-color: transparent; }

.term:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
/* the four-term selector goes 2x2 when it gets tight, so boxes never cramp */
@media (max-width: 560px) {
  .plan__terms--4 { grid-template-columns: repeat(2, 1fr); }
  .plan__terms--4 .plan__terms-flag { left: 25%; }   /* over the top-left box of the 2x2 */
  .plan__terms--4 .term { padding: 12px 8px; }
}
@media (max-width: 420px) {
  .plan__terms { grid-template-columns: 1fr; }
  /* single column: the first term is full width, so centre the flag over it */
  .plan__terms-flag { left: 50%; }
  .plan__terms--4 { grid-template-columns: repeat(2, 1fr); }   /* keep 2x2, don't stack to 1 */
  .plan__terms--4 .plan__terms-flag { left: 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .term__glow { animation: none; }
}

.pricing__foot { color: var(--faint); font-size: 13px; margin-top: 18px; text-align: center; }

/* ---------- download page ---------- */
.dl { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; } }

/* the primary, confident download panel */
.dl__main {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: clamp(26px, 4vw, 40px);
}
.dl__os {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
.dl__main h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; margin-bottom: 12px; }
.dl__lead { color: var(--muted); font-size: 16px; max-width: 46ch; margin-bottom: 26px; }
.dl__btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.dl__started {
  font-family: var(--mono); font-size: 12.5px; color: var(--ok);
  display: none; align-items: center; gap: 8px;
}
.dl__started svg { color: var(--ok); }
.dl__started.show { display: inline-flex; }
.dl__platforms { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 22px; }
.dl__platforms a {
  font-size: 13.5px; color: var(--muted);
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  transition: color .15s ease, border-color .15s ease;
}
.dl__platforms a:hover { color: var(--ink); border-color: var(--line-hover); }
.dl__platforms a[data-current] { color: var(--on-yellow); background: var(--yellow); border-color: var(--yellow); font-weight: 600; }
.dl__reassure { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.dl__reassure li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); align-items: flex-start; }
.dl__reassure li .chk { color: var(--faint); flex: none; margin-top: 2px; }

/* the quiet Plus reminder beside the download */
.dl__plus {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 26px; position: sticky; top: 80px;
}
.dl__plus .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.dl__plus h2 { font-size: 18px; margin-bottom: 6px; }
.dl__plus .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.dl__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dl__price .was { color: var(--faint); font-size: 17px; text-decoration: line-through; align-self: center; }
.dl__price .amt { font-size: 34px; font-weight: 680; letter-spacing: -.03em; }
.dl__price .per { color: var(--muted); font-size: 13px; }
.dl__price .save {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yellow); background: transparent; border: 1.5px solid var(--yellow);
  padding: 0 10px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); align-self: center; font-weight: 700; line-height: 1;
}
.dl__price-note { color: var(--faint); font-size: 12.5px; margin-bottom: 18px; }
.dl__plus ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
.dl__plus ul li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); align-items: flex-start; }
.dl__plus ul li .chk { color: var(--faint); flex: none; margin-top: 2px; }
.dl__plus ul li .mono { color: var(--ink); }
.dl__plus .btn { width: 100%; justify-content: center; margin-bottom: 10px; }

/* ---------- auth / login ---------- */
/* login page: center the card (and its foot line) in the space between header and footer.
   flex column so the card + "don't need an account" line stay centered as a unit. */
.auth { display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 66px); padding: 40px 20px; box-sizing: border-box; }
.auth__inner { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.auth__card {
  width: 100%; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: clamp(26px, 4vw, 38px); box-shadow: var(--shadow);
}
.auth__mark { display: inline-block; margin-bottom: 16px; }
/* success checkmark on the desktop-app return page */
.auth__done { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; color: var(--yellow); }
.auth__done svg { width: 52px; height: 52px; }
.auth__card h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
.auth__sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.auth__providers { display: grid; gap: 10px; }
.authbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.authbtn:hover { border-color: var(--line-hover); background: var(--panel-2); text-decoration: none; }
.authbtn__ico { flex: none; }
.auth__or {
  display: flex; align-items: center; gap: 12px; color: var(--faint);
  font-size: 12px; margin: 18px 0; font-family: var(--mono);
}
.auth__or::before, .auth__or::after { content: ""; height: 1px; background: var(--line-soft); flex: 1; }
.auth__email { display: grid; gap: 8px; text-align: left; }
.auth__label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.auth__input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.auth__input:focus { outline: none; border-color: var(--yellow); }
.auth__email .btn { width: 100%; justify-content: center; margin-top: 4px; }
.auth__msg { font-size: 13px; color: var(--ok); min-height: 1em; margin-top: 4px; }
.auth__msg.err { color: var(--bad); }
.auth__fine { font-size: 12px; color: var(--faint); margin-top: 20px; line-height: 1.5; }
.auth__fine a { color: var(--muted); }
.auth__foot { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }

/* ---------- profile menu (nav, when signed in) ---------- */
.nav__profile { position: relative; }
.nav__profile-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 14px; font-weight: 550; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px 5px 6px; cursor: pointer;
  transition: border-color .15s ease;
}
.nav__profile-btn:hover { border-color: var(--line-hover); }
.nav__profile-btn .avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--panel-2); color: var(--ink);
}
.nav__profile-btn .caret { width: 12px; height: 12px; color: var(--faint); }
.nav__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 244px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 16px 46px rgba(0,0,0,.55);
  padding: 8px; overflow: hidden;
}
.nav__menu[hidden] { display: none; }
.nav__menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.nav__menu-head .who { font-weight: 600; font-size: 14px; }
.nav__menu-head .mail { color: var(--muted); font-size: 12.5px; margin-top: 2px; word-break: break-all; }
.nav__menu-head .plan {
  display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--muted);
}
.nav__menu-head .plan.plus { color: var(--on-yellow); background: var(--yellow); border-color: var(--yellow); }
.nav__menu a, .nav__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 14px;
  color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left;
}
.nav__menu a:hover, .nav__menu button:hover { background: var(--panel-2); text-decoration: none; }
.nav__menu a svg, .nav__menu button svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.nav__menu .sep { height: 1px; background: var(--line-soft); margin: 6px 0; }
.nav__menu .danger:hover { color: var(--bad); }

/* ---------- account dashboard ---------- */
.acct__head { margin-bottom: 22px; }
.acct__head h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; margin-bottom: 8px; }
.acct__hello { color: var(--muted); font-size: 14.5px; }
.acct .plan {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted);
}
.acct .plan.plus { color: var(--on-yellow); background: var(--yellow); border-color: var(--yellow); }

/* ---- account dashboard states (loading / confirming / error) ---- */
/* state overlays are hidden by default; a matching [data-state] reveals one and
   hides the real layout so the two never show at once. */
.acct__state { display: none; text-align: center; padding: clamp(40px, 8vw, 80px) 20px; }
.acct__state p { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.acct__state b { color: var(--ink); }
#account-dash[data-state="confirming"] .acct__state--confirming { display: block; }
#account-dash[data-state="error"] .acct__state--error { display: block; }
#account-dash[data-state="placeholder"] .acct__state--placeholder { display: block; }
/* hide the real content while a state overlay is up */
#account-dash[data-state="confirming"] .acct__layout,
#account-dash[data-state="error"] .acct__layout,
#account-dash[data-state="placeholder"] .acct__layout,
#account-dash[data-state="loading"] .acct__layout { display: none; }
#account-dash[data-state="confirming"] .acct-banner,
#account-dash[data-state="error"] .acct-banner,
#account-dash[data-state="placeholder"] .acct-banner { display: none; }
/* the signed-in-as line is meaningless in the placeholder state */
#account-dash[data-state="placeholder"] .acct__hello { display: none; }

/* loading: show skeleton placeholders in place of the layout */
.acct__skeleton { display: none; }
#account-dash[data-state="loading"] .acct__skeleton { display: grid; gap: 14px; max-width: 640px; }
#account-dash[data-state="loading"] .acct__head .acct__hello { color: transparent; }
.acct__skeleton .sk {
  height: 16px; border-radius: 6px;
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 37%, var(--panel) 63%);
  background-size: 400% 100%; animation: skShimmer 1.4s ease infinite;
}
.acct__skeleton .sk--lg { height: 120px; }
.acct__skeleton .sk--sm { height: 12px; width: 60%; }
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .acct__skeleton .sk { animation: none; } }

/* spinner used in the confirming state */
.spinner {
  display: inline-block; width: 24px; height: 24px; margin-bottom: 14px;
  border: 2px solid var(--line); border-top-color: var(--yellow); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* transient toast (e.g. "You're on Plus") */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  border-radius: var(--radius); padding: 12px 18px; font-size: 14px; color: var(--ink);
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; max-width: 90vw;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .3s ease; } }

/* a quiet error line, shown only if the account service can't be reached (legacy fallback) */

/* lifecycle status banner (payment failing / ending / lapsed) */
.acct-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px;
  font-size: 14px; color: var(--muted);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  background: var(--panel);
}
.acct-banner[hidden] { display: none; }
.acct-banner b { color: var(--ink); }
.acct-banner[data-kind="warn"] {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 7%, var(--panel));
}
.acct-banner[data-kind="info"] { border-left-color: var(--yellow); }
.acct-banner__act {
  margin-left: auto; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink);
}
.acct-banner__act:hover { border-color: var(--line-hover); }
.acct-banner[data-kind="warn"] .acct-banner__act { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }

.acct__layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .acct__layout { grid-template-columns: 1fr; gap: 16px; } }

.acct__tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
@media (max-width: 760px) {
  .acct__tabs { flex-direction: row; overflow-x: auto; position: static; border-bottom: 1px solid var(--line-soft); }
}
.acct__tab {
  text-align: left; font: inherit; font-size: 14.5px; font-weight: 550; color: var(--muted);
  background: transparent; border: 0; border-left: 2px solid transparent; padding: 9px 14px;
  cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: nowrap;
}
.acct__tab:hover { color: var(--ink); background: var(--panel); }
.acct__tab.is-active { color: var(--ink); border-left-color: var(--yellow); background: var(--panel); }
@media (max-width: 760px) {
  .acct__tab { border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; }
  .acct__tab.is-active { border-left: 0; border-bottom-color: var(--yellow); }
}

.acct__panel { max-width: 640px; }
.acct__panel[hidden] { display: none; }
.acct__panel h2 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
.acct__lead { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.acct__lead b { color: var(--ink); }
.acct__count { color: var(--faint); font-family: var(--mono); font-size: 12.5px; }
.acct__subhead {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 28px 0 12px;
}

.acct__card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 22px; margin-bottom: 16px;
}
.acct__card--flat { background: var(--panel); }
.acct__card-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.acct__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.acct__price .was { color: var(--faint); font-size: 16px; text-decoration: line-through; align-self: center; }
.acct__price .amt { font-size: 32px; font-weight: 680; letter-spacing: -.03em; }
.acct__price .per { color: var(--muted); font-size: 13px; }
.acct__price .save {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yellow); background: transparent; border: 1.5px solid var(--yellow);
  padding: 0 10px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); align-self: center; font-weight: 700; line-height: 1;
}
.acct__note { color: var(--faint); font-size: 13px; margin-top: 6px; }
.acct__feats { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 9px; }
.acct__feats li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); align-items: flex-start; }
.acct__feats li .chk { color: var(--faint); flex: none; margin-top: 2px; }
.acct__feats li .mono { color: var(--ink); }
.acct__card .btn { width: 100%; justify-content: center; }

/* rows (devices, invoices, account facts) */
.acct__rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 13px 16px;
}
.row__name { font-size: 14.5px; font-weight: 550; }
.row__meta { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.row--empty { color: var(--faint); font-size: 13.5px; justify-content: flex-start; }

/* email preference toggles */
.acct__prefs { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pref { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.pref:first-child { border-top: 0; }
.pref__name { font-size: 14.5px; font-weight: 550; margin-bottom: 3px; }
.pref__desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.danger-btn { color: var(--muted); }
.danger-btn:hover { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); color: var(--bad); }

/* ---------- subscription management (account) ---------- */
.acct__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.acct__terms .term { flex: 1 1 130px; }
.acct__micro { color: var(--faint); font-size: 12.5px; margin-top: 10px; text-align: center; }

/* PayPal button (placeholder; brandable) */
/* PayPal method button, styled to the house palette (neutral) rather than PayPal
   brand blues, so it doesn't fight the black + yellow design. The wordmark keeps its
   two-tone weight via ink shades, not brand color. */
.paypal-btn {
  width: 100%; margin-top: 10px; padding: 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.paypal-btn:hover { border-color: var(--line-hover); background: var(--panel); }
.paypal-btn__logo { font-weight: 700; font-size: 16px; font-style: italic; letter-spacing: -.02em; }
.paypal-btn__logo b { color: var(--ink); }
.paypal-btn__logo span { color: var(--muted); }

/* Plus-active management card */
.acct__plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.acct__status { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); margin-left: 8px; }
.acct__status[data-sub-status="Ending"] { color: var(--bad); }
.acct__subrows { display: grid; gap: 0; margin: 0 0 20px; }
.acct__subrows > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.acct__subrows > div:first-child { border-top: 0; }
.acct__subrows dt { color: var(--faint); font-size: 13.5px; margin: 0; }
.acct__subrows dd { color: var(--ink); font-size: 13.5px; margin: 0; text-align: right; }
.acct__sub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct__canceled { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bad) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 24%, var(--line));
  font-size: 13.5px; color: var(--muted); }
.acct__canceled b { color: var(--ink); }
.acct__resume { display: inline-block; margin-left: 6px; background: none; border: 0; padding: 0;
  color: var(--yellow-ink); font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Plan & billing (restructured) ---- */
.acct__infobox {
  margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 7%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--yellow) 22%, var(--line));
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.acct__infobox[hidden] { display: none; }
.acct__plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--ink); font-weight: 550; }
.acct__taxnote { color: var(--faint); font-size: 12.5px; font-weight: 400; }
.acct__status[data-sub-status="Canceled"], .acct__status[data-sub-status="Ending"] { color: var(--bad); }
.acct__status[data-sub-status="Payment due"] { color: var(--bad); }
.acct__until { color: var(--muted); font-size: 14px; margin: 14px 0 12px; }
.acct__until b { color: var(--ink); }
/* days-left time bar */
.acct__timebar {
  height: 8px; border-radius: 20px; background: var(--panel-2);
  border: 1px solid var(--line-soft); overflow: hidden; margin-bottom: 8px;
}
.acct__timebar-fill {
  display: block; height: 100%; background: var(--yellow); border-radius: 20px;
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}
.acct__timebar-note { color: var(--faint); font-size: 12.5px; margin: 0 0 18px; }
.acct__timebar-note b, .acct__timebar-note [data-days-left] { color: var(--muted); }

/* cancel / retention modal: a fixed full-screen overlay with a centred card */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, #000 72%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: modalScrim .2s ease both;
}
.modal__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: modalPop .24s cubic-bezier(.2,.8,.25,1) both;
}
.modal__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.modal__x:hover { color: var(--ink); border-color: var(--line-hover); }
.modal__x:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.modal__title { font-size: 24px; letter-spacing: -.02em; margin: 0 0 12px; }
@keyframes modalScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal__scrim, .modal__card { animation: none; }
}

/* cancel / retention modal steps */
.cx-step { }
.cx-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.cx-lead { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; line-height: 1.5; }
.cx-lead b { color: var(--ink); }
.cx-offer { border: 1px solid color-mix(in srgb, var(--yellow) 22%, var(--line)); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 6%, var(--panel)); padding: 16px 18px; margin-bottom: 18px; }
.cx-decline { display: block; width: 100%; text-align: center; margin-top: 12px; background: none; border: 0;
  color: var(--faint); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px; }
.cx-decline:hover { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cx-reasons { display: grid; gap: 6px; margin-bottom: 14px; }
.cx-reason { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: border-color .15s ease; }
.cx-reason:hover { border-color: var(--line-hover); }
.cx-reason:has(input:checked) { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 7%, var(--panel)); }
.cx-reason input { accent-color: var(--yellow); }
.cx-note { width: 100%; margin-bottom: 16px; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); resize: vertical; }
.cx-note:focus { outline: none; border-color: var(--yellow); }
#cancel-modal .btn { width: 100%; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 820px; }
.faq details {
  border-top: 1px solid var(--line-soft); padding: 6px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 44px 16px 0; position: relative;
  font-weight: 550; font-size: 16.5px; color: var(--ink);
  transition: color .18s ease;
}
.faq summary:hover { color: var(--yellow-ink); }
.faq summary::-webkit-details-marker { display: none; }
/* a single "+" that rotates to "x" on open, rather than swapping glyphs */
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  font-family: var(--mono); color: var(--faint); font-size: 20px; line-height: 1;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .28s cubic-bezier(.4,0,.2,1), color .18s ease;
}
.faq summary:hover::after { color: var(--yellow-ink); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); color: var(--yellow-ink); }
/* the answer eases open */
.faq details p { color: var(--muted); font-size: 15px; padding: 0 20px 18px 0; max-width: 70ch; }
.faq details[open] p { animation: faqReveal .3s ease both; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq details p code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .faq details[open] p { animation: none; }
  .faq summary::after { transition: none; }
}

/* ---------- support center ---------- */
.support { max-width: 900px; margin-inline: auto; padding-block: clamp(40px, 7vw, 72px); }
.support__head { margin-bottom: clamp(28px, 4vw, 40px); }
.support__head h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin-bottom: 10px; }
.support__head p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 60ch; }
.support__head a { color: var(--yellow-ink); }

/* topic cards: a scannable grid that jumps to each section */
.support__topics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 clamp(36px, 5vw, 56px);
}
@media (max-width: 720px) { .support__topics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .support__topics { grid-template-columns: 1fr; } }
.support__topic {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.support__topic:hover { border-color: color-mix(in srgb, var(--yellow) 40%, var(--line)); transform: translateY(-2px); text-decoration: none; }
.support__topic h2 { font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.support__topic p { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; }
.support__topic .support__topic-ico { width: 22px; height: 22px; color: var(--yellow); margin-bottom: 4px; }
.support__topic .support__topic-ico svg { width: 22px; height: 22px; }

/* section blocks below the cards */
.support__section { border-top: 1px solid var(--line-soft); padding-top: clamp(28px, 4vw, 40px); margin-top: clamp(28px, 4vw, 40px); scroll-margin-top: 90px; }
.support__section > h2 { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; margin-bottom: 18px; }
.support__section h3 { font-size: 15.5px; margin: 20px 0 6px; color: var(--ink); }
.support__section p, .support__section li { color: var(--muted); font-size: 15px; line-height: 1.6; }
.support__section p { margin-bottom: 12px; max-width: 68ch; }
.support__section a { color: var(--yellow-ink); }
.support__section b { color: var(--ink); font-weight: 600; }
.support__section ul { margin: 0 0 14px; padding-left: 0; list-style: none; max-width: 68ch; }
.support__section ul li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.support__section ul li::before { content: "▪"; position: absolute; left: 2px; color: var(--faint); font-size: 11px; top: 3px; }
.support__contact {
  margin-top: clamp(32px, 5vw, 48px); padding: 22px 24px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--panel); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 16px;
}
.support__contact p { margin: 0; color: var(--muted); font-size: 15px; }
.support__contact b { color: var(--ink); }

/* ---------- CTA band ---------- */
.band {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--yellow) 18%, var(--line)); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(30px, 5vw, 52px); text-align: center;
}
/* soft yellow glow breathing from the top, echoing the Plus card */
.band::before {
  content: ""; position: absolute; z-index: 0; inset: -50% 0 auto 0; height: 100%;
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--yellow) 12%, transparent) 0%, transparent 70%);
  pointer-events: none; animation: plusGlow 6s ease-in-out infinite alternate;
}
.band > * { position: relative; z-index: 1; }
.band h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.band p { color: var(--muted); max-width: 48ch; margin: 0 auto 24px; }
.band__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .band::before { animation: none; } }

/* ---------- legal / long-form pages ---------- */
.legal-page { max-width: 760px; margin-inline: auto; padding-block: clamp(48px, 8vw, 88px); }
.legal-page__head { margin-bottom: clamp(32px, 5vw, 48px); }
.legal-page h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; margin-bottom: 12px; }
.legal-page__meta { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing: .02em; }
.legal-page__intro { color: var(--muted); font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 62ch; }
.legal-page h2 {
  font-size: 20px; letter-spacing: -.01em; margin: clamp(30px, 4vw, 44px) 0 12px;
  padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line-soft);
}
.legal-page h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-page h3 { font-size: 16px; margin: 22px 0 8px; }
.legal-page p, .legal-page li { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.legal-page p { margin-bottom: 14px; max-width: 68ch; }
.legal-page strong, .legal-page b { color: var(--ink); font-weight: 600; }
.legal-page a { color: var(--yellow-ink); }
.legal-page ul { margin: 0 0 16px; padding-left: 0; list-style: none; max-width: 68ch; }
.legal-page ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.legal-page ul li::before { content: "▪"; position: absolute; left: 2px; color: var(--faint); font-size: 11px; top: 3px; }
.legal-page__toc {
  display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 20px 0 8px;
  font-size: 13.5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.legal-page__toc a {
  color: var(--muted); display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-pill); transition: color .15s ease, background .15s ease;
}
.legal-page__toc a:hover { color: var(--yellow-ink); background: color-mix(in srgb, var(--yellow) 8%, transparent); }
.legal-page__note {
  border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: var(--radius);
  background: var(--panel); padding: 16px 18px; margin: 18px 0; font-size: 14.5px; color: var(--muted);
}
.legal-page__note b { color: var(--ink); }
/* code block inside long-form pages (mcp.html setup snippets) */
.legal-code {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 15px 18px; margin: 12px 0 20px; overflow-x: auto;
}
.legal-code code { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre; }
.legal-page__data { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.legal-page__data th, .legal-page__data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal-page__data th { color: var(--faint); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.legal-page__data td { color: var(--muted); }
.legal-page__data td:first-child { color: var(--ink); font-weight: 550; white-space: nowrap; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding-block: 44px; color: var(--muted); }
.footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.footer__brand { max-width: 300px; }
.footer__lockup {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; line-height: 1; margin-bottom: 14px;
}
.footer__lockup:hover { text-decoration: none; }
.footer__lockup .nav__word {
  font-family: 'SWD Mark', var(--display);
  font-size: 42px; font-weight: 700; letter-spacing: .02em; color: var(--yellow); line-height: 1;
}
.footer__lockup .editor {
  display: block; width: 100%; text-align: center;
  font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  transition: color .15s ease;
}
.footer__lockup:hover .editor { color: var(--muted); }
.tm { font-size: .55em; letter-spacing: 0; vertical-align: super; margin-left: 1px; }
.footer__brand p { font-size: 13.5px; color: var(--faint); }
.footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__col h4 { font-size: 12px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.footer__col a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 9px; }
.footer__col a:hover { color: var(--ink); text-decoration: none; }
.footer__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--faint); }
.footer__bar .legal { display: inline-flex; align-items: center; flex-wrap: wrap; }
.footer__bar .legal a { color: var(--faint); display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
.footer__bar .legal a:hover { color: var(--muted); }

/* ---------- misc ---------- */
.mono { font-family: var(--mono); }