/* ConsignNest base + marketing site styles. Loaded on every page.
   Tokens, reset, shared components (buttons, forms, tables, panels, pills),
   marketing chrome (nav, footer) and marketing page components.
   The product app shell lives in app.css. Split 2026-07-08.

   TOKENS — two intentional layers:
     1. Raw palette / scale: --color-*, --space-*, --shadow-*, --radius.
        These are the source values; change a brand color here.
     2. Semantic aliases: --ink, --muted, --line, --surface, --accent, --gold,
        etc. These point at layer 1 and are what component rules should use, so
        a palette change in layer 1 propagates everywhere. Prefer aliases in
        new rules; only reach for a raw --color-* when no alias fits.

   RESPONSIVE — the layout collapse ladder (min set; reuse the nearest one
   rather than inventing a new breakpoint):
     1180px  wide desktop -> narrower desktop (multi-column app boards)
      920px  desktop -> tablet; app sidebar becomes the top bar here
      680px  tablet -> phone; most multi-column grids collapse to 1-2 cols
      480px  small phone; dense tile grids drop to a single/2-up column
   App-only responsive overrides must live in app.css (loaded after this
   file) or a later-in-source rule will win and the override goes dead. */

:root {
  color-scheme: light;
  --color-brand-dark: #0c221b;
  --color-brand-dark-2: #16382f;
  --color-brand-sage: #6f9c5c;
  --color-brand-lime: #c2e556;
  --color-brand-gold: #c9a24a;
  --color-bg: #f7f5ee;
  --color-surface: #fffefb;
  --color-surface-muted: #ecefe4;
  --color-surface-hover: #f3f1e8;
  --color-border: #e2ddcd;
  --color-border-strong: #cdc3ad;
  --color-text: #101c17;
  --color-text-muted: #667064;
  --color-text-soft: #8c9288;
  --color-text-on-dark: #fbfcf5;
  --color-success: #2f7d5c;
  --color-success-bg: #d8eee2;
  --color-warning: #b7791f;
  --color-warning-bg: #fae8c2;
  --color-danger: #b94a48;
  --color-danger-bg: #f7dad7;
  --color-info: #394b66;
  --color-info-bg: #e4e8f0;
  --sidebar-bg: #0c221b;
  --sidebar-active-bg: #1a4034;
  --sidebar-text: #fbfcf5;
  --sidebar-muted: #9fb29d;
  --sidebar-accent: #c2e556;
  --button-primary-bg: #13342a;
  --button-primary-text: #f4f9e4;
  --button-primary-hover: #1d493b;
  --button-secondary-bg: #fffefb;
  --button-secondary-text: #16382f;
  --button-secondary-border: #d4ddc9;
  --button-secondary-hover-bg: #eef1e5;
  --ink: var(--color-text);
  --ink-soft: var(--color-brand-dark-2);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-muted);
  --bg: var(--color-bg);
  --soft: var(--color-surface-muted);
  --accent: var(--color-brand-sage);
  --accent-dark: var(--color-brand-dark-2);
  --accent-soft: #e0ecd6;
  --blue: var(--color-info);
  --blue-soft: var(--color-info-bg);
  --gold: var(--color-brand-gold);
  --gold-ink: #8a6518;
  --gold-soft: #f2ecda;
  --danger: var(--color-danger);
  --shadow-sm:
    0 0 0 1px rgba(12, 34, 27, 0.02),
    0 1px 2px rgba(12, 34, 27, 0.04),
    0 6px 16px rgba(12, 34, 27, 0.05);
  --shadow-md:
    0 0 0 1px rgba(12, 34, 27, 0.03),
    0 2px 4px rgba(12, 34, 27, 0.04),
    0 16px 36px rgba(12, 34, 27, 0.09);
  --shadow-lg:
    0 0 0 1px rgba(12, 34, 27, 0.04),
    0 6px 12px rgba(12, 34, 27, 0.06),
    0 36px 84px rgba(12, 34, 27, 0.16);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --module-pad: clamp(20px, 2.4vw, 32px);
  --module-gap: 16px;
  --section-gap: clamp(40px, 5vw, 56px);
  --app-pad: 20px;
  --app-gap: 14px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
p,
a,
span,
strong,
small,
label,
legend,
th,
td,
dt,
dd,
button,
.button,
.badge,
.pill,
.tag {
  overflow-wrap: break-word;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(200, 162, 74, 0.12), rgba(255, 253, 246, 0) 420px),
    repeating-linear-gradient(90deg, rgba(16, 37, 31, 0.022) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(127, 163, 106, 0.018) 0 1px, transparent 1px 96px);
  pointer-events: none;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover { text-decoration: none; }

/* Content links (inside tables and panels) get a clear affordance beyond color. */
main table a,
.details a,
.panel p a {
  text-decoration: underline;
  text-decoration-color: rgba(127, 163, 106, 0.42);
  text-underline-offset: 2px;
}

main table a:hover,
main table a:focus-visible,
.details a:hover,
.panel p a:hover {
  text-decoration-color: currentColor;
}

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  border-radius: 7px;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 12px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgba(255, 253, 246, 0.94);
  border-bottom: 1px solid rgba(221, 213, 195, 0.95);
  box-shadow: 0 8px 22px rgba(16, 37, 31, 0.05);
  backdrop-filter: blur(18px);
  /* Clip the closed (absolutely positioned) mega-menus horizontally so they
     never widen the document; overflow-y stays visible so open menus drop below. */
  overflow-x: clip;
}

.topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  width: min(1440px, 100%);
  min-height: 70px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
  font-size: 18px;
  white-space: nowrap;
}

