/* ============================================================
   TRABELO — blended build
   Layout & structure: adapted from the AI Agency build
   Palette: Trabelo navy / blue / white
   Archivo (display) · Inter (body) · JetBrains Mono (labels)
   ============================================================ */

:root{
  /* core palette */
  --ink:#08111F;
  --ink-soft:#101F38;
  --ink-line:rgba(255,255,255,0.10);
  --ink-line-2:rgba(255,255,255,0.18);
  --blue:#2F6FED;
  --blue-light:#6C97FF;
  --blue-dim:rgba(47,111,237,0.12);
  --blue-text:#265AC0;
  --paper:#F5F7FB;
  --paper-alt:#EAEFF8;
  --white:#fff;
  --text:#101828;
  --slate:#4C5F7A;
  --line:rgba(16,24,40,0.10);
  --line-2:rgba(16,24,40,0.20);
  --dim:rgba(245,247,251,0.72);
  --grey-dark:#93A4BC;
  --green:#188A4E;
  --green-text:#136D3E;
  --amber:#A05B0E;
  /* type */
  --display:'Archivo',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Inter',system-ui,sans-serif;--data:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1340px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  font-family:var(--sans);background:var(--ink);color:var(--grey-dark);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;}
h1{font-size:clamp(2.4rem,4.8vw,3.7rem);line-height:1.06;color:var(--white);max-width:16ch;margin-bottom:1.6rem;}
h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.14;color:var(--white);max-width:20ch;}
h3{font-size:1.32rem;font-weight:700;line-height:1.3;color:var(--white);}
h4{font-family:var(--sans);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--white);}
h5{font-family:var(--sans);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--white);}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- layout ---------- */
.container{max-width:var(--wrap);margin:0 auto;padding:0 2rem;}
.narrow{max-width:860px;margin:0 auto;padding:0 2rem;}
.section{padding:100px 0;position:relative;}
.section-sm{padding:64px 0;}

/* light surfaces */
.on-paper{background:var(--paper);color:var(--slate);}
.on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4,.on-paper h5{color:var(--text);}
.on-alt{background:var(--paper-alt);color:var(--slate);}
.on-alt h2,.on-alt h3,.on-alt h4,.on-alt h5{color:var(--text);}
.rule-dark{border-top:1px solid var(--ink-line);}
.rule-light{border-top:1px solid var(--line);}

/* dot-grid texture on dark sections */
.dotted{
  background-image:radial-gradient(circle, rgba(108,151,255,0.10) 1px, transparent 1px);
  background-size:26px 26px;
}

/* ---------- mono label ---------- */
.mono{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);display:block;margin-bottom:1.4rem;
}
.mono.ink{color:var(--blue-text);}
.mono.dim{color:var(--grey-dark);}
.mono.slash::before{content:'// ';opacity:0.55;}

.sec-head{margin-bottom:3.25rem;}
.sec-head p{font-size:1.06rem;line-height:1.65;margin-top:1.1rem;max-width:62ch;}
.on-paper .sec-head p,.on-alt .sec-head p{color:var(--slate);}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.sec-head.center h2{margin-left:auto;margin-right:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:var(--sans);font-size:0.94rem;font-weight:700;padding:15px 28px;
  border-radius:3px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-primary:hover{background:#255ED4;border-color:#255ED4;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--ink-line-2);}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,0.06);}
.btn-ghost-ink{background:transparent;color:var(--text);border-color:var(--line-2);}
.btn-ghost-ink:hover{background:var(--text);color:var(--paper);border-color:var(--text);}
.btn-line{
  display:inline-block;font-size:0.94rem;font-weight:600;color:var(--white);
  text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid var(--ink-line-2);
  transition:border-color .18s ease;
}
.btn-line:hover{border-bottom-color:var(--blue-light);}
.btn-line.ink{color:var(--text);border-bottom-color:var(--line-2);}
.btn-line.ink:hover{border-bottom-color:var(--blue-text);color:var(--blue-text);}
.btn-row{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:90;background:rgba(8,17,31,0.94);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--ink-line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:72px;}
.logo{
  font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-0.045em;
  color:var(--white);text-decoration:none;white-space:nowrap;
}
.logo b{color:var(--blue-light);}
.nav-links{display:flex;align-items:center;gap:1.35rem;list-style:none;}
.nav-links a{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);text-decoration:none;transition:color .16s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--white);}
.nav-cta{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--white);text-decoration:none;padding:9px 18px;border:1px solid var(--blue);
  background:var(--blue-dim);white-space:nowrap;transition:background .18s ease;
}
.nav-cta:hover{background:var(--blue);}
.burger{display:none;background:none;border:1px solid var(--ink-line-2);width:44px;height:40px;cursor:pointer;}
.burger span{display:block;width:17px;height:1.5px;background:var(--white);margin:4px auto;}
.mobile-menu{display:none;background:var(--ink);border-top:1px solid var(--ink-line);}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;padding:1rem 2rem;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.1em;
  text-transform:none;color:var(--white);text-decoration:none;border-bottom:1px solid var(--ink-line);
}
@media(max-width:1080px){
  .nav-links{display:none;}
  .nav>.nav-cta{display:none;}
  .burger{display:block;}
}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);padding:110px 0 100px;position:relative;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:3.5rem;align-items:center;}
.hero-tag{
  display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--mono);font-size:0.72rem;
  letter-spacing:0.1em;text-transform:none;color:var(--blue-light);
  border:1px solid rgba(108,151,255,0.35);background:var(--blue-dim);
  padding:0.45rem 1rem;margin-bottom:2rem;border-radius:100px;
}
.hero h1 em{font-style:normal;color:var(--blue-light);}
.hero .lede{font-size:1.12rem;line-height:1.65;color:var(--dim);max-width:54ch;margin-bottom:2.25rem;}
.hero-note{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.005em;color:var(--grey-dark);margin-top:1.5rem;}
.hero-art{position:relative;}
.hero-art img{
  width:100%;border-radius:6px;border:1px solid var(--ink-line);
  /* source artwork is orange; shifted to match the blue system */
  filter:hue-rotate(186deg) saturate(1.15);
}
.hero-art::after{
  content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(8,17,31,0.75);
}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;}
  .hero-art{order:-1;}
}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-line);
  margin-top:4rem;
}
.hero-stat{padding:1.75rem 1.5rem 0 0;border-right:1px solid var(--ink-line);}
.hero-stat:last-child{border-right:none;}
.hero-stat b{
  display:block;font-family:var(--display);font-size:2rem;font-weight:800;color:var(--white);
  line-height:1;margin-bottom:0.45rem;letter-spacing:-0.03em;
}
.hero-stat span{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);}
@media(max-width:680px){
  .hero-stats{grid-template-columns:1fr;}
  .hero-stat{border-right:none;border-bottom:1px solid var(--ink-line);padding:1.4rem 0;}
  .hero-stat:last-child{border-bottom:none;}
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink-soft);border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);padding:1.15rem 0;overflow:hidden;
}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:slide 45s linear infinite;will-change:transform;}
.marquee-track span{
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;text-transform:none;
  color:var(--grey-dark);white-space:nowrap;
}
@keyframes slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ---------- statement ---------- */
.statement h2{max-width:22ch;font-size:clamp(1.7rem,3.4vw,2.7rem);}
.statement h2 em{font-style:normal;color:var(--blue-text);}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:0.92rem;}
.cmp th{
  text-align:left;font-family:var(--mono);font-size:0.68rem;font-weight:400;letter-spacing:0.005em;
  text-transform:none;padding:1rem;border-bottom:1px solid var(--line);color:var(--slate);vertical-align:bottom;
}
.cmp th.warn{color:var(--amber);}
.cmp th.good{color:var(--blue-text);}
.cmp td{padding:1.35rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
.cmp td:first-child{font-weight:600;color:var(--text);width:15%;font-size:0.86rem;}
.cmp td.warn{width:42.5%;color:var(--slate);}
.cmp td.good{width:42.5%;color:var(--text);background:rgba(47,111,237,0.04);}
.mark{display:inline-block;margin-right:0.55rem;font-weight:700;}
.mark.w{color:var(--amber);}
.mark.g{color:var(--blue-text);}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroll-x table{min-width:700px;}

/* ---------- anchor blocks ---------- */
.anchor{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink-line);margin-bottom:2.5rem;}
.anchor>div{padding:2.4rem;}
.anchor>div:first-child{border-right:1px solid var(--ink-line);background:rgba(255,255,255,0.02);}
.anchor.light{border-color:var(--line-2);}
.anchor.light>div:first-child{border-right-color:var(--line-2);background:var(--paper-alt);}
.anchor-label{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);margin-bottom:1.1rem;
}
.anchor-label.blue{color:var(--blue-light);}
.anchor.light .anchor-label{color:var(--slate);}
.anchor.light .anchor-label.blue{color:var(--blue-text);}
.anchor-num{
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.9rem);color:var(--white);
  line-height:1;letter-spacing:-0.03em;margin-bottom:0.7rem;
}
.anchor-num.blue{color:var(--blue-light);}
.anchor.light .anchor-num{color:var(--text);}
.anchor.light .anchor-num.blue{color:var(--blue);}
.anchor-sub{font-size:0.88rem;line-height:1.6;color:var(--grey-dark);}
.anchor.light .anchor-sub{color:var(--slate);}
@media(max-width:760px){
  .anchor{grid-template-columns:1fr;}
  .anchor>div:first-child{border-right:none;border-bottom:1px solid var(--ink-line);}
}

.breakdown{width:100%;border-collapse:collapse;font-size:0.9rem;}
.breakdown th{
  text-align:left;font-family:var(--mono);font-size:0.68rem;font-weight:400;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);padding:0.9rem 1rem;border-bottom:1px solid var(--ink-line);
}
.breakdown th:last-child,.breakdown td:last-child{text-align:right;}
.breakdown td{padding:0.95rem 1rem;border-bottom:1px solid var(--ink-line);color:var(--grey-dark);}
.breakdown td:first-child{color:var(--white);}
.breakdown tr.total td{font-weight:700;color:var(--white);border-bottom:none;border-top:1px solid var(--ink-line-2);}

/* ---------- grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:880px){.grid-3{grid-template-columns:1fr;}}
@media(max-width:660px){.grid-2,.grid-4{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.card{
  border:1px solid var(--ink-line);padding:1.9rem;background:rgba(255,255,255,0.02);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.card:hover{border-color:rgba(108,151,255,0.45);transform:translateY(-3px);background:rgba(47,111,237,0.05);}
.card h3{margin-bottom:0.75rem;}
.card p{font-size:0.92rem;line-height:1.7;color:var(--grey-dark);}
.card.light{border-color:var(--line);background:var(--white);}
.card.light:hover{border-color:rgba(47,111,237,0.4);background:var(--white);}
.card.light h3{color:var(--text);}
.card.light p{color:var(--slate);}
.card-num{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--blue-light);margin-bottom:1rem;}
.card.light .card-num{color:var(--blue-text);}
.card-icon{font-size:1.5rem;display:block;margin-bottom:1rem;}

/* gradient tiles — the "futuristic" card treatment */
.tile{
  border:1px solid var(--ink-line);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s ease,border-color .25s ease;
}
.tile:hover{transform:translateY(-4px);border-color:rgba(108,151,255,0.5);}
.tile-top{
  padding:2rem;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(135deg,#08111F 0%,#132C55 55%,#2F6FED 100%);position:relative;
}
.tile-top.alt-1{background:linear-gradient(135deg,#08111F 0%,#10233F 55%,#1E4FA8 100%);}
.tile-top.alt-2{background:linear-gradient(135deg,#0A1526 0%,#1A3A6B 55%,#4A82F5 100%);}
.tile-top.alt-3{background:linear-gradient(135deg,#060D18 0%,#0E1D33 55%,#25518F 100%);}
.tile-top::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:18px 18px;
}
.tile-kind{
  position:relative;font-family:var(--mono);font-size:0.63rem;letter-spacing:0.005em;
  text-transform:none;color:rgba(255,255,255,0.8);margin-bottom:0.6rem;
}
.tile-top h3{position:relative;font-size:1.4rem;}
.tile-body{padding:1.6rem 1.75rem;flex:1;background:rgba(255,255,255,0.02);}
.tile-body p{font-size:0.9rem;line-height:1.7;color:var(--grey-dark);}
.tile-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-bottom:1px solid var(--ink-line);}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:1.25rem;}
.tag{
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:none;
  color:var(--grey-dark);border:1px solid var(--ink-line-2);padding:0.32rem 0.62rem;
}
.tag.light{border-color:var(--line-2);color:var(--slate);}
.tag.blue{border-color:rgba(108,151,255,0.45);color:var(--blue-light);}

/* ---------- numbered rows ---------- */
.numbered{border-top:1px solid var(--ink-line);}
.num-row{
  display:grid;grid-template-columns:90px 1fr 210px;gap:2rem;align-items:start;
  padding:2.2rem 0;border-bottom:1px solid var(--ink-line);
}
.num-row .n{font-family:var(--mono);font-size:0.8rem;color:var(--blue-light);}
.num-row h3{margin-bottom:0.7rem;}
.num-row p{font-size:0.92rem;line-height:1.7;color:var(--grey-dark);}
.num-row .meta{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);text-align:right;}
.numbered.light{border-top-color:var(--line);}
.numbered.light .num-row{border-bottom-color:var(--line);}
.numbered.light .num-row h3{color:var(--text);}
.numbered.light .num-row p{color:var(--slate);}
.numbered.light .num-row .n{color:var(--blue-text);}
.numbered.light .num-row .meta{color:var(--slate);}
@media(max-width:880px){
  .num-row{grid-template-columns:1fr;gap:0.7rem;}
  .num-row .meta{text-align:left;}
}

/* ---------- process ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.proc{padding:2.2rem 2rem 2.2rem 0;border-right:1px solid var(--line);}
.proc:last-child{border-right:none;}
.proc .n{font-family:var(--mono);font-size:0.76rem;color:var(--blue-text);display:block;margin-bottom:1rem;}
.proc h3{color:var(--text);margin-bottom:0.65rem;}
.proc p{font-size:0.9rem;line-height:1.7;color:var(--slate);}
.proc-time{
  display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.005em;
  text-transform:none;color:var(--blue-text);border:1px solid rgba(47,111,237,0.35);
  background:rgba(47,111,237,0.06);padding:0.35rem 0.7rem;
}
@media(max-width:880px){
  .proc-grid{grid-template-columns:1fr;}
  .proc{border-right:none;border-bottom:1px solid var(--line);padding-right:0;}
  .proc:last-child{border-bottom:none;}
}

/* ---------- audit / score report ---------- */
.report{border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);padding:2rem;}
.report-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--ink-line);
}
.report-head .t{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.9rem;}
.score{text-align:center;padding:1.1rem 0.5rem;border:1px solid var(--ink-line);}
.score b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;margin-bottom:0.35rem;}
.score.bad b{color:#E8705A;}
.score.mid b{color:#E0A33C;}
.score.good b{color:#3FBF7F;}
.score span{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);}
.score-arrow{text-align:center;font-family:var(--mono);font-size:0.72rem;color:var(--blue-light);padding:1rem 0;letter-spacing:0.1em;}
@media(max-width:560px){.score-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- calculator ---------- */
.calc-wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3.5rem;align-items:center;}
.calc-field{margin-bottom:2rem;}
.calc-field label{
  display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:0.72rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin-bottom:0.85rem;
}
.calc-field label span{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--blue-light);letter-spacing:-0.02em;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--ink-line-2);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;}
input[type=range]:focus-visible{outline:2px solid var(--blue-light);outline-offset:4px;}
.calc-result{border:1px solid var(--ink-line);background:rgba(47,111,237,0.05);padding:2.5rem 2rem;text-align:center;}
.calc-label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin-bottom:1rem;}
.calc-num{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,4.4rem);color:var(--blue-light);line-height:1;letter-spacing:-0.04em;margin-bottom:0.8rem;}
.calc-sub{font-size:0.9rem;line-height:1.65;color:var(--dim);margin-bottom:1.25rem;}
.calc-cite{font-size:0.72rem;line-height:1.6;color:var(--grey-dark);padding-top:1.25rem;border-top:1px solid var(--ink-line);}
@media(max-width:900px){.calc-wrap{grid-template-columns:1fr;gap:2.5rem;}}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;}
.price-card{
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);display:flex;flex-direction:column;position:relative;
  transition:border-color .2s ease,transform .2s ease;
}
.price-card:hover{border-color:rgba(108,151,255,0.4);transform:translateY(-3px);}
.price-card.feat{border-color:var(--blue);background:rgba(47,111,237,0.06);}
.price-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-bottom:1px solid var(--ink-line);}
.price-body{padding:2rem 1.85rem;display:flex;flex-direction:column;flex:1;}
.price-flag{
  position:absolute;top:-11px;left:1.85rem;background:var(--blue);color:#fff;font-family:var(--mono);
  font-size:0.62rem;letter-spacing:0.005em;text-transform:none;padding:0.3rem 0.8rem;z-index:2;
}
.price-num{font-family:var(--display);font-weight:800;font-size:2.9rem;color:var(--white);line-height:1;letter-spacing:-0.035em;margin-bottom:0.4rem;}
.price-card.feat .price-num{color:var(--blue-light);}
.price-name{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--white);margin-bottom:0.6rem;}
.price-who{
  font-family:var(--mono);font-size:0.63rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);
  line-height:1.7;padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--ink-line);
}
.price-feats{list-style:none;flex:1;margin-bottom:1.75rem;}
.price-feats li{
  font-size:0.88rem;line-height:1.55;color:var(--grey-dark);padding:0.5rem 0;
  display:flex;gap:0.65rem;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,0.04);
}
.price-feats li:last-child{border-bottom:none;}
.price-feats li::before{content:'✓';color:var(--blue-light);font-weight:700;flex-shrink:0;}
.price-feats li b{color:var(--white);font-weight:600;}
.price-updates{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.005em;color:var(--grey-dark);
  line-height:1.8;padding:1rem;border:1px solid var(--ink-line);margin-bottom:1.5rem;
}
@media(max-width:920px){.price-grid{grid-template-columns:1fr;}}

/* ---------- five-way comparison ---------- */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
.five-card{border:1px solid var(--ink-line);overflow:hidden;position:relative;transition:transform .2s ease,border-color .2s ease;display:flex;flex-direction:column;}
.five-card:hover{transform:translateY(-4px);border-color:rgba(108,151,255,0.5);}
.five-card.best{border-color:var(--blue);}
.five-shot{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;border-bottom:1px solid var(--ink-line);}
.five-placeholder{
  width:100%;aspect-ratio:4/3;border-bottom:1px solid var(--ink-line);
  background:linear-gradient(135deg,#08111F 0%,#132C55 55%,#25518F 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.005em;text-transform:none;color:rgba(255,255,255,0.45);
}
.five-body{padding:1.4rem 1.15rem;background:rgba(255,255,255,0.02);flex:1;}
.five-name{font-family:var(--display);font-weight:800;font-size:1.18rem;color:var(--white);letter-spacing:-0.025em;}
.five-who{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin:0.4rem 0 1.1rem;}
.five-price{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--white);line-height:1;}
.five-card.best .five-price{color:var(--blue-light);}
.five-per{font-family:var(--mono);font-size:0.6rem;color:var(--grey-dark);margin:0.35rem 0 1.3rem;}
.bar{margin-bottom:0.75rem;}
.bar-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:0.56rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);margin-bottom:0.3rem;}
.bar-t{height:3px;background:var(--ink-line-2);}
.bar-f{height:100%;background:var(--white);}
.five-card.best .bar-f{background:var(--blue);}
@media(max-width:1100px){.five{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.five{grid-template-columns:1fr;}}

/* ---------- industry picker ---------- */
.picker{
  display:flex;flex-wrap:wrap;gap:0.6rem;padding:1.5rem;border:1px solid var(--ink-line);
  background:rgba(255,255,255,0.02);margin-bottom:2.5rem;
}
.picker button{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);background:transparent;border:1px solid var(--ink-line-2);
  padding:0.6rem 1rem;cursor:pointer;transition:all .18s ease;
}
.picker button:hover{color:var(--white);border-color:var(--blue-light);}
.picker button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.picker button:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px;}
.industry-panel{border:1px solid var(--ink-line);padding:2.25rem;background:rgba(255,255,255,0.02);}
.industry-head{padding-bottom:1.5rem;margin-bottom:1.75rem;border-bottom:1px solid var(--ink-line);}
.industry-head h3{margin-bottom:0.6rem;font-size:clamp(1.5rem,2.6vw,2.1rem);}
.industry-head p{font-size:0.95rem;line-height:1.7;color:var(--grey-dark);}
.industry-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.itier{border:1px solid var(--ink-line);padding:1.5rem;}
.itier.rec{border-color:var(--blue);background:rgba(47,111,237,0.06);}
.itier-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;}
.itier-price{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--white);letter-spacing:-0.03em;}
.itier.rec .itier-price{color:var(--blue-light);}
.itier-tier{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);}
.itier ul{list-style:none;}
.itier li{font-size:0.85rem;line-height:1.5;color:var(--grey-dark);padding:0.4rem 0;display:flex;gap:0.55rem;}
.itier li::before{content:'—';color:var(--blue-light);flex-shrink:0;}
.itier-rec-flag{
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.75rem;display:block;
}
@media(max-width:880px){.industry-tiers{grid-template-columns:1fr;}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--sans);font-weight:700;font-size:1.03rem;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--blue-text);line-height:1;}
.faq details[open] summary::after{content:'−';}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.faq p{padding:0 3rem 1.6rem 0;font-size:0.93rem;line-height:1.75;color:var(--slate);}
.faq.dark{border-top-color:var(--ink-line);}
.faq.dark details{border-bottom-color:var(--ink-line);}
.faq.dark summary{color:var(--white);}
.faq.dark summary::after{color:var(--blue-light);}
.faq.dark p{color:var(--grey-dark);}

