/* ==========================================================================
   ThinkUI — product site
   Design system: light, precise, generous. One accent, used where it acts.
   The dark canvas exists for the hero, the closing call to action and the
   footer; everything between is paper.

   Contents
     01 tokens
     02 reset and base
     03 layout
     04 animated canvas (aurora, veil, grain, beam)
     05 header and navigation
     06 hero
     07 buttons
     08 cards, features, steps
     09 code surface
     10 proof strip, ticker
     11 pricing
     12 faq
     13 closing call to action
     14 forms and auth (login)
     15 footer
     16 motion and reveals
     17 responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  --paper:       #ffffff;
  --paper-soft:  #f7f8fb;
  --paper-tint:  #eef1f7;

  --ink:         #05070c;
  --ink-2:       #0a0e17;
  --ink-3:       #131a26;

  --text:        #0b0d12;
  --text-soft:   #474d59;
  --text-mute:   #6b7280;

  --on-ink:      #f7f9fc;
  --on-ink-soft: #a7b0c0;
  --on-ink-mute: #7b8595;

  --line:        rgba(11, 13, 18, 0.09);
  --line-2:      rgba(11, 13, 18, 0.16);
  --line-ink:    rgba(255, 255, 255, 0.10);
  --line-ink-2:  rgba(255, 255, 255, 0.18);

  --brand:       #5b5bd6;
  --brand-ink:   #4338ca;
  --brand-soft:  #eef0ff;
  --accent-2:    #22b8cf;

  --ok:          #0f7b5f;
  --warn:        #b45309;

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Instrument Serif", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap:  1140px;
  --gut:   clamp(20px, 4vw, 32px);
  --sect:  clamp(72px, 8.5vw, 128px);

  --r-sm: 9px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(11, 13, 18, .05), 0 1px 1px rgba(11, 13, 18, .03);
  --sh-2: 0 6px 18px -8px rgba(11, 13, 18, .16), 0 2px 6px -3px rgba(11, 13, 18, .08);
  --sh-3: 0 26px 60px -28px rgba(11, 13, 18, .34), 0 8px 24px -14px rgba(11, 13, 18, .18);
  --sh-glow: 0 24px 70px -32px rgba(91, 91, 214, .55);

  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 620ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------- 02 reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 600; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--on-ink); padding: 11px 16px; border-radius: var(--r-sm);
  transition: top var(--d-2) var(--ease);
}
.skip:focus { top: 16px; }

/* ------------------------------------------------------------- 03 layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
section { padding: var(--sect) 0; position: relative; }
.section--soft { background: var(--paper-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding-top: calc(var(--sect) * .5); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
h1 { font-size: clamp(38px, 5.4vw, 66px); letter-spacing: -0.035em; }
h2 { font-size: clamp(27px, 3.6vw, 44px); letter-spacing: -0.03em; max-width: 22ch; }
h3 { font-size: 18px; letter-spacing: -0.015em; }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; }
/* the serif sits optically smaller than Inter at the same size, so it gets its own scale */
.hero h1.display { font-size: clamp(40px, 5.9vw, 74px); letter-spacing: -0.015em; }
.band h1.display { letter-spacing: -0.012em; }
.closing h2.display { font-size: clamp(30px, 4vw, 52px); }
.lede { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.62; color: var(--text-soft); max-width: 60ch; }
.small { font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.head { margin-bottom: 46px; }
.head--center { text-align: center; }
.head--center h2, .head--center .lede { margin-inline: auto; }
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------ 04 animated dark canvas */
.canvas {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
}
.canvas::after {
  /* a warm glow from the top edge, the way a lit screen bleeds onto a wall */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(91, 91, 214, .34), transparent 62%),
    radial-gradient(80% 60% at 85% 8%, rgba(34, 184, 207, .18), transparent 60%);
}
.canvas > * { position: relative; z-index: 2; }

.aurora { position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none; filter: blur(56px); opacity: .8; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
.aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: -6vw; top: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(91, 91, 214, .85), transparent 64%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: -4vw; top: 2vw;
  background: radial-gradient(circle at 60% 40%, rgba(34, 184, 207, .62), transparent 62%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.aurora i:nth-child(3) {
  width: 34vw; height: 34vw; left: 34vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(147, 51, 234, .5), transparent 64%);
  animation: drift-c 38s var(--ease) infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vw, 5vw, 0) scale(1.16); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-8vw, 7vw, 0) scale(.92); } }
