/* Pinakes site — the single, locked design system.
   Source of truth for the marketing/docs pages (index + docs/pricing/signup/
   status/catalog). The dashboard SPA under /app/ is intentionally separate.

   Aesthetic: WebMCP-flavored card system (white cards, hairline borders, lift
   on hover, single-select category chips, grid/list toggle, monospace tool
   labels) layered on Pinakes' paper + evergreen restraint. One brighter accent
   only — a warm citron/lime (--zest) — used sparingly for liveliness.
   Paper #faf9f6, evergreen #2f5d50, system stacks, no gradients (one optional
   faint dot-grid behind the hero only), no emoji, no external assets. */

:root{
  /* surfaces */
  --paper:#faf9f6;        /* page background */
  --card:#ffffff;         /* card fill, lifts off paper */
  --card-hover:#fffefb;   /* card fill on hover */
  --sunken:#f4f3ee;       /* control-bar / inset wells */

  /* ink — two tiers: headings + body. --ink2 lightened from #1a1a18 (a
     near-clone of --ink #16160f, indistinguishable) to #33332b so body text is
     a deliberate, perceptible step below headings rather than accidental drift. */
  --ink:#16160f;          /* headings */
  --ink2:#33332b;         /* body */
  --ink-press:#000;       /* pressed/active fill on dark buttons */
  --muted:#6b6e66;        /* secondary */
  --soft:#6e7169;         /* tertiary/captions — AA-compliant (4.7:1 on paper);
                             stays a hair lighter than --muted to keep the tier.
                             Was #9a9c92 (2.6:1) which failed WCAG AA on real text. */

  /* lines */
  --hair:#e4e3dd;         /* hairline */
  --hair2:#d8d7d0;        /* slightly stronger line for hover/focus */

  /* brand + the one new accent */
  --accent:#2f5d50;       /* evergreen — primary brand */
  --accent-soft:#cfe0d9;  /* evergreen tint border */
  --accent-wash:#eef3f1;  /* faint evergreen card-tint for featured */
  --zest:#c4d92e;         /* the lively accent — citron/lime */
  --zest-ink:#5e6a09;     /* readable text-on-paper version of zest */
  --zest-wash:#f6f9e2;    /* pale zest fill for active chip / hover */
  --zest-line:#dfe89a;    /* zest-tinted border for active chip */
  --zest-line2:#e4ec9a;   /* zest-tinted border for stage/license tag */

  /* inline-code chip (on paper) */
  --code-inline-bg:#f0efe9;

  /* terminal (dark) */
  --code:#1b1b18; --codeink:#edece4; --codemuted:#83857c; --prompt:#7e9b8d;
  --code-line:#3a3a35;       /* copy-button border on the dark terminal */
  --code-line-hover:#56564f; /* copy-button border on hover */
  --copy-ink:#8a8c84;        /* copy-button label */

  /* status dots — darkened from #b8862f (2.91:1) to clear the 3:1 non-text
     threshold against the sunken well behind status dots. */
  --warn:#9a6f1f;

  /* type */
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* type scale — six steps replacing ~16 ad-hoc sizes. 12px is the micro floor. */
  --fs-xs:12px;       /* micro-labels: chips, seg, footer, tags, copy, eyebrow, key, code */
  --fs-sm:13px;       /* nav links, captions, notes, card descriptions */
  --fs-base:16px;     /* body + subhead */
  --fs-h3:18px;       /* third-tier headings */
  --fs-h2:22px;       /* section headings */
  --fs-display:clamp(30px,5vw,42px); /* hero H1 + inner H1 (the largest type) */

  /* line-height — one body rhythm, one tight rhythm for headings/titles */
  --lh-body:1.6;
  --lh-tight:1.3;

  /* weight ladder — 700 reserved for the largest display headings */
  --fw-display:700;
  --fw-head:600;
  --fw-med:500;
  --fw-body:400;

  /* spacing ramp — replaces the dozens of one-off px margins */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;

  /* card padding — one comfortable pad, one compact row pad */
  --pad-card:18px;
  --pad-row:14px 16px;

  /* motion + shape */
  --r-sm:6px; --r:10px; --r-lg:14px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --t-fast:120ms var(--ease);
  --t:180ms var(--ease);
  --lift:0 1px 2px rgba(22,22,15,.04), 0 6px 18px rgba(22,22,15,.06);
  --lift-sm:0 1px 2px rgba(22,22,15,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* visually-hidden but available to assistive tech (the copy-status live region) */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
body{
  margin:0; background:var(--paper); color:var(--ink2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-base); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:920px; margin:0 auto; padding:var(--s5) 28px var(--s7)}
a{color:inherit; text-decoration:none}

/* ---- focus (keyboard) ----------------------------------------------------- */
/* Many controls set border:0 (.btn, .nav-cta, .seg) or custom borders, which can
   suppress or weaken the UA focus ring. Give every interactive element one clear,
   consistent keyboard-only indicator. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.chip:focus-visible,
.seg:focus-visible,
.copy:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* On the dark terminal the evergreen ring is low-contrast; use the zest accent. */
.copy:focus-visible{outline-color:var(--zest)}

/* ---- nav (sticky) --------------------------------------------------------- */

nav{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s3); margin:0 -28px var(--s6); padding:14px 28px;
  background:rgba(250,249,246,.8);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t);
}
nav.scrolled{border-bottom-color:var(--hair); box-shadow:var(--lift-sm)}
.mark{font-size:var(--fs-base); font-weight:var(--fw-head); letter-spacing:-.01em; display:flex; align-items:center; gap:9px}
.mark svg{display:block; flex:none}
.nav-right{display:flex; align-items:center; gap:20px}
.links{display:flex; gap:20px; font-size:var(--fs-sm); color:var(--muted)}
.links a:hover{color:var(--ink2)}
.links a[aria-current]{color:var(--ink2)}
.nav-cta{
  font-size:var(--fs-sm); font-weight:var(--fw-med); color:var(--paper); background:var(--ink2);
  border-radius:8px; padding:7px 15px; white-space:nowrap;
  transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav-cta:hover{background:var(--ink-press); transform:translateY(-1px); box-shadow:var(--lift-sm); color:var(--paper)}
.nav-cta:active{transform:translateY(0); box-shadow:none; background:var(--ink-press)}

/* ---- hero ----------------------------------------------------------------- */

.hero{position:relative}
/* ASSET SLOT: hero motif — optional faint dot-grid, texture only (no gradient
   fill of the page). Remove this single rule to drop it entirely. */
.hero-motif{
  position:absolute; inset:-24px -28px 0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--hair) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}
