/* ==========================================================
   McMahon AI — shared stylesheet (extracted from single-page V1)
   Identity: two-tone monogram (white + blue inner chevron),
   command-grid modules, chevron units throughout.
========================================================== */
:root{
  --ink:   #060709;
  --panel: #0B0D11;
  --cell:  #0A0C10;
  --raise: #10131A;
  --line:  rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.14);
  --white: #F2F5FA;
  --muted: #7E8798;
  --blue:  #2E6BFF;
  --blue2: #6C97FF;

  --display:'Archivo', system-ui, sans-serif;
  --body:   'Inter', system-ui, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, monospace;
  --w:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--white);
  font-family:var(--body);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.mono{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.chev{
  display:inline-block;width:12px;height:8px;background:var(--blue);
  clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%);
}

/* ---------- Intro (<1s) ---------- */
#intro{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .38s ease, visibility .38s;
}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro svg{width:min(108px,24vw);animation:mark .7s cubic-bezier(.2,.85,.25,1) both}
#intro polygon{fill:#fff}
#intro .inner{animation:innerBlue .25s ease .5s both}
@keyframes mark{
  from{opacity:0;transform:scale(1.3) rotate(-5deg)}
  to  {opacity:1;transform:scale(1) rotate(0)}
}
@keyframes innerBlue{from{fill:#fff}to{fill:var(--blue)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #intro{display:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- Nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
header.scrolled{background:rgba(6,7,9,.86);backdrop-filter:blur(12px);border-color:var(--line)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:14px}
.brand svg{width:22px;height:25px;flex:none;overflow:visible}
.brand polygon{fill:#fff}
.brand .inner{fill:var(--blue)}
.nav-r{display:flex;align-items:center;gap:28px}
.nav-r a{font-size:13px;font-weight:500;color:var(--muted);transition:color .2s}
.nav-r a:hover{color:var(--white)}
.nav-r .cta{
  color:#fff;background:var(--blue);border-radius:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;transition:background .2s;
}
.nav-r .cta:hover{background:#3E78FF;color:#fff}
@media(max-width:700px){.nav-r a:not(.cta){display:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border-radius:8px;
  border:0;cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s, box-shadow .25s;
}
.btn-b{background:var(--blue);color:#fff;box-shadow:0 6px 24px rgba(46,107,255,.30)}
.btn-b:hover{background:#3E78FF;transform:translateY(-2px)}
.btn-o{border:1px solid var(--line2);color:var(--white)}
.btn-o:hover{border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.btn.sm{padding:13px 20px;font-size:11px}

/* ---------- Hero : centred, brand-led ---------- */
.hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:96px;
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/25% 100%;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 34%, #000 12%, transparent 72%);
  mask-image:radial-gradient(ellipse 80% 75% at 50% 34%, #000 12%, transparent 72%);
}
.hero-inner{
  position:relative;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 0 0;
}
.hero-logo{width:clamp(58px,8vw,76px);margin:0 auto 28px}
.hero-logo polygon{fill:#fff}
.hero-logo .inner{fill:var(--blue)}
.h-eyebrow{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:20px}
.h-head{
  font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(33px,5.8vw,72px);max-width:860px;
  text-wrap:balance;
}
.h-head b{color:var(--blue);font-weight:800}
.h-tag{margin:20px auto 0;color:var(--muted);font-size:clamp(15.5px,1.5vw,17.5px);max-width:520px}
.h-ctas{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.stat{
  width:min(340px,100%);margin:34px auto 0;text-align:left;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(10,12,16,.72);backdrop-filter:blur(4px);
  padding:15px 18px 6px;
}
.stat-head{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.stat-head .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.stat-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.stat-row:last-child{border-bottom:none}
.stat-row b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);
  text-align:right;max-width:64%;line-height:1.6;
}
/* entrance */
.hero-logo,.h-eyebrow,.h-head,.h-tag,.h-ctas,.stat{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
body.ready .hero-logo,body.ready .h-eyebrow,body.ready .h-head,body.ready .h-tag,body.ready .h-ctas,body.ready .stat{opacity:1;transform:none}
body.ready .hero-logo{transition-delay:.0s}
body.ready .h-eyebrow{transition-delay:.08s}
body.ready .h-head{transition-delay:.14s}
body.ready .h-tag{transition-delay:.24s}
body.ready .h-ctas{transition-delay:.34s}
body.ready .stat{transition-delay:.46s}

/* ---------- Sections ---------- */
section{padding:96px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em}
.sec-sub{color:var(--muted);font-size:14.5px;margin-top:10px;max-width:480px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Starter Pack flagship ---------- */
#package{padding-top:84px}
.os-hero{
  position:relative;overflow:hidden;
  border:1px solid rgba(46,107,255,.45);background:
    radial-gradient(ellipse 55% 90% at 88% 50%, rgba(46,107,255,.14), transparent 62%),
    var(--cell);
  padding:60px 54px;
}
.os-hero::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.25,1) .25s;
}
.os-hero.in::before{transform:scaleX(1)}
.os-mark{
  position:absolute;top:50%;right:-4%;transform:translateY(-50%);
  height:210%;aspect-ratio:945/1080;pointer-events:none;
}
.os-mark polygon{fill:#0D1119;stroke:rgba(255,255,255,.30);stroke-width:4}
.os-mark .inner{fill:var(--blue);stroke:none}
.os-cols{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,60px);align-items:center}
.os-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.os-tag{color:var(--blue2)}
.os-hero h3{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(28px,3.9vw,46px);margin:16px 0 14px;
}
.os-hero .lede{color:var(--muted);font-size:15px;max-width:470px;margin-bottom:20px}
.os-for{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.os-for b{color:var(--white);font-weight:500}
.os-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.os-chips .chip{border-color:rgba(46,107,255,.4);color:var(--blue2)}
.os-action{position:relative;display:flex;justify-content:center;margin-top:34px}
.blist{list-style:none;display:flex;flex-direction:column;gap:11px}
.blist li{display:flex;gap:11px;align-items:baseline;font-size:13.5px;color:#B4BCCB}
.blist li::before{
  content:"";flex:none;width:9px;height:6px;background:var(--blue);
  clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%);
}
@media(max-width:820px){
  .os-hero{padding:42px 26px}
  .os-mark{opacity:.3;right:-40%}
  .os-cols{grid-template-columns:1fr}
}

/* ---------- Website Builder ---------- */
#builder{border-top:1px solid var(--line)}  /* background: the page's shared .home-bg shows through */
.b-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.opts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.opt{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  background:var(--cell);padding:15px 20px;cursor:pointer;
  transition:background .2s;user-select:none;
}
.opt:hover{background:var(--raise)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .box{
  flex:none;width:18px;height:18px;border:1px solid var(--line2);border-radius:4px;
  position:relative;transition:background .2s,border-color .2s;
}
.opt input:checked ~ .box{background:var(--blue);border-color:var(--blue)}
.opt input:checked ~ .box::after{
  content:"";position:absolute;left:3px;right:3px;top:5px;bottom:4px;background:#fff;
  clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%);
}
.opt .box{margin-top:2px}
.opt .name{font-size:14px;font-weight:500;display:flex;flex-direction:column;gap:3px;min-width:0}
.opt .name .desc{font-size:12px;font-weight:400;color:var(--muted);line-height:1.45}
.opt .opt-d{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);margin-left:2px}
.opt .opt-price{margin-left:auto;flex:none;margin-top:2px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);transition:color .2s}
.opt input:checked ~ .opt-price{color:var(--white)}
.opt.base{cursor:default}
/* summary */
.sum{
  border:1px solid var(--line2);border-radius:14px;background:var(--cell);
  padding:26px 26px 24px;position:sticky;top:90px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.sum-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sum-head .brand{font-size:12px;white-space:nowrap}
.sum-head .brand svg{width:18px;height:20px;flex:none}
.sum-items{list-style:none}
.sum-items li{
  display:flex;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);
  font-size:13px;color:#B4BCCB;
}
.sum-items li b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 6px}
.sum-total .t{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.02em}
.sum-note{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 0 20px}
.sum .btn{width:100%}
@media(max-width:920px){.b-grid{grid-template-columns:1fr;gap:34px}.sum{position:static}}

/* ---------- Intake Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:flex-start;justify-content:center;
  padding:92px 20px 32px;background:rgba(6,7,9,.82);
  backdrop-filter:blur(14px);overflow-y:auto;
}
.modal.open{display:flex}
.modal:target{display:flex}
.modal-panel{
  width:min(920px,100%);border:1px solid var(--line2);border-radius:14px;
  background:var(--cell);box-shadow:0 34px 90px rgba(0,0,0,.62);
  overflow:hidden;
}
.modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:26px 28px;border-bottom:1px solid var(--line);
}
.modal-head h2{
  font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.02em;line-height:1.08;margin-top:8px;
}
.modal-head p{color:var(--muted);font-size:14px;margin-top:10px;max-width:560px}
.modal-close{
  flex:none;width:38px;height:38px;border:1px solid var(--line2);border-radius:8px;
  background:transparent;color:var(--white);font-size:24px;line-height:1;
  cursor:pointer;transition:background .2s,border-color .2s;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:var(--raise);border-color:rgba(255,255,255,.28)}
.legal-doc{
  display:grid;gap:18px;padding:28px;color:#B4BCCB;
  font-size:14px;line-height:1.68;
}
.legal-doc h3{
  font-family:var(--display);font-size:20px;color:var(--white);
  letter-spacing:-.01em;margin-top:6px;
}
.legal-doc h4{
  font-family:var(--display);font-size:15px;color:var(--white);
  margin-top:4px;
}
.legal-doc ul{padding-left:19px}
.legal-doc li{margin:4px 0}
.legal-note{
  border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.03);padding:14px 16px;
}
.choice a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
.intake{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  padding:28px;
}
.form-section{border-top:1px solid var(--line);padding-top:18px}
.form-section:first-child,.form-section:nth-child(2){border-top:none;padding-top:0}
.form-section.full{grid-column:1/-1}
.form-section h3{
  font-family:var(--display);font-size:17px;letter-spacing:-.01em;margin-bottom:14px;
}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.field label,.choice-title{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--line);border-radius:8px;background:#07090C;
  color:var(--white);font:inherit;padding:12px 13px;outline:none;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(46,107,255,.75)}
.checks,.radios{display:grid;gap:10px}
.choice{
  display:flex;gap:10px;align-items:flex-start;color:#B4BCCB;font-size:13.5px;
}
.choice input{margin-top:4px;accent-color:var(--blue);width:auto !important;flex:none}
.audit-intake{grid-template-columns:1fr;gap:22px}
.audit-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
.audit-category{
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);
  padding:18px;
}
.audit-category h3{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:14px;
}
.audit-category h3 span{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue2);
}
.audit-question{display:grid;gap:9px;margin-top:14px}
.audit-question:first-of-type{margin-top:0}
.audit-question .choice-title{line-height:1.45;color:#D8DFEA}
.audit-options{display:grid;gap:7px}
.audit-option{
  border:1px solid var(--line);border-radius:8px;background:#07090C;
  padding:9px 10px;font-size:13px;transition:border-color .2s,background .2s;
}
.audit-option:hover{background:var(--raise);border-color:var(--line2)}
.audit-option input:checked + span{color:var(--white)}
.audit-note{
  border:1px solid rgba(46,107,255,.26);border-radius:10px;
  background:rgba(46,107,255,.07);padding:14px 16px;color:#B4BCCB;
  font-size:13px;line-height:1.6;
}
.upload-note{color:var(--muted);font-size:12px;margin-top:-4px}
.form-actions{
  grid-column:1/-1;display:grid;gap:14px;border-top:1px solid var(--line);
  padding-top:22px;
}
.form-actions .btn{width:100%;border:none;cursor:pointer}
.form-fineprint{font-size:12px;color:var(--muted);line-height:1.55}
.field-hint{display:block;margin-top:6px;font-size:12px;color:#98a2b3;line-height:1.5}
.form-error{display:block;grid-column:1/-1;margin:14px 0 0;padding:12px 14px;border:1px solid rgba(255,143,122,.5);border-radius:10px;background:rgba(255,143,122,.08);color:#ffb3a3;font-size:13.5px;line-height:1.55}
.form-error[hidden]{display:none}
.intake .field.is-invalid input,.intake .field.is-invalid select,.intake .field.is-invalid textarea{border-color:#ff8f7a}
.intake .field-msg{display:block;margin-top:6px;font-size:12px;color:#ffb3a3}
.intake .field-msg:empty{display:none}
.form-success .quiet-link{justify-self:center}
.form-success{
  display:none;margin:28px;border:1px solid rgba(46,107,255,.34);
  border-radius:12px;background:rgba(46,107,255,.07);padding:28px;
}
.form-success.show{display:grid;gap:14px}
.form-success h3{
  font-family:var(--display);font-size:24px;letter-spacing:-.015em;
}
.form-success p{color:#B4BCCB;font-size:14px;line-height:1.65;max-width:620px}
.form-success .btn{width:max-content;min-width:210px;border:none;justify-self:center}
@media(max-width:760px){
  .modal{padding:82px 14px 24px}
  .modal-head{padding:22px 20px}
  .legal-doc{padding:22px 20px}
  .intake{grid-template-columns:1fr;padding:22px 20px}
  .audit-grid{grid-template-columns:1fr}
  .form-success{margin:22px 20px}
  .form-success .btn{width:100%}
  .form-section:nth-child(2){border-top:1px solid var(--line);padding-top:18px}
}

/* ---------- Live Offers : command grid ---------- */
.svc-grp{margin-top:30px}
.svc-grp:first-of-type{margin-top:0}
.svc-grp-label{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svc-grid.g4{grid-template-columns:repeat(4,1fr)}
.svc-grid.g2{grid-template-columns:repeat(2,1fr)}
.svc{
  position:relative;background:var(--cell);
  padding:26px 24px 22px;
  display:flex;flex-direction:column;transition:background .25s;overflow:hidden;
}
.svc::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.svc:hover{background:var(--raise)}
.svc:hover::before{transform:scaleX(1)}
.svc.featured{
  background:
    radial-gradient(ellipse 55% 90% at 88% 50%, rgba(46,107,255,.12), transparent 62%),
    var(--cell);
  border-color:rgba(46,107,255,.34);
}
.svc.featured h3{font-size:22px}
.svc.featured p{max-width:520px}
.svc-i{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);transition:color .25s}
.svc:hover .svc-i{color:var(--blue2)}
.svc h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0 0 6px;padding-top:18px}
.svc p{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.svc-meta{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;
}
.svc .chev{position:absolute;top:26px;right:24px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.svc:hover .chev{opacity:1;transform:none}
.svc-foot{
  margin-top:auto;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;
}
.svc-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color .25s;
}
.svc-cta::after{
  content:"";width:8px;height:8px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s;
}
.svc:hover .svc-cta{color:var(--blue2)}
.svc:hover .svc-cta::after{transform:rotate(45deg) translate(2px,-2px)}
.chip{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;white-space:nowrap;
}
.chip.price{color:var(--white);border-color:var(--line2)}
@media(max-width:1000px){
  .svc-grid.g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid:not(.g4):not(.g2) .svc:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:560px){
  .svc-grid,.svc-grid.g4,.svc-grid.g2{grid-template-columns:1fr}
  .svc-grid .svc{grid-column:auto}
  .svc{padding:20px 18px 18px}
  .svc h3{padding-top:14px}
  .svc p{font-size:13px;margin-bottom:12px}
}

/* ---------- Audit ---------- */
#audit{background:var(--panel);border-block:1px solid var(--line)}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.audit-copy{text-align:center}
.aud-sub{color:var(--muted);font-size:14.5px;margin:12px auto 0;max-width:430px}
.steps{display:flex;flex-direction:column;margin:30px auto 0;max-width:430px;text-align:left}
.step{display:flex;gap:18px}
.step-rail{display:flex;flex-direction:column;align-items:center}
.step-n{
  flex:none;width:34px;height:34px;border:1px solid var(--line2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--blue2);background:var(--cell);
}
.step-line{width:1px;flex:1;background:var(--line);min-height:22px}
.step:last-child .step-line{display:none}
.step-body{padding:6px 0 24px}
.step:last-child .step-body{padding-bottom:0}
.step-body b{display:block;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.step-body span{color:var(--muted);font-size:13.5px}
/* report preview */
.report{
  border:1px solid var(--line2);border-radius:14px;background:var(--cell);
  padding:28px 28px 26px;position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.report::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 40% at 80% 0%, rgba(46,107,255,.10), transparent 65%);
}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}
.report-head .brand{font-size:12px;white-space:nowrap}
.report-head .brand svg{width:18px;height:20px;flex:none}
.score-row{display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.score-donut{width:min(230px,72vw);aspect-ratio:1;position:relative;display:grid;place-items:center}
.score-donut svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.score-donut circle{fill:none;stroke-width:10;stroke-linecap:round}
.score-donut .track{stroke:rgba(255,255,255,.08)}
.score-donut .progress{
  stroke:var(--blue);stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.25,1) .4s;
  filter:drop-shadow(0 0 10px rgba(46,107,255,.35));
}
/* Ring is driven by JS (main.js countScore) so it stays in step with the counter; no CSS transition. */
.report .score-donut .progress{transition:none}
.report .score-big span{font-variant-numeric:tabular-nums;display:inline-block;min-width:2ch;text-align:center}
.score-big{
  position:relative;z-index:1;text-align:center;
  font-family:var(--display);font-weight:800;font-size:58px;letter-spacing:-.03em;line-height:1;
}
.score-big small{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.bars{display:flex;flex-direction:column;gap:11px}
.bar label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.bar label b{color:var(--white);font-weight:600;font-family:var(--mono);font-size:11.5px}
.bar-t{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.bar-f{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));border-radius:3px;transition:width 1s cubic-bezier(.2,.8,.25,1)}
.report.in .bar-f{width:var(--v)}
.prev{margin-top:20px;border-top:1px solid var(--line)}
.prev div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.prev b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);
}
.report-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
@media(max-width:920px){.score-grid{grid-template-columns:1fr;gap:48px}}

/* ---------- Final CTA ---------- */
.cta{
  text-align:center;padding:120px 0;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 75% at 50% 125%, rgba(46,107,255,.18), transparent 70%),
    var(--ink);
}
.cta-mark{width:46px;height:51px;margin:0 auto 30px}
.cta-mark polygon{fill:#fff}
.cta-mark .inner{fill:var(--blue)}
.cta h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(32px,4.8vw,54px);max-width:760px;margin:0 auto 14px;
}
.cta h2 b{color:var(--blue2);font-weight:800}
.cta p{color:var(--muted);max-width:430px;margin:0 auto 36px;font-size:15.5px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .mono{display:block;margin-top:24px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 calc(30px + env(safe-area-inset-bottom, 0px))}
.foot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.foot-links{display:flex;gap:12px 22px;flex-wrap:wrap;justify-content:center}
.foot-links a{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s;
  padding:4px 0;
}
.foot-links a:hover{color:var(--white)}
@media(max-width:640px){
  footer{padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px))}
  .foot{gap:16px}
}


/* ==========================================================
   Multi-page additions — structural only.
   Uses existing tokens/components; no visual redesign.
========================================================== */

/* Interior page hero (compact version of the homepage hero) */
.page-hero{
  min-height:auto;position:relative;overflow:hidden;
  padding:150px 0 26px;
  background:
    radial-gradient(ellipse 52% 60% at 50% 0%, rgba(46,107,255,.10), transparent 66%),
    var(--ink);
}
.page-hero .hero-inner{padding:0 0 26px}
.page-hero .h-head{font-size:clamp(32px,4.6vw,56px);max-width:760px}
.page-hero .h-tag{max-width:600px}

/* Standalone legal / article pages (content reuses .legal-doc styling) */
.legal-page{padding:150px 0 90px}
.legal-page .legal-doc{padding:0;max-width:820px}
.legal-page .page-title{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(30px,4.4vw,50px);margin:14px 0 12px;
}
.legal-page .page-lede{color:var(--muted);font-size:14.5px;max-width:600px;margin-bottom:34px}
.article-page .legal-doc{font-size:14.5px}
.article-back{
  display:inline-flex;align-items:center;gap:9px;margin-top:30px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .2s;
}
.article-back:hover{color:var(--white)}

/* Inline (non-modal) form panel — reuses .intake styling inside a page */
.form-panel{
  border:1px solid var(--line2);border-radius:14px;background:var(--cell);
  box-shadow:0 30px 70px rgba(0,0,0,.5);overflow:hidden;
}
.form-panel .form-success{margin:28px}


/* ==========================================================
   V2 additions — vertical rhythm, workflow command centre,
   FAQ, routing rows. Existing tokens only; no redesign.
========================================================== */

/* ---------- Vertical rhythm ---------- */
.page-hero + section{padding-top:56px}
.sec-head{margin-bottom:34px}
.svc-grp + .svc-grp{margin-top:26px}
@media(max-width:640px){
  section{padding:64px 0}
  .page-hero{padding:128px 0 8px}
  .page-hero .hero-inner{padding-bottom:22px}
  .page-hero + section{padding-top:44px}
  .cta{padding:88px 0}
  .sec-head{margin-bottom:26px}
  .h-ctas{margin-top:28px}
}

/* Compact card variant — avoids long flat stacks on mobile */
.svc-grid.compact .svc{padding:20px 18px 18px}
.svc-grid.compact .svc h3{font-size:15.5px;padding-top:12px}
.svc-grid.compact .svc p{font-size:12.5px;margin-bottom:4px}
@media(max-width:560px){
  .svc-grid.g4.compact{grid-template-columns:repeat(2,1fr)}
  .svc-grid.g4.compact .svc{padding:16px 14px 14px}
  .svc-grid.g4.compact .svc p{font-size:12px}
  .svc-grid.g4.compact .svc-i{font-size:10px}
}

/* ---------- Diagnostic routing rows ---------- */
.route-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.route{
  display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:8px 20px;align-items:center;
  background:rgba(10,12,16,.66);backdrop-filter:blur(3px);
  padding:20px 22px;transition:background .25s;position:relative;overflow:hidden;
}
.route::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:2px;
  background:var(--blue);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.route:hover{background:rgba(15,18,26,.88)}
.route:hover::before{transform:scaleY(1)}
.route-q{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.route-q .mono{display:block;margin-bottom:6px;color:var(--blue2)}
.route-a{color:var(--muted);font-size:13px;grid-column:1;max-width:520px}
.route .svc-cta{grid-column:2;grid-row:1/3;justify-self:end}
@media(max-width:640px){
  .route{grid-template-columns:1fr;padding:18px}
  .route .svc-cta{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq details{background:var(--cell);transition:background .25s}
.faq details[open]{background:var(--raise)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:8px;height:8px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s,border-color .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--blue2)}
.faq .faq-a{padding:0 22px 20px;color:var(--muted);font-size:13.5px;line-height:1.65;max-width:720px}
@media(max-width:560px){.faq summary{padding:16px 16px}.faq .faq-a{padding:0 16px 16px}}

/* ---------- Split feature rows (icon-free, chevron-led) ---------- */
.pill-row{display:flex;gap:10px;flex-wrap:wrap}


/* ==========================================================
   V3 additions — workflow canvas, mobile nav, layout variety,
   tightened rhythm. Existing tokens only.
========================================================== */

/* ---------- Rhythm tightening ---------- */
section{padding:88px 0}
.cta{padding:104px 0}
@media(max-width:640px){
  section{padding:60px 0}
  .cta{padding:84px 0}
}

/* ---------- Mobile navigation ---------- */
.nav-side{display:flex;align-items:center;gap:14px}
.nav-toggle{
  display:none;width:38px;height:38px;flex:none;
  border:1px solid var(--line2);border-radius:8px;background:transparent;
  cursor:pointer;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;
}
.nav-toggle:hover{background:var(--raise)}
.nav-toggle span{
  position:relative;display:block;width:16px;height:1.5px;background:var(--white);
  transition:background .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--white);
  transition:transform .25s, top .25s;
}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
#header.nav-open .nav-toggle span{background:transparent}
#header.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
#header.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
@media(max-width:700px){
  .nav-toggle{display:flex}
  #header.nav-open{background:rgba(6,7,9,.97);border-color:var(--line)}
  #header.nav-open .nav-r{
    position:absolute;top:64px;left:0;right:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,7,9,.97);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:6px 24px 18px;
  }
  #header.nav-open .nav-r a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--white)}
  #header.nav-open .nav-r a.cta{margin-top:14px;border-bottom:none;text-align:center;padding:12px 15px}
}

/* ---------- Compact horizontal system map ---------- */
.wf-mini{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px}
.wf-mini .wm{
  flex:1;min-width:150px;position:relative;
  border:1px solid var(--line);border-radius:11px;background:#080A0E;
  padding:14px 15px 13px;
  transition:border-color .25s,background .25s;
}
.wf-mini .wm:hover{border-color:rgba(46,107,255,.45);background:var(--raise)}
.wf-mini .wm b{display:block;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.wf-mini .wm span{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.45}
.wf-mini .wm .mono{display:block;margin-bottom:8px;font-size:9px;color:var(--blue2)}
.wf-mini .wm:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-9px;transform:translateY(-50%) rotate(-90deg);
  width:10px;height:7px;background:var(--blue);z-index:1;
  clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%);
}
@media(max-width:900px){
  .wf-mini{flex-direction:column}
  .wf-mini .wm:not(:last-child)::after{
    top:auto;right:auto;bottom:-9px;left:50%;transform:translateX(-50%) rotate(0);
  }
}