@keyframes drift-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(6vw, -6vw, 0) scale(1.2); } }

.veil {
  /* a mask so the animation fades out where the text lives */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(90% 70% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 42%, #000 20%, transparent 78%);
  animation: veil-pan 40s linear infinite;
}
@keyframes veil-pan { to { background-position: 68px 68px, 68px 68px; } }

.grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.beam {
  position: absolute; z-index: 2; pointer-events: none;
  left: -30%; top: -60%; width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: rotate(18deg);
  animation: beam-sweep 14s var(--ease) infinite;
}
@keyframes beam-sweep {
  0%   { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate3d(240%, 0, 0) rotate(18deg); opacity: 0; }
}

/* The reference field: points that fly in, assemble into the brand mark, then come loose.
   It sits above the aurora and below the copy, and never takes a pointer event - the
   interaction is tracked on the window so nothing in the hero stops being clickable. */
.field {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
.canvas > canvas.field { z-index: 1; }        /* outranks .canvas > * { z-index: 2 } */

/* -------------------------------------------------- 05 header / navigation */
.header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px) saturate(1.5);
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }
.header--on-canvas {
  background: rgba(5, 7, 12, .55);
  color: var(--on-ink);
  border-bottom-color: var(--line-ink);
}
.header__inner { display: flex; align-items: center; gap: 30px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 16.5px; }
/* The lockup is the real asset, inlined by src/build.py from assets/img/logo*.svg:
   outlined paths, so it renders identically on every machine and never waits on a
   webfont. Its own viewBox carries the 26px tile and the 9px gap. */
.brand__logo {
  height: 26px; width: auto; display: block; flex: none;
  overflow: visible;
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 13px; border-radius: var(--r-sm); font-size: 14px; font-weight: 450;
  color: var(--text-soft); transition: color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.header--on-canvas .nav a { color: var(--on-ink-soft); }
.nav a:hover { color: var(--text); background: var(--paper-tint); }
.header--on-canvas .nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 550; }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: 14px; }
.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--line); margin-left: auto; place-items: center;
}
.burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

/* ------------------------------------------------------------- 06 hero */
.hero { padding: clamp(84px, 11vw, 168px) 0 clamp(64px, 8vw, 120px); }
.hero__inner { max-width: 900px; }
.hero h1 { color: #fff; }
.hero h1 .grad {
  background-image: linear-gradient(96deg, #a5b4fc 8%, #67e8f9 52%, #f0abfc 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero .lede { color: var(--on-ink-soft); font-size: clamp(17px, 1.7vw, 20.5px); max-width: 56ch; margin-top: 22px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line-ink-2); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  font: 500 12.5px/1 var(--sans); color: var(--on-ink-soft); margin-bottom: 26px;
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: none;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: live 2400ms var(--ease) infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__meta { margin-top: 22px; font-size: 13.5px; color: var(--on-ink-mute); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { width: 15px; height: 15px; color: #34d399; }

/* ---------------------------------------------------------- 07 buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 550; letter-spacing: -0.005em;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--text);
  overflow: hidden; isolation: isolate;
  transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.btn:active { transform: translateY(0); }
.btn--primary {
  border-color: transparent; color: #fff;
  background-color: var(--brand-ink);          /* beneath the gradient, never a bare gradient */
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
  box-shadow: 0 10px 26px -12px rgba(91, 91, 214, .8);
}
.btn--primary::after {
  /* the sheen: a light that crosses the button on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .38) 42%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--d-4) var(--ease-out);
}
.btn--primary:hover { filter: saturate(1.06); box-shadow: 0 16px 34px -12px rgba(91, 91, 214, .95); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--light { background: #fff; border-color: transparent; color: var(--ink); }
.btn--light:hover { background: #fff; box-shadow: 0 16px 34px -16px rgba(255, 255, 255, .5); }
.btn--ghost { background: transparent; border-color: var(--line-ink-2); color: var(--on-ink); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.btn--block { width: 100%; }
.btn--lg { padding: 15px 24px; font-size: 15.5px; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; font-size: 14.5px; color: var(--brand-ink); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--d-2) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------- 08 cards / features */
.card {
  position: relative; padding: 26px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.card--glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(91, 91, 214, .5), rgba(34, 184, 207, .35), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--d-3) var(--ease); pointer-events: none;
}
.card--glow:hover::before { opacity: 1; }
.card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 18px;
  border: 1px solid rgba(91, 91, 214, .16);
}
.card__icon svg { width: 21px; height: 21px; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--text-soft); font-size: 15px; }
.card__foot { margin-top: 16px; font: 500 12.5px/1.4 var(--mono); color: var(--text-mute); }

.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink); font: 500 13px/1 var(--mono);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: 15px; }

