/* DialDart site styles (redesign C, "Show it working", 2026-10-02).
   Loaded by every page on the new design: index.html and start.html, and (from the 2026-10-03 rollout) the other
   pages, which also load inner.css (their generic components, kept out of this file so the homepage and /start
   don't download them). Page-only rules live in a <style> block on the page. Bump the ?v= on every page's <link>
   after an edit: _headers caches /*.css for 7 days. */

:root{
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --ink:#0F1E36;
  --ink-2:#44516A;
  --ink-3:#5D6A7E;
  --line:#E4E7EE;
  --line-2:#D5DAE4;
  --navy:#142D54;
  --navy-2:#1B3A6B;
  --navy-l:#EEF3FB;
  --navy-ll:#F5F8FD;
  --gold:#E8A53A;
  --gold-d:#D18F25;
  --gold-l:#FEF3DC;
  --gold-t:#946112;   /* gold for TEXT: 5.05:1 on --bg, 5.28:1 on white. #E8A53A is for fills only */
  --green:#137F57;
  --green-t:#0F6E4B;  /* green for TEXT on the green tint: 5.5:1 */
  --green-l:#E4F5EE;
  --red:#D93A3A;
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,30,54,.06),0 1px 3px rgba(15,30,54,.05);
  --shadow:0 2px 6px rgba(15,30,54,.05),0 12px 32px -8px rgba(15,30,54,.14);
  --shadow-lg:0 4px 12px rgba(15,30,54,.06),0 30px 60px -18px rgba(15,30,54,.28);
  --font:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
