/* pewterkit.com hub: DESIGN-V2 v2.1 §3 tile stack and §7 rollout. Tokens, tiles, nav, footer and motion live in /brand/v2.css.
   Home: hero (canvas) · how it works (pewter-50 band) · Pewterkit tools (dark product tile: heading above one centred card) · footer. */

/* ---------- hero: one centred axis for the whole page at ≥641px (hero, steps, tools all share the centre line; §3.1 order:
   eyebrow, outcome H1, lead naming Signhome, the button with the CEO's offer line under it and a quiet "How it works" link, then
   the product visual under them). Phones: every tile reads left-aligned on one left edge. */
.hub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; text-align: center; }
.hub-hero__text { max-width: 980px; }
.hub-eyebrow { margin: 0 0 20px; font-size: 17px; font-weight: 400; line-height: 1.3; color: var(--v-muted); } /* the family line: Pewterkit in ink, the rest muted */
.hub-eyebrow b { font-weight: 600; color: var(--v-ink); }
.hub-hero .v-hero { margin: 0 auto 16px; max-width: 18em; text-wrap: balance; } /* two lines at 1440 */
.hub-hero .v-lead { margin: 0 auto 28px; max-width: 30em; text-wrap: pretty; }
.v-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; margin: 0; }
.v-go { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 400; color: var(--v-ink); text-decoration: none; } /* quiet: ink, not the accent */
.v-go:hover { color: var(--v-ink); text-decoration: underline; }
.hub-offer { margin: 12px auto 0; font-size: 17px; line-height: 1.4; color: var(--v-muted); text-wrap: pretty; }
.v-visual { margin: 0; width: 100%; max-width: 560px; }
@media (max-width: 640px) {
  .hub-hero__grid { gap: 28px; justify-items: stretch; text-align: left; }
  .hub-hero .v-hero { max-width: none; margin-left: 0; }
  .hub-hero .v-lead { margin: 0 0 20px; max-width: none; }
  .v-ctas { justify-content: flex-start; gap: 4px 24px; } .hub-offer { margin-left: 0; } .hub-eyebrow { margin-bottom: 12px; }
  .hub-how .t__in--c, .hub-kit .t__in--c { text-align: left; } .hub-how h2, .hub-kit h2, .hub-kit .v-lead { margin-left: 0; }
}

/* the product visual (§3.1): our own neutral illustration of an account chooser (no third-party logo, wordmark or colours).
   The card frame, heading, account rows and chip box never fade; only the chip label and the domain swap. Default render (no JS,
   reduced motion): After. With JS and motion allowed, the head script adds .js-motion at first paint, so the card shows Before from
   the start; when 60% of the card is in view the page script adds .is-anim and swaps state (.is-b = After) at 3.4s, 7.65s and
   11.9s: Before, After, Before, then After (rests). Each swap is a quick out-then-in inside 250ms: the outgoing text fades out over
   110ms, then the incoming text fades in over 140ms, so the two are never legible together and their opacities never sum above 1.
   The chip box is fitted to each label (--wa / --wb, measured by the page script) and resizes smoothly while its text is out.
   Before = the problem: full ink with a dotted pewter underline. After = full ink, solid pewter underline, tick in the chip. */
.v-shot { position: relative; background: #ffffff; color: #16181b; border-radius: 18px; box-shadow: var(--v-shadow); border: 1px solid #e7e8ea;
  padding: 32px 36px 24px; text-align: left; }
