/* ===========================================================
   Deskrune — visual pass
   Builds on theme.css tokens. Loaded LAST so it wins specificity
   battles against legacy rules. Pages opt in by including this
   stylesheet — currently homepage, /buy/, /kits/adhd/, /about/.

   Goal: looks intentional and trustworthy enough to convert at $5.
   Quiet, competent, opinionated — the brand voice in CSS.
   2026-05-08
   =========================================================== */

/* ─── Visually-hidden utility (keeps content for screen readers) ─── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── Page basics ─── */
html { scroll-behavior: smooth; }
html, body {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
/* Defeat legacy `:root[data-theme="dark"] body { background: var(--navy); }`
   in style.css — same specificity, but ours wins because it loads later. */
:root[data-theme="dark"] body,
:root body {
  background: var(--ds-bg);
  color: var(--ds-ink);
}
body {
  font-family: var(--ds-font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kill the legacy 6px navy stripe — replaced by a 1px hairline in nav */
body::before {
  display: none !important;
}

/* ─── Selection ─── */
::selection {
  background: var(--ds-accent);
  color: var(--ds-ink-on-accent);
}

/* ─── Skip-to-content (sr-only by default; visible only on keyboard focus) ─── */
.skip-to-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: auto !important;
  left: auto !important;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  overflow: visible !important;
  clip: auto !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 1000 !important;
  background: var(--ds-ink) !important;
  color: var(--ds-ink-on-inv) !important;
  font-family: var(--ds-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: var(--ds-r-md) !important;
  outline: 2px solid var(--ds-accent) !important;
  outline-offset: 3px !important;
  text-decoration: none !important;
}

/* ─── Focus ring (keyboard only) ─── */
*:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 3px;
  border-radius: var(--ds-r-sm);
}

/* ─── Type scale ─── */
/* Removed 2026-05-08: .vp / body.vp / .section.vp / h1.vp prefixes were
   never applied to any HTML element. Kept the section.section h1 form. */
section.section h1 {
  font-family: var(--ds-font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  text-wrap: balance;
}
section.section h2 {
  font-family: var(--ds-font-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-4);
  text-wrap: balance;
}
section.section h3 {
  font-family: var(--ds-font-sans);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-3);
}
section.section p {
  color: var(--ds-ink-soft);
  max-width: var(--ds-measure);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 var(--ds-s-4);
}
section.section .lede {
  color: var(--ds-ink-soft);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: var(--ds-measure);
  margin: 0 0 var(--ds-s-6);
}
section.section a {
  /* AA: --ds-accent on white = 3.99:1 (fails 4.5). Use the dark accent ink for text. */
  color: var(--ds-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
section.section a:hover {
  color: var(--ds-accent-hover);
}
:root[data-theme="dark"] section.section a {
  /* In dark mode, --ds-accent (lighter coral) on dark bg passes AA already. */
  color: var(--ds-accent);
}

/* Eyebrow above headlines (replaces the legacy "00 Live checkout" pattern) */
section.section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
  margin-bottom: var(--ds-s-4);
}
section.section .section-eyebrow .num {
  display: inline-block;
  padding: 3px 8px;
  background: var(--ds-surface-2);
  color: var(--ds-ink-soft);
  border-radius: var(--ds-r-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}
section.section .section-eyebrow .label {
  color: var(--ds-ink-faint);
}

/* ─── Section rhythm ─── */
section.section {
  padding: var(--ds-s-9) var(--ds-s-5);
}
section.section .section-inner {
  max-width: var(--ds-container);
  margin: 0 auto;
}
section.section.white   { background: var(--ds-bg); }
section.section.warm    { background: var(--ds-surface-2); }
section.section.pale    { background: var(--ds-accent-soft); }
section.section.navy {
  background: var(--ds-surface-inv);
  color: var(--ds-ink-on-inv);
}
section.section.navy h1,
section.section.navy h2,
section.section.navy h3,
section.section.navy p,
section.section.navy .lede {
  color: var(--ds-ink-on-inv);
}
section.section.navy .section-eyebrow .num {
  background: rgba(240, 233, 220, 0.12);
  color: var(--ds-ink-on-inv);
}
section.section.navy .section-eyebrow .label {
  color: rgba(240, 233, 220, 0.62);
}
section.section.navy a {
  color: var(--ds-accent);
}
/* Inside section.navy, hero-action.secondary needs explicit text color since
   the section is dark — the link can't fall back to legacy rules. */
section.section.navy .hero-action.secondary {
  color: var(--ds-ink-on-inv) !important;
  background: transparent !important;
  border-color: rgba(240, 233, 220, 0.32) !important;
}
section.section.navy .hero-action.secondary:hover {
  background: rgba(240, 233, 220, 0.06) !important;
  border-color: var(--ds-ink-on-inv) !important;
  color: var(--ds-ink-on-inv) !important;
}
section.section.navy .hero-action.primary {
  background: var(--ds-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--ds-accent) !important;
}
/* Text DIRECTLY inside the navy section (not inside an inner card) */
section.section.navy > .section-inner > h1,
section.section.navy > .section-inner > h2,
section.section.navy > .section-inner > h3,
section.section.navy > .section-inner > h4,
section.section.navy > .section-inner > p,
section.section.navy > .section-inner > .lede,
section.section.navy > .section-inner > div > h1,
section.section.navy > .section-inner > div > h2,
section.section.navy > .section-inner > div > h3,
section.section.navy > .section-inner > div > h4,
section.section.navy > .section-inner > div > p,
section.section.navy > .section-inner > div > .lede,
section.section.navy > .section-inner > div > strong {
  color: var(--ds-ink-on-inv) !important;
}
/* Reset text color for cards that sit inside navy sections — cards have their own surface bg. */
section.section.navy .tool-card,
section.section.navy .tool-card *,
section.section.navy .product-card,
section.section.navy .product-card *,
section.section.navy .choose-card,
section.section.navy .choose-card *,
section.section.navy .quote-card,
section.section.navy .quote-card *,
section.section.navy .live-product,
section.section.navy .live-product * {
  color: var(--ds-ink) !important;
}
section.section.navy .tool-card h3,
section.section.navy .product-card h3,
section.section.navy .choose-card h3 { color: var(--ds-ink) !important; }
section.section.navy .tool-card p,
section.section.navy .product-card p,
section.section.navy .choose-card p { color: var(--ds-ink-soft) !important; }
section.section.navy .tool-card .arrow,
section.section.navy .tool-card .price-tag,
section.section.navy .product-card .pc-tag,
section.section.navy .choose-card .choose-tag,
section.section.navy .product-card .pc-now { color: var(--ds-accent) !important; }

@media (max-width: 720px) {
  section.section { padding: var(--ds-s-7) var(--ds-s-4); }
}

/* ─── Top sale banner — recolor to use tokens ─── */
.deskrune-sale-banner {
  /* AA: white on --ds-accent (#C9613F) = 3.99 — fails. Use --ds-accent-hover (#A84F31) → 5.2:1 passes. */
  background: var(--ds-accent-hover) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  box-shadow: var(--ds-shadow-1);
}
.deskrune-sale-banner strong,
.deskrune-sale-banner span {
  color: #FFFFFF !important;
}
.deskrune-sale-banner a {
  color: #FFFFFF !important;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
}
.deskrune-sale-banner .deskrune-countdown {
  background: rgba(0,0,0,0.28);
  color: #FFFFFF;
}

/* ─── Nav ─── */
nav {
  background: var(--ds-bg) !important;
  border-bottom: 1px solid var(--ds-rule);
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
nav .inner {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 14px var(--ds-s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav a.brand {
  font-family: var(--ds-font-sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--ds-ink) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
nav a.brand .brand-glyph { color: var(--ds-accent); }
nav .links {
  display: flex;
  align-items: center;
  gap: 24px;
}
nav .links a {
  color: var(--ds-ink-soft) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 160ms, border-color 160ms;
}
nav .links a:hover {
  color: var(--ds-ink) !important;
  border-bottom-color: var(--ds-accent);
}
nav .theme-toggle,
nav .cmdk-trigger {
  background: transparent;
  border: 1px solid var(--ds-rule);
  color: var(--ds-ink-soft);
  border-radius: var(--ds-r-sm);
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
nav .theme-toggle:hover,
nav .cmdk-trigger:hover {
  border-color: var(--ds-rule-strong);
  color: var(--ds-ink);
}
nav .theme-toggle .icon-sun { display: none; }
nav .theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] nav .theme-toggle .icon-sun { display: inline-block; }
:root[data-theme="dark"] nav .theme-toggle .icon-moon { display: none; }

/* ─── Buttons (the hero-action and .buy patterns) ─── */
.hero-action,
.buy,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  padding: 14px 22px;
  border-radius: var(--ds-r-md);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms, box-shadow 200ms;
  min-height: 48px;
  line-height: 1.2;
  cursor: pointer;
}
.hero-action.primary,
.buy.primary,
.btn.primary {
  background: var(--ds-btn-primary-bg) !important;
  color: var(--ds-btn-primary-fg) !important;
  border-color: var(--ds-btn-primary-bg) !important;
  box-shadow: var(--ds-shadow-1);
}
.hero-action.primary:hover,
.buy.primary:hover,
.btn.primary:hover {
  background: var(--ds-btn-primary-bg-h) !important;
  border-color: var(--ds-btn-primary-bg-h) !important;
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-2);
}
.hero-action.secondary,
.buy.secondary,
.btn.secondary {
  background: var(--ds-btn-secondary-bg) !important;
  color: var(--ds-btn-secondary-fg) !important;
  border-color: var(--ds-btn-secondary-bd) !important;
}
.hero-action.secondary:hover,
.buy.secondary:hover,
.btn.secondary:hover {
  background: var(--ds-btn-secondary-bg-h) !important;
  border-color: var(--ds-rule-strong) !important;
  color: var(--ds-ink) !important;
}

/* Removed 2026-05-08: .btn-link rule — class never used in HTML/JS. */

/* ─── DESKRUNE reveal (the brand intro) ─── */
.brand-reveal {
  position: relative;
  background: var(--ds-bg);
  padding: var(--ds-s-6) var(--ds-s-5) var(--ds-s-5);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--ds-rule);
}
.brand-reveal-inner {
  max-width: 760px;
  margin: 0 auto;
}
.brand-reveal-glyph {
  width: clamp(56px, 6vw, 88px);
  height: clamp(56px, 6vw, 88px);
  color: var(--ds-accent);
  display: block;
  margin: 0 auto var(--ds-s-3);
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--ds-accent) 22%, transparent));
}
.brand-reveal-glyph path {
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  animation: br-draw-square 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.brand-reveal-glyph line:nth-of-type(1) {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: br-draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}
.brand-reveal-glyph line:nth-of-type(2) {
  stroke-dasharray: 6;
  stroke-dashoffset: 6;
  animation: br-draw 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
@keyframes br-draw-square { to { stroke-dashoffset: 0; } }
@keyframes br-draw { to { stroke-dashoffset: 0; } }

/* Letter-by-letter "FOR WHEN YOU COME BACK" */
.brand-reveal-tag {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.05em;
  color: var(--ds-ink-soft);
  margin: 0 auto var(--ds-s-4);
  line-height: 1;
}
.brand-reveal-tag span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: br-char 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes br-char { to { opacity: 1; transform: translateY(0); } }
.brand-reveal-tag span:nth-child(1)  { animation-delay: 1.6s; }
.brand-reveal-tag span:nth-child(2)  { animation-delay: 1.65s; }
.brand-reveal-tag span:nth-child(3)  { animation-delay: 1.70s; }
.brand-reveal-tag span:nth-child(4)  { animation-delay: 1.75s; }
.brand-reveal-tag span:nth-child(5)  { animation-delay: 1.80s; }
.brand-reveal-tag span:nth-child(6)  { animation-delay: 1.85s; }
.brand-reveal-tag span:nth-child(7)  { animation-delay: 1.90s; }
.brand-reveal-tag span:nth-child(8)  { animation-delay: 1.95s; }
.brand-reveal-tag span:nth-child(9)  { animation-delay: 2.00s; }
.brand-reveal-tag span:nth-child(10) { animation-delay: 2.05s; }
.brand-reveal-tag span:nth-child(11) { animation-delay: 2.10s; }
.brand-reveal-tag span:nth-child(12) { animation-delay: 2.15s; }
.brand-reveal-tag span:nth-child(13) { animation-delay: 2.20s; }
.brand-reveal-tag span:nth-child(14) { animation-delay: 2.25s; }
.brand-reveal-tag span:nth-child(15) { animation-delay: 2.30s; }
.brand-reveal-tag span:nth-child(16) { animation-delay: 2.35s; }
.brand-reveal-tag span:nth-child(17) { animation-delay: 2.40s; }
.brand-reveal-tag span:nth-child(18) { animation-delay: 2.45s; }
.brand-reveal-tag span:nth-child(19) { animation-delay: 2.50s; }
.brand-reveal-tag span:nth-child(20) { animation-delay: 2.55s; }
.brand-reveal-tag span:nth-child(21) { animation-delay: 2.60s; }
.brand-reveal-tag span:nth-child(22) { animation-delay: 2.65s; }

/* DESK · RUNE etymology */
.brand-reveal-meaning {
  margin-top: var(--ds-s-3);
  opacity: 0;
  animation: br-fade 1s cubic-bezier(0.22, 1, 0.36, 1) 2.4s forwards;
}
@keyframes br-fade { to { opacity: 1; } }
.brm-word {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  margin-bottom: var(--ds-s-3);
}
.brm-half {
  display: inline-flex;
  align-items: baseline;
}
.brm-half span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-22px) rotate(-3deg);
  animation: brm-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.brm-desk span:nth-child(1) { animation-delay: 2.6s; }
.brm-desk span:nth-child(2) { animation-delay: 2.68s; }
.brm-desk span:nth-child(3) { animation-delay: 2.76s; }
.brm-desk span:nth-child(4) { animation-delay: 2.84s; }
.brm-rune span:nth-child(1) { animation-delay: 3.00s; }
.brm-rune span:nth-child(2) { animation-delay: 3.08s; }
.brm-rune span:nth-child(3) { animation-delay: 3.16s; }
.brm-rune span:nth-child(4) { animation-delay: 3.24s; }
@keyframes brm-drop {
  60%  { opacity: 1; transform: translateY(2px) rotate(0.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
.brm-dot {
  display: inline-block;
  color: var(--ds-accent);
  font-weight: 700;
  font-size: 0.7em;
  transform: translateY(-0.18em) scale(0.5);
  opacity: 0;
  animation: brm-bloom 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.94s forwards;
}
@keyframes brm-bloom {
  60%  { opacity: 1; transform: translateY(-0.18em) scale(1.4); }
  100% { opacity: 1; transform: translateY(-0.18em) scale(1); }
}
.brm-defs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: var(--ds-s-3);
}
.brm-def {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: 14px;
  color: var(--ds-ink-soft);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  animation: brm-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.brm-def[data-step="1"] { animation-delay: 3.45s; }
.brm-def[data-step="2"] { animation-delay: 3.80s; }
.brm-def[data-step="3"] { animation-delay: 4.20s; }
@keyframes brm-slide { to { opacity: 1; transform: translateY(0); } }
.brm-key {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ds-accent);
  font-size: 15px;
  flex-shrink: 0;
}
.brm-sep { color: var(--ds-ink-faint); font-weight: 600; opacity: 0.6; flex-shrink: 0; }
.brm-val { color: var(--ds-ink-soft); text-align: left; }
.brm-def-sum {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-rule);
  font-family: var(--ds-font-serif);
  font-size: 16px;
  color: var(--ds-ink);
}
.brm-def-sum em { font-style: italic; font-weight: 500; }

/* Mobile reveal */
@media (max-width: 640px) {
  .brand-reveal { padding: var(--ds-s-7) var(--ds-s-4) var(--ds-s-6); }
  .brand-reveal-tag { letter-spacing: 0.06em; }
  .brm-word { font-size: clamp(32px, 11vw, 56px); }
  .brm-def { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; max-width: 320px; }
  .brm-sep { display: none; }
  .brm-def-sum { font-size: 15px; text-align: center; padding-top: 10px; align-items: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand-reveal-glyph path,
  .brand-reveal-glyph line { stroke-dashoffset: 0 !important; animation: none !important; }
  .brand-reveal-tag span,
  .brand-reveal-meaning,
  .brm-half span,
  .brm-dot,
  .brm-def {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ─── HERO REBUILD (homepage + /kits/adhd/ + /buy/) ─── */
.hero-vp {
  background:
    radial-gradient(1100px 600px at 80% 0%, color-mix(in srgb, var(--ds-accent) 8%, transparent) 0%, transparent 60%),
    var(--ds-bg);
  padding: var(--ds-s-9) var(--ds-s-5) var(--ds-s-9);
  border-bottom: 1px solid var(--ds-rule);
  position: relative;
  overflow: hidden;
}
.hero-vp .hero-inner-vp {
  max-width: var(--ds-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: var(--ds-s-7);
  align-items: center;
}
@media (max-width: 880px) {
  .hero-vp .hero-inner-vp {
    grid-template-columns: 1fr;
    gap: var(--ds-s-6);
  }
}
.hero-vp .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin-bottom: var(--ds-s-4);
}
.hero-vp .hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ds-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-accent) 22%, transparent);
}
.hero-vp h1 {
  font-family: var(--ds-font-serif);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-5);
  text-wrap: balance;
}
.hero-vp .hero-lede {
  font-family: var(--ds-font-serif);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ds-ink-soft);
  max-width: 56ch;
  margin: 0 0 var(--ds-s-6);
}
.hero-vp .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s-3);
  margin-bottom: var(--ds-s-5);
}
.hero-vp .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s-4);
  font-size: 13px;
  color: var(--ds-ink-faint);
  align-items: center;
}
.hero-vp .hero-trust .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DA44E;
  margin-right: 6px;
  vertical-align: middle;
}