/* ---------- Pain rows (list, not cards) ---------- */
.pain-rows{border-top:1px solid var(--line)}
.pain-rows>div{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--line);
}
.pain-rows .chev{flex:none;transform:translateY(-1px)}
.pain-rows b{flex:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--white);min-width:150px}
.pain-rows span{color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:560px){
  .pain-rows>div{flex-wrap:wrap;gap:8px 12px}
  .pain-rows b{min-width:0}
  .pain-rows span{flex-basis:100%;padding-left:24px}
}

/* ---------- Point-of-view columns (borderless) ---------- */
.pov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:left;max-width:960px;margin:40px auto 0}
.pov-grid>div{border-left:1px solid var(--line2);padding-left:20px}
.pov-grid b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;margin-bottom:6px}
.pov-grid p{color:var(--muted);font-size:13px;line-height:1.6}
@media(max-width:760px){.pov-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- Foundation services (compact, secondary) ---------- */
.found-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.found{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 18px;align-items:center;
  background:var(--cell);padding:16px 20px;transition:background .25s;
}
.found:hover{background:var(--raise)}
.found b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.found .fd{grid-column:1;color:var(--muted);font-size:12.5px;max-width:520px}
.found .chip{grid-column:2;grid-row:1/3}
.found .svc-cta{grid-column:3;grid-row:1/3}
@media(max-width:640px){
  .found{grid-template-columns:1fr auto}
  .found .chip{grid-column:2;grid-row:1}
  .found .svc-cta{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:4px}
}


/* ==========================================================
   Live workflow canvas — conditional routing (V3.1).
   Automation-builder feel: grid canvas, connectors, branch
   split/merge. CSS/JS only. Understated premium motion.
========================================================== */
.lw-canvas{
  border:1px solid var(--line2);border-radius:14px;position:relative;overflow:hidden;
  background:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0/22px 22px,
    var(--cell);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.lw-canvas::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 45% at 50% 0%, rgba(46,107,255,.08), transparent 65%);
}
.lw-head{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(6,7,9,.45);
}
.lw-name{display:inline-flex;align-items:center;gap:10px;min-width:0}
.lw-name svg{width:16px;height:18px;flex:none;fill:var(--white)}
.lw-name svg .inner{fill:var(--blue)}
.lw-name b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;white-space:nowrap}
.lw-run{display:inline-flex;align-items:center;gap:8px;flex:none}
.lw-run .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
@keyframes lwRun{0%,100%{opacity:1}50%{opacity:.3}}
.lw-canvas.running .lw-run .dot{animation:lwRun 1.2s ease-in-out infinite}

