/* ============ ONYX — obsidian gateway ============ */
/* Everything is grayscale. Hierarchy comes from finish
   (matte vs. gloss) and light (bevels, raking sheen),
   never from hue. */

:root {
  --void:      #050506;  /* page — matte black            */
  --void-2:    #08080a;  /* alternating band              */
  --onyx:      #0d0d10;  /* raised surfaces               */
  --onyx-2:    #131318;  /* raised, lit top               */
  --graphite:  #1c1c21;  /* hairlines / bevels            */
  --graphite-2:#2a2a31;  /* brighter edge                 */
  --ash:       #8a8a92;  /* secondary text                */
  --ash-dim:   #63636b;  /* tertiary / captions           */
  --bone:      #d8d8dc;  /* primary text                  */
  --spec:      #f4f4f7;  /* specular highlight only        */

  --edge: 1px solid var(--graphite);
  --r: 14px;
  --maxw: 1440px;

  /* One gutter for every container — nav, hero, sections, footer, doc shell.
     If they drift apart the brand stops lining up with the content below it
     and the bar reads as unfinished. Scales continuously, so there is no
     width at which the page has the wrong margin. */
  --gutter: clamp(1.15rem, 3.4vw, 2rem);
  /* Height of the sticky bar. Anchor jumps clear it and the docs sub-nav
     sticks directly below it, so it has to be right: nav.js overwrites this
     with the measured height on load and on resize. These values are the
     no-JS approximation. */
  --nav-h: 72px;

  /* "Archivo Expanded" is not a Google Fonts family — it never loaded and this
     always fell through to Archivo. Kept plain so the dashboard can match. */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Jumping to #pricing must not park the heading under the sticky bar. */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* fine film grain so large black fields don't band */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash-dim);
}

/* ---------- shared raised-surface material ---------- */
.card {
  position: relative;
  background:
    linear-gradient(180deg, var(--onyx-2) 0%, var(--onyx) 42%, var(--void) 130%);
  border: var(--edge);
  border-radius: var(--r);
  border-top-color: var(--graphite-2);   /* top edge catches light */
  box-shadow:
    0 1px 0 rgba(255,255,255,.035) inset,  /* bevel highlight */
    0 30px 60px -30px #000;
}

/* ================= NAV ================= */
/* Full-bleed bar: the background and hairline span the viewport edge to edge
   at every width, while the contents stay aligned with the page container
   via .nav__inner. The bar therefore takes NO max-width of its own — that
   belongs to the inner wrapper. Without .nav__inner in the markup the bar
   loses its flex context and its padding, which is what made it read as
   half-finished. */
.nav {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  /* Opaque first: engines without color-mix drop the whole declaration and
     would otherwise leave page content scrolling through the bar. */
  background: rgba(5, 5, 6, .88);
  background: color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid color-mix(in srgb, var(--graphite) 60%, transparent);
}
.nav__inner {
  display: flex; align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  max-width: var(--maxw); margin: 0 auto;
  padding: .85rem var(--gutter);
  /* Deliberately NOT var(--nav-h): nav.js writes the measured bar height into
     that variable, and the bar's height includes a border this box does not.
     Feeding it back in here would grow the bar by a pixel on every measure. */
  min-height: 44px;
}
.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand__gloss {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--spec), #6a6a72 34%, #0b0b0d 72%);
  box-shadow: 0 0 0 1px var(--graphite), 0 0 14px -2px rgba(255,255,255,.25);
}
.brand__word {
  font-family: var(--f-display);
  font-weight: 900; letter-spacing: .14em; font-size: 1.05rem;
  transition: color .2s var(--ease);
}
/* The logo is the way home from every page, so it has to answer the hover
   that a reader tries on it. */
.brand:hover .brand__word { color: var(--spec); }
/* Links sit next to the brand; the auto margin on the right pushes whatever
   follows them (buttons, or the dashboard user badge) to the far edge. */
