/* ===================================================================================================
   Blueprint compatibility layer — Product tour, How it works, Trust, Policy.

   WHY THIS EXISTS, AND WHY IT IS NOT A REWRITE

   Those four pages were written against two older stylesheets (landing-esqrd.css and site.css) and use
   about a hundred class names the blueprint sheet has never heard of — the fake app-screenshot chrome
   (.appwin / .board / .kcard / .side), the split content sections (.split / .txt / .checks), the pill
   eyebrows, the roadmap steps, the policy body. Rewriting that markup into blueprint components would
   mean touching every line of four pages to change how they LOOK, with a real chance of losing copy on
   the way. So the markup is left exactly as it is and this sheet re-dresses it.

   It loads AFTER the legacy sheet on each page and does two things:

     1. RE-POINTS THE TOKENS. Both legacy sheets define their own --ink / --line / --teal / --navy and so
        on. Every one of those is re-declared here in terms of the blueprint's variables, so there is a
        single palette across the site and — the part that matters — super-admin branding reaches these
        pages too, because site.js only ever sets the blueprint names.

     2. SQUARES OFF THE CONSTRUCTION. The blueprint draws with hairlines and right angles; the legacy
        pages lean on radii and soft shadows. Radius goes to zero, shadows go flat, eyebrows stop being
        pills, and headings pick up the blueprint's uppercase tracking.

   The app mockups keep their structure — they are kept deliberately, they just get the paper palette.

   Nothing here changes layout maths. If a page looks wrong after a change to this file, the fault will
   be a colour or a border, not a collapsed grid.
   =================================================================================================== */