/* on inner-page headers the motif is a faint backdrop only — dial it back */
.pagehead .hero-motif{inset:-24px -28px -8px; opacity:.38}
.hero > :not(.hero-motif){position:relative; z-index:1}

.brandline{font-size:var(--fs-display); line-height:1.06; font-weight:var(--fw-display);
  letter-spacing:-.024em; color:var(--ink); margin:0 0 var(--s1)}
.phonetic{
  display:inline-block; font-family:var(--mono); font-size:14px; line-height:1;
  font-weight:var(--fw-med); letter-spacing:.02em; color:var(--soft);
  border:1px solid var(--hair); border-radius:var(--r-sm); padding:5px 9px;
  margin:0 0 18px;
}

/* Display headings share one ramp so the hero H1 is the largest type on the
   site and inner H1s sit at the same size — never out-scaling the homepage. */
h1{font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:var(--fw-display); letter-spacing:-.024em; margin:0 0 var(--s3); color:var(--ink)}
.hero h1{font-size:var(--fs-display); line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:0 0 var(--s3); font-weight:var(--fw-display)}
.inner h1{font-size:var(--fs-display); line-height:1.1; letter-spacing:-.022em; font-weight:var(--fw-display)}
.sub{font-size:var(--fs-base); line-height:var(--lh-body); color:var(--muted); max-width:640px; margin:0 0 var(--s5)}

