/* ============================================================================
   TrustGetter — marketing site styles.

   Google design language, same as the app. See DESIGN.md §11.

   Consumes tokens.css exclusively: no literal colour value belongs in this
   file except the marketing pastel ramp declared at the top, which is Google's
   published 100-series and has no equivalent in the app.

   The base rules (type roles, buttons, cards) intentionally mirror the
   dashboard's styles.css treatments so the two surfaces are indistinguishable
   — a customer moving from trustgetter.com to app.trustgetter.com should not
   feel a seam.
   ========================================================================= */

:root {
  /* ── Marketing type scale ──────────────────────────────────────────────
     Fluid, because a landing page headline that is right at 1440px is far too
     big at 380px and there is no dense UI around it to hold the size in check.
     The token scale tops out at 28px, correct for an admin surface and far too
     quiet here.

     Tracking stays 0 — Google sets type at zero tracking and never negative.
     Headings are 500: large and *light* is the signature on Google's own
     marketing pages, but at 500 rather than 400 a headline still holds its own
     against a photograph-free layout, and 700 would leave the language. */
  --type-hero-size:     clamp(38px, 5.2vw, 62px);
  --type-hero-lh:       1.14;
  --type-section-size:  clamp(28px, 3.6vw, 44px);
  --type-section-lh:    1.2;
  --type-lead-size:     clamp(17px, 1.4vw, 20px);
  --type-lead-lh:       1.6;
  --type-card-size:     clamp(18px, 1.3vw, 21px);
  --type-card-lh:       1.3;

  /* ── Pastel surfaces — Google's 100-series ────────────────────────────
     Used as whole-card backgrounds, the way Google's careers and product
     pages do. These are backgrounds only: text on them always uses the
     accessible *-ink tokens from tokens.css, never a tinted colour. */
  --pastel-blue:    #E8F0FE;
  --pastel-blue-2:  #D2E3FC;
  --pastel-green:   #E6F4EA;
  --pastel-green-2: #CEEAD6;
  --pastel-yellow:  #FEF7E0;
  --pastel-yellow-2:#FEEFC3;
  --pastel-red:     #FCE8E6;
  --pastel-red-2:   #FAD2CF;
  --pastel-purple:  #F3E8FD;
  --pastel-purple-2:#E9D2FD;

  --container-text: 1040px;  /* the app's content column */
  --section-y:      clamp(56px, 7vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Thin, quiet scrollbars — matching the app. */
* { scrollbar-width: thin; scrollbar-color: var(--color-hairline) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-stone); }

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lg-lh);
  letter-spacing: var(--type-tracking);
  background: var(--color-canvas);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* a decorative element must never widen the page */
}

img, svg { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  z-index: 100;
  background: var(--color-canvas);
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline);
}
.skip-link:focus { left: var(--space-md); }

/* ── Type roles ────────────────────────────────────────────────────────── */
.t-hero {
  font-size: var(--type-hero-size);
  font-weight: 500;
  line-height: var(--type-hero-lh);
  color: var(--color-ink-deep);
}
.t-section {
  font-size: var(--type-section-size);
  /* 500, not 400: a section heading repeated eight times down a page needs
     enough weight to act as a stop, or the page reads as one long column. */
  font-weight: 500;
  line-height: var(--type-section-lh);
  color: var(--color-ink-deep);
}
.t-card {
  font-size: var(--type-card-size);
  font-weight: 400;
  line-height: var(--type-card-lh);
  color: var(--color-ink-deep);
}
.t-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  color: var(--color-ink-deep);
}
.t-headline {
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-lh);
  color: var(--color-ink-deep);
}
.t-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  color: var(--color-ink-deep);
}
.t-body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); }
.t-body-sm { font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.t-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }

/* Genuinely secondary text only. Body copy uses --color-ink. */
.muted { color: var(--color-charcoal); }
.hint {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-steel);
}
.lede {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--color-ink);
  max-width: 60ch;
}

/* Coloured words in a headline, Google's own device.
   Green and yellow are the 700/800 steps, not the brand 500s: at 2.9:1 and
   worse, the 500s fail even the 3:1 large-text floor. Blue and red 500s pass
   at hero sizes and keep the mark recognisably Google. */
