/* ═══ FONTS ═══════════════════════════════════════════════════════════════
   Self-hosted, which is the only way these are allowed here at all. The policy
   is `default-src 'self'` with no `font-src`, so a `fonts.googleapis.com`
   stylesheet and a `fonts.gstatic.com` file are both refused -- and refused
   silently: the page renders in the fallback stack and nothing anywhere says
   the webfont never arrived. `public.css` recorded "no web fonts" for exactly
   that reason. The reason was a font *host*; these files are ours, so the
   policy is untouched and the reason is satisfied rather than overruled.

   Variable faces, one file per family per subset: `400 800` and `500 700` are
   weight *ranges*, so every weight this sheet asks for comes out of these four
   files and there is no second request for a semibold.

   The URLs are relative on purpose. `asset()` cannot be called from inside a
   stylesheet, so a digest here would have to be hand-written; worse, a
   `<link rel=preload>` using `asset()` would point at the digested URL while
   `src` below points at the bare one, and the browser would fetch each face
   twice. Relative, no preload, `swap`. ------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══ TOKENS ══════════════════════════════════════════════════════════════
   Light-first. The bare :root is the palette as specified; dark re-maps the
   same tokens twice so an explicit choice wins in both directions.

   **The palette is the sage-and-teal one, and the workspace is still navy.**
   This page was drawn in teal, re-mapped to the product's navy so a prospect
   would not change colour scheme on the way to their first brief, and is now
   teal again on purpose -- a different teal, taken with the typography from the
   reference design. Say plainly what that costs: the seam is back. It sits at
   `/login`, where the public site hands over to a navy workspace, and it is one
   seam rather than the two the navy re-map was fixing. `workspace.css` and
   `app.css` were deliberately left alone; until they move, "one identity, front
   to back" is not true of this product and nothing here should imply it is.

   `--teal` is a real teal again, so the token finally means what it says.

   **`--amber` and `--ember` are two colours because they have two jobs.** The
   single gold did both and failed one: `#E9A825` on `#FDF4E3` is 1.9:1, so
   every "Claimed, nothing reaches it" chip, every `T-28` warn pill, every
   roadmap tag and the whole draft banner were decorative text nobody with
   middling eyesight could read. The reference palette carries the same split --
   a readable warn colour apart from the ember -- so:
     `--amber` (#A15C07) is for anything that is *read*: 4.6:1 on its own tint.
     `--ember` (#E8A33D) is for anything that is *seen*: the rule along the top
     of the three cards worth looking at first, and the tenet rails.
   Using `--ember` as a text colour is the bug this split exists to prevent.

   `--rose` stays semantic. It marks an obligation nothing builds, which is a
   state rather than a brand, and semantic colour has no business following an
   accent -- so it moved only as far as the reference's own danger red. */
:root {
  --bg:        #F5F7F6;
  --surface:   #FFFFFF;
  --sunk:      #EAF2EF;
  --ink:       #102B29;
  --ink-2:     #52625F;
  --ink-3:     #6B7780;
  --line:      #DCE6E2;
  --line-2:    #C6DAD4;
  --teal:      #0F766E;
  --teal-deep: #0B5B55;
  --teal-lite: #E7F1EE;
  --amber:     #A15C07;
  --amber-lite:#FCF1E3;
  --ember:     #E8A33D;
  --rose:      #B42318;
  --rose-lite: #FDF1EF;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  /* Softer than they were (6/10/16/24). The reference rounds everything to
     14-22px, and the corner is most of why it reads as paper rather than as a
     dashboard. */
  --r1: 9px; --r2: 14px; --r3: 18px; --r4: 24px;
  --shell: 78rem;
  /* Tinted pine rather than navy, and lighter: the reference leans on a tinted
     border for separation and keeps shadow for the two or three things that
     genuinely float. */
  --shadow: 0 1px 2px rgba(8,47,43,.04), 0 12px 32px -14px rgba(8,47,43,.12);
  --shadow-lg: 0 2px 4px rgba(8,47,43,.04), 0 28px 60px -22px rgba(8,47,43,.18);
}



/* Applies only where something stamps `data-theme="dark"` on the root, and
   nothing on this server-rendered page does -- so the public site renders light
   for everybody, which is `public.css`'s stated decision too: "somebody reading
   at night gets the same page rather than a half-inverted one".

   Kept rather than deleted, because it is correct the day a theme control
   exists, and because the pages behind the login are already dark-capable. What
   it must not do is quietly become the reason somebody thinks dark mode works
   here. It does not, yet. */
