/* Clarveil marketing site — single source of truth for BOTH pages.
   index.html and about.html link this file; there is no inline <style>
   block any more. Edit here and verify on both pages.
   Design tokens live in :root below. */
  @font-face {
    font-family: 'DM Sans';
    /* DM Sans v17 ships as a variable font on Google Fonts so a single
       woff2 covers weights 300, 400, and 500 — no separate files
       needed. Format hint kept simple for max browser compat. */
    src: url('/fonts/dm-sans.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'DM Mono';
    src: url('/fonts/dm-mono-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'DM Mono';
    src: url('/fonts/dm-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Instrument Serif';
    src: url('/fonts/instrument-serif.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Instrument Serif';
    src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root {
  --ink:     #0C0C0F;
  --ink-2:   #16161C;
  --ink-3:   #1E1E28;
  --steel:   #8B8B9E;
  --mist:    #C8C8D8;
  --white:   #F0F0F5;
  /* Brand greens — sourced from the canonical Clarveil logo. The
     variable names are kept stable so future class rules don't need
     updating when the colour values shift. */
  --green:   #1D9E75;
  --green-d: #0F3D28;
  --green-l: #5DCAA5;
  --green-h: #9FE1CB;
  --red:     #FF4D4D;
  --amber:   #F5A623;
  --blue:    #4A9EFF;
  --r:       12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--ink);
  color:var(--white);
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Subtle vertical gradient — replaces the drifting blob layer for a
     calmer, more performant feel without losing depth. */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(29, 158, 117, 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(29, 158, 117, 0.04), transparent);
  background-attachment:fixed;
}
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 48px;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(12,12,15,0.7);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
@media(max-width:600px){nav{padding:0 20px}}

/* Anchor scroll offset — clears the fixed 72px nav plus 24px breathing
   room. Without this the smooth-scroll lands the section heading
   underneath the nav backdrop. Applied to every section that receives
   anchor navigation (4 from the nav menu + #privacy from the footer).
   The selector also covers the section CLASSES so a future edit that
   forgets the id but keeps the class still gets the offset. */
#validation,
#platform,
#how,
#roadmap,
#coverage,
#preventive,
#compare,
#company,
#deploy,
#privacy,
.copy-section,
.how-section,
.compare-section,
.deploy-section,
.privacy-section{
  scroll-margin-top:120px;   /* 72px fixed nav + 48px air; 24px read as clipped */
}

/* Logo — gradient-tile + concentric-circles brand mark, identical
   to the mark used in the Clarveil product UI so the marketing site
   and the product read as one brand. */
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-tile{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#1D9E75 0%,#0F6E56 100%);
  box-shadow:0 0 12px rgba(29,158,117,0.3);
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-tile svg{display:block}
.nav-logo-text{
  font-size:18px;font-weight:700;color:#F5F5F7;
  letter-spacing:-0.02em;white-space:nowrap;
}
.nav-links{display:flex;gap:30px;list-style:none}
/* Hide at 1080px. Moved with every link added: 780 (four), 900 (five),
   940 (six), now 1080 with seven — measured gaps to logo/CTA were 0px at
   941, 6px at 1000, 26px at 1040. Every anchor stays reachable by
   scrolling, but at seven links this now hides text nav on many laptops;
   an eighth link should come with a proper collapsed menu, not another
   breakpoint bump. */
@media(max-width:1080px){.nav-links{display:none}}
.nav-links a{font-size:14px;color:var(--steel);text-decoration:none;letter-spacing:0.2px;transition:color .2s;font-weight:400}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--white);outline:none}
.nav-cta{font-size:13px;font-weight:500;background:var(--green);color:var(--ink);padding:9px 20px;border-radius:100px;text-decoration:none;letter-spacing:0.2px;transition:all .2s;border:none;cursor:pointer;white-space:nowrap}
.nav-cta:hover{background:var(--green-l);transform:translateY(-1px)}
.nav-cta:focus-visible{outline:2px solid var(--green-l);outline-offset:2px}

/* Collapsed menu (≤1080px). The text links used to simply vanish at the
   breakpoint — on a phone the site had NO navigation at all (reported
   2026-09-04). Below the breakpoint the <ul> becomes a panel pinned under
   the 72px bar, opened by .nav-toggle; reveal.js flips nav.nav-open and
   aria-expanded, and closes it on link click, Escape, or resize past the
   breakpoint. Without JS the toggle is inert but every anchor is still
   reachable by scrolling, as before. */
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{
  display:none;width:40px;height:40px;padding:0;margin:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,0.10);border-radius:10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{outline:2px solid var(--green-l);outline-offset:2px}
.nav-toggle-bar{display:block;width:18px;height:1.5px;background:var(--white);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1080px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:fixed;top:72px;left:0;right:0;
    flex-direction:column;gap:0;padding:8px 24px 20px;
    max-height:calc(100vh - 72px);overflow-y:auto;
    background:rgba(12,12,15,0.985);
    backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 24px 48px rgba(0,0,0,0.45);
  }
  nav.nav-open .nav-links{display:flex}
  .nav-links li{border-bottom:1px solid rgba(255,255,255,0.06)}
  .nav-links li:last-child{border-bottom:none}
  .nav-links a{display:block;padding:15px 4px;font-size:16px;color:var(--white)}
  .nav-links a[aria-current="page"]{color:var(--green-l)}
}
@media(max-width:600px){.nav-links{padding:4px 20px 16px}}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;font-weight:400;color:var(--green-l);letter-spacing:2px;text-transform:uppercase;background:rgba(29,158,117,0.08);border:1px solid rgba(29,158,117,0.25);padding:6px 16px;border-radius:100px;margin-bottom:40px;opacity:0;animation:fade-up .8s .1s forwards}
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse-d 1.5s infinite}
@keyframes pulse-d{0%,100%{box-shadow:0 0 0 0 rgba(29,158,117,0.55)}50%{box-shadow:0 0 0 5px rgba(29,158,117,0)}}
.hero-title{font-family:'Instrument Serif',serif;font-size:clamp(46px,7vw,92px);line-height:0.95;letter-spacing:-3px;font-weight:400;max-width:1000px;margin-bottom:32px;opacity:0;animation:fade-up .8s .2s forwards}
.hero-title .italic{font-style:italic;color:var(--green-l)}
.hero-title .dim{color:var(--steel)}
.hero-sub{font-size:18px;font-weight:300;color:var(--steel);line-height:1.7;max-width:620px;margin:0 auto 56px;opacity:0;animation:fade-up .8s .35s forwards}
.hero-sub strong{color:var(--white);font-weight:400}
.hero-cta-wrap{opacity:0;animation:fade-up .8s .5s forwards;margin-bottom:72px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--ink);padding:14px 28px;border-radius:100px;font-size:15px;font-weight:500;text-decoration:none;font-family:'DM Sans',sans-serif;transition:all .2s;letter-spacing:0.2px;border:none;cursor:pointer}
.cta-btn:hover{background:var(--green-l);transform:translateY(-1px);box-shadow:0 8px 24px rgba(29,158,117,0.25)}
.cta-btn:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}
.cta-btn-arrow{transition:transform .2s}
.cta-btn:hover .cta-btn-arrow{transform:translateX(2px)}
.cta-note{font-size:12px;color:var(--steel);font-family:'DM Mono',monospace;letter-spacing:0.5px}
.cta-note a{color:var(--green-l);text-decoration:none;border-bottom:1px solid rgba(93,202,165,0.3);padding-bottom:1px}
.cta-note a:hover{color:var(--green-h);border-bottom-color:var(--green-l)}

