/* ==========================================================================
   NexGuard — website design system
   One stylesheet, shared by every page. Token-driven; light by default,
   with the original dark palette kept as an opt-in.
   Fonts: Manrope (display) · Inter (body) · IBM Plex Mono (data).
   Signature system: soft cool-white ground, dotted-grid hero, two-tone
   headlines, color-coded module tiles (blue/cyan/emerald/amber),
   soft rounded cards, gradient blue→cyan CTA, floating pill badges.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
/* Light is the default, and it is the default for everyone. The palette in
   the bare `:root` below IS the site: a visitor gets it on the first paint
   whatever their laptop is set to, because `prefers-color-scheme` is
   deliberately NOT consulted here. That is the whole point of the word
   "default" — it has to mean the same thing on a dark-set machine as on a
   light-set one, or half the audience never sees the theme we chose.

   Dark is still here, and it is still the tuned palette this site shipped
   with. It applies only when a person asks for it, which stamps
   data-theme="dark" on <html> and remembers the choice (assets/theme.js).
   If we ever DO want the OS preference to win on a first visit, that is one
   media query added around a copy of the dark block — nothing else changes.

   `body` sets an explicit background from a token, so neither theme borrows
   whatever ground the browser happens to paint. */
:root{
  --bg:#F7F9FD; --bg-2:#EDF3FB; --surface:#FFFFFF; --surface-2:#F2F6FD; --raise:#FFFFFF;
  --text:#0E1A33; --ink-soft:#2C3B59; --muted:#53617E; --faint:#616E8B;
  /* The two poles are the same royal blue and cyan as the wordmark, stepped
     DOWN this time rather than up. A hue that reads cleanly on navy measures
     2.6:1 on white, so the light theme takes the darker step of the same
     ramp — both of these clear 4.5:1 on --bg, because both carry link and
     label text, not just decoration. */
  --brand:#1360CC; --brand-2:#0C7391; --brand-ink:#FFFFFF;
  --indigo:#1360CC; --cyan:#0C7391; --emerald:#067A55; --amber:#A35A06;
  --good:#067A55; --warn:#A35A06; --crit:#C0223F; --soon:#0C7391;
  --line:rgba(16,36,80,.14); --line-2:rgba(16,36,80,.08); --grid:rgba(19,96,204,.13);
  /* Tints are the same four hues at low alpha, so they compose over a white
     card the way they used to compose over a navy one. */
  --tint-blue:rgba(19,96,204,.085); --tint-cyan:rgba(12,115,145,.085); --tint-mint:rgba(6,122,85,.08); --tint-peach:rgba(163,90,6,.085);
  /* Button gradient is unchanged: it was already dark enough to hold white
     button text at 4.5:1, and it reads as the brand on either ground. */
  --cta-a:#0F5CC8; --cta-b:#0C7EA8;
  --shadow:0 1px 2px rgba(16,36,80,.05), 0 12px 30px -18px rgba(16,36,80,.20);
  --shadow-lg:0 26px 64px -30px rgba(16,36,80,.28);
  --glow:0 12px 30px -10px rgba(19,96,204,.34);
  /* Which way a colour has to move to stay legible on THIS ground. Used at the
     point of use (not stored pre-mixed) so the per-page --accent overrides on
     `body` still feed into it. */
  --ink-lift:#000000;
  --radius:18px; --radius-sm:12px; --radius-lg:24px;
  --maxw:1200px; --gutter:24px;
  --step:clamp(54px,7vw,92px);
  --font-display:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body:"Inter";
  /* Per-page accent — defaults to brand; overridden by body[data-accent] */
  --accent:var(--brand); --accent-2:var(--brand-2);
  /* Premium ink for the darkest section blocks. Fixed in BOTH themes: the CTA
     band, the footer and .section.dark are meant to be dark bands punctuating
     a light page, not surfaces that follow the theme. */
  --ink-navy:#07111F; --ink-navy-2:#0B1F3A;
}

/* The dark theme, by explicit choice only. Same tokens, same names, same
   roles — only the values move, so nothing downstream needs a second rule. */
:root[data-theme="dark"]{
  --bg:#0A1024; --bg-2:#0E1631; --surface:#111A35; --surface-2:#0E1730; --raise:#152142;
  --text:#EAF0FB; --ink-soft:#C9D4EC; --muted:#9DAAC6; --faint:#6F7EA0;
  --brand:#3E9BEF; --brand-2:#22B8E8; --brand-ink:#0A1024;
  --indigo:#3E9BEF; --cyan:#22B8E8; --emerald:#34D399; --amber:#FBBF24;
  --good:#34D399; --warn:#FBBF24; --crit:#FB7185; --soon:#22B8E8;
  --line:rgba(148,171,220,.16); --line-2:rgba(148,171,220,.09); --grid:rgba(62,155,239,.16);
  --tint-blue:rgba(18,104,224,.16); --tint-cyan:rgba(34,184,232,.15); --tint-mint:rgba(16,185,129,.14); --tint-peach:rgba(245,158,11,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.7);
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.8);
  --glow:0 14px 40px -10px rgba(62,155,239,.5);
  --ink-lift:#FFFFFF;
}

/* --- Reset / base -------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display), ui-rounded, system-ui, sans-serif; font-weight:700; line-height:1.1; text-wrap:balance; margin:0; color:var(--text); letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.022em}
h3{font-size:1.24rem; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600}
.skip:focus{left:0}
/* two-tone headline accent */
.tt{color:var(--accent-2)}
.tt.i{color:var(--accent)}
/* The accent phrase wraps, at every width.
   It used to be `white-space:nowrap` with an absolutely-positioned ::after for
   the underline. That made the phrase one unbreakable box, and an unbreakable
   box is wider than its column more often than it looks: "no one over your
   shoulder" overflowed at 390px AND at 1280px, where it ran behind the hero
   illustration. Neither was visible as a scrollbar, because .hero is
   overflow:hidden — it just cut the words off, and a sweep that only checked
   for sideways scroll called the page clean.
   The underline is now a background on the text itself, so
   box-decoration-break:clone redraws it under each wrapped line. An
   absolutely-positioned ::after could only ever cover the first one, which is
   why nowrap had to exist to prop it up. */
.u-accent{position:relative;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 32%,transparent),color-mix(in srgb,var(--accent-2) 32%,transparent));
  background-repeat:no-repeat; background-size:100% .26em; background-position:0 calc(100% - .06em);
  -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* --- Layout helpers ------------------------------------------------------ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.section{padding:var(--step) 0}
.section.tight{padding:calc(var(--step) * .58) 0}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:"Inter",sans-serif; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); font-weight:700; margin:0 0 15px}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); flex:0 0 auto;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.center .eyebrow,.eyebrow.center{justify-content:center}
.lead{color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.16rem); max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.grid{display:grid; column-gap:22px; row-gap:16px}
.muted{color:var(--muted)}

/* --- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:.96rem;
  border-radius:11px; padding:12px 20px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .16s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease; font-family:inherit; white-space:nowrap}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
.btn-primary{background:linear-gradient(120deg,var(--cta-a),var(--cta-b)); color:#fff; box-shadow:var(--glow)}
.btn-primary:hover{box-shadow:0 16px 42px -10px rgba(18,104,224,.55)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--line); box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); box-shadow:var(--shadow-lg)}
.btn-lg{padding:15px 26px; font-size:1.02rem; border-radius:12px}
.btn-block{width:100%}
.btn-sm{padding:9px 15px; font-size:.86rem; border-radius:10px}

/* --- Badges / pills ------------------------------------------------------ */
.pill{display:inline-flex; align-items:center; gap:6px; font-family:"Inter",sans-serif; font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line)}
.pill.live{color:var(--good); border-color:color-mix(in srgb,var(--good) 38%,transparent); background:color-mix(in srgb,var(--good) 10%,transparent)}
.pill.soon{color:var(--soon); border-color:color-mix(in srgb,var(--soon) 40%,transparent); background:color-mix(in srgb,var(--soon) 11%,transparent)}
.pill.beta{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 42%,transparent); background:color-mix(in srgb,var(--warn) 11%,transparent)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.live .dot{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pill.live .dot{animation:none}}

/* --- Header / nav -------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:80; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-2)}
.nav{display:flex; align-items:center; gap:8px; height:78px; position:relative}
.brand{display:flex; align-items:center; padding-right:6px}
.brand:hover{text-decoration:none}
/* Height drives the mark; width follows the file's own ratio, so swapping in a
   re-cut logo never needs this rule touched. */
/* The wordmark is a two-line lockup: NEXONIX over SYSTEMS. At the 32-38px a
   single-line logo would take, the lower line falls under 8px and stops being
   readable, which is why it looks undersized rather than merely small. 50px
   gives the second line about 11px — the point where it reads as a name
   instead of a texture. */
.brand-logo{display:block; height:50px; width:auto; flex:0 0 auto}
@media (max-width:860px){.brand-logo{height:44px}}
@media (max-width:520px){.brand-logo{height:38px}}

/* The mark ships as two files because its "NEXONIX" is near-black navy: it
   vanishes on a dark ground, and the white-lettered cut vanishes on a light
   one. Both copies are in the markup and CSS picks — a swap in JS would
   flash the wrong one on the way past.
   The footer is a dark band in BOTH themes, so it always takes the white cut
   and never follows the theme. */
.brand-logo.on-dark{display:none}
:root[data-theme="dark"] .brand-logo.on-light{display:none}
:root[data-theme="dark"] .brand-logo.on-dark{display:block}
.site-footer .brand-logo{height:56px}
.site-footer .brand-logo.on-light{display:none}
.site-footer .brand-logo.on-dark{display:block}
.nav-desktop{margin:0 auto}
.nav-links{display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none}
.nav-links > li{position:static}
.nav-link{display:inline-flex; align-items:center; gap:5px; padding:9px 14px; border-radius:9px; color:var(--ink-soft); font-weight:500; font-size:.95rem; background:none; border:0; cursor:pointer; font-family:inherit}
.nav-link:hover{color:var(--brand); background:var(--bg-2); text-decoration:none}
.nav-link[aria-current="page"]{color:var(--brand)}
.nav-link .chev{width:12px; height:12px; opacity:.55; transition:transform .2s ease}
.nav-links > li:hover .nav-link .chev,.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-spacer{flex:0 0 auto}
.nav-cta{display:flex; align-items:center; gap:9px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--muted); cursor:pointer; box-shadow:var(--shadow)}
.icon-btn:hover{color:var(--brand); border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}

