@import "./tokens.css";

/* Playflow marketing site, static, server-renderable stylesheet.
   Tokens mirror the design system (tokens/colors.css, typography.css, spacing.css).
   Every rule here is presentation only: all content is in the HTML. */



*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--sand); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
/* The UA's [hidden] { display: none } loses to any author display rule, so
   .stack / .claim__next etc. would keep hidden panels on screen. */
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--deep-teal); text-decoration: none; }
a:hover { color: #2B7F88; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--seafoam); color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--shell); color: var(--ink); padding: 10px 16px; border-radius: var(--r-md); font-weight: 600; transition: top 140ms var(--ease); }
.skip:focus { top: 16px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
/* Reading measure for intro copy. Goes on a CHILD of .wrap, never on .wrap
   itself, .wrap is centered, so narrowing it indents the whole block. */
.measure { max-width: 760px; }
.measure-wide { max-width: 820px; }
.band { padding: 96px 0; }
.band--tight { padding: 64px 0; }
/* Page intro + the block it introduces read as one unit, no 128px canyon. */
.band--intro { padding: 64px 0 28px; }
.band--follows { padding: 0 0 64px; }
.band--shell { background: var(--shell); }
.band--ink { background: var(--ink); color: var(--sand); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--wide-left { grid-template-columns: 1.2fr minmax(0,1fr); }
.split--wide-right { grid-template-columns: minmax(0,1fr) 1.3fr; }
/* Variants that used to be inline, kept as classes so the breakpoints below can win. */
/* The hero ground spans the whole section; the brand panel and the form card
   both sit on it, so there is no seam down the middle. */
.split--auth { position: relative; overflow: hidden; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; min-height: calc(100vh - 73px); background: var(--ink); }
.split--auth > .auth-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split--auth > .auth-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(19,34,41,.50) 0%, rgba(19,34,41,.70) 100%); }
.split--auth > .hero, .split--auth > .auth-panel { position: relative; z-index: 1; }
.split--auth > .hero { background: transparent; }
/* Brand panel. All geometry lives here, no inline styles to outrank it. */
.split--auth > .hero { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px; }
.split--auth > .hero > * { position: relative; }
.split--auth > .hero > .hero__bg, .split--auth > .hero > .hero__scrim { position: absolute; }
.split--auth > .hero > .mono { position: absolute; left: 48px; bottom: 40px; }

/* Form side sits on the same wave ground as the homepage hero, not flat sand. */
.auth-panel { position: relative; display: grid; place-items: center; padding: 48px 32px; background: transparent; }
.auth-panel > .stack { position: relative; }
/* Lifted off the dark ground, the ink-based shadows disappear on it. */
.auth-card { position: relative; width: 100%; max-width: 520px; background: var(--shell); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-2xl); padding: 32px; box-shadow: 0 32px 64px -20px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.2); }
.split--cta { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.split--cta .btn { justify-self: start; }
.card.split--cta { padding: 44px 48px; }
.split--embed { grid-template-columns: minmax(0,1fr) 1.4fr; gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-teal); }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.eyebrow--sand { color: var(--sand); }
.eyebrow--lagoon, .eyebrow--coral { color: var(--lagoon-text); }
.display { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 72px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
h2, .h2 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }
.h2--sm { font-size: clamp(26px, 2.6vw, 36px); }
h3, .h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; }
.h4 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.lead { font-size: 18px; line-height: 1.55; color: var(--slate-teal); max-width: 62ch; }
.band--ink .lead, .hero .lead, .site-footer .lead, .on-ink .lead, .lead--light { color: rgba(236,224,217,.9); }
.small { font-size: 14px; }
.caption { font-size: 13px; color: var(--slate-teal); }
/* Every dark ground, not just .band--ink, the footer and hero are dark too. */
.band--ink .caption, .site-footer .caption, .hero .caption, .on-ink .caption { color: rgba(236,224,217,.9); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.metric { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- buttons ----------
   Adopted from the Playflow_Backgrounds_and_Buttons pack: pill radius, 48px
   floor, a 1px border on every variant, and CONTEXTUAL surfaces, the same
   .btn--primary flips to a light gradient on any dark ground, so markup never
   has to name the surface it sits on. Glow is dark-surface only and restrained. */
.btn {
  /* Defaults live on :root, NOT here. A declaration on .btn would always beat a
     value inherited from a dark ground, which is how the inversion breaks. */
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 48px; min-width: 48px; max-width: 100%; padding: 11px 24px;
  border: 1px solid var(--btn-border); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center;
  text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:visited { color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--btn-hover-bg); border-color: var(--btn-hover-border);
    box-shadow: var(--btn-hover-shadow); transform: translateY(-1px); text-decoration: none;
  }
}
.btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background: var(--btn-hover-bg); border-color: var(--btn-hover-border);
  transform: translateY(0) scale(.985); box-shadow: none;
}
.btn:focus-visible { outline: 3px solid var(--deep-teal-hover); outline-offset: 4px; box-shadow: 0 0 0 4px var(--shell); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; transform: none; box-shadow: none; }
.btn[aria-busy="true"]::after {
  content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: btn-spin 850ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn--lg { min-height: 56px; padding: 15px 30px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

/* The campaign / high-emphasis CTA. Ink on a bright lagoon gradient, with a
   lagoon-deep border: the fill alone is only 2.02:1 against Sand, so the pill
   needs a real edge to read as a control on a light ground. */
.btn--accent { --btn-bg: var(--gradient-accent); --btn-hover-bg: var(--gradient-accent-hover);
  --btn-fg: var(--ink); --btn-border: var(--lagoon-deep); --btn-hover-border: var(--lagoon-deep);
  --btn-hover-shadow: 0 4px 16px rgba(43,127,136,.30); }
/* Kept so a stale .btn--coral cannot silently fall back to the teal primary.
   Destructive actions only: delete, revoke, remove. */
.btn--danger, .btn--coral { --btn-bg: var(--coral-deep); --btn-hover-bg: var(--coral-deeper);
  --btn-fg: #fff; --btn-border: var(--coral-deep); --btn-hover-border: var(--coral-deeper);
  --btn-hover-shadow: 0 4px 14px rgba(178,97,47,.26); }
.btn--outline { --btn-bg: var(--shell); --btn-hover-bg: var(--sand);
  --btn-fg: var(--ink); --btn-border: var(--deep-teal); --btn-hover-border: var(--deep-teal-hover); }
.btn--ghost { --btn-bg: transparent; --btn-hover-bg: rgba(60,104,118,.09);
  --btn-fg: var(--ink); --btn-border: transparent; --btn-hover-border: transparent; --btn-hover-shadow: none; }
.btn--brand { --btn-bg: var(--gradient-brand); --btn-hover-bg: linear-gradient(135deg,#325A67 0%,#1B2F38 100%);
  --btn-fg: #fff; --btn-border: var(--deep-teal); --btn-hover-border: var(--seafoam); }
.btn--seafoam { --btn-bg: var(--seafoam); --btn-hover-bg: #8FB1B0;
  --btn-fg: var(--ink); --btn-border: var(--seafoam); --btn-hover-border: #8FB1B0; }
.btn--text { --btn-bg: transparent; --btn-hover-bg: transparent; --btn-fg: var(--deep-teal-hover);
  --btn-border: transparent; --btn-hover-border: transparent; --btn-hover-shadow: none;
  min-height: 0; min-width: 0; padding: 2px 4px; border-radius: var(--r-sm);
  text-underline-offset: .24em; text-decoration-thickness: .08em; }
.btn--text:hover { text-decoration: underline; transform: none !important; }
.btn--icon { width: 48px; height: 48px; padding: 12px; flex: none; }

/* Dark grounds set the button tokens on the GROUND, so no color variant or size
   modifier can opt out of the inversion. Color variants re-set the same tokens
   on the element itself, which wins on specificity.

   .on-ink is the GENERIC opt-in. Enumerating grounds by name means every new
   dark surface has to be added to six separate lists, and three have been
   missed that way (the auth hero's ticks, the footer captions, a dark specimen
   that rendered the light treatment under an "identical markup" caption). Any
   dark surface can now just carry .on-ink instead of earning a seventh name. */
.hero, .band--ink, .site-footer, .split--auth > .hero, .plan--hot, .card--ink, .cta-band, .on-ink {
  --btn-bg: linear-gradient(135deg,#FBF8F5 0%,#9FBDBC 100%);
  --btn-hover-bg: linear-gradient(135deg,#9FBDBC 0%,#8FB1B0 100%);
  --btn-fg: var(--ink); --btn-border: var(--seafoam); --btn-hover-border: #8FB1B0;
  /* Shadow belongs here too, not on the button. The per-variant
     `--btn-shadow: none` resets below stop it reaching non-primary pills, and
     keeping it on the ground lets .claim / .auth-card / light .card null it. */
  --btn-shadow: 0 0 16px rgba(79,174,181,.17), 0 4px 14px rgba(0,0,0,.15);
  --btn-hover-shadow: 0 0 24px rgba(79,174,181,.30), 0 4px 18px rgba(0,0,0,.20);
}
/* No element-level --btn-bg for primary or outline on dark grounds: the ground
   rule above already sets these tokens, and a declaration ON the button always
   beats an ancestor's, which stops .claim / .auth-card / .card re-lighting a
   light surface nested inside a dark band. */
.hero .btn--accent, .band--ink .btn--accent, .site-footer .btn--accent,
.split--auth > .hero .btn--accent, .plan--hot .btn--accent, .card--ink .btn--accent,
.cta-band .btn--accent, .on-ink .btn--accent {
  --btn-border: var(--lagoon-bright); --btn-hover-border: var(--lagoon-bright);
}
.hero .btn--ghost, .band--ink .btn--ghost, .site-footer .btn--ghost,
.plan--hot .btn--ghost, .card--ink .btn--ghost, .cta-band .btn--ghost, .on-ink .btn--ghost {
  --btn-hover-bg: rgba(159,189,188,.12); --btn-fg: var(--shell);
}
.hero .btn--text, .band--ink .btn--text, .site-footer .btn--text,
.plan--hot .btn--text, .card--ink .btn--text, .cta-band .btn--text,
.on-ink .btn--text { --btn-fg: var(--seafoam); }
.hero .btn:focus-visible, .band--ink .btn:focus-visible, .site-footer .btn:focus-visible,
.split--auth > .hero .btn:focus-visible, .plan--hot .btn:focus-visible, .card--ink .btn:focus-visible,
.cta-band .btn:focus-visible, .on-ink .btn:focus-visible { outline-color: var(--shell); box-shadow: 0 0 0 4px var(--ink); }

/* A LIGHT surface nested inside a dark section must reset the group, because
   custom properties inherit: an .auth-card inside .split--auth would otherwise
   render its primary as a light gradient on a light card (1:1 on the left edge).
   Listed by surface, so any future light card in a dark ground is covered. */
.auth-card, .card:not(.card--ink), .claim, .plan:not(.plan--hot), .studio__panel--light {
  --btn-bg: var(--deep-teal); --btn-hover-bg: var(--deep-teal-hover);
  --btn-fg: #fff; --btn-border: var(--deep-teal); --btn-hover-border: var(--deep-teal-hover);
  --btn-shadow: none; --btn-hover-shadow: 0 4px 14px rgba(60,104,118,.20);
}
.auth-card .btn--outline, .card:not(.card--ink) .btn--outline, .claim .btn--outline,
.plan:not(.plan--hot) .btn--outline {
  --btn-bg: var(--shell); --btn-hover-bg: var(--sand); --btn-fg: var(--ink);
  --btn-border: var(--deep-teal); --btn-hover-border: var(--deep-teal-hover);
}
.auth-card .btn:focus-visible, .card:not(.card--ink) .btn:focus-visible,
.claim .btn:focus-visible, .plan:not(.plan--hot) .btn:focus-visible {
  outline-color: var(--deep-teal); box-shadow: 0 0 0 4px var(--shell);
}

/* Non-primary variants reset the shadow explicitly, so no ground can lend them a glow. */
.btn--accent, .btn--danger, .btn--coral, .btn--sand, .btn--ghost-light, .btn--outline-light,
.btn--outline, .btn--ghost, .btn--text, .btn--seafoam { --btn-shadow: none; }
.btn--danger, .btn--coral { --btn-hover-shadow: 0 4px 14px rgba(178,97,47,.26); }
.btn--accent { --btn-hover-shadow: 0 4px 16px rgba(43,127,136,.30); }
.btn--sand { --btn-bg: var(--sand); --btn-hover-bg: var(--shell);
  --btn-fg: var(--ink); --btn-border: var(--sand); --btn-hover-border: var(--shell); }
.btn--ghost-light { --btn-bg: transparent; --btn-hover-bg: rgba(159,189,188,.14);
  --btn-fg: var(--sand); --btn-border: transparent; --btn-hover-border: transparent; --btn-hover-shadow: none; }
.btn--outline-light { --btn-bg: transparent; --btn-hover-bg: rgba(236,224,217,.12);
  /* The border IS the affordance here, so it carries the 3:1 UI-component floor
     (WCAG 1.4.11). At .35 it composited to 2.62:1 on ink; .55 measures 4.34:1. */
  --btn-fg: var(--sand); --btn-border: rgba(236,224,217,.55); --btn-hover-border: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; animation: none; }
  .btn:hover, .btn:active { transform: none; }
}
@media (forced-colors: active) {
  .btn, .btn:visited { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; forced-color-adjust: auto; }
  .btn:hover, .btn:active { background: Highlight; color: HighlightText; border-color: Highlight; }
  .btn:focus-visible { outline: 3px solid Highlight; outline-offset: 4px; box-shadow: none; }
  .btn:disabled, .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; opacity: 1; }
}
/* Base size for every inline icon; context rules below only enlarge. */
.i { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.14em; }
.btn .i { width: 1.05em; height: 1.05em; }
.eyebrow .i { width: 1.15em; height: 1.15em; }
.h4 .i, h3 .i { width: .8em; height: .8em; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--ink); border-bottom: 1px solid rgba(159,189,188,.22); }
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img.mark { width: 34px; height: 34px; }
/* Wordmark set live in the display face, matching h1, not the outlined SVG. */
.brand .word { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: -.025em; color: var(--sand); }
.brand--ink .word { color: var(--ink); }
/* Links stretch to the full header height, so the active indicator can anchor to
   bottom:0, the header's own inner edge, instead of a magic offset that breaks
   whenever the header height or link padding changes. */
.site-nav { display: flex; gap: 4px; align-self: stretch; }
/* The link box is full-height so the indicator can anchor to it, but the tint
   paints on an inset ::before, otherwise the pill becomes a full-bleed slab. */
.site-nav a { display: flex; align-items: center; padding: 0 12px; font-size: 15px; font-weight: 500; color: var(--sand); position: relative; text-decoration: none; }
.site-nav a::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; bottom: 15px; border-radius: var(--r-md); background: transparent; transition: background-color 180ms var(--ease); }
.site-nav a:hover { text-decoration: none; }
.site-nav a:hover::before { background: rgba(159,189,188,.1); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-nav a[aria-current="page"]::before { background: rgba(159,189,188,.16); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 1px 1px 0 0; background: var(--lagoon); }
.site-nav a > * , .site-nav a { z-index: 0; }
.site-nav a::before, .site-nav a::after { z-index: -1; }
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--sand); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Opaque only where the copy sits, fully transparent by the two-thirds mark, so
   the artwork reads at full strength on the open side. */
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(96deg, rgba(19,34,41,.86) 0%, rgba(19,34,41,.72) 30%, rgba(19,34,41,.30) 56%, rgba(19,34,41,0) 74%); }
.hero .wrap { position: relative; padding-top: 104px; padding-bottom: 96px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--font-mono); font-size: 13px; color: rgba(236,224,217,.92); letter-spacing: .04em; }
.flow-sig { width: 84px; opacity: .85; }

/* ---------- cards ---------- */
.card { background: var(--shell); border: 1px solid var(--driftwood); border-radius: var(--r-2xl); padding: 28px; box-shadow: var(--shadow-sm); }
.card--ink { background: var(--ink); color: var(--sand); border-color: rgba(255,255,255,.1); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.card__icon { width: 44px; height: 44px; border-radius: var(--r-xl); background: var(--teal-tint); color: var(--deep-teal); display: grid; place-items: center; }
.card__icon svg, .card__icon .i { width: 22px; height: 22px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--driftwood); border: 1px solid var(--driftwood); border-radius: var(--r-2xl); overflow: hidden; }
.feature-grid > li { background: var(--shell); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.feature-grid svg, .feature-grid .i { width: 22px; height: 22px; color: var(--deep-teal); }
.grid-4 .card > .i { width: 22px; height: 22px; color: var(--deep-teal); }

/* ---------- lists ---------- */
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.ticks svg, .ticks .i { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--deep-teal); }
/* Same seven-ground list as the --btn-* block. Enumerating only .band--ink left
   the auth panel's ticks at 2.78:1, under the 3:1 non-text floor. */
.hero .ticks svg, .band--ink .ticks svg, .site-footer .ticks svg,
.split--auth > .hero .ticks svg, .plan--hot .ticks svg, .card--ink .ticks svg,
.cta-band .ticks svg, .on-ink .ticks svg { color: var(--seafoam); }
/* Must match the base rule's shape: the icons are <svg class="i">, so
   `.ticks .i` (0,2,0) beats a bare `.ticks--coral svg` (0,1,1) and the variant
   silently did nothing. */
.ticks--lagoon svg, .ticks--lagoon .i, .ticks--coral svg, .ticks--coral .i { color: var(--lagoon-text); }
/* --lagoon-text is tuned for a LIGHT ground (5.88:1 on Shell); on ink it is
   2.4:1. The variant rule above is (0,2,0) and declared after the dark-ground
   list, so it would otherwise win inside a .hero or .band--ink. Restating the
   dark grounds here, last, keeps seafoam on any dark surface. */
.hero .ticks--lagoon svg, .band--ink .ticks--lagoon svg, .site-footer .ticks--lagoon svg,
.split--auth > .hero .ticks--lagoon svg, .plan--hot .ticks--lagoon svg,
.card--ink .ticks--lagoon svg, .cta-band .ticks--lagoon svg, .on-ink .ticks--lagoon svg,
.hero .ticks--lagoon .i, .band--ink .ticks--lagoon .i, .site-footer .ticks--lagoon .i,
.split--auth > .hero .ticks--lagoon .i, .plan--hot .ticks--lagoon .i,
.card--ink .ticks--lagoon .i, .cta-band .ticks--lagoon .i, .on-ink .ticks--lagoon .i {
  color: var(--seafoam);
}

/* ---------- placeholders / media ---------- */
.ph { position: relative; border-radius: var(--r-2xl); border: 1px solid var(--driftwood); background: repeating-linear-gradient(135deg, var(--dune) 0 8px, var(--sand) 8px 16px); display: grid; place-items: center; aspect-ratio: 4 / 3; }
.ph--dark { border-color: rgba(255,255,255,.08); background: repeating-linear-gradient(135deg, #1B2F38 0 8px, #22404b 8px 16px); }
.ph--wide { aspect-ratio: 16 / 9; }
.ph span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-teal); background: rgba(251,248,245,.86); padding: 5px 12px; border-radius: 999px; }
.ph--dark span { color: rgba(236,224,217,.8); background: rgba(0,0,0,.4); }

/* Static player mock, pure CSS, no JS required to render */
.player { position: relative; aspect-ratio: 16/9; border-radius: var(--r-2xl); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-lg);
  /* The four colors the product actually exposes, plus derived foregrounds. */
  --accent: var(--deep-teal); --accent-fg: #fff;
  --progress: var(--seafoam);
  --control-bg: #1B2F38; --control-fg: #FFFFFF;
  /* Inherited color is for the POSTER (always the dark teal gradient), not the
     bar, .player__bar / __ctl / __time / __play each set their own. */
  color: #fff; }
.player__poster { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #2B7F88 0%, #1B2F38 60%, #132229 100%); }
.player__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,34,41,0) 40%, rgba(19,34,41,.85) 100%); }
.player[data-poster="darken"] .player__poster { filter: brightness(.68); }
.player[data-poster="gradient"] .player__poster { filter: contrast(1.12) saturate(1.18); }
.player[data-poster="gradient"] .player__poster::after { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, transparent) 0%, rgba(19,34,41,.9) 100%); }
.player__title { position: absolute; left: 20px; top: 18px; right: 20px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.player__title b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; display: block; }
.player__title span { font-size: 13px; opacity: .8; }
.player__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--player-play-border); box-shadow: var(--player-play-shadow); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform 180ms var(--ease), filter 180ms var(--ease); }
.player__play:hover { transform: scale(1.06); filter: brightness(1.12); }
.player__play svg, .player__play .i { width: 30px; height: 30px; margin-left: 2px; }
.player__bar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 52px; background: var(--control-bg); color: var(--control-fg); display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.player[data-bar="floating"] .player__bar { left: 12px; right: 12px; bottom: 12px; border-radius: var(--r-lg); }
.player__seek { position: absolute; left: 8px; right: 8px; top: -2.4px; height: 4.8px; border-radius: 999px; background: color-mix(in srgb, var(--control-fg) 24%, transparent); }
.player[data-bar="floating"] .player__seek { left: 12px; right: 12px; top: -8px; }
.player__fill { height: 100%; border-radius: 999px; background: var(--progress); position: relative; }
.player__fill::after { content: ""; position: absolute; right: -6.8px; top: -4.4px; width: 13.6px; height: 13.6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--control-bg); box-sizing: border-box; }
.player__ctl { width: 44px; height: 44px; border: none; background: transparent; color: var(--control-fg); display: grid; place-items: center; cursor: pointer; border-radius: var(--r-md); }
.player__ctl:hover { background: color-mix(in srgb, var(--control-fg) 10%, transparent); }
/* Accent only touches the bar here. When it can't be seen on the chosen bar,
   this one icon falls back to the bar's own foreground, the configuration
   isn't broken, so validate() no longer flags accent at all. */
