/* ══════════════════════════════════════════════════════════════
   day1.css — site-wide theme layer (v1)
   Loads AFTER dz.css (and lp.css) on every page except the homepage,
   which has its own home.css. Retokens the whole site to the measured
   day1-run system: Figtree w500 headings, tight tracking, 24px outer
   cushion, mono micro-labels, 3.6px radii, #0e0d0d ground.
   No markup changes required — overrides only.
   ══════════════════════════════════════════════════════════════ */

:root {
  --d1-fs: clamp(11px, 0.926vw, 19px);
  --d1-cush: calc(1.5 * var(--d1-fs));
  --d1-bg: #0e0d0d;
  --d1-card: #131212;
  --d1-mute: rgba(255, 255, 255, 0.6);
  --d1-line: rgba(255, 255, 255, 0.12);
}

/* ── ground ─────────────────────────────────────────────────── */
html[data-theme] body {
  background: var(--d1-bg);
  font-family: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: calc(1.2 * var(--d1-fs));
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}
html[data-theme] { background: var(--d1-bg); }

/* every heading: geometric sans, w500, tight — never condensed caps */
h1, h2, h3, h4,
.dz-h1, .dz-h2, .dz-h3,
.hz-h1, .pp-t, .mfg-t, .cred-n, .lp-form h2 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
}
.dz-h1 { font-size: calc(5.8 * var(--d1-fs)); }
.dz-h2 { font-size: calc(3.6 * var(--d1-fs)); }
.dz-h3 { font-size: calc(1.8 * var(--d1-fs)); }

/* blue accents inside headings → ghost grey, day1's second-line move */
.dz-h1 .dz-blue, .dz-h2 .dz-blue, .dz-h1 span[style*="color"], .dz-h2 span[style*="color"] {
  color: #1a47c8 !important;
}

/* tags/eyebrows → the measured mono chip */
.dz-tag, .pp-kick, .hz-kick, .step-n {
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 2.4px !important;
  padding: 2.4px 7.2px 3.6px !important;
}