/* Theme toggle. Both glyphs are in the markup and CSS picks between them, so
   the right one is on screen at the first paint rather than after a script has
   run. The button shows the theme it will GIVE you, not the one you are in —
   a moon on the light page, a sun on the dark one — which is what people
   reach for; theme.js keeps the aria-label saying the same thing in words. */
.theme-btn{flex:0 0 auto}
.theme-btn > span{display:inline-flex}
.theme-btn .ic-dark{display:none}
:root[data-theme="dark"] .theme-btn .ic-light{display:none}
:root[data-theme="dark"] .theme-btn .ic-dark{display:inline-flex}
/* In the drawer the toggle sits beside the close button, so the pair stays
   together at the top-right rather than pushing the close button off the row. */
.drawer-tools{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto}

/* Mega menu — full content width, aligned to the page container */
.mega{position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--raise); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:90}
.mega.narrow,.mega.right{left:0; right:0}
.nav-links > li:hover > .mega,.nav-link[aria-expanded="true"] + .mega,.mega:hover,.mega:focus-within{opacity:1; visibility:visible; transform:translateY(0)}
.mega-grid{display:grid; grid-template-columns:1fr 1fr 300px; gap:8px 26px}
.mega-grid.two{grid-template-columns:1fr 1fr}
.mega-grid.three{grid-template-columns:repeat(3,1fr) 280px; column-gap:20px}
.mega-col .mega-h{font-family:"Inter",sans-serif; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin:6px 8px 8px; font-weight:700}
.mega-item{display:flex; gap:12px; padding:10px 11px; border-radius:12px; color:var(--text)}
.mega-item:hover{background:var(--bg-2); text-decoration:none}
.mega-item .mi-ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(150deg,var(--tint-blue),color-mix(in srgb,var(--indigo) 8%,var(--surface))); color:var(--indigo)}
.mega-item:hover .mi-ic{background:linear-gradient(150deg,color-mix(in srgb,var(--indigo) 20%,var(--surface)),var(--tint-blue))}
.mega-item .mi-t{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:7px}
.mega-item .mi-d{color:var(--muted); font-size:.79rem; line-height:1.4; margin-top:1px}
.mega-feat{background:linear-gradient(160deg,var(--tint-cyan),var(--surface) 78%);
  border:1px solid var(--line-2); border-radius:14px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; gap:12px}
.mega-feat-t{font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--text); margin:6px 0 6px}
.mega-feat .k{font-family:"Inter",sans-serif; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); font-weight:700}
.mega-feat p{font-size:.83rem; color:var(--muted)}

/* Mobile drawer */
.hamburger{display:none}
.drawer{display:none}
.drawer[open]{display:block}
.drawer-top{display:none}
@media (max-width:940px){
  .nav-desktop,.nav-cta .btn{display:none}
  .hamburger{display:inline-flex}
  /* With the desktop nav and both buttons hidden, nothing in the row grows —
     .nav-spacer is flex:0 0 auto — so the hamburger sat tucked against the
     logo on the left. It belongs at the far edge, where a thumb already is. */
  .nav-cta{margin-left:auto}
  .mega{display:none}
  /* A full-screen sheet rather than a panel pinned below the header: the
     header's height changes with the breakpoint and the announcement bar can
     be dismissed, so any fixed top offset was wrong half the time — it left a
     gap or clipped the first link. Covering the whole viewport also stops the
     page behind it showing through and scrolling. The hamburger is underneath
     it, so the sheet carries its own close button. */
  .drawer{position:fixed; inset:0; background:var(--bg); z-index:120;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding:0 var(--gutter) calc(40px + env(safe-area-inset-bottom))}
  .drawer-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:1; background:var(--bg);
    padding:calc(12px + env(safe-area-inset-top)) 0 12px; border-bottom:1px solid var(--line-2)}
  .drawer-top .brand-logo{height:40px}
  .drawer-body{padding-top:6px}
  .drawer details{border-bottom:1px solid var(--line-2)}
  .drawer summary{list-style:none; cursor:pointer; padding:16px 2px; font-family:var(--font-display); font-weight:600; font-size:1.06rem; display:flex; justify-content:space-between; align-items:center}
  .drawer summary::-webkit-details-marker{display:none}
  .drawer summary .plus{color:var(--faint); font-weight:400}
  .drawer details[open] summary .plus{transform:rotate(45deg)}
  .drawer .d-links{padding:0 2px 14px}
  .drawer .d-links a{display:block; padding:12px 8px; min-height:44px; font-size:.97rem; color:var(--muted); border-radius:8px}
  .drawer .d-links a:hover{background:var(--bg-2); color:var(--brand); text-decoration:none}
  .drawer .d-flat{font-family:var(--font-display); font-weight:600; font-size:1.06rem; padding:16px 2px; display:block; border-bottom:1px solid var(--line-2); color:var(--text)}
  .drawer .d-cta{margin-top:20px; display:grid; gap:10px}
}
@media (max-width:1120px){.mega{min-width:0; left:8px; right:8px}}

/* --- Announcement bar ---------------------------------------------------- */
.announce{background:linear-gradient(90deg,var(--tint-blue),var(--tint-cyan)); border-bottom:1px solid var(--line-2); font-size:.86rem}
.announce .wrap{display:flex; align-items:center; gap:12px; padding-top:10px; padding-bottom:10px}
.announce .a-tag{font-family:"Inter",sans-serif; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); font-weight:700; border:1px solid color-mix(in srgb,var(--brand) 32%,transparent); padding:3px 9px; border-radius:999px; flex:0 0 auto; background:var(--surface)}
.announce p{color:var(--ink-soft); flex:1; min-width:0}
.announce a{font-weight:600}
.announce .a-x{background:none; border:0; color:var(--faint); cursor:pointer; font-size:1.1rem; line-height:1; padding:4px}
.announce[hidden]{display:none}
/* On narrow screens the fixed-width tag would sit vertically centred against a
   multi-line message. Stack instead: tag on its own row, message full width,
   dismiss pinned to the top-right. */
@media (max-width:640px){
  .announce .wrap{flex-wrap:wrap; gap:8px; position:relative; padding-right:40px}
  .announce .a-tag{order:-1}
  .announce p{flex:1 1 100%}
  .announce .a-x{position:absolute; top:6px; right:calc(var(--gutter) - 4px)}
}

/* --- Cards --------------------------------------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:26px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .26s ease}
.tile:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.tile .t-ic{width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(150deg,var(--tint-blue),color-mix(in srgb,var(--indigo) 8%,var(--surface))); color:var(--indigo); margin-bottom:18px}
.tile h3{margin-bottom:9px}
.tile p{color:var(--muted); font-size:.95rem}
.tile .t-foot{margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:10px}
.tile .t-link{font-weight:600; font-size:.89rem; display:inline-flex; align-items:center; gap:5px; color:var(--indigo)}
/* Rich feature card: badge in the header row, sub-feature chips before the link */
.fcard .fcard-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.fcard .fcard-top .t-ic{margin-bottom:0}
.fcard h3{margin-bottom:7px}
.fcard p{color:var(--muted); font-size:.93rem}
.subs{display:flex; flex-wrap:wrap; gap:7px; margin-top:15px}
.sub-chip{font-size:.73rem; font-weight:600; color:var(--ink-soft); background:color-mix(in srgb,var(--surface-2) 70%,transparent); border:1px solid var(--line-2); border-radius:999px; padding:4px 11px; line-height:1.35}
.grid .tile:nth-child(4n+2) .sub-chip{border-color:color-mix(in srgb,var(--cyan) 22%,var(--line-2))}
.grid .tile:nth-child(4n+3) .sub-chip{border-color:color-mix(in srgb,var(--emerald) 22%,var(--line-2))}
.grid .tile:nth-child(4n+4) .sub-chip{border-color:color-mix(in srgb,var(--amber) 24%,var(--line-2))}
/* Whole card is a link; sub-chips sit above the hit layer and are clickable too */
.fcard{position:relative; overflow:hidden}
.fcard-hit{position:absolute; inset:0; z-index:1; border-radius:inherit; text-decoration:none}
.fcard-hit:focus-visible{outline:2.5px solid var(--brand); outline-offset:-3px}
.fcard .subs{position:relative; z-index:2}
.fcard .t-link{cursor:pointer}
.fcard .t-link svg{transition:transform .22s ease}
.fcard:hover .t-link svg{transform:translateX(4px)}
.fcard::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--indigo),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.fcard:hover::after{transform:scaleX(1)}
a.sub-chip{cursor:pointer; text-decoration:none; transition:transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease}
a.sub-chip:hover{transform:translateY(-1px); text-decoration:none; color:var(--brand); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
@media (prefers-reduced-motion:reduce){.fcard:hover .t-link svg,a.sub-chip:hover{transform:none}}
/* color-coded module system — rotate accent across a grid of tiles */
.grid .tile:nth-child(4n+1){background:linear-gradient(180deg,var(--tint-blue),var(--surface) 70%)}
.grid .tile:nth-child(4n+2){background:linear-gradient(180deg,var(--tint-cyan),var(--surface) 70%)}
.grid .tile:nth-child(4n+2) .t-ic{background:linear-gradient(150deg,var(--tint-cyan),color-mix(in srgb,var(--cyan) 8%,var(--surface))); color:var(--cyan)}
.grid .tile:nth-child(4n+2) .t-link{color:var(--cyan)}
.grid .tile:nth-child(4n+3){background:linear-gradient(180deg,var(--tint-mint),var(--surface) 70%)}
.grid .tile:nth-child(4n+3) .t-ic{background:linear-gradient(150deg,var(--tint-mint),color-mix(in srgb,var(--emerald) 8%,var(--surface))); color:var(--good)}
.grid .tile:nth-child(4n+3) .t-link{color:var(--good)}
.grid .tile:nth-child(4n+4){background:linear-gradient(180deg,var(--tint-peach),var(--surface) 70%)}
.grid .tile:nth-child(4n+4) .t-ic{background:linear-gradient(150deg,var(--tint-peach),color-mix(in srgb,var(--amber) 10%,var(--surface))); color:var(--warn)}
.grid .tile:nth-child(4n+4) .t-link{color:var(--warn)}
/* explicit module tints (available to markup) */
.ic-indigo{background:linear-gradient(150deg,var(--tint-blue),color-mix(in srgb,var(--indigo) 10%,var(--surface)))!important; color:var(--indigo)!important}
.ic-cyan{background:linear-gradient(150deg,var(--tint-cyan),color-mix(in srgb,var(--cyan) 10%,var(--surface)))!important; color:var(--cyan)!important}
.ic-emerald{background:linear-gradient(150deg,var(--tint-mint),color-mix(in srgb,var(--emerald) 10%,var(--surface)))!important; color:var(--good)!important}
.ic-amber{background:linear-gradient(150deg,var(--tint-peach),color-mix(in srgb,var(--amber) 12%,var(--surface)))!important; color:var(--warn)!important}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--grid) 1.1px, transparent 1.1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 62% 26%, #000 42%, transparent 80%);
          mask-image:radial-gradient(ellipse 78% 62% at 62% 26%, #000 42%, transparent 80%); opacity:.85}
.hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 44% at 84% 4%, color-mix(in srgb,var(--accent-2) 15%,transparent), transparent 70%),
            radial-gradient(40% 40% at 2% 8%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; position:relative; z-index:1}
