/* sales4sales.ca — shared stylesheet.
   Self-hosted faces: first-party requests only, no CDN, nothing a corporate
   filter can strip independently of the site itself. */
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-600.woff2') format('woff2');font-weight:600;font-display:swap;}

:root{
  /* paper, not cream — cream + a serif is a named AI-default look */
  --bg:#EDEFF3;
  --bg-2:#FFFFFF;
  --bg-3:#E5E9F0;
  --line:#CDD4DF;
  --line-2:#B6BFCE;
  --ink:#12141A;
  --ink-2:#4B5364;
  --ink-3:#5C6373;          /* darkened for paper: #79808F only reached 3.26:1 */
  /* red is the signal colour: actions, and whatever is moving */
  --red:#e8353c;
  --red-soft:rgba(232,53,60,0.12);
  --red-ink:#B02128;        /* RED AS TEXT on paper. #e8353c is only 3.64:1 and fails AA. */
  --red-btn:#D22A31;        /* RED AS FILL behind white text, darkened to clear 4.5:1. */
  /* these three are darkened for legibility on paper; inside .band the original
     bright values are restored, because that is where the diagrams live */
  --gold:#7A5608;
  --gold-soft:rgba(240,180,41,0.18);
  --green:#12603E;        /* darkened for paper: #1B7F53 was 3.86:1 on the green tint */
  --green-soft:rgba(63,190,134,0.16);
  --blue:#2C58C0;
  --blue-soft:rgba(91,141,238,0.14);
  --instrument:#0E1018;
  --lit:#D7DEE9; --lit-2:#8A93A6;
  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --wrap:1340px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink);
  font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 560px at 80% -10%, rgba(232,53,60,.060), transparent 62%),
    radial-gradient(900px 520px at 6% 2%,  rgba(255,255,255,.85),  transparent 58%),
    linear-gradient(rgba(18,20,26,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,20,26,.042) 1px, transparent 1px),
    linear-gradient(rgba(18,20,26,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,20,26,.022) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-attachment:fixed, fixed, scroll, scroll, scroll, scroll;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
section{padding:clamp(56px,7vw,96px) 0;}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; line-height:1.05;
  text-wrap:balance; letter-spacing:-0.015em; color:var(--ink);}
h1 em,h2 em,h3 em{font-style:italic; color:var(--ink-2);}
p{margin:0;}
a{color:inherit;}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
.eyebrow{
  font:700 13px/1 var(--sans); letter-spacing:0.15em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:16px;
}
.lede{font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--ink-2); max-width:60ch;}

header{
  position:sticky; top:0; z-index:50; background:rgba(237,239,243,0.90);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px;}
.brand{display:flex; align-items:center; gap:2px; font:700 19px/1 var(--sans); text-decoration:none;}
.brand .four{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  background:var(--red-btn); color:#fff; border-radius:6px; margin:0 3px; font:700 15px/1 var(--mono);
}
.nav-links{display:flex; gap:30px; align-items:center; font-size:15px; font-weight:600;}
.nav-links a{text-decoration:none; color:var(--ink-2);}
.nav-links a:hover{color:var(--red-ink);}
.nav-links a.here{color:var(--ink);}
.btn{
  display:inline-block; background:var(--red-btn); color:#fff; text-decoration:none;
  padding:13px 22px; border-radius:8px; font:700 15px/1 var(--sans);
}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-2);}
.btn.lg{padding:16px 30px; font-size:16px;}
@media(max-width:820px){ .nav-links{display:none;} }

.textlink{
  display:inline-block; margin-top:24px; font:700 15.5px/1 var(--sans);
  color:var(--red-ink); text-decoration:none; border-bottom:1.5px solid transparent;
}
.textlink:hover{border-bottom-color:var(--red-ink);}

.hero{padding-top:clamp(52px,6vw,80px); padding-bottom:clamp(48px,6vw,72px);}
.hero h1{font-size:clamp(38px,5.6vw,62px); font-weight:400; max-width:19ch;}
.hero h1 em{font-style:italic; color:var(--ink-2);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,5vw,64px); align-items:center;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-note{margin-top:22px; font-size:14px; color:var(--ink-3);}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

.glance{background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:26px;}
.glance-title{font:700 12px/1 var(--sans); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px;}
.grow{display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-top:1px solid var(--line);}
.grow:first-of-type{border-top:none; padding-top:0;}
.gicon{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font:700 14px/1 var(--mono);
}
.gicon.a{background:var(--red-soft); color:var(--red-ink);}
.gicon.b{background:var(--green-soft); color:var(--green);}
.grow b{display:block; font-size:16px; margin-bottom:4px; color:var(--ink);}
.grow span{font-size:14.5px; color:var(--ink-2); line-height:1.5;}

.strip{background:var(--bg-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
.strip-in{display:flex; gap:clamp(20px,5vw,60px); flex-wrap:wrap; align-items:baseline; justify-content:center; text-align:center;}
/* share the row rather than breaking on max-content width, so a strip with longer
   copy still reads as three across instead of orphaning the third item */
.strip-in > div{flex:1 1 240px; min-width:0;}
/* below three-across, stack fully rather than leaving an orphaned third item */
@media(max-width:860px){ .strip-in > div{flex:1 1 100%;} }
.strip b{font:700 15px/1.4 var(--sans); color:var(--ink);}
.strip span{font-size:14.5px; color:var(--ink-3);}

.prod{border-top:1px solid var(--line);}
.prod-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,5vw,72px); align-items:center;}
@media(max-width:900px){ .prod-grid{grid-template-columns:1fr;} }
.prod h2{font-size:clamp(28px,3.6vw,40px); font-weight:400;}
.tag{
  display:inline-block; font:700 11.5px/1 var(--sans); letter-spacing:0.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:99px; margin-bottom:16px;
}
.tag.live{background:var(--green-soft); color:var(--green);}
.tag.svc{background:var(--red-soft); color:var(--red-ink);}
.feat{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px;}
.feat li{position:relative; padding-left:28px; font-size:16px; color:var(--ink-2); line-height:1.5;}
.feat li::before{content:""; position:absolute; left:0; top:8px; width:12px; height:12px; border-radius:3px; background:var(--red);}
.ui{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.ui-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--bg-3); border-bottom:1px solid var(--line);}
.dot{width:9px; height:9px; border-radius:50%; background:var(--line-2);}
.ui-url{margin-left:8px; font:500 12px/1 var(--mono); color:var(--ink-3);}
.ui-body{padding:20px;}
.qrow{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px;}
.qrow:last-child{margin-bottom:0;}
.qtop{display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; gap:10px;}
.qname{font:700 14.5px/1.3 var(--sans); color:var(--ink);}
.qpill{flex-shrink:0; font:700 10.5px/1 var(--sans); letter-spacing:0.06em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:var(--gold-soft); color:var(--gold);}
.qpill.ok{background:var(--green-soft); color:var(--green);}
.qtext{font-size:13.5px; color:var(--ink-2); line-height:1.5;}
.qmeta{font:500 11.5px/1 var(--mono); color:var(--ink-3); margin-top:9px;}

