/* ============================================================================
   Advance Basis landing — "Lattice" design system (ported from design_handoff_ergo).
   Token-driven; dark is the default theme, light is a full parallel theme.
   Tokens live on [data-theme] (see tokens block below, verbatim from the
   handoff's code-examples/tokens.css). This stylesheet is landing-only.
   ============================================================================ */

/* ---- Tokens (verbatim from handoff) ---- */
[data-theme="dark"] {
  --bg:#0C0E14;        --bg2:#10131C;
  --panel:rgba(255,255,255,.032);   --panel2:rgba(255,255,255,.06);
  --ink:#E8EAF0;       --soft:#A7ACBD;   --faint:#5B6175;
  --rule:rgba(255,255,255,.09);     --rule2:rgba(255,255,255,.16);
  --sig:#5FE6B8;       --sig2:#7DF5CC;   --sigsoft:rgba(95,230,184,.13);  --glow:rgba(95,230,184,.5);
  --green:#5FE6B8;     --amber:#E8C06A;  --rose:#FF8092;
  --brand:#CC8350;     --btnink:#08120E;
}
[data-theme="light"] {
  --bg:#EDF0F3;        --bg2:#FFFFFF;
  --panel:rgba(14,30,40,.022);      --panel2:rgba(14,30,40,.05);
  --ink:#0F1620;       --soft:#48525F;   --faint:#8A94A2;
  --rule:rgba(16,22,30,.12);        --rule2:rgba(16,22,30,.22);
  --sig:#0C8F6A;       --sig2:#0AA178;   --sigsoft:rgba(12,143,106,.09);  --glow:rgba(12,143,106,.3);
  --green:#0C8F6A;     --amber:#9A6A12;  --rose:#C8455A;
  --brand:#B5612A;     --btnink:#FFFFFF;
}

/* ---- Base ---- */
.landing-page * { box-sizing:border-box; margin:0; padding:0; }
.landing-page {
  background:var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  /* Fixed titlebar is out of flow; clear it so content starts below the bar
     and scrolls beneath it, matching the app surfaces. */
  padding-top:79px;
  padding-bottom:70px; /* clears the fixed invite banner so the footer shows */
}
.landing-page.invite-dismissed { padding-bottom:0; }
.landing-page a { color:inherit; text-decoration:none; }

/* Faint signal dot-grid backdrop */
.landing-page::before {
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(var(--sigsoft) 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.6;
  pointer-events:none;
  z-index:0;
}

/* ---- Motion (enhancement only; resting state fully visible) ---- */
@keyframes drwBlink { 0%,100% { opacity:1; } 50% { opacity:.38; } }
@keyframes drwEmit  { 0% { transform:scale(.55); opacity:.6; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes drwGlow  { 0%,100% { opacity:.32; transform:scale(1); } 50% { opacity:1; transform:scale(1.18); } }
@keyframes drwSig   { 0%,44%,100% { opacity:.5; box-shadow:0 0 0 0 rgba(0,0,0,0); } 9% { opacity:1; box-shadow:0 0 13px 1px var(--sig); } 24% { opacity:.5; box-shadow:0 0 0 0 rgba(0,0,0,0); } }
@keyframes drwLineFlow { 0% { background-position:0 -120%, 0 0; } 26% { background-position:0 220%, 0 0; } 100% { background-position:0 220%, 0 0; } }
@keyframes drwRise  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes drwModal { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

/* ---- Title bar ---- */
.landing-titlebar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:30;
  background:var(--bg);
  /* Three equal-flank columns keep the nav on the page's center axis;
     flex space-between centered it in the leftover space instead, and
     the wordmark outweighs the login button. */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  /* 16.5px measured-equal: brandmark gap to the top edge matches its gap to
     the divider line exactly, and the bar sits a hair under its old height. */
  padding:16.5px 32px;
  border-bottom:1px solid var(--rule);
}
/* Liquid-glass treatment mirroring the app topbar: translucent + blurred only
   where backdrop-filter is real, so unsupported browsers keep the solid bar. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-titlebar {
    background:color-mix(in srgb, var(--bg) 50%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
}

.landing-wordmark {
  justify-self:start;
  display:flex;
  align-items:center;
  gap:11px;
}
.landing-glyph { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--panel2); border:1px solid var(--rule2); flex:none; }
.landing-mark { width:20px; height:20px; display:block; overflow:visible; flex:none; }
.landing-mark rect { fill:var(--brand); }
/* Mirrors the authenticated topbar lockup (lattice-app.css): 24px/1.15
   wordmark (leading contains the g's descender), 1px stack gap, and the
   sentence-case Hanken slogan in brand copper. */
/* The text column box-centers against the 36px glyph via the parent's
   align-items:center; the small nudge compensates for the wordmark face
   carrying more leading above the lowercase ink than below, so the INK of
   the pair — not the boxes — centers on the brandmark. */
.ergo-lockup-text { display:flex; flex-direction:column; gap:3px; transform:translateY(-2px); }
.ergo-wordmark {
  font:700 25px/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--ink);
  letter-spacing:0.005em;
}
/* The brand word inside running copy (preview banner, invite modal): the
   wordmark face at the surrounding text size, in the signal mint. The
   .landing-page prefix outranks container rules like .ib-copy span,
   which otherwise win on specificity and file order. */
.landing-page .ergo-inline {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  letter-spacing:0.005em;
  color:var(--sig);
}

.landing-product-title {
  font:500 10px/1.3 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--brand);
}

.titlebar-cluster { display:flex; align-items:center; gap:18px; justify-self:end; }

.titlebar-login {
  font:500 11px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--ink);
  border:1px solid var(--rule2);
  padding:10px 16px;
  border-radius:6px;
  transition:border-color .25s, color .25s;
}
.titlebar-login:hover { border-color:var(--sig); color:var(--sig); }