:root[data-theme="dark"] {
  --bg:        #071F1D;
  --surface:   #0C2B28;
  --sunk:      #082220;
  --ink:       #E8F1EE;
  --ink-2:     #A3B5B1;
  --ink-3:     #7E908C;
  --line:      #1C3A36;
  --line-2:    #2A4C47;
  /* Lightened, not inverted. #0F766E on a dark ground is a shape you cannot
     read; the accent has to earn its contrast on both.

     The amber/ember split reverses here, and that is correct rather than
     sloppy. On a light tint the readable amber is the dark one; on a dark tint
     it is the light one, and `--ember` was always the light one -- so on dark
     the two tokens land on the same value and both jobs are served by it. */
  --teal:      #5FC7BA;
  --teal-deep: #8FDCD2;
  --teal-lite: #0F2F2C;
  --amber:     #E8A33D;
  --amber-lite:#2C2113;
  --ember:     #E8A33D;
  --rose:      #E8897C;
  --rose-lite: #2E1714;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 28px 60px -22px rgba(0,0,0,.8);
}

/* ═══ BASE ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--teal); color: #fff; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
/* Space Grotesk on the headings, Open Sans on everything else -- the reference
   splits them the same way, and it is the split rather than either face that
   does the work. The variable face stops at 700, so nothing here may ask for
   800: it would be synthesised into a smeared fake bold. */
h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

.kick { font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); }
.h1 { font-size: clamp(2.5rem,5.4vw,3.9rem); line-height: 1.06; letter-spacing: -.038em; }
.h2 { font-size: clamp(1.9rem,3.6vw,2.7rem); line-height: 1.1; letter-spacing: -.034em; }
.h3 { font-size: 1.2rem; line-height: 1.32; }
.sub { font-size: 1.1rem; line-height: 1.62; color: var(--ink-2); }
.sm { font-size: .92rem; line-height: 1.58; color: var(--ink-2); }
.xs { font-size: .82rem; line-height: 1.5; color: var(--ink-3); }
.mono { font-family: var(--mono); }

/* ═══ NAV ═════════════════════════════════════════════════════════════════ */
.nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 82%, transparent);
       backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
       border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.stuck { border-bottom-color: var(--line); }
.nav-in { max-width: var(--shell); margin: 0 auto; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 650; letter-spacing: -.025em; font-size: 1.06rem; }
.brand svg { width: 21px; height: 21px; display: block; }
.nav-links { display: flex; gap: 1.6rem; font-size: .9rem; color: var(--ink-2); margin-left: auto; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: .5rem; align-items: center; }

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans);
       font-size: .93rem; font-weight: 550; letter-spacing: -.01em; padding: .68rem 1.25rem;
       border-radius: var(--r2); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
       transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .16s, border-color .16s, color .16s; }
.btn-p { background: var(--teal); color: #fff; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--teal) 60%, transparent); }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--teal) 70%, transparent); }
.btn-g { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-g:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn-q { background: transparent; color: var(--ink-2); padding: .5rem .7rem; }
.btn-q:hover { color: var(--ink); }
.btn-lg { padding: .85rem 1.55rem; font-size: 1rem; }

/* ═══ HERO ════════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: 4.5rem 0 4rem; overflow: hidden; }
.hero-glow { position: absolute; inset: -25% -20% auto 30%; height: 70vh; pointer-events: none;
  background: radial-gradient(45% 42% at 60% 30%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 72%); }
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }

.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .35rem;
        border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: .8rem; color: var(--ink-2); }
.pill b { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; background: var(--teal-lite);
          color: var(--teal); padding: .18rem .5rem; border-radius: 999px; font-weight: 700; }

.hero h1 { margin-top: 1.4rem; max-width: 15ch; }
.hero .sub { margin-top: 1.3rem; max-width: 46ch; font-size: 1.14rem; }
.hero-act { display: flex; gap: .7rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-note { margin-top: 1rem; }

/* ═══ TRACE COLUMN ════════════════════════════════════════════════════════ */
.trace-card { border: 1px solid var(--line); border-radius: var(--r4); background: var(--surface);
              box-shadow: var(--shadow-lg); overflow: hidden; }
.tc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
          padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--sunk); }