/* ---- pagehead: two-zone page header (text + a right-zone anchor) ----------- */
/* The defining layout fix: every page header is a balanced grid — h1+sub on the
   left at a text measure, a small monospace meta anchor on the right — so no
   fold leaves an empty top-right quadrant. Inner pages also carry the faint
   hero-motif dot-grid as a header backdrop (same rule the hero uses). */
.pagehead{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
          align-items:end; gap:var(--s5); margin-bottom:var(--s6)}
/* lift the real content above the absolutely-positioned motif backdrop, but
   leave the motif itself absolute (so it doesn't claim a grid cell). */
.pagehead > :not(.hero-motif){position:relative; z-index:1}
.pagehead .ph-text{min-width:0}
/* the left zone owns the header's bottom spacing via the grid, so the sub inside
   it sheds its own bottom margin (no double gap before the next section). */
.pagehead .ph-text .sub{margin-bottom:0}

/* right-zone meta: a small monospace fact card that anchors the dead space */
.ph-meta{justify-self:end; align-self:end; max-width:300px;
         font-family:var(--mono); font-size:var(--fs-xs); line-height:1.7; letter-spacing:.02em;
         color:var(--soft); text-align:right}
.ph-meta b{display:block; font-weight:var(--fw-med); color:var(--ink2)}
.ph-meta .ph-dot{color:var(--zest-ink)}
/* status page: the preview banner IS the right-zone anchor — cap its width and
   drop its standalone bottom margin (the grid owns the header gap). */
.ph-banner{justify-self:end; align-self:end; max-width:340px; margin:0; align-items:flex-start}

@media (max-width:760px){
  /* stack the right zone under the text on phones; left-align it there */
  .pagehead{grid-template-columns:1fr; gap:var(--s3); align-items:start}
  .pagehead .ph-text .sub{margin-bottom:0}
  .ph-meta{justify-self:start; text-align:left; max-width:none}
  .ph-banner{justify-self:stretch; max-width:none}
}

/* ---- terminal blocks (dark, the strongest element) ------------------------ */

.term{position:relative; background:var(--code); border-radius:var(--r);
      font-family:var(--mono); font-size:var(--fs-sm); line-height:var(--lh-body);
      /* reserve room on the right so the absolutely-positioned COPY button never
         overlaps a long first line. */
      padding:13px 64px 13px 15px; color:var(--codeink); overflow-x:auto; box-shadow:0 1px 2px rgba(0,0,0,.05);
      /* preserve authored line breaks (one command per line) and indents; wrap long
         lines instead of forcing a horizontal scrollbar. Without this, newlines
         between the <span> lines collapse to spaces and every command runs together.
         overflow-wrap:anywhere + word-break:normal wraps at spaces between tokens,
         not mid-token (so `organism:eq:Zaire`, `ncbi-virus` stay intact). */
      white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal}
/* The prompt sigil and any output/log lines are not part of the command, so they
   are unselectable — a manual drag-select + copy yields only the command(s), and
   the copy button uses the clean data-copy payload regardless. */
.term .p{color:var(--prompt); -webkit-user-select:none; user-select:none}
.term .o{color:var(--codemuted); -webkit-user-select:none; user-select:none}
/* the "proof" line: reproducible:true gets a leading zest dot via .ok */
.term .ok{color:var(--codeink); -webkit-user-select:none; user-select:none}
.term .ok::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
      background:var(--zest); margin-right:7px; vertical-align:middle}
.copy{position:absolute; top:11px; right:12px; font-family:var(--mono); font-size:var(--fs-xs);
      letter-spacing:.06em; color:var(--copy-ink); background:var(--code); border:1px solid var(--code-line); border-radius:4px;
      padding:3px 8px; cursor:pointer; transition:color var(--t-fast), border-color var(--t-fast)}