.brand-logo-link {
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

.brand-logo {
  display: block;
  width: clamp(170px, 17vw, 248px);
  height: auto;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -3px 0 rgba(183, 216, 90, 0.78);
}

nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.topbar-inner > nav {
  display: contents;
}

.topbar-inner > .brand {
  justify-self: start;
}

.topbar-inner > .nav-toggle,
.topbar-inner > .nav-toggle-btn {
  justify-self: end;
}

nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  padding: 9px 10px;
  border-radius: 7px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-group {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

nav a:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

nav a.nav-login {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 20px rgba(16, 19, 18, 0.16);
}

nav a.nav-login:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}

.nav-dropdown-trigger span {
  color: var(--color-text-soft);
  font-size: 10px;
  line-height: 1;
  transform: translateY(1px);
}

.nav-caret {
  color: var(--color-text-soft);
  transition: transform 0.15s ease;
}

.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu,
.nav-dropdown.open .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.open .nav-dropdown-trigger {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.mega-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 60;
  display: grid;
  gap: var(--space-4);
  width: min(760px, calc(100vw - 40px));
  padding: var(--space-4);
  border: 1px solid rgba(221, 213, 195, 0.98);
  border-radius: var(--radius);
  background: rgba(255, 253, 246, 0.98);
  box-shadow: 0 24px 60px rgba(16, 37, 31, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mega-menu::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -13px;
  width: 100%;
  height: 13px;
}

.resources-menu,
.usecase-menu {
  right: 0;
  left: auto;
}

.mega-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mega-columns > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mega-columns strong {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 4px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-col-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent-dark);
}

.mega-menu a {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
}

.mega-menu a:hover,
.mega-menu a:focus-visible {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.mega-menu a span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.mega-menu a small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.mega-feature {
  position: relative;
  min-height: 122px;
  align-content: end;
  border-color: rgba(127, 163, 106, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(232, 237, 225, 0.92), rgba(241, 234, 216, 0.88)),
    var(--surface-soft) !important;
}

.mega-feature-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 9px;
  background: rgba(127, 163, 106, 0.18);
  color: var(--accent-dark);
}

.mega-feature > span {
  color: var(--accent-dark) !important;
  font-size: 12px !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mega-feature strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.mega-feature small {
  color: var(--gold-ink) !important;
  font-weight: 900 !important;
}

.mega-quicklinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.mega-quicklinks a {
  display: inline-flex;
  padding: 7px 10px;
  background: var(--surface-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
}

.nav-cta {
  grid-column: 3;
  place-self: center end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: fit-content;
  max-width: max-content;
  flex: 0 0 auto;
}

.nav-cta a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}

.nav-cta a.nav-login {
  min-width: max-content;
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
}

.nav-logout button {
  min-height: 0;
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 750;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

.nav-logout button:hover {
  color: var(--ink);
  transform: none;
}

/* Hamburger toggle: visually hidden (not display:none, so the label can
   still toggle it), the button is revealed on mobile via media query. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 253, 244, 0.92);
  cursor: pointer;
}

.nav-toggle-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 160ms ease, opacity 160ms ease;
}

.page {
  width: min(1440px, calc(100% - 48px));
  margin: var(--space-10) auto 0;
}

.lede {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.62;
  max-width: 720px;
  margin: 0 0 var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}

h1, h2 {
  line-height: 1.08;
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
}

h1 {
  font-size: clamp(38px, 5.3vw, 68px);
  max-width: 900px;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 22px;
}

p {
  margin-top: 0;
}

.marketing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(44px, 5vw, 84px);
  min-height: calc(100vh - 132px);
  margin: var(--space-4) 0 var(--section-gap);
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(16, 37, 31, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(16, 37, 31, 0.99), rgba(24, 58, 52, 0.98) 58%, rgba(31, 73, 63, 0.96)),
    var(--color-brand-dark);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-lg);
}

.marketing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(183, 216, 90, 0.13) 0 6px, transparent 6px 30px),
    linear-gradient(0deg, rgba(255, 253, 246, 0.055) 0 1px, transparent 1px 76px);
  opacity: 0.64;
  pointer-events: none;
}

.marketing-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border: 70px solid rgba(200, 162, 74, 0.18);
  transform: rotate(12deg);
  pointer-events: none;
}

.marketing-hero > * {
  position: relative;
  z-index: 1;
}

.marketing-hero.compact {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
  min-height: 430px;
  padding-bottom: clamp(28px, 3vw, 40px);
}

.marketing-hero .eyebrow {
  color: var(--color-brand-lime);
}

.marketing-hero .lede,
.marketing-hero .hero-lede {
  color: #dfe8dc;
}

/* Inline links on the dark hero (e.g. the support email on legal pages) must
   stay legible against the dark green background. */
.marketing-hero .hero-price-note a,
.marketing-hero .lede a {
  color: var(--color-brand-lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.marketing-hero .button {
  border-color: rgba(255, 255, 255, 0.28);
}

.marketing-hero .button:not(.primary) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.marketing-hero .button:not(.primary):hover {
  background: rgba(255, 255, 255, 0.18);
}

.marketing-hero .button.primary {
  border-color: var(--color-brand-lime);
  background: var(--color-brand-lime);
  color: var(--color-brand-dark);
}

.marketing-hero .button.primary:hover {
  border-color: #c4e36e;
  background: #c4e36e;
  color: var(--color-brand-dark);
}

.marketing-hero .mini-proof,
.marketing-hero .panel {
  color: var(--ink);
}

.marketing-hero .mini-proof h2,
.marketing-hero .panel h2 {
  color: var(--ink);
}

.marketing-hero .mini-proof p,
.marketing-hero .panel p {
  color: var(--muted);
}

.hero-copy h1 {
  margin-bottom: var(--space-4);
}

.hero-lede {
  max-width: 720px;
  color: var(--muted);
  font-size: 19px;
}

.metric-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--color-text-on-dark);
  font-size: 13px;
  font-weight: 900;
}

.hero-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-6);
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: #eef4f2;
  font-size: 13px;
  font-weight: 760;
}

.hero-points span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.actions,
.workflow {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  cursor: pointer;
  font: inherit;
  font-weight: 820;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 18px rgba(16, 37, 31, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover,
button:hover {
  border-color: var(--button-primary-bg);
  background: var(--button-secondary-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(16, 37, 31, 0.1);
}

.button.primary,
button.primary {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.button.primary:hover,
button.primary:hover {
  border-color: var(--button-primary-hover);
  background: var(--button-primary-hover);
  color: var(--button-primary-text);
}

.hero-media {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 6px;
  pointer-events: none;
}

.hero-media::before {
  content: "Live payout workflow";
  position: absolute;
  left: 28px;
  top: 28px;
  z-index: 1;
  padding: 7px 10px;
  border: 1px solid rgba(183, 216, 90, 0.56);
  border-radius: 999px;
  background: rgba(242, 248, 198, 0.94);
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 850;
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Dashboard mock: a real (small) recreation of the app-shell dashboard,
   not a screenshot, so it never drifts out of sync with the product.
   Framed in browser chrome with a floating "payout sent" toast. */
.hero-media-app::before,
.hero-media-app::after {
  content: none;
}

.dashboard-mock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 9px;
  background: #f6f1e5;
  box-shadow: inset 0 0 0 1px rgba(16, 37, 31, 0.1);
  font-family: inherit;
}

.dashboard-mock-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(16, 37, 31, 0.09);
  background: #ece4d2;
}

.dashboard-mock-chrome i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboard-mock-chrome i:nth-child(1) { background: #e2837b; }
.dashboard-mock-chrome i:nth-child(2) { background: #e5bd68; }
.dashboard-mock-chrome i:nth-child(3) { background: #93c47f; }

.dashboard-mock-chrome em {
  flex: 0 1 200px;
  margin: 0 auto;
  padding: 3px 14px;
  overflow: hidden;
  border: 1px solid rgba(16, 37, 31, 0.07);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.92);
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.dashboard-mock-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.dashboard-mock-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 24%;
  padding: 16px 11px 14px;
  background: linear-gradient(170deg, #10291f, var(--sidebar-bg) 60%);
}

.dashboard-mock-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--sidebar-text);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.dashboard-mock-logo::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(145deg, #d3ef78, var(--sidebar-accent));
  box-shadow: 0 0 8px rgba(194, 229, 86, 0.5);
}

.dashboard-mock-side nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-mock-side nav span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  color: #b9c9b6;
  font-size: 10.5px;
  font-weight: 750;
}

.dashboard-mock-side nav span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

.dashboard-mock-side nav span.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text);
  box-shadow: inset 2px 0 0 var(--sidebar-accent), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.dashboard-mock-side nav span.is-active::before {
  background: var(--sidebar-accent);
  opacity: 1;
}

.dashboard-mock-user {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  margin-top: auto;
  padding: 8px 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #b9c9b6;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-user i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-accent);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-mock-main {
  flex: 1;
  min-width: 0;
  padding: 15px 14px 16px;
  overflow: hidden;
}

.dashboard-mock-eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-mock-main h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.dashboard-mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.dashboard-mock-kpis div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(221, 213, 195, 0.95);
  border-radius: 7px;
  background: #fffdf6;
  box-shadow: 0 1px 2px rgba(16, 37, 31, 0.05);
}

.dashboard-mock-kpis div:nth-child(1) { border-top: 2px solid var(--accent); }
.dashboard-mock-kpis div:nth-child(2) { border-top: 2px solid var(--line-strong); }
.dashboard-mock-kpis div:nth-child(3) { border-top: 2px solid #3d6fb4; }
.dashboard-mock-kpis div:nth-child(4) { border-top: 2px solid var(--ink); }

.dashboard-mock-kpis span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-kpis strong {
  display: block;
  margin: 3px 0 2px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 850;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.dashboard-mock-kpis em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-board {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.dashboard-mock-queue,
.dashboard-mock-owed {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(221, 213, 195, 0.95);
  border-radius: 8px;
  background: #fffdf6;
  box-shadow: 0 1px 2px rgba(16, 37, 31, 0.05);
}

.dashboard-mock-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.dashboard-mock-panel-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-panel-head strong {
  color: var(--ink);
  font-size: 12px;
}

.dashboard-mock-queue > div:not(.dashboard-mock-panel-head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(221, 213, 195, 0.85);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(255, 253, 246, 0.92);
  font-size: 9.5px;
  font-weight: 750;
  color: var(--ink);
}

.dashboard-mock-queue > div:not(.dashboard-mock-panel-head) span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-queue > div + div:not(.dashboard-mock-panel-head) {
  margin-top: 5px;
}

.dashboard-mock-queue .tone-urgent { border-left-color: #d08700; }
.dashboard-mock-queue .tone-ready { border-left-color: var(--accent); }

.dashboard-mock-queue div b {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.dashboard-mock-queue .tone-urgent b {
  background: var(--color-warning-bg);
  color: #8a5200;
}

.dashboard-mock-queue .tone-ready b {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.dashboard-mock-owed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
}

.dashboard-mock-owed-row + .dashboard-mock-owed-row {
  border-top: 1px solid rgba(221, 213, 195, 0.6);
}

.dashboard-mock-owed-row i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-mock-owed-row .av-a { background: #dfe9d2; color: #2f5c42; }
.dashboard-mock-owed-row .av-m { background: #f1e3c2; color: var(--gold-ink); }
.dashboard-mock-owed-row .av-j { background: #d8e2ec; color: #3a5a80; }

.dashboard-mock-owed-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-mock-owed-row b {
  flex-shrink: 0;
  color: var(--ink);
  font-size: 9px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Floating confirmation toast, overlapping the frame toward the hero copy. */
.dashboard-mock-toast {
  position: absolute;
  left: -18px;
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 9px;
  border: 1px solid rgba(127, 163, 106, 0.45);
  border-radius: 11px;
  background: #fffdf6;
  box-shadow: 0 4px 10px rgba(12, 34, 27, 0.18), 0 18px 38px rgba(12, 34, 27, 0.32);
  animation: rise-in 700ms 850ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.dashboard-mock-toast > b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(160deg, #d3ef78, #9fc45c);
  color: #1c3b26;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-mock-toast strong {
  display: block;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
}

.dashboard-mock-toast em {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 560px) {
  .dashboard-mock-side {
    display: none;
  }

  .dashboard-mock-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-mock-board {
    grid-template-columns: 1fr;
  }

  .dashboard-mock-toast {
    left: 8px;
    bottom: 14px;
  }
}

.hero-side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.hero-media.photo {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.hero-media.photo::before {
  content: none;
}

.hero-media.photo::after {
  inset: 0;
  border-radius: var(--radius);
}

.hero-media.photo img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mini-proof,
.panel,
.section-grid article,
.pricing-grid article,
.timeline article,
.faq-grid article,
.link-grid a,
.metrics div {
  background: rgba(255, 253, 244, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.marketing-hero + .logo-strip-label {
  margin-top: -12px;
}

.mini-proof {
  padding: var(--module-pad);
  border-left: 4px solid var(--gold);
}

.mini-proof p,
.section-grid p,
.pricing-grid p,
.timeline p,
.faq-grid p,
.signup-band p {
  color: var(--muted);
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: -10px 0 var(--section-gap);
}

.logo-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 820;
}

.brand-mark {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.brand-pair {
  gap: 6px;
}

.brand-pair .brand-mark + .brand-mark {
  margin-left: -2px;
}

.logo-strip span:nth-child(1) {
  background: var(--gold-soft);
  border-color: rgba(200, 162, 74, 0.42);
  color: var(--gold-ink);
}

.logo-strip span:nth-child(2) {
  background: var(--accent-soft);
  border-color: rgba(127, 163, 106, 0.28);
  color: var(--accent-dark);
}

.logo-strip span:nth-child(3) {
  background: #e8f0f7;
  border-color: rgba(49, 95, 143, 0.26);
  color: var(--blue);
}

.logo-strip span:nth-child(4) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.logo-strip span:nth-child(5) {
  background: var(--gold-soft);
  border-color: rgba(200, 162, 74, 0.34);
}

.section-heading {
  max-width: 780px;
  margin: 0 0 var(--space-6);
}

.section-heading h2 {
  font-size: clamp(28px, 3.4vw, 44px);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--module-gap);
  margin: 0 0 var(--section-gap);
}

.section-grid article,
.pricing-grid article,
.link-grid a,
.timeline article,
.faq-grid article,
.metrics div {
  padding: var(--module-pad);
}

.section-grid article:nth-child(3n + 1),
.timeline article:nth-child(4n + 1),
.faq-grid article:nth-child(3n + 1) {
  border-top: 4px solid var(--gold);
}

.section-grid article:nth-child(3n + 2),
.timeline article:nth-child(4n + 2),
.faq-grid article:nth-child(3n + 2) {
  border-top: 4px solid var(--accent);
}

.section-grid article:nth-child(3n + 3),
.timeline article:nth-child(4n + 3),
.faq-grid article:nth-child(3n + 3) {
  border-top: 4px solid var(--blue);
}

.section-grid article h2,
.faq-grid article h2,
.timeline article h2 {
  font-size: 21px;
}

.section-grid article:hover,
.link-grid a:hover,
.timeline article:hover,
.faq-grid article:hover {
  border-color: rgba(127, 163, 106, 0.55);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.section-grid article,
.link-grid a,
.timeline article,
.faq-grid article {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.split-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  margin: 0 0 var(--section-gap);
  padding: var(--module-pad);
  border: 1px solid rgba(16, 19, 18, 0.08);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--ink), var(--accent-dark)),
    var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.split-band h2 {
  font-size: clamp(26px, 3vw, 38px);
  max-width: 760px;
}

.split-band p {
  color: #d9eadf;
  margin-bottom: 0;
}

.split-band .eyebrow {
  color: var(--gold);
}

.split-band .eyebrow::before {
  background: var(--gold);
}

.split-band.light {
  background: rgba(255, 253, 244, 0.96);
  border: 1px solid var(--line);
  color: var(--ink);
}

.split-band.light p { color: var(--muted); }
.split-band.light .eyebrow { color: var(--accent-dark); }

.split-band .timeline,
.split-band .link-grid {
  flex: 1 1 440px;
  margin-bottom: 0;
}

/* In a split band the link list is a side rail, not a full-width grid. Stack
   the links in one column with a real min-width so the repeat(3, minmax(0,1fr))
   grid can't collapse into character-wide slivers next to the heading. */
.split-band .link-grid {
  flex: 0 1 320px;
  grid-template-columns: 1fr;
  min-width: 240px;
  gap: var(--space-3);
}

.split-band .timeline {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  min-width: min(100%, 620px);
}

.split-band .timeline article {
  color: var(--ink);
}

.split-band .timeline strong {
  display: block;
  margin-bottom: 8px;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--module-gap);
  margin: 0 0 var(--section-gap);
}

.timeline span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-weight: 900;
}

.demo-tabs {
  margin: 0 0 var(--section-gap);
}

.demo-tabs input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.demo-tab-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.demo-tab-list label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 850;
  text-align: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.demo-tab-list label:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

#demo-intake:checked ~ .demo-tab-list label[for="demo-intake"],
#demo-sale:checked ~ .demo-tab-list label[for="demo-sale"],
#demo-payout:checked ~ .demo-tab-list label[for="demo-payout"],
#demo-link:checked ~ .demo-tab-list label[for="demo-link"] {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-sm);
}

.demo-panels {
  position: relative;
}

.demo-panel {
  display: none;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--module-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 239, 0.7));
  box-shadow: var(--shadow-md);
}

#demo-intake:checked ~ .demo-panels .demo-panel-intake,
#demo-sale:checked ~ .demo-panels .demo-panel-sale,
#demo-payout:checked ~ .demo-panels .demo-panel-payout,
#demo-link:checked ~ .demo-panels .demo-panel-link {
  display: grid;
}

.demo-panel h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.demo-panel p {
  color: var(--muted);
}

.demo-detail-list {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
}

.demo-detail-list div {
  padding: 12px 0;
}

.comparison-table,
.statement-card {
  margin: 0 0 var(--section-gap);
}

.comparison-table table,
.statement-card table,
table {
  width: 100%;
  /* Fixed layout so long cell content wraps inside the card instead of
     forcing the table wider than its container (which overflowed the page). */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

th,
td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f3f6f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td {
  color: var(--ink-soft);
  font-weight: 620;
}

tr:last-child td { border-bottom: 0; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--module-gap);
  margin-bottom: var(--section-gap);
}

.link-grid a {
  color: var(--ink);
  font-weight: 850;
}

.link-grid a:nth-child(4n + 1) { background: var(--gold-soft); border-color: rgba(200, 162, 74, 0.42); }
.link-grid a:nth-child(4n + 2) { background: #e8ede1; border-color: rgba(127, 163, 106, 0.26); }
.link-grid a:nth-child(4n + 3) { background: #f3f6fb; border-color: rgba(49, 95, 143, 0.24); }
.link-grid a:nth-child(4n + 4) { background: var(--ink); border-color: var(--ink); color: #fff; }

.link-grid a::after {
  content: " ->";
  color: var(--gold);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--module-gap);
  margin-bottom: var(--section-gap);
}

.showcase-card {
  overflow: hidden;
  background: rgba(255, 253, 244, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.showcase-card:hover {
  border-color: rgba(127, 163, 106, 0.55);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.showcase-media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-muted);
}

.showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-card.icon .showcase-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 237, 225, 0.92), rgba(241, 234, 216, 0.88));
}

.showcase-icon {
  width: 25%;
  height: 25%;
  color: var(--accent-dark);
}

.showcase-body {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.showcase-body strong {
  font-size: 15px;
  font-weight: 850;
}

.showcase-body span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--module-gap);
  margin: 0 0 var(--section-gap);
}

.faq-grid article {
  border-top: 4px solid var(--gold);
}

.statement-card {
  padding: var(--module-pad);
  border: 1px solid rgba(200, 162, 74, 0.38);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--space-7);
  align-items: end;
  margin: var(--space-5) 0 var(--space-5);
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(127, 163, 106, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(232, 237, 225, 0.92), rgba(255, 253, 246, 0.98));
  box-shadow: var(--shadow-sm);
}

.blog-hero h1 {
  max-width: 820px;
  font-size: clamp(34px, 4.4vw, 68px);
  text-wrap: balance;
}

.blog-search {
  display: grid;
  gap: 9px;
}

.blog-search label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.blog-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-6);
}

.blog-chips a {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.8);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
}

.blog-chips a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.featured-cover,
.blog-card-cover,
.blog-article-cover {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
}

.featured-cover img,
.blog-card-cover img,
.blog-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-cover {
  aspect-ratio: 16 / 9;
}

.featured-post h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--module-gap);
  margin-bottom: var(--space-10);
}

.blog-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 244, 0.96);
  box-shadow: var(--shadow-sm);
}

