/* Gen-Z Fashion Apparel: v4 "observatory" layer (dark default, light via the header switch).
   Loaded after styles.css only on pages built with theme: "v4" (<html class="v4">).
   Design language adapted from Umbra in ln-dev7/landing-pages (MIT, https://github.com/ln-dev7/landing-pages):
   near-black board, tight display type with outlined words, mono "instrument" labels, hairline rules,
   round arrow buttons, readout bars, leader-line annotations. Accent = the logo's ultramarine. */

/* ---------- 1. Tokens ---------- */
:root.v4 {
  --bg: #090c14;
  --warm: #0b0f18;
  --warm-2: #121725;
  --surface: #0d111b;
  --ink: #eceae4;
  --ink-2: #a9aca6;
  --ink-3: #7c827d;
  --line: rgba(214, 208, 196, 0.14);
  --line-2: rgba(214, 208, 196, 0.3);
  --thread: #7b8cff;
  --thread-ink: #090c14;
  --thread-soft: rgba(123, 140, 255, 0.1);
  --thread-glow: rgba(123, 140, 255, 0.55);
  --thread-stitch: transparent;
  --wa: #3ccf78;
  --ph-bg: #0f1420;
  --ph-line: #161c2a;
  --error: #ff7a6b;
  --shadow: none;
  --header-bg: rgba(9, 12, 20, 0.82);
  --font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
:root.v4[data-theme="light"] {
  --bg: #f1efe9;
  --warm: #ebe8e1;
  --warm-2: #e2ded5;
  --surface: #f6f4ef;
  --ink: #0b0f17;
  --ink-2: #4a4e55;
  --ink-3: #72767c;
  --line: rgba(11, 15, 23, 0.13);
  --line-2: rgba(11, 15, 23, 0.28);
  --thread: #2437d8;
  --thread-ink: #ffffff;
  --thread-soft: rgba(36, 55, 216, 0.07);
  --thread-glow: rgba(36, 55, 216, 0.35);
  --wa: #1f8f4a;
  --ph-bg: #e6e3db;
  --ph-line: #dcd8ce;
  --error: #c0392b;
  --header-bg: rgba(241, 239, 233, 0.86);
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
.v4 body { font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.v4 ::selection { background: var(--thread); color: var(--thread-ink); }
.v4 :focus-visible { outline: 2px solid var(--thread); outline-offset: 5px; }
.v4 h1, .v4 h2, .v4 h3 { font-stretch: 100%; }
.v4 h1, .v4 h2 { font-weight: 500; text-transform: uppercase; }
.v4 h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 0.9; letter-spacing: -0.065em; max-width: 16ch; margin-bottom: 28px; }
.v4 h3 { font-weight: 500; letter-spacing: -0.025em; }
.v4 main h2::after { display: none; }
.v4 h1 em, .v4 h2 em { color: var(--thread); }
.v4 a { color: var(--ink); text-decoration-color: var(--line-2); }
.v4 a:hover { text-decoration-color: var(--thread); }
.v4 p a, .v4 .a a, .v4 .note a { color: var(--thread); }

.v4 .section { padding: clamp(84px, 10vw, 148px) 0; border-top: 1px solid var(--line); }
.v4 .section.alt, .v4 .section.dark { background: var(--bg); }
.v4 .section:not(.alt):not(.dark) + .section:not(.alt):not(.dark) { border-top: 1px solid var(--line); }
.v4 .section-intro { color: var(--ink-2); max-width: 54ch; margin-bottom: 56px; font-size: 1.05rem; }
.v4 .note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-3); }

/* Section titles are left-aligned in this system. */
.v4 .section > .wrap > h2:first-child,
.v4 .section > .wrap > h2:first-child + .section-intro { margin-left: 0; text-align: left; }

/* ---------- 3. Mono label system ---------- */
.v4 .eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 26px; max-width: none;
  font: 500 0.69rem/1.6 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--thread);
}
.v4 .eyebrow i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 8px var(--thread-glow); }
.v4 .eyebrow span { color: var(--ink); }

.v4 .ph {
  font-family: var(--mono); font-size: 0.74em; font-weight: 400; letter-spacing: 0;
  color: var(--thread); background: var(--thread-soft); outline: 1px dashed var(--thread); outline-offset: -1px; padding: 1px 5px;
}
.v4 h1 .ph, .v4 h2 .ph { font-size: 0.3em; vertical-align: 0.5em; line-height: 1.7; }

/* ---------- 4. Buttons ---------- */
.v4 .btn { border-radius: 0; border-width: 1px; font-weight: 600; letter-spacing: -0.005em; min-height: 52px; }
.v4 .btn-primary { background: var(--thread); color: var(--thread-ink); border-color: var(--thread); outline: 0; }
.v4 .btn-primary:hover { filter: brightness(1.12); }
.v4 .btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.v4 .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.v4 .btn-ghost:hover { background: transparent; color: var(--thread); border-color: var(--thread); }
.v4 .btn-wa { background: transparent; color: var(--wa); border-color: var(--wa); }

