/* =========================================================================
   OneZero Network — "Evidence, not assertion."
   Design system. Concept: signed-receipt / instrument-panel, warm not cold.
   Tri-state color (verified/unknown/flagged) mirrors the products' real logic.
   ========================================================================= */

:root {
  /* ---- Ink & paper ---- */
  --ink:        #0F1826;   /* prussian-tinted near-black: dark sections + text */
  --ink-soft:   #1B2738;   /* raised dark surface */
  --paper:      #F1F0EA;   /* warm neutral paper (cooler than cream) */
  --paper-2:    #E9E7DE;   /* recessed paper */
  --surface:    #FFFFFF;   /* cards on paper */
  --hairline:   #D9D6CC;   /* dividers on paper */
  --hairline-2: #C8C4B7;

  /* ---- Text ---- */
  --text:       #14202F;
  --text-muted: #5B6472;
  --text-faint: #8A8F99;
  --on-ink:       #EDEFF3;
  --on-ink-muted: #9BA6B6;

  /* ---- Brand (structural blueprint blue — sober, not generic bright SaaS) ---- */
  --brand:      #1B3B6F;
  --brand-700:  #16324F;
  --brand-500:  #2E5FAC;   /* interactive / link */
  --brand-tint: rgba(27, 59, 111, .07);
  --brand-tint-ink: rgba(120, 165, 235, .14);

  /* ---- Tri-state semantics (used ONLY in evidence/status chips) ---- */
  --verified:   #2F7D5B;
  --verified-bg:rgba(47, 125, 91, .10);
  --unknown:    #A9781E;
  --unknown-bg: rgba(169, 120, 30, .12);
  --flagged:    #B33A2B;
  --flagged-bg: rgba(179, 58, 43, .10);

  /* ---- Type ---- */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Scale & rhythm ---- */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15,24,38,.05), 0 2px 8px rgba(15,24,38,.04);
  --shadow-md: 0 4px 12px rgba(15,24,38,.07), 0 12px 30px rgba(15,24,38,.07);
  --shadow-lg: 0 10px 30px rgba(15,24,38,.10), 0 30px 60px rgba(15,24,38,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ========================================================================= */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; letter-spacing:-0.02em; line-height:1.08; color: var(--text); }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight:600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
p  { color: var(--text-muted); }

.container { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(22px, 2.8vw, 40px); }
.section--tight { padding-block: clamp(18px, 2.2vw, 28px); }