/* Hero stats — 4 cards in a row on desktop, 2x2 grid on mobile.
   Same Apple-style register as the timeline cards (subtle dark
   background, 1px border, hover lift) but smaller padding because
   each card holds only two short labels. The first label is set in
   Instrument Serif italic — picks up the typographic accent from
   the hero headline so the cards read as part of the same family
   rather than a separate UI element. The second label sits below
   in DM Mono, small + spaced, like a typewriter caption. */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  max-width:780px;width:100%;
  opacity:0;animation:fade-up .8s .65s forwards;
}
@media(max-width:760px){
  .hero-stats{grid-template-columns:1fr 1fr;max-width:440px;gap:12px}
}
.hero-stats > div,
.founder-stats > div{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r);
  padding:20px 14px;
  display:flex;flex-direction:column;
  gap:8px;
  align-items:center;justify-content:center;
  text-align:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.hero-stats > div:hover,
.founder-stats > div:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.018);
}
@media(prefers-reduced-motion:reduce){.hero-stats > div:hover,.founder-stats > div:hover{transform:none}}

/* Line 1 — Instrument Serif italic. Mixed case, not uppercase, so
   the italic serif reads as elegant typography rather than shouty.
   20px (rather than the timeline's 22px h3) because two-word labels
   like "Patent pending" need to fit on one line at 4-up desktop. */
.hero-stats > div .stat-l-line:nth-child(1),
.founder-stats > div .stat-l-line:nth-child(1){
  font-family:'Instrument Serif',serif;
  font-size:20px;
  color:var(--white);
  letter-spacing:-0.5px;line-height:1.1;
  font-style:italic;
  text-transform:none;
}

/* Line 2 — DM Mono uppercase, small and spaced for the
   "stamped caption" feel under the italic word above. */
.hero-stats > div .stat-l-line:nth-child(2),
.founder-stats > div .stat-l-line:nth-child(2){
  font-family:'DM Mono',monospace;
  font-size:10.5px;
  color:var(--steel);
  letter-spacing:2px;
  text-transform:uppercase;
  line-height:1.3;
}

/* The PATENT PENDING / TECHNOLOGY tile is the "different" one — the
   patent teaser. Its line-1 word picks up --green-l, AND the card
   itself takes a green-tinted border + subtle green-tint background
   so the eye notices it as the row's anchor without any explanatory
   copy. Hover state intensifies the green tint to match. */