.lw-chain{position:relative;z-index:1;padding:20px 20px 22px;max-width:520px;margin:0 auto}

/* ---- nodes ---- */
.lw-node{
  position:relative;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:11px;background:#080A0E;
  padding:11px 14px;max-width:340px;margin:0 auto;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.lw-node::before,.lw-node::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--line2);
  transition:border-color .35s, background .35s;
}
.lw-node::before{top:-4px}
.lw-node::after{bottom:-4px}
.lw-chain>.lw-node:first-child::before,
.lw-chain>.lw-node:last-child::after{display:none}
.lw-glyph{
  flex:none;width:30px;height:30px;border:1px solid var(--line2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:#07090C;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--muted);
  transition:border-color .35s,color .35s,box-shadow .35s;
}
.lw-mid{flex:1;min-width:0}
.lw-title{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;line-height:1.25}
.lw-sub{display:block;color:var(--muted);font-size:10.5px;line-height:1.4;margin-top:2px}
.lw-badge{
  flex:none;font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 8px;
  transition:color .35s,border-color .35s;
}
/* AI processing dots */
.lw-dots{display:none;gap:3px;margin-top:4px}
.lw-dots i{width:3px;height:3px;border-radius:50%;background:var(--blue2)}
.lw-node.active .lw-dots{display:inline-flex}
@keyframes lwDot{0%,100%{opacity:.25}50%{opacity:1}}
.lw-node.active .lw-dots i{animation:lwDot 1s ease-in-out infinite}
.lw-node.active .lw-dots i:nth-child(2){animation-delay:.18s}
.lw-node.active .lw-dots i:nth-child(3){animation-delay:.36s}
/* approval wait status */
.lw-wait{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px;min-height:12px;transition:color .3s}
.lw-node.active .lw-wait{color:var(--blue2)}
.lw-node.done .lw-wait{color:var(--white)}
/* states */
.lw-node.active{
  border-color:rgba(46,107,255,.55);background:var(--raise);
  box-shadow:0 0 0 1px rgba(46,107,255,.2), 0 8px 26px rgba(46,107,255,.15);
}
.lw-node.active .lw-glyph{border-color:var(--blue);color:var(--blue2);box-shadow:0 0 10px rgba(46,107,255,.3)}
.lw-node.active .lw-badge{color:var(--blue2);border-color:rgba(46,107,255,.45)}
.lw-node.active::after{border-color:var(--blue);background:var(--blue)}
.lw-node.done{border-color:var(--line2);background:#090B10}
.lw-node.done .lw-glyph{border-color:rgba(46,107,255,.4);color:var(--white)}
.lw-node.done .lw-badge{color:var(--white);border-color:var(--line2)}
.lw-node.done::before,.lw-node.done::after{border-color:rgba(46,107,255,.55);background:rgba(46,107,255,.35)}
/* final sync settle glow */
@keyframes lwSync{0%{box-shadow:0 0 0 1px rgba(46,107,255,.35),0 8px 30px rgba(46,107,255,.28)}100%{box-shadow:0 0 0 1px rgba(46,107,255,.12),0 6px 20px rgba(46,107,255,.08)}}
.lw-node.done.sync{border-color:rgba(46,107,255,.5);animation:lwSync 1.4s ease-out forwards}

/* ---- straight connectors ---- */
.lw-link{
  position:relative;width:2px;height:22px;margin:0 auto;
  background:var(--line);border-radius:1px;overflow:hidden;
}
.lw-link::after{
  content:"";position:absolute;left:0;top:-10px;width:100%;height:10px;
  background:linear-gradient(180deg,transparent,var(--blue2));opacity:0;
}
.lw-link.flow{background:rgba(46,107,255,.35)}
.lw-link.flow::after{opacity:1;animation:lwFlow 1s linear infinite}
@keyframes lwFlow{from{top:-10px}to{top:22px}}

/* ---- branch fork / merge ---- */
.lw-fork{position:relative;height:26px;width:calc(100% - 30px);margin:0 auto}
.lw-fork i{position:absolute;background:var(--line);transition:background .35s}
.lw-fork .fc{left:50%;top:0;width:2px;height:9px;transform:translateX(-50%)}
.lw-fork .fh{left:calc(16.66% - 1px);right:calc(16.66% - 1px);top:9px;height:2px}
.lw-fork .fl{left:16.66%;top:9px;bottom:0;width:2px;transform:translateX(-50%)}
.lw-fork .fm{left:50%;top:9px;bottom:0;width:2px;transform:translateX(-50%)}
.lw-fork .fr{left:83.33%;top:9px;bottom:0;width:2px;transform:translateX(-50%)}
.lw-fork.rev{transform:scaleY(-1)}
.lw-fork.flow i{background:rgba(46,107,255,.5)}

/* ---- branch group ---- */
.lw-branches{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lw-rlabel{display:none}
.lw-mini{
  position:relative;border:1px solid var(--line);border-radius:10px;background:#080A0E;
  padding:10px 11px;text-align:left;
  transition:border-color .3s, background .3s, box-shadow .3s, opacity .4s;
}
.lw-mini .mono{display:block;font-size:8.5px;color:var(--muted);margin-bottom:5px;transition:color .3s}
.lw-mini b{display:block;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:-.01em;line-height:1.3}
.lw-mini.lit{
  border-color:rgba(46,107,255,.55);background:var(--raise);
  box-shadow:0 0 0 1px rgba(46,107,255,.16), 0 6px 20px rgba(46,107,255,.12);
}
.lw-mini.lit .mono{color:var(--blue2)}
.lw-mini.done{border-color:var(--line2);background:#090B10;box-shadow:none}
.lw-mini.done .mono{color:var(--white)}
/* routing decision: one branch selected per run, others recede */
.lw-mini.sel{
  border-color:rgba(46,107,255,.6);background:var(--raise);
  box-shadow:0 0 0 1px rgba(46,107,255,.18), 0 6px 20px rgba(46,107,255,.12);
}
.lw-mini.sel .mono{color:var(--blue2)}
.lw-mini.dim{opacity:.4}
/* only the chosen route's drop/rise line carries the strong flow */
.lw-fork.flow.r0 .fl,.lw-fork.flow.r1 .fm,.lw-fork.flow.r2 .fr{background:var(--blue2)}

.lw-foot{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 18px;border-top:1px solid var(--line);background:rgba(6,7,9,.45);
}

/* ---- mobile: branches collapse into one compact routing panel ---- */
@media(max-width:560px){
  .lw-chain{padding:16px 12px 18px}
  .lw-sub{display:none}
  .lw-node{padding:10px 12px}
  .lw-link{height:18px}
  @keyframes lwFlow{from{top:-10px}to{top:18px}}
  .lw-fork{width:2px;height:16px}
  .lw-fork i{display:none}
  .lw-fork{background:var(--line)}
  .lw-fork.flow{background:rgba(46,107,255,.5)}
  .lw-branches{
    grid-template-columns:1fr;gap:6px;
    border:1px solid var(--line);border-radius:11px;background:rgba(8,10,14,.6);
    padding:10px;
  }
  .lw-rlabel{display:block;font-size:8.5px;color:var(--muted);padding:0 1px 2px}
  .lw-mini{padding:9px 10px}
}
@media (prefers-reduced-motion:reduce){
  .lw-canvas.running .lw-run .dot{animation:none}
  .lw-link.flow::after{animation:none;opacity:0}
  .lw-node.active .lw-dots i{animation:none}
  .lw-node.done.sync{animation:none;box-shadow:0 0 0 1px rgba(46,107,255,.12)}
}


/* ==========================================================
   Receptionist example workflow — dark-native (V3.4).
   Drawn onto the section: no card, no white panel. Local dot
   grid fading at the edges. Compact nodes with ports, curved
   SVG connectors. Uses site tokens throughout.
========================================================== */
.rf-flow{
  position:relative;max-width:420px;width:100%;margin:0 auto;
  aspect-ratio:400/500;
}
.rf-flow::before{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 46%, #000 40%, transparent 76%);
  mask-image:radial-gradient(ellipse 72% 66% at 50% 46%, #000 40%, transparent 76%);
}
.rf-tag{
  position:absolute;top:-16px;left:50%;transform:translate(-50%,-100%);
  z-index:2;text-align:center;line-height:1.8;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.rf-tag b{display:block;font-weight:500;color:#C7CFDC}
/* wires + ports (SVG layer) */
.rf-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rf-wires path{fill:none;stroke:rgba(148,163,184,.28);stroke-width:1.5;vector-effect:non-scaling-stroke}
/* Continuous stroke reveal: full-length dash, offset driven per-frame by
   the JS timeline (100 -> 0, linear, scaled to path length). The same
   dash configuration is kept at completion — no switch, no snap. Colour,
   width and opacity stay constant while drawing and when complete;
   visibility comes from the offset alone. */
.rf-wires path.sig{
  stroke:var(--blue);stroke-width:1.8;opacity:1;
  stroke-dasharray:100 100;stroke-dashoffset:100;
}
.rf-wires path.sig.fade{opacity:0;transition:opacity .6s ease}
.rf-wires circle{
  fill:#0A0D12;stroke:rgba(148,163,184,.4);stroke-width:1.5;
  transition:stroke .35s, fill .35s;
}
.rf-wires circle.lit{stroke:var(--blue);fill:rgba(46,107,255,.55)}

/* nodes: compact icon tiles.
   Sized as a fraction of the board so tile edges stay constant in SVG
   units (42/54/46 of 400) — connectors meet ports at every width. */
.rf-node{position:absolute;transform:translate(-50%,-50%);z-index:1;width:10.5%}
.rf-node.big{width:13.5%}
.rf-n-book,.rf-n-human,.rf-n-sum{width:11.5%}
.rf-tile{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;border-radius:12px;
  background:#0A0D12;border:1px solid var(--line2);
  transition:border-color .4s, box-shadow .4s, background .4s;
}
.rf-node.big .rf-tile{border-radius:14px}
.rf-tile svg{width:46%;height:46%;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.rf-node.lit .rf-tile{
  border-color:rgba(46,107,255,.6);background:var(--raise);
  box-shadow:0 0 0 4px rgba(46,107,255,.08), 0 8px 24px rgba(46,107,255,.12);
}
.rf-node.lit .rf-tile svg{stroke:var(--blue2)}
.rf-node.hot .rf-tile{
  border-color:var(--blue);
  box-shadow:0 0 0 5px rgba(46,107,255,.14), 0 10px 30px rgba(46,107,255,.2);
}
/* labels */
.rf-side{
  position:absolute;top:50%;transform:translateY(-50%);
  left:calc(100% + 13px);right:auto;text-align:left;white-space:nowrap;
}
.rf-side b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;color:#C7CFDC;transition:color .4s}
/* dedicated description area beneath the receptionist node.
   Board-relative width (37% = 148 SVG units, x 126-274) so the split
   wires (x <= 113 / >= 287 in that band) never cross it at any width. */
.rf-cap{
  position:absolute;left:31.5%;top:36.5%;width:37%;
  text-align:center;z-index:1;
}
.rf-cap b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;color:#C7CFDC;transition:color .4s}
.rf-cap span{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px}
.rf-cap.lit b{color:var(--white)}
.rf-under{--u:1;
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(100% + 9px);text-align:center;width:max-content;max-width:260%;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:-.01em;
  line-height:1.3;color:#C7CFDC;transition:color .4s;
}
/* 260% of an 11.5%-wide node = ~30% of the board = 120 SVG units:
   branch labels span x 50-170 / 230-350 while merge wires stay x>=176/<=224 in that band. */
.rf-node.lit .rf-side b,.rf-node.lit .rf-under{color:var(--white)}
/* pause / play control */
.rf-ctl{
  position:absolute;right:-7px;bottom:-13px;z-index:2;
  width:44px;height:44px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s;
}
.rf-ctl:hover{background:var(--raise)}
.rf-ctl:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rf-ctl svg{width:10px;height:10px;fill:var(--muted)}
.rf-ctl .i-play{display:none}
.rf-ctl[aria-pressed="true"] .i-pause{display:none}
.rf-ctl[aria-pressed="true"] .i-play{display:block}

@media(max-width:640px){
  .rf-flow{max-width:360px}
  .rf-side b{font-size:12.5px}
  .rf-cap span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .rf-ctl{display:none}
}

/* Logo colour via inheritance for <use> instances (robust across browsers) */
.brand svg,.sum-head svg,.report-head svg,.lw-name svg{color:#fff}


/* ==========================================================
   Cost cards — homepage "Every repeated task has a cost."
   Compact hover info cards, centred grid. (V8)
========================================================== */
.cost-wrap{max-width:960px;margin:36px auto 0}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:14px}
.cost-card{
  position:relative;text-align:left;
  background:rgba(10,12,16,.72);backdrop-filter:blur(4px);
  border:1px solid var(--line2);border-radius:14px;
  padding:20px 18px 16px;
  transition:transform .35s ease, border-color .35s, box-shadow .35s, background .35s;
}
@media(hover:hover){
  .cost-card:hover{
    transform:translateY(-4px);
    border-color:rgba(46,107,255,.5);background:rgba(15,18,26,.85);
    box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(46,107,255,.12);
  }
}
.cost-card b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--white)}
.cost-card p{margin:7px 0 14px;color:var(--muted);font-size:12.8px;line-height:1.55}
.cost-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);
  border:1px solid rgba(46,107,255,.28);background:rgba(46,107,255,.08);
  padding:5px 10px;border-radius:999px;
}
.cost-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px rgba(46,107,255,.5)}
@media(max-width:480px){
  .cost-grid{grid-template-columns:1fr;gap:11px}
  .cost-card{padding:17px 16px 14px}
}


/* ==========================================================
   V8 top-half polish: one continuous blue-grid visual system,
   balanced headings, translucent cards over the grid.
========================================================== */
/* the hero's grid treatment, reusable on following sections */
.grid-sec{position:relative}
.grid-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:
    radial-gradient(ellipse 46% 40% at 50% 16%, rgba(46,107,255,.1), transparent 68%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/25% 100%;
  -webkit-mask-image:radial-gradient(ellipse 88% 92% at 50% 42%, #000 18%, transparent 82%);
  mask-image:radial-gradient(ellipse 88% 92% at 50% 42%, #000 18%, transparent 82%);
}
.grid-sec > .wrap{position:relative}

/* balanced section heading (no one-word orphan lines) */
.sec-h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;
  line-height:1.12;margin:14px auto 0;
  text-wrap:balance;
}


/* ==========================================================
   V8.1 background cohesion: one dark base, restrained glows.
========================================================== */
.glow-sec{position:relative}
.glow-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 50% 0%, rgba(46,107,255,.08), transparent 70%);
}
.glow-sec > .wrap{position:relative}


/* ==========================================================
   V8.2 — one continuous homepage environment.
   A single fixed background layer runs hero -> footer:
   layered navy depth gradients + a subtle interconnect
   pattern (fine grid, slate micro-nodes on intersections,
   sparse electric-blue nodes). Sections above it stay
   transparent; structure comes from spacing + hairlines.
   Decorative only: pointer-events none, behind all content.
========================================================== */
.home-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 42% at 50% -4%, rgba(46,107,255,.13), transparent 62%),
    radial-gradient(ellipse 44% 34% at 10% 38%, rgba(46,107,255,.05), transparent 68%),
    radial-gradient(ellipse 46% 36% at 90% 66%, rgba(46,107,255,.05), transparent 68%),
    radial-gradient(ellipse 55% 42% at 50% 104%, rgba(46,107,255,.1), transparent 66%),
    linear-gradient(180deg, #05070C 0%, #060709 30%, #05080D 64%, #060709 100%);
}
.home-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 1.5px at center, rgba(46,107,255,.42) 99%, transparent 100%) 0 0/288px 288px,
    radial-gradient(circle 1px at center, rgba(140,160,200,.22) 99%, transparent 100%) 72px 72px/144px 144px,
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px) 0 0/72px 100%;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 38%, rgba(0,0,0,.5) 68%, #000 100%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 38%, rgba(0,0,0,.5) 68%, #000 100%);
}


