/* ============ TOKENS ============ */
:root{
  --blue:#2574DB; --blue-deep:#1B57A8; --blue-soft:#EAF1FC;
  --navy:#111E48; --amber:#FFA100; --sage:#CEDEBA; --forest:#27431B;

  /* white-based: the page is white, bands are tints, nothing is solid blue */
  --ground:#F8FAFD;
  --surface:#FFFFFF;
  --surface-2:#EFF3FA;
  --deep:#E9F0FA;          /* the emphasis band, formerly solid blue */
  --deep-2:#FFFFFF;

  --ink:#111E48;
  --ink-2:#41507A;
  --ink-3:#6B779E;
  --line:#E1E7F3;
  --line-2:#C7D0E4;

  --on-deep:#111E48;       /* text on the emphasis band is now ink */
  --on-deep-2:#4B5A86;
  --on-deep-line:#D3DCEE;

  /* the two technical diagrams stay on a dark panel on purpose: a screen
     inside a white page, so the line art keeps its contrast */
  --panel:#152245;
  --panel-ink:#EEF2FC;
  --panel-ink-2:#A9B7D9;

  --accent:var(--blue);
  --pop:var(--amber);
  --pop-ink:#9C5A00;       /* amber is 1.9:1 as text on white; this is 4.8:1 */
  --blue-on-deep:var(--blue);
  --good:#2F7D4F;

  --shadow:0 1px 2px rgba(17,30,72,.05), 0 8px 24px -12px rgba(17,30,72,.18);
  --shadow-lg:0 2px 4px rgba(17,30,72,.06), 0 24px 60px -24px rgba(17,30,72,.28);

  --font:'Poppins','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --col:1140px;
  --r:14px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.12; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,4rem); font-weight:700}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem)}
h3{font-size:1.2rem; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

.wrap{max-width:var(--col); margin-inline:auto; padding-inline:24px}
.narrow{max-width:760px}
.mono{font-family:var(--mono)}

/* eyebrow: mono label + rule. structural marker for section identity */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--line-2); flex:none}
.on-deep .eyebrow{color:var(--on-deep-2)}
.on-deep .eyebrow::before{background:var(--on-deep-line)}

.lede{font-size:1.125rem; color:var(--ink-2); max-width:62ch; text-wrap:pretty}
.on-deep .lede{color:var(--on-deep-2)}

section{padding-block:clamp(28px,3.4vw,46px)}
.on-deep{background:var(--deep); color:var(--on-deep); border-block:1px solid var(--on-deep-line)}
.on-deep h2,.on-deep h3{color:var(--on-deep)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:999px; border:1px solid transparent;
  padding:13px 24px; font-weight:600; font-size:.95rem; text-decoration:none; transition:.18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px -10px rgba(37,116,219,.7)}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.on-deep .btn-ghost{border-color:var(--on-deep-line); color:var(--on-deep)}
.on-deep .btn-ghost:hover{border-color:var(--blue-on-deep); color:var(--blue-on-deep)}
.btn-amber{background:var(--pop); color:#2A1A00}
.btn-amber:hover{filter:brightness(1.06); transform:translateY(-1px)}
.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line);
}
/* The bar gets a wider track than the content column: six nowrap nav items plus two
   buttons need more room than 1140px, and without it they overlap at every width. */
.bar{max-width:1260px; margin-inline:auto; padding:0 24px; height:72px; display:flex; align-items:center; gap:16px}
.logo{display:flex; align-items:center; text-decoration:none; color:var(--ink); white-space:nowrap; flex:none; --logo-mark:#1B57A8}
.logo .lg{display:block; height:34px; width:auto}
footer.site .logo{color:var(--ink); --logo-mark:#1B57A8}
footer.site .logo .lg{height:38px}
.lg-prod{display:block; margin-bottom:8px; color:var(--ink); --logo-mark:#1B57A8}
.lg-prod .lg{height:22px; width:auto; display:block}
.logo svg{flex:none}
nav.main{display:flex; align-items:center; gap:0; margin-left:2px; min-width:0; overflow:hidden}
.navbtn{
  background:none; border:0; color:var(--ink-2); font-weight:500; font-size:.9rem;
  padding:9px 10px; border-radius:9px; display:flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap;
}
.navbtn:hover,.navbtn[aria-expanded="true"]{color:var(--ink); background:var(--surface-2)}
.navbtn-pop{background:var(--pop); color:#2A1A00; font-weight:700; border-radius:999px; padding:9px 15px; margin-left:4px}
.navbtn-pop:hover{background:#FFB733; color:#2A1A00; transform:translateY(-1px)}
.navbtn .chev{transition:transform .2s ease}
.navbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.spacer{flex:1; min-width:12px}
.hdr-actions{display:flex; align-items:center; gap:10px; flex:none}

/* mega menu */
.mega{
  position:absolute; left:0; right:0; top:100%; background:var(--surface);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  display:none; padding-block:34px 30px;
}
.mega[data-open="true"]{display:block}
.mega-grid{max-width:var(--col); margin-inline:auto; padding-inline:24px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.mega-q{
  grid-column:1/-1; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}
.mega-card{
  display:block; text-decoration:none; padding:16px 16px 18px; border-radius:12px; border:1px solid transparent;
  transition:.16s ease;
}
.mega-card:hover{background:var(--surface-2); border-color:var(--line)}
.mega-card b{display:block; font-weight:600; font-size:.98rem; margin-bottom:5px; color:var(--ink)}
.mega-card span{font-size:.85rem; color:var(--ink-3); line-height:1.5; display:block}
.mega-card .who{font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:9px; white-space:nowrap}
.mega-foot{
  max-width:var(--col); margin:24px auto 0; padding:18px 24px 0; border-top:1px solid var(--line);
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
}
.mega-foot a{font-size:.875rem; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.mega-foot a:hover{color:var(--blue)}
.menu-toggle{display:none}

/* ============ THREAD RAIL ============ */
.thread{position:relative}
@media (min-width:1000px){
  .thread::before{
    content:""; position:absolute; left:-46px; top:8px; bottom:8px; width:1px;
    background:linear-gradient(180deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);
  }
  .thread::after{
    content:""; position:absolute; left:-50px; top:8px; width:9px; height:9px; border-radius:50%;
    background:var(--blue); box-shadow:0 0 0 4px var(--ground);
  }
  .on-deep .thread::before{background:linear-gradient(180deg,transparent,var(--on-deep-line) 12%,var(--on-deep-line) 88%,transparent)}
  .on-deep .thread::after{box-shadow:0 0 0 4px var(--deep)}
}

/* ============ HERO ============ */
.hero{padding-block:clamp(6px,1vw,14px) clamp(18px,2.4vw,32px); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:start}
@media (min-width:901px){ .hero-grid > div:first-child{padding-top:clamp(10px,2.4vw,34px); display:flex; flex-direction:column; align-self:stretch} .hero-grid .hero-facts{margin-top:0} .hero-grid .hero-badges{margin-top:26px} .hero-grid .phone-stage{padding-top:0} }
.hero-facts{display:grid; gap:18px; padding-top:18px}
.hf .k{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:4px}
.hf p{margin:0; font-size:clamp(1.15rem,1.35vw,1.4rem); line-height:1.35; color:var(--blue-deep); font-weight:500; letter-spacing:-.01em}
.hf .k{color:var(--ink-3)}
.hf .k{font-size:.72rem; font-weight:700}
@media (max-width:900px){ .hero-facts{gap:14px; padding-top:18px; border-top:1px solid var(--line)} }
.hl-lab{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.hl-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:s}
.hl-steps::before{content:''; position:absolute; left:7%; right:7%; top:9px; height:2px; background:var(--line); z-index:0}
.hl-steps li{position:relative; text-align:center; font-size:.74rem; color:var(--ink-3); padding-top:26px; transition:color .3s}
.hl-steps li i{position:absolute; top:2px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); transition:.3s; z-index:1}
.hl-steps li.on{color:var(--ink-2)} .hl-steps li.on i{background:var(--blue); border-color:var(--blue)}
.hl-steps li.cur{color:var(--ink); font-weight:600} .hl-steps li.cur i{box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 18%, transparent); animation:hlpulse 1.6s ease-in-out infinite}
.hl-steps li.on + li::before{content:''; position:absolute; top:9px; right:50%; width:100%; height:2px; background:var(--blue); z-index:0; opacity:0}
.hl-steps li.on::after{content:''; position:absolute; top:9px; left:50%; width:100%; height:2px; background:var(--blue); z-index:0}
.hl-steps li.on:last-child::after{display:none}
@keyframes hlpulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent)} 50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--blue) 8%, transparent)}}
@media (max-width:900px){ .hero-grid .hero-facts{order:6} .hero-grid .hero-badges{order:7} }
.hero h1{font-size:clamp(2.05rem,3.2vw,3rem); line-height:1.1}
.hero h1 .hl{
  position:relative; isolation:isolate; padding-inline:2px;
}
.hero .lede{margin-top:15px; font-size:1.15rem}
.hero-cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.hero-proof{
  display:flex; gap:30px; margin-top:18px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.hero-proof div{display:flex; flex-direction:column; gap:2px}
.hero-proof b{font-family:var(--mono); font-size:1.35rem; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.hero-proof span{font-size:.78rem; color:var(--ink-3); line-height:1.35; max-width:17ch}
.hero-badges{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 22px; align-items:end; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.hb{display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-decoration:none; color:var(--ink-2); font-size:.8rem; font-weight:600; letter-spacing:.01em; line-height:1.25}
.hb img{height:68px; width:auto; max-width:100%; display:block; object-fit:contain}
.hb svg{width:60px; height:60px; border-radius:12px; flex:none}
.hb:hover{color:var(--ink)}
@media (max-width:640px){ .hero-badges{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} .hb img{height:54px} .hb svg{width:48px; height:48px} .hb{font-size:.74rem} }

/* arch watermark - MC "m" motif */


/* ============ PHONE ============ */
.phone-stage{display:flex; flex-direction:column; align-items:center; gap:18px}
.demo-replay{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); border-radius:999px; padding:8px 15px; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:.16s ease;
}
.demo-replay:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}

/* ============ RCS ANALYSIS: INTERACTIVE BLOCKS ============ */
.rz{
  margin:26px 0; padding:24px 24px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow);
}
.rz-cap{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:18px;
}
.rz-foot{margin-top:16px; font-size:.83rem; color:var(--ink-3); line-height:1.6}

/* comparison bars */
.rz-bar{display:grid; grid-template-columns:52px 1fr 74px; gap:12px; align-items:center; margin-bottom:12px}
.rz-lab{font-size:.84rem; font-weight:600; color:var(--ink-2)}
.rz-track{height:30px; background:var(--surface-2); border-radius:8px; overflow:hidden}
.rz-fill{display:block; height:100%; width:0; border-radius:8px}
.rz-fill.sms{background:var(--ink-3)}
.rz-fill.rcs{background:linear-gradient(90deg,var(--blue),var(--blue-deep))}
.rz.is-live .rz-fill{width:var(--to); transition:width 1.1s cubic-bezier(.3,.9,.3,1)}
.rz-val{font-family:var(--mono); font-size:.9rem; color:var(--ink); text-align:right}

/* reach model */
.rz-slider{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline; margin-bottom:16px}
.rz-slider span{font-size:.88rem; font-weight:500}
.rz-slider output{font-family:var(--mono); color:var(--blue); font-weight:500}
.rz-slider input{grid-column:1/-1; width:100%; accent-color:var(--blue)}
.rz-grid{display:grid; grid-template-columns:repeat(20,1fr); gap:4px; margin-bottom:18px}
.rz-dot{aspect-ratio:1; border-radius:2px; background:var(--surface-2); transition:background .3s ease}
.rz-dot.on{background:var(--blue)}
.rz-split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.rz-split div{background:var(--surface-2); border-radius:10px; padding:14px 16px}
.rz-split b{display:block; font-family:var(--mono); font-size:1.5rem; color:var(--ink); letter-spacing:-.02em}
.rz-split div:first-child b{color:var(--blue)}
.rz-split span{font-size:.78rem; color:var(--ink-3); line-height:1.4; display:block; margin-top:3px}

