/* =========================================================================
   PCB Toolkit, Design tokens & base styles
   Warm small-business operator resource. Soft neutrals + 1 accent.
   ========================================================================= */

:root {
  /* Palette, cool paper white (neutral, un-warmed) */
  --bg:           #F4F4F2;   /* paper white */
  --bg-deep:      #EAEAE6;   /* deeper section */
  --surface:      #FFFFFF;   /* crisp white cards */
  --surface-2:   #FFFFFFE6;
  --ink:          #191917;   /* near-neutral near-black */
  --ink-2:        #37352F;
  --muted:        #605D57;   /* secondary text */
  --muted-2:      #8A877F;
  --line:         #E5E4DF;   /* hairline */
  --line-strong:  #CBC9C2;

  /* Accent, terracotta (Tweakable) */
  --accent:       #C2542D;
  --accent-ink:   #8C3614;
  --accent-soft:  #F0D9CB;

  /* Type */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Density (Tweakable) */
  --section-y:    140px;
  --container:    1280px;
  --gutter:       40px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Display type, Newsreader, lower contrast, optical 36+ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--accent-ink); font-variation-settings: "opsz" 72; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 18;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-y) 0;
}

.section--tight { padding: calc(var(--section-y) * 0.6) 0; }

.divider-top { border-top: 1px solid var(--line); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform 80ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--accent-ink); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(0,0,0,0.04); }

.btn--text {
  background: transparent;
  height: auto;
  padding: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  border-width: 0 0 1px 0;
  padding-bottom: 2px;
}
.btn--text:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Pill chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* height is fixed, so the label must never wrap: at 375px the chip was being
     shrunk below its natural width and the second line spilled past the pill. */
  white-space: nowrap;
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Arrow */
.arrow {
  display: inline-block;
  transition: transform 160ms ease;
}
.card:hover .arrow,
a:hover .arrow { transform: translate(3px, -3px); }

/* Hairline */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Utility */
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }

/* ========================== NAV ========================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.nav--scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
}
.nav__inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 32px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.01em;
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  font-variation-settings: "opsz" 20;
}
.nav__logo {
  display: block;
  height: 30px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
  box-shadow: 0 1px 0 rgba(36,24,12,0.06), inset 0 0 0 1px rgba(36,24,12,0.05);
}
.nav__brandword {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 20px;
}
.nav__brandword .fo { color: var(--accent); font-weight: 600; }
.footer__brand .nav__brandword { font-size: 22px; }
.kf-mark { display: block; flex-shrink: 0; }
.nav__links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
}
.nav__item {
  position: relative;
}
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 120ms ease, color 120ms ease;
}
/* Mega triggers are real buttons, strip the UA chrome but keep .nav__link looks */
button.nav__link {
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
.nav__link:hover,
.nav__item--open .nav__link { background: rgba(0,0,0,0.05); color: var(--ink); }
.nav__caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 140ms ease;
}
.nav__item--open .nav__caret { transform: rotate(-135deg) translateY(-4px); }

.nav__cta { margin-left: auto; display: flex; gap: 8px; }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 720px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(36, 24, 12, 0.18), 0 4px 10px -4px rgba(36,24,12,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  /* visibility flips only after the fade, so closed panels leave the tab order */
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
/* Hover bridge. The panel is offset 8px below the trigger and, being absolutely
   positioned, does not extend the nav item's hover box. Without this the pointer
   crosses dead space on the way down and the menu closes before it can be used. */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav__item--open > .mega,
.nav:not(.nav--enhanced) .nav__item:hover > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}
.nav__item:hover > .nav__link { background: rgba(0,0,0,0.05); color: var(--ink); }
.mega--narrow { min-width: 380px; }
/* A narrow panel that also carries a feature card has to pay for it: the card
   is a fixed 240px, so at 380px the two link columns were left with 83px and
   69px and every label wrapped. 600px restores usable columns and still clears
   the ~665px of headroom the rightmost trigger has at a 1280 viewport. */
.mega--narrow:has(.mega__feature) { min-width: 600px; }
/* Panels hanging off a trigger near the end of the bar open leftward, so a
   wide panel cannot run past the right edge on a small desktop window. */
