/* ═══ 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 values are the workspace's, the names are this sheet's.** The page was
   drawn in teal; the product it is a front door to is navy with a gold rule,
   and a prospect who signs up used to change colour scheme twice on the way to
   their first brief. Only these values changed -- `--teal` is the navy now,
   which reads oddly here and is far better than renaming a token used in ninety
   places across a stylesheet nothing type-checks.

   Navy, deep navy, gold and ink are `workspace.css`'s own, copied rather than
   imported: two whole-page stylesheets on one page is a race, and every page
   here loads exactly one.

   `--rose` stays where it was. It marks an obligation nothing builds, which is
   a state rather than a brand, and semantic colour has no business following
   an accent. */
:root {
  --bg:        #F7F9FC;
  --surface:   #FFFFFF;
  --sunk:      #EEF2F8;
  --ink:       #1A2740;
  --ink-2:     #4A5B73;
  --ink-3:     #6B7A91;
  --line:      #E3E8EF;
  --line-2:    #CBD5E1;
  --teal:      #12305F;
  --teal-deep: #0D2247;
  --teal-lite: #E8EEF7;
  --amber:     #E9A825;
  --amber-lite:#FDF4E3;
  --rose:      #B4442F;
  --rose-lite: #FAEAE6;

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

  --r1: 6px; --r2: 10px; --r3: 16px; --r4: 24px;
  --shell: 78rem;
  --shadow: 0 1px 2px rgba(18,48,95,.05), 0 12px 32px -14px rgba(18,48,95,.16);
  --shadow-lg: 0 2px 4px rgba(18,48,95,.05), 0 28px 60px -22px rgba(18,48,95,.24);
}



/* 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:        #0B1220;
  --surface:   #121B2C;
  --sunk:      #0E1626;
  --ink:       #E6ECF5;
  --ink-2:     #9BA9BF;
  --ink-3:     #6E7D94;
  --line:      #223049;
  --line-2:    #32425C;
  /* Lightened, not inverted. #12305F on a dark ground is a shape you cannot
     read; the accent has to earn its contrast on both, and the gold does that
     already so it barely moves. */
  --teal:      #7BA4E8;
  --teal-deep: #A9C6F5;
  --teal-lite: #16233A;
  --amber:     #F0BB4E;
  --amber-lite:#2E2413;
  --rose:      #E08A76;
  --rose-lite: #2E1A15;
  --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; }
h1,h2,h3,h4 { margin: 0; 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-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-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-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. Carried here so the front door and the
 * product are visibly the same product.
 *
 * 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(--amber); }

/* The recommended plan keeps a ring, in navy rather than gold: 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(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent), var(--shadow);
}

.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(--amber); }