.player__ctl[data-primary] { color: var(--primary-icon, var(--accent)); }
.player__ctl svg, .player__ctl .i { width: 20px; height: 20px; }
.player__time { font-family: var(--font-mono); font-size: 13px; padding: 0 8px; color: var(--control-fg); opacity: .92; font-variant-numeric: tabular-nums; }
.player__spacer { flex: 1; }
.stat-float { position: absolute; right: -20px; top: -28px; background: var(--shell); color: var(--ink); border: 1px solid var(--driftwood); border-radius: var(--r-xl); padding: 12px 16px; box-shadow: var(--shadow-md); display: flex; gap: 14px; align-items: center; }
.stat-float .card__icon { width: 36px; height: 36px; border-radius: 10px; }
.stat-float .card__icon svg { width: 18px; height: 18px; }

/* ---------- swatch controls (enhanced by JS, readable without it) ---------- */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(236,224,217,.55); transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--seafoam); }
.control-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--seafoam); }
/* Prose, so block: display:flex made every text node and <a> a separate flex
   item, gapping the words apart and orphaning the final period. An icon inside
   a hint aligns via vertical-align instead. */
.hint { font-size: 14px; color: var(--seafoam); display: block; }
.hint .i { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }
.g-logo { width: 18px; height: 18px; flex: none; }
.seg { display: flex; gap: 8px; }

