/* ============ ACUMEN — SHARED STYLES ============ */
:root{
  --bg: #FFFFFF;
  --bg-tint: #F4F4F4;
  --ink: #0A0A0A;
  --ink-soft: #5C5C5C;
  --line: #E2E2E2;
  --accent: #000000;
  --accent-soft: #F0F0F0;
  --charcoal: #000000;
  --charcoal-line: #2B2B2B;
  --paper: #FFFFFF;

  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-font: 'Inter', Arial, sans-serif;

  --max: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
h1{ font-size:clamp(36px, 5vw, 56px); line-height:1.1; }
h2{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.14; }
h3{ font-size:22px; line-height:1.25; }
h4{ font-size:17px; line-height:1.3; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:15px; font-weight:600;
  padding:13px 24px; border-radius:2px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--accent); color:var(--paper); }
.btn-primary:hover{ background:#2b2b2b; }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-dark{ background:#FFFFFF; color:#000000; }
.btn-dark:hover{ background:#e8e8e8; }
.link-arrow{ padding:0; font-size:15px; color:var(--accent); font-weight:600; }
.link-arrow::after{ content:"→"; margin-left:2px; }

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:#000000;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.wordmark{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-0.01em; }
.wordmark svg{ width:28px; height:28px; flex-shrink:0; }
.wordmark.on-dark svg circle:first-child{ fill:#FFFFFF; }
.wordmark.on-dark svg circle:nth-child(2){ stroke:#000000; }
.wordmark.on-dark svg circle:last-child{ fill:#000000; }

header.site .wordmark{
  font-family:var(--nav-font); font-size:22px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#FFFFFF;
}
header.site .wordmark svg{ width:38px; height:38px; }
header.site .wrap.nav{ max-width:100%; padding-left:64px; padding-right:40px; }
header.site .btn-primary{ background:#FFFFFF; color:#000000; }
header.site .btn-primary:hover{ background:#EAEAEA; }

.bg-watermark{
  position:fixed; top:50%; left:50%;
  width:min(900px, 130vw); height:min(900px, 130vw);
  transform:translate(-50%,-50%);
  opacity:.035; z-index:0; pointer-events:none;
}
.bg-watermark svg{ width:100%; height:100%; }
main, footer{ position:relative; z-index:1; }

.nav-links{ display:flex; align-items:center; gap:30px; font-size:14.5px; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; }

/* ---------- OPEN APP / LAUNCH MENU ---------- */
.launch-menu{ position:relative; }
.launch-menu > summary{ list-style:none; }
.launch-menu > summary::-webkit-details-marker{ display:none; }
.launch-menu > summary::marker{ content:""; }
.launch-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:260px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:4px;
  padding:16px 18px; box-shadow:0 16px 40px rgba(0,0,0,.14); z-index:60;
}
.launch-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); gap:12px; }
.launch-row:last-of-type{ border-bottom:none; }
.launch-row .platform{ font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
.launch-row .status{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:4px 8px; border-radius:20px; white-space:nowrap; }
.launch-note{ margin-top:12px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

@media (max-width:900px){
  .wrap.nav{ padding-left:12px; padding-right:12px; }
}

/* ---------- HOMEPAGE HERO ---------- */
.hero{ padding:108px 0 96px; }
.hero-inner{ max-width:760px; }
.hero h1{ line-height:1.06; margin-top:22px; }
.hero p{ font-size:15.5px; color:var(--ink-soft); max-width:480px; margin-top:22px; line-height:1.6; }
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

.hero-media{
  margin-top:64px; aspect-ratio:16/9.5;
  background:linear-gradient(155deg,#2a2a2a,#000000 65%);
  border-radius:3px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-media .tag{
  font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#9A9A9A; border:1px solid #333333; padding:10px 16px; border-radius:2px;
}
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.05), transparent 60%);
}
.play-dot{
  position:absolute; bottom:22px; left:26px; display:flex; align-items:center; gap:10px;
  font-size:12px; color:#C7C7C7; letter-spacing:.04em;
}
.play-dot span.dot{ width:7px; height:7px; border-radius:50%; background:#FFFFFF; }

/* ---------- SUBPAGE HERO (smaller, for inner pages) ---------- */
.page-hero{ padding:76px 0 64px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ line-height:1.1; max-width:760px; }
.page-hero p{ font-size:15.5px; color:var(--ink-soft); max-width:560px; margin-top:18px; line-height:1.6; }

/* ---------- SECTION SHARED ---------- */
section{ padding:104px 0; }
@media (max-width:640px){ section{ padding:64px 0; } }
.section-head{ max-width:620px; }
.section-head h2{ margin-top:16px; }
.section-tint{ background:var(--bg-tint); }
.section-line{ border-top:1px solid var(--line); }

/* ---------- WORKFLOW / NUMBERED TRACK ---------- */
.workflow-track{ margin-top:64px; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.workflow-track::before{ content:""; position:absolute; top:11px; left:0; right:0; height:1px; background:var(--line); }
.wf-step{ position:relative; padding-right:20px; }
.wf-dot{
  width:23px; height:23px; border-radius:50%; background:var(--bg); border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--accent);
  position:relative; z-index:2;
}
.wf-step h3{ font-weight:600; margin-top:22px; }
.wf-step p{ font-size:15.5px; color:var(--ink-soft); margin-top:8px; line-height:1.6; max-width:190px; }
@media (max-width:860px){
  .workflow-track{ grid-template-columns:1fr; gap:28px; }
  .workflow-track::before{ display:none; }
  .wf-step{ padding-right:0; padding-left:30px; border-left:1px solid var(--line); }
  .wf-dot{ position:absolute; left:-12px; top:0; background:var(--bg); }
}

/* ---------- PRODUCT FRAMES ---------- */
.product{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.frame-row{ margin-top:56px; display:flex; gap:20px; overflow-x:auto; padding-bottom:14px; scrollbar-width:thin; }
.frame{ flex:0 0 auto; width:min(78vw, 340px); border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--bg); }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg-tint); }
.frame-bar span{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.frame-body{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; }
.frame-body .label{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--line); padding:14px 12px; border-radius:2px; width:100%;
}
.frame-body--screenshot{ aspect-ratio:auto; height:340px; padding:18px; background:var(--bg-tint); }
.frame-phone{ height:100%; width:auto; margin:0 auto; }
.frame--doc{ width:min(92vw, 520px); }
.frame--doc .frame-body--screenshot{ height:auto; padding:16px; }
.frame-phone--doc{
  height:auto; width:100%; aspect-ratio:1391/1131; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:#fff; line-height:0; box-shadow:0 10px 34px rgba(0,0,0,.08);
}
.frame-phone--doc img{ width:100%; height:100%; display:block; object-fit:cover; }
.frame-caption{ padding:14px 18px 18px; font-size:13px; line-height:1.4; color:var(--ink-soft); text-align:center; border-top:1px solid var(--line); }

/* ---------- TWO-COLUMN AUDIENCE / SPLIT CARDS ---------- */
.audiences-grid{ margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:800px){ .audiences-grid{ grid-template-columns:1fr; } }
.audience-card{ background:var(--bg); padding:44px; }
.audience-card .eyebrow{ margin-bottom:14px; }
.audience-card ul{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.audience-card li{ font-size:15.5px; color:var(--ink-soft); padding-left:18px; position:relative; line-height:1.6; }
.audience-card li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--accent); border-radius:50%; }
.audience-card .btn{ margin-top:30px; }

/* ---------- BULLET / FEATURE GRID (2-4 col) ---------- */
.bullet-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.bullet-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .bullet-grid, .bullet-grid.cols-3{ grid-template-columns:1fr; } }
.bullet-item{ background:var(--bg); padding:32px; }
.bullet-item h4{ font-weight:600; }
.bullet-item p{ font-size:15.5px; color:var(--ink-soft); margin-top:10px; line-height:1.6; }

/* ---------- NUMBERED LIST (vertical, e.g. workflow / migration steps) ---------- */
.numbered-list{ margin-top:48px; display:flex; flex-direction:column; max-width:640px; }
.numbered-row{ display:flex; gap:22px; padding:22px 0; border-top:1px solid var(--line); }
.numbered-row:last-child{ border-bottom:1px solid var(--line); }
.numbered-row .n{ font-family:var(--display); font-size:15px; color:var(--ink-soft); min-width:24px; padding-top:2px; }
.numbered-row h4{ font-weight:600; }
.numbered-row p{ font-size:15.5px; color:var(--ink-soft); margin-top:6px; line-height:1.6; }

/* ---------- SPLIT ROW (text + media panel) ---------- */
.split{ margin-top:64px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:32px; } }
.split.reverse .split-media{ order:-1; }
@media (max-width:860px){ .split.reverse .split-media{ order:0; } }
.split-media{
  aspect-ratio:4/3; background:var(--bg-tint); border:1px solid var(--line); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
}
.split-media .label{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--line); padding:14px 12px; border-radius:2px; margin:0 20px; text-align:center;
}
.split-text p{ font-size:15.5px; color:var(--ink-soft); margin-top:14px; line-height:1.6; }
.split-text ul{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.split-text li{ font-size:15.5px; color:var(--ink-soft); padding-left:18px; position:relative; line-height:1.6; }
.split-text li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--accent); border-radius:50%; }