@media (max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr); gap:40px}}
/* A grid item's automatic minimum size is its MIN-CONTENT width, so one
   unbreakable child — a nowrap phrase, a long URL — silently widens the track
   past the container. `1fr` alone does not stop that; `minmax(0,1fr)` does, and
   min-width:0 covers the children the track sizing looks at. This page hid the
   result rather than showing it, because .hero is overflow:hidden: the H1 was
   cut off mid-word on every solutions page and nothing scrolled sideways to
   reveal it. */
.hero-grid > *{min-width:0}
.hero h1{margin-bottom:20px}
.hero .lead{margin-bottom:28px; font-size:clamp(1.08rem,1.8vw,1.26rem)}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
/* Inline flow (not flex): keeps the note's text and its trailing link in one
   run so a link never becomes its own flex item and orphans onto a new line. */
.hero-note{margin-top:20px; color:var(--muted); font-size:.86rem; line-height:1.55}
.hero-note svg{color:var(--good); vertical-align:-3px; margin-right:6px}
.hero-note .nb{white-space:nowrap}
.hn-link{color:var(--muted); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset:3px; font-weight:600; transition:color .15s ease}
.hn-link:hover{color:var(--accent)}

/* Instrument panel (hero visual) + floating badges */
.hero-vis{position:relative}
.panel{background:var(--raise); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:24px; position:relative; z-index:1}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.panel-head .lab{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:700; font-family:"Inter",sans-serif}
.gauge .num{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:3rem; line-height:1; letter-spacing:-.02em}
.sig{display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--line-2)}
.sig .s-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--indigo); flex:0 0 auto}
.sig .s-t{font-size:.88rem; font-weight:600}
.sig .s-d{font-size:.77rem; color:var(--faint)}
.sig .s-state{margin-left:auto; font-family:"Inter",sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
/* floating pill badges (signature motif) */
.fbadge{position:absolute; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 15px 8px 8px; box-shadow:var(--shadow-lg); z-index:3}
.fbadge .fb-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto}
.fbadge .fb-t{line-height:1.15}
.fbadge .fb-t b{display:block; font-family:var(--font-display); font-size:.82rem; color:var(--text)}
.fbadge .fb-t small{font-size:.68rem; color:var(--faint)}
.fbadge.b1{top:-18px; left:-24px} .fbadge.b2{top:42%; right:-22px} .fbadge.b3{bottom:20px; left:-28px}
@media (max-width:520px){.fbadge.b1{left:-6px}.fbadge.b3{left:-6px}.fbadge.b2{right:-6px}}
.anim .fbadge{animation:float 6s ease-in-out infinite}
.anim .fbadge.b2{animation-delay:-2s} .anim .fbadge.b3{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.anim .fbadge{animation:none}}

/* --- Banner media (hero illustration + floating text) -------------------- */
.banner-media{position:relative; z-index:1; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,var(--tint-blue),var(--tint-cyan) 55%,var(--tint-peach))}
.banner-media img{display:block; width:100%; height:auto}
.banner-vis .fbadge.bf1{top:-16px; right:14px}
.banner-vis .fbadge.bf2{top:34%; left:-22px}
.banner-vis .fbadge.bf3{bottom:22px; right:-16px}
.anim .banner-vis .fbadge.bf2{animation-delay:-2s}
.anim .banner-vis .fbadge.bf3{animation-delay:-4s}
@media (max-width:940px){.banner-vis{max-width:520px; margin:0 auto}}

/* Wide feature banner: a drawn brand scene with feature chips floating over it.
   The chips sit inside the banner box (not outside it, as the hero's do), so a
   narrow screen never pushes one past the gutter. */
.fbanner{position:relative; margin:34px 0 0}
.fbanner-media{position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:1160/248; background:var(--tint-blue)}
.fbanner-media .fb-scene{display:block; width:100%; height:100%}
.fbanner .fbadge{position:absolute; z-index:3}
.fbanner .fbadge.fb-a{top:-16px; left:22px}
.fbanner .fbadge.fb-b{top:26%; right:26px}
.fbanner .fbadge.fb-c{bottom:-16px; left:32%}
.fbanner .fbadge.fb-d{bottom:24%; left:18px}
.anim .fbanner .fbadge.fb-b{animation-delay:-1.5s}
.anim .fbanner .fbadge.fb-c{animation-delay:-3s}
.anim .fbanner .fbadge.fb-d{animation-delay:-4.5s}
@media (max-width:860px){
  .fbanner-media{aspect-ratio:3/2}
  .fbanner .fbadge.fb-c{left:auto; right:22px; bottom:-14px}
  .fbanner .fbadge.fb-d{bottom:46%}
}
@media (max-width:560px){
  /* Four chips over a phone-width banner is a pile, not a composition: keep
     the two that name the feature and drop the rest. */
  .fbanner-media{aspect-ratio:4/3}
  .fbanner .fbadge{position:static; display:none}
  .fbanner .fbadge.fb-a,.fbanner .fbadge.fb-b{display:flex; position:absolute}
  .fbanner .fbadge.fb-a{top:-14px; left:8px}
  .fbanner .fbadge.fb-b{bottom:-14px; right:8px; top:auto}
}
@media (max-width:520px){.banner-vis .fbadge.bf1{right:2px}.banner-vis .fbadge.bf2{left:-4px}.banner-vis .fbadge.bf3{right:-4px}}
/* Interior page banner: text left, illustration right, with breadcrumb above */
.page-banner .crumb{position:relative; z-index:1}
.page-banner .hero-grid{margin-top:6px}

/* --- Stats band ---------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; text-align:center; box-shadow:var(--shadow)}
.stat:nth-child(4n+1){background:linear-gradient(180deg,var(--tint-blue),var(--surface) 74%)}
.stat:nth-child(4n+2){background:linear-gradient(180deg,var(--tint-cyan),var(--surface) 74%)}
.stat:nth-child(4n+3){background:linear-gradient(180deg,var(--tint-mint),var(--surface) 74%)}
.stat:nth-child(4n+4){background:linear-gradient(180deg,var(--tint-peach),var(--surface) 74%)}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--text)}
.stat .l{color:var(--muted); font-size:.83rem; margin-top:5px}

/* --- Command center (home centerpiece) ----------------------------------- */
.cmd{background:var(--raise); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; margin-top:38px}
.cmd-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.cmd-ttl{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; color:var(--text); font-size:1rem}
.cmd-ttl svg{color:var(--indigo)}
.cmd-body{display:grid; grid-template-columns:1.15fr .85fr}
@media(max-width:820px){.cmd-body{grid-template-columns:1fr}}
.cmd-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px; border-right:1px solid var(--line-2)}
@media(max-width:820px){.cmd-metrics{border-right:0; border-bottom:1px solid var(--line-2)}}
@media(max-width:520px){.cmd-metrics{grid-template-columns:repeat(2,1fr); padding:16px}}
.cmet{position:relative; display:block; border:1px solid var(--line); border-radius:14px; padding:14px 15px; background:var(--surface); color:var(--text); text-decoration:none; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
a.cmet:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.cmet-go{position:absolute; top:12px; right:12px; color:var(--faint); opacity:0; transform:translateX(-4px); transition:opacity .18s ease, transform .18s ease; display:inline-flex}
a.cmet:hover .cmet-go{opacity:1; transform:translateX(0); color:var(--brand)}
a.cmet:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px}
.cmet.i{background:linear-gradient(180deg,var(--tint-blue),var(--surface) 76%)}
.cmet.v{background:linear-gradient(180deg,var(--tint-cyan),var(--surface) 76%)}
.cmet.e{background:linear-gradient(180deg,var(--tint-mint),var(--surface) 76%)}
.cmet.a{background:linear-gradient(180deg,var(--tint-peach),var(--surface) 76%)}
.cmet .k{display:flex; align-items:center; gap:7px; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700}
.cmet .k i{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.cmet.i .k i{background:var(--indigo)} .cmet.v .k i{background:var(--cyan)} .cmet.e .k i{background:var(--emerald)} .cmet.a .k i{background:var(--amber)}
.cmet .v-num{font-family:var(--font-display); font-weight:700; font-size:1.55rem; color:var(--text); margin-top:6px; line-height:1}
.cmet .s{font-size:.74rem; font-weight:600; color:var(--muted); margin-top:4px}
.cmd-side{padding:20px 22px; display:flex; flex-direction:column; gap:10px}
.cmd-sub{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; margin-bottom:2px}
.cmd-side .mock-line{margin-bottom:0}
/* Finding → fix. Three columns: where it came from, what it says, what to do.
   The middle column takes the slack, so the two tool blocks line up down the
   list and the eye can run either edge without re-finding it on each row. */
.rel-list{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:12px; counter-reset:none}
.rel-item{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,17rem);
  align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; box-shadow:var(--shadow)}