/* ---------- brand studio (hero lead-gen) ---------- */
.studio { display: grid; gap: 16px; }
.studio__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .studio__pair { grid-template-columns: 1fr } }
.studio__auto { font-size: 12.5px; color: rgba(236,224,217,.7); display: flex; align-items: center; gap: 7px; }
/* The dark panel supplies its own light border, so drop the light-context ring
   rather than stacking a dark slate ring outside a sand one on ink. Alpha .55
   measures 4.34:1 on ink; .35 was only 2.62:1. */
.studio__auto .chip__dot { width: 13px; height: 13px; border: 1px solid rgba(236,224,217,.55); box-shadow: none; }
.studio__check { display: none; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; }
.studio__check[data-state="pass"] { display: flex; background: rgba(95,154,111,.16); color: #B6DCC0; border: 1px solid rgba(95,154,111,.4); }
.studio__check[data-state="warn"] { display: flex; background: rgba(198,135,58,.18); color: #F0CFA6; border: 1px solid rgba(198,135,58,.45); }
.studio__check .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.studio__check button { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.studio__field { display: flex; flex-direction: column; gap: 8px; }
.studio__field input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid rgba(236,224,217,.28); background: rgba(19,34,41,.5); color: var(--sand); font: inherit; font-size: 16px; }
.studio__field input::placeholder { color: rgba(236,224,217,.55); }
.studio__field input:focus { outline: none; border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(159,189,188,.25); }

/* Detected-brand row */
.detected { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: rgba(159,189,188,.1); border: 1px solid rgba(159,189,188,.28); }
.detected__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--seafoam); }
.detected__head .i { width: 15px; height: 15px; }
.detected__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detected__logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; flex: none; }
.detected__note { font-size: 12.5px; color: rgba(236,224,217,.75); }
.detected__note button { background: none; border: none; padding: 0; font: inherit; color: var(--sand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(159,189,188,.35); border-top-color: var(--seafoam); animation: spin 700ms linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg) } }