.tc-bar .mono { font-size: .7rem; color: var(--ink-3); letter-spacing: .05em; }
.tc-body { padding: 1.5rem 1.4rem 1.6rem; }

.tnode { border: 1px solid var(--line); border-radius: var(--r2); padding: .8rem .95rem; background: var(--surface);
         transition: border-color .2s, background .2s, transform .2s; cursor: default; }
.tnode.on { border-color: var(--teal); background: var(--teal-lite); }
.tnode-top { display: flex; align-items: center; gap: .55rem; }
.tnode-id { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--teal); letter-spacing: .04em; }
.tnode-kind { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; }
.tnode-txt { font-size: .92rem; margin-top: .35rem; line-height: 1.45; }

.tlink { display: grid; place-items: center; height: 1.5rem; }
.tlink span { display: block; width: 1px; height: 100%; background: var(--line-2); position: relative; }
.tlink span::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--line-2); }

.verdict { margin-top: 1.2rem; display: flex; align-items: center; gap: .6rem; justify-content: center;
           border: 1px solid var(--teal); background: var(--teal-lite); border-radius: 999px; padding: .5rem 1rem; }
.verdict .mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.verdict svg { width: 15px; height: 15px; stroke: var(--teal); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ SECTIONS ════════════════════════════════════════════════════════════ */
.sec { padding: 5.5rem 0; }
.sec-head { max-width: 44rem; }
.sec-head .h2 { margin-top: .9rem; }
.sec-head .sub { margin-top: 1rem; max-width: 52ch; }
.center { margin-inline: auto; text-align: center; }
.center .sub { margin-inline: auto; }
.rule { height: 1px; background: var(--line); }

/* ═══ ENTRY POINTS ════════════════════════════════════════════════════════ */
.entries { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-top: 2.75rem; }
.entry { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.4rem 1.2rem 1.3rem;
         transition: border-color .2s, transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.entry:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow); }
.entry .glyph { width: 34px; height: 34px; border-radius: var(--r1); background: var(--teal-lite);
                display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); }
.entry .glyph svg { width: 17px; height: 17px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry h3 { font-size: 1rem; margin-top: .9rem; letter-spacing: -.022em; }
.entry .do { margin-top: .4rem; font-size: .88rem; color: var(--teal); font-weight: 600; }
.entry .xs { margin-top: .55rem; }
.entry.full { border-color: var(--teal); background: linear-gradient(180deg, var(--teal-lite), var(--surface) 60%); }

/* ═══ PIPELINE ════════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.75rem; }
.step { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.5rem 1.4rem 1.4rem;
        position: relative; transition: border-color .2s, transform .2s; }
.step:hover { border-color: var(--line-2); transform: translateY(-2px); }
.step .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--ink-3); }
.step h3 { font-size: 1.08rem; margin-top: .55rem; }
.step .sm { margin-top: .5rem; }
.step.soon { background: var(--sunk); border-style: dashed; }
.step.soon h3, .step.soon .n { color: var(--ink-3); }
.tag-soon { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--mono); font-size: .62rem;
            letter-spacing: .11em; text-transform: uppercase; color: var(--amber); background: var(--amber-lite);
            border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); padding: .16rem .5rem; border-radius: 999px; font-weight: 700; }

/* ═══ IMPACT (centrepiece) ════════════════════════════════════════════════ */
.impact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center; margin-top: 3rem; }

.tree { border: 1px solid var(--line); border-radius: var(--r4); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.tree-head { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--rose-lite); }
.tree-head .mono { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rose); font-weight: 700; }
.tree-head .q { margin-top: .5rem; font-size: 1.02rem; line-height: 1.45; }
.tree-body { padding: 1.3rem 1.4rem 1.5rem; }

.branch { position: relative; padding-left: 1.6rem; }
.branch + .branch { margin-top: 1.1rem; }
.branch::before { content: ""; position: absolute; left: .35rem; top: -.55rem; bottom: 50%; width: 1px; background: var(--line-2); }
.branch::after { content: ""; position: absolute; left: .35rem; top: 50%; width: .85rem; height: 1px; background: var(--line-2); }
.branch:last-child::before { bottom: 50%; }
.branch-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.ids { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.idc { font-family: var(--mono); font-size: .74rem; font-weight: 650; padding: .22rem .55rem; border-radius: var(--r1);
       background: var(--teal-lite); color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); }
