/* v2/site/site.css: the v2 website components (issue 395, Figma askbowtie-v2 page Components > Website components).
 * SiteHeader, SiteFooter, Hero, Section, Button, Card, Callout, Table, CtaBand, PricingCard, ArticleLayout (+ the prose inside an article).
 * Needs v2/tokens.css and v2/components.css first. ONLY --v2-* variables; plain px only where a Figma component fixes the size.
 * A PARALLEL surface: no live page loads this file; the cutover links it. Page ground, cards and focus come from components.css. */

.v2s-header, .v2s-footer, main { --v2s-gutter: var(--v2-space-16); }
@media (min-width: 900px) { .v2s-header, .v2s-footer { --v2s-gutter: var(--v2-space-48); } }
main { display: block; width: 100%; max-width: calc(1120px + 2 * var(--v2-space-16)); margin: 0 auto; padding: 0 var(--v2-space-16) var(--v2-space-48); }
@media (min-width: 1200px) { main { max-width: 1120px; padding-left: 0; padding-right: 0; } }

.v2-page a { color: inherit; }
.v2-page a:focus-visible, .v2s-menubtn:focus-visible { outline: 2px solid var(--v2-focus, var(--v2-label)); outline-offset: 2px; border-radius: var(--v2-space-4); }
.v2s-btn:focus-visible { border-radius: var(--v2-radius-pill); }
.v2s-skip { position: absolute; z-index: 10; top: var(--v2-space-8); left: var(--v2-space-8); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--v2-space-16); background: var(--v2-chipon); color: var(--v2-chiponink) !important; border-radius: var(--v2-radius-pill); font: var(--v2-type-control); text-decoration: none; transform: translateY(-200%); }
.v2s-skip:focus { transform: none; }

/* ---------------------------------------------------------------- type */
.v2s-eyebrow { margin: 0; font: var(--v2-type-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--v2-label); }
.v2s-eyebrow span { margin-left: var(--v2-space-8); }
.v2s-sub { margin: 0; font: var(--v2-type-title); font-weight: 500; color: var(--v2-label); max-width: 680px; }
.v2s-section .v2s-sub { font: var(--v2-type-body); font-weight: 400; }
main h1, main h2 { color: var(--v2-label); }

/* ---------------------------------------------------------------- Button (kind primary | secondary | link; size default | small) */
.v2s-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-space-8);
  min-height: 48px; padding: 0 var(--v2-space-28); border: 1px solid transparent; border-radius: var(--v2-radius-pill);
  font: var(--v2-type-control); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.v2s-btn .v2-icon { transition: transform .18s ease-out; }
.v2s-btn.is-small { min-height: 44px; padding: 0 var(--v2-space-24); }
.v2s-btn.is-primary { background: var(--v2-chipon); color: var(--v2-chiponink); border-color: var(--v2-accent); box-shadow: var(--v2-shadow-selected); }
.v2s-btn.is-secondary { background: var(--v2-card); color: var(--v2-cardink); box-shadow: var(--v2-shadow-card); }
.v2-card .v2s-btn.is-secondary { box-shadow: none; border-color: var(--v2-chipline); }
.v2s-btn.is-link { min-height: 44px; padding: 0; background: none; color: var(--v2-label); }
.v2s-btn:hover { transform: translateY(-1px); }
.v2s-btn.is-link:hover { transform: none; }
.v2s-btn.is-link:hover .v2-icon { transform: translateX(3px); }
.v2s-btn:active { transform: none; }

/* ---------------------------------------------------------------- SiteHeader (wide: links right; phone: menu button) */
.v2s-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: var(--v2-space-16) var(--v2s-gutter); min-height: 76px; }
.v2s-mark { display: inline-flex; align-items: center; min-height: 44px; color: var(--v2-label); text-decoration: none; }
.v2s-nav { display: none; align-items: center; gap: var(--v2-space-32); }
.v2s-nav > a:not(.v2s-btn), .v2s-menu > a:not(.v2s-btn) { font: var(--v2-type-control-off); color: var(--v2-label); text-decoration: none; padding: var(--v2-space-12) 0; }
.v2s-nav > a:not(.v2s-btn)[aria-current="page"], .v2s-menu > a:not(.v2s-btn)[aria-current="page"] { font: var(--v2-type-control); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.v2s-nav > a:not(.v2s-btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.v2s-nav .v2s-btn { min-height: 44px; padding: 0 var(--v2-space-20); }
.v2s-menubtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--v2-label); cursor: pointer; }
.v2s-menu-close { display: none; }
.v2s-menubtn[aria-expanded="true"] .v2s-menu-close { display: inline-flex; }
.v2s-menubtn[aria-expanded="true"] .v2s-menu-open { display: none; }
.v2s-menu {
  display: none; position: absolute; z-index: 5; top: 68px; left: var(--v2-space-16); right: var(--v2-space-16);
  flex-direction: column; align-items: stretch; gap: var(--v2-space-4); padding: var(--v2-space-16) var(--v2-space-20) var(--v2-space-20);
  background: var(--v2-card); border-radius: var(--v2-radius-20); box-shadow: var(--v2-shadow-card);
}
.v2s-menu > a:not(.v2s-btn) { color: var(--v2-cardink); font: var(--v2-type-control); }
.v2s-menu .v2s-btn { margin-top: var(--v2-space-12); }
.v2s-menubtn[aria-expanded="true"] ~ .v2s-menu { display: flex; }
@media (min-width: 900px) {
  .v2s-header { min-height: 128px; padding-top: var(--v2-space-36); padding-bottom: var(--v2-space-36); }
  .v2s-nav { display: flex; }
  .v2s-menubtn, .v2s-menu, .v2s-menubtn[aria-expanded="true"] ~ .v2s-menu { display: none; }
}

