/*
  Coracle design system — light edition (warm paper + gold).
  Layout ratios follow a constant B ≈ 1.2337 for spacing, type, and column
  measures. Geometry tokens are unchanged from the prior edition; only the
  color ladder is inverted from dark-marine to light-paper + gold accent.

  Spacing scale (16 × B^n):
    sm10=1.96 sm9=2.42 sm8=2.98 sm7=3.68 sm6=4.54 sm5=5.60
    sm4=6.91  sm3=8.53 sm2=10.52 sm1=12.97
    s0=16  s1=19.74  s2=24.35  s3=30.04  s4=37.07  s5=45.74
    s6=56.43  s7=69.63  s8=85.92  s9=106.00

  Type scale (18 × B^n):
    tm2=11.83  tm1=14.59  t0=18  t1=22.21  t2=27.40  t3=33.82  t4=41.73

  Column widths: ultra=447  narrow=551  main=680  medium=839  wide=1035

  Letter-spacing (caps): 0.2337em
  Line-heights: body=1.621  head=1.234  drop-cap=0.811

  Color ladder (light):
    paper #F5F1E8 (page) · paper-warm #EDE7D7 (raised) · paper-bright #FFFDF7
    ink #1A1814 (text) · ink-soft #4A4439 · ink-faint #8B8170
    rule #D4CCB8 (border) · rule-soft #E2DBC8
    gold #9C6F2E (accent) · gold-soft #B8893A · gold-faint #E8D9B8
*/

:root {
  /* ---- light identity (primary names) ---- */
  --paper-bg:     #F5F1E8;
  --paper-warm:   #EDE7D7;
  --paper-bright: #FFFDF7;
  --ink:          #1A1814;
  --ink-soft:     #4A4439;
  --ink-faint:    #8B8170;
  --rule:         #D4CCB8;
  --rule-soft:    #E2DBC8;
  --gold:         #9C6F2E;
  --gold-soft:    #B8893A;
  --gold-faint:   #E8D9B8;

  /* ---- type families (next/font exposes each via a CSS variable) ---- */
  --font-display: var(--font-fraunces), 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    var(--font-source-serif), 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    var(--font-jetbrains-mono), 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---- back-compat aliases ----
     Existing sub-page CSS (legal pages, dashboard, tier cards, Clerk safety
     net) references these names. Re-pointed from the old dark-marine values
     to the light identity so every route flips in one shot. Note: the old
     --paper meant cream TEXT; it now resolves to ink, which is correct
     because every `color: var(--paper*)` use was a text color. */
  --bg:           var(--paper-bg);
  --bg-shade:     var(--paper-warm);
  --bg-bright:    var(--paper-bright);
  --paper:        var(--ink);

  /* accent ladder (was marine) → gold */
  --marine-deep:  var(--gold-soft);
  --marine:       var(--gold);
  --marine-mid:   #8A6228;
  --marine-soft:  #6E4E20;

  /* B-ratio constants */
  --b:      1.2337;
  --b-inv:  0.8106;
  --b-inv2: 0.6573;
  --b-inv3: 0.5326;

  /* spacing — B^n × 16 */
  --sm10: 1.96px;
  --sm9:  2.42px;
  --sm8:  2.98px;
  --sm7:  3.68px;
  --sm6:  4.54px;
  --sm5:  5.60px;
  --sm4:  6.91px;
  --sm3:  8.53px;
  --sm2:  10.52px;
  --sm1:  12.97px;
  --s0: 16px;
  --s1: 19.74px;
  --s2: 24.35px;
  --s3: 30.04px;
  --s4: 37.07px;
  --s5: 45.74px;
  --s6: 56.43px;
  --s7: 69.63px;
  --s8: 85.92px;
  --s9: 106.00px;

  /* type — B^n × 18 */
  --tm2: 11.83px;
  --tm1: 14.59px;
  --t0:  18px;
  --t1:  22.21px;
  --t2:  27.40px;
  --t3:  33.82px;

  /* columns — B-ratio ladder rooted at --col-main */
  --col-ultra:  446.83px;  /* main / B²  — auth cards, ultra-narrow content */
  --col-narrow: 551.18px;  /* main / B   — legal pages, sub-route prose */
  --col-main:   680px;     /* prose reading column */
  --col-medium: 838.92px;  /* interactive blocks (try-it) */
  --col-wide:  1035.17px;  /* capability / pricing grids, masthead */
  --col-widest:1277.10px;  /* full-bleed section internals */

  /* hero / oversized headline (B above --t3) */
  --t4: 41.73px;

  /* line-heights */
  --lh-body: 1.621;
  --lh-head: 1.234;
  --lh-drop: 0.811;

  /* letter-spacing for caps */
  --ls-caps: 0.2337em;

  /* opacity ladder (1/B^n) */
  --op-b:   0.8106;
  --op-b2:  0.6573;
  --op-b3:  0.5326;
  --op-b4:  0.4316;
  --op-b5:  0.3498;
  --op-b6:  0.2834;
  --op-hairline: 0.1224;

  /* text ladder — ink on warm paper (was cream-on-dark) */
  --paper-body:    var(--ink);
  --paper-muted:   var(--ink-soft);
  --paper-soft:    var(--ink-faint);
  --paper-faint:   var(--ink-faint);
  --paper-whisper: rgba(26, 24, 20, 0.34);
  --hairline:      var(--rule);
  --marine-border: rgba(156, 111, 46, 0.42);

  --stroke-anchor: 2.25px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* button reset — adopt body typography (no native button bleed-through) */
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  letter-spacing: inherit;
}