.c-blue   { color: var(--g-blue-500); }
.c-red    { color: var(--g-red-500); }
.c-green  { color: var(--color-success); }
.c-yellow { color: var(--color-attention); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-text);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.container--wide { max-width: var(--container-max); }
.container--narrow { max-width: 760px; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.section--soft { background: var(--color-surface-soft); }
.section--hairline { border-top: 1px solid var(--color-hairline-soft); }

/* Widths in px, not ch. `ch` resolves against the element's OWN font-size,
   and these are containers sitting at body size — 22ch measured about 176px
   and stacked every section heading one word per line. Measure limits belong
   on the text element, never on the box around it. */
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; max-width: 800px; }
.section-head p {
  margin-top: var(--space-md);
  color: var(--color-ink);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  max-width: 60ch;
}
.section-head--center p { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-tracking-wide);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.stack    { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }
.row      { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.row--center { justify-content: center; }

/* Spacing utilities exist so no page needs a style attribute. The CSP does
   permit inline styles — the widget injects a <style> into its shadow root, so
   'unsafe-inline' has to stay in style-src — but that is a concession to the
   widget, not a licence for these pages to use it. */
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

/* ── Buttons — pill-shaped, exactly the app's tiers ────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: inherit;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-tracking-wide);
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast),
              box-shadow var(--motion-fast), color var(--motion-fast);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.btn--cobalt { background: var(--color-primary); color: var(--color-on-primary); }
.btn--cobalt:hover { background: var(--color-primary-deep); box-shadow: var(--shadow-subtle); }

.btn--success { background: var(--color-success); color: var(--color-on-primary); }
.btn--success:hover { background: var(--color-success-deep); box-shadow: var(--shadow-subtle); }

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-hairline);
}
.btn--secondary:hover { background: var(--color-primary-soft); border-color: var(--color-primary-hairline); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding: 0 12px;
}
.btn--ghost:hover { background: var(--color-primary-soft); }

/* One size up for a marketing call to action. The app has no equivalent —
   every action there sits in a dense working UI where 40px is correct. */
.btn--lg { height: 48px; padding: 0 32px; font-size: var(--type-body-lg-size); }

/* Green because it opens WhatsApp and because green already means "go" here.
   Deliberately --color-success rather than WhatsApp's brand green: a literal
   brand hex would be a colour outside the palette. */
.btn--whatsapp { background: var(--color-success); color: var(--color-on-primary); }
.btn--whatsapp:hover { background: var(--color-success-deep); box-shadow: var(--shadow-subtle); }
.btn--whatsapp svg { width: 18px; height: 18px; }

/* Text link with a travelling arrow — Google's standard "keep reading" affordance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-primary);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--motion-medium); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-none);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 36px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-charcoal);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}
.chip svg { width: 16px; height: 16px; }
.chip--primary { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.chip--success { background: var(--color-success-soft); color: var(--color-success-ink); }
.chip--outline { background: transparent; border: 1px solid var(--color-hairline); }

/* ── The four-colour mark ──────────────────────────────────────────────────
   A 2×2 square matching the mark inside logo.png, for the places too small to
   carry the full lockup — the widget credit line in the hero mock-up. Quadrant
   order follows the logo exactly: blue, red, yellow, green. */
.brand-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  background:
    linear-gradient(var(--g-blue-500), var(--g-blue-500)) 0 0 / 50% 50% no-repeat,
    linear-gradient(var(--g-red-500), var(--g-red-500)) 100% 0 / 50% 50% no-repeat,
    linear-gradient(var(--g-yellow-500), var(--g-yellow-500)) 0 100% / 50% 50% no-repeat,
    linear-gradient(var(--g-green-500), var(--g-green-500)) 100% 100% / 50% 50% no-repeat;
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--topbar-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
}

.brand {
  display: flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-full);
}
.brand:hover { text-decoration: none; }
/* An explicit INTEGER box, not `width: auto`. The file is 378×80 (see
   shared/resize-logo.py), so 40px tall is exactly 189px wide — auto-sizing off
   the old 600×127 master produced 188.97px, and a fractional box lands the
   image on sub-pixel boundaries, which is half of why it looked soft. */
.brand img { height: 40px; width: 189px; display: block; }

.topbar-right { display: flex; align-items: center; gap: var(--space-lg); }
.nav { display: flex; align-items: center; gap: var(--space-xxs); }

.nav-link {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  color: var(--color-charcoal);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
}
.nav-link:hover { background: var(--color-surface-alt); text-decoration: none; }
/* Google marks the current nav item with a blue tint, never a dark fill. */
.nav-link--active { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-link--active:hover { background: var(--color-primary-soft); }

.topbar-actions { display: flex; align-items: center; gap: var(--space-xs); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-circle);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-surface-alt); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  transition: transform var(--motion-medium), opacity var(--motion-fast);
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: relative; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 4px; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before { top: -2px; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after  { top: -4px; transform: rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 6vw, 88px) 0 var(--section-y); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: var(--space-lg); }
.hero .lede { margin-bottom: var(--space-xl); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-reassure {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  color: var(--color-ink);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}
.hero-reassure span { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.hero-reassure svg { width: 16px; height: 16px; color: var(--color-success); flex: 0 0 auto; }

/* ── The hero widget mock ─────────────────────────────────────────────────
   A CSS mock-up, not a live widget: the marketing page must never fetch a
   customer's reviews to decorate itself. Same reasoning as the builder's
   template thumbnails.

   It sits inside a browser frame, which is the point of the whole illustration.
   A review card floating on its own says "here is a component"; the same card
   inside a window chrome labelled yourwebsite.com says "this is what your site
   looks like afterwards", which is the actual promise. */
.browser {
  border-radius: var(--radius-xxxl);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.browser-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-hairline); }
.browser-url {
  flex: 1;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-full);
  height: 26px;
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 0 var(--space-sm);
  font-size: var(--type-caption-size);
  color: var(--color-steel);
}
.browser-url svg { width: 12px; height: 12px; flex: 0 0 auto; }
.browser-body { padding: clamp(14px, 1.8vw, 22px); background: var(--color-canvas); }