.rel-side{display:flex; align-items:center; gap:11px; min-width:0; color:var(--text)}
.rel-side:hover{text-decoration:none}
.rel-ic{width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-2))}
.rel-meta{display:flex; flex-direction:column; min-width:0}
.rel-k{font-family:"Inter",sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
.rel-name{font-weight:650; font-size:.94rem; color:var(--text)}
.rel-side:hover .rel-name{color:var(--brand)}
.rel-act{font-size:.8rem; color:var(--muted); line-height:1.35}

/* The finding itself, set as the quoted thing it is. The arrow is drawn rather
   than typed so it cannot be read aloud as punctuation by a screen reader. */
.rel-finding{margin:0; position:relative; padding-left:26px;
  font-size:.95rem; color:var(--ink-soft)}
.rel-finding::before{content:""; position:absolute; left:0; top:.55em;
  width:14px; height:1px; background:color-mix(in srgb,var(--brand) 55%,transparent)}
.rel-finding::after{content:""; position:absolute; left:9px; top:calc(.55em - 3px);
  width:6px; height:6px; border-top:1px solid color-mix(in srgb,var(--brand) 55%,transparent);
  border-right:1px solid color-mix(in srgb,var(--brand) 55%,transparent); transform:rotate(45deg)}

@media (max-width:980px){
  .rel-item{grid-template-columns:minmax(0,1fr); gap:10px; padding:16px 18px}
  /* Stacked, the connector points down rather than across. */
  .rel-finding{padding-left:0; padding-top:20px}
  .rel-finding::before{left:16px; top:4px; width:1px; height:12px}
  .rel-finding::after{left:13px; top:11px; transform:rotate(135deg)}
}

/* --- Feature preview bits (chat, code chips, storage bar) ----------------- */
.chat{max-width:88%; padding:10px 13px; border-radius:14px; font-size:.86rem; line-height:1.45; margin:8px 0}
.chat-u{margin-left:auto; background:linear-gradient(120deg,var(--cta-a),var(--cta-b)); color:#fff; border-bottom-right-radius:4px}
.chat-a{background:var(--surface-2); color:var(--text); border:1px solid var(--line-2); border-bottom-left-radius:4px}
.chat-who{font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--faint); margin:6px 2px 0}
.codechips{display:flex; gap:8px; justify-content:center; margin:12px 0}
.codechips span{width:34px; height:44px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text); background:var(--surface)}
.vbar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:6px}
.vbar > i{display:block; height:100%; background:linear-gradient(90deg,var(--indigo),var(--cyan))}

/* --- Statement / trust --------------------------------------------------- */
.statement{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .26s ease}
.statement:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.statement .k{font-family:"Inter",sans-serif; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-bottom:13px; display:inline-flex; align-items:center; gap:8px}
.statement .k::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.statement h3{font-size:1.4rem; margin-bottom:11px}
.statement p{color:var(--muted)}

/* --- Showcase rows ------------------------------------------------------- */
.show{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.show.flip .show-txt{order:2}
@media (max-width:860px){.show{grid-template-columns:1fr; gap:28px}.show.flip .show-txt{order:0}}
.show-txt h2{margin-bottom:15px}
.show-txt .lead{margin-bottom:18px}
.check{display:flex; gap:12px; padding:9px 0; align-items:flex-start}
.check svg{flex:0 0 auto; color:var(--good); margin-top:2px}
.check .c-t{font-weight:600; font-size:.96rem}
.check .c-d{color:var(--muted); font-size:.89rem}
.art{background:linear-gradient(165deg,var(--tint-blue),var(--surface) 62%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg)}
.art .a-head{display:flex; justify-content:space-between; align-items:center; font-family:"Inter",sans-serif; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:15px}
.mock-line{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; margin-bottom:10px; background:var(--surface); box-shadow:var(--shadow)}
.mock-line .m-ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--tint-blue),var(--surface));display:grid;place-items:center;color:var(--indigo);flex:0 0 auto}
.mock-line .m-t{font-size:.86rem;font-weight:600}
.mock-line .m-d{font-size:.75rem;color:var(--faint)}
.mock-line .st{margin-left:auto; font-family:var(--font-display); font-size:.8rem; font-weight:600}
a.mock-line{color:var(--text); text-decoration:none; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
a.mock-line:hover{transform:translateX(3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 35%,var(--line-2)); text-decoration:none}
a.mock-line .m-t{color:var(--text)}

/* --- Steps --------------------------------------------------------------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.steps.steps-2{grid-template-columns:repeat(2,1fr)}
.steps.steps-3{grid-template-columns:repeat(3,1fr)}
.steps.steps-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){.steps.steps-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.steps,.steps.steps-2,.steps.steps-3,.steps.steps-4{grid-template-columns:1fr}}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); position:relative; transition:transform .22s ease, box-shadow .26s ease}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.step .num{font-family:"Inter",sans-serif; font-weight:700; color:var(--brand); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px}
.step .num::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.step h3{margin:12px 0 8px; font-size:1.14rem}
.step p{color:var(--muted); font-size:.93rem}

/* --- Tables (compare / plan matrix) -------------------------------------- */
/* The comparison table centres cells for tick/cross marks; a prose variant
   left-aligns, because centred multi-line paragraphs are hard to read. */
.compare.compare-prose td,.compare.compare-prose th{text-align:left; vertical-align:top}
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
table.compare{width:100%; border-collapse:collapse; min-width:560px; background:var(--surface)}
table.compare th,table.compare td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-2); font-size:.92rem}
table.compare thead th{font-family:var(--font-display); font-size:.95rem; background:var(--surface-2)}
table.compare tbody td:not(:first-child){text-align:center}
table.compare .yes{color:var(--good); font-weight:600}
table.compare .no{color:var(--faint)}
table.compare tr:last-child td{border-bottom:0}
.col-em{background:linear-gradient(180deg,var(--tint-cyan),color-mix(in srgb,var(--cyan) 4%,transparent))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
table.compare.compare-plans{min-width:660px}
table.compare.compare-plans thead th:not(:first-child){text-align:center;width:15%}
table.compare.compare-plans tr.grp th{background:var(--surface-2);font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:16px 18px 9px}
table.compare.compare-plans .c-feat{font-weight:500}
table.compare.compare-plans .c-feat .cf-t{display:block;font-size:.91rem;color:var(--text);font-weight:600}
table.compare.compare-plans .c-feat .cf-d{display:block;font-size:.79rem;color:var(--muted);margin-top:2px;font-weight:400;line-height:1.4}
table.compare.compare-plans td.c-mark{text-align:center;vertical-align:middle}
table.compare.compare-plans td.c-mark .yes{color:var(--good);display:inline-flex;vertical-align:middle}
table.compare.compare-plans td.c-mark .no{color:var(--faint)}
table.compare.compare-plans td.c-mark .c-val{font-size:.83rem;color:var(--text)}

/* --- Pricing ------------------------------------------------------------- */
.toggle{display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px; box-shadow:var(--shadow)}
.toggle button{border:0; background:transparent; color:var(--muted); font-weight:600; font-size:.86rem; padding:9px 17px; border-radius:999px; cursor:pointer; font-family:inherit}
.toggle button[aria-pressed="true"]{background:linear-gradient(120deg,var(--cta-a),var(--cta-b)); color:#fff; box-shadow:var(--glow)}
.toggle .save{font-family:"Inter",sans-serif; font-size:.66rem; font-weight:700; color:var(--good); margin-left:2px}
.toggle button[aria-pressed="true"] .save{color:#defff0}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr; max-width:460px; margin-inline:auto}}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative}
.plan.feat{border:1.5px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(140deg,var(--cta-a),var(--cta-b)) border-box; box-shadow:var(--shadow-lg); transform:translateY(-6px)}
@media (max-width:900px){.plan.feat{transform:none}}
.plan .pname{font-family:var(--font-display); font-weight:700; font-size:1.18rem; display:flex; align-items:center; justify-content:space-between}
.plan .ptag{font-size:.88rem; color:var(--muted); margin-top:5px; min-height:2.6em}
.plan .price{margin:18px 0 4px; display:flex; align-items:baseline; gap:4px}
.plan .price .amt{font-family:var(--font-display); font-weight:700; font-size:2.5rem; letter-spacing:-.03em}
.plan .price .per{color:var(--muted); font-size:.87rem}
.plan .sub{color:var(--faint); font-size:.79rem; min-height:1.2em}
.plan .btn{margin:20px 0 18px}
.plan ul.pl{display:grid; gap:11px}
.plan ul.pl li{display:flex; gap:10px; font-size:.91rem; color:var(--muted); align-items:flex-start}
.plan ul.pl li svg{flex:0 0 auto; color:var(--good); margin-top:3px}
.plan ul.pl li.off{color:var(--faint)}
.plan ul.pl li.off svg{color:var(--faint)}

/* --- FAQ ----------------------------------------------------------------- */
.faq{display:grid; gap:12px; max-width:820px; margin:0 auto}
details.q{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
details.q > summary{cursor:pointer; padding:18px 22px; font-family:var(--font-display); font-weight:600; font-size:1.04rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px}
details.q > summary::-webkit-details-marker{display:none}
details.q > summary .qx{flex:0 0 auto; color:var(--brand); transition:transform .2s ease}
details.q[open] > summary .qx{transform:rotate(45deg)}
details.q .q-body{padding:0 22px 20px; color:var(--muted); font-size:.96rem}
details.q .q-body a{font-weight:600}

/* --- Prose (legal / about / doc) ----------------------------------------- */
.prose{max-width:74ch; margin:0 auto}
.prose h2{margin:40px 0 12px; font-size:1.55rem}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--muted); font-size:.99rem; line-height:1.72}
.prose p{margin:12px 0}
.prose ul{margin:12px 0; padding-left:0; display:grid; gap:8px}
.prose ul li{position:relative; padding-left:22px}
.prose ul li::before{content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--brand)}
.prose strong{color:var(--text)}
.prose .updated{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--faint)}
.callout{background:linear-gradient(160deg,var(--tint-blue),var(--surface) 70%); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; padding:17px 19px; margin:18px 0}
.callout p{color:var(--text); margin:0; font-size:.93rem}
.legal-layout{display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:start}
.legal-side{position:sticky; top:90px}
.legal-side a{color:var(--muted)} .legal-side a:hover{color:var(--brand)}
@media (max-width:820px){.legal-layout{grid-template-columns:1fr; gap:22px}.legal-side{position:static}}

