/* =========================================================
   Design fixes from docs/DESIGN_AUDIT.md (Sep 2026).
   Loaded after landing.css so it wins the cascade. Each block
   names the audit finding it resolves.
   ========================================================= */

:root {
  --section: clamp(64px, 8vw, 104px);   /* one vertical rhythm for every section (14) */
  --section-tight: clamp(40px, 5vw, 64px);
  --r-panel: 28px;                       /* three radii only: 28 panels, 16 cards, 8 inside mock UIs (15) */
  --r-card: 16px;
  --r-compact: 8px;
  --tap: 44px;
}

/* ───────── Header: nowrap links, 44px targets, menu below 1000px (02, 03, 09) ───────── */
.site-head-bar { padding: 8px 12px 8px 18px; gap: 16px; transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out); }
.head-links a { white-space: nowrap; padding: 12px 14px; line-height: 1.25; }
.head-ctas .btn { min-height: var(--tap); padding: 12px 20px; }
.head-menu {
  display: none;
  width: var(--tap); height: var(--tap);
  border: 1.5px solid var(--black);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--black);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  padding: 0;
}
.head-menu span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--dur-state) var(--ease-state), opacity var(--dur-state) var(--ease-state); }
.head-menu[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.head-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.head-sheet {
  position: fixed; z-index: 49;
  top: 0; left: 0; right: 0;
  padding: 92px 24px 28px;
  background: rgba(250, 245, 239, 0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: var(--hair);
  box-shadow: var(--shadow-float);
  border-radius: 0 0 28px 28px;
  display: none;
  flex-direction: column; gap: 4px;
  transform: translateY(-8px); opacity: 0;
  transition: transform var(--dur-menu) var(--ease-menu), opacity var(--dur-menu) var(--ease-menu);
}
.head-sheet.open { display: flex; transform: none; opacity: 1; }
.head-sheet a:not(.btn) {
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  padding: 10px 0;
  text-decoration: none;
  color: var(--black);
  border-bottom: var(--hair);
}
.head-sheet a:not(.btn):last-of-type { border-bottom: 0; }
.head-sheet .sheet-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.head-sheet .sheet-ctas .btn { flex: 1 1 auto; min-height: 48px; }
.head-sheet:focus-visible, .head-menu:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.head-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(10, 10, 10, 0.18); display: none; }
.head-backdrop.open { display: block; }
@media (max-width: 1000px) {
  .head-links, .head-ctas .btn-ghost { display: none; }
  .head-menu { display: inline-flex; }
  .site-head-bar { gap: 10px; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 760px) {
  .site-head { top: 8px; left: 8px; right: 8px; }
  .site-head-bar { padding: 6px 6px 6px 14px; border-radius: 16px; }
  .head-logo img { height: 18px; }
  .head-ctas .btn { padding: 10px 16px; min-height: 40px; font-size: 14px; }
  .head-menu { width: 40px; height: 40px; }
  /* Hide on scroll down, return on scroll up (17). */
  .site-head.is-hidden .site-head-bar { transform: translateY(-120%); opacity: 0; pointer-events: none; }
}

/* ───────── Hero: copy and phone side by side, phone inside the first screen (01, 06) ───────── */
.hero { padding-top: clamp(104px, 12vh, 132px); }
.phone-showcase { margin: 0; padding: 0; }
.phone-showcase::before { inset: -6% 0 0 44%; background: radial-gradient(ellipse at 50% 42%, #aab4a2 0%, #ccd2c1 38%, #e4e7db 56%, transparent 74%); }
.phone-showcase-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.phone-showcase-copy { padding-top: 0; }
.phone-showcase .final-hero-copy h1 { font-size: clamp(42px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 22px; text-wrap: balance; }
.phone-showcase .hero-sub { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ink-soft); max-width: 42ch; margin: 0 0 26px; }
.phone-showcase .hero-ctas { margin-bottom: 18px; }
.phone-showcase .hero-ctas .btn { min-height: 48px; }
.phone-showcase .hero-trust { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0 0 40px; }
.phone-showcase .hero-trust b { font-weight: 400; color: var(--black); }
.phone-showcase .stage-caption { font-size: 14px; color: var(--ink-muted); margin: 0 0 6px; }
.phone-showcase .stage-caption em { color: var(--black); }
.phone-showcase .film-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 0; }
.phone-showcase .film-tab { min-height: 56px; padding: 12px 8px 12px 0; }
.phone-showcase .film-tab-label { font-size: 17px; }
.phone-showcase .film-tab-caption { display: none; }
.phone-showcase .film-tab-arrow { font-size: 17px; }
.phone-showcase .phone-film-column { display: flex; flex-direction: column; align-items: center; }
.phone-showcase .phone-film { width: min(100%, 400px); }
.phone-showcase .film-transcript, .phone-showcase .film-feedback { width: min(100%, 400px); }
.hero .logostrip { padding-top: clamp(48px, 6vw, 72px); }
@media (max-width: 1000px) {
  .phone-showcase-layout { grid-template-columns: 1fr; gap: 28px; }
  .phone-showcase::before { inset: 40% 0 0 0; background: radial-gradient(ellipse at 50% 50%, #c3cabb 0%, #dfe3d6 45%, transparent 72%); }
  .phone-showcase-copy { display: contents; }
  .phone-showcase .final-hero-copy { order: 0; max-width: 620px; }
  .phone-showcase .final-hero-copy h1 { font-size: clamp(42px, 8vw, 64px); }
  .phone-showcase .hero-trust { margin-bottom: 0; }
  .phone-showcase .stage-caption { order: 2; margin-top: 20px; }
  .phone-showcase .phone-film-column { order: 1; }
  .phone-showcase .phone-film { width: min(100%, 360px); }
  .phone-showcase .film-nav { order: 3; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
}
@media (max-width: 760px) {
  .phone-showcase .final-hero-copy h1 { font-size: clamp(40px, 11vw, 52px); }
  .phone-showcase .hero-ctas .btn { flex: 1 1 auto; }
  .phone-showcase .stage-caption { display: none; }
  .phone-showcase .phone-showcase-copy { display: contents; }
  .phone-showcase .phone-film { width: min(100%, 340px); }
  .hero .logostrip { padding-top: 40px; }
}

/* ───────── Launcher: small solid disc on phones, no blink loop there (04) ───────── */
@media (max-width: 760px) {
  #launcher, #launcher.character-ready {
    width: 56px; height: 56px;
    right: 12px; bottom: 12px;
    background: var(--cream);
    border: 1.5px solid var(--black);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
  }
  #launcher.blinking img.open { opacity: 1; }
  #launcher.blinking img.closed { opacity: 0; }
}

/* ───────── Compare section: Now / With Adonis toggle on phones (05) ───────── */
.lane-switch { display: none; }
@media (max-width: 700px) {
  .lane-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    max-width: 320px; margin: 0 auto 16px;
    padding: 4px; border: var(--hair); border-radius: var(--radius-pill); background: var(--paper);
  }
  .lane-switch button {
    min-height: var(--tap);
    border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--ink-muted);
    font-family: var(--font-serif); font-size: 15px;
    transition: background var(--dur-state) var(--ease-state), color var(--dur-state) var(--ease-state);
  }
  .lane-switch button[aria-selected="true"] { background: var(--black); color: var(--cream); }
  .lane-switch button:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
  .hf-stage[data-lane="now"] .hf-adonis { display: none; }
  .hf-stage[data-lane="adonis"] .hf-now { display: none; }
  .hf-stage[data-lane] .hf-now { border-bottom: 0; }
}

/* ───────── Jobs: swipe row on phones instead of four stacked screens (05) ───────── */
@media (max-width: 760px) {
  .fx-jobs .fx-job-grid {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 4px 16px 18px;
    scrollbar-width: none;
  }
  .fx-jobs .fx-job-grid::-webkit-scrollbar { display: none; }
  .fx-jobs .fx-job { flex: 0 0 min(84vw, 340px); scroll-snap-align: center; }
  .fx-jobs .fx-machine { height: 250px; }
  .fx-jobs .jobs-head { margin-bottom: 20px; }
  .jobs-swipe-hint { display: block; text-align: center; font-size: 13px; color: var(--ink-muted); margin: 0 0 6px; }
}
.jobs-swipe-hint { display: none; }

/* ───────── Type floor and contrast (08) ───────── */
.eyebrow, .phone-showcase-copy > .eyebrow, .foot-col .fh, .define-pair .tag, .submit-note .pill, .waitlist-form label { font-size: 12px; }
.chat-id .status { font-size: 12px; }
.chat-foot { font-size: 12px; letter-spacing: 0.08em; padding-bottom: 12px; }
.chat-id .name sup { font-size: 10px; }
.fx-mono, .fx-job-head .fx-mono { font-size: 11px; }
.fx-machine .fx-mono, .fx-small { font-size: 11px; }
.fx-tables > .fx-mono { font-size: 10px; }
.film-tab-number { font-size: 11px; }
.hf-message-header > span { font-size: 11px; color: #4b5a33; }
.hf-message-header > strong { font-weight: 500; }
.hf-live-menu small, .hf-live-menu > span, #hf-menu-status { font-size: 11px; color: #5a6250; }
.hf-unavailable { font-size: 12px; color: #6f4528; }
.hf-outcome, #hf-now-status { color: #5e5d4f; }
.hf-adonis .hf-outcome { color: #40562a; }
.hf-lane header p { color: #5b5e4c; }
.hf-app-nav { font-size: 11px; }
.hf-revenue > span { font-weight: 500; }
.hf-app-nav > b, .hf-manual-menu b, .hf-live-menu b { font-weight: 500; }
.hf-stage:is([data-step="2"],[data-step="3"],[data-step="4"]) .hf-menu-nav,
.hf-stage[data-step="4"] .hf-live-menu > span { font-weight: 500; }
.hf-controls button { font-size: 13px; min-height: var(--tap); padding: 10px 14px; }
.hf-decision button { font: 500 13px/1.2 var(--font-serif); min-height: 40px; }
.bp-decisions button { font: 500 14px/1.2 var(--font-serif); min-height: var(--tap); padding: 10px 18px; }
.mobile-scene-label { font: 500 15px/1.4 var(--font-serif); }
.mobile-scene-label small { font-size: 12px; }
.mobile-scene-controls button { font-family: var(--font-serif); }
.fx-job-bottom p { font: 400 15px/1.45 var(--font-serif); border-radius: var(--radius-pill); }
.fx-job-bottom button { font-size: 13px; min-height: var(--tap); }
.plan-price .cur { font-size: 13px; }
.plan-sub { font-size: 14px; }
.loc-step .lv { font-size: 13px; }
.pt-opt { font-size: 13px; }
.character-options button[aria-pressed="true"] { font-weight: 500; }
.privacy-note { font-size: 13.5px; color: rgba(244, 240, 233, 0.78); }

/* ───────── Tap targets (09) ───────── */
.loc-step button { width: var(--tap); height: var(--tap); }
.pt-opt { min-height: 40px; padding: 10px 16px; }
.bill-toggle, .loc-step { padding: 2px; }
.foot-col a { padding: 11px 0; margin: 0; }
.foot-col span { margin-bottom: 6px; }
.foot-col .fh { margin-bottom: 8px; }
.privacy-note a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.chat-close { width: 40px; height: 40px; }
.suggestion { min-height: 40px; padding: 10px 14px; }
.faq-q { min-height: 56px; }

/* ───────── Form: visible labels, inline errors (10) ───────── */
.waitlist-form label.visually-hidden {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
}
.waitlist-form label { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(244, 240, 233, 0.86); }
.waitlist-form label small { color: var(--stage-muted); }
.waitlist-form input, .waitlist-form select { border-radius: var(--r-compact); min-height: 50px; }
.waitlist-form input::placeholder { font-style: normal; color: var(--ink-faint); }
.waitlist-form .field.is-invalid input, .waitlist-form .field.is-invalid select { border-color: #e2a08f; background: #fbf1ec; }
.field-error { display: none; font-size: 13.5px; color: #f2c2b6; line-height: 1.4; }
.field.is-invalid .field-error { display: block; }
.waitlist-form .form-error { grid-column: 1 / -1; font-size: 14.5px; color: #f2c2b6; margin: -4px 0 0; }
.submit-btn { min-height: 50px; }
.btn-whatsapp { min-height: 50px; }
.waitlist-done { border-radius: var(--r-card); display: none; }
.waitlist-done.sent { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.waitlist-done .btn { align-self: flex-start; }

/* ───────── Headlines: labels become claims, one flourish per screen (11, 16) ───────── */
/* Every section title carries one lime stroke: an italic phrase underlined in brand green. */
h2 em, .faq-grid > h2 {
  font-style: italic;
  color: inherit !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--green) !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.12em !important;
  text-decoration-skip-ink: none !important;
}
.faq-grid > h2 { font-style: normal; }
.close-panel h2 em, .voices h2 em { color: inherit !important; }
.faq-grid > h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: var(--tracking-tight); position: static; }
@media (min-width: 1025px) { .faq-grid { grid-template-columns: minmax(200px, 0.7fr) 1.6fr; } }
.bp-proof { font-size: 16px; line-height: 1.55; color: var(--ink-muted); max-width: 40ch; margin: -8px 0 22px; }

/* ───────── Logo strip: one optical size (12) ───────── */
/* Logos: one visual weight. Each mark gets its own height so badges and wide wordmarks read the same size. */
.logostrip-row { gap: clamp(22px, 3.6vw, 48px); align-items: center; }
.logostrip-row img { --logo-h: 40px; height: var(--logo-h); width: auto; max-width: 160px; object-fit: contain; filter: brightness(0); opacity: 0.8; }
.logostrip-row .logo-abdalla { --logo-h: 44px; }
.logostrip-row .logo-manakish { --logo-h: 46px; }
.logostrip-row .logo-mama { --logo-h: 40px; }
.logostrip-row .logo-varak { --logo-h: 38px; }
.logostrip-row .logo-zaman { --logo-h: 46px; }
.logostrip-row .logo-sopranos { --logo-h: 64px; }
@media (max-width: 640px) {
  .logostrip-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 20px 26px; }
  .logostrip-row img { max-width: 100px; transform: scale(0.9); }
}

/* ───────── Chat panel: same shape language as the page (13) ───────── */
.chat-root { border: 1px solid rgba(10, 10, 10, 0.14); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-pop); }
.chat-head { border-bottom: var(--hair); }
.chat-input { border-top: var(--hair); }
.bubble { border-radius: 14px; }
.bubble.adonis { border-bottom-left-radius: 4px; }
.bubble.user { border-bottom-right-radius: 4px; }
.chat-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(10, 10, 10, 0.28); opacity: 0; pointer-events: none; transition: opacity var(--dur-normal) var(--ease-out); }
@media (max-width: 640px) {
  .chat-root { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); max-height: none; border-radius: 20px; }
  .chat-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ───────── Section rhythm and shapes (14, 15) ───────── */
.final-compare, .fx-jobs, .bp-control, .how, .voices, .pricing, .faq, .closer { padding-top: var(--section); padding-bottom: 0; }
.pricing, .closer { padding-top: var(--section-tight); }
.closer { padding-bottom: var(--section); }
.foot { padding-top: var(--section-tight); }
.fx-jobs, .final-compare, .bp-control { scroll-margin-top: 88px; }
.how, .voices, .pricing, .faq, .closer { scroll-margin-top: 88px; }
.hcard, .fx-job, .faq-item, .plan-card, .vcard, .compare-stage, .hf-stage.compare-stage { border-radius: var(--r-card); }
.close-panel, .voices-panel { border-radius: var(--r-panel); }
.waitlist-done, .hf-message, .hf-live-menu, .fx-brief, .fx-booking, .fx-ledger { border-radius: var(--r-compact); }
.hf-decision button, .bp-decisions button { border-radius: var(--radius-pill); }
.connectors { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@media (max-width: 640px) { .close-panel, .voices-panel { border-radius: 20px; } }

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .site-head-bar, .head-sheet, .chat-backdrop { transition: none; }
}

/* ───────── Second pass: balance headlines, floors inside mock UIs, remaining tap sizes ───────── */
h1, h2 { text-wrap: balance; }
.hcard .num { color: #6b7517; }
.head-links a { padding: 13px 14px; }
.head-logo { padding: 10px 0; }
.head-menu, .site-head-bar .head-menu { width: var(--tap); height: var(--tap); }
.pt-opt { min-height: var(--tap); }
.suggestion { min-height: var(--tap); padding: 12px 14px; }
.chat-close { width: var(--tap); height: var(--tap); }
.privacy-note a { padding: 10px 0; margin: -10px 0; }
.hf-decision button { min-height: var(--tap); }
.hf-chrome b, .hf-small-label, .hf-revenue > span, .hf-delivery-overview small, .hf-delivery-overview strong small { font-size: 11px; }
.hf-chart-labels span { font-size: 10px; }
.bp-labels { font-size: 10px; }
.bp-labels .bp-data { font-size: 11px; }
.fx-ledger > div:not(.fx-scan) { font-size: 11px; }
.fx-ledger > div.fx-ledger-head { font-size: 10px; }
.fx-alert { font-size: 11px; }
.bp-wa-head span, .bp-today { font-size: 11px; }
.bp-time { font-size: 10px; }
@media (max-width: 760px) {
  .head-ctas .btn { min-height: var(--tap); }
  .site-head-bar { padding: 5px 5px 5px 14px; }
}

/* ───────── Phones: shorter approval, steps, testimonials, FAQ and footer (05) ───────── */
@media (max-width: 760px) {
  :root { --section: 56px; --section-tight: 40px; }
  .bp-control .bp-phone-stage { height: 540px; }
  .bp-control .control-grid { gap: 0; }
  .how-grid { display: flex; flex-direction: column; gap: 10px; }
  .hcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 18px 18px; }
  .hcard .num { grid-row: 1 / 3; font-size: 28px; margin: 2px 0 0; line-height: 1; }
  .hcard h3 { font-size: 19px; margin-bottom: 4px; }
  .hcard p { font-size: 15px; line-height: 1.5; }
  .how .connectors { margin-top: 28px; }
  .how-head { margin-bottom: 24px; }
  .voices-panel { padding: 28px 16px 24px; }
  .voices-grid { display: flex; max-width: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 12px; scrollbar-width: none; }
  .voices-grid::-webkit-scrollbar { display: none; }
  .voices-grid .vcard { flex: 0 0 min(80vw, 320px); scroll-snap-align: center; }
  .voice-featured { margin-bottom: 18px; }
  .faq-grid { gap: 14px; }
  .faq-q { padding: 14px 16px; font-size: 16px; min-height: 52px; }
  .faq-a-inner p { padding: 0 16px 16px; }
  .faq-list { gap: 8px; }
  .close-panel { padding: 28px 18px; }
  .waitlist-form { gap: 12px; }
  .foot-grid { gap: 18px 16px; padding-bottom: 28px; }
  .foot-col a { padding: 11px 0; }
  .pricing .lede { font-size: 16px; }
  .plan-card { padding: 22px 20px; }
  .jobs-head h2, .final-compare h2 { margin-bottom: 20px; }
  .hero .logostrip { padding: 36px 0 0; }
  .logostrip .eyebrow { margin-bottom: 18px; }
}

.live-bubble time, .transcript-who time { font-size: 10px; }

/* FAQ: headline row hugs its content so the "Ask him" block sits right under it */
@media (min-width: 1025px) { .faq-grid { grid-template-rows: auto 1fr; } }
@media (max-width: 640px) { .chat-foot { font-size: 11px; letter-spacing: 0.06em; } }

/* ───────── Phone stage: title + six cases as one quiet list (proposal) ───────── */
.phone-showcase .stage-title { font-size: clamp(20px, 1.55vw, 23px); line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; margin: 34px 0 10px; color: var(--black); }
.phone-showcase .stage-title em { font-style: italic; text-decoration-line: underline !important; text-decoration-color: var(--green) !important; text-decoration-thickness: 0.09em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; color: inherit !important; }
.phone-showcase .hero-ctas { margin-bottom: 0; }
.phone-showcase .film-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; }
.phone-showcase .film-tab {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 0 8px;
  min-height: 50px; padding: 0 8px 0 12px;
  color: var(--ink-muted);
  border: 0; border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  border-left: 3px solid transparent; margin-left: -3px;
  background: transparent; border-radius: 0;
  transition: color var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro);
}
.phone-showcase .film-tab:hover { color: var(--black); background: transparent; }
.phone-showcase .film-tab.is-current { color: var(--black); border-left-color: var(--green); }
.phone-showcase .film-tab-number { align-self: center; margin: 0; font: 11px/1 var(--font-mono); color: var(--ink-muted); }
.phone-showcase .film-tab.is-current .film-tab-number { color: var(--black); }
.phone-showcase .film-tab-label { font-size: 17px; line-height: 1.25; }
.phone-showcase .film-tab.is-current .film-tab-label { text-decoration: none; }
.phone-showcase .film-tab-caption, .phone-showcase .film-tab-arrow { display: none; }
.phone-showcase .film-tab::after { content: ""; position: absolute; left: 0; right: auto; bottom: -1px; height: 2px; width: 0; background: var(--green); transition: width 0.5s linear; }
.phone-showcase .film-tab.is-current::after { width: calc(var(--film-progress, 0) * 100%); }
@media (max-width: 1000px) {
  .phone-showcase .stage-title { order: 2; margin: 24px 0 8px; }
  .phone-showcase .film-nav { order: 3; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
}
@media (max-width: 760px) {
  .phone-showcase .stage-title, .phone-showcase .film-nav { display: none; }
}

/* ───────── Round two: header buttons right on phones, controls removed, 3D face on phones ───────── */
@media (max-width: 1000px) {
  .head-ctas { margin-left: auto; }
  .head-logo img { height: 22px; }
}
.hf-controls, #bp-phone-replay, .fx-job-bottom [data-replay], #scene-play { display: none !important; }
.mobile-scene-controls { grid-template-columns: 44px minmax(0, 1fr) 44px !important; }
@media (max-width: 760px) {
  #launcher, #launcher.character-ready {
    width: 60px !important; height: 60px !important; right: 12px !important; bottom: 12px !important;
    overflow: hidden !important; background: var(--cream) !important; border: 1.5px solid var(--black) !important;
    border-radius: 50%; box-shadow: var(--shadow-lift) !important;
  }
  #launcher.character-ready .character-surface { transform: scale(1.06); }
}

/* ───────── Approval phone: the buttons invite the tap without a caption ───────── */
.bp-control-note { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-height: 0 !important; }
.bp-decisions button { position: relative; cursor: pointer; transition: transform var(--dur-state) var(--ease-state), box-shadow var(--dur-state) var(--ease-state); }
.bp-control.in-view .bp-decisions button:not(:disabled) { box-shadow: 0 5px 14px rgba(10, 10, 10, 0.14); transform: translateY(-1px); }
.bp-decisions button:not(:disabled):hover, .bp-decisions button:not(:disabled):focus-visible { transform: translateY(-2px) scale(1.03); }
#bp-yes::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
}
.bp-control.in-view:not(.hinted) #bp-yes:not(:disabled)::after { animation: bp-halo 3.4s ease-out 0.6s infinite; }
@keyframes bp-halo {
  0%   { opacity: 0.9; transform: scale(1); }
  24%  { opacity: 0;   transform: scale(1.55); }
  26%  { opacity: 0.9; transform: scale(1); }
  50%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-control.in-view:not(.hinted) #bp-yes:not(:disabled)::after { animation: none; opacity: 0.8; transform: scale(1.12); }
}

/* ───────── Swipe rows on phones: guaranteed peek, dots, one-time nudge ───────── */
.swipe-dots { display: none; }
@media (max-width: 760px) {
  .fx-jobs .fx-job-grid, .voices-grid { scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
  .fx-jobs .fx-job { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .voices-grid .vcard { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .swipe-dots { display: flex; justify-content: center; gap: 8px; margin: 2px 0 0; }
  .voices-panel .swipe-dots { margin-top: 6px; }
  .swipe-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 10, 10, 0.18); transition: background var(--dur-state) var(--ease-state), transform var(--dur-state) var(--ease-state); }
  .voices-panel .swipe-dots span { background: rgba(244, 240, 233, 0.28); }
  .swipe-dots span.is-active { background: var(--green); transform: scale(1.25); }
}

/* Swipe rows on phones: every card is visible from the start, so the next card's edge shows
   before anyone swipes. (The scroll-reveal only fires for cards mostly on screen.) */
@media (max-width: 760px) {
  .fx-job-grid > .rv, .voices-grid > .rv { opacity: 1; transform: none; filter: none; }
}

/* ───────── Round three: Without vs With Adonis ───────── */
/* Headers: both lanes carry the wordmark at the same proportion. */
.hf-lane header { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hf-lane header h3.with-wordmark { display: inline-flex; align-items: baseline; gap: 12px; min-height: 0; margin: 0; }
.hf-lane header h3.with-wordmark img { width: 132px; height: auto; }
.hf-lane header h3.with-wordmark .with-label { font-size: 26px; }
.hf-lane header p { font-size: 15px; line-height: 1.5; color: #5b5e4c; max-width: 34ch; text-align: center; margin: 0 0 4px; }
.hf-now header p { color: #7a4e30; }

/* Five dashboards that each look like a different product, in the brand palette. */
.hf-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #b03a2e; color: #fff; font: 500 10px/18px var(--font-mono); text-align: center; }
.hf-bookings { top: 6px; left: 30%; width: 62%; height: 170px; transform: rotateY(8deg) rotateZ(-5deg); opacity: .6; z-index: 0; background: linear-gradient(120deg, #f6f1e6, #ede6d8); }
.hf-bookings .hf-chrome { background: #6b6560; border-bottom-color: #4d4844; }
.hf-book-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hf-book-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: #3b4432; padding: 6px 8px; background: #fffdf6; border: 1px solid #ddd6c7; border-radius: 6px; }
.hf-book-row span { color: #6b6560; font-family: var(--font-mono); }
.hf-book-row b { font-weight: 500; }
.hf-book-row i { font-style: normal; font-size: 10px; color: #4a7c3a; }
.hf-book-row i.is-warn { color: #b03a2e; }
.hf-reviews { background: linear-gradient(120deg, #fffdf6, #f7f4ea); }
.hf-reviews .hf-chrome { background: #f4f0e9; color: #2a2724; border-bottom-color: #ddd1c2; }
.hf-reviews .hf-chrome > i { background: #c9c3b6; }
.hf-reviews .hf-badge { background: #b03a2e; }
.hf-sales .hf-chrome { background: #5c6b2e; border-bottom-color: #46521f; }
.hf-delivery .hf-chrome { background: #3e4933; }
.hf-stage[data-step="0"] .hf-cursor { top: 226px; left: 74%; }

/* Six connected systems around the face, wired to Adonis; the WhatsApp mark hangs below on the same wire.
   Everything is placed in percentages of a 520 x 360 box so the drawing scales as one piece. */
.hf-network-six { height: auto; aspect-ratio: 520 / 440; max-width: 520px; margin: 4px auto 0; }
.hf-network-six .hf-wire { stroke: #b9c2a2; stroke-width: 1.25; fill: none; }
.hf-network-six .hf-flow { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 18; opacity: .95; filter: drop-shadow(0 0 3px rgba(215, 225, 79, .9)); animation: hf-current 1.6s linear infinite; animation-delay: var(--d, 0s); }
.hf-network-six .hf-wire-out { stroke: #6b7a3c; stroke-width: 4; stroke-linecap: round; }
.hf-network-six .hf-flow-out { stroke: #eef78a; stroke-width: 4; stroke-dasharray: 7 13; animation-duration: 0.9s; filter: drop-shadow(0 0 5px rgba(215, 225, 79, 1)); }
@keyframes hf-current { to { stroke-dashoffset: -44; } }
.hf-stage[data-step="0"] .hf-network-six .hf-flow { opacity: .45; }
.hf-stage[data-step="0"] .hf-network-six .hf-flow-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hf-network-six .hf-flow { animation: none; stroke-dasharray: none; opacity: .6; } }
.hf-network-six .hf-agent-face, body[data-character="3d"] .hf-network-six .hf-agent-face.character-ready { width: 36.5%; height: auto; aspect-ratio: 1; top: 34.5%; left: 50%; transform: translate(-50%, -50%); }
/* Face and WhatsApp are placed by their centres (top = centre, translate -50%), so they stay on the
   middle row and on the wire end whatever the box height is on phones or desktop. */
/* The drawn face fills only part of its square, so let it bleed a little past the edges. */
.hf-network-six .hf-agent-face img, .hf-network-six .hf-agent-face canvas { inset: -6%; width: 112%; height: 112%; }
.hf-network-six .hf-platform { min-width: 0; }
/* The six systems are small clay objects in the brand palette instead of text chips. */
.hf-network-six .hf-sys { flex-direction: column; gap: 0; padding: 0; width: 17.5%; background: none; border: 0; box-shadow: none; border-radius: 0; }
.hf-network-six .hf-sys img { display: block; width: 72%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(63, 80, 45, 0.18)); }
.hf-network-six .hf-sys > b { font-size: 11px; color: #5b5e4c; letter-spacing: 0.1px; margin-top: -2px; }
.hf-network-six .hf-sys.hf-pos, .hf-network-six .hf-sys.hf-orders { top: 0; }
.hf-network-six .hf-sys.hf-stars, .hf-network-six .hf-sys.hf-menu { top: 27.3%; }
.hf-network-six .hf-sys.hf-till, .hf-network-six .hf-sys.hf-book { top: 54.5%; }
.hf-network-six .hf-sys.hf-pos, .hf-network-six .hf-sys.hf-stars, .hf-network-six .hf-sys.hf-till { left: 1%; }
.hf-network-six .hf-sys.hf-orders, .hf-network-six .hf-sys.hf-menu, .hf-network-six .hf-sys.hf-book { right: 1%; }
.hf-network-six .hf-wa-out { position: absolute; left: 50%; top: 86.4%; width: 19.2%; height: auto; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%) scale(0.84); }
.hf-stage:not([data-step="0"]) .hf-network-six .hf-wa-out { transform: translate(-50%, -50%) scale(1); }

/* The reply is a WhatsApp message, and the story ends there. */
.hf-message { background: #f1f7e6; border-color: #bccf9d; }
.hf-message-header { background: #dfe9c9; }
.hf-wa { display: inline-flex; align-items: center; color: #25d366; }
.hf-wa svg { width: 18px; height: 18px; }
.hf-live-menu { display: none !important; }
.hf-message-content > p { min-height: 52px; }
@media (max-width: 700px) {
  .hf-lane header { flex-direction: column; align-items: center; }
  .hf-lane header h3.with-wordmark img { width: 110px; }
  .hf-lane header h3.with-wordmark .with-label { font-size: 22px; }
  .hf-lane header h3 { min-height: 0; }
  .hf-bookings { top: 4px; left: 24%; width: 70%; height: 150px; }
  /* Phones: the same drawing on a taller box, so the face and objects keep a readable size. */
  .hf-network-six { aspect-ratio: 520 / 700; max-width: 360px; }
  .hf-network-six .hf-agent-face, body[data-character="3d"] .hf-network-six .hf-agent-face.character-ready { width: 42%; }
  .hf-network-six .hf-sys { width: 21%; }
  .hf-network-six .hf-sys.hf-pos, .hf-network-six .hf-sys.hf-stars, .hf-network-six .hf-sys.hf-till { left: 0; }
  .hf-network-six .hf-sys.hf-orders, .hf-network-six .hf-sys.hf-menu, .hf-network-six .hf-sys.hf-book { right: 0; }
  .hf-network-six .hf-sys img { width: 66%; }
  .hf-network-six .hf-sys > b { font-size: 10px; }
  .hf-network-six .hf-wa-out { width: 26%; }
  .hf-network-six .hf-flow { stroke-width: 2; }
  .hf-agent-workspace { height: auto; padding-bottom: 8px; }
}

/* ───────── Hero proof line: one result, one name, in the first screen ───────── */
.hero-proof { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-muted); max-width: 46ch; }
.hero-proof img { width: 64px; height: 24px; object-fit: contain; filter: brightness(0); opacity: .75; flex: none; }
.hero-proof q { quotes: "\201C" "\201D"; color: var(--black); }
.hero-proof b { font-weight: 400; color: var(--black); }
@media (max-width: 1000px) { .hero-proof { margin-top: 16px; } }
@media (max-width: 760px) { .hero-proof { font-size: 14px; gap: 10px; } .hero-proof img { width: 56px; height: 22px; } }

/* With Adonis: the output is WhatsApp itself, shown as one big mark instead of a text card. */
.hf-message { display: none !important; }
.hf-wa-out {
  position: relative; width: 96px; height: 96px; margin: 0 auto;
  display: grid; place-items: center;
  transform: scale(0.84) translateY(6px); opacity: 0.5;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s, filter 0.6s;
  filter: drop-shadow(0 14px 18px rgba(63, 80, 45, 0.22));
}
.hf-wa-out img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hf-stage:not([data-step="0"]) .hf-wa-out { transform: none; opacity: 1; }
.hf-stage[data-step="4"] .hf-wa-out { filter: drop-shadow(0 14px 18px rgba(63, 80, 45, 0.22)) drop-shadow(0 0 10px rgba(215, 225, 79, 0.7)); }