.svc-wrap{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px;}
@media(max-width:860px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:var(--bg); border:1px solid var(--line); border-radius:13px; padding:24px;}
.svc-card h3{font-size:19px; font-weight:400; margin-bottom:9px;}
.svc-card p{font-size:15px; color:var(--ink-2); line-height:1.55;}

.example{margin-top:44px; padding-top:40px; border-top:1px solid var(--line);}
.example h3{font-size:clamp(22px,2.6vw,28px); font-weight:400;}
.example-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:start;}
@media(max-width:900px){ .example-head{grid-template-columns:1fr;} }

/* ── the week that books itself ─────────────────────────────────────────── */
.cal{margin-top:34px;}
.cal-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
@media(max-width:820px){ .cal-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .cal-grid{grid-template-columns:1fr;} }
.cal-col{display:flex; flex-direction:column; gap:8px; min-width:0;}
.cal-day{
  font:700 12px/1 var(--sans); letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.blk{border-radius:9px; padding:10px 11px; border:1px solid var(--line); background:var(--bg);}
.blk time{display:block; font:600 10.5px/1 var(--mono); color:var(--ink-3); margin-bottom:5px;}
.blk b{display:block; font:700 13.5px/1.25 var(--sans); color:var(--ink-2);}
.blk span{display:block; font-size:12px; line-height:1.35; color:var(--ink-3); margin-top:3px;}
.blk.booked{border-color:var(--red-ink); background:var(--red-soft);}
.blk.booked b{color:var(--ink);}
.blk.booked span{color:var(--red-ink);}
.blk.digest{border-color:var(--gold); background:var(--gold-soft);}
.blk.digest b{color:var(--ink);}
.blk.digest span{color:var(--gold);}
.cal-key{display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; font-size:13.5px; color:var(--ink-3);}
.cal-key i{
  display:inline-block; width:13px; height:13px; border-radius:4px; margin-right:8px;
  vertical-align:-2px; border:1px solid var(--line); background:var(--bg);
}
.cal-key i.booked{border-color:var(--red); background:var(--red-soft);}
.cal-key i.digest{border-color:var(--gold); background:var(--gold-soft);}

.blkdetail{
  margin-top:26px; background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,3vw,28px);
}
.blkdetail-title{font:700 12px/1 var(--sans); letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px;}
.dgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px 24px;}
@media(max-width:760px){ .dgrid{grid-template-columns:repeat(2,1fr);} }
.dgrid div span{display:block; font:700 11px/1 var(--sans); letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); margin-bottom:7px;}
.dgrid div b{font:700 15.5px/1.3 var(--sans); color:var(--ink); word-break:break-word;}
.signal{
  margin-top:24px; border:1px solid var(--red); background:var(--red-soft);
  border-radius:11px; padding:16px 18px;
}
.signal span{display:block; font:700 11px/1 var(--sans); letter-spacing:0.09em; text-transform:uppercase; color:var(--red-ink); margin-bottom:8px;}
.signal p{font-size:16px; line-height:1.5; color:var(--ink);}

/* ── the eight-touch sequence ───────────────────────────────────────────── */
.seq{margin-top:34px;}
.seq-row{
  display:grid; grid-template-columns:74px 96px 1fr; gap:18px; align-items:center;
  padding:14px 18px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-2); margin-bottom:8px;
}
.seq-row:last-child{margin-bottom:0;}
@media(max-width:640px){
  .seq-row{grid-template-columns:64px 1fr; gap:10px 14px;}
  .seq-row .chan{grid-column:2;}
  .seq-row .seq-body{grid-column:1 / -1;}
}
.seq-row .tno{font:700 13px/1.3 var(--mono); color:var(--ink-3);}
.seq-row .tno b{display:block; font:700 15px/1.2 var(--sans); color:var(--ink);}
.chan{
  display:inline-block; text-align:center; font:700 11px/1 var(--sans); letter-spacing:0.07em;
  text-transform:uppercase; padding:7px 0; border-radius:99px; width:100%;
}
.chan.email{background:var(--red-soft); color:var(--red-ink);}
.chan.li{background:var(--blue-soft); color:var(--blue);}
.chan.call{background:var(--green-soft); color:var(--green);}
.seq-body b{display:block; font:600 15px/1.35 var(--sans); color:var(--ink);}
.seq-body span{display:block; font-size:13.5px; color:var(--ink-3); margin-top:4px;}
.seq-note{margin-top:22px; font-size:14.5px; color:var(--ink-3);}