body {
  margin: 0;
  /* solid paper base with two faint radial washes layered on top */
  background:
    radial-gradient(ellipse at 15% 20%, rgba(156, 111, 46, 0.03), transparent 52%),
    radial-gradient(ellipse at 85% 80%, rgba(26, 24, 20, 0.022), transparent 52%),
    var(--paper-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--t0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* corner trim marks — printer's-proof frame, fixed to viewport. */
html::before, html::after,
body::before, body::after {
  content: "";
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
}
html::before {
  top: var(--s1); left: var(--s1);
  border-top: 1px solid var(--marine);
  border-left: 1px solid var(--marine);
}
html::after {
  top: var(--s1); right: var(--s1);
  border-top: 1px solid var(--marine);
  border-right: 1px solid var(--marine);
}
body::before {
  bottom: var(--s1); left: var(--s1);
  border-bottom: 1px solid var(--marine);
  border-left: 1px solid var(--marine);
}
body::after {
  bottom: var(--s1); right: var(--s1);
  border-bottom: 1px solid var(--marine);
  border-right: 1px solid var(--marine);
}

main {
  max-width: var(--col-main);
  margin: 0 auto;
  padding: 0 var(--s2);
}

/* Landing-style opt-out: let main hold no width clamp so each section can
   pick its own measure (hero stays narrow for legibility, capability and
   pricing grids breathe wider). Apply via <main className="wide">. */
main.wide {
  max-width: none;
  padding: 0;
}

/* ---------- masthead (horizontal: brand left, nav center, auth right) ---------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 48px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* brand block (left) */
.masthead-brand {
  display: flex;
  align-items: center;
  gap: var(--sm2);
  text-decoration: none;
  color: inherit;
}

.masthead-brand .mark {
  width:  var(--s2);
  height: var(--s2);
  display: block;
  color: var(--ink);
  opacity: 0.92;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0;
  color: var(--ink);
}

.wordmark .slash { color: var(--gold); font-style: normal; font-weight: 400; padding: 0 3px; }
.wordmark a { color: inherit; text-decoration: none; }

/* nav block (center) */
.masthead-nav {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--sm2);
  justify-content: center;
}

.masthead-nav a {
  color: inherit;
  text-decoration: none;
  padding: 0 var(--sm3);
  transition: color 0.2s ease;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.masthead-nav a:hover { color: var(--gold); }
.masthead-nav a[aria-current="page"] { color: var(--gold); }

.masthead-nav .sep {
  opacity: var(--op-b4);
  padding: 0 var(--sm6);
}

/* auth block (right) */
.masthead-auth {
  display: flex;
  align-items: center;
  gap: var(--s1);
  justify-content: flex-end;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.masthead-auth .auth-link {
  color: var(--ink-soft);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.masthead-auth .auth-link:hover { color: var(--gold); }

.masthead-auth .auth-primary {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  padding: 7px 18px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.masthead-auth .auth-primary:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bg);
}

/* Clerk avatar slot in the masthead — keep it compact */
.masthead-auth .clerk-slot { display: inline-flex; align-items: center; }

/* Account monogram (replaces Clerk UserButton).
   Initial letter in a hairline square; popover with manage-account + sign-out. */
.account-monogram {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.account-monogram-trigger {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--paper);
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  transition: border-color 120ms ease, color 120ms ease;
}
.account-monogram-trigger:hover,
.account-monogram-trigger:focus-visible {
  border-color: var(--marine);
  color: var(--marine);
  outline: none;
}

.account-monogram-menu {
  position: absolute;
  top: calc(100% + var(--sm4));
  right: 0;
  min-width: 220px;
  background: var(--bg-shade);
  border: 1px solid var(--hairline);
  z-index: 100;
  font-family: 'Fraunces', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tm1);
}

.account-monogram-identity {
  padding: var(--sm3) var(--s1);
  color: var(--paper-muted);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--tm2);
  word-break: break-all;
  line-height: 1.4;
}

.account-monogram-item {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: var(--sm3) var(--s1);
  color: var(--paper);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.account-monogram-item:hover,
.account-monogram-item:focus-visible {
  background: rgba(156, 111, 46, 0.08);
  color: var(--marine);
  outline: none;
}

/* ---------- page heading (interior pages) ---------- */

.page-heading {
  padding: var(--s7) 0 var(--s3);
  text-align: center;
}

.page-heading .eyebrow,
.eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0 0 var(--s1);
}

.page-heading h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t3);
  line-height: var(--lh-head);
  margin: 0;
  color: var(--paper-body);
}

.page-heading h1 .accent {
  color: var(--marine);
  font-style: italic;
}

.page-heading .summary {
  font-size: var(--t1);
  line-height: var(--lh-body);
  max-width: var(--col-narrow);
  margin: var(--s2) auto 0;
  color: var(--paper-muted);
}

/* ---------- lede (large opening paragraph, drop-cap style) ---------- */

.lede {
  padding: var(--s6) 0 var(--s5);
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.lede p {
  font-size: var(--t1);
  line-height: var(--lh-body);
  margin: 0;
  color: var(--paper-muted);
}

.lede p::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 4.355em;
  line-height: var(--lh-drop);
  float: left;
  padding: var(--sm3) var(--sm1) 0 0;
  color: var(--marine);
}