.mega--right { left: auto; right: -16px; }
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.mega__col h4 {
  margin: 0 0 12px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mega__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mega__col li a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  margin-left: -8px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.mega__col li a:hover {
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}
.mega__col li a .hint {
  font-size: 12px;
  color: var(--muted-2);
  /* The count is the shortest thing in the row and must never be what breaks.
     Without these it compresses first and renders as "14" over "tools". */
  flex-shrink: 0;
  white-space: nowrap;
}
.mega__feature {
  background: var(--bg-deep);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.mega__feature .feat-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-variation-settings: "opsz" 24;
  line-height: 1.1;
}
.mega__feature .feat-meta {
  font-size: 12.5px;
  color: var(--muted);
}

/* ===================== MOBILE NAV (<=1024px) ===================== */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  margin-left: 4px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--ink);
  flex-shrink: 0;
}
.nav__burger:hover { background: rgba(0,0,0,0.05); }
/* Three bars from one element: the middle is the box, the outer two are pseudos */
.nav__burger-bars,
.nav__burger-bars::before,
.nav__burger-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 120ms ease;
}
.nav__burger-bars { position: relative; }
.nav__burger-bars::before,
.nav__burger-bars::after { content: ""; position: absolute; left: 0; }
.nav__burger-bars::before { top: -7px; }
.nav__burger-bars::after { top: 7px; }
.nav__burger--open .nav__burger-bars { background: transparent; }
.nav__burger--open .nav__burger-bars::before { transform: translateY(7px) rotate(45deg); }
.nav__burger--open .nav__burger-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Dimmed, blurred page behind the drawer. Tapping it closes the menu, so the
   way out is always the biggest target on screen. */
.m-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 48;             /* under the drawer (49) and the header (50) */
  background: rgba(25, 25, 23, 0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.m-nav-scrim--on {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s;
}

.m-nav {
  position: fixed;
  top: 72px;               /* JS keeps this in sync with the real header height */
  right: 0;
  bottom: 0;
  width: 82%;
  max-width: 380px;
  z-index: 49;             /* under the sticky header (50), over the scrim */
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -20px rgba(36, 24, 12, 0.28);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 260ms;
}
.m-nav--open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}
.m-nav__inner { padding: 4px 22px 44px; }
.m-nav__sec + .m-nav__sec { border-top: 1px solid var(--line); }

.m-nav__toggle,
.m-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
/* The section title stays put while its own list scrolls past, so you never
   lose track of which group you are reading in a long menu. */
.m-nav__sec--mega .m-nav__toggle {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.m-nav__link { font-weight: 500; }
.m-nav__link--active { color: var(--accent-ink); }
.m-nav__chev {
  width: 9px; height: 9px;
  flex-shrink: 0;
  margin-right: 3px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.45;
  transition: transform 180ms ease;
}
.m-nav__sec--open .m-nav__chev { transform: rotate(-135deg) translateY(-4px); }

.m-nav__panel { display: none; padding-bottom: 14px; }
.m-nav__sec--open .m-nav__panel { display: block; }
.m-nav__group + .m-nav__group { margin-top: 14px; }
.m-nav__group h4 {
  margin: 6px 0 2px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.m-nav__group ul { list-style: none; margin: 0; padding: 0; }
.m-nav__group li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-2);
}
.m-nav__group li a .hint { font-size: 11.5px; color: var(--muted-2); flex-shrink: 0; white-space: nowrap; }
.m-nav__feat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
}
.m-nav__feat .kicker { flex-shrink: 0; font-size: 9.5px; }
.m-nav__feat .feat-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-variation-settings: "opsz" 18;
  line-height: 1.2;
  color: var(--ink);
}
.m-nav__cta { margin-top: 24px; width: 100%; justify-content: center; }

/* Row feedback inside the drawer.
   Hover is worth having here because the drawer's breakpoint also catches
   narrow desktop windows, which have a real mouse. But on a touch screen
   :hover latches onto the last thing tapped and stays lit after the drawer
   closes, so it is gated behind a real pointer and touch gets :active. */