/* ---------------------------------------------------- 09 code surface */
.code {
  border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2);
  border: 1px solid var(--line-ink); box-shadow: var(--sh-3);
}
.code__bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  border-bottom: 1px solid var(--line-ink); background: rgba(255, 255, 255, .03);
}
.code__bar .dots { display: flex; gap: 6px; }
.code__bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.code__bar .name { font: 500 12px/1 var(--mono); color: var(--on-ink-mute); }
.code__copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--sans); color: var(--on-ink-soft);
  border: 1px solid var(--line-ink-2); border-radius: var(--r-sm); padding: 7px 11px;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.code__copy svg { width: 14px; height: 14px; }
.code__copy:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.code__copy.is-done { color: #34d399; border-color: rgba(52, 211, 153, .5); }
.code pre {
  margin: 0; padding: 20px 18px; overflow-x: auto;
  font: 400 13px/1.75 var(--mono); color: #cbd5e1;
  font-feature-settings: "liga" 1, "calt" 1;
}
.code pre .c { color: #64748b; }
.code pre .k { color: #c4b5fd; }
.code pre .s { color: #7dd3fc; }
.code pre .f { color: #fcd34d; }
.code__note { padding: 0 18px 18px; font-size: 13px; color: var(--on-ink-mute); }

/* ------------------------------------------- 10 proof strip and ticker */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.proof > div { background: var(--paper); padding: 24px 22px; }
.proof b { display: block; font: 400 clamp(24px, 2.8vw, 34px)/1 var(--mono); letter-spacing: -0.035em; }
.proof span { display: block; margin-top: 9px; font-size: 13px; color: var(--text-mute); }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 15px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__row { display: flex; gap: 42px; width: max-content; animation: ticker 42s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); color: var(--text-mute); white-space: nowrap; }
.ticker span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .6; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- 11 pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 28px 26px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.plan--best {
  border-color: rgba(91, 91, 214, .45); box-shadow: var(--sh-glow);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff, var(--brand-soft));
}
.plan__tag {
  position: absolute; top: 20px; right: 22px;
  font: 500 11px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background-color: var(--brand-ink);
  background-image: linear-gradient(135deg, var(--brand), var(--brand-ink));
  padding: 6px 10px; border-radius: var(--r-pill);
}
.plan__name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.plan__price { display: flex; align-items: baseline; gap: 9px; }
.plan__price b { font: 400 clamp(32px, 3.6vw, 44px)/1 var(--mono); letter-spacing: -0.045em; }
.plan__price span { font-size: 13px; color: var(--text-mute); }
.plan__note { font-size: 14px; color: var(--text-soft); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 2px 0 4px; }
.plan li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text-soft); }
.plan li svg { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; color: var(--ok); }
.plan .btn { margin-top: auto; }

/* --------------------------------------------------------------- 12 faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 4px;
  font-size: 16.5px; font-weight: 550; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 11px; height: 11px; flex: none;
  border-right: 1.6px solid var(--text-mute); border-bottom: 1.6px solid var(--text-mute);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--d-3) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq .answer { padding: 0 4px 24px; color: var(--text-soft); max-width: 72ch; }
.faq .answer p + p { margin-top: 12px; }

/* ------------------------------------------------------- 13 closing cta */
.closing { text-align: center; padding: clamp(80px, 10vw, 140px) 0; }
.closing h2, .closing h1 { color: #fff; margin-inline: auto; max-width: 20ch; }
.closing .lede { color: var(--on-ink-soft); margin: 20px auto 0; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* --------------------------------------------- 14 forms and auth (login) */
.auth { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 56px 0; }
.auth__card {
  width: 100%; max-width: 440px; padding: 34px 32px 30px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.auth__head { text-align: center; margin-bottom: 26px; }
.auth__head h1 { font-size: 25px; letter-spacing: -0.02em; }
.auth__head p { margin-top: 9px; font-size: 14.5px; color: var(--text-soft); }
.field { display: block; margin-bottom: 15px; }
.field__label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 7px; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--paper-soft);
  font-size: 14.5px; transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.field input::placeholder { color: var(--text-mute); }
.field input:focus { outline: none; background: var(--paper); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .14); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 20px; font-size: 13.5px; }
.check { display: inline-flex; align-items: center; gap: 9px; color: var(--text-soft); }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.auth__row a { color: var(--brand-ink); font-weight: 550; }
.or { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--text-mute); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.oauth { display: grid; gap: 10px; }
.oauth .btn { background: var(--paper); }
.auth__foot { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-soft); }
.auth__foot a { color: var(--brand-ink); font-weight: 550; }
.notice {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--brand-soft); border: 1px solid rgba(91, 91, 214, .2);
  font-size: 13.5px; color: var(--text-soft); margin-bottom: 22px;
}
.notice svg { width: 17px; height: 17px; flex: none; color: var(--brand-ink); margin-top: 1px; }