/* quiet inline text link (readiness section secondary) */
.quiet-link{
  font-size:13px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .2s;
}
.quiet-link:hover{color:var(--white)}


/* ==========================================================
   Compact results preview (homepage readiness section).
   Scoped to .report-mini so the full-size report on the
   readiness page is untouched.
========================================================== */
.report-mini .report{padding:20px 20px 18px}
.report-mini .report-head{margin-bottom:16px}
.report-mini .report-head .mono{font-size:8.5px;letter-spacing:.14em}
.report-mini .score-row{margin-bottom:16px}
.report-mini .score-donut{width:min(170px,56vw)}.report-mini .score-big small{max-width:88px;margin:7px auto 0;font-size:8.5px;letter-spacing:.09em;line-height:1.45}
.report-mini .score-big span{line-height:1}
.report-mini .report-band{text-align:center;font-family:var(--display);font-weight:700;font-size:15px;margin:-6px 0 4px;color:var(--white)}.report-mini .report-note{text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted);margin:0 0 16px}.report-mini .prev b{text-align:right;letter-spacing:.08em;font-size:10px}.report-mini .report-foot{gap:12px}.report-mini .report-foot .mono{font-size:8.5px;letter-spacing:.1em;line-height:1.4}
.report-mini .score-big{font-size:42px}
.report-mini .score-big small{max-width:88px;margin:7px auto 0;font-size:8.5px;letter-spacing:.09em;line-height:1.45}
.report-mini .bars{gap:9px}
.report-mini .bar label{font-size:11.5px;margin-bottom:4px}
.report-mini .bar label b{font-size:10.5px}
.report-mini .prev{margin-top:14px}
.report-mini .prev div{padding:8px 0;font-size:12px}
.report-mini .report-foot{margin-top:14px}
.report-mini .report-foot .mono{font-size:8.5px}