/* ---- Layout shell ---- */
.landing-main {
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:0 auto;
  padding:0 32px;
}

/* ---- Hero ---- */
.landing-hero {
  display:grid;
  grid-template-columns:1.04fr 0.96fr;
  gap:50px;
  align-items:center;
  padding:58px 0 72px;
}
/* Progressive reveal: below the fold, the workbench section waits dimmed and
   softly blurred; --reveal (0..1, scroll-driven) draws it into clarity. Once
   fully revealed the filter is dropped entirely so nothing keeps compositing. */
.landing-tabs {
  --reveal:0;
  opacity:calc(.55 + .45*var(--reveal));
  filter:blur(calc(12px*(1 - var(--reveal))));
}
.landing-tabs.is-revealed { opacity:1; filter:none; }
/* Decorative hero loop: pages turning, floated behind the hero copy and
   spreading down until it dissolves just above the "Built for commercial
   research work" heading. Kept quiet on purpose: low opacity, blend modes
   per theme (screen lets the paper glow on dark, multiply reads as faint
   print on light), and intersecting linear masks so every edge feathers
   into the background. The layer is aria-hidden and pointer-transparent;
   reduced-motion users get nothing. */
.landing-hero { position:relative; }
.hero-loop {
  position:absolute;
  top:-8px;
  bottom:-104px;
  left:-140px;
  right:42%;
  z-index:0;
  pointer-events:none;
}
.hero-loop video {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.17;
  mix-blend-mode:screen;
  filter:saturate(.5) contrast(.95) brightness(.85);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 62%, transparent 98%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 62%, transparent 98%);
  mask-composite:intersect;
}
:root[data-theme="light"] .hero-loop video {
  opacity:.1;
  mix-blend-mode:multiply;
  filter:saturate(.4) contrast(1.02);
}
.landing-copy, .evidence-stage { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) {
  .hero-loop { display:none; }
}
/* Hero entrance: the three text blocks soft-fade in two seconds apart.
   fill-mode backwards keeps the resting style fully visible, so the
   global reduced-motion animation:none simply shows the finished hero
   (an initial opacity:0 would blank it there). */
@keyframes hero-fade {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}
.landing-copy h1 { animation:hero-fade 900ms ease 0s backwards; }
.landing-lede    { animation:hero-fade 900ms ease 2s backwards; }
.landing-subhero { animation:hero-fade 900ms ease 4s backwards; }