/* ---------- section (used by all interior sections) ---------- */

.section {
  padding: var(--s5) 0;
  border-top: 1px solid var(--hairline);
}

/* First section after page-heading: no double-up of vertical space — the
   page-heading already provides separation, so the section keeps its
   border-top hairline but doesn't need top padding. */
.page-heading + .section { padding-top: var(--s4); }

.section h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t2);
  line-height: var(--lh-head);
  margin: 0 0 var(--s3);
  color: var(--paper-body);
  text-align: center;
}

/* Legal / long-form pages (TOS, privacy, AUP). Left-aligned reading
   column; capped to narrow column for legibility. */
.legal-page {
  max-width: var(--col-narrow);
  margin: 0 auto;
  padding: var(--s7) var(--s2) var(--s9);
}
.legal-page .page-heading {
  text-align: left;
  padding: 0 0 var(--s4);
}
.legal-page .page-heading h1 {
  text-align: left;
}
.legal-page h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t1);
  line-height: var(--lh-head);
  color: var(--paper-body);
  margin: var(--s5) 0 var(--s2);
  text-align: left;
}
.legal-page h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t0);
  line-height: var(--lh-head);
  color: var(--paper-body);
  margin: var(--s3) 0 var(--s1);
  text-align: left;
}
.legal-page p,
.legal-page li {
  font-size: var(--t0);
  line-height: var(--lh-body);
  color: var(--paper-body);
  margin: 0 0 var(--s2);
}
.legal-page ul {
  padding-left: var(--s2);
  margin: 0 0 var(--s3);
}
.legal-page li {
  margin-bottom: var(--sm2);
}
.legal-page .meta {
  color: var(--paper-soft);
  font-size: var(--tm1);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--s5);
}
.legal-page a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
}
.legal-page a:hover {
  color: var(--marine-deep);
  border-bottom-color: var(--marine);
}

.section .section-intro {
  font-size: var(--t0);
  line-height: var(--lh-body);
  max-width: var(--col-narrow);
  margin: 0 auto var(--s5);
  text-align: center;
  color: var(--paper-muted);
}

/* ---------- ledger (3-up comparison row, e.g. AF3 vs Boltz vs Coracle) ---------- */

.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s2);
  max-width: var(--col-main);
  margin: 0 auto;
}

.ledger-cell {
  border: 1px solid var(--hairline);
  padding: var(--s3) var(--s2);
  text-align: center;
}

.ledger-cell.is-winner {
  border-color: var(--marine);
  background: var(--bg-shade);
}

.ledger-cell .label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0 0 var(--s1);
}

.ledger-cell.is-winner .label { color: var(--marine); }

.ledger-cell .value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t3);
  font-weight: 400;
  line-height: var(--lh-head);
  margin: 0;
  color: var(--paper-body);
}

.ledger-cell.is-winner .value { color: var(--marine); }

.ledger-cell .footnote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--tm1);
  color: var(--paper-soft);
  margin: var(--sm2) 0 0;
  line-height: var(--lh-body);
}

/* ---------- lens-list (the coracle multi-row pattern) ---------- */

.lens-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.lens-list li {
  margin: 0;
  padding: var(--s3) 0;
}

.lens-list li + li {
  border-top: 1px solid var(--hairline);
}

.lens-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--t1);
  color: var(--paper-body);
  margin: 0 0 var(--sm1);
}

.lens-desc {
  font-size: var(--t0);
  color: var(--paper-muted);
  margin: 0;
}

.lens-desc code {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  color: var(--marine);
}

/* ---------- engagement-shape (pricing tiers as definition list) ---------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s2);
  width: 100%;
  margin: 0;
}

.tier-card {
  border: 1px solid var(--hairline);
  padding: var(--s3) var(--s2);
}

.tier-card.is-highlight {
  border-color: var(--marine);
  background: var(--bg-shade);
}

.tier-card .tier-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0 0 var(--sm2);
}

.tier-card .tier-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t2);
  font-weight: 400;
  line-height: var(--lh-head);
  color: var(--paper-body);
  margin: 0;
}

.tier-card .tier-price .cadence {
  font-size: var(--tm1);
  font-style: italic;
  color: var(--paper-soft);
  margin-left: var(--sm3);
}

.tier-card .tier-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--tm1);
  color: var(--paper-soft);
  margin: var(--sm2) 0 var(--s2);
}

.tier-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--tm1);
  line-height: var(--lh-body);
  color: var(--paper-muted);
}

.tier-card ul li {
  position: relative;
  padding-left: var(--s1);
  margin: 0 0 var(--sm2);
}

.tier-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--sm6);
  height: 1px;
  background: var(--marine);
  opacity: 0.7;
}

/* ---------- Try-it demo block ---------- */

.tryit {
  max-width: var(--col-narrow);
  margin: var(--s4) auto 0;
}

.tryit-form {
  display: flex;
  flex-direction: column;
  gap: var(--sm3);
}

.tryit-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-muted);
  text-align: left;
}

.tryit-textarea {
  width: 100%;
  min-height: 110px;
  padding: var(--s1);
  background: var(--bg-shade);
  border: 1px solid var(--hairline);
  color: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--tm1);
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 120ms ease;
}
.tryit-textarea:focus {
  border-color: var(--marine);
}
.tryit-textarea::placeholder {
  color: var(--ink-faint);
}