.hero-stats .stat-patent{
  border-color:rgba(29,158,117,0.28);
  background:rgba(29,158,117,0.04);
}
.hero-stats .stat-patent:hover{
  border-color:rgba(29,158,117,0.5);
  background:rgba(29,158,117,0.07);
}
.hero-stats .stat-patent .stat-l-line:nth-child(1){color:var(--green-l)}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.ticker-section{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);overflow:hidden;padding:14px 0;background:rgba(255,255,255,0.02)}
.ticker-inner{display:flex;gap:80px;animation:tick 30s linear infinite;white-space:nowrap;width:max-content}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-inner{animation:none}}
.t-item{display:flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:12px;color:var(--steel)}
.t-badge{padding:2px 10px;border-radius:100px;font-size:10px;font-weight:500;letter-spacing:0.5px}
.t-c{background:rgba(255,77,77,0.12);color:#FF6B6B}
.t-h{background:rgba(245,166,35,0.12);color:#F5A623}
.t-m{background:rgba(29,158,117,0.16);color:var(--green-l)}

.section{position:relative;z-index:2;padding:120px 48px;max-width:1200px;margin:0 auto}
.section-tag{font-family:'DM Mono',monospace;font-size:11px;color:var(--green-l);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:16px}
.section-h{font-family:'Instrument Serif',serif;font-size:clamp(36px,4.5vw,62px);font-weight:400;letter-spacing:-2px;line-height:1.05;margin-bottom:24px}
.section-h .it{font-style:italic;color:var(--green-l)}
.section-p{font-size:17px;font-weight:300;color:var(--steel);line-height:1.75;max-width:540px}
/* Emphasis inside body copy — same convention as .hero-sub strong:
   lift to white, do NOT add weight (the 300-weight body would go
   lumpy at 700). Used for the detect→map→respond progression. */
.section-p strong{color:var(--white);font-weight:400}
/* Stacked body paragraphs in the two prose-only sections. */
.section-p + .section-p{margin-top:18px}

/* Flow diagram — the page's only diagram primitive, and the reason
   there is no stock imagery anywhere on this site. A chain of labelled
   nodes joined by arrows: vertical by default, horizontal with
   .flow-row. Built entirely from existing tokens (DM Mono label, the
   card hairline border, the 8px inner radius .ai-code-block already
   uses). Used three times: the reactive flow, the preventive flow and
   the publisher flow.
   NOTE: the former .problem-* rules lived here. That section was folded
   into the platform and coverage sections; the rules went with it. */
.flow{display:flex;flex-direction:column;margin-top:26px}
.flow-lead{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--steel);
  margin-bottom:14px;line-height:1.6;
}
.flow-node{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1px;
  color:var(--white);text-align:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;padding:11px 14px;line-height:1.4;
}
.flow-arrow{color:var(--steel);font-size:12px;text-align:center;padding:7px 0;line-height:1}
/* Preventive treatment — identical geometry, green tint. This is the
   ONLY device separating the two horizons: same palette, different
   intensity, so REACTIVE and PREVENTIVE read as one brand. */
.ai-card-highlight .flow-node{
  background:rgba(29,158,117,0.06);
  border-color:rgba(29,158,117,0.28);
  color:var(--green-h);
}
.ai-card-highlight .flow-lead{color:var(--green-l)}
/* Horizontal variant (publisher flow). Arrows are flex items rather
   than pseudo-elements, so the whole chain stacks cleanly on phones. */
.flow-row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.flow-row .flow-node{padding:9px 16px}
.flow-row .flow-arrow{padding:0}
@media(max-width:600px){
  .flow-row{flex-direction:column;gap:4px}
  .flow-row .flow-node{width:100%}
}
/* Preventive intelligence hub — deliberately ARCHITECTURE-NEUTRAL.
   It shows WHERE the intelligence could be consumed and nothing about
   how it is produced: no pipeline, no stages, no scoring, no model
   inputs, no internal decision path. An earlier draft drew a
   Preventive intelligence -> Earlier decision -> Review/Hold/Allow
   chain here; that read as Clarveil's internal decision process and
   was removed. Do not reintroduce a directional flow into this block.
   The surrounding nodes are PROSPECTIVE integration surfaces, not
   current integrations, partners or endorsements — the caption under
   the diagram says so and must stay. */
.hub-core{
  border:1px solid rgba(29,158,117,0.35);
  background:rgba(29,158,117,0.07);
  border-radius:var(--r);
  padding:22px 20px;text-align:center;
}
.hub-core-t{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--green-h);line-height:1.55;
}
.hub-core-s{
  font-family:'DM Sans',sans-serif;font-weight:300;font-size:13px;
  color:var(--steel);margin-top:9px;line-height:1.5;
}
.hub{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:46px}
.hub-side{display:flex;flex-direction:column;gap:12px}
.hub-item{display:flex;align-items:center;gap:10px}
.hub-core-wrap{max-width:290px}
.hub-node{
  font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:0.6px;
  color:var(--white);text-align:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;padding:10px 14px;line-height:1.45;flex:1;
}
.hub-arrow{color:var(--green-l);font-size:13px;flex-shrink:0;opacity:.75}
.hub-caption{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);
  letter-spacing:0.3px;text-align:center;margin-top:22px;line-height:1.7;
}
/* Below 900px the three-column arrangement stops reading as a hub, so
   it stacks with the core first and the arrows retired. */
@media(max-width:900px){
  .hub{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .hub-core-wrap{order:-1;max-width:none;margin-bottom:8px}
  .hub-arrow{display:none}
}

/* Capability groups — "available now" is split into three scannable
   groups rather than one wall of eleven pills. Containers reuse
   .ai-grid/.ai-card and the group heading reuses .fact-label; only the
   list rhythm and the green check are new. The check is decorative and
   aria-hidden: availability is carried by the "Available now" heading,
   not by the glyph. Roadmap items must NEVER get a check. */
.cap-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.cap-list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;font-weight:300;color:var(--mist);line-height:1.55;
}
.cap-check{color:var(--green-l);font-size:12px;flex-shrink:0;line-height:1.8}
/* Roadmap table. Modelled on .compare-* but with its own proportions
   (the Direction column carries sentences) and a real mobile transform:
   below 860px each row becomes a stacked card rather than forcing a
   horizontal scroll. Green-tinted frame = the site's roadmap treatment.
   NO checkmarks are permitted in this table — a green check means
   shipped, and every row here is explicitly ROADMAP. */
