/* Premium Service Leads: concept design system (ported from the approved design concept, brand palette applied) + demo page styles */
  :root{
    --ink:#141414;
    --ink-2:#17171b;
    --paper:#fbfaf8;
    --paper-2:#F7F5F2;
    --signal:#FF7922;
    --signal-deep:#C75B06;
    --signal-soft:rgba(255,121,34,.12);
    --text:#131316;
    --muted:#5b5b60;
    --line:#e3e0d8;
    --card:#ffffff;
    --card-line:#e7e4db;
    --on-dark:#f5f3ee;
    --on-dark-muted:#a7a49c;
    --dark-line:#26262c;
    --ok:#1d9e63;
    --radius:14px;
    --max:1180px;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#0b0b0d;
      --paper-2:#121215;
      --text:#f2f0ea;
      --muted:#a3a099;
      --line:#26262c;
      --card:#141417;
      --card-line:#26262c;
      --signal-soft:rgba(255,121,34,.16);
      color-scheme:dark;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  ::selection{background:var(--signal);color:#fff}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:0;z-index:60;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .site-in{display:flex;align-items:center;gap:28px;height:68px}
  .logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:none}
  .logo .word{display:flex;align-items:flex-start;font-weight:900;font-size:30px;letter-spacing:.01em}
  .logo .sig{margin-left:1px;margin-top:-3px}
  .logo .full{font-size:8.5px;font-weight:700;letter-spacing:.34em;margin-top:3px;color:var(--muted)}
  nav.main{display:flex;gap:26px;margin-left:auto}
  nav.main a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--muted)}
  nav.main a:hover{color:var(--text)}
  .nav-toggle{
    display:none;align-items:center;justify-content:center;flex:none;
    width:42px;height:42px;margin-left:auto;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);
  }
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-weight:700;font-size:15px;text-decoration:none;
    padding:12px 22px;border-radius:999px;border:1px solid transparent;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
    cursor:pointer;font-family:inherit;
  }
  .btn:active{transform:scale(.98)}
  .btn-signal{background:var(--signal);color:#fff}
  .btn-signal:hover{background:var(--signal-deep)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--text)}
  .btn-light{background:#fff;color:#0b0b0d}
  .btn-light:hover{background:var(--paper-2)}
  .btn-outline-light{background:transparent;color:#fff;border-color:#3a3a41}
  .btn-outline-light:hover{border-color:#fff}
  .btn-sm{padding:9px 18px;font-size:14px}
  header .btn{margin-left:6px}

  /* ---------- live ticker ---------- */
  .ticker{
    background:var(--ink);color:var(--on-dark);
    border-bottom:3px solid var(--signal);
    overflow:hidden;
  }
  .ticker-in{display:flex;align-items:center;gap:16px;height:44px}
  .live-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,121,34,.55)}55%{box-shadow:0 0 0 7px rgba(255,121,34,0)}}
  .ticker-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);flex:none}
  .ticker-track{flex:1;min-width:0;overflow:hidden;padding:0 6px;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .ticker-move{display:inline-flex;gap:56px;white-space:nowrap;animation:tick 46s linear infinite;will-change:transform}
  .ticker:hover .ticker-move{animation-play-state:paused}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .tick-item{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--on-dark)}
  .tick-item b{color:var(--signal);font-weight:600}
  .tick-item .t{color:var(--on-dark-muted)}
  .sim-badge{
    flex:none;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid #3a3a41;color:var(--on-dark-muted);border-radius:999px;padding:4px 10px;
  }

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden}
  .hero-grid-bg{
    position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.4px);
    background-size:26px 26px;
    mask-image:radial-gradient(ellipse 75% 62% at 30% 30%, #000 30%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 75% 62% at 30% 30%, #000 30%, transparent 78%);
  }
  .hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;padding:84px 0 76px;align-items:center}
  .pill{
    display:inline-flex;align-items:center;gap:9px;
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.06em;
    border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--muted);
    background:var(--card);
  }
  .pill .live-dot{width:7px;height:7px}
  h1{
    font-size:clamp(42px,5.6vw,68px);line-height:1.04;font-weight:900;letter-spacing:-.015em;
    margin:22px 0 0;
  }
  .rotator{display:block;min-height:2.12em}
  .rot-word{position:relative;display:block;color:var(--signal)}
  .rot-word span{display:block}
  .rot-word span.out{animation:rotOut .45s ease both}
  .rot-word span.in{animation:rotIn .45s ease both}
  @keyframes rotIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes rotOut{from{opacity:1}to{opacity:0;transform:translateY(-14px)}}
  .hero-sub{font-size:19px;color:var(--muted);max-width:34em;margin:20px 0 0}
  .hero-sub strong{color:var(--text)}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .hero-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
  .hero-points div{display:flex;gap:9px;align-items:baseline;font-size:14.5px;font-weight:600}
  .hero-points svg{flex:none;transform:translateY(2px)}

  /* phone mock */
  .phone-stage{position:relative}
  .phone{
    width:min(340px,86vw);margin:0 auto;background:#0b0b0d;border-radius:38px;padding:12px;
    box-shadow:0 34px 70px -22px rgba(10,10,12,.5), 0 0 0 1px #2b2b31;
    transform:rotate(1.5deg);
  }
  .phone-screen{background:#101013;border-radius:28px;overflow:hidden;color:#f5f3ee;min-height:560px;display:flex;flex-direction:column}
  .phone-head{padding:18px 18px 12px;border-bottom:1px solid #232329;display:flex;align-items:center;gap:10px}
  .phone-head .who{font-size:13px;font-weight:700;line-height:1.3}
  .phone-head .who small{display:block;font-weight:500;color:#a7a49c;font-size:11px}
  .phone-head .st{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--signal);border:1px solid rgba(255,121,34,.5);padding:3px 8px;border-radius:999px}
  .thread{padding:16px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
  .msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.45;transition:opacity .4s ease,transform .4s ease}
  /* Progressive enhancement: the conversation is fully visible in the static
     HTML. JS adds .anim to the thread only when it can run the staggered
     reveal, so no visitor ever sees an empty phone. */
  .thread.anim .msg{opacity:0;transform:translateY(8px)}
  .thread.anim .msg.show{opacity:1;transform:none}
  .msg.them{background:#232329;border-bottom-left-radius:5px;align-self:flex-start}
  .msg.me{background:var(--signal);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
  .msg .meta{display:block;margin-top:5px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;opacity:.65;letter-spacing:.05em}
  .msg.sys{align-self:center;background:transparent;border:1px dashed #3a3a41;color:#a7a49c;font-size:11px;font-family:"IBM Plex Mono",monospace;border-radius:999px;padding:5px 12px;max-width:95%;text-align:center}
  .phone-foot{padding:12px 14px 16px;border-top:1px solid #232329;display:flex;gap:8px;align-items:center}
  .phone-foot .fake-input{flex:1;background:#1b1b20;border-radius:999px;color:#6d6a63;font-size:12.5px;padding:9px 14px}
  .phone-foot .send{width:34px;height:34px;border-radius:50%;background:var(--signal);display:grid;place-items:center;flex:none}
  .phone-note{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-top:18px;letter-spacing:.05em}
  .float-chip{
    position:absolute;z-index:3;background:var(--card);border:1px solid var(--card-line);border-radius:12px;
    box-shadow:0 16px 34px -14px rgba(10,10,12,.28);padding:10px 14px;
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;display:flex;gap:9px;align-items:center;
  }
  .float-chip b{color:var(--signal-deep);font-weight:600}
  @media (prefers-color-scheme: dark){ .float-chip b{color:var(--signal)} }
  .chip-a{top:36px;left:2px;animation:bob 5s ease-in-out infinite}
  .chip-b{bottom:64px;right:2px;animation:bob 6s ease-in-out infinite reverse}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

  /* ---------- generic sections ---------- */
  section{padding:96px 0}
  .sec-head{max-width:720px}
  .sec-head.center{margin:0 auto;text-align:center}
  .kicker{
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.22em;
    text-transform:uppercase;color:var(--signal-deep);display:flex;align-items:center;gap:10px;
  }
  @media (prefers-color-scheme: dark){ .kicker{color:var(--signal)} }
  .sec-head.center .kicker{justify-content:center}
  .kicker::before{content:"";width:26px;height:2px;background:var(--signal)}
  .sec-head.center .kicker::after{content:"";width:26px;height:2px;background:var(--signal)}
  h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.012em;margin:16px 0 0}
  .sec-sub{color:var(--muted);font-size:18px;margin:16px 0 0}
  .dark-sec{background:var(--ink);color:var(--on-dark)}
  .dark-sec .sec-sub{color:var(--on-dark-muted)}
  .alt-sec{background:var(--paper-2)}
  .reveal{transform:translateY(14px);transition:transform .55s ease}
  .reveal.vis{transform:none}

  /* ---------- queue demo ---------- */
  .queue-grid{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:center;margin-top:54px}
  .stepper-panel{background:#101013;border:1px solid var(--dark-line);border-radius:18px;padding:38px 36px}
  .beat-count{font-size:11px;letter-spacing:.18em;color:var(--signal);font-weight:600}
  .beat-time{font-family:"IBM Plex Mono",monospace;font-size:54px;font-weight:600;line-height:1.05;color:#fff;margin-top:16px}
  .beat-title{font-size:25px;font-weight:800;line-height:1.2;margin:16px 0 0;color:var(--on-dark)}
  .beat-desc{color:var(--on-dark-muted);font-size:16px;margin:12px 0 0;min-height:6.4em}
  .stepper-panel .queue-controls{margin-top:24px}
  .stepper-panel .queue-note{margin-top:20px;line-height:1.7}
  .btn[disabled]{opacity:.35;cursor:default;pointer-events:none}
  button.q-step{background:none;border:none;border-bottom:1px solid var(--dark-line);color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%}
  button.q-step:hover{opacity:.82}
  button.q-step.on:hover{opacity:1}
  button.q-step:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
  .q-steps{display:flex;flex-direction:column;gap:0}
  .q-step{display:grid;grid-template-columns:44px 1fr auto;gap:16px;padding:18px 4px;border-bottom:1px solid var(--dark-line);align-items:start;opacity:.38;transition:opacity .35s ease}
  .q-step:first-child{padding-top:4px}
  .q-step.on{opacity:1}
  .q-step .n{
    width:34px;height:34px;border-radius:50%;border:1.5px solid #3a3a41;display:grid;place-items:center;
    font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--on-dark-muted);transition:all .3s ease;background:var(--ink);
  }
  .q-step.on .n{border-color:var(--signal);color:#fff;background:var(--signal)}
  .q-step h3{margin:0;font-size:17.5px;font-weight:700}
  .q-step p{margin:4px 0 0;color:var(--on-dark-muted);font-size:15px;max-width:44em}
  .q-step .stamp{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--signal);white-space:nowrap;padding-top:5px}
  .queue-controls{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
  .queue-note{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--on-dark-muted)}

  /* ---------- flow ---------- */
  .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
  .flow-card{
    background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);
    padding:26px 24px;position:relative;
  }
  .flow-card .step-n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--signal-deep);letter-spacing:.12em}
  @media (prefers-color-scheme: dark){ .flow-card .step-n{color:var(--signal)} }
  .flow-card h3{margin:10px 0 0;font-size:19px;font-weight:800;line-height:1.25}
  .flow-card p{margin:9px 0 0;color:var(--muted);font-size:15px}
  .flow-card .arrow{position:absolute;top:26px;right:20px;color:var(--line)}
  .boundary{
    margin-top:22px;border:1.5px dashed color-mix(in srgb, var(--signal) 55%, transparent);
    border-radius:var(--radius);padding:22px 26px;display:flex;gap:18px;align-items:flex-start;
    background:var(--signal-soft);
  }
  .boundary svg{flex:none;margin-top:3px}
  .boundary p{margin:0;font-size:16px}
  .boundary strong{font-weight:800}

  /* ---------- record ---------- */
  .record-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:54px}
  .record{
    background:#101013;color:#f5f3ee;border-radius:18px;overflow:hidden;
    box-shadow:0 30px 60px -24px rgba(10,10,12,.45);border:1px solid #26262c;
    font-size:14.5px;
  }
  .record-head{padding:18px 22px;border-bottom:1px solid #26262c;display:flex;align-items:center;gap:12px}
  .record-head .rid{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#a7a49c}
  .record-head .status{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.08em;color:#0b0b0d;background:var(--ok);border-radius:999px;padding:4px 11px}
  .record dl{margin:0;padding:8px 22px 14px}
  .record .row{display:grid;grid-template-columns:158px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid #1d1d22}
  .record .row:last-child{border-bottom:none}
  .record dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b887f;padding-top:3px}
  .record dd{margin:0;font-weight:600}
  .record dd .sub{display:block;font-weight:500;color:#a7a49c;font-size:13px}
  .record dd .ok{color:#3ecf8e}
  .record-foot{padding:14px 22px;background:#17171c;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8b887f;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .check-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
  .check-list li{display:flex;gap:14px;align-items:flex-start}
  .check-list .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--signal-soft);display:grid;place-items:center;margin-top:2px}
  .check-list h3{margin:0;font-size:17px;font-weight:800}
  .check-list p{margin:3px 0 0;color:var(--muted);font-size:15px}

  /* ---------- photo band ---------- */
  .photo-band{display:grid;grid-template-columns:1.15fr .85fr;border-radius:20px;overflow:hidden;margin-top:54px;border:1px solid var(--card-line)}
  .photo-band figure{margin:0;min-height:340px}
  .photo-band img{width:100%;height:100%;object-fit:cover}
  .photo-side{background:var(--ink);color:var(--on-dark);padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
  .photo-side h3{font-size:26px;font-weight:800;line-height:1.2;margin:0}
  .photo-side p{color:var(--on-dark-muted);margin:14px 0 0;font-size:16px}
  .photo-side .sig-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
  .photo-side .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;border:1px solid #3a3a41;border-radius:999px;padding:5px 12px;color:var(--on-dark)}

  /* ---------- sales tool / payment bump ---------- */
  .play-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:54px}
  .play-card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:26px 24px;position:relative}
  .play-card .step-n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--signal-deep);letter-spacing:.12em}
  @media (prefers-color-scheme: dark){ .play-card .step-n{color:var(--signal)} }
  .play-card h3{margin:10px 0 0;font-size:18.5px;font-weight:800;line-height:1.25}
  .play-card p{margin:9px 0 0;color:var(--muted);font-size:15px}
  .bump-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:64px}
  .bump-math{background:#101013;color:#f5f3ee;border-radius:18px;overflow:hidden;border:1px solid #26262c;box-shadow:0 30px 60px -24px rgba(10,10,12,.45)}
  .bump-math-head{padding:18px 22px;border-bottom:1px solid #26262c;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .bump-math-head .bm-title{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#a7a49c;letter-spacing:.06em}
  .bump-math-head .bm-tag{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;color:#0b0b0d;background:var(--signal);border-radius:999px;padding:4px 11px}
  .bump-block{padding:18px 22px 8px}
  .bump-block + .bump-block{border-top:1px solid #1d1d22}
  .bump-block h4{margin:0 0 6px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8b887f;font-weight:600}
  .bump-row{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid #1d1d22;font-size:15px}
  .bump-row:last-child{border-bottom:none}
  .bump-row span{color:#a7a49c}
  .bump-row b{font-weight:700;white-space:nowrap}
  .bump-row.total b{color:#fff;font-size:17px}
  .bump-row.found b{color:var(--signal)}
  .bump-result{padding:18px 22px;background:#17171c;font-size:15px;line-height:1.55;color:#f5f3ee}
  .bump-result b{color:var(--signal)}
  .bump-foot{padding:13px 22px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8b887f;border-top:1px solid #26262c}
  .talk-track{margin-top:22px;border:1.5px solid color-mix(in srgb, var(--signal) 55%, transparent);border-radius:var(--radius);padding:22px 26px;background:var(--signal-soft)}
  .talk-track p{margin:0;font-size:16.5px;line-height:1.6}
  .talk-track .tt-label{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);display:block;margin-bottom:8px}
  @media (prefers-color-scheme: dark){ .talk-track .tt-label{color:var(--signal)} }

  /* ---------- roles ---------- */
  .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
  .role{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
  .role .r-icon{width:48px;height:48px;border-radius:12px;background:var(--signal-soft);display:grid;place-items:center}
  .role h3{margin:18px 0 0;font-size:21px;font-weight:800}
  .role .r-sub{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .role ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
  .role li{display:flex;gap:10px;font-size:15px;color:var(--muted);align-items:flex-start}
  .role li svg{flex:none;margin-top:4px}
  .role li b{color:var(--text);font-weight:700}
  .role.never{border-style:dashed}
  .role.never li svg{margin-top:4px}

  /* ---------- compliance ---------- */
  .comp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:54px}
  .comp{background:#141417;border:1px solid var(--dark-line);border-radius:var(--radius);padding:30px 30px}
  .comp .c-top{display:flex;align-items:center;gap:14px}
  .comp .c-ic{width:44px;height:44px;border-radius:11px;background:rgba(255,121,34,.14);display:grid;place-items:center;flex:none}
  .comp h3{margin:0;font-size:19px;font-weight:800}
  .comp p{margin:12px 0 0;color:var(--on-dark-muted);font-size:15.5px}
  .comp p b{color:var(--on-dark)}
  .comp .cite{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#77746c;letter-spacing:.04em}
  .window-viz{margin-top:18px;background:#0b0b0d;border:1px solid var(--dark-line);border-radius:10px;padding:14px 16px}
  .window-viz .wv-labels{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10px;color:#77746c;margin-bottom:8px}
  .wv-bar{position:relative;height:14px;border-radius:7px;background:#26262c;overflow:hidden}
  .wv-open{position:absolute;top:0;bottom:0;left:33.33%;right:33.33%;background:var(--signal)}
  .wv-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;left:58%}
  .window-viz .wv-cap{font-size:12px;color:var(--on-dark-muted);margin-top:9px}
  .stop-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
  .stop-chips span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;border:1px solid #3a3a41;border-radius:7px;padding:4px 9px;color:var(--on-dark)}

  /* ---------- billing ---------- */
  .bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:54px}
  .bill-card{border-radius:var(--radius);padding:32px 30px}
  .bill-yes{background:var(--ink);color:var(--on-dark)}
  .bill-no{background:var(--card);border:1px solid var(--card-line)}
  .bill-card h3{margin:0;font-size:20px;font-weight:800;display:flex;align-items:center;gap:12px}
  .bill-card ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
  .bill-card li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
  .bill-yes li{color:var(--on-dark-muted)} .bill-yes li b{color:var(--on-dark)}
  .bill-no li{color:var(--muted)} .bill-no li b{color:var(--text)}
  .bill-card li svg{flex:none;margin-top:4px}
  .bill-note{margin-top:22px;font-size:15px;color:var(--muted);max-width:62em}
  .bill-note b{color:var(--text)}

  /* ---------- pilot ---------- */
  .pilot{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:54px;border:1px solid var(--card-line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .p-step{padding:30px 26px;border-right:1px solid var(--card-line);position:relative}
  .p-step:last-child{border-right:none}
  .p-step .wk{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--signal-deep);text-transform:uppercase}
  @media (prefers-color-scheme: dark){ .p-step .wk{color:var(--signal)} }
  .p-step h3{margin:10px 0 0;font-size:18.5px;font-weight:800;line-height:1.25}
  .p-step p{margin:9px 0 0;font-size:14.5px;color:var(--muted)}
  .p-step .p-n{position:absolute;top:22px;right:22px;font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;color:var(--line)}

  /* ---------- agent band ---------- */
  .agent-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:54px}
  .agent-grid figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--card-line)}
  .agent-grid picture{display:block;width:100%;height:100%}
  .agent-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
  .earn-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
  .earn-list li{display:flex;gap:13px;align-items:flex-start;font-size:16px}
  .earn-list svg{flex:none;margin-top:4px}
  .earn-list b{font-weight:800}
  .earn-list span{color:var(--muted)}

  /* ---------- faq ---------- */
  .faq{max-width:820px;margin:48px auto 0}
  details.faq-item{border-bottom:1px solid var(--line)}
  details.faq-item:first-child{border-top:1px solid var(--line)}
  details.faq-item summary{
    list-style:none;cursor:pointer;padding:22px 6px;display:flex;gap:16px;align-items:center;
    font-size:18px;font-weight:700;
  }
  details.faq-item summary::-webkit-details-marker{display:none}
  details.faq-item summary:hover{color:var(--signal-deep)}
  @media (prefers-color-scheme: dark){ details.faq-item summary:hover{color:var(--signal)} }
  details.faq-item summary .fx{margin-left:auto;flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:transform .25s ease, background .25s ease}
  details.faq-item[open ] summary .fx{transform:rotate(45deg);background:var(--signal);border-color:var(--signal);color:#fff}
  details.faq-item .faq-body{padding:0 6px 24px;color:var(--muted);font-size:16px;max-width:46em}
  details.faq-item .faq-body b{color:var(--text)}

  /* ---------- cta / footer ---------- */
  .cta{background:var(--ink);color:var(--on-dark);border-radius:24px;padding:64px 56px;position:relative;overflow:hidden}
  .cta .sig-big{position:absolute;right:-30px;top:-46px;opacity:.16;pointer-events:none}
  .cta h2{color:#fff;max-width:16em}
  .cta p{color:var(--on-dark-muted);font-size:18px;max-width:38em;margin:16px 0 0}
  .cta .hero-cta{margin-top:30px}
  footer.site{padding:56px 0 44px;border-top:1px solid var(--line);margin-top:96px}
  .foot-grid{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
  .foot-note{color:var(--muted);font-size:14px;max-width:34em;margin-top:14px}
  .foot-links{display:flex;gap:56px;flex-wrap:wrap}
  .foot-links h4{margin:0 0 12px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .foot-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .foot-links a{text-decoration:none;font-size:15px;font-weight:600}
  .foot-links a:hover{color:var(--signal-deep)}
  .foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}

  /* ---------- responsive ---------- */
  @media (max-width:1020px){
    .hero-in{grid-template-columns:1fr;gap:64px;padding-top:64px}
    .queue-grid{grid-template-columns:1fr;gap:48px}
    .play-grid{grid-template-columns:repeat(2,1fr)}
    .bump-grid{grid-template-columns:1fr}
    .flow{grid-template-columns:repeat(2,1fr)}
    .roles{grid-template-columns:1fr}
    .record-grid,.bill-grid,.agent-grid{grid-template-columns:1fr}
    .pilot{grid-template-columns:repeat(2,1fr)}
    .p-step:nth-child(2){border-right:none}
    .p-step:nth-child(1),.p-step:nth-child(2){border-bottom:1px solid var(--card-line)}
    .photo-band{grid-template-columns:1fr}
    .photo-band figure{min-height:260px}
    .nav-toggle{display:inline-flex}
    nav.main{
      position:absolute;top:100%;left:0;right:0;z-index:59;
      display:none;flex-direction:column;gap:0;margin-left:0;
      background:var(--paper);border-bottom:1px solid var(--line);
      box-shadow:0 24px 34px -22px rgba(10,10,12,.35);
      padding:8px 24px 14px;
    }
    nav.main.open{display:flex}
    nav.main a{padding:11px 2px;font-size:16px;border-top:1px solid var(--line)}
    nav.main a:first-child{border-top:none}
    .chip-a{left:0}.chip-b{right:0}
  }
  @media (max-width:640px){
    body{font-size:16px}
    section{padding:68px 0}
    .play-grid{grid-template-columns:1fr}
    .flow{grid-template-columns:1fr}
    .comp-grid{grid-template-columns:1fr}
    .pilot{grid-template-columns:1fr}
    .p-step{border-right:none;border-bottom:1px solid var(--card-line)}
    .p-step:last-child{border-bottom:none}
    .cta{padding:44px 28px}
    .record .row{grid-template-columns:1fr;gap:2px}
    .q-step{grid-template-columns:40px 1fr}
    .q-step .stamp{display:none}
    .ticker-label{display:none}
    header .btn{display:none}
    .bump-row{flex-wrap:wrap;row-gap:2px}
    .bump-row b{white-space:normal;text-align:right}
    .beat-time{font-size:40px}
    .beat-desc{min-height:0}
    .stepper-panel{padding:30px 24px}
    .hero-points{gap:16px}
    /* Longest rotating phrase wraps to 3 lines at phone widths: reserve the
       height so the hero does not jump as phrases rotate. */
    .rotator{min-height:3.2em}
    /* Float chips leave the overlay layer and stack in the hero flow, so
       they can never overlap or be clipped by the phone mock. */
    .phone-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
    .float-chip{position:static;animation:none}
    .phone-note{margin-top:2px}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .ticker-move,.live-dot,.chip-a,.chip-b{animation:none}
    .reveal{transform:none;transition:none}
    .msg{transition:none}
    *{transition-duration:.01ms !important}
  }

  /* ---------- site additions: image logo, contact, anchors ---------- */
  .brand{display:flex;align-items:center;text-decoration:none;flex:none}
  .brand-logo{height:52px;width:auto;display:block}
  @media (prefers-color-scheme: dark){
    header.site .brand, footer.site .brand-img{
      background:#F7F5F2;border-radius:10px;padding:5px 10px;
    }
  }
  section[id], #agents, #dealerships{scroll-margin-top:84px}
  .anchor-alias{display:block;height:0;overflow:hidden}
  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;max-width:760px;margin:54px auto 0}
  .contact-card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:32px 30px;text-align:center}
  .contact-card .role{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .contact-card .name{font-size:21px;font-weight:800;margin:0 0 8px}
  .contact-card a{font-size:17px;font-weight:700;color:var(--signal-deep);text-decoration:none}
  .contact-card a:hover{color:var(--signal)}
  @media (prefers-color-scheme: dark){ .contact-card a{color:var(--signal)} }
  .preview-link{font-weight:700;color:var(--signal-deep);text-decoration:none}
  .preview-link:hover{color:var(--signal)}
  @media (prefers-color-scheme: dark){ .preview-link{color:var(--signal)} }

  /* ---------- demo pages (agent / dashboard / intake): legacy styles ----------
     These pages keep their original markup. Everything below is scoped so it
     cannot disturb the concept design system above. */
  :root{
    --warn:#b45309;
    --warn-bg:#fdf3e3;
    --ok-deep:#157347;
    --ok-bg:#e6f4ec;
    --danger:#b02a37;
  }
  @media (prefers-color-scheme: dark){
    :root{ --warn-bg:#2b2113; --ok-bg:#12291d; }
  }
  header:not(.site){background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
  .header-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;flex-wrap:wrap}
  header:not(.site) nav{display:flex;gap:28px;flex-wrap:wrap}
  header:not(.site) nav a{color:var(--text);font-size:15px;font-weight:600;text-decoration:none}
  header:not(.site) nav a:hover{color:var(--signal)}
  footer:not(.site){background:var(--ink);color:#EDEDEA;border-top:3px solid var(--signal);padding:38px 0;text-align:center;margin-top:64px}
  footer:not(.site) .foot-brand{font-weight:700;font-size:16px;margin-bottom:6px;color:#fff}
  footer:not(.site) p{font-size:13.5px;color:#A8A29C}
  footer:not(.site) .foot-links{margin:10px 0;font-size:14px}
  footer:not(.site) .foot-links a{margin:0 10px;font-weight:600;color:var(--signal);text-decoration:none}
  footer:not(.site) .foot-links a:hover{color:#fff}
  .demo-banner{
    background:var(--warn-bg);border-bottom:1px solid #ecd9ae;color:#7c4a03;
    text-align:center;font-size:14.5px;font-weight:600;padding:10px 16px;
  }
  @media (prefers-color-scheme: dark){ .demo-banner{color:#e8c98a;border-bottom-color:#4a3a1c} }
  .demo-tag{
    display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;
    background:var(--warn);color:#fff;border-radius:5px;padding:2px 7px;vertical-align:middle;
  }
  .page-head{padding:52px 0 8px;text-align:center}
  .page-head h1{font-size:34px;letter-spacing:-.4px;margin:0 0 10px;line-height:1.2}
  .page-head p{color:var(--muted);max-width:620px;margin:0 auto;font-size:16.5px}
  .panel{
    background:var(--card);border:1px solid var(--card-line);border-radius:14px;
    padding:28px;max-width:640px;margin:28px auto;
  }
  .panel h2{font-size:21px;text-align:left;margin:0 0 6px;letter-spacing:0}
  .panel .panel-sub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
  .btn-primary{background:var(--signal);border-color:var(--signal);color:#fff}
  .btn-primary:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
  .btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
  .btn-danger:hover{border-color:var(--danger);opacity:.85}
  .btn-block{width:100%;justify-content:center}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  label.field{display:block;margin-bottom:16px}
  label.field > span:first-child{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
  input[type="text"],input[type="tel"],select,textarea{
    width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
    font-size:16px;font-family:inherit;color:var(--text);background:var(--card);
  }
  input:disabled,select:disabled{opacity:.55}
  .consent-box{
    border:1.5px solid var(--signal);background:var(--signal-soft);border-radius:12px;padding:20px 22px;margin-bottom:22px;
  }
  .consent-box p{font-size:15px;margin:0 0 12px}
  .consent-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600}
  .consent-check input{width:19px;height:19px;margin-top:3px;flex:0 0 auto}
  fieldset{border:none;margin:0 0 6px;padding:0}
  fieldset:disabled{opacity:.45}
  .radio-row{display:flex;gap:10px;flex-wrap:wrap}
  .radio-pill{
    border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;
    display:flex;gap:8px;align-items:center;background:var(--card);cursor:pointer;
  }
  .form-note{font-size:13.5px;color:var(--muted);margin-top:6px;display:block}
  .success-box{
    background:var(--ok-bg);border:1px solid #bfe3cf;border-radius:12px;
    padding:26px;text-align:center;display:none;
  }
  .success-box h3{color:var(--ok-deep);font-size:21px;margin:0 0 8px}
  @media (prefers-color-scheme: dark){ .success-box h3{color:#3ecf8e} .success-box{border-color:#1f4630} }
  .success-box p{font-size:15.5px}
  .status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
  .status-pill{
    display:inline-block;font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    border-radius:999px;padding:5px 13px;background:var(--paper-2);color:var(--muted);
  }
  .status-pill.on{background:var(--ok-bg);color:var(--ok-deep)}
  @media (prefers-color-scheme: dark){ .status-pill.on{color:#3ecf8e} }
  .lead-card{
    border:1.5px solid var(--signal);border-radius:14px;padding:24px;background:var(--signal-soft);display:none;
  }
  .lead-card h3{font-size:20px;margin:0 0 4px}
  .lead-card .lead-meta{font-size:15px;color:var(--muted);margin:0 0 4px}
  .count-row{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
  .count-num{font-size:38px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
  .count-label{font-size:14px;color:var(--muted);font-weight:600}
  .count-bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:18px}
  .count-fill{height:100%;background:var(--signal);width:100%;transition:width 1s linear}
  .count-fill.low{background:var(--danger)}
  .template-box{
    background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
    padding:16px 18px;font-size:15.5px;margin-bottom:16px;
  }
  .state-msg{border-radius:10px;padding:14px 18px;font-size:15px;margin-top:16px;display:none}
  .state-msg.ok{background:var(--ok-bg);color:var(--ok-deep);border:1px solid #bfe3cf}
  @media (prefers-color-scheme: dark){ .state-msg.ok{color:#3ecf8e;border-color:#1f4630} }
  .state-msg.warn{background:var(--warn-bg);color:#7c4a03;border:1px solid #ecd9ae}
  @media (prefers-color-scheme: dark){ .state-msg.warn{color:#e8c98a;border-color:#4a3a1c} }
  .idle-msg{color:var(--muted);font-size:15.5px;text-align:center;padding:22px 0 6px}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:960px;margin:28px auto 0}
  .stat{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:24px 26px}
  .stat .stat-label{font-size:13px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .stat .stat-value{font-size:36px;font-weight:800;letter-spacing:-.5px;line-height:1.1;margin:0}
  .stat .stat-note{font-size:13.5px;color:var(--muted);margin:6px 0 0}
  .table-panel{max-width:960px}
  table{width:100%;border-collapse:collapse;font-size:15px}
  th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
  th{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
  tr:last-child td{border-bottom:none}
  .badge{
    display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 11px;
    background:var(--signal-soft);color:var(--signal-deep);
  }
  @media (prefers-color-scheme: dark){ .badge{color:var(--signal)} }
  .badge.grey{background:var(--paper-2);color:var(--muted)}
  .badge.green{background:var(--ok-bg);color:var(--ok-deep)}
  @media (max-width:640px){
    .page-head h1{font-size:28px}
    header:not(.site) nav{gap:18px}
  }