/* The product card on the right side of the hero */
.hero-product-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-6);
  box-shadow: var(--ds-shadow-2);
  position: relative;
}
.hero-product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--ds-r-lg);
  border: 1.5px solid var(--ds-accent);
  pointer-events: none;
  opacity: 0.18;
}
.hero-product-card .hpc-tag {
  display: inline-block;
  font-family: var(--ds-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-accent);
  background: var(--ds-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--ds-s-3);
}
.hero-product-card h3 {
  font-family: var(--ds-font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-3);
}
.hero-product-card .hpc-desc {
  color: var(--ds-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 var(--ds-s-5);
}
.hero-product-card .hpc-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--ds-s-5);
}
.hero-product-card .hpc-price .now {
  font-family: var(--ds-font-serif);
  font-weight: 600;
  font-size: 32px;
  color: var(--ds-ink);
  line-height: 1;
}
.hero-product-card .hpc-price .was {
  font-size: 15px;
  color: var(--ds-ink-faint);
  text-decoration: line-through;
}
.hero-product-card .hpc-price .off {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ds-accent);
  background: var(--ds-accent-soft);
  padding: 3px 8px;
  border-radius: var(--ds-r-sm);
  text-transform: uppercase;
}
.hero-product-card .hpc-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Card grids (tools, products) ─── */
.tool-cards,
.live-product-grid,
.products-rich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ds-s-4);
}
.tool-card,
.live-product,
.product-rich {
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-5);
  text-decoration: none;
  color: var(--ds-ink);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms, box-shadow 200ms, transform 160ms;
}
.tool-card:hover,
.live-product:hover,
.product-rich:hover {
  border-color: var(--ds-rule-strong);
  box-shadow: var(--ds-shadow-2);
  transform: translateY(-2px);
}
.tool-card h3,
.live-product h3,
.product-rich h3 {
  font-family: var(--ds-font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-3);
}
.tool-card p,
.live-product p,
.product-rich p {
  color: var(--ds-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.tool-card .arrow,
.product-rich .arrow {
  margin-top: var(--ds-s-4);
  color: var(--ds-accent);
  font-weight: 600;
  font-size: 14px;
  align-self: flex-start;
}
.tool-card .price-tag,
.live-product .live-product-meta,
.product-rich .price {
  display: inline-block;
  font-family: var(--ds-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-accent);
  background: var(--ds-accent-soft);
  padding: 3px 8px;
  border-radius: var(--ds-r-sm);
  margin-bottom: var(--ds-s-3);
  align-self: flex-start;
}

/* live-product price block on /buy/ */
.live-product .live-price.on-sale {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--ds-s-3) 0;
}
.live-product .live-price.on-sale .price-was {
  color: var(--ds-ink-faint);
  text-decoration: line-through;
  font-size: 14px;
}
.live-product .live-price.on-sale .price-now {
  font-family: var(--ds-font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ds-ink);
}
.live-product .live-price.on-sale .sale-pct-off {
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.live-product .buy-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--ds-s-4);
}