.mock { display: grid; gap: var(--space-md); }

/* Header: the score, the stars, the count — and the action a real Google
   widget carries, so the mock does not look like a stripped-back version. */
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.mock-score { display: flex; align-items: center; gap: var(--space-sm); }
.mock-score b {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink-deep);
}
.mock-score-meta { display: grid; gap: 2px; }
.mock-count { font-size: var(--type-caption-size); color: var(--color-charcoal); }
.mock-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 32px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline);
  color: var(--color-primary);
  font-size: var(--type-body-size);
  font-weight: 500;
  white-space: nowrap;
}

.mock-reviews { display: grid; gap: var(--space-sm); }
.mock-review {
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}
.mock-review-top { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.mock-avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  color: var(--color-on-primary);
  font-size: var(--type-body-size);
  font-weight: 500;
  flex: 0 0 auto;
}
.mock-avatar--blue  { background: var(--color-primary); }
.mock-avatar--green { background: var(--color-success); }
.mock-avatar--red   { background: var(--color-critical); }
.mock-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mock-name { font-size: var(--type-body-size); font-weight: 500; color: var(--color-ink-deep); }
.mock-meta { display: flex; align-items: center; gap: var(--space-xs); }
.mock-date { font-size: var(--type-caption-size); color: var(--color-steel); }
/* The four-colour square on each review, the way a real Google widget credits
   the source of the review it is showing. */
.mock-review .brand-mark { width: 14px; height: 14px; border-radius: 3px; }
.mock-body { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-ink); }
.stars { color: var(--g-yellow-500); letter-spacing: 1px; font-size: var(--type-body-size); }
.stars--sm { font-size: var(--type-caption-size); }
.mock-foot {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline-soft);
  display: flex; align-items: center; justify-content: center; gap: var(--space-xxs);
}

/* ── Grids ─────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* ── Icon cards ────────────────────────────────────────────────────────────
   Bordered, centred, one coloured icon each — the pattern Google uses for
   principles and feature summaries. Flat: the border does the work. */
.icon-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxl);
  padding: clamp(24px, 2.5vw, 36px) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--motion-medium), box-shadow var(--motion-medium);
}
.icon-card:hover { border-color: var(--color-hairline); box-shadow: var(--shadow-subtle); }
.icon-card--center { text-align: center; align-items: center; }

/* The whole card is the link on the integrations hub. The heading keeps ink
   colour rather than turning blue: eight blue headings in a grid reads as a
   list of links rather than a set of cards, and the arrow already carries the
   affordance. The arrow travels on hover of the CARD, not just itself. */
.icon-card--link { text-decoration: none; }
.icon-card--link:hover { text-decoration: none; border-color: var(--color-primary-hairline); }
.icon-card--link h3 { color: var(--color-ink-deep); }
.icon-card--link .link-arrow { margin-top: auto; padding-top: var(--space-xs); }
.icon-card--link:hover .link-arrow svg { transform: translateX(4px); }
.icon-card--link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.icon-card p { color: var(--color-ink); font-size: var(--type-body-size); line-height: var(--type-body-lh); }

/* The icon sits in a pastel disc. Colour is decorative and rotates through the
   Google palette so a grid of cards reads as one family rather than six
   unrelated boxes. */
.icon-disc {
  width: 56px; height: 56px;
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  margin-bottom: var(--space-xs);
  flex: 0 0 auto;
}
.icon-disc svg { width: 26px; height: 26px; }
.icon-disc--blue   { background: var(--pastel-blue);   color: var(--color-primary); }
.icon-disc--green  { background: var(--pastel-green);  color: var(--color-success); }
.icon-disc--yellow { background: var(--pastel-yellow); color: var(--color-attention); }
.icon-disc--red    { background: var(--pastel-red);    color: var(--color-critical); }
.icon-disc--purple { background: var(--pastel-purple); color: #7627BB; }

/* ── Pastel feature cards ─────────────────────────────────────────────────
   Google's careers-card pattern: a visual on top, a pastel body below, and the
   action pinned bottom-right in the matching accent. Nothing here is a
   photograph — each visual is a CSS mock-up of the layout it names, which is
   both honest and more useful than stock imagery of people at laptops. */
.pastel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

.pastel-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xxxl);
  overflow: hidden;
  background: var(--pastel-blue);
  min-height: 340px;
  text-decoration: none;
  transition: transform var(--motion-medium), box-shadow var(--motion-medium);
}
.pastel-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.pastel-card--blue   { background: var(--pastel-blue); }
.pastel-card--green  { background: var(--pastel-green); }
.pastel-card--yellow { background: var(--pastel-yellow); }
.pastel-card--red    { background: var(--pastel-red); }