/* Text + round arrow button (Umbra's "journey button"). */
.v4 .orbit-link { display: inline-flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; min-height: 52px; }
.v4 .orbit {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background-color 300ms, color 300ms, border-color 300ms, transform 600ms var(--ease);
}
.v4 .orbit svg { width: 18px; height: 18px; }
.v4 .orbit-link:hover .orbit, .v4 .footer-cta:hover .orbit { background: var(--thread); border-color: var(--thread); color: var(--thread-ink); transform: translate(2px, -2px); }
.v4 .orbit-link[href^="#"]:hover .orbit { transform: translateY(4px); }

.v4 .text-link, .v4 .section-link a {
  font: 500 0.72rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 4px;
}
.v4 .text-link:hover, .v4 .section-link a:hover { color: var(--thread); border-color: var(--thread); }
.v4 .section-link { margin-top: 44px; }

/* ---------- 5. Utility bar + header ---------- */
.v4 .utility { background: var(--bg); color: var(--ink-3); border-bottom: 1px solid var(--line); font: 0.68rem/1.5 var(--mono); letter-spacing: 0.06em; }
.v4 .utility p::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 8px var(--thread-glow); margin-right: 10px; vertical-align: 0.1em; }
.v4 .site-header { background: var(--header-bg); border-bottom: 1px solid var(--line); }
.v4 .logo-genz { font-family: var(--font); font-stretch: 100%; font-weight: 700; letter-spacing: -0.06em; font-size: 27px; }
.v4 .logo-sub { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.v4 .logo-lg .logo-genz { font-size: 40px; }
.v4 .logo-lg .logo-sub { font-size: 11px; }
.v4 .status { display: none; margin: 0; align-items: center; gap: 10px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.v4 .status i { width: 5px; height: 5px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 8px var(--thread-glow); }
@media (min-width: 760px) and (max-width: 1099px) { .v4 .status { display: inline-flex; } }
.v4 .nav a { color: var(--ink-2); font-weight: 500; font-size: 0.9rem; border-bottom: 1px solid transparent; }
.v4 .nav a:hover { color: var(--ink); }
.v4 .nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--thread); }
.v4 .nav.open { background: var(--bg); box-shadow: none; }
.v4 .nav.open a { border-bottom: 1px solid var(--line); }
.v4 .site-header .btn { min-height: 46px; }
.v4 .theme-btn { border-radius: 50%; }
@media (min-width: 1100px) {
  .v4 .nav.open a { border-bottom: 1px solid transparent; }
  .v4 .nav.open a[aria-current="page"] { border-bottom: 1px solid var(--thread); }
}

/* ---------- 6. Hero ---------- */
.v4 .hero {
  position: relative; overflow: hidden; background: var(--bg); border-bottom: 0;
  padding: clamp(48px, 5.5vw, 76px) 0 clamp(48px, 6vw, 72px);
}
.v4 .hero::before { /* the glow behind the visual (Umbra's still universe) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 74% 42%, var(--thread-soft), transparent 70%);
}
.v4 .hero .wrap { position: relative; }
.v4 .hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .v4 .hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: 48px; } }
.v4 .hero h1 {
  font-size: clamp(3rem, 6.6vw, 6.6rem); line-height: 0.87; letter-spacing: -0.075em; max-width: none; margin-left: -0.04em;
}
.v4 .hero h1 .kicker {
  display: block; margin: 0 0 0.45em 0.04em; font-size: max(0.24em, 1.15rem); line-height: 1.1; letter-spacing: -0.03em;
  text-transform: none; font-weight: 400; color: var(--ink-2);
}
.v4 .outline-word { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
@supports not (-webkit-text-stroke: 1px black) { .v4 .outline-word { color: var(--thread); } }
.v4 .hero .lede { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--ink-2); max-width: 44ch; margin: 28px 0 28px; }
.v4 .hero .cta-row { gap: 18px 28px; }
.v4 .hero-wa { margin: 22px 0 0; font: 0.72rem/1.6 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }

.v4 .hero-media { position: relative; max-width: 400px; width: 100%; justify-self: center; }
.v4 .hero-media .img-ph { position: relative; z-index: 1; aspect-ratio: 4 / 5; }
.v4 .rings { /* crosshair orbit lines behind the photo */
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 50%; pointer-events: none;
}
.v4 .rings::before { content: ""; position: absolute; inset: 16%; border: 1px dashed var(--line); border-radius: 50%; }
.v4 .rings::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
.v4 .specimen {
  position: absolute; z-index: 2; margin: 0; display: flex; align-items: flex-start; gap: 12px; max-width: none;
  font: 500 0.64rem/1.7 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.v4 .specimen span { background: var(--bg); border: 1px solid var(--line); padding: 7px 10px; }
.v4 .specimen i { flex: none; width: 36px; height: 1px; margin-top: 15px; background: var(--thread); }
.v4 .specimen.tr { top: 16%; right: -14px; }
.v4 .specimen.bl { bottom: 12%; left: -14px; flex-direction: row-reverse; }
@media (min-width: 1200px) { .v4 .specimen.tr { right: -64px; } .v4 .specimen.bl { left: -72px; } }

.v4 .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 4.5vw, 60px); padding-top: 20px; border-top: 1px solid var(--line); }
.v4 .fact-bar { flex: 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.v4 .fact-bar dt { font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.v4 .fact-bar dd { margin: 4px 0 0; font-weight: 500; font-size: 1.02rem; letter-spacing: -0.01em; }
.v4 .hero-foot .orbit-link { display: none; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 760px) { .v4 .fact-bar { grid-template-columns: repeat(4, 1fr); } .v4 .hero-foot .orbit-link { display: inline-flex; } }

.v4 .answer {
  background: transparent; border: 0; border-left: 1px solid var(--thread); padding: 2px 0 2px 20px; margin-top: 40px;
  max-width: 76ch; font-size: 0.92rem; color: var(--ink-2);
}
.v4 .answer::before { content: "In short"; display: block; margin-bottom: 6px; font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--thread); }

/* Entrance (switched off by styles.css under reduced motion). */
@keyframes v4-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.v4 .hero-copy > *, .v4 .hero-media, .v4 .hero-foot { animation: v4-rise 1.1s var(--ease) both; }
.v4 .hero-copy > :nth-child(2) { animation-delay: 80ms; }
.v4 .hero-copy > :nth-child(3) { animation-delay: 160ms; }
.v4 .hero-copy > :nth-child(n + 4) { animation-delay: 240ms; }
.v4 .hero-media { animation-delay: 200ms; animation-duration: 1.4s; }
.v4 .hero-foot { animation-delay: 360ms; }

/* ---------- 7. Image placeholder ---------- */
.v4 .img-ph { background-image: repeating-linear-gradient(135deg, transparent 0 13px, var(--ph-line) 13px 14px); border: 1px solid var(--line); }
.v4 .img-ph figcaption { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); font: 0.64rem/1.5 var(--mono); letter-spacing: 0.04em; }