/* ---------- team ---------- */
.team-card{border:1px solid var(--ink-line);padding:2.1rem;background:rgba(255,255,255,0.02);transition:border-color .2s ease,transform .2s ease;}
.team-card:hover{border-color:rgba(108,151,255,0.4);transform:translateY(-3px);}
.team-role{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.005em;text-transform:none;color:var(--blue-light);margin:0.5rem 0 1.2rem;}
.team-card h3{font-size:1.45rem;}
.team-card p{font-size:0.92rem;line-height:1.7;color:var(--grey-dark);}
.team-built{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--ink-line);}
.team-built .lab{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin-bottom:0.75rem;}
.team-built ul{list-style:none;}
.team-built li{font-size:0.86rem;line-height:1.5;color:var(--white);padding:0.32rem 0;display:flex;gap:0.55rem;}
.team-built li::before{content:'—';color:var(--blue-light);flex-shrink:0;}

/* ---------- forms ---------- */
.form-group{display:flex;flex-direction:column;margin-bottom:1.4rem;}
.form-group label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin-bottom:0.6rem;}
.form-group input,.form-group select,.form-group textarea{
  font-family:var(--sans);font-size:0.94rem;padding:0.9rem 1rem;background:rgba(255,255,255,0.03);
  border:1px solid var(--ink-line-2);color:var(--white);width:100%;border-radius:3px;
}
.form-group textarea{min-height:150px;resize:vertical;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);background:rgba(47,111,237,0.07);}
.form-group input::placeholder,.form-group textarea::placeholder{color:#5D7089;}
.form-group select option{background:var(--ink);color:var(--white);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
@media(max-width:660px){.form-row{grid-template-columns:1fr;}}
.form-hint{font-size:0.78rem;line-height:1.65;color:var(--grey-dark);margin-top:1rem;}
.form-hint a{color:var(--blue-light);}

/* ---------- contact rows ---------- */
.contact-card{border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);padding:2rem;}
.contact-row{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--ink-line);}
.contact-row:last-of-type{border-bottom:none;}
.contact-row>span{font-size:1.15rem;flex-shrink:0;}
.contact-row small{display:block;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin-bottom:0.3rem;}
.contact-row a{color:var(--white);font-weight:600;font-size:0.96rem;text-decoration:none;border-bottom:1px solid var(--ink-line-2);}
.contact-row a:hover{color:var(--blue-light);border-bottom-color:var(--blue-light);}
.contact-note{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--ink-line);font-size:0.84rem;line-height:1.7;color:var(--grey-dark);}

/* ---------- steps ---------- */
.steps{border-top:1px solid var(--ink-line);}
.step{display:grid;grid-template-columns:56px 1fr;gap:1.4rem;padding:1.6rem 0;border-bottom:1px solid var(--ink-line);}
.step .n{font-family:var(--mono);font-size:0.8rem;color:var(--blue-light);}
.step h4{margin-bottom:0.35rem;}
.step p{font-size:0.9rem;line-height:1.65;color:var(--grey-dark);}

/* ---------- trust row ---------- */
.trust{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2.5rem;}
.trust span{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);}

/* ---------- referral ---------- */
.referral{background:var(--ink-soft);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);}
.referral-inner{text-align:center;max-width:640px;margin:0 auto;padding:4.5rem 2rem;}
.referral h2{margin:0 auto 1.1rem;}
.referral h2 em{font-style:normal;color:var(--blue-light);}
.referral p{font-size:1rem;line-height:1.7;margin-bottom:2rem;color:var(--dim);}

/* ---------- cta band ---------- */
.cta-band{background:var(--ink);border-top:1px solid var(--ink-line);padding:100px 0 110px;text-align:center;}
.cta-band h2{margin:0 auto 1.25rem;}
.cta-band h2 em{font-style:normal;color:var(--blue-light);}
.cta-band p{font-size:1.08rem;line-height:1.65;color:var(--dim);max-width:56ch;margin:0 auto 2.5rem;}
.cta-band .btn-row{justify-content:center;}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--ink-line);padding:4rem 0 2.5rem;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;}
.footer-brand .logo{font-size:1.5rem;}
.footer-brand p{font-size:0.88rem;line-height:1.7;color:var(--grey-dark);margin-top:1rem;max-width:34ch;}
.footer-col h3{font-family:var(--mono);font-size:0.64rem;font-weight:400;letter-spacing:0.005em;text-transform:none;color:var(--white);margin-bottom:1.2rem;}
.footer-col a{display:block;font-size:0.88rem;color:var(--grey-dark);text-decoration:none;padding:0.35rem 0;transition:color .16s ease;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid var(--ink-line);padding-top:2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;color:var(--grey-dark);}
.footer-bottom a{color:var(--grey-dark);}
.footer-bottom a:hover{color:var(--white);}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- mobile sticky bar ---------- */
.mobile-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:95;background:var(--ink);
  border-top:1px solid var(--ink-line);padding:0.7rem 1rem;gap:0.7rem;align-items:center;
}
.mobile-bar .btn{flex:1;padding:0.85rem 1rem;font-size:0.85rem;}
.mobile-wa{
  width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-line-2);font-size:1.25rem;text-decoration:none;border-radius:3px;
}
@media(max-width:760px){.mobile-bar{display:flex;}body{padding-bottom:74px;}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translate3d(0,0,0);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- misc ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:0.75rem 1.25rem;z-index:200;}
.skip-link:focus{left:0;}
.note{font-size:0.8rem;line-height:1.7;color:var(--grey-dark);}
.on-paper .note,.on-alt .note{color:var(--slate);}
.lede{font-size:1.08rem;line-height:1.65;}

/* ============================================================
   ROUND 2 — interactivity, glow, movement
   All animation is transform/opacity only, so it stays
   composited and doesn't cost Performance score.
   ============================================================ */

/* ---------- ambient glow orbs ---------- */
.glowbg{position:relative;overflow:hidden;isolation:isolate;}
.glowbg::before,.glowbg::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  filter:blur(90px);opacity:0.5;
}
.glowbg::before{
  width:520px;height:520px;top:-160px;right:-120px;
  background:radial-gradient(circle,rgba(47,111,237,0.55) 0%,rgba(47,111,237,0) 70%);
  animation:drift1 18s ease-in-out infinite alternate;
}
.glowbg::after{
  width:420px;height:420px;bottom:-180px;left:-100px;
  background:radial-gradient(circle,rgba(108,151,255,0.35) 0%,rgba(108,151,255,0) 70%);
  animation:drift2 22s ease-in-out infinite alternate;
}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-60px,50px,0) scale(1.15);}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(70px,-40px,0) scale(1.1);}}
@media(prefers-reduced-motion:reduce){.glowbg::before,.glowbg::after{animation:none;}}

/* ---------- glowing card treatment ---------- */
.card,.tile,.team-card,.price-card,.tier-card{position:relative;}
.card::after,.team-card::after,.price-card::after,.tier-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(47,111,237,0.13),transparent 45%);
}
.card:hover::after,.team-card:hover::after,.price-card:hover::after,.tier-card:hover::after{opacity:1;}
.card:hover,.team-card:hover{box-shadow:0 12px 40px -12px rgba(47,111,237,0.45);}
.card::before,.team-card::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transition:width .35s ease;
}
.card:hover::before,.team-card:hover::before{width:100%;}
.card.light:hover{box-shadow:0 12px 40px -14px rgba(47,111,237,0.35);}

/* ---------- section accents ---------- */
.accent-line{
  width:56px;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-light));
  margin-bottom:1.6rem;border-radius:2px;
}

/* ---------- tier comparison cards ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.tier-card{
  border:1px solid var(--ink-line);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
  background:rgba(255,255,255,0.02);
}
.tier-card:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 22px 50px -20px rgba(47,111,237,0.55);}
.tier-card.feat{border-color:var(--blue);background:rgba(47,111,237,0.06);}
.tier-visual{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink-line);
  background:linear-gradient(135deg,#08111F 0%,#132C55 55%,#25518F 100%);
}
.tier-visual::before{
  content:'';position:absolute;inset:0;z-index:2;
  background-image:radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:16px 16px;
}
.tier-visual img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tier-card:hover .tier-visual img{transform:scale(1.06);}
.tier-badge{
  position:absolute;top:0.9rem;left:0.9rem;z-index:3;font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.005em;text-transform:none;color:#fff;background:rgba(8,17,31,0.75);
  border:1px solid rgba(255,255,255,0.2);padding:0.3rem 0.65rem;
}
.tier-card.feat .tier-badge{background:var(--blue);border-color:var(--blue);}
.mockframe{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.1rem;z-index:1;}
.mockbar{display:flex;gap:5px;margin-bottom:0.7rem;}
.mockbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25);}
.mockline{height:7px;border-radius:3px;background:rgba(255,255,255,0.14);margin-bottom:7px;}
.mockline.w1{width:58%;background:rgba(108,151,255,0.5);height:11px;}
.mockline.w2{width:88%;}
.mockline.w3{width:74%;}
.mockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;}
.mockgrid span{height:26px;border-radius:3px;background:rgba(255,255,255,0.10);}
.mockgrid span:first-child{background:rgba(47,111,237,0.4);}
.tier-body{padding:1.6rem 1.5rem;flex:1;display:flex;flex-direction:column;}
.tier-name{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--white);letter-spacing:-0.025em;}
.tier-who{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);margin:0.4rem 0 1rem;}
.tier-price{font-family:var(--display);font-weight:800;font-size:2.1rem;color:var(--white);line-height:1;letter-spacing:-0.03em;}
.tier-card.feat .tier-price{color:var(--blue-light);}
.tier-per{font-family:var(--mono);font-size:0.62rem;color:var(--grey-dark);margin:0.4rem 0 1.2rem;}
.tier-metrics{border-top:1px solid var(--ink-line);padding-top:1.1rem;margin-top:auto;}
@media(max-width:920px){.tier-grid{grid-template-columns:1fr;}}
.bar-f{transition:width 1s cubic-bezier(.2,.7,.3,1);}
.bar-t{overflow:hidden;border-radius:2px;}
.tier-card .bar-f{background:linear-gradient(90deg,var(--blue),var(--blue-light));}

/* ---------- vs freelancer strip ---------- */
.vs-strip{display:grid;grid-template-columns:1fr auto 1fr;border:1px solid var(--ink-line);overflow:hidden;}
.vs-col{padding:2rem;}
.vs-col.them{background:rgba(255,255,255,0.02);}
.vs-col.us{background:rgba(47,111,237,0.07);}
.vs-mid{
  display:flex;align-items:center;justify-content:center;padding:0 1.25rem;
  font-family:var(--display);font-weight:800;font-size:0.9rem;color:var(--grey-dark);
  border-left:1px solid var(--ink-line);border-right:1px solid var(--ink-line);
}
.vs-col h3{margin-bottom:1.25rem;}
.vs-list{list-style:none;}
.vs-list li{display:flex;gap:0.7rem;align-items:flex-start;padding:0.55rem 0;font-size:0.9rem;line-height:1.55;color:var(--grey-dark);}
.vs-col.them .vs-list li::before{content:'\2715';color:var(--amber);flex-shrink:0;font-weight:700;}
.vs-col.us .vs-list li::before{content:'\2713';color:var(--blue-light);flex-shrink:0;font-weight:700;}
.vs-col.us .vs-list li{color:var(--white);}
@media(max-width:820px){
  .vs-strip{grid-template-columns:1fr;}
  .vs-mid{border-left:none;border-right:none;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:0.8rem;}
}

/* ---------- industry picker, restyled ---------- */
.picker{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:0.75rem;
  padding:0;border:none;background:none;margin-bottom:2.5rem;
}
.picker button{
  display:flex;flex-direction:column;align-items:flex-start;gap:0.55rem;
  font-family:var(--sans);font-size:0.86rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--grey-dark);background:rgba(255,255,255,0.02);border:1px solid var(--ink-line);
  padding:1.1rem 1rem;cursor:pointer;text-align:left;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,color .25s ease,background .25s ease;
}
.picker button .pico{font-size:1.4rem;line-height:1;}
.picker button::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));transition:width .3s ease;
}
.picker button:hover{color:var(--white);border-color:rgba(108,151,255,0.5);transform:translateY(-3px);background:rgba(47,111,237,0.06);}
.picker button:hover::after{width:100%;}
.picker button[aria-pressed="true"]{
  background:rgba(47,111,237,0.14);border-color:var(--blue);color:var(--white);
  box-shadow:0 10px 30px -14px rgba(47,111,237,0.7);
}
.picker button[aria-pressed="true"]::after{width:100%;}

.industry-panel{
  border:1px solid var(--ink-line);padding:2.5rem;background:rgba(255,255,255,0.02);
  position:relative;overflow:hidden;
}
.industry-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);
}
.industry-head{padding-bottom:1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--ink-line);}
.industry-head .ico{font-size:2.2rem;display:block;margin-bottom:0.9rem;}
.itier{
  border:1px solid var(--ink-line);padding:1.75rem 1.5rem;position:relative;
  background:rgba(255,255,255,0.015);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.itier:hover{transform:translateY(-4px);border-color:rgba(108,151,255,0.5);box-shadow:0 16px 40px -18px rgba(47,111,237,0.5);}
.itier.rec{border-color:var(--blue);background:rgba(47,111,237,0.08);box-shadow:0 12px 36px -18px rgba(47,111,237,0.6);}
.itier li{padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.itier li:last-child{border-bottom:none;}
.panel-fade{animation:fadeUp .45s ease;}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,12px,0);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.panel-fade{animation:none;}}

/* ---------- service blocks ---------- */
.svc{
  display:grid;grid-template-columns:auto 1fr;gap:2rem;padding:2.5rem 0;
  border-bottom:1px solid var(--ink-line);position:relative;
}
.svc:last-child{border-bottom:none;}
.svc-mark{
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-line);font-size:1.5rem;flex-shrink:0;position:relative;
  background:rgba(47,111,237,0.06);transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.svc:hover .svc-mark{transform:translateY(-4px) rotate(-4deg);border-color:var(--blue);background:rgba(47,111,237,0.18);}
.svc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:0.9rem;}
.svc-price{
  font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--blue-light);
  letter-spacing:-0.02em;white-space:nowrap;
}
.svc p{font-size:0.95rem;line-height:1.75;color:var(--grey-dark);}
.svc p+p{margin-top:0.9rem;}
.svc-meta{
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:none;
  color:var(--grey-dark);margin-top:1.1rem;
}
.svc-meta b{color:var(--blue-light);font-weight:400;}
@media(max-width:700px){.svc{grid-template-columns:1fr;gap:1.25rem;}}

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--blue);padding:1.25rem 0 1.25rem 1.5rem;margin:1.5rem 0;
  background:linear-gradient(90deg,rgba(47,111,237,0.09),transparent);
}
.callout p{color:var(--white);font-size:0.96rem;line-height:1.7;}
.callout.ink{border-left-color:var(--blue-text);background:linear-gradient(90deg,rgba(47,111,237,0.07),transparent);}
.callout.ink p{color:var(--text);}

/* ---------- updates box ---------- */
.updates{
  border:1px solid var(--ink-line);border-left:3px solid var(--blue);
  padding:1.1rem 1.25rem;margin-bottom:1.5rem;background:rgba(47,111,237,0.05);
}
.updates .ut{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.6rem;
}
.updates .ur{display:flex;justify-content:space-between;gap:1rem;font-size:0.84rem;padding:0.3rem 0;color:var(--grey-dark);}
.updates .ur b{color:var(--white);font-weight:600;white-space:nowrap;}

/* ---------- arrow link ---------- */
.arrow-link{
  display:inline-flex;align-items:center;gap:0.5rem;font-size:0.9rem;font-weight:600;
  color:var(--blue-light);text-decoration:none;border-bottom:1px solid rgba(108,151,255,0.35);
  padding-bottom:3px;transition:border-color .2s ease,gap .2s ease;
}
.arrow-link:hover{border-bottom-color:var(--blue-light);gap:0.85rem;}
.arrow-link.ink{color:var(--blue-text);border-bottom-color:rgba(38,90,192,0.35);}
.arrow-link.ink:hover{border-bottom-color:var(--blue-text);}

/* ---------- equal-height media/text split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:stretch;}
.split-media{position:relative;overflow:hidden;border:1px solid var(--ink-line);border-radius:4px;}
.split-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.split-media:hover img{transform:scale(1.04);}
.split-text{display:flex;flex-direction:column;justify-content:center;}
@media(max-width:880px){.split{grid-template-columns:1fr;}.split-media{min-height:260px;}}

/* ---------- pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.5rem;}
.pill{
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);border:1px solid rgba(108,151,255,0.35);background:rgba(47,111,237,0.08);
  padding:0.4rem 0.8rem;border-radius:100px;
}

/* ============================================================
   INSTANT AUDIT TOOL — live Google PageSpeed Insights lookup
   ============================================================ */
.audit-tool{
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);
  padding:2.5rem;position:relative;overflow:hidden;
}
.audit-tool::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);
}
.audit-form{display:flex;gap:0.85rem;flex-wrap:wrap;margin-bottom:1rem;}
.audit-form .field{flex:1;min-width:260px;position:relative;}
.audit-form input{
  width:100%;font-family:var(--sans);font-size:1rem;padding:1rem 1.15rem;
  background:rgba(255,255,255,0.04);border:1px solid var(--ink-line-2);
  color:var(--white);border-radius:3px;
}
.audit-form input::placeholder{color:#5D7089;}
.audit-form input:focus{outline:none;border-color:var(--blue);background:rgba(47,111,237,0.08);}
.audit-form button{white-space:nowrap;}
.audit-form button[disabled]{opacity:0.55;cursor:not-allowed;}
.audit-hint{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;color:var(--grey-dark);}

/* status / loading */
.audit-status{display:none;margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--ink-line);}
.audit-status.on{display:block;}
.audit-bar{height:3px;background:var(--ink-line-2);border-radius:2px;overflow:hidden;margin-bottom:1rem;}
.audit-bar i{
  display:block;height:100%;width:30%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  animation:auditslide 1.4s ease-in-out infinite;
}
@keyframes auditslide{
  0%{transform:translateX(-110%);}
  100%{transform:translateX(380%);}
}
@media(prefers-reduced-motion:reduce){.audit-bar i{animation:none;width:100%;}}
.audit-msg{font-size:0.92rem;color:var(--grey-dark);line-height:1.7;}
.audit-msg b{color:var(--white);font-weight:600;}
.audit-msg.err{color:#E8705A;}

/* results */
.audit-results{display:none;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--ink-line);}
.audit-results.on{display:block;animation:fadeUp .5s ease;}
.audit-target{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;
}
.audit-target .u{font-family:var(--mono);font-size:0.82rem;color:var(--blue-light);word-break:break-all;}
.audit-target .s{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);}

.ring-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:640px){.ring-grid{grid-template-columns:repeat(2,1fr);}}
.ring-item{text-align:center;padding:1.25rem 0.5rem;border:1px solid var(--ink-line);}
.ring{position:relative;width:96px;height:96px;margin:0 auto 0.85rem;}
.ring svg{transform:rotate(-90deg);width:96px;height:96px;}
.ring circle{fill:none;stroke-width:6;}
.ring .track{stroke:rgba(255,255,255,0.10);}
.ring .bar{stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1);}
.ring .val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.65rem;letter-spacing:-0.02em;
}
.ring-item .lbl{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);}
.ring-item.good .bar{stroke:#3FBF7F;} .ring-item.good .val{color:#3FBF7F;}
.ring-item.mid  .bar{stroke:#E0A33C;} .ring-item.mid  .val{color:#E0A33C;}
.ring-item.bad  .bar{stroke:#E8705A;} .ring-item.bad  .val{color:#E8705A;}

.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem;}
@media(max-width:640px){.metric-grid{grid-template-columns:1fr;}}
.metric{border:1px solid var(--ink-line);padding:1.1rem 1.25rem;}
.metric b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--white);line-height:1;margin-bottom:0.35rem;}
.metric span{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);}
.metric.warn b{color:#E0A33C;}
.metric.bad b{color:#E8705A;}

.audit-verdict{
  margin-top:1.5rem;border-left:3px solid var(--blue);padding:1.25rem 1.5rem;
  background:linear-gradient(90deg,rgba(47,111,237,0.10),transparent);
}
.audit-verdict p{color:var(--white);font-size:0.98rem;line-height:1.75;}
.audit-verdict .sub{color:var(--grey-dark);font-size:0.88rem;margin-top:0.6rem;}

/* example report toggle */
.audit-example{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--ink-line);}
.audit-example summary{
  cursor:pointer;list-style:none;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;
  text-transform:none;color:var(--blue-light);padding:0.4rem 0;
}
.audit-example summary::-webkit-details-marker{display:none;}
.audit-example summary::before{content:'+ ';}
.audit-example[open] summary::before{content:'− ';}
.audit-example summary:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;}
.audit-example .inner{padding-top:1.5rem;}

