:root{
  --ink:#0a1a2e;          /* dark band */
  --ink-2:#102538;        /* dark band, second tone */
  --paper:#eef1f4;        /* light band, cool paper, never pure white */
  --paper-2:#e4e9ee;
  --accent:#38BDF8;       /* sa-blue, for DARK backgrounds only */
  --accent-ink:#0a5c86;   /* sa-blue, darkened for LIGHT backgrounds */
  --accent-2-ink:#06614f; /* sa-teal, darkened for LIGHT backgrounds */
  --accent-2:#2DD4BF;     /* sa-teal */
  --on-dark:#f3f7fa;
  --on-dark-soft:#cbd5e1;
  --on-light:#0a1a2e;
  --on-light-soft:#3d5265;
  --display:'Raleway',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:min(94vw,1760px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-dark);font-family:var(--body);font-size:20px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 32px}

/* ---------- bands ---------- */
.band{padding:112px 0;position:relative}
.band.dark{background:var(--ink);color:var(--on-dark)}
.band.dark-2{background:var(--ink-2);color:var(--on-dark)}
.band.light{background:var(--paper);color:var(--on-light)}
.band.tight{padding:84px 0}

/* ---------- header ---------- */
header{background:var(--ink);border-bottom:1px solid rgba(56,189,248,.16)}
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:18px 32px;max-width:var(--shell);margin:0 auto}
.nav{display:flex;gap:26px;align-items:center;flex-wrap:nowrap;white-space:nowrap;justify-content:flex-end;grid-column:3;grid-row:1;justify-self:end}
.nav a,.nav .drop>button{font-family:var(--body);font-size:17px;font-weight:500;color:var(--on-dark);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;letter-spacing:.01em}
.nav a.here{border-bottom:2px solid var(--accent);padding-bottom:3px}
.nav a:hover,.nav .drop>button:hover{color:var(--accent)}
.drop{position:relative}
.drop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--ink-2);border:1px solid rgba(56,189,248,.22);border-radius:12px;padding:12px 8px;min-width:248px;display:none;z-index:60;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block;padding:10px 16px;border-radius:8px;font-size:16.5px}
.drop-menu a:hover{background:rgba(56,189,248,.12)}
.brandmark{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.brandmark img{height:64px;width:auto}
.brandmark .bt{font-family:var(--display);font-weight:300;letter-spacing:.34em;font-size:13px;text-transform:uppercase;color:var(--on-dark-soft);padding-left:.34em}
.socials{display:flex;gap:10px;justify-content:flex-start;grid-column:1;grid-row:1;justify-self:start}
.socials a{width:34px;height:34px;border:1px solid rgba(243,247,250,.45);border-radius:50%;display:grid;place-items:center;font-size:13px;text-decoration:none;color:var(--on-dark);font-family:var(--mono)}
.socials a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--display);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:22px;text-align:center;margin:0 0 34px;padding-left:.2em}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.1;margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(38px,5vw,70px)}
h2{font-size:clamp(32px,4.1vw,58px)}
h3{font-size:clamp(26px,3vw,40px);font-weight:400}
.lede{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.5vw,34px);line-height:1.24;text-align:center;margin:26px auto 0;max-width:980px;text-wrap:balance}
.note{font-size:19px;line-height:1.6;max-width:800px;margin:26px auto 0;text-align:center;color:var(--on-light-soft)}
.dark .note,.dark-2 .note{color:var(--on-dark-soft)}
.where{font-weight:700;font-size:19px;text-align:center;margin:22px 0 0}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* the typographic ladder: alternating small and large lines, her signature block */
.ladder{margin:0;max-width:900px}
.ladder p{margin:0 0 2px}
.ladder .sm{font-family:var(--display);font-weight:300;font-size:clamp(20px,1.85vw,26px);line-height:1.3}
.ladder .lg{font-family:var(--display);font-weight:400;font-size:clamp(27px,3vw,42px);line-height:1.16}
.ladder .xl{font-family:var(--display);font-weight:500;font-size:clamp(31px,3.6vw,50px);line-height:1.12}
.ladder.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- marker annotations (her signature device, SA blue) ---------- */
.mark{position:relative;display:inline-block}
.mark svg{position:absolute;left:-3%;width:106%;height:auto;pointer-events:none;overflow:visible}
.mark.under svg{bottom:-.22em}
.mark.ring svg{top:-.26em;height:1.5em;left:-6%;width:112%}
.mark svg path,.mark svg ellipse{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--body);font-size:19px;font-weight:500;padding:19px 42px;border-radius:999px;text-decoration:none;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(10,26,46,.28)}
.btn-dark:hover{box-shadow:0 16px 40px rgba(10,26,46,.4)}
.btn-light{background:var(--paper);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.btn-accent{background:var(--accent);color:#04121f;font-weight:600;box-shadow:0 12px 34px rgba(56,189,248,.3)}
.btn-row{display:flex;justify-content:center;margin-top:44px}

/* ---------- two column ---------- */
.two{display:grid;grid-template-columns:1fr 1.06fr;gap:64px;align-items:center}
.two.text-right{grid-template-columns:1.06fr 1fr}

/* ---------- coded visuals ---------- */
.panel{background:linear-gradient(160deg,#071726 0%,#0d2135 55%,#08192a 100%);border:1px solid rgba(56,189,248,.28);border-radius:14px;padding:30px;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 240px at 20% 0%,rgba(56,189,248,.16),transparent 70%);pointer-events:none}
.panel-cap{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}

/* engine table */
.etable{width:100%;border-collapse:collapse;font-size:18px}
.etable th{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8fb6cf;text-align:left;padding:0 0 12px;font-weight:500;border-bottom:1px solid rgba(56,189,248,.24)}
.etable td{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09);color:var(--on-dark)}
.etable td.rate{text-align:right;font-family:var(--mono);font-size:22px;color:var(--accent)}
.etable tr.zero td.rate{color:#fbbf24}
.etable td .den{display:block;font-size:15px;color:#9fb3c4;font-family:var(--body)}

/* meters */
.meter{height:8px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}

/* vs cards */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:52px}
.vs-card{background:linear-gradient(165deg,#08192a,#0e2438);border:1px solid rgba(56,189,248,.3);border-radius:14px;padding:28px}
.vs-tag{display:inline-block;background:var(--accent);color:#04121f;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:99px;margin-bottom:20px;font-weight:500}
.vs-q{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.3;margin:0 0 10px}
.vs-sub{font-size:17px;color:var(--on-dark-soft);margin:0 0 22px}
.vs-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.1);font-size:17px}
.vs-row .dot{width:30px;height:30px;border-radius:50%;background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.4);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--accent);flex:0 0 auto}
.vs-row .pct{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--accent)}
.vs-foot{margin:20px 0 0;font-size:16.5px;color:var(--on-dark-soft);border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.vs-mid{font-family:var(--display);font-size:26px;color:var(--accent);width:64px;height:64px;border-radius:50%;border:1px solid rgba(56,189,248,.45);display:grid;place-items:center;background:#08192a}

/* pillar strip */
.pillars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px}
.pillar{background:linear-gradient(180deg,#0b1f33,#081826);border:1px solid rgba(56,189,248,.26);border-radius:11px;padding:18px 14px;text-align:center}
.pillar .n{font-family:var(--mono);font-size:12.5px;color:var(--accent);letter-spacing:.1em}
.pillar .t{font-family:var(--display);font-weight:500;font-size:15.5px;line-height:1.2;text-transform:uppercase;letter-spacing:.055em;margin:12px 0 10px;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.pillar .d{font-size:14.5px;color:var(--on-dark-soft);line-height:1.4}
.pillar .glyph{height:34px;display:grid;place-items:center}
.pillar .glyph svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.4}

/* carousel */
.rail{display:flex;gap:26px;overflow-x:auto;padding:8px 4px 30px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(10,26,46,.28);border-radius:99px}
.rcard{flex:0 0 330px;scroll-snap-align:start}
.rcard .art{height:238px;border-radius:12px;background:linear-gradient(160deg,#071726,#0e2438);border:1px solid rgba(56,189,248,.3);display:flex;flex-direction:column;justify-content:space-between;padding:22px;position:relative;overflow:hidden}
.rcard .art::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 160px at 30% 10%,rgba(56,189,248,.2),transparent 70%)}
.rcard .art .step{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);position:relative;z-index:1}
.rcard .art .big{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.08;color:var(--on-dark);position:relative;z-index:1}
.rcard h4{font-family:var(--display);font-weight:400;font-size:24px;margin:22px 0 8px}
.rcard .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-light-soft);margin:0 0 12px}
.rcard p{font-size:17.5px;line-height:1.5;color:var(--on-light-soft);margin:0 0 12px}
.rcard p strong{color:var(--on-light)}

/* stats rail */
.stat{margin:0 0 26px}
.stat b{display:block;font-family:var(--mono);font-size:30px;color:var(--accent);font-weight:500;line-height:1.1}
.stat span{display:block;font-size:17.5px;color:var(--on-dark-soft);margin-top:4px}

/* audit checklist */
.checks{margin-top:26px}
.check{padding:18px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:16px;align-items:baseline}
.check .k{font-family:var(--mono);font-size:16px;color:var(--on-dark-soft);flex:1}
.check .v{font-family:var(--mono);font-size:16px;color:#fbbf24;text-align:right}
.check .v.ok{color:var(--accent-2)}

/* founder */
.founder-photo{border-radius:14px;overflow:hidden;border:1px solid rgba(10,26,46,.16);box-shadow:0 30px 70px rgba(10,26,46,.22)}

/* faq */
.faq{max-width:900px;margin:52px auto 0}
.faq details{border-top:1px solid rgba(255,255,255,.16)}
.faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.16)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:30px;font-weight:300;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 60px 28px 0;font-size:18.5px;line-height:1.6;color:var(--on-dark-soft)}
.faq .a p{margin:0 0 14px}
.faq .a p:last-child{margin:0}

/* logo circle */
.circle-logo{width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#12314a,#050f1a 72%);border:1px solid rgba(56,189,248,.3);display:grid;place-items:center;margin:0 auto 46px;padding:44px}
.circle-logo img{width:100%;height:auto}

/* footer */
.site-footer{background:var(--ink);padding:70px 0 54px;border-top:1px solid rgba(56,189,248,.16)}
.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:34px}
.fgrid h5{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;font-weight:500}
.fgrid a{display:block;font-size:17.5px;color:var(--on-dark-soft);text-decoration:none;margin-bottom:11px}
.fgrid a:hover{color:var(--accent)}
.fgrid p{font-size:17.5px;color:var(--on-dark-soft);margin:0 0 11px}
.fbot{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:16.5px;color:#93a7b8}

/* reserved slot, honest placeholder, never a fake asset */
.reserved{border:1.5px dashed rgba(56,189,248,.42);border-radius:14px;padding:34px;text-align:center;background:rgba(56,189,248,.05)}
.reserved .tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.reserved p{margin:0;font-size:17px;color:var(--on-dark-soft)}
.light .reserved p{color:var(--on-light-soft)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .vs{grid-template-columns:1fr;gap:18px}
  .vs-mid{margin:0 auto}
}
@media (max-width:900px){
  body{font-size:19px}
  .band{padding:80px 0}
  .two,.two.text-right{grid-template-columns:1fr;gap:40px}
  .two .visual{order:2}
  .hdr{grid-template-columns:1fr;justify-items:center;gap:18px;padding:16px 20px}
  .nav{justify-content:center;gap:18px;order:2;flex-wrap:wrap;white-space:normal;
    grid-column:auto;grid-row:auto;justify-self:auto}
  .brandmark{order:1;grid-column:auto;grid-row:auto}
  .socials{order:3;justify-content:center;grid-column:auto;grid-row:auto;justify-self:auto}
  .brandmark img{height:56px}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:620px){
  .wrap{padding:0 22px}
  .band{padding:64px 0}
  .eyebrow{font-size:17px;letter-spacing:.16em}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .rcard{flex:0 0 268px}
  .brandmark img{height:48px}
  .fgrid{grid-template-columns:1fr}
  .btn{font-size:18px;padding:17px 32px}
  .faq summary{font-size:20px;padding-right:38px}
  .etable td .den{font-size:14px}
}

/* ── image slots (1:1 with the reference layout) ───────────────────────── */
.figure{margin:0}
.figure img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(56,189,248,.28);display:block}
.light .figure img{border-color:rgba(10,26,46,.14);box-shadow:0 26px 60px rgba(10,26,46,.18)}
.figure figcaption{font-size:16.5px;color:var(--on-dark-soft);margin-top:14px;line-height:1.5;
  text-align:center;max-width:760px;margin-inline:auto}
.light .figure figcaption{color:var(--on-light-soft)}
.figure.wide{max-width:1000px;margin:52px auto 0}
.rcard .art-img{border-radius:12px;overflow:hidden;border:1px solid rgba(10,26,46,.14);box-shadow:0 18px 40px rgba(10,26,46,.16)}
.rcard .art-img img{width:100%;height:238px;object-fit:cover;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:12px 20px;background:var(--accent);color:#04121f}

/* ── multi-page additions ─────────────────────────────────────────────── */
.crumbs{background:var(--ink-2);border-bottom:1px solid rgba(56,189,248,.14);font-family:var(--mono);font-size:13.5px;letter-spacing:.06em}
.crumbs .wrap{display:flex;gap:10px;align-items:center;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--on-dark-soft);text-decoration:none}
.crumbs a:last-child{color:var(--accent)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:#5b7a91}

.phero{padding:96px 0 84px;background:var(--paper);color:var(--on-light);text-align:center}
.phero .eyebrow{margin-bottom:26px}
.phero h1{max-width:1000px;margin:0 auto}
.phero .sub{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.3vw,31px);line-height:1.28;max-width:900px;margin:24px auto 0;text-wrap:balance}
.phero .note{margin-top:22px}

.prose{max-width:860px;margin:0 auto}
.prose h2{font-size:clamp(28px,3.2vw,42px);margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(23px,2.3vw,30px);font-weight:400;margin:38px 0 12px}
.prose p{font-size:19.5px;line-height:1.62;margin:0 0 18px}
.dark .prose p,.dark-2 .prose p{color:var(--on-dark-soft)}
.light .prose p{color:var(--on-light-soft)}
.prose p strong,.prose li strong{color:inherit;font-weight:700}
.light .prose p strong{color:var(--on-light)}
.dark .prose p strong{color:var(--on-dark)}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{font-size:19px;line-height:1.55;padding:11px 0 11px 34px;position:relative;border-bottom:1px solid rgba(10,26,46,.10)}
.dark .prose ul li,.dark-2 .prose ul li{border-color:rgba(255,255,255,.10);color:var(--on-dark-soft)}
.prose ul li::before{content:"";position:absolute;left:6px;top:20px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.prose .lead{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,29px);line-height:1.3}
.light .prose .lead{color:var(--on-light)}

/* pricing / tier cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:start}
.tiers.cols-4{grid-template-columns:repeat(4,1fr);gap:18px}
.tiers.cols-4 .tier{padding:28px 22px}
.tiers.cols-4 .tier h3{font-size:24px}
.tiers.cols-4 .tier .price{font-size:27px}
.tiers.cols-4 .tier ul li{font-size:15.5px;padding-left:24px}
@media (max-width:1200px){ .tiers.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .tiers.cols-4,.tiers{grid-template-columns:1fr} }
.tier{background:linear-gradient(170deg,#0b1f33,#08192a);border:1px solid rgba(56,189,248,.28);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;height:100%}
.light .tier{background:#fff;border-color:rgba(10,26,46,.14);box-shadow:0 20px 50px rgba(10,26,46,.10)}
.tier.feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 60px rgba(56,189,248,.20)}
.tier .step{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.tier h3{font-family:var(--display);font-weight:400;font-size:28px;margin:0 0 6px;line-height:1.15}
.tier .price{font-family:var(--mono);font-size:31px;color:var(--accent);margin:12px 0 4px}
.tier .price small{font-size:15px;color:var(--on-dark-soft);display:block;margin-top:6px;font-family:var(--body);letter-spacing:0}
.light .tier .price small{color:var(--on-light-soft)}
.tier .blurb{font-size:17.5px;line-height:1.5;margin:14px 0 20px;color:var(--on-dark-soft)}
.light .tier .blurb{color:var(--on-light-soft)}
.tier ul{list-style:none;margin:0 0 26px;padding:0}
.tier ul li{font-size:16.5px;line-height:1.45;padding:9px 0 9px 26px;position:relative;border-top:1px solid rgba(255,255,255,.10)}
.light .tier ul li{border-color:rgba(10,26,46,.10)}
.tier ul li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
.tier .btn{margin-top:auto;text-align:center}

/* ladder strip */
.ladder-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.rung{background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.25);border-radius:12px;padding:22px 20px}
.light .rung{background:rgba(56,189,248,.08);border-color:rgba(10,26,46,.12)}
.rung .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.rung h4{font-family:var(--display);font-weight:500;font-size:20px;margin:10px 0 6px;line-height:1.2}
.rung p{font-size:16px;line-height:1.45;margin:0;color:var(--on-dark-soft)}
.light .rung p{color:var(--on-light-soft)}
.rung .pr{font-family:var(--mono);font-size:15px;color:var(--accent-2);margin-top:10px}