.nav__links {
  display: flex; align-items: center;
  gap: clamp(.8rem, 1.7vw, 1.6rem);
  margin-right: auto;
  min-width: 0;
}
.nav__links a {
  position: relative;
  font-family: var(--f-mono); font-size: clamp(.75rem, .55vw + .58rem, .82rem);
  color: var(--ash); letter-spacing: .04em;
  transition: color .2s var(--ease);
  padding: .3rem 0; white-space: nowrap;
}
.nav__links a:hover { color: var(--bone); }

/* Where am I: lit text plus a specular underline — the same "light marks the
   active surface" rule the cards use, no hue involved. aria-current is the
   only source of truth, so the visual state and the state a screen reader
   announces cannot drift: "page" is written in the markup for the real
   current page, "true" is set by the scroll-spy for the section in view. */
.nav__links a[aria-current] { color: var(--spec); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--spec) 22%, var(--spec) 78%, transparent);
  transition: opacity .2s var(--ease);
}
.nav__links a[aria-current]::after {
  opacity: 1;
  box-shadow: 0 0 10px -2px rgba(255,255,255,.5);
}
/* Hover previews that underline at a fraction of the brightness, so the
   active item still reads as the brightest thing in the bar. */
.nav__links a:hover::after { opacity: .32; }

.nav__signin { margin-left: 0; flex: none; }
.nav__cta { margin-left: .4rem; flex: none; }

/* ---- mobile menu ---- */
.nav__burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--graphite);
  border-radius: 10px; cursor: pointer;
}
.nav__burger:hover { border-color: var(--graphite-2); }
.nav__burger span {
  display: block; width: 16px; height: 1px; background: var(--bone);
  position: relative;
}
.nav__burger span::before,
.nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px;
  background: var(--bone); transition: transform .22s var(--ease), opacity .22s;
}
.nav__burger span::before { top: -5px; }
.nav__burger span::after { top: 5px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: .84rem; letter-spacing: .04em;
  padding: .72em 1.4em; border-radius: 10px;
  cursor: pointer;                       /* .btn is used on <button> too */
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), color .2s;
  will-change: transform;
}
/* the "black accent": a glossy obsidian pill that catches light */
.btn--key {
  color: var(--spec);
  background: linear-gradient(180deg, #2b2b31 0%, #131317 46%, #050506 100%);
  border: 1px solid var(--graphite-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 12px 28px -14px #000;
}
.btn--key:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 16px 34px -14px #000,
    0 0 26px -6px rgba(255,255,255,.14);
}
.btn--ghost {
  color: var(--ash);
  background: transparent;
  border: 1px solid var(--graphite);
}
.btn--ghost:hover { color: var(--bone); border-color: var(--graphite-2); }
.btn--big { padding: .95em 2em; font-size: .95rem; }

/* ================= HERO ================= */
.hero {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 5.5rem var(--gutter) 3rem;
}
.hero__slab {
  position: relative;
  padding: 3.5rem clamp(1.4rem, 4vw, 3.4rem) 3rem;
  border-radius: 22px 22px 0 0;          /* .ticker closes the bottom corners */
  border: var(--edge); border-top-color: var(--graphite-2);
  background:
    radial-gradient(120% 90% at 50% -10%, #141419 0%, var(--onyx) 40%, var(--void) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 50px 90px -50px #000;
  overflow: hidden;
}
/* raking specular band — swept on load, then parked */
.hero__slab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.07) 52%, transparent 62%);
  transform: translateX(-40%);
  animation: sheen 2.6s var(--ease) .3s both;
}
@keyframes sheen { to { transform: translateX(40%); } }