/* Split email: local part + fixed @domain suffix */
.email-split { display: flex; align-items: stretch; border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--shell); overflow: hidden; }
/* (0,2,1) so it beats .field input (0,1,1) regardless of source order. The
   wrapper owns the border, the radius and the focus ring; the input owns
   nothing visual, or you get a box inside a box. */
.field .email-split input, .email-split input {
  border: none; background: transparent; box-shadow: none; border-radius: 0;
  min-height: 44px; padding: 10px 2px 10px 12px; font: inherit; font-size: 15px;
  color: var(--ink); flex: 1; min-width: 0; width: auto;
}
.field .email-split input:focus, .email-split input:focus { outline: none; box-shadow: none; border-color: transparent; }
.email-split:focus-within { border-color: var(--deep-teal); box-shadow: 0 0 0 3px rgba(60,104,118,.22); }
.email-split__suffix { display: flex; align-items: center; padding: 0 4px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--slate-teal); white-space: nowrap; }
.email-split__edit {
  flex: none; width: 40px; align-self: stretch; display: grid; place-items: center;
  border: none; border-left: 1px solid var(--driftwood); background: transparent;
  color: var(--slate-teal); cursor: pointer; border-radius: 0;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.email-split__edit:hover { background: var(--dune); color: var(--ink); }
.email-split__edit:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: -2px; }
.email-split__edit .i { width: 16px; height: 16px; }
.claim__or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--slate-teal); margin: 14px 0; }
.claim__or span { flex: 1; height: 1px; background: var(--driftwood); }

