/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Bento Grid (marketing) ·
 * theme: custom "warm quiet" · paper oklch(98.6% 0.006 75) · accent oklch(63% 0.19 40) warm ·
 * display Neusharp + body Lexend + outlier NeusharpCond ·
 * nav: N5 content-width bar (knobs: width=72rem content column, backdrop=blur, anchor=top-centred) ·
 * footer: Ft1 mast-headed (knobs: wordmark=xl, tagline=roman, links=inline) ·
 * F1 bento knobs: tiles=7, spans=irregular, border=hairline-all ·
 * enrichment: Tier-A CSS spec-table · design-system: design.md · designed-as-app ·
 * contrast: pass (46–50) · slop: pass (51–55) · honest: pass (56) · chrome: pass (57) ·
 * tokens: pass (58) · responsive: pass (59) · icons: pass (60) · mobile: pass (36, 59, 61–69)
 *
 * StorePilot marketing-site design layer. Loaded after tokens.css + tailwind.css
 * (prebuilt/purged - only structural utilities are used from it). */

/* ---------- Derived tokens (component-level, built from /assets/css/tokens.css) ---------- */

:root {
  --shadow-pill: 0 8px 24px -12px color-mix(in oklch, var(--color-ink) 25%, transparent);
  --shadow-menu: 0 16px 40px -16px color-mix(in oklch, var(--color-ink) 30%, transparent);
  --nav-clearance: 5.75rem;
}

/* ---------- Base ---------- */

html { overflow-x: clip; scroll-padding-top: var(--nav-clearance); }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  padding-top: var(--nav-clearance);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: var(--color-accent-text); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lede { color: var(--color-muted); font-size: var(--text-md); max-width: 60ch; }
.muted { color: var(--color-muted); }

/* One content column for every page - same 72rem as the hero/bento/footer. */
.container-page {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ---------- Nav · N5 floating pill ---------- */

.nav-pill {
  position: fixed;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--space-md));
  max-width: 72rem; /* same column as .hero / .bento / .cta-final */
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: color-mix(in oklch, var(--color-paper) 85%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
}
.nav-pill__cta { margin-left: auto; }
.nav-pill .site-logo {
  display: inline-flex;
  align-items: center;
  /* Icon-to-wordmark gap: +20px requested, then reduced by 10px. */
  gap: calc(var(--space-xs) + 0.625rem);
  flex: none;
  text-decoration: none;
}
.nav-pill .site-logo:hover { text-decoration: none; }
.nav-pill .logo-mark { width: 1.625rem; height: auto; display: block; flex: none; }
.logo-word {
  font-family: var(--font-outlier);
  padding-top: 4px; /* optical alignment against the box icon */
  font-size: calc(var(--text-lg) * 1.3);
  line-height: 1;
  color: var(--color-ink);
  white-space: nowrap;
}
.logo-word span { color: var(--color-accent-text); }
.nav-pill__links { display: flex; align-items: center; gap: var(--space-3xs); }
.nav-pill__links a {
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav-pill__links a:hover { color: var(--color-ink); background: var(--color-paper-2); text-decoration: none; }
.nav-pill__links a[aria-current="page"] { color: var(--color-ink); }
.nav-pill__links a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 0.3125rem; height: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  margin-left: var(--space-2xs);
  vertical-align: 0.125rem;
}

/* Mobile menu (native details/summary - no JS needed) */
.nav-menu { position: relative; display: none; }
.nav-menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-ink);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 1.25rem; height: 1.25rem; }
.nav-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-sm));
  min-width: 13rem;
  padding: var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
  display: grid;
}
.nav-menu__panel a {
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-sm) var(--space-sm);
  border-radius: calc(var(--radius-card) - 4px);
}
.nav-menu__panel a:hover { background: var(--color-paper-2); text-decoration: none; }

@media (max-width: 40rem) {
  :root { --nav-clearance: 5.5rem; }
  .nav-pill { gap: var(--space-sm); padding-left: var(--space-sm); }
  /* Links and CTA collapse into the menu - the enlarged wordmark plus CTA
     plus burger no longer fit a 320px pill. The menu carries the CTA link. */
  /* .nav-pill prefix out-ranks the later .sp-btn display rule. */
  .nav-pill .nav-pill__links, .nav-pill .nav-pill__cta { display: none; }
  .nav-menu { display: block; margin-left: auto; }
}

/* ---------- Buttons ---------- */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform 100ms var(--ease-out);
}
.sp-btn:hover { text-decoration: none; transform: translateY(-1.5px); }
.sp-btn:active { transform: translateY(0); }
.sp-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.sp-btn[data-state="loading"] { opacity: 0.75; cursor: progress; transform: none; }
.sp-btn[data-state="success"] { background: var(--color-ok); border-color: var(--color-ok); }
.sp-btn[data-state="error"] { background: var(--color-err); border-color: var(--color-err); }
.sp-btn-primary { background: var(--color-ink); color: var(--color-paper); }
.sp-btn-primary:hover { background: var(--color-ink-lift); color: var(--color-paper); }
.sp-btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.sp-btn-secondary:hover { background: var(--color-ink); color: var(--color-paper); }
.sp-btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
@media (pointer: coarse) { .sp-btn { min-height: 2.75rem; } }