.tryit-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sm3);
  font-size: var(--tm2);
  color: var(--paper-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.tryit-len {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--tm2);
  color: var(--paper-muted);
  letter-spacing: 0;
  text-transform: none;
}

.tryit-example-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.tryit-example-link:hover {
  color: var(--marine-deep);
  border-bottom-color: var(--marine);
}

.tryit-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  text-align: center;
}

.tryit-meta {
  font-size: var(--tm1);
  color: var(--paper-muted);
  line-height: var(--lh-body);
  margin: 0;
}

.tryit-meta code {
  font-family: 'Fraunces', Georgia, serif;
  background: var(--bg-shade);
  padding: 0 var(--sm5);
  border: 1px solid var(--hairline);
}

.tryit-result {
  margin-top: var(--s3);
  padding: var(--s2);
  border: 1px solid var(--hairline);
  background: var(--bg-shade);
}

.tryit-result.tryit-ok {
  border-left: 2px solid var(--marine);
}

.tryit-result.tryit-warn {
  border-left: 2px solid hsl(8, 56%, 56%);
}

.tryit-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t0);
  color: var(--paper-body);
  margin: 0 0 var(--sm3);
}

.tryit-headline .accent {
  color: var(--marine);
}

.tryit-result details {
  margin-top: var(--s1);
}

.tryit-result summary {
  cursor: pointer;
  font-size: var(--tm1);
  color: var(--paper-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.tryit-json {
  margin-top: var(--sm3);
  max-height: 400px;
  overflow: auto;
  padding: var(--s1);
  background: var(--bg);
  border: 1px solid var(--hairline);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--tm1);
  line-height: 1.5;
  color: var(--paper-body);
  white-space: pre;
}

/* ---------- end Try-it ---------- */

.tier-card .tier-cta {
  display: inline-block;
  margin-top: var(--s2);
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--marine);
  text-decoration: none;
  border: 1px solid var(--marine-border);
  padding: var(--sm5) var(--s1);
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.tier-card .tier-cta:hover {
  border-color: var(--marine);
  color: var(--marine-deep);
  background: var(--bg-shade);
}

/* ---------- inquire-style CTA buttons (marine, underline) ---------- */

.cta-row {
  margin: var(--s5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
}

.cta {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t1);
  color: var(--marine);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--marine-border);
  padding: 0 0 var(--sm9);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.cta:hover {
  border-bottom-color: var(--marine);
  color: var(--marine-deep);
}

.cta-quiet {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--paper-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sm9);
  transition: color 120ms ease, border-color 120ms ease;
}
.cta-quiet:hover {
  color: var(--marine);
  border-bottom-color: var(--marine-border);
}

/* ---------- engagement-shape dl (dashboard stat rows) ---------- */

.engagement-shape {
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.engagement-shape dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s2);
}

.engagement-shape > dl > div {
  border: 1px solid var(--hairline);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--sm3);
}

.engagement-shape dt {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0;
}

.engagement-shape dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t2);
  font-weight: 400;
  color: var(--paper-body);
  line-height: 1;
}

.engagement-shape .stat-sub {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--tm1);
  color: var(--paper-soft);
  margin-top: 0;
}

.engagement-shape .stat-sub a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  padding-bottom: var(--sm10);
  transition: border-color 120ms ease;
}
.engagement-shape .stat-sub a:hover { border-bottom-color: var(--marine); }

/* ---------- defensive-publication footer / quick-start callout ---------- */

.callout {
  margin: var(--s4) auto 0;
  max-width: var(--col-narrow);
  padding: var(--s3);
  background: var(--bg-shade);
  border-left: 3px solid var(--marine);
  font-size: var(--tm1);
  line-height: var(--lh-body);
  color: var(--paper-body);
}

.callout h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--marine);
  font-style: normal;
  margin: 0 0 var(--s2);
}

.callout ol, .callout ul {
  margin: 0;
  padding-left: var(--s2);
}

.callout li {
  margin: 0 0 var(--sm2);
}

.callout code {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  color: var(--marine-deep);
}

.callout a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  transition: border-color 120ms ease;
}
.callout a:hover { border-bottom-color: var(--marine); }

/* ---------- dashboard prediction history ---------- */

.history {
  margin: var(--s4) auto 0;
  max-width: var(--col-wide);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tm1);
}

.history-table thead th {
  text-align: left;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: 0.82em;
  color: var(--marine);
  padding: 0 var(--sm1) var(--sm3);
  border-bottom: 2px solid var(--marine-border);
}

.history-table tbody td {
  padding: var(--sm3) var(--sm1);
  border-bottom: 1px solid var(--marine-border);
  vertical-align: baseline;
}

.history-table tbody tr:last-child td { border-bottom: none; }

.history-table th:first-child,
.history-table td:first-child { padding-left: 0; }

.history .section-intro { margin-top: var(--s2); }

@media (max-width: 640px) {
  .history-table { font-size: 0.86rem; }
  .history-table th:nth-child(5),
  .history-table td:nth-child(5) { display: none; }
}

/* ---------- examples gallery ---------- */

.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  max-width: var(--col-wide);
  margin: var(--s3) auto 0;
}