/* ---------- 8. Numbers band: oversized accent numerals ---------- */
.v4 .trust-section { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 0; padding: clamp(48px, 6vw, 72px) 0; }
.v4 .trust li { text-align: left; padding: 0 0 0 18px; border-left: 1px solid var(--line); }
.v4 .trust .num { font-weight: 500; font-stretch: 100%; font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: -0.07em; line-height: 1; color: var(--thread); }
.v4 .trust .num .ph { display: inline-block; font-size: 0.24em; line-height: 1.5; letter-spacing: 0; vertical-align: middle; overflow-wrap: anywhere; }
.v4 .trust li:last-child .num { color: var(--ink); }
.v4 .trust .cap { margin-top: 12px; font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 760px) { .v4 .trust li + li { border-left: 1px solid var(--line); } }

/* ---------- 9. Section index (fixed, wide screens) ---------- */
.v4 .section-index { display: none; }
@media (min-width: 1320px) {
  .v4 .section-index { display: block; position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 400ms; }
  .v4 .section-index.shown { opacity: 1; pointer-events: auto; }
}
.v4 .section-index ol { list-style: none; display: grid; gap: 4px; }
.v4 .section-index a { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--ink-3); font: 500 0.62rem/1 var(--mono); letter-spacing: 0.1em; }
.v4 .section-index i { width: 10px; height: 1px; background: currentColor; transition: width 400ms var(--ease), background-color 300ms; }
.v4 .section-index b {
  position: absolute; left: 100%; margin-left: 10px; white-space: nowrap; font-weight: 500; text-transform: uppercase;
  background: var(--bg); border: 1px solid var(--line); padding: 5px 8px; opacity: 0; transform: translateX(-6px); transition: opacity 250ms, transform 400ms var(--ease);
}
.v4 .section-index a:hover b, .v4 .section-index a:focus-visible b { opacity: 1; transform: none; }
.v4 .section-index a:hover, .v4 .section-index a[aria-current="true"] { color: var(--ink); }
.v4 .section-index a[aria-current="true"] i { width: 26px; background: var(--thread); }

/* ---------- 10. Tier cards: ruled cells, not boxes ---------- */
.v4 .tiers { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.v4 .tier { position: relative; background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 28px 30px; gap: 16px; }
.v4 .tier h3 { text-align: left; font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.045em; }
.v4 .tiers .tier h3::before { content: counter(tier, decimal-leading-zero); display: block; margin-bottom: 14px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.13em; color: var(--thread); }
.v4 .tier > p { margin: 0; text-align: left; max-width: none; color: var(--ink-2); }
.v4 .tier.recommended { background: var(--thread-soft); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: 0; box-shadow: inset 0 2px 0 var(--thread); }
.v4 .tier.recommended::before {
  content: "Most first drops start here"; position: absolute; top: 34px; right: 24px;
  font: 500 0.6rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--thread);
}
.v4 .tier .btn { align-self: flex-start; }
.v4 .tier.recommended .btn { background: var(--thread); color: var(--thread-ink); border-color: var(--thread); outline: 0; }
@media (max-width: 420px) { .v4 .tier.recommended::before { position: static; order: -1; } }

