/* Green Dotter: variation pages for the homepage / Mac / Windows A/B test (13 Oct 2026).
   Spec: .docs/homepage-ab-2026-10-13/variation-spec.md  sections 3 to 6.
   Loaded after site.css and lp-panels.css (the panel rules moved there in the merge, 13 Oct 2026) on the
   homepage, the Mac and Windows pages (and the retired __ab pages).

   RULE (the download-buttons safety contract, CLAUDE.md): nothing in here may hide, collapse or
   re-size .dl-buttons, .lp-ctas, .dl-col, .dl-group or [data-dl-*] inside an @media block.
   A min-height is layout, not hiding, and is the only thing this file does to them.

   Polish pass, 13 Oct 2026 (v2): the nav keeps one height whichever download button the script puts in it
   (the two-line Windows one grew it 6px after paint, CLS .14); the nav links hide below 900px, not 760, because
   between the two the nav overflowed the viewport and lost its right-hand end; the compact bars and the
   Scheduler shot are now cut to the window itself (assets/v-compact-*.webp, v-scheduler-armed.webp, with
   transparent corners) so every figure is a window with one CSS shadow instead of a beige card inside a beige
   panel; the final band's Store block centres like the rest of the band; focus rings keep each control's own
   corner radius; FAQ answer links underline like every other link; Explore chips reach 44px on phones. */

/* ---------- tokens and base the variants rely on ---------- */
::selection { background: rgba(35, 165, 90, .22); color: var(--v-ink); }
html { scroll-padding-top: 76px; }

/* The homepage control styles these inline; the variant uses site.css, so match them here. */
body.v-home .nav-right { gap: 10px; }
.btn-win {
  background: #fff; color: var(--near-black);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.btn-win:hover { background: var(--surface-alt); }
.dl-group { display: inline-block; }
.dl-buttons { display: flex; gap: 12px; flex-wrap: nowrap; align-items: flex-start; }
.dl-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dl-req { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--v-panel-text); font-family: var(--mono); max-width: 175px; text-wrap: balance; }   /* #8a847d was 3.5:1 at 11px */
.nb { white-space: nowrap; }                     /* "64-bit" never breaks at its hyphen */
.dl-ico { flex-shrink: 0; }
/* The nav's download button is swapped in after paint; the Windows one has two lines and is 12px taller
   than the Mac one, which grew the nav and shifted the whole page. One height for both. */
@media (min-width: 761px) { .v-page .nav-inner { min-height: 68px; } }
/* Between 761 and 900px the full nav (five links, the injected button, five languages)
   is wider than the viewport and its right-hand end was cut off. Every link is in the footer too. */
@media (max-width: 900px) { .v-page .nav-link { display: none; } }
.cta-row { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.v-hero .btn { font-size: 15px; padding: 12px 20px; }
.v-hero .lp-ctas { margin-top: 30px; }
@media (max-width: 560px) { .dl-buttons { flex-wrap: wrap; } }

/* ---------- hero ---------- */
.v-hero { padding: 72px 0 40px; }
.v-hero-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px; align-items: center;
}
.v-hero-copy { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--green); background: rgba(35, 165, 90, .08);
  border: 1px solid rgba(35, 165, 90, .22);
  padding: 5px 11px; border-radius: 999px; letter-spacing: .3px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 3px; background: var(--green);
  box-shadow: 0 0 0 3px rgba(35, 165, 90, .2);
}
.v-hero h1.title {
  font-size: clamp(42px, 5.3vw, 72px);
  font-weight: 620; letter-spacing: -.035em; line-height: 1.0;
  margin: 22px 0 20px; max-width: none; text-wrap: balance;
}
.v-hero h1.title .accent { color: var(--green); }
.v-hero .subhead {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45;
  color: var(--text-mute); max-width: 44ch; margin: 0; text-wrap: pretty;
}
.v-trust { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin: 14px 0 0; max-width: 46ch; text-wrap: pretty; }
.lp-note-line { margin: 14px 0 0; font-size: 13px; color: var(--text-mute); }
.lp-note-line a { color: var(--green); font-weight: 600; text-decoration: none; }
.lp-note-line a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lp-cta { margin: 30px 0 0; }