/* --- Forms --------------------------------------------------------------- */
.field{display:grid; gap:6px; margin-bottom:17px}
.field label{font-weight:600; font-size:.89rem}
.field .hint{color:var(--faint); font-size:.79rem}
.field input,.field textarea,.field select{width:100%; padding:13px 15px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.field textarea{min-height:130px; resize:vertical}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--crit)}
.field .err{color:var(--crit); font-size:.79rem; min-height:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:.8rem; color:var(--faint); margin-top:4px}
.form-status{border-radius:12px; padding:14px 16px; font-size:.9rem; margin-top:8px}
.form-status[data-kind="ok"]{background:color-mix(in srgb,var(--good) 12%,transparent); color:var(--good); border:1px solid color-mix(in srgb,var(--good) 40%,transparent)}
.form-status[data-kind="err"]{background:color-mix(in srgb,var(--crit) 12%,transparent); color:var(--crit); border:1px solid color-mix(in srgb,var(--crit) 40%,transparent)}
.form-status[hidden]{display:none}

/* --- CTA band (gradient, dark, glow) ------------------------------------- */
.cta-band{position:relative; overflow:hidden; border-radius:28px; text-align:center; padding:clamp(40px,6vw,72px) clamp(24px,5vw,48px);
  background:linear-gradient(125deg,#111A3D 0%,#243A8F 46%,#5B3BA8 100%); box-shadow:0 30px 70px -30px rgba(30,25,80,.6)}
.cta-band::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px); background-size:24px 24px; opacity:.5}
.cta-band::after{content:""; position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(90px); opacity:.45; background:#3E9BEF; top:-180px; left:-60px}
.cta-band > *{position:relative; z-index:1}
.cta-band .eyebrow{color:#c9d4ff; justify-content:center}
.cta-band .eyebrow::before{background:#c9d4ff; box-shadow:0 0 0 4px rgba(201,212,255,.2)}
.cta-band h2{color:#fff; margin-bottom:14px}
.cta-band .lead{margin:0 auto 26px; color:rgba(255,255,255,.82)}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-primary{background:#fff; color:#141C3A; box-shadow:0 10px 30px -8px rgba(0,0,0,.4)}
.cta-band .btn-primary:hover{box-shadow:0 16px 42px -10px rgba(0,0,0,.5)}
.cta-band .btn-ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4)}

/* --- Footer (committed dark navy) ---------------------------------------- */
.site-footer{background:#0B1533; color:#AEB8D0; margin-top:var(--step); border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:30px; padding:64px 0 40px}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(3,1fr); gap:28px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr; gap:26px}}

/* The company block sits last and centered: the link columns are what people
   navigate with, and who made this is the closing line, not the opening one. */
.foot-brand{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:34px 0 30px; border-top:1px solid rgba(255,255,255,.09)}
.foot-brand .brand{color:#fff; margin:0}
.foot-brand p{margin:0; color:#8B96B3; font-size:.9rem; max-width:66ch; line-height:1.65}
.foot-brand strong{color:#C7D0E4; font-weight:600}
/* The company links as one centred line under the description, with a dot
   between each. Wraps to more lines on a phone rather than scrolling. */
.foot-company{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 18px; margin:2px 0 2px}
.foot-company a{position:relative; color:#A3AECB; font-size:.86rem}
.foot-company a:hover{color:#fff}
.foot-company a + a::before{content:"\00B7"; position:absolute; left:-10px; color:#4A5573}
.foot-addr{color:#7B87A6; font-size:.82rem; line-height:1.5}
.foot-tags{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.72rem; letter-spacing:.04em; color:#6F7C9C}
.foot-col .foot-h{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#fff; font-family:var(--font-display); margin:0 0 16px; font-weight:700}
.foot-col ul{display:grid; gap:10px}
.foot-col a{color:#93A0BF; font-size:.89rem}
.foot-col a:hover{color:#fff}
.foot-col .soon-tag{font-size:.58rem; color:#22B8E8; font-family:"Inter",sans-serif; font-weight:700; margin-left:6px; letter-spacing:.05em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09); padding:24px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.foot-bottom p{color:#7B87A6; font-size:.83rem}
.foot-bottom .fb-links{display:flex; gap:18px; flex-wrap:wrap}
.foot-bottom .fb-links a{color:#7B87A6; font-size:.83rem}
.foot-bottom .fb-links a:hover{color:#fff}

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero{padding:calc(var(--step) * .82) 0 calc(var(--step) * .55); position:relative; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--grid) 1.1px, transparent 1.1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 82% -12%, #000 40%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 80% at 82% -12%, #000 40%, transparent 78%); opacity:.8}
.page-hero .wrap{position:relative; z-index:1}
.crumb{display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--faint); margin-bottom:18px; font-family:"Inter",sans-serif}
.crumb a{color:var(--faint)} .crumb a:hover{color:var(--brand)}
.page-hero h1{max-width:17ch; margin-bottom:16px}
.page-hero .lead{font-size:clamp(1.04rem,1.7vw,1.22rem)}

/* --- Utilities ----------------------------------------------------------- */
.imgshield{-webkit-user-drag:none; user-select:none; -webkit-user-select:none}
[hidden]{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* --- Mobile density: tighter, more professional vertical rhythm ---------- *
   In one-column (stacked) view the generous desktop spacing reads as empty
   gaps. Pull the section rhythm and card padding in so the page feels
   composed, not sparse.                                                       */
@media (max-width:640px){
  :root{ --step:clamp(38px,10vw,58px); --gutter:18px; }
  .grid{gap:14px}
  .tile,.step{padding:20px}
  .card-pad{padding:22px}
  .statement{padding:22px}
  .stats{gap:12px}
  .stat{padding:20px 16px}
  .show{gap:22px}
  .rel-list{gap:10px; margin-top:22px}
  .cmd{margin-top:24px}
  .subs{margin-top:12px}
  .faq{gap:10px}
  .cmd-side{gap:9px}
}
@media (max-width:400px){
  .cmd-metrics{grid-template-columns:1fr}
}
@media print{.site-header,.site-footer,.announce,.cta-band{display:none}}

/* ==========================================================================
   REDESIGN LAYER — per-page palettes, section rhythm, decorative system,
   premium product mockups, banner feature-cards. Appended last so equal-
   specificity rules win by source order.
   ========================================================================== */

/* --- Per-page accent palettes -------------------------------------------- *
   Only large text (.tt headline), decorative backdrops, and white-on-gradient
   buttons/CTA read these, so saturated hues never sit under small body text.  */
body[data-accent="home"]     {--accent:#2563EB;--accent-2:#0891B2;--cta-a:#1E4FD8;--cta-b:#0E86A8;--grid:rgba(8,145,178,.14)}
body[data-accent="features"] {--accent:#1268E0;--accent-2:#0C7EA8;--cta-a:#0F5CC8;--cta-b:#0C7EA8;--grid:rgba(12,126,168,.13)}
body[data-accent="security"] {--accent:#0E7C9B;--accent-2:#2563EB;--cta-a:#0E7490;--cta-b:#1E4FD8;--grid:rgba(14,124,155,.14)}
body[data-accent="privacy"]  {--accent:#0D9488;--accent-2:#059669;--cta-a:#0F766E;--cta-b:#047857;--grid:rgba(13,148,136,.14)}
body[data-accent="ai"]       {--accent:#1E5FD8;--accent-2:#0C7EA8;--cta-a:#1A4FC0;--cta-b:#0A6E9B;--grid:rgba(30,95,216,.14)}
body[data-accent="vault"]    {--accent:#1D4ED8;--accent-2:#0891B2;--cta-a:#1E40AF;--cta-b:#0E86A8;--grid:rgba(29,78,216,.14)}
body[data-accent="pricing"]  {--accent:#0F5CC8;--accent-2:#B45309;--cta-a:#0F5CC8;--cta-b:#B45309;--grid:rgba(15,92,200,.13)}
body[data-accent="solutions"]{--accent:#2563EB;--accent-2:#059669;--cta-a:#1E4FD8;--cta-b:#047857;--grid:rgba(37,99,235,.13)}
body[data-accent="about"]    {--accent:#1268E0;--accent-2:#0C7EA8;--cta-a:#0F5CC8;--cta-b:#0C7EA8;--grid:rgba(18,104,224,.13)}
body[data-accent="contact"]  {--accent:#1E4FD8;--accent-2:#0891B2;--cta-a:#1E4FD8;--cta-b:#0E86A8;--grid:rgba(8,145,178,.13)}
body[data-accent="compat"]   {--accent:#0C7EA8;--accent-2:#1268E0;--cta-a:#0A6E9B;--cta-b:#0F5CC8;--grid:rgba(12,126,168,.13)}
body[data-accent="roadmap"]  {--accent:#0C7EA8;--accent-2:#1268E0;--cta-a:#0A6E9B;--cta-b:#0F5CC8;--grid:rgba(12,126,168,.12)}
body[data-accent="faq"]      {--accent:#1268E0;--accent-2:#0C7EA8;--cta-a:#0F5CC8;--cta-b:#0C7EA8;--grid:rgba(18,104,224,.12)}

/* --- Section background rhythm ------------------------------------------- */
.section.soft{background:var(--bg-2)}
.section.tint{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--bg)),var(--bg) 82%)}
.section.dark{position:relative; overflow:hidden; color:#D7E0F2;
  background:linear-gradient(158deg,var(--ink-navy) 0%,var(--ink-navy-2) 100%)}
.section.dark::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:26px 26px}
.section.dark::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 46% at 88% 0%, color-mix(in srgb,var(--accent-2) 22%,transparent), transparent 70%),
            radial-gradient(46% 44% at 4% 100%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 72%)}
.section.dark > .wrap{position:relative; z-index:1}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .lead,.section.dark p.muted{color:rgba(215,224,242,.82)}
.section.dark .eyebrow{color:color-mix(in srgb,var(--accent-2) 62%,#ffffff)}
.section.dark .eyebrow::before{background:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 26%,transparent)}
.section.dark .mono{color:rgba(215,224,242,.6)}

/* --- Home hero banner: real photo + floating feature cards --------------- */
.home-banner{position:relative}
.home-banner .banner-media{aspect-ratio:1/1.02; background:linear-gradient(160deg,var(--tint-blue),var(--tint-cyan) 60%,var(--tint-mint))}
.home-banner .banner-media img{width:100%; height:100%; object-fit:cover; object-position:center 26%}
.home-banner .bm-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,color-mix(in srgb,var(--ink-navy) 46%,transparent))}
.anim .ffeat{animation:float 6.5s ease-in-out infinite}
.anim .ffeat.ff2{animation-delay:-2.2s} .anim .ffeat.ff3{animation-delay:-4.4s}
@media (prefers-reduced-motion:reduce){.anim .ffeat{animation:none}}
@media (max-width:940px){.home-banner{max-width:560px; margin:0 auto}}
@media (max-width:520px){
  .ffeat.ff1{right:4px}.ffeat.ff2{left:-6px}.ffeat.ff3{right:-6px}
  .ff-all{left:4px; right:4px; bottom:8px; width:auto}
}

/* --- Security Score mockup ---------------------------------------------- */
@property --score{syntax:'<number>'; inherits:false; initial-value:82}
.score-ring{--score:82; width:132px; height:132px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--accent) calc(var(--score)*1%), color-mix(in srgb,var(--accent) 13%,var(--surface-2)) 0)}
.score-ring::before{content:""; position:absolute; inset:13px; border-radius:50%; background:var(--surface); box-shadow:inset 0 1px 2px rgba(11,21,51,.06)}
.score-ring .rv{position:relative; text-align:center; line-height:1}
.score-ring .rv b{font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--text)}
.score-ring .rv small{display:block; font-size:.72rem; color:var(--faint); margin-top:2px}
.anim .score-ring{animation:scorefill 1.2s ease-out both}
@keyframes scorefill{from{--score:0}}
@media (prefers-reduced-motion:reduce){.anim .score-ring{animation:none}}
.sc.ok{color:var(--good); border-color:color-mix(in srgb,var(--good) 34%,transparent); background:color-mix(in srgb,var(--good) 9%,transparent)}
@media (max-width:420px){.score-main{flex-direction:column; align-items:flex-start; gap:14px}}

/* --- Feature-card top accent bar tuned to accent ------------------------- */
.fcard::after{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ==========================================================================
   PROFESSIONAL LAYER — device mockup hero, trust strip, tools row.
   ========================================================================== */

/* --- Hero stage: photo + phone mockup + clean floating cards ------------- */
.hero-stage{position:relative}
.hero-stage .banner-media{aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,var(--tint-blue),var(--tint-cyan) 58%,var(--tint-mint))}
.hero-stage .banner-media img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.hero-stage .bm-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,color-mix(in srgb,var(--ink-navy) 30%,transparent))}
.hero-stage .ffeat{position:absolute; z-index:6}
.hero-stage .ffeat.ff1{top:-16px; right:18px}
.hero-stage .ffeat.ff2{top:15%; right:-18px}
.anim .hero-stage .ffeat.ff2{animation-delay:-2.4s}
@media (max-width:940px){.hero-stage{max-width:560px; margin:0 auto}}

/* --- Phone frame + in-app dashboard mock --------------------------------- */
.phone{width:214px; flex:0 0 auto; padding:10px; border-radius:36px; position:relative; z-index:7;
  background:linear-gradient(160deg,#0c1526,#0a0f1c); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 44px 90px -36px rgba(6,10,26,.78), 0 0 0 1px rgba(255,255,255,.03)}
.hero-stage .phone{position:absolute; left:-30px; bottom:-34px}
.phone::before{content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:50px; height:6px; border-radius:6px; background:rgba(255,255,255,.18); z-index:4}
.phone-scr{border-radius:27px; overflow:hidden; background:var(--surface)}

/* A real screenshot inside the same bezel. The inner box is pinned to 9/20 —
   a modern Android aspect — and the image covers it, so a 1080x2400 capture
   fills the frame and a slightly different ratio crops rather than
   letterboxing into grey bars. The dark fill behind it means a PNG with any
   transparency still reads as a screen that is switched on. */
.phone-shot .phone-scr{aspect-ratio:9/20; background:#0A1024}
.phone-shot .phone-scr img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center}

/* The hero's screenshot stage: a ground for the phone to stand on, replacing
   the illustration when a capture exists. */
.shot-stage{display:grid; place-items:center; padding:38px 0;
  background:linear-gradient(160deg,var(--tint-blue),var(--tint-cyan) 62%,var(--tint-mint))}
.shot-stage .phone{position:static; width:246px}
/* In the home hero the phone is absolutely placed over the banner art, so the
   screenshot variant keeps that placement rather than the stage's centring. */
.hero-stage .phone-shot{position:absolute; left:-30px; bottom:-34px; width:214px}

/* A row of captioned screenshots. Content sets the height, and a missing
   capture removes its card rather than leaving a gap, so two shots compose as
   a pair instead of stretching to fill four columns. */
/* Capped at three across so six captures land as two full rows. Four across
   would leave the second row holding two cards in a space built for four. */
.shot-strip{display:flex; flex-wrap:wrap; gap:40px 30px; justify-content:center;
  margin:38px auto 0; max-width:730px}
.shot-card{margin:0; display:flex; flex-direction:column; align-items:center; gap:18px; width:214px}
.shot-card figcaption{text-align:center}
.shot-card figcaption b{display:block; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text)}
.shot-card figcaption span{display:block; margin-top:5px; font-size:.84rem; line-height:1.5; color:var(--muted)}
@media (max-width:520px){.shot-strip{gap:30px 0}.shot-card{width:100%; max-width:260px}}
.ph-score .lab{margin-left:auto; font-size:.68rem; opacity:.92; font-weight:600}
@media (max-width:520px){.hero-stage .phone{width:168px; left:-8px; bottom:-18px}}
@media (max-width:360px){.hero-stage .phone{width:148px}}
.trust-strip .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 26px; padding:18px 24px}

/* ==========================================================================
   FLAGSHIP HOME LAYER — reference-inspired (adapted, not copied):
   floating pins, overlapping moment cards, color-coded pattern cards,
   tabbed feature explorer, tinted step cards, assurance band.
   ========================================================================== */

/* --- Hero floating labeled pins + ghost decoration ----------------------- */
.hpin{position:absolute; z-index:6; display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 9px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-lg);
  font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--text); white-space:nowrap}
.hpin .hp-ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto}
.hpin.p1{top:6%; left:6%} .hpin.p2{top:20%; right:2%} .hpin.p3{top:50%; left:-3%} .hpin.p4{bottom:20%; right:5%}
.anim .hpin{animation:float 7s ease-in-out infinite}
.anim .hpin.p2{animation-delay:-1.6s} .anim .hpin.p3{animation-delay:-3.2s} .anim .hpin.p4{animation-delay:-4.8s}
.ghost-ic{position:absolute; z-index:2; color:color-mix(in srgb,var(--accent) 18%,transparent); pointer-events:none}
.ghost-ic.g1{top:12%; right:20%} .ghost-ic.g2{bottom:16%; left:16%}

/* --- Overlapping "moment" cards ----------------------------------------- */
.moments{display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface);
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; margin-top:-46px; position:relative; z-index:5}
.moment{padding:22px 22px; display:flex; gap:13px; align-items:flex-start; border-right:1px solid var(--line-2); text-decoration:none; color:var(--text); transition:background .18s ease}
.moment:last-child{border-right:0}
.moment:hover{background:var(--surface-2); text-decoration:none}
.moment .mo-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto}
.moment .mo-t{display:block; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--text)}
.moment .mo-d{display:block; font-size:.82rem; color:var(--muted); margin-top:3px; line-height:1.45}
@media (max-width:860px){.moments{grid-template-columns:1fr 1fr; margin-top:24px}
  .moment:nth-child(2){border-right:0} .moment:nth-child(1),.moment:nth-child(2){border-bottom:1px solid var(--line-2)}}
@media (max-width:460px){.moments{grid-template-columns:1fr} .moment{border-right:0; border-bottom:1px solid var(--line-2)} .moment:last-child{border-bottom:0}}

/* --- Color-coded pattern (feature) cards -------------------------------- */
.pcards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){.pcards{grid-template-columns:1fr}}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .26s ease}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.pc-top{padding:26px; min-height:196px; display:grid; place-items:center; position:relative; border-bottom:1px solid var(--line-2)}
.pcard.t-blue .pc-top{background:radial-gradient(120% 100% at 50% 0,var(--tint-blue),var(--surface) 88%)}
.pcard.t-mint .pc-top{background:radial-gradient(120% 100% at 50% 0,var(--tint-mint),var(--surface) 88%)}
.pcard.t-lav  .pc-top{background:radial-gradient(120% 100% at 50% 0,var(--tint-cyan),var(--surface) 88%)}
.pc-body{padding:24px 24px 26px}
.pc-num{display:inline-flex; align-items:center; gap:8px; font-family:"Inter",sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.pc-num b{font-family:var(--font-display); font-size:.9rem; color:var(--faint)}
.pc-body h3{margin:12px 0 8px; font-size:1.28rem}
.pc-body p{color:var(--muted); font-size:.92rem; margin-bottom:14px}
.pc-link{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--accent)}
.pc-link:hover{text-decoration:none; gap:10px}
/* mini mockups inside pc-top */
.mini-priv{display:grid; gap:8px; width:100%; max-width:240px}
.mini-row{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow); font-size:.78rem; font-weight:600}
.mini-row .mr-ic{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:0 0 auto; background:var(--surface-2)}
.mini-row .mr-s{margin-left:auto; font-size:.66rem; font-weight:700}
.mini-vault{display:grid; place-items:center; gap:12px; text-align:center}
.mini-vault .mv-badge{width:74px; height:74px; border-radius:22px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-2)); box-shadow:var(--glow)}
.mini-vault .mv-chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.mini-vault .mv-chips span{font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); color:var(--muted)}

/* --- Tabbed feature explorer (radio, no JS) ----------------------------- */
.explorer{background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden;
  display:grid; grid-template-columns:264px 1fr}
@media (max-width:760px){.explorer{grid-template-columns:1fr}
  .ex-tabs{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line-2)}
  .ex-tab{white-space:nowrap} .ex-tab .et-ar{display:none} .ep-subs{grid-template-columns:1fr} .ex-panels{padding:24px}}

/* --- Tinted numbered step cards ----------------------------------------- */
.step.tint-a{background:radial-gradient(120% 100% at 0 0,var(--tint-blue),var(--surface) 70%)}
.step.tint-b{background:radial-gradient(120% 100% at 0 0,var(--tint-cyan),var(--surface) 70%)}
.step.tint-c{background:radial-gradient(120% 100% at 0 0,var(--tint-mint),var(--surface) 70%)}
.step .step-tag{position:absolute; top:22px; right:22px; font-family:"Inter",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.step .step-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-2)); margin-bottom:14px}

/* --- Assurance band ------------------------------------------------------ */
.assure{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:860px){.assure{grid-template-columns:1fr}}
.assure .as-anchor{background:linear-gradient(150deg,var(--ink-navy),var(--ink-navy-2)); color:#fff; border-radius:20px; padding:28px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden}
.assure .as-anchor::after{content:""; position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(70px); opacity:.5; background:var(--accent); top:-90px; right:-60px}
.assure .as-anchor > *{position:relative; z-index:1}
.assure .as-anchor .k{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb,var(--accent-2) 60%,#fff); margin-bottom:10px}
.assure .as-anchor h3{color:#fff; font-size:1.35rem}
.assure .as-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow)}
.assure .as-card .as-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px}
.assure .as-card h3{font-size:1.1rem; margin-bottom:8px}
.assure .as-card p{color:var(--muted); font-size:.9rem}
.ep-cards .fcard{background:var(--surface-2)}
@media (max-width:760px){.explorer-cat .ex-tab .et-ct{margin-left:8px}}
.ex-panel .ep-head .pill{margin-left:auto; align-self:flex-start}
/* Nineteen tools make the tab column far taller than any single panel, which
   left a block of dead surface under every panel. The column scrolls instead,
   so the explorer is as tall as the content it is actually showing. */
.explorer-feat .ex-tabs{max-height:722px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
@media (max-width:760px){.explorer-feat .ex-tabs{max-height:none; overflow-y:visible}}

/* ==========================================================================
   HOME LOWER REDESIGN — process flow, outcome panel, grouped FAQ.
   ========================================================================== */

/* --- How it works: connected process ------------------------------------ */
.flow-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; margin-top:44px}
.flow-steps::before{content:""; position:absolute; top:32px; left:16%; right:16%; height:2px; z-index:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.32}
.fstep{position:relative; z-index:1; text-align:center; padding:0 8px}
.fstep .fs-badge{width:66px; height:66px; border-radius:20px; margin:0 auto 18px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-2)); box-shadow:var(--glow);
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; position:relative}
.fstep .fs-ic{position:absolute; bottom:-9px; right:-9px; width:30px; height:30px; border-radius:10px; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); box-shadow:var(--shadow)}
.fstep h3{font-size:1.18rem; margin-bottom:8px}
.fstep p{color:var(--muted); font-size:.93rem; max-width:34ch; margin:0 auto}
@media (max-width:760px){.flow-steps{grid-template-columns:1fr; gap:32px}.flow-steps::before{display:none}}

/* --- Outcome (before -> after) panel ------------------------------------ */
.outcome{margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px;
  background:linear-gradient(150deg,var(--ink-navy),var(--ink-navy-2)); color:#fff; border-radius:22px;
  padding:30px 38px; position:relative; overflow:hidden; text-align:left}
.outcome::after{content:""; position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(84px); opacity:.4;
  background:var(--accent-2); top:-130px; right:-50px}
.outcome > *{position:relative; z-index:1}
.outcome .oc-nums{display:flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:800}
.outcome .oc-from{font-size:2.7rem; color:rgba(255,255,255,.45)}
.outcome .oc-to{font-size:2.7rem; color:#fff}
.outcome .oc-ar{color:var(--accent-2); display:inline-flex}
.outcome .oc-txt b{display:block; font-family:var(--font-display); font-size:1.12rem; color:#fff}
.outcome .oc-txt span{color:rgba(255,255,255,.74); font-size:.92rem}
@media (max-width:820px){.faq-groups{grid-template-columns:1fr; max-width:660px}}
.faq-group .faq{max-width:none; margin:0}
.ex-panel .ep-chips .sub-chip{font-size:.82rem; padding:7px 14px; color:var(--ink-soft); background:var(--surface-2); border-color:var(--line)}
.ex-panel .ep-chips .sub-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--accent)}
@media (max-width:920px){.ep-grid{grid-template-columns:1fr; gap:24px}
  .ep-grid .ep-aside{order:-1}
  .ep-card{padding:24px 22px}}

/* --- Features page: category overview (five jobs) ----------------------- */
.cat-ov{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:34px}
.co-card{background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.co-head{display:flex; align-items:center; gap:13px}
.co-ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto}
.co-hx{display:flex; flex-direction:column; gap:2px}
.co-hx h3{font-size:1.16rem; margin:0}
.co-n{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.co-d{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0}
.co-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.co-tool{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; transition:border-color .16s ease, color .16s ease, transform .16s ease}
.co-tool .cot-ic{color:var(--accent); display:inline-flex}
.co-tool:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--accent); transform:translateY(-1px); text-decoration:none}
@media (prefers-reduced-motion:reduce){.co-tool:hover{transform:none}}