/* ---------- 11. Spec lists + care label as an instrument readout ---------- */
.v4 .spec > div { border-top: 1px solid var(--line); grid-template-columns: 88px 1fr; }
.v4 .spec > div:last-child { border-bottom: 1px solid var(--line); }
.v4 .spec dt, .v4 .care-label dt { font: 500 0.64rem/1.9 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.v4 .spec dd, .v4 .care-label dd { font-weight: 500; }
.v4 .care-label { background: var(--surface); border: 1px solid var(--line-2); padding: 0; box-shadow: none; }
.v4 .care-label-inner { border: 0; padding: 24px 26px 26px; }
.v4 .label-title { font: 500 0.66rem/1.6 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--thread); border-bottom: 1px solid var(--line); width: auto; padding-bottom: 12px; margin-bottom: 14px; }
.v4 .care-label dl > div { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.v4 .care-label dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- 12. Category tiles ---------- */
.v4 .tile-media .img-ph { height: clamp(220px, 26vw, 320px); transition: border-color 300ms; }
.v4 .tile-media h3 {
  background: var(--bg); border: 1px solid var(--line-2); outline: 0; padding: 8px 12px;
  font-size: 0.98rem; letter-spacing: -0.02em; transition: color 300ms, border-color 300ms;
}
.v4 .tile a:hover h3 { color: var(--thread); border-color: var(--thread); outline: 0; }
.v4 .tile a:hover .img-ph { border-color: var(--thread); }
.v4 .tile p { color: var(--ink-3); }

/* ---------- 13. Steps: oversized numerals on a rule ---------- */
.v4 .steps { gap: 0 32px; }
.v4 .steps li { background: transparent; border: 0; border-top: 1px solid var(--line-2); padding: 26px 0 40px; }
.v4 .steps li::before {
  display: block; border: 0; outline: 0; padding: 0; margin-bottom: 26px;
  font-weight: 500; font-stretch: 100%; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 0.85; letter-spacing: -0.07em; color: var(--thread);
}
.v4 .steps li:last-child { background: transparent; border-color: var(--thread); }
.v4 .steps li:last-child::before { color: var(--thread); }
.v4 .steps h3 { font-size: 1.2rem; }

/* ---------- 14. Comparison table ---------- */
.v4 .table-wrap { background: transparent; border: 0; border-top: 1px solid var(--line-2); }
.v4 .sheet th, .v4 .sheet td { border-bottom: 1px solid var(--line); padding: 16px 18px; }
.v4 .sheet thead th { background: transparent; border-bottom: 1px solid var(--line-2); font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.v4 .sheet tbody th { color: var(--ink-2); font-weight: 400; }
.v4 .sheet td { font-weight: 500; }
.v4 .sheet-compare thead th:nth-child(2) { background: var(--thread); color: var(--thread-ink); outline: 0; }
.v4 .sheet-compare td:nth-child(2) { background: var(--thread-soft); border-left: 1px solid var(--thread); border-right: 1px solid var(--thread); }

/* ---------- 15. Case + quote cards ---------- */
.v4 .case { background: transparent; border: 1px solid var(--line); }
.v4 .case .img-ph { border: 0; border-bottom: 1px solid var(--line); }
.v4 .case h3 { font-size: 1.3rem; }
.v4 .quote-card { background: transparent; border: 1px solid var(--line); padding: 30px 28px; }
.v4 .quote-card::before { content: "\201C"; width: auto; border: 0; font-size: 4.2rem; line-height: 0.6; height: 0.4em; color: var(--thread); }
.v4 .quote-card blockquote { font-size: 1.1rem; letter-spacing: -0.015em; }

/* ---------- 16. FAQ ---------- */
.v4 .faq { max-width: 980px; margin: 0; border-top: 1px solid var(--line-2); }
.v4 .faq details { border-bottom: 1px solid var(--line); }
.v4 .faq summary { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; padding: 24px 0; }
.v4 .faq summary::before { font: 500 0.7rem/2.4 var(--mono); letter-spacing: 0.08em; color: var(--ink-3); min-width: 3.2em; }
.v4 .faq summary::after {
  width: 16px; height: 16px; margin-top: 6px; background: var(--ink-2); transition: transform 500ms var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.25 0h1.5v16h-1.5zM0 7.25h16v1.5H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.25 0h1.5v16h-1.5zM0 7.25h16v1.5H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v4 .faq summary:hover::after { transform: rotate(90deg); }
.v4 .faq details[open] summary::after { transform: rotate(45deg); background: var(--thread); }
.v4 .faq details[open] summary, .v4 .faq details[open] summary::before { color: var(--thread); }
.v4 .faq .a { padding-left: calc(3.2em + 14px); color: var(--ink-2); }
.v4 .after-faq { margin: 28px 0 0; text-align: left; color: var(--ink-2); }

/* ---------- 17. Forms: underlined fields, mono labels ---------- */
.v4 .alt .form, .v4 .dark .form { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 3.4vw, 40px); }
.v4 .field > label, .v4 .field legend { font: 500 0.66rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.v4 .field small { font-family: var(--font); letter-spacing: 0; text-transform: none; }
.v4 .field input[type="text"], .v4 .field input[type="email"], .v4 .field input[type="tel"], .v4 .field input[type="date"], .v4 .field select, .v4 .field textarea,
.v4 .news-form input, .v4 .search-form input {
  background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 12px 0;
}
.v4 .field select { background-color: var(--surface); padding-left: 2px; }
.v4 .field textarea { border: 1px solid var(--line-2); padding: 12px 14px; }
.v4 .field input:focus, .v4 .field select:focus, .v4 .field textarea:focus, .v4 .news-form input:focus { border-color: var(--thread); box-shadow: 0 1px 0 var(--thread); }
.v4 .field input[type="file"] { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.v4 .chip-check span { background: transparent; border: 1px solid var(--line-2); font-size: 0.86rem; }
.v4 .chip-check span:hover { border-color: var(--ink-2); }
.v4 .chip-check input:checked + span { background: var(--thread); border-color: var(--thread); color: var(--thread-ink); outline: 0; }
.v4 .radios input, .v4 .check input { accent-color: var(--thread); }
.v4 .form-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; }
.v4 .form-done { background: var(--surface); border: 1px solid var(--thread); outline: 0; }

/* ---------- 18. Footer: one big line, then mono columns ---------- */
.v4 .site-footer { background: var(--bg); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); }
.v4 .footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: 48px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.075em;
}
.v4 .footer-cta .orbit { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); }
.v4 .footer-cta .orbit svg { width: 40%; height: 40%; }
.v4 .footer-cta:hover span:first-child { color: var(--thread); }
.v4 .footer-brand { border-bottom: 1px solid var(--line); }
.v4 .footer-grid h2 { font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.v4 .footer-grid a { color: var(--ink-2); }
.v4 .footer-grid a:hover { color: var(--ink); text-decoration: none; }
.v4 .footer-bottom { border-top: 1px solid var(--line); font: 0.66rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.v4 .footer-bottom a:hover { color: var(--thread); }

/* ---------- 19. WhatsApp float + mobile bar ---------- */
.v4 .wa-float { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.v4 .mobile-bar { background: var(--bg); border-top: 1px solid var(--line); }

/* ---------- 20. Scroll reveal (classes added by site.js; none without JS or with reduced motion) ---------- */
.v4 .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); transition-delay: var(--d, 0ms); }
.v4 .reveal.in { opacity: 1; transform: none; }

/* ---------- 21. Real photos in image slots ---------- */
.v4 .img-ph.has-img { background-image: none; }
.v4 .img-ph.has-img img { filter: saturate(0.92) contrast(1.02); transition: transform 900ms var(--ease); }
.v4 .tile a:hover .img-ph.has-img img { transform: scale(1.04); }

/* ---------- 22. Inner pages (rolled out site-wide) ---------- */
.v4 .hero:not(.hero-home) h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 0.9; letter-spacing: -0.065em; max-width: 17ch; margin-left: -0.03em; }
.v4 .hero:not(.hero-home) h1 em { color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
@supports not (-webkit-text-stroke: 1px black) { .v4 .hero:not(.hero-home) h1 em { color: var(--thread); } }
.v4 .hero:not(.hero-home) .lede { margin: 26px 0 28px; }
.v4 .hero:not(.hero-home) .hero-grid { grid-template-columns: 1fr; }
@media (min-width: 960px) { .v4 .hero:not(.hero-home) .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 56px; } }
.v4 .hero:not(.hero-home) .hero-media { max-width: 440px; }
.v4 .hero:not(.hero-home) .hero-media .care-label { background: var(--bg); }