.idc.warn { background: var(--amber-lite); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.ticks li { display: flex; gap: .65rem; font-size: .95rem; color: var(--ink-2); }
.ticks svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .3rem; stroke: var(--teal); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticks b { color: var(--ink); font-weight: 600; }

/* ═══ COVERAGE ════════════════════════════════════════════════════════════ */
.cov { border: 1px solid var(--line); border-radius: var(--r4); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); margin-top: 3rem; }
.cov-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.2rem;
            border-bottom: 1px solid var(--line); background: var(--sunk); }
.cov-head .mono { font-size: .7rem; color: var(--ink-3); letter-spacing: .05em; }
.cov-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: center;
           padding: .85rem 1.2rem; border-bottom: 1px solid var(--line); }
.cov-row:last-child { border-bottom: 0; }
.cov-row .obl { font-family: var(--mono); font-size: .78rem; font-weight: 650; color: var(--ink); }
.cov-row .what { font-size: .9rem; color: var(--ink-2); min-width: 0; }
.state { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
         padding: .24rem .6rem; border-radius: 999px; white-space: nowrap; }
.state.ok { background: var(--teal-lite); color: var(--teal); }
.state.claim { background: var(--amber-lite); color: var(--amber); }
.state.none { background: var(--rose-lite); color: var(--rose); }

/* ═══ EVIDENCE CARDS ══════════════════════════════════════════════════════ */
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 2.75rem; }
.card { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.6rem; transition: border-color .2s; }
.card:hover { border-color: var(--line-2); }
.card .n { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--ink-3); }
.card h3 { font-size: 1.05rem; margin-top: .65rem; }
.card .sm { margin-top: .55rem; }

/* ═══ LOGOS ═══════════════════════════════════════════════════════════════ */
.logos { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sunk); }
.logos-lead { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.logo-row { display: grid; grid-template-columns: repeat(5,1fr); gap: .85rem; margin-top: 1.5rem; }
.logo-slot { height: 3.2rem; border: 1px dashed var(--line-2); border-radius: var(--r2); display: grid; place-items: center;
             background: var(--surface); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--ink-3); }

/* ═══ QUOTES ══════════════════════════════════════════════════════════════ */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.75rem; }
.qcard { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.6rem; display: flex; flex-direction: column; }
.qcard.lead { grid-column: span 2; background: linear-gradient(160deg, var(--teal-lite), var(--surface) 55%); border-color: color-mix(in srgb, var(--teal) 28%, transparent); }
.qmark { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.qslot { margin-top: .9rem; border: 1px dashed var(--amber); background: var(--amber-lite); border-radius: var(--r2);
         padding: .95rem 1.05rem; font-family: var(--mono); font-size: .78rem; line-height: 1.65; color: var(--amber); flex: 1; }
.qslot b { display: block; margin-bottom: .3rem; letter-spacing: .05em; }
.byline { display: flex; align-items: center; gap: .75rem; margin-top: 1.2rem; }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px dashed var(--line-2);
          background: var(--sunk); display: grid; place-items: center; font-family: var(--mono); font-size: .6rem; color: var(--ink-3); }
.byline-lines { display: grid; gap: .3rem; flex: 1; min-width: 0; }
.byline-slot { border: 1px dashed var(--line-2); border-radius: var(--r1); background: var(--sunk); padding: .18rem .5rem;
               font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.byline-slot.w { max-width: 12rem; } .byline-slot.n { max-width: 9rem; }

/* ═══ PRICING ═════════════════════════════════════════════════════════════ */
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; align-items: start; }
.plan { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.7rem 1.5rem 1.8rem;
        display: flex; flex-direction: column; position: relative; }
.plan.hot { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent), var(--shadow); }
.plan-tag { position: absolute; top: -.65rem; left: 1.5rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
            text-transform: uppercase; background: var(--teal); color: #fff; padding: .2rem .6rem; border-radius: 999px; font-weight: 700; }
.plan-name { font-family: var(--display); font-size: 1.18rem; font-weight: 650; letter-spacing: -.025em; }
.plan-for { font-size: .88rem; color: var(--ink-2); margin-top: .4rem; min-height: 3.1em; }

/* The price, and the unit it buys — the unit is the whole pitch here. */
.price { margin-top: 1.25rem; display: flex; align-items: baseline; gap: .35rem; }
.price .amt { font-family: var(--display); font-size: 2.15rem; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price .per { font-size: .9rem; color: var(--ink-2); }
.price .amt.custom { font-size: 1.75rem; }

.quota { margin-top: .9rem; border-radius: var(--r2); background: var(--teal-lite);
         border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); padding: .6rem .8rem;
         display: flex; align-items: center; gap: .5rem; }
.quota .n { font-family: var(--mono); font-size: .95rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.quota .u { font-size: .8rem; color: var(--teal); }
.plan .seats { margin-top: .55rem; font-size: .82rem; color: var(--ink-2); display: flex; align-items: center; gap: .4rem; }
.plan .seats svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: var(--teal); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0 1.1rem; }
.plan ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; flex: 1; }