.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  /* The floor has to stay low enough for the longest line ("EVERY MODEL.",
     held on one line by a non-breaking space) to fit the slab on a 320px
     phone. A 2.9rem floor stopped the type shrinking below a ~516px viewport
     and the slab — which clips — ate the last two letters. */
  font-size: clamp(1.95rem, 9vw, 6.6rem);
  line-height: .92;
  letter-spacing: -.01em;
  margin: 1.1rem 0 1.4rem;
}
.hero__title .line { display: block; }
/* beveled-metal type: grayscale gradient lit from above, not a flat color */
.hero__title .line,
.metal {
  background: linear-gradient(180deg,
    var(--spec) 0%, var(--bone) 26%, #8f8f97 58%, #3a3a41 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.hero__lede {
  max-width: 46ch; color: var(--ash);
  font-size: 1.12rem; margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.6rem; }

/* terminal */
.terminal {
  border: var(--edge); border-top-color: var(--graphite-2);
  border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, var(--onyx-2), var(--void));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.terminal__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--graphite);
  background: linear-gradient(180deg, #131318, #0b0b0e);
}
.terminal__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4a4a52, #101014);
  box-shadow: 0 0 0 1px #000 inset;
}
.terminal__path {
  margin-left: auto; font-family: var(--f-mono);
  font-size: .74rem; color: var(--ash-dim);
}
.terminal__body {
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.75;
  padding: 1.2rem 1.3rem; color: var(--bone);
  white-space: pre-wrap; word-break: break-word;
}
.c-mut { color: var(--ash-dim); }
.c-str { color: #a9a9b0; }
.c-kw  { color: var(--spec); font-weight: 500; }
.c-hi  { color: var(--spec); text-shadow: 0 0 12px rgba(255,255,255,.3); }

/* ticker */
/* Stacks directly under .hero__slab with a 1px hairline between them, so the
   two read as one block: square where they meet, 22px on the outer corners. */
.ticker {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 1px; border: var(--edge); border-top: none;
  border-radius: 0 0 22px 22px;
  overflow: hidden; background: var(--graphite);
}
.ticker li {
  background: var(--void-2); padding: 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.ticker b {
  font-family: var(--f-display); font-weight: 800; font-size: 1.9rem;
  color: var(--bone); line-height: 1;
}
.ticker b span { font-size: .9rem; color: var(--ash); margin-left: .1em; }
.ticker__k {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ash-dim);
}

/* ================= CAPABILITY STRIP ================= */
.strip {
  max-width: var(--maxw); margin: 4.5rem auto 0;
  padding: 0 2rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
}
.strip__item { border-top: 1px solid var(--graphite); padding-top: 1.2rem; }
.strip__idx {
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--bone); display: block; margin-bottom: .5rem;
}
.strip__item p { color: var(--ash); font-size: .96rem; }

/* ================= SECTIONS ================= */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: 6rem var(--gutter);
}
.section__head { max-width: 60ch; margin-bottom: 3rem; }
.section__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.02;
  letter-spacing: -.01em; margin: .8rem 0 .8rem; color: var(--bone);
}
.section__sub { color: var(--ash); font-size: 1.05rem; max-width: 52ch; }

.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- models ---- */
.facet { padding: 1.8rem 1.6rem 1.6rem; display: flex; flex-direction: column; }
.facet--lit {
  background:
    linear-gradient(180deg, #17171d 0%, var(--onyx) 46%, var(--void) 130%);
  border-top-color: #34343c;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 70px -34px #000,
    0 0 40px -20px rgba(255,255,255,.08);
}
.facet--muted {
  background:
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
  border-top-color: var(--graphite);
  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset,
    0 20px 40px -30px #000;
}
.facet__head { display: flex; align-items: center; gap: .7rem; }
.facet__icon {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bone);
  border: 1px solid var(--graphite-2); border-radius: 8px;
  background: linear-gradient(180deg, var(--onyx-2), var(--void));
}
.facet__icon svg { width: 16px; height: 16px; }
.facet__name {
  font-family: var(--f-display); font-weight: 900; font-size: 1.5rem;
  letter-spacing: .01em; color: var(--bone);
}
.facet__ver { color: var(--ash-dim); font-weight: 600; }
.facet__by {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash-dim); margin: .5rem 0 .8rem;
}
/* 3.2em = exactly two lines at line-height 1.6, so one- and two-line blurbs
   occupy the same box and every card's specs and id chip line up. */