/* Quote cards (homepage section 06) */
.quote-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ds-s-4);
  margin-top: var(--ds-s-5);
}
.quote-cards .quote-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-5);
  position: relative;
}
/* Removed 2026-05-08: .quote-cards .quote-card .quote-mark — never used in HTML/JS. */
.quote-cards .quote-card blockquote {
  border: 0; padding: 0; margin: 0 0 var(--ds-s-4);
  font-family: var(--ds-font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ds-ink);
  font-style: italic;
}
.quote-cards .quote-card .attr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ds-ink-faint);
  text-transform: uppercase;
}

/* Audience cards (homepage section 05, section.navy) */
section.section.navy .audience-cards {
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ds-s-4);
}
section.section.navy .audience-cards .audience-card {
  background: rgba(240, 233, 220, 0.04);
  border: 1px solid rgba(240, 233, 220, 0.10);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-5);
  text-decoration: none;
  color: var(--ds-ink-on-inv);
  transition: background-color 160ms, border-color 160ms, transform 160ms;
}
section.section.navy .audience-cards .audience-card:hover {
  background: rgba(240, 233, 220, 0.08);
  border-color: rgba(240, 233, 220, 0.20);
  transform: translateY(-2px);
}
section.section.navy .audience-cards .audience-card .who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ds-accent);
  text-transform: uppercase;
  margin-bottom: var(--ds-s-2);
  display: block;
}
section.section.navy .audience-cards .audience-card h3 {
  font-family: var(--ds-font-sans);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--ds-s-2);
  color: var(--ds-ink-on-inv) !important;
}
section.section.navy .audience-cards .audience-card p {
  font-size: 14px;
  color: rgba(240, 233, 220, 0.75) !important;
  line-height: 1.5;
}