/* ── volume and deliverability ──────────────────────────────────────────── */
.vol{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:start; margin-top:38px;}
@media(max-width:900px){ .vol{grid-template-columns:1fr;} }
.vtable{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-2);}
.vhead, .vrow{display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:14px; align-items:center; padding:13px 18px;}
.vhead{
  background:var(--bg-3); border-bottom:1px solid var(--line);
  font:700 10.5px/1.3 var(--sans); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.vrow{border-bottom:1px solid var(--line);}
.vrow:last-child{border-bottom:none;}
.vrow.rec{background:var(--green-soft);}
.vrow .n{font:700 19px/1 var(--mono); color:var(--ink-2);}
.vrow.rec .n{color:var(--ink);}
.vrow .n small{display:block; font:600 10.5px/1.2 var(--sans); color:var(--green); margin-top:5px; letter-spacing:0.04em;}
.vrow .out{font:700 19px/1 var(--mono); color:var(--ink);}
.vrow .out.over{color:var(--red);}
.bar{height:9px; border-radius:99px; background:var(--line); overflow:hidden;}
.bar i{display:block; height:100%; border-radius:99px; background:var(--ink-3);}
.vrow.rec .bar i{background:var(--green);}
.bar i.over{background:var(--red);}
.ceiling{
  margin-top:18px; font:700 12px/1.4 var(--mono); color:var(--red-ink);
  letter-spacing:0.06em; text-transform:uppercase;
}
.callout{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:14px;
  padding:clamp(20px,3vw,26px); margin-bottom:18px;
}
.callout:last-child{margin-bottom:0;}
.callout h3{font-size:18.5px; font-weight:400; margin-bottom:10px;}
.callout p{font-size:15.5px; line-height:1.6; color:var(--ink-2);}
.callout p + p{margin-top:12px;}
.callout strong{color:var(--ink);}

/* ── implementation ────────────────────────────────────────────────────── */
.impl{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:36px;}
@media(max-width:820px){ .impl{grid-template-columns:1fr;} }
.impl-item{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:11px;
}
.fnum{
  flex-shrink:0; width:26px; height:26px; border-radius:7px;
  background:var(--red-btn); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 var(--mono);
}
.impl-item .fnum{margin-top:2px; color:#fff;}   /* .impl-item span (0,1,1) outranks
   .fnum (0,1,0), so the numeral inherited body ink. Harmless on the dark site where
   that ink was light; on paper it became dark-on-red at 1.51:1. */
.impl-item b{display:block; font:700 15.5px/1.3 var(--sans); color:var(--ink); margin-bottom:5px;}
.impl-item span{display:block; font-size:14px; line-height:1.5; color:var(--ink-2);}
.need{
  margin-top:32px; border:1px solid var(--gold); background:var(--gold-soft);
  border-radius:14px; padding:clamp(20px,3vw,28px);
}
.need h3{font-size:19px; font-weight:400; margin-bottom:6px;}
.need > p{font:700 13px/1.4 var(--sans); letter-spacing:0.05em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.need ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px;}
@media(max-width:760px){ .need ul{grid-template-columns:1fr;} }
.need li{position:relative; padding-left:24px; font-size:15.5px; line-height:1.5; color:var(--ink-2);}
.need li::before{
  content:""; position:absolute; left:0; top:8px; width:10px; height:10px;
  border-radius:3px; background:var(--gold);
}

.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center;}
@media(max-width:900px){ .why-grid{grid-template-columns:1fr;} }
.pull{
  border-left:4px solid var(--red); padding:6px 0 6px 24px;
  font:700 clamp(22px,2.8vw,30px)/1.35 var(--sans); color:var(--ink); text-wrap:balance;
}
.why-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:20px;}
.why-list li{border-top:1px solid var(--line); padding-top:20px;}
.why-list li:first-child{border-top:none; padding-top:0;}
.why-list b{display:block; font-size:17px; margin-bottom:5px; color:var(--ink);}
.why-list span{font-size:15.5px; color:var(--ink-2); line-height:1.55;}

.cta{background:var(--bg-3); text-align:center; border-top:1px solid var(--line);}
.cta h2{font-size:clamp(28px,4vw,44px); font-weight:400; max-width:20ch; margin:0 auto;}
.cta p{color:var(--ink-2); margin-top:18px; font-size:18px;}
.cta .btn{margin-top:30px;}

/* contact form */
.form-card{
  max-width:620px; margin:36px auto 0; text-align:left;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:clamp(24px,4vw,36px);
}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:640px){ .frow{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font:700 13.5px/1 var(--sans); color:var(--ink-2); letter-spacing:0.01em;}
.field label .opt{font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:0;}
.field input, .field textarea{
  width:100%; background:var(--bg); border:1.5px solid var(--line); border-radius:9px;
  padding:13px 14px; color:var(--ink); font:400 16px/1.4 var(--sans);
}
.field textarea{resize:vertical; min-height:110px;}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--red);}
.field input:user-invalid{border-color:var(--red);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cf-turnstile{margin:4px 0 18px; min-height:65px;}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px;}
.form-card button[type=submit]{
  background:var(--red-btn); color:#fff; border:none; cursor:pointer;
  padding:16px 30px; border-radius:8px; font:700 16px/1 var(--sans);
}
.form-card button[type=submit]:disabled{opacity:0.55; cursor:default;}
.form-note{font-size:13.5px; color:var(--ink-3);}
.form-msg{margin-top:18px; font-size:15.5px; line-height:1.5; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{color:var(--green);}
.form-msg.err{color:var(--red);}
.sent-panel{display:none; text-align:center; padding:14px 0;}
.sent-panel.show{display:block;}
.sent-panel h3{font-size:24px; font-weight:400; margin-bottom:12px;}
.sent-panel p{color:var(--ink-2); font-size:16px;}

footer{padding:44px 0; font-size:14.5px; color:var(--ink-3); border-top:1px solid var(--line);}
.foot-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;}
footer a{text-decoration:none;}
footer a:hover{color:var(--red);}