.example-card {
  border: 1px solid var(--marine-border);
  background: var(--bg-shade);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.example-visual {
  position: relative;
  width: 100%;
  height: 320px;
  pointer-events: none;
}

.example-meta {
  padding: var(--s2);
  border-top: 1px solid var(--marine-border);
}

.example-meta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--tm2);
  margin: 0 0 var(--sm3);
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm5);
  margin: 0 0 var(--sm2);
}

.example-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marine);
  border: 1px solid var(--marine-border);
  border-radius: 2px;
  padding: 1px var(--sm5);
}

.example-blurb {
  font-size: var(--tm1);
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 760px) {
  .examples-grid { grid-template-columns: 1fr; }
  .example-visual { height: 280px; }
}

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  padding: var(--s6) 0 var(--s7);
  margin-top: var(--s5);
}

.site-footer p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0;
}
.site-footer p + p { margin-top: var(--sm2); }

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 120ms ease;
  padding-bottom: var(--sm10);
}
.site-footer a:hover { border-bottom-color: var(--marine); color: var(--marine); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  /* center nav collapses on narrow screens; brand+auth stay edges */
  .masthead { grid-template-columns: 1fr auto; padding: var(--s2) var(--s1) var(--s1); }
  .masthead-nav { display: none; }
}

@media (max-width: 640px) {
  main { padding: 0 var(--s1); }
  .masthead-brand .mark { width: var(--s2); height: var(--s2); }
  .wordmark { font-size: var(--tm2); }
  .masthead-auth { gap: var(--sm3); }
  .masthead-auth .auth-primary { padding: var(--sm6) var(--sm2); }
  .page-heading { padding: var(--s5) 0 var(--s2); }
  .page-heading h1 { font-size: var(--t2); }
  .page-heading .summary { font-size: var(--t0); }
  .ledger { grid-template-columns: 1fr; }
  .section h2 { font-size: var(--t1); }
  .lede { padding: var(--s5) 0 var(--s4); }
  .lede p { font-size: var(--t0); }
  .lede p::first-letter { font-size: 3.53em; }
  /* API keys row: stack key-id over revoke button on phone */
  .key-list li { grid-template-columns: 1fr; gap: var(--sm3); }
  .key-list li form { justify-self: start; }
}

@media (max-width: 480px) {
  /* Corner trim marks shrink + move in on the narrowest viewport */
  html::before, html::after, body::before, body::after {
    width: 9px;
    height: 9px;
  }
  html::before, html::after { top: var(--sm4); }
  body::before, body::after { bottom: var(--sm4); }
  html::before, body::before { left: var(--sm4); }
  html::after, body::after { right: var(--sm4); }
  /* Masthead crowding fix: drop the "/ rna" suffix below 480 px and
     give brand+auth a little more breathing room. */
  .masthead-brand .wordmark {
    font-size: var(--tm2);
    letter-spacing: 0.15em;
  }
  .masthead-brand .wordmark::after {
    content: "";
  }
  .masthead-auth { font-size: 10.5px; }
  .masthead-auth .auth-primary { padding: var(--sm6) var(--sm3); }
}

/* Clerk's UserButton + modal need dark-mode friendly defaults */
.cl-userButtonAvatarBox { border: 1px solid var(--hairline); }

/* dashboard stat-sub markers for pending sub-routes */
.stat-sub.stat-pending {
  color: var(--paper-soft);
  font-style: italic;
}

.aside {
  color: var(--paper-soft);
  font-style: italic;
  font-size: 0.92em;
}

/* ---------- API keys page ---------- */

.key-callout {
  border-left: 2px solid var(--marine);
  background: var(--bg-shade);
  padding: var(--s2) var(--s2);
  margin-top: var(--s2);
}
.key-callout .eyebrow {
  margin-top: 0;
  color: var(--marine-deep);
}
.key-display {
  background: var(--bg);
  border: 1px solid var(--marine-border);
  padding: var(--sm2) var(--s1);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: var(--tm1);
  overflow-x: auto;
  word-break: break-all;
  margin: var(--s1) 0 var(--sm2);
  color: var(--paper);
}

.key-row {
  display: flex;
  align-items: stretch;
  gap: var(--sm2);
  margin: var(--s1) 0 var(--sm2);
}
.key-row .key-display {
  flex: 1;
  margin: 0;
}
.copy-btn {
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--marine-border);
  color: var(--marine);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: var(--tm1);
  padding: 0 var(--s1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { background: var(--bg-shade); color: var(--ink); }
.copy-btn:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

.key-list {
  list-style: none;
  padding: 0;
  margin: var(--s2) 0;
  max-width: var(--col-narrow);
  margin-left: auto;
  margin-right: auto;
}
.key-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--hairline);
}
.key-list .key-id {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: var(--tm1);
  color: var(--paper);
  margin: 0 0 var(--sm5);
}
.key-list .aside { margin: 0; }
.key-list-revoked .key-id { color: var(--paper-soft); text-decoration: line-through; }

.callout.error {
  border-left-color: hsl(8, 56%, 56%);
  color: hsl(8, 56%, 70%);
}

pre {
  background: var(--bg-shade);
  border: 1px solid var(--hairline);
  padding: var(--s1);
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: var(--tm1);
  line-height: 1.5;
  color: var(--paper);
}

/* ---------- auth pages (sign-in / sign-up dedicated routes) ---------- */