.v4 .crumbs { font: 500 0.66rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; }
.v4 .crumbs a { color: var(--ink-2); }
.v4 .crumbs a:hover { color: var(--thread); }
.v4 .crumbs li[aria-current] { color: var(--thread); }

/* Key-number rows: readout cells on a rule */
.v4 .spec-row { gap: 0; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); margin-bottom: 44px; }
.v4 .spec-row li { background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: 0; padding: 22px 18px; text-align: left; }
.v4 .spec-row .k { font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.v4 .spec-row .v { font-weight: 500; font-stretch: 100%; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.05em; color: var(--thread); margin-top: 8px; }
.v4 .spec-row .v .ph { font-size: 0.5em; }

/* Lists and layout bits */
.v4 .rules li, .v4 .rules li:last-child { border-color: var(--line); border-top-style: solid; border-bottom-style: solid; }
.v4 .rules strong { color: var(--ink); font-weight: 600; }
.v4 .aside-list li, .v4 .aside-list li:last-child { border-color: var(--line); border-top-style: solid; border-bottom-style: solid; }
.v4 .aside-list .k { font: 500 0.64rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.v4 .grid:not(.tiers) > .tier { border: 1px solid var(--line); }
.v4 .grid:not(.tiers) > .tier h3::before { content: none; }
.v4 .sheet-invoice .total > * { border-top: 1px solid var(--line-2); color: var(--thread); }
.v4 .soon { font: 500 0.6rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); }
.v4 .chips-static span { background: transparent; border: 1px solid var(--line-2); }
.v4 .page-note { background: var(--thread-soft); border: 1px solid var(--thread); color: var(--ink); font-family: var(--mono); font-size: 0.76rem; }

/* Centred bands (closing calls to action) */
.v4 .center .eyebrow { justify-content: center; }
.v4 .center h2 { max-width: 20ch; }
.v4 .center .section-intro { margin-left: auto; margin-right: auto; }

/* FAQ page groups: left-aligned like everything else */
.v4 .faq-group h2, .v4 .faq-group h2::after { text-align: left; margin-left: 0; }
.v4 .faq-group + .faq-group { margin-top: 0; }

/* Long-form text (guides, legal) keeps sentence case */
.v4 .prose h2 { text-transform: none; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.2; margin: 44px 0 14px; max-width: none; }
.v4 .prose h2:first-child { margin-top: 0; }
.v4 .prose p, .v4 .prose li { color: var(--ink-2); }

/* Thank-you and 404 */
.v4 .thanks { background: var(--bg); border-bottom: 1px solid var(--line); }
.v4 .thanks h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 0.92; letter-spacing: -0.065em; max-width: 18ch; }
.v4 .thanks .lede { color: var(--ink-2); margin: 26px 0 30px; }
.v4 .hero-media .care-label { z-index: 2; }