/* ---------------------------------------------------------------- Hero (size wide | phone) */
.v2s-hero { display: grid; gap: var(--v2-space-32); padding: var(--v2-space-24) 0 0; }
.v2s-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-16); }
.v2s-hero h1 { margin: 0; font: var(--v2-type-display); }
.v2s-actions { display: flex; flex-wrap: wrap; gap: var(--v2-space-12); margin-top: var(--v2-space-8); }
.v2s-demo { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-demo .v2-toneicon.is-tile { background: var(--v2-card); border-color: var(--v2-cardline); }
.v2s-demo-note { margin: 0; font: var(--v2-type-small); color: var(--v2-label); }
@media (min-width: 900px) {
  .v2s-hero { padding-top: 72px; }
  .v2s-hero.has-aside { padding-top: var(--v2-space-32); }
  .v2s-hero.has-aside .v2s-hero-text { padding-top: var(--v2-space-16); }
  .v2s-hero h1 { font: var(--v2-type-hero); max-width: 640px; }
  .v2s-hero.has-aside { grid-template-columns: minmax(0, 1fr) 432px; gap: var(--v2-space-48); align-items: start; }
  .v2s-hero .v2s-sub { max-width: 620px; }
}

/* ---------------------------------------------------------------- Section (head only; content follows) */
.v2s-section { margin-top: var(--v2-space-48); display: flex; flex-direction: column; gap: var(--v2-space-24); }
.v2s-section-head { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-section h2 { margin: 0; font: var(--v2-type-heading); }
.v2s-section.is-alt { padding-top: var(--v2-space-48); border-top: 1px solid var(--v2-hairline); }
.v2s-linkrow { margin: 0; }
@media (min-width: 900px) { .v2s-section { margin-top: var(--v2-space-48); } }

/* ---------------------------------------------------------------- Card (eyebrow, title, body; rows of 3 or 4) */
.v2s-grid { display: grid; gap: var(--v2-space-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v2s-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .v2s-grid { gap: var(--v2-space-20); } .v2s-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v2s-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2s-card { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-card .v2s-eyebrow { color: var(--v2-body); }
.v2s-card h3 { margin: 0; font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-card p:not(.v2s-eyebrow):not(.v2s-meta) { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }

/* ---------------------------------------------------------------- CtaBand: a standard card (Ben's draft never puts a solid colour block on the gradient, 2026-10-24) */
.v2s-cta {
  margin-top: var(--v2-space-48); padding: var(--v2-space-32) var(--v2-space-20); border-radius: var(--v2-radius-20);
  background: var(--v2-card); color: var(--v2-cardink); box-shadow: var(--v2-shadow-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-20);
}
.v2s-cta h2 { margin: 0 0 var(--v2-space-8); font: var(--v2-type-heading); color: var(--v2-cardink); }
.v2s-cta p { margin: 0; font: var(--v2-type-body); color: var(--v2-cardink); }
@media (min-width: 900px) {
  .v2s-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--v2-space-48); margin-top: var(--v2-space-48); }
}

/* ---------------------------------------------------------------- PricingCard (featured false | true) */
.v2s-pricegrid { display: grid; gap: var(--v2-space-16); grid-template-columns: minmax(0, 1fr); margin-top: var(--v2-space-48); }
@media (min-width: 900px) { .v2s-pricegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-20); } }
.v2s-price { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-12); }
.v2s-price-top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.v2s-price h3 { margin: 0; font: var(--v2-type-subtitle); color: var(--v2-cardink); }
.v2s-price-amount { margin: 0; display: flex; align-items: baseline; gap: var(--v2-space-8); color: var(--v2-body); font: var(--v2-type-default); }
.v2s-price-amount strong { font: var(--v2-type-display); color: var(--v2-cardink); }
.v2s-price-line { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }
@media (min-width: 900px) { .v2s-price-line { min-height: 40px; } }
.v2s-price .v2-divider { margin: var(--v2-space-4) 0; }
.v2s-checks { list-style: none; margin: 0 0 var(--v2-space-12); padding: 0; display: flex; flex-direction: column; gap: var(--v2-space-14); }
.v2s-checks li { display: flex; align-items: flex-start; gap: var(--v2-space-12); font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-checks .v2-icon { margin-top: -1px; }
.v2s-price .v2s-btn { margin-top: auto; width: 100%; }
.v2s-price.is-featured { box-shadow: var(--v2-shadow-selected), 0 0 0 1px var(--v2-accent); }

/* ---------------------------------------------------------------- Callout (kind note | warn | good | tip) and Table */
.v2s-callout { margin: var(--v2-space-20) 0; padding: var(--v2-space-14) var(--v2-space-16); border-radius: var(--v2-radius-14); background: var(--v2-zebra); color: var(--v2-cardink); font: var(--v2-type-default); }
.v2s-callout p, .v2s-prose .v2s-callout p { margin: 0; font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-callout p.v2s-callout-title, .v2s-prose .v2s-callout p.v2s-callout-title { font: var(--v2-type-strong); font-weight: 600; margin-bottom: var(--v2-space-4); }
.v2s-callout.kind-warn { background: var(--v2-badwash); }
.v2s-callout.kind-good { background: var(--v2-goodwash); }
.v2s-callout.kind-tip { background: var(--v2-watchwash); }

.v2s-tablewrap { margin: var(--v2-space-20) 0; overflow-x: auto; border: 1px solid var(--v2-cardline); border-radius: var(--v2-radius-14); }
.v2s-table { width: 100%; border-collapse: collapse; font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-table th, .v2s-table td { padding: var(--v2-space-10) var(--v2-space-12); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.v2s-table th { font: var(--v2-type-strong); background: var(--v2-zebra); }
.v2s-table tbody tr:nth-child(even) td { background: var(--v2-zebra); }
.v2s-table td { color: var(--v2-cardink); }
.v2s-panel { padding: var(--v2-space-20); }
.v2s-panel > .v2s-tablewrap { margin-top: 0; }
.v2s-panel > .v2s-callout { margin-bottom: 0; }
@media (min-width: 900px) { .v2s-panel { padding: var(--v2-space-20); } }

/* ---------------------------------------------------------------- ArticleLayout: head (crumb, title, sub, contents card) + body card */
.v2s-articlehead { display: grid; gap: var(--v2-space-24); padding-top: var(--v2-space-16); }
.v2s-articlehead-text { display: flex; flex-direction: column; gap: var(--v2-space-8); min-width: 0; }
.v2s-articlehead h1 { margin: 0; font: var(--v2-type-heading); font-weight: 700; }
.v2s-crumb { font: var(--v2-type-small); color: var(--v2-label); }
.v2s-crumb { margin: -14px 0; }
.v2s-crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.v2s-crumb a:hover { text-decoration: underline; }
.v2s-toc { padding: var(--v2-space-20); align-self: start; }
.v2s-toc .v2s-eyebrow { color: var(--v2-body); margin-bottom: var(--v2-space-8); }
.v2s-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v2s-toc a { display: block; padding: var(--v2-space-12) 0; font: var(--v2-type-default); color: var(--v2-body); text-decoration: none; }
.v2s-toc a:hover { color: var(--v2-cardink); }
.v2s-toc a[aria-current="location"] { color: var(--v2-cardink); font: var(--v2-type-strong); }
.v2s-article { margin-top: var(--v2-space-32); padding: var(--v2-space-20); }
@media (min-width: 900px) {
  .v2s-articlehead { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--v2-space-48); padding-top: var(--v2-space-48); }
  .v2s-articlehead h1 { font: var(--v2-type-display); }
  .v2s-article { margin-top: var(--v2-space-48); padding: var(--v2-space-48) var(--v2-space-24); }
}

.v2s-prose { max-width: 760px; margin: 0 auto; font: var(--v2-type-answer); color: var(--v2-cardink); }
.v2s-prose > :first-child { margin-top: 0; }
.v2s-prose h2 { margin: var(--v2-space-36) 0 var(--v2-space-20); font: var(--v2-type-stat); color: var(--v2-cardink); scroll-margin-top: var(--v2-space-24); }
.v2s-prose h2:first-child { margin-top: 0; }
.v2s-prose h3 { margin: var(--v2-space-24) 0 var(--v2-space-8); font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-prose p, .v2s-prose li { font: var(--v2-type-answer); color: var(--v2-cardink); }
.v2s-prose p { margin: 0 0 var(--v2-space-16); }
.v2s-prose ul, .v2s-prose ol { margin: 0 0 var(--v2-space-16); padding-left: var(--v2-space-24); }
.v2s-prose li { margin-bottom: var(--v2-space-8); }
.v2s-prose a { color: var(--v2-cardink); text-decoration: underline; text-underline-offset: 3px; }
.v2s-prose a:focus-visible { outline-color: var(--v2-cardink); }
.v2s-prose strong { font-weight: 600; }
.v2s-prose code { font-family: var(--v2-sans); font-weight: 500; padding: 1px var(--v2-space-4); border-radius: var(--v2-space-4); background: var(--v2-zebra); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- SiteFooter (hairline top) */
.v2s-footer { margin-top: var(--v2-space-48); border-top: 1px solid var(--v2-hairline); padding: var(--v2-space-32) var(--v2s-gutter) var(--v2-space-36); display: grid; gap: var(--v2-space-24); color: var(--v2-label); }
.v2s-footer-brand p { margin: var(--v2-space-12) 0 0; font: var(--v2-type-default); color: var(--v2-label); max-width: 360px; }
.v2s-footer-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--v2-space-20); }
.v2s-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.v2s-footer-cols a { display: inline-block; padding: var(--v2-space-12) 0; font: var(--v2-type-default); color: var(--v2-label); text-decoration: none; }
.v2s-footer-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v2s-copy { margin: 0; font: var(--v2-type-small); color: var(--v2-label); }
@media (min-width: 900px) {
  .v2s-footer { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding-top: var(--v2-space-36); }
  .v2s-footer-cols { gap: var(--v2-space-36); }
  .v2s-copy { grid-column: 1 / -1; margin-top: var(--v2-space-24); }
}

/* ================================================================ same-week templates (issues 398, 395) =================
 * Added components: linked Card, hub spacing, inline contents (in-article), prose pre/blockquote, CodeBlock wrap, press swatches,
 * auth form (FormField page surface + button + message). Same tokens, no new colour. */

/* Card as a link (hubs, 404, contact, press): the whole card is the target; one small lift on hover, never colour. */
a.v2s-card.is-link { text-decoration: none; color: inherit; transition: transform .18s ease-out; }
a.v2s-card.is-link:hover { transform: translateY(-2px); }
a.v2s-card.is-link:focus-visible { outline: 2px solid var(--v2-focus, var(--v2-label)); outline-offset: 2px; border-radius: var(--v2-radius-20); }
a.v2s-card.is-link > .v2s-eyebrow { color: var(--v2-body); }
.v2s-card p.v2s-meta { margin-top: var(--v2-space-8); font: var(--v2-type-small); color: var(--v2-body); }
.v2s-card p.v2s-meta strong { font-weight: 600; color: var(--v2-cardink); }

/* A hub has no aside: air between the hero and the first section, as in the Figma frames. */
.v2s-hero:not(.has-aside) + .v2s-section { margin-top: var(--v2-space-48); }
@media (min-width: 900px) { .v2s-hero:not(.has-aside) { padding-bottom: var(--v2-space-48); } }
.v2s-pricegrid.is-inline { margin-top: 0; }
main > .v2s-linkrow { margin-top: var(--v2-space-24); }

/* In-article contents (the second of a /learn/ page's two lists, non-negotiable 27). */
.v2s-intoc { margin: 0 0 var(--v2-space-24); padding: var(--v2-space-16) var(--v2-space-20); background: var(--v2-zebra); border-radius: var(--v2-radius-14); }
.v2s-intoc .v2s-eyebrow { color: var(--v2-cardink); }
.v2s-intoc ul, .v2s-prose .v2s-intoc ul { list-style: none; margin: var(--v2-space-4) 0 0; padding: 0; }
.v2s-intoc li, .v2s-prose .v2s-intoc li { margin: 0; break-inside: avoid; }
.v2s-intoc a, .v2s-prose .v2s-intoc a { display: block; padding: var(--v2-space-12) 0; font: var(--v2-type-default); color: var(--v2-body); text-decoration: none; }
.v2s-prose .v2s-intoc .v2s-eyebrow { margin: 0; font: var(--v2-type-eyebrow); color: var(--v2-cardink); }
.v2s-intoc a:hover { color: var(--v2-cardink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .v2s-intoc { display: none; } }

/* Prose extras. */
.v2s-prose pre { margin: 0 0 var(--v2-space-16); padding: var(--v2-space-16); background: var(--v2-zebra); border-radius: var(--v2-radius-14); overflow-x: auto; font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-prose pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; font-family: inherit; }
.v2s-prose blockquote { margin: 0 0 var(--v2-space-16); padding: var(--v2-space-12) var(--v2-space-16) var(--v2-space-4); border: 1px solid var(--v2-cardline); border-radius: var(--v2-radius-14); background: var(--v2-zebra); }
.v2s-prose blockquote p { margin: 0 0 var(--v2-space-8); }

/* CodeBlock (ABV2) used on the site: keep the line breaks of a request, and let the Copy button sit under it. */
.v2-codeblock-code { white-space: pre-wrap; }
.v2s-stack { display: flex; flex-direction: column; gap: var(--v2-space-24); }
.v2s-codeitem { display: flex; flex-direction: column; gap: var(--v2-space-8); }

/* Press: colour swatches. The chip paints a token; the hex printed beside it is read from tokens.json by the generator. */
.v2s-swatches { display: grid; gap: var(--v2-space-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v2s-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .v2s-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-20); } }
.v2s-swatch { display: flex; align-items: center; gap: var(--v2-space-16); padding: var(--v2-space-16); }
.v2s-swatch-chip { flex: none; width: 56px; height: 56px; border-radius: var(--v2-radius-14); border: 1px solid var(--v2-cardline); }
.v2s-swatch p { margin: 0; }
.v2s-swatch-name { font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-swatch-hex { font: var(--v2-type-strong); color: var(--v2-cardink); }
.v2s-swatch-use { font: var(--v2-type-default); color: var(--v2-body); }
.v2s-table th[scope="row"] { width: 28%; }
.v2s-panel > .v2s-prose { margin: 0 auto; max-width: 760px; }

/* Auth (login, signup): a head card, the email field on the page surface, the black pill, the white Google pill. */
.v2s-auth { width: 100%; max-width: 440px; margin: var(--v2-space-48) auto 0; display: flex; flex-direction: column; gap: var(--v2-space-16); }
@media (min-width: 900px) { .v2s-auth { margin-top: 150px; margin-bottom: 150px; } }
.v2s-authhead { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-authhead h1 { margin: 0; font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-authhead p:last-child { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }
.v2s-form { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-form[hidden], .v2s-formmsg[hidden] { display: none; }
.v2s-formmsg { padding: var(--v2-space-14) var(--v2-space-16); }
.v2s-formmsg p { margin: 0; font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-formmsg.is-error p { color: var(--v2-bad); }
.v2s-btn.is-block { display: flex; width: 100%; }
.v2s-btn[hidden] { display: none; }
.v2s-formmsg a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
button.v2s-btn { -webkit-appearance: none; appearance: none; font-family: inherit; }
button.v2s-btn[disabled] { opacity: .6; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) { .v2s-btn, .v2s-btn .v2-icon, a.v2s-card.is-link { transition: none; } .v2s-btn:hover, .v2s-btn.is-link:hover .v2-icon, a.v2s-card.is-link:hover { transform: none; } }
:root[data-static] .v2s-btn, :root[data-static] .v2s-btn .v2-icon, :root[data-static] a.v2s-card.is-link { transition: none; }

.v2s-authnote { margin: var(--v2-space-8) 0 0; font: var(--v2-type-default); color: var(--v2-body); }
.v2s-authnote a { color: var(--v2-cardink); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ desktop pass (issue 381, Ben 2026-10-24): "larger / more visuals" ==========
 * Direction (DECISIONS.md, 2026-10-24): the website takes concept B's app-window hero and concept A's larger desktop type.
 * Everything here is >= 900 or >= 1100; a phone keeps the layout it had (the new visuals are display:none under 900). Tokens only. */

/* Phone: the desktop-only pieces. */
.v2s-asidecards, .v2s-miniwin, .v2s-brandcard, .v2s-endpoints, .v2s-authvisual, .v2s-costbars, .v2s-stats, .v2s-pricetiles, .v2s-tile > .v2s-chart, .v2s-tile > .v2s-chat, .v2s-tile > .v2s-bars, .v2s-conv-fig, .v2s-bignum, .v2s-go, .v2s-win-bar, .v2s-win-rail, .v2s-win-more { display: none; }
.v2s-window { display: block; }
.v2s-win-composer { display: none; }
.v2s-win-body, .v2s-win-main { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-win-note { margin-top: var(--v2-space-12); }
.v2s-bento { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-tile { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-tile-text { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-tile .v2s-eyebrow { color: var(--v2-body); }
.v2s-tile .v2s-eyebrow span { margin-left: var(--v2-space-8); }
.v2s-tile h3 { margin: 0; font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-tile p:not(.v2s-eyebrow):not(.v2s-bignum):not(.v2s-chat-q):not(.v2s-chat-price) { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }
.v2s-tile.is-num { gap: var(--v2-space-8); }
.v2s-bignum { margin: 0; font: var(--v2-type-display); color: var(--v2-cardink); }

/* Charts and bars: paint with tokens only. */
.v2s-chart { margin: 0; }
.v2s-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2s-chart-grid { stroke: var(--v2-cardline); stroke-width: 1; }
.v2s-chart-fill { fill: var(--v2-goodwash); }
.v2s-chart-line { stroke: var(--v2-good); stroke-width: 2.5; }
.v2s-chart-dot { fill: var(--v2-card); stroke: var(--v2-good); stroke-width: 2.5; }
.v2s-chart figcaption, .v2s-cols figcaption { display: flex; justify-content: space-between; margin-top: var(--v2-space-8); font: var(--v2-type-small); color: var(--v2-body); }
.v2s-bars { display: flex; flex-direction: column; gap: var(--v2-space-4); }
.v2s-bars-title { margin: 0; font: var(--v2-type-subtitle); color: var(--v2-cardink); }
.v2s-bars-sub { margin: 0 0 var(--v2-space-8); font: var(--v2-type-small); color: var(--v2-body); }
.v2s-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-space-12); }
.v2s-bars li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; align-items: center; gap: var(--v2-space-12); font: var(--v2-type-default); color: var(--v2-body); }
.v2s-bars-val { color: var(--v2-cardink); font: var(--v2-type-strong); text-align: right; }
.v2s-bars-track { height: 10px; border-radius: var(--v2-radius-pill); background: var(--v2-zebra); overflow: hidden; }
.v2s-bars-track span { display: block; height: 100%; border-radius: var(--v2-radius-pill); background: var(--v2-tag); }
.v2s-cols { margin: 0; }
.v2s-cols > div { display: flex; align-items: flex-end; gap: var(--v2-space-8); height: 128px; }
.v2s-cols > div span { flex: 1; border-radius: var(--v2-space-6) var(--v2-space-6) 0 0; background: var(--v2-tag); opacity: .35; }
.v2s-cols > div span.is-last { opacity: 1; }
.v2s-chat { display: flex; flex-direction: column; gap: var(--v2-space-10); }
.v2s-chat-q { align-self: flex-end; margin: 0; padding: var(--v2-space-8) var(--v2-space-16); border-radius: var(--v2-radius-20); background: var(--v2-chipon); color: var(--v2-chiponink); font: var(--v2-type-default); }
.v2s-chat-a { padding: var(--v2-space-14) var(--v2-space-16); border-radius: var(--v2-radius-14); background: var(--v2-zebra); }
.v2s-tile .v2s-chat-a > p:first-child { margin: 0 0 var(--v2-space-12); color: var(--v2-cardink); }
.v2s-chat-a .v2s-bars-track { background: var(--v2-card); }
.v2s-tile p.v2s-chat-price { margin: var(--v2-space-12) 0 0; font: var(--v2-type-small); color: var(--v2-body); }
.v2s-tile p.v2s-chat-q { margin: 0; font: var(--v2-type-default); color: var(--v2-chiponink); }

@media (min-width: 900px) {
  .v2s-asidecards, .v2s-miniwin, .v2s-brandcard, .v2s-endpoints { display: flex; }
  .v2s-asidecards { flex-direction: column; gap: var(--v2-space-16); }
  .v2s-asidecards.is-stats .v2-kpi-value { font: var(--v2-type-display); }
  .v2s-conv-fig, .v2s-go, .v2s-win-bar { display: flex; }
  .v2s-costbars { display: block; }
  .v2s-bignum { display: block; font: var(--v2-type-display); }
  .v2s-pricetiles { display: grid; }
  .v2s-tile > .v2s-chart { display: block; }
  .v2s-tile > .v2s-chat, .v2s-tile > .v2s-bars { display: flex; }

  /* the framed app window: translucent frame on the gradient (role pill), white cards inside; a picture, so no pointer */
  .v2s-window, .v2s-miniwin { padding: var(--v2-space-16); border-radius: 28px; background: var(--v2-pill); box-shadow: 0 0 0 1px var(--v2-pill); }
  .v2s-win-bar { align-items: center; gap: var(--v2-space-14); padding: var(--v2-space-4) var(--v2-space-8) var(--v2-space-16); }
  .v2s-dots { display: inline-flex; gap: var(--v2-space-6); }
  .v2s-dots i { width: 10px; height: 10px; border-radius: var(--v2-radius-pill); background: var(--v2-hairline); }
  .v2s-url { font: var(--v2-type-small); color: var(--v2-label); }
  .v2s-win-toggle { margin-left: auto; }
  .v2s-win-toggle .v2-modetoggle { width: auto; margin: 0; }
  .v2s-win-more { display: block; }
  .v2s-win-composer { display: block; }
  .v2s-window .v2-kpi .v2-spark { top: auto; bottom: var(--v2-space-14); }
  .v2s-window .v2-kpi { padding-bottom: var(--v2-space-14); }
  .v2s-win-rail { display: flex; flex-direction: column; gap: var(--v2-space-16); }
  .v2s-win-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-space-16); }
  .v2s-win-panel { padding: var(--v2-space-20); }
  .v2s-win-note { text-align: center; }
  .v2s-miniwin { flex-direction: column; gap: var(--v2-space-16); }
  .v2s-miniwin .v2-modetoggle { width: auto; margin: 0; }

  /* hero: text left + aside (stat tiles, mini window); stage = centred text over the big window */
  .v2s-hero.has-aside:not(.is-stage) { grid-template-columns: minmax(0, 1fr) 360px; }
  .v2s-hero.has-aside:not(.is-stage) .v2s-hero-text { align-self: center; padding-top: 0; }
  .v2s-hero.is-stage.has-aside { grid-template-columns: minmax(0, 1fr); gap: var(--v2-space-48); padding-top: var(--v2-space-24); }
  .v2s-hero.is-stage .v2s-hero-text { align-items: center; text-align: center; margin: 0 auto; padding-top: 0; }
  .v2s-hero.is-stage .v2s-sub { margin: 0 auto; }
  .v2s-hero.is-stage .v2s-actions { justify-content: center; }

  /* bento */
  .v2s-bento.is-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-20); }
  .v2s-bento.is-how .v2s-tile > :not(.v2s-tile-text) { margin-top: auto; }
  .v2s-bento.is-conv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--v2-space-20); }
  .v2s-bento.is-conv .is-wide { grid-row: 1 / span 2; }
  .v2s-conv-fig { align-items: flex-end; gap: var(--v2-space-28); margin-top: auto; }
  .v2s-conv-fig .v2s-cols { flex: 1; }
  .v2s-tile { padding: var(--v2-space-24); gap: var(--v2-space-20); }
  .v2s-tile.is-num { gap: var(--v2-space-8); }
  .v2s-pricetiles { margin-bottom: var(--v2-space-8); }

  /* linked cards end in the draft's outlined arrow circle */
  .v2s-go { align-self: flex-end; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: auto; border-radius: var(--v2-radius-pill); border: 1px solid var(--v2-hairline); color: var(--v2-cardink); transition: transform .18s ease-out; }
  a.v2s-card.is-link:hover .v2s-go { transform: translateX(3px); }

  /* press + 404 brand card, api endpoints */
  .v2s-brandcard { flex-direction: column; align-items: center; justify-content: center; gap: var(--v2-space-16); min-height: 260px; color: var(--v2-cardink); }
  .v2s-brandcard svg { width: 140px; height: auto; }
  .v2s-brandcard p { margin: 0; font: var(--v2-type-heading); color: var(--v2-cardink); }
  .v2s-brandcard .v2s-bignum { font: var(--v2-type-display); color: var(--v2-cardink); }
  .v2s-endpoints { flex-direction: column; gap: var(--v2-space-12); padding: var(--v2-space-24); }
  .v2s-endpoints p { margin: 0; display: flex; flex-direction: column; gap: var(--v2-space-4); font: var(--v2-type-default); color: var(--v2-body); }
  .v2s-endpoints code { font: var(--v2-type-title); color: var(--v2-cardink); }

  /* pricing: the cost table beside a bar chart; the docs/ask stat strip */
  .v2s-costpanel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--v2-space-32); padding: var(--v2-space-24); align-items: start; }
  .v2s-costbars { padding-top: var(--v2-space-8); }
  .v2s-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-16); margin: 0 auto var(--v2-space-36); max-width: 800px; }
  .v2s-stats .v2-kpi { background: var(--v2-zebra); box-shadow: none; }
  .v2s-price-amount strong { font: var(--v2-type-display); }

  /* auth: form column, centred */
  .v2s-authwrap { display: grid; grid-template-columns: minmax(0, 440px); justify-content: center; }
}

@media (min-width: 1000px) {
  .v2s-authwrap { grid-template-columns: 440px minmax(0, 440px); gap: var(--v2-space-48); align-items: center; margin: 72px 0; }
  .v2s-authwrap .v2s-auth { margin: 0; }
  .v2s-authvisual { display: flex; flex-direction: column; gap: var(--v2-space-16); }
}

@media (min-width: 1100px) {
  main { max-width: 1240px; }
  .v2s-header, .v2s-footer { --v2s-gutter: max(var(--v2-space-48), calc((100% - 1240px) / 2)); }
  .v2s-hero h1, .v2s-articlehead h1 { font: var(--v2-type-desk-display); }
  .v2s-hero.is-big h1 { font: var(--v2-type-desk-hero); max-width: 1000px; }
  .v2s-hero:not(.has-aside) h1 { max-width: 900px; }
  .v2s-hero.has-aside:not(.is-stage) { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; }
  .v2s-sub { font: var(--v2-type-desk-title); font-weight: 500; max-width: 760px; }
  .v2s-section .v2s-sub { font: var(--v2-type-desk-title); font-weight: 400; color: var(--v2-labeldim); }
  .v2s-hero.is-stage .v2s-sub { max-width: 720px; }
  .v2s-section { margin-top: 96px; gap: var(--v2-space-32); }
  .v2s-hero:not(.has-aside) + .v2s-section { margin-top: var(--v2-space-48); }
  .v2s-section h2 { font: var(--v2-type-desk-display); }
  .v2s-eyebrow { font-size: 13px; }
  .v2s-tile h3, .v2s-card h3 { font: var(--v2-type-desk-title); }
  .v2s-tile p:not(.v2s-eyebrow):not(.v2s-bignum):not(.v2s-chat-q):not(.v2s-chat-price), .v2s-card p:not(.v2s-eyebrow):not(.v2s-meta) { font: var(--v2-type-desk-default); }
  .v2s-bignum, .v2s-conv-fig .v2s-bignum { font: var(--v2-type-desk-big); }
  .v2s-brandcard .v2s-bignum { font: var(--v2-type-desk-hero); }
  .v2s-card { padding: var(--v2-space-24); gap: var(--v2-space-10); }
  .v2s-grid { gap: var(--v2-space-24); }
  .v2s-bento.is-how, .v2s-bento.is-conv { gap: var(--v2-space-24); }
  .v2s-price-amount strong { font: var(--v2-type-desk-big); }
  .v2s-price { padding: var(--v2-space-28); }
  .v2s-price h3 { font: var(--v2-type-desk-title); }
  .v2s-price-line, .v2s-checks li { font: var(--v2-type-desk-default); }
  .v2s-cta { padding: 64px; }
  .v2s-cta h2 { font: var(--v2-type-desk-display); }
  .v2s-cta p { font: var(--v2-type-desk-title); font-weight: 400; }
  .v2s-btn { min-height: 52px; }
  .v2s-nav .v2s-btn { min-height: 44px; }
  .v2s-win-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--v2-space-16); align-items: stretch; }
  .v2s-win-panel { flex: 1; }
  .v2s-window, .v2s-miniwin { padding: var(--v2-space-20); }
  .v2s-footer-brand p, .v2s-footer-cols a { font: var(--v2-type-desk-default); }

  /* article (issue 381, "the center is not centered"): the contents card (left, sticky) and the reading card sit in ONE block that is centred as a whole;
     the title, the card, the key numbers and the closing card all share the reading column, so nothing leans. */
  main:has(> .v2s-articlehead) { display: grid; grid-template-columns: 272px minmax(0, 880px); column-gap: var(--v2-space-48); justify-content: center; align-items: start; }
  main:has(> .v2s-articlehead) > .v2s-articlehead { display: contents; }
  main:has(> .v2s-articlehead) .v2s-articlehead-text { grid-column: 2; grid-row: 1; padding-top: 72px; gap: var(--v2-space-12); }
  main:has(> .v2s-articlehead) .v2s-toc { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: var(--v2-space-24); margin-top: 72px; max-height: calc(100vh - 48px); overflow-y: auto; padding: var(--v2-space-24); }
  main:has(> .v2s-articlehead) .v2s-article { grid-column: 2; grid-row: 2; margin-top: var(--v2-space-36); padding: 56px 56px 64px; }
  main:has(> .v2s-articlehead) > .v2s-cta, main:has(> .v2s-articlehead) > .v2s-askcard { grid-column: 2; }
  .v2s-prose { max-width: 800px; }
  .v2s-prose p, .v2s-prose li { font: var(--v2-type-title); font-weight: 400; line-height: 30px; }
  .v2s-prose h2 { font: var(--v2-type-desk-heading); margin-top: 56px; }
  .v2s-prose h2:first-child { margin-top: 0; }
  .v2s-prose h3 { font: var(--v2-type-desk-title); }
  .v2s-prose .v2s-callout p { font: var(--v2-type-desk-default); }
  .v2s-table { font: var(--v2-type-desk-default); }
  .v2s-toc a { font: var(--v2-type-desk-default); padding: var(--v2-space-10) 0; }
  .v2s-toc a[aria-current="location"] { font-weight: 600; }
  .v2s-crumb { font: var(--v2-type-desk-small); }
}

