/* ============================================================
   InferenceView: shared design system
   Dark (warm near-black) adaptation of the Intelix Systems
   editorial language: serif display, mono eyebrows, hairline
   rules, generous negative space, crimson accent.
   ============================================================ */

:root{
  --bg:        oklch(11% .006 55);
  --bg-2:      oklch(14% .007 55);
  --fg:        oklch(95% .005 85);
  --fg-2:      oklch(64% .012 75);
  --accent:    oklch(66% .15 22);
  --accent-dim:oklch(66% .15 22 / .45);
  --line:      oklch(95% .005 85 / .14);
  --line-2:    oklch(95% .005 85 / .28);
  --ghost:     oklch(95% .005 85 / .04);

  --maxw: 1400px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;}
::selection{background:var(--accent);color:oklch(98% .004 85);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media(min-width:768px){.wrap{padding:0 32px;}}
.mono{font-family:var(--mono);}
.serif{font-family:var(--display);}
.acc{color:var(--accent);}
em.acc,.i{font-style:italic;color:var(--accent);}

/* ---------------- eyebrow / kicker ---------------- */
.kick{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--fg-2);
}
.kick .rule{height:1px;width:30px;background:var(--line-2);flex:none;}
.kick .n{color:var(--accent);}
.lbl{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fg-2);
}
.lbl.acc{color:var(--accent);}

/* ---------------- nav ---------------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;}
@media(min-width:768px){header.site .wrap{padding:20px 32px;}}
.logo{display:flex;align-items:center;gap:11px;height:22px;}
.logo svg{display:block;height:100%;width:auto;}
.logo .word{display:flex;align-items:baseline;gap:6px;line-height:1;}
.logo .n1{font-family:var(--display);font-size:18px;letter-spacing:-.01em;}
.logo .n2{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--fg-2);}
nav.links{display:none;gap:22px;font-size:13px;color:var(--fg-2);}
nav.links a{transition:color .18s ease;}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--fg);}
@media(min-width:940px){nav.links{display:flex;}}
.arrlink{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap;}
.arrlink svg{height:13px;width:13px;transition:transform .18s ease;}
.arrlink:hover svg{transform:translate(2px,-2px);}
.arrlink.cta{color:var(--accent);}

/* ---------------- hero ---------------- */
.hero{padding:132px 0 0;}
@media(min-width:768px){.hero{padding:190px 0 0;}}
h1.hero-h1{
  font-family:var(--display);font-weight:300;font-size:clamp(40px,9.2vw,104px);
  line-height:.98;letter-spacing:-.025em;max-width:17ch;
}
h1.hero-h1 .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;}
h1.hero-h1 .line > span{display:inline-block;transform:translateY(110%);animation:lineIn .85s var(--ease) forwards;}
h1.hero-h1 .line:nth-child(2) > span{animation-delay:.10s;}
h1.hero-h1 .line:nth-child(3) > span{animation-delay:.18s;}
h1.hero-h1 em{font-style:italic;color:var(--accent);}
@keyframes lineIn{to{transform:translateY(0);}}
.hero .kick{margin-bottom:34px;}
.hero-grid{margin-top:56px;display:grid;gap:40px;border-top:1px solid var(--line);padding-top:36px;}
@media(min-width:768px){.hero-grid{grid-template-columns:repeat(12,1fr);gap:48px;margin-top:64px;}}
.hero-grid .lede{font-size:17px;line-height:1.62;color:color-mix(in oklab, var(--fg) 80%, transparent);}
@media(min-width:768px){.hero-grid .lede{grid-column:1/7;font-size:18.5px;}}
.hero-side{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;}
@media(min-width:768px){.hero-side{grid-column:8/13;}}
.hero-side ul{list-style:none;padding:0;margin:0;font-size:14.5px;}
.hero-side li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline;}
.hero-side li:last-child{border-bottom:0;}
.hero-side li i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--accent);flex:none;}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);}
.rv.on{opacity:1;transform:none;}
.d1{transition-delay:.07s;}.d2{transition-delay:.14s;}
.d3{transition-delay:.21s;}.d4{transition-delay:.28s;}.d5{transition-delay:.35s;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  h1.hero-h1 .line > span{animation:none;transform:none;}
}

/* ---------------- blocks ---------------- */
.block{padding:88px 0;border-top:1px solid var(--line);}
@media(min-width:768px){.block{padding:118px 0;}}
.block-head{display:grid;gap:22px;margin-bottom:52px;}
@media(min-width:900px){
  .block-head{grid-template-columns:7fr 5fr;gap:56px;align-items:end;}
}
/* stack: full-width title, subtitle (if any) below rather than beside.
   Use when the heading is too wide for the 7fr column at its scale. */
@media(min-width:900px){
  .block-head.stack{grid-template-columns:1fr;align-items:start;}
}
/* center: implies stack, and centers everything in it. Use for a
   heading with no subtitle sitting beside it. */
.block-head.center{text-align:center;}
@media(min-width:900px){.block-head.center{grid-template-columns:1fr;}}
.block-head.center .block-title{margin-left:auto;margin-right:auto;}
.block-title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(29px,4.4vw,52px);line-height:1.04;letter-spacing:-.02em;max-width:24ch;
}
.block-title em{font-style:italic;color:var(--accent);}
.block-sub{font-size:15.5px;line-height:1.62;color:color-mix(in oklab, var(--fg) 74%, transparent);max-width:46ch;}
/* serif: the display italic treatment for a subtitle that needs to
   read as a considered statement, not a caption. */