/* Brand strip footer */
section.brand-strip {
  background: var(--ds-surface-inv);
  color: var(--ds-ink-on-inv);
  padding: var(--ds-s-9) var(--ds-s-5);
}
section.brand-strip .inner {
  max-width: var(--ds-container-narrow);
  margin: 0 auto;
  text-align: center;
}
section.brand-strip .word {
  font-family: var(--ds-font-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ds-ink-on-inv);
  margin: var(--ds-s-4) 0 var(--ds-s-3);
}
section.brand-strip .tag {
  color: rgba(240, 233, 220, 0.7);
  font-size: 16px;
  margin-bottom: var(--ds-s-6);
}
section.brand-strip dl.etymology {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  max-width: 520px;
  margin: 0 auto var(--ds-s-6);
  text-align: left;
  font-size: 14px;
  color: rgba(240, 233, 220, 0.85);
}
section.brand-strip dl.etymology dt {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ds-accent);
}
section.brand-strip .pull {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ds-ink-on-inv);
  border-top: 1px solid rgba(240, 233, 220, 0.14);
  padding-top: var(--ds-s-5);
  max-width: 56ch;
  margin: 0 auto;
}

/* Footer — defeat legacy rule that paints links in --navy-text-muted (rgb 200,210,226) */
footer.minimal {
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-rule);
  padding: var(--ds-s-6) var(--ds-s-5);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  color: var(--ds-ink-soft) !important;
}
footer.minimal .inner {
  max-width: var(--ds-container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-s-5);
  flex-wrap: wrap;
}
footer.minimal,
footer.minimal div,
footer.minimal a {
  color: var(--ds-ink-soft) !important;
}
footer.minimal a {
  text-decoration: none;
  margin-right: var(--ds-s-4);
  border-bottom: 1px solid transparent;
}
footer.minimal a:hover {
  color: var(--ds-ink) !important;
  border-bottom-color: var(--ds-accent);
}