.pastel-visual {
  height: 152px;
  padding: var(--space-md);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
  overflow: hidden;
}
.pastel-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}
.pastel-body h3 {
  font-size: var(--type-card-size);
  font-weight: 400;
  line-height: var(--type-card-lh);
  color: var(--color-ink-deep);
}
.pastel-body p { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-ink); }

.pastel-action {
  margin-top: auto;
  padding-top: var(--space-md);
  display: flex;
  justify-content: flex-end;
}
.pastel-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 40px;
  padding: 0 var(--space-md) 0 var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.pastel-pill svg { width: 16px; height: 16px; }
.pastel-card--green  .pastel-pill { background: var(--color-success); }
.pastel-card--yellow .pastel-pill { background: var(--color-attention); }
.pastel-card--red    .pastel-pill { background: var(--color-critical); }

/* ── Layout mini-mockups ──────────────────────────────────────────────────
   Tiny CSS renderings of the four widget layouts. Sizes are deliberately small
   — a grid track cannot shrink below its content's intrinsic minimum, so
   oversized internals silently push the columns past the card edge. The
   builder's template thumbnails learned this the hard way. */
.mini { display: grid; gap: 6px; height: 100%; }
.mini-card {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline-soft);
  border-radius: 8px;
  padding: 7px;
  display: grid;
  gap: 4px;
  align-content: start;
  overflow: hidden;
}
.mini-row { display: flex; align-items: center; gap: 4px; }
.mini-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.mini-dot--blue { background: var(--pastel-blue-2); }
.mini-dot--green { background: var(--pastel-green-2); }
.mini-dot--red { background: var(--pastel-red-2); }
.mini-dot--yellow { background: var(--pastel-yellow-2); }
.mini-stars { font-size: 7px; color: var(--g-yellow-500); letter-spacing: .5px; }
.mini-line { height: 4px; border-radius: 2px; background: var(--color-hairline-soft); }
.mini-line--short { width: 55%; }
.mini-line--mid { width: 75%; }

.mini--grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mini--list { grid-template-rows: repeat(3, 1fr); }

/* A list row is avatar + body, and the body is its own stack.
   It used to lean on `> div:last-child` while inheriting `align-content: start`
   from .mini-card, so the two children sat on different baselines and the text
   bar drifted out of line with the stars above it. Explicit flex, an explicit
   class, and the bars sized to the row rather than to a percentage of whatever
   space happened to be left. */
.mini--list .mini-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.mini-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.mini-body .mini-line { width: 100%; }
.mini-body .mini-line--short { width: 55%; }
.mini--carousel { grid-template-columns: 1fr; }
.mini--carousel .mini-card { height: 100%; }
.mini-dots { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.mini-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-hairline); }
.mini-dots i:first-child { background: var(--color-primary); }
.mini--marquee { grid-auto-flow: column; grid-auto-columns: 62%; overflow: hidden; }
.mini--dark .mini-card { background: var(--color-ink-deep); border-color: var(--color-charcoal); }
.mini--dark .mini-line { background: var(--color-charcoal); }

/* ── Steps ────────────────────────────────────────────────────────────────
   Three cards, each showing what the step actually looks like rather than
   describing it in a paragraph. The earlier version was a 104px number over
   two lines of text — the number was the loudest thing in the section and the
   only thing in it, which made a three-step install read as an infographic
   about nothing.

   The number is now a small chip that labels the card instead of dominating
   it, and a dotted rule runs between the cards on desktop so the three read as
   one sequence rather than three unrelated boxes. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  position: relative;
}

.step {
  position: relative;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxl);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--motion-medium), box-shadow var(--motion-medium);
}
.step:hover { border-color: var(--color-hairline); box-shadow: var(--shadow-subtle); }

.step-head { display: flex; align-items: center; gap: var(--space-sm); }
.step-num {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  font-size: var(--type-body-size);
  font-weight: 500;
  line-height: 1;
}
/* Tinted, not filled: at 30px a solid brand fill next to a title reads as a
   notification badge. The ink tokens keep the numeral around 7:1. */
.step:nth-child(1) .step-num { background: var(--pastel-green);  color: var(--color-success-ink); }
.step:nth-child(2) .step-num { background: var(--pastel-blue);   color: var(--color-primary-ink); }
.step:nth-child(3) .step-num { background: var(--pastel-yellow); color: var(--color-attention-ink); }