@media (min-width: 900px) {
  .v2s-hero h1, .v2s-section h2, .v2s-cta h2, .v2s-articlehead h1 { text-wrap: balance; }
  .v2s-win-panel { display: flex; flex-direction: column; }
  .v2s-win-panel .v2s-bars { flex: 1; }
  .v2s-win-panel .v2s-bars ul { flex: 1; align-content: space-evenly; }
  .v2s-stats .v2-kpi-label { font: var(--v2-type-default); color: var(--v2-body); }
  .v2s-stats .v2-kpi-value { font: var(--v2-type-desk-heading); color: var(--v2-cardink); }
  .v2s-stats .v2-kpi-note { font: var(--v2-type-default); color: var(--v2-body); }
}

/* ================================================================ content pass (issue 381, Ben 2026-10-24: thin on desktop, "the center isnt centered") ==========
 * Hub cards, key numbers, the Ask card, legal anchors and the press kit. Tokens only; nothing here adds a colour. */

/* Hub card: outlined icon tile + #tag, title, one line, the draft's arrow circle. Rows centre as a whole, so a short last row never leans. */
.v2s-grid.is-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v2s-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2s-grid.is-hub { display: flex; flex-wrap: wrap; justify-content: center; }
.v2s-hcard { flex: 1 1 100%; padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-10); text-decoration: none; color: inherit; }
.v2s-hcard-top { display: flex; align-items: center; gap: var(--v2-space-14); margin-bottom: var(--v2-space-6); }
.v2s-hicon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--v2-radius-14); border: 1px solid var(--v2-hairline); color: var(--v2-icon); }
.v2s-htag { font: var(--v2-type-strong); color: var(--v2-body); overflow-wrap: anywhere; min-width: 0; }
.v2s-hcard h3 { margin: 0; font: var(--v2-type-title); color: var(--v2-cardink); }
.v2s-hcard p:not(.v2s-meta) { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }
.v2s-hcard p.v2s-meta { margin: var(--v2-space-4) 0 0; font: var(--v2-type-small); color: var(--v2-body); }
.v2s-hcard p.v2s-meta strong { font-weight: 600; color: var(--v2-cardink); }
a.v2s-hcard { transition: transform .18s ease-out; }
a.v2s-hcard:hover { transform: translateY(-2px); }
a.v2s-hcard:focus-visible { outline: 2px solid var(--v2-focus, var(--v2-label)); outline-offset: 2px; border-radius: var(--v2-radius-20); }
.v2s-hcard .v2s-go, .v2s-kit-files .v2s-go { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--v2-radius-pill); border: 1px solid var(--v2-hairline); color: var(--v2-cardink); transition: transform .18s ease-out; }
.v2s-hcard .v2s-go { align-self: flex-end; margin-top: auto; }
a.v2s-hcard:hover .v2s-go, .v2s-kit-files a:hover .v2s-go { transform: translateX(3px); }
@media (min-width: 900px) {
  .v2s-hcard { flex: 0 1 calc((100% - 2 * var(--v2-space-20)) / 3); max-width: calc((100% - 2 * var(--v2-space-20)) / 3); padding: var(--v2-space-24); }
  .v2s-grid.is-hub.is-featured > .v2s-hcard:first-child:nth-last-child(2), .v2s-grid.is-hub.is-featured > .v2s-hcard:nth-child(2):last-child { flex-basis: calc((100% - var(--v2-space-20)) / 2); max-width: calc((100% - var(--v2-space-20)) / 2); }
  .v2s-grid.is-hub.is-two > .v2s-hcard { flex-basis: calc((100% - var(--v2-space-20)) / 2); max-width: calc((100% - var(--v2-space-20)) / 2); }
  .v2s-hcard.is-featured { padding: var(--v2-space-32); gap: var(--v2-space-12); min-height: 260px; }
  .v2s-hcard.is-featured .v2s-hicon { width: 56px; height: 56px; border-radius: var(--v2-radius-20); }
  .v2s-hcard.is-featured .v2s-hicon .v2-icon { width: 26px; height: 26px; }
}
@media (min-width: 1100px) {
  .v2s-grid.is-hub { gap: var(--v2-space-24); }
  .v2s-hcard { flex-basis: calc((100% - 2 * var(--v2-space-24)) / 3); max-width: calc((100% - 2 * var(--v2-space-24)) / 3); }
  .v2s-grid.is-hub.is-featured > .v2s-hcard:first-child:nth-last-child(2), .v2s-grid.is-hub.is-featured > .v2s-hcard:nth-child(2):last-child { flex-basis: calc((100% - var(--v2-space-24)) / 2); max-width: calc((100% - var(--v2-space-24)) / 2); }
  .v2s-grid.is-hub.is-two > .v2s-hcard { flex-basis: calc((100% - var(--v2-space-24)) / 2); max-width: calc((100% - var(--v2-space-24)) / 2); }
  .v2s-hcard h3 { font: var(--v2-type-desk-title); }
  .v2s-hcard.is-featured h3 { font: var(--v2-type-desk-heading); }
  .v2s-hcard p:not(.v2s-meta) { font: var(--v2-type-desk-default); }
}
@media (max-width: 899px) { .v2s-grid.is-hub { gap: var(--v2-space-16); } }