.facet__for { color: var(--ash); font-size: .9rem; margin-bottom: 1.3rem; min-height: 3.2em; }
.spec { display: grid; gap: .1rem; margin-bottom: 1.3rem; }
.spec > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--graphite);
}
.spec dt { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); }
.spec dd { font-family: var(--f-mono); font-size: .92rem; color: var(--bone); }
.facet__id {
  margin-top: auto;                      /* pin to card bottom regardless of blurb length */
  display: block; font-family: var(--f-mono); font-size: .78rem;
  color: var(--ash); background: var(--void); padding: .6rem .8rem;
  border-radius: 8px; border: 1px solid var(--graphite);
}

/* ---- quickstart steps ---- */
.steps { list-style: none; display: grid; gap: 1.2rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  align-items: start; padding: 1.7rem;
  border: var(--edge); border-top-color: var(--graphite-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--onyx), var(--void-2));
}
.step__n {
  font-family: var(--f-display); font-weight: 900; font-size: 2rem;
  color: transparent;
  background: linear-gradient(180deg, #45454d, #16161a);
  -webkit-background-clip: text; background-clip: text;
  line-height: 1;
}
.step__body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; margin-bottom: .4rem; color: var(--bone); }
.step__body p { color: var(--ash); margin-bottom: 1rem; font-size: .98rem; }
.code {
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.7;
  background: var(--void); border: 1px solid var(--graphite);
  border-radius: 10px; padding: 1rem 1.1rem; color: var(--bone);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* ---- pricing ---- */
.plan { padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.plan--lit {
  background: linear-gradient(180deg, #17171d 0%, var(--onyx) 48%, var(--void) 130%);
  border-top-color: #38383f;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 44px 74px -34px #000, 0 0 46px -22px rgba(255,255,255,.09);
}
.plan__name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bone);
  display: flex; align-items: center; gap: .6rem;
}
.plan__tag {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em;
  padding: .28em .6em; border: 1px solid var(--graphite-2); border-radius: 999px;
  color: var(--ash); text-transform: uppercase;
}
.plan__price { margin: 1.1rem 0 .4rem; display: flex; align-items: baseline; gap: .3rem; }
.plan__amt {
  font-family: var(--f-display); font-weight: 900; font-size: 3rem; line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, var(--spec), var(--bone) 30%, #6a6a72 100%);
  -webkit-background-clip: text; background-clip: text;
}
.plan__per { font-family: var(--f-mono); color: var(--ash-dim); font-size: .9rem; }
.plan__meta {
  display: block;
  font-family: var(--f-mono); font-size: .82rem;
  color: var(--ash-dim); margin-top: .2rem;
}
.plan__note { color: var(--ash); font-size: .92rem; margin-bottom: 1.4rem; min-height: 3.4em; }
.pricing__note {
  margin-top: 2rem;
  font-family: var(--f-mono); font-size: .76rem;
  color: var(--ash-dim); line-height: 1.6;
}
.pricing__note a { color: var(--bone); border-bottom: 1px solid var(--graphite-2); }
.plan__list { list-style: none; display: grid; gap: .7rem; margin-bottom: 1.8rem; }
.plan__list li {
  font-size: .94rem; color: var(--bone); padding-left: 1.4rem; position: relative;
}
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--spec), #4a4a52 60%, #101014);
}
.plan__cta { margin-top: auto; width: 100%; }

/* ---- tier split: pay-as-you-go above, subscriptions below ---- */
.tier-split {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 3.4rem 0 2.2rem;
}
.tier-split::before, .tier-split::after { content: ""; height: 1px; flex: 1; }
.tier-split::before { background: linear-gradient(90deg, transparent, var(--graphite)); }
.tier-split::after  { background: linear-gradient(90deg, var(--graphite), transparent); }
.tier-split__label { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.tier-split__label span {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ash-dim);
}