/* Reserve the space the Windows Store block will take once the script swaps the button in (about 150px),
   so the hero image does not jump after first paint. Layout only: nothing here hides a button. */
.v-home .v-hero .dl-col,
.v-win .v-hero .lp-ctas { min-height: 150px; }

/* The shot. Whole window, not cropped. .v-hero-media is the positioning box a later layer can draw on. */
.v-hero-shot { margin: 0; position: relative; }
.v-hero-shot::before {
  content: ""; position: absolute; inset: 4% -4% -2%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(35, 165, 90, .20), transparent 70%);
  filter: blur(34px); z-index: 0; pointer-events: none;
}
.v-hero-media { position: relative; z-index: 1; }
.v-hero-media img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; filter: var(--v-shadow-hero);
}

/* ---------- good to know ---------- */
.v-sec { padding: 40px 0; }
.v-sec > .wrap > h2, .v-sec h2.v-h2 {
  font-size: clamp(26px, 3vw, 36px); font-weight: 650; letter-spacing: -.03em;
  line-height: 1.1; margin: 0 0 22px; color: var(--v-ink); text-wrap: balance;
}
.v-list { list-style: none; margin: 0; padding: 0; max-width: 680px; display: grid; gap: 10px; }
.v-list li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.6; color: #2a2622; text-wrap: pretty; }
.v-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.v-prose { max-width: 680px; }
.v-prose p { font-size: 16.5px; line-height: 1.7; color: #2a2622; margin: 0 0 16px; text-wrap: pretty; }
.v-prose p:last-child { margin-bottom: 0; }
.v-prose a { color: var(--green); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
.v-prose code {
  font-family: var(--mono); font-size: .86em; background: var(--surface-alt);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--text);
}
.v-faq .faq-list { max-width: 760px; padding-bottom: 0; }   /* the section's own 40px, same as Good to know */
.v-page .faq-a-inner a { text-underline-offset: 2px; }

/* ---------- download band ---------- */
.v-band {
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 56px 0; text-align: center; margin-top: 16px;
}
.v-band h2 {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 620; letter-spacing: -.035em;
  line-height: 1.04; margin: 0 auto 12px; max-width: 20ch; text-wrap: balance; color: var(--v-ink);
}
.v-band > .wrap > p.v-lead { font-size: 18px; line-height: 1.45; color: var(--text-mute); margin: 0 0 28px; }
.v-band .dl-group, .v-band .lp-ctas { text-align: left; }
.v-band .cta-row { justify-content: center; margin-top: 0; }
.v-band .lp-cta { margin-top: 0; }
.v-band .dl-col { align-items: center; }
.v-band .dl-req { text-align: center; }
.v-band .lp-ctas { justify-content: center; margin: 0 auto; }
/* The Store block the script builds (badge, note, direct link) centres like everything else in the band. */
.v-band .gd-win-dl { align-items: center; text-align: center; }
.gd-link-direct { white-space: nowrap; }         /* "Download directly" stays on one line */

/* ---------- explore row ---------- */
.v-links { padding: 38px 0 10px; }
.v-links-label {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: 14px;
}
.v-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gd-pglink {
  display: inline-flex; align-items: center; padding: 9px 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-weight: 550;
  color: var(--text); text-decoration: none; transition: border-color .12s, color .12s;
}
.gd-pglink:hover { border-color: var(--green); color: var(--green); }

/* ---------- keyboard focus, the parts the browser draws ---------- */
.v-page a:focus-visible, .v-page button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.v-page a:not([class]):focus-visible { border-radius: 4px; }   /* text links; buttons and chips keep their own radius */

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .v-hero { padding: 44px 0 24px; }
  .v-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .v-hero h1.title { font-size: clamp(40px, 9vw, 64px); }
  .v-hero-shot { max-width: 640px; }
}
@media (max-width: 720px) {
  .v-band { padding: 44px 0; }
  .v-band h2 { font-size: 30px; }
  .gd-pglink { min-height: 44px; }
}
@media (max-width: 480px) {
  .v-hero h1.title { font-size: 42px; }
}