.step-head h3 {
  font-size: var(--type-card-size);
  font-weight: 500;
  line-height: var(--type-card-lh);
  color: var(--color-ink-deep);
}
.step p { color: var(--color-ink); font-size: var(--type-body-size); line-height: var(--type-body-lh); }

/* The illustration: a small, real-looking piece of the product for each step. */
.step-visual {
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: var(--space-xs);
}
.step:nth-child(1) .step-visual { background: var(--pastel-green); }
.step:nth-child(2) .step-visual { background: var(--pastel-blue); }
.step:nth-child(3) .step-visual { background: var(--pastel-yellow); }

/* Step 1 — a search field with a result under it. */
.step-search {
  background: var(--color-canvas);
  border-radius: var(--radius-full);
  height: 34px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
  color: var(--color-steel);
  font-size: var(--type-caption-size);
}
.step-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.step-result {
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-caption-size);
  color: var(--color-ink-deep);
}
.step-result .stars { font-size: 10px; }

/* Step 2 — three template swatches, one selected. */
.step-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.step-swatch {
  background: var(--color-canvas);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  height: 62px;
  padding: 6px;
  display: grid;
  gap: 3px;
  align-content: start;
}
.step-swatch i { display: block; height: 4px; border-radius: 2px; background: var(--color-hairline-soft); }
.step-swatch i:first-child { width: 60%; background: var(--g-yellow-500); }
.step-swatch--on { border-color: var(--color-primary); }

/* Step 3 — the snippet, abbreviated. */
.step-code {
  background: var(--color-ink-deep);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-on-ink);
  overflow: hidden;
  white-space: nowrap;
}
.step-code .tok-tag { color: var(--pastel-blue-2); }
.step-code .tok-str { color: var(--pastel-yellow-2); }

/* The dotted connector, drawn between cards rather than through them. Hidden
   below the point where the cards stop sitting in a row. */
@media (min-width: 1024px) {
  .step + .step::before {
    content: '';
    position: absolute;
    top: 46px;
    right: 100%;
    width: clamp(20px, 2.4vw, 32px);
    border-top: 2px dotted var(--color-hairline);
  }
}

/* ── Showcase: a visual beside a list of expanding features ───────────────
   Google's product-page pattern. The left border is the state indicator: the
   active item goes blue and reveals its paragraph, the rest stay as headings.
   Rows are buttons, so the whole thing works from a keyboard. */
.showcase { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }

.showcase-visual {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxxl);
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  place-items: center;
  min-height: 340px;
}

.showcase-list { display: flex; flex-direction: column; }
.showcase-item {
  /* border: 0 first — a <button> carries a default border on every side, and
     without this the "left rail" reads as four boxed rows. */
  border: 0;
  border-left: 3px solid var(--color-hairline-soft);
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  text-align: left;
  background: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color var(--motion-medium);
}
.showcase-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.showcase-item h3 {
  font-size: var(--type-card-size);
  font-weight: 400;
  line-height: var(--type-card-lh);
  color: var(--color-charcoal);
  transition: color var(--motion-fast);
}
.showcase-item p {
  color: var(--color-ink);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  margin-top: var(--space-xs);
  display: none;
}
.showcase-item[aria-expanded='true'] { border-left-color: var(--color-primary); }
.showcase-item[aria-expanded='true'] h3 { color: var(--color-ink-deep); font-weight: 500; }
.showcase-item[aria-expanded='true'] p { display: block; }
.showcase-item:hover h3 { color: var(--color-ink-deep); }

/* Builder mock-up shown beside it. */
.builder-mock { width: 100%; max-width: 420px; display: grid; gap: var(--space-sm); }
.builder-bar {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-full);
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
}
.builder-bar span { height: 8px; border-radius: 4px; background: var(--color-hairline-soft); flex: 1; }
.builder-bar i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.builder-body {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxl);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-md);
  min-height: 220px;
}
.builder-rail { display: grid; gap: var(--space-xs); align-content: start; }
.builder-rail i {
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
}
.builder-rail i:first-child { background: var(--pastel-blue); }
.builder-canvas { display: grid; gap: var(--space-xs); align-content: start; }

/* ── Platform strip ────────────────────────────────────────────────────── */
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

/* A chip that is a link rather than a label. The outline chip already reads as
   a discrete object; this only adds the affordance — hover tints it the way the
   nav does, and the underline is suppressed because a bordered pill with an
   underline inside it reads as two controls. */
.chip--link {
  color: var(--color-ink);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.chip--link:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-hairline);
  color: var(--color-primary-ink);
  text-decoration: none;
}
.chip--link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── The install guide: a vertical numbered sequence ────────────────────────
   Distinct from `.steps` (§DESIGN.md), which is a three-across marketing
   summary with a pastel visual per card and colours keyed to nth-child. This is
   documentation: five or six steps that are read in order and followed with a
   browser open beside them, so it runs down the page with the number in the
   margin and a rule connecting one to the next.

   The connector is a border on the number's column rather than a pseudo-element
   between cards, so a step of any height stays joined to the one below it. */