/* ---- subscriptions: deliberately quieter than pay-as-you-go ----
   Flat --void-2 surface instead of the raised .card gradient, mono
   name instead of display, and no metal gradient on the amount — the
   specular finish stays with the primary offer. */
.subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sub {
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem;
  background: var(--void-2);
  border: var(--edge);
  border-radius: 12px;
}
.sub--lit {
  background: var(--onyx);
  border-top-color: var(--graphite-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 26px 48px -30px #000;
}
.sub__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: 1.1rem;
}
.sub__name {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ash);
}
.sub--lit .sub__name { color: var(--bone); }
.sub__tag {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash);
  padding: .3em .6em; border: 1px solid var(--graphite-2); border-radius: 999px;
}
.sub__price { display: flex; align-items: baseline; gap: .28rem; }
.sub__amt {
  font-family: var(--f-display); font-weight: 800; font-size: 1.95rem;
  line-height: 1; color: var(--bone);
}
.sub__per { font-family: var(--f-mono); font-size: .78rem; color: var(--ash-dim); }
.sub__credits {
  font-family: var(--f-mono); font-size: .74rem; color: var(--ash);
  margin: .85rem 0 .5rem;
  padding-top: .85rem; border-top: 1px solid var(--graphite);
}
.sub__for {
  font-size: .87rem; color: var(--ash-dim); line-height: 1.55;
  margin-bottom: 1.3rem;
}
.sub__cta { margin-top: auto; width: 100%; font-size: .78rem; padding: .64em 1em; }

/* ---- enterprise: one wide slab, closes the pricing block ---- */
.ent {
  margin-top: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 1.7rem 1.9rem;
}
.ent__name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bone);
  margin-bottom: .45rem;
}
.ent__body { max-width: 62ch; }
.ent__note { color: var(--ash); font-size: .92rem; line-height: 1.55; }
.ent__list {
  list-style: none; display: grid; gap: .5rem; margin-top: 1.1rem;
}
.ent__list li {
  font-size: .9rem; color: var(--bone);
  padding-left: 1.4rem; position: relative;
}
.ent__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--spec), #4a4a52 60%, #101014);
}
.ent__cta { flex-shrink: 0; }

/* ---- data & security ---- */
.sec { padding: 1.8rem 1.6rem; }
.sec__name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--bone); margin-bottom: .8rem;
}
.sec__note { color: var(--ash); font-size: .93rem; line-height: 1.6; }
.sec__note a { color: var(--bone); border-bottom: 1px solid var(--graphite-2); }
.section__sub a { color: var(--bone); border-bottom: 1px solid var(--graphite-2); }

/* ================= PARTNER PROGRAM ================= */
/* These four cards used to read as one flat wall. The fix is INSIDE the card,
   not between cards.

   Depth comes from one clear first read per card — the deal figure, at 2.1rem
   display type with a metal fill. Before, the brightest thing on the card was
   a .9rem mono line (--spec) while the title sat dimmer at 1.1rem, so five
   text blocks between .88 and 1.1rem competed and none won.

   All four surfaces are deliberately IDENTICAL. Pricing tiers earn an accent
   because one plan is genuinely the recommended one; these are four different
   kinds of business, and lighting one of them tells a reader their own case is
   the secondary option. The row is a set of doors, not a ranking — so light
   is distributed evenly and hierarchy lives in the type scale. */
.prog {
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Hover lights the card but never moves it: four cards in a row that each
   jump 2px on pointer-over made the whole band feel unstable while reading
   across it. Light alone is enough to say "this one is under the cursor". */
.prog:hover {
  border-top-color: #3a3a44;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 36px 64px -32px #000,
    0 0 46px -22px rgba(255,255,255,.07);
}

.prog__type {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ash-dim); margin-bottom: .55rem;
}
/* Second read: the card's identity, so it stays at full --bone. Dropping it to
   --ash put the title on the same tone as the note and the bullets, which
   flattened the card from the inside — the exact problem being fixed here. */