/* Key numbers an article states: a strip of tiles at the top of the reading card. */
.v2s-keystats { display: grid; gap: var(--v2-space-12); grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--v2-space-32); }
.v2s-keystat { padding: var(--v2-space-16) var(--v2-space-20); border-radius: var(--v2-radius-14); background: var(--v2-zebra); }
.v2s-prose .v2s-keystat p { margin: 0; }
.v2s-prose .v2s-keystat-n { font: var(--v2-type-display); color: var(--v2-cardink); overflow-wrap: anywhere; }
.v2s-prose .v2s-keystat-l { margin-top: var(--v2-space-4); font: var(--v2-type-default); color: var(--v2-body); }
@media (min-width: 900px) {
  .v2s-keystats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2s-keystats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2s-keystat { padding: var(--v2-space-20) var(--v2-space-24); display: flex; flex-direction: column; justify-content: space-between; }
}
@media (min-width: 1100px) {
  .v2s-keystats { gap: var(--v2-space-16); margin-bottom: 40px; }
  .v2s-prose .v2s-keystat-n { font: var(--v2-type-desk-big); }
  .v2s-prose .v2s-keystat-l { font: var(--v2-type-desk-default); }
}

/* The Ask card that closes a learn or guide page. */
.v2s-askcard { margin-top: var(--v2-space-32); padding: var(--v2-space-24) var(--v2-space-20); display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-20); }
.v2s-askcard h2 { margin: var(--v2-space-4) 0 var(--v2-space-8); font: var(--v2-type-heading); color: var(--v2-cardink); }
.v2s-askcard .v2s-eyebrow { color: var(--v2-body); }
.v2s-askcard p:not(.v2s-eyebrow) { margin: 0; font: var(--v2-type-default); color: var(--v2-body); max-width: 520px; }
@media (min-width: 900px) { .v2s-askcard { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--v2-space-36) var(--v2-space-36); margin-top: var(--v2-space-36); } .v2s-askcard .v2s-btn { flex: none; } }
@media (min-width: 1100px) { .v2s-askcard h2 { font: var(--v2-type-desk-heading); } .v2s-askcard p:not(.v2s-eyebrow) { font: var(--v2-type-desk-default); } }