.guide { display: grid; gap: 0; counter-reset: guide; }

.guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
/* The last step ends the line — a rule running past the final number implies a
   step that is not there. */
.guide-step:last-child { padding-bottom: 0; }
.guide-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  border-left: 2px solid var(--color-hairline-soft);
}

.guide-num {
  counter-increment: guide;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  position: relative;
  z-index: 1;
}
.guide-num::before { content: counter(guide); }

.guide-body { padding-top: 6px; min-width: 0; }
.guide-body h3 {
  font-size: var(--type-card-size);
  font-weight: 500;
  color: var(--color-ink-deep);
  margin-bottom: var(--space-xs);
}
.guide-body p { color: var(--color-ink); }
.guide-body p + p { margin-top: var(--space-sm); }
.guide-body .code-well { margin-top: var(--space-md); }
.guide-body .alert { margin-top: var(--space-md); }

/* Menu paths — "Online Store → Themes". Set apart from the sentence so the
   thing to click is findable without reading the whole line again. */
.ui-path {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-alt);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  color: var(--color-ink-deep);
  white-space: nowrap;
}

/* Screenshot placeholder. Deliberately looks unfinished: a guide shipping
   without its images should be obvious to us and still useful to a reader, and
   an empty grey box with no caption is neither. No square brackets in the copy
   — the build's placeholder warning scans for those and a false positive on
   every page is how that guard stops being read. */
.shot {
  margin-top: var(--space-md);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-charcoal);
  font-size: var(--type-caption-size);
}
.shot svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-steel); }

/* ── Cross-links between the platform guides ───────────────────────────── */
.guide-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ── Code well ─────────────────────────────────────────────────────────── */
.code-well {
  background: var(--color-ink-deep);
  border-radius: var(--radius-xxl);
  padding: clamp(16px, 2vw, 24px);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.05vw, 13px);
  line-height: 1.7;
  color: var(--color-on-ink);
  overflow-x: auto;
  white-space: pre;
}
.code-well .tok-tag  { color: var(--pastel-blue-2); }
.code-well .tok-attr { color: var(--pastel-green-2); }
.code-well .tok-str  { color: var(--pastel-yellow-2); }

.code-frame { max-width: 860px; margin: clamp(32px, 4vw, 56px) auto 0; }
.code-caption { text-align: center; margin-top: var(--space-md); }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.billing-toggle {
  display: inline-flex;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-canvas);
}
.seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-charcoal);
  height: 40px;
  padding: 0 var(--space-lg);
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--color-hairline); }
.seg-btn:hover { background: var(--color-surface-soft); }
.seg-btn[aria-pressed='true'] { background: var(--color-primary-soft); color: var(--color-primary); }
.seg-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; }

.plan {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxl);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
}
/* The recommended plan gets a blue border and tint — Google's selected-card
   pattern, the same one the builder uses for the active template. No dark
   fill, no scale transform. */
.plan--featured { border-color: var(--color-primary-hairline); background: var(--pastel-blue); }

.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.plan-head h3 { font-size: var(--type-card-size); font-weight: 400; line-height: var(--type-card-lh); color: var(--color-ink-deep); }
.plan-price { display: flex; align-items: baseline; gap: var(--space-xxs); }
.plan-price b { font-size: clamp(32px, 3.2vw, 40px); font-weight: 400; line-height: 1.2; color: var(--color-ink-deep); }
.plan-price span { color: var(--color-charcoal); font-size: var(--type-body-size); }
.plan-tagline { color: var(--color-ink); font-size: var(--type-body-size); line-height: var(--type-body-lh); min-height: 40px; }

.plan-features { list-style: none; display: grid; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-hairline-soft); }
.plan-features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-ink);
}
.plan-features svg { width: 16px; height: 16px; margin-top: 2px; color: var(--color-success); }
.plan-features li.is-absent { color: var(--color-steel); }
.plan-features li.is-absent svg { color: var(--color-stone); }

.plan .btn { width: 100%; }
.plan-loading, .plan-error { padding: var(--space-xl); text-align: center; }

/* ── Alerts — pale tint, coloured icon, near-black text ─────────────────── */
.alert {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xxl);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  align-items: flex-start;
}
.alert svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.alert--warning { background: var(--pastel-yellow); color: var(--color-attention-ink); }
.alert--warning svg { color: var(--color-attention); }
.alert--info    { background: var(--pastel-blue); color: var(--color-primary-ink); }
.alert--info svg { color: var(--color-primary); }
.alert--success { background: var(--pastel-green); color: var(--color-success-ink); }
.alert--success svg { color: var(--color-success); }