/* ---- Reusable: eyebrow ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-500);
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:500;
}
.eyebrow::before {
  content:""; width: 22px; height:1px; background: var(--brand-500); opacity:.55;
}
.on-ink .eyebrow { color:#8FB4EE; }
.on-ink .eyebrow::before { background:#8FB4EE; }

/* ---- Evidence tag: the signature device ---- */
.evtag {
  font-family: var(--mono);
  font-size: .74rem;
  line-height:1.3;
  letter-spacing:-0.01em;
  display:inline-flex; align-items:center; gap:.5em;
  padding: .34em .62em .34em .55em;
  border-radius: 6px;
  border: 1px solid var(--hairline-2);
  background: var(--paper-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.evtag .lead { color: var(--brand-500); font-weight:600; }
.on-ink .evtag { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--on-ink-muted); }
.on-ink .evtag .lead { color:#8FB4EE; }

.evrow { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- Verdict token (tri-state) ---- */
.verdict {
  font-family: var(--mono);
  font-size: .68rem; font-weight:600;
  letter-spacing: .1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.32em .62em; border-radius: 100px;
  border:1px solid currentColor;
}
.verdict::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.verdict.is-verified { color: var(--verified); background: var(--verified-bg); }
.verdict.is-unknown  { color: var(--unknown);  background: var(--unknown-bg); }
.verdict.is-flagged  { color: var(--flagged);  background: var(--flagged-bg); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family: var(--body); font-weight:600; font-size:.98rem;
  padding: .82em 1.35em; border-radius: 10px;
  cursor:pointer; border:1px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  letter-spacing:-0.01em;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.on-ink .btn-primary { background:#fff; color: var(--ink); }
.on-ink .btn-primary:hover { background:#E4E9F1; }
.on-ink .btn-ghost { color: var(--on-ink); border-color: rgba(255,255,255,.22); }
.on-ink .btn-ghost:hover { border-color:#fff; color:#fff; }
.cta .btn-ghost { color: var(--on-ink); border-color: rgba(255,255,255,.3); }
.cta .btn-ghost:hover { border-color:#fff; color:#fff; }
.btn .arw { transition: transform .2s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ---- Text link with underline sweep ---- */
.tlink {
  color: var(--brand-500); font-weight:600; font-size:.96rem;
  display:inline-flex; align-items:center; gap:.4em;
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0% 1.5px; background-repeat:no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
  padding-bottom:2px;
}
.tlink:hover { background-size: 100% 1.5px; }
.tlink .arw { transition: transform .2s var(--ease); }
.tlink:hover .arw { transform: translateX(3px); }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: sticky; top:0; z-index: 50;
  background: rgba(241,240,234,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 68px; }
.brand { display:inline-flex; align-items:center; gap:.6em; font-family:var(--display); font-weight:600; letter-spacing:-0.02em; font-size:1.06rem; color:var(--text); }
.brand .mark { width:26px; height:26px; flex:0 0 auto; }
.brand .sub { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; font-weight:500; align-self:center; }
.nav-links { display:flex; align-items:center; gap: clamp(14px,2.4vw,30px); }
.nav-links a { font-size:.96rem; font-weight:500; color: var(--text-muted); transition: color .18s var(--ease); position:relative; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--brand); border-radius:2px;
}
.nav-right { display:flex; align-items:center; gap: 16px; }
.nav-cta { padding:.6em 1.05em; font-size:.92rem; }

.hamburger { display:none; width:42px; height:42px; border:1px solid var(--hairline-2); border-radius:9px; background:var(--surface); cursor:pointer; position:relative; }
.hamburger span { position:absolute; left:11px; right:11px; height:1.8px; background:var(--text); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.hamburger span:nth-child(1){ top:15px; } .hamburger span:nth-child(2){ top:20px; } .hamburger span:nth-child(3){ top:25px; }
.hamburger.open span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobile-menu { display:none; }
@media (max-width: 860px){
  .nav-links, .nav-cta.desktop { display:none; }
  .hamburger { display:block; }
  .mobile-menu {
    display:block; position:fixed; inset:68px 0 auto 0; z-index:49;
    background: var(--paper); border-bottom:1px solid var(--hairline);
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: transform .28s var(--ease), opacity .28s var(--ease);
    padding: 14px var(--gutter) 26px;
  }
  .mobile-menu.open { transform:none; opacity:1; pointer-events:auto; }
  .mobile-menu a { display:block; padding:14px 0; font-size:1.1rem; font-weight:500; border-bottom:1px solid var(--hairline); color:var(--text); }
  .mobile-menu .btn { width:100%; margin-top:18px; }
  body.menu-lock { overflow:hidden; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position:relative; padding-top: clamp(18px, 2.4vw, 34px); padding-bottom: clamp(20px, 2.6vw, 36px); overflow:hidden; }
.hero-grid {
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items:center;
}
@media (max-width: 940px){ .hero-grid{ grid-template-columns:1fr; gap:32px; } }

.hero h1 { margin-top: 12px; }
.hero h1 .em { color: var(--brand); position:relative; white-space:nowrap; }
.hero .lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--text-muted); max-width: 34ch; margin-top: 14px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top: 20px; }
.hero-proof { margin-top: 20px; display:flex; flex-wrap:wrap; gap:8px; }

/* the signed-receipt card — hero signature visual */
.receipt {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0; overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
  position:relative;
}
.receipt-head {
  display:flex; align-items:center; gap:10px;
  padding: 14px 18px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--on-ink-muted);
}
.receipt-dot { width:9px;height:9px;border-radius:50%; }
.receipt-body { padding: 20px 22px 22px; font-family: var(--mono); font-size:.82rem; line-height:1.85; }
.receipt-body .k { color: var(--on-ink-muted); }
.receipt-body .v { color: var(--on-ink); }
.receipt-line { display:flex; justify-content:space-between; gap:16px; }
.receipt-seal {
  margin-top:16px; padding-top:16px; border-top:1px dashed rgba(255,255,255,.16);
  display:flex; align-items:center; gap:12px;
}
.receipt-sig { font-size:.68rem; color:#8FB4EE; word-break:break-all; line-height:1.5; }
.receipt-perf { position:absolute; left:0; right:0; bottom:-1px; height:3px; background: linear-gradient(90deg, transparent, rgba(143,180,238,.6), transparent); }

/* three-state legend under hero visual */
.legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.legend .li { display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.7rem; color:var(--text-muted); letter-spacing:.02em; }
.legend .sw { width:9px;height:9px;border-radius:50%; }

/* =========================================================================
   PRINCIPLE BAND (dark)
   ========================================================================= */
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink h2 { color:#fff; }
.band-ink p { color: var(--on-ink-muted); }
.principle-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,3.6vw,48px); align-items:center; }
@media (max-width:860px){ .principle-grid{ grid-template-columns:1fr; gap:36px; } }
.principle-list { display:grid; gap: 2px; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.principle-item { padding: 20px 22px; background: rgba(255,255,255,.02); display:flex; gap:16px; align-items:flex-start; }
.principle-item .num { font-family:var(--mono); font-size:.72rem; color:#8FB4EE; padding-top:3px; letter-spacing:.06em; }
.principle-item h4 { font-family:var(--display); font-size:1.02rem; color:#fff; font-weight:600; margin-bottom:4px; }
.principle-item p { font-size:.92rem; margin:0; }

/* =========================================================================
   SECTION INTRO
   ========================================================================= */
.intro { max-width: 62ch; }
.intro.center { margin-inline:auto; text-align:center; }
.intro h2 { margin-top: 10px; }
.intro p { margin-top: 10px; font-size: 1.06rem; }

/* =========================================================================
   PRODUCT CARDS (index teaser + full list)
   ========================================================================= */
.prod-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 760px){ .prod-grid{ grid-template-columns:1fr; } }

.card {
  background: var(--surface); border:1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--hairline-2); }
.card .tag { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); font-weight:500; }
.card h3 { margin-top: 12px; font-size: 1.42rem; }
.card .role { margin-top: 8px; font-size:.98rem; color: var(--text-muted); flex-grow:0; }
.card .desc { margin-top: 14px; font-size:.96rem; color: var(--text-muted); }
.card .card-ev { margin-top: 18px; }
.card .card-foot { margin-top: 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card .idx { position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:.72rem; color:var(--text-faint); }

/* "slot reserved" faint card */
.card.reserved { background: var(--paper-2); border-style:dashed; box-shadow:none; }
.card.reserved:hover { transform:none; }
.card.reserved h3, .card.reserved .role { color: var(--text-faint); }

/* =========================================================================
   FULL PRODUCT PROFILE (products.html)
   ========================================================================= */
.profile { padding-block: clamp(20px, 2.6vw, 36px); border-top:1px solid var(--hairline); }
.profile:first-of-type { border-top:none; }
.profile-grid { display:grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 64px); align-items:start; }
@media (max-width: 900px){ .profile-grid{ grid-template-columns:1fr; gap:28px; } }
.profile-aside { position:sticky; top:92px; }
@media (max-width:900px){ .profile-aside{ position:static; } }
.profile-aside .tag { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); font-weight:500; }
.profile-aside h2 { margin-top:12px; font-size: clamp(2rem,3.2vw,2.6rem); }
.profile-aside .one { margin-top:14px; font-size:1.05rem; color:var(--text-muted); }
.profile-aside .verdict { margin-top:18px; }

.profile-body > p { font-size:1.05rem; color: var(--text-muted); }
.profile-body > p + p { margin-top: 16px; }
.feat-list { margin-top: 16px; display:grid; gap:10px; }
.feat {
  display:flex; gap:14px; align-items:flex-start;
  padding: 16px 18px; border:1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
}
.feat .ic { width:26px;height:26px; flex:0 0 auto; color:var(--brand); margin-top:1px; }
.feat h4 { font-family:var(--display); font-size:1.02rem; font-weight:600; }
.feat p { margin-top:4px; font-size:.94rem; }

.scopebox {
  margin-top: 16px; border-radius: var(--radius-sm);
  border:1px solid var(--hairline); background: var(--paper-2);
  padding: 18px 20px;
}
.scopebox .h { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.5em; }
.scopebox .h svg{ width:15px;height:15px; }
.scopebox p { margin-top:8px; font-size:.92rem; color: var(--text-muted); }

.profile-ev { margin-top: 14px; }

/* =========================================================================
   THE SPINE (approach) — how the products connect
   ========================================================================= */
.spine { display:grid; gap: 2px; margin-top:28px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--hairline); }
.spine-row { display:grid; grid-template-columns: 120px 1fr; gap: 24px; align-items:center; background:var(--surface); padding: 22px 24px; }
@media (max-width:680px){ .spine-row{ grid-template-columns:1fr; gap:8px; } }
.spine-row .stage { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-500); }
.spine-row h4 { font-family:var(--display); font-size:1.08rem; font-weight:600; }
.spine-row p { font-size:.95rem; margin-top:4px; }
.spine-row .who { font-family:var(--mono); font-size:.72rem; color:var(--text-faint); margin-top:8px; }

/* generic feature/value grid */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:26px; }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr; } }
.vcard { padding:26px 24px; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); }
.vcard .ic { width:30px;height:30px; color:var(--brand); }
.vcard h3 { margin-top:16px; font-size:1.16rem; }
.vcard p { margin-top:10px; font-size:.95rem; }

/* =========================================================================
   TRUST / CLAIMS TABLE
   ========================================================================= */
.claims { display:grid; gap: 10px; margin-top: 18px; }
.claim {
  display:grid; grid-template-columns: 150px 1fr; gap: 22px; align-items:start;
  padding: 22px 24px; border:1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
}
@media (max-width:680px){ .claim{ grid-template-columns:1fr; gap:10px; } }
.claim .state { display:flex; }
.claim h4 { font-family:var(--display); font-size:1.05rem; font-weight:600; }
.claim p { margin-top:6px; font-size:.95rem; }