.m-nav__group li a,
.m-nav__link {
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;      /* bleed the tint past the text, as the desktop mega does */
  margin-right: -8px;     /* inner padding is 22px, so this stays inside the drawer */
  border-radius: var(--r-sm);
  transition: background-color 120ms ease, color 120ms ease;
}
.m-nav__group li a .hint { transition: color 120ms ease; }
.m-nav__toggle,
.m-nav__feat { transition: background-color 120ms ease, color 120ms ease; }

@media (hover: hover) and (pointer: fine) {
  .m-nav__group li a:hover,
  .m-nav__link:hover {
    background: rgba(0, 0, 0, 0.04);   /* same tint as .mega__col li a:hover */
    color: var(--ink);
  }
  .m-nav__group li a:hover .hint { color: var(--muted); }
  /* Opaque, never a tint: this header is position:sticky, so a translucent
     background would let its own list scroll visibly through it while pinned.
     Scoped under .m-nav to outrank .m-nav__sec--mega .m-nav__toggle. */
  .m-nav .m-nav__toggle:hover { background: var(--bg-deep); }
  .m-nav__feat:hover { background: var(--accent-soft); }
}

/* Press state. Unconditional, so touch gets feedback too. */
.m-nav__group li a:active,
.m-nav__link:active {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
}
.m-nav .m-nav__toggle:active { background: var(--bg-deep); }
.m-nav__feat:active { background: var(--accent-soft); }

@media (max-width: 1024px) {
  .nav__burger { display: inline-flex; }
  /* Scroll lock while the drawer is open. Deliberately scoped to the drawer's
     own breakpoint so a stranded .nav-locked class can never freeze desktop. */
  html.nav-locked, html.nav-locked body { overflow: hidden; }
}
@media (min-width: 1025px) {
  .m-nav, .m-nav-scrim { display: none; }  /* desktop never sees them, whatever JS last did */
}
@media (max-width: 600px) {
  .nav__cta { display: none; }  /* brand + burger only, CTA lives in the drawer */
  .nav__burger { margin-left: auto; }  /* .nav__cta was carrying this */
}

/* ========================== HERO ========================== */
.hero {
  padding-top: 80px;
  padding-bottom: 100px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  /* Let the row break between the chip and the kicker on narrow screens,
     rather than squeezing the chip until its own text wraps. */
  flex-wrap: wrap; row-gap: 10px;
  margin-bottom: 28px;
}
.hero__title {
  /* Was clamp(56px, 6.8vw, 104px), which ran to six lines at both ends: 98px on
     a 1440 desktop pushed the CTAs below the fold, and the 56px floor ate 42% of
     a 375px screen. Lower floor and cap, same shape in between. */
  font-size: clamp(34px, 4.6vw, 68px);
  margin: 0 0 28px;
}
.hero__lede {
  max-width: 540px;
  margin-bottom: 36px;
}
.hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero__meta div {
  font-size: 13px; color: var(--muted);
}
.hero__meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 28px;
  font-variation-settings: "opsz" 28;
  line-height: 1.1;
  margin-bottom: 4px;
}

.hero__photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  box-shadow: 0 30px 70px -20px rgba(36,24,12,0.25);
}
.hero__mock {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -24px rgba(36,24,12,0.28);
  background: var(--surface);
}
.hero__mock .mock__app { min-height: 330px; }
.hero__mock-cap {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-align: center;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__photo-caption {
  position: absolute;
  left: 20px; bottom: 20px;
  background: rgba(27, 22, 18, 0.78);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}
.hero__sticker {
  position: absolute;
  right: -22px;
  top: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  width: 220px;
  box-shadow: 0 12px 30px -10px rgba(36,24,12,0.25);
  transform: rotate(2deg);
}
.hero__sticker .label { margin-bottom: 4px; }
.hero__sticker .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-variation-settings: "opsz" 24;
  line-height: 1.15;
  color: var(--ink);
}
.hero__sticker .delta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
}

/* ========================== SECTION HEADER ========================== */
.sec-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}
.sec-head h2 {
  font-size: clamp(40px, 4.4vw, 64px);
  margin: 16px 0 0;
}
.sec-head__aside {
  font-size: 16px;
  color: var(--muted);
  max-width: 420px;
  padding-bottom: 6px;
}