/* ── Comparison table ──────────────────────────────────────────────────────
   After Google's Workspace comparison. Four things carry it: grouped sections
   instead of one long list, body-size rather than caption-size text, the plan
   price repeated in the header so a column still identifies itself after a
   scroll, and a dash rather than a cross for "not included" — a grid of
   crosses reads as a page full of failures. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-xxl);
  background: var(--color-canvas);
}
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
}
table.compare th, table.compare td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  vertical-align: middle;
}

/* Header. NOT sticky: .table-wrap sets overflow-x, which makes the wrap itself
   the scroll container, so a sticky thead sticks to the top of the wrap rather
   than to the viewport — it sat on top of the first rows and hid them. The
   plan name is repeated as a price under each column heading instead, which is
   what a reader actually needs after scrolling. */
table.compare thead th {
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
  padding: var(--space-md);
}
/* Same type as the plan names beside it — only the alignment differs, because
   it heads the label column rather than a value column. It was set at label
   size in charcoal, which made the one cell that explains the table the
   quietest thing in its own header row. */
table.compare thead th:first-child { text-align: left; }
table.compare thead th:first-child,
.compare-plan {
  font-size: var(--type-card-size);
  font-weight: 500;
  line-height: var(--type-card-lh);
  color: var(--color-ink-deep);
}
/* Only the span. `display: block` on the <th> takes the cell out of the table
   layout entirely — it stops stretching to the row height and leaves a white
   strip under it where the header background should be. */
.compare-plan { display: block; }
.compare-price { display: block; font-size: var(--type-body-size); color: var(--color-charcoal); margin-top: 2px; }

/* Section headings inside the table. */
tr.compare-group th {
  background: var(--color-canvas);
  border-top: 1px solid var(--color-hairline-soft);
  border-bottom: 1px solid var(--color-hairline-soft);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-tracking-wide);
  color: var(--color-primary);
  text-transform: uppercase;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-top-width: 0;
}
tbody tr.compare-group:not(:first-child) th { border-top-width: 1px; }

/* Row heading: the label, and an optional line of context under it. */
table.compare tbody th {
  font-weight: 400;
  color: var(--color-ink);
  border-top: 1px solid var(--color-hairline-soft);
}
tr.compare-group + tr th, tr.compare-group + tr td { border-top: 0; }
.compare-label { display: block; }
.compare-note {
  display: block;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-steel);
  margin-top: 2px;
}

table.compare tbody td {
  text-align: center;
  border-top: 1px solid var(--color-hairline-soft);
}
.compare-value { font-weight: 500; color: var(--color-ink-deep); }
.compare-dash { color: var(--color-stone); }
table.compare svg { width: 20px; height: 20px; vertical-align: middle; }
table.compare .is-yes { color: var(--color-success); }

/* The recommended plan's column, tinted the whole way down. */
table.compare .is-featured { background: var(--pastel-blue); }
table.compare thead th.is-featured { background: var(--pastel-blue-2); }

/* ── Disclosure / FAQ ──────────────────────────────────────────────────── */
.faq-list { display: grid; gap: var(--space-sm); }

.disclosure {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xxl);
  overflow: hidden;
  background: var(--color-canvas);
}
.disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-body-lg-lh);
  color: var(--color-ink-deep);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: var(--color-surface-soft); }
.disclosure > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.disclosure[open] > summary { background: var(--pastel-blue); color: var(--color-primary-ink); }
.disclosure-chevron { flex: 0 0 auto; width: 20px; height: 20px; transition: transform var(--motion-medium); }
.disclosure[open] .disclosure-chevron { transform: rotate(180deg); }
.disclosure-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  color: var(--color-ink);
  font-size: var(--type-body-lg-size);
  line-height: 1.65;
}
.disclosure-body > * + * { margin-top: var(--space-sm); }

/* FAQ category heading with its own coloured icon. */
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }

/* ── Contact ───────────────────────────────────────────────────────────── */

.field { display: block; }
.field > span {
  display: block;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-ink-deep);
  margin-bottom: var(--space-xxs);
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: inherit;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
  height: 48px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.field textarea { height: auto; min-height: 128px; padding: var(--space-sm) var(--space-md); resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.contact-card {
  border-radius: var(--radius-xxl);
  padding: clamp(24px, 2.4vw, 32px);
  display: grid;
  gap: var(--space-sm);
}
.contact-card--tint { background: var(--pastel-green); }
.contact-card--plain { background: var(--color-canvas); border: 1px solid var(--color-hairline-soft); }
/* Icon beside the text rather than above it — in a single column the stacked
   version pushes the address a long way down its own card. */
.contact-card--row { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-lg); }
.contact-card--row h2 { margin-bottom: var(--space-xxs); }
.contact-card--row .contact-email { margin-bottom: var(--space-xs); }
.contact-email {
  font-size: var(--type-card-size);
  line-height: var(--type-card-lh);
  word-break: break-word;
}