.rm-table{margin-top:42px;border:1px solid rgba(29,158,117,0.20);border-radius:var(--r);overflow:hidden}
.rm-head{display:grid;grid-template-columns:1.35fr 0.65fr 2fr;background:rgba(29,158,117,0.06);border-bottom:1px solid rgba(29,158,117,0.20)}
.rm-head div{padding:15px 22px;font-family:'DM Mono',monospace;font-size:11px;color:var(--green-l);letter-spacing:1.5px}
.rm-row{display:grid;grid-template-columns:1.35fr 0.65fr 2fr;border-bottom:1px solid rgba(255,255,255,0.05);transition:background .2s}
.rm-row:last-child{border-bottom:none}
.rm-row:hover{background:rgba(255,255,255,0.02)}
.rm-row > div{padding:18px 22px;display:flex;align-items:center}
.rm-cap{font-size:15px;color:var(--white);font-weight:400;letter-spacing:-0.2px;line-height:1.45}
.rm-dir{font-size:14px;color:var(--steel);font-weight:300;line-height:1.65}
@media(max-width:860px){
  .rm-table{border:none;border-radius:0;overflow:visible}
  .rm-head{display:none}
  .rm-row{
    grid-template-columns:1fr;
    border:1px solid rgba(29,158,117,0.20);
    border-radius:var(--r);
    background:var(--ink-2);
    padding:22px;margin-bottom:12px;
  }
  .rm-row:last-child{margin-bottom:0;border-bottom:1px solid rgba(29,158,117,0.20)}
  .rm-row > div{padding:0;display:block}
  .rm-row .rm-cap{font-size:16px;margin-bottom:12px}
  .rm-row .rm-status{margin-bottom:12px}
}

/* R&D validation strip. Sits directly under the hero as a credibility
   band, NOT a product section — hence .strip-h rather than .section-h,
   so it can never out-shout the technology story above or below it.
   The amber label on the third cell is the site's existing "in
   progress" tag colour: the point of the component is that the R&D
   assessment is complete while the financial requirements are not. */
.strip-h{
  font-family:'DM Sans',sans-serif;font-size:20px;font-weight:400;
  color:var(--white);letter-spacing:-0.3px;line-height:1.35;margin-bottom:6px;
}
.val-status{
  font-size:17px;font-weight:400;color:var(--white);
  letter-spacing:-0.2px;line-height:1.35;margin-bottom:12px;
}
/* Footnote inside a card, separated by a hairline. Used for the
   indicative MBIE milestone, which is a DATED claim — see the comment
   on that line in #validation. */
.card-note{
  font-family:'DM Mono',monospace;font-size:10.5px;color:var(--steel);
  letter-spacing:0.2px;line-height:1.65;margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,0.07);
}

/* Investor / partner invitation. A single bordered green-tinted block,
   not a fundraising banner: no valuation, round size, terms, equity or
   revenue forecast may appear here or anywhere on the site. It sits at
   the END of #company so the technology and the execution evidence are
   both read first. */
.invite{
  margin-top:58px;padding:36px 40px;
  background:rgba(29,158,117,0.05);
  border:1px solid rgba(29,158,117,0.25);
  border-radius:var(--r);
}
.invite .section-p{max-width:720px}
.invite .cta-btn{margin-top:24px}
@media(max-width:600px){.invite{padding:28px 22px}}

/* Founder — bio left, five compact expertise tiles right. The tiles
   reuse the hero stat-tile component wholesale (see the extended
   selectors below) so no new card styling enters the system. */
.founder-name{font-family:'Instrument Serif',serif;font-size:30px;color:var(--white);letter-spacing:-0.6px;line-height:1.15;margin-top:14px}
.founder-role{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green-l);margin-top:10px}
/* Bio is measure-constrained rather than column-constrained: the six
   credential tiles below need the full width to sit as a genuine 3x2,
   and 820px keeps the prose at a readable line length either way. */
.founder-bio{max-width:820px}
.founder-bio p{font-size:15px;font-weight:300;color:var(--steel);line-height:1.75;margin-top:18px}
/* 3x2 desktop -> 2x3 tablet and phone. Six tiles divide evenly into
   both, so no orphan and no column-span special case. Tiles reuse the
   hero stat-tile component wholesale (selectors extended above). */
.founder-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
@media(max-width:900px){
  .founder-stats{grid-template-columns:1fr 1fr}
}

/* IP status strip under the preventive badge. Deliberately small,
   mono and steel-coloured: the patent position is credibility, not the
   story, and must not compete with the section headline. */
.ip-status{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);
  letter-spacing:0.3px;line-height:1.7;margin-top:14px;max-width:640px;
}

/* Company facts reuse .ai-grid-2/.ai-card; this only tightens the
   label-to-body rhythm for short factual entries. */
.fact-label{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--green-l);margin-bottom:12px;
}

