/* Generated by scripts/site/build.mjs from web/styles/. Edit those files, not this block. */
/* Design tokens for every Contexel page: the homepage, the guides, the console and the 404.
   This is the one place a color, font stack or width is defined, and each thing has exactly
   one name. Two palettes: dark by default, and light when the reader's system asks for it
   (the media query at the end overrides only colors). There is no toggle; the page follows the
   system setting. scripts/site/contrast.test.ts checks every text color against every surface
   in both palettes. */
:root {
  color-scheme: dark;

  /* Surfaces, darkest first */
  --bg: #07080b;                        /* the page */
  --bg-2: #0c0e13;                      /* full-width bands on the homepage */
  --field: #0b0d12;                     /* inputs, code blocks, stat tiles, pills */
  --raised: #101218;                    /* the modal and the memory drawer */
  --glass: rgba(255,255,255,.035);      /* cards over the page */
  --glass-2: rgba(255,255,255,.06);     /* hovered cards, icon wells, inline code */
  --pane-top: rgba(255,255,255,.05);    /* console panels, chat panes and the contact form: */
  --pane-bottom: rgba(255,255,255,.02); /*   a soft top-to-bottom fade between these two */
  --well: rgba(0,0,0,.3);               /* a sunken box inside a card (examples, the MCP address) */
  --nav-bg: rgba(7,8,11,.65);           /* the sticky nav and console header, blurred */
  --scrim: rgba(0,0,0,.6);              /* behind the modal and the drawer */
  --tint: #fff;                         /* mixed in at low strength for tracks and hovers: lightens on dark */
  --shadow-ink: #000;                   /* drop shadows, mixed in at each shadow's own strength */

  /* Lines */
  --line: rgba(255,255,255,.08);        /* hairline dividers and card outlines */
  --line-2: rgba(255,255,255,.14);      /* stronger outlines on cards and overlays */
  --control-line: rgba(255,255,255,.35); /* the edge of an input or ghost button: 3:1 on every surface */

  /* Text */
  --fg: #f3f4f7;                        /* content and headings */
  --fg-soft: #d6d9e0;                   /* secondary light ink on the homepage */
  --muted: #9ba1ad;                     /* supporting text: intros, labels, captions */
  --dim: #858b94;                       /* fine print: 4.5:1 or better on every surface */

  /* Color roles */
  --accent: #a78bfa;                    /* links, focus, kickers, "updated" */
  --accent-soft: rgba(167,139,250,.08);
  --accent-2: #7aa7ff;                  /* use-case tags, the reader's own chat bubble */
  --good: #5eead4;                      /* saved, success, "added" */
  --good-soft: rgba(94,234,212,.08);
  --good-line: rgba(94,234,212,.35);
  --healthy: #4ade80;                   /* the Health tile when nothing needs fixing */
  --bad: #f87171;                       /* errors, warnings, removal */
  --bad-soft: rgba(248,113,113,.1);

  /* A workspace's kind on the Workspaces list: its word in a pill tinted with its color, never
     color alone (docs/design/console-consistency.md, "One list in priority order"). */
  --kind-private: #9ba1ad;
  --kind-family: #fcd9a8;
  --kind-team: #7aa7ff;
  --kind-org: #5eead4;
  --kind-project: #f0a37f;
  --kind-invited: #d6d9e0;

  /* The one primary action: a white pill on dark, an ink pill on light */
  --primary: #fff;
  --primary-hover: #fff;                /* the pill under the pointer (on dark the brightness lift is enough) */
  --on-primary: #0a0a0f;                /* text on the primary pill, the gradient and the danger fill */

  /* The primary pill's glow: a small one, and a bigger one for the large homepage buttons */
  --shadow-primary: 0 6px 24px -10px rgba(167,139,250,.55);
  --shadow-primary-lg: 0 0 0 1px rgba(255,255,255,.2), 0 8px 30px -8px rgba(167,139,250,.6);
  --shadow-primary-lg-hover: 0 0 0 1px rgba(255,255,255,.3), 0 12px 40px -8px rgba(167,139,250,.8);

  /* The brand gradient (headline words, step numbers, the logo mark), as three stops */
  --grad-1: #c4b5fd;
  --grad-2: #93c5fd;
  --grad-3: #5eead4;
  --grad: linear-gradient(120deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 100%);

  /* The soft violet and teal glows behind the top of each page, mixed in at each glow's strength */
  --glow-1: #8b5cf6;
  --glow-2: #2dd4bf;
  --orb-hi: #2a2340;                    /* the homepage's memory orb, lit corner to edge */
  --orb-lo: #0d0f16;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239ba1ad' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.75 6 8.25 9.5 4.75'/%3E%3C/svg%3E");

  /* Fixed pastel fills, the same in both palettes, always with dark ink on them: the
     member avatars and the app badges in the homepage chat panes. */
  --pastel-violet: #c4b5fd;
  --pastel-blue: #93c5fd;
  --pastel-teal: #5eead4;
  --pastel-peach: #fcd9a8;
  --pastel-gray: #d6d9e0;
  --pastel-orange: #f0a37f;
  --pastel-silver: #e5e7eb;
  --pastel-sage: #74aa9c;
  --on-pastel: #0a0a0f;

  /* Corners: four steps. Nested things get smaller corners than what holds them. */
  --r-sm: 8px;                          /* inputs, code, small wells and chips */
  --r-md: 14px;                         /* cards inside a panel, stat tiles */
  --r-lg: 22px;                         /* panels, homepage tiles, the modal */
  --r-pill: 999px;                      /* every button, tab and badge */

  /* Type: seven fixed sizes (12, 13, 15, 17, 20, 24, 30px) plus the fluid clamp() headline
     sizes on the homepage. Spacing: multiples of 4px (0, 1 and 2px only for hairline nudges).
     scripts/site/scales.test.ts holds every stylesheet and inline style to both. */

  --maxw: 1120px;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Light: the same roles on a near-white page. Every text color is darker here, the colored
   roles move to their deeper shades so they read on white, and the primary pill turns ink. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f8f8fa;
    --bg-2: #f0f1f5;
    --field: #ffffff;
    --raised: #ffffff;
    --glass: rgba(255,255,255,.72);
    --glass-2: rgba(16,19,28,.05);
    --pane-top: #ffffff;
    --pane-bottom: rgba(255,255,255,.72);
    --well: rgba(16,19,28,.04);
    --nav-bg: rgba(248,248,250,.78);
    --scrim: rgba(16,19,28,.42);
    --tint: #10131c;
    --shadow-ink: rgba(16,19,28,.3);

    --line: rgba(16,19,28,.1);
    --line-2: rgba(16,19,28,.16);
    --control-line: rgba(16,19,28,.5);

    --fg: #10131c;
    --fg-soft: #2c313c;
    --muted: #4b5160;
    --dim: #575d6a;

    --accent: #6d28d9;
    --accent-soft: rgba(109,40,217,.08);
    --accent-2: #1d4ed8;
    --good: #0d6e66;
    --good-soft: rgba(13,110,102,.08);
    --good-line: rgba(13,110,102,.35);
    --healthy: #15763a;
    --bad: #b91c1c;
    --bad-soft: rgba(185,28,28,.07);

    --kind-private: #4b5160;
    --kind-family: #8a4b00;
    --kind-team: #1d4ed8;
    --kind-org: #0b5f58;
    --kind-project: #9c3a0d;
    --kind-invited: #2c313c;

    --primary: #16181f;
    --primary-hover: #2e323e;
    --on-primary: #fff;

    --shadow-primary: 0 6px 20px -10px rgba(76,29,149,.45);
    --shadow-primary-lg: 0 0 0 1px rgba(16,19,28,.12), 0 8px 26px -10px rgba(76,29,149,.45);
    --shadow-primary-lg-hover: 0 0 0 1px rgba(16,19,28,.2), 0 12px 34px -10px rgba(76,29,149,.6);

    --grad-1: #6d28d9;
    --grad-2: #1d4ed8;
    --grad-3: #0f766e;

    --glow-1: rgba(139,92,246,.42);
    --glow-2: rgba(45,212,191,.42);
    --orb-hi: #ffffff;
    --orb-lo: #ede9fe;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234b5160' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.75 6 8.25 9.5 4.75'/%3E%3C/svg%3E");
  }
}

/* One button and one form field for every page, in three sizes that share heights:
   .sm is 32px tall, the default is 40px, .lg is 48px. A button is the primary pill (white on dark, ink on light)
   unless it says .ghost (secondary) or .danger (irreversible). <a class="btn"> looks the
   same as <button>. Anything with its own look (tabs, list rows, link-style buttons) sets
   it in its page's file on top of this. */

/* Buttons */
button, .btn {
  padding: 8px 20px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary);
  font: inherit; font-size: 15px; line-height: 22px; font-weight: 600; cursor: pointer;
  transition: filter .12s ease, transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
:is(button, .btn).sm { padding: 4px 12px; font-size: 13px; }
:is(button, .btn).lg { padding: 12px 24px; box-shadow: var(--shadow-primary-lg); }
:is(button, .btn).ghost { background: var(--glass); color: var(--fg); border-color: var(--control-line); box-shadow: none; }
:is(button, .btn).danger { background: var(--bad); color: var(--on-primary); box-shadow: none; }
/* Hovered: a small brightness lift, and the primary pill takes --primary-hover (on the ink pill of
   the light palette a brightness lift alone barely shows). A button with its own background ignores it. */
:is(button, .btn):hover:not(:disabled) { filter: brightness(1.08); --primary: var(--primary-hover); }
/* A danger button keeps its red on hover even when it is also .ghost (its label is dark ink). */
:is(button, .btn).ghost:not(.danger):hover:not(:disabled) { background: var(--glass-2); filter: none; }
:is(button, .btn).lg:not(.ghost):hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-primary-lg-hover); }
:is(button, .btn):active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Form fields */
input, select, textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--control-line); border-radius: var(--r-sm);
  background-color: var(--field); color: var(--fg); font: inherit; font-size: 15px; line-height: 22px;
}
input, select { min-height: 40px; }
textarea { min-height: 96px; resize: vertical; }
select {
  padding-right: 36px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
:is(input, select).sm { min-height: 32px; padding: 4px 8px; font-size: 13px; }
select.sm { width: auto; padding-right: 28px; background-position: right 8px center; background-size: 11px; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--accent); }