/* ---------- FAQ ---------- */
.faq-group{ margin-top:56px; }
.faq-group + .faq-group{ margin-top:44px; }
.faq-group h3{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--body); font-weight:600; }
.faq-list{ margin-top:18px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--display); font-size:17px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--body); font-size:20px; color:var(--ink-soft); flex-shrink:0; transition:transform .18s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; padding:0 0 22px; max-width:640px; }

/* ---------- TRUST / VERIFIED FACTS ---------- */
.trust-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:800px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-item{ border-top:1px solid var(--line); padding-top:16px; }
.status-line{ margin-top:44px; font-size:15.5px; color:var(--ink-soft); border-left:2px solid var(--accent); padding-left:14px; }
.trust-cta{ margin-top:44px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.trust-cta h3{ max-width:340px; }

.verified-table{ margin-top:48px; border-top:1px solid var(--line); }
.verified-row{ display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; flex-wrap:wrap; }
.verified-row .q{ font-size:15.5px; color:var(--ink); max-width:420px; }
.verified-row .a{ font-size:15.5px; color:var(--ink-soft); text-align:right; max-width:320px; }
.pending-note{
  margin-top:40px; font-size:14px; color:var(--ink-soft); border:1px dashed var(--line); padding:18px 20px; border-radius:2px; max-width:640px;
}

/* ---------- IDEA / DARK SECTION ---------- */
.idea{ background:var(--charcoal); color:#F2F2F2; }
.idea .eyebrow{ color:#9A9A9A; }
.idea .section-head h2{ color:#FFFFFF; }
.idea-flow{ margin-top:64px; display:flex; flex-direction:column; max-width:520px; }
.idea-node{ display:flex; align-items:flex-start; gap:20px; padding:20px 0; border-top:1px solid var(--charcoal-line); }
.idea-node:last-child{ border-bottom:1px solid var(--charcoal-line); }
.idea-node .n{ font-family:var(--display); font-size:14px; color:#9A9A9A; padding-top:3px; min-width:20px; }
.idea-node p{ font-size:15.5px; color:#F2F2F2; line-height:1.6; }
.idea-statement{ margin-top:52px; max-width:460px; font-family:var(--display); font-size:22px; line-height:1.4; color:#FFFFFF; }

/* dark variant of numbered-list, bullet-grid, split for use on .idea / .dark-section */
.dark-section{ background:var(--charcoal); color:#F2F2F2; }
.dark-section .eyebrow{ color:#9A9A9A; }
.dark-section h2, .dark-section h3, .dark-section h4{ color:#FFFFFF; }
.dark-section p{ color:#B8B8B8; }
.dark-section .numbered-row{ border-color:var(--charcoal-line); }
.dark-section .numbered-row .n{ color:#8A8A8A; }
.dark-section .bullet-grid{ background:var(--charcoal-line); border-color:var(--charcoal-line); }
.dark-section .bullet-item{ background:#0D0D0D; }
.dark-section .bullet-item p{ color:#A8A8A8; }
.dark-section .split-media{ background:#0D0D0D; border-color:var(--charcoal-line); }
.dark-section .split-media .label{ border-color:var(--charcoal-line); color:#9A9A9A; }

/* ---------- CTA BAND (reused across pages) ---------- */
.cta-band{ background:var(--bg-tint); }

/* ---------- FOOTER ---------- */
footer{ background:var(--charcoal); color:#B0B0B0; padding:56px 0 40px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--charcoal-line); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--body); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#7A7A7A; margin-bottom:14px; }
.footer-col a{ font-family:var(--body); display:block; font-size:14.5px; padding:5px 0; color:#C7C7C7; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ padding-top:28px; display:flex; flex-direction:column; gap:6px; }
.footer-bottom p{ font-family:var(--body); font-size:13px; color:#C2C2C2; line-height:1.6; max-width:640px; }
.footer-bottom a{ font-family:var(--body); color:#E6E6E6; text-decoration:underline; text-underline-offset:2px; }
.footer-bottom a:hover{ color:#FFFFFF; }
/* ---------- HERO VIDEO (variant) ---------- */
.hero-media--video{
  aspect-ratio:16/9; width:100%;
  background:linear-gradient(135deg,#FBFBFD 0%,#ECECF4 100%);
  border:1.5px solid #1D1D1F;
  border-radius:clamp(20px,2.4vw,36px);
  box-shadow:0 48px 90px -28px rgba(24,24,48,.32), 0 20px 40px -22px rgba(24,24,48,.22);
  /* keep rounded corners clipping the video on Safari */
  isolation:isolate; transform:translateZ(0);
}
.hero-media--video::after{ content:none; }
.hero-video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
@media (min-width:901px){
  .hero-media-bleed .hero-media--video{ width:80vw; max-width:1100px; min-width:640px; }
}

/* ---------- HERO PHOTO (wording over photo) ---------- */
.hero{ padding:0 0 72px; }
.hero-stage{ position:relative; overflow:hidden; min-height:max(560px, calc(100vh - 86px)); min-height:max(560px, calc(100svh - 86px)); display:flex; align-items:center; background:#fff; }
.hero-bg{ position:absolute; top:0; right:0; bottom:0; width:60%; margin:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%); }
.hero-copy{ position:relative; z-index:1; padding:72px 0; margin:0; max-width:none; width:100%; padding-left:clamp(24px,7vw,110px); padding-right:24px; }
.hero-copy h1{ font-size:clamp(46px,6vw,88px); line-height:.98; letter-spacing:-.02em; margin:0; font-weight:400; }
.hero-copy .hero-sub{ font-family:var(--display); font-size:clamp(28px,3.5vw,52px); line-height:1.08; color:#E07A5F; margin-top:26px; max-width:none; letter-spacing:-.01em; }
.hero-rule{ display:block; width:36px; height:1px; background:#E07A5F; margin-top:30px; }
.hero-copy .hero-body{ font-size:clamp(15px,1.35vw,19px); color:var(--ink); max-width:none; margin-top:28px; line-height:1.55; }
.hero-copy .hero-ctas{ margin-top:36px; }
.hero-copy .btn{ border-radius:999px; padding:20px 34px; font-size:17px; gap:18px; }
@media (max-width:900px){
  .hero-stage{ display:flex; flex-direction:column; min-height:0; align-items:stretch; }
  .hero-bg{ position:relative; width:100%; height:340px; order:2; }
  .hero-bg img{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%); }
  .hero-copy{ padding-top:56px; padding-bottom:0; padding-left:24px; }
}

/* ---------- VIDEO SOUND TOGGLE ---------- */
.video-sound{
  position:absolute; top:clamp(12px,1.6vw,22px); right:clamp(12px,1.6vw,22px); z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px 9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(17,17,20,.72); color:#fff; cursor:pointer;
  font:600 13px/1 var(--body); letter-spacing:.01em;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s ease, transform .2s ease;
}
.video-sound:hover{ background:rgba(17,17,20,.9); transform:translateY(-1px); }
.video-sound:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.video-sound .ico-on{ display:none; }
.video-sound.is-on .ico-on{ display:block; }
.video-sound.is-on .ico-off{ display:none; }
@media (max-width:640px){
  .video-sound{ padding:8px 12px 8px 10px; font-size:12px; }
}

/* ---------- MAIL SUPPORT BANNER ---------- */
.mail-cta{ margin-top:44px; position:relative; overflow:hidden; border-radius:3px; background:#000; color:#fff; isolation:isolate; }
.mail-cta picture, .mail-cta img.bg{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.mail-cta img.bg{ object-fit:cover; object-position:70% 50%; }
.mail-cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.2) 100%); }
.mail-cta-in{ padding:clamp(40px,6vw,88px); max-width:640px; }
.mail-cta h2{ color:#fff; font-size:clamp(28px,3.6vw,48px); line-height:1.08; }
.mail-cta p{ margin-top:18px; color:#C9C9C9; font-size:16px; line-height:1.6; max-width:44ch; }
.mail-cta .btn{ margin-top:30px; }
@media (max-width:640px){ .mail-cta::before{ background:rgba(0,0,0,.78); } }

/* ---------- PHONE FRAME (used in product section) ---------- */
.ac-phone{
  border:1px solid #e6e6e6; border-radius:16px; overflow:hidden; background:#fff;
  line-height:0; box-shadow:0 10px 34px rgba(0,0,0,.08); aspect-ratio:375 / 782;
}
.ac-phone img{ width:100%; height:100%; display:block; object-fit:cover; }

/* ---------- HERO VIDEO WRAPPER (centred, full-bleed) ---------- */
.hero-media-bleed{ margin-top:64px; padding:0 32px; }
@media (max-width:640px){ .hero-media-bleed{ padding:0 20px; } }
@media (min-width:901px){
  .hero-media-bleed{
    width:100vw; padding:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    display:flex; justify-content:center;
  }
}

/* ---------- HOW IT WORKS PHOTO (blends out of the hero) ---------- */
section.how{ padding:0; position:relative; background:transparent; line-height:0; }
section.how img{ width:100%; height:auto; display:block; }
/* soft white veil at the top so the hero flows straight into the photo, and at the bottom into the video section */
section.how::after{ content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none; }
section.how::after{ bottom:0; height:14%; background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%); }

.hero{ padding:0; }

/* ---------- STORE BUTTON HOTSPOTS (over the buttons in the photo) ---------- */
.hs{ position:absolute; z-index:3; display:block; cursor:pointer; border-radius:999px; }
.hs-download{ left:5.263%; top:81.3%; width:17.4%; height:5.35%; }   /* same width as App Store + Google Play together */
.hs-ios{ left:5.263%; top:88.6%; width:7.6%; height:4.5%; border-radius:9px; }
.hs-android{ left:13.9%; top:88.6%; width:8.55%; height:4.5%; border-radius:9px; }
.hs-ios:hover,.hs-android:hover{ box-shadow:0 0 0 2px rgba(0,0,0,.18); }
.hs:focus-visible{ outline:2px solid #000; outline-offset:3px; }
.hs-toast{
  position:absolute; z-index:4; left:28%; top:81.3%; transform:translateX(-6px);
  max-width:min(340px,86vw); padding:12px 16px; border-radius:10px; background:#0A0A0A; color:#fff;
  font:500 13.5px/1.45 var(--body); box-shadow:0 14px 36px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.hs-toast.show{ opacity:1; transform:none; }
@media (max-width:640px){ .hs-toast{ left:4%; top:96%; font-size:12.5px; } }


/* real, colour store badges drawn over the grey ones baked into the photo */
.hs .badge{ width:100%; height:100%; display:block; }
.hs-download:hover,.hs-ios:hover,.hs-android:hover{ box-shadow:0 6px 16px rgba(0,0,0,.22); transform:translateY(-1px); }
.hs-download,.hs-ios,.hs-android{ transition:box-shadow .18s ease, transform .18s ease; }

/* demo button: same soft-black pill + terracotta arrow as the "Download Acumen" button in the photo */
.demo-btn{
  display:inline-flex; align-items:center; gap:18px;
  padding:23px 44px 23px 34px; border-radius:999px;
  background:#1B1B1B; color:#F4F2EF;
  font-family:var(--body); font-size:21px; font-weight:400; letter-spacing:.005em;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background .2s ease, transform .2s ease;
}
.demo-btn svg{ color:#E07A5F; flex-shrink:0; width:30px; height:30px; }
.demo-btn{ border:0; cursor:pointer; transition:background .2s ease, box-shadow .18s ease, transform .18s ease; }
.demo-btn:hover{ background:#000; box-shadow:0 6px 16px rgba(0,0,0,.22); transform:translateY(-1px); }
.demo-btn:focus-visible{ outline:2px solid #E07A5F; outline-offset:4px; }
@media (max-width:640px){ .demo-btn{ font-size:18px; padding:19px 34px 19px 26px; gap:15px; } .demo-btn svg{ width:26px; height:26px; } }

/* ---------- CROSS-DISSOLVE: hero photo -> "Two quiet minutes" photo ----------
   The two photos overlap by --blend; the hero fades out while the next one fades in over
   the same distance, so there is no white gap or hard edge between them. */
:root{ --blend:5vw; }
.hero-bg img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%), linear-gradient(180deg,#000 0%,#000 calc(100% - var(--blend)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%), linear-gradient(180deg,#000 0%,#000 calc(100% - var(--blend)),transparent 100%);
          mask-composite:intersect;
}
.hero-copy{ padding-bottom:calc(72px + var(--blend)); }          /* keep the hero text clear of the overlap */
section.how{ margin-top:calc(-1 * var(--blend)); }
section.how img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--blend));
          mask-image:linear-gradient(180deg,transparent 0,#000 var(--blend));
}
@media (max-width:900px){
  /* phones/tablets: the hero photo sits under the text, so no overlap here -
     each photo just fades softly, keeping the face clear and the label off the hero photo */
  :root{ --blend:0px; }
  .hero-bg img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 calc(100% - 56px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 calc(100% - 56px),transparent 100%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  .hero-bg img{ object-position:70% 14%; }
  .hero-copy{ padding-bottom:0; }
  section.how{ margin-top:0; }
  section.how img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px);
            mask-image:linear-gradient(180deg,transparent 0,#000 18px);
  }
}

/* ---------- FULL-SCREEN DEMO VIDEO ---------- */
.demo-modal{ position:fixed; inset:0; z-index:100; background:#000; display:flex; align-items:center; justify-content:center; }
.demo-modal[hidden]{ display:none; }
.demo-modal video{ width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.demo-close{
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); cursor:pointer;
  background:rgba(20,20,22,.72); color:#fff; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .2s ease;
}
.demo-close:hover{ background:rgba(20,20,22,.95); }
.demo-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
html.demo-open, html.demo-open body{ overflow:hidden; }

/* "How it works" label: real text laid over the photo, darker and larger than the one that was baked in */
section.how{ container-type:inline-size; }
.how-eyebrow{
  position:absolute; z-index:2; left:5.5%; top:6.4%; margin:0; pointer-events:none;
  font-family:var(--body); font-weight:600; text-transform:uppercase; line-height:1; white-space:nowrap;
  letter-spacing:.24em; color:#2E2E2E;
  font-size:max(1.55vw,10px); font-size:max(1.55cqw,10px);
}


/* ---------- HOW IT WORKS on phones: real big text + big photo + real buttons ----------
   On a laptop the text is part of the wide photo. On a phone that photo shrinks until the
   words are unreadable, so below 640px we show the words as real text, crop the photo to the
   doctor + phone (the right ~54%), and put the store buttons underneath at a proper tap size. */
.how-copy, .how-steps{ display:none; }

@media (max-width:900px){
  section.how{
    max-width:720px; margin-left:auto; margin-right:auto;
    display:grid; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:0;
    padding:48px 0 44px; background:#fff; line-height:normal;
  }
  section.how::after{ display:none; }
  .how-eyebrow{ display:none; }

  .how-copy{ display:block; grid-column:1 / -1; padding:0 24px; }
  .how-copy .kicker{
    font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.24em;
    text-transform:uppercase; color:#2E2E2E; margin:0 0 18px;
  }
  .how-copy h2{
    font-family:var(--display); font-weight:400; font-size:clamp(46px, 14vw, 64px);
    line-height:1.0; letter-spacing:-.02em; color:#E86A1C; margin:0;
  }
  .how-copy h2 span{ display:block; color:#E86A1C; }
  .how-copy .rule{ display:block; width:44px; height:2px; background:#E07A5F; margin:24px 0 22px; }
  .how-copy p{ font-family:var(--body); font-size:18px; line-height:1.6; color:#2F2F2F; margin:0; max-width:34em; }

  /* photo: crop to the right part (doctor + phone), shown big and full width */
  section.how picture{
    grid-column:1 / -1; display:block; position:relative; overflow:hidden;
    aspect-ratio:902 / 941; margin-top:20px;
  }
  section.how picture img{
    width:185.2%; max-width:none; height:auto; margin-left:-85.2%;
    -webkit-mask-image:none; mask-image:none;
  }
  /* soft white edges so the crop melts into the page */
  section.how picture::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 14%),
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 10%),
      linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 14%);
  }

  .how-steps{ display:block; grid-column:1 / -1; padding:8px 24px 0; margin:0; list-style:none; }
  .how-steps li{ display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-top:1px solid #ECE8E4; }
  .how-steps li:first-child{ border-top:0; }
  .how-steps .ic{
    flex:0 0 56px; width:56px; height:56px; border-radius:50%; background:#F1EFEC;
    display:flex; align-items:center; justify-content:center; color:#2B2B2B;
  }
  .how-steps .ic svg{ width:26px; height:26px; }
  .how-steps h3{ font-family:var(--display); font-weight:500; font-size:21px; line-height:1.2; color:var(--ink); margin:2px 0 4px; }
  .how-steps p{ font-family:var(--body); font-size:16.5px; line-height:1.5; color:#4A4A4A; margin:0; }

  /* buttons: normal in-flow, full size */
  .hs{ position:static; display:block; transform:none; }
  section.how{ --bh:min(38px, calc((100vw - 48px - 12px) / 6.375)); }   /* badge height; 6.375 = both badges' width in badge-heights */
  .hs-download{
    grid-column:1 / -1; justify-self:center; margin-top:18px; margin-bottom:14px;
    width:calc(var(--bh) * 6.375 + 12px); height:auto; aspect-ratio:411 / 71;   /* exactly as wide as the two store badges */
    box-shadow:0 10px 22px -10px rgba(0,0,0,.45);
    /* the badge pair sits right of centre (Google Play is wider than App Store), so nudge this button the same amount to line up edge to edge */
    position:relative; top:0; left:calc(var(--bh) * 0.1875);
  }
  .hs-ios, .hs-android{ width:auto; height:var(--bh); }
  .hs-ios{ justify-self:end; aspect-ratio:120 / 40; }
  .hs-android{ justify-self:start; aspect-ratio:135 / 40; }
  .hs-ios:hover,.hs-android:hover,.hs-download:hover{ transform:none; }

  .hs-toast{
    left:0; right:0; top:auto; bottom:150px; margin:0 auto; width:max-content;
    max-width:calc(100% - 48px); transform:translateY(6px);
  }
  .hs-toast.show{ transform:none; }
}


/* ---------- PHONES/TABLETS: order = headline text -> "Watch demo" -> hero photo -> How it works ----------
   On desktop the button stays in the text column beside the photo. When the hero stacks (<=900px)
   the text block dissolves into the column so the button can be placed after the photo. */
@media (max-width:900px){
  .hero-copy{ display:contents; }
  .hero-copy h1{ margin:56px 24px 0; }
  .hero-copy .hero-sub{ margin:26px 24px 0; }
  .hero-copy .hero-rule{ margin:30px 0 0 24px; }
  .hero-copy .hero-body{ margin:28px 24px 0; }
  .hero-bg{ order:2; }
  .hero-copy .hero-ctas{ order:1; margin:32px 24px 36px; justify-content:flex-start; }
}


/* phones/tablets: logo lines up with the page text on the left (the desktop 64px inset was winning here) */
@media (max-width:900px){
  header.site .wrap.nav{ padding-left:24px !important; padding-right:24px !important; margin:0 !important; justify-content:flex-start; }
}


/* ---------- DEMO VIDEO: centred pop-up window instead of full screen ---------- */
.demo-modal{
  background:rgba(10,10,10,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow:auto;
}
.demo-frame{ position:relative; width:min(960px, 100%); margin:auto; }
.demo-modal video{
  width:100%; height:auto; aspect-ratio:16 / 9; max-height:calc(100vh - 120px); max-height:calc(100svh - 120px);
  object-fit:contain; background:#000; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.demo-modal .demo-close{ position:absolute; top:-54px; right:0; }

/* ---------- HOW IT WORKS on desktop: headline, paragraph and step-1 line are real text over the photo ---------- */
.how-s1{ display:none; }
@media (min-width:901px){
  .how-copy{ display:contents; }
  .how-copy .kicker, .how-copy .rule{ display:none; }
  .how-copy h2{
    position:absolute; z-index:2; left:5.5%; top:11.6%; margin:0; width:30cqw;
    font-family:var(--display); font-weight:400; font-size:5.4cqw; line-height:.98; letter-spacing:-.02em;
    color:#E17638; text-align:left;
  }
  .how-copy h2 span{ display:block; color:#E17638; }
  .how-copy p{
    position:absolute; z-index:2; left:5.5%; top:43.6%; margin:0; width:32cqw;
    font-family:var(--body); font-size:1.2cqw; line-height:1.55; color:#3F3F3F;
  }
  .how-s1{
    display:block; position:absolute; z-index:2; left:4.6%; top:70.8%; width:11.4cqw; margin:0; text-align:center;
    font-family:var(--body); font-size:1.02cqw; line-height:1.3; color:#8C8C8A;
  }
}