:root{
  --coral:#F4395A; --coral-dark:#DE2E4D;
  --text:#161616; --text-2:#5C5C5C; --text-3:#9B9B9B;
  --border:#E8E8E8; --border-strong:#8A8A8A; --bg:#fff; --bg-soft:#FAFAFA; --coral-tint:#FFF3F5;
  --maxw:1240px; --pad:56px;
  /* Dark palette (2026-08-11 "console-first" direction).
     --grad-1 is deliberately NOT the brand coral: white text on #FF3B5C tops out
     at 3.48:1, so no alpha can reach AA on it. #8E1A3E keeps the coral->navy
     read while carrying white at 8.87:1 and body copy at 5.04:1. */
  --navy:#0E1330; --navy-2:#161B3A; --navy-deep:#0A0E24;
  --grad-1:#8E1A3E; --grad-2:#6B1540; --grad-3:#2A1B4A; --grad-4:#0E1330;
  /* .72 is the floor that clears 4.5:1 against --grad-1, the lightest thing
     any of this text sits on. Anything dimmer fails on the hero. */
  --on-navy:#fff; --on-navy-2:rgba(255,255,255,.82); --on-navy-3:rgba(255,255,255,.72);
  --navy-line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;font-size:16px;}
img{max-width:100%;display:block;}
a{color:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;
  padding:14px 28px;transition:background .15s ease,border-color .15s ease;}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:8px;}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:hover{background:var(--coral-dark);}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--text-3);}