.blog-card-cover {
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
}

.blog-card h2 {
  margin: 0;
  font-size: 21px;
}

.blog-card p {
  color: var(--muted);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.post-meta span:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--line-strong);
}

.blog-about {
  margin-bottom: var(--space-10);
}

.blog-article {
  max-width: 980px;
  margin: var(--space-5) auto var(--space-10);
}

.blog-article-head {
  margin-bottom: var(--space-6);
}

.blog-article-head h1 {
  font-size: clamp(42px, 6vw, 78px);
}

.blog-article-cover {
  aspect-ratio: 1200 / 630;
  margin: 0 0 var(--space-7);
}

.blog-body {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--module-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.blog-body .article-intro {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 750;
}

.blog-body h2 {
  margin-top: var(--space-8);
  font-size: 28px;
}

.template-preview {
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}

.table-wrap table {
  min-width: 860px;
}

.text-template-preview {
  max-height: 520px;
  overflow: auto;
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  color: var(--ink-soft);
  font: 650 14px/1.7 "Inter", system-ui, sans-serif;
  white-space: pre-wrap;
}

.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--section-gap);
}

.legal-nav,
.legal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-sm);
}

.legal-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
}

.legal-nav a {
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
}

.legal-nav a:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.legal-content {
  display: grid;
  gap: 0;
  padding: var(--space-2) var(--space-7);
}