.landing-copy h1 {
  font:600 clamp(34px,5vw,56px)/1.05 'Hanken Grotesk',sans-serif;
  color:var(--ink);
  letter-spacing:-0.025em;
  max-width:18ch;
}
.landing-copy h1 .accent { color:var(--sig); }
.landing-lede {
  font:400 clamp(15px,1.7vw,18px)/1.6 'Hanken Grotesk',sans-serif;
  color:var(--soft);
  max-width:54ch;
  margin-top:22px;
}
.lede-feat { color:var(--ink); font-weight:500; }
/* Standalone statement under the lede, styled as a quiet pull quote: the
   hero's own Hanken voice inside a faint signal-washed card with a signal
   rule on the left. Translucent so the drifting page texture stays visible
   through it. */
.landing-subhero {
  margin-top:28px;
  font:500 clamp(15px,1.65vw,17.5px)/1.55 'Hanken Grotesk',sans-serif;
  color:var(--soft);
  max-width:56ch;
  padding:14px 20px 15px;
  border-radius:12px;
  background:linear-gradient(to right, var(--sigsoft), transparent 88%);
}
/* Always two lines: the floor sentence, then the defend sentence whole. */
.landing-subhero .subhero-lead { color:var(--sig); display:block; }
.landing-subhero .subhero-tail { display:inline-block; }
.landing-lede .lede-feat:nth-of-type(1) { color:var(--sig); }
.landing-lede .lede-feat:nth-of-type(2) { color:var(--brand); }
.landing-lede .lede-feat:nth-of-type(3) { color:var(--amber); }
.landing-lede .lede-feat:nth-of-type(4) { color:var(--rose); }

/* ---- Evidence-flow stage (hero right) ---- */
.evidence-stage {
  border:1px solid var(--rule2);
  border-radius:14px;
  background:var(--bg2);
  padding:22px 24px;
  box-shadow:0 1px 30px rgba(0,0,0,0.18);
}
.stage-label {
  font:500 10px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--sig);
  margin-bottom:20px;
}
.evidence-chain { display:flex; flex-direction:column; }
.chain-node { display:flex; gap:15px; }
.chain-rail { display:flex; flex-direction:column; align-items:center; flex:none; width:18px; }

.chain-marker { width:18px; height:18px; border-radius:50%; flex:none; z-index:1; }
/* endpoint markers (Input / Output): solid signal dot */
.chain-marker.is-end {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.chain-marker.is-end .chain-ring { display:none; }
.chain-marker.is-end .chain-core {
  width:18px; height:18px;
  border-radius:50%;
  background:var(--sig);
}
/* mid markers (01-04): hollow ring */
.chain-marker.is-mid { border:1.5px solid var(--sig); background:var(--bg2); }

/* One signal illuminates the rail top -> bottom: each node lights, then the
   line below it fills, then the next node, in sequence (not two endpoints
   pulsing at once). Delays are assigned by node position via :nth-child. */
.chain-marker.is-end .chain-core, .chain-marker.is-mid { animation:drwSig 3.2s ease-in-out infinite; }
.evidence-chain .chain-node:nth-child(1) .chain-core   { animation-delay:0s; }
.evidence-chain .chain-node:nth-child(2) .chain-marker { animation-delay:.45s; }
.evidence-chain .chain-node:nth-child(3) .chain-marker { animation-delay:.9s; }
.evidence-chain .chain-node:nth-child(4) .chain-marker { animation-delay:1.35s; }
.evidence-chain .chain-node:nth-child(5) .chain-marker { animation-delay:1.8s; }
.evidence-chain .chain-node:nth-child(6) .chain-core   { animation-delay:2.25s; }

.chain-line {
  flex:1; width:1px; min-height:14px; margin:5px 0;
  background:linear-gradient(180deg, transparent 0%, var(--sig) 50%, transparent 100%) no-repeat, var(--rule2);
  background-size:100% 60%, 100% 100%;
  background-position:0 -120%, 0 0;
  animation:drwLineFlow 3.2s linear infinite;
}
.evidence-chain .chain-node:nth-child(1) .chain-line { animation-delay:.2s; }
.evidence-chain .chain-node:nth-child(2) .chain-line { animation-delay:.65s; }
.evidence-chain .chain-node:nth-child(3) .chain-line { animation-delay:1.1s; }
.evidence-chain .chain-node:nth-child(4) .chain-line { animation-delay:1.55s; }
.evidence-chain .chain-node:nth-child(5) .chain-line { animation-delay:2s; }

.chain-body { padding-bottom:18px; }
.chain-body.is-last { padding-bottom:0; }
.chain-kicker { font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--sig); }
.chain-idx { font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:0; color:var(--faint); }
.chain-body strong { display:block; margin-top:7px; font:600 15px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); }
.chain-body p { margin-top:5px; font:400 12.5px/1.5 'Hanken Grotesk',sans-serif; color:var(--soft); }