/* ---------- 23. Home page, reference layout (ticker, full-bleed hero, split rows, cards) ---------- */
/* Ticker strip under the header */
.v4 .ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--warm); }
.v4 .ticker-track { display: flex; width: max-content; align-items: center; gap: 22px; padding: 12px 0; animation: v4-ticker 60s linear infinite; }
.v4 .ticker span { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.v4 .ticker i { font-style: normal; color: var(--thread); font-size: 0.7rem; }
.v4 .ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes v4-ticker { to { transform: translateX(-50%); } }

/* Full-bleed hero: photo behind, dark shade, centred copy */
.v4 .hero-bg { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(86svh, 820px); padding: clamp(88px, 12vw, 150px) 0; border-bottom: 1px solid var(--line); }
.v4 .hero-bg::before { content: none; }
.v4 .hero-bg > .img-ph { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0; }
.v4 .hero-bg > .img-ph img { filter: grayscale(0.25) contrast(1.05); animation: v4-hero-zoom 18s ease-out both; }
@keyframes v4-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.v4 .hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 12, 20, 0.55) 0%, rgba(9, 12, 20, 0.72) 55%, rgba(9, 12, 20, 0.94) 100%); }
:root.v4[data-theme="light"] .hero-shade { background: linear-gradient(180deg, rgba(9, 12, 20, 0.5) 0%, rgba(9, 12, 20, 0.68) 60%, rgba(9, 12, 20, 0.86) 100%); }
.v4 .hero-center { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.v4 .hero-bg .eyebrow { justify-content: center; }
.v4 .hero-bg h1 { max-width: 15ch; margin-left: auto; margin-right: auto; }
.v4 .hero-bg h1 .kicker { margin-left: 0; }
.v4 .hero-bg .lede { max-width: 52ch; margin: 28px auto 32px; }
.v4 .hero-bg .cta-row { justify-content: center; }
/* The hero always sits on a dark photo, so its text stays light in both themes. */
.v4 .hero-bg, .v4 .hero-bg h1, .v4 .hero-bg .lede, .v4 .hero-bg .kicker { color: #eceae4; }
.v4 .hero-bg .lede, .v4 .hero-bg .kicker { color: #c9cbc6; }
.v4 .hero-bg .outline-word { -webkit-text-stroke-color: #eceae4; }
.v4 .hero-bg .btn-ghost { color: #eceae4; border-color: rgba(236, 234, 228, 0.45); }
.v4 .hero-bg .btn-ghost:hover { border-color: #fff; color: #fff; }
.v4 .hero-bg .hero-center > * { animation: v4-rise 1.1s var(--ease) both; }
.v4 .hero-bg .hero-center > :nth-child(2) { animation-delay: 90ms; }
.v4 .hero-bg .hero-center > :nth-child(3) { animation-delay: 180ms; }
.v4 .hero-bg .hero-center > :nth-child(4) { animation-delay: 270ms; }

/* Image + text split rows (about and the three features) */
.v4 .split-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .v4 .split-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); }
  .v4 .feature-flip .split-media { order: 2; }
}
.v4 .split-media .img-ph { aspect-ratio: 4 / 3; }
.v4 .split-copy h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); max-width: 18ch; margin-bottom: 22px; }
.v4 .split-copy p { color: var(--ink-2); max-width: 56ch; }
.v4 .split-copy .cta-row { margin-top: 26px; gap: 14px 24px; }
.v4 .feature { padding: clamp(64px, 8vw, 110px) 0; }

/* Dark bands with a centred head (products, process) */
.v4 .band { background: var(--warm); }
.v4 .band-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); }
.v4 .band-head .eyebrow { justify-content: center; }
.v4 .band-head h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.v4 .band-head h2 em { color: var(--thread); font-style: normal; }
.v4 .band-head .section-intro { margin: 0 auto; text-align: center; }
.v4 .band-head-left { text-align: left; margin-left: 0; }
.v4 .band-head-left .eyebrow { justify-content: flex-start; }
.v4 .band-head-left h2 { margin-left: 0; }
.v4 .band-link { text-align: center; margin: 40px 0 0; max-width: none; }

/* Product cards: photo, title, line, quote button */
.v4 .product-cards { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.v4 .product-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); padding: 0 0 22px; transition: border-color 300ms, transform 600ms var(--ease); }
.v4 .product-card:hover { border-color: var(--thread); transform: translateY(-3px); }
.v4 .product-card-media { display: block; overflow: hidden; }
.v4 .product-card-media .img-ph { border: 0; border-bottom: 1px solid var(--line); }
.v4 .product-card:hover .product-card-media img { transform: scale(1.04); }
.v4 .product-card h3 { margin: 20px 22px 8px; font-size: 1.2rem; }
.v4 .product-card h3 a { color: var(--ink); text-decoration: none; }
.v4 .product-card h3 a:hover { color: var(--thread); }
.v4 .product-card p { margin: 0 22px 20px; color: var(--ink-2); font-size: 0.92rem; }
.v4 .product-card .btn { margin: auto 22px 0; align-self: flex-start; min-height: 44px; padding: 10px 18px; }