.copy:hover{color:var(--codeink); border-color:var(--code-line-hover)}
.copy:active{color:var(--codeink); border-color:var(--zest)}

/* ---- tabbed code group (docs: per-client MCP setup) ----------------------- */
/* Light underline tabs on paper, sitting above the dark .term block they switch.
   One client visible at a time; every panel reuses the same .term primitive, so
   copy buttons + styling come for free. Vanilla JS (site.js) does the switching;
   with JS off, the first panel shows and the rest stay hidden (Claude Code first). */
.codegroup{margin:6px 0 4px}
.cg-tabs{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--hair); margin:0 0 var(--s2)}
.cg-tab{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.01em; padding:7px 12px;
        border:0; border-bottom:3px solid transparent; margin-bottom:-1px; background:transparent;
        color:var(--muted); cursor:pointer; white-space:nowrap;
        transition:color var(--t-fast), border-color var(--t-fast)}
.cg-tab:hover{color:var(--ink2)}
/* active tab: a 3px zest underline + zest-ink label so it reads on paper (the old
   2px wash was ~1.5:1, near-invisible). The weight stays for a non-colour cue. */
.cg-tab[aria-selected="true"]{color:var(--zest-ink); font-weight:var(--fw-head); border-bottom-color:var(--zest)}
.cg-tab:active{color:var(--ink)}
.cg-cap{font-size:var(--fs-sm); color:var(--muted); margin:0 0 10px; line-height:1.5; max-width:640px}
.cg-cap code{font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink2); background:var(--code-inline-bg);
        border:1px solid var(--hair); border-radius:4px; padding:1px 5px}
.cg-panel[hidden]{display:none}
.cg-panel .term{margin:0}
/* In-prose code on the doc pages: cap standalone terminals + code groups to the
   prose measure so their right edge aligns with the body text instead of forming
   a second, wider right edge. The home hero/demo terminals are full-width by
   design and live outside body.inner, so they're unaffected. */
.body.inner > .wrap > .term,
.body.inner > .wrap > .codegroup{max-width:640px}

.eyebrow{font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin:var(--s6) 0 var(--s3); font-weight:var(--fw-head)}

/* ---- the card primitive (catalog + home + plans) -------------------------- */

.card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r);
  box-shadow:var(--lift-sm); padding:var(--pad-card);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover{
  background:var(--card-hover); transform:translateY(-2px);
  box-shadow:var(--lift); border-color:var(--hair2);
}
.body.reduce-motion .card:hover{transform:none}
/* .card.static — informational cards that do NOT navigate (the home props, the
   docs command/use-case cards, the signup method cards). They keep the card
   surface but drop the lift + zest-tick so they don't read as clickable. */
.card.static:hover{background:var(--card); transform:none; box-shadow:var(--lift-sm); border-color:var(--hair)}
.card.static:hover .tick{background:var(--hair2)}

/* the three home props as cards */
.props{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin:var(--s6) 0 4px}
.prop{position:relative}
/* evergreen line-icon per prop (Tabler glyphs, inline SVG) — replaces the old inert
   3px tick dash; coherent with the line-drawn hero illustration. */
.prop .prop-ico{display:block; width:22px; height:22px; color:var(--accent); margin:0 0 var(--s3)}
/* promote the "Complete" prop (carries the Ebola proof line) — reuse the featured-
   plan treatment: evergreen wash + 2px zest top edge. .prop is position:relative. */
.prop.feature,.card.static.prop.feature:hover{background:var(--accent-wash); border-color:var(--accent-soft)}
.prop.feature::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
      background:var(--zest); border-radius:var(--r) var(--r) 0 0}
.card:hover .tick{background:var(--zest)}
/* prop titles are <h2> for a skip-free heading outline; .prop-t restyles them to
   the small card-title look (overriding the global h2 size/margin/colour). */
.prop .prop-t{font-size:15px; line-height:var(--lh-tight); letter-spacing:normal; color:var(--ink2); margin:0 0 6px; font-weight:var(--fw-head)}
.prop p{font-size:var(--fs-sm); color:var(--muted); margin:0; line-height:var(--lh-body)}

/* ---- buttons -------------------------------------------------------------- */

.cta{display:flex; align-items:center; gap:18px; margin-top:var(--s6); flex-wrap:wrap}
.btn{background:var(--ink2); color:var(--paper); font-size:14px; font-weight:var(--fw-med); border-radius:8px;
     padding:11px 24px; border:0; cursor:pointer; display:inline-block;
     transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast)}
.btn:hover{background:var(--ink-press); transform:translateY(-1px); box-shadow:var(--lift-sm); color:var(--paper)}
.btn:active{transform:translateY(0); box-shadow:none; background:var(--ink-press)}
.body.reduce-motion .btn:hover{transform:none}
.btn.ghost{background:transparent; color:var(--ink2); border:1px solid var(--hair)}
.btn.ghost:hover{background:transparent; border-color:var(--accent); color:var(--accent); box-shadow:none}
.btn.ghost:active{transform:translateY(0); box-shadow:none; background:var(--accent-wash)}
.key{font-family:var(--mono); font-size:var(--fs-xs); color:var(--soft)}
.note{font-size:var(--fs-sm); color:var(--muted); margin:var(--s2) 0 0}
.note .tag{vertical-align:middle}
.mt40{margin-top:var(--s6)}

/* contained closing CTA band — reuses the featured-card treatment (evergreen wash +
   2px zest top edge); the key lives in a real copyable .term, not bare text. */
.cta-band{position:relative; overflow:hidden; text-align:center; background:var(--accent-wash);
      border:1px solid var(--accent-soft); border-radius:var(--r); padding:var(--s6) var(--s5); margin:var(--s6) 0 0}
.cta-band::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--zest)}
.cta-band .eyebrow{margin-top:0}
.cta-band .sub{margin-left:auto; margin-right:auto}
.cta-band .cta-key{max-width:440px; margin:var(--s3) auto var(--s4); text-align:left}
.cta-band .cta{justify-content:center; margin-top:0}

footer{margin-top:var(--s6); padding-top:18px; border-top:1px solid var(--hair);
       display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--soft)}
footer a:hover{color:var(--ink2)}

/* ---- shared content primitives (the inner pages) -------------------------- */

h2{font-size:var(--fs-h2); line-height:var(--lh-tight); font-weight:var(--fw-head); letter-spacing:-.015em; color:var(--ink); margin:var(--s6) 0 var(--s2)}
/* third tier: 18px with extra top air so it reads as a real step below h2 and
   no longer collapses into the 15/600 card-title look. */
h3{font-size:var(--fs-h3); line-height:var(--lh-tight); font-weight:var(--fw-head); color:var(--ink2); margin:var(--s5) 0 var(--s1)}
.prose{max-width:640px}
.prose p{color:var(--muted); margin:0 0 var(--s2); line-height:var(--lh-body)}
.prose ul,.prose ol{color:var(--muted); margin:0 0 var(--s2); padding-left:20px; line-height:var(--lh-body)}
.prose li{margin:5px 0}
.prose code,code.inline{font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink2);
      background:var(--code-inline-bg); border:1px solid var(--hair); border-radius:4px; padding:1px 5px}
.prose a{color:var(--accent); border-bottom:1px solid var(--hair)}
.prose a:hover{border-color:var(--accent)}

/* tag: a small monospace pill — license/posture/stage badges */
.tag{display:inline-block; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.04em;
     color:var(--muted); background:transparent; border:1px solid var(--hair); border-radius:4px;
     padding:2px 7px; vertical-align:middle}
.tag.soft{color:var(--soft)}
.tag.accent{color:var(--accent); border-color:var(--accent-soft)}
/* the liveliest pill: license/stage posture — the new accent earns visibility */
.tag.stage{color:var(--zest-ink); background:var(--zest-wash); border-color:var(--zest-line2)}

/* ---- command-surface cards (docs) ----------------------------------------- */

.cmd-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); margin:18px 0 var(--s2)}
.cmd{padding:var(--pad-row)}
.cmd .n{font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink2); font-weight:var(--fw-head)}
.cmd .d{font-size:var(--fs-sm); color:var(--muted); margin:5px 0 0; line-height:var(--lh-body)}

/* ---- filter bar + view toggle (catalog + home preview) -------------------- */

.controls{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  flex-wrap:wrap; background:var(--sunken); border:1px solid var(--hair);
  border-radius:var(--r); padding:10px 12px; margin:var(--s1) 0 18px;
}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-size:var(--fs-xs); padding:6px 12px; border-radius:999px; border:1px solid var(--hair);
  background:var(--card); color:var(--muted); cursor:pointer; white-space:nowrap;
  transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.chip:hover{border-color:var(--hair2); background:var(--card-hover)}
.chip:active{background:var(--zest-wash)}
/* active chip: zest border + weight 600 so the single selection is legible
   without leaning on the near-invisible wash alone. */
.chip.active{background:var(--zest-wash); border-color:var(--zest); color:var(--zest-ink); font-weight:var(--fw-head)}

.toggle{display:inline-flex; background:var(--sunken); border:1px solid var(--hair); border-radius:999px; padding:3px}
.seg{
  font-size:var(--fs-xs); padding:5px 14px; border-radius:999px; border:0; background:transparent;
  color:var(--muted); cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg:active{color:var(--ink2)}
.seg.active{background:var(--card); color:var(--ink2); box-shadow:var(--lift-sm)}

/* ---- catalog: grid (cards) vs list (dense rows) --------------------------- */

.catalog[data-view="grid"] .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2)}
.catalog[data-view="list"] .grid{display:block}

.cat{background:var(--card); border:1px solid var(--hair); border-radius:var(--r);
     box-shadow:var(--lift-sm); padding:var(--pad-card); display:flex; flex-direction:column;
     transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
.cat:hover{background:var(--card-hover); transform:translateY(-2px); box-shadow:var(--lift); border-color:var(--hair2)}
.body.reduce-motion .cat:hover{transform:none}
.cat .head{display:flex; align-items:center; gap:9px; margin:0 0 8px}
.cat .tick{width:14px; height:3px; border-radius:2px; background:var(--hair2); flex:none; transition:background var(--t)}
.cat:hover .tick{background:var(--zest)}
.cat .name{font-size:15px; font-weight:var(--fw-head); color:var(--ink2)}
.cat .cat-cat{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.04em; color:var(--soft); margin:0 0 8px; text-transform:none}
/* flex:1 so descriptions grow to fill the card: in grid view (.cat is a column)
   this evens out card heights across a row; in list view (.cat is a row) it lets
   the description take the remaining width. */
.cat .desc{font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-body); flex:1}
.cat .desc .tag{margin-left:0; margin-top:8px; display:inline-block}
.cat.hidden{display:none}

/* list view: collapse cards to dense baseline rows (the old .cat layout) */
.catalog[data-view="list"] .cat{
  background:transparent; border:0; border-top:1px solid var(--hair); border-radius:0;
  box-shadow:none; padding:13px 2px; flex-direction:row; align-items:baseline; gap:12px;
}
.catalog[data-view="list"] .cat:hover{transform:none; background:transparent; box-shadow:none; border-color:var(--hair)}
/* The first *visible* row gets no top hairline. site.js flags it with .first-shown
   on every filter change, because :first-of-type is structural and would leave a
   stray hairline on the new first row once a filter hides the literal first card.
   .first-shown wins; the :not(.first-shown) guard on the fallback prevents two
   rows from both dropping their border after JS runs. The :first-of-type fallback
   covers the unfiltered default before/without JS. */
.catalog[data-view="list"] .grid > .cat.first-shown{border-top:0}
.catalog[data-view="list"] .grid:not(.js-filtered) > .cat:first-of-type{border-top:0}
.catalog[data-view="list"] .cat .tick{display:none}
.catalog[data-view="list"] .cat .head{margin:0; flex:none; width:148px}
.catalog[data-view="list"] .cat .cat-cat{display:none}
.catalog[data-view="list"] .cat .desc{flex:1}
.catalog[data-view="list"] .cat .desc .tag{margin:0 0 0 6px}

.empty{display:none; color:var(--muted); font-size:var(--fs-sm); padding:20px 2px}
.empty.show{display:block}

/* ---- pricing plan cards (on the card system) ------------------------------ */

.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:var(--s5) 0 4px; align-items:stretch}
.plan{position:relative; background:var(--card); border:1px solid var(--hair); border-radius:var(--r);
      box-shadow:var(--lift-sm); padding:var(--s4) 20px; display:flex; flex-direction:column;
      transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
.plan:hover{transform:translateY(-2px); box-shadow:var(--lift); border-color:var(--hair2)}
.body.reduce-motion .plan:hover{transform:none}
/* featured plan: the single best home for the new accent — 2px zest top edge */
.plan.feature{background:var(--accent-wash); border-color:var(--accent-soft)}
.plan.feature::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
      background:var(--zest); border-radius:var(--r) var(--r) 0 0}
/* On the evergreen-wash featured card, the --soft caption falls to 4.43:1 (below
   AA); bump its secondary text to --muted (4.63:1). Scoped — white cards keep --soft. */
.plan.feature .meta,.plan.feature .price small{color:var(--muted)}
.plan .name{font-size:14px; font-weight:var(--fw-head); color:var(--ink2); margin:0 0 4px}
.plan .price{font-size:27px; font-weight:var(--fw-head); color:var(--ink); letter-spacing:-.02em; margin:0 0 2px}
.plan .price small{font-size:var(--fs-sm); font-weight:var(--fw-body); color:var(--soft)}
.plan .meta{font-size:var(--fs-xs); color:var(--soft); margin:0 0 var(--s3)}
.plan ul{list-style:none; padding:0; margin:0 0 20px; font-size:var(--fs-sm); color:var(--muted); flex:1}
.plan li{padding:5px 0; border-top:1px solid var(--hair)}
.plan li:first-child{border-top:0}
.plan .btn{text-align:center; width:100%}

/* ---- sign-in method cards (signup) ---------------------------------------- */

.methods{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); margin:18px 0 6px}
.method .n{font-size:14px; font-weight:var(--fw-head); color:var(--ink2); margin:0 0 5px}
.method .d{font-size:var(--fs-sm); color:var(--muted); margin:0; line-height:var(--lh-body)}

/* ---- status: banner + service rows as light cards ------------------------- */

.banner{background:var(--sunken); border:1px solid var(--hair); border-radius:var(--r); padding:var(--pad-row); margin:0 0 var(--s2);
        font-size:14px; color:var(--ink2); display:flex; align-items:center; gap:11px}
.banner .dot{flex:none}
/* a faint ring on every dot so the warn/idle states clear the 3:1 non-text bar
   regardless of which sunken/card surface sits behind them. */
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--soft); box-shadow:0 0 0 1px var(--hair2)}
.dot.ok{background:var(--accent)} .dot.warn{background:var(--warn)} .dot.idle{background:var(--soft)}
.svcs{display:grid; gap:var(--s2)}
.svc{background:var(--card); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--lift-sm);
     display:flex; align-items:center; gap:12px; padding:var(--pad-row)}
.svc .name{font-size:14px; color:var(--ink2); flex:1}
.svc .state{font-size:var(--fs-xs); color:var(--soft)}

/* ---- FAQ: native <details>/<summary> accordion (no JS, CSP-safe) ---------- */
/* widen the column so rows fill the measure; keep the answer text at its own
   readable measure (--faq-measure) below the row width. */
.faq{max-width:860px; margin:10px 0 0}
.faq h2{margin-top:var(--s6)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{list-style:none; cursor:pointer; position:relative; padding:15px 30px 15px 0;
   font-size:15px; font-weight:var(--fw-head); color:var(--ink2); line-height:var(--lh-tight); transition:color var(--t-fast)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:2px; top:13px; font-family:var(--mono);
   font-size:17px; font-weight:var(--fw-body); color:var(--soft); line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--ink)}
.faq-item summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
.faq-a{padding:0 30px 18px 0; color:var(--muted); font-size:14px; line-height:var(--lh-body); max-width:680px}
.faq-a code{font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink2); background:var(--code-inline-bg);
   border:1px solid var(--hair); border-radius:4px; padding:1px 5px}

/* catalog status pill: "First wave" (accent) vs "Coming soon" (soft) */
.tag.wave{color:var(--accent); background:var(--accent-wash); border-color:var(--accent-soft)}

/* ---- closing alexandria line ---------------------------------------------- */

.closer{max-width:620px; margin:var(--s6) auto 0; text-align:center; font-size:14px; line-height:var(--lh-body); color:var(--soft)}

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

/* Tablet tier: 2 columns between the 3-up desktop grid and the 1-up phone stack,
   so three cards don't cram and the 3->1 jump isn't abrupt. */
@media (min-width:761px) and (max-width:900px){
  .props{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .catalog[data-view="grid"] .grid{grid-template-columns:repeat(2,1fr)}
  .cmd-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .props{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .catalog[data-view="grid"] .grid{grid-template-columns:1fr}
  .cmd-grid{grid-template-columns:1fr}
  .methods{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* The nav can wrap on phones; its fixed 48px bottom margin then reads as an
     oversized gap before the H1. Tighten the nav→header gap under the breakpoint. */
  nav{margin-bottom:var(--s5)}
}
@media (max-width:560px){
  .links{gap:14px}
  .catalog[data-view="list"] .cat{flex-direction:column; gap:3px}
  .catalog[data-view="list"] .cat .head{width:auto}
}
/* Nav: below ~430px the mark + links + CTA can't fit one row. Let the nav wrap
   instead of overflowing (which would push a horizontal scrollbar, since nav
   bleeds full-width via margin:0 -28px). The links wrap under the mark/CTA row
   and the CTA stays reachable. No JS hamburger needed at this content width. */
@media (max-width:440px){
  nav{flex-wrap:wrap; row-gap:10px}
  .nav-right{flex-wrap:wrap; gap:12px 16px}
  .links{flex-wrap:wrap; gap:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  .card:hover,.cat:hover,.plan:hover,.btn:hover,.nav-cta:hover{transform:none}
  *{scroll-behavior:auto}
}

/* real assets: nav logo + hero illustration */
.mark-logo{display:block; flex:none; width:20px; height:20px}
/* hero illustration: lives in the hero's right zone, anchored against h1+sub
   (the grid is align-items:end). The hero overrides the default auto right
   track with a fixed ~360px column so the image has a real measure to fill
   (an `auto` track collapses around the down-scaled 1000px asset). */
.hero.pagehead{grid-template-columns:minmax(0,1fr) 360px; margin-bottom:var(--s5)}
.hero-art{display:block; width:100%; max-width:360px; height:auto; opacity:.92; justify-self:end}
@media (max-width:900px){
  /* below the wide breakpoint the fixed art column crowds the text — stack it */
  .hero.pagehead{grid-template-columns:1fr}
  .hero-art{justify-self:center; max-width:320px; margin-top:var(--s2)}
}