.how-section{padding:0 48px 120px;max-width:1200px;margin:0 auto;position:relative;z-index:2}
@media(max-width:600px){.how-section{padding:0 20px 80px}}
/* Timeline — Apple-style card register. 5 cards in a row at desktop
   widths (≥1100px), stacked single-column below. align-items: stretch
   makes every card match the tallest, so the row reads as one band
   regardless of which step carries the longest body. The card body is
   left-aligned, generous 32px padding, restrained typographic
   register. Number + stage label share the top row via flex with
   baseline alignment. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px;align-items:stretch}
/* 4-up desktop -> 2x2 tablet -> single column phone. The 2x2 tier is
   new: with five steps a mid-width 2-up left an orphan, with four it
   divides evenly. */
@media(max-width:1099px){.steps{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:700px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r);
  padding:32px;
  position:relative;
  display:flex;flex-direction:column;
  transition:transform 0.2s ease,border-color 0.2s ease;
}
.step:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.12);
}
@media(max-width:600px){.step{padding:24px}}
@media(prefers-reduced-motion:reduce){.step:hover{transform:none}}

.step-card-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:24px;
}
.step-num{
  font-family:'Instrument Serif',serif;
  font-size:36px;color:var(--green);
  line-height:1;letter-spacing:-1px;
}
.step-time{
  font-family:'DM Mono',monospace;
  font-size:11px;color:var(--steel);
  letter-spacing:1.5px;text-transform:uppercase;
}
.step h3{
  font-family:'DM Sans',sans-serif;
  font-weight:500;font-size:22px;
  color:var(--white);
  letter-spacing:-0.3px;line-height:1.3;
  margin-bottom:14px;
}
.step p{
  font-family:'DM Sans',sans-serif;
  font-weight:300;font-size:15px;
  color:var(--steel);line-height:1.7;
}

/* Compact horizontal strips — Platform Coverage and Roadmap. Same
   visual register: small uppercase mono heading + a centred row of
   pill badges. Subtle borders, no card backgrounds, so they read as
   metadata between the headline sections rather than competing with
   them. The roadmap variant tints its accent green and uses a
   different heading word — markup is otherwise identical. */
.strip-section{
  position:relative;z-index:2;
  padding:0 48px 80px;max-width:1200px;margin:0 auto;
  text-align:center;
}
@media(max-width:600px){.strip-section{padding:0 20px 56px}}
.strip-tag{
  font-family:'DM Mono',monospace;
  font-size:11px;color:var(--green-l);
  letter-spacing:2.5px;text-transform:uppercase;
  margin-bottom:18px;
}
.strip-pills{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;
}
.strip-pill{
  display:inline-flex;align-items:center;
  font-family:'DM Mono',monospace;
  font-size:12px;color:var(--steel);
  letter-spacing:1px;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:100px;
  background:rgba(255,255,255,0.02);
  transition:color .2s,border-color .2s,background .2s;
}
.strip-pill:hover{
  color:var(--white);
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
}
/* Roadmap variant — accent-tinted pills hint at "future" without
   committing to any timeline. */
.strip-roadmap .strip-pill{
  border-color:rgba(29,158,117,0.22);
  background:rgba(29,158,117,0.04);
  color:var(--green-l);
}
.strip-roadmap .strip-pill:hover{
  border-color:rgba(29,158,117,0.45);
  background:rgba(29,158,117,0.08);
  color:var(--green-h);
}
.strip-roadmap .strip-pill .patent-badge{margin-left:8px}

/* .copy-section is the generic prose/card container — identical
   geometry to .ai-section, aliased rather than duplicated so the two
   never drift apart. Used by the positioning, enterprise-value and
   patent-direction sections. */
.ai-section,.copy-section{padding:0 48px 120px;max-width:1200px;margin:0 auto;position:relative;z-index:2}
@media(max-width:600px){.ai-section,.copy-section{padding:0 20px 80px}}
.ai-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:var(--r);overflow:hidden;margin-top:48px}
/* Two-up variant — same card register, four cards as a 2x2. Declared
   BEFORE the 900px collapse below so mobile still lands on one column
   (equal specificity, so source order decides). */
.ai-grid-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr}}
/* min-width:0 defeats the grid item's default min-content floor. The
   code block's lines are white-space:nowrap, so without this its
   column inflates to fit the longest line and the row goes lopsided
   (measured 168/272/168 at 950px). With it the columns stay a true
   1fr each and the code block uses its own overflow-x:auto when the
   viewport is genuinely too narrow. */