.block-sub.serif{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(18px,1.9vw,23px);line-height:1.5;letter-spacing:-.005em;
  color:color-mix(in oklab, var(--fg) 84%, transparent);
  max-width:62ch;margin-top:18px;
}

/* statement: big pull line */
.statement{padding:92px 0;border-top:1px solid var(--line);}
@media(min-width:768px){.statement{padding:130px 0;}}
.statement p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3.9vw,46px);line-height:1.2;letter-spacing:-.015em;max-width:34ch;
}
.statement p em{font-style:italic;color:var(--accent);}
.statement .after{
  margin-top:34px;font-size:15px;line-height:1.65;
  color:color-mix(in oklab, var(--fg) 72%, transparent);max-width:56ch;
}

/* ---------------- metrics band ---------------- */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.metrics .wrap{display:grid;grid-template-columns:1fr;}
@media(min-width:700px){.metrics .wrap{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1050px){.metrics .wrap{grid-template-columns:repeat(4,1fr);}}
.metric{padding:44px 0;border-top:1px solid var(--line);}
.metrics .metric:first-child{border-top:none;}
@media(min-width:700px){
  .metric{padding:54px 34px 50px 0;border-top:none;}
  .metric+.metric{border-left:1px solid var(--line);padding-left:34px;}
}
@media(min-width:700px) and (max-width:1049px){
  .metric:nth-child(3){border-top:1px solid var(--line);}
  .metric:nth-child(4){border-top:1px solid var(--line);}
  .metric:nth-child(odd){border-left:none;padding-left:0;}
}
.metric .n{
  font-family:var(--display);font-weight:300;font-size:clamp(42px,5.6vw,62px);
  line-height:.92;letter-spacing:-.025em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.metric .l{margin-top:15px;font-size:14px;line-height:1.52;
  color:color-mix(in oklab, var(--fg) 74%, transparent);max-width:27ch;}
.metric .l strong{color:var(--fg);font-weight:500;}
.metric .src{margin-top:12px;font-family:var(--mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2);}

/* ---------------- split / seam (two-sided argument) ---------------- */
.split{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);}
@media(min-width:900px){.split{grid-template-columns:1fr 1px 1fr;}}
.split .pane{padding:34px 0;}
@media(min-width:900px){
  .split .pane{padding:38px 44px 38px 0;}
  .split .pane.r{padding:38px 0 38px 44px;}
}
.split .pane+.pane{border-top:1px solid var(--line);}
@media(min-width:900px){.split .pane+.pane{border-top:none;}}
.split .vline{display:none;background:var(--line);}
@media(min-width:900px){.split .vline{display:block;}}
.chip{
  display:inline-block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-2);border:1px solid var(--line);padding:6px 11px;margin-bottom:20px;
}
.pane .pt{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.7vw,29px);line-height:1.14;}
.pane .pt em{font-style:italic;color:var(--accent);}
.pane .pd{margin-top:12px;font-size:14.5px;line-height:1.58;
  color:color-mix(in oklab, var(--fg) 72%, transparent);max-width:42ch;}

/* ---------------- three-up cards (the gap, products) ---------------- */
.trio{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr);}}
.trio .cell{padding:40px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:15px;}
.trio .cell:first-child{border-top:none;}
@media(min-width:900px){
  /* every cell carries the same horizontal padding so all three text
     measures are identical; the divider sits centred in the resulting
     gutter. Previously the edge cells had padding on one side only,
     which made them ~35px wider than the middle cell. */
  .trio .cell{padding:44px 28px 46px;border-top:none;}
  .trio .cell+.cell{border-left:1px solid var(--line);}
}
.trio .cell .tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);}
.trio .cell h3{font-family:var(--display);font-weight:300;font-size:26px;line-height:1.12;}
.trio .cell h3 em{font-style:italic;color:var(--accent);}
.trio .cell p{font-size:14px;line-height:1.58;color:color-mix(in oklab, var(--fg) 72%, transparent);}
.trio .cell .miss{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:7px;}
.trio .cell .miss span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);display:flex;gap:9px;align-items:center;}
.trio .cell .miss span::before{content:"";width:8px;height:1px;background:var(--accent);flex:none;}

/* ---------------- vs (payment vs service assurance) ---------------- */
.vs{display:grid;grid-template-columns:1fr;border:1px solid var(--line);}
@media(min-width:760px){.vs{grid-template-columns:1fr 1fr;}}
.vs .c{padding:26px 28px;display:flex;flex-direction:column;gap:10px;}
.vs .c+.c{border-top:1px solid var(--line);}
@media(min-width:760px){.vs .c+.c{border-top:none;border-left:1px solid var(--line);}}
.vs .c.hi{background:var(--ghost);}
.vs .c .t{font-family:var(--display);font-size:21px;font-weight:300;}
.vs .c.hi .t{color:var(--accent);}
.vs .c .s{font-size:13.5px;line-height:1.5;color:color-mix(in oklab, var(--fg) 70%, transparent);}

/* ---------------- comparison table (settlement -> assurance) ---------------- */
.tbl{border-top:1px solid var(--line);}
.tbl .hd,.tbl .row{display:grid;grid-template-columns:1fr;}
@media(min-width:760px){.tbl .hd,.tbl .row{grid-template-columns:1fr 1fr;}}
.tbl .hd > div{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--fg-2);padding:12px 26px 12px 0;}
.tbl .hd > div+div{color:var(--accent);}
@media(min-width:760px){.tbl .hd > div+div{padding-left:26px;}}
.tbl .row{border-top:1px solid var(--line);}
.tbl .row > div{padding:14px 26px 14px 0;font-size:14.5px;line-height:1.42;
  color:color-mix(in oklab, var(--fg) 68%, transparent);}