/* Everything-included strip */
.incl { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
.incl .box { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); padding: 1.3rem 1.25rem; }
.incl .box h4 { font-size: .95rem; letter-spacing: -.02em; }
.incl .box p { margin-top: .45rem; font-size: .86rem; color: var(--ink-2); line-height: 1.55; }
.incl .box .glyph { width: 30px; height: 30px; border-radius: var(--r1); background: var(--teal-lite); display: grid; place-items: center;
                    border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); margin-bottom: .8rem; }
.incl .box .glyph svg { width: 15px; height: 15px; stroke: var(--teal); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.plan li { display: flex; gap: .55rem; font-size: .9rem; color: var(--ink-2); }
.plan li svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: .3rem; stroke: var(--teal); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan li.off { color: var(--ink-3); } .plan li.off svg { stroke: var(--line-2); }
.plan li b { color: var(--ink); font-weight: 600; }
.plan .btn { justify-content: center; width: 100%; }

/* ═══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq { margin-top: 2.25rem; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; font-size: 1rem; font-weight: 550;
              letter-spacing: -.018em; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--teal); }
.qa summary::after { content: ""; position: absolute; right: .4rem; top: 1.5rem; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.qa[open] summary::after { transform: rotate(-135deg); }
.qa p { padding: 0 2.5rem 1.3rem 0; color: var(--ink-2); font-size: .95rem; max-width: 68ch; }

/* ═══ CTA / FOOT ══════════════════════════════════════════════════════════ */
.cta { position: relative; border: 1px solid var(--line); border-radius: var(--r4);
       background: linear-gradient(165deg, var(--teal-lite), var(--surface) 62%); padding: 3.75rem 2rem; text-align: center; overflow: hidden; }
.cta .sub { margin: 1.1rem auto 0; max-width: 48ch; }
.cta .hero-act { justify-content: center; }
.foot { border-top: 1px solid var(--line); padding: 2.25rem 0 3rem; margin-top: 4.5rem; }
.foot-in { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }

/* ═══ DRAFT ═══════════════════════════════════════════════════════════════ */
.draft { border: 1px dashed var(--amber); background: var(--amber-lite); border-radius: var(--r2);
         padding: .85rem 1.05rem; font-family: var(--mono); font-size: .75rem; line-height: 1.6; color: var(--amber); margin-top: 1.5rem; }

/* ═══ MOTION ══════════════════════════════════════════════════════════════ */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }
.stag > * { opacity: 0; transform: translateY(12px); animation: lift .65s cubic-bezier(.2,.7,.3,1) forwards; }
.stag > *:nth-child(1){animation-delay:.05s}.stag > *:nth-child(2){animation-delay:.13s}
.stag > *:nth-child(3){animation-delay:.21s}.stag > *:nth-child(4){animation-delay:.29s}.stag > *:nth-child(5){animation-delay:.37s}
@keyframes lift { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .stag > * { opacity: 1; transform: none; animation: none; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width: 68rem) {
  .hero-in { grid-template-columns: 1fr; gap: 3rem; }
  .entries { grid-template-columns: repeat(2,1fr); }
  .impact { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 62rem) {
  .steps { grid-template-columns: repeat(2,1fr); }
  .incl { grid-template-columns: repeat(2,1fr); }
  .plans, .cards, .quotes { grid-template-columns: 1fr; }
  .qcard.lead { grid-column: span 1; }
  .logo-row { grid-template-columns: repeat(3,1fr); }
  .nav-links { display: none; }
}
@media (max-width: 46rem) {
  body { font-size: 16px; }
  .sec { padding: 3.75rem 0; }
  .entries, .steps, .incl { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(2,1fr); }
  .cov-row { grid-template-columns: 1fr auto; }
  .cov-row .what { grid-column: 1 / -1; }
  .cta { padding: 2.75rem 1.25rem; }
}

/* --- Replacements for the inline `style=` attributes the page shipped with.
   The CSP is `style-src 'self'`, which drops an inline style silently: the page
   renders, the rule does not apply, and nothing anywhere says so. Named for
   what each is for rather than for what it sets. ------------------------- */

.tight-top { padding-top: 1rem; }
.w22 { max-width: 22ch; }
.w46 { max-width: 46rem; }
.w52 { max-width: 52rem; }
.w58 { max-width: 58ch; }
.w62 { max-width: 62ch; }
.mid { margin-inline: auto; }
.mt-1 { margin-top: 1.1rem; }
.mt-2 { margin-top: 1.5rem; }
.h3-lead { font-size: 1.8rem; max-width: 18ch; }

/* --- Plan cards, restacked -------------------------------------------------
 *
 * The button moved above the feature list. Somebody comparing plans reads name,
 * price, decision -- six lines between the price and the way to act on it makes
 * every card taller than the decision needs, and pushes the cheapest plan's
 * button out of line with the others.
 *
 * The allowance is the first bullet rather than its own chip. It is the only
 * line that differs between plans in a way that decides anything, so it belongs
 * at the top of the list somebody is scanning, not in a box beside it. */

.plan .btn { margin-top: 1.35rem; }
.plan hr { margin: 1.35rem 0 1.1rem; }
.plan ul { margin-bottom: 0; }

/* --- The strip under the plans --------------------------------------------- */

.enterprise {
  margin-top: 1rem;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r3);
  padding: 1.6rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.enterprise b { font-size: 1.02rem; letter-spacing: -.02em; }

.enterprise p {
  margin-top: .35rem;
  font-size: .88rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--surface) 72%, var(--ink));
  max-width: 62ch;
}