.legal-content section {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}

.legal-content section:last-child {
  border-bottom: 0;
}

.legal-content h2 {
  font-size: 22px;
}

.legal-content p {
  color: var(--ink-soft);
}

.legal-content ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.25em;
  color: var(--ink-soft);
}

.legal-content li {
  margin: 0 0 8px;
  line-height: 1.55;
}

.legal-content li:last-child {
  margin-bottom: 0;
}

.legal-effective {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.statement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.statement-head p {
  color: var(--muted);
  margin: 0;
}

.statement-head strong {
  color: var(--gold-ink);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
}

.signup-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1.18fr);
  gap: var(--space-7);
  align-items: start;
  margin: 0 0 var(--section-gap);
  padding: var(--module-pad);
  border: 1px solid rgba(200, 162, 74, 0.34);
  border-radius: var(--radius);
  background: var(--gold-soft);
  box-shadow: var(--shadow-md);
}

.signup-band h2 {
  font-size: clamp(26px, 3vw, 38px);
}

.signup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.signup-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.signup-form label:nth-of-type(1) {
  grid-column: 1 / -1;
}

.signup-form textarea,
.signup-form button {
  grid-column: 1 / -1;
}

.messages {
  margin: 0 0 var(--space-5);
}

.messages p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #bdd8cf;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

.message-dismiss {
  flex: 0 0 auto;
  padding: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.message-dismiss:hover {
  opacity: 1;
  background: rgba(16, 37, 31, 0.08);
}

.cookie-banner {
  display: none;
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 80;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.6);
  background: var(--color-surface);
  box-shadow: 0 20px 48px rgba(16, 37, 31, 0.22);
  align-items: center;
  gap: var(--space-4);
}

.cookie-banner.is-visible {
  display: flex;
  flex-wrap: wrap;
}

.cookie-banner-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-brand-dark-2);
}

.cookie-banner-body {
  flex: 1 1 320px;
}

.cookie-banner-title {
  margin: 0 0 4px;
  color: var(--color-text);
  font-weight: 800;
  font-size: 1rem;
}

.cookie-banner-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: var(--color-brand-dark-2);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  justify-content: flex-end;
}

.cookie-banner-actions .button {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }

  .cookie-banner-actions {
    justify-content: stretch;
    width: 100%;
  }

  .cookie-banner-actions .button {
    flex: 1 1 0;
  }
}

.marketing-title {
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--module-gap);
  margin-bottom: var(--space-10);
}

.pricing-grid h2 {
  color: var(--ink);
  font-size: 38px;
}

.pricing-grid .featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-8);
}

.calculator-form {
  display: grid;
  gap: var(--space-6);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: 8px;
}

.field label,
.field-label-static {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.field-basis {
  padding-top: var(--space-1);
  border-top: 1px solid var(--line);
}

/* $ / % affix wrapper: keeps the symbol visually locked to the input so it
   reads as currency/percent instead of a bare number a user might mistype. */
.input-affix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-affix span {
  position: absolute;
  color: var(--muted);
  font-weight: 750;
  pointer-events: none;
}

.input-affix input {
  width: 100%;
}

.input-affix-prefix span { left: 13px; }
.input-affix-prefix input { padding-left: 26px; }

.input-affix-suffix span { right: 13px; }
.input-affix-suffix input { padding-right: 30px; }

.preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.preset-chip:hover {
  border-color: var(--button-primary-bg);
  background: var(--button-secondary-hover-bg);
  transform: none;
  box-shadow: none;
}

.preset-chip.is-active {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.calculator-submit {
  width: 100%;
}

.calculator-result {
  position: sticky;
  top: var(--space-6);
}

.calculator-result h2 {
  margin: 4px 0 0;
  color: var(--accent-dark);
  font-size: 48px;
}

.calculator-result-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.copy-box {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  margin-top: var(--space-5);
}

.copy-box-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.copy-box textarea {
  min-height: 88px;
  color: var(--ink);
  background: #fbfcfd;
  font-size: 13px;
}

.copy-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
}

.copy-btn.is-copied {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.calculator-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(-1 * var(--space-4));
}

dl { margin: var(--space-5) 0 0; }

dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

dl .dl-highlight {
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
}

dl .dl-highlight dt,
dl .dl-highlight dd {
  color: var(--accent-dark);
  font-weight: 850;
}

dt { color: var(--muted); }
dd { margin: 0; font-weight: 850; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.panel {
  padding: var(--module-pad);
  margin-bottom: var(--space-10);
}

.panel.narrow { max-width: 680px; }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.72fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: stretch;
  min-height: calc(100vh - 180px);
  margin: var(--space-6) 0 var(--section-gap);
}

.auth-story,
.auth-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.auth-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(32px, 5vw, 56px);
  background:
    linear-gradient(135deg, rgba(16, 37, 31, 0.98), rgba(24, 58, 52, 0.96)),
    var(--color-brand-dark);
  color: var(--color-text-on-dark);
}

.auth-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(183, 216, 90, 0.12) 0 7px, transparent 7px 34px),
    linear-gradient(0deg, rgba(255, 253, 246, 0.055) 0 1px, transparent 1px 82px);
  pointer-events: none;
}

.auth-story > * {
  position: relative;
  z-index: 1;
}

.auth-story h1 {
  max-width: 780px;
  margin: 0 0 var(--space-5);
  color: var(--color-text-on-dark);
  font-size: clamp(40px, 5.8vw, 78px);
  line-height: 0.98;
}

.auth-story .eyebrow {
  color: var(--color-brand-lime);
}

.auth-story .eyebrow::before {
  background: var(--color-brand-gold);
}

.auth-story p:not(.eyebrow) {
  max-width: 640px;
  color: #dbe6d8;
  font-size: 18px;
}