.prog__name {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .01em; color: var(--bone); margin-bottom: 1.1rem;
}

/* The deal, and the reason to scan the row — display weight, metal fill,
   with the hairline under it closing the header block. */
.prog__figure {
  display: flex; flex-direction: column; gap: .3rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--graphite);
}
.prog__num {
  font-family: var(--f-display); font-weight: 900;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.01em;
  color: transparent;
  background: linear-gradient(180deg, var(--spec), var(--bone) 34%, #6e6e77 100%);
  -webkit-background-clip: text; background-clip: text;
}
.prog__unit {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash-dim); line-height: 1.4;
}
/* Three lines reserved: the longest note runs to three at column width, and
   holding the space keeps the hairline and the list below it on one line
   across all four cards. */
.prog__note { color: var(--ash); font-size: .9rem; margin-bottom: 1.3rem; min-height: 4.8em; }
/* The list is TOP-anchored, not bottom-anchored. `margin-top: auto` used to
   push it against the card floor, so any bullet that wrapped to two lines grew
   the block upward and started that card's list higher than its neighbours —
   at 1280–1400px the four lists began at three different heights, up to 41px
   apart. Anchoring to the top keeps every list on the same baseline as the
   card next to it; the leftover space now collects at the bottom, where an
   uneven amount of empty surface is invisible. */
.prog__list { list-style: none; display: grid; gap: .6rem; }
/* Supporting detail: a step below the figure and the note, so the eye lands
   on the deal first and reads the bullets only after choosing a card. */
.prog__list li {
  font-size: .85rem; color: var(--ash); line-height: 1.5;
  padding-left: 1.15rem; position: relative;
}
/* Dashes, not spheres: four cards x four spec-weight bullets read as noise at
   this size. But at --graphite-2 (#2a2a31) on this surface the dash was below
   the threshold of visible and the bullets read as unindented text, so the
   marker carries --bone: bright enough to register as a list, thin enough
   (1px x 6px) not to compete with the words. */
.prog__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--bone);
}

/* ---- application form ---- */
/* Centred block: the heading sits over the form rather than off to its left. */
.apply__head { max-width: 52ch; margin-left: auto; margin-right: auto; text-align: center; }
.apply__head .section__sub { max-width: none; }
.apply__form { max-width: 640px; margin: 0 auto; padding: 2.2rem 2rem; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block; margin-bottom: .5rem;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash);
}
.field__opt { color: var(--ash-dim); letter-spacing: .06em; }
.field input,
.field select,
.field textarea {
  width: 100%; padding: .8rem .9rem;
  font-family: var(--f-body); font-size: .95rem; color: var(--bone);
  background: var(--void);
  border: 1px solid var(--graphite); border-radius: 10px;
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--graphite-2); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--spec); outline-offset: 2px;
  border-color: var(--graphite-2);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ash-dim); }
.apply__submit { width: 100%; margin-top: .4rem; }
.apply__msg {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: 10px;
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.5;
  border: 1px solid var(--graphite); background: var(--void-2);
}
/* grayscale only — the border weight carries the state, not hue */
.apply__msg--ok  { color: var(--bone); border-color: var(--graphite-2); }
.apply__msg--err { color: var(--bone); border-left: 2px solid var(--spec); }

/* ---- partner FAQ ---- */
.faq__item { padding: 1.6rem 1.5rem; }
.faq__q {
  font-family: var(--f-display); font-weight: 800; font-size: 1rem;
  letter-spacing: .02em; color: var(--bone); margin-bottom: .7rem;
}
.faq__a { color: var(--ash); font-size: .92rem; line-height: 1.6; }