/* C3 · typographic link with arrow - the secondary CTA voice */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: var(--space-3xs);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.link-arrow::after { content: "→"; }
.link-arrow:hover { text-decoration: none; border-color: var(--color-accent); }

/* ---------- Hero (home) · left-biased split ---------- */

.hero { max-width: 72rem; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.hero-grid {
  display: grid;
  /* 6/6 split: the image column is 20% wider than the previous 7/5. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-2xl);
  align-items: center;
}
.hero-lede { margin-top: var(--space-lg); color: var(--color-muted); max-width: 52ch; }
.hero-flag {
  display: inline-flex;
  margin-bottom: var(--space-lg);
}
.hero-flag a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hero-flag a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-flag-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex: none;
}
.hero h1 { font-size: var(--text-display); margin: 0; }
.hero-word { color: var(--color-accent); }
.hero-side p { color: var(--color-muted); max-width: 44ch; }
.hero-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}
.hero-channels {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-faint);
  font-size: var(--text-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
}
.hero-channels-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-faint);
  margin-right: var(--space-xs);
}
.hero-channels strong { color: var(--color-ink); font-weight: 500; }

@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
}

/* One orchestrated entrance, hero only. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: sp-reveal var(--dur-long) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  @keyframes sp-reveal { to { opacity: 1; transform: none; } }
}

/* ---------- Section heads · S2 hanging ---------- */

.section-head { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-md); }
.section-head h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-sm); max-width: 24ch; }

/* ---------- Bento · F1, irregular spans, hairline borders ---------- */

.bento-section { padding: var(--space-3xl) 0 var(--space-xl); }
.bento {
  max-width: 72rem;
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(9.5rem, auto);
  gap: var(--space-sm);
}
.cell {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color var(--dur-short) var(--ease-out);
}
.cell:hover { border-color: var(--color-faint); }
.cell h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}
.cell h3 svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-accent-text); }
.cell p { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-2x1 { grid-column: span 2; }
.span-1x2 { grid-row: span 2; }
.cell--media { padding: 0; overflow: hidden; position: relative; }
.cell--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell--tint { background: var(--color-paper-2); }

/* Tier-A CSS art · the sync spec-table inside the hero tile */
.sync-demo {
  margin-top: auto;
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.sync-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
}
.sync-row--head {
  border-top: 0;
  color: var(--color-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sync-row span:nth-child(n+2) { text-align: right; }
.sync-row strong { color: var(--color-ink); font-weight: 500; }
.sync-row .sync-check { color: var(--color-ok); }

@media (max-width: 56rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .span-2x2, .span-2x1 { grid-column: auto; }
  .span-1x2 { grid-row: auto; }
  .cell--media { aspect-ratio: 16 / 9; }
}

/* ---------- Final CTA · C2 inline form ---------- */

.cta-final {
  max-width: 72rem;
  margin: var(--space-2xl) auto var(--space-3xl);
  padding: var(--space-2xl) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.cta-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.cta-final h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-sm); }
.cta-final .muted { font-size: var(--text-sm); max-width: 40ch; }
.cta-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.cta-form input {
  background: none;
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  border-radius: 0;
  padding: var(--space-sm) var(--space-2xs);
  min-height: 2.75rem;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-ink);
  min-width: 0;
}
.cta-form input::placeholder { color: var(--color-faint); }
.cta-form input:focus-visible { outline-offset: 4px; }
.cta-final-note { margin-top: var(--space-lg); }
@media (max-width: 40rem) {
  .cta-final-inner { grid-template-columns: minmax(0, 1fr); }
  .cta-form { grid-template-columns: minmax(0, 1fr); }
  .cta-form .sp-btn { width: 100%; }
}

/* ---------- Media frame (content pages) ---------- */

.media-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.media-frame img { display: block; width: 100%; height: auto; }

/* ---------- Steps (how it works) · F4, genuinely ordinal ---------- */

.steps {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.step {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  transition: border-color var(--dur-short) var(--ease-out);
}
.step:hover { border-color: var(--color-faint); }
.step p.step-num {
  font-family: var(--font-outlier);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-rule);
  margin: 0 0 var(--space-md);
}
.step-num::after { content: "."; color: var(--color-accent); }
.step h2 { font-size: var(--text-xl); margin: 0; }
.step p { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; }

/* ---------- Pricing tiers · hairline spec-table, no cards ---------- */

.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-top: var(--space-2xl);
}
.tier {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-xl) var(--space-lg);
  min-width: 0;
  text-align: left;
}
.tier--featured {
  position: relative;
  background: var(--color-paper-2);
  border-top: 2px solid var(--color-accent);
  /* The accent border is 1px thicker than the hairline - take it back out of
     the padding so all four tier names sit at the same height. */
  padding-top: calc(var(--space-xl) - 1px);
}
/* The flag lives inside the tier's top padding so tier names stay aligned
   across all four columns. */