.auth-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.auth-proof-grid article,
.auth-steps li {
  border: 1px solid rgba(255, 253, 246, 0.14);
  border-radius: 7px;
  background: rgba(255, 253, 246, 0.075);
  backdrop-filter: blur(8px);
}

.auth-proof-grid article {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: var(--space-4);
}

.auth-proof-grid span {
  color: var(--color-brand-lime);
  font-size: 30px;
  font-weight: 920;
}

.auth-proof-grid strong,
.auth-steps strong {
  color: var(--color-text-on-dark);
  font-size: 14px;
  line-height: 1.25;
}

.auth-steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.auth-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: start;
  padding: var(--space-4);
}

.auth-steps span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-brand-lime);
  color: var(--color-brand-dark);
  font-weight: 900;
}

.auth-steps small {
  color: #c9d2bf;
  font-size: 13px;
  font-weight: 700;
}

.auth-card {
  align-self: center;
  display: grid;
  gap: var(--space-5);
  padding: clamp(24px, 4vw, 36px);
  background: rgba(255, 253, 246, 0.98);
}

.auth-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 46px);
}

.auth-card-head p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
}

.auth-form input {
  min-height: 48px;
  background: var(--surface);
  font-weight: 750;
}

.auth-form .button {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
}

.auth-form .helptext {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.auth-form .helptext ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.auth-form .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 650;
  line-height: 1.4;
}

.auth-form .checkbox-label input[type="checkbox"] {
  min-height: 0;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-form .checkbox-label a {
  color: var(--ink-soft);
  text-decoration: underline;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}

.auth-links a {
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: rgba(127, 163, 106, 0.36);
  text-underline-offset: 3px;
}

.details p { margin: 8px 0; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--module-gap);
  margin-bottom: var(--space-10);
}

.metrics span {
  display: block;
  color: var(--accent-dark);
  font-size: 32px;
  font-weight: 920;
}