/* Sale banner inline countdown */
.deskrune-sale-banner {
  padding: 10px var(--ds-s-5);
}

/* Newsletter signup block */
.signup,
.signup-box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-6);
  max-width: 520px;
}
.signup h3,
.signup-box h3 {
  font-family: var(--ds-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-s-3);
}
.signup p,
.signup-box p {
  color: var(--ds-ink-soft);
  font-size: 14px;
  margin: 0 0 var(--ds-s-4);
}
.signup form,
.signup-box form {
  display: flex;
  gap: 8px;
}
.signup input[type=email],
.signup-box input[type=email] {
  flex: 1;
  font-family: var(--ds-font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-md);
  background: var(--ds-bg);
  color: var(--ds-ink);
  min-height: 44px;
}
.signup input[type=email]:focus,
.signup-box input[type=email]:focus {
  outline: 0;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
}
.signup button,
.signup-box button {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 0 18px;
  background: var(--ds-btn-primary-bg) !important;
  color: var(--ds-btn-primary-fg) !important;
  border: 0 !important;
  border-radius: var(--ds-r-md);
  cursor: pointer;
  min-height: 44px;
  transition: background-color 160ms;
}
.signup button:hover,
.signup-box button:hover {
  background: var(--ds-btn-primary-bg-h) !important;
}
.signup .small,
.signup-box .small {
  font-size: 12px;
  color: var(--ds-ink-faint);
  margin-top: var(--ds-s-3);
}