@keyframes modal-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Nav (dark) */
.site-header{background:var(--navy);}
.nav{display:flex;align-items:center;gap:36px;padding-top:14px;padding-bottom:14px;}
.brand{text-decoration:none;}
.brand-logo{height:40px;width:auto;display:block;}
.brand-logo.is-inverted{filter:brightness(0) invert(1);}   /* coral wordmark -> white on navy */
@media(max-width:768px){.brand-logo{height:32px;}}
.nav-links{display:flex;gap:24px;list-style:none;}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--on-navy-2);}
.nav-links a:hover{color:var(--on-navy);}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto;}
.btn-onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn-onnavy:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-onnavy-solid{background:#fff;color:var(--navy);}
.btn-onnavy-solid:hover{background:#EFEFEF;}
/* Hero (dark gradient, copy + product mock) */
.hero-dark{background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 30%,var(--grad-3) 68%,var(--grad-4) 100%);padding:96px 0 110px;}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.hero-h1{font-size:clamp(38px,5.4vw,54px);font-weight:800;letter-spacing:-1.8px;line-height:1.07;color:#fff;margin-bottom:22px;}
.accent{color:var(--coral);}
.hero-sub{font-size:18px;color:var(--on-navy-2);max-width:470px;margin-bottom:30px;line-height:1.65;}
.hero-form{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.hero-field{position:relative;flex:1 1 240px;min-width:0;}
.hero-field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6E6E6E;pointer-events:none;}
.hero-input{width:100%;font:inherit;font-size:15px;padding:15px 16px 15px 38px;border-radius:9px;border:1px solid transparent;background:#fff;color:var(--text);}
.hero-input::placeholder{color:#6E6E6E;}
.hero-input:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.hero-fineprint{font-size:13px;color:var(--on-navy-3);margin-bottom:36px;}
.hero-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;max-width:470px;font-size:13.5px;color:var(--on-navy-3);}
/* Hero product mock */
.hero-mock{min-width:0;}
.mock-window{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);}
.mock-chrome{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#EFEFEF;border-bottom:1px solid #E0E0E0;}
.mock-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.mock-dot-r{background:#E7605A;}.mock-dot-y{background:#E7B454;}.mock-dot-g{background:#67C15E;}
.mock-url{flex:1;margin-left:8px;background:#fff;border-radius:5px;padding:5px 12px;font-size:12px;color:#6E6E6E;}
.mock-body{padding:22px;}
.mock-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;}
.mock-role{font-weight:700;font-size:15px;}
.mock-count{color:var(--text-2);font-weight:400;}
.mock-sorted{font-size:12px;color:var(--text-2);white-space:nowrap;}
.mock-rows{list-style:none;display:flex;flex-direction:column;gap:10px;}
.mock-row{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px;border-radius:10px;border:1px solid transparent;}
.mock-row.is-top{background:linear-gradient(90deg,#FFF3F5,#FFF8F5);border-color:#FFC9D4;}
.mock-av{position:relative;width:56px;height:56px;border-radius:10px;background-size:cover;background-position:center top;background-color:var(--coral-tint);}
.mock-progress{position:absolute;left:5px;right:5px;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.5);overflow:hidden;}
.mock-progress span{display:block;height:100%;background:var(--coral);border-radius:2px;}
.mock-info{min-width:0;}
.mock-name{display:block;font-size:14px;font-weight:700;}
.mock-meta{display:block;font-size:12px;color:var(--text-2);margin-top:2px;}
.mock-match{font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:#EFEFEF;color:#4A4A4A;white-space:nowrap;}
.mock-match.is-best{background:var(--coral);color:#fff;}
/* Section shared */
.section{padding-top:110px;padding-bottom:110px;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-h2{font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.15;margin:14px 0;}
.section-lede{font-size:17px;color:var(--text-2);line-height:1.7;}
/* Stats */
.stats{padding-top:100px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat{padding:40px 32px;border-right:1px solid var(--border);}
.stats-grid .stat:last-child{border-right:none;}
.stat-num{font-size:40px;font-weight:800;letter-spacing:-1.5px;}
.stat-label{font-size:14px;color:var(--text-2);margin-top:6px;}
.card-h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:10px;}
/* Generic card grid */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
/* Band (FAQ) */
.band{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* Anchor scroll offset */
.anchor{scroll-margin-top:120px;}
/* Pricing */
.billing-wrap{display:flex;justify-content:center;margin-bottom:56px;}
.billing-toggle{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:100px;padding:4px;gap:4px;}
.bt-opt{font:inherit;border:none;background:none;cursor:pointer;padding:9px 22px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:8px;}
.bt-opt.is-active{background:var(--text);color:#fff;}
.bt-save{font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;background:var(--coral-tint);color:var(--coral);}
.bt-opt.is-active .bt-save{background:#fff;color:var(--text);}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.plan{border:1px solid var(--border);border-radius:16px;padding:32px 24px;display:flex;flex-direction:column;position:relative;}
.plan-featured{border:2px solid var(--coral);box-shadow:0 12px 32px rgba(244,57,90,.1);}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:100px;white-space:nowrap;}
.plan-name{font-size:17px;font-weight:700;letter-spacing:-.2px;margin-bottom:8px;}
.plan-desc{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:28px;min-height:68px;}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;}
.price{font-size:40px;font-weight:800;letter-spacing:-1.5px;}
.price-sm{font-size:26px;font-weight:800;letter-spacing:-0.5px;}
.price-unit{font-size:14px;color:var(--text-3);}
.plan-note{font-size:12px;color:var(--text-2);margin-bottom:28px;min-height:36px;}
.plan-cta{width:100%;}
.plan-rows{list-style:none;display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--border);flex:1;}
.prow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);gap:8px;font-size:13px;color:var(--text-2);}
.prow-v{font-weight:700;color:var(--text);text-align:right;}
.prow-x{color:var(--text-3);text-align:right;}
.prow-y{font-weight:700;color:var(--coral);text-align:right;}
.pricing-extra-row{display:flex;}                       /* no-JS: all rows visible */
.js .pricing-extra-row{display:none;}                   /* JS: collapsed until expanded */
.js body.features-expanded .pricing-extra-row{display:flex;}
/* Pricing expand wrap */
.pricing-expand-wrap{text-align:center;margin-top:28px;}
.features-expand{font:inherit;background:none;border:1px solid var(--border);border-radius:100px;padding:12px 24px;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.features-expand:hover{border-color:var(--text-3);color:var(--text);}
.fe-icon{display:inline-block;transition:transform .2s ease;}
body.features-expanded .fe-icon{transform:rotate(45deg);}
/* ── Dark sections (2026-08-11 console-first direction) ── */
.section-dark{background:var(--navy);padding:100px 0;color:#fff;}
.section-dark .section-h2{color:#fff;}
.eyebrow-coral{color:#FF8DA1;}          /* 6.4:1 on --navy; the brand coral is 3.1:1 there */
.section-lede-dark{font-size:16px;color:var(--on-navy-2);line-height:1.7;max-width:420px;}
.card-body-dark{font-size:14.5px;color:var(--on-navy-2);line-height:1.65;}
.steps-dark{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-line);border-radius:14px;overflow:hidden;}
.step-dark{background:var(--navy-2);padding:40px 32px;display:flex;flex-direction:column;gap:14px;}
.step-dark-n{font-size:44px;font-weight:800;line-height:1;color:#FF8DA1;opacity:.7;}
.step-dark .card-h3{color:#fff;margin:0;}
/* Trust list */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.trust-list{list-style:none;background:var(--navy-2);border-radius:10px;padding:8px;}
.trust-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;font-size:14.5px;color:var(--on-navy-2);border-bottom:1px solid var(--navy-line);}
.trust-list li:last-child{border-bottom:none;}
.trust-tick{color:#5BE49B;font-weight:700;flex:none;}
/* Feature rows */
.feat-rows{display:flex;flex-direction:column;gap:88px;}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.feat-row.is-flipped .feat-copy{order:2;}
.feat-row.is-flipped .feat-visual{order:1;}
.feat-visual{min-width:0;}
.feat-icon{width:40px;height:40px;border-radius:10px;background:var(--coral-tint);display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:16px;}
.feat-diamond{width:14px;height:14px;background:var(--coral);border-radius:3px;transform:rotate(45deg);}
.feat-dots{display:flex;gap:3px;}
.feat-dots i{width:6px;height:6px;border-radius:50%;background:var(--coral);}
.feat-ring{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--coral);}
.feat-h3{font-size:27px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin:10px 0 14px;}
.feat-body{font-size:15.5px;color:var(--text-2);line-height:1.7;max-width:440px;}
/* Product screenshots. width/height are on the <img> so the row reserves space
   before the file loads; height:auto keeps the real aspect ratio. */
.feat-shot{width:100%;height:auto;border-radius:10px;border:1px solid var(--border);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.25);}
/* Testimonials */
.testi{border:1px solid var(--border);border-radius:14px;padding:32px;}
.testi-stars{color:var(--coral);font-size:13px;letter-spacing:2px;margin-bottom:14px;}
.testi-q{font-size:15px;line-height:1.75;margin-bottom:24px;font-style:normal;}
.testi-who{display:flex;align-items:center;gap:12px;}
.testi-av{width:38px;height:38px;border-radius:50%;background:var(--coral-tint) center/cover;flex:0 0 auto;}
.testi-name{display:block;font-size:14px;font-weight:700;}
.testi-role{display:block;font-size:12px;color:var(--text-2);}
/* FAQ */
.faq-wrap{padding-top:100px;padding-bottom:100px;}
.faq-list{display:flex;flex-direction:column;max-width:720px;margin:0 auto;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;font:inherit;background:none;border:none;padding:22px 0;text-align:left;font-size:16px;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.4;}
.faq-sign{font-size:22px;font-weight:300;color:var(--text-3);flex-shrink:0;transition:transform .2s ease;}
.faq-item.open .faq-sign{transform:rotate(45deg);}
.faq-a{padding-bottom:22px;}                 /* no-JS: all answers visible */
.js .faq-item .faq-a{display:none;}          /* JS: collapsed */
.js .faq-item.open .faq-a{display:block;}
.faq-a p{font-size:15px;color:var(--text-2);line-height:1.75;}
/* CTA */
.cta-wrap{padding:96px 0;background:var(--bg-soft);border-top:1px solid var(--border);}
.cta-card{border-radius:20px;text-align:center;padding:72px 48px;
  background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 34%,var(--grad-3) 74%,var(--grad-4) 100%);}
.cta-h2{font-size:clamp(30px,5vw,38px);font-weight:800;letter-spacing:-1.2px;line-height:1.15;color:#fff;margin-bottom:14px;}
.cta-sub{font-size:16px;color:var(--on-navy-2);margin-bottom:32px;}
.cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
/* Footer */
.footer{border-top:1px solid var(--border);padding:56px 0;}
.footer-dark{background:var(--navy-deep);border-top:none;color:#fff;}
.footer-dark .footer-tag{color:var(--on-navy-3);}
.footer-dark .footer-col h4{color:var(--on-navy-3);}
.footer-dark .footer-col a{color:var(--on-navy-2);}
.footer-dark .footer-col a:hover{color:#fff;}
.footer-dark .footer-bottom{border-top-color:var(--navy-line);color:var(--on-navy-3);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px;}
.footer-tag{font-size:14px;color:var(--text-2);line-height:1.7;margin-top:12px;max-width:260px;}
.footer-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-3);margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;text-decoration:none;color:var(--text-2);}
.footer-col a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2);}

/* ── Task 8: Demo modal ── */
.demo-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
.demo-modal.open{display:flex;}
.modal-card{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:48px;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.16);animation:modal-in .2s ease;}
.modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff;color:var(--text-3);font-size:18px;line-height:1;}
.modal-close:hover{border-color:var(--text-3);color:var(--text);}
.modal-h2{font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin:10px 0 8px;}
.modal-lede{font-size:15px;color:var(--text-2);line-height:1.6;margin-bottom:28px;}
.modal-fallback{font-size:13px;color:var(--text-3);margin-top:16px;}
.modal-fallback a{color:var(--coral);}
.modal-thanks{display:none;}
.demo-modal.submitted .modal-form{display:none;}
.demo-modal.submitted .modal-thanks{display:block;}

/* ── Responsive ── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .hero-sub,.hero-facts{max-width:none;}
  .trust-grid{grid-template-columns:1fr;gap:32px;}
  .section-lede-dark{max-width:none;}
  .feat-row{grid-template-columns:1fr;gap:32px;}
  /* source order wins on one column, so the flip must be undone */
  .feat-row.is-flipped .feat-copy,.feat-row.is-flipped .feat-visual{order:0;}
  .feat-body{max-width:none;}
}
/* 4 plan columns need ~1080px: below that the two-span feature rows wrap out of
   their card. Kept separate from the 900px block, which is about section layout. */
@media (max-width:1080px){
  .plans{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .steps-dark{grid-template-columns:1fr;}
}
@media (max-width:768px){
  :root{--pad:24px;}
  .nav-links{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid .stat:nth-child(2){border-right:none;}
  /* 40px numerals + 32px side padding overflow a 2-up grid at 375px */
  .stat{padding:28px 16px;}
  .stat-num{font-size:30px;letter-spacing:-1px;}
  .card-grid-3{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1 / -1;}
  .section,.faq-wrap{padding-top:64px;padding-bottom:64px;}
  .section-dark,.cta-wrap{padding-top:64px;padding-bottom:64px;}
  .hero-dark{padding:56px 0 64px;}
  .hero-facts{grid-template-columns:1fr;}
  .cta-card{padding:48px 24px;}
  .modal-card{padding:32px 24px;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;}
  .hero-form{flex-direction:column;}
  .hero-form .btn{width:100%;}
  .mock-row{grid-template-columns:40px 1fr;grid-template-areas:"av info" "match match";gap:10px;}
  .mock-av{grid-area:av;width:40px;height:40px;}
  .mock-info{grid-area:info;}
  .mock-match{grid-area:match;justify-self:start;}
}

/* ── Task 11: Accessibility ── */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}html{scroll-behavior:auto;}}

/* Lead modal form (2026-08-12). Matches the existing modal type scale. */
.lead-form { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.lead-row { display: flex; flex-direction: column; gap: .25rem; }
.lead-row[hidden] { display: none; }
.lead-row label { font-size: .8125rem; font-weight: 600; }
.lead-row input,
.lead-row textarea {
  width: 100%; padding: .5rem .625rem; font: inherit; font-size: .9375rem;
  border: 1px solid var(--border, #d8dbe2); border-radius: .5rem; background: #fff; color: inherit;
}
.lead-row input:focus-visible,
.lead-row textarea:focus-visible { outline: 2px solid var(--coral, #ff6b57); outline-offset: 1px; }
.lead-row textarea { resize: vertical; min-height: 4.5rem; }
.lead-submit { margin-top: .25rem; }
.lead-error { color: #b3261e; font-size: .8125rem; margin: 0; }

/* Honeypot: removed from view and from the a11y tree, but still in the DOM and
   still submitted, which is the entire point. Not display:none — some bots skip
   those; this is off-canvas instead. */
.lead-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}