/* ---- Workbench system ---- */
.landing-tabs { padding:14px 0 90px; }
.tab-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
  /* Divider hugs the title (22px -> 10px) with the removed 12px returned as
     margin below the rule, so nothing beneath it moves. */
  padding-bottom:10px;
  margin-bottom:12px;
}
.tab-head p {
  font:500 11px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--sig);
}
.tab-head h2 {
  font:600 clamp(26px,3vw,34px)/1.1 'Hanken Grotesk',sans-serif;
  color:var(--ink);
  letter-spacing:-0.02em;
  margin-top:13px;
}
.tab-list { display:flex; gap:8px; }
.tab-link {
  font:500 11px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--soft);
  background:transparent;
  border:1px solid var(--rule2);
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  transition:all .25s;
}
.tab-link:hover { border-color:var(--sig); color:var(--sig); }
.landing-tabs[data-active="capabilities"] .tab-capabilities,
.landing-tabs[data-active="method"] .tab-method,
.landing-tabs[data-active="review"] .tab-review {
  color:var(--ink);
  border-color:var(--sig);
}

/* Panels stack in one grid cell so the section always reserves the tallest
   panel's height: switching tabs can no longer change the document height and
   yank the scroll position (the "section jumps up" bug). */
.landing-tabs { display:grid; grid-template-columns:100%; }
.landing-tabs > .tab-head { grid-row:1; grid-column:1; }
.tab-panel { grid-row:2; grid-column:1; visibility:hidden; opacity:0; pointer-events:none; }
.landing-tabs[data-active="capabilities"] .tab-panel-capabilities,
.landing-tabs[data-active="method"] .tab-panel-method,
.landing-tabs[data-active="review"] .tab-panel-review {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  animation:drwRise .32s ease both;
}

/* Capabilities — 2x2 hairline grid */
.capability-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:12px;
  overflow:hidden;
  margin-top:26px;
}
.capability-grid > div { background:var(--bg); padding:26px 28px; }
.capability-grid span {
  font:500 10px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--sig);
}
.capability-grid h3 { font:600 18px/1.25 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:13px; }
.capability-grid p { font:400 13.5px/1.6 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:10px; }

/* Method — 5 numbered cards */
.tab-panel-method h3,
.tab-panel-review h3 {
  font:600 19px/1.35 'Hanken Grotesk',sans-serif;
  color:var(--ink);
  max-width:60ch;
}
.method-strip {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:26px;
  list-style:none;
}
.method-strip li { border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:18px; }
.method-strip li::before {
  content:attr(data-step);
  display:block;
  font:500 22px/1 'Hanken Grotesk',sans-serif;
  color:var(--sig);
}
.method-strip span { display:block; font:600 14px/1 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:12px; }
.method-strip p { font:400 12px/1.5 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:8px; }

/* Review — table */
.review-table {
  margin-top:24px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
}
.review-table > div {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:20px;
  padding:18px 24px;
  border-bottom:1px solid var(--rule);
}
.review-table > div:last-child { border-bottom:0; }
.review-table span { font:600 13.5px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); }
.review-table b { font:400 13.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); font-weight:400; }

/* ---- Footer ---- */
.landing-footer { position:relative; z-index:2; border-top:1px solid var(--rule); }
.landing-footer-inner {
  width:min(1180px,100%);
  margin:0 auto;
  padding:12px 32px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.landing-footer-mark {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font:400 10px/1.35 'IBM Plex Mono',monospace;
  letter-spacing:0;
  color:var(--faint);
}
.landing-footer-mark a { color:var(--faint); text-decoration:underline; text-underline-offset:3px; }
.landing-footer-mark a:hover { color:var(--sig); }
.landing-footer-mark .gxp-attribution {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--faint);
  text-decoration:none;
  transition:color .2s ease;
}
.landing-footer-mark .gxp-attribution img { display:block; width:11px; height:11px; flex:none; }
.landing-footer-mark .gxp-attribution span { font:500 10.5px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:0; }
.landing-footer-mark .gxp-attribution:focus-visible { outline:1px solid var(--sig); outline-offset:3px; }
.landing-footer-privacy { font:400 11px/1.4 'IBM Plex Mono',monospace; color:var(--faint); }