/* Guarantee bar (on /buy/) */
.guarantee-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-s-5);
  padding: var(--ds-s-5) var(--ds-s-5);
  background: var(--ds-surface-2);
  border-top: 1px solid var(--ds-rule);
  border-bottom: 1px solid var(--ds-rule);
  font-size: 13px;
  color: var(--ds-ink-soft);
  letter-spacing: 0.04em;
}
.guarantee-bar .item::before {
  content: "✓";
  color: var(--ds-accent);
  font-weight: 700;
  margin-right: 6px;
}

/* Mobile button stretch + nav overflow fix */
@media (max-width: 640px) {
  .hero-action,
  .buy,
  .btn {
    width: 100%;
    padding: 16px 20px;
    font-size: 15px;
  }
  .hero-vp .hero-actions { flex-direction: column; }
  .signup form, .signup-box form { flex-direction: column; }
  .signup button, .signup-box button { width: 100%; }

  /* Nav: hide secondary text links on small screens, keep brand + theme toggle.
     The full menu is reachable via Cmd-K search and the footer. */
  nav .inner { padding: 12px var(--ds-s-4); }
  nav .links { gap: 8px; }
  nav .links a { display: none; }
  nav .links a:first-child { display: inline; }   /* keep one anchor link */
  nav .links a[href="/shop/"] { display: inline; } /* always show Shop */
  nav .cmdk-trigger .cmdk-trigger-key { display: none; }
}
@media (max-width: 480px) {
  nav .links a:first-child { display: none; }
  nav .cmdk-trigger { padding: 6px 8px; }
}