.tier-flag {
  position: absolute;
  top: var(--space-sm);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
}
.tier-name { font-size: var(--text-lg); margin: 0; }
.tier-desc { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tier-price {
  margin-top: var(--space-lg);
  font-family: var(--font-outlier);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.tier-price small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-faint); }
.tier-features {
  flex: 1;
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.tier-features li { display: flex; gap: var(--space-xs); align-items: baseline; }
.tier-features li + li { margin-top: var(--space-xs); }
.tier-features li::before { content: "\2713"; color: var(--color-faint); flex: none; }
.tier-cta {
  display: block;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tier-cta:hover { background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.tier--featured .tier-cta { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.tier--featured .tier-cta:hover { background: var(--color-ink-lift); }
@media (min-width: 48rem) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:nth-child(even) { border-left: var(--rule-hair) solid var(--color-rule); }
}
@media (min-width: 75rem) {
  .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tier:nth-child(even) { border-left: 0; }
  .tier + .tier { border-left: var(--rule-hair) solid var(--color-rule); }
}

/* ---------- Long-form pages (about) ---------- */

.prose-page { text-align: left; }
.prose-page h1 { font-size: var(--text-display-s); }
.prose-page h2 {
  margin-top: var(--space-2xl);
  font-size: var(--text-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.prose-page h2::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  background: var(--color-accent);
  flex: none;
  align-self: center;
}
.prose-page p { margin-top: var(--space-md); line-height: 1.7; color: var(--color-muted); max-width: 65ch; }
.prose-page ul { margin-top: var(--space-md); padding-left: 0; list-style: none; }
.prose-page ul li {
  position: relative;
  padding-left: var(--space-lg);
  margin-top: var(--space-xs);
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 65ch;
}
.prose-page ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375em;
  height: 0.375em;
  background: var(--color-faint);
}
.prose-page strong { color: var(--color-ink); font-weight: 600; }
.prose-lead { font-size: var(--text-md); color: var(--color-muted); }

/* ---------- Page titles (content pages) ---------- */

.page-head h1 { font-size: var(--text-display-s); margin: 0; }
.page-head p { margin-top: var(--space-sm); color: var(--color-muted); }

/* Split intro: text left, image right (how it works). */
.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
  margin-bottom: var(--space-xl);
}
@media (max-width: 60rem) {
  .page-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ---------- Auth / signup ---------- */

.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  text-align: left;
}
@media (min-width: 48rem) { .signup-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.signup-grid h1 { font-size: var(--text-display-s); margin-bottom: var(--space-sm); }
.signup-grid .auth-card { margin: 0; max-width: none; }
.signup-perks { margin-top: var(--space-lg); padding: 0; list-style: none; }
.signup-perks li {
  position: relative;
  padding-left: var(--space-lg);
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}
.signup-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.375em;
  height: 0.375em;
  background: var(--color-faint);
}
.signup-perks strong { color: var(--color-ink); font-weight: 600; }
.auth-note { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-faint); text-align: center; }

.auth-card {
  max-width: 26rem;
  margin: var(--space-xl) auto 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  text-align: left;
}
.auth-card h2 { font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.auth-card label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}
.auth-card input,
.auth-card textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.auth-card textarea { resize: vertical; line-height: 1.5; }
.auth-card input:hover,
.auth-card textarea:hover { border-color: var(--color-faint); }
.auth-card input::placeholder,
.auth-card textarea::placeholder { color: var(--color-faint); }
.label-optional { font-weight: 400; color: var(--color-faint); }
/* Honeypot row - visually removed, still in the submitted form for bots. */
.form-row--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-card .form,
.auth-card .form-row { background: transparent; }
.auth-card .form-row { padding-block: var(--space-xs); }

/* ---------- Alerts (flash) ---------- */

.alert { border-radius: var(--radius-card); font-size: var(--text-sm); }
.alert.alert-notice { background: var(--color-ok-soft); border-color: var(--color-ok); color: var(--color-ok); }
.alert.alert-danger { background: var(--color-err-soft); border-color: var(--color-err); color: var(--color-err); }

/* ---------- Footer · Ft1 mast-headed ---------- */

.foot-mast { margin-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-mast-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
}
.foot-brand { max-width: 26rem; }
.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) + 0.625rem); /* same icon-to-text gap as the header */
  font-family: var(--font-outlier);
  font-size: calc(var(--text-lg) * 1.3);
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
}
.footer-wordmark .logo-mark { width: 1.5rem; height: auto; flex: none; }
.footer-wordmark > span { padding-top: 4px; } /* optical alignment, matches header */
.footer-wordmark .logo-accent { color: var(--color-accent-text); }
.footer-wordmark:hover { text-decoration: none; color: var(--color-ink); }
.foot-tagline { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; color: var(--color-faint); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.foot-links a {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.foot-links a:hover { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
/* The legal band sits outside the max-width container so its rule spans the
   full page; the text inside stays aligned to the content column. */
.foot-legal { border-top: var(--rule-hair) solid var(--color-rule); }
.foot-legal p {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-faint);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .sp-btn:hover { transform: none; }
}