/* ============================================================
   dark.css — DARK MODE DEMO for heyzoe.com (local preview only).

   Mechanism: the brand tokens in shared.css drive most surfaces,
   so the theme is a token remap on html[data-theme="dark"] plus
   targeted overrides for the hardcoded whites/inks (nav pill,
   menu panel, glass sheets, toasts, inline SVG fills).

   Palette follows the portal's dark admin screens: blue-black
   canvas, slightly-lighter panels, the mint accent untouched,
   warm cream inks. Product mocks/screenshots keep their light
   palette (brand artwork keeps its palette).
   ============================================================ */

html[data-theme="dark"]{
  --ink:#ECF1ED;
  --ink-2:#F4F7F3;
  --ink-soft:#ABBBB9;
  --paper:#0E1517;
  --cream:#172025;
  --cream-2:#1F2A31;
  --mint-soft:#15332A;
  --line:#2A353B;
  --text:#DCE4E0;
  --text-soft:#8FA1A1;
  --shadow:0 18px 50px -22px rgba(0,0,0,.6);
  color-scheme:dark;
}

html[data-theme="dark"] body{background:var(--paper);color:var(--text)}

/* ---- Inline SVG icon inks: the CSS property beats the fill
   attribute, so flip only the ink-coloured paths. ---- */
html[data-theme="dark"] svg [fill="#0B2633"],
html[data-theme="dark"] svg[fill="#0B2633"]{fill:var(--ink)}
html[data-theme="dark"] svg [stroke="#0B2633"]{stroke:var(--ink)}