/* Tighten the noisy decorative blocks left over from the legacy hero so
   they don't fight the new VP hero. The cinematic hero block is hidden on
   pages that opt into the VP hero via class="hero-vp". */
.uses-vp-hero .hero.hero-cinematic { display: none !important; }
/* Removed 2026-05-08: .uses-vp-hero .deskrune-marquee — class no longer exists
   in any stylesheet (dramatic-effects.css cleanup). */

/* Re-entry pill (floating "pick up where you left off") */
.reentry-pill {
  background: var(--ds-surface) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-rule) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-shadow-3) !important;
}
.reentry-pill .reentry-pill-context,
.reentry-pill .reentry-pill-tag {
  color: var(--ds-ink-soft) !important;
}
.reentry-pill .reentry-pill-cta {
  color: var(--ds-accent) !important;
  background: transparent !important;
}

/* The proof toast bottom-left */
.deskrune-proof-toast {
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-left: 3px solid #2DA44E;
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
}
.deskrune-proof-toast strong { color: var(--ds-ink); }

/* Removed 2026-05-08: .measure-narrow / .measure-default utilities — neither
   class is applied to any element in the codebase. */

/* ─── Defensive overrides for legacy pages that hardcoded navy text ─── */
:root[data-theme="dark"] .hero-inner h1,
:root[data-theme="dark"] .hero-inner h2,
:root[data-theme="dark"] .hero-inner p,
:root[data-theme="dark"] .hero-inner em,
:root[data-theme="dark"] .hero-inner strong {
  color: var(--ds-ink) !important;
}
:root[data-theme="dark"] .section-eyebrow .num,
:root[data-theme="dark"] .section-eyebrow .label {
  color: var(--ds-ink-soft) !important;
}
/* Sale banner — in dark mode, accent is lighter so text must be dark-on-accent */
:root[data-theme="dark"] .deskrune-sale-banner,
:root[data-theme="dark"] .deskrune-sale-banner strong,
:root[data-theme="dark"] .deskrune-sale-banner span,
:root[data-theme="dark"] .deskrune-sale-banner a {
  color: #1A1814 !important;
}
:root[data-theme="dark"] .deskrune-sale-banner .deskrune-countdown {
  background: rgba(0,0,0,0.18);
  color: #1A1814;
}
:root[data-theme="dark"] .sale-pct-off,
:root[data-theme="dark"] .pc-off,
:root[data-theme="dark"] .hpc-price .off {
  color: #1A1814 !important;
}
/* Live-product card strikethrough was 3.85:1 — bump to ink-soft */
.live-price.on-sale .price-was,
.product-card .pc-was,
.hero-product-card .hpc-price .was {
  color: var(--ds-ink-soft) !important;
  opacity: 0.85;
}
/* Trust signals */
.hero-vp .hero-trust span { color: var(--ds-ink-soft); }
:root[data-theme="dark"] .hero-vp .hero-trust span { color: var(--ds-ink-soft); }

/* The "% off" badge token: in dark mode the soft tint becomes near-black,
   so dark text on it is invisible. Force the tint background to be readable. */
:root[data-theme="dark"] .hpc-price .off,
:root[data-theme="dark"] .pc-off,
:root[data-theme="dark"] .sale-pct-off {
  background: var(--ds-accent) !important;
  color: #1A1814 !important;
}