/* Mobile hero: fill the first viewport with the hero content so the
   Automation Impact card begins below the fold. Local spacing around
   the card (34px above / 36px below) is unchanged once scrolling. */
@media(max-width:640px){
  .hero-inner{min-height:calc(100svh - 96px)}
}


/* Results card reveal pacing: card fades in immediately (shared reveal),
   the score circle starts .4s after visible, the category bars follow
   from .6s with a subtle 70ms stagger. One-shot; no replay. */
.report.in .bar:nth-child(1) .bar-f{transition-delay:.6s}
.report.in .bar:nth-child(2) .bar-f{transition-delay:.67s}
.report.in .bar:nth-child(3) .bar-f{transition-delay:.74s}
.report.in .bar:nth-child(4) .bar-f{transition-delay:.81s}
.report.in .bar:nth-child(5) .bar-f{transition-delay:.88s}
.report.in .bar:nth-child(6) .bar-f{transition-delay:.95s}
@media (prefers-reduced-motion:reduce){
  .score-donut .progress,.report.in .bar-f{transition-delay:0s !important}
}


/* ==========================================================
   AI Agents page: outcome bullet list (shared components
   cover everything else on the page).
========================================================== */
.agent-points{max-width:460px;margin:26px auto 0;padding:0;text-align:left;display:grid;gap:11px}
.agent-points li{list-style:none;display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:13.5px;line-height:1.55}
.agent-points li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:2px;margin-top:6px;
  background:var(--blue);box-shadow:0 0 8px rgba(46,107,255,.45);
}