/* Legal: a permalink beside every section heading. */
.v2s-prose h2 .v2s-anchor { margin-left: var(--v2-space-8); font: inherit; font-weight: 400; color: var(--v2-body); text-decoration: none; opacity: .55; }
.v2s-prose h2:hover .v2s-anchor, .v2s-prose h2 .v2s-anchor:focus-visible { opacity: 1; }

/* Press kit */
.v2s-kit { display: grid; gap: var(--v2-space-16); grid-template-columns: minmax(0, 1fr); }
.v2s-kit-brand { padding: var(--v2-space-24) var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-20); }
.v2s-kit-logo { display: flex; flex-direction: column; align-items: center; gap: var(--v2-space-12); padding: var(--v2-space-32) 0 var(--v2-space-24); color: var(--v2-cardink); border-bottom: 1px solid var(--v2-hairline); }
.v2s-kit-logo svg { width: 96px; height: auto; }
.v2s-kit-logo p { margin: 0; font: var(--v2-type-heading); color: var(--v2-cardink); }
.v2s-kit-brand p.v2s-kit-tag { margin: calc(-1 * var(--v2-space-8)) 0 0; text-align: center; font: var(--v2-type-default); color: var(--v2-body); }
.v2s-kit-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-12); }
.v2s-chipcol p { margin: 0; }
.v2s-chipcol .v2s-swatch-chip { display: block; width: 100%; height: 56px; margin-bottom: var(--v2-space-8); }
.v2s-kit-brand p.v2s-kit-note { margin: 0; font: var(--v2-type-small); color: var(--v2-body); }
.v2s-kit-files { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-kit-files .v2s-eyebrow { color: var(--v2-body); }
.v2s-kit-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.v2s-kit-files li { flex: 1; display: flex; border-top: 1px solid var(--v2-hairline); }
.v2s-kit-files li:first-child { border-top: 0; }
.v2s-kit-files a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-16); padding: var(--v2-space-12) 0; text-decoration: none; color: var(--v2-cardink); }
.v2s-kit-files a span:first-child { display: flex; flex-direction: column; gap: var(--v2-space-4); }
.v2s-kit-files strong { font: var(--v2-type-title); }
.v2s-kit-files em { font: var(--v2-type-default); font-style: normal; color: var(--v2-body); }
.v2s-facts { display: grid; gap: var(--v2-space-12); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--v2-space-16); }
.v2s-fact { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2s-fact .v2s-eyebrow { order: -1; color: var(--v2-body); }
.v2s-fact .v2s-bignum { display: block; font: var(--v2-type-heading); color: var(--v2-cardink); }
.v2s-factcards .v2s-card p:not(.v2s-eyebrow) { overflow-wrap: anywhere; }
.v2s-grid.is-boiler { grid-template-columns: minmax(0, 1fr); }
.v2s-do ul { list-style: none; margin: var(--v2-space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2s-do li { display: flex; align-items: flex-start; gap: var(--v2-space-12); font: var(--v2-type-default); color: var(--v2-cardink); }
.v2s-dochip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--v2-radius-pill); border: 1px solid var(--v2-hairline); color: var(--v2-cardink); }
.v2s-dochip .v2-icon { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .v2s-kit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--v2-space-20); }
  .v2s-kit-brand { padding: var(--v2-space-32); }
  .v2s-kit-logo svg { width: 128px; }
  .v2s-kit-files { padding: var(--v2-space-32); }
  .v2s-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v2-space-20); margin-bottom: var(--v2-space-20); }
  .v2s-fact { padding: var(--v2-space-28); }
  .v2s-kit-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .v2s-kit, .v2s-facts { gap: var(--v2-space-24); }
  .v2s-facts { margin-bottom: var(--v2-space-24); }
  .v2s-fact .v2s-bignum { font: var(--v2-type-desk-heading); }
  .v2s-kit-files strong { font: var(--v2-type-desk-title); }
  .v2s-kit-files em, .v2s-do li { font: var(--v2-type-desk-default); }
}
@media (prefers-reduced-motion: reduce) { a.v2s-hcard, .v2s-hcard .v2s-go, .v2s-kit-files .v2s-go { transition: none; } a.v2s-hcard:hover, a.v2s-hcard:hover .v2s-go, .v2s-kit-files a:hover .v2s-go { transform: none; } }
:root[data-static] a.v2s-hcard, :root[data-static] .v2s-hcard .v2s-go { transition: none; }