.tbl .row > div+div{color:var(--fg);background:var(--ghost);}
@media(min-width:760px){.tbl .row > div+div{padding-left:26px;}}
.tbl .row > div+div b{font-weight:500;color:var(--accent);}

/* ---------------- flow / chain of intent ---------------- */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  border-top:1px solid var(--line);padding-top:32px;margin-top:8px;}
.flow .rl{font-family:var(--sans);font-weight:500;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fg-2);margin-right:16px;}
.ftag{font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  border:1px solid var(--line-2);padding:11px 17px;color:color-mix(in oklab, var(--fg) 78%, transparent);
  white-space:nowrap;transition:border-color .25s ease,color .25s ease,background-color .25s ease,transform .25s ease;}
.ftag.sep{border:none;padding:0 1px;color:var(--fg-2);font-size:13px;}
/* the two destination nodes (Verdict, Receipt): filled, not just
   outlined, so the chain visibly arrives somewhere */
.ftag.hi{background:var(--accent);border-color:var(--accent);color:oklch(98% .004 85);font-weight:500;}
@media(hover:hover){
  .ftag:not(.sep):hover{border-color:var(--accent);color:var(--fg);transform:translateY(-2px);}
  .ftag.hi:hover{background:oklch(98% .004 85);border-color:oklch(98% .004 85);color:var(--accent);}
}

/* ---------------- steps (the method) ---------------- */
.steps{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
@media(min-width:800px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1150px){.steps{grid-template-columns:repeat(4,1fr);}}
.steps .st{padding:36px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.steps .st:first-child{border-top:none;}
@media(min-width:800px){
  /* 2-up: uniform padding, divider only between columns */
  .steps .st{padding:38px 28px 40px;border-top:none;}
  .steps .st:nth-child(2n){border-left:1px solid var(--line);}
  .steps .st:nth-child(2n+1){border-left:none;}
  .steps .st:nth-child(-n+2){border-top:none;}
  .steps .st:nth-child(n+3){border-top:1px solid var(--line);}
}
@media(min-width:1150px){
  /* 4-up: single row, divider on everything but the first */
  .steps .st:nth-child(n+2){border-left:1px solid var(--line);}
  .steps .st:nth-child(1){border-left:none;}
  .steps .st:nth-child(n){border-top:none;}
}
.steps .st .when{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);}
.steps .st h3{font-family:var(--display);font-weight:300;font-size:23px;line-height:1.14;}
.steps .st p{font-size:13.5px;line-height:1.55;color:color-mix(in oklab, var(--fg) 70%, transparent);}
.steps .st ul{list-style:none;padding:0;margin-top:auto;padding-top:14px;
  display:flex;flex-direction:column;gap:6px;}
.steps .st li{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-2);}

/* ---------------- quote ---------------- */
.quote{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;}
.quote .bar{width:1px;background:var(--accent);align-self:stretch;}
.quote q{
  display:block;font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(21px,2.8vw,32px);line-height:1.22;quotes:"“" "”";
}
.quote q b{font-style:italic;font-weight:300;color:var(--accent);}
.quote .attr{margin-top:18px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--fg-2);line-height:1.7;}

/* ---------------- band (labelled note row) ---------------- */
.band{display:grid;grid-template-columns:1fr;gap:10px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:22px;}
@media(min-width:700px){.band{grid-template-columns:150px 1fr;gap:26px;}}
.band .bk{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);padding-top:3px;}
.band p{font-size:14px;line-height:1.6;color:color-mix(in oklab, var(--fg) 74%, transparent);max-width:76ch;}
.band p b{font-weight:500;color:var(--fg);}

/* ---------------- feature panel (product spotlight) ---------------- */
.feature{display:grid;gap:40px;border:1px solid var(--accent);padding:36px 26px;}
@media(min-width:768px){.feature{padding:44px 40px;}}
@media(min-width:1000px){.feature{grid-template-columns:7fr 5fr;gap:56px;align-items:center;}}
.feature .ftag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin-bottom:16px;}
.feature h3{font-family:var(--display);font-weight:300;
  font-size:clamp(28px,4vw,46px);line-height:1.04;letter-spacing:-.015em;}
.feature h3 em{font-style:italic;color:var(--accent);}
.feature .fdesc{margin-top:16px;font-size:15px;line-height:1.62;
  color:color-mix(in oklab, var(--fg) 74%, transparent);max-width:52ch;}
.spec{border:1px solid var(--line);}
.spec .sk{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);padding:18px 20px 12px;}
.spec .srow{display:flex;justify-content:space-between;gap:16px;
  padding:11px 20px;border-top:1px solid var(--line);font-size:13px;}
.spec .srow .k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg-2);padding-top:2px;}
.spec .srow .v{text-align:right;color:color-mix(in oklab, var(--fg) 84%, transparent);}
.spec .srow .v.acc{color:var(--accent);font-weight:500;}

/* ---------------- cap rows (definition list) ---------------- */
.cap{display:grid;grid-template-columns:1fr;gap:7px;padding:20px 0;border-top:1px solid var(--line);}
@media(min-width:640px){.cap{grid-template-columns:170px 1fr;gap:30px;}}
.cap .cl{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);padding-top:3px;}
.cap p{font-size:14.5px;line-height:1.6;color:color-mix(in oklab, var(--fg) 74%, transparent);max-width:56ch;}
.cap p strong{color:var(--fg);font-weight:500;}