/* ==========================================================
   AI Agents page: offer cards + mini workflow strip.
========================================================== */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;max-width:780px;margin:34px auto 0;text-align:left}
.offer{display:flex;flex-direction:column;padding:20px 18px 18px}
.offer .mono.k{font-size:9px;color:var(--blue2);letter-spacing:.18em}
.offer .price{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.015em;color:var(--white);margin-top:10px;line-height:1.25}
.offer .sub{color:var(--muted);font-size:12.5px;line-height:1.55;margin:8px 0 0}
.offer .agent-points{margin:16px 0 0;max-width:none;gap:9px}
.offer .agent-points li{font-size:13px}
.offer .h-ctas{margin-top:auto;padding-top:20px;justify-content:flex-start}
.mini-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:26px}
.mini-flow .arr{color:var(--muted);font-size:12px;line-height:1}

/* conversion pricing display inside offer cards */
.offer .price-big{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;color:var(--white);margin-top:12px}
.offer .price-big small{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--muted);margin-right:6px}
.offer .price-per{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);margin-top:6px}
.offer .note{color:var(--muted);font-size:11.5px;line-height:1.5;margin:10px 0 0}
.offer .agent-points{margin:14px 0 0;gap:7px}
.offer .agent-points li{font-size:12.5px;line-height:1.45}
.offer .agent-points li::before{margin-top:5px}
.offer .h-ctas{padding-top:18px}