/* ---------- merge, 13 Oct 2026: the old page's words, restyled as text sections under the panels ----------
   Peter ended the test early and shipped B's design with every word of A kept ("we don't lose these
   keywords"). These are the components those words sit in. No images; the panels are the imagery. */
.v-sec + .v-sec { padding-top: 12px; }
.v-sec h3 { color: var(--v-ink); }
.v-lede { font-size: 17px; line-height: 1.55; color: var(--text-mute); margin: -8px 0 28px; max-width: 62ch; text-wrap: pretty; }
.v-sec .v-prose + .v-prose { margin-top: 16px; }
.v-meta { font-size: 15px; line-height: 1.55; color: var(--text-mute); margin: 0 0 14px; max-width: 62ch; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-meta a, .v-lede a, .v-card a, .v-foot a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v-tag {
  display: inline-block; font: 600 11.5px var(--mono); letter-spacing: .3px; text-transform: none;
  color: var(--green); background: rgba(35, 165, 90, .08); border: 1px solid rgba(35, 165, 90, .22);
  padding: 3px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
.v-sec > .wrap > .v-tag { margin-bottom: 14px; }
.v-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.v-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-cards-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.v-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 24px; box-shadow: 0 1px 2px rgba(60, 50, 40, .04);
}
.v-card-icon {
  width: 34px; height: 34px; border-radius: 10px; margin: 0 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(35, 165, 90, .08); border: 1px solid rgba(35, 165, 90, .2); color: var(--green);
}
.v-card-num { font: 700 13px var(--mono); }
.v-card h3 { font-size: 17.5px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
.v-card h3 .v-tag { margin-left: 6px; }
.v-card p { font-size: 15px; line-height: 1.6; color: var(--text-mute); margin: 0 0 10px; text-wrap: pretty; }
.v-card p:last-child { margin-bottom: 0; }
.v-foot { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin: 4px 0 0; max-width: 62ch; }
.v-sec .kbd { font-family: var(--mono); font-size: .86em; background: var(--surface-alt); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--text); white-space: nowrap; }
.v-sec .v-list + .v-note { margin: 20px 0 0; }
.v-quote { padding: 28px 0 8px; }
.v-quote p { font-size: clamp(22px, 2.8vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; color: var(--v-ink); max-width: 24ch; margin: 0; text-wrap: balance; }
.v-quote em { font-style: normal; color: var(--green); }
.btn-text { font-size: 14.5px; font-weight: 600; color: var(--text-mute); text-decoration: underline; text-underline-offset: 3px; padding: 12px 6px; }
.btn-text:hover { color: var(--green); }
.v-table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.v-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.v-table th, .v-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text-mute); }
.v-table th { font-weight: 650; color: var(--v-ink); background: var(--surface-alt); }
.v-table tr:last-child td { border-bottom: 0; }
.v-table td:first-child { color: var(--v-ink); }
.v-table td.yes { color: var(--green); font-weight: 700; }
.v-table td.no { color: var(--text-subtle); }
@media (max-width: 960px) { .v-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .v-cards, .v-cards-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v-card { padding: 20px; }
}
.v-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 20px 0 0; padding: 0; }
.v-chips li { font-size: 13.5px; font-weight: 500; color: var(--text-mute); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.v-official { max-width: 62ch; margin: 0 0 20px; }
.v-table .yes { color: var(--green); font-weight: 700; }
.v-table .no { color: var(--text-subtle); }
.v-table-wrap + .v-prose { margin-top: 16px; }
.v-prose ul { margin: 0 0 16px; padding-left: 22px; }
.v-prose li { margin: 4px 0; font-size: 16px; line-height: 1.6; color: #2a2622; }