/* ---------------- tags ---------------- */
.tags{display:flex;flex-wrap:wrap;gap:9px;}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  border:1px solid var(--line);padding:8px 12px;color:color-mix(in oklab, var(--fg) 74%, transparent);}
.tag b{color:var(--fg);font-weight:500;}
.tag i{font-style:normal;color:var(--fg-2);}
.tag.hi{border-color:var(--accent);color:var(--accent);}

/* ---------------- contact / CTA ---------------- */
.cta-block{padding:92px 0 100px;border-top:1px solid var(--line);}
.cta-h{font-family:var(--display);font-weight:300;
  font-size:clamp(30px,5.2vw,60px);line-height:1.02;letter-spacing:-.025em;max-width:22ch;}
.cta-h em{font-style:italic;color:var(--accent);}
.cta-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:38px;align-items:center;}
/* primary action: filled accent with white type; inverts on hover.
   `background` is set explicitly so <button> never shows the UA buttonface. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid var(--accent);background:var(--accent);color:oklch(98% .004 85);
  padding:14px 22px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover,.btn:focus-visible{background:oklch(98% .004 85);color:var(--accent);border-color:oklch(98% .004 85);}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--fg);}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg);}

/* ---------------- footer ---------------- */
footer.site{border-top:1px solid var(--line);padding:56px 0 64px;}
footer.site .wrap{display:grid;gap:36px;}
@media(min-width:860px){footer.site .wrap{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}}
footer.site .fcol h4{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fg-2);margin-bottom:16px;font-weight:400;}
footer.site .fcol a{display:block;font-size:13.5px;padding:5px 0;
  color:color-mix(in oklab, var(--fg) 74%, transparent);transition:color .18s ease;}
footer.site .fcol a:hover{color:var(--accent);}
footer.site .fnote{font-size:13px;line-height:1.6;
  color:color-mix(in oklab, var(--fg) 62%, transparent);max-width:36ch;margin-top:14px;}
footer.site .legal{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2);}

/* ---------------- utilities ---------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.src{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-2);line-height:1.7;}
.mt-s{margin-top:20px;}.mt-m{margin-top:34px;}.mt-l{margin-top:52px;}

/* ============================================================
   Lead modal + toast: markup is generated by /app/ui.js
   (openLeadModal posts into the Intelix CRM). These styles keep
   that existing funnel working inside the new dark system.
   Class names must stay in sync with app/ui.js.
   ============================================================ */
.modal-root{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;}
.modal-root .scrim{position:absolute;inset:0;
  background:oklch(6% .004 55 / .78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.modal-card{position:relative;z-index:1;width:100%;max-width:520px;
  background:var(--bg-2);border:1px solid var(--line-2);padding:34px 30px 30px;
  max-height:88vh;overflow-y:auto;
  animation:modalIn .34s var(--ease);}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.modal-card{animation:none;}}
.modal-x{position:absolute;top:14px;right:14px;all:unset;cursor:pointer;
  font-family:var(--mono);font-size:13px;color:var(--fg-2);padding:6px 9px;line-height:1;
  transition:color .18s ease;}
.modal-x:hover{color:var(--accent);}
.modal-card .eyebrow{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin-bottom:14px;}
.modal-title{font-family:var(--display);font-weight:300;font-size:29px;line-height:1.08;
  letter-spacing:-.015em;margin-bottom:12px;}
.modal-blurb{font-size:14px;line-height:1.6;
  color:color-mix(in oklab, var(--fg) 72%, transparent);margin-bottom:24px;}

.lead-form{display:flex;flex-direction:column;gap:16px;}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld > span{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--fg-2);}
.fld input,.fld textarea{
  font-family:var(--sans);font-size:14.5px;color:var(--fg);
  background:transparent;border:1px solid var(--line);padding:11px 13px;
  transition:border-color .18s ease;width:100%;resize:vertical;
}
.fld input::placeholder,.fld textarea::placeholder{color:color-mix(in oklab, var(--fg) 34%, transparent);}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;}
.lead-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:6px;}
.lead-note{font-size:11.5px;line-height:1.5;color:var(--fg-2);max-width:26ch;}

/* the generated buttons reuse .btn / .btn-primary / .btn-ghost */
.btn-primary{border:1px solid var(--accent);background:var(--accent);
  color:oklch(98% .004 85);font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;padding:13px 20px;cursor:pointer;
  transition:opacity .18s ease;}
.btn-primary:hover{opacity:.85;}
.btn-primary:disabled{opacity:.5;cursor:default;}
.btn-ghost{border:1px solid var(--line-2);background:transparent;color:var(--fg);
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  padding:13px 20px;cursor:pointer;transition:background .18s ease,color .18s ease;}
.btn-ghost:hover{background:var(--fg);color:var(--bg);}
button.btn{cursor:pointer;font-family:var(--mono);}

.lead-done{text-align:center;padding:16px 0 6px;}
.lead-done-mark{font-size:26px;color:var(--accent);margin-bottom:14px;}
.lead-done h3{font-family:var(--display);font-weight:300;font-size:26px;margin-bottom:10px;}
.lead-done p{font-size:14px;line-height:1.6;
  color:color-mix(in oklab, var(--fg) 72%, transparent);margin-bottom:22px;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--bg-2);border:1px solid var(--line-2);padding:14px 18px;
  font-size:13.5px;color:var(--fg);display:flex;align-items:center;gap:16px;
  max-width:calc(100vw - 48px);animation:toastIn .3s var(--ease);}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;}}