/* Claim panel: visible by default so no-JS visitors get the whole form.
   enhance.js sets data-collapsed on load and clears it on first interaction. */
.claim { margin-top: 16px; background: var(--shell); color: var(--ink); border: 1px solid var(--driftwood); border-radius: var(--r-2xl); padding: 24px; box-shadow: var(--shadow-md); }
.claim[data-collapsed="true"] { display: none; }
.claim__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.claim__head .card__icon { width: 38px; height: 38px; border-radius: 10px; }
.claim__head .card__icon .i { width: 19px; height: 19px; }
.claim__title { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.claim__sub { display: block; font-size: 14px; color: var(--slate-teal); margin-top: 3px; }
.claim__recap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
/* Ink, not slate-teal: mid-teal on Dune is 4.26:1 at 12px. Third time this trap
   has come up (docs cards, sidebar badge), so the chip owns the rule. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--dune); color: var(--ink); font-size: 12px; font-weight: 600; }
/* The dot's whole job is to say "this is the color", so its edge must clear 3:1
   on Dune for every swatch. An inset alpha ring composited over the fill left
   Peach at 1.73:1 and Shell at 1.05:1. Non-inset, so the 11px fill stays 11px. */
.chip__dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px var(--control-border); }
/* flex-end so the button's bottom edge lines up with the input, not the label. */
.claim__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
/* min-width:auto is the flex default, so without this the field cannot shrink
   below .email-split's min-content and leaks past the card. */