/* --- Features page: at-a-glance comparison table ------------------------ */
.fmatrix-wrap{margin-top:8px; overflow-x:auto; border:1px solid var(--line-2); border-radius:18px; box-shadow:var(--shadow); background:var(--surface)}
.fmatrix{width:100%; border-collapse:collapse; min-width:720px; font-size:.92rem}
.fmatrix th{text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:16px 18px; background:var(--surface-2); border-bottom:1px solid var(--line-2)}
.fmatrix td{padding:15px 18px; border-bottom:1px solid var(--line-2); vertical-align:middle; color:var(--muted)}
.fmatrix tbody tr:last-child td{border-bottom:0}
.fmatrix tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.fm-tool a{display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:700; white-space:nowrap}
.fm-tool a:hover{color:var(--accent); text-decoration:none}
.fm-tool .fm-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-2))}
.fm-desc{min-width:260px; line-height:1.5}
.fm-tag{display:inline-block; font-size:.74rem; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface-2)); border-radius:999px; padding:3px 10px; white-space:nowrap}
.fm-in{text-align:center}
.fm-n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; font-weight:800; color:var(--text); background:var(--surface-2); border:1px solid var(--line-2)}
.fm-plan{font-size:.82rem; font-weight:600; color:var(--ink-soft); white-space:nowrap}
.fv-ring .rv b{font-size:1.9rem}