/* Metric-matched stand-ins for Inter while it loads, so headings wrap the same and nothing moves when Inter arrives.
   Bold text uses Arial Bold (not Arial made bold), scaled to Inter's width at that weight (measured 2026-10-02). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');font-weight:100 500;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 700;ascent-override:95.16%;descent-override:23.72%;line-gap-override:0%;size-adjust:101.8%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800 900;ascent-override:93.15%;descent-override:23.22%;line-gap-override:0%;size-adjust:104%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:var(--navy-2)}
h1,h2,h3{color:var(--navy);margin:0;letter-spacing:-.025em;line-height:1.12}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;text-align:center}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 16px -6px rgba(209,143,37,.7)}
.btn-gold:hover{background:var(--gold-d)}
.btn-gold:active{transform:translateY(1px)}
.btn-line{background:var(--surface);color:var(--navy);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--navy-2)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:14.5px;border-radius:10px}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.btn.loading{opacity:.7;pointer-events:none}
.tlink{font-weight:600;color:var(--navy-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{height:64px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);flex:none}
.brand img{width:34px;height:35px}
.brand span{font-weight:800;font-size:19px;letter-spacing:-.03em}
.nav{display:flex;align-items:center;gap:4px;margin-left:12px}
.nav > a,.nav summary{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:8px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px}
.nav summary::-webkit-details-marker{display:none}
.nav > a:hover,.nav summary:hover{color:var(--navy);background:var(--navy-l)}
.ddrop{position:relative}
.ddrop .menu{position:absolute;top:calc(100% + 8px);left:-8px;width:520px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ddrop .menu a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.ddrop .menu a small{display:block;font-weight:500;color:var(--ink-3);font-size:13px}
.ddrop .menu a:hover{background:var(--navy-ll)}
.ddrop[open] summary svg{transform:rotate(180deg)}
/* gold "New" pill after a nav link (Bullseye, 2026-10-03) */
.pill-new{display:inline-flex;align-items:center;margin-left:2px;padding:3px 7px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:12px;font-weight:800;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.hdr-note{font-size:14px;color:var(--ink-3)}
.hdr-note b{color:var(--navy)}
.mnav{display:none}
/* 961-1099px: with the Bullseye link the full row no longer fits, so "Hear a real call" leaves the header there
   (the hero player and the phone menu keep it) */
@media (max-width:1099px){.hdr-listen{display:none}}
@media (max-width:960px){
  .nav,.hdr-listen{display:none}
  .mnav{display:block;position:static}
  .mnav:not([open]) .panel{display:none}
  .mnav summary{list-style:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--navy);border:1px solid var(--line-2);background:var(--surface)}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav .i-close{display:none}
  .mnav[open] .i-open{display:none}
  .mnav[open] .i-close{display:block}
  .mnav[open] summary{border-color:var(--navy-2)}
  .mnav .panel{overscroll-behavior:contain}
  .mnav .panel{position:absolute;left:0;right:0;top:64px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:8px 16px 18px;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow:auto}
  .mnav .panel a{display:block;padding:12px 4px;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
  .mnav .panel .sub{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .mnav .panel .sub a{font-weight:500;font-size:15px}
  .mnav .panel .lbl{display:block;margin:14px 4px 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .hdr-right{gap:8px}
}
html.menu-open{overflow:hidden}
@media (max-width:600px){
  .hdr-note{display:none}
  /* one gold button per phone screen: the header button becomes an outline button */
  .hdr .btn-gold{background:var(--surface);color:var(--navy);border-color:var(--navy);box-shadow:none}
  .hdr .btn-gold:hover{background:var(--navy-ll)}
}
@media (max-width:380px){ .brand span{font-size:17px} .hdr .btn-sm{padding:8px 11px;font-size:14px} }

/* ---------- section scaffolding ---------- */
section{padding:88px 0}
@media (max-width:760px){section{padding:46px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-2);background:var(--surface);border:1px solid var(--line);padding:6px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);margin-bottom:12px}
.h2{font-size:clamp(28px,3.5vw,42px);font-weight:800}
/* no single word left alone on the last line */
h1,h2,h3,.h2{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.lead{font-size:18px;color:var(--ink-2);margin-top:14px;max-width:640px}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
@media (max-width:760px){.lead{font-size:16.5px}.sec-head{margin-bottom:32px}}

/* ---------- hero ---------- */
/* Stacking note (Safari/iPhone robot): the white MP4 uses mix-blend-mode:multiply, which only blends with what
   is painted inside its own stacking context. So nothing between the robot and the page may create one:
   no z-index on .hero, .hero-grid, .stage or .stage-robot, no isolation, opacity, transform or filter on them.
   The two glows sit at z-index:-1 so they stay behind the content without needing a z-index on .hero-grid. */
.hero{padding:56px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:900px;height:900px;background:radial-gradient(closest-side,rgba(232,165,58,.12),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;left:-200px;top:30%;width:700px;height:700px;background:radial-gradient(closest-side,rgba(27,58,107,.07),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:44px;align-items:center}
.hero h1{font-size:clamp(34px,4.5vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:18px 0 0}
.hero h1 .hl{color:var(--navy-2);background:linear-gradient(transparent 62%,var(--gold-l) 62%,var(--gold-l) 92%,transparent 92%)}
.hero .sub{font-size:18.5px;color:var(--ink-2);margin-top:18px;max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.reassure{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:18px;font-size:14px;color:var(--ink-3);max-width:420px}
.reassure span{display:inline-flex;align-items:center;gap:6px}
.reassure svg{width:15px;height:15px;color:var(--green);flex:none}
.hero-top{display:flex;align-items:center;gap:12px}
.robot-sm{display:none}
@media (max-width:960px){
  .hero{padding:20px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .robot-sm{display:block;width:120px;height:120px;flex:none;margin:-6px -8px -8px -10px}
  .hero .eyebrow{text-transform:none;letter-spacing:-.005em;font-size:15px;line-height:1.3;padding:0;background:none;border:0;box-shadow:none;color:var(--navy-2);align-items:flex-start}
  .hero .eyebrow .dot{margin-top:6px;flex:none}
  .hero h1{margin-top:12px}
  .hero .sub{font-size:16.5px;margin-top:12px}
  .cta-row{margin-top:20px}
  .cta-row .btn-gold{flex:1 1 100%}
}
@media (min-width:601px) and (max-width:960px){.cta-row .btn-gold{flex:0 0 auto;padding-left:28px;padding-right:28px}}

/* ---------- robot video ---------- */
.dd-robot__video{width:100%;height:100%;object-fit:contain;background:transparent;
  /* fade the baked-in floor shadow before it reaches the square's edge */
  -webkit-mask:radial-gradient(54% 48% at 50% 44%,#000 88%,transparent 100%),radial-gradient(40% 20% at 50% 88%,#000 55%,transparent 100%);
  mask:radial-gradient(54% 48% at 50% 44%,#000 88%,transparent 100%),radial-gradient(40% 20% at 50% 88%,#000 55%,transparent 100%)}
.dd-robot__video.is-multiply{mix-blend-mode:multiply}
/* iOS never draws its own play button over the robot (it is decorative, muted, and has no controls) */
.dd-robot__video::-webkit-media-controls{display:none!important}
.dd-robot__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.dd-robot__video::-webkit-media-controls-overlay-play-button{display:none!important}

/* ---------- sample call player ---------- */
.listen-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 12px 12px;box-shadow:var(--shadow-sm);max-width:520px;margin-top:16px}
.ddh-play{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 6px 14px -6px rgba(20,45,84,.6)}
.ddh-play:hover{background:var(--navy-2);transform:scale(1.04)}
.ddh-play svg{width:22px;height:22px;fill:#fff}
.ddh-play.on{background:var(--gold)}
.ddh-play.on svg{fill:var(--navy)}
.ddh-body{flex:1;min-width:0}
.ddh-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ddh-top b,.ddh-top h2{font-size:15.5px;color:var(--navy);font-weight:700;letter-spacing:0;line-height:1.4}
.ddh-time{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ddh-wave{width:100%;height:30px;margin:4px 0 2px;cursor:pointer;touch-action:none}
.ddh-cap{font-size:13px;color:var(--ink-3);line-height:1.4}

/* ---------- hero stage: example call ---------- */
.stage{position:relative;height:600px;border-radius:28px;background:
  radial-gradient(120% 90% at 85% 0%,#FFF6E6 0%,rgba(255,246,230,0) 55%),
  radial-gradient(120% 100% at 0% 100%,#E7EEF9 0%,rgba(231,238,249,0) 60%),
  #F3F6FB;border:1px solid #E3E8F1;box-shadow:inset 0 1px 0 #fff}
.stage-tag{position:absolute;top:18px;left:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:rgba(255,255,255,.8);border:1px solid var(--line);padding:5px 10px;border-radius:999px;z-index:4}
.stage-robot{position:absolute;left:-30px;bottom:-10px;width:280px;height:280px;pointer-events:none}
.phone{position:absolute;right:22px;top:24px;width:282px;height:552px;border-radius:44px;background:#0E1B31;padding:10px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.06) inset;z-index:2}
.phone-screen{position:relative;height:100%;border-radius:35px;background:#F7F8FA;overflow:hidden;display:flex;flex-direction:column}
.ph-status{height:34px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;font-size:12.5px;font-weight:700;color:var(--ink)}
.ph-status i{width:84px;height:22px;border-radius:12px;background:#0E1B31;display:block;margin-top:2px}
.ph-call{flex:none;display:flex;align-items:center;gap:10px;margin:4px 12px 8px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.ph-call img{width:32px;height:33px;flex:none}
.ph-call b{display:block;font-size:13.5px;color:var(--navy);line-height:1.2}
.ph-call small{display:block;font-size:12px;color:var(--ink-3);line-height:1.3}
.ph-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green-t);background:var(--green-l);padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.ph-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.tx{flex:1;display:flex;flex-direction:column;gap:7px;padding:2px 12px 12px;overflow:hidden}
.tx li{max-width:90%;font-size:13px;line-height:1.38;padding:8px 11px;border-radius:15px}
.tx .ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.tx .ai::before{content:"DialDart";display:block;font-size:11px;font-weight:700;color:var(--navy-2);letter-spacing:.02em;margin-bottom:1px}
.tx .caller{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.tx .caller::before{content:"Caller";display:block;font-size:11px;font-weight:700;color:#B9C7DE;margin-bottom:1px}
.tx mark{background:var(--gold-l);color:var(--navy);padding:0 2px;margin:0 -2px;border-radius:4px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tx .sys{align-self:center;max-width:100%;font-size:12px;font-weight:600;color:var(--ink-2);background:transparent;padding:2px 4px;display:flex;align-items:center;gap:6px}
.tx .sys svg{width:14px;height:14px;flex:none}
.tx .sys.ok{color:var(--green-t)}
.tx .sys.go{color:var(--navy-2);background:var(--gold-l);padding:6px 11px;border-radius:999px}
.float{position:absolute;z-index:4;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px}
.stage-side{position:absolute;left:20px;top:64px;width:calc(100% - 282px - 22px - 20px - 14px);max-width:236px;display:flex;flex-direction:column;gap:12px;z-index:4}
.stage-side .float{position:relative}
.notif{width:100%}
.notif .n-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.notif .n-ico{width:24px;height:24px;border-radius:7px;background:var(--green);display:grid;place-items:center;flex:none}
.notif .n-ico svg{width:14px;height:14px;color:#fff}
.notif p{font-size:13.5px;line-height:1.45;color:var(--ink);margin-top:7px}
.saved{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);padding:10px 13px}
.saved .s-ico{width:26px;height:26px;border-radius:8px;background:var(--navy-l);display:grid;place-items:center;color:var(--navy-2);flex:none}
.saved .s-ico svg{width:15px;height:15px}
.saved small{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
/* entrance sequence: content is visible without JS; JS adds .play */
.stage.play .tx li,.stage.play .notif,.stage.play .saved{opacity:0;transform:translateY(8px);animation:pop .45s cubic-bezier(.2,.8,.2,1) forwards}
.stage.play .tx li:nth-child(1){animation-delay:.3s}
.stage.play .tx li:nth-child(2){animation-delay:1.1s}
.stage.play .tx li:nth-child(3){animation-delay:1.9s}
.stage.play .tx li:nth-child(4){animation-delay:2.6s}
.stage.play .tx li:nth-child(5){animation-delay:3.3s}
.stage.play .notif{animation-delay:3.8s}
.stage.play .tx li:nth-child(6){animation-delay:4.5s}
.stage.play .saved{animation-delay:5.2s}
@keyframes pop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage.play .tx li,.stage.play .notif,.stage.play .saved{animation:none;opacity:1;transform:none}}
/* 961-1100px: the stage gets a little more of the row, the "Recorded" card steps aside and the robot shrinks,
   so the text card stays readable (about 200px) and the robot never touches the phone. */
@media (max-width:1100px) and (min-width:961px){
  .hero-grid{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:32px}
  .hero h1{font-size:clamp(34px,4.2vw,46px)}
  .stage-robot{width:200px;height:200px;left:-16px;bottom:-4px}
  .phone{width:262px;right:18px}
  .ph-call small,.notif .n-time{display:none}
  .tx li{font-size:12.5px}
  .stage-side{left:16px;width:calc(100% - 262px - 18px - 16px - 12px)}
  .stage-side .saved{display:none}
}
@media (max-width:960px){
  .stage{height:auto;padding:58px 0 18px;border-radius:24px;display:flex;flex-direction:column}
  .stage-robot{display:none}
  /* the phone grows with its text, so the last line is never cut off on narrow phones */
  .phone{position:relative;right:auto;top:auto;margin:0 auto;width:min(286px,84%);height:auto;min-height:490px;order:1}
  .phone-screen{height:auto;min-height:470px}
  .tx{overflow:visible;padding-bottom:16px}
  .stage-side{position:static;width:auto;max-width:none;order:2;margin:-14px 14px 0;gap:0}
  .notif{box-shadow:var(--shadow-lg)}
  .stage-side .saved{position:absolute;right:12px;top:12px;padding:6px 10px;font-size:12.5px;border-radius:999px;box-shadow:var(--shadow-sm)}
  .saved .s-ico{width:22px;height:22px;border-radius:6px}
  .saved small{display:none}
  .tx li{font-size:12.5px;padding:7px 10px}
  .tx{gap:6px}
}

/* ---------- generic cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px}
.ico.navy{background:var(--navy-l);color:var(--navy-2)}
.ico.gold{background:var(--gold-l);color:#A86E12}
.ico.green{background:var(--green-l);color:var(--green)}
.checks li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.checks li+li{margin-top:10px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137F57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat}
.checks b{color:var(--ink)}

/* ---------- two jobs ---------- */
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.job{padding:30px}
.job-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.job h3{font-size:23px;font-weight:800}
.job .job-sub{font-size:16px;color:var(--ink-2);margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;justify-content:center}
#features{padding-bottom:48px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.chip svg{width:16px;height:16px;color:var(--navy-2)}
@media (max-width:860px){.jobs{grid-template-columns:1fr}.job{padding:22px}.job h3{font-size:21px}}
.jobs-tabs{display:none}
@media (min-width:601px){.jt{display:none}}  /* the phone-only switches never take keyboard focus on wider screens */
@media (max-width:600px){
  .jobs-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:12px;background:#EDF0F5;border-radius:14px}
  .jobs-tabs label{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;font-weight:700;font-size:15px;color:var(--ink-2);cursor:pointer}
  #jt-in:checked ~ .jobs-tabs label[for=jt-in],#jt-out:checked ~ .jobs-tabs label[for=jt-out]{background:var(--surface);color:var(--navy);box-shadow:var(--shadow-sm)}
  #jt-in:focus-visible ~ .jobs-tabs label[for=jt-in],#jt-out:focus-visible ~ .jobs-tabs label[for=jt-out]{outline:3px solid var(--gold)}
  #jt-in:checked ~ .jobs .job:nth-child(2),#jt-out:checked ~ .jobs .job:nth-child(1){display:none}
}
@media (max-width:600px){.chips{display:none}.job .job-sub{font-size:15px}.checks li{font-size:15px}.checks li+li{margin-top:8px}}

/* ---------- Spanish: a real outgoing call with English captions (#spanish) ---------- */
/* The panel reuses the hero stage's light (warm top right, cool bottom right), so it reads as "proof", like the stage.
   Text sits on the left, where the panel is plain #F6F8FC (the gold kicker keeps 4.7:1 there). */
.es-sec{padding:8px 0 0}
.es-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:48px;border-radius:28px;border:1px solid #E3E8F1;box-shadow:inset 0 1px 0 #fff;
  background:radial-gradient(70% 70% at 100% 0%,#FFF6E6 0%,rgba(255,246,230,0) 70%),radial-gradient(70% 80% at 100% 100%,#E7EEF9 0%,rgba(231,238,249,0) 70%),#F6F8FC}
.es-copy .lead{font-size:18px}
.es-set{margin-top:26px;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:12px 14px 14px}
.es-set-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.es-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:9px;padding:4px;background:#EDF0F5;border-radius:12px}
.es-seg span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.es-seg .on{background:var(--surface);color:var(--navy);font-weight:700;box-shadow:var(--shadow-sm)}
.es-seg .on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l);flex:none}
/* player card */
.es-player{padding:20px 20px 16px;box-shadow:var(--shadow)}
.es-head{display:flex;align-items:center;gap:14px}
.es-body{flex:1;min-width:0}
.es-title{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.es-seek{position:relative;height:36px;margin:3px 0 1px;cursor:pointer;touch-action:none;border-radius:6px}
.es-wf{position:absolute;left:0;top:4px;width:100%;height:28px;fill:rgba(27,58,107,.24)}
.es-wf-on{fill:var(--gold);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
/* playhead: shows once the call has started, and on hover / keyboard focus */
.es-seek::after{content:"";position:absolute;top:1px;bottom:1px;left:var(--p,0%);width:2px;margin-left:-1px;border-radius:2px;background:var(--navy);opacity:0;transition:opacity .15s}
.es-player.started .es-seek::after,.es-seek:hover::after,.es-seek:focus-visible::after{opacity:1}
.es-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.es-tags span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:#EEF0F4;border-radius:999px;padding:2px 10px}
.es-tags span::before{content:"";width:12px;height:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137F57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
/* transcript: the call as chat bubbles (same look as the hero phone); the line being spoken is outlined in gold */
.es-tx{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.es-tx li{display:flex}
.es-tx .es-ld{justify-content:flex-end}
.es-line{display:block;max-width:88%;margin:0;text-align:left;font:inherit;font-size:14.5px;line-height:1.45;padding:8px 13px 10px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,box-shadow .15s}
.es-ai .es-line{border-bottom-left-radius:5px}
.es-ld .es-line{background:var(--navy);border-color:var(--navy);color:#fff;border-bottom-right-radius:5px}
.es-line .who{display:flex;align-items:center;gap:6px;margin-bottom:1px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--navy-2)}
.es-line .at{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.es-ld .es-line .who,.es-ld .es-line .at{color:#B9C7DE}
.es-ai .es-line:hover{border-color:var(--navy-2);background:var(--surface)}
.es-ld .es-line:hover{background:var(--navy-2);border-color:var(--navy-2)}
.es-ai .es-line.on{background:var(--gold-l);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.es-ld .es-line.on{box-shadow:0 0 0 3px var(--gold)}
/* small "speaking" bars next to the line being played */
.es-line .who::after{content:"";display:none;width:13px;height:10px;margin-left:4px;color:var(--gold-t);background:
  linear-gradient(currentColor,currentColor) 0 100%/3px 40% no-repeat,
  linear-gradient(currentColor,currentColor) 5px 100%/3px 100% no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/3px 60% no-repeat}
.es-ld .es-line .who::after{color:var(--gold)}
.es-player.playing .es-line.on .who::after{display:block;animation:es-eq .8s ease-in-out infinite alternate}
@keyframes es-eq{0%{background-size:3px 40%,3px 100%,3px 60%}50%{background-size:3px 100%,3px 45%,3px 90%}100%{background-size:3px 55%,3px 80%,3px 30%}}
@media (prefers-reduced-motion:reduce){.es-player.playing .es-line.on .who::after{animation:none}}
.es-hint{margin-top:12px;font-size:13px;color:var(--ink-3);text-align:center}
@media (max-width:1100px) and (min-width:961px){.es-panel{gap:32px;padding:40px}}
@media (max-width:960px){.es-panel{grid-template-columns:1fr;gap:28px;padding:36px}.es-copy{max-width:640px}}
@media (max-width:600px){
  .es-sec{padding:0}
  .es-panel{padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:22px}
  .es-copy .lead{font-size:16.5px}
  .es-set{display:none}             /* the sentence above says the same thing; keeps the phone page short */
  .es-player{padding:16px 14px 14px}
  /* phone: button beside the title and the seek bar; the two labels get their own row underneath */
  .es-head{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;align-items:center}
  .es-body{display:contents}
  .es-play{grid-row:1 / span 2}
  .es-head .ddh-top,.es-seek{grid-column:2}
  .es-tags{grid-column:1 / -1;margin-top:8px}
  .es-line{max-width:92%;font-size:14px}
}

/* ---------- dashboard preview ---------- */
.dash-sec{background:linear-gradient(180deg,var(--bg) 0%,#F1F4F9 100%)}
.dash{border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.dash-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FBFCFE}
.dash-bar i{width:10px;height:10px;border-radius:50%;background:#DCE1EA}
.dash-bar .tabs{display:flex;gap:6px;margin-left:14px}
.dash-bar .tabs span{font-size:13px;font-weight:600;color:var(--ink-3);padding:5px 10px;border-radius:8px}
.dash-bar .tabs span.on{background:var(--navy-l);color:var(--navy)}
.dash-bar .ex{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dash-body{display:grid;grid-template-columns:1.1fr 1fr;min-height:420px}
.calls{border-right:1px solid var(--line)}
.calls li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}
.calls li.sel{background:var(--navy-ll);box-shadow:inset 3px 0 0 var(--gold)}
.calls .dir{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.calls .dir svg{width:16px;height:16px}
.calls .dir.in{background:var(--navy-l);color:var(--navy-2)}
.calls .dir.out{background:var(--gold-l);color:#A86E12}
.calls .what{min-width:0}
.calls .what b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calls .what > span:not(.badge){font-size:12.5px;color:var(--ink-3)}
.calls .time{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;margin-top:3px}
.badge.green{background:var(--green-l);color:var(--green-t)}
.badge.navy{background:var(--navy-l);color:var(--navy-2)}
.badge.gold{background:var(--gold-l);color:#8A5A0C}
.badge.gray{background:#EEF0F4;color:var(--ink-2)}
.detail{padding:20px 22px}
.detail .h3-like{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.025em;line-height:1.12}  /* mock UI text, not a page heading */
.detail .meta{font-size:13px;color:var(--ink-3);margin-top:2px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0;font-size:13.5px}
.facts dt{color:var(--ink-3);font-weight:600}
.facts dd{margin:0;color:var(--ink)}
.rec{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#FBFCFE}
.rec .bars{flex:1;height:24px;background:repeating-linear-gradient(90deg,var(--navy-2) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);opacity:.28;border-radius:4px}
.rec span{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.mini-tx{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.mini-tx p{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.mini-tx p b{color:var(--navy-2);font-weight:700}
.dash-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:26px}
.dash-foot p{font-size:15px;color:var(--ink-2)}
@media (max-width:860px){
  .dash-body{grid-template-columns:1fr}
  .calls{border-right:0;border-bottom:1px solid var(--line)}
  .calls li{padding:12px 14px;gap:10px}
  .calls li:nth-child(n+4){display:none}
  .mini-tx{display:none}
  .dash-bar .tabs span:not(.on){display:none}
  .detail{padding:18px 16px}
}

/* ---------- 4 steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:24px 22px 24px;display:flex;flex-direction:column;align-items:flex-start}
.step .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:15px;margin-bottom:16px}
.step h3{font-size:18.5px;font-weight:800;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink-2);margin-bottom:16px}
.step .tag{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:13px;font-weight:600;color:var(--navy-2);background:var(--navy-ll);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.setup{margin-top:20px;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r);background:var(--surface);border:1px dashed var(--line-2)}
.setup p{font-size:15.5px;color:var(--ink-2)}
.setup p b{color:var(--ink)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;background:var(--navy);color:#fff;padding:1px 7px;border-radius:6px;font-size:14px}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:0 0 22px;background:none;border:0;box-shadow:none;border-radius:0}
  .step .num{margin:0;grid-row:span 3}
  .step::after{content:"";position:absolute;left:16.5px;top:40px;bottom:6px;width:1px;background:var(--line-2)}
  .step:last-child::after{display:none}
  .step .tag{display:none}
  .step p{margin-bottom:0}
  .step h3{font-size:17.5px;margin-bottom:4px}
  .setup{align-items:flex-start}
}

/* ---------- industries ---------- */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ind{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.ind:hover{border-color:var(--navy-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.ind .ico{width:40px;height:40px;border-radius:11px}
.ind h3{font-size:16.5px;font-weight:800;display:flex;align-items:center;gap:6px}
.ind h3 svg{width:15px;height:15px;color:var(--ink-3);transition:transform .15s}
.ind:hover h3 svg{transform:translateX(3px);color:var(--navy-2)}
.ind p{font-size:14.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
@media (max-width:960px){.inds{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.inds{grid-template-columns:1fr 1fr;gap:8px}.ind{padding:12px;gap:10px;align-items:center}.ind .ico{width:34px;height:34px;border-radius:9px}.ind .ico svg{width:18px;height:18px}.ind h3{font-size:14.5px;line-height:1.25}.ind h3 svg{display:none}.ind p{display:none}}

/* ---------- pricing ---------- */
.price-sec{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* "Start my $49 week" links land a little lower into the plans: the section's empty top padding may sit under the
   sticky header, so the first plan button is on screen at 1366x768 */
.price-sec{scroll-margin-top:-60px}
@media (max-width:760px){.price-sec{scroll-margin-top:-28px}}
.price-sec .sec-head{margin-bottom:28px}
.week{display:flex;align-items:center;gap:16px;max-width:860px;margin:0 auto 22px;padding:16px 20px;border-radius:var(--r);background:var(--gold-l);border:1px solid #F6DDAE}
.week .wk-ico{width:48px;height:48px;border-radius:14px;background:var(--gold);display:grid;place-items:center;flex:none;color:var(--navy);font-weight:800;font-size:15px}
.week p{font-size:15.5px;color:#5B430F}
.week p b{color:var(--navy)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.plan.best{border:2px solid var(--navy);box-shadow:var(--shadow)}
.plan .ribbon{position:absolute;top:-12px;left:22px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.plan h3{font-size:19px;font-weight:800}
.plan .for{font-size:14px;color:var(--ink-3);margin-top:2px;min-height:21px}
.plan .amt{margin:16px 0 4px;display:flex;align-items:baseline;gap:4px;color:var(--navy)}
.plan .amt b{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan .amt small{font-size:15px;color:var(--ink-3);font-weight:600}
.plan .amt .from{font-size:15px;color:var(--ink-3);font-weight:600;margin-right:2px}
.plan .stats{margin:14px 0 20px;display:grid;gap:8px}
.plan .stats li{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--line)}
.plan .stats li b{color:var(--ink)}
.plan .plan-perk{font-size:13.5px;font-weight:600;line-height:1.4;margin-top:6px}
.plan .plan-perk a{color:var(--navy-2);text-decoration:underline;text-decoration-color:rgba(27,58,107,.35);text-underline-offset:3px}
.plan .plan-perk a:hover{text-decoration-color:currentColor}
.plan .btn{margin-top:auto;width:100%;white-space:nowrap;padding-left:10px;padding-right:10px;font-size:15px}
.plan .fine{font-size:13px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.4;min-height:2.8em}
.plan .fine-2{display:block;margin-top:4px}
/* Line the cards up row by row (name, subtitle, Premium's perk, price, stats, button, fine print), so Premium's extra
   lines never leave a hole above the other cards' buttons. Browsers without subgrid keep the plain column layout. */
@supports (grid-template-rows:subgrid){
  @media (min-width:601px){
    /* the space between rows of cards is a margin, not the grid gap: Chrome adds the gap to the empty perk row */
    .plans{row-gap:0;margin-bottom:-16px}
    .plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:16px}
    .plan h3{grid-row:1}.plan .for{grid-row:2}.plan .plan-perk{grid-row:3}.plan .amt{grid-row:4}.plan .stats{grid-row:5}.plan .btn{grid-row:6;align-self:end}.plan .fine{grid-row:7}
  }
}
.includes{margin-top:24px;display:grid;grid-template-columns:1fr;gap:16px}
.inc-box{padding:24px 26px}
.inc-box h3{font-size:17px;font-weight:800;margin-bottom:14px}
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px}
.inc-grid li{font-size:14.5px}
.inc-grid li+li{margin-top:0}
.inc-box.bull{padding:0}
.bull > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:22px 26px;border-radius:var(--r-lg)}
.bull > summary::-webkit-details-marker{display:none}
.bull > summary h3{display:flex;align-items:center;gap:8px;margin:0}
.bull .bull-sum{font-size:14.5px;color:var(--ink-2);flex-basis:100%}
.bull[open] .bull-sum{display:none}
.bull .chev{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--navy-l);display:grid;place-items:center;flex:none;transition:transform .2s}
.bull .chev svg{width:16px;height:16px;color:var(--navy-2)}
.bull[open] .chev{transform:rotate(180deg)}
.tiers{display:grid;grid-template-columns:1fr 2fr;gap:18px;padding:0 26px 24px}
.tgroup{display:flex;flex-direction:column;gap:8px}
.tgroup.addons{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-content:start}
.tlbl{grid-column:1 / -1;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.tier{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font-size:14px;line-height:1.5;color:var(--ink-2);flex:1}
.tier b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tier .tp{font-size:14.5px;font-weight:700;color:var(--navy-2);white-space:nowrap}
.tier.inc{background:#F4FBF8;border-color:#D3EEE2}
.tier.inc .tp{color:var(--green-t)}
.pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin-top:22px;font-size:13.5px;color:var(--ink-3)}
.pay .pm{display:inline-flex;align-items:center;gap:6px}
.pay img{display:block;height:22px;width:auto}
details.more{margin:22px auto 0;max-width:860px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
details.more summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";font-size:22px;font-weight:500;color:var(--ink-3);line-height:1}
details.more[open] summary::after{content:"\2212"}
details.more .body{padding:0 18px 16px;font-size:15px;color:var(--ink-2)}
details.more .body p+p{margin-top:10px}
@media (max-width:1240px) and (min-width:861px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1100px){.inc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.inc-grid{grid-template-columns:1fr 1fr}.tiers{grid-template-columns:1fr}.week{align-items:flex-start}}
@media (max-width:600px){.tgroup.addons{grid-template-columns:1fr}.bull > summary{padding:18px 20px}.tiers{padding:0 20px 20px;gap:14px}}
@media (max-width:600px){.inc-grid{grid-template-columns:1fr 1fr;gap:9px 10px}.inc-grid li{font-size:13.5px;padding-left:24px}.inc-grid li::before{width:16px;height:16px;background-size:10px}}
@media (max-width:600px){
  .plans{gap:12px}
  .plan{padding:18px 18px 16px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:end}
  .plan h3,.plan .for{grid-column:1}
  .plan h3{font-size:18px}
  .plan .for{min-height:0;font-size:13.5px}
  .plan .amt{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center}
  .plan .amt b{font-size:34px}
  .plan .stats{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 12px}
  .plan .stats li{flex-direction:column-reverse;gap:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;line-height:1.3}
  .plan .stats li b{font-size:16px}
  .plan .btn,.plan .fine,.plan .plan-perk{grid-column:1 / -1}
  .plan .plan-perk{margin-top:4px}
  .plan .stats li:nth-child(3){grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:baseline}
  .plan .stats li:nth-child(3) b{font-size:15px}
  .plan .fine{margin-top:8px;min-height:0}
  .plan.best{margin-top:10px}
  .inc-box{padding:20px}
}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-size:17px;font-weight:700;color:var(--navy);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy-l);display:grid;place-items:center;transition:transform .2s}
.faq summary .pm svg{width:14px;height:14px;color:var(--navy-2)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--gold-l)}
.faq .a{padding:0 4px 20px;font-size:16px;color:var(--ink-2);max-width:740px}
@media (max-width:600px){.faq summary{font-size:16px;padding:15px 2px}}

/* ---------- final band ---------- */
.final{padding:24px 0 88px}
.final-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:34px 40px;border-radius:28px;background:var(--navy);color:#fff;overflow:hidden}
/* a soft lighter-navy light, not gold: gold over navy turns olive */
.final-card::before{content:"";position:absolute;right:-110px;top:-150px;width:380px;height:380px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,118,186,.38),rgba(74,118,186,0));pointer-events:none}
.final-card .bot{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFFFFF 0%,#E9EEF7 70%);display:grid;place-items:center;overflow:hidden;position:relative}
.final-card .bot img{width:128px;height:128px;margin-top:10px}
.final-card h2{color:#fff;font-size:clamp(24px,3vw,34px);font-weight:800}
.final-card p{color:#C5D1E6;margin-top:8px;font-size:16px}
.final-card .btn{position:relative}
@media (max-width:860px){.final-card{grid-template-columns:1fr;text-align:center;padding:30px 22px;justify-items:center;gap:18px}.final-card .btn{width:100%}}

/* ---------- footer ---------- */
.ftr{padding:56px 0 28px;border-top:1px solid var(--line);background:var(--surface);font-size:15px}
.ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1.5fr 1fr;gap:32px}
.ftr .ftr-h{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ftr a{color:var(--ink-2);text-decoration:none;display:block;padding:8px 0;line-height:1.3}
.ftr .brand{display:inline-flex;padding:0;color:var(--navy)}
.ftr a:hover{color:var(--navy);text-decoration:underline}
.ftr .two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ftr .tagline{color:var(--ink-2);margin-top:12px;font-size:15px}
.ftr .p5{margin-top:14px;font-size:14px;color:var(--ink-3)}
.ftr .p5 a{display:inline-block;color:var(--ink-2);font-weight:600;padding:8px 0}
.ftr .rv{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.ftr .rv a{display:inline-block;font-size:14px;padding:9px 0}
.ftr-bot{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px;color:var(--ink-3)}
.ftr-bot details summary{cursor:pointer;color:var(--ink-3);padding:8px 0}
.ftr-bot details p{margin-top:8px;max-width:720px}
@media (max-width:960px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr-grid{grid-template-columns:1fr 1fr;gap:22px 16px}.ftr-grid > div:first-child,.ftr-grid > div:nth-child(3){grid-column:1 / -1}.ftr-grid > div:nth-child(4){grid-row:2;grid-column:2}.ftr a{padding:9px 0}}

/* ---------- sticky mobile bar (start page) ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgba(15,30,54,.3);transform:translateY(110%);transition:transform .25s}
.sticky span{font-size:14px;font-weight:700;color:var(--navy);line-height:1.25}
.sticky small{display:block;font-weight:500;color:var(--ink-3);font-size:12.5px}
.sticky.show{transform:none}
@media (max-width:760px){.sticky{display:flex}}

/* ---------- email gate (same flow as live) ---------- */
.dd-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.dd-gate[hidden]{display:none}
.dd-gate-backdrop{position:absolute;inset:0;background:rgba(15,30,54,.55)}
.dd-gate-card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--surface);border-radius:20px;padding:28px 24px 22px;box-shadow:var(--shadow-lg)}
.dd-gate-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:none;font-size:26px;color:var(--ink-3);cursor:pointer;border-radius:10px}
.dd-gate-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-t)}
.dd-gate-title{font-size:22px;font-weight:800;margin-top:6px}
.dd-gate-sub{font-size:15px;color:var(--ink-2);margin-top:6px}
.dd-gate-label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:14px 0 6px}
.dd-gate-label span{color:var(--ink-3);font-weight:500}
.dd-gate-input{width:100%;min-height:48px;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 14px;font:inherit;font-size:16px}
.dd-gate-input:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px var(--navy-l)}
.dd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dd-gate-err{color:#B42318;font-size:14px;margin-top:8px}
.dd-gate-submit{width:100%;margin-top:18px;min-height:50px;border:0;border-radius:12px;background:var(--gold);color:var(--navy);font-weight:800;font-size:16px;cursor:pointer}
.dd-gate-submit:hover{background:var(--gold-d)}
.dd-gate-fine{margin-top:12px;font-size:13px;color:var(--ink-3);text-align:center;line-height:1.45}
.dd-gate-submit:disabled{opacity:.65;cursor:default}

/* ---------- after checkout: ?status=success (homepage) ---------- */
.ov{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,30,54,.6)}
.ov.show{display:flex}
.ov-box{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--surface);border-radius:24px;padding:34px 28px 26px;box-shadow:var(--shadow-lg);text-align:center}
.ov-box .ov-bot{width:72px;height:72px;margin:0 auto 12px}
.ov-title{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.ov-lede{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.ov-steps{margin:20px 0 6px;text-align:left;counter-reset:ov}
.ov-steps li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.ov-steps li:last-child{border-bottom:0}
.ov-steps li::before{counter-increment:ov;content:counter(ov);flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.ov-help{margin-top:10px;font-size:14px;color:var(--ink-3)}
.ov-help a{color:var(--navy-2);font-weight:700}
.ov-close{margin-top:16px;width:100%}