.auth-page {
  min-height: calc(100vh - var(--s9));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s2);
}

/* Clerk root box: keep its own centering math working inside our container.
   Clamp to viewport on phones so the card never forces horizontal overflow. */
.auth-page .cl-rootBox {
  width: 100%;
  max-width: min(var(--col-narrow), calc(100vw - var(--s2) * 2));
}

/* Placeholder text needs more contrast than Clerk's default (was barely
   visible against the dark input bg). */
input::placeholder,
[class*="cl-formFieldInput"]::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

/* ---------- Clerk safety net (catches any element we didn't enumerate
   in clerk-appearance.ts). Uses :where() so specificity is 0 and the
   explicit appearance overrides always win. ---------- */

:where([class*="cl-"]) {
  color: var(--paper-body);
  font-family: 'Fraunces', Georgia, serif;
}

:where([class*="cl-internal-"] input),
:where([class*="cl-formFieldInput"]),
:where([class*="cl-otpCodeFieldInput"]) {
  color: var(--paper) !important;
  background-color: var(--bg-shade);
  caret-color: var(--paper);
}

:where([class*="cl-card"]),
:where([class*="cl-modalContent"]),
:where([class*="cl-userButtonPopoverCard"]),
:where([class*="cl-menuList"]) {
  background-color: var(--bg-shade);
  color: var(--paper-body);
}

:where([class*="cl-navbar"]) {
  background-color: var(--bg-shade);
  color: var(--paper-body);
}

:where([class*="cl-button"]):not([class*="cl-formButtonPrimary"]):not([class*="cl-socialButtonsBlockButton"]) {
  color: var(--paper-body);
}

:where([class*="cl-button"][class*="cl-button__danger"]),
:where([class*="cl-formButtonReset"]) {
  color: hsl(8, 56%, 70%);
}

:where([class*="cl-badge"]) {
  background-color: var(--bg-bright);
  color: var(--paper);
}

:where([class*="cl-text"]) {
  color: inherit;
}

/* "Secured by Clerk" badge — hide it (Clerk Pro plan allows branding removal). */
.cl-internal-114jbce,
.cl-internal-y44tp9 {
  display: none !important;
}
/* Belt-and-suspenders: catch any element whose only child link is a Clerk URL. */
[class*="cl-internal-"]:has(> a[href*="go.clerk.com"]),
[class*="cl-internal-"]:has(> a[href*="clerk.com/components"]) {
  display: none !important;
}

/* ====================================================================
   LANDING PAGE — wide light/gold layout (app/page.tsx <main className="landing">)
   All rules scoped under .landing so sub-page classes (.section, .eyebrow,
   .tier-card, etc.) keep their own styling. Colors via tokens; layout in
   the editorial measures the design was tuned at.
   ==================================================================== */

.landing {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The landing renders its own footer; suppress the shared site-footer there. */
body:has(.landing) .site-footer { display: none; }

.landing .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

.landing .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 36px;
}

/* ---- hero ---- */
.landing .hero {
  padding: 116px 0 80px;
  position: relative;
}
.landing .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 40px;
  align-items: center;
}
.landing .hero-copy {
  min-width: 0;
}
/* Slowly-spinning RNA structure (decorative, transparent, non-interactive). */
.landing .hero-visual {
  position: relative;
  width: 100%;
  height: 460px;
  pointer-events: none;
}
.landing .hero-visual canvas {
  /* 3Dmol injects a positioned canvas; keep it centered in the column */
  margin: 0 auto;
}
.landing .hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 32px;
  max-width: 20ch;
  color: var(--ink);
}
.landing .hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.landing .hero-lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 44px;
}
.landing .hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.landing .btn-primary {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper-bg);
  padding: 14px 30px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.landing .btn-primary:hover { background: var(--gold); border-color: var(--gold); }
.landing .btn-secondary {
  font-family: var(--font-body);
  color: var(--ink);
  padding: 14px 30px;
  border: 1px solid var(--rule);
  text-decoration: none;
  font-size: 15px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}
.landing .btn-secondary:hover { border-color: var(--ink); }