.ai-card{padding:40px;background:var(--ink-2);transition:background .3s;min-width:0}
.ai-card:hover{background:var(--ink-3)}
.ai-card-highlight{background:rgba(29,158,117,0.05);border-left:1px solid rgba(29,158,117,0.18)}
.ai-card-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.ai-card-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.ai-tag-red{color:var(--red)}
.ai-tag-amber{color:var(--amber)}
.ai-tag-green{color:var(--green-l)}
.ai-card h3{font-size:18px;font-weight:500;margin-bottom:20px;letter-spacing:-0.3px;line-height:1.3}
.ai-code-block{background:#0A0A0D;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:20px;margin-bottom:20px;font-family:'DM Mono',monospace;font-size:12px;line-height:2;overflow-x:auto}
.ai-code-line{white-space:nowrap}
.ai-comment{color:rgba(255,255,255,0.25)}
.ai-cmd{color:var(--mist)}
.ai-pkg-bad{color:var(--red);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px}
.ai-result-bad{color:var(--amber)}
.ai-card-desc{font-size:13px;color:var(--steel);line-height:1.75;font-weight:300}
.ai-detect-list{display:flex;flex-direction:column;gap:20px}
.ai-detect-item{display:flex;gap:14px;align-items:flex-start}
.ai-detect-icon{width:24px;height:24px;flex-shrink:0;border:1px solid rgba(29,158,117,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--green-l);margin-top:2px}
.ai-detect-title{font-size:14px;font-weight:500;margin-bottom:4px}
.ai-detect-sub{font-size:12px;color:var(--steel);line-height:1.5;font-weight:300}
.ai-stat-bar{display:flex;gap:0;border:1px solid rgba(255,255,255,0.06);border-radius:var(--r);overflow:hidden;margin-top:24px}
@media(max-width:700px){.ai-stat-bar{flex-direction:column}}
.ai-stat{flex:1;padding:32px;background:var(--ink-2)}
.ai-stat-divider{width:1px;background:rgba(255,255,255,0.06);flex-shrink:0}
@media(max-width:700px){.ai-stat-divider{width:auto;height:1px}}
.ai-stat-n{font-family:'Instrument Serif',serif;font-size:40px;color:var(--green-l);letter-spacing:-1px;line-height:1.1;margin-bottom:8px;font-style:italic}
/* Bold label between the figure and its explanation. Same white-lift,
   no-extra-weight convention as .section-p strong. */
.ai-stat-lbl{font-size:13px;color:var(--white);font-weight:400;line-height:1.4;margin-bottom:8px}
.ai-stat-l{font-size:13px;color:var(--steel);font-weight:300;line-height:1.5}
/* Citation link under each figure. Mono + green-l + hairline underline
   is the page's established link register (.cta-note a, .privacy a) —
   rendered small so it reads as a footnote, not a CTA. These are the
   only outbound links on the site; they are user-initiated navigations,
   so the page still makes zero third-party requests on load. */
.ai-stat-src{
  display:inline-block;margin-top:12px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.3px;
  color:var(--green-l);text-decoration:none;line-height:1.5;
  border-bottom:1px solid rgba(93,202,165,0.3);padding-bottom:1px;
}
.ai-stat-src:hover{color:var(--green-h);border-bottom-color:var(--green-l)}
.ai-stat-src:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}

.compare-section{padding:0 48px 120px;max-width:1200px;margin:0 auto;position:relative;z-index:2}
@media(max-width:600px){.compare-section{padding:0 20px 80px}}
.compare-wrap{margin-top:64px;border:1px solid rgba(255,255,255,0.08);border-radius:var(--r);overflow:hidden}
/* Three columns — capability, the typical baseline, Clarveil. The
   middle column carries words ("Core capability" / "Varies") rather
   than a cross, so it gets more room than the old check-mark column. */
.compare-head{display:grid;grid-template-columns:2fr 1.2fr 1fr;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.08)}
.compare-head div{padding:16px 24px;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:1.5px}
.compare-head div:last-child{background:rgba(29,158,117,0.06);color:var(--green-l);border-left:1px solid rgba(29,158,117,0.18)}
.compare-row{display:grid;grid-template-columns:2fr 1.2fr 1fr;border-bottom:1px solid rgba(255,255,255,0.05);transition:background .2s}
.compare-row:last-child{border-bottom:none}
.compare-row:hover{background:rgba(255,255,255,0.02)}
.compare-row div{padding:16px 24px;font-size:14px;color:var(--steel);display:flex;align-items:center}
.compare-row div:first-child{color:var(--white);font-weight:400}
.compare-row div:last-child{background:rgba(29,158,117,0.04);border-left:1px solid rgba(29,158,117,0.12)}
.ck{color:var(--green-l);font-size:18px}
.cx{color:rgba(255,255,255,0.18);font-size:18px}
/* PATENT PENDING badge — small inline pill that marks the boundary
   between shipped capability and R&D direction. It appears wherever
   the page describes work that is NOT a current production capability
   (comparison table, roadmap strip, AI section, direction cards).
   Anything wearing this badge must be described by outcome only —
   never by mechanism. */
.patent-badge{
  display:inline-block;
  background:rgba(29,158,117,0.16);
  color:var(--green-l);
  font-family:'DM Mono',monospace;
  font-size:9px;
  font-weight:500;
  letter-spacing:1.5px;
  padding:2px 8px;
  border-radius:100px;
  margin-left:10px;
  vertical-align:middle;
  border:1px solid rgba(29,158,117,0.25);
  white-space:nowrap;
}
/* Inside a table cell the badge IS the cell content, so it drops the
   inline left margin it uses when trailing a row label. */
.compare-row div > .patent-badge{margin-left:0}
@media(max-width:700px){
  .compare-head{grid-template-columns:1.5fr 1fr 0.9fr}
  .compare-row{grid-template-columns:1.5fr 1fr 0.9fr}
  .compare-head div,.compare-row div{padding:12px}
  .compare-row div{font-size:12px}
  .patent-badge{margin-left:6px;font-size:8px;letter-spacing:1px;padding:1px 6px}
  /* In a ~90px table cell the longer verdict badges ("PROPRIETARY AI/ML
     R&D", "R&D / PLATFORM DIRECTION") overflow while nowrap. Let them
     wrap, and drop the 100px stadium radius to a chip radius so a
     two-line badge does not read as a blob. */
  .compare-row div > .patent-badge{
    margin-left:0;white-space:normal;border-radius:6px;
    line-height:1.6;padding:3px 7px;
  }
}

/* Deployment section — single-column centered architectural promises.
   The previous draft had a side-by-side terminal mockup + promises
   grid; both have been removed because (a) the terminal exposed
   deploy specifics that should stay confidential and (b) the wider
   layout was visually competing with the comparison table above.
   Now: heading centred, single 720px-max promises list also centred,
   no terminal block, no two-column grid. */
.deploy-section{padding:0 48px 120px;max-width:1200px;margin:0 auto;position:relative;z-index:2}
@media(max-width:600px){.deploy-section{padding:0 20px 80px}}
.deploy-promises{
  list-style:none;
  display:flex;flex-direction:column;gap:20px;
  max-width:720px;margin:48px auto 0;
}
.deploy-promises li{display:flex;gap:14px;font-size:15px;color:var(--steel);line-height:1.6;font-weight:300}
.dp-icon{width:24px;height:24px;flex-shrink:0;border:1px solid rgba(29,158,117,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--green-l);margin-top:2px}

.cta-section{position:relative;z-index:2;text-align:center;padding:120px 48px 160px;overflow:hidden}
@media(max-width:600px){.cta-section{padding:80px 20px 100px}}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(29,158,117,0.08) 0%,transparent 70%);pointer-events:none}
.cta-section h2{font-family:'Instrument Serif',serif;font-size:clamp(44px,6vw,88px);font-weight:400;letter-spacing:-3px;line-height:0.95;margin-bottom:24px;position:relative}
.cta-section h2 span{font-style:italic;color:var(--green-l)}
.cta-section p{font-size:17px;color:var(--steel);max-width:560px;margin:0 auto 48px;font-weight:300;line-height:1.7;position:relative}
/* The CTA narrative is three paragraphs — current capability, then the
   patent-pending direction, then the pilot ask. Every paragraph except
   the last tightens to 16px so they read as one block; the last keeps
   the full 48px breathing room before the mailto button. */
.cta-section p:not(:last-of-type){margin-bottom:16px}

/* Privacy — small paragraph above the footer. Light visual weight:
   no card, just a centred block of muted DM Mono text so it reads as
   fine-print rather than another section. */
.privacy-section{
  position:relative;z-index:2;
  padding:24px 48px 0;max-width:760px;margin:0 auto;
  text-align:center;
}
@media(max-width:600px){.privacy-section{padding:24px 20px 0}}
.privacy-section .section-tag,
.privacy-section .strip-tag{margin-bottom:10px}
.privacy-section p{
  font-family:'DM Mono',monospace;
  font-size:13px;color:var(--steel);
  line-height:1.85;letter-spacing:0.2px;
}
.privacy-section a{color:var(--green-l);text-decoration:none;border-bottom:1px solid rgba(93,202,165,0.25)}
.privacy-section a:hover{color:var(--green-h);border-bottom-color:var(--green-l)}

footer{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,0.06);
  padding:32px 48px;margin-top:48px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
@media(max-width:600px){
  footer{padding:24px 20px;flex-direction:column;align-items:flex-start;gap:6px}
}
.footer-left,.footer-right{
  font-size:12px;color:var(--steel);
  font-family:'DM Mono',monospace;letter-spacing:0.5px;line-height:1.7;
}
.footer-right a{color:var(--green-l);text-decoration:none}
.footer-right a:hover{color:var(--green-h)}

/* Scroll-reveal — initial state added by JS so non-JS users see content immediately. */
.reveal.anim{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal.anim{opacity:1;transform:none}
}

/* ── About page ────────────────────────────────────────────────────────
   Shared with index.html; these rules are only used by about.html today.

   .card-grid is a gap-separated card grid (each card carries its own
   border) rather than the hairline .ai-grid, because the About page has
   card groups of 4 and 5. In .ai-grid an odd trailing card leaves an
   empty cell that shows the hairline background as a light rectangle;
   .card-grid degrades cleanly at any count. */
.about-head{padding-top:132px}
@media(max-width:600px){.about-head{padding-top:104px}}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.card-grid > div{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r);
  padding:28px;
  transition:transform .2s ease,border-color .2s ease;
}
.card-grid > div:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.12)}
@media(prefers-reduced-motion:reduce){.card-grid > div:hover{transform:none}}
.card-grid-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.card-grid,.card-grid-2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.card-grid,.card-grid-2{grid-template-columns:1fr}}
.card-grid h3{
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:17px;
  color:var(--white);letter-spacing:-0.2px;line-height:1.35;margin-bottom:10px;
}
.card-grid p{font-size:14px;font-weight:300;color:var(--steel);line-height:1.7}
/* Credibility strip — former roles. Named as factual career history
   only: no logos, and no endorsement by any former employer is implied
   or permitted here. */