/* ── Legal / long-form prose ───────────────────────────────────────────── */
.prose { max-width: 720px; }
.prose h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink-deep);
  margin: var(--space-xl) 0 var(--space-sm);
}
.prose h3 {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  color: var(--color-ink-deep);
  margin: var(--space-lg) 0 var(--space-xs);
}
.prose p, .prose li { color: var(--color-ink); font-size: var(--type-body-lg-size); line-height: 1.7; }
.prose p + p { margin-top: var(--space-sm); }
.prose ul, .prose ol { margin: var(--space-sm) 0 var(--space-sm) var(--space-lg); display: grid; gap: var(--space-xxs); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: var(--type-body-size); }
.prose th, .prose td { border: 1px solid var(--color-hairline-soft); padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; }
.prose th { font-weight: var(--type-label-weight); color: var(--color-ink-deep); background: var(--color-surface-soft); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* Placeholders the owner still has to fill in. Loud on purpose: a legal page
   that quietly ships "[REGISTERED ADDRESS]" is worse than one that is
   obviously unfinished. */
.todo {
  background: var(--pastel-yellow-2);
  color: var(--color-attention-ink);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-xxs);
  font-weight: 500;
}

/* ── Closing call to action ────────────────────────────────────────────── */
.cta-panel {
  background: var(--pastel-blue);
  border-radius: var(--radius-xxxl);
  padding: clamp(32px, 5vw, 72px) var(--space-lg);
  text-align: center;
}
.cta-panel p {
  margin: var(--space-md) auto var(--space-xl);
  max-width: 52ch;
  color: var(--color-ink);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-hairline-soft);
  background: var(--color-surface-soft);
  padding: clamp(40px, 5vw, 64px) 0 var(--space-lg);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(32px, 4vw, 64px);
}
.footer-brand { display: grid; gap: var(--space-sm); justify-items: start; }
.footer-logo { height: 32px; width: 151px; display: block; }
/* Body size, not .hint. This is the one line that says what the product is —
   it was set at caption size in the palest grey on the page, which is the
   treatment for fine print, not for the only description in the footer. */
.footer-tagline {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
  color: var(--color-ink);
  max-width: 26ch;
}
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.footer-col-title {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--color-ink-deep);
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; display: grid; gap: var(--space-xs); }
.footer-col a { color: var(--color-ink); font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.footer-col a:hover { color: var(--color-primary); }

.footer-base {
  max-width: var(--container-max);
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: var(--space-md) var(--space-lg) 0;
  border-top: 1px solid var(--color-hairline-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  color: var(--color-steel);
}

/* ── Responsive ────────────────────────────────────────────────────────────
   Three real breakpoints. Everything between them is handled by the fluid
   clamp() type and spacing above, which is why there are so few. */

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-xxl); }
  .hero .lede { max-width: none; }
  .browser { max-width: 560px; }
  .pastel-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr; gap: var(--space-xl); }
  .showcase-visual { order: 2; }
  .footer-inner { grid-template-columns: 1fr; }
  /* Four columns of links under a full-width brand block leaves each one about
     150px wide, which wraps "Squarespace" onto two lines. Two-up reads. */
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .section-head--center { max-width: 620px; }
}

@media (max-width: 767px) {
  /* The nav collapses into a panel under the bar. Hidden rather than removed,
     so the links stay in the DOM for assistive tech and for search. */
  .nav-toggle { display: inline-flex; }
  .topbar-inner { flex-wrap: wrap; }
  .topbar-right {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) 0 var(--space-sm);
    border-top: 1px solid var(--color-hairline-soft);
  }
  .topbar-right.is-open { display: flex; }
  .nav { flex-direction: column; align-items: stretch; gap: var(--space-xxs); }
  .nav-link { padding: var(--space-sm) var(--space-md); }
  .topbar-actions { flex-direction: column-reverse; align-items: stretch; }
  .topbar-actions .btn { width: 100%; }

  .section-head, .section-head--center { max-width: none; }
  .plan-grid, .grid-2, .grid-3, .grid-4, .pastel-grid, .steps { grid-template-columns: 1fr; }
  .plan-tagline { min-height: 0; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .cta-panel { border-radius: var(--radius-xxl); }
  .cta-panel .btn { width: 100%; }
  .cta-panel .row { flex-direction: column; align-items: stretch; }

  .footer-cols { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-base { flex-direction: column; gap: var(--space-xs); }

  .disclosure > summary { padding: var(--space-md); font-size: var(--type-body-size); }
  .disclosure-body { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: var(--type-body-size); }

  .contact-card--row { grid-template-columns: 1fr; gap: var(--space-sm); }

  .browser { border-radius: var(--radius-xxl); }
  .showcase-visual { min-height: 0; padding: var(--space-md); border-radius: var(--radius-xxl); }
  .pastel-card { min-height: 0; }
}