/* --- Centered hero variant (Pricing / About / Contact) ------------------ */
.hero-center .crumb{justify-content:center}
.hero-center .hero-txt{max-width:770px; margin:0 auto; text-align:center}
.hero-center .hero-txt .eyebrow{justify-content:center}
.hero-center .hero-cta{justify-content:center}
.hero-center .hero-note{text-align:center}

/* --- Security hero visual: encryption-in-action card ------------------- */
.sec-viz{position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; padding:16px}
.sv-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:20px; display:flex; flex-direction:column; gap:13px}
.sv-row{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:13px; border:1px solid var(--line-2); background:var(--surface-2)}
.sv-row .sv-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-2))}
.sv-tx{min-width:0}
.sv-tx b{display:block; font-size:.9rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sv-tx b.mono{font-family:ui-monospace,"IBM Plex Mono",monospace; font-size:.82rem; letter-spacing:.01em}
.sv-tx em{font-style:normal; font-size:.72rem; color:var(--muted)}
.sv-tag{margin-left:auto; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-radius:999px; padding:4px 9px; white-space:nowrap}
.sv-tag.ok{color:var(--good); background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.sv-flow{display:flex; align-items:center; gap:10px}
.sv-flow .sv-line{flex:1; height:1px; background:var(--line-2)}
.sv-flow .sv-flab{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--muted); white-space:nowrap}
.sv-flow .sv-flab svg{color:var(--accent)}
.sv-note{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--muted); padding:2px 2px 0; line-height:1.4}
.sv-note .sv-dot{width:7px; height:7px; border-radius:50%; background:var(--crit); flex:0 0 auto}
.sec-viz .hpin{position:absolute}
.sec-viz .hpin.sp1{bottom:-4%; left:-3%}
.sec-viz .hpin.sp2{top:5%; right:-3%}
@media (max-width:520px){.sec-viz .hpin{display:none}}

