/* v0.600 S-HOME-2: shared stylesheet for the campaign-facing /for/{slug} vertical pages and /compare.
   Token reuse per the Ship C build plan §2.1/§5 — no new brand
   colours (tokens.css's --brand-ink/--brand-gold/--surface-paper/--surface-warm/--border/--on-ink
   families only). One shared skeleton (HANDOFF §3's 11-block template), filled per page: .v-hero,
   .v-pain, .v-legal-line, .v-steps, .v-proof, .v-not, .v-cta-repeat, .v-footer-slot.
   HANDOFF §3 rule: no nav, no Sign in, no menu; the logo is not a link; language switch allowed. */
:root {
  --v-ink: var(--brand-ink, #14253D);
  --v-gold: var(--brand-gold, #C3A14B);
  --v-gold-dark: var(--brand-gold-dark, #8a6d1f);
  --v-cream: var(--surface-paper, #FAF8F3);
  --v-surface: var(--surface-warm, #fffdf8);
  --v-border: var(--border, #e3ddd0);
  --v-on-ink: var(--on-ink, #FAF8F3);
  --v-muted: #6B7280;
}
*{ box-sizing:border-box; }
body.v-body{
  margin:0; font-family:'Outfit',-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  color:var(--v-ink); background:var(--v-cream); line-height:1.6;
  padding-bottom:64px; padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
.v-wrap{ max-width:var(--container-marketing, 1040px); margin:0 auto; padding:0 20px; }
a{ color:var(--v-gold-dark); }

/* header — no nav, no sign-in; the logo is NOT a link (HANDOFF §3) */
.v-topbar{ display:flex; align-items:center; gap:12px; padding:14px 20px;
  max-width:var(--container-marketing, 1040px); margin:0 auto;
  padding-top:max(14px, env(safe-area-inset-top)); }
.v-topbar__spacer{ flex:1; }
/* v0.601 S-CG1-D1: 44 px, the size of every other header (UX/libs/topbar.css) and of the home page, was 32 px. Register
   2026-09-29 16:23 effect 4 and 17:03 effect 3. */
.v-topbar .brand-lockup{ height:44px; width:auto; color:var(--v-ink); display:block; }

/* hero */
.v-hero{ background:var(--v-ink); color:var(--v-cream); padding:40px 0 40px; }
.v-hero__inner{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:900px){ .v-hero__inner{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:center; } }
.v-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--v-gold); }
.v-pain{ margin:14px 0 0; font-size:17px; line-height:1.4; color:#DCE1EA; font-style:italic; }
.v-title{ margin:12px 0 16px; font-size:clamp(28px,4.4vw,44px); line-height:1.1; font-weight:800; letter-spacing:-.02em; }
.v-legal-line{ margin:0 0 24px; font-size:14.5px; line-height:1.5; color:#DCE1EA; border-left:3px solid var(--v-gold); padding-left:12px; max-width:560px; }
/* v0.601 S-CG1-D2: ONE primary-button treatment on the home page and every /for/* page (register 2026-09-29 16:18
   effect 3 and 17:06 effect 2): 19 px / weight 800 / at least 56 px high / radius 14, the label may wrap to two lines
   (the never-wrap rule is gone: the French and German creators labels overflowed a 375 px phone with it), auto-width
   and left-aligned on desktop, full-width on phones (520 px and under). The sub-line is its own line under the button on
   phones; beside the button only in the navy hero above 520 px; always under it, in dark ink, on the cream repeat. */
.v-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.v-cta{ min-height:56px; padding:8px 28px; border-radius:14px; background:var(--v-gold); color:var(--v-ink);
  font-size:19px; font-weight:800; line-height:1.25; display:inline-flex; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; white-space:normal; box-sizing:border-box; }
.v-cta-sub{ font-size:14px; color:#DCE1EA; margin:0; }
@media (max-width:520px){
  .v-cta-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .v-cta{ display:flex; width:100%; padding:8px 16px; }
}
/* the repeated button sits on the cream ground: auto-width left-aligned block, the sub-line on its own dark line under it */
.v-cta-repeat .v-cta{ display:flex; width:fit-content; max-width:100%; }
.v-cta-repeat .v-cta-sub{ display:block; margin:14px 0 0; color:var(--v-ink); font-weight:400; }   /* v0.603: the caption is a footnote to the button, not a second headline (400 like the hero's), 14 px under the button */
@media (max-width:520px){ .v-cta-repeat .v-cta{ width:100%; } }
.v-ring-visual{ display:none; }
@media (min-width:900px){ .v-ring-visual{ display:flex; justify-content:center; margin-top:24px; } }

/* steps */
.v-steps{ padding-top:44px; padding-bottom:8px; }   /* v0.599 review: longhands — a shorthand here zeroed .v-wrap's 20px gutter on phones */
.v-steps h2{ margin:0 0 20px; font-size:22px; font-weight:700; }
.v-steps__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
@media (min-width:900px){ .v-steps__list{ flex-direction:row; gap:32px; } .v-steps__item{ border-top:2px solid var(--v-ink); padding-top:14px; } }
.v-steps__item{ display:flex; gap:12px; font-size:16px; line-height:1.5; }
.v-steps__num{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--v-ink);
  color:var(--v-gold); font-size:13px; font-weight:700; display:grid; place-items:center; }
@media (min-width:900px){ .v-steps__num{ display:none; } .v-steps__item{ display:block; } }
.v-steps__num-desktop{ display:none; font-size:13px; font-weight:700; color:var(--v-gold-dark); margin-bottom:6px; }
@media (min-width:900px){ .v-steps__num-desktop{ display:block; } }

.v-more{ margin:16px 0 0 38px; }
@media (min-width:900px){ .v-more{ margin-left:0; } }
.v-more summary{ list-style:none; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--v-gold-dark); }
.v-more summary::-webkit-details-marker{ display:none; }
.v-more p{ margin:8px 0 0; font-size:14px; line-height:1.55; color:#3C4556; }

/* proof */
.v-proof{ margin:28px 0 0; padding:22px; background:var(--v-surface); border:1px solid var(--v-border); border-radius:14px; }
.v-proof__label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6B5A2E; }
.v-proof__title{ font-size:26px; font-weight:800; margin:6px 0 8px; letter-spacing:-.01em; }
.v-proof__body{ margin:0; font-size:15.5px; line-height:1.5; color:#3C4556; }
.v-proof--plain{ background:none; border:none; padding:22px 0 0; }
.v-proof--plain .v-proof__body{ font-size:16.5px; font-weight:600; color:var(--v-ink); }

/* what it does not do */
.v-not{ padding-top:20px; }   /* v0.599 review: longhand, keeps .v-wrap's side gutter */
.v-not h2{ margin:0 0 6px; font-size:16px; font-weight:700; }
.v-not p{ margin:0; font-size:14.5px; line-height:1.55; color:#3C4556; }

/* CTA repeated */
.v-cta-repeat{ padding-top:56px; padding-bottom:0; }   /* v0.601 S-CG1-A3/D4: 48 px above the button and 0 below the sub-line + the footer's 48 px margin (spec 203); was 30 / 8 */   /* v0.599 review: longhand, keeps .v-wrap's side gutter */

/* marketing footer (server-injected via _marketing_footer_html): v0.600 S-HOME-PHONE moved this
   block VERBATIM to UX/libs/marketing-footer.css — the home page ("/") needed the same rules and
   never loaded vertical.css, so a small SHARED stylesheet is now loaded by both instead of a second
   copy drifting here. Every page that had vertical.css already (the 7 /for/{slug} pages + /compare)
   now loads marketing-footer.css alongside it. */

[data-theme="dark"] body.v-body, :root:not([data-theme="light"]) body.v-body{ background:#0E1726; color:#E8EDF5; }
[data-theme="dark"] .v-topbar .brand-lockup, :root:not([data-theme="light"]) .v-topbar .brand-lockup{ color:#E8EDF5; }
[data-theme="dark"] .v-proof, :root:not([data-theme="light"]) .v-proof{ background:#16223a; border-color:#2a3852; }
[data-theme="dark"] .v-proof__body, :root:not([data-theme="light"]) .v-proof__body{ color:#c8d0de; }
[data-theme="dark"] .v-not p, :root:not([data-theme="light"]) .v-not p{ color:#c8d0de; }
[data-theme="dark"] .v-cta-repeat .v-cta-sub, :root:not([data-theme="light"]) .v-cta-repeat .v-cta-sub{ color:#DCE1EA; }   /* v0.601 S-CG1-D3: the repeat section is on the dark ground here */

/* v0.599 review: on phones the bottom version chip shows the number only (same rule as the landing page), so the English brand
   baseline in the motto bar is never truncated. */
@media(max-width:520px){ .ver-pre{ display:none; } .ver-stage{ display:none; } }
/* v0.599 review: each /compare question is a heading (a question per card, screen-reader navigable), styled as the old <strong>. */
.v-qa__q{ margin:0 0 4px; font-size:inherit; font-weight:700; line-height:1.4; }

/* v0.600.1 (fix): the /compare matrix. These rules lived ONLY in the landing page's inline <style> and were not
   moved when the matrix moved to /compare (v0.600.0 S-HOME-2): the table then laid out at its natural width,
   overflowed the body (documentElement.scrollWidth 743 at a 375-440px viewport), and iOS Safari shrank the whole
   page to fit it. .matrix-scroll is the scroll container: the table's excess scrolls INSIDE it, never the page.
   Scoped under #compare-matrix so no other vertical page is affected; tests/e2e/specs/195 pins the outcome. */
#compare-matrix .matrix-scroll{ overflow-x:auto; border:1px solid var(--v-border); border-radius:12px; background:var(--v-surface); }
#compare-matrix table.matrix{ border-collapse:collapse; width:100%; min-width:680px; }
#compare-matrix table.matrix th, #compare-matrix table.matrix td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--v-border); }
#compare-matrix table.matrix thead th{ font-size:14px; vertical-align:top; }
#compare-matrix table.matrix thead th .sub{ display:block; font-weight:400; font-size:11px; color:var(--v-muted); margin-top:4px; }
#compare-matrix table.matrix thead th .dep{ display:block; font-weight:700; font-size:10.5px; margin-top:7px; line-height:1.35; }
#compare-matrix .dep--bad{ color:var(--verdict-danger,#B91C1C); }
#compare-matrix .dep--good{ color:var(--verdict-ok,#0F766E); }
#compare-matrix table.matrix tbody th{ text-align:left; font-weight:600; font-size:14px; max-width:320px; }
#compare-matrix .col-cosigna{ background:rgba(195,161,75,.10); }
#compare-matrix th.col-cosigna{ border-top:3px solid var(--v-gold); border-radius:10px 10px 0 0; }
#compare-matrix .cell{ font-size:20px; font-weight:800; }
#compare-matrix .cell--yes{ color:var(--verdict-ok,#0F766E); }
#compare-matrix .cell--no{ color:var(--verdict-danger,#B91C1C); opacity:.65; }
#compare-matrix .cell--part{ color:var(--v-gold); }
#compare-matrix .legend{ font-size:13px; color:var(--v-muted); margin:14px 0 0; }

/* v0.601 S2-3 (the stars PLAN, HANDOFF sections 3 and 6): the WAITLIST variant of the vertical
   template. A "Not available yet" chip after the eyebrow, a "What works today" box in place of the proof point, and the
   star button as the primary action (56 px, radius 14, 2 px navy border, 22 px icon). Tokens only, no new colour. */
.v-chip{ display:inline-block; margin:10px 0 0; padding:3px 12px; border:1px solid var(--v-gold); border-radius:999px;
  font-size:13px; font-weight:700; line-height:1.4; color:var(--v-gold); }
.v-star-row{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:420px; }
.star-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:8px 24px;
  border:2px solid var(--v-ink); border-radius:14px; background:var(--v-cream); color:var(--v-ink); font:inherit;
  font-size:19px; font-weight:800; line-height:1.25; cursor:pointer; box-sizing:border-box; text-align:center; }
.star-btn[hidden]{ display:none; }   /* the author display above would beat the UA [hidden] rule */
.star-btn:focus-visible{ outline:3px solid var(--v-gold); outline-offset:3px; }
.star-btn[disabled]{ opacity:.6; cursor:default; }   /* Saving */
.star-btn__icon{ flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.star-btn__count{ padding-left:10px; border-left:1.5px solid currentColor; }
.star-btn__count[hidden]{ display:none; }
/* Starred: navy fill, gold filled star, cream text. The hero ground is navy too, so the border turns gold to keep the shape visible. */
.star-btn[aria-pressed="true"]{ background:var(--v-ink); color:var(--v-cream); border-color:var(--v-gold); }
.star-btn[aria-pressed="true"] .star-btn__icon{ fill:var(--v-gold); stroke:var(--v-gold); }
.star-btn.is-error{ border-color:var(--verdict-danger,#B91C1C); }
.star-helper{ margin:0; font-size:14px; line-height:1.4; color:#DCE1EA; }
.star-helper:empty{ display:none; }
.star-helper.is-error{ color:#FCA5A5; }
.v-secondary{ font-size:15px; font-weight:600; color:var(--v-cream); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:520px){
  .v-star-row{ max-width:none; align-items:stretch; }
  .star-btn{ display:flex; width:100%; padding:8px 16px; }
  .v-secondary{ align-self:flex-start; }
}
.v-works{ margin:28px 0 0; padding:22px; background:var(--v-surface); border:1px solid var(--v-border); border-radius:14px; }
.v-works__title{ margin:0; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6B5A2E; }
.v-works__body{ margin:8px 0 0; font-size:16.5px; font-weight:600; line-height:1.5; color:var(--v-ink); }
[data-theme="dark"] .v-works, :root:not([data-theme="light"]) .v-works{ background:#16223a; border-color:#2a3852; }
[data-theme="dark"] .v-works__body, :root:not([data-theme="light"]) .v-works__body{ color:#c8d0de; }
[data-theme="dark"] .v-works__title, :root:not([data-theme="light"]) .v-works__title{ color:var(--v-gold); }

/* v0.603 (founder, phone, 2026-09-30): the logo is a link home on every page. */
.v-brand{ display:block; flex:0 0 auto; line-height:0; text-decoration:none; color:inherit; }
.v-brand:focus-visible{ outline:2px solid var(--v-gold-dark); outline-offset:4px; border-radius:6px; }

/* v0.603 (founder, phone, 2026-09-30): the flag language menu on the vertical pages. topbar.css is not loaded here, so its
   .lang-flag rules never applied: the trigger was a default grey button and the menu opened as three unstyled pills. Same
   object as the app and content chromes (a 44 px round trigger, a popover menu anchored right), on the cream header. */
.v-topbar .lang-flag{ position:relative; }
.v-topbar .lang-flag__btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; cursor:pointer;
  background:rgba(20,37,61,.06); border:1px solid rgba(20,37,61,.24); border-radius:999px; padding:10px 14px; min-width:44px; min-height:44px;
  font-size:15px; line-height:1; color:var(--v-ink); }
.v-topbar .lang-flag__caret{ font-size:9px; opacity:.85; }
.v-topbar .lang-flag__menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; background:#fff; border:1px solid var(--v-border);
  border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(20,37,61,.14); min-width:150px; }
.v-topbar .lang-flag__menu[hidden]{ display:none; }
.v-topbar .lang-flag__menu button{ display:block; width:100%; text-align:left; padding:8px 12px; border:0; background:none;
  border-radius:8px; font:inherit; font-size:14px; color:#14253D; cursor:pointer; }
.v-topbar .lang-flag__menu button:hover{ background:#F3EFE6; }
[data-theme="dark"] .v-topbar .lang-flag__btn, :root:not([data-theme="light"]) .v-topbar .lang-flag__btn{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#E8EDF5; }
[data-theme="dark"] .v-topbar .lang-flag__menu, :root:not([data-theme="light"]) .v-topbar .lang-flag__menu{ background:#16223a; border-color:#2a3852; }
[data-theme="dark"] .v-topbar .lang-flag__menu button, :root:not([data-theme="light"]) .v-topbar .lang-flag__menu button{ color:#E8EDF5; }
[data-theme="dark"] .v-topbar .lang-flag__menu button:hover, :root:not([data-theme="light"]) .v-topbar .lang-flag__menu button:hover{ background:#22314f; }