/* Focus: one ring for everything you can reach with the keyboard */
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skip link: the first stop for a keyboard on every page, out of sight until it has focus. It jumps
   past the header to the page's main element (its id is "main"). */
.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 1000; transform: translateY(-200%);
  padding: 8px 16px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary);
  font-size: 15px; line-height: 22px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* The logo mark's gradient (the inline #mk linearGradient on each page) takes its stops from
   the tokens, so it deepens with the rest of the brand gradient in the light palette. */
#mk stop:nth-child(1) { stop-color: var(--grad-1); }
#mk stop:nth-child(2) { stop-color: var(--grad-2); }
#mk stop:nth-child(3) { stop-color: var(--grad-3); }

/* Shared by the homepage (landing.css) and the generated guide pages (guides.css): the page
   reset, type helpers, pill buttons, nav, FAQ and footer. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font:17px/1.6 var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
p { margin:0; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-.025em; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px; letter-spacing:-.01em; }
.mark { width:26px; height:26px; flex:0 0 auto; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:15px; }
.nav-links a.text { color:var(--muted); transition:color .15s ease; }
.nav-links a.text:hover { color:var(--fg); }
/* On a phone only Sign in stays beside the main button: returning people look for it by name. */
@media (max-width:760px) { .nav-links a.text:not(.signin) { display:none; } .nav-links { gap:16px; } }
.kicker { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:24px; font-weight:300; color:var(--muted); transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.final .glow { position:absolute; left:50%; bottom:-340px; width:900px; height:600px; transform:translateX(-50%); background:radial-gradient(closest-side, color-mix(in srgb, var(--glow-1) 35%, transparent), color-mix(in srgb, var(--glow-2) 12%, transparent) 60%, transparent); filter:blur(30px); pointer-events:none; }
/* Footer */
footer { border-top:1px solid var(--line); padding:36px 0; color:var(--dim); font-size:15px; }
footer .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:32px; align-items:start; }
footer .foot-copy { margin:12px 0 0; font-size:13px; }
footer .foot-cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
footer .foot-cols div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
footer .foot-h { margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width: 760px) {
  footer .wrap { grid-template-columns:1fr; }
  footer .foot-cols { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
footer .tagline { color:var(--dim); font-weight:400; margin-left:12px; padding-left:12px; border-left:1px solid var(--line-2); }
footer a:hover { color:var(--fg); }

/* The generated guide and document pages only (web/pages/*.html, via web/site.css). */
.narrow { max-width:760px; margin:0 auto; padding:0 24px; }
/* Background glow */
.aurora { position:absolute; inset:0 0 auto 0; height:700px; pointer-events:none; overflow:hidden; z-index:0; }
.aurora::before, .aurora::after { content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.aurora::before { width:560px; height:560px; left:50%; top:-260px; transform:translateX(-70%); background:radial-gradient(circle, color-mix(in srgb, var(--glow-1) 55%, transparent), transparent 65%); }
.aurora::after { width:500px; height:500px; left:50%; top:-180px; transform:translateX(5%); background:radial-gradient(circle, color-mix(in srgb, var(--glow-2) 35%, transparent), transparent 65%); }
/* Nav */
.nav { position:sticky; top:0; z-index:20; backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); background:var(--nav-bg); border-bottom:1px solid var(--line); }
/* Hero */
.hero { position:relative; padding:clamp(64px,9vw,112px) 0 clamp(40px,6vw,64px); text-align:center; }
.hero .narrow { position:relative; z-index:1; }
h1 { font-size:clamp(38px,6.4vw,68px); line-height:1.04; letter-spacing:-.045em; margin:0 auto; text-wrap:balance; }
h1 .serif { font-size:1.06em; letter-spacing:-.02em; }
.sub { font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:44ch; margin:24px auto 0; line-height:1.5; }
/* A pair of buttons side by side is one size: equal columns as wide as the longer label, stacked
   full width on a phone. A lone button sits centered. */
.cta-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:12px; width:fit-content; max-width:100%; margin:32px auto 0; }
@media (max-width:559px) { .cta-row { grid-auto-flow:row; width:100%; max-width:320px; } }
/* The one price line (PRICE_LINE in scripts/site/build.mjs), under the For pages' buttons */
.price-line { margin:16px auto 0; max-width:72ch; font-size:15px; color:var(--fg-soft); text-wrap:pretty; }
.price-line a { color:var(--fg-soft); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
/* Article body */
.body { position:relative; z-index:1; padding-bottom:24px; }
.body section { padding:40px 0; border-top:1px solid var(--line); }
.body h2 { font-size:clamp(26px,3.6vw,36px); line-height:1.12; letter-spacing:-.035em; margin-bottom:16px; text-wrap:balance; }
.body p { color:var(--muted); margin-top:16px; }
.body p:first-of-type { margin-top:0; }
.body b, .body strong { color:var(--fg); font-weight:600; }
.points { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.points li { padding:16px 20px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
.points li b { display:block; margin-bottom:2px; }
.steps { list-style:none; padding:0; margin:20px 0 0; counter-reset:step; display:grid; gap:12px; }
.steps li { counter-increment:step; position:relative; padding:16px 20px 16px 60px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
/* Notes under a numbered list read one size smaller than body text, all the same size: the line
   right after the list, and every note and optional step a setup section marks .steps-note. */
.body .steps + p, .body .steps-note { margin-top:16px; font-size:15px; }
.steps li::before { content:counter(step); position:absolute; left:18px; top:15px; width:26px; height:26px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:13px; font-weight:600; color:var(--on-primary); background:var(--grad); }
code { font-family:var(--mono); font-size:.88em; background:var(--glass-2); padding:2px 8px; border-radius:var(--r-sm); color:var(--fg); overflow-wrap:anywhere; }
pre { margin:12px 0 0; padding:16px 16px; border-radius:var(--r-md); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); overflow-x:auto; }
pre code { background:none; padding:0; font-size:13px; overflow-wrap:normal; }
.says { margin-top:20px; display:grid; gap:12px; }
.says p { margin:0; padding:16px 20px; border-radius:var(--r-md); background:var(--glass-2); color:var(--fg); }
.says p span { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
/* One-click install buttons (scripts/site/install-links.mjs). Inside a setup step the button sits
   on a line of its own. A pair side by side is one size: equal columns as wide as the longer
   label, stacked full width on a phone (the same rule as .cta-row). Never underlined, even inside
   prose that underlines its links. */
a.btn.install-btn { text-decoration:none; }
.steps .install-btn { display:flex; width:fit-content; margin:12px 0; }
.install-ico { width:16px; height:16px; flex:none; }
.install-pair { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:12px; width:fit-content; max-width:100%; margin:16px 0 0; }
@media (max-width:559px) { .install-pair { grid-auto-flow:row; width:100%; max-width:320px; } }
/* FAQ */
.faq { margin-top:8px; }
.faq summary { list-style:none; cursor:pointer; padding:20px 4px; font-size:20px; font-weight:500; letter-spacing:-.015em; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq details p { color:var(--muted); padding:0 4px 20px; margin:0; font-size:17px; }
/* Other guides */
.more { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-top:20px; }
.more a { padding:16px 20px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); font-weight:500; transition:background .15s ease; }
.more a:hover { background:var(--glass-2); }
.more a span { display:block; color:var(--muted); font-size:15px; font-weight:400; }
/* Comparison and guide articles (scripts/site/articles.mjs): a short answer first, an optional
   comparison table, the sources checked, and the hub pages that list them. */
.body .answer { margin:0; padding:20px 24px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); border-left:4px solid var(--accent); color:var(--fg); font-size:20px; line-height:1.5; }
@media (max-width: 600px) { .body .answer { font-size:17px; padding:16px 20px; } }
.body .answer-label { display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.table-wrap { margin-top:20px; overflow-x:auto; border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line); }
/* A table wider than a phone scrolls sideways, so its box is a keyboard stop (tabindex="0", with a
   name) and shows the same focus ring as a link. */
.table-wrap:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
table.compare { width:100%; border-collapse:collapse; font-size:15px; }
.compare th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:12px 16px; background:var(--glass); }
.compare td { padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; }
.compare th[scope="row"] { text-transform:none; letter-spacing:0; font-size:15px; color:var(--fg); background:none; border-top:1px solid var(--line); min-width:140px; }
.article p a, .article li a, .article td a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.article p a:hover, .article li a:hover, .article td a:hover { text-decoration-color:var(--fg); }
.body .sources { font-size:15px; }
.body .sources ul { margin:8px 0 0; padding-left:20px; color:var(--muted); }
/* Document pages (the privacy policy): a quieter hero and a long, readable body. */
.doc-hero { padding:clamp(56px,8vw,96px) 0 clamp(28px,4vw,40px); }
.doc-hero h1 { font-size:clamp(36px,5.4vw,56px); }
.doc-hero .effective { color:var(--muted); font-size:15px; margin-top:16px; }
/* An earlier version's status (the archived Terms pages), above the lead. */
.doc .doc-notice { border:1px solid var(--line-2); border-left:4px solid var(--accent); border-radius:var(--r-sm); padding:12px 16px; background:var(--glass); }
.doc section { padding:32px 0; }
.doc section#intro { border-top:0; padding-top:8px; }
.doc h2 { font-size:clamp(24px,3vw,30px); }
.doc h3 { font-size:20px; letter-spacing:-.015em; margin-top:28px; }
.doc h3 + p { margin-top:8px; }
.doc h2 + h3 { margin-top:8px; }
.body.doc ul + p { margin-top:16px; }
.doc ul { margin:16px 0 0; padding-left:24px; color:var(--muted); display:grid; gap:12px; }
.doc li { overflow-wrap:anywhere; }
.doc a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.doc a:hover { text-decoration-color:var(--fg); }
.doc .summary, .doc .toc { margin-top:24px; padding:20px 24px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); }
.doc .summary h2, .doc .toc h2 { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0; }
.doc .toc ul { list-style:none; padding:0; gap:8px; }
/* The changelog (/changelog): one section per day, its date above the title, linkable by date. */
.changelog section { scroll-margin-top:72px; }
.changelog section:first-child { border-top:0; padding-top:8px; }
.changelog .release-date { color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
/* The documentation page (/docs): a sticky "On this page" menu beside the sections on wide
   screens, above them on narrow ones, plus a tools table and tags. Reviewer detail sits in
   collapsible panels that reuse the FAQ styles. */
.docs-grid { max-width:1040px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; align-items:start; }
.docs-nav { position:sticky; top:88px; padding-top:40px; }
.docs-nav h2 { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.docs-nav ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.docs-nav a { display:block; padding:4px 12px; border-radius:var(--r-sm); color:var(--muted); font-size:15px; }
.docs-nav a:hover { color:var(--fg); background:var(--glass); }
.docs-main { min-width:0; max-width:760px; }
.docs-main section { scroll-margin-top:72px; }
.docs-main section:first-child { border-top:0; }
.docs-main p a, .docs-main li a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.docs-main p a:hover, .docs-main li a:hover { text-decoration-color:var(--fg); }
table.tools { width:100%; border-collapse:collapse; font-size:15px; }
.tools th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:12px 16px; background:var(--glass); }
.tools td { padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; }
.tools td:first-child { white-space:nowrap; }
.tag { display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--muted); background:var(--glass-2); white-space:nowrap; }
.tag.add { color:var(--good); background:var(--good-soft); }
.tag.change { color:var(--accent); background:var(--accent-soft); }
@media (max-width: 900px) {
  .docs-grid { grid-template-columns:1fr; gap:0; }
  .docs-nav { position:static; padding-top:8px; }
  .docs-nav ul { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
}
/* The pricing page (/pricing): four plan cards side by side on a wide screen, two by two on a
   tablet, one column on a phone. Every card is the same width and height at every size
   (grid-auto-rows:1fr makes each row as tall as the tallest card), per the same-size rule
   in docs/design/console-consistency.md; e2e/design.spec.ts (D12) measures it at 1440 and 390. */
.pricing #plans { border-top:0; padding-top:0; }
.plans { max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:1fr; gap:16px; }
@media (max-width: 1000px) { .plans { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .plans { grid-template-columns:minmax(0,1fr); } }
.plan { display:flex; flex-direction:column; padding:24px; border-radius:var(--r-lg); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-2); min-width:0; }
.body .plan-name { font-size:20px; letter-spacing:-.015em; margin:0; }
.body .plan .plan-for { margin-top:4px; font-size:15px; }
.body .plan .plan-price { margin-top:20px; color:var(--fg); display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.plan-price .amount { font-size:clamp(32px,3.2vw,40px); font-weight:600; letter-spacing:-.035em; line-height:1.1; }
.plan-price .per { color:var(--muted); font-size:15px; }
.body .plan .plan-alt { margin-top:4px; font-size:15px; color:var(--dim); }
.plan-points { list-style:none; padding:20px 0 0; margin:20px 0 24px; border-top:1px solid var(--line); display:grid; gap:8px; align-content:start; color:var(--muted); font-size:15px; }
.plan-points li { position:relative; padding-left:24px; }
.plan-points li::before { content:""; position:absolute; left:4px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--grad); }
/* Every card ends in the same full-width button, pinned to the bottom so the four line up. */
.plan .plan-cta { margin-top:auto; align-self:stretch; }
.plans-note { margin:32px auto 0; max-width:60ch; text-align:center; text-wrap:balance; }
.body .plans-note p { margin-top:8px; }
.body .plans-note p:first-child { margin-top:0; }
.plans-note .fine { font-size:15px; color:var(--dim); }
.pricing a:not(.btn) { color:var(--fg); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.pricing a:not(.btn):hover { text-decoration-color:var(--fg); }
/* Final CTA */
.final { position:relative; overflow:hidden; text-align:center; padding:clamp(72px,10vw,120px) 0; }
.final .narrow { position:relative; }
.final h2 { font-size:clamp(30px,4.6vw,48px); letter-spacing:-.04em; line-height:1.08; text-wrap:balance; }
.final p { color:var(--muted); margin-top:16px; }
/* The sample workspace page (/try, docs/PLAN-SAMPLE-WORKSPACE.md): the sample banner, two
   equal-size workspace tabs, the ask box, the answer and the memory list, drawn like the
   console's memory view. web/try.js fills them. */
.try .sample-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-radius:var(--r-md); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--line-2); border-left:4px solid var(--accent); }
.try .sample-banner p { margin:0; color:var(--fg-soft); font-size:15px; }
@media (max-width: 600px) { .try .sample-banner { flex-direction:column; align-items:stretch; } }
.try-tabs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:32px; padding:4px; border-radius:var(--r-pill); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); }
.try-tabs .try-tab { background:transparent; color:var(--muted); box-shadow:none; border-color:transparent; }
.try-tabs .try-tab[aria-selected="true"] { background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-primary); }
.try-tabs .try-tab:hover:not([aria-selected="true"]) { background:var(--glass-2); filter:none; color:var(--fg); }
.try-ask { margin-top:24px; }
/* The ask box's label is its accessible name, not shown: the placeholder and the suggestions say what to do. */
.try-ask .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.try-ask-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.body .try-suggest { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.try-suggest span { width:100%; font-size:13px; color:var(--dim); }
.try-suggest button { font-size:13px; padding:4px 12px; background:var(--glass); color:var(--fg-soft); border-color:var(--line-2); box-shadow:none; font-weight:500; }
.try-suggest button:hover:not(:disabled) { background:var(--glass-2); filter:none; }
.try-answer { margin-top:24px; padding:20px 24px; border-radius:var(--r-lg); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-2); }
.try-answer h3 { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0; }
.body .try-answer .try-note { margin-top:8px; font-size:15px; }
.try-answer .mem-list { margin-top:12px; }
.try-answer .left-out { margin:16px 0 0; padding-left:20px; color:var(--muted); font-size:15px; display:grid; gap:4px; }
.try-answer details { margin-top:16px; }
.try-answer summary { cursor:pointer; color:var(--muted); font-size:15px; }
.try-answer pre { max-height:360px; }
.body .try-list { border-top:0; padding:40px 0 0; }
.body .try-list h2 { font-size:24px; margin-bottom:4px; }
.body .try-count { margin-top:0; font-size:15px; color:var(--dim); }
.mem-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.mem { padding:16px 20px; border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); }
.mem-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mem-title { font-weight:600; color:var(--fg); }
.mem-body { margin-top:8px; color:var(--muted); font-size:15px; }
.body .mem-body p { margin-top:8px; }
.body .mem-body p:first-child { margin-top:0; }
.mem-body h4 { margin:12px 0 0; font-size:15px; font-weight:600; color:var(--fg-soft); }
.body .mem-from { margin-top:12px; font-size:13px; color:var(--dim); }
.mem-from b { color:var(--muted); font-weight:600; }
.body .mem-replaced { margin-top:8px; font-size:13px; color:var(--accent); }
.try-answer .try-more { margin-top:12px; }
.try-list .try-more { margin-top:16px; }