.toast-act{all:unset;cursor:pointer;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent);}

/* big stat inside a trio cell (precedent metrics) */
.bignum{font-family:var(--display);font-weight:300;font-size:clamp(40px,5vw,54px);
  line-height:.92;letter-spacing:-.025em;color:var(--accent);font-variant-numeric:tabular-nums;}
.trio .cell p strong{color:var(--fg);font-weight:500;}
.trio .cell .miss span a{color:var(--accent);}
.trio .cell .miss span a:hover{opacity:.75;}

/* trio cell labels are plain eyebrows, not bordered chips,
   override the global .tag box that would otherwise apply */
.trio .cell .tag{border:none;padding:0;background:none;}

/* ---------------- portrait / founder ---------------- */
.portrait{display:grid;gap:34px;border-top:1px solid var(--line);padding-top:38px;}
@media(min-width:860px){.portrait{grid-template-columns:300px 1fr;gap:56px;}}
.portrait .pimg img{width:100%;max-width:300px;height:auto;aspect-ratio:1;object-fit:cover;
  object-position:50% 38%;filter:grayscale(1) contrast(1.03);display:block;
  border:1px solid var(--line);}
.portrait .pname{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.1;margin-top:16px;}
.portrait .prole{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-2);margin-top:7px;line-height:1.7;}
.portrait .pbody p{font-size:15px;line-height:1.68;
  color:color-mix(in oklab, var(--fg) 76%, transparent);max-width:60ch;}
.portrait .pbody p+p{margin-top:18px;}

/* ---------------- stages (roadmap) ---------------- */
.stages{border-top:1px solid var(--line);}
.stage{display:grid;grid-template-columns:1fr;gap:12px;padding:30px 0;border-bottom:1px solid var(--line);}
@media(min-width:800px){.stage{grid-template-columns:170px 1fr;gap:44px;align-items:start;}}
.stage .sw{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);padding-top:5px;}
.stage h3{font-family:var(--display);font-weight:300;font-size:25px;line-height:1.14;margin-bottom:9px;}
.stage h3 em{font-style:italic;color:var(--accent);}
.stage p{font-size:14.5px;line-height:1.6;
  color:color-mix(in oklab, var(--fg) 72%, transparent);max-width:62ch;}
.stage.now h3{color:var(--fg);}

/* footer contact address */
footer.site .femail{display:inline-block;margin-top:16px;font-size:13.5px;
  color:color-mix(in oklab, var(--fg) 74%, transparent);transition:color .18s ease;}
footer.site .femail:hover{color:var(--accent);}

/* ============================================================
   REFINEMENT PASS
   1. Two typefaces only: Source Serif 4 (display) + Inter (all
      copy and labels). Mono is demoted to genuine data: code,
      endpoints, verdict codes, tabular figures. This removes the
      third-typeface clash.
   2. Larger, consistent sub-copy under every heading.
   3. Accent nav with white hover; prominent VERIFY action.
   4. Scroll-reactive art layers + flow motion.
   ============================================================ */

/* ---- 1. labels move from mono to Inter -------------------- */
.kick,.lbl,.trio .cell .tag,.steps .st .when,.cap .cl,.band .bk,
.stage .sw,.tbl .hd > div,.portrait .prole,.src,.feature .ftag,
.spec .sk,footer.site .fcol h4,footer.site .legal,.chip{
  font-family:var(--sans);font-weight:500;
}
.kick,.lbl{font-size:11px;letter-spacing:.16em;}
.trio .cell .tag,.steps .st .when,.band .bk,.stage .sw,
.feature .ftag,.spec .sk,.tbl .hd > div{font-size:10.5px;letter-spacing:.14em;}
.cap .cl{font-size:11px;letter-spacing:.12em;}
.src,footer.site .legal{font-size:10.5px;letter-spacing:.12em;}
.steps .st li{font-family:var(--sans);font-size:11px;letter-spacing:.10em;font-weight:500;}
/* mono survives only where it means "this is data" */
.mono,.ftag,.tag,.rec,.spec .srow .v,.metric .n,code,.bignum,.idx-kpi .v{font-family:var(--mono);}
.tag b,.tag i{font-family:var(--mono);}

/* ---- 2. sub-copy: one voice, larger ---------------------- */
.block-sub,.statement .after,.hero-grid .lede{
  font-family:var(--sans);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.6;
  color:color-mix(in oklab, var(--fg) 82%, transparent);
  max-width:60ch;
}
.statement .after{max-width:66ch;margin-top:38px;}
@media(min-width:768px){.hero-grid .lede{font-size:clamp(18px,1.6vw,22px);}}
.pane .pd,.trio .cell p,.cap p,.band p,.steps .st p,.vs .c .s,.stage p{
  font-size:15.5px;line-height:1.58;
}
.block-head{margin-bottom:56px;}

/* ---- 3. nav + VERIFY ------------------------------------- */
nav.links{color:var(--accent);}
nav.links a{color:var(--accent);font-weight:500;}
nav.links a:hover,nav.links a:focus-visible,nav.links a[aria-current="page"]{color:var(--fg);}
.head-nav a{color:var(--accent);font-weight:500;}
.head-nav a:hover{color:var(--fg);}