/* Legacy .hero (still used on /buy/ + /about/): the rule
   `.hero h1 { color: var(--white); }` from style.css gives white text
   inside our cream-bg hero-cinematic blocks too. Pin it. */
.checkout-hero h1, .checkout-hero p, .checkout-hero .lede,
.checkout-hero .eyebrow,
.hero-inner h1, .hero-inner h2, .hero-inner p, .hero-inner em,
.hero-inner strong, .hero-inner .eyebrow {
  /* On legacy coral-bg hero, text really IS white-on-coral and that passes AA.
     Only force ink color when the parent isn't navy/coral. We'll target by
     section.hero only when it's been embedded inside a section.section.white. */
}
section.section.white .hero-inner h1,
section.section.white .hero-inner p,
section.section.white .hero-inner .eyebrow {
  color: var(--ds-ink) !important;
}

/* About page right column "DESKRUNE / For when you come back." badge
   is now stranded on a light bg in some rendering paths — force it back. */
.hero-badge .badge-label,
.hero-badge .badge-tag {
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .hero-badge .badge-label,
:root[data-theme="dark"] .hero-badge .badge-tag {
  color: var(--ds-ink-on-inv) !important;
}

/* Today's AFM card — coral-on-coral fail in dark. Force to dark text. */
:root[data-theme="dark"] .todays-afm-card,
:root[data-theme="dark"] .todays-afm-tag,
:root[data-theme="dark"] .todays-afm-hook,
:root[data-theme="dark"] .todays-afm-cta {
  color: #1A1814 !important;
}

/* Brand-strip (homepage footer-ish band) in dark mode — currently legacy navy-blue */
:root[data-theme="dark"] .brand-strip,
:root[data-theme="dark"] .brand-strip .word,
:root[data-theme="dark"] .brand-strip .tag,
:root[data-theme="dark"] .brand-strip .pull,
:root[data-theme="dark"] .brand-strip dl.etymology,
:root[data-theme="dark"] .brand-strip dl.etymology dd {
  color: var(--ds-ink-on-inv) !important;
}
:root[data-theme="dark"] .brand-strip .pull {
  border-top-color: rgba(240, 233, 220, 0.14) !important;
}

/* Audience cards heading in dark — was navy text on navy-mid card */
:root[data-theme="dark"] .audience-cards .audience-card,
:root[data-theme="dark"] .audience-cards .audience-card h3,
:root[data-theme="dark"] .audience-cards .audience-card p {
  color: var(--ds-ink-on-inv) !important;
}

/* About page — defeat hardcoded navy text in dark mode.
   Removed 2026-05-08: .container.about-prose / .about-prose / .about-meaning /
   .about-section / .about-pillar-grid — not in any HTML. Kept generic h2-h4. */
:root[data-theme="dark"] section h2,
:root[data-theme="dark"] section h3,
:root[data-theme="dark"] section h4 {
  color: var(--ds-ink) !important;
}

/* ─── Translation-in-progress pill (shown above content on /<lang>/shop/) ─── */
.translation-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px var(--ds-s-4);
  background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-rule);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  color: var(--ds-ink-soft);
  flex-wrap: wrap;
  text-align: center;
}
.translation-pill a {
  color: var(--ds-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 160ms;
}
.translation-pill a:hover { border-bottom-color: var(--ds-accent); }

/* ─── Language switcher (bottom-right floater on multi-lang pages) ─── */
.deskrune-lang-switcher {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-2);
  padding: 6px;
  max-width: min(420px, calc(100vw - 24px));
}
.deskrune-lang-switcher a {
  font-family: var(--ds-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ds-ink-soft);
  background: transparent;
  padding: 4px 8px;
  border-radius: var(--ds-r-sm);
  border: 1px solid transparent;
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.deskrune-lang-switcher a:hover {
  background: var(--ds-surface-2);
  color: var(--ds-ink);
}
.deskrune-lang-switcher a.active {
  background: var(--ds-accent);
  color: var(--ds-ink-on-accent);
  border-color: var(--ds-accent);
}
@media (max-width: 480px) {
  .deskrune-lang-switcher { max-width: calc(100vw - 16px); right: 8px; bottom: 8px; }
  .deskrune-lang-switcher a { font-size: 10px; padding: 3px 6px; }
}
@media print {
  .deskrune-lang-switcher, .translation-pill { display: none !important; }
}