/* ========================== BUSINESS TYPES ========================== */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.biz-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  aspect-ratio: 4 / 5;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.biz-card:hover { transform: translateY(-2px); }
.biz-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.biz-card:hover img { transform: scale(1.04); }
.biz-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,12,6,0.72) 0%, rgba(20,12,6,0.15) 45%, rgba(20,12,6,0) 70%);
}
.biz-card__body {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  color: var(--bg);
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.biz-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.biz-card__meta {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
.biz-card__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.biz-card:hover .biz-card__arrow { transform: translate(3px, -3px); }

/* spans */
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* ========================== COMPARE GRID ========================== */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cmp-card {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 28px 28px;
  background: transparent;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 160ms ease;
}
.cmp-card:hover { background: var(--surface); }
.cmp-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.cmp-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.cmp-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-deep);
  display: grid; place-items: center;
  color: var(--ink);
}
.cmp-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 28;
  font-size: 28px;
  line-height: 1.05;
  margin: 36px 0 10px;
  letter-spacing: -0.01em;
}
.cmp-card__hint {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.cmp-card__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--muted);
}
.cmp-card__foot .cnt { color: var(--ink); font-weight: 500; }

/* ========================== CALCULATORS ========================== */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.calc-card {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.calc-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -20px rgba(36,24,12,0.18);
}
.calc-card--wide { grid-column: span 6; }

.calc-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.calc-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 28;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 8px 0 6px;
  text-wrap: balance;
}
.calc-card__sub {
  font-size: 14px;
  color: var(--muted);
}
.calc-card__viz {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 12px;
}
.calc-card__big {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.calc-card__big .small {
  font-size: 22px;
  color: var(--muted);
}
.calc-card__delta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-ink);
  padding: 4px 8px;
  background: var(--accent-soft);
  border-radius: 4px;
}
.calc-card__foot {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline;
}

/* bars */
.calc-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 56px;
  margin-top: auto;
}
.calc-bars .bar {
  flex: 1;
  background: var(--bg-deep);
  border-radius: 3px;
  min-height: 8px;
}
.calc-bars .bar.on { background: var(--accent); }

/* ========================== GUIDES ========================== */
.guides {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.guide-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}
.guide-card--lg { grid-column: span 6; }
.guide-card--xl { grid-column: span 8; }
.guide-card__photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  margin-bottom: 20px;
}
.guide-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.guide-card:hover .guide-card__photo img { transform: scale(1.03); }
.guide-card__photo .pill {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(27,22,18,0.78);
  color: var(--bg);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.guide-card__kicker { margin-bottom: 8px; }
.guide-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.guide-card--xl .guide-card__title { font-size: 36px; }
.guide-card__desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 56ch;
}
.guide-card__meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  display: flex; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ========================== DISCLOSURE ========================== */
.disclosure {
  background: var(--bg-deep);
  border-radius: var(--r-xl);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.disclosure__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
}
.disclosure__body h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.disclosure__body p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 70ch;
  line-height: 1.5;
}

/* ========================== FOOTER ========================== */
.footer {
  padding: 80px 0 48px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}
.footer__brand {
  display: flex; flex-direction: column; gap: 16px;
}
.footer__brand p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 32ch;
}
.footer__partner {
  font-size: 13px !important;
  color: var(--muted-2) !important;
  padding-top: 4px;
}
.footer__partner a {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--accent-soft);
}
.footer__partner a:hover { border-bottom-color: var(--accent); }
.footer__bottom a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-strong);
}
.footer__bottom a:hover { color: var(--accent-ink); }
.footer__col h5 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer__col li a {
  font-size: 14px;
  color: var(--ink-2);
}
.footer__col li a:hover { color: var(--accent-ink); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

/* ========================== RESPONSIVE (light) ========================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-card { grid-column: span 6; }
  .biz-grid > .span-4 { grid-column: span 6; }
  .biz-grid > .span-8 { grid-column: span 12; }
  .biz-grid > .span-6 { grid-column: span 12; }
  .guide-card, .guide-card--lg, .guide-card--xl { grid-column: span 12; }
  .nav__links { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --section-y: 80px; --gutter: 22px; }
  .compare-grid { grid-template-columns: 1fr; }
  .calc-card { grid-column: span 12; }
  .biz-grid > * { grid-column: span 12 !important; }
  .sec-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .disclosure { grid-template-columns: 1fr; padding: 28px; }
}