.arrlink.cta{
  background:var(--accent);color:oklch(98% .004 85);
  border:1px solid var(--accent);
  padding:11px 18px;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.arrlink.cta:hover,.arrlink.cta:focus-visible{
  background:oklch(98% .004 85);color:var(--accent);border-color:oklch(98% .004 85);
}
.arrlink.cta svg{height:12px;width:12px;}

/* ---- 4a. art layers ------------------------------------- */
.hero{position:relative;overflow:hidden;}
.hero-art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .15s;
}
.hero-art.lit{opacity:1;}
.hero-art canvas{display:block;width:100%;height:100%;}
.hero > .wrap{position:relative;z-index:1;}

.art{position:relative;overflow:hidden;border-top:1px solid var(--line);}
.art .wrap{position:relative;z-index:1;}
.art-svg{
  position:absolute;top:50%;left:50%;width:min(1180px,120%);
  transform:translate3d(-50%,-50%,0);z-index:0;pointer-events:none;opacity:.85;
}
.art-line{
  fill:none;stroke:var(--line-2);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1);
}
.art.on .art-line{stroke-dashoffset:0;}
.art-line.acc{stroke:var(--accent);}
.art-dot{fill:var(--accent);opacity:0;transition:opacity .6s ease 1s;}
.art.on .art-dot{opacity:1;}
.art-copy{
  padding:104px 0;display:grid;gap:20px;justify-items:center;text-align:center;
}
@media(min-width:768px){.art-copy{padding:132px 0;}}
.art-copy .big{
  font-family:var(--display);font-weight:300;
  font-size:clamp(30px,5.2vw,60px);line-height:1.05;letter-spacing:-.025em;max-width:24ch;
}
.art-copy .big em{font-style:italic;color:var(--accent);}
.art-copy .sub{
  font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);line-height:1.6;
  color:color-mix(in oklab, var(--fg) 76%, transparent);max-width:52ch;
}

/* ---- 4b. the four-step flow, with motion ---------------- */
.steps .st{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.steps.on .st{opacity:1;transform:none;}
.steps.on .st:nth-child(1){transition-delay:.05s;}
.steps.on .st:nth-child(2){transition-delay:.18s;}
.steps.on .st:nth-child(3){transition-delay:.31s;}
.steps.on .st:nth-child(4){transition-delay:.44s;}
.steps .st .when{color:var(--accent);}
.steps .st h3{font-size:26px;}
/* a filling rule that reads as progress through the loop */
.steps .st{position:relative;}
.steps .st::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:0;
  background:var(--accent);transition:width .9s var(--ease);
}
@media(min-width:800px){.steps .st::after{transition-duration:1.1s;}}
.steps.on .st::after{width:100%;}
.steps.on .st:nth-child(2)::after{transition-delay:.18s;}
.steps.on .st:nth-child(3)::after{transition-delay:.31s;}
.steps.on .st:nth-child(4)::after{transition-delay:.44s;}

/* the section title that has to land hardest, on one line at full
   width. Both current uses (Preflight & Postflight Assurance, Four
   ways to start) needed the same fitted scale, so it is the scale,
   not a per-section override. Pair with .block-head.stack so the
   title gets the full row instead of the 7fr split. */
.block-title.hero-scale{
  font-size:clamp(32px,4.7vw,60px);line-height:1;letter-spacing:-.03em;max-width:none;
}

/* ---- 4c. chain of intent: travelling pulse -------------- */
.flow{position:relative;}
.flow .ftag{position:relative;overflow:hidden;}
.flow.on .ftag{animation:chainLink .5s var(--ease) both;}
.flow.on .ftag:nth-child(2){animation-delay:.05s}
.flow.on .ftag:nth-child(4){animation-delay:.12s}
.flow.on .ftag:nth-child(6){animation-delay:.19s}
.flow.on .ftag:nth-child(8){animation-delay:.26s}
.flow.on .ftag:nth-child(10){animation-delay:.33s}
.flow.on .ftag:nth-child(12){animation-delay:.40s}
.flow.on .ftag:nth-child(14){animation-delay:.47s}
.flow.on .ftag:nth-child(16){animation-delay:.54s}
.flow.on .ftag:nth-child(18){animation-delay:.61s}
@keyframes chainLink{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.flow .ftag.hi{box-shadow:0 0 0 0 var(--accent-dim);}
.flow.on .ftag.hi{animation:chainLink .5s var(--ease) both, pulseRing 2.6s ease-in-out 1.1s infinite;}
@keyframes pulseRing{
  0%,100%{box-shadow:0 0 0 0 oklch(66% .15 22 / .34);}
  50%{box-shadow:0 0 0 7px oklch(66% .15 22 / 0);}
}

@media(prefers-reduced-motion:reduce){
  .hero-art{display:none;}
  .art-line{stroke-dashoffset:0;transition:none;}
  .art-dot{opacity:1;transition:none;}
  .steps .st{opacity:1;transform:none;transition:none;}
  .steps .st::after{width:100%;transition:none;}
  .flow.on .ftag,.flow.on .ftag.hi{animation:none;}
}

/* hero gets room for the graphic to read, and a vignette so the
   display type stays crisp over the mesh */
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:767px){.hero{min-height:auto;}}
.hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(66% 58% at 0% 44%, oklch(11% .006 55 / .90) 0%, oklch(11% .006 55 / .34) 46%, transparent 72%),
    linear-gradient(to bottom, transparent 84%, var(--bg) 100%);
}

/* Stripe wordmark shown beside the reference to their case study.
   Nominative reference only: white, text-height, no endorsement implied. */