/* ── 0 · the blueprint palette, copied in ────────────────────────────────────────────────────────────
   These pages deliberately do NOT load landing-blueprint.css. That sheet owns a whole page shell —
   `section`, `header.nav`, `.btn`, `.wrap`, `h1`–`h3`, `footer` — built for the blueprint's markup, and
   layering it over pages with different structure means two stylesheets fighting for every box. Only
   the tokens are needed here, so only the tokens are copied. The shell stays with the sheet that owns it.

   Keep in sync with landing-blueprint.css if the palette changes; the derived values below are what
   site.js overrides from super-admin, so a rebrand still reaches these pages.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  /* Structure. Not brandable — these are the paper and the ink the whole design is drawn on, and the
     hairlines are alpha values off the ink so they stay correct whatever the accents become. */
  --paper:#F4F4F1; --panel:#FAFAF8; --ink:#18202B; --mute:#5B6673; --faint:#A7A7A2;
  --line:rgba(24,32,43,.13); --line2:rgba(24,32,43,.07);
  --slate:#94A3B8;

  /* ── THE FOUR BRAND COLOURS ──────────────────────────────────────────────────────────────────────
     These are the only colour literals on the page, and site.js overwrites all four at runtime from
     super-admin → Website → Branding (`colors.primary / .secondary / .neutral / .fourth`). The values
     below are the defaults, used until that fetch lands and if it never does.

       --navy    primary    buttons, the log-in chip
       --em      secondary  the accent that marks state: label dots, corner ticks, hovers, the rail
       --steel   neutral    mid data colour
       --violet  fourth     the far end of the gradient
     ──────────────────────────────────────────────────────────────────────────────────────────────── */
  --navy:#083A4F;
  /* OneFirm's own teal, not the blueprint demo's emerald. This is the accent that draws every label
     square, corner tick, icon (they stroke with currentColor) and link hover, so an emerald default
     put green squares and green icons across pages whose brand is navy — the "random green" that
     kept coming back. Super-admin's secondary colour still overrides this at runtime via site.js;
     this is only what shows before that fetch lands, and if it never does. */
  --em:#407E8C;
  --steel:#5B8AA6;
  --violet:#A98BFF;

  /* ── DERIVED — var() expressions, never literals ─────────────────────────────────────────────────
     This is the whole trick, and it is easy to get wrong. A custom property is substituted where it is
     USED, not where it is declared, so a gradient written in terms of var(--violet) re-resolves the
     moment JS overrides --violet. Had --grad kept its four hex literals, a rebrand would have recoloured
     the dots and the buttons and left the headline gradient on the old palette — a half-applied rebrand,
     which looks worse than none. Anything that mixes brand colours belongs here, in this form.
     ──────────────────────────────────────────────────────────────────────────────────────────────── */
  --teal:var(--em);
  --aqua:var(--steel);
  --deep:#06222E;   /* primary, darkened — replaced by color-mix below where supported */
  /* THREE stops, each a different brand colour — secondary → neutral → fourth.
     History, because this has now been wrong in both directions. The blueprint shipped a FOUR-stop ramp
     that doubled back on emerald (violet → em → steel → em); driven from super-admin that read as a muddy
     rainbow, because the doubling-back made the eye cross the same hues twice. Collapsing it to two stops
     fixed the mud but silently dropped a brand colour — whichever of neutral/fourth is the warm one just
     vanished from the headline.
     Three distinct stops, in order, no repeats: every brand colour appears once, the eye travels each hue
     once, and nothing is dropped. Interpolated in OKLAB below so the blend keeps its chroma. */
  --grad:linear-gradient(100deg,var(--em),var(--steel) 48%,var(--violet));

  --f:'Inter',system-ui,-apple-system,sans-serif;
  --pad:44px;
}
/* Button hover = the primary, darkened. Tracks a rebrand instead of sitting on a fixed near-black that
   would clash with a warm or light primary. The literal above stands in where color-mix is unsupported. */
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root{ --deep:color-mix(in srgb, var(--navy) 76%, #000); }
}
/* Interpolate the headline gradient in OKLAB where supported.
   sRGB interpolation dips through grey between two colours of different hue — with four unrelated brand
   colours that reads as a muddy rainbow rather than an ombre. OKLAB keeps chroma up across the blend, so
   the ramp stays clean whatever four colours the firm picks. The sRGB version above is the fallback. */
@supports (background: linear-gradient(in oklab, red, blue)){
  :root{ --grad:linear-gradient(100deg in oklab, var(--em), var(--steel) 48%, var(--violet)); }
}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 1 · tokens ─────────────────────────────────────────────────────────────────────────────────────
   The blueprint's own :root has already run by the time this loads, so these can be defined in terms of
   it. site.js overrides --em / --steel / --violet / --navy from super-admin; everything below inherits
   that automatically, which is the whole point of re-pointing rather than re-stating hex values. */
:root{
  /* landing-esqrd.css vocabulary */
  --bg:var(--paper);
  --dim:var(--mute);
  --gold:var(--em);
  --gold2:var(--teal);
  --goldline:color-mix(in srgb, var(--em) 50%, transparent);
  --t:var(--em);
  --v:var(--steel);
  --yl:var(--steel);
  --cr:#B4232A;                 /* the one genuinely semantic colour: error / over-budget */
  --brand:var(--navy);
  --brand2:var(--steel);
  --mono:'Inter',system-ui,sans-serif;
  --disp:'Inter',system-ui,-apple-system,sans-serif;

  /* site.css vocabulary */
  --muted:var(--mute);
  --white:var(--panel);
  --mint:color-mix(in srgb, var(--em) 22%, var(--paper));
  --blue:color-mix(in srgb, var(--steel) 22%, var(--paper));
  --cream:var(--panel);
  --maxw:1320px;

  /* Both sheets shipped a radius and layered shadows. The blueprint has neither — structure is drawn
     with 1px hairlines. Zeroing the tokens re-dresses every card, button and panel at once instead of
     hunting down each rule. */
  --radius:0px;
  --shadow:none;
  --shadow-sm:none;
  --shadow-lg:none;
  --shadow-xl:none;
}
/* --line is an alpha of the ink in both sheets, and both are close enough to the blueprint's that
   restating it keeps one definition rather than three that drift. */
:root{ --line:rgba(24,32,43,.13); }

body{ background:var(--paper); color:var(--ink); font-family:var(--f); }

/* ── 2 · type ───────────────────────────────────────────────────────────────────────────────────── */
h1,h2,h3{ text-transform:uppercase; letter-spacing:-.02em; line-height:.98; font-weight:700; }
h1{ font-size:clamp(34px,5.4vw,66px); }
h2{ font-size:clamp(26px,4vw,48px); }
h3{ font-size:clamp(18px,2vw,24px); letter-spacing:-.01em; text-transform:none; }
.lead,.rlead{ color:var(--mute); font-size:17px; line-height:1.6; }

/* The eyebrow was a rounded pill with a shadow. The blueprint's equivalent is a wide-tracked label with
   a small square in front of it — same job, different register. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute); background:none; border:0; padding:0; border-radius:0; box-shadow:none;
}
.eyebrow::before{ content:""; width:8px; height:8px; background:var(--em); display:block; flex:none; }

/* ── 3 · buttons ────────────────────────────────────────────────────────────────────────────────── */
.btn{
  border-radius:0; box-shadow:none; font-weight:500;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 20px; border:1px solid var(--ink); background:none; color:var(--ink);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{ background:var(--ink); color:var(--paper); transform:none; }
.btn-primary,.btn.p{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-primary:hover,.btn.p:hover{ background:var(--deep); border-color:var(--deep); color:#fff; }
.btn-ghost{ background:none; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-lg{ padding:14px 24px; }

/* ── 4 · page shell ─────────────────────────────────────────────────────────────────────────────── */
.wrap{ max-width:1320px; padding:0 44px; }
@media(max-width:820px){ .wrap{ padding:0 20px; } }

/* THE header, copied from landing-blueprint.css. Every page now carries the home page's header markup
   (.navin / .lk / .brand em), so it needs the home page's header rules — the hand-written versions that
   used to live here styled .nav-inner / .nav-links, which is exactly why the header looked different on
   every page. Copy, not reference, for the reason in section 0; keep the two in step.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* ── nav ────────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:60;background:rgba(244,244,241,.88);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);
  display:block;padding:0}
header.nav .navin{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px;
  max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:800;font-size:19px;
  letter-spacing:-.02em;text-decoration:none}
/* landing-esqrd.css sets a bare `.brandwm{font-family:var(--disp);font-size:21px}`. The home page has no
   such rule — its wordmark simply inherits `.brand` (19px). Left alone, that is a 2px and a font-family
   difference in the header between this page and the home page, and it shifts where the `OS` suffix sits
   on the baseline. Inherit, so the two headers are the same header. */
.brandwm{font-family:inherit;font-size:inherit;font-weight:800;letter-spacing:inherit;color:var(--ink);white-space:nowrap}
.brandwm b{color:var(--em);font-weight:800}
.brand em{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--faint);font-weight:500}
/* `hidden` must win over any display a class sets. site.js uses the hidden ATTRIBUTE to keep the
   logo <img> out of the page until a logo exists, and `.brandlogo{display:block}` below was quietly
   overriding it — so every page loading THIS sheet (Product tour, How it works, Trust, Policy)
   rendered a broken-image icon in the header. landing-blueprint.css has carried this guard for a
   while; this sheet never got it, which is why the fault survived on exactly four pages. */
[hidden]{display:none!important}
.brandlogo{height:26px;width:auto;display:block}
.lk{display:flex;gap:22px;align-items:center}
.lk a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);opacity:.82;transition:opacity .2s,color .2s}
.lk a:hover,.lk a.on{opacity:1;color:var(--em)}
.btn{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:10px 17px;
  border:1px solid var(--ink);text-decoration:none;display:inline-block;transition:.2s;
  white-space:nowrap;background:none;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.p,.lk a.b.login{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.p:hover,.lk a.b.login:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.lk a.b{border:1px solid var(--ink);padding:9px 15px;opacity:1}
.lk a.b:hover{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;font-size:20px;line-height:1;padding:8px 10px;border:1px solid var(--line)}

/* ── the last of the old header, and why it survived three attempts to match the home page ──────────
   landing-esqrd.css styles the header element ITSELF as the nav row:

     .nav      {display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,46px)}
     .nav img  {height:28px}
     .brand img{height:26px}
     .nav .lk  {gap:26px}
     .nav .lk .b{padding:9px 16px}

   The blueprint header is a plain sticky box whose child `.navin` is the row. Re-declaring `header.nav`
   above looked like it covered this, but it only wins the properties it actually declares — position,
   background, border. `display`, `padding`, `align-items` and `justify-content` were never declared
   there, so `.nav`'s versions simply stayed, giving these pages a flex row nested inside a flex row
   with 20px of extra padding around it.

   The logo is the visible half. site.js writes `style="max-height:46px"` — a CAP, not a height — so on
   the home page the logo renders at its natural size up to 46px. Here `.nav img` and `.brand img` set an
   explicit `height`, which beats no height at all, pinning the same logo to 26–28px. That is the whole
   "almost the same, but the logo size and spacing are different": a max-height on one page, a fixed
   height on the other.

   `.brandlogo` is left alone deliberately — it is the fallback wordmark image the blueprint also sizes
   at 26px, so it should keep matching the home page rather than growing to 46px.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
header.nav{display:block;padding:0;align-items:initial;justify-content:initial}
header.nav .brand img:not(.brandlogo),header.nav img:not(.brandlogo){height:auto}
/* gap, and the font the links inherit — .nav .lk sets both, .lk on the home page sets neither. */
header.nav .lk{gap:22px;font-family:var(--f);font-size:11.5px}
header.nav .lk .b,header.nav .lk a.b{padding:9px 15px}
@media(max-width:1120px){
  .lk{position:fixed;inset:66px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 18px;display:none}
  .lk.open{display:flex}
  .lk a{padding:13px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
  .lk a.b{border:1px solid var(--ink);text-align:center;margin-top:12px;padding:12px}
  .menu-btn{display:block}

  /* ── the hamburger, beating landing-esqrd.css ────────────────────────────────────────────────
     These pages load landing-esqrd.css, which carries its OWN mobile-menu contract: the panel opens
     on `.nav.open .lk`, i.e. the class goes on the <header>. This file (and the home page) use the
     blueprint contract: `.lk.open`, class on the <nav>. site.js implements the blueprint one — it
     toggles `.open` on #navLinks — and these pages do NOT load landing-esqrd.js, so every esqrd
     `.nav.open` rule is unreachable. Two live bugs came out of the mismatch:

       1. esqrd's `@media(max-width:760px){.nav .lk a:not(.b){display:none}}` sits OUTSIDE its
          `.nav.open` block, so it survived into the opened panel. At (0,3,1) it outranked everything
          here, and the menu opened showing only "Book a demo" and "Log in" — the five real links were
          display:none. That was the broken header nav on /features, /how-it-works and /trust.
       2. Between 761px and 1120px, esqrd's `.nav .lk{display:flex}` (0,2,0) outranks the bare
          `.lk{display:none}` above (0,1,0), so a tablet got the inline links AND the hamburger.

     Both are fixed by qualifying with `header` so these rules outrank the esqrd ones. Do not
     "simplify" them back to `.lk` / `.lk a` — that is exactly the specificity that loses.
     landing-esqrd.css is deliberately left alone: the home page's comment keeps it as the preserved
     ESQRD design, and this file is the shim for old pages wearing the blueprint header.
     Pinned by web/src/core/navContract.test.mjs. */
  header.nav .lk{display:none}
  header.nav .lk.open{display:flex}
  header.nav .lk.open a{display:block}
  header.nav .lk.open a.b{display:block}
}
/* the legacy footer badge keeps its own rule */
.brand .mark{border-radius:0;background:var(--navy)}

/* The page hero had a blurred four-colour bloom behind it. On paper that reads as a smudge, and it was
   built from the legacy tokens so it would not follow a rebrand anyway. Flat paper, hairline rule. */
.page-hero{
  text-align:left; background:var(--paper); border-bottom:1px solid var(--line);
  padding:96px 0 84px;
}
.page-hero::before,.page-hero::after{ display:none !important; }
.page-hero .inner{ max-width:1320px; margin:0 auto; padding:0 44px; text-align:left; }
@media(max-width:820px){ .page-hero{ padding:64px 0 56px; } .page-hero .inner{ padding:0 20px; } }
.hero-cta{ gap:12px; margin-top:30px; }

section{ border-top:1px solid var(--line); }
.sec-head{ margin-bottom:38px; }
.split{ gap:46px; align-items:start; }
.split .txt{ min-width:0; }

/* ── 5 · lists and cards ────────────────────────────────────────────────────────────────────────── */
.checks{ list-style:none; padding:0; margin:22px 0 0; }
.checks li{
  position:relative; padding-left:22px; margin-bottom:12px;
  color:var(--mute); font-size:14.5px; line-height:1.6;
}
.checks li .ck{ display:none; }
.checks li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--em); }

.feature,.faq,.step,.grp,.resid,.ai-card,.policy-wrap{
  border-radius:0; box-shadow:none; border:1px solid var(--line); background:var(--panel);
}
.sec-grid,.features,.steps,.roadmap{ gap:1px; }

/* ── 6 · the app mockups ────────────────────────────────────────────────────────────────────────────
   Kept, not dropped — they show the product. Re-dressed onto paper: square frame, hairline dividers,
   the sidebar and board panels in --panel rather than tinted fills. */
.appwin{
  border-radius:0; box-shadow:none; border:1px solid var(--line); background:var(--panel);
  overflow:hidden; position:relative;
}
.appwin .bar{
  background:rgba(244,244,241,.7); border-bottom:1px solid var(--line); border-radius:0;
}
/* the three "traffic light" dots are macOS chrome; on a technical drawing they are noise */
.appwin .bar .dot{ background:var(--line) !important; border-radius:0; width:7px; height:7px; }
.appwin .bar .u{ background:var(--line2); border-radius:0; }
.appwin .body{ background:var(--panel); }
.appwin .side{ background:rgba(244,244,241,.6); border-right:1px solid var(--line); }
.appwin .side .b{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.appwin .side .b i{ background:var(--navy); border-radius:0; color:#fff; font-style:normal; }
.appwin .sn{
  font-size:11px; letter-spacing:.06em; color:var(--mute); border-radius:0;
  border-left:2px solid transparent;
}
.appwin .sn.on{ background:rgba(24,32,43,.04); color:var(--ink); border-left-color:var(--em); }
.appwin .sn svg{ width:14px; height:14px; opacity:.6; }
.appwin .main{ background:var(--panel); }
.appwin .main .head{ border-bottom:1px solid var(--line); }
.appwin .main .head .h{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; }
.appwin .search{ background:var(--paper); border:1px solid var(--line); border-radius:0; }
.appwin .btn2{
  background:var(--navy); color:#fff; border-radius:0;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.appwin .av,.appwin .av-xs{ border-radius:0; }

.kpis2{ gap:1px; background:var(--line); border:1px solid var(--line); }
.kpi2{ background:var(--panel); border-radius:0; box-shadow:none; border:0; padding:14px 16px; }
.kpi2 .n{ font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi2 .l{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.kpi2 .up{ font-size:10px; color:var(--em); letter-spacing:.08em; }

.board{ gap:1px; background:var(--line); border:1px solid var(--line); }
.kcol{ background:var(--paper); border-radius:0; padding:10px; }
.kt{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.kcard{
  background:var(--panel); border:1px solid var(--line); border-radius:0; box-shadow:none;
}
.ct{ font-size:12.5px; font-weight:600; }
.cs{ font-size:11px; color:var(--faint); }
/* Tag colours map onto the palette's data colours, so a rebrand carries them. */
.tag{ border-radius:0; font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.tag.t1{ background:color-mix(in srgb, var(--em) 16%, var(--paper));    color:var(--em); }
.tag.t2{ background:color-mix(in srgb, var(--steel) 16%, var(--paper)); color:var(--steel); }
.tag.t3{ background:color-mix(in srgb, var(--em) 10%, var(--paper));    color:var(--mute); }
.tag.t4{ background:color-mix(in srgb, var(--violet) 16%, var(--paper));color:var(--violet); }

/* ── 7 · AI panel, portal, roadmap ──────────────────────────────────────────────────────────────── */
.ai-chat,.bubble,.me,.ans{ border-radius:0; box-shadow:none; }
.bubble,.ans{ background:var(--panel); border:1px solid var(--line); }
.me{ background:var(--navy); color:#fff; border:1px solid var(--navy); }
.ai-head{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.portal,.pv,.pd,.pn{ border-radius:0; box-shadow:none; }
.road .rl,.roadmap .rl{ background:var(--line); }
.rs{ border-radius:0; background:var(--em); }
.rowline{ border-bottom:1px solid var(--line2); }
.soon-badge,.soon{
  border-radius:0; background:none; border:1px dashed var(--violet); color:var(--violet);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}

/* ── 8 · policy page ────────────────────────────────────────────────────────────────────────────── */
.policy-wrap{ max-width:1180px; margin:0 auto; padding:64px 48px; border:0; background:none; }
.policy-meta{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.policy-body{ font-size:15.5px; line-height:1.72; color:var(--ink); }
.policy-body h2{ font-size:clamp(20px,2.4vw,26px); margin:36px 0 12px; }
.policy-body h3{ font-size:17px; margin:26px 0 10px; }
.policy-body p,.policy-body li{ color:var(--mute); }
.policy-body a{ color:var(--em); border-bottom:1px solid var(--em); }
/* Match the blueprint palette; the layout/overflow rules live in site.css. */
.policy-body th{ background:rgba(8,58,79,.05); color:var(--ink); }
.policy-body td{ color:var(--mute); }
.policy-body table{ font-size:14.5px; }
@media(max-width:820px){ .policy-wrap{ padding:44px 20px; } }

.foot-top,.foot-bottom{ border-color:var(--line); }
.foot-col h4{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.foot-col a,.foot-legal a{ color:var(--mute); text-decoration:none; font-size:12.5px; }
.foot-col a:hover,.foot-legal a:hover{ color:var(--em); }
.foot-legal .sep{ color:var(--line); margin:0 6px; }

/* ── 10 · decorations the blueprint does not use ────────────────────────────────────────────────── */
.grain,.frame,.cur,.ring{ display:none !important; }

:focus-visible{ outline:2px solid var(--em); outline-offset:3px; }

/* ── 11 · the blueprint figure shell ────────────────────────────────────────────────────────────────
   The map sections ported onto these pages use the blueprint's own frame classes — .map, .mapbar,
   .corner, .legend, .count and friends. Those live in landing-blueprint.css, which these pages
   deliberately do not load (see section 0), so without this block the frame simply did not exist: the
   figures rendered with no panel, no border and no background, and landing-esqrd.css's fixed
   constellation canvases showed straight through the drawing.

   These are copies, not references — keep them in step with landing-blueprint.css. The alternative was
   loading that whole sheet here and fighting its page shell, which is the trade already argued above.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.map{position:relative;max-width:100%;border:1px solid var(--line);background:var(--panel);
  overflow:hidden;z-index:2}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.mapbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--line);background:rgba(244,244,241,.7);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.mapbar b{color:var(--ink);font-weight:600}
.corner{position:absolute;width:9px;height:9px;border:1px solid var(--em);opacity:.5;z-index:3}
.corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.map canvas,.map svg{display:block}

.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.key{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.key i{width:9px;height:9px;display:block;flex:none}

.count{position:absolute;top:0;right:0;font-size:11.5px;letter-spacing:.2em;color:var(--faint);
  font-weight:500}
.count b{color:var(--em);font-weight:500}
.lede{color:var(--mute);font-size:17px;max-width:60ch;margin:16px 0 0;line-height:1.6}

.cell-lbl{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.cell-lbl i{width:9px;height:9px;display:block;flex:none;background:var(--em)}

/* .grid3 is three across, like its name — the residency and phase-card panels put three cells in it. */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);
  border-right:0;border-bottom:0;background:var(--panel);position:relative;z-index:2}
.grid3>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px;
  min-width:0}
@media(max-width:980px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}

/* The ported sections sit above esqrd's fixed background canvases, which are z-index 0–1 and would
   otherwise draw over a transparent figure. */
section[id="clients"],section[id="engine"],section[id="grounding"],section[id="start"]{
  position:relative; z-index:2; background:var(--paper);
}

/* Policy links in the footer. site.js fills #footLegal on the blueprint pages; these pages do it from
   their own inline script (see each page's tail). Either way the markup is
   <a>…</a><span class="sep">·</span><a>…</a>, and the separator needs a rule or the titles run together. */
#footLegal,.foot-legal{display:inline-flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
#footLegal a,.foot-legal a{color:var(--mute);text-decoration:none;
  border-bottom:1px solid transparent;transition:.18s}
#footLegal a:hover,.foot-legal a:hover{color:var(--em);border-bottom-color:var(--em)}
#footLegal .sep,.foot-legal .sep{color:var(--line);margin:0 2px}
#footLegal:empty,.foot-legal:empty{display:none}

/* ── 12 · hero field ────────────────────────────────────────────────────────────────────────────────
   The page heroes were flat paper after section 4 removed their blurred four-colour bloom. This gives
   them the home page's treatment instead: the same #stars constellation, drawn by landing-blueprint.js,
   scoped to the hero rather than fixed behind the whole document.

   landing-esqrd.css's own #deep / #plex canvases are retired here. They are position:fixed at z-index
   0–1, so they sat behind EVERY section, not just the hero — which is what was showing through the
   client map. One field, in one place, is the intent. */
#deep,#plex,#sky{display:none!important}

.page-hero{position:relative;overflow:hidden}
.page-hero #stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.page-hero .inner,.page-hero .wrap{position:relative;z-index:2}

/* ── 13 · legacy green washes ───────────────────────────────────────────────────────────────────────
   landing-esqrd.css paints several large emerald overlays with hard-coded hex — they predate the token
   system, so re-pointing --gold/--teal in section 1 does not touch them and they survive a rebrand as a
   green tint over a page whose accent may no longer be green at all.

   Killed rather than recoloured: every one of them is a soft radial bloom, and the blueprint draws with
   hairlines and flat paper. The hero field is the #stars constellation now (section 12), which does take
   its colours from the brand.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero-sticky,.hero-sticky::before,.hero-sticky::after{background:none!important}
.mfx,.mfx span,.mfx i{display:none!important}
.row:hover{background:rgba(24,32,43,.022)!important}
/* .gold was the old gradient-text class. Re-pointed rather than removed, so any copy still using it
   picks up the brand ombre instead of the retired emerald→teal→steel ramp. */
.gold{background:var(--grad)!important;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* Tints and rules that were emerald literals, back onto the accent so they follow a rebrand. */
.ck,.up,.rs{color:var(--em)}
.sn.on{border-left-color:var(--em)}

/* ── 14 · the label marker ──────────────────────────────────────────────────────────────────────────
   Two things here.

   FIRST, .lbl was missing entirely. The figure sections ported onto these pages use the blueprint's
   <p class="lbl"><i></i>Text</p>, and that class lives in landing-blueprint.css, which these pages do
   not load. My earlier "is every class defined?" check passed it by mistake: it matched class NAMES
   anywhere in the sheets, and blueprint-figures.css happens to contain `.readout .lbl{margin-bottom}`
   — a margin on a label it never styles. A name-level match is not a definition; the check now has to
   see the base selector.

   SECOND, the marker is laid out with inline-block and vertical-align rather than as a flex child.
   As a flex item it depended on the parent staying `display:inline-flex`; anything that reset that
   display — a legacy rule, a print sheet, a parent that blockifies — dropped the square onto its own
   line above the text, which is the bug reported. inline-block sits beside the text whatever the
   parent is doing, so there is nothing left to get wrong.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.lbl{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  font-weight:500;margin:0}
.lbl i,.eyebrow::before{
  content:"";width:8px;height:8px;background:var(--em);
  display:inline-block;vertical-align:middle;margin-right:10px;flex:none;
  position:relative;top:-1px;                 /* optical centring against uppercase tracking */
}
.lbl.ghost i{background:none;border:1px solid var(--em)}
/* The parent no longer needs to be a flex container; keep it inline so the marker and text share a line. */
.eyebrow,.lbl{display:inline-block}
.eyebrow{gap:0}


/* Policy links. site.js fills #footLegal from /api/public/policies — whatever is written and published
   in super-admin → Website → Policies appears here on its own, so Privacy needs no markup of its own.
   It renders as <a>…</a><span class="sep">·</span><a>…</a>, and the separator had no rule, so multiple
   policies ran together as one word. */
#footLegal{display:inline-flex;flex-wrap:wrap;gap:0 8px;justify-content:inherit}
#footLegal a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent;transition:.18s}
#footLegal a:hover{color:var(--em);border-bottom-color:var(--em)}
#footLegal .sep{color:var(--line);margin:0 2px}
#footLegal:empty{display:none}

/* ── the footer ─────────────────────────────────────────────────────────────────────────────────────
   <footer> is the flex row itself — wordmark left, the .s column right. It briefly had a .footin
   wrapper, which nested a flex inside a flex and collapsed the whole thing into one left column.
   There is no wrapper; do not add one.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:40px clamp(20px,5vw,60px);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--paper);color:var(--faint);font-size:12.5px;position:relative;z-index:2}
footer .brandwm{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);opacity:.85}
footer .brandwm b{color:var(--em)}
footer img.brandlogo{height:24px;opacity:.85}
/* .s is a WRAPPING HORIZONTAL ROW of mono caps, not a right-aligned column. This was the difference
   between the footer as it shipped and the one that replaced it: `flex-direction:column` +
   `text-align:right` + `align-items:flex-start` above turned one clean strip into a stack. */
footer .s{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono,'Inter',system-ui,sans-serif);
  letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--mute)}
footer .s a{color:var(--mute);text-decoration:none}
footer .s a:hover{color:var(--em)}
@media(max-width:700px){footer{gap:18px;align-items:flex-start}footer .s{gap:10px 18px}}

/* Gradient-word safety: without background-clip:text, .grad would render as invisible text
   inside a gradient box. Mirrors the .gold guard in landing-esqrd.css. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:none !important;-webkit-text-fill-color:var(--em) !important;color:var(--em)}
}

/* ── hero: the blueprint treatment, for the pages that don't load landing-blueprint.css ──────────
   features.html and how-it-works.html were converted to the home page's <section class="hero"> /
   <div class="heroin"> markup, but they load landing-esqrd.css rather than landing-blueprint.css —
   where those two rules actually live. So .heroin had no styling at all, and worse, esqrd's own
   .hero rule (`height:820vh`, for the scroll-journey concept) applied instead: a hero eight screens
   tall with the text sitting under the constellation canvas. That is the "huge space" and the
   overlap. Restating the rules here, in the sheet those pages DO load last, keeps one definition
   per page rather than adding a second stylesheet whose .hero would still lose to esqrd's height. */
.hero{
  height:auto;                /* kills landing-esqrd.css:51's height:820vh */
  padding:0; border-top:0;
  min-height:min(92vh,860px);
  display:flex; align-items:center;
  overflow:hidden; position:relative;
}
.hero #stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.heroin{
  position:relative; z-index:2;
  padding:96px var(--pad) 84px;
  max-width:1320px; margin:0 auto; width:100%;
}
.heroin h1{max-width:15ch;margin-top:20px}
.heroin .lede{margin-top:22px}
/* esqrd sizes .hero h1 for a full-bleed scroll hero; the blueprint hero sets its own size inline. */
.heroin h1{line-height:1.02;letter-spacing:-.02em}