/* ---- reliability ---- */
.reliability .section__head { margin-bottom: 2rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--graphite); border: var(--edge); border-radius: var(--r); overflow: hidden; }
.metric { background: var(--void-2); padding: 2.6rem 1.6rem; text-align: left; }
.metric b { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.6rem); display: block; line-height: 1; margin-bottom: .6rem; }
.metric span { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); }

/* ================= CLOSER ================= */
.closer { padding-top: 2rem; }
.closer__slab {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 2rem;
  border-radius: 22px; border: var(--edge); border-top-color: var(--graphite-2);
  background: radial-gradient(120% 120% at 50% 0%, #16161c 0%, var(--onyx) 42%, var(--void) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 50px 90px -50px #000;
}
.closer__slab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% -20%, rgba(255,255,255,.10), transparent 70%);
}
.closer__title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: .98; margin-bottom: 1rem;
  background: linear-gradient(180deg, var(--spec), var(--bone) 30%, #56565e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.closer__sub { color: var(--ash); max-width: 50ch; margin: 0 auto 2rem; font-size: 1.08rem; }

/* ================= FOOTER ================= */
.foot { max-width: var(--maxw); margin: 0 auto; padding: 3rem var(--gutter) 4rem; border-top: 1px solid var(--graphite); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.foot__brand { font-size: 1.1rem; letter-spacing: .18em; }
.foot__links { display: flex; gap: 1.6rem; }
.foot__links a { font-family: var(--f-mono); font-size: .8rem; color: var(--ash); }
.foot__links a:hover { color: var(--bone); }
.foot__fine { font-size: .78rem; color: var(--ash-dim); max-width: 60ch; line-height: 1.6; }

/* ================= JS-DRIVEN LIGHT ================= */
/* cursor-tracked reflection injected into [data-sheen] slabs */
.reflect {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.10), rgba(255,255,255,.03) 34%, transparent 60%);
}
.hero__slab > *:not(.reflect),
.closer__slab > *:not(.reflect) { position: relative; z-index: 1; }

/* scroll reveal */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ================= ACCESSIBILITY ================= */
:focus-visible { outline: 2px solid var(--spec); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slab::before { animation: none; transform: translateX(0); opacity: .5; }
  .btn { transition: color .2s; }
  .btn--key:hover { transform: none; }
}

/* ================= PAYMENT MODAL ================= */
.pm-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity .28s var(--ease);
}
.pm-backdrop.pm-open { opacity: 1; }
.pm-backdrop[hidden] { display: none; }

.pm-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(160deg, #141419 0%, var(--onyx) 52%, var(--void) 120%);
  border: 1px solid var(--graphite-2);
  border-radius: 22px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 40px 80px -30px #000,
    0 0 60px -20px rgba(255,255,255,.06);
  transform: scale(.93) translateY(14px);
  transition: transform .32s var(--ease);
}
.pm-backdrop.pm-open .pm-card { transform: scale(1) translateY(0); }

.pm-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--onyx); border: 1px solid var(--graphite);
  color: var(--ash); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.pm-close:hover { color: var(--bone); background: var(--onyx-2); }

.pm-eyebrow { margin-bottom: .5rem; }

.pm-title {
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.55rem; color: var(--bone);
  margin-bottom: .4rem; line-height: 1.1;
}

.pm-amount {
  font-family: var(--f-mono); font-size: .9rem;
  color: var(--ash); margin-bottom: 1.8rem;
}

/* method cards */
.pm-methods { display: grid; gap: .9rem; margin-bottom: 1.6rem; }

.pm-method {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, var(--onyx-2), var(--void-2));
  border: 1px solid var(--graphite);
  border-top-color: var(--graphite-2);
  border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.pm-method:hover {
  border-color: var(--graphite-2);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 12px 28px -16px #000,
    0 0 22px -8px rgba(255,255,255,.10);
}

.pm-method__icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #1e1e25, #0a0a0d);
  border: 1px solid var(--graphite-2);
  color: var(--bone);
}
.pm-method__icon--sbp { color: var(--ash); }