/* Process cards with icons */
.v4 .process-cards { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); counter-reset: proc; }
.v4 .process-card { position: relative; background: var(--bg); border: 1px solid var(--line); padding: 32px 26px 30px; text-align: center; counter-increment: proc; }
.v4 .process-card::before { content: counter(proc, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); }
.v4 .process-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--thread); margin-bottom: 18px; transition: background-color 300ms, color 300ms; }
.v4 .process-icon svg { width: 28px; height: 28px; }
.v4 .process-card:hover .process-icon { background: var(--thread); color: var(--thread-ink); border-color: var(--thread); }
.v4 .process-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.v4 .process-card p { margin: 0 auto; color: var(--ink-2); font-size: 0.92rem; max-width: 34ch; }

@media (prefers-reduced-motion: reduce) {
  .v4 .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .v4 .hero-bg > .img-ph img { animation: none; }
}
.v4 .hero-bg .eyebrow { color: #a9b3ff; }
.v4 .hero-bg .eyebrow i { background: #a9b3ff; }
.v4 .hero-shade { background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(9, 12, 20, 0.55), transparent 75%), linear-gradient(180deg, rgba(9, 12, 20, 0.6) 0%, rgba(9, 12, 20, 0.74) 55%, rgba(9, 12, 20, 0.95) 100%); }
@media (min-width: 900px) { .v4 .product-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .v4 .process-cards { grid-template-columns: repeat(3, 1fr); } }
.v4 .band { background: var(--warm-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- 24. Inner pages, reference layout ---------- */
/* Photo banner: breadcrumb + H1 centred over a shaded photo */
.v4 .page-banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(340px, 52svh, 520px); padding: clamp(72px, 9vw, 120px) 0; border-bottom: 1px solid var(--line); background: #090c14; }
.v4 .page-banner::before { content: none; }
.v4 .page-banner > .img-ph { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0; max-width: none; }
.v4 .page-banner > .img-ph img { filter: grayscale(0.2) contrast(1.05); animation: v4-hero-zoom 16s ease-out both; }
.v4 .page-banner .hero-center { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.v4 .page-banner .crumbs { margin-bottom: 22px; color: #b8bac0; }
.v4 .page-banner .crumbs ol { justify-content: center; }
.v4 .page-banner .crumbs a { color: #d8d9dc; }
.v4 .page-banner .crumbs li[aria-current] { color: #a9b3ff; }
.v4 .page-banner h1 { color: #eceae4; max-width: 18ch; margin: 0 auto; font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.v4 .page-banner h1 em { color: transparent; -webkit-text-stroke: 1.2px #eceae4; }
.v4 .page-banner h1 .ph { color: #a9b3ff; }
@supports not (-webkit-text-stroke: 1px black) { .v4 .page-banner h1 em { color: #a9b3ff; } }
.v4 .page-banner .hero-center > * { animation: v4-rise 1s var(--ease) both; }
.v4 .page-banner .hero-center > :nth-child(2) { animation-delay: 90ms; }

/* Intro under the banner: centred copy, or copy + fact card */
.v4 .intro { padding: clamp(56px, 7vw, 92px) 0; border-top: 0; }
.v4 .intro .wrap > div:first-child { text-align: center; }
.v4 .intro .lede { margin: 0 auto 28px; max-width: 60ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); }
.v4 .intro .cta-row { justify-content: center; }
.v4 .intro .answer { margin: 36px auto 0; text-align: left; }
.v4 .intro p:not(.lede):not(.note) { margin-left: auto; margin-right: auto; }
.v4 .intro-aside .intro-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .v4 .intro-aside .intro-grid { grid-template-columns: 1.15fr 0.85fr; gap: 64px; } }
.v4 .intro-aside .wrap > div:first-child { text-align: left; }
.v4 .intro-aside .lede { margin-left: 0; }
.v4 .intro-aside .cta-row { justify-content: flex-start; }
.v4 .intro-aside .answer { margin-left: 0; }
.v4 .intro .hero-media { max-width: none; justify-self: stretch; }
.v4 .intro .hero-media .care-label { position: static; width: auto; margin: 0; background: var(--surface); }

/* Section heads centred, the way the reference sets them */
.v4 main .section:not(.intro) > .wrap > h2,
.v4 main .section:not(.intro) > .wrap > .section-intro { margin-left: auto; margin-right: auto; text-align: center; }
.v4 main .section:not(.intro) > .wrap > h2 { max-width: 22ch; }
.v4 main .section > .wrap > h2 + .section-intro { margin-top: -6px; }
.v4 .faq-group h2 { text-align: center; margin-left: auto; margin-right: auto; }
.v4 .faq { margin-left: auto; margin-right: auto; }
.v4 .after-faq { text-align: center; }

/* Alternate bands, like the reference's light/dark rhythm */
.v4 .section.alt, .v4 .section.dark { background: var(--warm-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v4 .section.alt + .section, .v4 .section + .section.alt { border-top-color: var(--line); }

/* Tiles become product cards: photo, title below, line */
.v4 .tiles { gap: 18px; }
@media (min-width: 820px) { .v4 .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v4 .tiles-mosaic .tile:nth-child(5n + 1) { grid-column: auto; } }
.v4 .tile a { display: flex; flex-direction: column; height: 100%; background: var(--bg); border: 1px solid var(--line); transition: border-color 300ms, transform 600ms var(--ease); }
.v4 .tile a:hover { border-color: var(--thread); transform: translateY(-3px); }
.v4 .tile-media { overflow: hidden; }
.v4 .tile-media .img-ph { height: auto; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--line); }
.v4 .tile-media h3 { position: static; max-width: none; background: none; border: 0; outline: 0; padding: 18px 20px 6px; font-size: 1.15rem; }
.v4 .tile a:hover h3 { border: 0; outline: 0; }
.v4 .tile p { margin: 0 20px 20px; font-size: 0.9rem; color: var(--ink-2); }
.v4 .alt .tile a { background: var(--bg); }

/* Steps become process cards: number in a circle, centred */
.v4 .steps { gap: 18px; }
.v4 .steps li, .v4 .steps li:last-child { background: var(--bg); border: 1px solid var(--line); padding: 30px 24px 30px; text-align: center; }
.v4 .steps li::before {
  display: inline-grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: 1.25rem; line-height: 1; letter-spacing: -0.04em; color: var(--thread);
}
.v4 .steps li:hover::before { background: var(--thread); color: var(--thread-ink); border-color: var(--thread); }
.v4 .steps li:last-child::before { color: var(--thread); }
.v4 .steps p { margin: 0 auto; max-width: 34ch; }

/* Tier and case cards as boxed cards with a gap */
.v4 .tiers { gap: 18px; border: 0; }
.v4 .tier, .v4 .tier.recommended { border: 1px solid var(--line); background: var(--bg); }
.v4 .tier.recommended { box-shadow: inset 0 3px 0 var(--thread); }
.v4 .alt .case, .v4 .alt .quote-card, .v4 .alt .care-label { background: var(--bg); }
.v4 .alt .table-wrap { background: var(--bg); }

/* Closing call-to-action strip in the accent colour */
.v4 main .section.cta-band { background: var(--thread); border: 0; padding: clamp(56px, 7vw, 88px) 0; }
.v4 main .section.cta-band h2 { color: var(--thread-ink); max-width: 24ch; }
.v4 main .section.cta-band .section-intro,
.v4 main .section.cta-band p { color: var(--thread-ink); opacity: 0.85; }
.v4 main .section.cta-band .btn-primary { background: var(--thread-ink); color: var(--thread); border-color: var(--thread-ink); }
.v4 main .section.cta-band .btn-ghost { color: var(--thread-ink); border-color: var(--thread-ink); background: transparent; }
.v4 main .section.cta-band .text-link { color: var(--thread-ink); border-color: var(--thread-ink); }
.v4 main .section.cta-band .eyebrow, .v4 main .section.cta-band .eyebrow span { color: var(--thread-ink); }
.v4 .hero.page-banner h1 { color: #eceae4; max-width: 18ch; margin: 0 auto; font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.v4 .hero.page-banner h1 em { color: transparent; -webkit-text-stroke: 1.2px #eceae4; }
.v4 .cta-row.after-table, .v4 .section-link { justify-content: center; text-align: center; }
.v4 .intro .wrap.narrow { text-align: center; }
.v4 .intro .wrap.narrow > p { margin-left: auto; margin-right: auto; }
.v4 .intro .wrap.narrow .cta-row, .v4 .intro .wrap.narrow .search-form { justify-content: center; margin-left: auto; margin-right: auto; }
/* "Most first drops start here" badge: a line of its own above the title, never overlapping it */
.v4 .tier.recommended::before { position: static; order: -1; display: block; margin: 0 0 2px; line-height: 1.6; }
/* Keep titles level across a row that contains a recommended card */
.v4 .grid:has(> .tier.recommended) > .tier:not(.recommended)::before { content: "\00a0"; display: block; order: -1; margin: 0 0 2px; font: 500 0.6rem/1.6 var(--mono); }

/* ---------- 25. Text on photos stays light in both themes ---------- */
.v4 .hero.hero-bg h1, .v4 .hero.hero-bg h1 .kicker, .v4 .hero.hero-bg .lede,
.v4 .hero.page-banner h1, .v4 .hero.page-banner .crumbs { color: #eceae4; }
.v4 .hero.hero-bg h1 .kicker, .v4 .hero.hero-bg .lede { color: #d6d8db; }
.v4 .hero.hero-bg .eyebrow, .v4 .hero.hero-bg .eyebrow span { color: #b8c0ff; }
.v4 .hero.hero-bg .eyebrow i { background: #b8c0ff; box-shadow: none; }
.v4 .hero.hero-bg .outline-word, .v4 .hero.page-banner h1 em { -webkit-text-stroke-color: #eceae4; color: transparent; }
/* Same shade over photos in light mode as in dark, so light text always has a dark ground */
:root.v4[data-theme="light"] .hero-shade { background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(9, 12, 20, 0.55), transparent 75%), linear-gradient(180deg, rgba(9, 12, 20, 0.62) 0%, rgba(9, 12, 20, 0.74) 55%, rgba(9, 12, 20, 0.92) 100%); }
:root.v4[data-theme="light"] .hero.hero-bg .btn-primary { background: #2437d8; border-color: #2437d8; color: #fff; }
/* Light theme: secondary greys darkened to meet 4.5:1 on paper and on the tinted bands */
:root.v4[data-theme="light"] { --ink-2: #3f434a; --ink-3: #575b62; }
@media (min-width: 640px) { .v4 .spec-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }