/* ============================================================
   SignalSpade site
   Built in the visual language of the CMDS commercial-intent
   landing page (that page's own files are untouched; this is a
   separate stylesheet), retoned to black and orange.
   Palette: black grounds, signal orange #ff6a2c accent, copper
   #c9884a for structural icons and arrows, amber + neutral grey
   for the comparison-table semantics. Every colour resolves from
   the :root block below.
   ============================================================ */


  :root{
    --ink:#08080a; --navy:#101114; --panel:#14161a; --raised:#1b1e23;
    --cream:#f3f0ec; --muted:#9a938c; --dim:#6e6862;
    --accent:#ff6a2c; --copper:#c9884a; --red:#ff6a2c; --amber:#f5a623;
    --teal:#4fa3b8; --teal-lo:#2c7185; --teal-hi:#8fd2e3;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
    --maxw:1120px;
    --glow:radial-gradient(50% 42% at 86% 8%,rgba(201,136,74,.11),transparent 62%),radial-gradient(48% 42% at 10% 94%,rgba(255,106,44,.07),transparent 62%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--cream);
    font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:'Archivo','Helvetica Neue',sans-serif;letter-spacing:-.02em;text-wrap:balance;line-height:1.04}
  .accent{color:var(--accent)}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    display:inline-flex;align-items:center;gap:11px}
  .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--red)}
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-family:'Inter';
    background:var(--accent);color:#1a0a03;border:none;border-radius:10px;padding:13px 22px;font-size:15px;
    cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap}
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px -12px rgba(255,106,44,.6)}
  .btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line2)}
  .btn.ghost:hover{border-color:var(--accent);box-shadow:none}

  /* ============ SITE NAV (matches cmdsonline.com) ============ */
  .agencybar{background:#0b0c0e;border-bottom:1px solid rgba(255,255,255,.06)}
  .agencybar .row{display:flex;align-items:center;gap:22px;height:56px}
  .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .brand .logo{display:flex;align-items:center;gap:7px;font-family:'Archivo';font-weight:900;font-size:20px;color:#fff;letter-spacing:.02em}
  .brand .logo svg{width:22px;height:22px;color:var(--accent)}
  .brand .tag{font-size:12px;color:#8d857e;padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
  .agencylinks{display:flex;gap:18px;margin-left:auto;align-items:center}
  .agencylinks a{font-size:12px;font-weight:600;letter-spacing:.08em;color:#d8d2cb;text-transform:uppercase}
  .agencylinks a:hover{color:var(--accent)}
  .burger{display:none;background:none;border:none;color:#fff;cursor:pointer}
  @media(max-width:860px){.agencylinks,.brand .tag{display:none}.burger{display:block;margin-left:auto}}

  /* ============ HERO (composite banner, real photo bg) ============ */
  .hero{position:relative;overflow:hidden;background:var(--ink)}
  .hero .photo{position:absolute;inset:0;background-size:cover;background-position:52% 46%}
  .hero .scrim{position:absolute;inset:0;background:
    radial-gradient(58% 68% at 90% 94%,rgba(255,106,44,.26),transparent 62%),
    radial-gradient(40% 52% at 6% 2%,rgba(255,106,44,.09),transparent 60%),
    linear-gradient(90deg, rgba(6,6,8,.96) 0%, rgba(6,6,8,.89) 36%, rgba(6,6,8,.58) 66%, rgba(6,6,8,.3) 100%),
    linear-gradient(0deg, rgba(6,6,8,.84) 0%, rgba(6,6,8,0) 48%)}

  .hero-art{position:absolute;top:50%;right:1%;transform:translateY(-50%);width:min(48%,600px);z-index:1;pointer-events:none}
  .hero-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 34px rgba(201,136,74,.28))}
  .hero-art .spin{transform-box:fill-box;transform-origin:center;animation:heroSpin 34s linear infinite}
  .hero-art .spin2{transform-box:fill-box;transform-origin:center;animation:heroSpin 24s linear infinite reverse}
  @keyframes heroSpin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.hero-art .spin,.hero-art .spin2{animation:none}}
  @media(max-width:920px){.hero-art{display:none}}
  .hero .inner{position:relative;z-index:2;padding:clamp(46px,6.5vw,84px) 0 clamp(40px,5vw,62px);max-width:none}
  .hero .inner .wrap{max-width:var(--maxw)}
  .hero h1{font-weight:900;font-size:clamp(2.2rem,5.6vw,4rem);margin:16px 0 0;max-width:16ch}
  .hero .sub{margin-top:20px;font-size:clamp(16px,2vw,20px);color:#d8d2cb;max-width:52ch;line-height:1.5}
  .hero .sub b{color:#fff;font-weight:600}
  .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}
  .cta-note{font-size:13.5px;color:#b3aca5}
  .cred{position:relative;z-index:2;background:rgba(10,10,12,.55);border-top:1px solid var(--line)}
  .cred .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;padding:16px 24px}
  .cred span{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
  .cred svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}

  section{padding:clamp(52px,7vw,84px) 0}
  .cmpsec{background:radial-gradient(44% 66% at 83% 57%,rgba(201,136,74,.22),transparent 62%),radial-gradient(30% 46% at 83% 57%,rgba(255,106,44,.14),transparent 64%),radial-gradient(55% 55% at 12% 12%,rgba(201,136,74,.12),transparent 60%),var(--navy);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .nglow{background:var(--glow),var(--ink)}
  .grad{background:linear-gradient(100deg,#ffa24b 0%,#ff6a2c 45%,#d9430a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .faqsec{background:var(--glow),var(--ink)}
  .sec-head{max-width:60ch}
  .sec-head h2{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:14px}
  .sec-head p{color:var(--muted);margin-top:14px;font-size:17px;max-width:54ch}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:38px}
  .card{background:linear-gradient(180deg,var(--navy),rgba(16,17,20,.5));border:1px solid var(--line);border-radius:14px;padding:24px}
  .card .n{font-family:'Archivo';font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
  .card h3{font-size:19px;font-weight:700;margin:12px 0 8px;letter-spacing:-.01em}
  .card p{color:var(--muted);font-size:14.5px;line-height:1.55}
  /* an asterisked caveat inside a feature card: quieter than the body, but not hidden */
  .reqnote{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--accent);font-size:12.5px;line-height:1.5;letter-spacing:.005em}

  /* ===== criteria infographic ===== */
  .eyebrow.rule{display:flex;width:100%}
  .eyebrow.rule::after{content:"";flex:1;height:1px;margin-left:12px;align-self:center;
    background:linear-gradient(90deg,var(--line2),transparent)}
  .crit-head{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
  .crit-title{font-family:'Archivo';font-weight:900;font-size:clamp(2rem,4.6vw,3.2rem);margin:16px 0 0;line-height:1.02}
  .crit-intro{color:var(--muted);margin-top:16px;font-size:16.5px;max-width:46ch;line-height:1.55}
  .illus{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0c0d10}
  .illus img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
  .crit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
  .crit-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:26px 22px 24px;
    background:linear-gradient(180deg,rgba(20,22,26,.55),rgba(12,13,16,.5));overflow:hidden}
  .crit-card .tab{position:absolute;top:0;left:0;font-family:'Archivo';font-weight:900;font-size:17px;
    color:#170800;background:var(--c);padding:6px 16px 6px 13px;border-bottom-right-radius:13px}
  .crit-card .chead{display:flex;gap:15px;align-items:center}
  .crit-card .cicon{width:54px;height:54px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--c);
    display:flex;align-items:center;justify-content:center;color:var(--c);background:rgba(255,255,255,.02)}
  .crit-card .cicon svg{width:26px;height:26px}
  .crit-card .clabel{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--c);text-transform:uppercase}
  .crit-card h3{font-size:18.5px;font-weight:800;margin-top:4px;letter-spacing:-.01em;color:var(--cream);line-height:1.12}
  .crit-card p{color:var(--muted);font-size:13.8px;line-height:1.55;margin-top:15px}
  .crit-band{margin-top:20px;border:1px solid var(--line2);border-radius:16px;padding:18px 24px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:rgba(12,13,16,.5)}
  .crit-band .thesis{display:flex;align-items:center;gap:13px;font-size:14.5px;line-height:1.3}
  .crit-band .thesis svg{width:30px;height:30px;color:var(--accent);flex:0 0 auto}
  .crit-band .thesis b{color:var(--cream)} .crit-band .thesis em{color:var(--accent);font-style:normal;font-weight:700}
  .divv{width:1px;height:34px;background:var(--line)}
  .crit-band .outs{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
  .crit-band .out{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .crit-band .out svg{width:22px;height:22px;flex:0 0 auto;color:var(--accent)}
  @media(max-width:920px){.crit-head{grid-template-columns:1fr}.crit-grid{grid-template-columns:repeat(2,1fr)}.crit-band .outs{margin-left:0}}
  @media(max-width:600px){.crit-grid{grid-template-columns:1fr}}

  /* ===== comparison table v2 ===== */
  .cmp-head{position:relative}
  .cmp-title{font-family:'Archivo';font-weight:900;font-size:clamp(2rem,4.6vw,3.2rem);margin:16px 0 0;line-height:1.05;max-width:none}
  .cmp-title .dot{color:var(--red)}
  .cmp-intro{color:var(--muted);margin-top:14px;font-size:16.5px;max-width:none;position:relative}
  .ctbl{margin-top:34px;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
  .ctbl table{border-collapse:collapse;width:100%;min-width:900px}
  .ctbl th,.ctbl td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  .ctbl th:last-child,.ctbl td:last-child{border-right:none}
  .ctbl tbody tr:last-child td{border-bottom:none}
  .ctbl thead th{vertical-align:bottom;padding:22px 16px 20px;text-align:center;background:#121317}
  .ctbl thead th.need{text-align:left;width:27%;padding:22px 20px 20px}
  .chIcon{width:46px;height:46px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--ci)}
  .chIcon svg{width:30px;height:30px}
  .chName{font-family:'Archivo';font-weight:800;font-size:15px;color:var(--cream)}
  .chSub{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.35}
  .ctbl th.need .chName{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:'Inter';font-weight:700}
  .ctbl th.you .chName{color:var(--accent)}
  .ctbl th.you{background:linear-gradient(180deg,rgba(255,106,44,.15),rgba(255,106,44,.04));
    border-left:1px solid rgba(255,106,44,.45);border-right:1px solid rgba(255,106,44,.45)}
  .ctbl td.cmds-col{background:rgba(255,106,44,.06);border-left:1px solid rgba(255,106,44,.45);border-right:1px solid rgba(255,106,44,.45)}
  .ctbl tbody tr:last-child td.cmds-col{border-bottom:1px solid rgba(255,106,44,.45)}
  .rowlab{display:flex;align-items:center;gap:13px;padding:15px 20px}
  .rowlab .ri{width:30px;height:30px;flex:0 0 auto;color:var(--accent);display:flex;align-items:center;justify-content:center}
  .rowlab .ri svg{width:25px;height:25px}
  .rowlab span{font-size:14px;font-weight:600;color:var(--cream);line-height:1.25}
  .ctbl td.cell{text-align:center;padding:12px}
  .mark2{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;border:1.7px solid;line-height:1}
  .mark2.y{background:#e0530f;border-color:#e0530f;color:#fff}
  .mark2.p{border-color:#f5a623;color:#f5a623} .mark2.n{border-color:#8c847c;color:#8c847c}
  .clegend{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px}
  .clegend div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}

  /* ===== method (clean infographic, matches reference) ===== */
  .method2{background:radial-gradient(72% 95% at -6% 50%,rgba(201,136,74,.20),transparent 62%),radial-gradient(46% 55% at 100% 8%,rgba(255,106,44,.07),transparent 60%),var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .m2-eyebrow{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid rgba(255,106,44,.5);display:inline-block;padding-bottom:4px}
  .m2-h2{font-family:'Archivo',sans-serif;font-weight:900;color:var(--cream);font-size:clamp(1.5rem,4vw,2.9rem);line-height:1.02;letter-spacing:-.025em;margin-top:16px;white-space:nowrap}
  .m2-h2 .b{color:var(--copper)}
  .m2-intro{font-family:'Inter',sans-serif;color:#c9c3bc;font-size:clamp(15px,1.7vw,19px);line-height:1.5;margin-top:14px;max-width:64ch}
  .m2-intro b{color:var(--accent);font-weight:600}
  .mgrid{position:relative;margin-top:44px}
  .mrow{display:flex;align-items:flex-start;gap:0;position:relative;z-index:2}
  .mrow+.mrow{margin-top:36px}
  .mstep{flex:1 1 0;min-width:0;padding:0 16px}
  .mrow .mstep:first-child{padding-left:0}.mrow .mstep:last-child{padding-right:0}
  .marrow{flex:0 0 48px;display:flex;align-items:flex-start;justify-content:center;color:var(--copper);padding-top:12px;z-index:2}
  .marrow svg{width:42px;height:18px}
  .m2-top{display:flex;align-items:center;gap:12px;min-height:54px;margin-bottom:12px}
  .m2-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:#1a0a03;background:var(--accent);width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 0 0 4px rgba(255,106,44,.12)}
  .m2-lab{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;line-height:1.08;color:var(--cream)}
  .m2-body{display:flex;align-items:center;gap:16px}
  .m2-ic{flex:0 0 auto;width:116px;height:116px;border-radius:50%;border:1px solid rgba(154,147,140,.28);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,rgba(201,136,74,.07),transparent 70%)}
  .m2-ic svg{width:54px;height:54px;color:#d8d2cb}
  .m2-list{list-style:none;font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.45;color:#ebe5df}
  .m2-list li{position:relative;padding-left:16px;margin-bottom:6px}
  .m2-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
  /* feedback loop */
  .loopline{position:absolute;left:-16px;right:-16px;top:70px;bottom:-16px;border:2px dashed rgba(201,136,74,.42);border-top:none;border-radius:0 0 22px 22px;z-index:0;pointer-events:none}
  .loopcap{position:absolute;left:-23px;top:62px;color:var(--copper);z-index:1;line-height:0}
  .loopcap svg{width:14px;height:14px}
  .mrowsep{display:flex;justify-content:center;padding:12px 0;color:var(--copper);position:relative;z-index:2}
  .mrowsep svg{width:22px;height:26px}
  /* bottom banner */
  .m2-banner{display:grid;grid-template-columns:1.1fr 1.7fr;gap:30px;align-items:center;margin-top:42px;border:1.5px solid rgba(201,136,74,.4);border-radius:16px;padding:24px 30px;background:rgba(201,136,74,.05)}
  .m2-sys{display:flex;gap:16px;align-items:flex-start}
  .m2-sys>svg{width:42px;height:42px;color:var(--copper);flex:0 0 auto;margin-top:2px}
  .m2-sys h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:var(--cream);line-height:1.12}
  .m2-sys h4 .b{color:var(--copper)}
  .m2-sys p{font-family:'Inter',sans-serif;color:#b3aca5;font-size:14.5px;line-height:1.45;margin-top:7px;max-width:44ch}
  .m2-sys p .l{color:var(--accent);font-weight:600}
  .m2-pillars{display:grid;grid-template-columns:repeat(4,1fr)}
  .m2-pillar{padding:0 18px;border-left:1px solid rgba(154,147,140,.22);text-align:center}
  .m2-pillar:first-child{border-left:none}
  .m2-pillar svg{width:30px;height:30px;color:var(--copper);margin-bottom:9px}
  .m2-pillar b{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--cream);display:block;margin-bottom:4px}
  .m2-pillar span{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--muted);line-height:1.35;display:block}
  @media(max-width:860px){
    .m2-h2{white-space:normal;max-width:18ch}
    .m2-body{gap:12px}.m2-ic{width:92px;height:92px}.m2-ic svg{width:44px;height:44px}
    .marrow{flex:0 0 32px}.marrow svg{width:28px}
    .m2-banner{grid-template-columns:1fr;gap:24px}
  }
  @media(max-width:640px){
    .mrow{flex-direction:column;gap:0}
    .mstep{padding:0}
    .marrow{flex:0 0 auto;width:100%;justify-content:center;padding:10px 0}.marrow svg{transform:rotate(90deg)}
    .loopline,.loopcap{display:none}
    .m2-pillars{grid-template-columns:repeat(2,1fr);gap:22px 0}
    .m2-pillar{padding:0 10px}.m2-pillar:nth-child(3){border-left:none}
  }

  .tblwrap{margin-top:38px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:transparent}
  table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px}
  th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line)}
  tbody tr:last-child td{border-bottom:none}
  th.crit{width:34%;font-weight:600;color:var(--muted);font-family:'Inter';font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:var(--navy)}
  thead th{font-family:'Archivo';font-weight:800;font-size:14px;background:var(--panel);color:var(--cream)}
  thead th.you{background:linear-gradient(180deg,rgba(255,106,44,.16),rgba(255,106,44,.05));color:var(--accent)}
  td.crit{font-weight:600;color:var(--cream);font-size:14px}
  td.cmds{background:rgba(255,106,44,.055);border-left:1px solid rgba(255,106,44,.25);border-right:1px solid rgba(255,106,44,.25)}
  tbody tr:hover td:not(.crit){background:rgba(255,255,255,.02)}
  tbody tr:hover td.cmds{background:rgba(255,106,44,.09)}
  .mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:800;font-size:13px}
  .mk.y{background:rgba(255,106,44,.16);color:var(--accent)} .mk.p{background:rgba(245,166,35,.14);color:var(--amber)} .mk.n{background:rgba(140,132,124,.12);color:var(--red)}
  .colnote{font-size:12px;color:var(--dim);font-weight:400;display:block;margin-top:3px;letter-spacing:0;text-transform:none;font-family:'Inter'}
  .tbl-foot{font-size:13px;color:var(--dim);margin-top:14px}

  .method{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:36px}
  .step{border:1px solid var(--line);border-radius:13px;padding:20px 20px 22px;background:rgba(22,24,28,.35)}
  .step .s{font-family:'Archivo';font-weight:900;font-size:15px;color:var(--ink);background:var(--accent);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
  .step h3{font-size:16.5px;margin:14px 0 7px;font-weight:700}
  .step p{color:var(--muted);font-size:13.5px;line-height:1.55}

  .why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
  .why .card h3{color:var(--cream)}
  .why .big{font-family:'Archivo';font-weight:900;font-size:34px;color:var(--accent);letter-spacing:-.02em;line-height:1}
  .quote{margin-top:22px;border:1px dashed var(--line2);border-radius:14px;padding:26px 28px;background:rgba(201,136,74,.05)}
  .quote p{font-size:19px;color:var(--cream);font-weight:500;line-height:1.5;font-family:'Archivo';letter-spacing:-.01em}
  .quote .ph{color:var(--dim);font-size:13px;margin-top:14px;font-family:'Inter';font-weight:400}

  .faq{margin-top:34px;border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line)}
  summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:'Archivo';font-weight:700;font-size:18px;color:var(--cream);letter-spacing:-.01em}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--accent);font-weight:400}
  details[open] summary::after{content:"-"}
  details p{color:var(--muted);padding:0 40px 24px 0;font-size:15.5px;line-height:1.6;max-width:70ch}
  .faqsec .sec-head,.faqsec .sec-head p{max-width:none}
  .faqsec details p{max-width:none;padding-right:0}

  .final{background:radial-gradient(90% 120% at 100% 0%, rgba(255,106,44,.14), transparent 55%),var(--panel);border:1px solid var(--line2);border-radius:22px;padding:clamp(36px,5vw,60px)}
  .final h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:900;max-width:20ch}
  .final p{color:#c9c3bc;margin-top:16px;max-width:52ch;font-size:17px}
  footer{padding:38px 0 56px;color:var(--dim);font-size:13px;border-top:1px solid var(--line);margin-top:20px}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  footer .logo{display:flex;align-items:center;gap:7px;font-family:'Archivo';font-weight:900;color:#fff}
  footer .logo svg{width:18px;height:18px;color:var(--accent)}

  /* ============ STRATEGY-CALL POPUP (industry-specific) ============ */
  .lead-ov{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(4,4,6,.8);backdrop-filter:blur(6px)}
  .lead-ov.open{display:flex}
  .lead{position:relative;width:100%;max-width:960px;max-height:94vh;overflow:auto;border-radius:20px;background:var(--ink);color:var(--cream);border:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:0 44px 100px -34px rgba(0,0,0,.85)}
  @media(min-width:780px){.lead{flex-direction:row}}
  .lead .close{position:absolute;top:14px;right:16px;z-index:3;background:rgba(255,255,255,.06);border:1px solid var(--line2);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:19px;line-height:1;color:#c2bbb4;display:flex;align-items:center;justify-content:center}
  .lead .close:hover{color:#fff;background:rgba(255,255,255,.12)}
  .lead .pitch{position:relative;overflow:hidden;background:radial-gradient(90% 80% at 0% 0%,rgba(201,136,74,.16),transparent 55%),radial-gradient(80% 80% at 100% 100%,rgba(255,106,44,.12),transparent 55%),var(--navy);color:#fff;padding:36px 34px 40px;flex:1}
  @media(min-width:780px){.lead .pitch{width:47%;flex:0 0 47%}}
  .lead .pitch .pre{font:700 12px 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8d857e;display:flex;align-items:center;gap:9px}
  .lead .pitch .pre::before{content:"";width:22px;height:2.5px;border-radius:2px;background:#ff6a2c}
  .lead .pitch h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(23px,2.9vw,30px);line-height:1.1;margin-top:14px;color:#fff;letter-spacing:-.02em}
  .lead .pitch .lede{color:#c9c3bc;font-size:14.5px;line-height:1.6;margin-top:12px}
  .lead .feat{margin-top:24px;display:flex;flex-direction:column;gap:15px}
  .lead .feat .f{display:flex;gap:12px;align-items:flex-start}
  .lead .feat .fi{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(201,136,74,.14);color:var(--copper)}
  .lead .feat .fi svg{width:18px;height:18px}
  .lead .feat .fi.num{background:rgba(255,106,44,.15);color:var(--accent);font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
  .lead .feat b{font:700 14px 'Inter',sans-serif;color:#fff;display:block}
  .lead .feat span{font-size:12.5px;color:#9a938c;line-height:1.42}
  .lead .form{padding:34px;flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--ink)}
  .lead .form h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;color:var(--cream);letter-spacing:-.01em}
  .lead .form .fnote{color:var(--muted);font-size:13.5px;margin:7px 0 20px}
  .lead .frow{display:flex;gap:12px}.lead .frow>.fg{flex:1;min-width:0}
  .lead .fg{margin-bottom:13px}
  .lead label{font-size:12.5px;font-weight:600;color:#c2bbb4;display:block;margin:0 0 6px}
  .lead input,.lead select{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--line2);border-radius:10px;padding:12px 13px;font-size:14.5px;color:var(--cream);font-family:'Inter',sans-serif}
  .lead input::placeholder{color:#6e6862}
  .lead select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0c6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
  .lead input:focus,.lead select:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(201,136,74,.2)}
  .lead .submit{width:100%;margin-top:6px;background:var(--accent);color:#1a0a03;border:none;border-radius:11px;padding:15px;font-weight:800;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .lead .priv{text-align:center;color:var(--dim);font-size:12px;margin-top:13px}
  .lead .done{text-align:center;padding:44px 16px}
  .lead .done .ok{width:58px;height:58px;border-radius:50%;background:rgba(255,106,44,.16);color:var(--accent);border:1px solid rgba(255,106,44,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:30px}
  .lead .done h4{color:var(--cream);font-family:'Archivo',sans-serif;font-weight:800;font-size:22px}
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}
  /* ===== why the system works + proof (light results band) ===== */
  .proof2{background:#f6f3f0;color:#121317;border-top:1px solid #e6e0d9;border-bottom:1px solid #e6e0d9}
  .proof2 .eyebrow2{display:flex;align-items:center;gap:11px;font:700 13px/1 'Inter',sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#6e6862}
  .proof2 .eyebrow2::before{content:"";width:26px;height:3px;border-radius:2px;background:#ff6a2c;flex:0 0 auto}
  .proof2 h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.85rem,4.6vw,3.35rem);line-height:1.05;letter-spacing:-.028em;color:#101114;margin-top:18px}
  .proof2 .intro{font-family:'Inter',sans-serif;color:#625b54;font-size:clamp(15px,1.7vw,18px);line-height:1.55;margin-top:16px;max-width:58ch}
  .p2-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:46px;position:relative}
  .p2-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
  .p2-badge{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 16px -6px rgba(10,9,8,.35)}
  .p2-badge svg{width:24px;height:24px;color:#fff}
  .p2-col.trust .p2-badge,.p2-col.comp .p2-badge{background:#e2620f}
  .p2-col.timing .p2-badge{background:#b06a22}
  .p2-lab{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
  .p2-col.trust .p2-lab,.p2-col.comp .p2-lab{color:#c2530e}
  .p2-col.timing .p2-lab{color:#b06a22}
  .p2-arrow{position:absolute;top:11px;color:#e2620f}
  .p2-a1{left:31%}.p2-a2{left:64.5%}
  .p2-arrow svg{width:54px;height:20px}
  .p2-visual{height:224px;border-radius:14px;overflow:hidden;border:1px solid #e6e0d9;background:#fff;margin-bottom:20px;position:relative;box-shadow:0 12px 30px -20px rgba(10,9,8,.3)}
  .p2-sub{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:#14151a;margin-bottom:9px;letter-spacing:-.01em}
  .p2-body{font-family:'Inter',sans-serif;color:#625b54;font-size:14.5px;line-height:1.6;max-width:34ch}
  /* trust visual */
  .v-trust{background:linear-gradient(135deg,#fcf1e8,#f5efe9);display:flex;align-items:center;justify-content:center;padding:22px}
  .vt-card{background:#fff;border:1px solid #ebe5df;border-radius:12px;padding:18px 20px;width:100%;box-shadow:0 10px 24px -14px rgba(10,9,8,.3)}
  .vt-stars{font-size:18px;color:#f5a623;letter-spacing:2px}
  .vt-stars b{color:#101114;font-family:'Archivo';font-weight:800;margin-left:6px;font-size:16px}
  .vt-stars span{color:#8d857e;font-size:12px;font-family:'Inter'}
  .vt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
  .vt-chip{font:600 12px 'Inter',sans-serif;color:#a34710;background:#fdefe4;border:1px solid #f7d9c2;border-radius:999px;padding:5px 11px}
  .vt-chip.b{color:#5e5750;background:#f0ebe6;border-color:#dad3cb}
  /* timing phone */
  .v-timing{background:linear-gradient(135deg,#f6f0ea,#fcf1e8);display:flex;align-items:center;justify-content:center}
  .phone{width:196px;background:#fff;border:1px solid #e2dbd3;border-radius:20px;padding:12px 12px 16px;box-shadow:0 16px 34px -18px rgba(10,9,8,.45)}
  .ph-bar{display:flex;align-items:center;gap:7px;background:#f2eeea;border-radius:999px;padding:7px 11px;font:500 12px 'Inter';color:#5e5750}
  .ph-bar svg{width:13px;height:13px;color:#8d857e;flex:0 0 auto}
  .ph-res{border:1px solid #f0ebe6;border-radius:10px;padding:11px 12px;margin-top:10px}
  .ph-name{font:800 14px 'Archivo';color:#101114}
  .ph-meta{font:500 11px 'Inter',sans-serif;color:#857e78;margin-top:3px}
  .ph-meta .st{color:#f5a623}.ph-meta .open{color:#c2530e;font-weight:700}
  .ph-btns{display:flex;gap:7px;margin-top:10px}
  .ph-btns span{flex:1;text-align:center;font:700 11px 'Inter';border-radius:999px;padding:6px 0}
  .ph-btns span:first-child{background:#b06a22;color:#fff}
  .ph-btns span:last-child{background:#f2eeea;color:#b06a22}
  /* compounding chart */
  .v-comp{background:linear-gradient(135deg,#fcf1e8,#f6f0ea);display:flex;align-items:center;justify-content:center;padding:20px}
  .chart{width:100%;background:#fff;border:1px solid #ebe5df;border-radius:12px;padding:16px 18px;box-shadow:0 10px 24px -14px rgba(10,9,8,.3)}
  .ch-top{display:flex;align-items:center;justify-content:space-between}
  .ch-top span{font:700 12px 'Inter';color:#5e5750}
  .ch-top b{font:800 13px 'Archivo';color:#a34710;display:flex;align-items:center;gap:4px}
  .ch-line{width:100%;height:74px;margin-top:8px;display:block}
  .ch-rows{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .ch-row{display:flex;align-items:center;gap:8px}
  .ch-row i{height:7px;border-radius:4px;background:#eadfd6;display:block}
  .ch-row em{font:500 10px 'Inter';color:#97908a;font-style:normal}
  /* result panel */
  .p2-result{margin-top:46px;background:#fff;border:1px solid #e6e0d9;border-radius:18px;box-shadow:0 26px 60px -34px rgba(10,9,8,.35);display:grid;grid-template-columns:212px 1fr;overflow:hidden}
  .p2-rphoto{position:relative;background:linear-gradient(160deg,#26282e,#121317);display:flex;align-items:center;justify-content:center;color:#8d857e;text-align:center;padding:20px}
  .p2-rphoto .ph-ico{width:54px;height:54px;opacity:.7;margin-bottom:10px}
  .p2-rphoto .cap{font:600 12px 'Inter';line-height:1.4}
  .p2-rmain{display:grid;grid-template-columns:.92fr 1.65fr;gap:32px;padding:30px 34px;align-items:start}
  .rlab2{font:800 12px 'Inter';letter-spacing:.15em;text-transform:uppercase;color:#b06a22}
  .p2-quote .q{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(18px,1.9vw,23px);color:#14151a;line-height:1.32;margin-top:14px;position:relative;padding-left:26px}
  .p2-quote .q::before{content:"\\201C";position:absolute;left:-2px;top:4px;font:700 40px Georgia,serif;color:#b06a22;line-height:.6}
  .p2-quote .q .g{color:#c2530e}
  .p2-client{display:flex;align-items:center;gap:13px;margin-top:22px}
  .p2-client .logo{width:52px;height:52px;border-radius:10px;border:1px dashed #dad3cb;display:flex;align-items:center;justify-content:center;color:#97908a;font:600 9px 'Inter';text-align:center;flex:0 0 auto}
  .p2-client .cn{font:800 15px 'Archivo';color:#101114}
  .p2-client .cm{font:500 13px 'Inter';color:#6e6862}
  .p2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;border-left:1px solid #ece7e1;padding-left:32px}
  .p2-stat .ic{width:46px;height:46px;border-radius:50%;border:1px solid #dad3cb;display:flex;align-items:center;justify-content:center;color:#b06a22;margin-bottom:11px}
  .p2-stat .ic svg{width:22px;height:22px}
  .p2-stat .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(23px,2.5vw,31px);color:#c2530e;line-height:1;letter-spacing:-.02em}
  .p2-stat .nm{color:#625b54;font:500 12.5px 'Inter';margin-top:7px;line-height:1.3}
  .p2-stat .ft{color:#c2530e;font:600 13px 'Inter';margin-top:11px}
  .p2-rfoot{grid-column:2;display:flex;align-items:center;gap:10px;color:#6e6862;font:500 14px 'Inter';border-top:1px solid #f0ebe6;padding-top:16px;margin-top:2px}
  .p2-rfoot svg{width:22px;height:22px;color:#b06a22;flex:0 0 auto}
  .ph{color:#97908a;border-bottom:1px dashed #d0c9c1;padding-bottom:1px}
  .p2-flag{margin-top:14px;font:italic 12.5px 'Inter';color:#97908a}
  @media(max-width:860px){
    .p2-cols{grid-template-columns:1fr;gap:30px}.p2-arrow{display:none}
    .p2-result{grid-template-columns:1fr}.p2-rphoto{min-height:150px}
    .p2-rmain{grid-template-columns:1fr;gap:24px}
    .p2-stats{border-left:none;border-top:1px solid #ece7e1;padding:24px 0 0;grid-template-columns:repeat(2,1fr)}
    .p2-rfoot{grid-column:1}
  }

  /* ===== final CTA ===== */
  .cta2{background:var(--glow),var(--ink);position:relative;overflow:hidden}
  .cta2 .cgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
  .cta2 h2{font-weight:900;font-size:clamp(2.1rem,4.6vw,3.5rem);color:var(--cream);line-height:1.04;letter-spacing:-.02em;margin-top:16px;max-width:14ch}
  .cta2 h2 .accent{color:var(--accent)}
  .cta2 .cbody{color:#c9c3bc;font-size:17px;line-height:1.6;margin-top:20px;max-width:50ch}
  .bigbtn{display:inline-flex;align-items:center;gap:13px;background:var(--accent);color:#1a0a03;font-weight:800;font-size:17px;border:none;border-radius:12px;padding:17px 28px;cursor:pointer;margin-top:30px;transition:transform .15s,box-shadow .15s}
  .bigbtn:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,106,44,.6)}
  .bigbtn .pc{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center}
  .bigbtn .pc svg{width:17px;height:17px}
  .reassure{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:14.5px;margin-top:20px;max-width:44ch}
  .reassure svg{color:var(--accent);flex:0 0 auto;width:20px;height:20px}
  .snap{position:relative}
  .snap .card{background:linear-gradient(180deg,#15171b,#101114);border:1px solid var(--line2);border-radius:16px;padding:22px 24px;box-shadow:0 34px 66px -28px rgba(0,0,0,.75)}
  .snap .st{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
  .snap h4{font-weight:800;font-size:20px;color:var(--cream);margin:8px 0 18px;line-height:1.08}
  .snap .opp{display:flex;gap:12px;margin-bottom:14px}
  .snap .opp .n{width:24px;height:24px;border-radius:6px;background:var(--accent);color:#1a0a03;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .snap .opp b{font-size:14px;color:var(--cream);display:block;line-height:1.2}.snap .opp span{font-size:12px;color:var(--muted)}
  .snap .mini{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:flex-end;gap:7px;height:96px}
  .snap .mini .bar{flex:1;background:linear-gradient(180deg,#c9884a,rgba(201,136,74,.3));border-radius:3px 3px 0 0}
  .snap .mini .bar.hi{background:linear-gradient(180deg,var(--accent),rgba(255,106,44,.35))}
  .snap .mcap{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;margin-top:8px}
  .snap .float{position:absolute;right:-14px;bottom:-22px;width:180px;background:#15171b;border:1px solid var(--line2);border-radius:14px;padding:16px 18px;box-shadow:0 24px 50px -22px rgba(0,0,0,.8)}
  .snap .float .st{color:var(--copper)}.snap .float .big{font-family:'Archivo';font-weight:900;font-size:30px;color:var(--accent);margin-top:6px;letter-spacing:-.02em}
  .snap .float .gauge{--v:36;width:70px;height:70px;border-radius:50%;margin:10px auto 8px;background:conic-gradient(var(--accent) calc(var(--v)*1%),rgba(255,255,255,.09) 0);display:flex;align-items:center;justify-content:center;position:relative}
  .snap .float .gauge::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#15171b}
  .snap .float .gauge svg{position:relative;width:23px;height:23px;color:#c2bbb4}
  .snap .float .cvsub{color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:2px}
  .cta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;border:1px solid var(--line);border-radius:16px;padding:22px 26px}
  .cta-strip .it{display:flex;gap:12px}
  .cta-strip .it svg{width:26px;height:26px;color:var(--copper);flex:0 0 auto}
  .cta-strip .it b{color:var(--cream);font-size:13px;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:3px}
  .cta-strip .it span{color:var(--muted);font-size:12.5px;line-height:1.4}
  @media(max-width:860px){.cta2 .cgrid{grid-template-columns:1fr}.snap{max-width:440px;margin-top:20px}.snap .float{position:static;width:auto;margin-top:14px}.cta-strip{grid-template-columns:repeat(2,1fr)}}


  /* ============ 03 · Engagement intelligence ============ */
  .engint .wrap{padding-block:0}
  .engint .ei-top{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
  .engint .ei-intro h2{font-weight:800;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.04;
    letter-spacing:-.025em;margin-top:16px}
  .engint .ei-intro h2 em{font-style:normal;color:var(--accent)}
  .engint .ei-intro>p{color:var(--muted);margin-top:16px;font-size:17px;max-width:44ch}
  .ei-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .ei-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);
    border-radius:11px;padding:11px 16px;font-size:14.5px;font-weight:600;background:rgba(255,255,255,.02)}
  .ei-chip svg{width:17px;height:17px;color:var(--accent);flex:none}

  .ei-score{background:linear-gradient(180deg,var(--navy),rgba(16,17,20,.55));
    border:1px solid var(--line);border-radius:16px;padding:24px 26px}
  .ei-lbl{font-family:'Archivo';font-weight:800;font-size:11.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted)}
  .ei-head{display:flex;align-items:center;gap:18px;margin-top:12px}
  .ei-head b{font-family:'Archivo';font-weight:900;font-size:62px;line-height:.86;letter-spacing:-.04em}
  .ei-head strong{display:block;color:var(--accent);font-size:17px;font-weight:700}
  .ei-head span{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-top:2px}

  /* one row shared by the score breakdown and the weights table */
  .ei-bars{list-style:none;margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
  .ei-bars li{display:grid;grid-template-columns:20px 1fr 150px 26px;align-items:center;
    gap:12px;padding:9px 0}
  .ei-bars svg{width:18px;height:18px;color:var(--muted)}
  .ei-name{font-size:14.5px;font-weight:600}
  .ei-val{font-family:'Archivo';font-weight:800;font-size:14.5px;text-align:right}
  .ei-bar{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
  .ei-bar b{display:block;height:100%;border-radius:99px;background:var(--accent)}
  .ei-cap,.ei-foot{color:var(--dim);font-size:12.5px;margin-top:14px}
  .ei-cap{text-align:right}

  .ei-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .ei-card{padding:26px 28px}
  .ei-card h3{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
  .ei-sub{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:46ch}

  /* timeline: the rail is drawn on the list, dots sit on each row */
  .ei-tl{list-style:none;margin-top:22px;position:relative;padding-left:2px}
  .ei-tl::before{content:"";position:absolute;left:3px;top:16px;bottom:16px;width:1px;
    background:linear-gradient(180deg,var(--accent),rgba(255,106,44,.18))}
  .ei-tl li{display:grid;grid-template-columns:7px 44px 1fr auto auto;align-items:center;
    gap:0 14px;padding:11px 0;position:relative}
  .ei-node{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 3px var(--ink)}
  .ei-tl svg{width:19px;height:19px;color:var(--accent);justify-self:center;
    background:var(--ink);border:1px solid var(--line2);border-radius:50%;padding:10px;
    box-sizing:content-box}
  .ei-what b{display:block;font-size:15px;font-weight:700}
  .ei-what span{display:block;color:var(--muted);font-size:13.5px;margin-top:1px}
  .ei-when{color:var(--dim);font-size:13px;white-space:nowrap}
  .ei-pts{font-family:'Archivo';font-weight:900;font-size:16px;color:var(--accent);
    text-align:right;min-width:42px}

  .ei-chart{margin-top:18px}
  .ei-chart svg{width:100%;height:auto;display:block;overflow:visible}
  .ei-chart .grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
  .ei-chart .ax{fill:var(--dim);font-size:11px;font-family:'Inter',system-ui,sans-serif}
  .ei-chart .fill{fill:url(#eifade)}
  .ei-chart .line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;
    stroke-linejoin:round}
  .ei-chart .mk{fill:var(--accent);stroke:var(--ink);stroke-width:2.5}
  .ei-chart .tip rect{fill:var(--raised);stroke:var(--line2);stroke-width:1}
  .ei-chart .tip text{fill:var(--accent);font-size:12.5px;font-weight:700;
    font-family:'Inter',system-ui,sans-serif}
  .ei-chart .tip text.sub{fill:var(--muted);font-weight:500}

  .ei-flags{margin-top:22px;display:grid;gap:12px}
  .ei-flag{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
    border-radius:12px;padding:15px 18px;background:rgba(255,255,255,.02)}
  .ei-flag svg{width:19px;height:19px;color:var(--muted);flex:none}
  .ei-flag>span:first-of-type{flex:1;font-size:15px;font-weight:600}
  .ei-flag em{font-style:normal;color:var(--muted);font-size:14px}
  .ei-pill{background:rgba(255,106,44,.14);border:1px solid rgba(255,106,44,.35);
    color:var(--accent);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:700}

  .ei-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;
    border-top:1px solid var(--line);padding-top:26px}
  .ei-tile{padding:0 28px;border-left:1px solid var(--line)}
  .ei-tile:first-child{border-left:0;padding-left:0}
  .ei-tile svg{width:26px;height:26px;color:var(--accent)}
  .ei-tile b{display:block;font-size:16.5px;font-weight:700;margin-top:12px;letter-spacing:-.01em}
  .ei-tile p{color:var(--muted);font-size:14px;margin-top:7px}

  @media(max-width:940px){
    .engint .ei-top,.ei-duo{grid-template-columns:1fr}
    .ei-trio{grid-template-columns:1fr;gap:24px;padding-top:22px}
    .ei-tile{border-left:0;padding:0}
    .ei-bars li{grid-template-columns:20px 1fr 90px 26px}
  }
  @media(max-width:560px){
    .ei-head b{font-size:48px}
    .ei-card{padding:22px 20px}
    .ei-bars li{grid-template-columns:20px 1fr 26px;gap:10px}
    .ei-bar{display:none}
    .ei-tl li{grid-template-columns:7px 44px 1fr auto;gap:0 11px}
    .ei-when{display:none}
  }


  /* ============ ported from the capabilities brief ============ */
  .fx-sec{border-top:1px solid var(--line)}
  .fx-claim h2{font-family:'Archivo';font-weight:900;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.02;
    letter-spacing:-.03em;margin-top:16px}
  .fx-claim h2 em{font-style:normal;color:var(--accent)}
  .fx-claim>.wrap>p{color:var(--muted);font-size:18px;margin-top:18px;max-width:54ch}
  .fx-claim>.wrap>p b{color:var(--cream)}
  .fx-claim>.wrap>p a{color:var(--accent);white-space:nowrap;text-decoration:none;font-weight:600}

  /* product figures: light UI on a dark page, so the brief's palette is scoped to the frame */
  .fx-shot{margin-top:38px}
  .fx-shot .shot{margin:0}
  .fx-shot .shotframe{--ink:#16161a;--rule:#e6e1da;--rule2:#d5cec5;--accent:#d1490f;
    color:#16161a;background:#faf7f4;border:1px solid var(--line2);border-radius:12px;padding:12px;
    overflow-x:auto;box-shadow:0 34px 80px -34px rgba(0,0,0,.85)}
  .fx-shot .ui{min-width:640px}
  .fx-shot figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:14px;font-size:14.5px}
  .fx-shot figcaption b{color:var(--cream);font-weight:700}
  .fx-shot figcaption span{color:var(--muted)}
  .fx-shot figcaption .sample{color:var(--dim);font-size:12.5px;margin-left:auto}

  .fx-tbl{margin-top:30px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;
    background:linear-gradient(180deg,var(--navy),rgba(16,17,20,.5))}
  .fx-ledger,.fx-model{width:100%;border-collapse:collapse;font-size:14.5px;min-width:580px}
  .fx-ledger th,.fx-model th{font-family:'Archivo';font-weight:800;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 20px;border-bottom:1px solid var(--line2)}
  .fx-ledger td,.fx-model td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
  .fx-ledger tr:last-child td{border-bottom:0}
  .fx-ledger th.n,.fx-model th.n,.fx-model td.n{text-align:right;font-variant-numeric:tabular-nums}
  .fx-ledger .sig{font-weight:700;white-space:nowrap}
  .fx-ledger .bar{width:130px}
  .fx-ledger .bar i{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
  .fx-ledger .bar b{display:block;height:100%;border-radius:99px;background:var(--accent)}
  .fx-ledger .wt{font-family:'Archivo';font-weight:900;font-size:18px;color:var(--accent);text-align:right;width:64px}
  .fx-ledger .why{color:var(--muted);font-size:14px}
  .fx-ledger tr.zero .wt{color:var(--teal-hi)}
  .fx-ledger tr.zero .bar b{background:var(--teal)}

  .fx-model .task{color:var(--cream)}
  .fx-model .sub2{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
  .fx-model tr.rolehead td{padding-top:22px;border-bottom:1px solid var(--line2)}
  .fx-model tr.rolehead b{font-family:'Archivo';font-weight:800;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent)}
  .fx-model tr.rolesum td{font-weight:700;border-bottom:1px solid var(--line2)}
  .fx-model tr.rolesum td.n{font-family:'Archivo';font-weight:900}
  .fx-model tr.grand td{border-bottom:0;padding-block:20px;background:rgba(255,106,44,.06)}
  .fx-model tr.grand td:first-child{font-family:'Archivo';font-weight:900;font-size:17px}
  .fx-model tr.grand td.n{font-family:'Archivo';font-weight:900;font-size:22px;color:var(--accent)}
  .fx-note{color:var(--muted);font-size:14px;margin-top:18px;max-width:80ch}

  .fx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
  .fx-step{background:linear-gradient(180deg,var(--navy),rgba(16,17,20,.5));border:1px solid var(--line);
    border-radius:14px;padding:24px}
  .fx-when{font-family:'Archivo';font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  .fx-step h3{font-size:20px;font-weight:800;margin-top:8px;letter-spacing:-.01em}
  .fx-step p{color:var(--muted);font-size:14.5px;margin-top:8px}
  .fx-bars{display:flex;align-items:flex-end;gap:5px;height:42px;margin-top:20px}
  .fx-bars i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;opacity:.16}
  .fx-bars i:nth-child(1){height:22%}.fx-bars i:nth-child(2){height:36%}.fx-bars i:nth-child(3){height:50%}
  .fx-bars i:nth-child(4){height:66%}.fx-bars i:nth-child(5){height:82%}.fx-bars i:nth-child(6){height:100%}
  .fx-step:nth-child(1) .fx-bars i:nth-child(-n+2),.fx-step:nth-child(2) .fx-bars i:nth-child(-n+4),
  .fx-step:nth-child(3) .fx-bars i{opacity:.95}

  .fx-ho .handoff{margin-top:0}
  /* always visible here: outranks the hide-until-scrolled rule further down */
  html body .fx-ho .handoff{opacity:1;transform:none}

  .fx-limits{list-style:none;margin-top:28px;display:grid;gap:16px;max-width:82ch}
  .fx-limits li{position:relative;padding-left:26px;color:var(--muted);font-size:16px}
  .fx-limits li::before{content:"";position:absolute;left:0;top:.74em;width:13px;height:2px;background:var(--accent)}
  .fx-limits li b{color:var(--cream)}

  @media(max-width:860px){.fx-steps{grid-template-columns:1fr}}
  @media(max-width:560px){.fx-claim>.wrap>p{font-size:16px}.fx-shot figcaption .sample{margin-left:0}}

  .fx-intro .fx-lede{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--muted);max-width:none;margin-top:16px}
  .fx-intro .fx-lede b{color:var(--cream);font-weight:700}
  .fx-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
  .fx-mode h3{font-size:21px}
  .fx-mode p{font-size:15.5px}
  .fx-mode.win{border-color:rgba(255,106,44,.45);background:linear-gradient(180deg,rgba(255,106,44,.09),rgba(16,17,20,.5))}
  @media(max-width:760px){.fx-modes{grid-template-columns:1fr}}

  /* ---- product figure renderings (from the brief's figures.py) ---- */
  .ui{display:grid;grid-template-columns:132px 1fr;border:1px solid var(--rule2);border-radius:6px;
      overflow:hidden;background:#fff;font-family:Inter,sans-serif;font-size:9px;line-height:1.45}
    .uinav{background:#fbfaf9;border-right:1px solid var(--rule);padding:9px 0}
    .uibrand{display:flex;align-items:center;gap:5px;font-family:Archivo;font-weight:800;font-size:10px;
      color:var(--ink);padding:0 10px 9px}
    .uispade{color:var(--accent);font-size:11px}
    .uinav ul{list-style:none}
    .uinav li{padding:4px 10px;color:#6b665f}
    .uinav li.on{background:#f1ece6;color:var(--ink);font-weight:600;
      box-shadow:inset 2px 0 0 var(--accent)}
    .uimain{padding:11px 13px;background:#fff}
    .uihead{display:flex;align-items:center;gap:7px;margin-bottom:9px}
    .uihead h4{font-family:Archivo;font-weight:800;font-size:13px;flex:1}
    .uibtn{background:var(--ink);color:#fff;border-radius:4px;padding:3px 8px;font-weight:600;font-size:8px}
    .uibtn.ghost{background:#fff;color:var(--ink);border:1px solid var(--rule2)}
    .uicards{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:9px}
    .uicard{border:1px solid var(--rule);border-radius:5px;padding:6px 7px;min-height:52px}
    .uicard.hot{border-color:rgba(209,73,15,.4)}
    .uicard.warn{border-color:rgba(224,160,42,.5)}
    .uilab{display:block;font-family:Archivo;font-weight:700;font-size:6.5px;letter-spacing:.1em;
      text-transform:uppercase;color:#8d877f}
    .uicard b{display:block;font-family:Archivo;font-weight:900;font-size:17px;color:var(--ink);
      line-height:1.1;margin:2px 0}
    .uisub{color:#8d877f;font-size:7.5px}
    .uicard.up .uisub{color:#2f7a52}
    .uipanel{border:1px solid var(--rule);border-radius:5px;padding:8px 9px;margin-bottom:7px}
    .uiptop{display:flex;align-items:center;gap:6px;margin-bottom:6px}
    .uiptop b{font-family:Archivo;font-weight:800;font-size:9.5px;color:var(--ink)}
    .uidim{color:#8d877f;font-size:8px}
    .uiptop .uidim{margin-left:auto}
    .uibar{display:flex;height:5px;border-radius:3px;overflow:hidden;gap:1px}
    .uikeys{display:flex;gap:12px;margin-top:5px;font-size:8px;color:#6b665f}
    .uirow{display:flex;align-items:center;gap:7px;padding:4px 0;border-top:1px solid var(--rule)}
    .uiav{width:15px;height:15px;border-radius:50%;background:#f1ece6;color:var(--accent);
      display:grid;place-items:center;font-family:Archivo;font-weight:800;font-size:7.5px;flex:0 0 auto}
    .uiwho{flex:1;min-width:0}
    .uiwho b{display:block;font-size:9px;color:var(--ink);font-weight:600}
    .uiwho span{display:block;color:#8d877f;font-size:7.5px}
    .uiago{color:#8d877f;font-size:7.5px}
    .uiscore{font-family:Archivo;font-weight:800;font-size:9px;color:var(--accent);
      background:#fdf0e9;border-radius:3px;padding:1px 5px}
    .uichips{display:flex;gap:5px;margin-bottom:8px}
    .uichips span{border:1px solid var(--rule2);border-radius:99px;padding:1.5px 8px;font-size:8px;color:#6b665f}
    .uichips span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
    .uitable{width:100%;border-collapse:collapse;font-size:8.5px;margin:0}
    .uitable th{font-family:Archivo;font-weight:700;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;
      color:#8d877f;text-align:left;padding:0 6px 4px 0;border-bottom:1px solid var(--rule2)}
    .uitable td{padding:4px 6px 4px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
    .uipill{border:1px solid var(--rule2);border-radius:99px;padding:1px 6px;font-size:7.5px;color:#6b665f}
    .uipill.hot{border-color:rgba(209,73,15,.45);color:var(--accent);background:#fdf0e9}
    .uipill.live{border-color:rgba(47,122,82,.4);color:#2f7a52;background:#eef6f1}
    .uilead{color:#6b665f;font-size:8.5px;max-width:58ch;margin-bottom:8px}
    .uitrace{margin-bottom:7px}
    .uistats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
    .uistat{border:1px solid var(--rule);border-radius:5px;padding:6px 8px}
    .uistat b{display:block;font-family:Archivo;font-weight:900;font-size:15px;color:var(--ink);line-height:1.1}
    .uistat span{font-family:Archivo;font-weight:700;font-size:6.5px;letter-spacing:.1em;
      text-transform:uppercase;color:#8d877f}
    @media(max-width:780px){
      .ui{grid-template-columns:1fr}.uinav{display:none}
      .uicards{grid-template-columns:repeat(2,1fr)}
      .uitable th:nth-child(3),.uitable td:nth-child(3){display:none}}
    @media print{.ui{break-inside:avoid;page-break-inside:avoid}
      .uinav,.uicard,.uipill,.uiscore,.uibar i,.uibtn{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

  /* ---- scroll reveal ---- */
  html.anim :is(.hero .wrap>*,.crit-card,.tblwrap,.mstep,.m2-banner,.p2-col,.snap,.cta-strip .it){opacity:0;transform:translateY(56px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.anim .is-in{opacity:1!important;transform:none!important}
  @media(prefers-reduced-motion:reduce){html.anim :is(.hero .wrap>*,.crit-card,.tblwrap,.mstep,.m2-banner,.p2-col,.snap,.cta-strip .it){opacity:1!important;transform:none!important;transition:none!important}}
  /* ---- button shimmer + glow ---- */
  .btn,.bigbtn,.lead .submit{position:relative;overflow:hidden;animation:btnGlow 2.8s ease-in-out infinite}
  .btn::after,.bigbtn::after,.lead .submit::after{content:"";position:absolute;top:-15%;left:-70%;width:42%;height:130%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:btnShimmer 3.4s ease-in-out infinite;pointer-events:none;z-index:2}
  .btn:hover,.bigbtn:hover,.lead .submit:hover{animation-duration:1.5s}
  @keyframes btnShimmer{0%{left:-70%}62%{left:135%}100%{left:135%}}
  @keyframes btnGlow{0%,100%{box-shadow:0 6px 20px -9px rgba(255,106,44,.5)}50%{box-shadow:0 10px 34px -6px rgba(255,106,44,.85)}}
  @media(prefers-reduced-motion:reduce){.btn,.bigbtn,.lead .submit{animation:none}.btn::after,.bigbtn::after,.lead .submit::after{display:none}}



/* ============================================================
   SignalSpade additions: the nav bar, the page-level hero used
   on inner pages, pricing plans, and the demo form. Written in
   the same idiom as everything above.
   ============================================================ */

  .navcta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#1a0a03;
    font-family:'Archivo';font-weight:800;font-size:12.5px;letter-spacing:.02em;
    border-radius:9px;padding:9px 15px;white-space:nowrap;margin-left:20px}
  .navcta:hover{background:#ff8047}
  .agencylinks a.on{color:var(--accent)}
  .navpanel{display:none;background:#0b0c0e;border-bottom:1px solid var(--line)}
  .navpanel.open{display:block}
  .navpanel .wrap{display:flex;flex-direction:column;padding:6px 24px 18px}
  .navpanel a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:#d8d2cb;font-weight:600}
  .navpanel a.on{color:var(--accent)}
  @media(min-width:861px){.navpanel{display:none!important}}

  /* inner-page hero: same treatment, no photo, tighter */
  .pagehero{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line)}
  .pagehero .scrim{position:absolute;inset:0;background:
    radial-gradient(52% 76% at 88% 96%,rgba(255,106,44,.2),transparent 62%),
    radial-gradient(38% 50% at 4% 0%,rgba(255,106,44,.07),transparent 60%)}
  .pagehero .inner{position:relative;z-index:2;padding:clamp(40px,5.5vw,68px) 0 clamp(30px,4vw,46px)}
  .pagehero h1{font-family:'Archivo';font-weight:900;font-size:clamp(2rem,4.6vw,3.3rem);
    letter-spacing:-.03em;line-height:1.03;margin:14px 0 0;max-width:20ch}
  .pagehero .sub{margin-top:16px;color:var(--muted);font-size:clamp(15px,1.8vw,18.5px);line-height:1.55;max-width:60ch}

  /* pricing plans */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px;align-items:start}
  .plan{background:linear-gradient(180deg,var(--navy),rgba(16,17,20,.5));border:1px solid var(--line);
    border-radius:16px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:14px}
  .plan.flag{border-color:rgba(255,106,44,.45);box-shadow:0 30px 60px -34px rgba(0,0,0,.9);position:relative}
  .plan.flag::before{content:"Most clients";position:absolute;top:-11px;left:22px;background:var(--accent);
    color:#1a0a03;font-family:'Archivo';font-weight:800;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.14em;padding:4px 11px;border-radius:999px}
  .plan .k{font-family:'Archivo';font-weight:800;font-size:11.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim)}
  .plan h3{font-family:'Archivo';font-weight:900;font-size:26px;letter-spacing:-.02em}
  .plan .who{color:var(--dim);font-size:14px;line-height:1.5;min-height:2.9em}
  .plan .val{font-family:'Archivo';font-weight:900;font-size:34px;letter-spacing:-.03em;line-height:1}
  .plan.flag .val{color:var(--accent)}
  .plan .val small{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:0}
  .plan .setup{font-size:14px;color:var(--muted);margin-top:6px}
  .plan .setup b{color:var(--cream);font-weight:700}
  .allow{display:flex;flex-wrap:wrap;gap:7px}
  .allow .chip{font-size:12.5px;background:rgba(255,255,255,.04);border:1px solid var(--line);
    border-radius:8px;padding:6px 10px;color:var(--muted)}
  .allow .chip b{color:var(--cream);font-weight:700}
  .plan hr{border:0;height:1px;background:var(--line);margin:2px 0}
  .inc{list-style:none;display:flex;flex-direction:column;gap:10px}
  .inc li{position:relative;padding-left:22px;font-size:14px;color:var(--muted);line-height:1.5}
  .inc li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
    border:1.6px solid var(--accent);border-radius:2px}
  .inc li b{color:var(--cream);font-weight:700}
  .plan .btn{justify-content:center;margin-top:auto}
  @media(max-width:900px){.plans{grid-template-columns:1fr}.plan .who{min-height:0}}

  /* demo form */
  .formwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:38px;align-items:start;margin-top:34px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .fgrid .fg{display:flex;flex-direction:column;gap:7px}
  .fgrid .fg.full{grid-column:1/-1}
  .fgrid label{font-family:'Archivo';font-weight:700;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim)}
  .fgrid input,.fgrid select,.fgrid textarea{width:100%;background:rgba(255,255,255,.045);
    border:1px solid var(--line2);border-radius:10px;padding:12px 13px;font-size:14.5px;
    color:var(--cream);font-family:'Archivo',sans-serif}
  .fgrid textarea{min-height:120px;resize:vertical;line-height:1.55}
  .fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,106,44,.18)}
  .fstatus{grid-column:1/-1;min-height:1.2em;color:var(--accent);font-size:14px}
  .fnote{grid-column:1/-1;color:var(--dim);font-size:13.5px}
  .fnote a{color:var(--accent)}
  .nextcard{border:1px solid var(--line);border-radius:16px;background:var(--navy);overflow:hidden}
  .nextcard .nhead{padding:14px 20px;border-bottom:1px solid var(--line);font-family:'Archivo';
    font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  .nextstep{padding:18px 20px;border-bottom:1px solid var(--line)}
  .nextstep:last-child{border-bottom:0}
  .nextstep .n{font-family:'Archivo';font-weight:800;font-size:11.5px;letter-spacing:.14em;color:var(--dim)}
  .nextstep b{display:block;font-size:16px;margin-top:4px;letter-spacing:-.01em}
  .nextstep p{color:var(--muted);font-size:13.8px;line-height:1.55;margin-top:6px}
  @media(max-width:900px){.formwrap{grid-template-columns:1fr;gap:26px}.fgrid{grid-template-columns:1fr}}

  /* the standalone intro paragraph band */
  .lp-intro{padding:clamp(34px,5vw,54px) 0}
  .lp-intro p{max-width:none;color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.75}
  .lp-intro p b{color:var(--cream);font-weight:600}
  .fgrid .fg .btn{align-self:flex-start}
  .card .capicon{width:36px;height:36px;margin:14px 0 2px;color:var(--accent)}
  .card .capicon svg{width:100%;height:100%}
  .wt{font-family:'Archivo';font-weight:900;font-size:20px;color:var(--copper);letter-spacing:-.02em}
  .wt.top{color:var(--accent)}
  .wt.nil{color:var(--dim)}
  tr.zero td{background:rgba(255,255,255,.02)}
  .tblwrap thead th:first-child{width:26%}
  .tblwrap td:nth-child(2){width:90px}
  /* keep the hero headline clear of the signal ring */
  .hero-art{width:min(40%,500px);right:2%;opacity:.9}
  .hero h1{max-width:14ch}
  @media(max-width:1150px){.hero h1{max-width:16ch}}
  section[id]{scroll-margin-top:12px}

/* ============================================================
   Capability hub: eight cards wired into one node, with data
   flowing along every connector. The wrapper carries the design
   aspect ratio and everything inside is sized in cqw, so the
   diagram scales as a single piece.
   ============================================================ */
  .hub-sec{position:relative;overflow:hidden}
  .hub-sec>.wrap{position:relative;z-index:1}
  .hub-sec::after{content:"";position:absolute;left:50%;bottom:-62%;width:150%;height:96%;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(255,106,44,.17),transparent 62%)}

  .hubwrap{position:relative;container-type:inline-size;margin-top:36px;aspect-ratio:1400/1050}
  .hublines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

  .hublines .base{stroke:rgba(255,106,44,.24);stroke-width:1.6}
  .hublines .dash{stroke:rgba(255,106,44,.5);stroke-width:1.6;stroke-dasharray:1 4;
    animation:hubdash 6s linear infinite;animation-delay:var(--d)}
  .hublines .pkt{stroke:#ffb184;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:5 95;
    filter:drop-shadow(0 0 5px rgba(255,138,70,.95));
    animation:hubpkt 3.4s linear infinite;animation-delay:var(--d)}
  .hublines .chev{stroke:rgba(255,106,44,.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hublines .node{fill:#ff6a2c;filter:drop-shadow(0 0 4px rgba(255,106,44,.8))}
  .hublines .node.end{fill:#ffb184}
  @keyframes hubdash{to{stroke-dashoffset:-40}}
  @keyframes hubpkt{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

  .hubcore{position:absolute;left:50%;top:calc(380*100%/1050);width:calc(168*100%/1400);
    aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 42%,rgba(255,106,44,.28),rgba(10,10,12,.94) 68%);
    border:1px solid rgba(255,106,44,.5);
    box-shadow:0 0 3.5cqw rgba(255,106,44,.3),inset 0 0 1.8cqw rgba(255,106,44,.25)}
  .hubcore svg{width:52%;height:52%;color:var(--accent);
    filter:drop-shadow(0 0 .8cqw rgba(255,106,44,.6))}
  .hubring{position:absolute;inset:-16%;border-radius:50%;border:1px solid rgba(255,106,44,.35);
    animation:hubring 3.6s ease-out infinite}
  @keyframes hubring{0%{transform:scale(.9);opacity:.85}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}

  .hcard{position:absolute;left:calc(var(--x)*100%/1400);top:calc(var(--y)*100%/1050);
    width:calc(490*100%/1400);
    display:grid;grid-template-columns:auto auto 1fr;gap:1.3cqw;align-items:start;
    padding:1.5cqw 1.7cqw;border-radius:1.05cqw;
    background:linear-gradient(180deg,rgba(21,23,27,.94),rgba(12,13,16,.94));
    border:1px solid rgba(255,106,44,.24);
    box-shadow:0 1.6cqw 3.4cqw -1.8cqw rgba(0,0,0,.95);
    transition:border-color .25s ease,transform .25s ease}
  .hcard:hover{border-color:rgba(255,106,44,.6);transform:translateY(-2px)}
  .hnum{font-family:'Archivo';font-weight:900;font-size:2.6cqw;line-height:1;color:var(--accent);
    letter-spacing:-.03em;opacity:.9}
  .hico{width:3.5cqw;height:3.5cqw;border-radius:50%;border:1px solid rgba(255,106,44,.4);
    display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
  .hico svg{width:55%;height:55%}
  .htxt{min-width:0}
  .hlabel{display:block;font-family:'Archivo';font-weight:800;font-size:.98cqw;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent)}
  .hcard h3{font-size:1.85cqw;font-weight:800;line-height:1.14;letter-spacing:-.02em;margin-top:.5cqw;
    color:var(--cream)}
  .hcard p{font-size:1.16cqw;line-height:1.5;color:var(--muted);margin-top:.6cqw}

  /* hovering a card lights its own wire */
  .hubwrap:has(.hc1:hover) .ln1 .pkt,.hubwrap:has(.hc2:hover) .ln2 .pkt,
  .hubwrap:has(.hc3:hover) .ln3 .pkt,.hubwrap:has(.hc4:hover) .ln4 .pkt,
  .hubwrap:has(.hc5:hover) .ln5 .pkt,.hubwrap:has(.hc6:hover) .ln6 .pkt,
  .hubwrap:has(.hc7:hover) .ln7 .pkt,.hubwrap:has(.hc8:hover) .ln8 .pkt{
    animation-duration:1.1s;stroke:#fff0e6}

  @media(prefers-reduced-motion:reduce){
    .hublines .dash,.hublines .pkt,.hubring{animation:none}
    .hublines .pkt{stroke-dashoffset:50}
  }

  /* below the diagram's comfortable width it becomes a plain stack */
  @media(max-width:1000px){
    .hubwrap{aspect-ratio:auto;container-type:normal;display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .hublines,.hubcore{display:none}
    .hcard{position:static;width:auto;padding:18px;border-radius:12px;gap:13px}
    .hnum{font-size:21px}
    .hico{width:34px;height:34px}
    .hlabel{font-size:10.5px}
    .hcard h3{font-size:17px;margin-top:5px}
    .hcard p{font-size:13.5px;margin-top:6px}
    .hub-sec::after{display:none}
  }
  @media(max-width:640px){.hubwrap{grid-template-columns:1fr}}

/* ============================================================
   Brand cursor. The spade, tilted like a pointer, with the
   hotspot on its point. Interactive elements get the lit
   variant so hover still announces itself. Text fields keep
   the I-beam, because a caret is information, not decoration.
   ============================================================ */
  html{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzIDIpIHNjYWxlKDEuNCkgdHJhbnNsYXRlKC02LjkxIC0zLjg2KSByb3RhdGUoLTMyIDEyIDEyKSI+PHBhdGggZD0iTTEyIDIuNGMtLjYgMy45LTUuNiA3LjgtOSAxMS42LTIuNSAzLjEtMS43IDYuOCAyLjcgNi44IDIuMiAwIDQuNC0xLjYgNS42LTMuOS0uMyA0LjUtMS42IDYuOC0zLjYgOC4yaDguNmMtMi0xLjQtMy4zLTMuNy0zLjYtOC4yIDEuMiAyLjMgMy40IDMuOSA1LjYgMy45IDQuNCAwIDUuMi0zLjcgMi43LTYuOEMxNy42IDEwLjIgMTIuNiA2LjMgMTIgMi40WiIgZmlsbD0iI2ZmNmEyYyIgc3Ryb2tlPSIjMGIwYzBlIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48L3N2Zz4=") 3 2,auto}
  a,button,summary,label,select,[role="button"],.btn,.bigbtn,.navcta,.burger,.hcard,details summary{
    cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzIDIpIHNjYWxlKDEuNCkgdHJhbnNsYXRlKC02LjkxIC0zLjg2KSByb3RhdGUoLTMyIDEyIDEyKSI+PHBhdGggZD0iTTEyIDIuNGMtLjYgMy45LTUuNiA3LjgtOSAxMS42LTIuNSAzLjEtMS43IDYuOCAyLjcgNi44IDIuMiAwIDQuNC0xLjYgNS42LTMuOS0uMyA0LjUtMS42IDYuOC0zLjYgOC4yaDguNmMtMi0xLjQtMy4zLTMuNy0zLjYtOC4yIDEuMiAyLjMgMy40IDMuOSA1LjYgMy45IDQuNCAwIDUuMi0zLjcgMi43LTYuOEMxNy42IDEwLjIgMTIuNiA2LjMgMTIgMi40WiIgZmlsbD0iI2ZmZjFlOCIgc3Ryb2tlPSIjZDk0MzBhIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48L3N2Zz4=") 3 2,pointer}
  input,textarea{cursor:text}
  input[type="submit"],input[type="button"],input[type="checkbox"],input[type="radio"]{
    cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzIDIpIHNjYWxlKDEuNCkgdHJhbnNsYXRlKC02LjkxIC0zLjg2KSByb3RhdGUoLTMyIDEyIDEyKSI+PHBhdGggZD0iTTEyIDIuNGMtLjYgMy45LTUuNiA3LjgtOSAxMS42LTIuNSAzLjEtMS43IDYuOCAyLjcgNi44IDIuMiAwIDQuNC0xLjYgNS42LTMuOS0uMyA0LjUtMS42IDYuOC0zLjYgOC4yaDguNmMtMi0xLjQtMy4zLTMuNy0zLjYtOC4yIDEuMiAyLjMgMy40IDMuOSA1LjYgMy45IDQuNCAwIDUuMi0zLjcgMi43LTYuOEMxNy42IDEwLjIgMTIuNiA2LjMgMTIgMi40WiIgZmlsbD0iI2ZmZjFlOCIgc3Ryb2tlPSIjZDk0MzBhIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48L3N2Zz4=") 3 2,pointer}
  @media(hover:none){html,a,button,summary,label,select,.btn,.bigbtn,.navcta,.hcard{cursor:auto}}
  footer .byline a{color:var(--accent);border-bottom:1px solid rgba(255,106,44,.35)}
  footer .byline a:hover{border-bottom-color:var(--accent)}

  /* the uploaded SIGNALSPADE lockup, used whole */
  .brand{gap:0}
  .brand .logo{display:block;width:auto;height:30px;image-rendering:auto}
  @media(max-width:520px){.brand .logo{height:25px}}
  footer .flogo{display:block}
  footer .flogo img{display:block;width:auto;height:34px}
  footer .wrap{align-items:center}

/* ============================================================
   Tertiary: teal-steel. It carries one idea only, "not hot" -
   the return path in the hub, the cold tier, the deliberate
   zero in the ledger, and the reference series in a chart.
   Never on a CTA, never out-weighing the orange in a view.
   ============================================================ */
  /* hub: outbound wires run hub -> card, the return path runs card -> hub */
  .hublines .ln.out .pkt{animation-name:hubpktout}
  .hublines .ln.out .dash{animation-name:hubdashout}
  @keyframes hubpktout{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
  @keyframes hubdashout{to{stroke-dashoffset:40}}

  .hublines .ln.in .base{stroke:rgba(79,163,184,.26)}
  .hublines .ln.in .dash{stroke:rgba(79,163,184,.55)}
  .hublines .ln.in .chev{stroke:rgba(79,163,184,.6)}
  .hublines .ln.in .pkt{stroke:var(--teal-hi);filter:drop-shadow(0 0 5px rgba(79,163,184,.95))}
  .hublines .ln.in .node{fill:var(--teal);filter:drop-shadow(0 0 4px rgba(79,163,184,.8))}
  .hublines .ln.in .node.end{fill:var(--teal-hi)}

  /* the two listening cards read cold at a glance */
  .hc7,.hc8{border-color:rgba(79,163,184,.28)}
  .hc7:hover,.hc8:hover{border-color:rgba(79,163,184,.62)}
  .hc7 .hnum,.hc8 .hnum,.hc7 .hlabel,.hc8 .hlabel{color:var(--teal)}
  .hc7 .hico,.hc8 .hico{border-color:rgba(79,163,184,.45);color:var(--teal)}
  .hubwrap:has(.hc7:hover) .ln7 .pkt,.hubwrap:has(.hc8:hover) .ln8 .pkt{stroke:#eafaff}

  .hubkey{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;justify-content:center}
  .hk{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
  .hk i{width:22px;height:2px;border-radius:2px;flex:0 0 auto}
  .hk.out i{background:linear-gradient(90deg,rgba(255,106,44,.25),#ff6a2c)}
  .hk.in i{background:linear-gradient(90deg,#4fa3b8,rgba(79,163,184,.25))}

  /* the ledger's deliberate zero, and the tier key beneath it */
  .wt.nil{color:var(--teal)}
  tr.zero td:first-child{color:var(--teal)}
  .tierkey{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
  .tierkey span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);
    border-radius:999px;padding:6px 13px;font-family:'Archivo';font-weight:700;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .tierkey i{width:9px;height:9px;border-radius:2px}
  .tierkey .hot{border-color:rgba(255,106,44,.45);color:var(--accent)}.tierkey .hot i{background:var(--accent)}
  .tierkey .warm i{background:var(--amber)}
  .tierkey .cold{border-color:rgba(79,163,184,.45);color:var(--teal)}.tierkey .cold i{background:var(--teal)}

  /* chart reference series on the light band */
  .ch-ref{stroke:#2c7185}
  .ch-legend{display:flex;gap:16px;margin-top:9px;font:500 11.5px 'Archivo',sans-serif;color:#625b54}
  .ch-legend i{width:14px;height:2.5px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}

  @media(max-width:1000px){.hubkey{display:none}}

/* ============================================================
   "The sales team you don't have to hire": a five-stage
   pipeline running through the spade, annotations hanging off
   it, the pull quote, and the handoff bar.
   ============================================================ */
  .team-sec{position:relative;overflow:hidden;padding:clamp(60px,8vw,104px) 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
  .team-sec::before{content:"";position:absolute;left:50%;top:46%;width:min(900px,92%);height:620px;
    transform:translate(-50%,-50%);pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%,rgba(255,106,44,.16),transparent 66%)}
  .team-sec>.wrap{position:relative;z-index:1}

  .eyebrow-ul{font-family:'Archivo';font-weight:800;font-size:12.5px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent)}
  .eyebrow-ul::after{content:"";display:block;width:46px;height:3px;border-radius:2px;
    background:var(--accent);margin-top:10px}
  .team-h2{font-family:'Archivo';font-weight:900;font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.04;
    letter-spacing:-.035em;color:var(--cream);margin-top:22px}
  .team-sub{color:var(--muted);font-size:clamp(15px,1.8vw,17.5px);line-height:1.6;max-width:56ch;margin-top:18px}

  /* the pipeline */
  .pipe{--pn:86px;--ph:210px;display:flex;align-items:flex-start;justify-content:center;
    gap:0;margin-top:clamp(34px,5vw,58px)}
  .pnode{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;position:relative}
  .pico{position:relative;width:var(--pn);height:var(--pn);border-radius:50%;display:grid;place-items:center;
    border:1px solid rgba(255,106,44,.45);color:var(--accent);background:rgba(255,106,44,.04);
    box-shadow:inset 0 0 22px rgba(255,106,44,.08)}
  .pico svg{width:42%;height:42%}
  .pbadge{position:absolute;top:-4px;right:-4px;width:26px;height:26px;border-radius:50%;
    background:var(--accent);color:#1a0a03;font-family:'Archivo';font-weight:800;font-size:13px;
    display:grid;place-items:center;box-shadow:0 0 12px rgba(255,106,44,.6)}
  .plab{margin-top:15px;font-family:'Archivo';font-weight:800;font-size:12.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--cream);white-space:nowrap}

  .pwire{position:relative;flex:1 1 auto;min-width:40px;height:2px;margin-top:calc(var(--ph)/2 - 1px);
    background:linear-gradient(90deg,rgba(255,106,44,.14),rgba(255,106,44,.5),rgba(255,106,44,.14))}
  .pwire::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
    border-top:2px solid rgba(255,106,44,.75);border-right:2px solid rgba(255,106,44,.75);
    transform:translate(-50%,-50%) rotate(45deg)}
  .pwire::after{content:"";position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;
    background:#ffb184;box-shadow:0 0 9px rgba(255,138,70,.95);transform:translateY(-50%);
    animation:pipeflow 2.8s linear infinite;animation-delay:var(--d)}
  @keyframes pipeflow{0%{left:-6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

  .pnode:not(.phub){margin-top:calc((var(--ph) - var(--pn))/2)}
  .phub{width:var(--ph);height:var(--ph);margin:0 -14px;
    display:grid;place-items:center;position:relative}
  .phub img{width:74%;height:auto;position:relative;z-index:2;
    filter:drop-shadow(0 0 26px rgba(255,106,44,.55))}
  .hubrings{position:absolute;inset:0;display:block}
  .hubrings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
    border:1px solid rgba(255,106,44,.16)}
  .hubrings i:nth-child(1){width:64%;height:64%;border-color:rgba(255,106,44,.26)}
  .hubrings i:nth-child(2){width:86%;height:86%}
  .hubrings i:nth-child(3){width:106%;height:106%;border-style:dashed;border-color:rgba(255,106,44,.14);
    animation:hubspin 46s linear infinite}
  @keyframes hubspin{to{transform:translate(-50%,-50%) rotate(360deg)}}

  /* annotations */
  .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px;align-items:start}
  .note{display:flex;flex-direction:column}
  .note .lead{height:58px;width:auto;display:block}
  .note b{font-family:'Archivo';font-weight:700;font-size:15px;color:var(--accent);margin-top:6px}
  .note span{color:#d8d2cb;font-size:14.5px;line-height:1.5;max-width:30ch;margin-top:3px}
  .n-left{align-items:flex-start;padding-left:22px}
  .n-mid{align-items:center;text-align:center}
  .n-mid span{max-width:26ch}
  .n-right{align-items:flex-end;text-align:right;padding-right:22px}
  .n-right span{margin-left:auto}

  /* pull quote */
  .pullq{position:relative;margin:clamp(46px,6vw,70px) auto 0;max-width:760px;padding:26px 46px;text-align:center}
  .pullq::before,.pullq::after{content:"";position:absolute;top:0;width:26px;height:100%;
    border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
  .pullq::before{left:0;border-left:1px solid rgba(255,255,255,.2)}
  .pullq::after{right:0;border-right:1px solid rgba(255,255,255,.2)}
  .pullq blockquote{font-family:'Newsreader',Georgia,serif;font-weight:400;
    font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.26;color:var(--cream);letter-spacing:-.01em}
  .pullq blockquote::before{content:"\201C";display:block;font-family:'Newsreader',Georgia,serif;
    font-size:clamp(2.6rem,5vw,3.8rem);line-height:.5;color:var(--accent);margin-bottom:.28em}

  /* the handoff */
  .handoff{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(34px,4.5vw,52px);
    border:1px solid rgba(255,106,44,.3);border-radius:14px;overflow:hidden;
    background:linear-gradient(90deg,rgba(30,20,14,.92),rgba(11,11,13,.92))}
  .ho{display:flex;align-items:center;gap:18px;padding:22px 26px}
  .ho-you{border-left:1px solid rgba(255,106,44,.25);justify-content:flex-end;text-align:right}
  .ho-mark{width:52px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 14px rgba(255,106,44,.45))}
  .ho-txt{display:flex;flex-direction:column;min-width:0}
  .ho-txt b{font-family:'Archivo';font-weight:800;font-size:clamp(19px,2.4vw,26px);letter-spacing:.06em;
    color:var(--cream);line-height:1.1}
  .ho-txt>span{color:var(--muted);font-size:14px;margin-top:5px}
  .ho-person{width:44px;height:44px;color:var(--muted);flex:0 0 auto}
  .ho-person svg{width:100%;height:100%}
  .ho-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:26px;
    z-index:2;pointer-events:none}
  .ho-arrow svg{width:100%;height:100%;overflow:visible}
  .ho-arrow .shaft{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:7 7;
    animation:hoflow 1.4s linear infinite;filter:drop-shadow(0 0 6px rgba(255,106,44,.8))}
  .ho-arrow .head{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 8px rgba(255,106,44,.9))}
  @keyframes hoflow{to{stroke-dashoffset:-14}}
  .handoff-line{text-align:center;margin-top:18px;font-family:'Archivo';font-weight:700;font-size:15.5px;
    color:var(--accent)}

  @media(prefers-reduced-motion:reduce){
    .pwire::after,.hubrings i:nth-child(3),.ho-arrow .shaft{animation:none}
    .pwire::after{left:50%}
  }

  @media(max-width:1040px){.pipe{--pn:72px;--ph:172px}.plab{font-size:11px;letter-spacing:.14em}}
  @media(max-width:860px){
    .pipe{flex-direction:column;align-items:center;--pn:66px;--ph:132px}
    .pnode{flex-direction:row;gap:16px;width:min(320px,100%)}
    .plab{margin-top:0;font-size:12.5px}
    .pwire{width:2px;height:30px;min-width:0;flex:none;margin:0;
      background:linear-gradient(180deg,rgba(255,106,44,.14),rgba(255,106,44,.5),rgba(255,106,44,.14))}
    .pwire::before{transform:translate(-50%,-50%) rotate(135deg)}
    .pwire::after{animation-name:pipeflowv;left:50%;top:0;transform:translateX(-50%)}
    @keyframes pipeflowv{0%{top:-6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
    .pnode:not(.phub){margin-top:0}
    .phub{margin:0}
    .notes{grid-template-columns:1fr;gap:22px;margin-top:26px}
    .note{align-items:center;text-align:center;padding:0}
    .note .lead{display:none}
    .note span{max-width:36ch}
    .n-right span{margin-left:0}
    .handoff{grid-template-columns:1fr}
    .ho-you{border-left:0;border-top:1px solid rgba(255,106,44,.25);justify-content:flex-start;text-align:left;
      flex-direction:row-reverse}
    .ho-arrow{transform:translate(-50%,-50%) rotate(90deg);width:96px}
    .pullq{padding:22px 26px}
  }
  html.anim :is(.pnode,.note,.pullq,.handoff){opacity:0;transform:translateY(38px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  html.anim :is(.pnode,.note,.pullq,.handoff).is-in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    html.anim :is(.pnode,.note,.pullq,.handoff){opacity:1!important;transform:none!important;transition:none}}
  /* honeypot: off-screen for bots, invisible and unreachable for people */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}