/* ---- try-demo panel (wraps the TryItDemo client component) ---- */
.landing .try-demo {
  margin-top: 88px;
  border: 1px solid var(--rule);
  background: rgba(255, 253, 247, 0.6);
  padding: 36px 40px;
}
.landing .try-demo-grid {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 40px;
  align-items: stretch;
}
.landing .try-demo-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing .try-demo-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.landing .try-demo textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  line-height: 1.6;
  min-height: 84px;
  padding: 0;
}
.landing .try-demo textarea::placeholder { color: var(--ink-faint); }
.landing .try-demo-examples {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.landing .try-demo-example {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--gold-faint);
  font-style: italic;
  transition: color 0.2s, border-color 0.2s;
}
.landing .try-demo-example:hover { color: var(--gold); border-color: var(--gold); }
.landing .try-demo-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  text-align: right;
}
.landing .try-demo-submit {
  background: var(--ink);
  color: var(--paper-bg);
  border: 1px solid var(--ink);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, border-color 0.2s;
}
.landing .try-demo-submit:hover { background: var(--gold); border-color: var(--gold); }
.landing .try-demo-submit:disabled { opacity: 0.55; cursor: default; }
.landing .try-demo-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
}
.landing .try-demo-len {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* try-demo result states */
.landing .try-demo-result {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.landing .try-demo-result-head {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 10px;
}
.landing .try-demo-result-head .ok { color: var(--gold); font-style: italic; }
.landing .try-demo-result-head .warn { color: #9a3b2c; font-style: italic; }
.landing .try-demo-result p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  line-height: 1.6;
}
.landing .try-demo-result a { color: var(--gold); }
.landing .try-demo-result details { margin-top: 12px; }
.landing .try-demo-result summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.landing .try-demo-result pre {
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  padding: 20px;
  background: var(--ink);
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #c0b29a;
  white-space: pre;
}

/* live 3D structure viewer (3Dmol host) */
.landing .try-demo-viewer {
  width: 100%;
  height: 360px;
  margin: 18px 0 8px;
  border: 1px solid var(--rule);
  background: var(--paper-bright);
  position: relative;
  overflow: hidden;
}
.landing .try-demo-viewer canvas { display: block; }
.landing .try-demo-viewer-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---- definition block ---- */
.landing .definition {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  padding: 72px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.landing .def-term {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.landing .def-gloss {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ---- generic landing section ---- */
.landing .section {
  padding: 92px 0;
  border-top: 1px solid var(--rule);
  background: transparent;
}
.landing .section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 52px;
}
.landing .section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.landing .section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.landing .section h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0 0 24px;
  max-width: 20ch;
  color: var(--ink);
  text-align: left;
}
.landing .section h2 em { font-style: italic; color: var(--gold); }

/* ---- benchmark bars ---- */
.landing .benchmark {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 88px;
  align-items: center;
}
.landing .benchmark-note {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 44ch;
}
.landing .benchmark-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.landing .benchmark-bars {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.landing .bar-row {
  display: grid;
  grid-template-columns: 132px 1fr 112px;
  gap: 28px;
  align-items: center;
}
.landing .bar-label {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}
.landing .bar-label small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 5px;
}
.landing .bar-track { height: 1px; background: var(--rule); position: relative; }
.landing .bar-fill {
  position: absolute;
  left: 0;
  top: -2px;
  height: 5px;
  background: var(--ink-soft);
}
.landing .bar-fill.gold {
  background: var(--gold);
  height: 8px;
  top: -3.5px;
  box-shadow: 0 0 0 1px var(--gold-faint);
}
.landing .bar-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  text-align: right;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.landing .bar-value.gold { color: var(--gold); font-weight: 400; font-size: 36px; }
.landing .bar-value small { font-size: 14px; color: var(--ink-faint); letter-spacing: 0; }

/* ---- capabilities grid ---- */
.landing .capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.landing .capability {
  padding: 46px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  background: rgba(255, 253, 247, 0.35);
}
.landing .capability-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 26px;
}
.landing .capability h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.landing .capability p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.landing .capability code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--paper-warm);
  padding: 2px 7px;
  color: var(--gold);
}
.landing .capability-featured { background: var(--ink); grid-column: 1 / -1; }
.landing .capability-featured h3 { color: var(--paper-bg); }
.landing .capability-featured p { color: var(--gold-faint); }
.landing .capability-featured .capability-num { color: var(--gold-soft); }
.landing .capability-featured code {
  background: rgba(184, 137, 58, 0.18);
  color: var(--gold-soft);
}

/* ---- classes strip ---- */
.landing .classes-strip {
  padding: 54px 0 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}
.landing .classes-strip h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.6;
}
.landing .classes-list { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.landing .class-pill {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 7px 16px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  background: rgba(255, 253, 247, 0.5);
}

/* ---- provenance / trust ---- */
.landing .trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.landing .trust-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 48ch;
}
.landing .trust-body p.lede {
  color: var(--ink);
  font-size: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 26px;
}
.landing .trust-code {
  background: var(--ink);
  color: var(--paper-bg);
  padding: 34px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
}
.landing .trust-code::before {
  content: "response.json";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing .trust-code .key { color: var(--gold-soft); }
.landing .trust-code .str { color: #c0b29a; }
.landing .trust-code .com { color: var(--ink-faint); font-style: italic; }
.landing .trust-code .num { color: #d4c4a0; }

/* ---- pricing ---- */
.landing .pricing-intro {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 60px;
  max-width: 58ch;
  line-height: 1.6;
}
.landing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.landing .tier {
  padding: 42px 30px 38px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.landing .tier:first-child { border-left: none; }
.landing .tier-featured { background: var(--paper-warm); }
.landing .tier-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.landing .tier-price {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1;
  color: var(--ink);
}
.landing .tier-price small { font-size: 15px; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }
.landing .tier-audience {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 30px;
}
.landing .tier-features { list-style: none; margin: 0 0 30px; padding: 0; flex: 1; }
.landing .tier-features li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  line-height: 1.45;
}
.landing .tier-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.2s;
  cursor: pointer;
}
.landing .tier-cta:hover { color: var(--gold); }

/* ---- landing footer ---- */
.landing .landing-footer {
  padding: 54px 0 32px;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-faint);
}
.landing .landing-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}
.landing .landing-footer .footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.landing .landing-footer a { color: var(--ink-faint); text-decoration: none; transition: color 0.2s; }
.landing .landing-footer a:hover { color: var(--gold); }