/* ------------------------------------------------------------- 15 footer */
.footer { background: var(--ink); color: var(--on-ink-soft); padding: 68px 0 34px; position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; position: relative; z-index: 2; }
.footer h4 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer a { color: var(--on-ink-soft); font-size: 14px; transition: color var(--d-1) var(--ease); }
.footer a:hover { color: #fff; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer__about { font-size: 14px; max-width: 34ch; }
.footer__bottom {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line-ink);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  font-size: 13px; color: var(--on-ink-mute); position: relative; z-index: 2;
}
.footer__bottom .sep { margin-left: auto; }

/* ------------------------------------------------- 16 motion / reveals */
[data-rise] { opacity: 1; }
html.js [data-rise] { opacity: 0; transform: translateY(16px); }
html.js [data-rise].in {
  opacity: 1; transform: none;
  transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 8) * 70ms);
}

/* --------------------------------------------------------- 17 responsive */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3, .steps, .pricing { grid-template-columns: 1fr; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .nav__cta { display: none; }
  .burger { display: grid; }
  .header.is-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 66px; padding: 14px var(--gut) 20px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
  }
  .header.is-open .nav a { padding: 13px 12px; color: var(--text); font-size: 15.5px; }
  .header.is-open .nav__cta { display: flex; margin: 10px 0 0; }
  .hero { padding-top: clamp(56px, 12vw, 96px); }
}
@media (max-width: 560px) {
  .grid--2, .grid--4, .proof { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .plan__tag { position: static; display: inline-block; align-self: flex-start; }
}

/* Windows High Contrast and other forced-colors modes drop background images:
   gradient-filled text and gradient buttons must still be readable there. */
@media (forced-colors: active) {
  .hero h1 .grad {
    background-image: none; color: CanvasText; -webkit-text-fill-color: currentColor;
  }
  .btn, .btn--primary, .btn--light, .btn--ghost {
    background-image: none; background-color: ButtonFace;
    color: ButtonText; border-color: ButtonText;
  }
  .plan--best, .plan__tag, .card, .plan { background-image: none; }
  .aurora, .veil, .beam { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-rise] { opacity: 1; transform: none; }
  .aurora, .veil, .beam, .ticker__row { animation: none !important; }
}

/* a reveal that never runs must not print as blank paper */
@media print {
  html.js [data-rise] { opacity: 1 !important; transform: none !important; }
  .canvas { background: #fff; color: #000; }
  .aurora, .veil, .grain, .beam { display: none; }
  .header { position: static; }
}

/* ==========================================================================
   18 · page bands, comparison tables, auth split, legal prose
   ========================================================================== */

/* a dark band at the top of a light page needs a header that reads on it,
   and a header that turns light the moment it sticks over paper */
/* Opaque enough to hold its own contrast: the bar sits over an animated hero,
   so its legibility must not depend on whatever happens to be behind it. */
.dark-top .header:not(.is-stuck) {
  background: rgba(5, 7, 12, .88);
  color: var(--on-ink);
  border-bottom-color: transparent;
}
.dark-top .header:not(.is-stuck) .brand { color: #fff; }
.dark-top .header:not(.is-stuck) .nav a { color: var(--on-ink-soft); }
.dark-top .header:not(.is-stuck) .nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.dark-top .header:not(.is-stuck) .btn:not(.btn--light) {
  background: transparent; border-color: var(--line-ink-2); color: var(--on-ink);
}
.dark-top .header:not(.is-stuck) .btn:not(.btn--light):hover { background: rgba(255, 255, 255, .1); }
.dark-top .header:not(.is-stuck) .burger { border-color: var(--line-ink-2); }

.band { padding: calc(66px + clamp(50px, 6.5vw, 92px)) 0 clamp(44px, 5.5vw, 76px); }
.band h1 { color: #fff; font-size: clamp(31px, 4.4vw, 56px); max-width: 20ch; }
.band .eyebrow { color: #a5b4fc; }
.band .lede { color: var(--on-ink-soft); margin-top: 18px; }

.cmp__wrap {
  overflow-x: auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.cmp caption { text-align: left; padding: 16px 18px 4px; color: var(--text-mute); font-size: 13px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.cmp tbody th { font-weight: 500; color: var(--text); }
.cmp tbody td { color: var(--text-soft); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: var(--paper-soft); }
.cmp .yes { color: var(--ok); font-weight: 600; }
.cmp .no { color: var(--text-mute); }

.split { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 100vh; }
.split__aside {
  position: relative; background: var(--ink); color: var(--on-ink); overflow: hidden;
  padding: calc(66px + 58px) clamp(28px, 5vw, 76px) 52px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 44px;
}
.split__aside::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(115% 62% at 22% -12%, rgba(91, 91, 214, .46), transparent 62%),
    radial-gradient(72% 52% at 92% 18%, rgba(34, 184, 207, .22), transparent 62%);
}
.split__aside .aurora, .split__aside .veil { z-index: 1; }
.split__aside .grain { z-index: 2; }
.split__body { position: relative; z-index: 3; }
.split__aside h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); max-width: 18ch; }
.split__aside .lede { color: var(--on-ink-soft); margin-top: 16px; font-size: 16.5px; }
.split__list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.split__list li { display: flex; gap: 12px; font-size: 15px; color: var(--on-ink-soft); }
.split__list svg { width: 18px; height: 18px; flex: none; color: #34d399; margin-top: 2px; }
.split__main { display: grid; place-items: center; padding: 56px var(--gut); background: var(--paper); }
.split__main .auth__card { box-shadow: var(--sh-2); }
.split__foot { font-size: 13px; color: var(--on-ink-mute); }
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__aside { padding-top: calc(66px + 38px); gap: 30px; }
  .split__main { padding: 40px var(--gut) 56px; }
}

.doc-head { padding: calc(66px + clamp(44px, 5vw, 74px)) 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.doc-head h1 { font-size: clamp(30px, 4vw, 48px); }
.doc-head .lede { margin-top: 16px; }
.prose { max-width: 74ch; padding-bottom: 20px; }
.prose h2 { font-size: 21px; margin: 40px 0 12px; }
.prose h3 { font-size: 16.5px; margin: 26px 0 10px; }
.prose p, .prose li { color: var(--text-soft); font-size: 15.5px; }
.prose p + p { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.prose a { color: var(--brand-ink); font-weight: 550; }
.prose .updated { font-size: 13.5px; color: var(--text-mute); margin-top: 10px; }

.footer { border-top: 1px solid var(--line-ink); }

@media (max-width: 560px) {
  .cmp { min-width: 520px; font-size: 14px; }
  .cmp th, .cmp td { padding: 13px 14px; }
}


/* answers from the account service, shown above the form */
.auth__msg {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.auth__msg--err { background: #fdeeee; border-color: #f3cccc; color: #8a2020; }
.auth__msg--ok  { background: #eafaf0; border-color: #bfe9d0; color: #12603a; }