.metrics p {
  color: var(--muted);
  margin: 4px 0 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

.dashboard-grid > *,
.activity-grid > *,
.metrics > *,
.section-grid > *,
.pricing-grid > *,
.timeline > *,
.faq-grid > *,
.link-grid > *,
.blog-grid > *,
.result-grid > *,
.quick-actions > *,
.payout-board > *,
.panel,
.mini-proof,
.blog-card,
.featured-post,
.search-results article,
.checklist a,
.next-actions a {
  min-width: 0;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  min-width: 0;
  flex-wrap: wrap;
}

.panel-head > * {
  min-width: 0;
}

.panel-head strong {
  color: var(--accent-dark);
  font-size: 36px;
  line-height: 1;
}

.panel-head a {
  color: var(--accent-dark);
  font-weight: 850;
  white-space: normal;
}

.progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  margin: 0 0 18px;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.checklist a,
.next-actions a {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

.checklist a:hover,
.next-actions a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.checklist span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.checklist .done span {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.checklist strong,
.next-actions strong {
  font-size: 16px;
}

.checklist em,
.next-actions span {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}

.next-actions {
  display: grid;
  gap: var(--space-3);
}

form p {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-weight: 760;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 253, 246, 0.94);
  color: var(--ink);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

textarea { min-height: 112px; }

/* Checkboxes and radios must opt out of the full-width text-input sizing above,
   and use the brand green instead of the browser default (purple) accent. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(127, 163, 106, 0.22);
  background: var(--surface);
}

.site-footer {
  margin: clamp(56px, 7vw, 74px) 0 0;
  padding: 0 0 36px;
  background:
    linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-dark-2) 78%, #214d43),
    var(--color-brand-dark);
  color: var(--color-text-on-dark);
}

.footer-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) 0;
}

.footer-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: var(--space-6);
  align-items: center;
  padding: 0 0 var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand .brand {
  color: var(--color-text-on-dark);
}

.footer-logo-link {
  width: fit-content;
  background: transparent;
}

.footer-logo {
  width: clamp(210px, 20vw, 300px);
  height: auto;
  max-height: 72px;
  /* The wordmark PNG is dark ink on transparent; the footer is dark green, so
     render it white here (same treatment as the app sidebar logo). */
  filter: brightness(0) invert(1);
}

.footer-brand .brand-mark {
  background: var(--color-brand-lime);
  color: var(--color-brand-dark);
}

.footer-brand p {
  grid-column: 1;
  max-width: 720px;
  color: #dbe6d8;
  margin: -10px 0 0;
}

.footer-brand .button {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-color: var(--color-brand-lime);
  background: var(--color-brand-lime);
  color: var(--color-brand-dark);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-8) 0;
}

.footer-columns div {
  display: grid;
  gap: 7px;
}

.footer-columns h2 {
  margin: 0 0 8px;
  color: var(--color-brand-lime);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-columns a {
  width: fit-content;
  padding: 0;
  color: #e2eee5;
  font-size: 14px;
  font-weight: 700;
}

.footer-columns a:hover {
  color: #fff;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #c7d6cc;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 920px) {
  .page-header,
  .footer-brand {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .nav-toggle-btn {
    display: flex;
    margin-left: auto;
  }

  .topbar-inner nav {
    display: flex;
    grid-column: 1 / -1;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms ease, opacity 160ms ease;
  }

  .nav-toggle:checked ~ nav {
    max-height: 1240px;
    opacity: 1;
  }

  .topbar-inner nav .nav-group,
  .nav-cta {
    grid-column: auto;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .nav-dropdown {
    display: grid;
    align-items: stretch;
    gap: 6px;
  }

  .nav-dropdown-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    background: var(--surface-soft);
    color: var(--ink);
    cursor: default;
  }

  .mega-menu,
  .resources-menu,
  .usecase-menu {
    position: static;
    width: 100%;
    padding: 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }

  .mega-menu::before {
    display: none;
  }

  .mega-columns {
    grid-template-columns: 1fr;
  }

  .mega-feature {
    min-height: 0;
  }

  .topbar-inner nav a,
  .nav-logout button {
    padding: 12px 12px;
    text-align: left;
  }

  .nav-sep { display: none; }
  .nav-logout { width: 100%; }
  .nav-logout button { width: 100%; }

  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .footer-brand .button {
    grid-column: auto;
    grid-row: auto;
    width: fit-content;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-hero,
  .marketing-hero.compact,
  .calculator-layout,
  .signup-band,
  .legal-layout,
  .blog-hero,
  .featured-post {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .calculator-result {
    position: static;
  }

  .legal-nav {
    position: static;
  }

  .marketing-hero {
    padding: var(--space-8) var(--space-7);
  }

  .pricing-grid,
  .timeline,
  .metrics,
  .activity-grid,
  .dashboard-grid,
  .command-grid,
  .result-grid,
  .blog-grid,
  .payout-board,
  .locked-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .locked-snapshot dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-strip,
  .section-grid,
  .link-grid,
  .showcase-grid,
  .faq-grid,
  .blog-grid.compact,
  .demo-tab-list,
  .demo-panel,
  .checklist {
    grid-template-columns: 1fr;
  }

  .statement-head,
  .split-band {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .field-grid {
    grid-template-columns: 1fr;
  }

  .copy-box-row {
    flex-direction: column;
  }

  .copy-btn {
    width: 100%;
  }

  .topbar-inner {
    width: 100%;
    min-height: 62px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .footer-shell {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .brand-logo-link {
    padding: 0;
  }

  .brand-logo {
    width: clamp(142px, 54vw, 190px);
    height: auto;
    max-height: 42px;
  }

  .page {
    width: min(100% - 22px, 1180px);
    margin-top: var(--space-7);
  }

  nav {
    gap: 4px;
  }

  nav a {
    padding: 8px 9px;
  }

  h1,
  .hero-copy h1 {
    font-size: 40px;
  }

  .marketing-hero {
    margin-top: 8px;
    padding: var(--space-7) var(--space-5);
  }

  .blog-hero,
  .blog-body {
    padding: var(--space-6);
  }

  .marketing-hero::after {
    width: 220px;
    height: 220px;
    border-width: 42px;
  }

  .hero-media {
    padding: 8px;
  }

  .pricing-grid,
  .timeline,
  .metrics,
  .auth-shell,
  .auth-proof-grid,
  .signup-form,
  .activity-grid,
  .dashboard-grid,
  .command-grid,
  .result-grid,
  .quick-actions,
  .command-search form > div,
  .blog-grid,
  .blog-grid.compact,
  .form-section,
  .payout-board,
  .locked-snapshot,
  .locked-snapshot dl,
  .payout-work-card {
    grid-template-columns: 1fr;
  }

  .inventory-row {
    grid-template-columns: 1fr;
  }

  .inventory-meta,
  .inventory-actions {
    grid-column: auto;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Accessibility: honor reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Form validation feedback ---- */
ul.errorlist {
  margin: 0 0 8px;
  padding: 10px 12px;
  list-style: none;
  border: 1px solid #e3b7b7;
  border-left: 4px solid var(--danger);
  border-radius: 7px;
  background: #fbf1f1;
  color: var(--danger);
  font-size: 14px;
  font-weight: 750;
}

.messages p.error {
  border-color: #e3b7b7;
  background: #fbf1f1;
  color: var(--danger);
}

.helptext {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* ---- List toolbar (search + count) ---- */
.list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  border: 1px solid rgba(221, 213, 195, 0.86);
  border-radius: var(--radius);
  background: rgba(255, 253, 246, 0.72);
}

.list-toolbar form {
  display: flex;
  gap: var(--space-2);
  flex: 1 1 260px;
  max-width: 420px;
}

.list-toolbar input[type="search"] {
  min-height: 42px;
}

.list-toolbar button {
  min-height: 42px;
  white-space: nowrap;
}

.list-toolbar .result-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.filter-pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: calc(var(--space-1) * -1) 0 var(--space-5);
}

.filter-pills a {
  padding: 7px 11px;
  border: 1px solid rgba(221, 213, 195, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.88);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 820;
}

.filter-pills a:hover,
.filter-pills a[aria-current="page"] {
  border-color: transparent;
  background: var(--accent-dark);
  color: var(--color-text-on-dark);
}

.compact-metrics {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

/* Defined after the shared .metrics breakpoints above, so the mobile collapse
   must be restated here or the 4x140px minimum overflows small screens. */
@media (max-width: 680px) {
  .compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.row-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.row-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(221, 213, 195, 0.9);
  border-radius: 7px;
  background: rgba(232, 237, 225, 0.66);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.row-actions a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.row-actions a.row-primary {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--color-text-on-dark);
}

.row-actions a.row-primary:hover {
  background: var(--ink);
  color: #fff;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.7), rgba(232, 237, 225, 0.36)),
    var(--surface);
}

.empty-state h2 {
  margin: 0;
}

.empty-state p {
  max-width: 520px;
  color: var(--muted);
  margin: 0 0 8px;
}

.app-main table.cards {
  overflow: hidden;
}

.app-main table.cards td:first-child a,
.app-main table td a {
  color: var(--ink);
  font-weight: 850;
}

.app-main table.cards td:first-child a:hover,
.app-main table td a:hover {
  color: var(--accent-dark);
}

.app-main table .amount {
  text-align: right;
}

.app-main table th:has(+ th),
.app-main table td {
  line-height: 1.35;
}

.credential-box {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(200, 162, 74, 0.34);
  border-radius: var(--radius);
  background: var(--gold-soft);
}

.credential-box strong {
  font-size: 24px;
  color: var(--gold-ink);
  word-break: break-all;
}

.credential-box p {
  margin: 0;
  color: var(--muted);
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.pagination a,
.pagination span.current {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
}

.pagination span.current {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.pagination .muted {
  color: var(--muted);
  font-weight: 750;
}

/* ---- Table totals row ---- */
tfoot td {
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  color: var(--ink);
  font-weight: 900;
  background: var(--surface-soft);
}

/* ---- Status pills ---- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.pill.is-active { background: rgba(232, 237, 225, 0.86); border-color: transparent; color: var(--color-brand-dark-2); }
.pill.is-confirmed,
.pill.is-sold { background: #e4efe8; border-color: transparent; color: var(--color-success); }
.pill.is-draft { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.pill.is-payout_due { background: var(--color-warning-bg); border-color: transparent; color: #8a5200; }
.pill.is-approved { background: #ddeddc; border-color: transparent; color: #256747; }
.pill.is-paid { background: var(--color-success-bg); border-color: transparent; color: #1f6848; }
.pill.is-disputed,
.pill.is-returned,
.pill.is-reversed,
.pill.is-voided,
.pill.is-withdrawn { background: var(--color-danger-bg); border-color: transparent; color: var(--danger); }

.amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.amount.owed { color: var(--color-warning); font-weight: 900; }

/* ---- Item photos ---- */
.photo-uploader {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface-soft);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.photo-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.photo-grid figcaption {
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}

.thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  vertical-align: middle;
}

/* ---- Live sale preview ---- */
.sale-preview {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid rgba(200, 162, 74, 0.34);
  border-radius: var(--radius);
  background: var(--gold-soft);
}

.sale-preview dl { margin: 0; }
.sale-preview .payout-amount {
  color: var(--gold-ink);
  font-size: 30px;
  font-weight: 920;
  line-height: 1;
}

/* ---- Responsive: turn primary list tables into cards on phones ---- */
@media (max-width: 620px) {
  table.cards { display: block; overflow: visible; border: 0; box-shadow: none; background: transparent; }
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 6px 14px;
  }
  table.cards td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }
  table.cards tr td:last-child { border-bottom: 0; }
  table.cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  table.cards td[data-label=""]::before { content: ""; }
}

/* ---- Auth helper links ---- */
.form-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 14px;
  font-weight: 750;
}

.form-links a { text-decoration: underline; text-underline-offset: 2px; }

/* ===================================================================
   Marketing story: the before/after scene, DM chaos vs. one statement.
   =================================================================== */

.story-compare {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-7);
  align-items: center;
  margin: 0 0 var(--section-gap);
  padding: var(--module-pad);
  border: 1px solid rgba(127, 163, 106, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(223, 242, 236, 0.86), rgba(255, 248, 232, 0.82));
  box-shadow: var(--shadow-sm);
}

.story-compare > div { min-width: 0; }

.story-compare .statement-card { margin: 0; }

.dm-scene .dm-time {
  margin: 0 0 var(--space-3);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dm-stack .dm {
  max-width: 400px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(16, 19, 18, 0.08);
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 650;
}

.dm-stack .dm.out {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: var(--ink);
  border-color: transparent;
  color: #fff;
}

.story-caption {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
}

.hero-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: #dfe8dc;
}

.hero-trust li::before {
  content: "\2713";
  margin-right: 7px;
  font-weight: 800;
  color: var(--color-brand-lime);
}

.hero-price-note {
  margin: 14px 0 0;
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
}

/* Reusable trust / expectation-setting box (private-link scope, beta limits). */
.trust-box {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-muted);
  padding: 18px 20px;
}

.trust-box .trust-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.trust-box .trust-box-title svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent-dark);
}

.trust-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.trust-box li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--muted);
}

.trust-box li::before {
  content: "\2713";
  flex: none;
  margin-top: 1px;
  font-weight: 800;
  color: var(--accent-dark);
}

.trust-box.trust-box-caution li::before {
  content: "\2022";
  color: var(--color-text-soft);
}

.logo-strip-label {
  margin: -40px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .story-compare { grid-template-columns: minmax(0, 1fr); }
  .story-compare table { display: block; overflow-x: auto; }
}

/* Pricing cards: feature bullets + bottom-aligned CTA. */
.pricing-grid article { display: flex; flex-direction: column; }

.pricing-grid ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.pricing-grid li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
}

.pricing-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pricing-grid article .button { margin-top: auto; }

/* ===================================================================
   REDESIGN LAYER (2026-07) — "premium ledger" pass.
   Later-in-source overrides that modernize the visual language on top of
   the component rules above: glassy chrome, pill buttons, aurora hero,
   calmer cards, refined tables/forms/footer. Keep overrides here so the
   base component rules stay stable.
   =================================================================== */

::selection {
  background: rgba(194, 229, 86, 0.55);
  color: var(--color-brand-dark);
}

html {
  scrollbar-color: var(--color-border-strong) transparent;
}

body {
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* Soft aurora wash instead of the old blueprint grid. */
body::before {
  background:
    radial-gradient(900px 420px at 12% -6%, rgba(194, 229, 86, 0.14), transparent 62%),
    radial-gradient(1100px 520px at 88% -10%, rgba(201, 162, 74, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 254, 251, 0.7), rgba(255, 254, 251, 0) 480px);
}

/* ---- Type: tighter, more confident display setting ---- */
h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-heading h2,
.split-band h2,
.auth-story h1,
.blog-hero h1,
.blog-article-head h1 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  font-weight: 500;
}

.eyebrow {
  letter-spacing: 0.12em;
}

.eyebrow::before {
  width: 18px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-brand-lime), var(--color-brand-gold));
  transform: none;
}