/* service grid */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.scard{background:linear-gradient(170deg,#0b1f33,#08192a);border:1px solid rgba(56,189,248,.26);border-radius:14px;padding:30px 26px;text-decoration:none;color:inherit;display:block;transition:transform .18s ease,border-color .18s ease}
.light .scard{background:#fff;border-color:rgba(10,26,46,.12);box-shadow:0 16px 40px rgba(10,26,46,.09)}
.scard:hover{transform:translateY(-3px);border-color:var(--accent)}
.scard h3{font-family:var(--display);font-weight:400;font-size:25px;margin:0 0 10px;line-height:1.2}
.scard p{font-size:17px;line-height:1.5;margin:0 0 14px;color:var(--on-dark-soft)}
.light .scard p{color:var(--on-light-soft)}
.scard .more{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* blog cards */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
@media (min-width:1500px){.bgrid{grid-template-columns:repeat(4,1fr)}}
.bcard{background:#fff;border:1px solid rgba(10,26,46,.12);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(10,26,46,.09);transition:transform .18s ease}
.bcard:hover{transform:translateY(-3px)}
.bcard .thumb{height:170px;background:linear-gradient(150deg,#0b1f33,#12314a);display:grid;place-items:center;padding:20px}
.bcard .thumb span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:center;line-height:1.5}
.bcard .body{padding:24px;display:flex;flex-direction:column;flex:1}
.bcard h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.22;margin:0 0 10px;text-wrap:balance}
.bcard p{font-size:16.5px;line-height:1.5;color:var(--on-light-soft);margin:0 0 16px}
.bcard .more{margin-top:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#0f6ea3}

/* article */
.article{max-width:820px;margin:0 auto}
.article .meta{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-light-soft);margin-bottom:20px}
.article .tldr{background:rgba(56,189,248,.10);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:24px 28px;margin:0 0 36px}
.article .tldr p{margin:0;font-size:19px;line-height:1.55}
.article .tldr .t{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#0f6ea3;margin:0 0 10px}

.cta-band{background:var(--ink);color:var(--on-dark);text-align:center;padding:88px 0}
.cta-band h2{margin-bottom:18px}

.fh{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;font-weight:500}

@media (max-width:980px){
  .tiers,.sgrid,.bgrid{grid-template-columns:1fr}
  .ladder-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .ladder-strip{grid-template-columns:1fr}
  .phero{padding:64px 0 56px}
  .prose p,.prose ul li{font-size:18px}
}

/* ── blog categories ──────────────────────────────────────────────────── */
.catnav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 56px}
.catnav .pill{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--on-light-soft);border:1px solid rgba(10,26,46,.18);
  border-radius:999px;padding:11px 22px;transition:all .16s ease;background:rgba(255,255,255,.55)}
.catnav .pill:hover{border-color:var(--accent);color:var(--on-light)}
.catnav .pill.on{background:var(--ink);border-color:var(--ink);color:#fff}

.catgroup{margin:0 0 76px}
.catgroup:last-child{margin-bottom:0}
.cathead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  padding-bottom:20px;margin-bottom:30px;border-bottom:2px solid rgba(10,26,46,.14);flex-wrap:wrap}
.cathead h2{font-size:clamp(28px,3.2vw,42px);margin:0}
.cathead p{font-size:18px;line-height:1.5;color:var(--on-light-soft);margin:8px 0 0;max-width:640px}
.cathead .btn{padding:14px 26px;font-size:16px;white-space:nowrap;flex:0 0 auto}

@media (max-width:760px){
  .cathead{align-items:flex-start}
  .cathead .btn{width:100%;text-align:center}
  .catnav{gap:8px;margin-bottom:40px}
  .catnav .pill{font-size:12.5px;padding:10px 16px}
}

/* ── Ask AI about this article ────────────────────────────────────────── */
.aibox{border:1px solid rgba(10,26,46,.16);border-radius:16px;background:#fff;
  box-shadow:0 18px 44px rgba(10,26,46,.10);padding:26px 28px;margin:0 0 40px}
.aibox + .aibox{margin-top:-22px}
.aigroup + .aigroup{margin-top:22px;padding-top:22px;border-top:1px solid rgba(10,26,46,.12)}
.aigroup h2{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#0f6ea3;margin:0 0 4px;font-weight:500}
.aigroup .why{font-size:16px;line-height:1.5;color:var(--on-light-soft);margin:0 0 16px}
.airow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.aibtn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid rgba(10,26,46,.18);border-radius:999px;padding:9px 16px 9px 9px;
  background:var(--paper);color:var(--on-light);font-size:15.5px;font-weight:500;
  transition:border-color .16s ease,transform .16s ease,background .16s ease}
.aibtn:hover{border-color:var(--accent);background:#fff;transform:translateY(-2px)}
.aibtn .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;letter-spacing:0}
.aibtn.gpt .mk{background:#0e8f6f}
.aibtn.cla .mk{background:#c96442}
.aibtn.ppx .mk{background:#20808d}
.aibtn.goo .mk{background:#3b7ddd}
.aibtn.grk .mk{background:#1a1a1a}
.aibtn.cop .mk{background:#0a67c0}
.aicopy{border:1px dashed rgba(10,26,46,.28);background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-light-soft);border-radius:999px;padding:11px 18px}
.aicopy:hover{border-color:var(--accent);color:var(--on-light)}
.aicopy.done{border-style:solid;border-color:var(--accent-2);color:#0a7a63}
.ainote{font-size:14px;color:var(--on-light-soft);margin:16px 0 0;line-height:1.5}
@media (max-width:620px){
  .aibox{padding:22px 20px}
  .aibtn{font-size:14.5px;padding:8px 13px 8px 8px}
  .airow{gap:7px}
}

/* ── hero visual (added under the CTA, copy untouched) ────────────────── */
.herofig{margin:64px auto 0;max-width:1320px;position:relative}
.herofig img{width:100%;height:auto;border-radius:18px;display:block;
  border:1px solid rgba(10,26,46,.14);box-shadow:0 36px 90px rgba(10,26,46,.26)}
.herofig::after{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:40px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(56,189,248,.35),transparent 70%);
  filter:blur(14px);z-index:-1}
@media (max-width:900px){.herofig{margin-top:44px}.herofig img{border-radius:14px}}
@media (max-width:620px){.herofig{margin-top:34px}}

/* ── split cinematic hero: copy on navy, image bleeding off the right edge ──
   Deliberately unlike the reference site, which centres black text on white. */
.hero-cinema{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero-inner{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:0 32px}
.hero-copy{max-width:min(46%,720px);color:var(--on-dark);text-align:left;
  padding:104px 0 108px;min-height:min(86vh,820px);display:flex;flex-direction:column;justify-content:center}
.hero-copy .eyebrow{text-align:left;padding-left:0;margin:0 0 22px;color:var(--accent);
  font-size:16.5px;letter-spacing:.22em}
.hero-copy h1{text-align:left;font-size:clamp(40px,4.4vw,64px);color:#fff;max-width:15ch}
.hero-copy .lede{text-align:left;margin:26px 0 0;max-width:none;color:#e6eef5;font-size:clamp(21px,2vw,28px)}
.hero-copy .note{text-align:left;margin:22px 0 0;max-width:560px;color:var(--on-dark-soft);font-size:18px}
.hero-copy .where{text-align:left;margin:22px 0 0;color:#fff}
.hero-copy .btn-row{justify-content:flex-start;margin-top:34px}
.hero-copy .mark svg path{stroke:var(--accent);stroke-width:7}

/* The source is 21:9 and mostly dark, so it is shown UNCROPPED as a floating panel
   rather than cover-cropped into a tall column, which loses its lit half. */
.hero-media{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:58%;z-index:0}
.hero-media img{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(56,189,248,.22)}
/* feather the inner edge so the panel melts into the copy side */
.hero-media::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(90deg, rgba(10,26,46,.92) 0%, rgba(10,26,46,.55) 7%, rgba(10,26,46,.14) 16%, rgba(10,26,46,0) 26%)}
.hero-cinema::after{content:"";position:absolute;left:34%;top:50%;width:420px;height:420px;
  transform:translateY(-50%);border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(56,189,248,.14),transparent 70%);filter:blur(40px)}

@media (max-width:1400px){
  .hero-media{width:54%;right:-7%}
  .hero-copy{max-width:560px}
}
@media (max-width:1100px){
  .hero-media{width:52%;right:-10%}
  .hero-copy{max-width:480px;padding:88px 0 92px}
}
@media (max-width:860px){
  .hero-cinema{display:flex;flex-direction:column}
  .hero-cinema::after{display:none}
  .hero-media{position:relative;right:auto;top:auto;transform:none;width:auto;margin:0 0 34px}
  .hero-media img{border-radius:14px}
  .hero-media::after{background:linear-gradient(180deg, rgba(10,26,46,.55) 0%, rgba(10,26,46,0) 40%, rgba(10,26,46,.7) 100%)}
  .hero-media img{object-position:50% 50%}
  .hero-inner{padding:0 22px}
  .hero-copy{max-width:none;min-height:0;padding:56px 0 48px}
  .hero-copy h1{max-width:none;font-size:clamp(34px,7vw,46px)}
  .hero-copy .note{max-width:none}
}

/* the ring annotation must never sit on the line that follows it */
.promise-h{line-height:1.14}
.promise-h .nowrap{display:inline-block}
.mark.ring{margin-right:.12em}

/* ── legibility: accent text on light bands must use the darkened tokens ──
   #38BDF8 and #2DD4BF are for dark backgrounds. On paper they fail badly. */
.light .rung .n,
.band.light .rung .n,
.phero .rung .n            { color:var(--accent-ink) }
.light .rung .pr,
.band.light .rung .pr      { color:var(--accent-2-ink); font-weight:500 }
.light .tier .step,
.band.light .tier .step    { color:var(--accent-ink) }
.light .tier .price,
.band.light .tier .price   { color:var(--accent-ink) }
.light .scard .more,
.band.light .scard .more   { color:var(--accent-ink) }
.light .faq summary::after,
.band.light .faq summary::after { color:var(--accent-ink) }
.light .prose ul li::before,
.band.light .prose ul li::before { background:var(--accent-ink) }
.light .figure figcaption,
.band.light .figure figcaption { color:var(--on-light-soft) }
/* the featured tier ring also needs to read on paper */
.light .tier.feature,
.band.light .tier.feature  { border-color:var(--accent-ink);
  box-shadow:0 0 0 1px var(--accent-ink), 0 24px 60px rgba(10,92,134,.16) }

/* ── the tagline, treated as a brand asset rather than a throwaway line ─── */
.tagline-line{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.4vw,32px);
  line-height:1.2;margin:4px 0 22px;color:var(--on-light);letter-spacing:-.01em}
.tagline-line span{font-weight:600;color:var(--accent-ink)}
.kicker-tag{font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin:0 0 26px;padding-left:.28em}
.foot-tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding-left:.2em}
@media (max-width:620px){
  .kicker-tag{font-size:11.5px;letter-spacing:.2em}
}

/* ── real platform marks in place of letter placeholders ────────────────── */
.socials a{width:36px;height:36px;padding:0}
.socials a .ico{width:17px;height:17px;display:block}
.socials a[aria-label*="on X"] .ico{width:14px;height:14px}

/* ── article furniture: the formatting builders are meant to copy ───────── */
.article .meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-light-soft);margin:0 0 26px;padding-bottom:18px;
  border-bottom:1px solid rgba(10,26,46,.12)}
.article .meta .byline{color:var(--on-light);font-weight:500}
.article .meta a{color:var(--accent-ink);text-decoration:none}
.article .meta a:hover{text-decoration:underline}

.takeaways{background:var(--paper-2);border-radius:14px;padding:26px 30px;margin:0 0 32px;
  border:1px solid rgba(10,26,46,.10)}
.takeaways .t,.toc .t,.authorbox .t{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px}
.takeaways ul{margin:0;padding:0;list-style:none}
.takeaways li{position:relative;padding:9px 0 9px 30px;font-size:18px;line-height:1.5;
  border-top:1px solid rgba(10,26,46,.10)}
.takeaways li:first-child{border-top:0}
.takeaways li::before{content:"";position:absolute;left:4px;top:18px;width:10px;height:10px;
  border-radius:2px;background:var(--accent-ink)}

.toc{border-left:3px solid var(--accent-ink);padding:4px 0 4px 22px;margin:0 0 38px}
.toc ol{margin:0;padding-left:20px}
.toc li{font-size:17.5px;line-height:1.5;margin-bottom:7px}
.toc a{color:var(--on-light-soft);text-decoration:none}
.toc a:hover{color:var(--accent-ink);text-decoration:underline}

.article h2{scroll-margin-top:120px}
.case{background:linear-gradient(160deg,#0b1f33,#08192a);color:var(--on-dark);
  border-radius:14px;padding:26px 30px;margin:30px 0;border:1px solid rgba(56,189,248,.28)}
.case .case-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
.case .case-h{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.25;
  margin:0 0 12px;color:#fff}
.case p:last-child{margin:0;color:var(--on-dark-soft);font-size:18px;line-height:1.6}

.note-box{background:rgba(56,189,248,.10);border-left:4px solid var(--accent-ink);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0}
.note-box p{margin:0;font-size:18px;line-height:1.55}

.article blockquote{margin:32px 0;padding:0 0 0 26px;border-left:4px solid var(--accent-ink);
  font-family:var(--display);font-weight:300;font-size:clamp(21px,2.1vw,27px);line-height:1.35;
  color:var(--on-light)}
.article blockquote cite{display:block;font-family:var(--mono);font-size:12.5px;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-soft);margin-top:14px}

.tw{overflow-x:auto;margin:28px 0}
.ptable{width:100%;border-collapse:collapse;font-size:17.5px;min-width:460px}
.ptable th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);padding:0 16px 12px 0;
  border-bottom:2px solid rgba(10,26,46,.16)}
.ptable td{padding:14px 16px 14px 0;border-bottom:1px solid rgba(10,26,46,.10);
  vertical-align:top;line-height:1.5}

.steps{counter-reset:s;list-style:none;margin:0 0 24px;padding:0}
.steps li{counter-increment:s;position:relative;padding:12px 0 12px 46px;font-size:18.5px;
  line-height:1.55;border-top:1px solid rgba(10,26,46,.10)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:28px;height:28px;
  border-radius:50%;background:var(--accent-ink);color:#fff;font-family:var(--mono);font-size:13px;
  display:grid;place-items:center}

sup.cite{font-size:.68em;line-height:0;vertical-align:super}
sup.cite a{color:var(--accent-ink);text-decoration:none;padding:0 1px;font-weight:600}
sup.cite a:hover{text-decoration:underline}

.post-faq{margin-top:52px}
.post-faq h2{margin-bottom:8px}
.post-faq .faq details{border-top:1px solid rgba(10,26,46,.14)}
.post-faq .faq details:last-of-type{border-bottom:1px solid rgba(10,26,46,.14)}
.post-faq .faq summary{padding:22px 44px 22px 0;font-size:21px;color:var(--on-light)}
.post-faq .faq summary::after{color:var(--accent-ink)}
.post-faq .faq .a{padding:0 40px 24px 0;color:var(--on-light-soft);font-size:18px}

.sources{margin-top:52px;padding-top:30px;border-top:2px solid rgba(10,26,46,.14)}
.sources .src-note{font-size:17px;color:var(--on-light-soft);margin:0 0 18px;line-height:1.55}
.srclist{list-style:none;margin:0;padding:0;counter-reset:none}
.srclist li{font-size:16.5px;line-height:1.5;padding:10px 0;display:flex;gap:12px}
.srclist .n{font-family:var(--mono);color:var(--accent-ink);flex:0 0 auto}
.srclist a{color:var(--on-light-soft)}

.authorbox{margin-top:44px;background:var(--paper-2);border-radius:14px;padding:26px 30px;
  border:1px solid rgba(10,26,46,.10)}
.authorbox p:last-child{margin:0;font-size:18px;line-height:1.6;color:var(--on-light-soft)}
.authorbox a{color:var(--accent-ink)}

@media (max-width:620px){
  .takeaways,.case,.authorbox{padding:20px 22px}
  .toc{padding-left:16px}
  .article .meta{font-size:11.5px;gap:6px 12px}
}

/* ── mobile fixes found by the 390px harness ───────────────────────────── */
@media (max-width:620px){
  /* micro-labels were 11.5 to 12px. Floor them, per the SA font law:
     UI chrome may be small but never below readable. */
  .article .meta{font-size:13px;gap:8px 14px}
  .takeaways .t,.toc .t,.authorbox .t,.aigroup h2,.case .case-t,
  .tldr .t,.reserved .tag,.panel-cap,.rcard .kicker,.srclist .n,.aigroup .why,
  .fh,.foot-tag,.rung .n,.tier .step,.brandmark .bt,.bcard .thumb span,
  .rcard .art .step,.crumbs,.ainote,.srclist li,.figure figcaption{font-size:14px;letter-spacing:.1em}
  .catnav .pill,.aicopy{font-size:14px}
  .article .meta,.article .meta .byline{font-size:14px}

  /* tap targets: nav links were 22 to 29px tall. WCAG asks for ~44. */
  .nav a,.nav .drop>button{padding:11px 4px;line-height:1.2}
  .socials a{width:44px;height:44px}
  .fgrid a{padding:7px 0}
  .catnav .pill{padding:13px 18px}
  .toc a{display:inline-block;padding:4px 0}
}

/* summarize opens the article, share closes it */
.aibox-share{margin:44px 0 0;background:var(--paper-2)}
.aibox-summarize{margin:0 0 36px}

/* ── post covers ────────────────────────────────────────────────────────── */
.postcover{margin:0 auto 34px;max-width:1000px}
.postcover img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid rgba(10,26,46,.12);box-shadow:0 26px 64px rgba(10,26,46,.20)}
.bcard .thumb{height:190px;padding:0;position:relative;overflow:hidden;display:block;background:#0b1f33}
.bcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bcard .thumb .cat{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(7,18,30,.82);
  border:1px solid rgba(56,189,248,.4);border-radius:999px;padding:6px 12px;backdrop-filter:blur(4px)}
@media (max-width:620px){
  .postcover{margin-bottom:26px}
  .postcover img{border-radius:12px}
  .bcard .thumb{height:170px}
  .bcard .thumb .cat{font-size:12px}
}

/* ── contrast: components written for dark bands, used on light ones ─────
   The FAQ, panels and cards default to dark-background colours. When those
   components sit on a .light band the text must flip, or it lands at ~1.3:1.
   Audited with _build/contrast-harness.html. */
.band.light .faq .a,
.band.light .faq .a p,
.phero + .band.light .faq .a{color:var(--on-light-soft)}
.band.light .faq summary{color:var(--on-light)}
.band.light .faq details{border-color:rgba(10,26,46,.14)}
.band.light .faq details:last-of-type{border-color:rgba(10,26,46,.14)}
.band.light .figure figcaption{color:var(--on-light-soft)}
.band.light .rung p{color:var(--on-light-soft)}
.band.light .tier .blurb{color:var(--on-light-soft)}
.band.light .scard p{color:var(--on-light-soft)}
.band.light .rcard p{color:var(--on-light-soft)}
.band.light .note{color:var(--on-light-soft)}

/* ── specificity fixes found by the contrast audit ──────────────────────
   `.light .prose p` (0,2,1) was beating `.case .case-t` and `.case .case-h`
   (0,2,0), so the case heading and label rendered in body-grey ON the dark
   gradient at a 2.06 ratio. These selectors outrank it. */
.prose .case .case-t,
.band.light .prose .case .case-t{color:var(--accent)}
.prose .case .case-h,
.band.light .prose .case .case-h{color:#fff}
.prose .case p,
.band.light .prose .case p{color:var(--on-dark-soft)}
.prose .note-box p,
.band.light .prose .note-box p{color:var(--on-light)}

/* lettermark badges: white text needs 4.5:1 on these, several were 3.9 to 4.1 */
.aibtn.gpt .mk{background:#0a7458}
.aibtn.cla .mk{background:#a2492b}
.aibtn.ppx .mk{background:#1b6d78}
.aibtn.goo .mk{background:#2b60b4}
.aibtn.cop .mk{background:#0a5ba8}

/* ── voice agent page ───────────────────────────────────────────────────── */
.raas-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.raas-note{text-align:center;font-size:17px;color:var(--on-light-soft);margin:16px 0 0}
.vsl{margin:48px auto 0;max-width:960px}
.vsl video{width:100%;height:auto;display:block;border-radius:16px;background:#06121e;
  border:1px solid rgba(10,26,46,.16);box-shadow:0 30px 70px rgba(10,26,46,.26)}
.vsl figcaption{text-align:center;font-size:16.5px;color:var(--on-light-soft);margin-top:14px}

.raas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.raas-card{background:linear-gradient(170deg,#0b1f33,#08192a);border:1px solid rgba(56,189,248,.26);
  border-radius:14px;padding:28px 26px}
.raas-card .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.raas-card h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 10px;line-height:1.2}
.raas-card p{font-size:17.5px;line-height:1.55;color:var(--on-dark-soft);margin:0}

.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;margin-top:44px;align-items:stretch}
.calc-in{background:#fff;border:1px solid rgba(10,26,46,.12);border-radius:16px;padding:30px;
  box-shadow:0 18px 44px rgba(10,26,46,.10)}
.calc-in label{display:block;font-size:17px;color:var(--on-light);margin-bottom:24px;font-weight:500}
.calc-in output{float:right;font-family:var(--mono);color:var(--accent-ink);font-weight:500}
.calc-in input[type=range]{width:100%;margin-top:12px;accent-color:#0a5c86}
.calc-out{background:linear-gradient(165deg,#0b1f33,#08192a);border:1px solid rgba(56,189,248,.3);
  border-radius:16px;padding:30px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.calc-lab{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.calc-big{font-family:var(--display);font-weight:300;font-size:clamp(40px,5vw,64px);color:#fff;margin:0;line-height:1}
.calc-sub{font-size:18px;color:var(--on-dark-soft);margin:12px 0 0}
.calc-fine{font-size:15.5px;line-height:1.5;color:var(--on-dark-soft);margin:20px 0 24px}
.calc-out .btn{align-self:center}

.vs2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.vs2-col{border-radius:16px;padding:30px}
.vs2-col h3{font-family:var(--display);font-weight:500;font-size:24px;margin:0 0 18px}
.vs2-col ul{list-style:none;margin:0;padding:0}
.vs2-col li{font-size:17.5px;line-height:1.5;padding:12px 0 12px 32px;position:relative;
  border-top:1px solid rgba(10,26,46,.10)}
.vs2-col li:first-child{border-top:0}
.vs2-col.bad{background:#e6e9ed;border:1px solid rgba(10,26,46,.14);color:var(--on-light-soft)}
.vs2-col.bad li::before{content:"\00d7";position:absolute;left:6px;top:11px;font-size:19px;color:#8a3d2c}
.vs2-col.good{background:linear-gradient(165deg,#0b1f33,#08192a);border:1px solid var(--accent);color:var(--on-dark)}
.vs2-col.good h3{color:#fff}
.vs2-col.good li{border-color:rgba(255,255,255,.12);color:var(--on-dark-soft)}
.vs2-col.good li::before{content:"\2713";position:absolute;left:5px;top:12px;font-size:15px;color:var(--accent-2)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.quotes .q{margin:0;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.24);
  border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:26px 28px}
.quotes .q p{margin:0;font-size:18px;line-height:1.55;color:var(--on-dark)}

@media (max-width:980px){
  .raas-grid,.quotes{grid-template-columns:1fr}
  .calc,.vs2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .raas-cta{flex-direction:column}
  .raas-cta .btn{width:100%;text-align:center}
  .calc-in,.calc-out,.vs2-col,.raas-card{padding:22px}
}

/* ── Piper on the voice agent page, reusing the original RAAS cut-outs ────
   Doctrine: she is grounded on a real edge, never a floating sticker, and she
   never covers content or the reserved headline space. */
.raas-hero{position:relative;overflow:visible;padding-bottom:150px}
.raas-hero .wrap{position:relative;z-index:2}

/* stands on the bottom edge of the hero band, clear of the video */
.piper-hero{position:absolute;left:3%;bottom:0;width:min(17vw,215px);height:auto;
  z-index:1;pointer-events:none;filter:drop-shadow(0 22px 34px rgba(10,26,46,.30))}

/* peeks OVER the top edge of the dark band: she sits in the light section and the
   dark band paints across her lower half, so she is occluded rather than pasted on */
.has-peek{position:relative;z-index:1}
.peek-anchor{position:relative;height:0;z-index:0}
.piper-peek{position:absolute;right:7%;bottom:-58px;width:min(13vw,165px);height:auto;
  pointer-events:none;filter:drop-shadow(0 10px 22px rgba(10,26,46,.28))}

.a2p{align-items:center;gap:52px}
.a2p .visual img{width:100%;max-width:400px;height:auto;margin:0 auto;display:block;
  filter:drop-shadow(0 26px 56px rgba(0,0,0,.5))}
.a2p-copy .band{padding:0;background:none}
.a2p-copy .wrap{padding:0;max-width:none}
.a2p-copy .prose{max-width:none;margin:0}

.vs2-col{position:relative;padding-top:100px}
.vs2-char{position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:145px;height:auto;max-height:132px;object-fit:contain;object-position:bottom;
  pointer-events:none}
.vs2-col.bad .vs2-char{filter:grayscale(.5) saturate(.55) drop-shadow(0 12px 24px rgba(10,26,46,.26));opacity:.8}
.vs2-col.good .vs2-char{filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.vs2{margin-top:90px}

@media (max-width:1200px){ .piper-hero{width:175px} }
@media (max-width:900px){
  .raas-hero{padding-bottom:90px}
  .piper-hero{position:static;width:150px;margin:34px auto 0;display:block}
  .piper-peek{right:4%;bottom:-40px;width:110px}
  .a2p{gap:34px}
  .vs2{margin-top:74px}
  .vs2-char{width:115px;top:-34px}
  .vs2-col{padding-top:82px}
}

/* Attributed testimonials. A name and a company, because an unattributed quote is worth nothing. */
.quotes .q footer{margin-top:18px;padding-top:14px;border-top:1px solid rgba(56,189,248,.22);
  display:flex;flex-direction:column;gap:2px}
.quotes .q .qn{font-family:var(--display);font-weight:600;font-size:16px;color:#fff}
.quotes .q .qc{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent-2)}

/* GHL booking calendar. The widget paints its own white UI, so it gets a white card
   to sit in rather than bleeding onto the band. min-height stops the collapse before
   form_embed.js reports the real height. */
.booking{background:#fff;border-radius:18px;padding:10px;margin:34px auto 0;max-width:1000px;
  box-shadow:0 24px 60px rgba(7,23,38,.18);overflow:hidden}
.booking iframe{display:block;width:100%;height:980px;border:0}
@media (max-width:900px){ .booking{padding:6px;border-radius:14px} .booking iframe{height:1180px} }

/* <video> fallback text. Only shown when the video cannot play, but it still has to be readable. */
.vfallback{display:block;padding:20px;color:var(--on-dark);font-size:16px}
.vfallback a{color:var(--accent)}

/* Mobile font floor for rules declared after the main media block. Cascade order, not
   specificity, is what decides here: a floor written earlier in the file loses to the base
   rule that follows it, which is how .qc stayed at 13px on the first attempt. */
@media (max-width:900px){
  .quotes .q .qc{font-size:14px}
  .calc-lab{font-size:14px}
  .bcard .thumb .cat,.bcard .more{font-size:14px}
  /* the rest of the micro-labels that sat under the floor. Specificity matched to the
     rule each one is overriding, since a lower-specificity floor silently loses. */
  .kicker-tag{font-size:14px;letter-spacing:.2em}
  .scard .more{font-size:14px}
  .article .tldr .t{font-size:14px}
  .aibtn .mk{font-size:14px}
  .ptable th{font-size:14px}
  /* one-line contents entries were 22px tall. Thumbs need about 44. */
  .gtoc li{padding:6px 0}
  .gtoc a{padding:10px 0}
  .gtoc li.toc-part{padding:20px 0 6px}
}

/* The services ladder. Numbered because the order is the advice: where to start, and
   what comes after. A card with no page yet still gets a number and a real answer. */
.scard{position:relative}
.scard-n{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--accent);
  display:block;margin:0 0 10px}
.band.light .scard-n{color:var(--accent-ink)}
.scard.nolink{cursor:default}
.scard.nolink:hover{transform:none;border-color:rgba(56,189,248,.26)}
.band.light .scard.nolink:hover{border-color:rgba(10,26,46,.12)}
.scard .more.soon{color:var(--on-dark-soft)}
.band.light .scard .more.soon{color:var(--on-light-soft)}

/* ─────────────────────────────────────────────────────────────────────────────
   THE SERVICES MAP. Eleven services drawn as one path rather than a wall of cards.

   Hierarchy, in the order it should be read: the step badge tells you where you are,
   the stage name carries the argument, the service names are the answer, the small
   line is support. The first version had all four at roughly the same weight, which
   is why the stage names disappeared and it read as a wireframe.

   Everything is visible. The point of the section is comprehension, and a map you
   have to unlock hides the thing it exists to explain. Height is controlled by the
   fan-out instead, which puts four services on one row.
   Connectors are CSS only. No library, no SVG, no JS.
   ───────────────────────────────────────────────────────────────────────────── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.smap{--mline:rgba(56,189,248,.45);margin-top:52px}
.band.light .smap{--mline:rgba(10,26,46,.26)}

.mrow{text-align:center}

/* the step number is a filled badge sitting on the line, not a caption beside it */
.mstep{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  color:#08192a;font-family:var(--mono);font-size:24px;font-weight:700;
  display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(56,189,248,.12),0 12px 28px rgba(56,189,248,.22)}

.mstage{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.15;
  color:#fff;margin:0 0 12px}
.band.light .mstage{color:var(--ink)}
.mstage-b{font-size:18px;line-height:1.55;color:var(--on-dark-soft);max-width:660px;
  margin:0 auto 26px}
.band.light .mstage-b{color:var(--on-light-soft)}

.mcards{display:grid;gap:18px;position:relative;justify-content:center}
.mcards.cols-1{grid-template-columns:minmax(0,480px)}
.mcards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;
  margin-inline:auto;width:100%}
.mcards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the fan: one rule spanning card centres, with a stub down to each card */
.mcards.multi{padding-top:34px;padding-bottom:34px}
.mcards.multi::before{content:"";position:absolute;top:0;left:var(--edge);right:var(--edge);
  height:3px;border-radius:3px;background:var(--mline)}
.mcards.multi::after{content:"";position:absolute;bottom:0;left:var(--edge);right:var(--edge);
  height:3px;border-radius:3px;background:var(--mline)}
.mcards.multi>*::after{content:"";position:absolute;top:-34px;left:50%;width:3px;height:34px;
  border-radius:3px;background:var(--mline);transform:translateX(-50%)}
.mcards.multi>*::before{content:"";position:absolute;top:100%;left:50%;width:3px;height:34px;
  border-radius:3px;background:var(--mline);transform:translateX(-50%)}

/* cards carry a real surface. Outlines on near-black are what made it look like a wireframe. */
.mcard{position:relative;display:flex;flex-direction:column;text-align:left;text-decoration:none;
  color:inherit;background:linear-gradient(168deg,#14304a,#0d2135);
  border:1px solid rgba(56,189,248,.3);border-radius:16px;padding:24px 22px 20px;
  box-shadow:0 18px 40px rgba(2,10,20,.5),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.band.light .mcard{background:#fff;border-color:rgba(10,26,46,.14);
  box-shadow:0 16px 38px rgba(10,26,46,.1)}
a.mcard:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 22px 50px rgba(2,10,20,.6),0 0 0 1px var(--accent)}

.mcard h4{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.2;
  margin:0 0 10px;color:#fff}
.band.light .mcard h4{color:var(--ink)}
.mcard p,.mcard .mp{font-size:17px;line-height:1.5;margin:0 0 16px;color:var(--on-dark-soft)}
.band.light .mcard p{color:var(--on-light-soft)}
.mgo{margin-top:auto;font-family:var(--mono);font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.band.light .mgo{color:var(--accent-ink)}

/* step one is where we want the eye to land first */
.mcard.primary{background:linear-gradient(150deg,#12405f,#0d2942);
  border-color:var(--accent);box-shadow:0 22px 54px rgba(56,189,248,.2),
  inset 0 1px 0 rgba(255,255,255,.1)}
.mcard.primary h4{font-size:27px}
.mcard.primary p{color:var(--on-dark)}

/* the join: a solid line and a filled arrowhead, so direction of travel is unmistakable */
.mjoin{height:58px;position:relative}
.mjoin::before{content:"";position:absolute;left:50%;top:0;bottom:16px;width:3px;
  border-radius:3px;background:var(--mline);transform:translateX(-50%)}
.mjoin::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:13px solid var(--mline);transform:translateX(-50%)}

.mrow:last-child .mcards.multi{padding-bottom:0}
.mrow:last-child .mcards.multi::after,
.mrow:last-child .mcards.multi>*::before{display:none}

/* icon tile. Same 24x24 grid and stroke weight as the header's social icons, so the
   two sets read as one language. Inline sprite, so eleven icons cost zero requests. */
.mico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  margin:0 0 16px;background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.28)}
.mico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.band.light .mico{background:rgba(10,26,46,.06);border-color:rgba(10,26,46,.14)}
.band.light .mico svg{stroke:var(--accent-ink)}
.mcard.primary .mico{background:rgba(56,189,248,.2);border-color:rgba(56,189,248,.5)}

/* One Piper per stage, alternating sides down the path. She is always standing on
   something: the card baseline in the single and double rows, and the fan's own branch
   line in the wide row, where there is no room beside the cards. Never floating. */
.mcards{position:relative}
.piper-map{position:absolute;bottom:-6px;width:150px;height:auto;pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(2,10,20,.55))}
.cols-1 .piper-map.left{left:calc(50% - 240px - 172px)}
.cols-1 .piper-map.right{right:calc(50% - 240px - 172px)}
.cols-2 .piper-map.left{left:-142px;width:132px}
.cols-2 .piper-map.right{right:-142px;width:132px}
/* the four-card row fills the column, so she stands on the branch line above it */
.cols-4 .piper-map{bottom:auto;top:0;transform:translateY(-100%);width:120px}
.cols-4 .piper-map.left{left:6%}
.cols-4 .piper-map.right{right:6%}
@media (max-width:1400px){ .cols-2 .piper-map{display:none} }
@media (max-width:1240px){ .piper-map{display:none} }

.smap-foot{text-align:center;font-size:18px;color:var(--on-dark-soft);margin:40px auto 0;
  max-width:640px}
.band.light .smap-foot{color:var(--on-light-soft)}

@media (max-width:1100px){
  .mcards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;
    margin-inline:auto;width:100%}
  /* a fan only reads as a fan on one row. Two rows of two gets a plain stack. */
  .mcards.cols-4::before,.mcards.cols-4::after,
  .mcards.cols-4>*::after,.mcards.cols-4>*::before{display:none}
  .mcards.cols-4{padding-top:0;padding-bottom:0}
  .mstage{font-size:30px}
}
@media (max-width:760px){
  .mcards.cols-2,.mcards.cols-4{grid-template-columns:minmax(0,1fr)}
  .mcards.cols-2::before,.mcards.cols-2::after,
  .mcards.cols-2>*::after,.mcards.cols-2>*::before{display:none}
  .mcards.cols-2{padding-top:0;padding-bottom:0}
  .mcards.cols-1{grid-template-columns:minmax(0,1fr)}
  .mjoin{height:44px}
  .mstep{width:46px;height:46px;font-size:19px;margin-bottom:14px}
  .mstage{font-size:26px}
  .mcard.primary h4{font-size:24px}
  .mstage-b,.smap-foot{font-size:17px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   TIER COMPARISON. The table people scan instead of reading four cards twice.
   Wide by nature, so it scrolls inside .tw and never pushes the page sideways,
   which is the same wrapper the blog tables already use. The first column is
   sticky, because a tick means nothing once its row label has scrolled away.
   ───────────────────────────────────────────────────────────────────────────── */
.ctw{margin-top:44px;border-radius:16px;max-width:100%;contain:paint}
.compare{width:100%;border-collapse:collapse;min-width:760px;font-size:16.5px}
.compare th,.compare td{text-align:left;vertical-align:middle}

.compare thead th{padding:0 14px 18px;border-bottom:2px solid rgba(56,189,248,.4);
  font-weight:400;vertical-align:bottom}
.band.light .compare thead th{border-bottom-color:rgba(10,26,46,.28)}
.compare .ch-n{display:block;font-family:var(--display);font-size:19px;line-height:1.2;color:#fff}
.band.light .compare .ch-n{color:var(--ink)}
.compare .ch-p{display:block;margin-top:6px;font-family:var(--mono);font-size:14px;
  color:var(--accent)}
.band.light .compare .ch-p{color:var(--accent-ink)}

.compare tbody th[scope="row"]{padding:14px 20px 14px 0;font-weight:400;color:var(--on-dark);
  line-height:1.4}
.band.light .compare tbody th[scope="row"]{color:var(--on-light)}
.compare tbody td{padding:14px 14px;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;width:1%;white-space:nowrap}
.band.light .compare tbody td{border-top-color:rgba(10,26,46,.1)}
.compare tbody tr th[scope="row"]{border-top:1px solid rgba(255,255,255,.1)}
.band.light .compare tbody tr th[scope="row"]{border-top-color:rgba(10,26,46,.1)}

.compare tr.grp th{padding:30px 0 12px;font-family:var(--mono);font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-top:0}
.band.light .compare tr.grp th{color:var(--accent-ink)}

.compare .yes,.compare .no{display:inline-block;line-height:1;vertical-align:middle}
.compare .yes{color:var(--accent-2);font-size:20px}
.band.light .compare .yes{color:var(--accent-2-ink)}
/* a dash, not a dot. A dot at this size reads as a rendering artefact rather than a no. */
.compare .no{width:14px;height:2px;background:#5d7691;border-radius:2px;font-size:0}

/* the first column stays put while the tiers scroll past it */
.compare .cwhat,.compare tbody th[scope="row"]{position:sticky;left:0;z-index:1}
.band.dark .compare .cwhat,.band.dark .compare tbody th[scope="row"]{background:var(--ink)}
.band.dark-2 .compare .cwhat,.band.dark-2 .compare tbody th[scope="row"]{background:var(--ink-2)}
.band.light .compare .cwhat,.band.light .compare tbody th[scope="row"]{background:var(--paper)}
.compare .cwhat{font-family:var(--mono);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-soft);padding-bottom:18px}
.band.light .compare .cwhat{color:var(--on-light-soft)}

.cfoot{margin:26px auto 0;max-width:720px;text-align:center;font-size:17px;
  color:var(--on-dark-soft)}
.band.light .cfoot{color:var(--on-light-soft)}

@media (max-width:760px){
  .compare{font-size:15.5px;min-width:680px}
  .compare .ch-n{font-size:17px}
  .compare tbody th[scope="row"]{padding-right:14px;max-width:230px;white-space:normal}
}
.band.light .compare .no{background:#9aa8b5}

/* ─────────────────────────────────────────────────────────────────────────────
   THE GUIDE. A pillar page using the article typography, with a grouped contents
   list and part dividers on top. Twenty-seven sections need a way in.
   ───────────────────────────────────────────────────────────────────────────── */
.gtoc{max-width:820px;margin:0 auto 56px;padding:30px 32px;border-radius:16px;
  background:#fff;border:1px solid rgba(10,26,46,.12);box-shadow:0 18px 44px rgba(10,26,46,.08)}
.band.dark .gtoc,.band.dark-2 .gtoc{background:#0d2135;border-color:rgba(56,189,248,.24);
  box-shadow:0 18px 44px rgba(2,10,20,.45)}
.gtoc .t{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 18px}
.band.dark .gtoc .t{color:var(--accent)}
.gtoc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.gtoc li{break-inside:avoid;padding:5px 0;font-size:16px;line-height:1.4}
.gtoc li.toc-part{break-after:avoid;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light-soft);padding:20px 0 6px;
  border-top:1px solid rgba(10,26,46,.12);margin-top:10px}
.band.dark .gtoc li.toc-part{color:var(--on-dark-soft);border-top-color:rgba(255,255,255,.12)}
.gtoc li:first-child.toc-part{border-top:0;margin-top:0;padding-top:0}
.gtoc a{display:block;padding:4px 0;color:var(--on-light);text-decoration:none}
.band.dark .gtoc a{color:var(--on-dark)}
.gtoc a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.band.dark .gtoc a:hover{color:var(--accent)}
@media (max-width:820px){ .gtoc{columns:1;padding:24px 22px} .gtoc ol{columns:1} }

.gpart{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin:66px 0 6px;padding-top:26px;
  border-top:2px solid rgba(10,26,46,.16)}
.band.dark .gpart{color:var(--accent);border-top-color:rgba(56,189,248,.3)}
.guide .gpart:first-child{margin-top:0;padding-top:0;border-top:0}
.guide h2{scroll-margin-top:24px}

/* Intake questions. Numbered, with the reason each one is asked underneath, because
   people answer better when they can see why the question exists. */
.intakeq{list-style:none;counter-reset:iq;margin:44px auto 0;padding:0;max-width:820px}
.intakeq li{counter-increment:iq;position:relative;padding:24px 0 24px 62px;
  border-top:1px solid rgba(56,189,248,.2)}
.band.light .intakeq li{border-top-color:rgba(10,26,46,.12)}
.intakeq li:first-child{border-top:0}
.intakeq li::before{content:counter(iq,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:var(--mono);font-size:15px;color:var(--accent);
  border:1px solid rgba(56,189,248,.35);border-radius:999px;padding:5px 10px}
.band.light .intakeq li::before{color:var(--accent-ink);border-color:rgba(10,26,46,.2)}
.intakeq .iq{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.3;
  margin:0 0 8px;color:#fff}
.band.light .intakeq .iq{color:var(--ink)}
.intakeq .iw{font-size:17px;line-height:1.5;margin:0;color:var(--on-dark-soft)}
.band.light .intakeq .iw{color:var(--on-light-soft)}
@media (max-width:760px){
  .intakeq li{padding-left:0;padding-top:44px}
  .intakeq li::before{top:16px}
  .intakeq .iq{font-size:21px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   ABOUT: MISSION, VALUES, PIPER
   ───────────────────────────────────────────────────────────────────────────── */
.eyebrow.center{text-align:center}
.mission-h{font-weight:inherit;margin:0}
.mission{max-width:1040px;margin:26px auto 0;padding:0;border:0;
  font-family:var(--display);font-weight:300;font-size:30px;line-height:1.34;
  color:#fff;text-align:center;quotes:none;text-wrap:balance}
/* the four line breaks are deliberate on desktop and wrong on a phone, where the
   same text needs to reflow rather than break mid-thought */
@media (max-width:1080px){ .mission .lb{display:none} }
.mission-plain{max-width:720px;margin:30px auto 0;font-size:18.5px;line-height:1.6;
  color:var(--on-dark-soft);text-align:center}
.mission-tag{margin:40px 0 0;text-align:center;font-family:var(--display);font-weight:400;
  font-size:26px;color:var(--accent)}
.mission-tag span{color:var(--on-dark-soft)}

.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.value{background:#fff;border:1px solid rgba(10,26,46,.12);border-radius:16px;padding:26px 22px;
  box-shadow:0 16px 38px rgba(10,26,46,.07)}
.band.dark .value,.band.dark-2 .value{background:linear-gradient(168deg,#14304a,#0d2135);
  border-color:rgba(56,189,248,.28);box-shadow:0 18px 40px rgba(2,10,20,.5)}
.value .vn{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--accent-ink);
  margin:0 0 12px}
.band.dark .value .vn{color:var(--accent)}
.value h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.22;
  margin:0 0 10px;color:var(--ink)}
.band.dark .value h3{color:#fff}
.value p{font-size:16.5px;line-height:1.5;margin:0;color:var(--on-light-soft)}
.band.dark .value p{color:var(--on-dark-soft)}
@media (max-width:1150px){ .values{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .values{grid-template-columns:1fr} }

.piper-about{align-items:center}
.piper-about .visual{display:flex;justify-content:center}
.piper-about .visual img{width:min(300px,72%);height:auto;
  filter:drop-shadow(0 26px 44px rgba(2,10,20,.6))}
.piper-about h2{font-family:var(--display);font-weight:300;font-size:40px;line-height:1.14;
  margin:10px 0 22px;color:#fff}
.piper-about .plead{font-size:21px;line-height:1.5;color:var(--on-dark);margin:0 0 16px;
  font-family:var(--display);font-weight:300}
.piper-about p{font-size:18px;line-height:1.55;color:var(--on-dark-soft)}
.ptraits{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;padding:0}
.ptraits li{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(56,189,248,.34);border-radius:999px;padding:8px 14px}
.pnote{border-left:3px solid var(--accent-2);padding-left:20px;margin:24px 0 0 !important;
  font-size:17px !important}
@media (max-width:900px){
  .piper-about h2{font-size:32px}
  .piper-about .visual img{width:min(230px,60%)}
  .mission{font-size:25px}
  .mission-tag{font-size:22px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   NO ORPHANS. Jonathan has flagged single words and short sentences stranded on a
   last line three times now, so this is systemic rather than fixed case by case.
   text-wrap:balance evens the line lengths of short blocks, which is what removes
   the orphan; pretty is the cheaper version for long body copy, where balance is
   capped by the browser anyway.
   ───────────────────────────────────────────────────────────────────────────── */
/* balance evens the line lengths, which is what you want on a wide centred headline */
h1,h2,.phero .sub,.note,.sub,.lead,.eyebrow,.mstage-b,.smap-foot,.cfoot,.src-note,
.mission-plain{text-wrap:balance}
/* pretty is the one that avoids a single short word on the last line, which is what
   you want in a narrow card where balance will happily leave one stranded */
h3,h4,.value h3,.scard h3,.mcard h4,.tier h3,.tier .blurb,.mcard p,.intakeq .iq,
.gtoc li,.article p,.prose p,.piper-about p{text-wrap:pretty}
/* a manual break is deliberate on desktop and wrong on a phone */
@media (max-width:1080px){ .lb{display:none} }

/* ─────────────────────────────────────────────────────────────────────────────
   AUDIT SCOPES. What replaced the tick grid: one block per surface, with room to
   say what we actually look at, and chips naming the audits that include it.
   Generous line height and real gaps, because this is the section people read
   before they decide which audit to buy.
   ───────────────────────────────────────────────────────────────────────────── */
.scope-fig{margin:44px auto 8px;max-width:1000px}
.scopes{margin-top:20px}
.scope-group + .scope-group{margin-top:76px;padding-top:60px;
  border-top:1px solid rgba(56,189,248,.22)}
.band.light .scope-group + .scope-group{border-top-color:rgba(10,26,46,.14)}
.scope-group h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.2;
  margin:0 0 12px;color:#fff;text-align:center}
.band.light .scope-group h3{color:var(--ink)}
.sg-note{max-width:680px;margin:0 auto 44px;text-align:center;font-size:17.5px;line-height:1.6;
  color:var(--on-dark-soft)}
.band.light .sg-note{color:var(--on-light-soft)}

.scope-list{display:grid;gap:20px;max-width:980px;margin:0 auto}
.scope-row{display:grid;grid-template-columns:64px 1fr;gap:26px;align-items:start;
  background:linear-gradient(168deg,#14304a,#0d2135);border:1px solid rgba(56,189,248,.24);
  border-radius:16px;padding:28px 30px;box-shadow:0 16px 36px rgba(2,10,20,.42)}
.band.light .scope-row{background:#fff;border-color:rgba(10,26,46,.12);
  box-shadow:0 14px 34px rgba(10,26,46,.08)}
.sico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.3)}
.sico svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.band.light .sico{background:rgba(10,26,46,.05);border-color:rgba(10,26,46,.14)}
.band.light .sico svg{stroke:var(--accent-ink)}
.sr-body h4{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.25;
  margin:0 0 10px;color:#fff}
.band.light .sr-body h4{color:var(--ink)}
.sr-body p{font-size:17.5px;line-height:1.62;margin:0 0 18px;color:var(--on-dark-soft)}
.band.light .sr-body p{color:var(--on-light-soft)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:14px;letter-spacing:.06em;padding:6px 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#8ba3b8}
.band.light .chip{border-color:rgba(10,26,46,.18);color:#66737f}
.chip.on{border-color:var(--accent-2);color:var(--accent-2);
  background:rgba(45,212,191,.1)}
.band.light .chip.on{border-color:var(--accent-2-ink);color:var(--accent-2-ink);
  background:rgba(13,148,136,.08)}

@media (max-width:760px){
  .scope-row{grid-template-columns:1fr;gap:16px;padding:24px 22px}
  .scope-group h3{font-size:25px}
  .scope-group + .scope-group{margin-top:56px;padding-top:44px}
}

/* Caption alignment, sitewide. A caption belongs to the image above it, so it centres
   on that image rather than starting at the left edge of the column. Jonathan, 2 Sep. */
figure figcaption,.postcover figcaption,.scope-fig figcaption{text-align:center}
figure figcaption{margin-inline:auto}

/* ─────────────────────────────────────────────────────────────────────────────
   FOUR WAYS IN. Built to Jonathan's slide: left-aligned kicker and headline, a
   2x2 of cards, the price sitting opposite the eyebrow, and a "you leave with"
   line under a rule at the foot of each card.
   ───────────────────────────────────────────────────────────────────────────── */
.wi-kicker{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:15px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent-2);margin:0 0 22px}
.wi-kicker::before{content:"";width:44px;height:2px;background:var(--accent-2);flex:0 0 auto}
.band.light .wi-kicker{color:var(--accent-2-ink)}
.band.light .wi-kicker::before{background:var(--accent-2-ink)}
.wi-h{font-family:var(--display);font-weight:700;font-size:46px;line-height:1.06;margin:0 0 40px;
  color:#fff;letter-spacing:-.01em}
.wi-h span{display:block;color:var(--on-dark-soft);font-weight:600}
.band.light .wi-h{color:var(--ink)}
.band.light .wi-h span{color:var(--on-light-soft)}

.waysin{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.wayin{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:linear-gradient(168deg,#12293f,#0c1e31);border:1px solid rgba(56,189,248,.24);
  border-left:3px solid var(--accent-2);border-radius:14px;padding:26px 28px 24px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.band.light .wayin{background:#fff;border-color:rgba(10,26,46,.12);border-left-color:var(--accent-2-ink);
  box-shadow:0 16px 38px rgba(10,26,46,.08)}
.wayin:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(2,10,20,.5)}
.wayin.feature{border-color:var(--accent-2);box-shadow:0 0 0 1px rgba(45,212,191,.45),0 24px 54px rgba(45,212,191,.14)}

.wi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.wi-eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-soft);margin:0}
.band.light .wi-eyebrow{color:var(--on-light-soft)}
.wi-price{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;margin:0;
  color:var(--accent-2);white-space:nowrap}
.band.light .wi-price{color:var(--accent-2-ink)}
.wayin h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.18;
  margin:8px 0 12px;color:#fff}
.band.light .wayin h3{color:var(--ink)}
.wi-d{font-size:17.5px;line-height:1.55;margin:0 0 22px;color:var(--on-dark-soft)}
.band.light .wi-d{color:var(--on-light-soft)}
.wi-d strong{color:#fff;font-weight:600}
.band.light .wi-d strong{color:var(--ink)}
.wi-leave{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.band.light .wi-leave{border-top-color:rgba(10,26,46,.12)}
.wi-lt{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-soft);margin:0 0 6px}
.band.light .wi-lt{color:var(--on-light-soft)}
.wi-lv{font-size:17.5px;line-height:1.45;margin:0;color:var(--on-dark)}
.band.light .wi-lv{color:var(--on-light)}

.wi-foot{margin:34px 0 0;font-size:19px;line-height:1.55;color:var(--on-dark)}
.band.light .wi-foot{color:var(--on-light)}
.wi-foot strong{color:#fff}
.band.light .wi-foot strong{color:var(--ink)}
.wi-small{margin:14px auto 0;max-width:760px;text-align:center;font-size:16px;line-height:1.55;
  color:var(--on-dark-soft)}
.band.light .wi-small{color:var(--on-light-soft)}

@media (max-width:900px){
  .waysin{grid-template-columns:1fr}
  .wi-h{font-size:34px}
  .wi-price{font-size:29px}
  .wayin h3{font-size:23px}
}

/* ── Legal pages ───────────────────────────────────────────────────────────
   /terms/, /privacy/ and /ai-policy/. These are read by carriers and by people
   deciding whether to trust us with a phone number, so they get real reading
   typography rather than fine print. Nothing here goes below 16px. */
.flegal{display:flex;gap:18px}
.flegal a{color:#93a7b8;text-decoration:none;border-bottom:1px solid transparent}
.flegal a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.prose.legal{max-width:820px;margin:0 auto}
.prose.legal h2{margin:44px 0 14px;font-size:29px;line-height:1.25}
.prose.legal h2:first-child{margin-top:0}
.prose.legal h3{margin:30px 0 10px;font-size:21px;color:var(--accent-ink)}
.prose.legal p,.prose.legal li{font-size:18px;line-height:1.62;color:var(--on-light)}
.prose.legal ul{margin:14px 0 18px;padding-left:22px}
.prose.legal li{margin:7px 0}
.prose.legal a{color:#0f6ea3}
.legal-meta{font-family:var(--mono);font-size:16px;letter-spacing:.04em;
  color:var(--on-light-soft);border-left:3px solid var(--accent-2);
  padding:10px 0 10px 16px;margin:0 0 34px}
@media (max-width:700px){
  .prose.legal h2{font-size:25px}
  .prose.legal h3{font-size:19.5px}
  .flegal{gap:14px}
}

/* ── Phone: keep the marker annotations inside the viewport ─────────────────
   `.mark svg` is the hand-drawn underline/ring device. It is deliberately wider
   than the text it annotates (106%, and 112% for the ring, pulled left by a
   matching negative offset) so the stroke overhangs the word the way a real
   marker would. On a 390px screen that overhang is what pushed the home page
   document to 392px: measured on 7 Sep 2026, one absolutely positioned svg,
   145px wide, right edge at 392px.
   On phones the decoration sits flush with the text instead. The annotation
   still reads as a marker stroke, and the page stops scrolling sideways.
   Fixing it here rather than with `overflow-x:clip` on a parent is deliberate:
   clipping would also hide any FUTURE overflow from the mobile harness, which
   would quietly disarm the gate that caught this. */
@media (max-width:700px){
  .mark svg{left:0;width:100%}
  .mark.ring svg{left:0;width:100%}
}

/* ── Phone: legal tables fit instead of scrolling sideways ──────────────────
   `.ptable` carries `min-width:460px`, which is right for the marketing
   comparison tables: they have many columns and are better swiped than
   crushed. The three tables in the privacy policy are different. Two are
   2-column and one is 3-column, so at 390px they fit once the floor is
   lifted, and a policy someone is reading to decide whether to trust us with
   a phone number should not require sideways swiping.
   `.tw` keeps `overflow-x:auto` deliberately. If a future table still does not
   fit, it scrolls inside its box rather than dragging the whole document
   sideways. */
@media (max-width:700px){
  .prose.legal .ptable{min-width:0;font-size:16px}
  .prose.legal .ptable th{font-size:12px;padding-right:12px}
  .prose.legal .ptable td{padding:12px 12px 12px 0;vertical-align:top}
  .prose.legal .ptable td:last-child,.prose.legal .ptable th:last-child{padding-right:0}
}

/* ── Phone: collapsed menu ──────────────────────────────────────────────────
   Six nav items, three of them dropdowns, plus five social icons used to stack
   down the page: about 700px of an 844px screen before the headline appeared.
   Below 900px that collapses behind a Menu button, and each dropdown opens as an
   accordion rather than all 17 children being listed at once.
   Desktop is untouched: .navtoggle is display:none there and the dropdowns keep
   their hover/focus-within behaviour. */
.navtoggle{display:none}

@media (max-width:900px){
  .hdr{grid-template-columns:auto 1fr;justify-items:stretch;align-items:center;
    gap:0 14px;padding:14px 20px;row-gap:0}
  .brandmark{order:0;grid-column:1;grid-row:1;align-items:flex-start;justify-self:start}
  .brandmark img{height:46px}
  /* 14px is the floor, not a suggestion: the mobile harness counts anything
     under it as tiny text, and it caught this at 11px. Letter-spacing comes
     down instead so the line still fits beside the Menu button. */
  .brandmark .bt{font-size:14px;letter-spacing:.18em}

  .navtoggle{display:flex;align-items:center;gap:10px;grid-column:2;grid-row:1;
    justify-self:end;min-height:46px;padding:9px 16px;background:transparent;
    border:1px solid rgba(243,247,250,.42);border-radius:999px;cursor:pointer;
    color:var(--on-dark);font-family:var(--body);font-size:16px;font-weight:500}
  .navtoggle:hover,.navtoggle:focus-visible{border-color:var(--accent);color:var(--accent)}
  .bars{position:relative;display:block;width:19px;height:2px;background:currentColor;
    border-radius:2px;transition:background .15s ease}
  .bars::before,.bars::after{content:"";position:absolute;left:0;width:19px;height:2px;
    background:currentColor;border-radius:2px;transition:transform .18s ease,top .18s ease}
  .bars::before{top:-6px}
  .bars::after{top:6px}
  .hdr.open .bars{background:transparent}
  .hdr.open .bars::before{top:0;transform:rotate(45deg)}
  .hdr.open .bars::after{top:0;transform:rotate(-45deg)}

  .nav{display:none;grid-column:1 / -1;grid-row:2;flex-direction:column;align-items:stretch;
    gap:0;white-space:normal;justify-self:stretch;margin-top:14px}
  .hdr.open .nav{display:flex}
  .nav>a,.nav .drop>button{display:block;width:100%;text-align:left;font-size:19px;
    padding:15px 2px;border-bottom:1px solid rgba(243,247,250,.13)}
  .nav a.here{border-bottom:1px solid rgba(243,247,250,.13);padding-bottom:15px;color:var(--accent)}
  .drop{position:static}
  /* Must be .nav .drop>button, not .drop>button. The base rule above is
     `.nav>a,.nav .drop>button` at (0,2,1); a (0,1,1) selector here loses to it
     no matter that it comes later, and the flex never applies, so the +/-
     marker sits against the label instead of the right edge. Measured. */
  .nav .drop>button{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .nav .drop>button::after{content:"+";font-size:25px;line-height:1;color:var(--accent);
    font-weight:400;flex:0 0 auto}
  .nav .drop.open>button::after{content:"\2013"}
  .drop-menu{position:static;transform:none;display:none;min-width:0;border:0;padding:4px 0 12px;
    background:transparent;box-shadow:none;border-bottom:1px solid rgba(243,247,250,.13)}
  .drop.open .drop-menu{display:block}
  .drop:hover .drop-menu,.drop:focus-within .drop-menu{display:none}
  .drop.open:hover .drop-menu,.drop.open:focus-within .drop-menu{display:block}
  .drop-menu a{padding:12px 2px 12px 18px;font-size:17.5px;color:var(--on-dark-soft);border-radius:0}
  .drop-menu a:hover{background:transparent;color:var(--accent)}

  .socials{display:none;grid-column:1 / -1;grid-row:3;justify-content:flex-start;
    gap:12px;margin:18px 0 6px}
  .hdr.open .socials{display:flex}
}

/* The method name is the brand. It should not break across two lines in the
   hero. Verified at 390px after setting this. */
.hero-copy .note strong{white-space:nowrap}
@media (max-width:420px){
  .hero-copy .note{font-size:17px}
}