/* ══ Customer Cadence — the cycle diagram ═══════════════════════════════ */
.cad{max-width:940px;}
.cad-row{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch;}
.cad-stage{
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  padding:20px; display:flex; flex-direction:column; gap:9px; min-width:0;
}
.cad-top{display:flex; align-items:center; gap:11px; flex-wrap:wrap;}
.cad-stage b{font:700 16.5px/1.25 var(--sans); color:var(--ink);}
.cad-stage p{font-size:14.5px; line-height:1.55; color:var(--ink-2);}
.cad-runs{
  font:700 10.5px/1 var(--sans); letter-spacing:0.07em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line-2); border-radius:99px; padding:5px 9px;
}
.cad-hop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:0 2px;}
.cad-when{
  font:700 10.5px/1.3 var(--sans); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red-ink); text-align:center; white-space:nowrap;
}
.cad-glyph{font:400 26px/1 var(--sans); color:var(--red);}
.cad-ret{
  position:relative; height:62px; margin:0 46px;
  border:3px solid rgba(232,53,60,0.85); border-top:none; border-radius:0 0 20px 20px;
}
.cad-ret::before{
  content:""; position:absolute; left:-8.5px; top:-12px;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:13px solid rgba(232,53,60,0.85);
}
.cad-ret .cad-when{
  position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  background:var(--bg); padding:3px 14px; font-size:11px; white-space:nowrap;
}
.cad-note{margin-top:22px; font-size:14.5px; line-height:1.55; color:var(--ink-3); max-width:62ch;}
@media(max-width:820px){
  .cad-row{grid-template-columns:1fr; gap:10px;}
  .cad-hop{flex-direction:row; gap:11px; padding:2px 0;}
  .cad-glyph{transform:rotate(90deg); font-size:22px;}
  .cad-ret{
    height:auto; margin:12px 0 0; border:1px solid rgba(232,53,60,0.6);
    border-radius:12px; padding:14px 18px; display:flex; justify-content:center;
  }
  .cad-ret::before{display:none;}
  .cad-ret .cad-when{position:static; transform:none; background:none; padding:0; white-space:normal;}
  .cad-ret .cad-when::before{content:"\21BA  ";}
}