/* ---- Nav ---- */
html[data-theme="dark"] .nav-pill,
html[data-theme="dark"] .hz-nav{background:rgba(19,32,38,.82);border-color:var(--line)}
html[data-theme="dark"] .nav-icon-pill{border-color:var(--line);background:rgba(255,255,255,.05)}
html[data-theme="dark"] .nav-drop-menu{background:var(--cream);border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
html[data-theme="dark"] .btn-apply{background:var(--mint);color:#0B2633}
html[data-theme="dark"] .btn-apply:hover{background:var(--mint-deep)}

/* ---- Slide-out menu: dark glass panel ---- */
html[data-theme="dark"] .menu-backdrop{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .menu-panel{background:rgba(20,28,32,.92);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border:1px solid var(--line)}
html[data-theme="dark"] .menu-close{background:var(--cream-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .menu-promo{background:var(--cream-2)}

/* ---- Generic light cards / panels ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .dir-flat-card,
html[data-theme="dark"] .demo-form,
html[data-theme="dark"] .aud-panel,
html[data-theme="dark"] .faq-item{background:var(--cream);border-color:var(--line)}

/* ---- Inputs ---- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:var(--cream);color:var(--text);border-color:var(--line)}

/* ---- Landing-page system (for-suppliers / telehealth / clinics) ---- */
html[data-theme="dark"] .lp-cell{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .lp-band{background:var(--cream-2);color:var(--ink)}

/* THE GLASS: frosted sheets go from white glass to smoked glass.
   Same blur, flipped tint, a thin light edge so it still reads
   as a pane rather than a grey card. */
html[data-theme="dark"] .lp-sheet{
  background:rgba(13,22,27,.62);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.8);
}
html[data-theme="dark"] .lp-toast{
  background:rgba(16,27,32,.66);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);
}

/* Product mocks follow the product's REAL dark mode (Matt's booking
   calendar reference): dark panel bodies, raised cards, mint accents,
   artwork thumbnails keep their colours. Token-driven mock internals
   (lp-screen forms/market) inherit the dark tokens automatically. */



/* ---- Hero art: swap the light-bg video for Matt's dark asterisk
   render (static stand-in until a dark-mode video exists). The
   existing edge mask melts the render's own bg into the canvas. ---- */
html[data-theme="dark"] .hero-shape video,
html[data-theme="dark"] .hero-shape .hero-still{display:none}
html[data-theme="dark"] .hero-shape{background:url("assets/mark-asterisk-dark.jpg") center/contain no-repeat}

/* ---- Hero CTAs + therapy pills ---- */
html[data-theme="dark"] .btn-primary{background:var(--mint);color:#0B2633}
html[data-theme="dark"] .btn-primary:hover{background:var(--mint-deep)}
html[data-theme="dark"] .btn-ghost{background:var(--cream);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .btn-ghost:hover{border-color:var(--ink-soft)}
html[data-theme="dark"] .hero-cats span{border-color:rgba(255,255,255,.26);background:rgba(19,32,38,.6);color:var(--ink-soft)}
html[data-theme="dark"] .pill{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .pill-divider{background:var(--line)}

/* ---- Homepage sections: the light rhythm (paper → white → putty)
   becomes a dark rhythm (canvas → panel → raised panel). ---- */
html[data-theme="dark"] .problem,
html[data-theme="dark"] .deep-dive,
html[data-theme="dark"] .hp-scope{background:#141C20}
html[data-theme="dark"] .solution{background:#182329}
html[data-theme="dark"] .quotes,
html[data-theme="dark"] .faq-zone{background:#10181B}
html[data-theme="dark"] .suppliers-band{background:#172025}

/* Paper texture flourishes glow on dark — drop them. */
html[data-theme="dark"] .problem::before,
html[data-theme="dark"] .problem::after{display:none}

/* Teal display accent needs more light on dark. */
html[data-theme="dark"] .problem h2{color:#6FB4D4}

/* Section edge rules: ink hairlines → light hairlines. */
html[data-theme="dark"] .deep-dive::before,
html[data-theme="dark"] .deep-dive::after,
html[data-theme="dark"] .faq-zone::before,
html[data-theme="dark"] .faq-zone::after{background:linear-gradient(to bottom,transparent 0,rgba(255,255,255,.1) 160px)}
html[data-theme="dark"] .suppliers-band::before,
html[data-theme="dark"] .suppliers-band::after{background:linear-gradient(to bottom,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) calc(100% - 140px),transparent 100%)}
html[data-theme="dark"] .stack-divider{border-top-color:rgba(255,255,255,.1)}

/* Pastel icon chips keep their colours — pin the glyph ink dark. */
html[data-theme="dark"] .stack-item .ico .material-symbols-rounded{color:#0B2633}
html[data-theme="dark"] .stack-tag .sq{color:#0C1518}

/* Audience tabs: active row is a lift, not a white card. */
html[data-theme="dark"] .aud-tab.is-active{background:rgba(255,255,255,.08)}

/* ---- Problem tab strip ---- */
html[data-theme="dark"] .prob-tabs{background:var(--cream);border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .prob-tab{background:var(--cream)}
html[data-theme="dark"] .prob-tab:not(:last-child){border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .prob-tab:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .prob-tab.is-active{background:#1E3A33;color:#C9E8D6}

/* ---- lp buttons: ink-on-mint reads as the primary in dark ---- */
html[data-theme="dark"] .lp-btn-ink{background:var(--cream-2);color:var(--mint)}
html[data-theme="dark"] .lp-btn-ink:hover{background:#1F333B;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}

/* ============ Bug batch 1 (Matt's screenshots) ============ */

/* Missed sections */
html[data-theme="dark"] .audience,
html[data-theme="dark"] .services{background:#10181B}

/* Scrolled nav: light frost → dark frost */
html[data-theme="dark"] header.nav.scrolled,
html[data-theme="dark"] nav.scrolled{background:rgba(14,21,23,.8);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border-bottom-color:rgba(255,255,255,.08)}

/* Solution sticky panels: white cards → dark panels */
html[data-theme="dark"] .sol-panel{background:var(--cream)}
html[data-theme="dark"] .sol-panel{border-color:#24353C}
html[data-theme="dark"] .sol-panel-art{background:#10181B}

/* Deep-dive cards */
html[data-theme="dark"] .dd-card{background:var(--cream);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .dd-card:nth-child(2),
html[data-theme="dark"] .dd-card-wide{border-color:rgba(255,255,255,.14)}

/* Services carousel cards */
html[data-theme="dark"] .srv-card{background:var(--cream)}

/* Newsletter pill: dark pill, transparent input (kills the black box),
   mint submit */
html[data-theme="dark"] .df-news-form{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .df-news-form:hover{border-color:var(--ink-soft)}
html[data-theme="dark"] .df-news-form:focus-within{background:var(--cream);border-color:var(--ink-soft);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
html[data-theme="dark"] .df-news-form input{background:transparent;border:none}
html[data-theme="dark"] .df-news-form input::placeholder{color:var(--text-soft)}
html[data-theme="dark"] .df-news-form button{background:var(--mint);color:#0B2633}
html[data-theme="dark"] .df-news-form button:hover{background:var(--mint-deep)}

/* Eyebrow square chips: the chip keeps the (now light) ink token as
   its body — pin the GLYPH dark so it never goes white-on-white. */
html[data-theme="dark"] .eyebrow-sad .eyebrow-sq{color:#0C1518}

/* Quote cards */
html[data-theme="dark"] .quote{background:var(--cream);box-shadow:0 0 20px 0 rgba(0,0,0,.3)}

/* ============ Batch 2: star + button language ============ */

/* The wordmark asterisk: steel teal reads muddy on dark — mint. */
html[data-theme="dark"] .logo .aster,
html[data-theme="dark"] .wordmark .aster{fill:var(--mint)}

/* Buttons follow the admin app's language: dark-green pill, light
   mint text (the "New Conversation" look) instead of solid mint. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-apply,
html[data-theme="dark"] .menu-apply,
html[data-theme="dark"] .df-news-form button{
  background:#17352C;
  color:#8CEBB8;
  border:1px solid rgba(123,227,173,.25);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-apply:hover,
html[data-theme="dark"] .menu-apply:hover,
html[data-theme="dark"] .df-news-form button:hover{
  background:#1C4336;
  border-color:rgba(123,227,173,.45);
}

/* Unscrolled nav: the homepage gives it a light frost by default —
   same dark frost as the scrolled state. */
html[data-theme="dark"] header.nav{background:rgba(14,21,23,.6);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}

/* ---- Homepage phone mock (zp-*) ---- */
html[data-theme="dark"] .zp-phone{background:#172025;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .zp-chip{background:rgba(255,255,255,.08);color:#E8EDE9}
html[data-theme="dark"] .zp-icons svg{color:#E8EDE9}
html[data-theme="dark"] .zp-hey{color:#ECF1ED}
html[data-theme="dark"] .zp-hey em{color:#6FD9A6}
html[data-theme="dark"] .zp-ring-card,
html[data-theme="dark"] .zp-tile{background:#1F2A31}
html[data-theme="dark"] .zp-ring-mid b,
html[data-theme="dark"] .zp-ring-mid span{color:#6FD9A6}
html[data-theme="dark"] .zp-ring-mid em{color:#DCE4E0}
html[data-theme="dark"] .zp-tile{color:#E8EDE9}
html[data-theme="dark"] .zp-nav{background:rgba(23,32,37,.92);box-shadow:0 6px 18px rgba(0,0,0,.5)}
html[data-theme="dark"] .zp-nav-item{color:#7E8C8A}
html[data-theme="dark"] .zp-nav-item.is-active{background:rgba(255,255,255,.1);color:#ECF1ED}

/* ---- Storefront mock (zs-*) ---- */
html[data-theme="dark"] .zs-shop{background:#172025;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .zs-shop.zs-in-art{background:rgba(23,32,37,.6)}
html[data-theme="dark"] .zs-side-title,
html[data-theme="dark"] .zs-filter b,
html[data-theme="dark"] .zs-cats b,
html[data-theme="dark"] .zs-card>b,
html[data-theme="dark"] .zs-foot b{color:#ECF1ED}
html[data-theme="dark"] .zs-filter,
html[data-theme="dark"] .zs-cats,
html[data-theme="dark"] .zs-in-art .zs-cats{background:#1F2A31}
html[data-theme="dark"] .zs-track{background:#2A353B}
html[data-theme="dark"] .zs-dot{background:#172025}
html[data-theme="dark"] .zs-range,
html[data-theme="dark"] .zs-card>span,
html[data-theme="dark"] .zs-tb-toggle i{color:#8FA1A1}
html[data-theme="dark"] .zs-cat{color:#ABBBB9}
html[data-theme="dark"] .zs-cat.is-active{background:#27353D;color:#ECF1ED}
html[data-theme="dark"] .zs-tb{background:#1F2A31;color:#ABBBB9}
html[data-theme="dark"] .zs-tb-toggle{background:#141C20;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .zs-tb-toggle em{background:#1E3A33;color:#8CEBB8}
html[data-theme="dark"] .zs-card,
html[data-theme="dark"] .zs-in-art .zs-card{background:#1F2A31;box-shadow:0 2px 8px rgba(0,0,0,.3)}
html[data-theme="dark"] .zs-cursor{background:rgba(23,32,37,.5);border-color:rgba(255,255,255,.55)}

/* ---- Landing browser mock ---- */
html[data-theme="dark"] .lp-browser{background:var(--cream)}
html[data-theme="dark"] .lp-browser-page{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%)}

/* ---- Demo zone ---- */
html[data-theme="dark"] .demo-card{background:#141C20;border-color:rgba(255,255,255,.12)}

/* Closing asterisk artwork: Matt's real dark render. */
html[data-theme="dark"] .mark-lg{content:url("assets/mark-asterisk-dark.jpg")}

/* Demo mocks: swap the light product screenshots for captures of the
   REAL product in its real dark mode. */
html[data-theme="dark"] img[src*="demo-booking-shot"]{content:url("assets/demo-booking-shot-dark.png")}
html[data-theme="dark"] img[src*="demo-request-shot"]{content:url("assets/demo-request-shot-dark.png")}

/* ---- Nav link hover: white pill → soft lift ---- */
html[data-theme="dark"] .nav-links a:hover{background:rgba(255,255,255,.09);color:var(--ink)}

/* ---- ⌘K search palette: light frost → dark glass ---- */
html[data-theme="dark"] .search-panel{
  background:rgba(18,21,32,.8);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 20px 50px -15px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .search-input{color:var(--ink)}
html[data-theme="dark"] .search-input::placeholder{color:var(--text-soft)}
html[data-theme="dark"] .search-input::selection{background:rgba(123,227,173,.3)}
html[data-theme="dark"] .search-input-ico{color:var(--text-soft)}
html[data-theme="dark"] .search-pill,
html[data-theme="dark"] .search-close{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--ink)}
html[data-theme="dark"] .search-pill:hover{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .search-group-title,
html[data-theme="dark"] .search-tip{color:var(--text-soft)}
html[data-theme="dark"] .search-tip kbd,
html[data-theme="dark"] .search-footer kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--ink)}
html[data-theme="dark"] .search-footer{background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.1);color:var(--text-soft)}
html[data-theme="dark"] .search-footer-sep{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .search-result{color:var(--ink)}
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result.is-active{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .search-result-sub{color:var(--text-soft)}
html[data-theme="dark"] .search-input-row{border-bottom-color:rgba(255,255,255,.1)}

/* Closing strapline zone (was still white) */
html[data-theme="dark"] .footer-zone{background:#0E1517}
html[data-theme="dark"] .footer-zone::before,
html[data-theme="dark"] .footer-zone::after{background:linear-gradient(to bottom,transparent 0,rgba(255,255,255,.1) 160px)}

/* The dark asterisk render needs none of the light treatment:
   multiply (dark x dark = black) and the brightness boost both go.
   The radial edge mask stays so the render's own bg melts into
   the section. */
html[data-theme="dark"] .strapline .mark-lg{mix-blend-mode:normal;filter:none}
html[data-theme="dark"] .strapline h2 .ed{color:#6FB4D4}

/* ---- Animated booking mock (zb-*): mirror the real dark booking
   page — dark panel, muted day chips, deep-green selections. ---- */
html[data-theme="dark"] .zb-book{background:#172025;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .zb-info{border-right-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .zb-grid span{background:#1F2A31;color:var(--ink)}
html[data-theme="dark"] .zb-grid em{color:rgba(236,241,237,.3)}
html[data-theme="dark"] .zb-grid .zb-d6{background:#1E6E59;color:#fff}
html[data-theme="dark"] .zb-s3 .zb-d6{background:#1F2A31;color:var(--ink)}
html[data-theme="dark"] .zb-s3 .zb-d13{background:#1E6E59;color:#fff}
html[data-theme="dark"] .zb-times,
html[data-theme="dark"] .zb-times-head{background:#172025}
html[data-theme="dark"] .zb-slot{background:#141C20;border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .zb-s3 .zb-slot-pick{background:#1E6E59;color:#fff;border-color:#1E6E59}
html[data-theme="dark"] .zb-booked{background:#17352C;color:#8CEBB8}
html[data-theme="dark"] .zb-cursor{background:rgba(23,32,37,.5);border-color:rgba(255,255,255,.55)}

/* The hero render's own bg tone differs slightly from the canvas —
   a radial vignette mask dissolves the rectangle entirely. */
html[data-theme="dark"] .hero-shape{
  background-size:76% !important;
  -webkit-mask-image:radial-gradient(ellipse 56% 74% at 50% 50%,#000 0%,#000 52%,transparent 82%);
  -webkit-mask-composite:source-over;
  mask-image:radial-gradient(ellipse 56% 74% at 50% 50%,#000 0%,#000 52%,transparent 82%);
  mask-composite:add;
}

/* ---- The blend: the page lives in the admin's green-teal darks,
   and the star renders carry their own blue-black — a local radial
   glow in the star's blue sits behind each one so the render melts
   into the canvas without turning the whole site blue. ---- */
html[data-theme="dark"] .hero{
  background:radial-gradient(48% 60% at 66% 58%,#11141D 0%,#11141D 30%,rgba(17,20,29,0) 72%);
}
html[data-theme="dark"] .strapline{
  background:radial-gradient(26% 300px at 50% 150px,#11141D 0%,#11141D 30%,rgba(17,20,29,0) 75%);
}

/* ---- FAQ page: the two --ink flips Matt caught ---- */
/* Active category pill: light-pill-white-text became unreadable.
   Use the admin's active-pill blue-slate with white text. */
html[data-theme="dark"] .faq-side-link.is-active{background:#27485C;color:#fff}
html[data-theme="dark"] .faq-side-link.is-active .faq-side-num{color:var(--mint)}
html[data-theme="dark"] .faq-side-link:hover{background:rgba(255,255,255,.06);color:var(--ink)}
/* Expand buttons: quiet dark chip; OPEN state goes mint-on-green
   like the admin's confirm chips, not a white disc. */
html[data-theme="dark"] .faq-item-btn{background:rgba(255,255,255,.08);color:var(--ink)}
html[data-theme="dark"] .faq-item[open] .faq-item-btn{background:#17352C;color:#8CEBB8}
html[data-theme="dark"] .faq-item{border-bottom-color:rgba(255,255,255,.14)}

/* ---- Conditions page ---- */
html[data-theme="dark"] .cond-card{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .cond-badge{background:rgba(255,255,255,.07);border-color:var(--line)}

/* ---- Legal pages (terms / privacy) ---- */
html[data-theme="dark"] .legal-page .toc,
html[data-theme="dark"] .legal-page .callout,
html[data-theme="dark"] .legal-page table{background:var(--cream);border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] .legal-page .callout{border-left-color:#6FB4D4}

/* ---- Downloads page ---- */
html[data-theme="dark"] .dl-card{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .dl-card-media{background:#10181B}
html[data-theme="dark"] .dl-btn{background:#17352C;color:#8CEBB8;border:1px solid rgba(123,227,173,.25)}
html[data-theme="dark"] .dl-btn:hover{background:#1C4336;color:#8CEBB8}
html[data-theme="dark"] .dl-btn--ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.2)}
html[data-theme="dark"] .dl-btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--ink);border-color:var(--ink-soft)}
html[data-theme="dark"] .dl-picker{background:var(--cream);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .dl-picker-menu{background:var(--cream);border-color:var(--line);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
html[data-theme="dark"] .dl-soon{background:#17352C;color:#8CEBB8}

/* ---- Sweep fixes (2026-10-23) ---- */
/* start-a-practice manifest: same smoked glass as the price sheet. */
html[data-theme="dark"] .lp-manifest{
  background:rgba(13,22,27,.62);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.8);
}
/* telehealth see-it-in-action tabs */
html[data-theme="dark"] .lp-tabsec-tab{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .lp-tabsec-tab.is-on{background:#27485C;border-color:#27485C;color:#fff}