.pm-method__body {
  display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0;
}
.pm-method__name {
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--bone);
}
.pm-method__hint {
  font-family: var(--f-mono); font-size: .72rem; color: var(--ash-dim);
  letter-spacing: .03em;
}

.pm-method__arrow { color: var(--ash-dim); flex: none; transition: transform .2s var(--ease), color .2s; }
.pm-method:hover .pm-method__arrow { transform: translateX(3px); color: var(--ash); }

.pm-footer {
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--ash-dim); text-align: center; letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .pm-backdrop, .pm-card { transition: none; }
}
@media (max-width: 480px) {
  .pm-card { padding: 1.8rem 1.4rem 1.5rem; }
}

/* ================= RESPONSIVE ================= */
/* Between 901px and 1100px the five links plus two buttons get tight before
   anything actually collides — the type and gaps shed a little early so the
   bar never has to wrap on a laptop. */
@media (max-width: 1100px) {
  .nav__signin, .nav__cta { padding: .66em 1.1em; font-size: .8rem; }
}

@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  .grid--3, .grid--4, .strip, .ticker, .metrics, .subs { grid-template-columns: 1fr 1fr; }

  /* Bar collapses to: brand · Sign up · burger.
     The links and Sign in drop into a disclosure panel below, but the primary
     CTA stays on the bar — hiding a sign-up behind a burger costs more than
     the 90px it saves. */
  /* Orders leave 0 free on purpose: the brand keeps it, and any page-specific
     child that never got an order (the admin badge, say) defaults to 0 and
     lands next to it rather than jumping ahead of the logo. */
  .nav__inner { flex-wrap: wrap; gap: .7rem; padding: .65rem var(--gutter); }
  .brand { order: 0; margin-right: auto; }
  .nav__cta { order: 2; margin-left: 0; }
  .dash-nav-user { order: 2; margin-left: 0; flex-wrap: wrap; row-gap: .4rem; }
  .nav__burger { display: inline-flex; order: 3; margin-left: 0; }

  .nav__links {
    display: none;
    order: 10; flex-basis: 100%; margin: 0;
    /* stretch, not the desktop centre: each row then spans the full width, so
       the whole line is tappable and the labels align with the page below. */
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--graphite);
    padding-top: .3rem;
  }
  .nav__signin { display: none; order: 11; flex-basis: 100%; margin: .45rem 0 .25rem; }
  .nav__inner.is-open .nav__links { display: flex; }
  .nav__inner.is-open .nav__signin { display: inline-flex; }

  /* 44px minimum tap target, and the active marker moves to the left edge
     where a stacked list expects it. */
  .nav__links a { padding: .8rem .2rem; font-size: .85rem; }
  .nav__links a::after { left: 0; right: auto; width: 16px; bottom: .62rem; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--3, .grid--4, .strip, .ticker, .metrics, .subs { grid-template-columns: 1fr; }
  .hero { padding-top: 3.5rem; }
  .hero__slab { padding: 2.2rem 1.3rem; }
  .step { grid-template-columns: 1fr; gap: .8rem; }
  .section { padding: 4rem var(--gutter); }
  .facet__for, .plan__note, .prog__note { min-height: 0; }
  .ticker li { padding: 1.1rem 1.2rem; }
  .foot__links { flex-wrap: wrap; gap: 1rem 1.4rem; }
  .foot { padding: 2.5rem var(--gutter) 3rem; }
  .apply__form { padding: 1.6rem 1.2rem; }
  .ent { padding: 1.4rem 1.3rem; }
}

/* Narrow phones: nothing may overflow horizontally at 320px. Brand, CTA and
   burger have to share ~288px of usable width once the gutter is removed. */
@media (max-width: 400px) {
  .nav__inner { gap: .5rem; }
  .brand__gloss { width: 13px; height: 13px; }
  .brand__word { font-size: .92rem; letter-spacing: .1em; }
  .nav__cta { padding: .58em .9em; font-size: .75rem; }
}