/* ---- Invite banner (fixed, bottom) ---- */
.invite-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--bg2);
  border-top:1px solid var(--rule2);
  box-shadow:0 -8px 30px rgba(0,0,0,0.25);
  animation:drwRise .5s ease .3s both;
}
.invite-banner-inner {
  width:min(1180px,100%);
  margin:0 auto;
  padding:14px 32px;
  display:flex;
  align-items:center;
  gap:16px;
}
.ib-dots { display:flex; gap:4px; flex:none; }
.ib-dots i { width:5px; height:14px; background:var(--brand); display:block; }
.ib-dots i:nth-child(1) { opacity:.4; }
.ib-dots i:nth-child(2) { opacity:.7; }
.ib-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ib-copy strong { font:600 13px/1.45 'Hanken Grotesk',sans-serif; color:var(--ink); padding-bottom:1px; }
.ib-copy span { font:400 12px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); }
.ib-spacer { flex:1; }
.ib-cta {
  flex:none;
  font:500 11px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--btnink);
  background:var(--sig);
  border:none;
  padding:11px 16px;
  border-radius:6px;
  cursor:pointer;
  transition:box-shadow .25s;
}
.ib-cta:hover { box-shadow:0 0 22px var(--glow); }
.ib-x {
  flex:none;
  font:400 18px/1 'Hanken Grotesk',sans-serif;
  color:var(--faint);
  cursor:pointer;
  padding:4px;
  background:transparent;
  border:0;
  transition:color .25s;
}
.ib-x:hover { color:var(--ink); }