.v-chip { display: inline-grid; box-sizing: border-box; margin: 0 0 20px; padding: 6px 12px; border-radius: 9999px; background: #f4f5f6; box-shadow: inset 0 0 0 1px #e7e8ea;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: #16181b; }
.v-chip > span, .v-shot__d > span { grid-area: 1 / 1; justify-self: start; }
.v-chip > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.v-chip svg { width: 12px; height: 12px; flex: none; }
.v-shot__h { font: 400 28px/1.2 var(--v-sans); margin: 0 0 6px; letter-spacing: -0.01em; }
.v-shot__to { font-size: 17px; line-height: 1.4; color: #686e77; margin: 0 0 22px; }
.v-shot__d { display: grid; margin-top: 6px; }
.v-warn, .v-own { font-family: var(--v-mono); font-size: 21px; line-height: 1.4; white-space: nowrap; letter-spacing: 0;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--v-pewter); }
.v-warn, .v-own { color: #16181b; }
.v-warn { text-decoration-style: dotted; }
.v-acct { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #e7e8ea; }
.v-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #6b727c; color: #ffffff; font-size: 17px; font-weight: 600; }
.v-av.v-av--o { background: none; color: #686e77; border: 1px solid #d9dce0; }
.v-av--o svg { width: 22px; height: 22px; }
.v-acct__t { display: grid; font-size: 17px; line-height: 1.3; }
.v-acct__t b { font-weight: 600; } .v-acct__t span { font-size: 12px; color: #686e77; } .v-acct__t .v-acct__o { font-size: 17px; color: #16181b; }
.v-visual figcaption { margin-top: 16px; text-align: center; }
.v-shot__a, .v-chip__a { opacity: 0; } /* default render = After */
.js-motion .v-visual:not(.is-b) .v-shot__a, .js-motion .v-visual:not(.is-b) .v-chip__a { opacity: 1; } /* first paint = Before */
.js-motion .v-visual:not(.is-b) .v-shot__b, .js-motion .v-visual:not(.is-b) .v-chip__b { opacity: 0; }
.js-motion .v-chip.is-fit { width: var(--wa); overflow: hidden; } .js-motion .is-b .v-chip.is-fit { width: var(--wb); }
/* outgoing: out at once over 110ms; incoming: waits 110ms, then in over 140ms. The box grows while Before goes out, or shrinks
   after After has gone, so a label is never clipped while visible. */
.is-anim .v-shot__a, .is-anim .v-shot__b, .is-anim .v-chip__a, .is-anim .v-chip__b { transition: opacity 110ms ease-in; }
.is-anim:not(.is-b) .v-shot__a, .is-anim:not(.is-b) .v-chip__a, .is-anim.is-b .v-shot__b, .is-anim.is-b .v-chip__b { transition: opacity 140ms ease-out 110ms; }
.is-anim .v-chip.is-fit { transition: width 110ms ease 110ms; } .is-anim.is-b .v-chip.is-fit { transition: width 110ms ease; }
@media (prefers-color-scheme: dark) {
  /* the same one shadow as light (it barely shows on black), so the card lifts by a lighter surface plus a hairline */
  .v-shot { background: #2a2e34; color: #eceef1; border-color: #4a5059; }
  .v-chip { background: #1f2328; box-shadow: inset 0 0 0 1px #4a5059; color: #eceef1; }
  .v-warn, .v-own, .v-acct__t .v-acct__o { color: #eceef1; }
  .v-shot__to, .v-acct__t span { color: #a3a9b1; }
  .v-acct { border-top-color: #4a5059; }
  .v-av { background: #a3a9b1; color: #0d0f11; }
  .v-av.v-av--o { background: none; color: #a3a9b1; border-color: #6b727c; }
}
@media (max-width: 640px) {
  .v-shot { padding: 20px 20px 12px; }
  .v-shot__h { font-size: 22px; } .v-chip { margin-bottom: 14px; }
  .v-warn, .v-own { font-size: 17px; }
  .v-acct { padding: 10px 0; }
  .v-visual figcaption { text-align: left; }
}

/* ---------- how it works (pewter-50 band): centred, on the same axis as the tools tile; three numbered steps in a row,
   numbers 40px/600 in the accent (§3.4) */
.v-steps { list-style: none; margin: 40px auto 0; max-width: 980px; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.v-steps li { counter-increment: s; }
.v-steps li::before { content: counter(s); display: block; font-size: 40px; font-weight: 600; line-height: 1; color: var(--v-accent); margin-bottom: 16px; }
.v-steps h3 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.v-steps p { margin: 0; color: var(--v-muted); }
@media (max-width: 734px) { .v-steps { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Pewterkit tools (dark product tile, §3.3): the heading above one centred card per tool */
.hub-kit .v-lead { margin: 0 auto 40px; }
.hub-tools { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 24px; max-width: 640px; text-align: left; } /* wide enough that the CEO line sets "…not firebaseapp.com." without an early break */
.hub-tool__name { display: flex; align-items: center; gap: 10px; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; }
.hub-tool__name .v-mark { width: 22px; height: 22px; }
.hub-tool .hub-tool__line { font-size: 17px; margin: 0; color: var(--v-muted); }
.v-ticks { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.v-ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.v-ticks li::before { content: ""; width: 14px; height: 8px; margin-top: 6px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.hub-tool__cue { margin: 0 0 20px; font-size: 17px; line-height: 1.4; color: var(--v-muted); } /* the CEO's price cue, under the ticks */
.hub-tool__g { margin: 0 0 24px; padding-top: 20px; border-top: 1px solid var(--v-hair); font-size: 17px; }
.hub-tool .hub-tool__price { margin: 12px 0 0; font-size: 17px; line-height: 1.4; color: var(--v-muted); }
@media (max-width: 640px) { .hub-tool__name { font-size: 24px; } .hub-tool .v-btn { width: 100%; } .hub-kit .v-lead { margin-bottom: 32px; } }

/* ---------- legal pages: a parchment title tile, then a reading tile with an "On this page" list
   (sticky beside the text at ≥1069px, a collapsible list on smaller screens) and section anchors. Layout only. */
/* the title tile is short: the page name and its date line, then straight into the text */
.hub-title.t { padding: 64px 0 40px; } /* ≥64px above the H1 */
.hub-title h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; }
.hub-title .pk-small { font-size: 17px; color: var(--v-muted); margin: 0; max-width: none; }
.hub-seg { display: inline-block; } /* each '·' segment kept whole, separator at its end: no line starts with '·' */
.hub-title code { font: inherit; } /* '<tool>.pewterkit.com' in the same face as 'pewterkit.com' beside it (layout only) */
@media (max-width: 640px) { .hub-title h1 { font-size: 34px; } }
@media (max-width: 419px) { .hub-title h1 { font-size: 28px; } }
.hub-read__grid { display: grid; grid-template-columns: 270px minmax(0, 720px); gap: 72px; align-items: start; }
.hub-toc { position: sticky; top: calc(var(--v-nav) + 24px); max-height: calc(100vh - var(--v-nav) - 48px); overflow: auto; }
.hub-toc summary { list-style: none; display: flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; color: var(--v-ink); pointer-events: none; }
.hub-toc summary::-webkit-details-marker { display: none; }
.hub-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--v-hair); }
.hub-toc a { display: block; min-height: 44px; padding: 8px 0 8px 16px; /* even rhythm: 28px lines, 8px above and below every item */ margin-left: -1px; border-left: 2px solid transparent;
  font-size: 17px; line-height: 28px; color: var(--v-muted); text-decoration: none; }
.hub-toc a:hover { color: var(--v-ink); }
.hub-toc a[aria-current] { color: var(--v-ink); border-left-color: var(--v-ink); font-weight: 600; }
.hub-legal { min-width: 0; }
.hub-legal > * { max-width: 720px; }
.hub-legal[data-page="cookies"] > p:first-child { font-size: 21px; line-height: 1.3; color: var(--v-ink); margin-bottom: 48px; } /* the short cookies intro: lead treatment */
.hub-legal h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin: 64px 0 16px; padding-top: 24px; border-top: 1px solid var(--v-hair); scroll-margin-top: calc(var(--v-nav) + 16px); }
.hub-legal h2:first-child, .hub-legal > p:first-child + h2 { margin-top: 0; }
.hub-legal h2:first-child { padding-top: 0; border-top: 0; }
.hub-legal ul { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 10px; }
.hub-legal .pk-small { font-size: 17px; color: var(--v-muted); }
.hub-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 17px; line-height: 1.45; }
.hub-table th, .hub-table td { text-align: left; vertical-align: top; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--v-hair); }
.hub-table th { font-weight: 600; font-size: 12px; color: var(--v-muted); border-bottom-color: var(--v-ink); }
.hub-table th:first-child { width: 30%; }
.hub-table tbody tr:last-child td { border-bottom: 0; } /* the next heading's rule closes the table: no double rule */
.hub-table[data-cols="4"] th { width: 24%; } .hub-table[data-cols="4"] th:first-child { width: 28%; } /* four even-ish columns inside the 720px reading width */
.hub-table[data-cols="4"][data-first="Tool"] th { width: 25%; } /* Tools tables: a short name column, the rest shared */
.hub-table[data-cols="2"] th:first-child { width: 30%; }
@media (max-width: 1068px) {
  .hub-read__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 760px; margin: 0 auto; }
  .hub-toc { position: static; max-height: none; border: 1px solid var(--v-hair); border-radius: 18px; padding: 0 20px; }
  .hub-toc summary { pointer-events: auto; cursor: pointer; justify-content: space-between; min-height: 52px; font-weight: 600; }
  .hub-toc summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
  .hub-toc details[open] summary::after { content: "\2212"; }
  .hub-toc ol { margin: 0 0 12px; }
}
@media (max-width: 640px) {
  .hub-legal[data-page="refunds"] > h2:first-child + p { line-height: 1.6; } /* the long opening paragraph: more air on phones (layout only) */
  .hub-legal[data-page="cookies"] > p:first-child { font-size: 21px; margin-bottom: 40px; }
  .hub-legal h2 { font-size: 21px; margin-top: 48px; }
  /* phone tables: each row is a block, each cell a label/value pair on one grid, rows separated by a rule */
  .hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .hub-table, .hub-table tbody { display: block; }
  .hub-table { border-top: 1px solid var(--v-ink); }
  .hub-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--v-hair); }
  .hub-table td { display: block; position: relative; border: 0; padding: 8px 0 8px 116px; min-height: 36px; }
  .hub-table td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 10px; width: 104px; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--v-muted); }
}
@media (max-width: 640px) { .hub-table tr:last-child { border-bottom: 0; } }

/* light mode: the tools card sits off its #16181b tile by a surface step (#24282e) and its #4a5059 hairline, no shadow: §2 keeps the
   one shadow on the product visual. Dark keeps #1f2328 on #0d0f11. One button per mode: in light mode the card button is the hero's
   #3b5bdb with white text, with a 1px on-dark blue ring so its edge clears 3:1 on the card. */
@media (prefers-color-scheme: light) { .hub-kit .v-card { background: #24282e; } }

/* footer: the one-item Tools column reads as a tool, not a lone list line: the pewter mark beside its name */
.pk-footer__top > div:nth-child(2) li { display: flex; align-items: center; gap: 8px; }
.pk-footer__top > div:nth-child(2) li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background-color: var(--v-pewter);
  background-image: linear-gradient(var(--v-canvas), var(--v-canvas)); background-size: 4px 4px; background-position: 6px 2px; background-repeat: no-repeat; }
@media (prefers-color-scheme: light) {
  .hub-kit .v-btn, .hub-kit .v-btn:hover { background: var(--v-accent); color: #ffffff; box-shadow: 0 0 0 1px var(--v-accent-on-tile); }
}
/* the card's lines fill the card: plain greedy wrapping (no pretty/balance), only compounds and domains kept whole */
.hub-tool p, .hub-tool li { text-wrap: wrap; }
/* phones: the family line stays one line (fine-print size), the domain keeps clear of the card edge down to 360 */
@media (max-width: 640px) { .hub-eyebrow { font-size: 12px; } }
@media (max-width: 380px) { .v-shot { padding-left: 16px; padding-right: 16px; } .v-warn, .v-own { font-size: 15px; } }
/* the guarantee's "Refunds" link sits on its own line under the sentence, by design, rather than as a one-word last line */
.hub-tool__g a { display: table; margin-top: 4px; }