/* layered send */
.rz-flow{display:grid; grid-template-columns:auto 44px 1fr; gap:14px; align-items:center}
.rz-node{background:var(--surface-2); border-radius:10px; padding:16px 18px; text-align:center}
.rz-node b{display:block; font-size:1rem}
.rz-node span{font-size:.72rem; color:var(--ink-3); display:block; margin-top:3px; max-width:12ch}
.rz-arrows{position:relative; height:64px}
.rz-arrows i{
  position:absolute; left:0; right:0; height:2px; background:var(--line-2); border-radius:2px;
}
.rz-arrows i:first-child{top:18px}
.rz-arrows i:last-child{top:44px}
.rz-arrows i::after{
  content:''; position:absolute; left:-6px; top:-2px; width:6px; height:6px; border-radius:50%;
  background:var(--blue); opacity:0;
}
.rz.is-live .rz-arrows i::after{animation:rzPk 2.2s linear infinite}
.rz.is-live .rz-arrows i:last-child::after{animation-delay:.6s; background:var(--ink-3)}
@keyframes rzPk{0%{left:-6px; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:100%; opacity:0}}
.rz-lanes{display:flex; flex-direction:column; gap:10px}
.rz-lane{border-radius:10px; padding:13px 16px; border:1px solid var(--line)}
.rz-lane b{font-size:.92rem} .rz-lane span{display:block; font-size:.76rem; color:var(--ink-3); margin-top:2px}
.rz-lane.up{background:var(--blue-soft); border-color:#C5D9F5} .rz-lane.up b{color:var(--blue-deep)}
.rz-lane.base{background:var(--surface-2)}

/* explore more */
.rz-cta{
  margin-top:34px; padding:28px 26px; border-radius:var(--r); background:var(--deep);
  border:1px solid var(--on-deep-line); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.rz-cta-act{display:flex; flex-direction:column; gap:10px; min-width:246px}
.rz-cta-act .btn{justify-content:center}
@media (max-width:760px){
  .rz-cta{grid-template-columns:1fr}
  .rz-cta-act{min-width:0}
  .rz-flow{grid-template-columns:1fr; gap:10px}
  .rz-arrows{height:26px; transform:rotate(90deg) scaleX(.4)}
  .rz-grid{grid-template-columns:repeat(10,1fr)}
  .rz-split{grid-template-columns:1fr}
}

/* ============ CERTIFICATION BADGES ============ */
/* Named distinctly: .cert / .cert-row already belong to the security scorecards. */
.certmarks{display:flex; gap:30px; flex-wrap:wrap; margin-top:26px; align-items:flex-start}
.certmark{margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:190px; text-align:center}
.certmark img{height:76px; width:auto; display:block}
.certmark figcaption b{display:block; font-size:.88rem; margin-bottom:2px}
.certmark figcaption span{font-size:.72rem; color:var(--ink-3); line-height:1.4; display:block}
@media (max-width:640px){
  .certmarks{gap:18px; justify-content:center}
  .certmark{max-width:140px}
  .certmark img{height:60px}
}

/* ============ PARTNER + CUSTOMER MARKS ============ */
/* One rule standardizes every logo: same optical height, grayscale, same weight. */
.lg-mark{height:34px; width:auto; display:block; flex:none; opacity:.62; transition:.2s ease}
.logos .lg-mark{height:38px}
.lg-link{display:flex; align-items:center; flex:none; border-radius:8px}
.logo-car{overflow:hidden; position:relative; padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.logo-car-track{display:flex; align-items:center; transition:transform .65s cubic-bezier(.2,.8,.2,1); will-change:transform}
.logo-car-track > .lg-link{flex:0 0 20%; max-width:20%; justify-content:center; padding:0 22px; box-sizing:border-box}
.logo-car .lg-mark{height:60px; width:auto; max-width:100%; object-fit:contain; opacity:.78}
.logo-car .lg-link:hover .lg-mark{opacity:1}
@media (max-width:900px){ .logo-car-track > .lg-link{flex-basis:33.333%; max-width:33.333%; padding:0 14px} .logo-car .lg-mark{height:44px} }
@media (max-width:560px){ .logo-car-track > .lg-link{flex-basis:50%; max-width:50%} .logo-car .lg-mark{height:40px} }
.lg-link:hover .lg-mark, .lg-link:focus-visible .lg-mark{opacity:1}
.lg-link:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.marquee-sm .logos{gap:40px}
.lg-word{font-weight:600; font-size:.95rem; color:var(--ink-2); opacity:.62; white-space:nowrap}
.marquee-sm .lg-mark{height:30px}
.marquee-sm .marquee-track{animation-duration:34s}
a:hover .lg-mark, .uc:hover .lg-mark, .lg-mark:hover{opacity:1}
@media (max-width:640px){ .lg-mark{height:26px} .logos .lg-mark{height:30px} }

/* ============ RESOURCES ============ */
.res-filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
.res-filters button{
  border:1px solid var(--line-2); background:var(--surface); border-radius:999px;
  padding:8px 15px; font-size:.83rem; font-weight:600; color:var(--ink-2); transition:.15s;
}
.res-filters button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.res-card{
  display:flex; flex-direction:column; gap:9px; padding:22px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); transition:.18s ease;
}
.res-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.res-card .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--blue)}
.res-card h3{font-size:1.02rem; line-height:1.34}
.res-card p{font-size:.86rem; color:var(--ink-2); line-height:1.55; flex:1}
.res-card .m{font-family:var(--mono); font-size:.66rem; color:var(--ink-3); padding-top:10px; border-top:1px solid var(--line)}
.res-cta{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.strat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.strat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.strat-photo{width:100%; aspect-ratio:1; object-fit:cover; display:block; filter:saturate(.9)}
.strat-body{padding:18px 20px 22px}
.strat-body h3{font-size:1.08rem}
.strat-where{font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.strat-body p{font-size:.88rem; color:var(--ink-2); line-height:1.55; margin-top:10px}
.strat-supports{font-weight:600; color:var(--ink) !important}
.contact-layout{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr); gap:40px; align-items:start}
.contact-form{margin-top:0; gap:16px}
.bf select, .bf textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--ground); color:var(--ink); font:inherit; font-size:.94rem}
.bf select:focus, .bf textarea:focus{border-color:var(--blue); background:var(--surface); outline:none}
.bf textarea{resize:vertical; min-height:104px}
.bf .opt{font-weight:400; color:var(--ink-3); font-size:.78rem; margin-left:6px}
.contact-form .book-fine a{color:inherit}
@media (max-width:900px){ .strat-grid{grid-template-columns:repeat(2,1fr)} .contact-layout{grid-template-columns:1fr} }
@media (max-width:560px){ .strat-grid{grid-template-columns:1fr} }
.res-tools{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.res-tools input{flex:1 1 260px; min-width:0; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px; font:inherit; font-size:.92rem; background:var(--surface); color:var(--ink)}
.res-tools input:focus{outline:2px solid var(--blue); outline-offset:1px}
.res-tools .res-filters{margin-top:0}
.res-count{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-3); margin-top:16px}
.res-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 36px; margin-top:6px}
.res-row{display:grid; grid-template-columns:104px 1fr auto; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.res-row:hover b{color:var(--blue)}
.res-row .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--blue)}
.res-row b{font-size:.95rem; font-weight:600; line-height:1.35; color:var(--ink)}
.res-row .m{font-family:var(--mono); font-size:.66rem; color:var(--ink-3); white-space:nowrap}
.res-empty{color:var(--ink-2); padding:18px 0}
.uc-kpis .stat{padding:14px 14px 12px}
.uc-kpis .stat b{font-size:1.5rem}
@media (max-width:1000px){ .uc-kpis{grid-template-columns:repeat(3,1fr) !important} }
@media (max-width:560px){ .uc-kpis{grid-template-columns:1fr !important} }
.kpi-note{font-size:.66rem; letter-spacing:.06em; color:var(--ink-3); margin-top:8px}
.g-recaptcha{min-height:78px; margin:2px 0 4px}
.gate .g-recaptcha, .book .g-recaptcha{transform:scale(.92); transform-origin:0 0; margin-bottom:-4px}
@media (max-width:360px){ .g-recaptcha{transform:scale(.8); transform-origin:0 0} }
.legal-nav{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.legal-nav a{font-size:.82rem; font-weight:600; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:7px 13px; background:var(--surface)}
.legal-nav a[aria-current="page"]{background:var(--blue); border-color:var(--blue); color:#fff}
.legal-body{max-width:78ch; font-size:.96rem; line-height:1.7; color:var(--ink-2)}
.legal-body h2{font-size:1.25rem; margin-top:30px; color:var(--ink)}
.legal-body h3{font-size:1.05rem; margin-top:22px; color:var(--ink)}
.legal-body p, .legal-body li{margin-top:12px}
.legal-body ul, .legal-body ol{padding-left:22px}
.legal-body a{color:var(--blue)}
.legal-body table{border-collapse:collapse; width:100%; font-size:.88rem; margin-top:14px}
.legal-body td, .legal-body th{border:1px solid var(--line); padding:8px 10px; vertical-align:top; text-align:left}
.real-tag{display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good); border-radius:999px; padding:3px 9px 3px 7px; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; margin-right:10px; vertical-align:middle}
.real-tag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--good)}
#artBody .tbl-wrap, #legalBody .tbl-wrap{overflow-x:auto; margin:18px 0}
#artBody table, #legalBody table{border-collapse:collapse; width:100%; font-size:.9rem}
#artBody th, #artBody td, #legalBody th, #legalBody td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
#artBody th, #legalBody th{background:var(--surface-2); font-weight:600}
#artBody blockquote, #legalBody blockquote{border-left:3px solid var(--pop); padding:6px 16px; margin:16px 0; color:var(--ink-2); background:var(--surface-2); border-radius:0 10px 10px 0}
@media (max-width:760px){ .res-list{grid-template-columns:1fr} .res-row{grid-template-columns:1fr; gap:4px} .res-row .m{justify-self:start} }