.claim__row .field { flex: 1 1 200px; min-width: 0; }
.email-split { min-width: 0; }
/* A floor so the suffix can never starve the field it sits beside. If the
   domain still will not fit, enhance.js stops splitting altogether. */
.field .email-split input, .email-split input { min-width: 6ch; }
.email-split__suffix { min-width: 0; }
.claim__row .btn { flex: 0 0 auto; }
.claim__fine { font-size: 12.5px; color: var(--slate-teal); margin-top: 12px; }
.claim__next { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--driftwood); }
.claim__next li { display: flex; gap: 8px; font-size: 13px; color: var(--slate-teal); }
.claim__next .i { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--seagrass); }
@media (max-width: 620px) { .claim__row .btn { width: 100%; } }

/* ---------- pills, callouts, tables ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill--plan { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm); background: var(--seafoam); color: var(--ink); }
.pill--yours { background: var(--success-subtle); color: var(--success-text); }
.pill--ours { background: var(--info-subtle); color: var(--info-text); }
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; }
.callout svg, .callout .i { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.callout--info { background: var(--info-subtle); color: var(--info-text); border: 1px solid rgba(79,174,181,.35); }
.kv { display: grid; gap: 12px; }
.kv li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-radius: var(--r-xl); background: var(--sand); border: 1px solid var(--driftwood); }
.band--shell .kv li { background: var(--sand); }
.kv b { font-size: 14px; flex: 0 1 auto; min-width: 96px; }
.kv .val { font-family: var(--font-mono); font-size: 13px; color: var(--slate-teal); flex: 1 1 140px; overflow-wrap: break-word; }
pre.code { margin: 0; padding: 18px 20px; border-radius: var(--r-xl); background: var(--ink); color: var(--sand); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; overflow-x: auto; }
pre.code .tok { color: var(--seafoam); }

/* ---------- pricing ---------- */
.billing { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Shell track, not dune: muted text on dune is only 4.45:1. On shell it is 5.99:1
   and the selected state still reads from its solid teal fill. */
.billing__set { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-lg); background: var(--shell); border: 1px solid var(--driftwood); }
.billing__set .btn { min-height: 38px; border-radius: var(--r-md); }
.billing__set .btn[aria-pressed="false"] { background: transparent; border-color: transparent; color: var(--slate-teal); box-shadow: none; }
.billing__set .btn[aria-pressed="false"]:hover { background: var(--dune); color: var(--ink); }
.pill--save { background: var(--success-subtle); color: var(--success-text); font-size: 11px; padding: 2px 7px; }
.plan__note { font-size: 13px; color: var(--slate-teal); margin-top: -8px; }
.plan--hot .plan__note { color: rgba(236,224,217,.8); }
.plan__alt { display: block; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: var(--r-2xl); background: var(--shell); border: 1px solid var(--driftwood); box-shadow: var(--shadow-sm); }
.plan--hot { background: var(--ink); color: var(--sand); border-color: rgba(255,255,255,.1); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price .caption { flex: 0 0 auto; white-space: nowrap; }
.plan__price strong { font-family: var(--font-display); font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan .ticks { flex: 1; align-content: start; }
.plan--hot .ticks svg { color: var(--seafoam); }
.pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.plan > *:not(.pattern), .card--ink > *:not(.pattern), .cta-band > *:not(.pattern) { position: relative; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field .req { color: var(--coral-text); }
/* The base pattern needs its own ::placeholder, or Chrome's rgb(117,117,117)
   applies: 4.35:1 and not a palette color. Slate Teal is 5.99:1 on Shell and
   still clearly lighter than real input text (--ink, 13.14:1). */
.field input::placeholder, .field textarea::placeholder { color: var(--slate-teal); opacity: 1; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--shell); color: var(--ink); font: inherit; font-size: 15px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--deep-teal); box-shadow: 0 0 0 3px rgba(60,104,118,.22); }
.field .hint { font-size: 13px; font-weight: 400; color: var(--slate-teal); display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- CTA band + footer ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg, #3C6876 0%, #1B2F38 100%); color: var(--sand); padding: 64px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
/* The actions are one unit. Without this wrapper, space-between spreads each
   button to an opposite edge of the band. */
.cta-band__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none; }
/* The copy must be allowed to SHRINK, not sit pinned at its max-width. Pinned
   at 560 it needed 984px of inner width, so the band wrapped to two rows from
   1100 to 1152, a common laptop range, when the reference draws one row. The
   inline max-width still caps it at 560 on wide screens. */
.cta-band > .stack { flex: 1 1 320px; min-width: 0; }
@media (max-width: 700px) { .cta-band__actions { width: 100%; } .cta-band__actions .btn { flex: 1 1 auto; } }
.site-footer { background: var(--ink); color: var(--sand); position: relative; overflow: hidden; }
/* One decorative layer only: the existing img.pattern in the markup. A ::before
   here would double it up, and `.cta-band > *` (without :not(.pattern)) would
   drop the absolute image into flow. Line 473 already handles stacking. */
.pattern { opacity: .55; }
.site-footer .pattern { opacity: .5; object-position: center bottom; }
.cta-band .pattern { object-position: right center; }
.site-footer .wrap { position: relative; padding-top: 72px; padding-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.site-footer .brand .word { font-size: 26px; }
.split--auth .brand .word { font-size: 30px; }
.footer-grid h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--seafoam); margin-bottom: 12px; font-weight: 500; }
.footer-grid a:not(.brand) { color: rgba(236,224,217,.9); font-size: 15px; display: block; padding: 4px 0; }
.footer-grid a:hover { color: #fff; }
.footer-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(236,224,217,.78); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .split, .split--wide-left, .split--wide-right, .split--embed { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .split--embed { gap: 20px; }
  /* Stacked: the brand panel is content-height, so the pinned footer would
     overlap the copy. Let it flow. */
  .split--auth { min-height: 0; }
  .split--auth > .hero { justify-content: flex-start; padding: 40px 32px; }
  .split--auth > .hero > .mono { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-float { position: static; margin-top: 16px; width: max-content; max-width: 100%; }
}
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .band { padding: 64px 0; }
  .grid-3, .feature-grid, .plans { grid-template-columns: minmax(0,1fr); }
  .split--auth { grid-template-columns: minmax(0,1fr); min-height: 0; }
  /* Stacked: the brand panel needs its own breathing room, and space-between
     has nothing to distribute in a content-height box. */
  .split--auth > .hero { justify-content: flex-start !important; gap: 24px; padding: 40px 20px !important; }
  .split--auth > .hero > .mono { position: static; }
  .auth-panel { padding: 40px 20px; }
  .auth-card { padding: 24px; }
  .auth-card .form-grid { grid-template-columns: 1fr 1fr; }
  .split--cta { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .card.split--cta { padding: 32px 24px; }
  .split--cta .btn { width: 100%; }
  .player__ctl { flex-shrink: 0; }
  .player__time { padding: 0 4px; font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 40px 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .site-header .wrap { gap: 12px; }
  .site-nav { display: none; }
  .site-header[data-open="true"] .site-nav { display: flex; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; background: var(--ink); padding: 12px 20px 20px; border-bottom: 1px solid rgba(159,189,188,.22); }
  .site-nav a[aria-current="page"]::after { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid rgba(236,224,217,.3); border-radius: var(--r-md); color: var(--sand); cursor: pointer; }
  .nav-toggle svg, .nav-toggle .i { width: 20px; height: 20px; }
  .header-actions { margin-left: 0; }
  .header-actions .btn--ghost-light { display: none; }
}
@media (max-width: 620px) {
  .player__time { display: none; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero .wrap { padding-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .btn, .nav-toggle { display: none; }
  body { background: #fff; }
}