/* ---------- scroll progress bar ---------- */
.scroll-prog{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transition:width .1s linear;pointer-events:none;
}

/* ---------- hero scorecard (replaces the illustration) ---------- */
.hero-card{
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.03);
  border-radius:4px;overflow:hidden;width:100%;max-width:440px;
  box-shadow:0 26px 60px -30px rgba(47,111,237,0.6);
}
.hero-card-top{
  display:flex;align-items:center;gap:0.9rem;padding:0.85rem 1.15rem;
  border-bottom:1px solid var(--ink-line);background:rgba(255,255,255,0.03);
}
.hc-dots{display:flex;gap:5px;}
.hc-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.22);}
.hc-lbl{
  font-family:var(--mono);font-size:0.64rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);
}
.hero-card-body{padding:1.5rem 1.35rem 1.35rem;}
.hero-card .score-grid{grid-template-columns:repeat(2,1fr);gap:0.7rem;}
.hero-card .score{padding:1rem 0.5rem;}
.hero-card .score b{font-size:2.1rem;}
.hc-note{
  font-size:0.8rem;line-height:1.65;color:var(--grey-dark);
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--ink-line);
}
@media(max-width:940px){.hero-card{max-width:420px;margin:0 auto;}}

/* metrics strip inside the hero scorecard */
.hc-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;
  margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--ink-line);
}
.hc-metrics span{
  display:flex;flex-direction:column;gap:0.15rem;text-align:center;
  font-family:var(--mono);font-size:0.55rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);
}
.hc-metrics b{
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  letter-spacing:-0.02em;color:var(--blue-light);
}

/* ============================================================
   ROUND 3 — clarity, accessibility, polish
   Everything here is CSS-only or transform/opacity animation,
   so none of it costs Performance score.
   ============================================================ */

/* ---------- sitewide focus visibility (keyboard users) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue-light);
  outline-offset:3px;
  border-radius:2px;
}
.on-paper a:focus-visible,.on-alt a:focus-visible,
.on-paper button:focus-visible,.on-alt button:focus-visible{
  outline-color:var(--blue);
}

/* ---------- breadcrumbs ---------- */
.crumbs{
  border-bottom:1px solid var(--ink-line);background:rgba(255,255,255,0.015);
}
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  max-width:var(--wrap);margin:0 auto;padding:0.85rem 2rem;
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.005em;text-transform:none;
}
.crumbs a{color:var(--grey-dark);text-decoration:none;transition:color .16s ease;}
.crumbs a:hover{color:var(--blue-light);}
.crumbs li[aria-current]{color:var(--white);}
.crumbs li+li::before{content:'/';margin-right:0.5rem;color:var(--ink-line-2);}
.crumbs li{display:flex;align-items:center;}

/* ---------- feature comparison matrix ---------- */
.matrix-wrap{border:1px solid var(--ink-line);overflow:hidden;}
.matrix{width:100%;border-collapse:collapse;font-size:0.9rem;}
.matrix th,.matrix td{padding:0.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--ink-line);}
.matrix thead th{
  font-family:var(--mono);font-size:0.66rem;font-weight:400;letter-spacing:0.1em;
  text-transform:none;color:var(--grey-dark);background:rgba(255,255,255,0.03);
  vertical-align:bottom;position:sticky;top:72px;z-index:5;backdrop-filter:blur(8px);
}
.matrix thead th.feat{color:var(--blue-light);}
.matrix tbody th{
  font-weight:500;color:var(--white);font-size:0.88rem;width:40%;
}
.matrix tbody th small{display:block;font-weight:400;color:var(--grey-dark);font-size:0.78rem;margin-top:0.2rem;line-height:1.5;}
.matrix td{text-align:center;width:20%;color:var(--grey-dark);font-size:0.86rem;}
.matrix td.col-feat{background:rgba(47,111,237,0.06);color:var(--white);}
.matrix .yes{color:#3FBF7F;font-weight:700;font-size:1rem;}
.matrix .no{color:var(--ink-line-2);font-size:1rem;}
.matrix tr:last-child th,.matrix tr:last-child td{border-bottom:none;}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:rgba(255,255,255,0.03);}
.matrix tbody tr:hover td.col-feat{background:rgba(47,111,237,0.10);}
.matrix-price{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--white);display:block;margin-top:0.3rem;letter-spacing:-0.02em;}
.matrix thead th.feat .matrix-price{color:var(--blue-light);}
@media(max-width:820px){
  .matrix thead th{position:static;}
  .matrix th,.matrix td{padding:0.75rem 0.6rem;font-size:0.8rem;}
  .matrix tbody th{width:34%;}
  .matrix tbody th small{display:none;}
}

/* ---------- sticky section nav ---------- */
.jump{
  position:sticky;top:72px;z-index:40;background:rgba(8,17,31,0.94);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--ink-line);
}
.jump-inner{
  display:flex;gap:1.5rem;align-items:center;overflow-x:auto;
  max-width:var(--wrap);margin:0 auto;padding:0.8rem 2rem;scrollbar-width:none;
}
.jump-inner::-webkit-scrollbar{display:none;}
.jump a{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:none;
  color:var(--grey-dark);text-decoration:none;white-space:nowrap;padding:0.25rem 0;
  border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease;
}
.jump a:hover,.jump a.on{color:var(--white);border-bottom-color:var(--blue);}

/* ---------- FAQ filter ---------- */
.faq-search{position:relative;margin-bottom:2rem;}
.faq-search input{
  width:100%;font-family:var(--sans);font-size:1rem;padding:0.95rem 1.15rem 0.95rem 2.9rem;
  background:var(--white);border:1px solid var(--line-2);color:var(--text);border-radius:3px;
}
.faq-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,0.15);}
.faq-search .ico{
  position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  color:var(--slate);font-size:0.95rem;pointer-events:none;
}
.faq-count{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--slate);margin-top:0.75rem;
}
.faq details[hidden]{display:none;}
.faq-empty{
  display:none;padding:2rem;border:1px dashed var(--line-2);text-align:center;
  color:var(--slate);font-size:0.92rem;line-height:1.7;
}
.faq-empty.on{display:block;}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:80;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ink-line-2);
  background:rgba(8,17,31,0.9);backdrop-filter:blur(8px);color:var(--white);
  cursor:pointer;font-size:1.1rem;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,border-color .2s ease;
}
.to-top.on{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{border-color:var(--blue);background:var(--blue);}
@media(max-width:760px){.to-top{bottom:86px;right:1rem;}}

/* ---------- count-up stat ---------- */
.hero-stat b[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- process step connector line ---------- */
.proc-grid{position:relative;}
.proc .n{position:relative;display:inline-block;}
.proc .n::after{
  content:'';position:absolute;left:calc(100% + 0.75rem);top:50%;
  height:1px;width:0;background:linear-gradient(90deg,var(--blue),transparent);
  transition:width .8s ease .2s;
}
.proc.in-view .n::after{width:70px;}
@media(max-width:880px){.proc .n::after{display:none;}}

/* ---------- "is this you?" qualifier band ---------- */
.qualify{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:880px){.qualify{grid-template-columns:1fr;}}
.qual-card{
  border:1px solid var(--ink-line);padding:1.75rem;background:rgba(255,255,255,0.02);
  transition:border-color .25s ease,transform .25s ease;
}
.qual-card:hover{border-color:rgba(108,151,255,0.45);transform:translateY(-3px);}
.qual-card .q{
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--white);
  margin-bottom:0.75rem;line-height:1.35;
}
.qual-card p{font-size:0.9rem;line-height:1.7;color:var(--grey-dark);}
.qual-card .a{
  display:inline-flex;align-items:center;gap:0.45rem;margin-top:1.1rem;
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:none;
  color:var(--blue-light);text-decoration:none;border-bottom:1px solid rgba(108,151,255,0.3);padding-bottom:2px;
}
.qual-card .a:hover{border-bottom-color:var(--blue-light);}

/* ---------- at-a-glance summary box ---------- */
.glance{
  border:1px solid var(--ink-line);border-left:3px solid var(--blue);
  background:rgba(47,111,237,0.05);padding:1.5rem 1.75rem;margin-bottom:2.5rem;
}
.glance .t{
  font-family:var(--mono);font-size:0.64rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.85rem;
}
.glance ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem 1.5rem;}
@media(max-width:700px){.glance ul{grid-template-columns:1fr;}}
.glance li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.9rem;line-height:1.6;color:var(--white);}
.glance li::before{content:'✓';color:#3FBF7F;flex-shrink:0;font-weight:700;}
.glance.ink{border-left-color:var(--blue);background:rgba(47,111,237,0.06);}
.glance.ink li{color:var(--text);}
.glance.ink .t{color:var(--blue-text);}

/* ---------- page transitions (progressive, ignored where unsupported) ---------- */
@view-transition{navigation:auto;}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none;}}

/* ---------- print ---------- */
@media print{
  .site-header,.mobile-bar,.to-top,.scroll-prog,.marquee,.jump,.crumbs,
  .audit-tool,.glowbg::before,.glowbg::after,.burger,.mobile-menu,
  .cta-band .btn-row,footer .footer-col{display:none !important;}
  body{background:#fff !important;color:#000 !important;font-size:11pt;padding:0 !important;}
  .section,.hero,.cta-band{padding:1.2rem 0 !important;background:#fff !important;}
  h1,h2,h3,h4,.tier-name,.tier-price,.price-name,.price-num,.hero-stat b{color:#000 !important;}
  p,li,td,th,.lede,.note,.tier-who,.price-who{color:#222 !important;}
  .card,.tier-card,.price-card,.matrix-wrap,.anchor,.itier{
    border:1px solid #999 !important;background:#fff !important;box-shadow:none !important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .reveal{opacity:1 !important;transform:none !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
  a[href^="/"]::after{content:"";}
  .tier-grid,.price-grid,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr) !important;}
  footer{background:#fff !important;border-top:1px solid #999 !important;}
  .footer-brand p,.footer-bottom{color:#333 !important;}
}

/* anchor targets clear the sticky header + jump nav */
[id]{scroll-margin-top:130px;}
main>section[id]{scroll-margin-top:130px;}

/* ---------- build stats + list (fills the tall-screenshot column) ---------- */
.build-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:1.75rem 0 1.5rem;padding:1.25rem 0;
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
}
.build-stats div{display:flex;flex-direction:column;gap:0.3rem;}
.build-stats b{
  font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;
  color:var(--blue-light);letter-spacing:-0.02em;
}
.build-stats span{
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);line-height:1.5;
}
@media(max-width:520px){.build-stats{grid-template-columns:1fr;gap:0.85rem;}}
.build-list{list-style:none;margin-bottom:1.5rem;}
.build-list li{
  display:flex;gap:0.7rem;align-items:flex-start;padding:0.45rem 0;
  font-size:0.9rem;line-height:1.6;color:var(--grey-dark);
}
.build-list li::before{content:'✓';color:var(--blue-light);font-weight:700;flex-shrink:0;}

/* tall screenshots: crop rather than stretch the whole row */
.split-media{align-self:start;max-height:620px;}
.split-media img{height:100%;max-height:620px;object-fit:cover;object-position:top center;}
.split-text{justify-content:flex-start;}

/* ---------- decorative band image ---------- */
.band-img{
  position:relative;overflow:hidden;border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);
}
.band-img img{
  width:100%;height:180px;object-fit:cover;display:block;opacity:0.85;
}
.band-img .cap{
  position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(8,17,31,0.92) 0%,rgba(8,17,31,0.55) 55%,rgba(8,17,31,0.2) 100%);
}
.band-img .cap div{max-width:var(--wrap);margin:0 auto;padding:0 2rem;width:100%;}
.band-img .cap b{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.9rem);
  color:var(--white);letter-spacing:-0.02em;margin-bottom:0.35rem;
}
.band-img .cap span{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;
  text-transform:none;color:var(--blue-light);
}
@media(max-width:640px){.band-img img{height:150px;}}

/* ============================================================
   BEFORE / AFTER SLIDER — both sides drawn in CSS, zero images
   ============================================================ */
.ba{
  position:relative;border:1px solid var(--ink-line);overflow:hidden;
  aspect-ratio:16/10;background:var(--ink);user-select:none;touch-action:pan-y;
}
@media(max-width:700px){.ba{aspect-ratio:4/5;}}
.ba-pane{position:absolute;inset:0;overflow:hidden;}
.ba-pane.after{clip-path:inset(0 0 0 var(--split,50%));}
.ba-pane.before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);}
.ba-tag{
  position:absolute;top:0.9rem;z-index:6;font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.005em;text-transform:none;padding:0.32rem 0.7rem;
  background:rgba(8,17,31,0.85);border:1px solid var(--ink-line-2);color:var(--white);
}
.ba-tag.l{left:0.9rem;} .ba-tag.r{right:0.9rem;border-color:var(--blue);color:var(--blue-light);}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;z-index:8;
  background:var(--blue);transform:translateX(-1px);pointer-events:none;
}
.ba-handle::after{
  content:'⇄';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  box-shadow:0 6px 22px -6px rgba(0,0,0,0.7);
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;z-index:9;opacity:0;cursor:ew-resize;margin:0;
}
.ba-range:focus-visible+.ba-handle::after{outline:3px solid var(--white);outline-offset:3px;}

/* ---- the two mock renders ---- */
.mock{position:absolute;inset:0;padding:1.4rem;display:flex;flex-direction:column;gap:0.7rem;}
.mock.old{background:#EDEDE8;font-family:Times New Roman,Georgia,serif;}
.mock.new{background:var(--paper);}
.m-bar{display:flex;align-items:center;gap:0.5rem;padding-bottom:0.7rem;border-bottom:1px solid rgba(0,0,0,0.12);}
.m-logo{font-weight:700;font-size:0.8rem;color:#333;}
.mock.new .m-logo{font-family:var(--display);letter-spacing:-0.03em;color:var(--ink);font-size:0.95rem;}
.m-nav{display:flex;gap:0.55rem;margin-left:auto;}
.m-nav i{display:block;height:5px;width:26px;background:rgba(0,0,0,0.22);border-radius:2px;}
.mock.new .m-nav i{background:rgba(16,24,40,0.18);width:30px;}
.m-hero{font-size:0.95rem;font-weight:700;color:#222;line-height:1.25;}
.mock.new .m-hero{font-family:var(--display);font-size:1.3rem;letter-spacing:-0.025em;color:var(--ink);line-height:1.1;}
.m-line{height:6px;background:rgba(0,0,0,0.14);border-radius:2px;}
.mock.new .m-line{height:7px;background:rgba(16,24,40,0.10);}
.m-line.s{width:55%;} .m-line.m{width:80%;} .m-line.l{width:95%;}
.m-blocks{display:grid;gap:0.5rem;margin-top:auto;}
.mock.old .m-blocks{grid-template-columns:repeat(4,1fr);}
.mock.new .m-blocks{grid-template-columns:repeat(3,1fr);gap:0.7rem;}
.m-blocks span{background:rgba(0,0,0,0.10);border-radius:2px;height:38px;display:block;}
.mock.new .m-blocks span{background:rgba(47,111,237,0.12);border:1px solid rgba(47,111,237,0.25);height:52px;border-radius:3px;}
.m-btn{
  align-self:flex-start;font-size:0.6rem;padding:0.3rem 0.6rem;background:#8A8A85;color:#fff;border-radius:2px;
}
.mock.new .m-btn{background:var(--blue);padding:0.5rem 1rem;border-radius:3px;font-size:0.62rem;font-weight:600;letter-spacing:0.005em;}
.m-score{
  position:absolute;bottom:1rem;left:1.4rem;right:1.4rem;display:flex;gap:0.4rem;
}
.m-score b{
  flex:1;text-align:center;font-family:var(--display);font-weight:800;font-size:0.95rem;
  padding:0.4rem 0;border-radius:2px;
}
.mock.old .m-score b{background:rgba(232,112,90,0.18);color:#B23A22;}
.mock.new .m-score b{background:rgba(63,191,127,0.15);color:#1B7A4B;}
.ba-note{
  font-size:0.8rem;line-height:1.7;color:var(--grey-dark);margin-top:1rem;
}

/* ---------- industry link grid ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0.75rem;}
.ind-link{
  display:flex;align-items:center;gap:0.7rem;padding:0.95rem 1.1rem;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);
  color:var(--grey-dark);text-decoration:none;font-size:0.88rem;font-weight:500;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.ind-link span{font-size:1.15rem;line-height:1;flex-shrink:0;}
.ind-link:hover{
  transform:translateY(-3px);border-color:var(--blue);color:var(--white);
  background:rgba(47,111,237,0.08);
}

/* ---------- real audit proof strip ---------- */
.audit-proof{
  margin-top:2rem;padding-top:2rem;border-top:1px solid var(--ink-line);
}
.audit-proof .t{
  display:block;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);margin-bottom:1.1rem;
}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;}
@media(max-width:620px){.proof-row{grid-template-columns:repeat(2,1fr);}}
.proof-row div{
  border:1px solid var(--ink-line);padding:1rem 0.75rem;text-align:center;
  transition:border-color .2s ease;
}
.proof-row div:hover{border-color:var(--ink-line-2);}
.proof-row b{
  display:block;font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;
  color:#E8705A;margin-bottom:0.35rem;letter-spacing:-0.03em;
}
.proof-row div:nth-child(3) b{color:#E0A33C;}
.proof-row .ours{border-color:var(--blue);background:rgba(47,111,237,0.08);}
.proof-row .ours b{color:#3FBF7F;}
.proof-row span{
  font-family:var(--mono);font-size:0.57rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);line-height:1.4;display:block;
}
.audit-proof .note{margin-top:1rem;}

/* ============================================================
   ROUND 4 — 2026 refresh
   New components, sharper hierarchy, real artwork.
   Rules: transform/opacity animation only, no new network
   requests, no layout-shifting effects. Lighthouse-safe.
   ============================================================ */

/* ---------- shared surfaces ---------- */
.surface{
  border:1px solid var(--ink-line);border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));
}
.surface::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,151,255,0.7),transparent);
}

/* ---------- eyebrow chip ---------- */
.chip{
  display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);
  font-size:0.64rem;letter-spacing:0.005em;text-transform:none;
  padding:0.35rem 0.75rem;border-radius:100px;
  border:1px solid rgba(108,151,255,0.35);background:rgba(47,111,237,0.10);color:var(--blue-light);
}
.chip.ink{border-color:rgba(47,111,237,0.3);background:rgba(47,111,237,0.08);color:var(--blue-text);}
.chip.green{border-color:rgba(63,191,127,0.4);background:rgba(63,191,127,0.10);color:#3FBF7F;}
.chip.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ============================================================
   HERO SCORECARD — rebuilt
   ============================================================ */
.hero-card{
  border:1px solid rgba(108,151,255,0.22);
  background:linear-gradient(165deg,rgba(24,44,80,0.75) 0%,rgba(10,20,36,0.9) 55%,rgba(8,17,31,0.95) 100%);
  border-radius:14px;overflow:hidden;width:100%;max-width:456px;
  box-shadow:0 30px 70px -34px rgba(47,111,237,0.75), inset 0 1px 0 rgba(255,255,255,0.07);
}
.hero-card-top{
  display:flex;align-items:center;gap:0.75rem;padding:0.8rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.035);
}
.hc-dots i{width:7px;height:7px;}
.hc-dots i:nth-child(1){background:rgba(232,112,90,0.6);}
.hc-dots i:nth-child(2){background:rgba(224,163,60,0.6);}
.hc-dots i:nth-child(3){background:rgba(63,191,127,0.6);}
.hc-lbl{font-size:0.6rem;letter-spacing:0.005em;}
.hc-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:0.35rem;
  font-family:var(--mono);font-size:0.55rem;letter-spacing:0.005em;text-transform:none;color:#3FBF7F;
}
.hc-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#3FBF7F;
  box-shadow:0 0 0 0 rgba(63,191,127,0.55);animation:hcpulse 2.4s ease-out infinite;
}
@keyframes hcpulse{
  0%{box-shadow:0 0 0 0 rgba(63,191,127,0.5);}
  70%{box-shadow:0 0 0 8px rgba(63,191,127,0);}
  100%{box-shadow:0 0 0 0 rgba(63,191,127,0);}
}
@media(prefers-reduced-motion:reduce){.hc-live::before{animation:none;}}
.hero-card-body{padding:1.35rem 1.25rem 1.25rem;}