.art-back{font-size:.82rem; color:var(--blue); text-decoration:none; display:inline-block; margin-bottom:14px}
.art-layout{display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:44px; align-items:start}
.art-rail{position:sticky; top:96px; display:flex; flex-direction:column; gap:18px}
.art-cta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.art-cta b{display:block; font-size:1rem; margin-bottom:6px}
.art-cta p{font-size:.85rem; color:var(--ink-2); line-height:1.55; margin-bottom:14px}
.art-rel a{display:block; text-decoration:none; padding:11px 0; border-top:1px solid var(--line); color:var(--ink)}
.art-rel a:hover{color:var(--blue)}
.art-rel a b{display:block; font-size:.88rem; font-weight:600; line-height:1.35}
.art-rel a span{font-family:var(--mono); font-size:.62rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em}
/* a funnel inside the read, not only at the end of it */
.art-inline{
  margin:30px 0; padding:22px 24px; border-radius:var(--r); background:var(--blue-soft);
  border:1px solid #C5D9F5; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.art-inline b{display:block; font-size:1rem; margin-bottom:3px}
.art-inline span{font-size:.86rem; color:var(--ink-2)}
@media (max-width:980px){
  .res-grid{grid-template-columns:1fr 1fr}
  .art-layout{grid-template-columns:1fr; gap:28px}
  .art-rail{position:static; flex-direction:row; flex-wrap:wrap}
  .art-cta, .art-rel{flex:1 1 260px}
}
@media (max-width:640px){ .res-grid{grid-template-columns:1fr} }

/* ============ ANATOMY (scroll-driven callouts) ============ */
.anat{padding-block:clamp(30px,4vw,52px) clamp(28px,4vw,60px)}
.anat-scroll{position:relative; height:150vh; min-height:900px}
.anat-sticky{position:sticky; top:88px; z-index:1}
.anat-steps{position:absolute; inset:0; display:block; pointer-events:none; z-index:0}
.anat-steps i{display:block; height:16.6666%}
/* phone in the center, callouts either side */
.anat-grid{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:40px; align-items:center}
.anat-phone-col{display:flex; justify-content:center}
.anat-phone{width:286px}
.anat-screen .thread-inner{justify-content:flex-start}
.anat-screen .card-art{height:96px; background:linear-gradient(135deg,#1B4F8C,#2574DB)}
.anat-screen .card-acts{flex-direction:row}
.anat-screen .card-acts button{border-bottom:0; border-right:1px solid var(--line); flex:1}
.anat-screen .card-acts button:last-child{border-right:0}
.anat-screen .avatar{font-size:.8rem}
.anat-screen [data-part]{position:relative}
.anat-vwrap{display:inline-flex; width:15px; height:15px; border-radius:50%; vertical-align:middle}
.anat-vwrap::after{content:''; width:13px; height:13px; border-radius:50%; background:var(--blue); margin:auto; box-shadow:inset 0 0 0 2px var(--surface)}

/* arrows from each callout to its part of the phone */
.anat-wires{position:absolute; inset:0; pointer-events:none; z-index:3; overflow:visible}
.anat-wires path{fill:none; stroke:var(--pop); stroke-width:1.7; stroke-linecap:round; opacity:0; transition:opacity .35s ease}
.anat-wires path.on{opacity:1}

/* callouts pop in, and stay */
.anat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:a}
.anat-list.r{counter-reset:a 3}
.anat-list li{
  counter-increment:a; cursor:pointer; padding:14px 18px 14px 52px; position:relative;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  opacity:0; transform:translateY(10px) scale(.96); transition:.38s cubic-bezier(.2,.9,.3,1.15);
  box-shadow:var(--shadow); will-change:opacity, transform;
}
.anat-list li::before{
  content:counter(a); position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--pop); color:#2A1A00;
  display:grid; place-items:center; font-family:var(--mono); font-size:.7rem; font-weight:600;
}
.anat-list li.on{opacity:1; transform:none}
.anat-list b{display:block; font-size:.98rem; margin-bottom:2px}
.anat-list span{font-size:.85rem; color:var(--ink-2); line-height:1.5}

.anat-lede-mob{display:none}
/* numbered pins on the phone: the mobile substitute for arrows */
.anat-screen [data-part]::after{
  content:attr(data-n); position:absolute; top:-7px; right:-7px; z-index:4; display:none;
  width:20px; height:20px; border-radius:50%; background:var(--pop); color:#2A1A00;
  font-family:var(--mono); font-size:.62rem; font-weight:600; line-height:20px; text-align:center;
  box-shadow:0 0 0 2px var(--surface);
}
.anat-screen .anat-vwrap::after{content:''}     /* the verified dot keeps its own ::after */

@media (max-width:900px){
  .anat-scroll{height:auto; min-height:0}
  .anat-sticky{position:static}
  .anat-steps, .anat-wires{display:none}
  .anat-grid{grid-template-columns:1fr; gap:22px}
  .anat-phone-col{order:0}
  .anat-list.l{order:1} .anat-list.r{order:2}
  .anat-list{gap:10px}
  .anat-list li{opacity:1; transform:none; padding-left:48px}
  .anat-screen [data-part]::after{display:block}
  /* the whole thread shows at once on a phone: no fixed screen height, no inner scrolling */
  .anat-phone .phone-screen{aspect-ratio:auto}
  .anat-screen .thread-body{flex:none; overflow:visible; padding-bottom:16px}
  .anat-screen .thread-inner{min-height:0}
  /* pins sit inside the boxes that would otherwise clip them */
  .anat-screen .phone-top[data-part]::after{top:10px; right:12px}
  .anat-screen .anat-vwrap{overflow:visible !important; position:relative}
  .anat-screen .card[data-part]::after{top:8px; right:8px}
  .anat-screen .card-acts[data-part]::after{top:-10px; right:8px}
  .anat-screen .chips[data-part]::after{top:-6px; right:auto; left:-8px}
  .anat-screen .meta[data-part]::after{top:-4px; right:auto; left:-26px}
  /* the verified mark keeps its blue dot and gets a separate numbered pin */
  .anat-screen .anat-vwrap::after{display:inline-block; position:static; width:13px; height:13px; line-height:13px; background:var(--blue); box-shadow:inset 0 0 0 2px var(--surface); color:transparent; font-size:0; transform:none}
  .anat-screen .anat-vwrap::before{content:attr(data-n); position:absolute; top:-15px; right:-18px; z-index:4; width:20px; height:20px; border-radius:50%; background:var(--pop); color:#2A1A00; font-family:var(--mono); font-size:.62rem; font-weight:600; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--surface)}
  .anat-lede-desk{display:none} .anat-lede-mob{display:inline}
}
.anat-screen .card-art img{width:100%; height:100%; object-fit:cover; display:block}
@media (prefers-reduced-motion:reduce){ .anat-list li{opacity:1; transform:none; transition:none} }

/* ============ CAROUSEL (RCS Rich Media) ============ */
.carousel{
  align-self:stretch; margin-inline:-13px; padding-inline:13px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both;
}
.carousel::-webkit-scrollbar{display:none}
/* stretch, never a fixed height: one card's copy running long must not clip the rest */
.car-track{display:flex; align-items:stretch; gap:9px; width:max-content; padding-bottom:2px}
.car-card{
  display:flex; flex-direction:column; width:186px; flex:none;
  background:var(--surface); border:1px solid var(--line); border-radius:15px;
  overflow:hidden; box-shadow:var(--shadow);
}
.car-art{height:104px; flex-shrink:0; overflow:hidden}
.scene-photo{width:100%; height:100%; object-fit:cover; display:block}
.car-body{flex:1; display:flex; flex-direction:column; padding:10px 12px 11px; gap:4px}
.car-body b{font-size:.82rem; font-weight:600; line-height:1.3}
.car-body p{flex:1; font-size:.73rem; color:var(--ink-2); line-height:1.45}
.car-cta{
  margin-top:8px; border:0; background:var(--blue-soft); color:var(--blue-deep);
  border-radius:8px; padding:8px 10px; font-size:.75rem; font-weight:600; cursor:pointer;
  transition:.15s ease; width:100%;
}
.car-cta:hover{background:var(--blue); color:#fff}
.wa-mode .car-cta{background:#D9FDD3; color:#0B7A5F}

/* ============ CONTACT PAGE (in-phone) ============ */
.contact-info{
  position:absolute; inset:0; z-index:8; background:var(--surface);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.9,.3,1);
}
.contact-info.is-open{transform:none}
.ci-bar{padding:44px 10px 6px; flex:none}
.ci-back{border:0; background:none; color:#007AFF; padding:6px 8px; cursor:pointer; display:flex}
.ci-scroll{flex:1; min-height:0; overflow-y:auto; padding:0 14px 22px; scrollbar-width:thin}
.ci-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:4px 0 20px}
.ci-avatar{
  width:74px; height:74px; border-radius:20px; display:grid; place-items:center;
  font-weight:700; font-size:1.5rem; color:#fff; background:var(--blue);
}
.ci-avatar.generic{border-radius:50%; background:var(--line-2); color:var(--surface)}
.ci-avatar.wa{background:#128C7E; border-radius:50%}
.ci-name{font-size:1.2rem; font-weight:600; display:flex; align-items:center; gap:6px; justify-content:center}
.ci-sub{font-size:.76rem; color:var(--ink-3)}
.ci-acts{display:flex; gap:14px; justify-content:center; margin:4px 0 14px}
.ci-act{
  width:42px; height:42px; border-radius:50%; background:var(--surface-2);
  display:grid; place-items:center; color:var(--ink-2);
}
.ci-act.off{color:var(--line-2)}
.ci-card{background:var(--surface-2); border-radius:12px; margin-bottom:14px; overflow:hidden}
.ci-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--line); font-size:.8rem;
}
.ci-row:last-child{border-bottom:0}
.ci-row span{color:var(--ink-3); flex:none}
.ci-row b{font-weight:500; color:var(--ink); text-align:right; word-break:break-word}
.ci-row b a{color:#007AFF; text-decoration:none}
.ci-h{
  font-size:.74rem; font-weight:600; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.07em; margin:4px 0 8px 4px;
}
.ci-about{padding:12px 14px; font-size:.8rem; line-height:1.55; color:var(--ink-2)}
.ci-link{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:11px 14px; font-size:.82rem; color:#007AFF; border-bottom:1px solid var(--line);
}
.ci-link:last-child{border-bottom:0}
.ci-link.danger{color:#D7263D}
.ci-toggle{width:37px; height:22px; border-radius:999px; background:var(--line-2); position:relative; flex:none}
.ci-toggle i{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff}
.ci-fine{font-size:.68rem; color:var(--ink-3); text-align:center; margin:2px 0 14px; line-height:1.45}
.ci-note{
  font-size:.7rem; line-height:1.55; color:var(--pop-ink); background:#FFF6E6;
  border:1px solid #FFE2AE; border-radius:10px; padding:11px 13px; margin-top:4px;
}
/* seeded history reads as older than the live demonstration */
.bubble.is-hist{opacity:.62}
.ph-datestamp.hist-sep{margin:6px 0 2px}

/* ============ CONSENT ============ */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:95; max-width:760px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:18px 20px; display:none; gap:20px; align-items:center;
}
body.consent-show .consent{display:flex; animation:consentIn .32s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes consentIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.consent-body{flex:1; min-width:0}
.consent-body b{display:block; font-size:.95rem; margin-bottom:5px}
.consent-body p{font-size:.82rem; color:var(--ink-2); line-height:1.55}
.consent-body a{color:var(--blue); text-decoration:underline}
.consent-act{display:flex; gap:9px; flex:none}
.consent-act .btn{padding:10px 17px; font-size:.86rem; white-space:nowrap}
@media (max-width:680px){
  .consent{flex-direction:column; align-items:stretch; gap:14px; left:10px; right:10px; bottom:10px}
  .consent-act{flex-direction:column-reverse}
  .consent-act .btn{justify-content:center; width:100%}
}
.gate-consent{
  font-size:.72rem; color:var(--ink-3); line-height:1.5; margin-top:12px;
}
.gate-consent a{color:var(--blue); text-decoration:underline}

/* ============ EMAIL GATE ============ */
.gate-scrim{
  position:fixed; inset:0; background:rgba(17,30,72,.42); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .24s ease; z-index:90;
}
.gate{
  position:fixed; z-index:91; left:50%; top:50%; width:min(440px, calc(100vw - 32px));
  transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.9,.3,1.1);
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:30px 28px 26px; max-height:calc(100dvh - 32px); overflow-y:auto;
}
body.gate-open .gate-scrim{opacity:1; pointer-events:auto}
body.gate-open .gate{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.gate h3{font-size:1.35rem; margin-bottom:8px}
.gate-sub{font-size:.92rem; color:var(--ink-2); line-height:1.55; margin-bottom:20px}
.gate-sub #gateContext{color:var(--ink); font-weight:600}
.gate-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gate-x{
  position:absolute; top:12px; right:14px; border:0; background:none; font-size:1.5rem;
  line-height:1; color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:8px;
}
.gate-x:hover{background:var(--surface-2); color:var(--ink)}
@media (max-width:460px){ .gate-row{grid-template-columns:1fr} .gate{padding:26px 20px 22px} }
.channel-switch{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px;
}
.channel-switch button{
  border:0; background:none; border-radius:999px; padding:8px 17px; font-size:.83rem; font-weight:600;
  color:var(--ink-3); transition:.18s ease; display:flex; align-items:center; gap:7px;
}
.channel-switch button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.channel-switch .dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.45}
.channel-switch button.is-rec::after{
  content:'recommended'; font-family:var(--mono); font-size:.52rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--good); margin-left:5px;
}
@media (max-width:560px){ .channel-switch button.is-rec::after{display:none} }
.channel-switch button[aria-pressed="true"] .dot{opacity:1}
.channel-switch button[data-ch="sms"][aria-pressed="true"] .dot{background:var(--ink-3)}
.channel-switch button[data-ch="rcs"][aria-pressed="true"] .dot{background:var(--blue)}
.channel-switch button[data-ch="wa"][aria-pressed="true"] .dot{background:#25D366}
.switch-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center}
.device-switch button{padding:8px 13px; font-size:.78rem}
.device-switch button[aria-pressed="true"]{color:var(--blue-deep)}
.dev-note{font-size:.66rem; color:var(--ink-3); text-align:center; max-width:40ch; line-height:1.55}
.dev-note a{color:var(--blue); font-weight:600; text-decoration:none; white-space:nowrap}

/* --- Android frame: graphite rail, squarer corners, centered punch-hole camera, buttons on the right rail --- */
.phone.android{
  --r-out:36px;
  background:
    linear-gradient(158deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(102deg, #3B3F49 0%, #22252C 12%, #5A5F6B 26%, #2C3038 42%, #1D2026 56%, #4C515C 72%, #262A31 86%, #3A3E47 100%);
}
.phone.android::before{display:none}
.phone.android::after{right:-3px; top:19%; height:7%}
.phone.android .phone-hw::before, .phone.android .phone-hw::after{left:auto; right:-4px}
.phone.android .phone-hw::before{top:29%; height:14%}
.phone.android .phone-hw::after{display:none}
.phone.android .ph-island{width:13px; height:13px; border-radius:50%; top:calc(var(--rail) + var(--bezel) + 9px); box-shadow:0 0 0 1.5px rgba(255,255,255,.06)}
.phone.android .ph-island::after{right:2.5px; width:8px; height:8px}
.phone.android .ph-status{top:calc(var(--rail) + var(--bezel) + 8px)}
.phone.android .ph-home{width:96px; height:4px; opacity:.32}

/* --- iPhone renderer (default): replies as a persistent list, subtle gray card buttons, 3-line clamp --- */
.phone-screen:not(.android):not(.wa-mode) .chips{flex-direction:column; align-items:stretch; gap:5px; max-width:78%; margin-left:6px}
.phone-screen:not(.android):not(.wa-mode) .chip-reply{border:1px solid var(--line-2); background:var(--surface); color:var(--blue); border-radius:12px; height:auto; padding:9px 14px; text-align:left; font-weight:600}
.phone-screen:not(.android):not(.wa-mode) .chip-reply:first-child{background:var(--surface); color:var(--blue); border-color:var(--line-2)}
.phone-screen:not(.android):not(.wa-mode) .chip-reply:disabled{color:var(--ink-3); cursor:default}
.phone-screen:not(.android):not(.wa-mode) .chip-reply.is-taken{background:var(--blue); color:#fff; border-color:var(--blue)}
.phone-screen:not(.android):not(.wa-mode) .card-acts button{color:var(--ink-2); background:var(--surface-2); font-weight:600}
.phone-screen:not(.android):not(.wa-mode) .card-body p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.phone-screen:not(.android):not(.wa-mode) .car-cta{background:var(--surface-2); color:var(--ink-2)}
.card-acts.ios-opts{position:relative}
.ios-options{display:flex; align-items:center; justify-content:center; gap:6px; width:100%}
.ios-menu{display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--surface)}
.card-acts.is-open .ios-menu{display:flex}
.ios-menu button{display:flex; align-items:center; gap:9px; text-align:left; padding:9px 12px; color:var(--ink) !important; background:var(--surface) !important; border-bottom:1px solid var(--line)}
.ios-menu button svg{color:var(--blue); flex:none}
.ios-menu button:last-child{border-bottom:0}
.carousel.ios-stack{overflow:visible; margin-inline:0; padding-inline:0; align-self:flex-start; max-width:88%}
.carousel.ios-stack .car-track{display:block; width:auto}
.carousel.ios-stack .car-card{display:none; width:100%}
.carousel.ios-stack .car-card.is-cur{display:flex}
.car-nav{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; font-family:var(--mono); font-size:.66rem; color:var(--ink-3)}
.car-nav button{border:1px solid var(--line-2); background:var(--surface); color:var(--ink); width:26px; height:26px; border-radius:50%; font-size:1rem; line-height:1; cursor:pointer}
.car-nav button:disabled{opacity:.35; cursor:default}

/* --- Android renderer: transient chips, full-color pill buttons on the card --- */
.phone-screen.android .card-acts{flex-direction:row; flex-wrap:wrap; gap:6px; padding:8px 10px 10px; border-top:0}
.phone-screen.android .card-acts button{border:0; border-radius:999px; background:var(--blue); color:#fff; padding:7px 13px; font-size:.74rem}
.phone-screen.android .card-acts button:hover{background:var(--blue-deep)}
.phone-screen.android .card-acts button.is-taken{background:var(--surface-2); color:var(--ink-3)}
.phone-screen.android .card, .phone-screen.android .car-card{border-radius:20px}
.phone-screen.android .car-cta{background:var(--blue); color:#fff; border-radius:999px}
.phone-screen.android .chip-reply{border-color:var(--blue); color:var(--blue); background:var(--surface)}
.phone-screen.android .chip-reply:first-child{background:var(--surface); color:var(--blue)}

/* --- Handset. A titanium-frame phone: brushed metal rail, black bezel, Dynamic
   Island, side buttons, home indicator. All hardware chrome lives on .phone
   (never inside .phone-screen) because play() rewrites the screen's innerHTML
   on every flow, which would otherwise wipe it. --- */
.phone{
  --rail:6px;      /* visible metal between the phone edge and the black bezel */
  --bezel:4px;     /* black surround inside the rail                            */
  --r-out:50px;    /* outer corner radius                                       */
  width:300px; max-width:100%; flex:none; position:relative; isolation:isolate;
  padding:calc(var(--rail) + var(--bezel));
  border-radius:var(--r-out);
  background:
    linear-gradient(158deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(102deg,
      #7A6C99 0%,  #4E4370 9%,  #A093C4 22%, #62558A 38%,
      #423861 52%, #8B7DB0 68%, #514572 82%, #776A96 93%, #4A3F68 100%);
  box-shadow:
    0 0 0 1px rgba(24,20,38,.55),
    inset 0 1px 1px rgba(255,255,255,.42),
    inset 0 -1px 1px rgba(0,0,0,.35),
    0 2px 5px rgba(17,30,72,.10),
    0 34px 70px -26px rgba(30,22,58,.52);
}
/* side buttons: action (left, top) and power (right) */
.phone::before, .phone::after{
  content:''; position:absolute; width:3px; border-radius:2px;
  background:linear-gradient(90deg,#584F71,#332D47);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}
.phone::before{left:-3px; top:15.5%; height:5.6%}
.phone::after{right:-3px; top:24%; height:15%}
.phone-screen{
  border-radius:calc(var(--r-out) - var(--rail) - var(--bezel));
  overflow:hidden; background:var(--surface-2);
  aspect-ratio:393/852;          /* iPhone display proportions; height follows width */
  display:flex; flex-direction:column; position:relative;
  box-shadow:0 0 0 var(--bezel) #08090F;
}
/* Chrome overlay. aria-hidden, pointer-events:none: decoration only. */
.phone-hw{position:absolute; inset:0; pointer-events:none; z-index:5}
/* volume up / volume down, left rail */
.phone-hw::before, .phone-hw::after{
  content:''; position:absolute; left:-4px; width:3px; border-radius:2px;
  background:linear-gradient(90deg,#584F71,#332D47);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}
.phone-hw::before{top:24%;   height:10.5%}
.phone-hw::after {top:36.5%; height:10.5%}
.ph-island{
  position:absolute; top:calc(var(--rail) + var(--bezel) + 8px); left:50%; transform:translateX(-50%);
  width:92px; height:26px; border-radius:13px; background:#0A0A0E;
  box-shadow:0 0 0 .5px rgba(0,0,0,.6);
}
.ph-island::after{  /* front camera */
  content:''; position:absolute; right:7px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #3A4668 0%, #141A2B 55%, #05070C 100%);
  box-shadow:0 0 0 .5px rgba(120,140,190,.30);
}
.ph-status{
  position:absolute; left:calc(var(--rail) + var(--bezel)); right:calc(var(--rail) + var(--bezel));
  top:calc(var(--rail) + var(--bezel) + 11px); height:20px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; color:var(--ink);
}
.ph-status b{font-size:.72rem; font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.ph-status .ph-ind{display:flex; align-items:center; gap:5px}
.ph-status svg{display:block}
.ph-home{
  position:absolute; bottom:calc(var(--rail) + var(--bezel) + 8px); left:50%; transform:translateX(-50%);
  width:118px; height:5px; border-radius:3px; background:var(--ink); opacity:.26;
}
.phone-notch{display:none}   /* superseded by .ph-island; play() still emits one */
/* Messages-app chrome. Geometry follows the shipped RCS demonstration embeds: 60px of
   top padding to clear the status bar, hairline rules, iOS blue affordances. */
.phone-top{
  padding:46px 12px 9px; display:flex; align-items:center; gap:9px; background:var(--surface);
  border-bottom:1px solid var(--line); position:relative; z-index:3;
}
.ph-back{display:flex; align-items:center; gap:1px; color:#007AFF; flex:none; margin-right:-2px}
.ph-back i{font-style:normal; font-size:.8rem; font-weight:600}
.ph-hdr-act{margin-left:auto; color:#007AFF; flex:none; display:flex}
.phone-top .who span .live-dot{
  width:5px; height:5px; border-radius:50%; background:var(--good); display:inline-block; margin-right:5px;
}
.ph-datestamp{
  align-self:center; text-align:center; font-size:.66rem; color:var(--ink-3); padding:2px 0 4px;
  letter-spacing:.01em; max-width:100%;
}
.ph-datestamp b{color:var(--ink-2); font-weight:600}

/* Composer. Replaces the invented carrier bar: a phone shows a message field here,
   and the placeholder is where the channel names itself. */
.ph-composer{
  display:flex; align-items:center; gap:8px; padding:8px 10px 12px; background:var(--surface);
  border-top:1px solid var(--line); flex:none; position:relative; z-index:3;
}
.ph-attach{color:#8E8E93; flex:none; display:flex}
.ph-input{
  flex:1; min-width:0; display:flex; align-items:center; gap:7px;
  border:1px solid var(--line-2); border-radius:999px; padding:6px 9px 6px 12px;
}
.ph-input > span:first-child{
  flex:1; min-width:0; font-size:.76rem; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ph-input-ic{color:#8E8E93; flex:none; display:flex}
.wa-mode .ph-composer{background:var(--surface)}

/* Email (an inbox) and Voice (a call screen) are not Messages threads, so they keep a
   caption strip instead of a composer. */
.carrier-bar{
  padding:7px 13px 20px; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); border-top:1px solid var(--line); background:var(--surface); display:flex;
  justify-content:space-between; flex:none;
}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-weight:700; font-size:.85rem;
}
.phone-top .who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.phone-top .who b{font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:5px; min-width:0}
.phone-top .who .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.phone-top .who span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone-top .who span{font-size:.66rem; color:var(--ink-3); font-family:var(--mono)}
.verified{color:var(--blue); flex:none}
.wa-mode .verified{color:#25D366}
.wa-mode .avatar{background:#128C7E}
.avatar.brand, .ci-avatar.brand{background:transparent; padding:0; overflow:hidden}
.avatar.brand img, .ci-avatar.brand img{width:100%; height:100%; display:block; object-fit:cover; border-radius:50%}
.ci-avatar.brand{border-radius:50%}

.thread-body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 13px 20px; display:flex; flex-direction:column; gap:9px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
/* The message thread scrolls as a plain block and does its layout one level in.
   When the scroller is itself the flex column, items shrink to fit instead of
   overflowing (messages get crushed, nothing scrolls), and an auto top margin
   puts the overflow above the scroll origin where it cannot be reached. */
.thread-body.has-inner{display:block; padding:0}
.thread-inner{
  display:flex; flex-direction:column; gap:9px;
  min-height:100%; justify-content:flex-end;   /* short threads sit on the bottom */
  padding:16px 13px 20px;
}
.thread-inner > *{flex:none; max-width:100%}                   /* never shrink a message to fit */
.thread-body::-webkit-scrollbar{width:5px}
.thread-body::-webkit-scrollbar-track{background:transparent}
.thread-body::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px}
/* messages stack from the bottom once the thread is shorter than the screen, so an
   early step doesn't sit marooned at the top of a tall display */
.wa-mode .thread-body{background:#ECE5DD}

.bubble{
  max-width:82%; padding:9px 14px; border-radius:20px 20px 20px 6px; font-size:.84rem; line-height:1.4;
  background:var(--surface); color:var(--ink); align-self:flex-start; border:1px solid var(--line);
  animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both;
}
.bubble.me{
  align-self:flex-end; border-radius:20px 20px 6px 20px; background:var(--blue); color:#fff; border-color:transparent;
}
.wa-mode .bubble{background:var(--surface)}
.wa-mode .bubble.me{background:#D9FDD3; color:#0B2A1B; border-color:transparent}
@keyframes pop{from{opacity:0; transform:translateY(9px) scale(.97)} to{opacity:1; transform:none}}

.meta{
  font-family:var(--mono); font-size:.6rem; color:var(--ink-3); align-self:flex-end;
  display:flex; align-items:center; gap:4px; margin-top:-4px;
}
.meta.read{color:var(--blue)}
.wa-mode .meta.read{color:#34B7F1}

/* rich card */
.card{
  align-self:flex-start; max-width:88%; border-radius:16px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow); animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both;
}
.card-art{height:106px; position:relative; display:grid; place-items:center; overflow:hidden}
.card-body{padding:11px 13px 12px}
.card-body b{display:block; font-size:.86rem; font-weight:600; margin-bottom:3px}
.card-body p{font-size:.76rem; color:var(--ink-2); line-height:1.45}
.card-acts{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.card-acts button{
  border:0; border-bottom:1px solid var(--line); background:none; padding:10px; font-size:.79rem;
  font-weight:600; color:var(--blue); text-align:center; transition:.15s;
}
.card-acts button:last-child{border-bottom:0}
.card-acts button:hover{background:var(--blue-soft)}
.wa-mode .card-acts button{color:#0B7A5F}

.chips{display:flex; gap:6px; flex-wrap:wrap; align-self:flex-start; max-width:88%; animation:pop .3s ease both}
.bubble .sms-link{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
.sms-opts{align-self:flex-start; max-width:88%; display:flex; flex-direction:column; gap:2px; padding:2px 0 2px 6px; animation:pop .3s ease both}
.sms-opts-lead{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.sms-opts button{border:0; background:none; padding:3px 0; text-align:left; font:inherit; font-size:.78rem; color:var(--ink-2); cursor:pointer; display:flex; gap:8px; align-items:baseline}
.sms-opts button b{font-family:var(--mono); font-weight:600; color:var(--ink); min-width:1.1em}
.sms-opts button:hover{color:var(--ink)}
.sms-opts button:disabled{color:var(--ink-3); cursor:default}
.sms-opts button.is-taken{color:var(--ink); text-decoration:underline}
.chips{flex-wrap:wrap; padding-bottom:2px}
.chip-reply{
  border:1px solid var(--line-2); color:var(--ink); background:var(--surface); border-radius:18px;
  padding:0 14px; height:34px; font-size:.76rem; font-weight:600; flex:none; cursor:pointer;
  transition:.15s ease;
}
.chip-reply:first-child{border-color:var(--blue); background:var(--blue); color:#fff}
.chip-reply:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.card-acts button{cursor:pointer}
.card-acts button.is-taken{color:var(--ink-3); background:var(--surface-2)}
.card-acts button:disabled{cursor:default}
.wa-mode .chip-reply{border-color:#25D366; color:#0B7A5F}

.typing{display:flex; gap:4px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:17px 17px 17px 5px; align-self:flex-start; width:fit-content}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

.sms-note{font-size:.64rem; color:var(--ink-3); font-family:var(--mono); align-self:flex-start; padding-left:4px}

/* kpi pops */
.kpi-pop{
  position:absolute; right:-14px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:9px 13px; box-shadow:var(--shadow-lg); z-index:6;
  animation:kpiIn .5s cubic-bezier(.2,.9,.3,1.3) both; pointer-events:none;
}
.kpi-pop b{display:block; font-family:var(--mono); font-size:1.05rem; color:var(--blue); letter-spacing:-.02em}
.kpi-pop span{font-size:.66rem; color:var(--ink-3); white-space:nowrap}
@keyframes kpiIn{from{opacity:0; transform:translateX(14px) scale(.9)} to{opacity:1; transform:none}}

/* ============ CARDS / GRIDS ============ */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}

.uc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px 22px;
  text-decoration:none; display:flex; flex-direction:column; gap:11px; transition:.18s ease; position:relative;
}
.uc:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.uc .who{font-family:var(--mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--blue)}
.uc h3{font-size:1.15rem}
.uc p{font-size:.9rem; color:var(--ink-2); line-height:1.55}
.uc .jobs{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.uc .jobs span{font-size:.72rem; padding:4px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2)}
.uc .pf{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-2);
  display:flex; gap:8px; align-items:baseline;
}
.uc .pf b{font-family:var(--mono); color:var(--ink); font-weight:500; font-size:.95rem}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.stat b{display:block; font-family:var(--mono); font-size:2rem; letter-spacing:-.03em; color:var(--blue); font-weight:500}
.stat span{font-size:.85rem; color:var(--ink-2); display:block; margin-top:4px}
.stat em{display:block; font-style:normal; font-family:var(--mono); font-size:.65rem; color:var(--ink-3); margin-top:9px; text-transform:uppercase; letter-spacing:.09em}
.on-deep .stat{background:var(--deep-2); border-color:var(--on-deep-line)}
.on-deep .stat b{color:var(--blue-on-deep)}
.on-deep .uc .who, .on-deep .pf b{color:var(--blue-on-deep)}
.on-deep .stat span{color:var(--on-deep-2)}
.on-deep .stat em{color:var(--on-deep-2); opacity:.7}

/* ============ TABLE ============ */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:860px; font-size:.88rem}
th,td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  position:sticky; top:72px; background:var(--surface-2); font-family:var(--mono); font-weight:500;
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); z-index:2;
}
tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
tbody th small{display:block; font-weight:400; font-size:.72rem; color:var(--ink-3); font-family:var(--mono); margin-top:3px}
td{color:var(--ink-2)}
tr:last-child th,tr:last-child td{border-bottom:0}
.yes{color:var(--good); font-weight:600}
.no{color:var(--ink-3)}

/* ============ FORM CONTROLS ============ */
.calc{display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:34px; align-items:start}
.field{margin-bottom:22px}
.field label{display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; font-weight:500; margin-bottom:9px; gap:12px}
.field label output{font-family:var(--mono); font-size:.95rem; color:var(--blue); font-weight:500; font-variant-numeric:tabular-nums}
.field .hint{font-size:.74rem; color:var(--ink-3); margin-top:7px; line-height:1.45}
input[type=range]{width:100%; accent-color:var(--blue); height:22px}
.segmented{display:flex; gap:6px; flex-wrap:wrap}
.segmented button{
  border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:7px 13px;
  font-size:.79rem; font-weight:500; color:var(--ink-2); transition:.15s; white-space:nowrap;
}
.segmented button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}

.result{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.result-hero{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.result-hero > b{font-family:var(--mono); font-size:clamp(2.1rem,5vw,3.1rem); letter-spacing:-.04em; color:var(--good); font-weight:500; font-variant-numeric:tabular-nums}
.result-hero span b{font-family:var(--font); font-weight:600}
.result-hero span{font-size:.95rem; color:var(--ink-2)}
.bars{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.bar-row{display:grid; grid-template-columns:104px 1fr 110px; gap:12px; align-items:center; font-size:.83rem}
.bar-row .lbl{color:var(--ink-2)}
.bar-track{height:26px; background:var(--surface-2); border-radius:6px; overflow:hidden}
.bar-fill{height:100%; border-radius:6px; transition:width .45s cubic-bezier(.3,.9,.3,1)}
.bar-row .val{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
.assump{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-3); line-height:1.6}
.assump code{font-family:var(--mono); font-size:.95em; color:var(--ink-2)}

/* ============ ARTICLE ============ */
article{max-width:68ch}
article h2{margin-top:24px; font-size:1.6rem}
article h3{margin-top:18px; font-size:1.1rem}
article p{margin-top:17px; color:var(--ink-2); font-size:1.02rem; line-height:1.75}
article ul{margin-top:16px; padding-left:20px; color:var(--ink-2); line-height:1.75}
article li{margin-top:9px}
article strong{color:var(--ink); font-weight:600}
.pull{
  margin:38px 0; padding:22px 26px; border-left:3px solid var(--pop); background:var(--surface);
  border-radius:0 var(--r) var(--r) 0; font-size:1.12rem; line-height:1.55; color:var(--ink); font-weight:500;
}
.byline{display:flex; gap:14px; align-items:center; font-family:var(--mono); font-size:.74rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em; margin-top:20px; flex-wrap:wrap}
.sources{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-3); line-height:1.7}

/* ============ MISC ============ */
.trust-row{display:flex; gap:12px; flex-wrap:wrap}
.badge{
  display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:13px 17px;
}
.on-deep .badge{background:var(--deep-2); border-color:var(--on-deep-line)}
.badge b{font-size:.86rem; font-weight:600; display:block}
.badge span{font-size:.72rem; color:var(--ink-3); display:block; font-family:var(--mono)}
.on-deep .badge span{color:var(--on-deep-2)}

.logos{display:flex; gap:52px; flex-wrap:wrap; align-items:center}
.logos span{font-weight:600; font-size:1.6rem; letter-spacing:-.03em; color:var(--ink-2); white-space:nowrap}

.textin{
  display:flex; align-items:center; gap:22px; background:var(--deep-2); border:1px solid var(--on-deep-line);
  border-radius:var(--r); padding:24px 26px; flex-wrap:wrap;
}
.textin .code{font-family:var(--mono); font-size:1.5rem; letter-spacing:.02em; color:var(--pop-ink); font-weight:500}
.tk{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#8A5A00;
  background:var(--pop); border-radius:4px; padding:2px 6px; vertical-align:middle; font-weight:500;
}

/* the final section of a route needs air before the footer: a phone mockup ending
   flush against it reads as a rendering fault */
.route > section:last-of-type{padding-bottom:clamp(44px,5vw,76px)}
.route > section.on-deep:last-of-type{padding-bottom:clamp(34px,4vw,56px)}
footer.site{background:var(--deep); color:var(--on-deep-2); padding-block:30px 20px; font-size:.87rem; border-top:1px solid var(--on-deep-line)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
footer.site h4{color:var(--on-deep); font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500; margin-bottom:16px}
footer.site a{display:block; color:var(--on-deep-2); text-decoration:none; padding:5px 0}
footer.site a:hover{color:var(--on-deep)}
.foot-bottom{margin-top:28px; padding-top:22px; border-top:1px solid var(--on-deep-line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.78rem}

.route{display:none}
.route.active{display:block; animation:fade .32s ease both}
@keyframes fade{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

.page-head{padding-block:clamp(16px,2vw,26px) clamp(14px,1.6vw,20px); border-bottom:1px solid var(--line)}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .calc{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  nav.main{display:none}
  nav.main.open{
    display:flex; flex-direction:column; align-items:stretch; position:absolute; top:72px; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:14px; gap:2px; box-shadow:var(--shadow-lg);
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  nav.main.open .navbtn{padding:12px 14px; font-size:.98rem}
  .menu-toggle{display:flex}
}
@media (max-width:1260px){ .navbtn{font-size:.86rem; padding:9px 8px} }
@media (max-width:860px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .menu-toggle{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
  .hdr-actions .btn-ghost{display:none}
  thead th{top:0}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:84px 1fr 92px; font-size:.78rem}
  .hero-proof{gap:20px}
}


/* ============ CLARITY BAND ============ */
.plain{
  background:var(--surface); border-block:1px solid var(--line);
}
.plain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.plain-cell{padding:22px 26px 24px; border-left:1px solid var(--line)}
.plain-cell:first-child{border-left:0; padding-left:0}
.plain-cell .k{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:12px;
}
.plain-cell p{font-size:1.02rem; line-height:1.6; color:var(--ink); font-weight:500}
.plain-cell p b{font-weight:600}
.plain-cell small{display:block; margin-top:10px; font-size:.85rem; color:var(--ink-3); line-height:1.55; font-weight:400}
@media (max-width:860px){
  .plain-grid{grid-template-columns:1fr}
  .plain-cell{border-left:0; border-top:1px solid var(--line); padding:24px 0}
  .plain-cell:first-child{border-top:0; padding-top:8px}
}

/* ============ STICKY CTA ============ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--deep); border-top:1px solid var(--on-deep-line);
  border-top:1px solid var(--on-deep-line); padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 -8px 28px -14px rgba(0,0,0,.5);
}
.sticky-cta p{color:var(--on-deep); font-size:.84rem; font-weight:600; line-height:1.3; min-width:0}
.sticky-cta .btn{flex:none; padding:11px 18px}
.sticky-cta span{display:block; color:var(--on-deep-2); font-size:.74rem; font-weight:400}
@media (max-width:860px){ .sticky-cta{display:flex} body{padding-bottom:76px} }
body.book-open .sticky-cta{display:none}

/* ============ BOOK DRAWER ============ */
.book-scrim{
  position:fixed; inset:0; background:rgba(8,14,36,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .26s ease; z-index:90;
}
.book{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--surface);
  border-left:1px solid var(--line); z-index:91; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,.3,1);
  box-shadow:-24px 0 60px -30px rgba(8,14,36,.6);
}
body.book-open .book-scrim{opacity:1; pointer-events:auto}
body.book-open .book{transform:none}
body.book-open{overflow:hidden}
.book-inner{padding:34px 32px 44px}
.book-x{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:1.35rem; line-height:1;
  display:grid; place-items:center;
}
.book-x:hover{background:var(--surface-2); color:var(--ink)}
.book-form{display:flex; flex-direction:column; gap:20px; margin-top:18px}
.bf label{display:block; font-size:.88rem; font-weight:600; margin-bottom:9px; color:var(--ink)}
.bf input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--ground); color:var(--ink); font:inherit; font-size:.94rem;
}
.bf input:focus{border-color:var(--blue); background:var(--surface)}
.bf2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.book .segmented button{font-size:.79rem; padding:7px 13px}
.book-fine{font-size:.76rem; color:var(--ink-3); line-height:1.55; text-align:center}
.book-done{padding-top:34px; text-align:center}
.book-tick{
  width:52px; height:52px; border-radius:50%; background:var(--good); color:#fff;
  display:grid; place-items:center; font-size:1.5rem; margin-inline:auto;
}
@media (max-width:560px){ .bf2{grid-template-columns:1fr} .book-inner{padding:30px 22px 40px} }


/* ==================== MOBILE PASS ==================== */
@media (max-width:900px){
  /* demonstration section: reorder to picker -> live phone -> numbers -> CTA */
  #demoLayout{display:flex !important; flex-direction:column; gap:26px !important}
  #demoLayout > div:first-child{display:contents}
  #demoLayout > div:first-child > #demoPicker{order:1}
  #demoLayout > div:first-child > div:nth-child(2){order:2; margin-top:0 !important}
  #demoLayout .phone-stage{position:static !important; order:3}
  #demoLayout > div:first-child > #demoKpis{order:4; margin-top:0 !important}
  #demoLayout > div:first-child > div:nth-child(4){order:5; margin-top:0 !important}
  #demoLayout > div:first-child > .textin{order:6; margin-top:0 !important}

  /* work page two-up stacks; phone first so the demonstration is what you see */
  #route-work .grid-2{gap:32px !important}
  #route-work .grid-2 > div:last-child{order:-1}
  /* trust section: copy before badges */
  #route-home .on-deep .grid-2{gap:32px !important}
}
@media (max-width:760px){
  .wrap{padding-inline:18px}
  h1{font-size:clamp(2.05rem,8.4vw,2.6rem)}
  h2{font-size:clamp(1.5rem,6.2vw,1.95rem)}
  section{padding-block:26px}
  .hero{padding-block:8px 26px}
  .arch-mark{display:none}
  .hero .lede{font-size:1.03rem}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{justify-content:center; width:100%}
  .hero-proof{gap:18px 26px; margin-top:20px}
  .hero-proof b{font-size:1.15rem}
  .phone{width:100%; max-width:300px}
  .ph-status{padding:0 18px}
  

  /* the mono eyebrows get tight on small screens */
  .eyebrow{font-size:.64rem; letter-spacing:.11em}

  .logos{gap:16px 22px}
  .logos span{font-size:.94rem}

  .textin{padding:20px; gap:14px}
  .textin .code{font-size:1.25rem}

  /* segmented pickers scroll rather than wrap into a tall block */
  .segmented{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-inline:-18px; padding-inline:18px}
  .segmented::-webkit-scrollbar{display:none}
  .segmented button{flex:none}
  .book .segmented{flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0}
  .book .segmented button{flex:0 1 auto}

  .channel-switch button{padding:8px 13px; font-size:.79rem}

  /* buttons go full width so the tap target is unmissable */
  .uc{padding:20px 18px 18px}
  article h2{margin-top:26px; font-size:1.35rem}
  article p{font-size:.98rem}
  .pull{margin:28px 0; padding:18px 20px; font-size:1.02rem}
  .result{padding:20px}
  .result-hero b{font-size:2.2rem}
  .bar-row{grid-template-columns:76px 1fr 84px; gap:9px; font-size:.76rem}
  .assump{font-size:.75rem}
  .page-head{padding-block:34px 26px}
  .foot-bottom{flex-direction:column; gap:8px}
}
@media (max-width:700px){
  /* compare table -> stacked cards */
  .tbl-wrap{border:0; background:transparent; overflow-x:visible}
  table{min-width:0; display:block}
  thead{display:none}
  tbody{display:flex; flex-direction:column; gap:14px}
  tbody tr{
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:18px 18px 6px;
  }
  tbody th{display:block; padding:0 0 14px; border-bottom:1px solid var(--line); white-space:normal}
  tbody td{display:block; padding:13px 0 0; border-bottom:0}
  tbody td::before{
    content:attr(data-label); display:block; font-family:var(--mono); font-size:.62rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
  }
  tbody td:last-child{padding-bottom:16px}
  tr:last-child th{border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .plain-cell p{font-size:.98rem}
  .stat b{font-size:1.7rem}
  .hero-proof{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .hero-proof span{max-width:none}
  .mega-foot{gap:10px; flex-direction:column; align-items:flex-start}
  .btn{padding:12px 20px}
  #route-work .grid-3, #route-home .grid-3{gap:12px}
}
/* mobile nav sheet: full-height, scrollable, mega inline */
@media (max-width:1180px){
  nav.main.open{max-height:calc(100dvh - 72px); overflow-y:auto}
  .mega{position:static; box-shadow:none; padding-block:18px 6px; border-bottom:0; background:transparent}
  .mega-grid{padding-inline:0; gap:4px}
  .mega-card{padding:12px 12px 14px}
  .mega-foot{margin-top:14px; padding:14px 0 0}
}
@media (max-width:760px){
  .result .grid-3{grid-template-columns:repeat(3,1fr) !important; gap:8px !important}
  .result .grid-3 .stat{padding:11px 9px !important}
  .result .grid-3 .stat b{font-size:1.02rem !important; letter-spacing:-.02em}
  .result .grid-3 .stat span{font-size:.66rem !important; line-height:1.35}
}
/* anchored scrolling clears the sticky header */
html{scroll-padding-top:84px}
/* touch targets + no accidental zoom on focus */
@media (hover:none){
  .btn, .navbtn, .segmented button, .channel-switch button{min-height:44px}
  .bf input{font-size:16px}
}


/* ==================== MOTION ==================== */

/* scroll progress, a thread filling as you read */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:70; transform-origin:0 50%;
  transform:scaleX(0); background:linear-gradient(90deg,var(--blue),var(--pop));
  transition:transform .08s linear; pointer-events:none;
}

/* reveal on scroll */
[data-rv]{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.7,.28,1), transform .75s cubic-bezier(.22,.7,.28,1);
  will-change:opacity, transform;
}
[data-rv].in{opacity:1; transform:none}
[data-rv="side"]{transform:translateX(-18px)}
[data-rv="scale"]{transform:translateY(14px) scale(.975)}

/* hero uses the same reveal system as everything else, just faster and staggered */
.hero [data-rv]{transition-duration:.85s}

/* the amber swash wipes in behind the slogan once the headline has landed */
.hero h1 .hl::after{
  content:""; position:absolute; z-index:-1; left:-1px; right:-1px; bottom:.1em; height:.32em;
  background:color-mix(in srgb, var(--pop) 42%, transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .72s cubic-bezier(.3,.85,.3,1) .38s;
}
.hero h1[data-rv].in .hl::after{transform:scaleX(1)}

/* logo marquee */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex; width:max-content; animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .logos{flex:none; padding-right:52px}
@keyframes slide{to{transform:translateX(-50%)}}

/* counting numbers hold their width so nothing reflows */
.count{font-variant-numeric:tabular-nums}

/* use-case cards: a reveal arrow on hover, Twilio-style */
.uc{overflow:hidden}
.uc .go{
  position:absolute; right:18px; top:20px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--blue-soft); color:var(--blue);
  opacity:0; transform:translate(-4px,4px); transition:.24s cubic-bezier(.22,.7,.28,1);
}
.uc:hover .go, .uc:focus-visible .go{opacity:1; transform:none}
.uc .jobs span{transition:background .2s ease, color .2s ease}
.uc:hover .jobs span{background:var(--blue-soft); color:var(--blue)}

/* stat cards lift a touch when they arrive */
.stat{transition:transform .3s cubic-bezier(.22,.7,.28,1), border-color .3s ease}
.stat:hover{transform:translateY(-3px); border-color:var(--line-2)}


/* scroll cue */

/* section headings get a hairline that draws in */
.eyebrow::before{transition:width .6s cubic-bezier(.22,.7,.28,1) .1s}
[data-rv]:not(.in) .eyebrow::before{width:0}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1 !important; transform:none !important}
  .hero h1 .hl::after{transform:scaleX(1) !important; transition:none !important}
  .marquee-track{animation:none}
  .progress{display:none}
}


/* ==================== ROTATING SLOGAN ==================== */
.rot{
  position:relative; display:inline-block; text-align:left; white-space:nowrap;
  transition:width .55s cubic-bezier(.32,.85,.28,1);
  /* clip the words rolling through; the pad keeps descenders off the edge */
  overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em;
}
.mob-brk{display:none}
@media (max-width:640px){
  .mob-brk{display:inline}
  .hero h1{font-size:1.85rem}
}
.rot i{
  font-style:normal; display:inline-block; white-space:nowrap;
  position:absolute; left:0; top:0; opacity:0; transform:translateY(.34em);
  transition:opacity .38s ease, transform .5s cubic-bezier(.32,.85,.28,1);
  pointer-events:none;
}
.rot i.on{position:relative; opacity:1; transform:none; pointer-events:auto}
.rot i.out{opacity:0; transform:translateY(-.34em)}
.rot-measure{position:absolute; visibility:hidden; white-space:nowrap; left:-9999px; top:0; pointer-events:none}

/* ==================== CHANNEL PAGES ==================== */
.backlink{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; margin-bottom:18px;
}
.backlink:hover{color:var(--blue)}

.ch-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px 20px;
  text-decoration:none; display:flex; flex-direction:column; gap:10px; transition:.2s cubic-bezier(.22,.7,.28,1);
  position:relative; overflow:hidden;
}
.ch-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ch, var(--blue));
  transform:scaleY(0); transform-origin:0 0; transition:transform .32s cubic-bezier(.22,.7,.28,1);
}
.ch-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.ch-card:hover::before{transform:scaleY(1)}
.ch-card .glyph{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ch, var(--blue)) 14%, transparent); color:var(--ch, var(--blue));
}
.ch-card b{font-size:1.05rem; font-weight:600}
.ch-card .role{font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ch, var(--blue))}
.ch-card p{font-size:.86rem; color:var(--ink-2); line-height:1.5}
.ch-card .reach{
  margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
}

.fitbox{border:1px solid var(--line); border-radius:var(--r); padding:18px; background:var(--surface)}
.fitbox h4{font-size:.8rem; font-family:var(--mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin-bottom:11px}
.fitbox.good h4{color:var(--good)} .fitbox.bad h4{color:var(--ink-3)}
.fitbox ul{margin:0; padding-left:17px; font-size:.86rem; color:var(--ink-2); line-height:1.65}
.fitbox li{margin-top:6px}
.fitbox li:first-child{margin-top:0}

#chFacts li{display:grid; grid-template-columns:30px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); align-items:start}
#chFacts li:last-child{border-bottom:0}
#chFacts .k{font-family:var(--mono); font-size:.78rem; color:var(--blue); padding-top:2px}
#chFacts .v{font-size:.95rem; color:var(--ink-2); line-height:1.55}

/* email render inside the phone */
.mail{padding:14px 13px; display:flex; flex-direction:column; gap:11px}
.mail-row{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 13px; animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both}
.mail-row .from{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.mail-row .dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none}
.mail-row .from b{font-size:.78rem; font-weight:600}
.mail-row .from span{font-family:var(--mono); font-size:.6rem; color:var(--ink-3); margin-left:auto}
.mail-row .subj{font-size:.8rem; font-weight:600; margin-bottom:3px}
.mail-row .prev{font-size:.74rem; color:var(--ink-3); line-height:1.45}
.mail-hero{height:74px; border-radius:9px; margin:9px 0 0; overflow:hidden}

/* ==================== ENGAGEMENT PHASES ==================== */
.phases{display:grid; grid-template-columns:236px 1fr; gap:30px; margin-top:24px; align-items:start}

.phase-rail{list-style:none; margin:0; padding:0; position:relative}
.phase-rail::before{content:""; position:absolute; left:13px; top:16px; bottom:16px; width:2px; background:var(--line)}
.phase-rail li{position:relative; padding:0 0 0 40px; margin-bottom:6px}
.phase-rail button{
  width:100%; text-align:left; background:none; border:0; padding:11px 12px; border-radius:10px;
  font:inherit; font-size:.9rem; font-weight:500; color:var(--ink-3); cursor:pointer; transition:.2s;
}
.phase-rail button:hover{color:var(--ink); background:var(--surface)}
.phase-rail li .pip{
  position:absolute; left:6px; top:14px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line-2); background:var(--ground); transition:.3s cubic-bezier(.22,.7,.28,1);
}
.phase-rail li.done .pip{border-color:var(--blue); background:var(--blue)}
.phase-rail li.active .pip{border-color:var(--blue); background:var(--surface); transform:scale(1.2)}
.phase-rail li.active button{color:var(--ink); font-weight:600; background:var(--surface); box-shadow:var(--shadow)}
.phase-rail li.active .pip::after{
  content:""; position:absolute; inset:2px; border-radius:50%; background:var(--blue);
  animation:pipPulse 1.6s ease-in-out infinite;
}
@keyframes pipPulse{0%,100%{transform:scale(.5); opacity:.55} 50%{transform:scale(1); opacity:1}}
.phase-rail .timer{
  position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:0 50%; border-radius:2px;
}
.phase-rail li.active .timer{animation:timer var(--phase-ms,5200ms) linear forwards}
@keyframes timer{to{transform:scaleX(1)}}

.phase-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:grid; grid-template-columns:1fr; box-shadow:var(--shadow);
}
.phase-art{height:210px; position:relative; background:var(--panel); display:grid; place-items:center; overflow:hidden}
.phase-art svg{width:min(340px,88%); height:auto; display:block}
.phase-copy{padding:20px 24px 22px}
.phase-num{font-size:.68rem; letter-spacing:.14em; color:var(--blue); display:block; margin-bottom:9px}
.phase-copy h3{font-size:1.3rem; margin-bottom:10px}
.phase-copy p{font-size:.95rem; color:var(--ink-2); line-height:1.6}
.phase-you{
  margin-top:16px !important; padding-top:14px; border-top:1px solid var(--line);
  font-size:.9rem !important; color:var(--ink) !important;
}
.phase-you b{color:var(--blue); font-weight:600}

/* phase scene animations, keyed off .playing */
/* Scenes rest in their FINAL state and animate backwards from the start state.
   If animations never run, reduced motion, a throttled tab, an old engine --
   the drawing is simply there rather than invisible. */
.sc *{transform-box:fill-box}
.playing .sc .fade{animation:scFade .5s ease backwards}
@keyframes scFade{from{opacity:0} to{opacity:1}}
.playing .sc .d1{animation-delay:.1s} .playing .sc .d2{animation-delay:.28s}
.playing .sc .d3{animation-delay:.46s} .playing .sc .d4{animation-delay:.64s}
.playing .sc .d5{animation-delay:.82s} .playing .sc .d6{animation-delay:1s}
.sc .grow{transform-origin:0 50%}
.playing .sc .grow{animation:scGrow .65s cubic-bezier(.3,.85,.3,1) backwards}
@keyframes scGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.sc .rise{transform-origin:50% 100%}
.playing .sc .rise{animation:scRise .7s cubic-bezier(.3,.85,.3,1) backwards}
@keyframes scRise{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.sc .draw{stroke-dasharray:120}
.playing .sc .draw{animation:scDraw .8s cubic-bezier(.4,.8,.3,1) backwards}
@keyframes scDraw{from{stroke-dashoffset:120} to{stroke-dashoffset:0}}
.playing .sc .tick{animation:scTick .45s cubic-bezier(.2,.9,.3,1.5) backwards}
@keyframes scTick{from{opacity:0; transform:scale(.5)} to{opacity:1; transform:scale(1)}}
.playing .sc .fade.grow{animation:scFade .5s ease backwards, scGrow .65s cubic-bezier(.3,.85,.3,1) backwards}
.playing .sc .fade.rise{animation:scFade .5s ease backwards, scRise .7s cubic-bezier(.3,.85,.3,1) backwards}
.playing .sc .fade.draw{animation:scFade .5s ease backwards, scDraw .8s cubic-bezier(.4,.8,.3,1) backwards}
.playing .sc .fade.tick{animation:scFade .5s ease backwards, scTick .45s cubic-bezier(.2,.9,.3,1.5) backwards}
.playing .sc .pulse{animation:scPulse 2s ease-in-out infinite 1s}
@keyframes scPulse{0%,100%{opacity:.35} 50%{opacity:1}}

@media (max-width:900px){
  .phases{grid-template-columns:1fr; gap:20px}
  .phase-rail{display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scrollbar-width:none; margin-inline:-18px; padding-inline:18px}
  .phase-rail::-webkit-scrollbar{display:none}
  .phase-rail::before{display:none}
  .phase-rail li{padding:0; margin:0; flex:none}
  .phase-rail li .pip{display:none}
  .phase-rail button{border:1px solid var(--line-2); border-radius:999px; padding:9px 15px; white-space:nowrap; font-size:.82rem}
  .phase-rail li.active button{border-color:var(--blue); color:var(--blue)}
  .phase-rail .timer{display:none}
  .phase-art{height:172px}
  .phase-copy{padding:20px}
}
@media (max-width:760px){
  #chFacts li{grid-template-columns:26px 1fr; gap:10px}
  .grid-2 .fitbox{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .rot i{transition:none}
  .rot{transition:none}
  .phase-rail li.active .timer{animation:none}
  .phase-rail li.active .pip::after{animation:none}
  .playing .sc *{animation-duration:.001ms !important}
}


/* ==================== CERT BADGES ==================== */
.cert{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 18px; display:flex; flex-direction:column; gap:5px;
  border-top:3px solid var(--blue);
}
.cert-mark{font-family:var(--mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue)}
.cert b{font-size:1.3rem; font-weight:600; letter-spacing:-.02em}
.cert-sub{font-size:.8rem; color:var(--ink-3); line-height:1.5; margin-top:4px}

/* ==================== NUMBERED CLAIM LIST ==================== */
.sec-list{list-style:none; margin:0; padding:0; counter-reset:sl}
.sec-list li{
  counter-increment:sl; position:relative; padding:14px 0 14px 42px;
  border-bottom:1px solid var(--line); font-size:.94rem; color:var(--ink-2); line-height:1.55;
}
.sec-list li:last-child{border-bottom:0}
.sec-list li::before{
  content:counter(sl,decimal-leading-zero); position:absolute; left:0; top:15px;
  font-family:var(--mono); font-size:.76rem; color:var(--blue);
}
.sec-list li b{color:var(--ink); font-weight:600}
.on-deep .sec-list li{border-color:var(--on-deep-line); color:var(--on-deep-2)}
.on-deep .sec-list li b{color:var(--on-deep)}

/* ==================== FLAGGED PLACEHOLDER ==================== */
.flagbox{
  margin-top:22px; background:color-mix(in srgb, var(--pop) 11%, var(--surface));
  border:1px solid color-mix(in srgb, var(--pop) 45%, var(--line));
  border-left:3px solid var(--pop); border-radius:0 var(--r) var(--r) 0; padding:18px 22px;
}
.flagbox-tag{
  display:inline-block; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:#7A4F00; background:var(--pop); border-radius:4px;
  padding:3px 8px; font-weight:500; margin-bottom:10px;
}
.flagbox p{font-size:.88rem; color:var(--ink-2); line-height:1.6; max-width:76ch}

/* ==================== LEADERSHIP ==================== */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.team-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; display:flex; align-items:center; gap:16px; transition:.2s cubic-bezier(.22,.7,.28,1);
}
.team-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.team-portrait{
  width:64px; height:64px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--surface-2); position:relative;
}
.team-card .role{font-size:.98rem; font-weight:600; display:block; line-height:1.3}
.team-card .name{
  font-family:var(--mono); font-size:.7rem; color:var(--ink-3); display:block; margin-top:6px;
  letter-spacing:.06em;
}

/* ==================== FOOTER SOCIAL ==================== */
.social-row{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap}
.social{
  display:inline-grid !important; place-items:center; width:36px; height:36px;
  color:var(--on-deep-2) !important; background:var(--surface);
  border:1px solid var(--on-deep-line); border-radius:50%; padding:0 !important;
  text-decoration:none; transition:.18s ease;
}
.social:hover{border-color:var(--blue); color:var(--blue) !important; transform:translateY(-2px)}
.foot-legal{display:flex; gap:20px; flex-wrap:wrap}
.foot-legal a{color:var(--on-deep-2); text-decoration:none; border-bottom:1px solid transparent}
.foot-legal a:hover{color:var(--blue); border-bottom-color:currentColor}

/* ==================== QUICK ROI BAND ==================== */
.quick{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.quick .field label{color:var(--on-deep)}
.quick .field label output{color:var(--pop)}
.quick input[type=range]{accent-color:var(--pop)}
.quick-out{
  background:var(--deep-2); border:1px solid var(--on-deep-line); border-radius:var(--r);
  padding:28px; display:flex; flex-direction:column; align-items:flex-start;
}
.quick-label{font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-2)}
.quick-out b{
  font-family:var(--mono); font-size:clamp(2.3rem,5vw,3.4rem); letter-spacing:-.04em;
  color:var(--pop); font-weight:500; font-variant-numeric:tabular-nums; line-height:1.05; margin-top:8px;
}
.quick-sub{font-size:.85rem; color:var(--on-deep-2); line-height:1.5; margin-top:10px; max-width:38ch}

@media (max-width:900px){
  .team{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:1fr; gap:28px}
}
@media (max-width:620px){
  .team{grid-template-columns:1fr}
  .cert{padding:16px}
}


/* ==================== GANTT ==================== */
.gantt{margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px 18px; overflow-x:auto}
.gantt-scale,.gantt-row{display:grid; grid-template-columns:repeat(7,minmax(64px,1fr)); align-items:center; min-width:560px}
.gantt-scale{padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:12px}
.gantt-scale span{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.gantt-row{margin-top:8px; position:relative}
.gantt-row::before{
  content:""; grid-column:var(--a)/var(--b); grid-row:1;
  height:40px; border-radius:8px; background:color-mix(in srgb, var(--blue) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 42%, transparent);
}
.gantt-row.cont::before{
  background:repeating-linear-gradient(115deg, color-mix(in srgb,var(--pop) 18%, transparent) 0 8px, transparent 8px 16px);
  border-color:color-mix(in srgb, var(--pop) 50%, transparent);
}
.gantt-row b,.gantt-row span{grid-row:1; z-index:1; pointer-events:none}
.gantt-row b{grid-column:var(--a); padding-left:12px; font-size:.88rem; font-weight:600; white-space:nowrap}
.gantt-row span{grid-column:var(--a)/var(--b); justify-self:end; padding-right:12px; font-family:var(--mono); font-size:.66rem; color:var(--ink-3); white-space:nowrap}
.gantt-note{font-size:.7rem; color:var(--ink-3); margin-top:12px; line-height:1.55}

/* ==================== PHASE RAIL EXTRAS ==================== */
.phase-rail button{display:flex; flex-direction:column; gap:3px}
.phase-rail .pd{font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.phase-rail li.active .pd{color:var(--blue)}
.phase-meta{display:flex; align-items:center; gap:12px; margin-bottom:9px}
.phase-num{margin-bottom:0 !important}
.phase-dur{
  font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
  background:var(--surface-2); border-radius:999px; padding:4px 10px;
}
.phase-art{height:250px}
.phase-art svg{width:min(430px,94%)}

/* ==================== RELEASE TIMELINE ==================== */
.rel{display:flex; flex-direction:column; gap:0}
.rel-item{display:grid; grid-template-columns:170px 1fr; gap:30px; padding:26px 0; border-top:1px solid var(--line)}
.rel-item:first-child{border-top:0; padding-top:6px}
.rel-meta{display:flex; flex-direction:column; gap:7px; position:sticky; top:96px; align-self:start}
.rel-v{
  font-size:1.15rem; font-weight:500; color:var(--blue); letter-spacing:-.02em;
  border-left:3px solid var(--blue); padding-left:11px;
}
.rel-date{font-size:.76rem; color:var(--ink-2); padding-left:14px}
.rel-date em{font-style:normal; color:#8A5A00; background:var(--pop); border-radius:3px; padding:0 4px; font-size:.9em}
.rel-kind{font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding-left:14px}
.rel-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.rel-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:0}
.rel-list li{padding:16px 0; border-top:1px solid var(--line)}
.rel-list li b{display:block; font-size:.98rem; font-weight:600; margin-bottom:6px}
.rel-list li p{font-size:.9rem; color:var(--ink-2); line-height:1.6}
.rel-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.rel-tags span{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase;
  background:var(--surface-2); color:var(--ink-2); border-radius:999px; padding:4px 9px;
}

@media (max-width:860px){
  .rel-item{grid-template-columns:1fr; gap:16px; padding:26px 0}
  .rel-meta{position:static; flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap}
  .rel-date,.rel-kind{padding-left:0}
  .phase-art{height:190px}
}
@media (max-width:760px){
  .gantt{padding:16px}
  .phase-rail button{gap:2px}
}


/* ==================== HERO PROOF ROW ==================== */
.hero-proof{display:grid; grid-template-columns:1fr; gap:30px; align-items:start}
.hp-stat b{display:block; font-family:var(--mono); font-size:1.5rem; font-weight:500; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px}
.hp-stat span{font-size:.92rem; color:var(--ink-2); line-height:1.55; display:block; max-width:46ch}
.hero-proof .hp-badge{display:flex; flex-direction:row; align-items:center; gap:13px; text-align:left}
.hp-badge svg{flex:none; border-radius:9px}
.hp-badge b{display:block; font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.25}
.hp-badge span{display:block; font-size:.78rem; color:var(--ink-3); line-height:1.4; margin-top:2px}
@media (max-width:760px){
  .hero-proof{grid-template-columns:1fr; gap:22px}
  .hp-stat b{font-size:1.35rem}
}

/* ==================== AMBER EYEBROW ==================== */
.eyebrow-pop{color:var(--pop-ink) !important; font-weight:700}
.eyebrow-pop::before{background:color-mix(in srgb, var(--pop) 60%, transparent) !important}

/* ==================== PROOF LINE ==================== */
.uc .pf{flex-wrap:wrap; white-space:normal; font-size:.78rem; row-gap:2px}
.uc .pf i{font-style:normal; color:var(--ink-3); margin-inline:1px}
.uc .pf .cl, .uc .who .cl{color:var(--pop-ink); font-weight:600}

/* ==================== TRUST BADGES ==================== */
.badge{flex-direction:column; align-items:flex-start; gap:5px}
.badge-t{
  font-family:var(--mono); font-size:1rem; font-weight:500; color:var(--pop-ink);
  letter-spacing:-.01em; line-height:1.25;
}
.badge-s{font-size:.78rem; color:var(--on-deep-2); line-height:1.45; font-family:var(--font)}
.badge.badge-g2{flex-direction:row; align-items:center; gap:12px}
.badge-g2 svg{flex:none; border-radius:8px}

/* ==================== BIGGER MARQUEE ==================== */
.marquee{padding-block:6px}
@media (max-width:760px){
  .logos{gap:30px}
  .logos span{font-size:1.2rem}
}


/* ==================== WHITE THEME: dark diagram panel ==================== */
.dpanel{
  background:var(--surface); border-radius:var(--r); padding:24px 20px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.dpanel svg{display:block}

/* the RCS benchmark block sits inside an .on-deep band, so it needs its own edge */
.on-deep .on-deep{border:1px solid var(--on-deep-line)}

/* stat cards on a tinted band: white cards, blue figures */
.on-deep .stat b{color:var(--blue)}
.on-deep .stat span{color:var(--ink-2)}
.on-deep .stat em{color:var(--ink-3); opacity:1}
.on-deep .lede{color:var(--ink-2)}
.on-deep .eyebrow{color:var(--ink-3)}
.on-deep .eyebrow::before{background:var(--line-2)}
.on-deep .badge{box-shadow:var(--shadow)}
.on-deep .badge-s{color:var(--ink-2)}

/* text-in block: white card on the tinted band */
.textin{box-shadow:var(--shadow)}
.textin p{color:var(--ink-2) !important}
.textin p b.code{color:var(--pop-ink)}
.textin .mono{color:var(--ink-3) !important}

/* sticky CTA is now a light bar */
.sticky-cta{box-shadow:0 -6px 24px -16px rgba(17,30,72,.35)}
.sticky-cta p{color:var(--ink)}
.sticky-cta span{color:var(--ink-3)}

/* footer on a tint */
footer.site h4{color:var(--ink)}
footer.site a{color:var(--ink-2)}
footer.site a:hover{color:var(--blue)}
footer.site .foot-bottom{border-top-color:var(--on-deep-line)}

/* ghost buttons on the tinted band */
.on-deep .btn-ghost{border-color:var(--line-2); color:var(--ink)}
.on-deep .btn-ghost:hover{border-color:var(--blue); color:var(--blue)}

/* the security page cert cards */
.cert{background:var(--surface); box-shadow:var(--shadow)}

/* thread rail dot ring matches whichever ground it sits on */
@media (min-width:1000px){
  .on-deep .thread::after{box-shadow:0 0 0 4px var(--deep)}
  .on-deep .thread::before{background:linear-gradient(180deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)}
}


/* ==================== SECURITY PAGE ==================== */
.cert{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
  border-top:3px solid var(--blue);
}
.cert-mark{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.cert b{font-size:1.12rem; font-weight:600; letter-spacing:-.01em}
.cert-sub{font-size:.83rem; color:var(--ink-2); line-height:1.5}


.sec-timeline{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 34px}
.sec-timeline li{display:grid; grid-template-columns:88px 1fr; gap:16px; padding:15px 0; border-top:1px solid var(--line); align-items:start}
.st-when{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue);
  padding-top:3px; white-space:nowrap;
}
.sec-timeline b{display:block; font-size:.95rem; font-weight:600; margin-bottom:4px}
.sec-timeline p{font-size:.86rem; color:var(--ink-2); line-height:1.5}

@media (max-width:860px){
  .sec-timeline{grid-template-columns:1fr; gap:0}
  .sec-timeline li{grid-template-columns:76px 1fr; gap:12px}
}


/* ==================== UPCOMING CHANNELS ==================== */
.upcoming{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.upcoming span{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  border:1px dashed var(--line-2); color:var(--ink-3);
  border-radius:999px; padding:9px 16px; background:var(--surface);
}

/* ==================== CHANNEL CARDS ==================== */
.ch-card .reach{min-height:0; font-size:.74rem; letter-spacing:.04em}
.ch-card p{min-height:3.2em}

/* ==================== VOICE PREVIEW ==================== */
.callscreen{align-items:center; justify-content:center; text-align:center; gap:0; padding:30px 20px}
.call-ring{position:relative; width:74px; height:74px; margin-bottom:22px}
.call-ring span{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--blue);
  opacity:0; animation:ring 2.4s ease-out infinite;
}
.call-ring span:nth-child(2){animation-delay:.8s}
.call-ring span:nth-child(3){animation-delay:1.6s}
@keyframes ring{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(1); opacity:0}}
.call-to{font-size:1.05rem; font-weight:600; color:var(--ink)}
.call-sub{font-family:var(--mono); font-size:.7rem; color:var(--ink-3); margin-top:4px}
.call-note{font-size:.76rem; color:var(--ink-2); margin-top:16px; line-height:1.5; max-width:24ch}
@media (prefers-reduced-motion:reduce){ .call-ring span{animation:none; opacity:.35} }

/* ==================== CHANNEL RECOMMENDATION ==================== */
.chrec{
  display:grid; grid-template-columns:1.5fr 1fr; gap:0; margin-top:30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow);
}
.chrec-main{padding:22px 24px; border-left:3px solid var(--ch, var(--blue))}
.chrec-also{padding:22px 24px; background:var(--surface-2); border-left:1px solid var(--line)}
.chrec-label{
  display:block; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.chrec-name{
  display:inline-flex; align-items:center; gap:9px; font-size:1.25rem; font-weight:600;
  color:var(--ch, var(--blue)); text-decoration:none; letter-spacing:-.01em;
}
.chrec-name:hover{text-decoration:underline}
.chrec-main p{margin-top:10px; font-size:.9rem; color:var(--ink-2); line-height:1.55}
.chrec-chip{
  display:inline-block; margin:0 6px 6px 0; padding:6px 13px; border-radius:999px;
  border:1px solid var(--ch, var(--line-2)); color:var(--ch, var(--ink-2));
  font-size:.79rem; font-weight:600; text-decoration:none;
}
.chrec-chip:hover{background:color-mix(in srgb, var(--ch, var(--blue)) 10%, transparent)}
.chrec-note{margin-top:12px; font-size:.78rem; color:var(--ink-3); line-height:1.5}

.ch-mini{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:.18s;
}
.ch-mini:hover{border-color:var(--ch, var(--blue)); transform:translateY(-2px)}
.ch-mini .glyph{color:var(--ch, var(--blue))}
.ch-mini b{font-size:.95rem; font-weight:600; color:var(--ink)}
.ch-mini span:last-child{font-family:var(--mono); font-size:.68rem; color:var(--ink-3)}

/* ==================== LEADERSHIP ==================== */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px; max-width:760px}
.tm-face img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
.strat-team{grid-template-columns:repeat(6,minmax(0,1fr)); max-width:none; gap:18px 14px; margin-top:14px}
.strat-tm .tm-face{width:128px; height:128px; margin-inline:auto}
.strat-tm figcaption b{min-height:1.3em}
.strat-tm figcaption .mono{min-height:2.6em; line-height:1.3}
.strat-tm figcaption .where{display:block; font-size:.74rem; color:var(--ink-3); margin-top:3px; min-height:1.25em}
.strat-tm .bio{margin-top:8px; text-align:left}
.strat-tm .bio summary{cursor:pointer; font-size:.78rem; font-weight:600; color:var(--blue); text-align:center; list-style:none}
.strat-tm .bio summary::-webkit-details-marker{display:none}
.strat-tm .bio summary::after{content:' +'} .strat-tm .bio[open] summary::after{content:' \2212'}
.strat-tm .bio p{font-size:.82rem; color:var(--ink-2); line-height:1.5; margin-top:8px}
.strat-tm .bio .strat-supports{font-weight:600; color:var(--ink) !important}
@media (max-width:1000px){ .strat-team{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .strat-team{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none} .strat-tm .tm-face{width:104px; height:104px} }
@media (max-width:560px){ .team{grid-template-columns:1fr; max-width:260px} }
.tm{margin:0; text-align:center}
.tm-face{
  display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:50%;
  background:linear-gradient(150deg, color-mix(in srgb, var(--blue) 16%, transparent), color-mix(in srgb, var(--pop) 14%, transparent));
  border:1px solid var(--line); margin-bottom:12px;
}
.tm-face span{font-family:var(--font); font-size:1.6rem; font-weight:700; color:var(--blue)}
.tm figcaption b{display:block; font-size:.95rem; font-weight:600}
.tm figcaption .mono{display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}

@media (max-width:900px){
  .chrec{grid-template-columns:1fr}
  .chrec-also{border-left:0; border-top:1px solid var(--line)}
  .team{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){ .team{grid-template-columns:repeat(2,1fr)} }


.ast{color:var(--pop-ink); font-weight:700; font-size:.62em; vertical-align:super; margin-left:1px}
.footnote{
  margin-top:18px; font-size:.76rem; color:var(--ink-3); line-height:1.55; max-width:78ch;
}
.footnote .ast{vertical-align:baseline; font-size:.9em; margin-right:2px}


/* ==================== CALLOUT RAIL (outside the phone) ==================== */
/* The callouts sit BELOW the phone, not beside it: on both the home demonstration and the
   use-case page the phone is the right-hand column, so anything placed to its
   left lands on top of the copy. */
.phone-stage{position:relative}
.kpi-rail{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  width:100%; margin-top:20px; pointer-events:none;
}
.kpi-rail:empty{margin-top:0}
.kpi-rail .kpi-pop{
  position:relative; right:auto; top:auto; flex:1 1 130px; max-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:var(--shadow-lg); text-align:left;
  animation:kpiRise .55s cubic-bezier(.22,.85,.3,1.05) both;
}
.kpi-rail .kpi-pop::after{
  content:""; position:absolute; top:-7px; left:22px; width:12px; height:12px;
  background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.kpi-rail .kpi-pop b{
  display:block; font-family:var(--mono); font-size:1.1rem; color:var(--blue);
  letter-spacing:-.02em; font-weight:500;
}
.kpi-rail .kpi-pop span{
  display:block; font-size:.7rem; color:var(--ink-3); line-height:1.4;
  white-space:normal; margin-top:3px;
}
@keyframes kpiRise{
  from{opacity:0; transform:translateY(-10px) scale(.94)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .kpi-rail .kpi-pop{animation:none} }

/* ==================== UPCOMING CHANNEL CARDS ==================== */
.upcoming .ch-card.is-soon{
  background:var(--surface-2); border-style:dashed; box-shadow:none; cursor:default;
  opacity:.85;
}
.upcoming .ch-card.is-soon:hover{transform:none; box-shadow:none; border-color:var(--line-2)}
.upcoming .ch-card.is-soon::before{display:none}
.upcoming .ch-card.is-soon .glyph{background:var(--surface); color:var(--ink-3)}
.upcoming .ch-card.is-soon b{color:var(--ink-2)}
.upcoming .ch-card.is-soon p{color:var(--ink-3)}
.upcoming .ch-card.is-soon .reach{
  color:var(--ink-3); font-style:normal; letter-spacing:.09em; text-transform:uppercase; font-size:.62rem;
}


/* five-up grids collapse in stages */
@media (max-width:1180px){ .grid-5{grid-template-columns:repeat(3,1fr)} .mega-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .grid-5{grid-template-columns:repeat(2,1fr)} .mega-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .grid-5{grid-template-columns:1fr} }
.grid-5 .uc{padding:18px 16px 16px}
.grid-5 .uc h3{font-size:1.02rem}
.grid-5 .uc p{font-size:.85rem}
.grid-5 .uc .jobs span{font-size:.68rem; padding:3px 8px}
.grid-5 .uc .pf{font-size:.74rem}


/* mega menu: category labels bold and single-line */
.mega-card .who{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mega-card b{font-weight:700}


/* ==================== MOBILE CORRECTNESS ====================
   A flex or grid item defaults to min-width:auto, so a scrollable child
   refuses to shrink below its content and drags the whole page wider.
   Every horizontally-scrolling region needs min-width:0 as well as overflow. */
.segmented,
.phase-rail,
.gantt,
.tbl-wrap,
.dpanel,
.marquee,
.calc > *,
#demoLayout > *,
#demoLayout > div > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-5 > *,
.hero-grid > *{min-width:0}

/* scroll regions must actually scroll rather than expand */
.segmented{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (max-width:760px){
  /* long CTA labels were running past the viewport edge */
  .btn{white-space:normal; text-align:center; padding:12px 18px; line-height:1.3}
  .hero-cta .btn, .quick-out .btn{width:100%; justify-content:center}

  /* the rotating word can be wider than the column at small sizes */
  .hero h1{font-size:clamp(1.65rem,7.4vw,2.3rem)}
  .rot{max-width:100%}
  .rot i{white-space:normal}

  /* forms and sliders */
  .calc{gap:22px}
  .field label{flex-wrap:wrap; gap:4px}
  input[type=range]{max-width:100%}

  /* tap targets */
  .btn, .navbtn, .segmented button, .channel-switch button, .phase-rail button{min-height:44px}
}

@media (max-width:520px){
  .hero h1{font-size:clamp(1.5rem,8vw,2rem)}
  .logos{gap:22px}
  .logos span{font-size:1.05rem}
  .phone{width:100%; max-width:272px; --r-out:46px; --rail:5px; --bezel:3px}
  .ph-island{width:84px; height:24px}
  .ph-home{width:104px}
  .phone-top{padding-top:40px}
  .kpi-rail .kpi-pop{flex:1 1 100%; max-width:none}
  .textin{padding:16px; gap:10px}
  .textin .code{font-size:1.15rem}
  .foot-grid{gap:22px}
  .result{padding:16px}
  .cert{padding:14px}
  .wrap{padding-inline:16px}
}

@media (hover:none){
  .logo{padding-block:9px}   /* 26px mark -> 44px target */
}

/* last-resort guard: nothing may create a horizontal scrollbar on the page */
html, body{overflow-x:clip}


/* ==================== ALWAYS SHIPPING BAND ==================== */
.ship{display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start}
.ship-side{display:flex; flex-direction:column; gap:12px}
.ship-stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.ship-stat b{
  display:block; font-family:var(--mono); font-size:1.35rem; color:var(--blue);
  letter-spacing:-.02em; font-weight:500;
}
.ship-stat span{display:block; font-size:.8rem; color:var(--ink-2); line-height:1.45; margin-top:3px}
@media (max-width:860px){ .ship{grid-template-columns:1fr; gap:22px} }

/* ============ MOBILE: nothing sits half off the edge ============ */
@media (max-width:640px){
  .segmented{flex-wrap:wrap !important; overflow:visible !important; margin-inline:0; padding-inline:0}
  .segmented button{flex:0 1 auto; white-space:normal; text-align:center}
  .chips{flex-wrap:wrap}
  .channel-switch{flex-wrap:wrap; justify-content:center}
  .res-cta{flex-direction:column; align-items:stretch}
  .res-cta .btn{justify-content:center; width:100%}
  .rz-cta{grid-template-columns:1fr}
  .art-inline{flex-direction:column; align-items:stretch}
  .art-inline .btn{justify-content:center}
  .anat-list li{padding-left:46px}
}
/* Mobile hero: headline, button, phone, then the badges. The badges stay visible but are not
   the first screen. The text column dissolves into the grid so its children can be reordered. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .hero-grid > div:first-child{display:contents}
  .hero-grid .eyebrow{order:1} .hero-grid h1{order:2} .hero-grid .lede{order:3} .hero-grid .hero-cta{order:4}
  .hero-grid .phone-stage{order:5; margin-top:6px}
  .hero-grid .hero-badges{order:6; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 14px; justify-items:center; align-items:start; margin-top:4px; padding-top:20px; border-top:1px solid var(--line)}
  .hero-grid .hb{align-items:center; text-align:center; gap:7px; font-size:.66rem; line-height:1.2}
  .hero-grid .hb img{height:42px} .hero-grid .hb svg{width:38px; height:38px}
}
@media (max-width:640px){
  .hero-grid .hero-badges{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 10px}
  .hero-grid .hb img{height:36px} .hero-grid .hb svg{width:32px; height:32px} .hero-grid .hb{font-size:.7rem}
}
@media (max-width:520px){ .hdr-actions .hdr-long{display:none} .hdr-actions .btn{padding-inline:16px} .bar{gap:10px; padding:0 14px} }
/* ---- phone layouts: article flow diagram stacks, team grids center ---- */
@media (max-width:640px){
  .rz-flow{grid-template-columns:1fr !important; gap:8px !important; align-items:stretch}
  .rz-node{text-align:left; display:flex; align-items:baseline; gap:10px}
  .rz-node span{max-width:none; margin-top:0}
  .rz-arrows{height:26px !important; transform:none !important; display:flex; align-items:center; justify-content:center}
  .rz-arrows i{display:none}
  .rz-arrows::before{content:''; width:2px; height:100%; background:var(--line-2); display:block}
  .rz-arrows::after{content:''; position:absolute; bottom:0; left:50%; width:8px; height:8px; margin-left:-5px; border-right:2px solid var(--line-2); border-bottom:2px solid var(--line-2); transform:rotate(45deg)}
}
@media (max-width:900px){
  .team, .strat-team{display:flex !important; flex-wrap:wrap; justify-content:center; gap:26px 14px; max-width:none; margin-inline:auto}
  .team > .tm{flex:0 0 calc(50% - 7px); max-width:220px}
  .tm-face, .strat-tm .tm-face{width:150px !important; height:150px !important; margin-inline:auto}
  .tm figcaption b{font-size:1.02rem}
}
@media (max-width:360px){ .tm-face, .strat-tm .tm-face{width:128px !important; height:128px !important} }
@media (max-width:1180px){ nav.main .mega{position:static; width:100%; display:none} nav.main.open .mega[data-open="true"]{display:block} }
/* never let the panel render inline in the desktop bar, whatever state it is in */
nav.main:not(.open) .mega{display:none !important}
@media (max-width:560px){ .mega-grid{grid-template-columns:1fr !important} .mega-q{margin-bottom:8px} }
/* nothing below 10px on a phone */
@media (max-width:900px){ .chrec-label, .reach, .phone-screen .meta{font-size:.68rem !important} }