.cred-org{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--green-l);margin-bottom:12px;
}
.cred-role{font-size:15px;color:var(--white);font-weight:400;line-height:1.4;margin-bottom:6px}
.cred-sub{font-size:13px;color:var(--steel);font-weight:300;line-height:1.6}
/* Two buttons side by side on the About CTA. */
.cta-pair{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
@media(max-width:600px){.cta-pair{flex-direction:column;align-items:stretch}
  .cta-pair .cta-btn{justify-content:center}}
/* Secondary button — same geometry as .cta-btn, outlined not filled, so
   the primary action stays visually dominant. */
.cta-btn-ghost{
  background:transparent;color:var(--green-l);
  border:1px solid rgba(29,158,117,0.45);
}
.cta-btn-ghost:hover{background:rgba(29,158,117,0.08);color:var(--green-h);box-shadow:none}

/* ── About page v2 — density + diagrams ────────────────────────────────
   Everything here is scoped to .page-about (set on <body> in about.html)
   or to classes only that page uses, so index.html is untouched.

   The v1 About page read as a long styled document: text-only sections
   separated by the 120px .copy-section rhythm. These rules tighten the
   rhythm to ~84px and give each section a visual element to carry it. */
.page-about .copy-section{padding-bottom:84px}
@media(max-width:600px){.page-about .copy-section{padding-bottom:64px}}

/* Hero: headline left, compact status stack right, so the fold is not
   half empty. */
.about-hero{
  display:grid;grid-template-columns:1.25fr 0.75fr;
  gap:56px;align-items:start;padding-top:126px;
}
@media(max-width:900px){.about-hero{grid-template-columns:1fr;gap:34px;padding-top:104px}}
.stat-stack{display:flex;flex-direction:column;gap:10px}
.stat-stack > div{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  border-radius:var(--r);padding:15px 18px;
}
.stat-stack-k{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--green-l);margin-bottom:7px;line-height:1.5;
}
.stat-stack-v{font-size:14px;color:var(--white);font-weight:300;line-height:1.5}
.stat-stack .accent{border-color:rgba(29,158,117,0.3);background:rgba(29,158,117,0.05)}

/* The one-line thesis. Serif, centred, green-tinted frame — used once. */
.statement{
  margin-top:46px;padding:38px 44px;text-align:center;
  border:1px solid rgba(29,158,117,0.28);
  background:rgba(29,158,117,0.05);border-radius:var(--r);
}
.statement p{
  font-family:'Instrument Serif',serif;
  font-size:clamp(23px,2.9vw,36px);line-height:1.25;
  letter-spacing:-1px;color:var(--white);
}
.statement .it{font-style:italic;color:var(--green-l)}
@media(max-width:600px){.statement{padding:28px 22px}}

/* Vertical decision-layer diagram: consumer surfaces -> Clarveil ->
   outcome. Integration and outcome ONLY — never a mechanism, never a
   stage of the internal decision. */
.stack-diagram{margin-top:40px}
.stack-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stack-arrow{text-align:center;color:var(--green-l);opacity:.75;padding:16px 0;font-size:14px;line-height:1}
.stack-out{max-width:340px;margin:0 auto}

/* 0 -> 1 sequence. Four joined cards reading left to right, with a small
   arrow sitting on each seam. */
.seq{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px}
.seq > div{
  background:var(--ink-2);border:1px solid rgba(255,255,255,0.07);
  padding:28px 24px;position:relative;
}
.seq > div + div{border-left:none}
.seq > div:first-child{border-radius:var(--r) 0 0 var(--r)}
.seq > div:last-child{border-radius:0 var(--r) var(--r) 0}
.seq > div:not(:last-child)::after{
  content:'\2192';position:absolute;right:-8px;top:50%;
  transform:translateY(-50%);color:var(--green-l);font-size:12px;
  background:var(--ink);padding:3px 2px;z-index:2;line-height:1;
}
.seq-num{font-family:'Instrument Serif',serif;font-size:28px;color:var(--green);line-height:1;margin-bottom:16px}
.seq h3{font-family:'DM Sans',sans-serif;font-weight:500;font-size:15px;color:var(--white);letter-spacing:-0.1px;margin-bottom:9px;line-height:1.35}
.seq p{font-size:13.5px;font-weight:300;color:var(--steel);line-height:1.65}
@media(max-width:900px){
  .seq{grid-template-columns:1fr 1fr}
  .seq > div{border-left:1px solid rgba(255,255,255,0.07);border-radius:0}
  .seq > div:not(:last-child)::after{display:none}
}
@media(max-width:600px){
  .seq{grid-template-columns:1fr;gap:12px}
  .seq > div{border-radius:var(--r)}
}

/* Current-focus cards take a green left edge — a small technical accent
   that distinguishes them from the plain credibility cards. */
.focus-card{border-left:2px solid rgba(29,158,117,0.4) !important}

/* Founder: bio left, credibility tiles right. The tiles run 2-up here
   (not 3-up as on the homepage) because the right column is ~490px —
   at 3-up the mono sub-labels wrap and the grid reads cramped. */
.founder-2col{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;margin-top:34px}
.founder-2col .founder-stats{grid-template-columns:1fr 1fr;margin-top:0}
@media(max-width:900px){.founder-2col{grid-template-columns:1fr;gap:32px}}

/* 404 page — hero without stats; keep it vertically centred between the
   fixed nav and the footer. Cloudflare Pages serves /404.html with a real
   404 status for every unmatched path; before it existed the platform
   treated the site as an SPA and returned index.html with 200 for
   /anything (which is why /sitemap.xml "existed" as HTML). */
.page-404 .hero-404{min-height:calc(100vh - 72px);margin-top:72px;padding:80px 24px}
.page-404 .hero-404 .hero-sub{max-width:560px}
.page-404 .hero-cta-wrap{flex-direction:row;flex-wrap:wrap;justify-content:center}