.twocol { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
@media (max-width:760px){ .twocol{ grid-template-columns:1fr; } }
.pledge { padding:26px 26px; border-radius:var(--radius); border:1px solid var(--hairline); background:var(--surface); }
.pledge.do  { border-top: 3px solid var(--verified); }
.pledge.dont{ border-top: 3px solid var(--flagged); }
.pledge h3 { font-size:1.16rem; display:flex; align-items:center; gap:.5em; }
.pledge ul { list-style:none; padding:0; margin-top:16px; display:grid; gap:12px; }
.pledge li { display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--text-muted); }
.pledge li svg { width:18px;height:18px; flex:0 0 auto; margin-top:2px; }
.pledge.do  li svg { color: var(--verified); }
.pledge.dont li svg { color: var(--flagged); }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.cta { background: var(--ink); color:var(--on-ink); text-align:center; }
.cta h2 { color:#fff; max-width: 20ch; margin-inline:auto; }
.cta p { color: var(--on-ink-muted); max-width: 52ch; margin: 12px auto 0; font-size:1.05rem; }
.cta .btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.cta .mini { margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.contact-list { list-style:none; padding:0; margin-top:26px; display:grid; gap:16px; }
.contact-list li { display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--text-muted); }
.contact-list svg { width:20px;height:20px; color:var(--brand); flex:0 0 auto; margin-top:2px; }

.form { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding: clamp(24px,3vw,34px); box-shadow: var(--shadow-sm); }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:7px; letter-spacing:-0.01em; }
.field label .opt { color: var(--text-faint); font-weight:400; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--body); font-size:1rem; color:var(--text);
  padding:.78em .9em; border:1px solid var(--hairline-2); border-radius:10px; background: var(--paper);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); appearance:none;
}
.field textarea { resize:vertical; min-height:120px; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:40px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-tint);
}
.form .note { font-size:.82rem; color:var(--text-faint); margin-top:6px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--paper-2); border-top:1px solid var(--hairline); padding-block: 36px 26px; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; } }
@media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } }
.footer .brand { margin-bottom:14px; }
.footer .blurb { font-size:.92rem; color:var(--text-muted); max-width:34ch; }
.footer h5 { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; font-weight:500; }
.footer-col a { display:block; font-size:.94rem; color:var(--text-muted); padding:5px 0; transition:color .16s var(--ease); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { margin-top:26px; padding-top:18px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-bottom p { font-size:.85rem; color:var(--text-faint); font-family:var(--mono); letter-spacing:.02em; }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .receipt-perf { display:none; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px;
}

/* small page header for interior pages */
.pagehead { padding-top: clamp(18px,2.4vw,32px); padding-bottom: clamp(10px,1.6vw,18px); }
.pagehead h1 { font-size: clamp(2.2rem,5vw,3.6rem); margin-top:10px; }
.pagehead .lede { font-size: clamp(1.05rem,1.5vw,1.24rem); color:var(--text-muted); max-width:56ch; margin-top:12px; }

/* =========================================================================
   ENTERPRISE OVERHAUL — v2 components
   (outcome-first, denser, more visual)
   ========================================================================= */

/* ---- Section head (centered kicker + heading + one line) ---- */
.shead { max-width: 60ch; }
.shead.center { margin-inline:auto; text-align:center; }
.shead h2 { margin-top:10px; }
.shead .sub { margin-top:10px; font-size:1.05rem; color:var(--text-muted); }
.on-ink .shead h2 { color:#fff; }

/* ---- Triad value line (Verify AI / software / decisions) ---- */
.triad { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:18px; align-items:center; }
.triad .t {
  font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:-0.02em; color:var(--text);
}
.triad .dot { width:5px;height:5px;border-radius:50%;background:var(--brand-500); }

/* ---- Tech "built-on" strip (real technologies, not fake customers) ---- */
.techstrip { border-block:1px solid var(--hairline); background:var(--paper-2); }
.techstrip .in { display:flex; align-items:center; gap:clamp(18px,4vw,44px); flex-wrap:wrap; justify-content:center; padding-block:20px; }
.techstrip .lbl { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.techstrip .t { font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--text-muted); letter-spacing:-0.01em; opacity:.85; }

/* ---- Metric / spec chips (TRUE facts, not performance stats) ---- */
.specs { display:flex; flex-wrap:wrap; gap:8px; }
.spec {
  font-family:var(--mono); font-size:.72rem; color:var(--text-muted);
  border:1px solid var(--hairline-2); border-radius:6px; padding:.34em .6em; background:var(--surface);
  display:inline-flex; align-items:center; gap:.45em; white-space:nowrap;
}
.spec .d { width:5px;height:5px;border-radius:50%;background:var(--verified); }
.on-ink .spec { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:var(--on-ink-muted); }

/* big stat trio (uses TRUE architectural facts, each with a plain label) */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
@media (max-width:680px){ .stats{ grid-template-columns:1fr; gap:12px; } }
.stat { padding:22px 22px; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); }
.stat .n { font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-0.03em; color:var(--brand); }
.stat .l { margin-top:6px; font-size:.92rem; color:var(--text-muted); }
.on-ink .stat { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.on-ink .stat .n { color:#8FB4EE; }

/* ---- Product cards v2 (icon, title, one-liner, specs, CTA) ---- */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media (max-width:900px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .pgrid{ grid-template-columns:1fr; } }
.pcard {
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:24px 22px 22px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
  position:relative;
}
.pcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--hairline-2); }
.pcard .picon { width:40px;height:40px; border-radius:10px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; }
.pcard .picon svg { width:22px;height:22px; }
.pcard .pcat { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); margin-top:16px; }
.pcard h3 { font-size:1.24rem; margin-top:7px; }
.pcard .pone { margin-top:8px; font-size:.95rem; color:var(--text-muted); flex-grow:1; }
.pcard .pspecs { margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.pcard .pcta { margin-top:18px; }

/* ---- Comparison matrix ---- */
.matrix-wrap { margin-top:20px; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.matrix { width:100%; border-collapse:collapse; font-size:.95rem; }
.matrix th, .matrix td { text-align:left; padding:16px 18px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.matrix thead th { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); background:var(--paper-2); font-weight:500; }
.matrix tbody tr:last-child td { border-bottom:none; }
.matrix tbody tr { transition:background .16s var(--ease); }
.matrix tbody tr:hover { background:var(--brand-tint); }
.matrix .mprod { font-family:var(--display); font-weight:600; color:var(--text); white-space:nowrap; }
.matrix .mprod a { color:var(--brand-500); }
.matrix .mcat { font-family:var(--mono); font-size:.78rem; color:var(--text-muted); }
.matrix td .who { color:var(--text-faint); font-size:.86rem; }
@media (max-width:760px){
  .matrix thead { display:none; }
  .matrix, .matrix tbody, .matrix tr, .matrix td { display:block; width:100%; }
  .matrix tr { border-bottom:1px solid var(--hairline-2); padding:6px 0; }
  .matrix td { border:none; padding:6px 18px; }
  .matrix td[data-l]::before { content:attr(data-l); display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
}

/* ---- How-it-works flow diagram (horizontal on desktop, vertical on mobile) ---- */
.flow { display:flex; align-items:stretch; gap:0; margin-top:18px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
.flow .node {
  flex:1 1 0; min-width:130px; background:var(--surface); border:1px solid var(--hairline);
  border-radius:12px; padding:16px 14px; text-align:center; position:relative;
}
.flow .node .fn { font-family:var(--mono); font-size:.62rem; color:var(--brand-500); letter-spacing:.1em; }
.flow .node h4 { font-family:var(--display); font-size:.96rem; font-weight:600; margin-top:6px; }
.flow .node p { font-size:.8rem; margin-top:4px; color:var(--text-faint); line-height:1.4; }
.flow .arrow { flex:0 0 26px; display:grid; place-items:center; color:var(--hairline-2); }
.flow .arrow svg { width:20px;height:20px; }
.on-ink .flow .node { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); }
.on-ink .flow .node h4 { color:#fff; }
@media (max-width:720px){
  .flow { flex-direction:column; overflow:visible; }
  .flow .arrow { transform:rotate(90deg); height:24px; }
  .flow .node { min-width:0; }
}

/* ---- Artifact frame (REAL output shapes, labelled as example) ---- */
.artifact { border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); background:var(--ink); }
.artifact-cap { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--text-faint); margin-top:10px; text-align:center; }
.term { background:var(--ink); color:var(--on-ink); font-family:var(--mono); font-size:.8rem; line-height:1.75; }
.term-head { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--on-ink-muted); font-size:.7rem; }
.term-dot { width:9px;height:9px;border-radius:50%; }
.term-body { padding:16px 18px; overflow-x:auto; }
.term-body .c1 { color:#6FB98F; }      /* green */
.term-body .c2 { color:#E0B341; }      /* amber */
.term-body .c3 { color:#E2685A; }      /* red */
.term-body .cm { color:var(--on-ink-muted); }  /* muted */
.term-body .ck { color:#8FB4EE; }      /* key/blue */

/* ---- Steps (numbered, for How it works prose variant) ---- */
.steps { display:grid; gap:2px; margin-top:18px; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.step { display:grid; grid-template-columns:52px 1fr; gap:18px; padding:20px 22px; background:var(--surface); align-items:start; }
.step .sn { font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--brand); }
.step h4 { font-family:var(--display); font-size:1.05rem; font-weight:600; }
.step p { font-size:.94rem; margin-top:4px; }

/* ---- Benefit cards ---- */
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
@media (max-width:820px){ .benefits{ grid-template-columns:1fr; } }
.benefit { padding:24px 22px; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); }
.benefit .bic { width:34px;height:34px; color:var(--brand); }
.benefit h3 { font-size:1.1rem; margin-top:14px; }
.benefit p { margin-top:8px; font-size:.93rem; }

/* ---- Product hero (interior) ---- */
.phero { padding-top:clamp(14px,2vw,26px); padding-bottom:clamp(18px,2.4vw,32px); }
.phero-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:940px){ .phero-grid{ grid-template-columns:1fr; gap:32px; } }
.phero .pcat { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-500); display:inline-flex; gap:.6em; align-items:center; }
.phero .pcat::before { content:""; width:22px;height:1px; background:var(--brand-500); opacity:.6; }
.phero h1 { font-size:clamp(2.1rem,4.4vw,3.3rem); margin-top:14px; line-height:1.06; }
.phero .psub { font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--text-muted); margin-top:16px; max-width:40ch; }
.phero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* problem / solution split */
.ps { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
@media (max-width:760px){ .ps{ grid-template-columns:1fr; } }
.ps .col { padding:26px 24px; border-radius:var(--radius); border:1px solid var(--hairline); }
.ps .problem { background:var(--paper-2); }
.ps .solution { background:var(--surface); border-top:3px solid var(--brand); }
.ps .k { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.ps .solution .k { color:var(--brand-500); }
.ps h3 { font-size:1.15rem; margin-top:10px; }
.ps p { margin-top:10px; font-size:.98rem; }

/* ---- FAQ (native details/summary, accessible, no JS) ---- */
.faq { margin-top:18px; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.faq details { border-bottom:1px solid var(--hairline); }
.faq details:last-child { border-bottom:none; }
.faq summary {
  list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--display); font-weight:600;
  font-size:1.02rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .chev { flex:0 0 auto; width:18px;height:18px; color:var(--text-faint); transition:transform .24s var(--ease); }
.faq details[open] summary .chev { transform:rotate(180deg); }
.faq .a { padding:0 22px 18px; font-size:.96rem; color:var(--text-muted); }

/* ---- Breadcrumb ---- */
.crumb { font-family:var(--mono); font-size:.72rem; color:var(--text-faint); padding-top:18px; }
.crumb a { color:var(--brand-500); }
.crumb .sep { margin:0 .5em; }

/* ---- Nav dropdown-ish: keep simple; add subtle "products" active on hub ---- */

/* utility: reduce default section paddings a touch more on v2 pages */
.pad-sm { padding-block: clamp(20px,2.4vw,34px) !important; }

/* =========================================================================
   v3 — VISUAL STORYTELLING LAYER
   ========================================================================= */

/* per-product accents (status colors stay reserved for verdicts) */
:root{
  --acc-vng:#1B3B6F;  --acc-vng-t:rgba(27,59,111,.09);   /* blue   · evidence/security */
  --acc-cli:#0F6B4A;  --acc-cli-t:rgba(15,107,74,.09);    /* green  · terminal/developer */
  --acc-causa:#5B3FA8;--acc-causa-t:rgba(91,63,168,.09);  /* purple · timeline/incidents */
  --acc-axiom:#B4531A;--acc-axiom-t:rgba(180,83,26,.10);  /* orange · policy/authorization */
  --acc-biz:#0E5F6E;  --acc-biz-t:rgba(14,95,110,.10);    /* teal   · decisions/finance */
}
.accent-vng{ --acc:var(--acc-vng); --acc-t:var(--acc-vng-t); }
.accent-cli{ --acc:var(--acc-cli); --acc-t:var(--acc-cli-t); }
.accent-causa{ --acc:var(--acc-causa); --acc-t:var(--acc-causa-t); }
.accent-axiom{ --acc:var(--acc-axiom); --acc-t:var(--acc-axiom-t); }
.accent-biz{ --acc:var(--acc-biz); --acc-t:var(--acc-biz-t); }
.accent-vng .phero .pcat,.accent-cli .phero .pcat,.accent-causa .phero .pcat,.accent-axiom .phero .pcat,.accent-biz .phero .pcat{ color:var(--acc); }
[class*="accent-"] .phero .pcat::before{ background:var(--acc); }
[class*="accent-"] .phero h1 .em{ color:var(--acc); }
[class*="accent-"] .benefit .bic{ color:var(--acc); }
[class*="accent-"] .btn-primary{ background:var(--acc); }
[class*="accent-"] .btn-primary:hover{ filter:brightness(1.15); }
[class*="accent-"] .cta .btn-primary{ background:#fff; color:var(--ink); }
[class*="accent-"] .tlink{ color:var(--acc); }
[class*="accent-"] .step .sn{ color:var(--acc); }
[class*="accent-"] .flow .node .fn{ color:var(--acc); }
.on-ink[class] .flow .node .fn{ color:#8FB4EE; }

/* deployment chips row */
.deploy{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.deploy .dchip{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--hairline-2); background:var(--surface);
  border-radius:100px; padding:.4em .85em; color:var(--text-muted);
}
.deploy .dchip svg{ width:13px;height:13px; color:var(--acc,var(--brand)); }

/* ---- Illustrative interface frame ("dash") ---- */
.dash{ background:var(--ink); border-radius:var(--radius); border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-lg); overflow:hidden; color:var(--on-ink); }
.dash-head{ display:flex; align-items:center; gap:8px; padding:11px 15px;
  border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:.68rem; color:var(--on-ink-muted); }
.dash-body{ padding:16px; display:grid; gap:12px; }
.dash-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .dash-row{ grid-template-columns:1fr; } }
.panel{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:13px 14px; }
.panel .pl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-muted); }
.panel .pv{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin-top:6px; color:#fff; letter-spacing:-0.02em; }
.panel .ps{ font-family:var(--mono); font-size:.68rem; color:var(--on-ink-muted); margin-top:3px; }
.kv{ display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:.72rem; padding:3px 0; }
.kv .k{ color:var(--on-ink-muted); } .kv .v{ color:var(--on-ink); }
.kv .ok{ color:#6FB98F; } .kv .warn{ color:#E0B341; } .kv .bad{ color:#E2685A; }

/* score ring */
.ring-wrap{ display:flex; align-items:center; gap:14px; }
.ring{ width:76px;height:76px;border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(#6FB98F calc(var(--val,82)*1%), rgba(255,255,255,.1) 0); }
.ring::before{ content:""; position:absolute; width:58px;height:58px;border-radius:50%;background:var(--ink); }
.ring{ position:relative; }
.ring .rn{ position:relative; font-family:var(--display); font-weight:600; font-size:1.25rem; color:#fff; }

/* horizontal mini bars (chart) */
.hbars{ display:grid; gap:9px; }
.hbar{ display:grid; grid-template-columns:110px 1fr 44px; gap:10px; align-items:center; font-family:var(--mono); font-size:.68rem; color:var(--on-ink-muted); }
.hbar .tr{ height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.hbar .fill{ height:100%; border-radius:4px; background:#E0B341; width:var(--w,50%); }
.hbar .n{ text-align:right; color:var(--on-ink); }

/* sparkline strip */
.spark{ display:flex; align-items:flex-end; gap:4px; height:38px; }
.spark i{ display:block; width:9px; border-radius:2px 2px 0 0; background:rgba(255,255,255,.18); height:calc(var(--h)*1%); }
.spark i.hot{ background:#E2685A; } .spark i.cool{ background:#6FB98F; }

/* checks list (CI style) */
.checks{ display:grid; gap:8px; }
.chk{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:9px 12px; color:var(--on-ink); }
.chk .ic{ width:15px;height:15px; flex:0 0 auto; }
.chk .ok{ color:#6FB98F; } .chk .gate{ color:#E0B341; } .chk .tm{ margin-left:auto; color:var(--on-ink-muted); }

/* ---- Timeline (Causa) ---- */
.tline{ position:relative; padding-left:26px; display:grid; gap:14px; }
.tline::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:rgba(255,255,255,.12); border-radius:2px; }
.tl{ position:relative; }
.tl::before{ content:""; position:absolute; left:-24px; top:4px; width:10px;height:10px;border-radius:50%; background:#8FB4EE; border:2px solid var(--ink); }
.tl.red::before{ background:#E2685A; } .tl.green::before{ background:#6FB98F; } .tl.amber::before{ background:#E0B341; }
.tl .tt{ font-family:var(--mono); font-size:.62rem; color:var(--on-ink-muted); letter-spacing:.06em; }
.tl h5{ font-family:var(--display); font-weight:600; font-size:.95rem; color:#fff; margin-top:2px; }
.tl p{ font-family:var(--mono); font-size:.7rem; color:var(--on-ink-muted); margin-top:2px; }

/* ---- Branch diagram (Axiom) ---- */
.branch{ display:grid; gap:10px; }
.branch .stem{ text-align:center; }
.branch .paths{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .branch .paths{ grid-template-columns:1fr; } }
.bnode{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:12px 13px; text-align:center; }
.bnode .bl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--on-ink-muted); text-transform:uppercase; }
.bnode h5{ font-family:var(--display); font-weight:600; font-size:.95rem; color:#fff; margin-top:4px; }
.bnode p{ font-family:var(--mono); font-size:.68rem; color:var(--on-ink-muted); margin-top:3px; }
.bnode.good{ border-color:rgba(111,185,143,.4); } .bnode.hold{ border-color:rgba(224,179,65,.4); }
.vline{ width:2px; height:16px; background:rgba(255,255,255,.15); margin:0 auto; border-radius:2px; }

/* ---- Outcomes ("what changes") ---- */
.outcomes{ display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; margin-top:18px; }
@media (max-width:680px){ .outcomes{ grid-template-columns:1fr; } }
.outcome{ display:flex; gap:11px; align-items:flex-start; padding:13px 15px;
  border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface); }
.outcome svg{ width:18px;height:18px; flex:0 0 auto; margin-top:2px; color:var(--acc,var(--brand)); }
.outcome p{ font-size:.95rem; color:var(--text); margin:0; }
.outcome p span{ display:block; font-size:.85rem; color:var(--text-muted); margin-top:2px; }

/* ---- Mini feature matrices (visual compare) ---- */
.mmx{ display:grid; grid-template-columns:repeat(5,1fr); gap:11px; margin-top:20px; }
@media (max-width:1020px){ .mmx{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .mmx{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .mmx{ grid-template-columns:1fr; } }
.mcard{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface);
  padding:16px 15px; border-top:3px solid var(--acc,var(--brand)); display:flex; flex-direction:column; }
.mcard h4{ font-family:var(--display); font-weight:600; font-size:1rem; }
.mcard .ans{ font-size:.8rem; color:var(--text-muted); margin-top:4px; min-height:2.4em; }
.mcard ul{ list-style:none; padding:0; margin-top:12px; display:grid; gap:6px; }
.mcard li{ display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:.7rem; color:var(--text-muted); }
.mcard li svg{ width:13px;height:13px; color:var(--acc,var(--brand)); flex:0 0 auto; }
.mcard .go{ margin-top:12px; font-size:.82rem; }

/* multi-intent CTA row */
.cta3{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* built-for strip */
.builtfor{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.builtfor .bf{ font-family:var(--mono); font-size:.7rem; color:var(--text-muted);
  border:1px dashed var(--hairline-2); border-radius:100px; padding:.38em .8em; }
.on-ink .builtfor .bf{ color:var(--on-ink-muted); border-color:rgba(255,255,255,.2); }

/* see-it split section */
.seeit{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,52px); align-items:center; }
@media (max-width:900px){ .seeit{ grid-template-columns:1fr; gap:26px; } }
.seeit .txt h2{ margin-top:10px; }
.seeit .txt p{ margin-top:10px; font-size:1rem; }


/* =========================================================================
   v3.1 — illustration sizing + mobile swipe
   ========================================================================= */

/* 2. Illustrations are noticeably smaller on desktop */
.dash, .artifact, .receipt { max-width: 420px; margin-inline: auto; width: 100%; }
.dash-body { padding: 13px; gap: 10px; }
.panel { padding: 11px 12px; }
.panel .pv { font-size: 1.02rem; }
.term-body { padding: 13px 15px; font-size: .74rem; line-height: 1.65; }
.receipt-body { padding: 15px 17px; font-size: .75rem; line-height: 1.7; }
.receipt-head, .dash-head, .term-head { padding: 10px 13px; font-size: .64rem; }
.ring { width: 62px; height: 62px; }
.ring::before { width: 47px; height: 47px; }
.ring .rn { font-size: 1.05rem; }
.spark { height: 30px; }
.tline { gap: 11px; }
.artifact-cap { font-size: .62rem; margin-top: 8px; }
@media (min-width: 1240px){ .dash, .artifact, .receipt { max-width: 440px; } }
@media (max-width: 940px){ .dash, .artifact, .receipt { max-width: 460px; } }

/* 3. Mobile: card rows swipe right-to-left */
@media (max-width: 760px){
  .pgrid, .benefits, .outcomes, .mmx, .stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 12px;
    scroll-padding-left: 2px;
  }
  .pgrid::-webkit-scrollbar, .benefits::-webkit-scrollbar, .outcomes::-webkit-scrollbar,
  .mmx::-webkit-scrollbar, .stats::-webkit-scrollbar { display: none; }
  .pgrid > *, .benefits > *, .outcomes > *, .mmx > *, .stats > * {
    flex: 0 0 79%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .outcomes > * { flex-basis: 84%; }
  .stats > * { flex-basis: 62%; }
  /* swipe affordance */
  .swipe-hint {
    display: flex; align-items: center; gap: .5em;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint); margin-top: 10px;
  }
  .swipe-hint svg { width: 14px; height: 14px; animation: nudge 1.8s var(--ease) infinite; }
  @keyframes nudge { 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }
  .on-ink .swipe-hint { color: var(--on-ink-muted); }
}
@media (min-width: 761px){ .swipe-hint { display: none; } }
@media (prefers-reduced-motion: reduce){ .swipe-hint svg { animation: none; } }

/* mobile flow already stacks; keep it swipeable too for parity */
@media (max-width: 720px){
  .flow { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
  .flow::-webkit-scrollbar { display: none; }
  .flow .node { flex: 0 0 60%; scroll-snap-align: start; }
  .flow .arrow { flex: 0 0 22px; transform: none; height: auto; }
}


/* =========================================================================
   v4 — FINAL POLISH: animation, CTA hierarchy, interactive proof, journey
   ========================================================================= */

/* ---- 4. CTA HIERARCHY ---- */
.ctastack{ margin-top:20px; }
.ctastack .row1{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-lg{ padding:.95em 1.7em; font-size:1.04rem; }
.btn-secondary{
  background:transparent; color:var(--acc,var(--brand)); border:1.5px solid currentColor; font-weight:600;
}
.btn-secondary:hover{ background:var(--acc-t,var(--brand-tint)); }
.on-ink .btn-secondary, .cta .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.5); }
.on-ink .btn-secondary:hover, .cta .btn-secondary:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.tertiary{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.tertiary a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.74rem; color:var(--text-muted);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .18s var(--ease), border-color .18s var(--ease);
}
.tertiary a:hover{ color:var(--acc,var(--brand)); border-bottom-color:currentColor; }
.tertiary a svg{ width:14px;height:14px; }
.cta .tertiary{ justify-content:center; }
.cta .tertiary a{ color:var(--on-ink-muted); }
.cta .tertiary a:hover{ color:#fff; }

/* ---- 3. ANIMATED PIPELINE DIAGRAM ---- */
.pipe{ width:100%; max-width:440px; margin-inline:auto; display:block; }
.pipe .track{ stroke:var(--hairline-2); stroke-width:2; fill:none; }
.pipe .live{ stroke:var(--acc,var(--brand)); stroke-width:2.4; fill:none;
  stroke-dasharray:8 10; stroke-linecap:round; }
.pipe .nd{ fill:var(--surface); stroke:var(--hairline-2); stroke-width:1.6; }
.pipe .nd-on{ fill:var(--acc-t,var(--brand-tint)); stroke:var(--acc,var(--brand)); stroke-width:2; }
.pipe .lbl{ font-family:var(--mono); font-size:9.5px; fill:var(--text-muted); letter-spacing:.04em; }
.pipe .lbl-on{ fill:var(--acc,var(--brand)); font-weight:600; }
.pipe .ico{ stroke:var(--acc,var(--brand)); stroke-width:1.7; fill:none; }
.on-ink .pipe .track{ stroke:rgba(255,255,255,.18); }
.on-ink .pipe .nd{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.2); }
.on-ink .pipe .lbl{ fill:var(--on-ink-muted); }
.on-ink .pipe .live{ stroke:#8FB4EE; }
.on-ink .pipe .nd-on{ fill:rgba(143,180,238,.15); stroke:#8FB4EE; }
.on-ink .pipe .ico{ stroke:#8FB4EE; }

.pipe .live{ animation: flow 2.6s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-36; } }
.pipe .stage{ opacity:0; animation: pop .5s var(--ease) forwards; }
.pipe .stage:nth-child(1){ animation-delay:.05s }
.pipe .stage:nth-child(2){ animation-delay:.3s }
.pipe .stage:nth-child(3){ animation-delay:.55s }
.pipe .stage:nth-child(4){ animation-delay:.8s }
.pipe .stage:nth-child(5){ animation-delay:1.05s }
.pipe .stage:nth-child(6){ animation-delay:1.3s }
@keyframes pop{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .pipe .live{ animation:none; stroke-dasharray:none; }
  .pipe .stage{ opacity:1; animation:none; }
}

/* ---- 1. MORE PRODUCT VISUALS: gallery of UI panels ---- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; align-items:start; }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .gallery{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; gap:12px; padding-bottom:12px; }
  .gallery::-webkit-scrollbar{ display:none; }
  .gallery > *{ flex:0 0 82%; scroll-snap-align:start; min-width:0; }
}
.shot{ background:var(--ink); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-md); }
.shot .sh{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-ink-muted);
  display:flex; align-items:center; gap:7px; }
.shot .sh .dot{ width:6px;height:6px;border-radius:50%; background:var(--acc,#8FB4EE); }
.shot .sb{ padding:12px; font-family:var(--mono); font-size:.68rem; line-height:1.7; color:var(--on-ink); }
.shot .sb .k{ color:var(--on-ink-muted); }
.shot .sb .ok{ color:#6FB98F; } .shot .sb .wn{ color:#E0B341; } .shot .sb .bd{ color:#E2685A; }
.shot .sb .bl{ color:#8FB4EE; }
.shot-cap{ font-family:var(--mono); font-size:.6rem; color:var(--text-faint); margin-top:7px; text-align:center; }
.tree{ display:grid; gap:3px; }
.tree .t2{ padding-left:14px; } .tree .t3{ padding-left:28px; }
.meter{ height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:5px; }
.meter i{ display:block; height:100%; border-radius:3px; background:#6FB98F; width:var(--w,60%); }

/* ---- 6. INTERACTIVE EVIDENCE EXPLORER ---- */
.explorer{ max-width:460px; margin:20px auto 0; }
.exp-card{ background:var(--ink); border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  overflow:hidden; box-shadow:var(--shadow-lg); }
.exp-head{ padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; color:var(--on-ink-muted); }
.exp-body{ padding:15px 16px; font-family:var(--mono); font-size:.72rem; color:var(--on-ink); }
.exp-row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.exp-row .k{ color:var(--on-ink-muted); }
.exp-steps{ margin-top:13px; padding-top:13px; border-top:1px dashed rgba(255,255,255,.16); display:grid; gap:8px; }
.exp-step{ display:flex; align-items:center; gap:10px; font-size:.7rem; color:var(--on-ink-muted);
  opacity:.35; transition:opacity .3s var(--ease), color .3s var(--ease); }
.exp-step.done{ opacity:1; color:var(--on-ink); }
.exp-step .bx{ width:16px;height:16px;border-radius:4px; border:1.5px solid rgba(255,255,255,.25);
  display:grid; place-items:center; flex:0 0 auto; transition:border-color .3s var(--ease), background .3s var(--ease); }
.exp-step.done .bx{ border-color:#6FB98F; background:rgba(111,185,143,.18); }
.exp-step .bx svg{ width:10px;height:10px; stroke:#6FB98F; opacity:0; transition:opacity .3s var(--ease); }
.exp-step.done .bx svg{ opacity:1; }
.exp-step .sp{ margin-left:auto; font-size:.62rem; color:var(--text-faint); }
.exp-result{ margin-top:13px; padding:11px 13px; border-radius:9px; background:rgba(111,185,143,.12);
  border:1px solid rgba(111,185,143,.35); color:#6FB98F; font-size:.72rem;
  display:none; align-items:center; gap:9px; }
.exp-result.show{ display:flex; animation:pop .4s var(--ease); }
.exp-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.exp-note{ font-family:var(--mono); font-size:.62rem; color:var(--text-faint); text-align:center; margin-top:10px; }

/* ---- 7. CUSTOMER JOURNEY ---- */
.journey{ display:flex; align-items:stretch; margin-top:20px; overflow-x:auto; scrollbar-width:none; }
.journey::-webkit-scrollbar{ display:none; }
.jstep{ flex:1 1 0; min-width:118px; text-align:center; padding:15px 11px; position:relative;
  border:1px solid var(--hairline); background:var(--surface); }
.jstep:first-child{ border-radius:12px 0 0 12px; }
.jstep:last-child{ border-radius:0 12px 12px 0; }
.jstep + .jstep{ border-left:none; }
.jstep .jn{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; color:var(--brand-500); }
.jstep h4{ font-family:var(--display); font-size:.92rem; font-weight:600; margin-top:5px; }
.jstep p{ font-size:.74rem; margin-top:3px; color:var(--text-faint); line-height:1.4; }
.jstep.now{ background:var(--brand-tint); border-color:var(--brand-500); }
@media (max-width:760px){ .journey > *{ flex:0 0 46%; } }

/* ---- 9. ENGAGEMENT TIERS ---- */
.tiers{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:20px; }
@media (max-width:1000px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .tiers{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; gap:12px; padding-bottom:12px; } .tiers::-webkit-scrollbar{ display:none; }
  .tiers > *{ flex:0 0 76%; scroll-snap-align:start; } }
.tier{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); padding:18px 16px;
  display:flex; flex-direction:column; }
.tier.feat{ border-color:var(--brand); border-width:1.5px; box-shadow:var(--shadow-sm); }
.tier .tn{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); }
.tier h4{ font-family:var(--display); font-size:1.06rem; font-weight:600; margin-top:7px; }
.tier p{ font-size:.85rem; margin-top:7px; flex-grow:1; }
.tier .tw{ font-family:var(--mono); font-size:.65rem; color:var(--text-faint); margin-top:11px;
  padding-top:9px; border-top:1px solid var(--hairline); }

/* ---- 10. EXPANDED FOOTER ---- */
.footer-top{ grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:620px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-col a .ext{ width:11px;height:11px; opacity:.5; margin-left:4px; vertical-align:-1px; }
.social{ display:flex; gap:10px; margin-top:14px; }
.social a{ width:32px;height:32px; border:1px solid var(--hairline-2); border-radius:8px;
  display:grid; place-items:center; color:var(--text-muted); transition:color .18s var(--ease), border-color .18s var(--ease); }
.social a:hover{ color:var(--brand); border-color:var(--brand); }
.social svg{ width:15px;height:15px; }

/* trust-center specific */
.tc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media (max-width:900px){ .tc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .tc-grid{ grid-template-columns:1fr; } }
.tc{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); padding:20px 18px; }
.tc .tcic{ width:30px;height:30px; color:var(--brand); }
.tc h3{ font-size:1.04rem; margin-top:12px; }
.tc p{ font-size:.9rem; margin-top:7px; }
.tc .st{ font-family:var(--mono); font-size:.63rem; margin-top:11px; display:inline-flex; align-items:center; gap:.45em;
  padding:.3em .6em; border-radius:5px; background:var(--paper-2); color:var(--text-muted); border:1px solid var(--hairline-2); }

/* =========================================================================
   v5 — platform story, buyers, methodology, stage map
   ========================================================================= */

/* ---- Ideal buyers ---- */
.buyers{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.buyer{ display:inline-flex; align-items:center; gap:.5em; padding:.5em .85em;
  border:1px solid var(--hairline-2); border-radius:100px; background:var(--surface);
  font-size:.86rem; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.buyer svg{ width:14px;height:14px; color:var(--acc,var(--brand)); }
.on-ink .buyer{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#fff; }
.on-ink .buyer svg{ color:#8FB4EE; }

/* ---- Methodology checklist ---- */
.method{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; margin-top:18px; }
@media (max-width:680px){ .method{ grid-template-columns:1fr; } }
.mrow{ display:flex; gap:11px; align-items:flex-start; padding:14px 16px;
  border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface);
  border-left:3px solid var(--acc,var(--brand)); }
.mrow svg{ width:17px;height:17px; flex:0 0 auto; margin-top:2px; color:var(--acc,var(--brand)); }
.mrow b{ font-family:var(--display); font-weight:600; font-size:.97rem; display:block; }
.mrow span{ font-size:.87rem; color:var(--text-muted); display:block; margin-top:2px; }

/* ---- Stage map (products page: lifecycle → product) ---- */
.stagemap{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:22px; }
@media (max-width:980px){ .stagemap{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){
  .stagemap{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:12px; padding-bottom:12px; }
  .stagemap::-webkit-scrollbar{ display:none; }
  .stagemap > *{ flex:0 0 68%; scroll-snap-align:start; }
}
.smcol{ text-align:center; }
.smstage{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); padding:9px 6px; border:1px dashed var(--hairline-2); border-radius:8px;
  background:var(--paper-2); }
.smarrow{ display:grid; place-items:center; height:22px; color:var(--hairline-2); }
.smarrow svg{ width:16px;height:16px; }
.smprod{ display:block; border:1px solid var(--hairline); border-top:3px solid var(--acc,var(--brand));
  border-radius:var(--radius-sm); background:var(--surface); padding:14px 12px;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease); }
.smprod:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.smprod h4{ font-family:var(--display); font-weight:600; font-size:.98rem; }
.smprod p{ font-size:.78rem; margin-top:4px; color:var(--text-muted); line-height:1.45; }

/* ---- Platform stages (platform.html) ---- */
.pstages{ display:grid; gap:12px; margin-top:22px; }
.pstage{ display:grid; grid-template-columns:88px 1fr 210px; gap:20px; align-items:center;
  border:1px solid var(--hairline); border-left:4px solid var(--acc,var(--brand));
  border-radius:var(--radius); background:var(--surface); padding:18px 20px; }
@media (max-width:820px){ .pstage{ grid-template-columns:1fr; gap:10px; } }
.pstage .pnum{ font-family:var(--display); font-weight:600; font-size:1.9rem; color:var(--acc,var(--brand));
  line-height:1; letter-spacing:-0.04em; }
.pstage .pnum small{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint); margin-top:5px; font-weight:400; }
.pstage h3{ font-size:1.14rem; }
.pstage .q{ font-size:.93rem; color:var(--text-muted); margin-top:5px; }
.pstage .plink{ display:block; border:1px solid var(--hairline-2); border-radius:9px; padding:11px 13px;
  background:var(--paper-2); transition:border-color .2s var(--ease), background .2s var(--ease); }
.pstage .plink:hover{ border-color:var(--acc,var(--brand)); background:var(--acc-t,var(--brand-tint)); }
.pstage .plink b{ font-family:var(--display); font-weight:600; font-size:.95rem; display:block; color:var(--text); }
.pstage .plink span{ font-family:var(--mono); font-size:.66rem; color:var(--text-faint); }

/* adoption path */
.adopt{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media (max-width:820px){ .adopt{ grid-template-columns:1fr; } }
.acard{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); padding:20px 18px; }
.acard .an{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); }
.acard h3{ font-size:1.06rem; margin-top:8px; }
.acard p{ font-size:.9rem; margin-top:7px; }
.acard .chain{ font-family:var(--mono); font-size:.68rem; color:var(--text-faint); margin-top:11px;
  padding-top:9px; border-top:1px solid var(--hairline); }

/* =========================================================================
   v6 — evidence chain, scenarios, recurring widget system
   ========================================================================= */

/* =========================================================================
   WORKFLOW COMPONENT SYSTEM — ProductCard · WorkflowConnector · WorkflowContainer
   Rebuilt per spec: fixed-size cards, dominant connector, staged handoff
   animation, explicit hierarchy, three distinct responsive layouts.
   ========================================================================= */

.wf-wrap{ margin-top:16px; }

/* ---- WorkflowContainer ---- */
.wf-container{
  display:flex; align-items:center; justify-content:space-between;
  gap:0; width:100%;
}

/* ---- ProductCard: fixed dimensions, content adapts inside ---- */
.wf-card{
  flex:0 0 auto;
  width:200px; height:210px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-sm);
  padding:20px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  text-decoration:none;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  cursor:pointer;
}
.wf-card::before{
  content:""; position:absolute; top:0; left:14px; right:14px; height:3px; border-radius:0 0 3px 3px;
  background:var(--acc,var(--brand));
}
.wf-card .wf-stage{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint);
}
.wf-card .wf-icon{
  width:36px; height:36px; border-radius:10px; background:var(--acc-t,var(--brand-tint));
  color:var(--acc,var(--brand)); display:grid; place-items:center; margin:10px 0;
}
.wf-card .wf-icon svg{ width:19px;height:19px; }
.wf-card h4{
  font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.15;
}
.wf-card p{
  font-size:.76rem; color:var(--text-muted); margin-top:5px; line-height:1.4;
}
.wf-card .wf-cta{
  font-family:var(--mono); font-size:.68rem; color:var(--acc,var(--brand)); font-weight:600;
  margin-top:9px; opacity:0; transform:translateY(3px);
  transition:opacity .22s ease, transform .22s ease;
}

/* hover: elevation + tint + CTA reveal — never a layout shift */
.wf-card:hover, .wf-card:focus-visible{
  transform:translateY(-5px) scale(1.02);
  box-shadow:var(--shadow-lg);
  border-color:var(--acc,var(--brand));
  background:var(--acc-t,var(--brand-tint));
}
.wf-card:hover .wf-cta, .wf-card:focus-visible .wf-cta{ opacity:1; transform:none; }

/* hierarchy: start (Build) and end (Optimize) get emphasis — size via inner scale, footprint stays fixed */
.wf-card.wf-anchor{ width:216px; height:222px; }
.wf-card.wf-anchor h4{ font-size:1.12rem; }
.wf-card.wf-anchor .wf-icon{ width:42px; height:42px; }
.wf-card.wf-anchor .wf-icon svg{ width:22px;height:22px; }
.wf-card.wf-anchor .wf-stage{ font-weight:600; }

/* active (animated) state */
.wf-card.wf-active{
  border-color:var(--acc,var(--brand));
  box-shadow:0 0 0 3px var(--acc-t,var(--brand-tint)), var(--shadow-md);
}
.wf-card.wf-active .wf-icon{ background:var(--acc,var(--brand)); color:#fff; }

/* ---- WorkflowConnector: the dominant element ---- */
.wf-link{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:34px; padding:0 4px; align-self:center;
}
.wf-track{
  width:100%; height:2px; background:var(--hairline-2); border-radius:2px; position:relative; overflow:hidden;
}
.wf-track .wf-pulse{
  position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, var(--acc,var(--brand)), transparent);
}
.wf-link.wf-run .wf-pulse{ animation: wfpulse 2s ease-in-out infinite; }
@keyframes wfpulse{ 0%{ left:-30%; } 100%{ left:100%; } }
.wf-caption{
  font-family:var(--body); font-size:12.5px; font-weight:500; color:var(--text-muted);
  text-align:center; margin-top:9px; line-height:1.35; max-width:150px;
}
.on-ink .wf-track{ background:rgba(255,255,255,.16); }
.on-ink .wf-caption{ color:var(--on-ink-muted); }
.on-ink .wf-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.on-ink .wf-card h4{ color:#fff; }
.on-ink .wf-card:hover{ background:rgba(255,255,255,.07); }

@media (prefers-reduced-motion: reduce){ .wf-link.wf-run .wf-pulse{ animation:none; left:0; width:100%; opacity:.5; } }

/* ---- Tablet: two rows, 3 + 2, connector still visible within/between rows ---- */
@media (max-width:1080px) and (min-width:761px){
  .wf-container{ flex-wrap:wrap; row-gap:28px; }
  .wf-container .wf-row1{ display:contents; }
  .wf-link.wf-break{ flex-basis:100%; height:0; margin:0; }
  .wf-link.wf-break .wf-track{ display:none; }
  .wf-link.wf-break::after{
    content:""; display:block; width:100%; height:0;
  }
}

/* ---- Mobile: vertical timeline, never horizontal scroll ---- */
@media (max-width:760px){
  .wf-container{ flex-direction:column; align-items:stretch; gap:0; }
  .wf-card{ width:100%; max-width:none; height:auto; min-height:108px;
    flex-direction:row; text-align:left; justify-content:flex-start; padding:16px 18px; gap:14px; }
  .wf-card.wf-anchor{ width:100%; height:auto; min-height:118px; }
  .wf-card::before{ top:14px; left:0; bottom:14px; right:auto; width:3px; height:auto; border-radius:3px 0 0 3px; }
  .wf-card .wf-icon{ margin:0; flex:0 0 auto; }
  .wf-card .wf-txt{ text-align:left; }
  .wf-card .wf-cta{ opacity:1; transform:none; margin-top:6px; }
  .wf-card:hover{ transform:none; }
  .wf-link{ flex-direction:row; align-self:center; margin:0; padding:10px 0; width:100%; }
  .wf-track{ width:2px; height:30px; }
  .wf-caption{ margin-top:0; margin-left:14px; text-align:left; max-width:none; }
}


/* ---- 3. CUSTOMER SCENARIO ---- */
.scenario{ display:grid; gap:10px; margin-top:22px; counter-reset:sc; }
.scstep{ display:grid; grid-template-columns:44px 1fr 168px; gap:18px; align-items:center;
  border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); padding:15px 18px;
  border-left:4px solid var(--acc,var(--brand)); }
@media (max-width:760px){ .scstep{ grid-template-columns:36px 1fr; gap:12px; } .scstep .scprod{ grid-column:2; } }
.scstep .scn{ font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--acc,var(--brand)); letter-spacing:-0.03em; }
.scstep h4{ font-family:var(--display); font-size:1.02rem; font-weight:600; }
.scstep p{ font-size:.89rem; margin-top:3px; }
.scstep .scprod{ font-family:var(--mono); font-size:.68rem; text-align:right; }
@media (max-width:760px){ .scstep .scprod{ text-align:left; } }
.scstep .scprod b{ display:block; font-family:var(--display); font-size:.88rem; color:var(--acc,var(--brand)); }
.scstep .scprod span{ color:var(--text-faint); }
.schand{ font-family:var(--mono); font-size:.62rem; color:var(--text-faint);
  display:flex; align-items:center; gap:.5em; padding-left:62px; }
@media (max-width:760px){ .schand{ padding-left:48px; } }
.schand svg{ width:12px;height:12px; }
.schand code{ color:var(--brand-500); font-family:var(--mono); }

/* ---- 5. RECURRING WIDGET SYSTEM (same three widgets on every product) ---- */
.widgetrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; align-items:start; }
@media (max-width:900px){ .widgetrow{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .widgetrow{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:12px; padding-bottom:12px; }
  .widgetrow::-webkit-scrollbar{ display:none; }
  .widgetrow > *{ flex:0 0 82%; scroll-snap-align:start; min-width:0; }
}
.wcard{ background:var(--ink); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-md); }
.wcard .wh{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-ink-muted); display:flex; align-items:center; gap:7px; }
.wcard .wh .wd{ width:6px;height:6px;border-radius:50%; background:var(--acc,#8FB4EE); }
.wcard .wb{ padding:12px; font-family:var(--mono); font-size:.68rem; line-height:1.7; color:var(--on-ink); }
.wcard .wb .k{ color:var(--on-ink-muted); }
.wcard .wb .ok{ color:#6FB98F; } .wcard .wb .wn{ color:#E0B341; } .wcard .wb .bd{ color:#E2685A; }
.wcard .wb .bl{ color:#8FB4EE; }
.wrow{ display:flex; justify-content:space-between; gap:10px; }
.wscore{ display:flex; align-items:center; gap:12px; }
.wring{ width:54px;height:54px;border-radius:50%; position:relative; flex:0 0 auto; display:grid; place-items:center;
  background:conic-gradient(#6FB98F calc(var(--val,80)*1%), rgba(255,255,255,.1) 0); }
.wring::before{ content:""; position:absolute; width:41px;height:41px;border-radius:50%; background:var(--ink); }
.wring b{ position:relative; font-family:var(--display); font-size:.95rem; color:#fff; }
.wmeter{ height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:4px; }
.wmeter i{ display:block; height:100%; border-radius:3px; background:#6FB98F; width:var(--w,60%); }
.wtl{ position:relative; padding-left:17px; display:grid; gap:7px; }
.wtl::before{ content:""; position:absolute; left:4px; top:5px; bottom:5px; width:1.5px; background:rgba(255,255,255,.14); }
.wtev{ position:relative; }
.wtev::before{ content:""; position:absolute; left:-16px; top:4px; width:7px;height:7px;border-radius:50%;
  background:#8FB4EE; border:1.5px solid var(--ink); }
.wtev.g::before{ background:#6FB98F; } .wtev.a::before{ background:#E0B341; } .wtev.r::before{ background:#E2685A; }
.wtev span{ color:var(--on-ink-muted); font-size:.62rem; }
.wtev div{ color:#fff; font-size:.68rem; }

/* ---- 4. Credibility roadmap (honest social-proof scaffolding) ---- */
.credgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
@media (max-width:760px){ .credgrid{ grid-template-columns:1fr; } }
.cred{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius-sm);
  border:1px dashed var(--hairline-2); background:var(--paper-2); }
.cred .cst{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.28em .5em; border-radius:4px; flex:0 0 auto; margin-top:2px; }
.cred .cst.now{ background:var(--verified-bg); color:var(--verified); border:1px solid var(--verified); }
.cred .cst.later{ background:var(--unknown-bg); color:var(--unknown); border:1px solid var(--unknown); }
.cred b{ font-family:var(--display); font-size:.96rem; display:block; }
.cred p{ font-size:.87rem; margin-top:3px; }

/* ---- Case studies (illustrative, clearly labelled) ---- */
.casegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
@media (max-width:820px){ .casegrid{ grid-template-columns:1fr; } }
.case{ border:1px solid var(--hairline); border-top:3px solid var(--acc,var(--brand)); border-radius:var(--radius);
  background:var(--surface); padding:22px 22px 20px; }
.case .ctag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--unknown); background:var(--unknown-bg); border:1px solid var(--unknown); border-radius:4px;
  padding:.28em .55em; display:inline-flex; align-items:center; gap:.4em; }
.case h3{ font-size:1.1rem; margin-top:12px; }
.case .csetup{ font-size:.88rem; color:var(--text-muted); margin-top:8px; }
.case .cflow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; align-items:center; }
.case .cflow span{ font-family:var(--mono); font-size:.68rem; color:var(--text-muted);
  background:var(--paper-2); border:1px solid var(--hairline-2); border-radius:5px; padding:.3em .55em; }
.case .cflow svg{ width:12px;height:12px; color:var(--text-faint); }
.case .cout{ margin-top:13px; padding-top:12px; border-top:1px solid var(--hairline); font-size:.86rem; }
.case .cout b{ color:var(--acc,var(--brand)); }