/* --- Solutions hero visual: 2x2 persona cards -------------------------- */
.sol-viz{display:flex; align-items:center; justify-content:center; padding:8px}
.sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:430px}
.sol-card{display:flex; flex-direction:column; gap:7px; padding:22px 20px; border-radius:18px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow); transition:transform .16s ease, border-color .16s ease}
.sol-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); text-decoration:none}
.sol-ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:4px}
.sol-card b{font-size:1rem; color:var(--text)}
.sol-card span{font-size:.82rem; color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sol-card:hover{transform:none}}

/* --- Sub-page (topic) hero spotlight + clickable category cards --------- */
.topic-vis{display:flex; align-items:center; justify-content:center; min-height:320px; padding:16px}
.tv-spot{width:100%; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg);
  padding:40px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; overflow:hidden}
.tv-spot::before{content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:220px; height:220px; border-radius:50%; filter:blur(64px); opacity:.2; background:var(--accent)}
.tv-ic{width:78px; height:78px; border-radius:22px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); position:relative}
.tv-spot b{font-size:1.28rem; color:var(--text); position:relative; margin-top:4px}
.tv-spot>span{font-size:.9rem; color:var(--muted); position:relative}
.co-card.co-link{text-decoration:none; transition:transform .16s ease, border-color .16s ease}
.co-card.co-link .pc-link{margin-top:auto; padding-top:4px}
.co-card.co-link:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); text-decoration:none}
@media (prefers-reduced-motion:reduce){.co-card.co-link:hover{transform:none}}
/* Exactly four persona cards read best as a balanced 2x2 */
.persona-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.persona-ov{grid-template-columns:1fr}}

/* Global menu is identical on every page: header, announcement bar and the
   mobile drawer use the brand palette, never the per-page accent — so the
   "Get NexGuard" button and nav accents look the same site-wide. */
.site-header, .announce, #drawer{--accent:var(--brand); --accent-2:var(--brand-2); --cta-a:var(--brand); --cta-b:var(--brand-2)}

/* Compatibility hero mini-checklist inside the spotlight card */
.compat-mini{width:100%; margin-top:8px; display:flex; flex-direction:column; gap:8px}
.cm-row{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:8px 12px}
.cm-row .cm-ic{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; color:#fff; background:var(--good)}
.cm-row b{margin-left:auto; color:var(--good); font-weight:800; font-size:.78rem}

/* --- Mobile hardening ----------------------------------------------------
   Two classes of problem a desktop browser never shows you: things too small
   to hit with a thumb, and things too small to read at arm's length. Both were
   measured at 390px rather than guessed at. */
@media (max-width:700px){
  /* The announce bar's dismiss button was an 18x26 target — the smallest
     control on the site, on every page, and the one people reach for first.
     WCAG 2.5.8 asks for 24x24; a thumb wants more, so it gets 44x44 without
     the X itself changing size. */
  .announce .a-x{min-width:44px; min-height:44px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    top:0; right:calc(var(--gutter) - 14px)}

  /* Breadcrumb links sat 21px tall. Padding widens the hit area without
     moving the trail, since the row is centred on its content either way. */
  .crumb{font-size:.86rem}
  .crumb a{display:inline-block; padding:5px 0}

  /* Small caps labels bottomed out at 10.24px, which is below anything worth
     calling readable on a phone. These are the same labels at a size a person
     can actually take in; the letter-spacing that makes them work as labels is
     what makes them expensive to read when they are this small. */
  .announce .a-tag{font-size:.74rem}
  .pill{font-size:.74rem}
  .pc-num,.ex-panel .ep-k,.ep-subhead,.co-n{font-size:.78rem}
  .mini-row .mr-s{font-size:.74rem}

  /* Standalone card links — a destination on their own, not a word inside a
     sentence, so the inline exception does not cover them. */
  .t-link,.pc-link{padding:6px 0}

  /* The explorer panel head is a flex row — icon, title, then a status pill
     pushed right by margin-left:auto. With no wrap allowed, the pill had
     nowhere to go at 390px and was pushed 31px outside the panel. */
  .ex-panel .ep-head{flex-wrap:wrap}

  /* The last few under 11.5px. Micro-labels are meant to be small and stay
     small — 11.5px uppercase is a deliberate floor, not a miss — but .68rem
     lands at 10.9px, which is past small and into squinting.
     Written at the same specificity as the rules they override: a media query
     adds none, so a bare `.foot-h` never beats `.foot-col .foot-h`. */
  .fbadge .fb-t small,.ffeat small,.score-ring .rv small{font-size:.75rem}
  th{font-size:.75rem}
}

/* --- Feature directory (one flat grid of every tool) ----------------------
   The plan tag replaces the state badge here. Only paid tools carry one, so it
   marks a difference instead of repeating a constant. */
.fc-plan{font-family:"Inter",sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:color-mix(in srgb,var(--accent-2) 84%,var(--ink-lift)); white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent);
  background:color-mix(in srgb,var(--accent-2) 9%,transparent); border-radius:999px; padding:4px 10px}

/* Directory card: the icon is a circle straddling the top edge, centred.
   Scoped to .fx-dir so the fcards used elsewhere keep their own header row.

   .fcard is normally overflow:hidden, which is what clips the 3px hover bar to
   the rounded corners — and would equally clip an icon meant to hang outside
   the card. So overflow goes visible here and the bar gets the radius itself.

   The circle carries a thick border in the SECTION's background colour, not
   the card's. That is what makes it read as cutting through the card's edge
   rather than sitting on top of it. If a section using this grid ever stops
   being .soft, this border colour is the thing to change with it. */
.fx-dir .grid{padding-top:38px; row-gap:58px}
.fx-dir .fcard{overflow:visible; padding-top:46px; text-align:center}
.fx-dir .fcard::after{border-radius:var(--radius) var(--radius) 0 0}
.fx-dir .fcard .fcard-top{display:block; margin:0; min-height:0}
.fx-dir .fcard .t-ic{position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  width:68px; height:68px; border-radius:50%; margin:0; z-index:3; pointer-events:none;
  background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff;
  border:5px solid var(--bg-2); box-shadow:var(--shadow)}
/* One accent across the grid, overriding the 4-step colour rotation the .tile
   grid applies by nth-child. That rotation cycles on grid POSITION, so in a
   three-column grid it drifts out of step with the columns and reads as
   accidental — and position in a list is not a property of the feature, so the
   colour was saying nothing. Selectors carry .grid and .tile.fcard purely to
   outrank those nth-child rules; a media query would not have done it. */
.fx-dir .grid .tile.fcard{background:var(--surface)}
.fx-dir .grid .tile.fcard .t-ic{background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff}
.fx-dir .grid .tile.fcard .t-link{color:var(--accent)}
/* Sub-feature chips read as active rather than dormant: these are shipped
   capabilities, and a grey outline made them look like placeholders.

   Colours are measured, not chosen by eye, and measured under simulated
   protanopia, deuteranopia and tritanopia as well as normal vision — see the
   figures in the commit. Two things came out of that:

   The label is --text (#EAF0FB), not pure #fff. Full white on a dark ground
   haloes for readers with astigmatism, which is why the rest of this site does
   not use it either, and it costs nothing here: 11.7:1 against the pill, AAA
   in every dichromacy.

   The hover blue is lightened toward white. Straight --brand measured 4.89:1
   under deuteranopia — the commonest form — which is over AA by a hair and
   under AAA. Lightened it is ~8:1, AAA in all three.

   Hover grows a ring rather than underlining. Something other than hue has to
   carry the state: the small lift that used to accompany it is removed for
   anyone who asks for reduced motion, which would otherwise leave those
   readers with a hue change and nothing else. A ring is a change in shape, so
   it reads without discriminating colour at all — and box-shadow paints
   outside the border box, so nothing reflows when it appears. */
.fx-dir .grid .tile.fcard .sub-chip{color:var(--text);
  border-color:color-mix(in srgb,var(--brand) 42%,transparent);
  background:color-mix(in srgb,var(--brand) 16%,transparent)}
/* Hover needs this much specificity because the resting rule above already
   outranks the generic a.sub-chip:hover — without it hover would do nothing.
   Colour is --brand, not the per-page --accent: accent goes as dark as #1268E0
   on Features and will not hold contrast at 11.7px on this surface. */
.fx-dir .grid .tile.fcard a.sub-chip:hover{color:color-mix(in srgb,var(--brand) 62%,var(--ink-lift));
  border-color:color-mix(in srgb,var(--brand) 78%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 26%,transparent)}

/* The plan tag loses its place in the header row once the icon leaves it. */
.fx-dir .fcard .fc-plan{position:absolute; top:14px; right:14px; z-index:3}
.fx-dir .fcard .subs{justify-content:center}
.fx-dir .fcard .t-foot{justify-content:center; padding-top:20px}

@media (max-width:620px){
  .fx-dir .grid{padding-top:34px; row-gap:52px}
  .fx-dir .fcard{padding-top:42px}
  .fx-dir .fcard .t-ic{width:62px; height:62px; top:-31px}
}

/* --- Back to top ---------------------------------------------------------
   Bottom right, above everything except the mobile drawer (z-index 120), so it
   cannot sit on top of an open menu. It is `hidden` until there is page behind
   you — see main.js — which also keeps it out of the tab order until then.

   The offset uses safe-area-inset so it clears the home indicator on a phone
   rather than sitting under it. */
/* Bottom-LEFT, because the chat bubble owns the bottom-right corner. Opposite
   corners cannot collide at any width or at any size the widget decides to be,
   which is worth more than matching the side the widget happens to use. */
.to-top{position:fixed; z-index:90;
  left:calc(var(--gutter) + env(safe-area-inset-left));
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  border:1px solid color-mix(in srgb,#fff 18%,transparent);
  box-shadow:var(--shadow-lg);
  transition:transform .2s ease, box-shadow .2s ease}
.to-top[hidden]{display:none}
.to-top:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg), var(--glow)}
.to-top:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top,.to-top:hover{transition:none; transform:none}}
@media (max-width:520px){
  .to-top{width:42px; height:42px; bottom:calc(14px + env(safe-area-inset-bottom))}
}