/* ---- Invite modal ---- */
.iv-overlay {
  position:fixed; inset:0; z-index:40;
  background:rgba(4,6,12,0.80);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.iv-overlay.open { opacity:1; visibility:visible; }
.iv-modal {
  width:min(460px,100%);
  background:var(--bg2);
  border:1px solid var(--rule2);
  border-radius:14px;
  padding:30px 30px 26px;
  position:relative;
  max-height:92vh;
  overflow:auto;
  animation:drwModal .34s cubic-bezier(.22,.61,.36,1) both;
}
.iv-close {
  position:absolute; top:18px; right:20px;
  font:400 20px/1 'Hanken Grotesk',sans-serif;
  color:var(--faint);
  cursor:pointer;
  background:transparent; border:0;
  z-index:2;
}
.iv-close:hover { color:var(--ink); }
.iv-modal h2 { font:600 22px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); letter-spacing:-0.01em; }
.iv-sub { font:400 13px/1.55 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:10px; }
.iv-field { margin-top:16px; }
.iv-field:first-of-type { margin-top:20px; }
.iv-field label {
  display:block;
  font:500 9px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--faint);
}
.iv-field input, .iv-field textarea {
  width:100%;
  margin-top:8px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--rule2);
  border-radius:8px;
  padding:11px 13px;
  font:400 13px/1.4 'Hanken Grotesk',sans-serif;
  transition:border-color .18s, box-shadow .18s;
}
.iv-field textarea { min-height:54px; resize:vertical; }
.iv-field input::placeholder, .iv-field textarea::placeholder { color:var(--faint); }
.iv-field input:focus, .iv-field textarea:focus { outline:0; border-color:var(--sig); box-shadow:0 0 0 3px var(--sigsoft); }
.iv-help { font:400 11px/1.5 'Hanken Grotesk',sans-serif; color:var(--faint); margin-top:8px; }
.iv-help b { color:var(--soft); }
.iv-oauth-btns { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:4px; }
.iv-oauth-btns .iv-submit { margin-top:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.iv-oauth-btns .iv-submit svg { width:15px; height:15px; fill:currentColor; flex:none; }
.iv-prov { cursor:pointer; }
.iv-prov input { position:absolute; opacity:0; width:0; height:0; }
.iv-prov span {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px;
  border:1px solid var(--rule2);
  border-radius:8px;
  color:var(--soft);
  font:500 12px/1 'Hanken Grotesk',sans-serif;
  transition:.18s;
}
.iv-prov input:checked + span { border-color:var(--sig); color:var(--ink); background:var(--sigsoft); }
.iv-prov input:focus-visible + span { box-shadow:0 0 0 3px var(--sigsoft); }
.iv-prov svg { width:15px; height:15px; fill:currentColor; }
/* Framed, not filled: the solid mint fill is reserved for research-intake
   CTAs (AI-300 button policy). */
.iv-submit {
  width:100%; margin-top:20px;
  font:500 11px/1 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--sig);
  padding:13px;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .25s, color .25s, box-shadow .25s;
}
.iv-submit:hover { border-color:var(--sig2); color:var(--sig); box-shadow:0 0 18px var(--sigsoft); }
.iv-submit:disabled { opacity:.6; cursor:default; box-shadow:none; }
.iv-error { font:500 12px/1.4 'Hanken Grotesk',sans-serif; color:var(--rose); margin-top:10px; min-height:1px; }
.iv-note { font:400 11px/1.5 'Hanken Grotesk',sans-serif; color:var(--faint); text-align:center; margin-top:14px; }
.iv-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.iv-success { display:none; text-align:center; padding:14px 0 8px; }
.iv-overlay[data-state="success"] .iv-form { display:none; }
.iv-overlay[data-state="success"] .iv-success { display:block; }
.iv-check {
  width:52px; height:52px;
  border-radius:50%;
  border:1.5px solid var(--sig);
  box-shadow:0 0 24px var(--glow);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--sig);
  font:600 22px/1 'Hanken Grotesk',sans-serif;
}
.iv-success h2 { font:600 22px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:20px; }
.iv-success .iv-sub { max-width:36ch; margin-left:auto; margin-right:auto; }
.iv-success .iv-sub b { color:var(--ink); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) { * { animation:none !important; } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .landing-hero { grid-template-columns:1fr; gap:40px; padding:44px 0 56px; }
  .capability-grid { grid-template-columns:1fr; }
  .method-strip { grid-template-columns:repeat(2,1fr); }
  .review-table > div { grid-template-columns:1fr; gap:6px; }
}
@media (max-width: 560px) {
  .landing-titlebar {
    display:flex;
    justify-content:space-between;
    padding:16px 20px;
  }
  .landing-wordmark { min-width:0; gap:9px; }
  .titlebar-cluster { flex:none; }
  .ergo-wordmark { font-size:22px; white-space:nowrap; }
  .landing-product-title { font-size:9px; letter-spacing:.16em; }
  .landing-main { padding:0 20px; }
  .tab-head > div { width:100%; min-width:0; }
  .tab-head h2 {
    width:calc(100vw - 40px);
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
  }
  .tab-head h2 span { display:block; }
  .tab-list { max-width:100%; flex-wrap:wrap; }
  .method-strip { grid-template-columns:1fr; }
  .evidence-stage { display:none; }
  .invite-banner-inner {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px 12px;
    padding:14px 20px;
  }
  .ib-dots { grid-row:1 / span 2; }
  .ib-copy { grid-column:2 / 4; }
  .ib-spacer { display:none; }
  .ib-cta { grid-column:2; justify-self:start; }
  .ib-x { grid-column:3; justify-self:end; }
}

/* ---- Freestanding site nav in the titlebar ---- */
.landing-nav { display:flex; align-items:center; gap:6px; justify-self:center; }
.landing-nav a {
  font:700 10.5px/1 'Hanken Grotesk',sans-serif;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--soft);
  padding:7px 9px; border-radius:7px;
  transition:color .22s ease, background-color .22s ease;
}
.landing-nav a:hover,
.landing-nav a:focus-visible { color:var(--ink); background:var(--panel2); }
.landing-nav a.is-active { color:var(--sig); }
.landing-nav a.is-active:hover { background:var(--sigsoft); }
@media (max-width: 760px) { .landing-nav { display:none; } }