/* ══ Account Intelligence — the grading chart ═══════════════════════════ */
.ai-chart{max-width:900px;}
.ai-intro{font-size:16px; line-height:1.6; color:var(--ink-2); max-width:64ch; margin-bottom:26px;}
.ai-intro b{color:var(--ink); font-weight:700;}
.ai-head{
  display:grid; grid-template-columns:104px 1fr 190px; gap:22px; align-items:end;
  padding:0 4px 11px; border-bottom:1px solid var(--line);
  font:700 10.5px/1.3 var(--sans); letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-3);
}
.ai-head span:last-child{text-align:right;}
.ai-row{display:grid; grid-template-columns:104px 1fr 190px; gap:22px; align-items:center; padding:15px 4px;}
.ai-stars{font:400 15px/1 var(--sans); letter-spacing:2.5px; white-space:nowrap; color:var(--red-ink);}
.ai-trig{font-size:15px; line-height:1.45; color:var(--ink);}
.ai-bar{height:16px; background:rgba(255,255,255,0.045); border-radius:4px; overflow:hidden;}
.ai-bar i{display:block; height:100%; border-radius:4px; background:var(--red);}
.ai-row.drop .ai-stars, .ai-row.drop .ai-trig{color:var(--ink-3);}
.ai-row.drop .ai-bar i{background:var(--line-2);}
.ai-cut{
  display:flex; align-items:center; gap:16px; margin:6px 0; padding:11px 4px;
  border-top:2px dashed rgba(232,53,60,0.6); border-bottom:1px solid var(--line);
}
.ai-cut b{font:700 11px/1 var(--sans); letter-spacing:0.09em; text-transform:uppercase; color:var(--red-ink); white-space:nowrap;}
.ai-cut span{font-size:14px; color:var(--ink-3); line-height:1.4;}
.ai-note{margin-top:20px; font-size:14.5px; line-height:1.6; color:var(--ink-3); max-width:66ch;}
@media(max-width:760px){
  .ai-head{display:none;}
  .ai-row{grid-template-columns:1fr; gap:8px; padding:14px 2px; border-bottom:1px solid var(--line);}
  .ai-cut{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* ══ shared: the outcome callout used by both new sections ═════════════ */
.outcome{
  margin-top:44px; border:1px solid var(--gold); background:var(--gold-soft);
  border-radius:14px; padding:clamp(22px,3vw,30px);
}
.outcome > span{
  display:block; font:700 12px/1 var(--sans); letter-spacing:0.11em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.outcome p{font-size:clamp(19px,2.2vw,23px); line-height:1.4; color:var(--ink); font-weight:700; text-wrap:balance;}
.outcome p em{font-style:normal; color:var(--gold);}

/* two more numerals for the hero "what I build" list */
.gicon.c{background:var(--gold-soft); color:var(--gold);}
.gicon.d{background:var(--blue-soft); color:var(--blue);}

/* ══ Auto QBR — the quarter timeline ═══════════════════════════════════ */
.qbr-tl{position:relative; margin-top:44px; padding-top:8px;}
.qbr-nodes{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; position:relative;}
.qbr-nodes::before{
  content:""; position:absolute; left:8%; right:8%; top:31px; height:3px; border-radius:99px;
  background:linear-gradient(90deg, var(--line-2) 0%, var(--red) 62%, var(--gold) 100%);
}
.qbr-node{display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; position:relative; min-width:0;}
.qbr-when{
  font:700 11px/1.2 var(--mono); letter-spacing:0.04em; color:var(--red);
  min-height:26px; display:flex; align-items:center;
}
.qbr-dot{
  width:15px; height:15px; border-radius:50%; background:var(--red);
  border:3px solid var(--bg); box-shadow:0 0 0 2px var(--red); flex-shrink:0;
}
.qbr-node.end .qbr-when{color:var(--gold);}
.qbr-node.end .qbr-dot{background:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.qbr-body{display:flex; flex-direction:column; gap:5px;}
.qbr-node b{font:700 14.5px/1.3 var(--sans); color:var(--ink); margin-top:5px;}
.qbr-node span{font-size:13px; line-height:1.5; color:var(--ink-2);}
@media(max-width:820px){
  .qbr-nodes{grid-template-columns:1fr; gap:0;}
  .qbr-nodes::before{left:7px; right:auto; top:34px; bottom:34px; width:3px; height:auto;}
  .qbr-node{flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:14px 0;}
  .qbr-node .qbr-dot{margin-top:6px; order:1;}
  .qbr-node .qbr-when{order:2; min-height:0; position:absolute; left:34px; top:14px;}
  .qbr-node b{order:3; margin-top:20px;}
  .qbr-node span{order:4;}
  .qbr-node > *:not(.qbr-dot){margin-left:0;}
  .qbr-body{display:flex; flex-direction:column; gap:4px;}
}
/* what a review actually contains */
.qbr-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px;}
@media(max-width:900px){ .qbr-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .qbr-grid{grid-template-columns:1fr;} }
.qbr-card{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:20px;}
.qbr-card b{display:block; font:700 15.5px/1.3 var(--sans); color:var(--ink); margin-bottom:7px;}
.qbr-card span{font-size:14px; line-height:1.5; color:var(--ink-2);}
.gicon.e{background:rgba(255,255,255,0.07); color:var(--ink-2);}
.nav-links{gap:24px;}
.glance .grow b a{color:var(--ink);}
.glance .grow b a:hover{color:var(--red);}

/* ══ Customer Cadence — animated cycle stage ═══════════════════════════
   Everything here is scoped under .ccstage and uses cc- prefixed keyframes
   so none of it can leak into the rest of the site (.btn.ghost especially).
   The SVG is desktop-only; below 820px the static .cad row takes over,
   because a 1200-unit viewBox squeezed to phone width is unreadable.      */
.ccstage{
  position:relative; margin-top:34px; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, #12122a 0%, #0a0a16 55%, #06060f 100%);
  border:1px solid var(--line);
}
.ccstage svg{display:block; width:100%; height:auto;}
.ccstage .packet,.ccstage .env1,.ccstage .env2,.ccstage .env3{will-change:transform;}
.ccstage .cond-flow,.ccstage .condb-flow,.ccstage .tmr-prog{will-change:stroke-dashoffset;}
.ccstage .lbl{font-family:var(--sans); fill:var(--ink);}
.ccstage .lbl-title{font-weight:700; font-size:19px;}
.ccstage .lbl-title.sm{font-size:16.5px;}
.ccstage .lbl-sub{font-size:13.5px; fill:var(--ink-2);}
.ccstage .ann{font:700 11px var(--sans); letter-spacing:0.1em;}
.ccstage .ann.red{fill:#ff5a4d;}
.ccstage .ann.blue{fill:#6fd0ff;}
.ccstage .ann.dim{fill:#8fa8d8;}
.ccstage .ann.warm{fill:#ff8a5c;}
.ccstage .tmr-lbl{font:700 13px var(--sans); fill:var(--ink-2);}
.ccstage .tmr-n{font:700 34px var(--mono); fill:#fff;}
.ccstage .tmr-u{font:700 13px var(--sans); letter-spacing:0.16em; fill:#ffb0a8;}
.ccstage .pod-body{fill:url(#podFill); stroke:#5f7ecb; stroke-width:1.2; opacity:0.95;}
.ccstage .pod-glow{fill:none; stroke:#8fb4ff; stroke-width:2; opacity:0.35; filter:url(#soft);}
.ccstage .podnum{fill:var(--red);}
.ccstage .podnum-t{font:700 12px var(--mono); fill:#fff;}
.ccstage .cond-track{fill:none; stroke:url(#plasma); stroke-width:9; stroke-linecap:round; opacity:0.30; filter:url(#glowRed);}
.ccstage .cond-core{fill:none; stroke:#ff7a4a; stroke-width:2.4; stroke-linecap:round; opacity:0.85;}
.ccstage .cond-flow{fill:none; stroke:#ffe0c0; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:26 150; animation:cc-dashflow 3.2s linear infinite;}
.ccstage .packet{offset-path:path("M 452 502 C 316 512, 212 432, 228 308"); offset-rotate:0deg; animation:cc-ride 4.2s linear infinite;}
.ccstage .env1{offset-path:path("M -70 208 C 20 196, 76 208, 152 222"); animation:cc-ride 4.6s linear infinite;}
.ccstage .env2{offset-path:path("M -70 250 C 20 242, 76 244, 152 248"); animation:cc-ride 4.2s linear infinite;}
.ccstage .env3{offset-path:path("M -70 292 C 20 300, 76 288, 152 274"); animation:cc-ride 5.0s linear infinite;}
.ccstage .grid-l{stroke:#3f9bd6; stroke-width:0.9; opacity:0.42;}
.ccstage .swbar{fill:#5fb0e8; opacity:0.35;}
.ccstage .swbar.hit{animation:cc-hit 2.6s linear infinite;}
.ccstage .sweepline{stroke:#7fe3ff; stroke-width:2; opacity:0.9; animation:cc-sweepx 2.6s linear infinite;}
@keyframes cc-hit{ 0%{fill:#5fb0e8; opacity:0.35;} 3%{fill:#ff8a5c; opacity:1;} 15%{fill:#ff8a5c; opacity:1;} 32%{fill:#5fb0e8; opacity:0.35;} 100%{fill:#5fb0e8; opacity:0.35;} }
@keyframes cc-sweepx{ from{transform:translateX(0);} to{transform:translateX(169px);} }
.ccstage .condb-track{fill:none; stroke:url(#plasmaB); stroke-width:9; stroke-linecap:round; opacity:0.26; filter:url(#glowBlue);}
.ccstage .condb-core{fill:none; stroke:#5fc8ff; stroke-width:2.4; stroke-linecap:round; opacity:0.85;}
.ccstage .condb-flow{fill:none; stroke:#dff4ff; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:26 150; animation:cc-dashflow 3.2s linear infinite;}
.ccstage .cal4-day{font:700 10px var(--sans); letter-spacing:0.1em; fill:#8fa8d8;}
.ccstage .cal4-blk{fill:#38507f; opacity:0.75;}
.ccstage .cal4-blk.booked{fill:#ff5a4d; opacity:0.3; animation:cc-book 10.4s ease-in-out infinite;}
.ccstage .cal4-blk.b1{animation-delay:0s;}
.ccstage .cal4-blk.b2{animation-delay:-7.8s;}
.ccstage .cal4-blk.b3{animation-delay:-5.2s;}
.ccstage .cal4-blk.b4{animation-delay:-2.6s;}
@keyframes cc-book{ 0%{opacity:0.25;} 4%{opacity:1;} 16%{opacity:1;} 24%{opacity:0.45;} 100%{opacity:0.25;} }
.ccstage .grid-t{font:700 10px var(--sans); letter-spacing:0.16em; fill:#6fb8e0; opacity:0.75;}
.ccstage .trail{stroke:#6fd0ff; stroke-width:1.6; stroke-linecap:round; opacity:0; animation:cc-rise 2.2s ease-out infinite;}
.ccstage .tmr-ring{fill:none; stroke:#ff5a4d; stroke-width:2.5; opacity:0.9;}
.ccstage .tmr-halo{fill:none; stroke:#ff5a4d; stroke-width:10; opacity:0.18; filter:url(#glowRed); animation:cc-breathe 4s ease-in-out infinite;}
.ccstage .tmr-face{fill:#0f0f22; stroke:#43436e; stroke-width:1;}
.ccstage .tmr-tick{stroke:#6a6a9c; stroke-width:1.6;}
.ccstage .gear{fill:none; stroke:#5a5a8c; stroke-width:1.3; opacity:0.5;}
.ccstage .gear.a{animation:cc-spin 22s linear infinite; transform-origin:600px 98px;}
.ccstage .gear.b{animation:cc-spinrev 16s linear infinite; transform-origin:600px 98px;}
.ccstage .tmr-prog{fill:none; stroke:#ffb37a; stroke-width:4; stroke-linecap:round; opacity:0.95; stroke-dasharray:333; stroke-dashoffset:333; animation:cc-sweep 4s linear infinite; transform-origin:600px 98px; transform:rotate(-90deg);}
.ccstage .wk{opacity:0; animation:cc-wkcycle 4s steps(1) infinite;}
.ccstage .wk.w4{animation-delay:0s;} .ccstage .wk.w3{animation-delay:1s;}
.ccstage .wk.w2{animation-delay:2s;} .ccstage .wk.w1{animation-delay:3s;}
.ccstage .breathe{animation:cc-breathe 4s ease-in-out infinite;}
@keyframes cc-ride{ from{offset-distance:0%;} to{offset-distance:100%;} }
@keyframes cc-dashflow{ to{stroke-dashoffset:-176;} }
@keyframes cc-beamflow{ to{stroke-dashoffset:-22;} }
@keyframes cc-scan{ 0%,100%{transform:translateY(0); opacity:0;} 14%{opacity:0.9;} 86%{opacity:0.9;} 50%{transform:translateY(36px);} }
@keyframes cc-flag{ 0%{opacity:0.25;} 4%{opacity:1;} 15%{opacity:1;} 21%{opacity:0.25;} 100%{opacity:0.25;} }
@keyframes cc-rise{ 0%{opacity:0; transform:translateY(0);} 25%{opacity:0.9;} 100%{opacity:0; transform:translateY(-64px);} }
@keyframes cc-spin{ to{transform:rotate(360deg);} }
@keyframes cc-spinrev{ to{transform:rotate(-360deg);} }
@keyframes cc-sweep{ from{stroke-dashoffset:333;} to{stroke-dashoffset:0;} }
@keyframes cc-wkcycle{ 0%{opacity:1;} 25%{opacity:0;} 100%{opacity:0;} }
@keyframes cc-breathe{ 0%,100%{opacity:0.28;} 50%{opacity:0.62;} }
@keyframes cc-textpulse{ 0%,100%{opacity:0.75;} 50%{opacity:1;} }
@media(prefers-reduced-motion:reduce){
  .ccstage .cond-flow,.ccstage .packet,.ccstage .env1,.ccstage .env2,.ccstage .env3,
  .ccstage .condb-flow,.ccstage .sweepline,.ccstage .swbar.hit,.ccstage .gear,.ccstage .tmr-prog,
  .ccstage .tmr-halo,.ccstage .wk,.ccstage .breathe.,
  .ccstage .cal4-blk.booked{ animation:none !important; }
  .ccstage .wk.w4{opacity:1;}
  .ccstage .packet{offset-distance:40%;}
  .ccstage .env1,.ccstage .env2,.ccstage .env3{offset-distance:55%;}
  .ccstage .acct.h1,.ccstage .acct.h2,.ccstage .acct.h3,  .ccstage .cal4-blk.booked{opacity:1;}
  .ccstage .tmr-prog{stroke-dashoffset:90;}
}
/* the animated stage is desktop-only; the static row is the phone version */
.cad-static{display:none;}
@media(max-width:820px){
  .ccstage{display:none;}
  .cad-static{display:block;}
}

/* ============================================================
   PRODUCT SIGNATURES — one per page, three different grammars.
   .obs-*  Outbound Beast : cohort overlap over 10 days
   .nite-* Account Intel  : assay column, graded strata + hard cut
   .qtr-*  Auto QBR       : dimension drawing, lead time from a pin
   Keyframes namespaced obs-/nt-/qt- (cc-* belongs to Cadence).
   ============================================================ */

.sigwrap{margin-top:36px;}
.sigstage{
  position:relative; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,#141428 0%,#101020 100%); overflow:hidden;
}
.sigstage svg{display:block; width:100%; height:auto;}
.sigcap{
  margin-top:16px; font:500 15px/1.6 var(--sans); color:var(--ink-3); max-width:74ch;
}
.sigcap b{color:var(--ink-2); font-weight:700;}

/* shared diagram type: mono, small, wide-tracked */
.sigstage .lbl{font:700 12px/1 var(--mono); letter-spacing:0.12em; text-transform:uppercase; fill:var(--ink-3);}
.sigstage .lbl-b{font:700 12px/1 var(--mono); letter-spacing:0.12em; text-transform:uppercase; fill:var(--ink-2);}
.sigstage .num{font:700 15px/1 var(--mono); fill:var(--ink);}
.sigstage .ttl{font:700 19px/1 var(--sans); letter-spacing:-0.01em; fill:var(--ink);}
.sigstage .rule{stroke:var(--line); stroke-width:1;}

/* ---------- Outbound Beast : overlap ---------- */
.obs-row{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 5;}
.obs-d{stroke:none;}
.obs-d.em{fill:var(--red);}
.obs-d.li{fill:var(--blue);}
.obs-d.ca{fill:var(--gold);}
.obs-bar{fill:var(--red); opacity:0.85;}
.obs-bar.peak{fill:var(--red); opacity:1;}
.obs-cap{stroke:var(--gold); stroke-width:1.5; stroke-dasharray:6 5;}
.obs-brace{stroke:var(--line-2); stroke-width:1.5; fill:none;}
.obs-enter{opacity:0; animation:obs-in .5s ease-out forwards;}
.obs-grow{transform:scaleY(0); transform-origin:center bottom; animation:obs-up .55s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes obs-in{to{opacity:1;}}
@keyframes obs-up{to{transform:scaleY(1);}}

/* ---------- Account Intelligence : assay column ---------- */
.nite-band{stroke:#101020; stroke-width:1.5;}
.nite-band.keep{fill:var(--gold);}
.nite-band.keep.k2{fill:#d8a326;}
.nite-band.keep.k3{fill:#b88920;}
.nite-band.drop{fill:#2e2e50;}
.nite-band.drop.d2{fill:#262643;}
.nite-cut{stroke:var(--red); stroke-width:2;}
.nite-cutlbl{font:700 12px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; fill:var(--red);}
.nite-lead{stroke:var(--line-2); stroke-width:1;}
.nite-hour{font:700 11px/1 var(--mono); letter-spacing:0.1em; fill:var(--ink-3);}
.nite-card{fill:var(--bg-3); stroke:var(--line-2); stroke-width:1;}
.nite-rise{transform:scaleY(0); transform-origin:center bottom; animation:nt-rise .6s cubic-bezier(.2,.8,.3,1) forwards;}
.nite-fade{opacity:0; animation:nt-fade .5s ease-out forwards;}
@keyframes nt-rise{to{transform:scaleY(1);}}
@keyframes nt-fade{to{opacity:1;}}

/* ---------- Auto QBR : dimension drawing ---------- */
.qtr-base{stroke:var(--line-2); stroke-width:1.5;}
.qtr-tick{stroke:var(--line); stroke-width:1;}
.qtr-pin{stroke:var(--green); stroke-width:2.5;}
.qtr-dim{stroke:var(--blue); stroke-width:1.5; fill:none;}
.qtr-dim.done{stroke:var(--green);}
.qtr-node{fill:var(--bg); stroke:var(--blue); stroke-width:2;}
.qtr-node.done{stroke:var(--green);}
.qtr-mini{fill:none; stroke:var(--line-2); stroke-width:1;}
.qtr-minipin{stroke:var(--green); stroke-width:2;}
.qtr-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:qt-draw .7s ease-out forwards;}
.qtr-pop{opacity:0; animation:qt-pop .4s ease-out forwards;}
@keyframes qt-draw{to{stroke-dashoffset:0;}}
@keyframes qt-pop{to{opacity:1;}}

/* ---------- mobile fallback + motion ---------- */
.sigfall{display:none;}
.sigfall ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.sigfall li{
  display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:start;
  padding:14px 0; border-top:1px solid var(--line);
}
.sigfall .k{font:700 11px/1.3 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--red); padding-top:3px;}
.sigfall .v{font-size:15px; color:var(--ink-2); line-height:1.55;}
.sigfall .v b{color:var(--ink); font-weight:700; display:block; margin-bottom:3px;}
@media(max-width:780px){
  .sigstage{display:none;}
  .sigfall{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .obs-enter,.nite-fade,.qtr-pop{opacity:1; animation:none;}
  .obs-grow,.nite-rise{transform:scaleY(1); animation:none;}
  .qtr-draw{stroke-dashoffset:0; animation:none;}
}


/* ============================================================
   THE INSTRUMENT BAND — full-bleed dark, where every diagram lives.
   Inside it the ORIGINAL dark palette applies: the diagrams were drawn
   against those tokens and --ink means near-white there, near-black on
   paper. Without this they render black on black, silently.
   ============================================================ */
.band{
  color:var(--lit);
  background-color:var(--instrument);
  background-image:
    radial-gradient(900px 420px at 82% 0%, rgba(232,53,60,.10), transparent 58%),
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size:100% 100%, 24px 24px, 24px 24px;
  --ink:#f4f3f8; --ink-2:#b6b4cc; --ink-3:#807ea0;
  --red:#e8353c; --gold:#f0b429; --green:#3fbe86; --blue:#5b8dee;
  --red-soft:rgba(232,53,60,.14); --red-ink:#ff8a8f; --gold-soft:rgba(240,180,41,.13);
  --green-soft:rgba(63,190,134,.13); --blue-soft:rgba(91,141,238,.14);
  --line:#2b2b4d; --line-2:#3a3a60;
  --bg:#101020; --bg-2:#171730; --bg-3:#1e1e3a;
}
.band .eyebrow{color:#fff; opacity:.62;}
.band h2{color:#F4F6FA;}
.band .lede{color:var(--lit-2);}
.band .sigwrap,.band .cad-wrap{margin-top:0;}
.band .sigstage,.band .ccstage{border:0; background:transparent; border-radius:0; margin:0;}
.band .sigstage svg,.band .ccstage svg{max-width:1180px; margin:0 auto;}
.band .sigcap,.band .cad-note{color:var(--lit-2); max-width:78ch;}
.band .sigcap b,.band .cad-note b{color:#E9EDF4;}
.band .sigfall li,.band .cad-static li{border-top-color:#232838;}
.band .sigfall .v,.band .cad-static .v{color:var(--lit-2);}
.band .sigfall .v b{color:#E9EDF4;}
.instr{margin-top:42px; padding-top:34px; border-top:1px solid #232838;}

/* ── the four clocks ─────────────────────────────────────────────────── */
.clocks{display:grid; grid-template-columns:repeat(4,1fr); margin-top:46px; border-top:1px solid #232838;}
.clock{padding:26px 26px 4px; border-right:1px solid #232838;}
.clock:last-child{border-right:0;}
.clock:first-child{padding-left:0;}
.clock h3{font-family:var(--sans); font:600 14px/1.2 var(--sans); color:#EDF0F6;}
.clock .unit{display:block; margin-top:7px; font-family:var(--mono); font-weight:600; font-size:21px; color:var(--lit);}
.clock svg{display:block; width:100%; height:auto; margin:16px 0 6px; overflow:visible;}
.clock p{font-size:13.5px; line-height:1.5; color:var(--lit-2);}
.trk,.dial,.arc{fill:none; stroke:#2B3143; stroke-width:1.6;}
.ctick{stroke:#3A4157; stroke-width:1.3;}
.ccap{font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:.1em; fill:#6D7488;}
.cbar{fill:#202634;}
.cbar.on{fill:var(--red);}
.mark{fill:var(--lit);}
.head{stroke:var(--red); stroke-width:2.4; stroke-linecap:round;}
.headdot{fill:var(--red);}
.hub{fill:var(--instrument); stroke:var(--red); stroke-width:2;}
.cpin{stroke:#FFFFFF; stroke-width:2.2;}
.arcfill{stroke:var(--red); stroke-width:2.8; fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:ck-fill var(--period) linear infinite;}
.hand{transform-origin:120px 66px; animation:ck-spin var(--period) linear infinite;}
.sweep{animation:ck-slide var(--period) linear infinite;}
.qsweep{transform-box:view-box; transform-origin:0 0; animation:ck-widen var(--period) linear infinite;}
.pulse{animation:ck-pulse var(--period) ease-in-out infinite;}
@keyframes ck-slide{from{transform:translateX(0);}to{transform:translateX(196px);}}
@keyframes ck-spin{to{transform:rotate(360deg);}}
@keyframes ck-fill{from{stroke-dashoffset:var(--len);}to{stroke-dashoffset:0;}}
@keyframes ck-widen{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes ck-pulse{0%,72%{opacity:.22;}92%,100%{opacity:1;}}

/* ── product hero: carries that product's own clock ──────────────────── */
.phero{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:56px; align-items:center;}
.pclockcard{background:var(--instrument); border-radius:16px; padding:26px 26px 18px; color:var(--lit);
  --red:#e8353c; --lit:#D7DEE9; --lit-2:#8A93A6;}
.pclockcard h3{font:600 13.5px/1.2 var(--sans); color:#EDF0F6;}
.pclockcard .unit{display:block; margin-top:6px; font-family:var(--mono); font-weight:600; font-size:20px; color:var(--lit);}
.pclockcard svg{display:block; width:100%; height:auto; margin:12px 0 4px; overflow:visible;}
.pclockcard p{font-size:13px; line-height:1.5; color:var(--lit-2);}
.pkicker{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.pkicker .mono{font-family:var(--mono); font-weight:500; letter-spacing:.11em; text-transform:uppercase; font-size:11.5px; color:var(--red);}

/* ── the homepage product grid, labelled by clock rather than numbered ── */
.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:44px;}
.prodcard{background:var(--bg-2); padding:32px 30px 28px; position:relative;}
.prodcard .pclock{font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.14em; color:var(--ink-3);}
.prodcard h3{font-size:32px; margin-top:10px;}
.prodcard p{margin-top:12px; color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:52ch;}
.prodcard .pstatus{position:absolute; top:32px; right:30px; font-family:var(--mono); font-size:10px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:99px;
  background:rgba(120,128,143,.14); color:var(--ink-3);}
.prodcard a{text-decoration:none; border-bottom:1.5px solid var(--red); color:var(--red);}

@media(max-width:1080px){
  .clocks{grid-template-columns:repeat(2,1fr);}
  .clock{border-bottom:1px solid #232838; padding-left:26px;}
  .clock:nth-child(2n){border-right:0;}
  .phero{grid-template-columns:1fr; gap:30px;}
  .prods{grid-template-columns:1fr;}
}
@media(max-width:620px){ .clocks{grid-template-columns:1fr;} .clock{border-right:0;} }
@media(prefers-reduced-motion:reduce){
  .hand,.sweep,.qsweep,.arcfill,.pulse{animation:none;}
  .arcfill{stroke-dashoffset:0;} .qsweep{transform:scaleX(1);}
}


/* status on the homepage list. Green pulses because it means "running right now";
   bespoke is deliberately quiet because it is not a product with a state. */
.grow .gstatus{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:6px;
  font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--green);
}
.grow .gstatus::before{
  content:""; width:8px; height:8px; border-radius:50%;
  /* the LABEL stays dark green so it passes contrast; the DOT is decorative,
     so it can be the bright signal green and carry the "running now" feel */
  background:#25C07C; box-shadow:0 0 0 0 rgba(37,192,124,.7), 0 0 6px rgba(37,192,124,.9);
  animation:live-pulse 2.4s ease-out infinite;
}
.grow .gstatus.bespoke{color:var(--ink-3);}
.grow .gstatus.bespoke::before{background:var(--ink-3); animation:none; box-shadow:none;}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,192,124,.75), 0 0 6px rgba(37,192,124,.9);}
  70%{box-shadow:0 0 0 8px rgba(37,192,124,0), 0 0 10px rgba(37,192,124,.35);}
  100%{box-shadow:0 0 0 0 rgba(37,192,124,0), 0 0 6px rgba(37,192,124,.9);}
}
@media(prefers-reduced-motion:reduce){ .grow .gstatus::before{animation:none;} }