/* ---- landing responsive ---- */
@media (max-width: 900px) {
  .landing .container { padding: 0 24px; }
  .landing .hero { padding: 60px 0 44px; }
  .landing .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .landing .hero-visual { height: 300px; order: -1; }
  .landing .try-demo { padding: 28px; }
  .landing .try-demo-grid { grid-template-columns: 1fr; gap: 24px; }
  .landing .try-demo-actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .landing .try-demo-submit { width: auto; }
  .landing .definition,
  .landing .benchmark,
  .landing .trust,
  .landing .classes-strip { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .landing .definition { padding: 48px 0; }
  .landing .section { padding: 56px 0; }
  .landing .capabilities { grid-template-columns: 1fr; }
  .landing .capability { padding: 32px 24px; }
  .landing .pricing-grid { grid-template-columns: 1fr; }
  .landing .tier { border-left: none; border-top: 1px solid var(--rule); min-height: auto; }
  .landing .tier:first-child { border-top: none; }
  .landing .bar-row { grid-template-columns: 104px 1fr 92px; gap: 16px; }
  .landing .bar-value { font-size: 24px; }
  .landing .bar-value.gold { font-size: 28px; }
}


/* WebGL hero structure is wasteful on small phones — drop it there. */
@media (max-width: 560px) {
  .landing .hero-visual { display: none; }
}

/* ============================================================
   Live pocket-detection demo (landing, section 02)
   ============================================================ */
.pocket-demo {
  margin-top: 52px;
  border: 1px solid var(--gold-faint);
  border-radius: 14px;
  background: var(--bg-bright);
  padding: 28px;
}
.pocket-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.pocket-demo-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.pocket-demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pocket-demo-tab {
  border: 1px solid var(--gold-faint);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pocket-demo-tab:hover { border-color: var(--gold-soft); color: var(--ink); }
.pocket-demo-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-bright);
}
.pocket-demo-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.pocket-demo-viewer-wrap { position: relative; }
.pocket-demo-viewer {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 10px;
  background: var(--paper-warm);
  overflow: hidden;
}
.pocket-demo-legend {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.pocket-demo-legend .swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.pocket-demo-legend .swatch.gold { background: #9C6F2E; }
.pocket-demo-legend .swatch.teal { background: #1F8A8A; }
.pocket-demo-side { display: flex; flex-direction: column; justify-content: center; }
.pocket-demo-status { color: var(--ink-soft); font-size: 0.9rem; }
.pocket-demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.pocket-demo-table th {
  text-align: left;
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-bottom: 1px solid var(--gold-faint);
}
.pocket-demo-table td {
  padding: 6px 8px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-warm);
}
.pocket-demo-table tr.is-top td {
  color: var(--ink);
  font-weight: 600;
  background: rgba(156, 111, 46, 0.08);
}
.pocket-demo-note {
  margin-top: 16px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .pocket-demo-grid { grid-template-columns: 1fr; }
  .pocket-demo-viewer { height: 280px; }
}

/* ---- protein aggregation try-it: sequence trace + hot segment ---- */
.seq-trace {
  font-family: var(--font-jetbrains-mono), monospace;
  font-size: var(--tm1, 0.82rem);
  line-height: 1.7;
  word-break: break-all;
  background: var(--paper-bright, #fffdf7);
  border: 1px solid var(--rule, #d4ccb8);
  padding: var(--sm3, 0.8rem);
  margin: var(--sm3, 0.8rem) 0;
}
.seq-trace .seq-hot {
  background: var(--gold-faint, #e8d9b8);
  color: var(--marine-deep, #163b48);
  font-weight: 600;
  padding: 0 1px;
  border-radius: 2px;
}

/* ---- catalysis showcase (enzyme picker -> predicted vs measured) ---- */
.landing .catalysis-select {
  width: 100%;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 14px;
  padding: 12px 14px;
  background: var(--paper-bright, #fffdf7);
  border: 1px solid var(--rule, #d4ccb8);
  border-radius: 4px;
  color: var(--marine-deep, #163b48);
}
.landing .kcat-compare {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.landing .kcat-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing .kcat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6450);
}
.landing .kcat-value {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 26px;
  font-weight: 400;
  color: var(--marine-deep, #163b48);
}
.landing .kcat-value.gold { color: var(--gold, #9C6F2E); }
.landing .kcat-value.ok { color: var(--gold, #9C6F2E); }
.landing .kcat-value.warn { color: #9a3b2c; }

/* ---- method-page benchmark table ---- */
.bench-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 4px 0 8px; }
.bench-table th, .bench-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.1)); }
.bench-table th { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: var(--ls-caps, 0.08em); text-transform: uppercase; color: var(--ink-soft, #555); }
.bench-table td:nth-child(2) { font-family: var(--font-mono, monospace); }
.bench-table tr.bench-ours td { color: var(--gold, #9C6F2E); font-weight: 600; }
.bench-note { margin-top: 14px; color: var(--ink-soft, #555); font-size: 0.92rem; line-height: var(--lh-body, 1.6); }

/* ---- per-residue aggregation profile strip (try-it) ---- */
.landing .agg-profile {
  display: flex; align-items: flex-end; gap: 1px;
  height: 52px; margin: 12px 0 2px;
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.12));
}
.landing .agg-profile .agg-bar {
  flex: 1 1 0; min-width: 0;
  background: var(--gold-faint, rgba(156,111,46,0.28));
}
.landing .agg-profile .agg-bar.hot { background: var(--gold, #9C6F2E); }