.hc-dials{display:grid;grid-template-columns:repeat(4,1fr);gap:0.55rem;}
.hc-dial{text-align:center;}
.hc-dial .d{position:relative;width:100%;aspect-ratio:1;max-width:76px;margin:0 auto 0.5rem;}
.hc-dial svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.hc-dial circle{fill:none;stroke-width:5.5;}
.hc-dial .trk{stroke:rgba(255,255,255,0.09);}
.hc-dial .arc{stroke:#3FBF7F;stroke-linecap:round;stroke-dasharray:245;stroke-dashoffset:245;
  animation:dialfill 1.6s cubic-bezier(.2,.75,.25,1) .3s forwards;}
@keyframes dialfill{to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){.hc-dial .arc{animation:none;stroke-dashoffset:0;}}
.hc-dial .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.3rem;color:#3FBF7F;letter-spacing:-0.03em;
}
.hc-dial .cap{
  display:block;font-family:var(--mono);font-size:0.51rem;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);line-height:1.35;
}
@media(max-width:420px){.hc-dial .num{font-size:1.05rem;}}

.hc-vitals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;margin-top:1.1rem;
  padding:0.85rem 0.5rem;border-radius:8px;
  background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.07);
}
.hc-vitals span{display:flex;flex-direction:column;gap:0.2rem;text-align:center;}
.hc-vitals b{font-family:var(--mono);font-weight:500;font-size:0.95rem;color:#fff;}
.hc-vitals em{
  font-style:normal;font-family:var(--mono);font-size:0.5rem;letter-spacing:0.1em;
  text-transform:none;color:var(--grey-dark);
}
.hc-foot{
  margin-top:1rem;padding-top:0.95rem;border-top:1px solid rgba(255,255,255,0.07);
  font-size:0.76rem;line-height:1.6;color:var(--grey-dark);
}
.hc-foot b{color:#fff;font-weight:600;}

/* ============================================================
   HERO METRICS — replaces the divided stat row
   ============================================================ */
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem;margin-top:3.5rem;}
.hmet{
  position:relative;padding:1.45rem 1.4rem;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.09);
  background:linear-gradient(150deg,rgba(47,111,237,0.14) 0%,rgba(255,255,255,0.025) 60%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease;
}
.hmet:hover{transform:translateY(-4px);border-color:rgba(108,151,255,0.5);}
.hmet::after{
  content:'';position:absolute;right:-24px;top:-24px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,151,255,0.22),transparent 70%);pointer-events:none;
}
.hmet b{
  display:block;font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:800;
  line-height:1;margin-bottom:0.5rem;letter-spacing:-0.035em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.hmet span{
  display:block;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.005em;
  text-transform:none;color:var(--blue-light);
}
.hmet i{display:block;font-style:normal;font-size:0.79rem;line-height:1.55;color:var(--dim);margin-top:0.55rem;}
@media(max-width:760px){.hero-metrics{grid-template-columns:1fr;gap:0.7rem;}}

/* ============================================================
   TWO DOORS — free audit vs free demo
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
@media(max-width:820px){.doors{grid-template-columns:1fr;}}
.door{
  position:relative;display:flex;flex-direction:column;padding:2rem 1.9rem 1.9rem;
  border-radius:12px;border:1px solid var(--ink-line);text-decoration:none;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.door::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.door:hover,.door:focus-visible{
  transform:translateY(-6px);border-color:var(--blue);
  box-shadow:0 26px 56px -26px rgba(47,111,237,0.65);
}
.door:hover::before,.door:focus-visible::before{transform:scaleX(1);}
.door-ico{
  width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,111,237,0.16);border:1px solid rgba(108,151,255,0.35);margin-bottom:1.15rem;
}
.door-ico svg{width:24px;height:24px;stroke:var(--blue-light);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.door h3{font-size:1.35rem;margin-bottom:0.5rem;}
.door .who{
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.9rem;
}
.door>p{font-size:0.92rem;line-height:1.7;color:var(--grey-dark);margin-bottom:1.1rem;}
.door ul{list-style:none;margin-bottom:1.4rem;}
.door li{
  display:flex;gap:0.6rem;align-items:flex-start;font-size:0.86rem;line-height:1.6;
  color:var(--dim);padding:0.3rem 0;
}
.door li::before{content:'\2192';color:var(--blue-light);flex-shrink:0;font-weight:700;}
.door .go{
  margin-top:auto;display:inline-flex;align-items:center;gap:0.5rem;align-self:flex-start;
  font-size:0.9rem;font-weight:700;color:#fff;padding:0.85rem 1.5rem;border-radius:6px;
  background:var(--blue);transition:gap .2s ease,background .2s ease;
}
.door:hover .go{gap:0.9rem;background:#255ED4;}
.door.alt .go{background:transparent;border:1.5px solid var(--ink-line-2);}
.door.alt:hover .go{background:rgba(255,255,255,0.07);border-color:#fff;}
.door .flagpill{
  position:absolute;top:1.15rem;right:1.15rem;font-family:var(--mono);font-size:0.54rem;
  letter-spacing:0.005em;text-transform:none;padding:0.3rem 0.65rem;border-radius:100px;
  background:rgba(63,191,127,0.14);border:1px solid rgba(63,191,127,0.4);color:#3FBF7F;
}

/* ============================================================
   PROCESS — step cards with their own CTA
   ============================================================ */
.proc-grid{gap:1.25rem;border-top:none;grid-template-columns:repeat(3,1fr);}
.proc{
  padding:2rem 1.85rem;border-right:none;border:1px solid var(--line);border-radius:12px;
  background:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.proc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.proc.in-view::before{transform:scaleX(1);}
.proc:hover{transform:translateY(-5px);border-color:rgba(47,111,237,0.45);box-shadow:0 20px 44px -22px rgba(47,111,237,0.4);}
.proc .n{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:rgba(47,111,237,0.10);border:1px solid rgba(47,111,237,0.25);
  font-family:var(--mono);font-size:0.76rem;font-weight:500;color:var(--blue-text);margin-bottom:1.1rem;
}
.proc .n::after{display:none;}
.proc h3{font-size:1.3rem;margin-bottom:0.6rem;}
.proc p{flex:1;}
.proc-time{margin-top:1.2rem;border-radius:100px;}
.proc-cta{
  display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.25rem;
  font-size:0.87rem;font-weight:700;color:#fff;background:var(--blue);
  padding:0.8rem 1.35rem;border-radius:6px;text-decoration:none;align-self:flex-start;
  transition:gap .2s ease,background .2s ease,transform .2s ease;
}
.proc-cta:hover{gap:0.85rem;background:#255ED4;transform:translateY(-2px);}
.proc-cta.ghost{background:transparent;color:var(--blue-text);border:1.5px solid rgba(47,111,237,0.4);}
.proc-cta.ghost:hover{background:rgba(47,111,237,0.08);}
.proc-note{font-size:0.78rem;line-height:1.6;color:var(--slate);margin-top:0.85rem;flex:0;}
@media(max-width:880px){
  .proc-grid{grid-template-columns:1fr;}
  .proc{border-bottom:1px solid var(--line);padding-right:1.85rem;}
}

/* ============================================================
   PACKAGES — restructured rows
   ============================================================ */
.pkgs{display:grid;gap:1rem;}
.pkg{
  display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:1.9rem 2rem;border:1px solid var(--ink-line);border-radius:12px;
  background:linear-gradient(120deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.pkg:hover{transform:translateX(6px);border-color:rgba(108,151,255,0.5);box-shadow:0 20px 46px -24px rgba(47,111,237,0.5);}
.pkg.feat{border-color:var(--blue);background:linear-gradient(120deg,rgba(47,111,237,0.14),rgba(47,111,237,0.03));}
.pkg-mark{
  width:66px;height:66px;flex-shrink:0;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.15rem;
  background:rgba(47,111,237,0.14);border:1px solid rgba(108,151,255,0.3);
}
.pkg-mark b{font-family:var(--display);font-size:1.2rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.03em;}
.pkg-mark span{font-family:var(--mono);font-size:0.45rem;letter-spacing:0.005em;text-transform:none;color:var(--blue-light);}
.pkg-main h3{font-size:1.28rem;margin-bottom:0.4rem;}
.pkg-main>p{font-size:0.9rem;line-height:1.68;color:var(--grey-dark);max-width:64ch;}
.pkg-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.9rem;}
.pkg-tags span{
  font-family:var(--mono);font-size:0.56rem;letter-spacing:0.005em;text-transform:none;
  color:var(--dim);border:1px solid var(--ink-line);border-radius:100px;padding:0.28rem 0.62rem;
}
.pkg-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;text-align:right;}
.pkg-price{font-family:var(--display);font-weight:800;font-size:2rem;color:#fff;line-height:1;letter-spacing:-0.035em;}
.pkg.feat .pkg-price{color:var(--blue-light);}
.pkg-per{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.1em;text-transform:none;color:var(--grey-dark);}
.pkg-go{
  display:inline-flex;align-items:center;gap:0.45rem;font-size:0.81rem;font-weight:700;
  color:#fff;background:rgba(255,255,255,0.07);border:1px solid var(--ink-line-2);
  padding:0.6rem 1.1rem;border-radius:6px;text-decoration:none;white-space:nowrap;margin-top:0.35rem;
  transition:background .2s ease,border-color .2s ease,gap .2s ease;
}
.pkg-go:hover{background:var(--blue);border-color:var(--blue);gap:0.8rem;}
.pkg.feat .pkg-go{background:var(--blue);border-color:var(--blue);}
.pkg-flag{
  position:absolute;top:0;right:2rem;font-family:var(--mono);font-size:0.54rem;letter-spacing:0.005em;
  text-transform:none;background:var(--blue);color:#fff;padding:0.28rem 0.78rem;border-radius:0 0 5px 5px;
}
@media(max-width:900px){
  .pkg{grid-template-columns:auto 1fr;gap:1.25rem;padding:1.6rem;}
  .pkg-side{grid-column:1/-1;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:1rem;padding-top:1.1rem;border-top:1px solid var(--ink-line);}
  .pkg-go{margin-top:0;}
  .pkg:hover{transform:none;}
}

/* ============================================================
   STACK — categorised capability grid
   ============================================================ */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
@media(max-width:960px){.stack-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.stack-grid{grid-template-columns:1fr;}}
.stk{
  border:1px solid var(--ink-line);border-radius:10px;padding:1.5rem 1.5rem;
  background:linear-gradient(155deg,rgba(255,255,255,0.045),rgba(255,255,255,0.01));
  transition:transform .25s ease,border-color .25s ease;
}
.stk:hover{transform:translateY(-4px);border-color:rgba(108,151,255,0.45);}
.stk .k{
  font-family:var(--mono);font-size:0.55rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.65rem;display:block;
}
.stk h3{font-size:1.04rem;margin-bottom:0.5rem;}
.stk p{font-size:0.855rem;line-height:1.68;color:var(--grey-dark);}
.stk .tools{
  display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.95rem;padding-top:0.9rem;
  border-top:1px solid var(--ink-line);
}
.stk .tools span{
  font-family:var(--mono);font-size:0.56rem;letter-spacing:0.005em;color:var(--dim);
  border:1px solid var(--ink-line);border-radius:4px;padding:0.24rem 0.48rem;
}
.stack-note{margin-top:1.75rem;font-size:0.86rem;line-height:1.8;color:var(--grey-dark);max-width:80ch;}
.stack-note b{color:#fff;font-weight:600;}

/* ============================================================
   BEFORE / AFTER — real screen renders
   ============================================================ */
.ba{border-radius:12px;border-color:rgba(108,151,255,0.2);box-shadow:0 30px 70px -34px rgba(47,111,237,0.5);}
.ba-shot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ba-shot svg{width:100%;height:100%;display:block;}
.ba-tag{border-radius:100px;font-size:0.57rem;padding:0.35rem 0.8rem;background:rgba(8,17,31,0.9);}
.ba-handle{
  width:3px;
  background:linear-gradient(180deg,rgba(108,151,255,0.35),var(--blue) 25%,var(--blue) 75%,rgba(108,151,255,0.35));
}
.ba-handle::after{
  content:'';width:46px;height:46px;background-color:var(--blue);
  box-shadow:0 8px 26px -6px rgba(0,0,0,0.75),0 0 0 6px rgba(47,111,237,0.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
}
.ba-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;margin-top:1.25rem;}
@media(max-width:680px){.ba-readout{grid-template-columns:repeat(2,1fr);}}
.ba-read{
  border:1px solid var(--ink-line);border-radius:9px;padding:1rem 1.1rem;
  background:linear-gradient(155deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
}
.ba-read .k{
  font-family:var(--mono);font-size:0.55rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);display:block;margin-bottom:0.6rem;
}
.ba-read .v{display:flex;align-items:baseline;gap:0.45rem;font-family:var(--display);font-weight:800;letter-spacing:-0.03em;}
.ba-read .from{font-size:1.1rem;color:#E8705A;}
.ba-read .arw{font-family:var(--mono);font-weight:400;font-size:0.78rem;color:var(--grey-dark);}
.ba-read .to{font-size:1.55rem;color:#3FBF7F;}
.ba-read .d{display:block;margin-top:0.5rem;font-family:var(--mono);font-size:0.55rem;letter-spacing:0.005em;color:var(--blue-light);}

/* ============================================================
   PRICING — tier artwork
   ============================================================ */
.tier-card{border-radius:12px;}
.tier-visual{
  aspect-ratio:16/11;background:linear-gradient(160deg,#0B1A31 0%,#132C55 55%,#1C3F7C 100%);
}
.tier-visual::before{display:none;}
.tier-visual::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(8,17,31,0) 58%,rgba(8,17,31,0.5) 100%);
}
.tier-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.tier-art svg{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.tier-card:hover .tier-art svg{transform:scale(1.04);}
.tier-badge{border-radius:100px;padding:0.32rem 0.75rem;}
.tier-body{padding:1.7rem 1.6rem;}
.tier-sum{
  font-size:0.87rem;line-height:1.68;color:var(--grey-dark);
  padding-bottom:1.15rem;margin-bottom:1.15rem;border-bottom:1px solid var(--ink-line);
}
.tier-sum b{color:#fff;font-weight:600;}
.tier-cta{
  display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:1.35rem;
  font-size:0.86rem;font-weight:700;color:#fff;background:rgba(255,255,255,0.07);
  border:1px solid var(--ink-line-2);padding:0.8rem 1rem;border-radius:6px;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,gap .2s ease;
}
.tier-cta:hover{background:var(--blue);border-color:var(--blue);gap:0.85rem;}
.tier-card.feat .tier-cta{background:var(--blue);border-color:var(--blue);}

/* ============================================================
   ONGOING COSTS — the honest money panel
   ============================================================ */
.money{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
@media(max-width:860px){.money{grid-template-columns:1fr;}}
.money-card{
  border:1px solid var(--ink-line);border-radius:12px;padding:1.9rem;
  background:linear-gradient(155deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));
}
.money-card.zero{border-color:rgba(63,191,127,0.35);background:linear-gradient(155deg,rgba(63,191,127,0.10),rgba(63,191,127,0.02));}
.money-card h3{font-size:1.2rem;margin-bottom:0.4rem;}
.money-card .sub{
  font-family:var(--mono);font-size:0.59rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);margin-bottom:1.35rem;
}
.money-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.25rem;
  padding:0.9rem 0;border-bottom:1px solid var(--ink-line);
}
.money-row:last-child{border-bottom:none;}
.money-row .l{font-size:0.9rem;line-height:1.6;color:var(--dim);}
.money-row .l small{display:block;font-size:0.77rem;color:var(--grey-dark);margin-top:0.22rem;line-height:1.55;}
.money-row .r{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;letter-spacing:-0.02em;white-space:nowrap;}
.money-row .r.free{color:#3FBF7F;}
.money-foot{
  margin-top:1.3rem;padding-top:1.15rem;border-top:1px solid var(--ink-line);
  font-size:0.82rem;line-height:1.75;color:var(--grey-dark);
}
.money-foot b{color:#fff;font-weight:600;}

/* ---------- add-on menu ---------- */
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:0.85rem;}
@media(max-width:940px){.addons{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.addons{grid-template-columns:1fr;}}
.addon{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  border:1px solid var(--ink-line);border-radius:9px;padding:1.15rem 1.25rem;
  background:rgba(255,255,255,0.025);transition:transform .2s ease,border-color .2s ease;
}
.addon:hover{transform:translateY(-3px);border-color:rgba(108,151,255,0.45);}
.addon .n{font-size:0.88rem;font-weight:600;color:#fff;line-height:1.45;}
.addon .n small{display:block;font-weight:400;font-size:0.765rem;color:var(--grey-dark);margin-top:0.25rem;line-height:1.55;}
.addon .p{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--blue-light);letter-spacing:-0.02em;white-space:nowrap;}

/* ============================================================
   VS — scored comparison
   ============================================================ */
.vs2{display:grid;gap:0.6rem;}
.vs2-head{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:0.6rem;align-items:end;padding-bottom:0.6rem;}
.vs2-head .h{
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);text-align:center;line-height:1.5;
}
.vs2-head .h b{display:block;font-family:var(--display);font-size:0.96rem;color:#fff;letter-spacing:-0.02em;margin-bottom:0.22rem;}
.vs2-head .h.ours,.vs2-head .h.ours b{color:var(--blue-light);}
.vs2-row{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:0.6rem;align-items:stretch;}
.vs2-row .lbl{
  display:flex;flex-direction:column;justify-content:center;padding:0.9rem 1.15rem;
  border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid var(--ink-line);
  font-size:0.87rem;font-weight:600;color:#fff;line-height:1.4;
}
.vs2-row .lbl small{font-weight:400;font-size:0.75rem;color:var(--grey-dark);margin-top:0.22rem;line-height:1.55;}
.vs2-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;
  padding:0.9rem 0.75rem;border-radius:8px;text-align:center;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.015);
  font-size:0.79rem;line-height:1.45;color:var(--grey-dark);
}
.vs2-cell .ic{font-size:0.95rem;font-weight:700;line-height:1;}
.vs2-cell.no .ic{color:#E8705A;}
.vs2-cell.part .ic{color:#E0A33C;}
.vs2-cell.yes .ic{color:#3FBF7F;}
.vs2-cell.ours{
  background:linear-gradient(160deg,rgba(47,111,237,0.16),rgba(47,111,237,0.04));
  border-color:rgba(47,111,237,0.55);color:#fff;
}
@media(max-width:880px){
  .vs2-head{display:none;}
  .vs2-row{grid-template-columns:1fr;gap:0.4rem;padding:1rem;border:1px solid var(--ink-line);border-radius:10px;}
  .vs2-row .lbl{border:none;background:none;padding:0 0 0.4rem;}
  .vs2-cell{flex-direction:row;justify-content:flex-start;text-align:left;gap:0.65rem;padding:0.65rem 0.9rem;}
  .vs2-cell::before{
    content:attr(data-who);font-family:var(--mono);font-size:0.54rem;letter-spacing:0.1em;
    text-transform:none;color:var(--grey-dark);min-width:96px;flex-shrink:0;
  }
}

/* ============================================================
   FLAGSHIP / SOMETHING BIGGER
   ============================================================ */
.flagship{
  position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(108,151,255,0.28);
  background:radial-gradient(900px circle at 12% 0%,rgba(47,111,237,0.26),transparent 55%),
    linear-gradient(160deg,#0C1B33 0%,#0A1526 60%,#08111F 100%);
  padding:3rem;
}
.flagship::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(108,151,255,0.10) 1px,transparent 1px);
  background-size:26px 26px;
}
.flag-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 0.85fr;gap:3rem;align-items:center;}
@media(max-width:900px){.flagship{padding:2rem 1.6rem;}.flag-grid{grid-template-columns:1fr;gap:2rem;}}
.flag-grid h2{max-width:19ch;margin-bottom:1.1rem;}
.flag-grid .lede{color:var(--dim);max-width:58ch;}
.flag-list{list-style:none;margin:1.6rem 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem 1.5rem;}
@media(max-width:600px){.flag-list{grid-template-columns:1fr;}}
.flag-list li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.88rem;line-height:1.6;color:#fff;}
.flag-list li::before{content:'\2713';color:var(--blue-light);font-weight:700;flex-shrink:0;}
.flag-panel{border:1px solid rgba(255,255,255,0.12);border-radius:12px;overflow:hidden;background:rgba(8,17,31,0.55);}
.flag-panel .ph{
  padding:1rem 1.35rem;border-bottom:1px solid rgba(255,255,255,0.1);
  font-family:var(--mono);font-size:0.59rem;letter-spacing:0.005em;text-transform:none;color:var(--grey-dark);
}
.flag-panel .pb{padding:1.4rem 1.35rem;}
.flag-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.72rem 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.flag-row:last-child{border-bottom:none;}
.flag-row span{font-size:0.845rem;color:var(--grey-dark);}
.flag-row b{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff;letter-spacing:-0.02em;white-space:nowrap;}
.flag-row.big b{font-size:1.85rem;color:var(--blue-light);}
.flag-row.strike b{color:var(--grey-dark);text-decoration:line-through;}

/* ============================================================
   GUARANTEE — rebuilt
   ============================================================ */
.guar{display:grid;grid-template-columns:0.95fr 1.05fr;gap:2.5rem;align-items:center;}
@media(max-width:880px){.guar{grid-template-columns:1fr;gap:1.75rem;}}
.guar-seal{
  position:relative;border-radius:14px;padding:2.4rem 2rem;text-align:center;
  border:1px solid rgba(47,111,237,0.3);
  background:linear-gradient(160deg,rgba(47,111,237,0.12),rgba(47,111,237,0.02));
}
.guar-seal .big{
  font-family:var(--display);font-weight:800;font-size:clamp(3.2rem,7.5vw,4.6rem);line-height:0.9;
  letter-spacing:-0.05em;color:var(--blue);margin-bottom:0.35rem;
}
.guar-seal .unit{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-text);margin-bottom:1.35rem;
}
.guar-seal .line{
  font-size:0.95rem;line-height:1.7;color:var(--text);font-weight:600;
  padding-top:1.35rem;border-top:1px solid rgba(47,111,237,0.22);
}
.guar-what{display:grid;gap:0.7rem;}
.guar-item{
  display:grid;grid-template-columns:28px 1fr;gap:0.9rem;align-items:start;
  padding:1.05rem 1.25rem;border-radius:9px;border:1px solid var(--line);background:#fff;
}
.guar-item .ic{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;font-weight:700;flex-shrink:0;
}
.guar-item.yes .ic{background:rgba(24,138,78,0.12);color:var(--green-text);}
.guar-item.no .ic{background:rgba(160,91,14,0.12);color:var(--amber);}
.guar-item b{display:block;font-size:0.94rem;color:var(--text);margin-bottom:0.22rem;}
.guar-item p{font-size:0.85rem;line-height:1.65;color:var(--slate);}

/* ============================================================
   JUMP NAV — obviously interactive
   ============================================================ */
.jump-inner{padding:0.75rem 2rem;gap:0.5rem;}
.jump-lbl{
  font-family:var(--mono);font-size:0.57rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);flex-shrink:0;padding-right:0.65rem;border-right:1px solid var(--ink-line);
  margin-right:0.35rem;white-space:nowrap;
}
.jump a{
  border-bottom:none;border:1px solid var(--ink-line);border-radius:100px;
  padding:0.45rem 0.95rem;background:rgba(255,255,255,0.03);font-size:0.63rem;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.jump a:hover{color:#fff;border-color:var(--blue-light);background:rgba(47,111,237,0.14);transform:translateY(-2px);border-bottom-color:var(--blue-light);}
.jump a.on{color:#fff;background:var(--blue);border-color:var(--blue);}

/* ---------- matrix: no blur, crisp sticky head ---------- */
.matrix thead th{backdrop-filter:none;background:#0D1A2E;}
.matrix-wrap{border-radius:12px;}
.matrix .grp th{
  background:rgba(47,111,237,0.10);font-family:var(--mono);font-size:0.57rem;
  letter-spacing:0.005em;text-transform:none;color:var(--blue-light);font-weight:400;
  padding:0.62rem 1.1rem;width:auto;
}

/* ============================================================
   SERVICE BLOCKS — clear boundaries, icon marks
   ============================================================ */
.svc{
  border-bottom:none;border:1px solid var(--ink-line);border-radius:12px;
  padding:2.1rem 2.2rem;margin-bottom:1.25rem;gap:1.75rem;
  background:linear-gradient(150deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.svc:last-child{margin-bottom:0;}
.svc:hover{border-color:rgba(108,151,255,0.45);transform:translateY(-4px);box-shadow:0 22px 50px -26px rgba(47,111,237,0.5);}
.svc-mark{width:54px;height:54px;border-radius:12px;font-size:0;border-color:rgba(108,151,255,0.28);}
.svc-mark svg{width:26px;height:26px;stroke:var(--blue-light);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.svc:hover .svc-mark{transform:translateY(-3px) rotate(0deg);}
.svc-n{
  position:absolute;top:1.4rem;right:1.7rem;font-family:var(--mono);font-size:0.62rem;
  letter-spacing:0.005em;color:rgba(255,255,255,0.18);
}
@media(max-width:700px){.svc{padding:1.6rem;}.svc-n{display:none;}}

/* ============================================================
   INDUSTRY ICONS — inline SVG, replaces emoji
   ============================================================ */
.icn{
  width:24px;height:24px;flex-shrink:0;stroke:var(--blue-light);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
.icn-box{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,111,237,0.12);border:1px solid rgba(108,151,255,0.28);flex-shrink:0;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.icn-box.lg{width:62px;height:62px;border-radius:14px;}
.icn-box.lg .icn{width:32px;height:32px;stroke-width:1.5;}
.ind-link{border-radius:9px;gap:0.85rem;padding:0.85rem 1rem;}
.ind-link .icn-box{width:34px;height:34px;border-radius:8px;}
.ind-link .icn{width:18px;height:18px;}
.ind-link:hover .icn-box{background:rgba(47,111,237,0.25);border-color:var(--blue);transform:scale(1.06);}

.picker button{border-radius:10px;gap:0.7rem;}
.picker button .icn-box{width:36px;height:36px;border-radius:9px;}
.picker button .icn{width:19px;height:19px;}
.picker button[aria-pressed="true"] .icn-box{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.4);}
.picker button[aria-pressed="true"] .icn{stroke:#fff;}
.industry-panel{border-radius:14px;}
.industry-head{display:flex;gap:1.35rem;align-items:flex-start;}
.industry-head .htx{flex:1;min-width:0;}
.itier{border-radius:11px;display:flex;flex-direction:column;}
.itier ul{flex:1;}
.itier-cta{
  display:flex;align-items:center;justify-content:center;gap:0.45rem;margin-top:1.2rem;
  font-size:0.79rem;font-weight:700;color:#fff;background:rgba(255,255,255,0.06);
  border:1px solid var(--ink-line-2);padding:0.65rem 0.9rem;border-radius:6px;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,gap .2s ease;
}
.itier-cta:hover{background:var(--blue);border-color:var(--blue);gap:0.75rem;}
.itier.rec .itier-cta{background:var(--blue);border-color:var(--blue);}

/* ============================================================
   INDUSTRY PAGES — depth layer
   ============================================================ */
.ip-hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center;}
@media(max-width:940px){.ip-hero{grid-template-columns:1fr;gap:2.25rem;}}
.ip-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
.ip-fact{
  border:1px solid var(--ink-line);border-radius:10px;padding:1.25rem 1.3rem;
  background:linear-gradient(150deg,rgba(47,111,237,0.12),rgba(255,255,255,0.015));
}
.ip-fact b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1;
  color:var(--blue-light);letter-spacing:-0.03em;margin-bottom:0.42rem;
}
.ip-fact span{
  font-family:var(--mono);font-size:0.555rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);line-height:1.5;display:block;
}
.ip-quickbar{
  display:flex;flex-wrap:wrap;gap:0.55rem;align-items:center;
  padding:1rem 1.35rem;border-radius:100px;border:1px solid var(--ink-line);
  background:rgba(255,255,255,0.03);margin-top:1.75rem;
}
@media(max-width:760px){.ip-quickbar{border-radius:12px;}}
.ip-quickbar .q{
  font-family:var(--mono);font-size:0.57rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);margin-right:0.35rem;
}
.ip-quickbar a{
  font-size:0.77rem;font-weight:600;color:#fff;text-decoration:none;
  padding:0.5rem 0.95rem;border-radius:100px;border:1px solid var(--ink-line-2);
  transition:background .2s ease,border-color .2s ease;
}
.ip-quickbar a:hover{background:var(--blue);border-color:var(--blue);}

.pcf{display:grid;gap:1rem;}
.pcf-card{
  display:grid;grid-template-columns:44px 1fr;gap:1.35rem;
  border:1px solid var(--ink-line);border-radius:12px;padding:1.7rem 1.85rem;
  background:linear-gradient(150deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  transition:border-color .25s ease,transform .25s ease;
}
.pcf-card:hover{border-color:rgba(108,151,255,0.45);transform:translateY(-3px);}
@media(max-width:640px){.pcf-card{grid-template-columns:1fr;gap:1rem;padding:1.45rem;}}
.pcf-n{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(232,112,90,0.12);border:1px solid rgba(232,112,90,0.3);
  font-family:var(--mono);font-size:0.78rem;color:#E8705A;
}
.pcf-card h3{font-size:1.1rem;margin-bottom:0.75rem;}
.pcf-line{display:grid;grid-template-columns:100px 1fr;gap:1rem;padding:0.5rem 0;align-items:start;}
@media(max-width:520px){.pcf-line{grid-template-columns:1fr;gap:0.15rem;}}
.pcf-line .k{
  font-family:var(--mono);font-size:0.555rem;letter-spacing:0.1em;text-transform:none;
  color:var(--grey-dark);padding-top:0.22rem;
}
.pcf-line .v{font-size:0.895rem;line-height:1.68;color:var(--dim);}
.pcf-line.fix .k{color:#3FBF7F;}
.pcf-line.fix .v{color:#fff;}

.blueprint{
  border:1px solid var(--ink-line);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
}
.bp-head{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding:1.25rem 1.75rem;border-bottom:1px solid var(--ink-line);background:rgba(255,255,255,0.03);
}
.bp-head .t{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-0.02em;}
.bp-head .s{font-family:var(--mono);font-size:0.59rem;letter-spacing:0.005em;text-transform:none;color:var(--blue-light);}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.bp-grid{grid-template-columns:1fr;}}
.bp-col{padding:1.6rem 1.75rem;border-right:1px solid var(--ink-line);}
.bp-col:last-child{border-right:none;}
@media(max-width:900px){.bp-col{border-right:none;border-bottom:1px solid var(--ink-line);}.bp-col:last-child{border-bottom:none;}}
.bp-col .k{
  font-family:var(--mono);font-size:0.575rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);margin-bottom:0.95rem;display:block;
}
.bp-col ul{list-style:none;}
.bp-col li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.865rem;line-height:1.62;color:var(--grey-dark);padding:0.4rem 0;}
.bp-col li::before{content:'\2713';color:var(--blue-light);flex-shrink:0;font-weight:700;}
.bp-col li b{color:#fff;font-weight:600;}

.intent{width:100%;border-collapse:collapse;font-size:0.88rem;}
.intent th{
  text-align:left;font-family:var(--mono);font-size:0.59rem;font-weight:400;letter-spacing:0.005em;
  text-transform:none;color:var(--grey-dark);padding:0.85rem 1rem;border-bottom:1px solid var(--ink-line);
}
.intent td{padding:0.95rem 1rem;border-bottom:1px solid var(--ink-line);color:var(--grey-dark);line-height:1.62;vertical-align:top;}
.intent td:first-child{color:var(--blue-light);font-family:var(--mono);font-size:0.82rem;white-space:nowrap;}
.intent tr:last-child td{border-bottom:none;}

/* ============================================================
   ABOUT — sharper
   ============================================================ */
.principle{
  display:grid;grid-template-columns:52px 1fr;gap:1.25rem;align-items:start;
  padding:1.55rem 1.65rem;border:1px solid var(--line);border-radius:12px;background:#fff;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.principle:hover{transform:translateY(-3px);border-color:rgba(47,111,237,0.4);box-shadow:0 18px 42px -22px rgba(47,111,237,0.35);}
.principle+.principle{margin-top:0.85rem;}
.principle .pn{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,111,237,0.10);border:1px solid rgba(47,111,237,0.25);
}
.principle .pn svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.principle h3{font-size:1.08rem;color:var(--text);margin-bottom:0.42rem;}
.principle p{font-size:0.89rem;line-height:1.72;color:var(--slate);}
@media(max-width:520px){.principle{grid-template-columns:1fr;}}

.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;margin-top:2.25rem;}
@media(max-width:820px){.creds{grid-template-columns:repeat(2,1fr);}}
.cred{
  border:1px solid var(--ink-line);border-radius:10px;padding:1.3rem 1.35rem;
  background:linear-gradient(150deg,rgba(255,255,255,0.045),rgba(255,255,255,0.01));
}
.cred b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.65rem;line-height:1;
  color:var(--blue-light);letter-spacing:-0.03em;margin-bottom:0.45rem;
}
.cred span{
  font-family:var(--mono);font-size:0.555rem;letter-spacing:0.005em;text-transform:none;
  color:var(--grey-dark);line-height:1.5;display:block;
}

/* ============================================================
   QUALIFIER CARDS — sharpened
   ============================================================ */
.qual-card{border-radius:12px;padding:1.9rem 1.8rem;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.qual-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.qual-card:hover::before{transform:scaleX(1);}
.qual-card .verdict{
  display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:0.9rem;align-self:flex-start;
  font-family:var(--mono);font-size:0.57rem;letter-spacing:0.005em;text-transform:none;
  color:var(--blue-light);border:1px solid rgba(108,151,255,0.35);background:rgba(47,111,237,0.1);
  padding:0.3rem 0.72rem;border-radius:100px;
}
.qual-card .q{font-size:1.05rem;line-height:1.42;}
.qual-card p{flex:1;}
.qual-card .a{
  margin-top:1.3rem;border:1px solid var(--ink-line-2);border-radius:6px;
  padding:0.68rem 1rem;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.qual-card .a:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ============================================================
   PROMISE STRIP
   ============================================================ */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:940px){.promise{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.promise{grid-template-columns:1fr;}}
.prom{
  position:relative;border:1px solid var(--line);border-radius:12px;padding:1.8rem 1.65rem;
  background:#fff;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.prom:hover{transform:translateY(-5px);border-color:rgba(47,111,237,0.45);box-shadow:0 20px 44px -22px rgba(47,111,237,0.35);}
.prom .icn-box{background:rgba(47,111,237,0.09);border-color:rgba(47,111,237,0.22);margin-bottom:1.1rem;}
.prom .icn{stroke:var(--blue);}
.prom .v{display:block;font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--blue);letter-spacing:-0.03em;margin-bottom:0.3rem;line-height:1;}
.prom h3{font-size:1.03rem;color:var(--text);margin-bottom:0.45rem;}
.prom p{font-size:0.865rem;line-height:1.72;color:var(--slate);}

/* ============================================================
   POSITIONING STRIP
   ============================================================ */
.who-strip{display:flex;flex-wrap:wrap;gap:0.55rem;margin-top:1.75rem;}
.who-strip span{
  font-family:var(--mono);font-size:0.61rem;letter-spacing:0.1em;text-transform:none;
  color:var(--dim);border:1px solid var(--ink-line);border-radius:100px;
  padding:0.45rem 0.95rem;background:rgba(255,255,255,0.025);
}
.who-strip.ink span{color:var(--slate);border-color:var(--line-2);background:rgba(16,24,40,0.02);}

/* ============================================================
   PRICE-BEAT BAND
   ============================================================ */
.beat{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;margin-top:2rem;}
@media(max-width:900px){.beat{grid-template-columns:repeat(2,1fr);}}
.beat-cell{border:1px solid var(--line);border-radius:11px;padding:1.45rem 1.4rem;background:#fff;}
.beat-cell.ours{border-color:var(--blue);background:linear-gradient(160deg,rgba(47,111,237,0.10),rgba(47,111,237,0.02));}
.beat-cell .k{
  font-family:var(--mono);font-size:0.555rem;letter-spacing:0.005em;text-transform:none;
  color:var(--slate);margin-bottom:0.7rem;display:block;line-height:1.45;
}
.beat-cell .p{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--text);letter-spacing:-0.03em;line-height:1;margin-bottom:0.42rem;}
.beat-cell.ours .p{color:var(--blue);}
.beat-cell .m{font-size:0.78rem;line-height:1.6;color:var(--slate);}
.beat-cell.ours .m{color:var(--blue-text);font-weight:600;}

/* ============================================================
   UTILITIES
   ============================================================ */
.sec-head h2 em{font-style:normal;color:var(--blue-light);}
.on-paper .sec-head h2 em,.on-alt .sec-head h2 em{color:var(--blue-text);}
.mt-3{margin-top:3rem;}
.mt-2{margin-top:2rem;}
.maxw{max-width:74ch;}
.dark-note{font-size:0.82rem;line-height:1.75;color:var(--grey-dark);}

/* icon buttons that replaced the emoji */
.mobile-wa{color:var(--white);}
.mobile-wa svg{display:block;}
.contact-row>span{color:var(--blue-light);display:flex;align-items:center;padding-top:2px;}
.hero-tag .icn{width:16px;height:16px;stroke:var(--blue-light);stroke-width:1.8;}
.hero-tag{line-height:1;}

/* ---------- late fixes ---------- */
/* decorative service index: keep it subtle but comfortably above 4.5:1 */
.svc-n{color:#7C8BA1;}

/* Score dials render complete with no JS and no animation, so nothing
   paints during the LCP window. The sweep is replayed only after load. */
.hc-dial .arc{stroke-dashoffset:0;animation:none;}
body.ready .hc-dial .arc{animation:dialfill 1.4s cubic-bezier(.2,.75,.25,1) both;}
@media(prefers-reduced-motion:reduce){body.ready .hc-dial .arc{animation:none;}}

/* ---------- .door on light surfaces ---------- */
.on-alt .door,.on-paper .door{
  border-color:var(--line);
  background:linear-gradient(160deg,#FFFFFF,#FAFCFF);
  box-shadow:0 2px 12px -8px rgba(16,24,40,0.25);
}
.on-alt .door:hover,.on-paper .door:hover,
.on-alt .door:focus-visible,.on-paper .door:focus-visible{
  border-color:var(--blue);box-shadow:0 26px 56px -26px rgba(47,111,237,0.4);
}
.on-alt .door h3,.on-paper .door h3{color:var(--text);}
.on-alt .door .who,.on-paper .door .who{color:var(--blue-text);}
.on-alt .door>p,.on-paper .door>p{color:var(--slate);}
.on-alt .door li,.on-paper .door li{color:var(--slate);}
.on-alt .door li::before,.on-paper .door li::before{color:var(--blue);}
.on-alt .door-ico,.on-paper .door-ico{background:rgba(47,111,237,0.09);border-color:rgba(47,111,237,0.28);}
.on-alt .door-ico svg,.on-paper .door-ico svg{stroke:var(--blue);}
.on-alt .door .flagpill,.on-paper .door .flagpill{
  color:var(--green-text);background:rgba(24,138,78,0.10);border-color:rgba(24,138,78,0.38);
}
.on-alt .door.alt .go,.on-paper .door.alt .go{
  background:transparent;color:var(--text);border:1.5px solid var(--line-2);
}
.on-alt .door.alt:hover .go,.on-paper .door.alt:hover .go{
  background:var(--text);color:#fff;border-color:var(--text);
}

/* ---------- blueprint on light surfaces (industry pages) ---------- */
.on-paper .blueprint,.on-alt .blueprint{border-color:var(--line);}
.on-paper .bp-head .t,.on-alt .bp-head .t{color:var(--text);}
.on-paper .bp-head .s,.on-alt .bp-head .s{color:var(--blue-text);}
.on-paper .bp-col,.on-alt .bp-col{border-right-color:var(--line);border-bottom-color:var(--line);}
.on-paper .bp-col .k,.on-alt .bp-col .k{color:var(--blue-text);}
.on-paper .bp-col li,.on-alt .bp-col li{color:var(--slate);}
.on-paper .bp-col li b,.on-alt .bp-col li b{color:var(--text);}
.on-paper .bp-col li::before,.on-alt .bp-col li::before{color:var(--blue);}

/* FAQ result count sits on the dark hero */
.hero .faq-count{color:var(--grey-dark);}
.faq-search .ico{display:flex;align-items:center;}

/* ============================================================
   ROUND 5 — typography reset for labels
   The old look used JetBrains Mono in wide-tracked uppercase for
   every small label, which read as code rather than design.
   Labels are now Inter, sentence case, at readable sizes.
   Monospace is kept only where the content is genuinely data.
   ============================================================ */

/* --- section eyebrows --- */
.mono{font-size:0.86rem;font-weight:600;letter-spacing:0;margin-bottom:1.1rem;}
.mono.slash::before{content:'';}
.chip{font-size:0.76rem;font-weight:600;}

/* --- navigation --- */
.nav-links a{font-size:0.88rem;font-weight:500;}
.nav-cta{font-size:0.84rem;font-weight:600;border-radius:6px;padding:10px 18px;}
.mobile-menu a{font-size:0.95rem;font-weight:600;}
.crumbs ol{font-size:0.8rem;}
.jump-lbl{font-size:0.76rem;font-weight:600;}
.jump a{font-size:0.82rem;font-weight:500;}

/* --- pills, tags, badges --- */
.hero-tag{font-size:0.82rem;font-weight:600;}
.hero-note{font-size:0.86rem;}
.tag,.pill{font-size:0.76rem;font-weight:500;}
.tier-badge,.price-flag,.pkg-flag,.itier-rec-flag,.door .flagpill,.ba-tag{
  font-size:0.74rem;font-weight:600;
}
.proc-time{font-size:0.78rem;font-weight:600;}
.who-strip span,.pkg-tags span,.stk .tools span{font-size:0.76rem;font-weight:500;}
.trust span{font-size:0.84rem;font-weight:500;}
.qual-card .verdict{font-size:0.76rem;font-weight:600;}

/* --- small descriptive labels --- */
.card-num,.anchor-label,.stk .k,.bp-col .k,.bp-head .s,.glance .t,.updates .ut,
.money-card .sub,.flag-panel .ph,.guar-seal .unit,.team-role,.team-built .lab,
.ip-quickbar .q,.pcf-line .k,.beat-cell .k,.audit-proof .t,.report-head .t,
.band-img .cap span,.footer-col h3,.form-group label,.contact-row small,
.calc-label,.audit-hint,.audit-target .s,.faq-count,.svc-meta,.ba-read .k,.ba-read .d{
  font-size:0.8rem;font-weight:600;letter-spacing:0;
}
.tier-who,.tier-per,.price-who,.itier-tier,.pkg-per,.door .who,.hmet span,
.hc-lbl,.hc-live,.hc-dial .cap,.hc-vitals em,.ip-fact span,.cred span,
.ring-item .lbl,.metric span,.score span,.proof-row span,.build-stats span,
.five-who,.five-per,.bar-l,.vs2-head .h,.pkg-mark span,.footer-bottom,
.marquee-track span,.calc-field label,.num-row .n,.num-row .meta,.step .n,
.matrix thead th,.matrix .grp th,.breakdown th,.cmp th,.intent th,.score-arrow{
  font-size:0.78rem;font-weight:500;letter-spacing:0;
}
.vs2-head .h b{font-size:1.02rem;}
.hc-dial .cap,.hc-vitals em,.ip-fact span,.cred span,.build-stats span{font-size:0.72rem;line-height:1.45;}
.pkg-mark span{font-size:0.62rem;}
.bar-l{font-size:0.72rem;}
.five-who{font-size:0.72rem;}
.matrix thead th,.matrix .grp th,.breakdown th,.cmp th,.intent th{font-weight:600;}

/* --- keep true monospace where the content is data --- */
.hc-vitals b,.audit-target .u,.intent td:first-child,.ba-read .v,.money-row .r{
  font-family:var(--data);
}

/* --- sticky stacking: the jump nav and the matrix header both pinned
       at 72px were landing on top of each other --- */
.matrix thead th{top:140px;}
@media(max-width:820px){.matrix thead th{top:auto;}}
[id]{scroll-margin-top:150px;}
main>section[id]{scroll-margin-top:150px;}

/* ============================================================
   PRICING PACKAGE CARDS — aligned presentation
   Cards previously drifted out of step because the "who it's
   for" line wrapped to different depths. Header is now a fixed
   band so price, name, features and button line up across all
   three regardless of copy length.
   ============================================================ */
.price-grid{align-items:stretch;}
.price-card{border-radius:14px;overflow:hidden;}
.price-body{padding:0;gap:0;}

.price-head{
  padding:2rem 1.85rem 1.5rem;
  border-bottom:1px solid var(--ink-line);
  background:rgba(255,255,255,0.025);
  display:flex;flex-direction:column;
}
.price-card.feat .price-head{background:rgba(47,111,237,0.10);border-bottom-color:rgba(47,111,237,0.3);}
.price-head .price-name{
  font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--white);
  margin:0 0 0.35rem;order:1;
}
.price-head .price-who{
  font-family:var(--sans);font-size:0.84rem;font-weight:500;color:var(--grey-dark);
  line-height:1.5;border:none;padding:0;margin:0 0 1.15rem;order:2;
  min-height:2.5rem;display:flex;align-items:flex-start;
}
.price-head .price-num{
  font-size:2.9rem;margin:0;order:3;line-height:1;
}
.price-head .price-sub{
  font-size:0.82rem;color:var(--grey-dark);margin-top:0.5rem;order:4;
}
.price-card.feat .price-head .price-sub{color:var(--blue-light);}

.price-feats{
  padding:1.6rem 1.85rem 0;margin:0 0 1.5rem;flex:1;
}
.price-feats li{padding:0.55rem 0;}
.price-card .btn-row{padding:0 1.85rem 1.85rem;margin-top:auto;}
@media(max-width:920px){
  .price-head .price-who{min-height:0;}
}

/* ============================================================
   INDUSTRY CHOOSER CARDS
   Replaces the old picker + JS panel. Each trade is now its own
   card linking straight through to its full guide.
   ============================================================ */
.ind-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
@media(max-width:1000px){.ind-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.ind-cards{grid-template-columns:1fr;}}

.ind-card{
  display:flex;flex-direction:column;text-decoration:none;position:relative;overflow:hidden;
  border:1px solid var(--ink-line);border-radius:14px;padding:1.6rem 1.5rem 1.35rem;
  background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.ind-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease;
}
.ind-card:hover,.ind-card:focus-visible{
  transform:translateY(-6px);border-color:var(--blue);
  box-shadow:0 26px 56px -26px rgba(47,111,237,0.6);
}
.ind-card:hover::before,.ind-card:focus-visible::before{transform:scaleX(1);}
.ind-card:hover .icn-box{background:rgba(47,111,237,0.28);border-color:var(--blue);}

.ic-top{display:flex;gap:1rem;align-items:center;margin-bottom:1.15rem;}
.ic-name h3{font-size:1.18rem;margin:0 0 0.15rem;line-height:1.2;}
.ic-name span{font-size:0.78rem;color:var(--grey-dark);line-height:1.4;display:block;}

.ic-stat{
  display:flex;align-items:baseline;gap:0.7rem;padding:0.9rem 1rem;border-radius:9px;
  background:rgba(47,111,237,0.10);border:1px solid rgba(108,151,255,0.22);margin-bottom:1.1rem;
}
.ic-stat b{
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue-light);
  letter-spacing:-0.03em;line-height:1;white-space:nowrap;
}
.ic-stat span{font-size:0.78rem;line-height:1.45;color:var(--dim);}

.ic-feats{display:flex;flex-direction:column;gap:0.45rem;flex:1;margin-bottom:1.25rem;}
.ic-feats span{
  display:flex;gap:0.55rem;align-items:flex-start;
  font-size:0.84rem;line-height:1.5;color:var(--grey-dark);
}
.ic-feats span::before{content:'✓';color:var(--blue-light);font-weight:700;flex-shrink:0;}

.ic-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-top:1.1rem;border-top:1px solid var(--ink-line);
}
.ic-price b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;
  color:var(--white);letter-spacing:-0.03em;line-height:1;
}
.ic-price span{font-size:0.74rem;color:var(--grey-dark);display:block;margin-top:0.2rem;}
.ic-go{
  font-size:0.84rem;font-weight:700;color:var(--blue-light);white-space:nowrap;
  transition:transform .2s ease;
}
.ind-card:hover .ic-go{transform:translateX(3px);}

/* the matrix header pins below the sticky jump nav (72px header + 62px nav) */
.matrix thead th{top:140px;}
.matrix-wrap{scroll-margin-top:150px;}
@media(max-width:820px){.matrix thead th{position:static;top:auto;}}


/* ============================================================
   INSTANT QUOTE TOOL (quote.html)
   Multi-step, gated, live-pricing. All state is class-based so
   it degrades to a readable page with JS off.
   ============================================================ */
.qz-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:2.25rem;align-items:start;}
@media(max-width:1000px){.qz-wrap{grid-template-columns:1fr;}}

/* ---- steps ---- */
.qz-step{
  border:1px solid var(--ink-line);border-radius:14px;padding:1.75rem 1.85rem;margin-bottom:1rem;
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
  transition:opacity .3s ease,border-color .3s ease;
}
@media(max-width:600px){.qz-step{padding:1.35rem 1.15rem;}}
.qz-step.qz-locked{opacity:0.4;pointer-events:none;filter:saturate(0.4);}
.qz-step-h{display:flex;align-items:flex-start;gap:0.9rem;margin-bottom:1.25rem;}
.qz-n{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(47,111,237,0.16);border:1px solid rgba(108,151,255,0.35);
  font-family:var(--display);font-weight:800;font-size:0.95rem;color:var(--blue-light);
}
.qz-step.qz-open .qz-n{background:var(--blue);border-color:var(--blue);color:#fff;}
.qz-step-h h2{font-size:1.3rem;margin:0 0 0.25rem;max-width:none;}
.qz-sub{font-size:0.86rem;line-height:1.6;color:var(--grey-dark);margin:0;}
.qz-gate{
  margin-top:1.1rem;font-size:0.84rem;font-weight:600;color:var(--blue-light);text-align:center;
  padding:0.85rem;border-radius:9px;background:rgba(47,111,237,0.10);
  border:1px dashed rgba(108,151,255,0.45);
}

/* ---- industry picker ---- */
.qz-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:0.6rem;}
.qz-ind{
  display:flex;align-items:center;gap:0.7rem;text-align:left;position:relative;
  padding:0.85rem 0.9rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.03);color:var(--grey-dark);
  font-family:var(--sans);font-size:0.85rem;font-weight:600;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.qz-ind .icn-box{width:32px;height:32px;border-radius:8px;flex-shrink:0;}
.qz-ind .icn{width:17px;height:17px;}
.qz-ind-l{flex:1;line-height:1.3;}
.qz-ind-c{
  width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--ink-line-2);
  transition:background .2s ease,border-color .2s ease;
}
.qz-ind:hover{color:#fff;border-color:rgba(108,151,255,0.55);background:rgba(47,111,237,0.08);transform:translateY(-2px);}
.qz-ind[aria-pressed="true"]{
  color:#fff;border-color:var(--blue);background:rgba(47,111,237,0.16);
  box-shadow:0 10px 26px -14px rgba(47,111,237,0.8);
}
.qz-ind[aria-pressed="true"] .icn-box{background:var(--blue);border-color:var(--blue);}
.qz-ind[aria-pressed="true"] .icn{stroke:#fff;}
.qz-ind[aria-pressed="true"] .qz-ind-c{
  background:var(--blue);border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
}

/* ---- segmented control ---- */
.qz-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;}
@media(max-width:620px){.qz-seg{grid-template-columns:repeat(2,1fr);}}
.qz-seg button{
  display:flex;flex-direction:column;gap:0.2rem;padding:0.9rem 0.75rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.03);text-align:left;
  font-family:var(--sans);transition:all .2s ease;
}
.qz-seg button b{font-size:0.92rem;font-weight:700;color:var(--dim);}
.qz-seg button span{font-size:0.76rem;color:var(--grey-dark);}
.qz-seg button:hover{border-color:rgba(108,151,255,0.5);transform:translateY(-2px);}
.qz-seg button[aria-pressed="true"]{background:rgba(47,111,237,0.16);border-color:var(--blue);}
.qz-seg button[aria-pressed="true"] b{color:#fff;}

/* ---- checkbox options ---- */
.qz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;}
@media(max-width:640px){.qz-opts{grid-template-columns:1fr;}}
.qz-opt{
  display:flex;gap:0.75rem;align-items:flex-start;padding:0.9rem 1rem;border-radius:10px;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.qz-opt:hover{border-color:rgba(108,151,255,0.45);transform:translateY(-2px);}
.qz-opt input{position:absolute;opacity:0;width:1px;height:1px;}
.qz-box{
  width:20px;height:20px;flex-shrink:0;border-radius:5px;border:1.5px solid var(--ink-line-2);
  margin-top:0.1rem;position:relative;transition:background .18s ease,border-color .18s ease;
}
.qz-box.round{border-radius:50%;}
.qz-opt input:checked+.qz-box,.qz-addon input:checked+.qz-box{background:var(--blue);border-color:var(--blue);}
.qz-opt input:checked+.qz-box::after,.qz-addon input:checked+.qz-box::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}
.qz-opt:has(input:checked){border-color:var(--blue);background:rgba(47,111,237,0.09);}
.qz-opt input:focus-visible+.qz-box,.qz-addon input:focus-visible+.qz-box{outline:2px solid var(--blue-light);outline-offset:2px;}
.qz-t{display:flex;flex-direction:column;gap:0.15rem;}
.qz-t b{font-size:0.88rem;font-weight:600;color:var(--dim);}
.qz-opt:has(input:checked) .qz-t b{color:#fff;}
.qz-t i{font-style:normal;font-size:0.77rem;color:var(--grey-dark);line-height:1.45;}

/* ---- add-on groups ---- */
.qz-ag{margin-bottom:1.25rem;}
.qz-ag:last-child{margin-bottom:0;}
.qz-ag-t{
  font-size:0.78rem;font-weight:700;color:var(--blue-light);margin-bottom:0.6rem;
  padding-bottom:0.4rem;border-bottom:1px solid var(--ink-line);
}
.qz-ag-items{display:grid;gap:0.45rem;}
.qz-addon{
  display:flex;gap:0.75rem;align-items:center;padding:0.75rem 0.9rem;border-radius:9px;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.02);cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.qz-addon:hover{border-color:rgba(108,151,255,0.45);}
.qz-addon input{position:absolute;opacity:0;width:1px;height:1px;}
.qz-addon:has(input:checked){border-color:var(--blue);background:rgba(47,111,237,0.09);}
.qz-addon.sug{border-color:rgba(108,151,255,0.4);background:rgba(47,111,237,0.05);}
.qz-addon-t{display:flex;flex-direction:column;gap:0.12rem;flex:1;min-width:0;}
.qz-addon-t b{font-size:0.85rem;font-weight:600;color:var(--dim);}
.qz-addon:has(input:checked) .qz-addon-t b{color:#fff;}
.qz-addon-t b em{
  font-style:normal;font-size:0.66rem;font-weight:700;color:var(--blue-light);
  border:1px solid rgba(108,151,255,0.4);border-radius:100px;padding:0.1rem 0.45rem;margin-left:0.35rem;
  vertical-align:middle;
}
.qz-addon-t i{font-style:normal;font-size:0.75rem;color:var(--grey-dark);line-height:1.4;}
.qz-addon-p{
  font-family:var(--display);font-weight:800;font-size:0.98rem;color:var(--blue-light);
  white-space:nowrap;letter-spacing:-0.02em;
}
.qz-addon.qz-inc{opacity:0.65;}
.qz-addon.qz-inc .qz-addon-p{color:#3FBF7F;font-family:var(--sans);font-size:0.8rem;font-weight:600;}
.qz-addon.qz-inc .qz-box{opacity:0.4;}

/* ---- result panel ---- */
.qz-result{
  position:sticky;top:150px;border:1px solid rgba(108,151,255,0.25);border-radius:16px;
  background:linear-gradient(165deg,rgba(47,111,237,0.14),rgba(10,20,36,0.9));
  padding:1.85rem 1.75rem;box-shadow:0 30px 70px -34px rgba(47,111,237,0.6);
}
@media(max-width:1000px){.qz-result{position:static;}}
.qz-result-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:2rem 0.5rem;}
.qz-result-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(108,151,255,0.14);}
.qz-result-ico svg{width:27px;height:27px;stroke:var(--blue-light);fill:none;stroke-width:1.6;}
.qz-result-empty p{font-size:0.89rem;line-height:1.7;color:var(--grey-dark);max-width:34ch;}
.qz-result-empty b{color:#fff;}
.qz-result-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;}
.qz-result-trade{font-size:0.8rem;font-weight:600;color:var(--blue-light);}
.qz-reset{
  background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:0.76rem;
  color:var(--grey-dark);text-decoration:underline;padding:0;
}
.qz-reset:hover{color:#fff;}
.qz-result-price{padding-bottom:1.2rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,0.12);}
.qz-result-tier{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--white);margin-bottom:0.3rem;}
.qz-result-num{display:block;font-family:var(--display);font-weight:800;font-size:2.7rem;color:#fff;line-height:1;letter-spacing:-0.035em;}
.qz-result-per{display:block;font-size:0.75rem;color:var(--grey-dark);margin-top:0.5rem;}
.qz-lines{display:grid;gap:0.1rem;margin-bottom:0.9rem;}
.qz-line{display:flex;justify-content:space-between;gap:1rem;font-size:0.83rem;padding:0.42rem 0;color:var(--grey-dark);}
.qz-line b{color:#fff;font-weight:600;white-space:nowrap;font-family:var(--data);}
.qz-line.base{color:var(--dim);border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:0.6rem;margin-bottom:0.3rem;}
.qz-line em{font-style:normal;color:var(--grey-dark);font-size:0.75rem;}
.qz-result-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-top:0.9rem;border-top:1px solid rgba(255,255,255,0.16);
}
.qz-result-total span{font-size:0.88rem;font-weight:600;color:var(--dim);}
.qz-result-total b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue-light);letter-spacing:-0.02em;}
.qz-monthly{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:0.5rem;}
.qz-monthly span{font-size:0.82rem;color:var(--grey-dark);}
.qz-monthly b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#3FBF7F;}
.qz-domain{font-size:0.73rem;line-height:1.6;color:var(--grey-dark);margin-top:0.7rem;}

.qz-included{margin-top:1rem;border-top:1px solid rgba(255,255,255,0.12);padding-top:0.9rem;}
.qz-included summary{
  cursor:pointer;list-style:none;font-size:0.8rem;font-weight:600;color:var(--blue-light);padding:0.2rem 0;
}
.qz-included summary::-webkit-details-marker{display:none;}
.qz-included summary::before{content:'+ ';}
.qz-included[open] summary::before{content:'\2212 ';}
.qz-included ul{list-style:none;margin-top:0.7rem;}
.qz-included li{
  display:flex;gap:0.5rem;align-items:flex-start;font-size:0.8rem;line-height:1.55;
  color:var(--grey-dark);padding:0.3rem 0;
}
.qz-included li::before{content:'\2713';color:var(--blue-light);flex-shrink:0;}
.qz-included li.qz-why{color:var(--dim);}
.qz-included li.qz-why::before{content:'\2192';}

/* ---- inline send ---- */
.qz-send{
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,0.16);
}
.qz-send-h{margin-bottom:0.9rem;}
.qz-send-h b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;margin-bottom:0.25rem;}
.qz-send-h span{font-size:0.79rem;line-height:1.55;color:var(--grey-dark);display:block;}
.qz-f-row{margin-bottom:0.6rem;}
.qz-f-row input{
  width:100%;font-family:var(--sans);font-size:0.9rem;padding:0.8rem 0.95rem;
  background:rgba(255,255,255,0.06);border:1px solid var(--ink-line-2);color:#fff;border-radius:7px;
}
.qz-f-row input::placeholder{color:#6C7F98;}
.qz-f-row input:focus{outline:none;border-color:var(--blue);background:rgba(47,111,237,0.12);}
.qz-f-note{font-size:0.72rem;line-height:1.55;color:var(--grey-dark);margin-top:0.7rem;text-align:center;}
.qz-f-note a{color:var(--blue-light);}
.qz-sent{text-align:center;padding:1rem 0.5rem;}
.qz-sent-ico{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(63,191,127,0.16);color:#3FBF7F;font-size:1.3rem;font-weight:700;margin-bottom:0.8rem;
}
.qz-sent b{display:block;font-family:var(--display);font-size:1.1rem;color:#fff;margin-bottom:0.4rem;}
.qz-sent p{font-size:0.83rem;line-height:1.65;color:var(--grey-dark);margin-bottom:0.9rem;}
.qz-result-note{font-size:0.73rem;line-height:1.6;color:var(--grey-dark);margin-top:1rem;text-align:center;}
.qz-result-note a{color:var(--blue-light);}

/* ============================================================
   EFFORT TABLE — "what you'd actually have to do"
   ============================================================ */
.effort{border-top:1px solid var(--line);}
.effort-row{
  display:grid;grid-template-columns:76px 1fr 120px;gap:1.25rem;align-items:start;
  padding:1.15rem 0;border-bottom:1px solid var(--line);
}
@media(max-width:700px){
  .effort-row{grid-template-columns:64px 1fr;gap:0.9rem;}
  .effort-time{grid-column:2;margin-top:0.3rem;text-align:left !important;}
}
.effort-who{
  font-size:0.74rem;font-weight:700;text-align:center;padding:0.3rem 0.5rem;border-radius:100px;
}
.effort-who.them{background:rgba(47,111,237,0.12);color:var(--blue-text);border:1px solid rgba(47,111,237,0.3);}
.effort-who.me{background:rgba(16,24,40,0.06);color:var(--slate);border:1px solid var(--line-2);}
.effort-what b{display:block;font-size:0.98rem;color:var(--text);margin-bottom:0.25rem;}
.effort-what p{font-size:0.86rem;line-height:1.65;color:var(--slate);}
.effort-time{font-size:0.84rem;font-weight:600;color:var(--blue-text);text-align:right;}
.effort-total{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;
}
@media(max-width:700px){.effort-total{grid-template-columns:1fr;}}
.effort-total div{
  border:1px solid rgba(47,111,237,0.3);border-radius:12px;padding:1.4rem 1.5rem;
  background:linear-gradient(160deg,rgba(47,111,237,0.10),rgba(47,111,237,0.02));
}
.effort-total span{display:block;font-size:0.8rem;color:var(--slate);margin-bottom:0.4rem;}
.effort-total b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue);letter-spacing:-0.03em;}

/* ============================================================
   ADD-ON ORDERING — three clear routes, above the list
   ============================================================ */
.addon-how{
  border:1px solid rgba(108,151,255,0.25);border-radius:14px;padding:1.6rem 1.75rem;margin-bottom:1.75rem;
  background:linear-gradient(160deg,rgba(47,111,237,0.12),rgba(255,255,255,0.015));
}
@media(max-width:600px){.addon-how{padding:1.3rem 1.15rem;}}
.addon-how-t{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;margin-bottom:1.15rem;letter-spacing:-0.02em;}
.addon-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.85rem;}
@media(max-width:860px){.addon-how-grid{grid-template-columns:1fr;}}
.addon-how-card{
  display:flex;flex-direction:column;position:relative;text-decoration:none;
  border:1px solid var(--ink-line);border-radius:11px;padding:1.35rem 1.3rem 1.2rem;
  background:rgba(255,255,255,0.03);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease,box-shadow .25s ease;
}
.addon-how-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 20px 44px -22px rgba(47,111,237,0.6);}
.addon-how-card .n{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:0.8rem;margin-bottom:0.8rem;
}
.addon-how-card b{font-size:0.98rem;color:#fff;margin-bottom:0.4rem;}
.addon-how-card p{font-size:0.83rem;line-height:1.62;color:var(--grey-dark);flex:1;margin-bottom:0.95rem;}
.addon-how-card .go{font-size:0.82rem;font-weight:700;color:var(--blue-light);transition:transform .2s ease;}
.addon-how-card:hover .go{transform:translateX(3px);}

/* add-on tiles: even, scannable, not a ragged list */
.addons{grid-auto-rows:1fr;}
.addon{align-items:center;border-radius:10px;}
.addon .n{font-size:0.9rem;}
.addon .p{font-size:1.15rem;}

/* ============================================================
   PRICE CARDS — hard row alignment via grid
   The three package cards now share row tracks, so the price,
   the strapline, the feature list and the button all sit on the
   same baseline regardless of how the copy wraps.
   ============================================================ */
@supports(grid-template-rows:subgrid){
  @media(min-width:921px){
    .price-grid{grid-template-rows:auto;}
    .price-card{display:grid;grid-template-rows:subgrid;grid-row:span 1;}
    .price-body{display:grid;grid-template-rows:auto 1fr auto;height:100%;}
  }
}
.price-head{min-height:0;}
.price-head .price-who{min-height:3.1rem;}
@media(max-width:920px){.price-head .price-who{min-height:0;}}
.price-feats li{align-items:flex-start;}
.price-card .btn-row{margin-top:auto;}

/* ---- service block CTAs ---- */
.svc-cta{display:flex;flex-wrap:wrap;gap:0.65rem;margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid var(--ink-line);}
.svc-go{
  display:inline-flex;align-items:center;gap:0.45rem;font-size:0.84rem;font-weight:700;color:#fff;
  background:var(--blue);border:1.5px solid var(--blue);padding:0.68rem 1.15rem;border-radius:6px;
  text-decoration:none;transition:background .2s ease,gap .2s ease,transform .2s ease;
}
.svc-go:hover{background:#255ED4;gap:0.75rem;transform:translateY(-2px);}
.svc-go.ghost{background:transparent;border-color:var(--ink-line-2);color:var(--dim);}
.svc-go.ghost:hover{background:rgba(255,255,255,0.06);border-color:#fff;color:#fff;}

/* ============================================================
   CONTACT FORM — lifted out of the plain-stack look
   ============================================================ */
.form-card{
  border:1px solid var(--ink-line);border-radius:16px;padding:2rem 1.9rem;
  background:linear-gradient(165deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  box-shadow:0 24px 60px -34px rgba(47,111,237,0.45);
}
@media(max-width:600px){.form-card{padding:1.4rem 1.15rem;}}
.form-card-h{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--ink-line);
}
.form-badge{
  font-size:0.72rem;font-weight:700;color:#3FBF7F;white-space:nowrap;
  background:rgba(63,191,127,0.12);border:1px solid rgba(63,191,127,0.35);
  padding:0.35rem 0.75rem;border-radius:100px;
}
.form-note-top{
  font-size:0.83rem;line-height:1.65;color:var(--grey-dark);margin-bottom:1.5rem;
  padding:0.85rem 1rem;border-radius:9px;background:rgba(47,111,237,0.08);
  border-left:3px solid var(--blue);
}
.form-group label .req{
  font-size:0.68rem;font-weight:600;color:var(--blue-light);margin-left:0.45rem;
  border:1px solid rgba(108,151,255,0.35);border-radius:100px;padding:0.1rem 0.45rem;
}
.form-group label small{font-weight:400;color:var(--grey-dark);margin-left:0.35rem;text-transform:none;letter-spacing:0;}
.form-group input,.form-group select,.form-group textarea{border-radius:8px;padding:0.85rem 1rem;}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:rgba(108,151,255,0.4);}

.form-trust{
  display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;
  margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--ink-line);
}
.form-trust span{font-size:0.79rem;color:var(--grey-dark);display:inline-flex;align-items:center;gap:0.35rem;}
.form-trust b{color:#3FBF7F;}

.form-alt{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--ink-line);}
.form-alt-t{display:block;font-size:0.83rem;color:var(--grey-dark);text-align:center;margin-bottom:0.85rem;}
.form-alt-row{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;}
@media(max-width:520px){.form-alt-row{grid-template-columns:1fr;}}
.form-alt-btn{
  display:flex;flex-direction:column;gap:0.15rem;align-items:center;text-align:center;
  padding:0.85rem 1rem;border-radius:9px;text-decoration:none;
  border:1px solid var(--ink-line-2);background:rgba(255,255,255,0.03);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.form-alt-btn:hover{border-color:var(--blue);background:rgba(47,111,237,0.1);transform:translateY(-2px);}
.form-alt-btn b{font-size:0.9rem;color:#fff;}
.form-alt-btn span{font-size:0.75rem;color:var(--grey-dark);}

/* ---- graded capability rows ---- */
.qz-caps{display:grid;gap:1.1rem;}
.qz-cap{border:1px solid var(--ink-line);border-radius:11px;padding:1.15rem 1.2rem;background:rgba(255,255,255,0.02);}
.qz-cap-q{margin-bottom:0.8rem;}
.qz-cap-q b{display:block;font-size:0.95rem;color:#fff;margin-bottom:0.15rem;}
.qz-cap-q i{font-style:normal;font-size:0.78rem;line-height:1.5;color:var(--grey-dark);}
.qz-cap-opts{display:grid;gap:0.4rem;}
.qz-cap-o{
  display:grid;grid-template-columns:20px 1fr auto;gap:0.7rem;align-items:center;
  padding:0.65rem 0.8rem;border-radius:8px;cursor:pointer;
  border:1px solid transparent;background:rgba(255,255,255,0.025);
  transition:border-color .18s ease,background .18s ease;
}
.qz-cap-o:hover{border-color:rgba(108,151,255,0.4);}
.qz-cap-o input{position:absolute;opacity:0;width:1px;height:1px;}
.qz-cap-o:has(input:checked){border-color:var(--blue);background:rgba(47,111,237,0.10);}
.qz-cap-t b{display:block;font-size:0.85rem;font-weight:600;color:var(--dim);}
.qz-cap-o:has(input:checked) .qz-cap-t b{color:#fff;}
.qz-cap-t i{font-style:normal;font-size:0.75rem;line-height:1.45;color:var(--grey-dark);}
.qz-cap-tag{
  font-size:0.7rem;font-weight:700;white-space:nowrap;padding:0.25rem 0.6rem;border-radius:100px;
}
.qz-cap-tag.t-inc{color:#3FBF7F;background:rgba(63,191,127,0.12);border:1px solid rgba(63,191,127,0.3);}
.qz-cap-tag.t-add{color:var(--blue-light);background:rgba(47,111,237,0.14);border:1px solid rgba(108,151,255,0.35);}
.qz-cap-tag.t-tier{color:#E0A33C;background:rgba(224,163,60,0.12);border:1px solid rgba(224,163,60,0.32);}
.qz-cap-tag.t-cust{color:#E8705A;background:rgba(232,112,90,0.12);border:1px solid rgba(232,112,90,0.32);}
@media(max-width:560px){
  .qz-cap-o{grid-template-columns:20px 1fr;}
  .qz-cap-tag{grid-column:2;justify-self:start;margin-top:0.3rem;}
}

/* ---- money-saving nudge ---- */
.qz-nudge{
  margin-top:1rem;padding:0.95rem 1.1rem;border-radius:10px;font-size:0.83rem;line-height:1.65;
  color:#fff;background:rgba(63,191,127,0.12);border:1px solid rgba(63,191,127,0.4);
}
.qz-nudge b{color:#3FBF7F;}

/* ---- deposit breakdown ---- */
.qz-deposit{
  margin-top:1rem;padding:1rem 1.1rem;border-radius:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--ink-line);
}
.qz-deposit .t{font-size:0.78rem;font-weight:700;color:var(--blue-light);margin-bottom:0.6rem;}
.qz-deposit .r{display:flex;justify-content:space-between;gap:1rem;font-size:0.81rem;padding:0.3rem 0;color:var(--grey-dark);}
.qz-deposit .r b{color:#fff;font-family:var(--data);font-weight:500;white-space:nowrap;}
.qz-deposit p{font-size:0.73rem;line-height:1.6;color:var(--grey-dark);margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid var(--ink-line);}

/* ---- clickable service blocks ---- */
.svc-click{cursor:pointer;}
.svc-click:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;}
.svc-click::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:12px;
  box-shadow:inset 0 0 0 0 var(--blue);transition:box-shadow .25s ease;
}
.svc-click:hover::after{box-shadow:inset 0 0 0 1px var(--blue);}

/* ============================================================
   PAYMENT SEQUENCE — pricing #paying
   ============================================================ */
.paysteps{border-top:1px solid var(--line);}
.payrow{
  display:grid;grid-template-columns:104px 1fr;gap:1.5rem;align-items:start;
  padding:1.25rem 0;border-bottom:1px solid var(--line);
}
@media(max-width:600px){.payrow{grid-template-columns:1fr;gap:0.7rem;}}
.paystage{display:flex;align-items:center;gap:0.6rem;}
.paynum{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(16,24,40,0.06);border:1px solid var(--line-2);
  font-family:var(--display);font-weight:800;font-size:0.82rem;color:var(--slate);
}
.paycost{
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-0.02em;
  color:var(--slate);white-space:nowrap;
}
.paycost.free{color:var(--green-text);}
.payrow.paid .paynum{background:var(--blue);border-color:var(--blue);color:#fff;}
.payrow.paid .paycost{color:var(--blue);}
.payrow.paid{background:linear-gradient(90deg,rgba(47,111,237,0.07),transparent);}
.paywhat b{display:block;font-size:1rem;color:var(--text);margin-bottom:0.3rem;}
.paywhat p{font-size:0.88rem;line-height:1.7;color:var(--slate);}

/* the Pay row sits on a blue-tinted background — darken the label to clear AA */
.payrow.paid .paycost{color:var(--blue-text);}

/* legal pages: links inside light sections need the darker blue to clear AA.
   Higher specificity than the per-page inline `.legal a` rule, which assumes dark. */
.on-paper .legal a,
.on-alt .legal a,
.on-paper .callout.ink a,
.on-alt .callout.ink a{color:var(--blue-text);}

/* ============================================================
   ROUND 6 — pricing list fix, colour, logos, imagery
   ============================================================ */

/* --- FIX: price feature lists were display:flex, which turned every text
   node and every <b> into a separate flex item, tearing sentences onto
   different lines with gaps. Back to normal text flow with a hanging tick. --- */
.price-feats li{
  display:block;
  position:relative;
  padding:0.6rem 0 0.6rem 1.6rem;
  gap:0;
  font-size:0.89rem;
  line-height:1.62;
}
.price-feats li::before{
  position:absolute;left:0;top:0.6rem;
  line-height:1.62;
}
.price-feats li b{font-weight:600;white-space:normal;}

/* Same flex-tearing bug in every other bulleted list: any <b> or inline tag
   inside became its own flex item. All converted to hanging-marker text flow. */
.itier li,
.team-built li,
.vs-list li,
.glance li,
.flag-list li,
.bp-col li,
.build-list li,
.door li,
.qz-included li,
.ic-feats span,
.legal li{
  display:block;
  position:relative;
  padding-left:1.5rem;
  gap:0;
}
.itier li::before,
.team-built li::before,
.vs-list li::before,
.glance li::before,
.flag-list li::before,
.bp-col li::before,
.build-list li::before,
.door li::before,
.qz-included li::before,
.ic-feats span::before,
.legal li::before{
  position:absolute;left:0;top:0;
}
.vs-col.them .vs-list li::before,
.vs-col.us .vs-list li::before{position:absolute;left:0;top:0;}
.itier li{padding-top:0.4rem;padding-bottom:0.4rem;}
.itier li::before{top:0.4rem;}
.bp-col li{padding-top:0.4rem;padding-bottom:0.4rem;}
.bp-col li::before{top:0.4rem;}
.build-list li{padding-top:0.45rem;padding-bottom:0.45rem;}
.build-list li::before{top:0.45rem;}
.door li{padding-top:0.3rem;padding-bottom:0.3rem;}
.door li::before{top:0.3rem;}
.qz-included li{padding-top:0.3rem;padding-bottom:0.3rem;}
.qz-included li::before{top:0.3rem;}
.team-built li{padding-top:0.32rem;padding-bottom:0.32rem;}
.team-built li::before{top:0.32rem;}
.vs-list li{padding-top:0.55rem;padding-bottom:0.55rem;}
.vs-list li::before{top:0.55rem;}

/* --- beat band: name first and large, Trabelo unmistakably highlighted --- */
.beat-cell{position:relative;display:flex;flex-direction:column;}
.beat-cell .k{
  font-family:var(--display);font-weight:800;font-size:1.18rem;color:var(--text);
  letter-spacing:-0.02em;text-transform:none;margin-bottom:0.75rem;line-height:1.2;
  padding-bottom:0.65rem;border-bottom:1px solid var(--line);
}
.beat-cell .p{font-size:1.65rem;margin-bottom:0.25rem;}
.beat-cell .p .per{font-size:0.95rem;font-weight:700;color:var(--slate);}
.beat-cell .sub{
  font-size:0.78rem;color:var(--slate);margin-bottom:0.6rem;font-weight:500;
}
.beat-cell .m{margin-top:auto;}
.beat-cell.ours{
  border-width:2px;border-color:var(--blue);
  background:linear-gradient(160deg,rgba(47,111,237,0.16),rgba(47,111,237,0.04));
  box-shadow:0 18px 44px -20px rgba(47,111,237,0.5);
}
.beat-cell.ours .k{color:var(--blue);border-bottom-color:rgba(47,111,237,0.3);}
.beat-cell.ours .p{font-size:2.1rem;}
.beat-cell.ours .sub{color:var(--blue-text);}
.beat-flag{
  position:absolute;top:-11px;left:1.4rem;
  background:var(--blue);color:#fff;font-size:0.68rem;font-weight:700;
  padding:0.25rem 0.7rem;border-radius:100px;white-space:nowrap;
}
.beat-cell.ours{padding-top:1.7rem;}

/* --- before/after: the "after" pane is now a real screenshot --- */
.ba-shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top left;display:block;
}
.ba-scores{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(10,21,38,0) 0%,rgba(10,21,38,0.94) 45%);
  padding:2.2rem 0.75rem 0.85rem;
}
.ba-scores span{
  display:flex;flex-direction:column;align-items:center;gap:0.15rem;text-align:center;
  font-size:0.58rem;letter-spacing:0.02em;color:#B8C6DA;
}
.ba-scores b{font-family:var(--display);font-weight:800;font-size:1.25rem;color:#3FBF7F;line-height:1;}
@media(max-width:700px){
  .ba-scores b{font-size:1rem;}
  .ba-scores span{font-size:0.5rem;}
}

/* ============================================================
   INDUSTRY HERO BACKDROP
   Uses a real photo at images/industry/<slug>.jpg when one exists,
   otherwise a designed gradient + oversized watermark icon.
   Text always sits on a wash dark enough to hold AA contrast.
   ============================================================ */
.ip-hero-wrap{position:relative;overflow:hidden;isolation:isolate;}
.ip-backdrop{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;}
.ip-bd-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
/* the wash: guarantees legible text over any photo, however bright */
.ip-bd-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,17,31,0.97) 0%,rgba(8,17,31,0.90) 45%,rgba(8,17,31,0.72) 100%),
    linear-gradient(180deg,rgba(8,17,31,0.55) 0%,rgba(8,17,31,0.30) 50%,rgba(8,17,31,0.85) 100%);
}
@media(max-width:940px){
  .ip-bd-wash{background:linear-gradient(180deg,rgba(8,17,31,0.94),rgba(8,17,31,0.90));}
}
/* fallback artwork when no photo has been supplied */
.ip-bd-art{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px circle at 78% 18%,rgba(47,111,237,0.34),transparent 62%),
    radial-gradient(760px circle at 12% 88%,rgba(108,151,255,0.20),transparent 60%),
    linear-gradient(150deg,#0B1A31 0%,#0A1526 55%,#08111F 100%);
  display:flex;align-items:center;justify-content:flex-end;
}
.ip-bd-mark{
  width:min(46vw,620px);height:auto;margin-right:-6vw;
  stroke:rgba(140,180,255,0.16);fill:none;stroke-width:0.55;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:940px){.ip-bd-mark{width:80vw;margin-right:-18vw;opacity:0.55;}}

/* per-industry hue shift so no two trades feel identical */
.ip-hero-wrap[data-ind="trades"] .ip-bd-art,
.ip-hero-wrap[data-ind="landscaping"] .ip-bd-art{filter:hue-rotate(-14deg);}
.ip-hero-wrap[data-ind="cafe"] .ip-bd-art,
.ip-hero-wrap[data-ind="venues"] .ip-bd-art{filter:hue-rotate(18deg);}
.ip-hero-wrap[data-ind="salon"] .ip-bd-art,
.ip-hero-wrap[data-ind="aesthetics"] .ip-bd-art{filter:hue-rotate(38deg);}
.ip-hero-wrap[data-ind="wellness"] .ip-bd-art,
.ip-hero-wrap[data-ind="pets"] .ip-bd-art{filter:hue-rotate(-30deg);}
.ip-hero-wrap[data-ind="dental"] .ip-bd-art,
.ip-hero-wrap[data-ind="professional"] .ip-bd-art{filter:hue-rotate(-8deg);}
.ip-hero-wrap[data-ind="fitness"] .ip-bd-art,
.ip-hero-wrap[data-ind="tattoo"] .ip-bd-art{filter:hue-rotate(52deg);}
.ip-hero-wrap[data-ind="retail"] .ip-bd-art,
.ip-hero-wrap[data-ind="photography"] .ip-bd-art{filter:hue-rotate(26deg);}
.ip-hero-wrap[data-ind="property"] .ip-bd-art,
.ip-hero-wrap[data-ind="childcare"] .ip-bd-art{filter:hue-rotate(-22deg);}
.ip-hero-wrap[data-ind="cleaning"] .ip-bd-art,
.ip-hero-wrap[data-ind="driving"] .ip-bd-art{filter:hue-rotate(8deg);}
/* the dot texture would fight the backdrop */
.ip-hero-wrap.dotted{background-image:none;}

/* --- tool chips with brand-coloured glyphs --- */
.stk .tools span.tool{
  display:inline-flex;align-items:center;gap:0.4rem;
  padding:0.3rem 0.6rem 0.3rem 0.45rem;
  background:rgba(255,255,255,0.04);
}
.tool-i{
  width:14px;height:14px;flex-shrink:0;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.stk:hover .tools span.tool{border-color:rgba(108,151,255,0.35);}

/* --- marquee as a logo strip --- */
.marquee-track span.mq{
  display:inline-flex;align-items:center;gap:0.55rem;
  font-size:0.86rem;font-weight:600;color:var(--dim);
  padding:0.4rem 0.9rem;border-radius:100px;
  border:1px solid var(--ink-line);background:rgba(255,255,255,0.03);
}
.marquee-track span.mq svg{
  width:17px;height:17px;flex-shrink:0;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.marquee-track{gap:0.75rem;align-items:center;}

/* ============================================================
   STAGED PAYMENT BLOCK — custom builds, deliberately visually
   distinct from the "no deposit" rules above it
   ============================================================ */
.staged{
  border:2px solid rgba(224,163,60,0.45);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(224,163,60,0.10),rgba(16,24,40,0.02));
}
.staged-h{padding:1.75rem 1.85rem 1.5rem;border-bottom:1px solid rgba(224,163,60,0.28);}
@media(max-width:600px){.staged-h{padding:1.3rem 1.15rem;}}
.staged-badge{
  display:inline-block;font-size:0.7rem;font-weight:700;
  background:#A05B0E;color:#fff;padding:0.28rem 0.75rem;border-radius:100px;margin-bottom:0.85rem;
}
.staged-h h3{font-size:1.22rem;color:var(--text);margin-bottom:0.6rem;line-height:1.35;max-width:none;}
.staged-h h3 em{font-style:normal;color:#A05B0E;}
.staged-h p{font-size:0.9rem;line-height:1.7;color:var(--slate);}
.staged-row{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:760px){.staged-row{grid-template-columns:1fr;}}
.staged-step{padding:1.5rem 1.6rem;border-right:1px solid rgba(224,163,60,0.22);}
.staged-step:last-child{border-right:none;}
@media(max-width:760px){
  .staged-step{border-right:none;border-bottom:1px solid rgba(224,163,60,0.22);}
  .staged-step:last-child{border-bottom:none;}
}
.staged-step .pc{
  display:block;font-family:var(--display);font-weight:800;font-size:2.1rem;
  color:#A05B0E;line-height:1;letter-spacing:-0.03em;margin-bottom:0.45rem;
}
.staged-step b{display:block;font-size:0.98rem;color:var(--text);margin-bottom:0.35rem;}
.staged-step p{font-size:0.85rem;line-height:1.65;color:var(--slate);}
.staged-foot{
  padding:1.1rem 1.85rem;font-size:0.82rem;line-height:1.65;color:var(--slate);
  border-top:1px solid rgba(224,163,60,0.22);background:rgba(224,163,60,0.05);
}
.staged-foot a{color:var(--blue-text);}

/* ============================================================
   COOKIE CONSENT
   Renders after paint, animates on transform/opacity only, and
   never shifts layout (fixed, outside flow) so CLS stays at 0.
   ============================================================ */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:140;
  background:rgba(8,17,31,0.97);border-top:1px solid var(--ink-line-2);
  box-shadow:0 -18px 50px -24px rgba(0,0,0,0.9);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.ck.on{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.ck{transition:none;}}
.ck-in{
  max-width:var(--wrap);margin:0 auto;padding:1.15rem 2rem;
  display:flex;align-items:center;gap:1.75rem;
}
.ck-tx b{display:block;font-family:var(--display);font-size:0.98rem;color:#fff;margin-bottom:0.25rem;}
.ck-tx p{font-size:0.82rem;line-height:1.6;color:var(--grey-dark);max-width:82ch;}
.ck-tx a{color:var(--blue-light);}
.ck-btn{display:flex;gap:0.6rem;flex-shrink:0;}
.ck-b{
  font-family:var(--sans);font-size:0.86rem;font-weight:700;cursor:pointer;
  padding:0.72rem 1.4rem;border-radius:6px;white-space:nowrap;
  background:var(--blue);color:#fff;border:1.5px solid var(--blue);
  transition:background .2s ease,border-color .2s ease;
}
.ck-b:hover{background:#255ED4;border-color:#255ED4;}
.ck-b.ghost{background:transparent;color:var(--dim);border-color:var(--ink-line-2);}
.ck-b.ghost:hover{background:rgba(255,255,255,0.07);color:#fff;border-color:#fff;}
@media(max-width:820px){
  .ck-in{flex-direction:column;align-items:stretch;gap:0.9rem;padding:1rem 1.25rem;}
  .ck-btn{justify-content:stretch;}
  .ck-b{flex:1;}
}
/* keep clear of the mobile sticky bar */
@media(max-width:760px){.ck{bottom:74px;}}

/* ============================================================
   SERVICE BLOCKS ON LIGHT — the five "what I build" cards now sit
   on a paper section, so they need a light treatment rather than
   the dark-surface one.
   ============================================================ */
.on-paper .svc,
.on-alt .svc{
  border-color:var(--line);
  background:linear-gradient(150deg,#fff,#F8FAFE);
  box-shadow:0 2px 10px -6px rgba(16,24,40,0.12);
}
.on-paper .svc:hover,
.on-alt .svc:hover{
  border-color:rgba(47,111,237,0.45);
  box-shadow:0 22px 50px -26px rgba(47,111,237,0.35);
}
.on-paper .svc h3,.on-alt .svc h3{color:var(--text);}
.on-paper .svc p,.on-alt .svc p{color:var(--slate);}
.on-paper .svc-mark,.on-alt .svc-mark{
  background:rgba(47,111,237,0.08);border-color:rgba(47,111,237,0.22);
}
.on-paper .svc-mark svg,.on-alt .svc-mark svg{stroke:var(--blue);}
.on-paper .svc-n,.on-alt .svc-n{color:rgba(16,24,40,0.16);}
.on-paper .svc-price,.on-alt .svc-price{color:var(--blue);}
.on-paper .svc-meta,.on-alt .svc-meta{color:var(--slate);}
.on-paper .svc-meta b,.on-alt .svc-meta b{color:var(--blue-text);}
.on-paper .svc-cta,.on-alt .svc-cta{border-top-color:var(--line);}
.on-paper .svc-go.ghost,.on-alt .svc-go.ghost{
  border-color:var(--line-2);color:var(--slate);
}
.on-paper .svc-go.ghost:hover,.on-alt .svc-go.ghost:hover{
  background:var(--text);border-color:var(--text);color:#fff;
}
.on-paper .svc-click:hover::after,.on-alt .svc-click:hover::after{box-shadow:inset 0 0 0 1px var(--blue);}
.on-paper .svc .arrow-link,.on-alt .svc .arrow-link{color:var(--blue-text);border-bottom-color:rgba(38,90,192,0.35);}

/* "included as standard" cards now sit on --paper-alt, so lift them to white */
.on-alt .card.light{background:#fff;border-color:var(--line);}

/* --- light-surface overrides for elements that assumed a dark section --- */
.on-paper .mono.slash,.on-alt .mono.slash,
.on-paper .mono,.on-alt .mono{color:var(--blue-text);}
.on-paper .pill,.on-alt .pill{
  color:var(--blue-text);border-color:rgba(47,111,237,0.32);background:rgba(47,111,237,0.07);
}
.on-paper .tag,.on-alt .tag{color:var(--slate);border-color:var(--line-2);}
.on-paper .tag.blue,.on-alt .tag.blue{color:var(--blue-text);border-color:rgba(47,111,237,0.4);}
.on-paper .accent-line,.on-alt .accent-line{background:linear-gradient(90deg,var(--blue),var(--blue-light));}
.on-paper .sec-head p,.on-alt .sec-head p{color:var(--slate);}
.on-paper .note,.on-alt .note{color:var(--slate);}
.on-paper .who-strip span,.on-alt .who-strip span{color:var(--slate);border-color:var(--line-2);}

/* ============================================================
   HOME HERO BACKDROP
   The homepage hero carries a two-column layout (copy + scorecard),
   so it needs a heavier wash than the industry pages to keep both
   sides legible over a photograph.
   ============================================================ */
.home-hero{position:relative;overflow:hidden;isolation:isolate;background-image:none;}
.ip-bd-wash.home{
  background:
    linear-gradient(90deg,rgba(8,17,31,0.97) 0%,rgba(8,17,31,0.93) 40%,rgba(8,17,31,0.80) 100%),
    linear-gradient(180deg,rgba(8,17,31,0.60) 0%,rgba(8,17,31,0.42) 45%,rgba(8,17,31,0.92) 100%);
}
@media(max-width:940px){
  .ip-bd-wash.home{background:linear-gradient(180deg,rgba(8,17,31,0.95),rgba(8,17,31,0.93));}
}
/* the glow orbs sit behind the photo, so lift them above it */
.home-hero.glowbg::before,.home-hero.glowbg::after,
.ip-hero-wrap.glowbg::before,.ip-hero-wrap.glowbg::after{z-index:-1;}
.home-hero .ip-backdrop,.ip-hero-wrap .ip-backdrop{z-index:-3;}

/* ============================================================
   ROUND 7 — photos slightly more present
   Wash lifted a notch on every hero so the imagery reads more
   clearly. Still comfortably above AA: verified worst case is
   ~9:1 against white text, where the standard needs 4.5:1.
   ============================================================ */

/* industry pages */
.ip-bd-wash{
  background:
    linear-gradient(90deg,rgba(8,17,31,0.94) 0%,rgba(8,17,31,0.83) 45%,rgba(8,17,31,0.58) 100%),
    linear-gradient(180deg,rgba(8,17,31,0.45) 0%,rgba(8,17,31,0.20) 50%,rgba(8,17,31,0.80) 100%);
}
@media(max-width:940px){
  .ip-bd-wash{background:linear-gradient(180deg,rgba(8,17,31,0.90),rgba(8,17,31,0.86));}
}

/* home page — two columns to keep legible, so slightly heavier */
.ip-bd-wash.home{
  background:
    linear-gradient(90deg,rgba(8,17,31,0.95) 0%,rgba(8,17,31,0.88) 40%,rgba(8,17,31,0.68) 100%),
    linear-gradient(180deg,rgba(8,17,31,0.50) 0%,rgba(8,17,31,0.32) 45%,rgba(8,17,31,0.88) 100%);
}
@media(max-width:940px){
  .ip-bd-wash.home{background:linear-gradient(180deg,rgba(8,17,31,0.92),rgba(8,17,31,0.90));}
}

/* the six interior pages — shorter heroes, so the photo can carry more */
.page-hero{position:relative;overflow:hidden;isolation:isolate;background-image:none;}
.page-hero .ip-backdrop{z-index:-3;}
.page-hero.glowbg::before,.page-hero.glowbg::after{z-index:-1;}
.ip-bd-wash.page{
  background:
    linear-gradient(90deg,rgba(8,17,31,0.94) 0%,rgba(8,17,31,0.84) 48%,rgba(8,17,31,0.60) 100%),
    linear-gradient(180deg,rgba(8,17,31,0.46) 0%,rgba(8,17,31,0.22) 50%,rgba(8,17,31,0.82) 100%);
}
@media(max-width:940px){
  .ip-bd-wash.page{background:linear-gradient(180deg,rgba(8,17,31,0.91),rgba(8,17,31,0.87));}
}

/* ============================================================
   ROUND 8 — slider drag fix, scrollable jump nav, quote CTA
   ============================================================ */

/* FIX: the "after" pane is a real <img>, and browsers natively drag images,
   which hijacked the compare slider. Kill image dragging and let the range
   input above it own all pointer events. */
.ba img{
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
  -webkit-touch-callout:none;
}
.ba,.ba *{-webkit-user-select:none;user-select:none;}
.ba-shot,.ba-pane{pointer-events:none;}
.ba-range{pointer-events:auto;}

/* ============================================================
   JUMP NAV — horizontally scrollable with real arrow controls.
   Previously it clipped after the last visible chip with no way
   to reach the rest.
   ============================================================ */
.jump{position:sticky;top:72px;z-index:40;}
.jump-wrap{
  position:relative;max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;gap:0.35rem;padding:0 2rem;
}
@media(max-width:600px){.jump-wrap{padding:0 0.75rem;}}
.jump-inner{
  flex:1;min-width:0;display:flex;gap:0.5rem;align-items:center;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
  padding:0.75rem 0;margin:0;max-width:none;
}
.jump-inner::-webkit-scrollbar{display:none;}
.jump-inner > *{flex:0 0 auto;}

.jump-ar{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(47,111,237,0.16);border:1px solid rgba(108,151,255,0.4);
  color:#fff;font-size:0;padding:0;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.jump-ar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.jump-ar:hover{background:var(--blue);border-color:var(--blue);}
.jump-ar[disabled]{opacity:0.25;cursor:default;}
.jump-ar[disabled]:hover{background:rgba(47,111,237,0.16);border-color:rgba(108,151,255,0.4);}

/* fade hints so it's obvious there's more either side */
.jump-wrap::before,.jump-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .2s ease;
}
.jump-wrap::before{left:2.6rem;background:linear-gradient(90deg,rgba(8,17,31,0.96),transparent);}
.jump-wrap::after{right:2.6rem;background:linear-gradient(270deg,rgba(8,17,31,0.96),transparent);}
.jump-wrap.more-l::before{opacity:1;}
.jump-wrap.more-r::after{opacity:1;}

/* hide arrows entirely when the links already fit */
.jump-wrap.fits .jump-ar{display:none;}
.jump-wrap.fits{padding-left:2rem;padding-right:2rem;}
@media(max-width:600px){.jump-wrap.fits{padding-left:0.75rem;padding-right:0.75rem;}}

/* ============================================================
   INSTANT QUOTE — promoted to a primary route
   It was buried behind "Free audit" in the header. It is the one
   thing no competitor offers, so it now gets its own nav slot,
   a distinct accent, and a persistent floating entry point.
   ============================================================ */
.nav-quote{
  display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;
  font-size:0.84rem;font-weight:700;text-decoration:none;
  padding:10px 16px;border-radius:6px;margin-right:0.5rem;
  color:#fff;background:linear-gradient(135deg,#2F6FED,#6C97FF);
  border:1px solid rgba(108,151,255,0.5);
  box-shadow:0 6px 18px -8px rgba(47,111,237,0.9);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.nav-quote:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 10px 24px -8px rgba(47,111,237,1);}
.nav-quote svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:1180px){.nav-quote span{display:none;}.nav-quote{padding:10px 12px;}}
@media(max-width:1080px){.nav>.nav-quote{display:none;}}

/* mobile menu entry */
.mobile-menu .mm-quote{
  background:linear-gradient(135deg,rgba(47,111,237,0.28),rgba(108,151,255,0.18));
  color:#fff;font-weight:700;
}

/* floating launcher — appears after the first screen, every page */
.quote-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:85;
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.85rem 1.3rem;border-radius:100px;text-decoration:none;
  font-size:0.88rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#2F6FED,#6C97FF);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 14px 34px -12px rgba(47,111,237,0.95);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,filter .18s ease;
}
.quote-fab.on{opacity:1;visibility:visible;transform:translateY(0);}
.quote-fab:hover{filter:brightness(1.08);}
.quote-fab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
/* clear of the back-to-top button and the mobile bar */
.to-top{right:1.25rem;bottom:5.25rem;}
@media(max-width:760px){
  .quote-fab{bottom:86px;right:1rem;padding:0.75rem 1.05rem;font-size:0.82rem;}
  .to-top{bottom:146px;right:1rem;}
}
/* on the quote page itself the launcher is noise */
body.on-quote .quote-fab{display:none;}

/* ============================================================
   PAYMENT SEQUENCE ON DARK — the automation page reuses .paysteps
   inside a dark section, where the light-surface colours fail AA.
   ============================================================ */
.rule-dark .paysteps,.on-ink .paysteps{border-top-color:var(--ink-line);}
.rule-dark .payrow,.on-ink .payrow{border-bottom-color:var(--ink-line);}
.rule-dark .paynum,.on-ink .paynum{
  background:rgba(47,111,237,0.16);border-color:rgba(108,151,255,0.35);color:var(--blue-light);
}
.rule-dark .paycost,.on-ink .paycost{color:var(--dim);}
.rule-dark .paycost.free,.on-ink .paycost.free{color:#3FBF7F;}
.rule-dark .payrow.paid .paynum,.on-ink .payrow.paid .paynum{background:var(--blue);border-color:var(--blue);color:#fff;}
.rule-dark .payrow.paid .paycost,.on-ink .payrow.paid .paycost{color:var(--blue-light);}
.rule-dark .paywhat b,.on-ink .paywhat b{color:#fff;}
.rule-dark .paywhat p,.on-ink .paywhat p{color:var(--grey-dark);}

/* the three-column price band needs to stack before it overflows */
@media(max-width:900px){
  .beat[style*="repeat(3"]{grid-template-columns:1fr !important;}
}
.beat-3{grid-template-columns:repeat(3,1fr);}

/* ============================================================
   ROUND 9 — automation page card icons, light-surface contrast
   .icn-box/.icn default to blue-light for dark cards; on a light
   card that fails AA non-text contrast against white, so darken it.
   ============================================================ */
.card.light .icn-box{background:rgba(47,111,237,0.08);border-color:rgba(47,111,237,0.25);margin-bottom:1rem;}
.card.light .icn{stroke:var(--blue);}
.card .icn-box{margin-bottom:1rem;}
@media(max-width:900px){.beat-3{grid-template-columns:1fr;}}

/* ============================================================
   ROUND 10 — automation page: visible keynote block on dark,
   and a proper before/after component for the worked examples.
   The old .callout.ink set colour:var(--text) (near-black), which
   was invisible on the dark #what section — it read as an empty box.
   ============================================================ */
.keynote{
  position:relative;margin-top:2.25rem;
  border:1px solid rgba(108,151,255,0.38);border-radius:13px;
  background:linear-gradient(150deg,rgba(47,111,237,0.20),rgba(47,111,237,0.06));
  padding:1.6rem 1.7rem 1.5rem;
  box-shadow:0 20px 48px -30px rgba(47,111,237,0.75);
}
.keynote-tag{
  display:inline-block;font-family:var(--data);font-size:0.66rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--blue-light);
  background:rgba(47,111,237,0.20);border:1px solid rgba(108,151,255,0.36);
  border-radius:100px;padding:0.26rem 0.7rem;margin-bottom:0.85rem;
}
.keynote p{font-size:0.97rem;line-height:1.75;color:var(--dim);margin:0;}
.keynote b{color:#fff;}
.keynote a{color:var(--blue-light);text-decoration:underline;text-underline-offset:3px;}

/* --- worked examples: now vs after --- */
.autoex{display:grid;gap:1.15rem;}
.aex{
  border:1px solid var(--ink-line);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.aex:hover{border-color:rgba(108,151,255,0.4);transform:translateY(-3px);box-shadow:0 22px 50px -30px rgba(47,111,237,0.7);}
.aex-h{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.4rem;border-bottom:1px solid var(--ink-line);}
.aex-n{
  font-family:var(--data);font-size:0.78rem;font-weight:500;color:var(--blue-light);
  background:rgba(47,111,237,0.16);border:1px solid rgba(108,151,255,0.32);
  border-radius:7px;padding:0.3rem 0.55rem;flex-shrink:0;line-height:1;
}
.aex-h h3{font-size:1.06rem;color:#fff;margin:0;flex:1;min-width:0;line-height:1.35;}
.aex-cost{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;text-align:right;margin-left:auto;}
.aex-cost b{font-family:var(--display);font-weight:800;font-size:1.18rem;color:var(--blue-light);letter-spacing:-0.02em;line-height:1;}
.aex-cost small{font-size:0.7rem;color:var(--grey-dark);margin-top:0.22rem;}
.aex-b{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;}
.aex-side{padding:1.25rem 1.4rem;}
.aex-side.now{background:rgba(160,91,14,0.07);}
.aex-side.fix{background:rgba(47,111,237,0.09);}
.aex-lbl{
  display:block;font-family:var(--data);font-size:0.66rem;letter-spacing:0.1em;
  text-transform:uppercase;margin-bottom:0.5rem;
}
.aex-side.now .aex-lbl{color:#E0A567;}
.aex-side.fix .aex-lbl{color:var(--blue-light);}
.aex-side p{font-size:0.875rem;line-height:1.68;color:var(--dim);margin:0;}
.aex-side.fix p b{color:#fff;}
.aex-arrow{
  display:flex;align-items:center;justify-content:center;padding:0 0.55rem;
  border-left:1px solid var(--ink-line);border-right:1px solid var(--ink-line);
}
.aex-arrow svg{width:20px;height:20px;stroke:var(--blue-light);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.aex-f{display:flex;flex-wrap:wrap;gap:0.45rem;padding:0.9rem 1.4rem;border-top:1px solid var(--ink-line);}
.aex-tag{
  font-size:0.7rem;font-weight:600;color:var(--dim);
  background:rgba(255,255,255,0.05);border:1px solid var(--ink-line-2);
  border-radius:100px;padding:0.28rem 0.7rem;
}
.aex-tag.free{color:#5FD39A;border-color:rgba(95,211,154,0.35);background:rgba(95,211,154,0.09);}
.aex-tag.warn{color:#E0A567;border-color:rgba(224,165,103,0.35);background:rgba(224,165,103,0.09);}
@media(max-width:760px){
  .aex-b{grid-template-columns:1fr;}
  .aex-arrow{border:none;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:0.55rem 0;}
  .aex-arrow svg{transform:rotate(90deg);}
  .aex-h{flex-wrap:wrap;}
  .aex-h h3{flex-basis:100%;order:3;}
  .aex-side,.aex-h,.aex-f{padding-left:1.15rem;padding-right:1.15rem;}
}