/* buttons: flat, 3px radius, Figtree, no glow, no uppercase */
.dz-btn, .lp-call-btn, .submit-btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.dz-btn-primary { background: #fff !important; color: #0e0d0d !important; border: none !important; }
.dz-btn-primary:hover { background: #d9dbe0 !important; transform: none !important; }
.dz-btn-inverse { background: rgba(255,255,255,0.06) !important; color: #fff !important; border: 1px solid var(--d1-line) !important; }
.dz-btn-inverse:hover { background: rgba(255,255,255,0.12) !important; }

/* cards and panels: flat near-black, hairlines, square-ish */
.dz-card, .pp, .lp-form, .step, .verdict, .tl, .faq-i, .spec-card {
  background: var(--d1-card) !important;
  border: 1px solid var(--d1-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* nav: 24px cushion, comma-separated plain links, no pill CTA */
.dz-nav { background: transparent; border-bottom: none; }
.dz-nav.solid, .dz-nav--scrolled { background: rgba(14,13,13,0.85); backdrop-filter: blur(30px); }
.dz-nav-in { max-width: none; padding: var(--d1-cush) var(--d1-cush) calc(0.6 * var(--d1-fs)); justify-content: flex-start; }
.dz-nav-logo img { width: calc(12 * var(--d1-fs)); }
.dz-nav-links { gap: 0; margin-left: calc(4.6 * var(--d1-fs)); margin-right: 0; align-items: baseline; }
.dz-nav-links a, .dz-nav a.dz-nav-cta {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: calc(1.2 * var(--d1-fs)) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.dz-nav-links a:hover { opacity: 0.7; }

/* sections: pull the huge paddings down toward butt joints */
.dz-section { padding: calc(6 * var(--d1-fs)) 0; }
.dz-wrap { max-width: none; padding: 0 var(--d1-cush); }
.dz-sec-head { max-width: none; margin: 0 0 calc(3 * var(--d1-fs)); text-align: left; }
.dz-sec-head .dz-lead, .dz-lead { color: var(--d1-mute); font-size: calc(1.2 * var(--d1-fs)); }

/* footer: strip to rows of mono */
.dz-footer { background: var(--d1-bg); border-top: 1px solid var(--d1-line); padding: calc(2 * var(--d1-fs)) 0; }
.dz-footer-main img { display: none; }
.dz-footer-tag { display: none; }
.dz-footer-addr, .dz-footer-links a, .dz-footer-bottom p {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--d1-mute);
}
.dz-footer-links { margin-top: calc(1 * var(--d1-fs)); }
.dz-footer-links a:hover { color: #fff; }
.dz-footer-bottom { border-top: none; margin-top: calc(1.2 * var(--d1-fs)); padding-top: 0; }

/* CTA band */
.dz-cta { background: var(--d1-bg) !important; border-top: 1px solid var(--d1-line); }
.dz-cta .dz-h2 { font-size: calc(5.8 * var(--d1-fs)); }
.dz-cta p { color: var(--d1-mute); }

/* kill leftover decorative animations from the old system */
.mq, .stk { display: none !important; }

/* builder panel + stray condensed-caps elements join the system */
.dzb-name, .dz-feat-t {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.dzb-badge, .dzb-kicker, .dzb-seg-label, .dzb-loading {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
.form-heading, .info-value, .success-msg {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.dz-stat .n, .dz-footer-tag {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.dz-stat .l {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  color: var(--d1-mute) !important;
}
.info-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--d1-mute) !important;
}

/* the long-tail of condensed-caps leftovers across guide/faq/spec pages:
   labels + meta rows go mono-small, titles + emphasis go Figtree 500 */
.faq-hero-meta, .faq-category-label, .specs-hero-meta, .spec-card-label,
.callout-label, .guide-hero-meta, .care-hero-meta, .tip-label, .warn-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
.faq-filter-btn, .toc-title, .checklist-title, .lp-proof b, .lp-form label,
table th, table caption, table td, .lp-call-btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* ══ landing-page day1 hero (markup added per page) ═════════ */
.d1hero {
  position: relative; height: 88svh; min-height: 540px;
  overflow: hidden; background: var(--d1-bg);
}
.d1hero video {
  position: absolute; left: 0; top: 0; width: 100%; height: 110%;
  object-fit: cover; object-position: center 40%;
}
.d1hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 44% at 78% 16%, rgba(10,10,12,0.44) 0%, rgba(10,10,12,0) 100%),
    linear-gradient(180deg, rgba(14,13,13,0.25) 0%, rgba(14,13,13,0) 30%, rgba(14,13,13,0.35) 100%);
}
.d1hero-in { position: absolute; inset: 0; z-index: 2; }
.d1hero-head { position: absolute; top: calc(3.4 * var(--d1-fs)); right: var(--d1-cush); text-align: right; }
.d1hero-head h1 {
  font-size: calc(4.6 * var(--d1-fs)) !important;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.d1hero-head .sub { color: #fff; font-size: calc(1.4 * var(--d1-fs)); margin-top: 0.8em; }
.d1hero-bar {
  position: absolute; right: var(--d1-cush); bottom: var(--d1-cush);
  display: flex; align-items: center; gap: 1em;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
  border-radius: 3.6px; padding: calc(0.75 * var(--d1-fs));
}
.d1hero-bar .tagchip {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.08); border-radius: 2.4px;
  padding: 2.4px 7.2px 3.6px; margin-left: 0.3em; white-space: nowrap;
}
.d1hero-bar .val { color: #fff; font-size: calc(1.2 * var(--d1-fs)); padding: 0 1.6em 0 0.5em; white-space: nowrap; }
.d1hero-bar .val span { color: var(--d1-mute); }
.d1hero-bar .dz-btn { white-space: nowrap; }

@media (max-width: 760px) {
  :root { --d1-fs: clamp(13px, 3.9vw, 16px); }
  .dz-nav-links { display: none; }
  .d1hero { height: 74svh; }
  .d1hero-head { left: var(--d1-cush); text-align: center; }
  .d1hero-head h1 { font-size: calc(2.6 * var(--d1-fs)) !important; }
  .d1hero-bar { left: var(--d1-cush); right: var(--d1-cush); justify-content: space-between; }
  .d1hero-bar .val { padding-right: 0.3em; }
  .dz-h1 { font-size: calc(3.4 * var(--d1-fs)); }
  .dz-cta .dz-h2 { font-size: calc(3.2 * var(--d1-fs)); }
}

/* ══════════════════════════════════════════════════════════════
   DARK THEME — every page matches the homepage: black ground,
   white ink, blue accents. (Reverted from the white experiment.)
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg: #0e0d0d;
  --bg-2: #161515;
  --card: #141313;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.08);
  --ink: #ffffff;
  --body: rgba(255, 255, 255, 0.78);
  --dim: rgba(255, 255, 255, 0.6);
  --accent-ink: #4d7bff;
  --nav-bg: transparent;
  --hero-grad: none;
  --shadow-card: none;
  --cta-grad: #0e0d0d;
}
html[data-theme], html[data-theme] body { background: #0e0d0d; color: rgba(255,255,255,0.78); }
:root { --d1-bg: #0e0d0d; --d1-card: #141313; --d1-mute: rgba(255,255,255,0.6); --d1-line: rgba(255,255,255,0.14); }

h1, h2, h3, h4, .dz-h1, .dz-h2, .dz-h3 { color: #ffffff !important; }
.dz-h1 .dz-blue, .dz-h2 .dz-blue,
.dz-h1 span[style*="color"], .dz-h2 span[style*="color"] { color: #4d7bff !important; }

/* section labels: sans, large, ghosted — matches the homepage */
.dz-tag, .pp-kick, .hz-kick, .faq-hero-meta, .faq-category-label,
.specs-hero-meta, .guide-hero-meta, .care-hero-meta {
  font-family: 'Outfit', sans-serif !important;
  font-size: calc(2.1 * var(--d1-fs)) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  color: #2f2f2f !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  margin-bottom: 0.4em !important;
}
/* small in-component labels stay mono */
.spec-card-label, .callout-label, .tip-label, .warn-label, .info-label, .dz-stat .l {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  background: none !important;
  display: block !important;
}

.dz-btn-primary { background: #ffffff !important; color: #0e0d0d !important; border: none !important; }
.dz-btn-primary:hover { background: #e9e9e6 !important; }
.dz-btn-inverse { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3) !important; border: none !important; }
.dz-btn-inverse:hover { background: rgba(255,255,255,0.08) !important; }
.dz-card, .pp, .lp-form, .step, .verdict, .tl, .faq-i, .spec-card {
  background: #141313 !important; border: 1px solid rgba(255,255,255,0.14) !important;
}
.dz-section.dz-alt { background: #141313; }
.dz-cta { background: #0e0d0d !important; border-top: 1px solid rgba(255,255,255,0.14); }
.dz-footer { background: #0e0d0d; border-top: 1px solid rgba(255,255,255,0.14); }
.dz-footer-addr, .dz-footer-links a, .dz-footer-bottom p { color: rgba(255,255,255,0.6); }
.dz-footer-links a:hover { color: #fff; }
input, select, textarea { background: #141313 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.2) !important; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.4) !important; }

/* nav: transparent, floats, scrolls away. No bar on any page. */
.dz-nav, .nav, .site-nav, header.nav {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent !important; border: none !important;
  backdrop-filter: none !important; box-shadow: none !important;
}
.dz-nav-links a, .dz-nav a.dz-nav-cta, .nav a, .nav-links a, .nav-logo { color: #fff !important; }
.dz-nav-links li:not(:last-child)::after { color: #fff; }
.dz-nav-logo img, .nav-logo img { filter: none !important; width: calc(11 * var(--d1-fs)) !important; height: auto !important; }
.dz-nav-toggle span { background: #fff; }
.nav-cta { background: #fff !important; color: #0e0d0d !important; border: none !important; }

/* styles.css pages carry their own palette — repoint it dark */
:root {
  --black: #0e0d0d; --black-soft: #141313; --black-card: #141313;
  --white: #ffffff; --gray-light: #e5e7eb; --gray-mid: rgba(255,255,255,0.6);
  --gray-dark: rgba(255,255,255,0.14); --text-body: rgba(255,255,255,0.78);
  --blue: #4d7bff; --blue-light: #6b93ff; --blue-glow: rgba(77,123,255,0.2);
}
.faq-item, .faq-question, .faq-answer, .sidebar-card, .sidebar-box, .sidebar-links,
.sidebar-link, .callout, .spec-table, .toc, .checklist, .tip, .warn, .guide-section,
.btn.btn-sm, .btn-secondary, .btn-outline {
  background: #141313 !important; border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.78) !important;
}
.faq-question, .faq-item summary, .sidebar-link, .spec-card-value, .spec-value { color: #fff !important; }
.faq-hero, .specs-hero, .guide-hero, .care-hero, .page-hero { background: #0e0d0d !important; }
table th { background: #141313 !important; color: #fff !important; }
table td, table th { border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.78) !important; }
.faq-filter-btn { border: 1px solid rgba(255,255,255,0.2) !important; color: #fff !important; background: transparent !important; }
.faq-filter-btn:hover, .faq-filter-btn.active { background: #fff !important; color: #0e0d0d !important; }
.lp-proof b { color: #fff; } .lp-proof span, .lp-call-note { color: rgba(255,255,255,0.6); }
.lp-bar { background: rgba(14,13,13,0.96); border-top: 1px solid rgba(255,255,255,0.14); }
.lp-bar .call { color: #fff; }
.step-t, .verdict b, .lp-ok b { color: #fff !important; }
.step-n { background: #fff !important; color: #0e0d0d !important; }
.step-x { color: rgba(255,255,255,0.78) !important; }
.step-flag { color: #4d7bff !important; }
.d1hero-head h1 { color: rgba(255,255,255,0.55); }
.d1hero-head .sub, .d1hero-bar .val { color: #fff; }
.d1hero-bar .dz-btn-primary { background: #fff !important; color: #0e0d0d !important; }

/* the logo lockup helper (kept for any page still using it) */
.lock { display: inline-flex; align-items: center; gap: 0.34em; color: #fff; text-decoration: none; }

/* ══ BURGER + MENU (matches the homepage) ══════════════════ */
.dz-nav-toggle { display: none !important; }
/* the burger is a phone control — desktop already has the text links,
   and two ways to the same menu is one too many */
@media (min-width: 901px) { .bg, .menu { display: none !important; } }

.bg {
  position: fixed; top: var(--d1-cush); right: var(--d1-cush); z-index: 200;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  width: calc(3.4 * var(--d1-fs)); height: calc(2.6 * var(--d1-fs));
  padding: 0; background: none; border: 0; cursor: pointer;
}
.bg span {
  display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
  transition: transform 0.4s cubic-bezier(.22,.68,.32,1); transform-origin: center;
}
html.menu-open .bg span:first-child { transform: translateY(4.5px) rotate(45deg); }
html.menu-open .bg span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 190; background: #0e0d0d;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--d1-cush); opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
html.menu-open .menu { opacity: 1; pointer-events: auto; }
html.menu-open, html.menu-open body { overflow: hidden; }
.menu-in { display: flex; flex-direction: column; gap: 0.1em; }
.menu-in a {
  font-family: 'Outfit', sans-serif;
  font-size: calc(5.4 * var(--d1-fs)); font-weight: 500; line-height: 1.08;
  letter-spacing: -0.03em; color: #fff !important;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.68,.32,1), color 0.2s;
}
html.menu-open .menu-in a { opacity: 1; transform: none; }
html.menu-open .menu-in a:nth-child(1) { transition-delay: 0.10s; }
html.menu-open .menu-in a:nth-child(2) { transition-delay: 0.16s; }
html.menu-open .menu-in a:nth-child(3) { transition-delay: 0.22s; }
html.menu-open .menu-in a:nth-child(4) { transition-delay: 0.28s; }
html.menu-open .menu-in a:nth-child(5) { transition-delay: 0.34s; color: #4d7bff !important; }
.menu-ph {
  font-family: 'Outfit', sans-serif; margin-top: calc(2.4 * var(--d1-fs));
  font-size: calc(1.6 * var(--d1-fs)); color: rgba(255,255,255,0.6) !important;
  opacity: 0; transition: opacity 0.5s ease 0.42s;
}
html.menu-open .menu-ph { opacity: 1; }
.dz-nav-in { padding-right: calc(6 * var(--d1-fs)) !important; }

/* section labels: bigger + lighter (they were unreadably dark) */
.dz-tag, .pp-kick, .hz-kick, .faq-hero-meta, .faq-category-label,
.specs-hero-meta, .guide-hero-meta, .care-hero-meta {
  font-size: calc(2.7 * var(--d1-fs)) !important;
  color: #6a6a68 !important;
}
@media (max-width: 760px) {
  .menu-in a { font-size: calc(3.6 * var(--d1-fs)); }
  .dz-tag, .pp-kick, .hz-kick, .faq-hero-meta, .faq-category-label,
  .specs-hero-meta, .guide-hero-meta, .care-hero-meta { font-size: calc(2.2 * var(--d1-fs)) !important; }
}

/* ══════════════════════════════════════════════════════════════
   day1.css v2 — the homepage system, applied site-wide
   ──────────────────────────────────────────────────────────────
   Everything below ports home.css onto the three markup families
   the interior pages use (dz.css, styles.css, lp.css) so every
   page reads as one site. Overrides only — no markup rewrites.

   The single most important change: the old scale multiplied
   --d1-fs, which collapses to ~9px on a phone. Every heading was
   shrinking on mobile. It is fluid clamp() now, exactly as on the
   homepage: clamp(rem, vw, rem), never em off a collapsing root.
   ══════════════════════════════════════════════════════════════ */

/* ── TYPE SCALE ─────────────────────────────────────────────── */
html[data-theme] .dz-h1,
html[data-theme] .hz-h1,
html[data-theme] .lp-hero h1,
html[data-theme] .d1hero h1,
html[data-theme] body > main h1,
html[data-theme] .faq-hero h1,
html[data-theme] .spec-hero h1,
html[data-theme] .guide-hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 6.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
  font-weight: 500 !important;
}
html[data-theme] .dz-h2,
html[data-theme] h2:not(.dzb-name):not(.faq-question) {
  font-size: clamp(2rem, 4.4vw, 4.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
}
html[data-theme] .dz-h3, html[data-theme] h3 {
  font-size: clamp(1.375rem, 2.1vw, 2.1rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.024em !important;
}
html[data-theme] .dz-lead,
html[data-theme] .lp-hero .sub,
html[data-theme] .d1hero .sub,
html[data-theme] .faq-hero-sub,
html[data-theme] .spec-hero p,
html[data-theme] .guide-hero p {
  font-size: clamp(1.0625rem, 1.85vw, 1.85rem) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.014em !important;
  color: rgba(255,255,255,0.78) !important;
}

/* ── CENTRED AXIS ───────────────────────────────────────────── */
html[data-theme] .dz-section,
html[data-theme] .dz-section-header,
html[data-theme] .dz-cta,
html[data-theme] .spec-section-header,
html[data-theme] .faq-hero,
html[data-theme] .spec-hero,
html[data-theme] .guide-hero,
html[data-theme] .lp-hero,
html[data-theme] .d1hero-in {
  text-align: center;
}
html[data-theme] .dz-lead,
html[data-theme] .faq-hero-sub,
html[data-theme] .spec-hero p,
html[data-theme] .guide-hero p {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 46ch !important;
}
/* tables, forms and accordions stay left-read — centring a data row
   destroys the column scan. Only their headings sit on the axis. */
html[data-theme] .spec-table,
html[data-theme] .dz-table,
html[data-theme] table,
html[data-theme] form,
html[data-theme] .faq-answer p { text-align: left; }
html[data-theme] .dz-cta-actions,
html[data-theme] .dz-btn-row,
html[data-theme] .faq-filters { justify-content: center !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
html[data-theme] .dz-btn,
html[data-theme] .nav-cta-btn,
html[data-theme] .faq-filter-btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  border-radius: 3px !important;
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] .dz-btn-primary {
  background: #fff !important; color: #0e0d0d !important; border: 0 !important;
}
html[data-theme] .dz-btn-primary:hover { opacity: 0.82; }
html[data-theme] .dz-btn-ghost {
  background: transparent !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3) !important; border: 0 !important;
}

/* the one blue glass button — same as the homepage close */
html[data-theme] .dz-cta .dz-btn-primary,
html[data-theme] .lp-cta .dz-btn-primary {
  background: rgba(77,123,255,0.44) !important;
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  color: #fff !important;
  border-radius: 5px !important;
  padding: 1.05em 2.4em !important;
  min-height: 56px;
  box-shadow: inset 0 0 0 1px rgba(150,180,255,0.7),
              inset 0 1px 0 rgba(255,255,255,0.3),
              0 12px 40px rgba(77,123,255,0.26) !important;
  transition: background 0.25s, box-shadow 0.25s;
}
html[data-theme] .dz-cta .dz-btn-primary:hover,
html[data-theme] .lp-cta .dz-btn-primary:hover {
  opacity: 1;
  background: rgba(77,123,255,0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(175,200,255,0.85),
              inset 0 1px 0 rgba(255,255,255,0.36),
              0 16px 50px rgba(77,123,255,0.4) !important;
}

/* ── BUILDER: one card, glass control, no jump ──────────────── */
html[data-theme] .dzb {
  background: #141317;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 2.2em;
  grid-template-columns: minmax(0, 1.32fr) minmax(280px, 0.68fr);
  gap: 2.4em;
}
html[data-theme] .dzb-stage {
  background: radial-gradient(ellipse 78% 68% at 50% 42%, #201f24 0%, #171620 62%, #131218 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 5px !important;
  /* never aspect-ratio in the two-column layout — the grid stretches this to
     the panel height and the ratio would derive a width from it, overflowing
     the column and sliding under the panel */
  aspect-ratio: auto !important;
  /* dz.css sets an explicit height at <=1024px; leaving it in place means the
     mobile aspect-ratio derives a WIDTH from that height and overflows the card */
  height: auto !important;
  min-height: 0 !important; max-height: none !important;
  position: relative !important; top: auto !important; z-index: auto !important;
  padding: 2.2em; box-shadow: none !important;
}
html[data-theme] .dzb-stage canvas {
  filter: drop-shadow(0 34px 44px rgba(0,0,0,0.6));
}
html[data-theme] .dzb-panel {
  background: none !important; border: none !important; box-shadow: none !important;
  border-left: 1px solid rgba(255,255,255,0.1) !important;
  padding: 0.2em 0 0 2.4em !important;
  gap: 2em;
}
html[data-theme] .dzb-panel > * { order: 0; }   /* dz.css nth-of-type order is for a panel this isn't */

/* glass segmented control, blue active — matches the homepage switcher */
html[data-theme] .dzb-seg {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(50px) saturate(1.4);
  -webkit-backdrop-filter: blur(50px) saturate(1.4);
  border: 0 !important; border-radius: 5px !important; padding: 0 !important;
  overflow: hidden;
  display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16),
              inset 0 1px 0 rgba(255,255,255,0.14);
}
html[data-theme] .dzb-seg button {
  min-height: 48px; border-radius: 0 !important; background: none !important;
  color: rgba(255,255,255,0.62) !important; font-weight: 500;
}
html[data-theme] .dzb-seg button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,0.14); }
html[data-theme] .dzb-seg button.on { background: #4d7bff !important; color: #fff !important; }
html[data-theme] .dzb-seg .dot {
  width: 16px; height: 16px; border-radius: 5px; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(0,0,0,0.3);
}

/* rounded-square chips, three rows reserved so Top→Base never jumps */
html[data-theme] .dzb-sw {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 10px; margin-top: 1.1em;
  min-height: calc(3 * 46px + 2 * 10px);
  align-content: start;
}
html[data-theme] .dzb-sw button {
  position: relative; width: 100% !important; aspect-ratio: 1;
  height: auto !important; min-height: 46px; border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
              inset 0 0 0 1px rgba(0,0,0,0.28),
              0 2px 6px rgba(0,0,0,0.4) !important;
  transition: transform 0.24s cubic-bezier(.22,.68,.32,1), box-shadow 0.24s;
}
html[data-theme] .dzb-sw button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.14) 100%);
}
html[data-theme] .dzb-sw button:hover { transform: translateY(-2px); }
html[data-theme] .dzb-sw button.on {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
              inset 0 0 0 1px rgba(0,0,0,0.28),
              0 0 0 2px #0e0d0d, 0 0 0 3.5px #fff,
              0 4px 12px rgba(0,0,0,0.5) !important;
}
html[data-theme] .dzb-lab b { font-family: 'Outfit', sans-serif !important; text-transform: none !important; }
html[data-theme] .dzb-ctas {
  margin-top: auto; padding-top: 1.7em;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── FOOTER: centred stack with the wordmark ────────────────── */
html[data-theme] .dz-footer, html[data-theme] .site-footer, html[data-theme] footer {
  text-align: center;
}
html[data-theme] .dz-footer-grid, html[data-theme] .footer-grid {
  display: flex !important; flex-direction: column; align-items: center; gap: 2em;
}
html[data-theme] .dz-footer-links, html[data-theme] .footer-links {
  display: flex !important; justify-content: center; flex-wrap: wrap; gap: 2em;
}
html[data-theme] .dz-footer-bottom, html[data-theme] .footer-bottom {
  display: flex !important; justify-content: center; flex-wrap: wrap; gap: 1.6em;
  text-align: center;
}

@media (max-width: 980px) {
  html[data-theme] .dzb { grid-template-columns: 1fr !important; gap: 1.8em; padding: 1.4em 1.1em 1.6em; }
  html[data-theme] .dzb-panel { border-left: 0 !important; padding: 0 !important; }
  html[data-theme] .dzb-stage { aspect-ratio: 4 / 3 !important; height: auto !important; padding: 1.1em; }
  html[data-theme] .dzb-sw { min-height: calc(3 * 44px + 2 * 9px); gap: 9px; }
  html[data-theme] .dzb-sw button { min-height: 44px; }
}

/* ── CENTRING, PART 2 ───────────────────────────────────────────
   The interior heroes have no hero class — they are inline-styled
   <section>s wrapping .dz-wrap. So the wrapper carries the axis and
   the things that must stay left-read opt back out.
   ─────────────────────────────────────────────────────────────── */
html[data-theme] .dz-wrap,
html[data-theme] .wrap,
html[data-theme] .container { text-align: center; }

html[data-theme] .dzb,
html[data-theme] .dzb *,
html[data-theme] table, html[data-theme] table *,
html[data-theme] form, html[data-theme] form *,
html[data-theme] .faq-answer, html[data-theme] .faq-answer *,
html[data-theme] .dz-acc-body, html[data-theme] .dz-acc-body *,
html[data-theme] li { text-align: left; }

/* lists read better centred as a block but left-aligned internally */
html[data-theme] ul, html[data-theme] ol {
  display: inline-block; text-align: left; margin-left: auto; margin-right: auto;
}

/* the value strip and stat rows centre their own columns */
html[data-theme] .dz-value > div,
html[data-theme] .dz-stat,
html[data-theme] .dz-stats > div {
  text-align: center; border-left: 0 !important; padding-left: 0 !important;
}

/* ── KILL THE CONDENSED FACE ────────────────────────────────────
   dz.css/styles.css set Bebas Neue in ~12 places. The site is Outfit.
   ─────────────────────────────────────────────────────────────── */
html[data-theme] .dz-value b,
html[data-theme] .dz-stat .n,
html[data-theme] .dz-price, html[data-theme] .dzb-price,
html[data-theme] .dzb-name, html[data-theme] .dzb-badge, html[data-theme] .dzb-loading,
html[data-theme] .spec-card-value, html[data-theme] .spec-card-label,
html[data-theme] .stat-number, html[data-theme] .stat-label,
html[data-theme] .dz-nav-logo, html[data-theme] .nav-logo,
html[data-theme] caption, html[data-theme] th {
  font-family: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: -0.02em;
}
/* micro-labels stay mono, not condensed */
html[data-theme] .dzb-badge, html[data-theme] .dzb-loading,
html[data-theme] .dzb-seg-label, html[data-theme] .dzb-lab span,
html[data-theme] .spec-card-label, html[data-theme] .dzb-note {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  letter-spacing: 0.08em !important; text-transform: uppercase;
}
html[data-theme] .dz-value b, html[data-theme] .dz-stat .n {
  font-size: clamp(1.75rem, 3vw, 3rem) !important;
  font-weight: 500 !important; text-transform: none !important;
  line-height: 1 !important;
}
html[data-theme] .dz-value span, html[data-theme] .dz-stat .l {
  font-size: clamp(0.9375rem, 1.05vw, 1.05rem) !important;
  color: rgba(255,255,255,0.6) !important; text-transform: none !important;
  letter-spacing: -0.008em !important;
}

/* ── FIXES: things that must not be centred or inline-blocked ─── */
/* nav and footer lists are flex rows — the inline-block rule above
   collapsed them into a stack */
/* Restoring these to flex is only correct at desktop — an unconditional
   !important also beat the 900px rule that hides the links for the burger,
   so both were showing on phones. */
@media (min-width: 901px) {
  html[data-theme] .dz-nav-links,
  html[data-theme] .nav-links { display: flex !important; }
}
@media (max-width: 900px) {
  html[data-theme] .dz-nav-links,
  html[data-theme] .nav-links { display: none !important; }
}
html[data-theme] .menu-in,
html[data-theme] .dz-footer-links ul,
html[data-theme] .foot-links,
html[data-theme] .faq-filters {
  display: flex !important;
}
html[data-theme] .dz-nav-links, html[data-theme] .nav-links { text-align: left; }

/* the field bands cap their copy at an inline max-width, which leaves it
   pinned left inside a full-bleed image. Centre the block itself. */
html[data-theme] .dz-wrap > div[style*="max-width"] {
  margin-left: auto !important; margin-right: auto !important;
}
html[data-theme] .dz-wrap > div[style*="max-width"] p { margin-left: auto; margin-right: auto; }

/* ── v1 CONFLICTS ───────────────────────────────────────────────
   v1 built a left-aligned layout on an em scale off --d1-fs. Those
   rules sit on the same elements v2 centres, and an explicit
   text-align on a child always beats an inherited one from the
   wrapper — so they have to be named and reversed, not out-specified.
   ─────────────────────────────────────────────────────────────── */
html[data-theme] .dz-sec-head {
  max-width: 62ch !important;
  margin: 0 auto clamp(2rem, 3.4vw, 3.4rem) !important;
  text-align: center !important;
}
/* nav sits left, logo then links — same as the homepage. Centring it ran the
   links into the right-aligned hero headline on the landing pages. */
html[data-theme] .dz-nav-in { justify-content: flex-start !important; }
html[data-theme] .dz-cta .dz-h2 {
  font-size: clamp(2.25rem, 5vw, 5rem) !important;
}
/* the landing-page hero heading was pinned top-right off the old scale */
html[data-theme] .d1hero-head {
  position: absolute; left: var(--d1-cush); right: var(--d1-cush);
  top: auto; bottom: 14%; text-align: center !important;
}
html[data-theme] .d1hero-head h1 {
  font-size: clamp(2.5rem, 6.4vw, 6.4rem) !important;
  line-height: 0.96 !important; letter-spacing: -0.03em !important;
}
html[data-theme] .d1hero-head .sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.6rem) !important;
  margin-left: auto; margin-right: auto; max-width: 46ch;
}
html[data-theme] .menu-in a { font-size: clamp(2rem, 5.4vw, 5.4rem) !important; }
html[data-theme] .specs-hero-meta,
html[data-theme] .guide-hero-meta,
html[data-theme] .care-hero-meta,
html[data-theme] .faq-hero-meta {
  font-size: clamp(1.25rem, 2vw, 2rem) !important;
}

@media (max-width: 760px) {
  html[data-theme] .dz-sec-head { max-width: none !important; }
  html[data-theme] .d1hero-head { bottom: 12%; }
}

/* ── SHARED FOOTER (ported from the homepage) ───────────────── */
html[data-theme] .foot {
  background: #0e0d0d; border-top: 1px solid rgba(255,255,255,0.12);
  padding: 5em var(--d1-cush) 2.6em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
html[data-theme] .foot-mark { display: block; margin-bottom: 2.6em; }
html[data-theme] .foot-mark img { width: 23em; max-width: 78vw; height: auto; display: block; }
html[data-theme] .foot-links {
  display: flex !important; justify-content: center; gap: 2em; flex-wrap: wrap;
  font-size: clamp(0.9375rem, 1.15vw, 1.15rem);
}
html[data-theme] .foot a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
html[data-theme] .foot a:hover { color: #fff; }
html[data-theme] .foot-ph {
  margin-top: 2em; color: #fff !important;
  font-size: clamp(1.25rem, 2.1vw, 2.1rem); font-weight: 500; letter-spacing: -0.024em;
}
html[data-theme] .foot-fine {
  margin-top: 3.2em; padding-top: 1.6em; width: 100%;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: center; gap: 1.6em; flex-wrap: wrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
/* the dz.css-family footer gets the same centred stack */
html[data-theme] .dz-footer-main {
  display: flex !important; flex-direction: column; align-items: center; gap: 1.4em;
}
/* v1 hid this outright — the dz.css-family footers had no wordmark at all */
html[data-theme] .dz-footer-main img {
  display: block !important;
  width: 23em; max-width: 78vw; height: auto; margin: 0 auto;
}

/* ── SHARED CLOSE (ported from the homepage) ────────────────── */
html[data-theme] .cta {
  background: #0e0d0d; padding: 9em var(--d1-cush) 7em; text-align: center;
}
html[data-theme] .cta-lede {
  margin: 0 auto; max-width: 42ch;
  font-size: clamp(1.75rem, 3.2vw, 3.2rem); line-height: 1.15;
  font-weight: 500; letter-spacing: -0.028em; color: #fff;
}
html[data-theme] .cta .cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2.6em; font-family: 'Outfit', sans-serif;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem); font-weight: 500;
  padding: 1.05em 2.4em; border-radius: 5px; min-height: 56px;
  background: rgba(77,123,255,0.44); color: #fff;
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(150,180,255,0.7),
              inset 0 1px 0 rgba(255,255,255,0.3),
              0 12px 40px rgba(77,123,255,0.26);
  transition: background 0.25s, box-shadow 0.25s;
}
html[data-theme] .cta .cta-btn:hover {
  background: rgba(77,123,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(175,200,255,0.85),
              inset 0 1px 0 rgba(255,255,255,0.36),
              0 16px 50px rgba(77,123,255,0.4);
}
html[data-theme] .cta .ar { margin-left: 0.55em; display: inline-block; transition: transform 0.3s cubic-bezier(.22,.68,.32,1); }
html[data-theme] .cta .cta-btn:hover .ar { transform: translateX(5px); }

/* ── NAV: no bar, anywhere. The homepage rule, site-wide. ───── */
html[data-theme] .nav, html[data-theme] .dz-nav {
  background: transparent !important; border: none !important;
  box-shadow: none !important; backdrop-filter: none !important;
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 50;
}
html[data-theme] .nav-cta-btn {
  background: transparent !important; color: rgba(255,255,255,0.86) !important;
  border: 0 !important; padding: 0 !important; min-height: 0;
  font-size: inherit !important; text-transform: none !important;
  letter-spacing: -0.012em !important;
}
html[data-theme] .nav-links a { text-transform: none !important; letter-spacing: -0.012em !important; }

/* ── LAST PASS ──────────────────────────────────────────────── */
/* styles.css uppercases every button; the system is sentence case */
html[data-theme] .cta .cta-btn,
html[data-theme] .btn, html[data-theme] .dz-btn {
  text-transform: none !important;
}
/* section headers are flex rows in both dz.css and styles.css, which
   pins the heading left no matter what the parent's text-align says */
html[data-theme] .spec-section-header,
html[data-theme] .dz-section-header,
html[data-theme] .section-header,
html[data-theme] .guide-section-header {
  display: block !important; text-align: center !important;
  max-width: 62ch; margin-left: auto; margin-right: auto;
}
/* card grids: centre the copy inside each card */
html[data-theme] .spec-card, html[data-theme] .dz-feat,
html[data-theme] .dz-card, html[data-theme] .care-card { text-align: center; }
/* table captions sit above a left-read table — centre them */
html[data-theme] caption { text-align: center !important; }
/* any row of buttons under a centred hero */
html[data-theme] .hero-actions, html[data-theme] .guide-hero-actions,
html[data-theme] .hero-cta, html[data-theme] .btn-row,
html[data-theme] .dz-hero-actions {
  display: flex !important; justify-content: center; flex-wrap: wrap; gap: 0.8em;
}

/* the wordmark was sized in em off the collapsing root — fixed size on phones */
@media (max-width: 900px) {
  html[data-theme] .dz-nav-logo img,
  html[data-theme] .nav-logo img { width: clamp(120px, 34vw, 170px) !important; height: auto; }
  html[data-theme] .dz-nav-in, html[data-theme] .nav-inner,
  html[data-theme] .nav .container { justify-content: flex-start !important; }
}

@media (max-width: 760px) {
  /* the landing hero bar is a nowrap row that runs off the right edge on a
     phone, and the fixed bottom action bar already carries the same two CTAs */
  html[data-theme] .d1hero-bar { display: none !important; }
  html[data-theme] .d1hero-head { bottom: 18%; }
}

/* ══ LANDING HEROES — same placement as the homepage hero ══════
   Top-right, ghosted, masked lines. day1-run runs the headline at
   low opacity and drops a solid line underneath it; where a hero
   needs a third line, mark that <i class="solid"> and it reads
   full white against the two ghosted ones above.
   ══════════════════════════════════════════════════════════════ */
html[data-theme] .d1hero-head {
  position: absolute;
  top: calc(1.9 * var(--d1-fs)); right: var(--d1-cush);
  left: auto; bottom: auto;
  text-align: right !important;
  max-width: 92vw;
}
html[data-theme] .d1hero-head .d1d {
  font-size: clamp(3.25rem, 8.6vw, 8.6rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.028em !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.34) !important;
  margin: 0;
}
/* the masked line — same reveal the homepage headlines use */
html[data-theme] .d1hero-head .ln {
  display: block; overflow: hidden;
  padding-bottom: 0.18em; margin-bottom: -0.18em;
}
html[data-theme] .d1hero-head .ln > i {
  display: block; font-style: normal; will-change: transform;
}
/* the one solid line under the ghosted ones */
/* day-one-run pattern: ghosted lines set the scene, the last line lands solid.
   The ghost has to sit well back or the solid line has nothing to pop against. */
html[data-theme] .d1hero-head .ln > i.solid {
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.034em !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme] .d1hero-head .ln:has(> i.solid) { margin-top: 0.06em; }

/* the sub sits under the headline, still right-aligned */
html[data-theme] .d1hero-head .sub {
  margin: 0.9em 0 0 auto !important;
  max-width: 34ch;
  color: rgba(255,255,255,0.72) !important;
  text-align: right !important;
}

@media (max-width: 760px) {
  /* exactly where the homepage puts it: high in the frame against the sky.
     Sitting it low over the pit washed the ghosted grey out completely. */
  html[data-theme] .d1hero-head {
    top: 17%; bottom: auto; left: var(--d1-cush); right: var(--d1-cush);
    text-align: right !important;
  }
  html[data-theme] .d1hero-head .d1d { font-size: clamp(2.1rem, 10.1vw, 4rem) !important; }
  html[data-theme] .d1hero-head .ln { padding-top: 0.08em; margin-top: -0.08em; }
  html[data-theme] .d1hero-head .sub { text-align: right !important; margin-left: auto !important; }
}


/* ── NAV: links sit next to the logo, no separators ──────────────
   dz.css lays .dz-nav-in out as space-between, which threw the list
   to the far right no matter what justify-content said. Pin the
   margin instead of relying on the container.
   ─────────────────────────────────────────────────────────────── */
html[data-theme] .dz-nav-links,
html[data-theme] .nav-links {
  margin-left: clamp(1.75rem, 3.6vw, 3.6rem) !important;
  margin-right: auto !important;
  gap: clamp(1.5rem, 2.4vw, 2.4rem) !important;
  align-items: baseline;
}
html[data-theme] .dz-nav-links li::after,
html[data-theme] .nav-links li::after { content: none !important; }

html[data-theme] .dz-nav-links a,
html[data-theme] .nav-links a { position: relative; }
html[data-theme] .dz-nav-links a::after,
html[data-theme] .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.38s cubic-bezier(.22,.68,.32,1);
}
html[data-theme] .dz-nav-links a:hover::after,
html[data-theme] .nav-links a:hover::after { transform: scaleX(1); }

/* styles.css centres its nav inside a max-width container and sizes the CTA
   link larger than its siblings — both break the match with the homepage */
html[data-theme] .nav .container,
html[data-theme] .nav-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: var(--d1-cush) var(--d1-cush) calc(0.6 * var(--d1-fs)) !important;
  display: flex !important; align-items: center; justify-content: flex-start !important;
}
html[data-theme] .nav-links a,
html[data-theme] .nav-links a.nav-cta-btn {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important; border: none !important;
  padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
html[data-theme] .nav-links a:hover,
html[data-theme] .nav-links a.nav-cta-btn:hover { background: none !important; color: #fff !important; }

/* ── PRODUCT-PAGE FILM WALL ────────────────────────────────────────
   Replaces the SVG icon grid on high-jump / pole-vault. Same language
   as the homepage mosaic (video + type, caption over footage) but a
   plain 3-col grid — these pages don't load GSAP, so no scrub drift. */
html[data-theme] .pw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 auto; max-width: 1240px;
}
html[data-theme] .pw-t {
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 4 / 5;
  background-color: #0d0d10;
  background-position: var(--fit, center);
  background-size: cover; background-repeat: no-repeat;
  opacity: 0; transform: translateY(18px);
}
html[data-theme] .pw-t.on {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.22,.68,.32,1);
}
html[data-theme] .pw-t video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fit, center);
  opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.22,.68,.32,1);
}
html[data-theme] .pw-t.rolling video { opacity: 1; }
html[data-theme] .pw-t:hover video { transform: scale(1.05); }
/* legibility scrim under the caption */
html[data-theme] .pw-t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
html[data-theme] .pw-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5em 1.35em 1.25em; text-align: left;
}
html[data-theme] .pw-cap-h {
  display: block; color: #fff; font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 2rem); line-height: 1.02;
  letter-spacing: -0.028em;
}
html[data-theme] .pw-cap-s {
  display: block; margin-top: .5em; color: rgba(255,255,255,.72);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
}
@media (max-width: 900px) {
  html[data-theme] .pw-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  html[data-theme] .pw-grid { grid-template-columns: 1fr; }
  html[data-theme] .pw-t { aspect-ratio: 16 / 10; }
}

/* ── PRODUCT-PAGE STATS BAND ─────────────────────────────────────── */
html[data-theme] .pw-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; max-width: 1240px; margin: 10px auto 0;
}
html[data-theme] .pw-stat {
  border-radius: 8px; background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  padding: 2.1em 1.4em; text-align: center;
}
html[data-theme] .pw-stat b {
  display: block; font-weight: 500; color: #fff;
  font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1;
  letter-spacing: -0.035em;
}
html[data-theme] .pw-stat span {
  display: block; margin-top: .7em; color: rgba(255,255,255,.6);
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
}
@media (max-width: 560px) {
  html[data-theme] .pw-stats { grid-template-columns: 1fr; }
  html[data-theme] .pw-stat { padding: 1.5em 1.2em; }
}

/* ── PRODUCT-PAGE HERO: same shell as the landing heroes, still image ── */
html[data-theme] .d1hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ── LOGOS ─────────────────────────────────────────────────────────── */
html[data-theme] .pw-logos { max-width: 40ch; margin: 0 auto; text-align: center; }
html[data-theme] .pw-logos h2 {
  color: #fff; font-weight: 500; margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1;
  letter-spacing: -0.034em;
}
html[data-theme] .pw-logos > p {
  color: rgba(255,255,255,.62); margin: .9em auto 0;
  font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6;
}
html[data-theme] .pw-logos-c {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 2em;
}
html[data-theme] .pw-logos-c a {
  display: inline-flex; align-items: center; min-height: 58px;
  padding: 0 1.9em; border-radius: 5px; color: #fff !important;
  font-size: clamp(1rem, 1.2vw, 1.15rem); letter-spacing: -0.012em;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: background .3s ease, box-shadow .3s ease;
}
html[data-theme] .pw-logos-c a:hover {
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
html[data-theme] .pw-logos-f {
  color: rgba(255,255,255,.45); margin-top: 1.5em;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
}
@media (max-width: 560px) {
  html[data-theme] .pw-logos-c { flex-direction: column; }
  html[data-theme] .pw-logos-c a { justify-content: center; }
}

/* Still-image heroes sit under a bright sky where the ghosted lines land, so the
   stock scrim isn't enough — pole vault washed out completely at 390px. */
html[data-theme] .d1hero::after {
  background:
    radial-gradient(ellipse 62% 50% at 74% 16%, rgba(10,10,12,0.52) 0%, rgba(10,10,12,0) 100%),
    linear-gradient(180deg, rgba(14,13,13,0.46) 0%, rgba(14,13,13,0.06) 38%, rgba(14,13,13,0.38) 100%);
}
/* (the mobile hero scrim lives in the MOBILE SCRIM block further down —
   an earlier duplicate here was dead, overridden by that !important rule) */

/* ── PRODUCT HERO = HOMEPAGE HERO ─────────────────────────────────────
   Measured off home.css: .hero is 100svh/600 with the headline at
   clamp(3.75rem,8.6vw,8.6rem) and NO mobile size override, plus a caption
   block low on the frame. The product heroes were 88svh/540 at a smaller
   clamp with a 4rem mobile cap and no caption — that gap is why they read
   as a different site. */
html[data-theme] .d1hero { height: 100svh; min-height: 600px; }

html[data-theme] .d1hero .d1hero-head .d1d {
  font-size: clamp(3.75rem, 8.6vw, 8.6rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.028em !important;
}

/* caption low on the frame, same as .hero-cap */
/* sits below the pit, not on it — at 12% it landed straight on the end-panel
   team mark in the new high jump film */
html[data-theme] .d1hero-cap {
  position: absolute; left: 9vw; bottom: 4.5%; z-index: 2;
  text-align: center;
}
html[data-theme] .d1hero-cap .bod {
  display: block; font-weight: 400; line-height: 1.35; color: #fff;
  font-size: clamp(1.0625rem, 1.4vw, 1.4rem);
}
html[data-theme] .d1hero-cap .bod + .bod {
  color: rgba(255,255,255,.62); margin-top: 0.25em;
}

@media (max-width: 760px) {
  html[data-theme] .d1hero { min-height: 560px; }
  /* homepage deliberately does NOT shrink its headline on mobile */
  html[data-theme] .d1hero .d1hero-head .d1d {
    font-size: clamp(3.75rem, 8.6vw, 8.6rem) !important;
  }
  html[data-theme] .d1hero-cap {
    left: 0; right: 0; bottom: 15%; text-align: center;
  }
  html[data-theme] .d1hero-cap .bod + .bod { color: #fff; margin-top: 0.1em; }
}

/* ── LOGO MARQUEE ──────────────────────────────────────────────────
   Two counter-scrolling rows, full-bleed, masked at both edges so the
   track reads as endless rather than as a list that starts and stops.
   Monochrome by default — these are illustrations of capability, not a
   client wall, and colour would borrow equity that isn't ours. */
html[data-theme] .pw-logo-sec { overflow: hidden; }
html[data-theme] .lgmq { margin: 3.6em 0 3.2em; }
html[data-theme] .lgmq-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
html[data-theme] .lgmq-row + .lgmq-row { margin-top: 1.9em; }
html[data-theme] .lgmq-track {
  display: flex; align-items: center; width: max-content;
  gap: clamp(2.6rem, 4.6vw, 4.6rem);
  padding-right: clamp(2.6rem, 4.6vw, 4.6rem);
  animation: lgmqScroll 52s linear infinite;
  will-change: transform;
}
html[data-theme] .lgmq-row.rev .lgmq-track {
  animation-duration: 66s; animation-direction: reverse;
}
@keyframes lgmqScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

html[data-theme] .lgmq img {
  height: clamp(48px, 5.6vw, 72px); width: auto; flex: none;
  opacity: 0.9;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,.68,.32,1);
}
html[data-theme] .lgmq img:hover { opacity: 1; transform: scale(1.16); }
/* let the eye settle on one mark instead of chasing the row */
html[data-theme] .lgmq-row:hover .lgmq-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .lgmq-track { animation: none; }
  html[data-theme] .lgmq-row { overflow-x: auto; }
}

html[data-theme] .pw-tm {
  max-width: 58ch; margin: 2.4em auto 0;
  color: rgba(255,255,255,.28);
  font-size: 11px; line-height: 1.6; letter-spacing: .02em;
  text-transform: none;
}

/* ── LGX: the logo band, rebuilt ─────────────────────────────────────
   Full-bleed tilted three-row marquee, velocity-reactive (lgx.js).
   Replaces the flat two-row lgmq version. */
html[data-theme] .lgx {
  overflow: hidden; position: relative;
  padding: clamp(5rem, 11vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
}
html[data-theme] .lgx-head {
  text-align: center; padding: 0 var(--d1-cush);
  position: relative; z-index: 3;
}
html[data-theme] .lgx-head h2 {
  color: #fff; font-weight: 500; margin: 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.96; letter-spacing: -0.034em;
}
/* each line clips inside its own row — a shared h2 mask lets a displaced
   line 1 sit on line 2's slot instead of hiding */
html[data-theme] .lgx-head h2 span.lm {
  display: block; overflow: hidden;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
html[data-theme] .lgx-head h2 span.ghost { color: rgba(255,255,255,0.32); }
html[data-theme] .lgx-head h2 i {
  display: inline-block; font-style: normal; will-change: transform;
}

html[data-theme] .lgx-band {
  margin: clamp(2.8rem, 7vh, 5rem) 0;
  transform: rotate(-3deg) scale(1.08);
  will-change: transform;
}
html[data-theme] .lgx-row { overflow: hidden; padding: 0.6rem 0; }
html[data-theme] .lgx-track {
  display: flex; align-items: center; width: max-content;
  gap: clamp(2.6rem, 4.2vw, 4.4rem);
  padding-right: clamp(2.6rem, 4.2vw, 4.4rem);
  will-change: transform;
}
html[data-theme] .lgx img {
  height: clamp(54px, 6.2vw, 86px); width: auto; flex: none;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5));
  transition: transform 0.5s cubic-bezier(.22,.68,.32,1);
}
html[data-theme] .lgx img:hover { transform: scale(1.16) rotate(2.5deg); }
/* middle row runs smaller, dimmer and the other way — cheap depth */
html[data-theme] .lgx-row.mid img {
  height: clamp(38px, 4.4vw, 62px); opacity: 0.45;
}

html[data-theme] .lgx-foot {
  position: relative; z-index: 3; text-align: center;
  padding: 0 var(--d1-cush); max-width: 46ch; margin: 0 auto;
}
html[data-theme] .lgx-sub {
  color: rgba(255,255,255,0.62); margin: 0 0 2em;
  font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6;
}

@media (max-width: 760px) {
  html[data-theme] .lgx-band { transform: rotate(-2deg) scale(1.1); }
  html[data-theme] .lgx-row.mid { display: none; }
  html[data-theme] .lgx img { height: 48px; }
}

/* ── INCLUDED band (landing pages) ─────────────────────────────────── */
html[data-theme] .incb { background: rgba(255,255,255,0.025); }
html[data-theme] .incb-h {
  color: #fff; font-weight: 500; text-align: center; margin: 0 0 1.4em;
  font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
}
html[data-theme] .incb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; max-width: 1000px; margin: 0 auto;
}
html[data-theme] .incb-c {
  border-radius: 8px; background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  padding: 1.9em 1.4em; text-align: center;
}
html[data-theme] .incb-c b {
  display: block; color: #fff; font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -0.015em;
}
html[data-theme] .incb-c span {
  display: block; margin-top: 0.8em; color: #7fd67f;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
html[data-theme] .incb-q {
  max-width: 58ch; margin: 2.6em auto 0; text-align: center;
  color: rgba(255,255,255,0.6); line-height: 1.7;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
}
@media (max-width: 700px) {
  html[data-theme] .incb-grid { grid-template-columns: 1fr; }
}


/* ── MOBILE HERO LEGIBILITY + no sticky CTA bar (Daniel, phone review) ──
   The desktop scrim is a radial aimed at the upper right, which does nothing
   for a phone-width headline sitting over a bright sky. Replace it on small
   screens with a top-weighted linear scrim and give the ghosted lines enough
   presence to actually read. */
@media (max-width: 760px) {
  /* The scrim used to drop 0.42 → 0.12 across 40–60% of the frame. That
     ramp is steep enough to render as a hard horizontal edge, and it landed
     right at the headline baseline — reading as a shadow line around the
     text. Same total darkness, spread over many stops so no single band
     changes fast enough for the eye to catch. */
  html[data-theme] .d1hero::after {
    background:
      linear-gradient(180deg,
        rgba(10,10,12,0.66) 0%,
        rgba(10,10,12,0.61) 12%,
        rgba(10,10,12,0.54) 24%,
        rgba(10,10,12,0.45) 35%,
        rgba(10,10,12,0.36) 45%,
        rgba(10,10,12,0.28) 55%,
        rgba(10,10,12,0.22) 65%,
        rgba(10,10,12,0.22) 74%,
        rgba(10,10,12,0.32) 85%,
        rgba(10,10,12,0.48) 94%,
        rgba(10,10,12,0.58) 100%) !important;
  }
  /* THE HARD LINE, actually found: .ln carries `overflow: hidden` (a mask
     for a line-reveal animation that is not wired up on these pages), so a
     wide text-shadow blur gets CLIPPED at the line box — rendering as a
     hard-edged rectangle around each line. Unclip it, and keep the shadow
     tight enough that it could never draw a box even if something else
     clips it later. */
  html[data-theme] .d1hero-head .ln { overflow: visible !important; }
  html[data-theme] .d1hero-head .d1d,
  html[data-theme] .d1hero-head .ln > i {
    color: rgba(255,255,255,0.66) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  }
  html[data-theme] .d1hero-head .ln > i.solid {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  /* sticky mobile call bar removed */
  .lp-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
}


/* ── LANDING HEROES: longer headlines need room the homepage doesn't ──
   The shared rule pins the headline at top:1.9fs / max-width:92vw, which
   suits a two-word homepage line. A landing headline like
   "Pole vault from $14,500." at that size runs edge to edge and stacks
   straight into the nav. Centre it in the frame and cap the measure. */
/* DESKTOP ONLY. Mobile keeps the shared rule Daniel signed off on — the
   only mobile change that stays is the scrim + ghost opacity above. */



/* ── LOGO WALL — dense ring, type punched through the middle ─────────
   8 x 6 grid. The headline is placed across the centre block; 24 logos
   auto-flow into the ring, so spacing is even by construction.
   Motion lives in lgw.js: staggered blur-up entrance, then a cursor
   proximity field (logos brighten and lift by distance, smoothstep
   falloff). Nothing scrolls, nothing loops. */
html[data-theme] .lgw {
  --lgw-gap: clamp(0.3rem, 0.65vw, 0.72rem);
  max-width: 1400px;
  width: calc(100% - 2 * var(--d1-cush, 24px));
  margin: clamp(1.2rem, 2.6vw, 2.2rem) auto 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: var(--lgw-gap);
  place-items: center;
}
html[data-theme] .lgw > .lgx-head {
  grid-column: 2 / 7;
  grid-row: 2 / 6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  margin: 0; padding: 0 1rem;
  z-index: 2;
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
}
html[data-theme] .lgw .lgw-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(0.7rem, 0.86vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
html[data-theme] .lgw > .lgx-head h2 { margin: 0; }
html[data-theme] .lgw .lgw-rule {
  display: block; width: 46px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--accent, #2f6bff) 50%, rgba(255,255,255,0) 100%);
  opacity: 0; transform: scaleX(0.2);
  transition: opacity .7s ease .5s, transform .9s cubic-bezier(.2,.7,.2,1) .5s;
}
html[data-theme] .lgw.in .lgw-rule { opacity: 1; transform: scaleX(1); }

/* logos — quiet by default, the proximity field does the rest */
html[data-theme] .lgw > img {
  height: clamp(54px, 6.4vw, 108px);
  width: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition: opacity .62s cubic-bezier(.2,.7,.2,1),
              filter   .62s cubic-bezier(.2,.7,.2,1),
              transform .42s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
html[data-theme] .lgw.in > img {
  opacity: 0.4;
  filter: blur(0);
  transform: translateY(0);
}
/* once the entrance has played, hover dims the rest of the wall */
html[data-theme] .lgw.ready:hover > img { opacity: 0.22; }

@media (max-width: 900px) {
  html[data-theme] .lgw {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, auto);
    --lgw-gap: 0.5rem;
  }
  html[data-theme] .lgw > .lgx-head { grid-column: 1 / 5; grid-row: 4 / 6; padding: 1.4rem 0.5rem; }
  html[data-theme] .lgw > img { height: clamp(44px, 10vw, 68px); }
  html[data-theme] .lgw.in > img { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .lgw > img,
  html[data-theme] .lgw .lgw-rule { transition: none; }
}

/* breathing room before the contact block */
html[data-theme] .lgx-foot { margin-top: clamp(2.6rem, 5vw, 4.4rem); }


/* ── LOGO WALL v2 — brighter marks, real display type, buttons with weight ──
   Daniel: "logos are too dark... text could be larger or just better
   typography... buttons stand out more... too much is dark and small." */

/* marks sit up, not buried */
html[data-theme] .lgw.in > img { opacity: 0.82; }
html[data-theme] .lgw.ready:hover > img { opacity: 0.4; }

/* a soft pool of light behind the type so the centre isn't a black hole */
html[data-theme] .lgw > .lgx-head { position: relative; }
html[data-theme] .lgw > .lgx-head::before {
  content: ""; position: absolute; inset: -22% -14%;
  background: radial-gradient(ellipse 60% 58% at 50% 50%,
              rgba(47,107,255,0.13) 0%, rgba(47,107,255,0.05) 42%, rgba(0,0,0,0) 72%);
  pointer-events: none; z-index: -1;
}

/* eyebrow — accent, wider tracking, a touch larger */
html[data-theme] .lgw .lgw-eyebrow {
  font-size: clamp(0.76rem, 0.94vw, 0.92rem);
  letter-spacing: 0.42em;
  color: var(--accent-ink, #7aa2ff);
  opacity: 0.9;
}

/* the display lockup — this is the piece that was too small */
html[data-theme] .lgw > .lgx-head h2 {
  font-size: clamp(3.1rem, 6.6vw, 7rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.035em !important;
  font-weight: 500 !important;
}
html[data-theme] .lgw > .lgx-head .lm > i {
  color: #fff !important;
  font-weight: 600 !important;
}
/* second line reads as a gradient rather than flat grey */
html[data-theme] .lgw > .lgx-head .lm.ghost > i {
  font-weight: 300 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.38) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
html[data-theme] .lgw .lgw-rule {
  width: 74px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(122,162,255,0) 0%, var(--accent-ink, #7aa2ff) 50%, rgba(122,162,255,0) 100%);
}

/* contact buttons — one primary, one ghost, both bigger */
html[data-theme] .lgx-foot .pw-logos-c { gap: 14px; margin-top: 2.4em; }
html[data-theme] .lgx-foot .pw-logos-c a {
  min-height: 66px;
  padding: 0 2.3em;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background .28s ease, box-shadow .28s ease, transform .28s ease;
}
html[data-theme] .lgx-foot .pw-logos-c a:first-child {
  background: var(--accent, #1a47c8);
  box-shadow: 0 10px 34px rgba(26,71,200,0.34), inset 0 0 0 1px rgba(255,255,255,0.12);
}
html[data-theme] .lgx-foot .pw-logos-c a:first-child:hover {
  background: #2f6bff;
  box-shadow: 0 14px 44px rgba(47,107,255,0.46), inset 0 0 0 1px rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
html[data-theme] .lgx-foot .pw-logos-c a:last-child {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26);
}
html[data-theme] .lgx-foot .pw-logos-c a:last-child:hover {
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.44);
  transform: translateY(-2px);
}

/* supporting line — lift it out of the murk */
html[data-theme] .lgx-foot .lgx-sub {
  color: rgba(255,255,255,0.74);
  font-size: clamp(1.02rem, 1.28vw, 1.22rem);
}

@media (max-width: 900px) {
  html[data-theme] .lgw.in > img { opacity: 0.86; }
  html[data-theme] .lgw > .lgx-head h2 { font-size: clamp(2.5rem, 11vw, 3.6rem) !important; }
}


/* ── LANDING FILM STRIP — six tiles, campaign-matched captions ────────
   The homepage wall is a dense masonry quilt; a landing page wants a
   clean 3x2 that reads in one pass and gets out of the way. Poster is
   painted on the figure so a tile is never black; mz.js fades the clip
   in once it's actually rolling. */
html[data-theme] .lpz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  max-width: 1240px;
  margin: clamp(1.6rem, 3vw, 2.6rem) auto 0;
}
html[data-theme] .lpz .mz-t {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-size: cover; background-position: center;
  margin: 0;
}
html[data-theme] .lpz .mz-t video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
html[data-theme] .lpz .mz-t.rolling video { opacity: 1; }
html[data-theme] .lpz .mz-t::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,12,0) 42%, rgba(8,9,12,0.82) 100%);
}
html[data-theme] .lpz .mz-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  display: flex; flex-direction: column; gap: 0.16em;
  text-align: left;
}
html[data-theme] .lpz .mz-cap-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  color: #fff; line-height: 1.1;
}
html[data-theme] .lpz .mz-cap-s {
  font-size: clamp(0.84rem, 1.02vw, 0.95rem);
  color: rgba(255,255,255,0.72); line-height: 1.3;
}
@media (max-width: 860px) {
  html[data-theme] .lpz { grid-template-columns: repeat(2, 1fr); }
}
/* ── INCLUDED as a strip, not a section ──────────────────────────────
   Four things are included. That's a fact worth stating once in a line,
   not a full-height section with three cards restating it. */
html[data-theme] .incs {
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.022);
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
}
html[data-theme] .incs ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
}
html[data-theme] .incs li {
  position: relative;
  padding-left: 1.35em;
  font-size: clamp(0.94rem, 1.1vw, 1.04rem);
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}
html[data-theme] .incs li + li { margin-left: clamp(0.3rem, 1.2vw, 1rem); }
html[data-theme] .incs li::before {
  content: "✓"; position: absolute; left: 0;
  color: #4ade80; font-weight: 700; font-size: 0.92em;
}
html[data-theme] .incs .incs-lab {
  text-align: center; margin: 0 0 0.6em;
  font-size: clamp(0.82rem, 0.96vw, 0.92rem);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.44);
}
@media (max-width: 620px) {
  html[data-theme] .incs ul { gap: 0.4rem 0.9rem; }
  html[data-theme] .incs li { font-size: 0.88rem; white-space: normal; }
}

/* mobile: keep the tiles SQUARE and two across — full-width strips
   turn six tiles into six screens of scrolling */
@media (max-width: 860px) {
  html[data-theme] .lpz { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  html[data-theme] .lpz { gap: 6px; }
  html[data-theme] .lpz .mz-t { border-radius: 9px; }
  html[data-theme] .lpz .mz-cap { padding: 0.6rem 0.55rem; }
  html[data-theme] .lpz .mz-cap-h { font-size: 0.9rem; letter-spacing: 0.02em; }
  html[data-theme] .lpz .mz-cap-s { font-size: 0.72rem; line-height: 1.25; }
}

/* ── LP MOBILE PASS (rev 9) ──────────────────────────────────────
   1. Mosaic captions read bigger on a phone — the labels are the copy.
   2. The embedded builder fits ONE phone screen: badge/spec/note are
      desktop furniture, the stage flattens, rows tighten. Scoped to
      .dzb-lp (the four landing pages) so product pages keep the full
      builder. */
@media (max-width: 860px) {
  html[data-theme] .lpz .mz-cap-h { font-size: 1.24rem; }
  html[data-theme] .lpz .mz-cap-s { font-size: 0.82rem; }
}
@media (max-width: 760px) {
  html[data-theme] .dzb-lp { gap: 1.1em; padding: 1.1em 0.9em 1.2em; }
  /* the render ships with built-in margins — zero the stage padding and
     zoom slightly past them so the pit fills the frame */
  html[data-theme] .dzb-lp .dzb-stage { aspect-ratio: 4 / 3 !important; padding: 0 !important; overflow: hidden; }
  html[data-theme] .dzb-lp .dzb-stage canvas { transform: scale(1.18); }
  html[data-theme] .dzb-lp .dzb-badge,
  html[data-theme] .dzb-lp .dzb-spec,
  html[data-theme] .dzb-lp .dzb-note { display: none; }
  html[data-theme] .dzb-lp .dzb-panel { gap: 1em; }
  html[data-theme] .dzb-lp .dzb-seg button { min-height: 44px; }
  html[data-theme] .dzb-lp .dzb-sw { margin-top: 0.7em; min-height: calc(2 * 44px + 9px); gap: 9px; }
  html[data-theme] .dzb-lp .dzb-sw button { min-height: 44px; }
  html[data-theme] .dzb-lp .dzb-ctas { padding-top: 1em; }
}
@media (max-width: 460px) {
  html[data-theme] .lpz .mz-cap-h { font-size: 1.1rem; letter-spacing: 0.02em; }
  html[data-theme] .lpz .mz-cap-s { font-size: 0.75rem; }
}

/* ── MOBILE DESIGN PASS 2 (Daniel, 2026-08-23) ──────────────────
   Phone findings: hero lines read grey and gapped; the big ghost
   section labels compete with the real headings; sections carry a
   desktop's worth of dead black between them. */
@media (max-width: 760px) {
  /* 1. Hero: the signed-off ghost look stays exactly as it was —
     it just sits HIGHER in the frame (Daniel, 2026-08-23). */
  html[data-theme] .d1hero-head { top: 10%; bottom: auto; }

  /* 2. Section labels: blue eyebrow in the same Outfit voice as the
     headers — larger, weightier, letterspaced. */
  .dz-tag, .pp-kick, .hz-kick, .faq-hero-meta, .faq-category-label,
  .specs-hero-meta, .guide-hero-meta, .care-hero-meta {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(1.05rem, 4.1vw, 1.3rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #4d7bff !important;
    background: none !important;
    padding: 0 !important;
  }
  html[data-theme] .dz-sec-head { margin-bottom: 1.5rem !important; }
  html[data-theme] .dz-sec-head .dz-tag { display: inline-block; margin-bottom: 0.8em; }

  /* 3. Sections breathe at phone scale — roughly half the desktop cushion */
  .dz-section { padding: calc(3.4 * var(--d1-fs)) 0 !important; }
}

/* ── MOBILE DESIGN PASS 3 (audit findings, 2026-08-23) ───────────
   Found by reading a phone-width capture section by section rather
   than only the two things that were reported. */

/* the builder section carried inline padding:74/40 that never scaled
   down — with the film strip's own bottom padding it stacked ~190px of
   dead black before "THE BUILDER". Now a real class. */
.lpb-sec { padding: 74px 0 40px; }

/* Tile captions were bottom-anchored, so a two-line subcaption pushed
   its heading up and the headings across a row no longer aligned —
   the grid read as ragged. Reserving two lines squares them up. */
@media (max-width: 860px) {
  html[data-theme] .lpz .mz-cap-s { min-height: 2.6em; }
}

@media (max-width: 760px) {
  .lpb-sec { padding: 2.4rem 0 1.6rem; }
  /* the film strip already pads below; don't pay for it twice */
  html[data-theme] .lpz-sec { padding-bottom: 1.6rem !important; }

  /* the render sits high in its frame with a stretch of empty floor
     beneath — nudge it up so the pit holds the middle */
  html[data-theme] .dzb-lp .dzb-stage canvas { transform: scale(1.18) translateY(-3%); }

  /* the builder's own micro-labels were ~11px next to 17px eyebrows —
     too far apart to read as the same system */
  html[data-theme] .dzb-lp .dzb-kicker,
  html[data-theme] .dzb-lp .dzb-seg-label,
  html[data-theme] .dzb-lp .dzb-lab span { font-size: 12.5px !important; letter-spacing: 0.1em !important; }
}

/* ══ MOBILE DESIGN SYSTEM v2 (awwwards-criteria pass, 2026-08-23) ══
   Applied principles, in order of weight:
   · USE THE FULL CANVAS. Media confined inside a padded column is the
     single clearest tell of a templated site. On a phone the tiles and
     the builder now run edge to edge; text keeps the cushion.
   · BIG TYPE, FEW WORDS. Headlines are 3–5 words, so they can go much
     larger than a generic responsive step-down allows.
   · FEW HIERARCHIES. Eyebrow → headline → lead. Nothing else competes.
   · RHYTHM. One spacing scale, not per-section guesses.
   Centred axis is kept deliberately — Daniel set that site-wide.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* ── type: bigger headline, tighter tracking ─────────────────── */
  html[data-theme] .dz-h2,
  html[data-theme] h2:not(.dzb-name):not(.faq-question) {
    font-size: clamp(2.4rem, 9.6vw, 2.9rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.038em !important;
  }
  html[data-theme] .dz-cta .dz-h2 { font-size: clamp(2.4rem, 9.6vw, 2.9rem) !important; }
  /* the lead is support, not a second headline */
  html[data-theme] .dz-sec-head .dz-lead {
    font-size: 1.0625rem !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin-left: auto !important; margin-right: auto !important;
    color: rgba(255,255,255,0.66) !important;
  }
  html[data-theme] .dz-sec-head { margin-bottom: 1.75rem !important; }

  /* ── rhythm: one scale ───────────────────────────────────────── */
  .dz-section { padding: 3.4rem 0 !important; }
  /* stacked sections double their cushion — the film strip hands off to the
     builder, so the seam between them is paid for once, not twice */
  html[data-theme] .lpz-sec { padding-bottom: 2rem !important; }
  .lpb-sec    { padding: 2.6rem 0 3.4rem !important; }

  /* ── FULL CANVAS: the six tiles become one edge-to-edge mosaic ── */
  html[data-theme] .lpz {
    margin-left: calc(-1 * var(--d1-cush));
    margin-right: calc(-1 * var(--d1-cush));
    gap: 2px !important;
  }
  html[data-theme] .lpz .mz-t { border-radius: 0 !important; }
  html[data-theme] .lpz .mz-cap { padding: 0.85rem 0.8rem !important; }

  /* ── FULL CANVAS: the builder loses its card and runs to the edges,
        which also buys the pit render the width Daniel asked for ── */
  html[data-theme] .dzb-lp {
    margin-left: calc(-1 * var(--d1-cush));
    margin-right: calc(-1 * var(--d1-cush));
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    padding: 0 0 1.5em !important;
    gap: 1.3em;
  }
  html[data-theme] .dzb-lp .dzb-stage {
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    border-top: 0 !important;
  }
  html[data-theme] .dzb-lp .dzb-panel {
    padding-left: var(--d1-cush) !important;
    padding-right: var(--d1-cush) !important;
  }

  /* ── the INCLUDED band reads as a rule, not a paragraph ──────── */
  html[data-theme] .incs { padding: 1.15rem 0 !important; }
  html[data-theme] .incs .incs-lab {
    font-size: 11px !important; letter-spacing: 0.24em !important;
    margin-bottom: 0.75em !important; color: rgba(255,255,255,0.4) !important;
  }
  html[data-theme] .incs li { font-size: 0.95rem !important; }
}

/* ══ ONE EYEBROW SYSTEM ACROSS BREAKPOINTS ═════════════════════════
   Desktop was still running the old oversized grey label while mobile
   had moved to the blue eyebrow — two design languages for the same
   element. Consistency of scale and hierarchy across every breakpoint
   is the point; size flexes, treatment doesn't. */
.dz-tag, .pp-kick, .hz-kick, .faq-hero-meta, .faq-category-label,
.specs-hero-meta, .guide-hero-meta, .care-hero-meta {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(0.95rem, 1.25vw, 1.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #4d7bff !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
html[data-theme] .dz-sec-head .dz-tag { display: inline-block; margin-bottom: 0.7em; }

/* headings set 3–6 words at display size; without balancing, the last
   word orphans onto its own line ("...from the inside / out") */
html[data-theme] .dz-h2,
html[data-theme] h2:not(.dzb-name):not(.faq-question),
html[data-theme] .dz-cta .dz-h2 { text-wrap: balance; }