/* ---- Chrome: floating glass topbar ---- */
.topbar {
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.92), rgba(255, 254, 251, 0.78));
  border-bottom: 1px solid rgba(226, 221, 205, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px rgba(12, 34, 27, 0.06);
  backdrop-filter: blur(18px) saturate(1.5);
}

nav a,
.nav-dropdown-trigger {
  border-radius: 999px;
}

nav a.nav-login {
  background: linear-gradient(180deg, #1a4034, #0c221b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(12, 34, 27, 0.24);
}

nav a.nav-login:hover {
  background: linear-gradient(180deg, #215043, #123028);
}

.mega-menu {
  border-radius: 18px;
  border-color: rgba(226, 221, 205, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 30px 80px rgba(12, 34, 27, 0.18);
}

.mega-menu a {
  border-radius: 12px;
}

.mega-feature {
  border-radius: 12px;
}

.mega-quicklinks a {
  border-radius: 999px;
}

/* ---- Buttons: pill silhouette, layered depth ---- */
.button,
button {
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
  letter-spacing: 0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(12, 34, 27, 0.06),
    0 8px 18px rgba(12, 34, 27, 0.06);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.3, 1.1), box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover,
button:hover {
  border-color: var(--color-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(12, 34, 27, 0.06),
    0 14px 28px rgba(12, 34, 27, 0.1);
}

.button:active,
button:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(12, 34, 27, 0.12);
}

.button.primary,
button.primary {
  border-color: rgba(12, 34, 27, 0.9);
  background: linear-gradient(180deg, #1c463a, #0e2820 88%);
  color: #f4f9e4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(12, 34, 27, 0.14),
    0 12px 26px rgba(12, 34, 27, 0.22);
}

.button.primary:hover,
button.primary:hover {
  border-color: rgba(12, 34, 27, 0.9);
  background: linear-gradient(180deg, #235244, #133128 88%);
  color: #f4f9e4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 8px rgba(12, 34, 27, 0.16),
    0 18px 36px rgba(12, 34, 27, 0.26);
}

/* ---- Hero: deep pine aurora ---- */
.marketing-hero {
  border-radius: 24px;
  border-color: rgba(12, 34, 27, 0.85);
  background:
    radial-gradient(1000px 600px at 82% -18%, rgba(194, 229, 86, 0.2), transparent 58%),
    radial-gradient(800px 620px at -6% 110%, rgba(201, 162, 74, 0.22), transparent 55%),
    radial-gradient(600px 380px at 44% 118%, rgba(47, 125, 92, 0.35), transparent 62%),
    linear-gradient(160deg, #103127, #0b201a 55%, #0d251e);
}

.marketing-hero::before {
  background:
    linear-gradient(90deg, rgba(251, 252, 245, 0.045) 0 1px, transparent 1px 84px),
    linear-gradient(0deg, rgba(251, 252, 245, 0.045) 0 1px, transparent 1px 84px);
  opacity: 1;
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
}

.marketing-hero::after {
  right: -140px;
  top: -160px;
  bottom: auto;
  width: 460px;
  height: 460px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 229, 86, 0.18), transparent 66%);
  transform: none;
  filter: blur(2px);
}

.marketing-hero .button.primary {
  border-color: transparent;
  background: linear-gradient(180deg, #d3ef78, #b8dc4a);
  color: #122b1c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 14px 34px rgba(194, 229, 86, 0.22);
}

.marketing-hero .button.primary:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #ddf58c, #c4e556);
  color: #122b1c;
}

.marketing-hero .button:not(.primary) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-points span {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
}

.hero-points span::before {
  background: var(--color-brand-lime);
  box-shadow: 0 0 10px rgba(194, 229, 86, 0.8);
}

.hero-price-note {
  color: #e3d5ac;
}

.hero-media {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 254, 251, 0.99), rgba(240, 240, 228, 0.97));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 24px 48px rgba(0, 0, 0, 0.32),
    0 60px 120px rgba(0, 0, 0, 0.3);
}

.hero-media::after {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.5);
}

.hero-media img {
  border-radius: 10px;
}

.hero-media::before {
  border-color: rgba(194, 229, 86, 0.7);
  background: rgba(244, 250, 219, 0.96);
  box-shadow: 0 6px 16px rgba(12, 34, 27, 0.18);
}

/* Gentle entrance for the hero (disabled by the reduced-motion rule above). */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.marketing-hero .hero-copy > * {
  animation: rise-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.marketing-hero .hero-copy > *:nth-child(2) { animation-delay: 70ms; }
.marketing-hero .hero-copy > *:nth-child(3) { animation-delay: 140ms; }
.marketing-hero .hero-copy > *:nth-child(4) { animation-delay: 210ms; }
.marketing-hero .hero-copy > *:nth-child(5) { animation-delay: 280ms; }
.marketing-hero .hero-copy > *:nth-child(6) { animation-delay: 350ms; }

.marketing-hero .hero-media {
  animation: rise-in 760ms 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---- Logo strip: quiet, uniform chips ---- */
.logo-strip span,
.logo-strip span:nth-child(1),
.logo-strip span:nth-child(2),
.logo-strip span:nth-child(3),
.logo-strip span:nth-child(5) {
  border-color: rgba(226, 221, 205, 0.9);
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.85);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}

.logo-strip span:nth-child(4) {
  border-radius: 999px;
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #f1f6e6;
}

/* ---- Cards: calmer accents, springier hover ---- */
.section-grid article:nth-child(3n + 1),
.timeline article:nth-child(4n + 1),
.faq-grid article {
  border-top: 3px solid var(--gold);
}

.section-grid article:nth-child(3n + 2),
.timeline article:nth-child(4n + 2),
.faq-grid article:nth-child(3n + 2) {
  border-top: 3px solid var(--accent);
}

.section-grid article:nth-child(3n + 3),
.timeline article:nth-child(4n + 3),
.faq-grid article:nth-child(3n + 3) {
  border-top: 3px solid var(--blue);
}

.section-grid article:hover,
.link-grid a:hover,
.timeline article:hover,
.faq-grid article:hover,
.showcase-card:hover {
  transform: translateY(-4px);
}

.timeline span {
  background: linear-gradient(180deg, #f6efd9, #eee2c2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(138, 101, 24, 0.14);
}

.showcase-media {
  overflow: hidden;
}

.showcase-media img {
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.showcase-card:hover .showcase-media img {
  transform: scale(1.04);
}

/* ---- Story compare: softer canvas ---- */
.story-compare {
  border-radius: 20px;
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(194, 229, 86, 0.14), transparent 60%),
    linear-gradient(90deg, rgba(228, 242, 234, 0.9), rgba(252, 246, 230, 0.88));
}

/* ---- Split band: aurora edge ---- */
.split-band {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(720px 340px at 90% -30%, rgba(194, 229, 86, 0.2), transparent 60%),
    radial-gradient(560px 320px at 0% 130%, rgba(201, 162, 74, 0.24), transparent 58%),
    linear-gradient(150deg, #11332a, #0c221b 70%);
}

.split-band > * {
  position: relative;
  z-index: 1;
}

.split-band .button.primary {
  border-color: transparent;
  background: linear-gradient(180deg, #d3ef78, #b8dc4a);
  color: #122b1c;
}

.split-band .button.primary:hover {
  background: linear-gradient(180deg, #ddf58c, #c4e556);
  color: #122b1c;
}

/* ---- Tables: quieter header, roomier rhythm ---- */
th {
  background: #f2f0e5;
  color: #6b7268;
  letter-spacing: 0.08em;
}

/* ---- Forms ---- */
input,
select,
textarea {
  border-radius: 12px;
  background: var(--surface);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-brand-sage);
  box-shadow:
    0 0 0 4px rgba(194, 229, 86, 0.3),
    0 1px 2px rgba(12, 34, 27, 0.05);
}

/* ---- Auth ---- */
.auth-story {
  border-radius: 24px;
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(194, 229, 86, 0.16), transparent 60%),
    radial-gradient(680px 480px at -10% 115%, rgba(201, 162, 74, 0.2), transparent 56%),
    linear-gradient(160deg, #103127, #0b201a 60%);
}

.auth-story::before {
  background:
    linear-gradient(90deg, rgba(251, 252, 245, 0.04) 0 1px, transparent 1px 84px),
    linear-gradient(0deg, rgba(251, 252, 245, 0.04) 0 1px, transparent 1px 84px);
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 80%);
}

.auth-card {
  border-radius: 20px;
}

.auth-proof-grid article,
.auth-steps li {
  border-radius: 14px;
}

/* ---- Signup band ---- */
.signup-band {
  border-radius: 20px;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(255, 255, 255, 0.65), transparent 60%),
    linear-gradient(160deg, #f6eed7, #efe3c4);
}

/* ---- Footer: glow seam + depth ---- */
.site-footer {
  position: relative;
  background:
    radial-gradient(1000px 420px at 80% -10%, rgba(194, 229, 86, 0.1), transparent 60%),
    radial-gradient(760px 380px at 6% 108%, rgba(201, 162, 74, 0.12), transparent 58%),
    linear-gradient(160deg, #103127, #0b1f19 68%);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 229, 86, 0.55), rgba(201, 162, 74, 0.45), transparent);
}

.footer-brand .button {
  border-color: transparent;
  background: linear-gradient(180deg, #d3ef78, #b8dc4a);
  color: #122b1c;
}

.footer-brand .button:hover {
  background: linear-gradient(180deg, #ddf58c, #c4e556);
  color: #122b1c;
}

/* ---- Misc pills & chips ---- */
.pill {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.filter-pills a,
.blog-chips a,
.preset-chip {
  box-shadow: var(--shadow-sm);
}

.pagination a,
.pagination span.current {
  border-radius: 999px;
}

.pagination span.current {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* ---- Cookie banner ---- */
.cookie-banner {
  border-radius: 20px;
  backdrop-filter: blur(14px);
  background: rgba(255, 254, 251, 0.96);
}

/* ---- Invite accept / invalid pages (rendered on the marketing shell) ---- */
.invite-accept-card {
  max-width: 620px;
  margin: var(--space-12) auto;
}

.invite-accept-card .actions {
  margin-top: var(--space-5);
}

/* ============================================================
   Intake — shared form field bits (used on public + app pages)
   ============================================================ */
.field > span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.field > span em {
  color: var(--danger);
  font-style: normal;
}

.field-wide {
  grid-column: 1 / -1;
}

.form-error {
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 750;
}

.stack-form {
  display: grid;
  gap: var(--space-4);
}

/* ---- Workspace review page ---- */
.intake-review-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.intake-review-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.callout {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--color-warning-bg);
  color: #8a5200;
  font-size: 13px;
  font-weight: 650;
}

/* ---- Intake settings: logo + accent branding row ---- */
.intake-brand-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}

.intake-logo-preview {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.intake-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intake-brand-fields {
  flex: 1 1 260px;
  display: grid;
  gap: var(--space-4);
}

.intake-color-field input[type="color"] {
  width: 64px;
  height: 40px;
  min-height: 40px;
  padding: 4px;
  cursor: pointer;
}

.intake-monogram {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--intake-accent, var(--accent-dark));
  color: var(--intake-accent-text, #fff);
  font-weight: 850;
  font-size: 17px;
  line-height: 1;
}

.intake-logo-preview .intake-monogram {
  width: 56px;
  height: 56px;
  font-size: 24px;
}

/* ============================================================
   Public intake experience (standalone branded shell)
   ============================================================ */
.intake-body {
  margin: 0;
  background:
    radial-gradient(1100px 460px at 50% -160px, color-mix(in srgb, var(--color-brand-sage) 12%, transparent), transparent),
    var(--bg);
  color: var(--ink);
}

.intake-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.intake-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) clamp(16px, 4vw, 32px);
  background: rgba(255, 254, 251, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.intake-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.intake-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.intake-brand-name {
  font-weight: 850;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.intake-contact {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
}

.intake-contact a {
  color: var(--muted);
  text-decoration: none;
}

.intake-contact a:hover {
  color: var(--intake-accent, var(--accent-dark));
}

.intake-main {
  flex: 1;
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px) 0 var(--space-12);
}

.intake-hero {
  text-align: center;
  margin-bottom: var(--space-6);
}

.intake-eyebrow {
  margin: 0 0 10px;
  color: var(--intake-accent, var(--accent-dark));
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intake-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.intake-lede {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 550;
}

.intake-card {
  padding: clamp(20px, 3.4vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

.intake-form-errors {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--color-danger-bg);
  color: var(--danger);
  font-weight: 700;
  font-size: 13.5px;
}

.intake-form-errors ul {
  margin: 0;
  padding-left: 18px;
}

.intake-section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}

.intake-section:first-of-type {
  padding-top: var(--space-2);
  border-top: none;
}

.intake-section-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.intake-step {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 15%, transparent);
  color: var(--intake-accent, var(--accent-dark));
  font-weight: 850;
  font-size: 14px;
}

.intake-section-head h2 {
  margin: 2px 0 2px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.intake-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 550;
}

.intake-item-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.intake-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.intake-item-head strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.intake-remove {
  min-height: 0;
  padding: 4px 8px;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.intake-remove:hover {
  transform: none;
  box-shadow: none;
  text-decoration: underline;
}

.intake-photo-field input[type="file"] {
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface);
  border-style: dashed;
  cursor: pointer;
}

.intake-add {
  width: 100%;
  gap: 8px;
  min-height: 46px;
  border: 1.5px dashed color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 45%, var(--line));
  background: color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 6%, transparent);
  color: var(--intake-accent, var(--accent-dark));
  font-weight: 820;
  box-shadow: none;
}

.intake-add:hover {
  border-color: var(--intake-accent, var(--accent-dark));
  background: color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 12%, transparent);
  transform: translateY(-1px);
}

.intake-captcha {
  max-width: 220px;
}

.intake-submit-bar {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.intake-submit {
  width: 100%;
  max-width: 340px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--intake-accent, var(--accent-dark));
  color: var(--intake-accent-text, #fff);
  font-weight: 850;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(16, 37, 31, 0.16);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.intake-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 38px rgba(16, 37, 31, 0.22);
}

.intake-submit.is-ghost {
  background: var(--surface);
  color: var(--intake-accent, var(--accent-dark));
  border-color: color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 40%, var(--line));
  box-shadow: none;
}

/* Brand the focus ring on the public page to the shop's accent. */
.intake-page input:focus,
.intake-page select:focus,
.intake-page textarea:focus {
  border-color: var(--intake-accent, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--intake-accent, var(--accent)) 22%, transparent);
}

/* Outcome pages (thanks / closed) */
.intake-outcome {
  text-align: center;
}

.intake-outcome h1 {
  margin: var(--space-4) 0 12px;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.02em;
}

.intake-outcome .intake-lede {
  margin-bottom: var(--space-5);
}

.intake-outcome-mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--intake-accent, var(--accent-dark)) 16%, transparent);
  color: var(--intake-accent, var(--accent-dark));
}

.intake-outcome-mark.is-muted {
  background: var(--surface-soft);
  color: var(--muted);
}

.intake-outcome-actions {
  margin-top: var(--space-5);
}

.intake-foot {
  padding: var(--space-6);
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}

.intake-foot a {
  color: var(--ink-soft);
  font-weight: 800;
  text-decoration: none;
}

.intake-foot a:hover {
  text-decoration: underline;
}

@media (max-width: 680px) {
  .intake-contact {
    width: 100%;
  }
  .intake-captcha {
    max-width: none;
  }
}

/* ---- Footer newsletter signup (sits on the dark footer) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nl-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-newsletter-copy {
  max-width: 46ch;
}

.footer-newsletter-copy h2 {
  margin: 0 0 6px;
  color: var(--color-text-on-dark);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.footer-newsletter-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.footer-newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-newsletter-form input[type="email"] {
  min-width: 260px;
  min-height: 46px;
  background: #fffefb;
  border-color: transparent;
}

.footer-newsletter-form .button.primary {
  min-height: 46px;
  background: var(--color-brand-lime);
  border-color: var(--color-brand-lime);
  color: var(--color-brand-dark);
}

.footer-newsletter-form .button.primary:hover {
  background: #d0ee6a;
  border-color: #d0ee6a;
  color: var(--color-brand-dark);
}

@media (max-width: 680px) {
  .footer-newsletter-form {
    width: 100%;
  }
  .footer-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
  }
}