.slogo-wrap{display:inline-flex;align-items:center;margin-right:.42em;vertical-align:-.04em;}
.slogo{height:1.12em;width:auto;color:#fff;display:block;}

/* section art sits further back: it should suggest structure, not compete */
.art-svg{opacity:.34;}
.art-line{stroke:var(--line);}
.art-line.acc{stroke:var(--accent);opacity:.55;}
.art-dot{opacity:0;}
.art.on .art-dot{opacity:.5;}

/* precedent stats: the caption under each figure carries the claim,
   so it reads at body scale rather than card scale */
#precedent .trio .cell p{font-size:17.5px;line-height:1.5;}
#precedent .trio .cell .bignum{margin-bottom:2px;}

/* ---------------- card grid: cols-2 / cols-3 ----------------
   Column count is an explicit modifier class chosen in the markup
   (.inds.cols-2 or .inds.cols-3), not an ID override on a shared
   default. The two are mutually exclusive on any given element, so
   there is no specificity contest between breakpoints: whichever
   modifier is present is the only one that can ever match, in any
   order, at any width. This replaced a design where a later
   `#section .inds{...}` override tried to beat the shared class's
   own breakpoint rules — `:nth-child()` adds specificity, so a 2-col
   override at one breakpoint could outrank the 3-col rule at a
   wider one regardless of source order, and the dividers leaked
   between layouts twice before this was fixed. */
.inds{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
.inds .ind{padding:30px 0 32px;display:flex;flex-direction:column;gap:11px;}
.inds .ind:nth-child(n){border-top:1px solid var(--line);}
.inds .ind:nth-child(1){border-top:none;}

@media(min-width:700px){
  /* Uniform horizontal padding on EVERY card, in both layouts, so all
     text measures are identical. Only the divider (border-left) varies
     by column position. Asymmetric padding was what made the edge
     cards visibly wider than the interior ones. */
  .inds.cols-2 .ind,.inds.cols-3 .ind{padding:34px 28px 36px;}

  .inds.cols-2{grid-template-columns:repeat(2,1fr);}
  .inds.cols-2 .ind:nth-child(2n){border-left:1px solid var(--line);}
  .inds.cols-2 .ind:nth-child(2n+1){border-left:none;}
  .inds.cols-2 .ind:nth-child(-n+2){border-top:none;}
  .inds.cols-2 .ind:nth-child(n+3){border-top:1px solid var(--line);}

  /* cols-3 uses the same 2-up shape as an interim step between
     mobile and its 1080px 3-up layout */
  .inds.cols-3{grid-template-columns:repeat(2,1fr);}
  .inds.cols-3 .ind:nth-child(2n){border-left:1px solid var(--line);}
  .inds.cols-3 .ind:nth-child(2n+1){border-left:none;}
  .inds.cols-3 .ind:nth-child(-n+2){border-top:none;}
  .inds.cols-3 .ind:nth-child(n+3){border-top:1px solid var(--line);}
}

@media(min-width:1080px){
  .inds.cols-3{grid-template-columns:repeat(3,1fr);}
  .inds.cols-3 .ind:nth-child(3n+2),
  .inds.cols-3 .ind:nth-child(3n){border-left:1px solid var(--line);}
  .inds.cols-3 .ind:nth-child(3n+1){border-left:none;}
  .inds.cols-3 .ind:nth-child(-n+3){border-top:none;}
  .inds.cols-3 .ind:nth-child(n+4){border-top:1px solid var(--line);}
}

.ind .no{font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.ind h3{font-family:var(--display);font-weight:300;
  font-size:clamp(24px,2.5vw,30px);line-height:1.06;letter-spacing:-.018em;}
.ind h3 em{font-style:italic;color:var(--accent);}
.ind p{font-size:16px;line-height:1.5;
  color:color-mix(in oklab, var(--fg) 78%, transparent);max-width:34ch;}
.ind .miss{margin-top:auto;padding-top:14px;}
.engagement-link{
  appearance:none;border:0;background:none;color:var(--accent);padding:0;
  cursor:pointer;font-family:var(--mono);font-size:10px;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;
}
.engagement-link:hover,.engagement-link:focus-visible{opacity:.75;}
/* engagements uses the shared 3-up .inds grid above. The previous
   #engagements overrides were tuned for a 2-column layout and, being
   ID-specific, outranked the generic rules and mis-drew the dividers. */

/* ---------------- engagement card actions ----------------
   These are <button data-lead> elements inside .ind cells. As bare
   buttons they inherit the browser's buttonface chrome, so reset it
   and give them the site's text-action treatment with a real hover. */
.ind .miss{margin-top:auto;padding-top:18px;}
.ind .miss span{display:inline-flex;}
.ind .miss button.arrlink,
.ind .miss a{
  all:unset;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
  padding-bottom:4px;
  border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.ind .miss button.arrlink::after,
.ind .miss a::after{content:"→";font-size:12.5px;line-height:1;}
.ind .miss button.arrlink:hover,
.ind .miss button.arrlink:focus-visible,
.ind .miss a:hover,
.ind .miss a:focus-visible{
  color:var(--fg);border-bottom-color:var(--fg);gap:14px;
}
.ind .miss button.arrlink:focus-visible,
.ind .miss a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* ---------------- scroll progress rail ---------------- */
.srail{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:var(--accent);pointer-events:none;
  transition:width .12s linear;}

/* ---------------- staggered table rows ---------------- */
.tbl .row{opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);}
.tbl.on .row{opacity:1;transform:none;}
.tbl.on .row:nth-child(2){transition-delay:.06s}
.tbl.on .row:nth-child(3){transition-delay:.12s}
.tbl.on .row:nth-child(4){transition-delay:.18s}
.tbl.on .row:nth-child(5){transition-delay:.24s}
.tbl.on .row:nth-child(6){transition-delay:.30s}
.tbl.on .row:nth-child(7){transition-delay:.36s}

/* ---------------- counting figures ---------------- */
.metric .n,.bignum{font-variant-numeric:tabular-nums;}

/* ---------------- card hover ----------------
   A drop shadow alone read as a hard rectangle floating behind
   transparent content ("squares"), because these cards have no
   surface of their own. Hover now raises an actual surface: a faint
   tint fills the card, a hairline picks up the accent, and the shadow
   only softens the edge of something already visible. */
.ind,.trio .cell,.steps .st{
  transition:background-color .3s ease, box-shadow .35s var(--ease),
             transform .35s var(--ease);
}
@media(hover:hover){
  .ind:hover,.trio .cell:hover,.steps .st:hover{
    background-color:var(--ghost);
    transform:translateY(-3px);
    box-shadow:0 18px 40px -28px oklch(0% 0 0 / .85);
  }
  /* the eyebrow and the rule above a step brighten with it */
  .ind:hover .no,.trio .cell:hover .tag,.steps .st:hover .when{
    color:var(--accent);
  }
  .steps .st:hover::after{background:var(--accent);}
}

@media(prefers-reduced-motion:reduce){
  .srail{display:none;}
  .tbl .row{opacity:1;transform:none;transition:none;}
  .ind:hover,.trio .cell:hover,.steps .st:hover{transform:none;}
}

/* ---------------- hero tagline ----------------
   Replaces the plain lede on the homepage hero: same display serif
   as the h1 above it, italic, with a slow animated gradient sweep.
   Solid --fg is the base color/fallback; the gradient only applies
   where background-clip:text is supported, and freezes under
   prefers-reduced-motion rather than removing the color entirely. */
.hero-grid .hero-tagline{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(34px,4.8vw,58px);line-height:1.14;letter-spacing:-.018em;
  color:var(--fg);
}
@media(min-width:768px){.hero-grid .hero-tagline{grid-column:1/7;}}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero-grid .hero-tagline{
    background-image:linear-gradient(100deg,
      var(--fg) 0%, var(--accent) 28%, var(--fg) 52%, var(--accent) 78%, var(--fg) 100%);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:tagGradient 10s ease-in-out infinite;
  }
}
@keyframes tagGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media(prefers-reduced-motion:reduce){
  .hero-grid .hero-tagline{animation:none;background-position:0% 50%;}
}

/* header logo: 30% larger than the base lockup (footer logo is
   untouched, deliberately smaller) */
header.site .logo{gap:14px;height:28.6px;}
header.site .logo .n1{font-size:23.4px;}

/* protocol chips in the "six protocols to pay" band: the only place
   the bordered .tag chip is used at showcase scale rather than as a
   small eyebrow label */
.proto-tags{gap:14px;}
.proto-tags .tag{
  font-size:15px;letter-spacing:.06em;padding:13px 22px;
  border-color:var(--line-2);color:var(--fg);
}
.proto-tags .tag b{font-weight:500;}

/* ============================================================
   MOBILE CORRECTIONS
   ============================================================ */

/* --- chain of intent: a ragged 5-row wrap on a phone. Stack it as a
   real vertical chain instead, with the connector rotated to point
   down so it still reads as a sequence. --- */
@media(max-width:699px){
  .flow{flex-direction:column;align-items:stretch;gap:0;padding-top:26px;}
  .flow .rl{margin:0 0 16px;}
  .flow .ftag{width:100%;text-align:center;padding:12px 14px;}
  /* Swap the glyph rather than rotating the element: the reveal
     animation (chainLink, fill-mode both) ends on `transform:none`,
     and CSS animations outrank normal declarations, so a
     `transform:rotate(90deg)` here was being silently overridden.
     Zeroing the font-size hides the "->" text node and the pseudo
     element supplies a real downward arrow instead. */
  .flow .ftag.sep{
    border:none;padding:6px 0;font-size:0;line-height:1;
  }
  .flow .ftag.sep::before{
    content:"\2193";
    display:block;font-family:var(--mono);font-size:15px;
    line-height:1;color:var(--fg-2);
  }
}

/* --- settlement vs assurance table: when the two columns stack, the
   left/right meaning is lost because the header row is off-screen.
   Label each cell inline on small screens. --- */
@media(max-width:759px){
  .tbl .hd{display:none;}
  .tbl .row{padding:6px 0 10px;}
  .tbl .row > div{padding:10px 0 4px;}
  .tbl .row > div::before{
    display:block;margin-bottom:5px;
    font-family:var(--sans);font-weight:500;font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  }
  .tbl .row > div:first-child::before{content:"Settlement layer";}
  .tbl .row > div+div{
    background:var(--ghost);padding:10px 14px 12px;margin-top:8px;
  }
  .tbl .row > div+div::before{content:"Assurance layer";color:var(--accent);}
}

/* --- cards get a little horizontal breathing room on mobile too, so a
   tapped/focused card's tint is not flush to the screen edge --- */
@media(max-width:699px){
  .inds .ind,.steps .st,.trio .cell{padding-left:0;padding-right:0;}
}