/* setup fee, kept visibly separate from the ongoing price */
.offer .setup-line{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:12px;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(46,107,255,.28);background:rgba(46,107,255,.07);
  font-size:12px;color:var(--muted);
}
.offer .setup-line b{font-family:var(--display);font-weight:700;font-size:14px;color:var(--white);letter-spacing:-.01em}

/* "What's included" detail blocks under the offer cards (not pricing cards) */
.incl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px 28px;max-width:780px;margin:30px auto 0;text-align:left}
.incl{padding-top:16px;border-top:1px solid var(--line2)}
.incl h3{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--white);margin:0}
.incl .agent-points{margin:12px 0 0;max-width:none;gap:7px}
.incl .agent-points li{font-size:12.5px;line-height:1.45}
.incl .agent-points li::before{margin-top:5px}
.incl .note{color:var(--muted);font-size:11.5px;line-height:1.5;margin:12px 0 0}


/* ==========================================================
   Bespoke AI Systems — example system flow (static diagram,
   same visual family as the workflow board; different,
   interconnected topology: split, approval, hub, handover).
========================================================== */
.sf-flow{position:relative;max-width:420px;width:100%;margin:0 auto;aspect-ratio:400/560}
.sf-flow::before{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 40%, transparent 76%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 40%, transparent 76%);
}
.sf-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sf-wires path{fill:none;stroke:rgba(148,163,184,.3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sf-wires path.live{
  stroke:var(--blue);stroke-width:1.6;opacity:.7;
  stroke-dasharray:4 9;animation:sfFlow 1.8s linear infinite;
}
@keyframes sfFlow{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
.sf-wires circle{fill:#0A0D12;stroke:rgba(148,163,184,.45);stroke-width:1.5}
.sf-wires circle.hub{stroke:var(--blue);fill:rgba(46,107,255,.55)}
.sf-node{position:absolute;transform:translate(-50%,-50%);z-index:1;width:10.5%}
.sf-node.big{width:13.5%}
.sf-node.mid{width:11.5%}
.sf-node .rf-tile{width:100%}
.sf-node.lit .rf-tile{
  border-color:rgba(46,107,255,.6);background:var(--raise);
  box-shadow:0 0 0 4px rgba(46,107,255,.08), 0 8px 24px rgba(46,107,255,.12);
}
.sf-node.lit .rf-tile svg{stroke:var(--blue2)}
.sf-node .rf-side{left:calc(100% + 13px)}
.sf-node .rf-side b{white-space:normal;max-width:132px}
.sf-node .rf-under{max-width:260%}
.sf-tag{
  position:absolute;top:-16px;left:50%;transform:translate(-50%,-100%);
  z-index:2;text-align:center;line-height:1.8;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.sf-tag b{display:block;font-weight:500;color:#C7CFDC}
@media(max-width:640px){.sf-flow{max-width:360px}}
@media (prefers-reduced-motion:reduce){.sf-wires path.live{animation:none;stroke-dasharray:none;opacity:.55}}


/* ==========================================================
   Bespoke AI Systems page: static system-flow diagram (reuses
   the workflow node language, no engine), side-label variant.
========================================================== */
.rf-wires path.dash{stroke-dasharray:4 5;opacity:.75}
.sf-key{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}


/* ==========================================================
   Bespoke page: explicit 6-card grids (3 / 2 / 1 columns)
========================================================== */
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:960px;margin:34px auto 0;text-align:left}
.grid6 .cost-card{height:100%}
@media(max-width:1000px){.grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid6{grid-template-columns:minmax(0,1fr);gap:11px}}

/* ==========================================================
   AI workforce tree (ht-), bespoke page. One continuous
   hierarchy laid out with CSS grid; connectors are measured
   from the real node boxes (icon + label as one group) and
   drawn into an overlay SVG as unique segments. Blue infill
   is driven per-frame by the component's own controller.
========================================================== */
.ht-tree{position:relative;width:100%;max-width:820px;margin:0 auto}
.ht-tree::before{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 50%, #000 40%, transparent 76%);
  mask-image:radial-gradient(ellipse 72% 66% at 50% 50%, #000 40%, transparent 76%);
}
.ht-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ht-wires path{fill:none;stroke:rgba(148,163,184,.4);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ht-wires path.ht-sig{stroke:var(--blue);stroke-width:2;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:1}
.ht-wires path.ht-sig.fade{opacity:0;transition:opacity .7s ease}
/* restrained highlights: border/background only, no movement */
.ht-node.lit .ht-tile{border-color:rgba(46,107,255,.65);background:var(--raise);box-shadow:0 0 0 4px rgba(46,107,255,.08)}
.ht-node.lit .ht-tile svg{stroke:var(--blue2)}
.ht-node.lit .ht-lab{color:var(--white)}
.ht-task.lit .ht-lab{color:#D3DAE6}
.ht-coord.lit .ht-tile{box-shadow:0 0 0 5px rgba(46,107,255,.12),0 8px 24px rgba(46,107,255,.14)}
.ht-ctl{
  position:absolute;right:-6px;top:-54px;z-index:3;width:44px;height:44px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:background .25s
}
.ht-ctl:hover{background:var(--raise)}
.ht-ctl:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ht-ctl svg{width:10px;height:10px;fill:var(--muted)}
.ht-ctl .i-play{display:none}
.ht-ctl[aria-pressed="true"] .i-pause{display:none}
.ht-ctl[aria-pressed="true"] .i-play{display:block}
@media (prefers-reduced-motion:reduce){ .ht-ctl{display:none} }
.ht-tag{position:absolute;top:-16px;left:50%;transform:translate(-50%,-100%);z-index:2;text-align:center;line-height:1.8;white-space:nowrap;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* grid: coordinator row, department row, task row */
.ht-top{display:flex;justify-content:center;padding-bottom:40px}
.ht-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.ht-col{display:flex;flex-direction:column;align-items:center}
.ht-tasks{display:flex;justify-content:center;gap:0 14px;padding-top:34px;width:100%}
/* node = tile + label (label reserved; connectors go around it) */
.ht-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.ht-tile{border-radius:12px;background:#0A0D12;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,box-shadow .2s}
.ht-tree.fading .ht-tile{transition-duration:.7s}
.ht-lab{transition:color .2s}
.ht-tree.fading .ht-lab{transition-duration:.7s}
.ht-tile svg{stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ht-lab{margin-top:6px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:-.01em;line-height:1.2;color:#C7CFDC}
.ht-lab span{display:block}
.ht-coord .ht-tile{width:52px;height:52px;border-radius:14px;border-color:rgba(46,107,255,.45)}
.ht-coord .ht-tile svg{width:24px;height:24px;stroke:var(--blue2)}
.ht-dept .ht-tile{width:44px;height:44px}
.ht-dept .ht-tile svg{width:20px;height:20px}
.ht-task .ht-tile{width:34px;height:34px;border-radius:9px;border-color:rgba(148,163,184,.32);background:rgba(10,13,18,.75)}
.ht-task .ht-tile svg{width:16px;height:16px;stroke:rgba(138,147,166,.95);stroke-width:1.6}
.ht-task .ht-lab{font-weight:600;font-size:11px;color:var(--muted);max-width:100px}
.ht-lab .ht-short{display:none}
/* mobile: three equal columns, tasks stacked with a branching rail */
@media(max-width:740px){
  .ht-cols{gap:0 6px}
  .ht-tasks{flex-direction:column;align-items:center;gap:26px 0;padding-top:26px}
  .ht-task .ht-lab{max-width:92px}
  .ht-lab .ht-full{display:none}
  .ht-lab .ht-short{display:block}
  .ht-top{padding-bottom:34px}
}
.ht-cap{max-width:560px;margin:24px auto 0;font-size:13px;line-height:1.6;color:#C7CFDC;text-align:center}


/* AI Plugins page: 4-up flow cards (4 / 2 / 1) */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:960px;margin:34px auto 0;text-align:left}
.grid4 .cost-card{height:100%}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid4{grid-template-columns:minmax(0,1fr);gap:11px}}


/* AI Plugins: software compatibility grid — typeset wordmark badges in the site type
   (monochrome / electric blue). `.tool-mark` is a prepared slot for an official
   monochrome logo SVG from each vendor's brand kit; when present it renders before
   the name. Never use initials as stand-in marks. */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;max-width:880px;margin:30px auto 0}
.tool{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 12px;
  border:1px solid rgba(46,107,255,.28);background:rgba(46,107,255,.06);border-radius:10px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:-.015em;color:#E1E6EF;white-space:nowrap;
}
.tool .tool-mark{display:inline-flex;width:18px;height:18px;flex:none}
.tool .tool-mark svg{width:100%;height:100%;fill:var(--blue2)}
.tool.more{border-style:dashed;color:var(--muted);background:transparent;font-weight:600}
/* example card software tag */
.cost-card .tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
.cost-card .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
@media(max-width:600px){.tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tool{font-size:13px;min-height:42px;padding:6px 8px}}


/* Website builder refinements (V13) */
#builder{scroll-margin-top:96px}
#communication-agents{scroll-margin-top:80px}
.opt-group{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--cell);padding:10px 20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.opt-group b{font-weight:500;color:var(--blue2)}
.opt-detail{background:var(--cell);padding:0 20px 14px 52px}
.opt-detail summary{cursor:pointer;list-style:none;font-size:12px;color:var(--blue2);padding:2px 0}
.opt-detail summary::-webkit-details-marker{display:none}
.opt-detail summary::before{content:"+ "}
.opt-detail[open] summary::before{content:"\2013 "}
.opt-detail p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.sum-dep{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.sum-dep b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--white)}
.sum-note.sep{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
@media(max-width:640px){.opt{padding:13px 16px}.opt-detail{padding:0 16px 12px 48px}}

/* ===== Insights ===== */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ins-card{display:flex;flex-direction:column;background:var(--cell);border:1px solid var(--line2);border-radius:16px;padding:12px 12px 18px;transition:border-color .25s}
.ins-card>:not(.ins-art){margin-left:8px;margin-right:8px}
.ins-card:hover{border-color:rgba(46,107,255,.45)}
.ins-art{aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse 80% 90% at 50% 110%,rgba(46,107,255,.14),transparent 70%),#0a0f18;margin-bottom:14px}
.ins-art svg{display:block;width:100%;height:100%}
.ins-topic{display:block;font-size:10px;letter-spacing:.16em;color:var(--blue2);margin-bottom:8px}
.ins-card h2{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:0 0 8px}
.ins-card p{font-size:14px;line-height:1.6;color:#b2baca;margin:0 8px 14px;flex:1}
.ins-link{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.ins-link::after{content:"→";color:var(--blue2)}
.ins-link:hover{color:var(--blue2)}
.ins-link:focus-visible{outline:2px solid #7fa5ff;outline-offset:4px;border-radius:4px}
.ins-soon{font-size:10px;letter-spacing:.14em;color:#98a2b3;border:1px solid var(--line2);border-radius:6px;padding:6px 9px;width:max-content}
@media(max-width:900px){.ins-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ins-grid{grid-template-columns:1fr;gap:14px}}
/* ===== Article layout ===== */
.article-hero{padding:64px 0 28px}
.article-hero .wrap{max-width:760px}
.article-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.026em;line-height:1.08;font-size:clamp(30px,4.4vw,48px);margin:14px 0 0;text-wrap:balance}
.article-hero .article-standfirst{font-size:17px;line-height:1.6;color:#b9c1d0;margin:16px 0 0;max-width:640px}
.article-cover{margin-top:22px;border-radius:12px;overflow:hidden;max-width:640px;background:radial-gradient(ellipse 80% 90% at 50% 110%,rgba(46,107,255,.14),transparent 70%),#0a0f18}.article-cover svg{display:block;width:100%;height:auto;max-height:240px}
.article-hero .article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#98a2b3}
.article-body{max-width:720px;margin:0 auto;padding:0 0 48px;font-size:16px;line-height:1.7;color:#cdd3de}
.article-body h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.2;color:var(--white);margin:36px 0 12px}
.article-body h3{font-family:var(--display);font-weight:700;font-size:18px;color:var(--white);margin:26px 0 8px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body li{margin:6px 0}
.article-body strong{color:var(--white)}
.article-body a{color:var(--blue2)}
.article-note{border-left:3px solid var(--blue);background:rgba(46,107,255,.07);border-radius:0 10px 10px 0;padding:14px 18px;margin:22px 0}
.article-note p{margin:0;font-size:15px}
.article-takeaways{border:1px solid var(--line2);border-radius:14px;padding:18px 20px;margin:28px 0}
.article-takeaways .mono{display:block;margin-bottom:8px;color:var(--blue2);font-size:10px;letter-spacing:.16em}
.article-takeaways ul{margin:0;padding-left:20px}
.article-cta{border:1px solid var(--line2);border-radius:16px;padding:24px;margin:8px auto 0;max-width:720px;background:var(--cell)}
.article-cta h3{font-family:var(--display);font-size:20px;margin:0 0 6px}
.article-cta p{font-size:14px;color:#b2baca;margin:0 0 16px}
.article-cta .cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.article-page-wrap{max-width:760px;margin:0 auto}
@media(max-width:640px){.article-hero{padding:64px 0 22px}.article-body{font-size:15.5px}.article-cta{padding:20px}}

/* ===== About ===== */
.about-intro{max-width:680px;margin:0 auto;text-align:center}
.about-intro p{font-size:16.5px;line-height:1.7;color:#cdd3de;margin:0 0 14px}
.about-intro p:last-child{margin-bottom:0}
.about-head{text-align:center;max-width:620px;margin:0 auto 28px}
.about-head h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 10px}
.about-head .sec-sub{margin:0 auto;max-width:520px}
.founder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.founder{display:flex;flex-direction:column;background:var(--cell);border:1px solid var(--line2);border-radius:16px;padding:22px 20px 24px;transition:border-color .25s}
.founder:hover{border-color:rgba(46,107,255,.42)}
.founder-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;background:radial-gradient(ellipse at 30% 20%,rgba(46,107,255,.30),rgba(46,107,255,.08));border:1px solid rgba(46,107,255,.42);font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:#cfe0ff}
.founder-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:1px solid var(--line2)}
.founder h3{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.015em;margin:0 0 6px;overflow-wrap:break-word;hyphens:auto}
.founder-role{font-size:12.5px;letter-spacing:.03em;color:var(--blue2);margin:0 0 12px;line-height:1.5;overflow-wrap:break-word}
.founder p:last-child{font-size:14px;line-height:1.65;color:#b2baca;margin:0}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
@media(max-width:640px){.founder{padding:18px 16px 20px}.founder-role{font-size:12px}.about-intro p{font-size:15.5px}}