.enterprise .btn { flex: none; }

/* --- Tenets ---------------------------------------------------------------
 *
 * Two columns of plain statements, deliberately without icons. Each is a rule
 * the product enforces rather than a benefit it offers, and a glyph beside it
 * would make it read as marketing. */

.tenets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  margin-top: 2.2rem;
}

.tenet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--r2);
  padding: 1.15rem 1.3rem;
}

.tenet b { display: block; font-size: .98rem; letter-spacing: -.02em; }

.tenet span {
  display: block;
  margin-top: .4rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .tenets { grid-template-columns: 1fr; }
  .enterprise { display: block; }
  .enterprise .btn { margin-top: 1rem; }
}

/* --- The gold rule ---------------------------------------------------------
 *
 * The workspace's own motif, and the reason the sign-in card is recognisable
 * before a word of it is read: a three-pixel gold rule along the top of the
 * thing that matters on the page. It is the one thing the front door and the
 * product still share -- the palette around it no longer matches, so this
 * carries the whole resemblance on its own now.
 *
 * It is `--ember`, not `--amber`, and that is the point of having two tokens.
 * Nothing here is read: a 3px border carries no text, so the decorative gold
 * is right, where the readable one would be a brown line nobody takes for an
 * accent. Using `--ember` on text is the inverse mistake, and the one the
 * split exists to prevent.
 *
 * Four cards, not every card. The rule marks what a reader should look at
 * first -- the traceability chain, the coverage table, the recommended plan --
 * and a motif applied to everything marks nothing.
 *
 * Written after the rules it overrides, which is how it wins without a
 * specificity fight: the base card rules set order wholesale, so a
 * longhand order-top declared earlier would simply be overwritten. */

.trace-card,
.cov,
.plan.hot { border-top: 3px solid var(--ember); }

/* The recommended plan keeps a ring, in teal rather than ember: two accents on
   one card is one too many, and the ring is what separates it from its
   neighbours while the rule is what says where to look. */
.plan.hot {
  border-color: var(--line);
  border-top-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent), var(--shadow);
  /* The rule is 3px where the other cards' border is 1px, so without this the
     marked card's name, price and every bullet sit two pixels below its
     neighbours' -- in a row of three, read side by side, against each other.
     Taken off the padding rather than the border: the rule is the motif and
     may not be thinned to fix someone else's alignment. */
  padding-top: calc(1.7rem - 2px);
}

.plan-tag { background: var(--teal); color: var(--surface); }

/* A rail rather than a top rule, because these are read as a list down the
   page rather than as things to look at first. */
.tenet { border-left-color: var(--ember); }