/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --purple-2:   #4a0fb5;
  --purple-3:   #6d28d9;
  --accent:     #c084fc;
  --gold:       #d4af37;
  --gold-dim:   #a8892a;
  --bg:         #07050f;
  --surf-1:     #0e0b1a;
  --surf-2:     #150f26;
  --surf-3:     #1c1533;
  --text:       #f0ecff;
  --text-dim:   #9d97b8;
  --text-faint: #524d6b;
  --border:     rgba(180,150,255,0.10);
  --border-hi:  rgba(180,150,255,0.22);
  --glow:       rgba(108,40,217,0.28);
  --glow-gold:  rgba(212,175,55,0.18);
  --hh: 72px;
  --r1: 8px; --r2: 14px; --r3: 20px;
  --fd: 'Outfit',  system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;

  /* The OS draws the open <select> list, the scrollbars, the number spinners
     and the date picker. No background on the control reaches any of them —
     this declaration is the ONLY lever over them. Without it you get a
     beautifully themed closed control and a grey system list with a blue
     highlight the moment anyone clicks it. */
  color-scheme: dark;
}

/* ── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; overflow-x: hidden; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img  { display: block; max-width: 100%; }

/* ── FORM CONTROLS ───────────────────────────────────────────────── */
/* A native control with no explicit styling renders in the browser's own
   LIGHT chrome — a white box punched into this dark page. These are the
   site-wide defaults so a new control is themed the moment it is written,
   rather than the moment somebody screenshots it.
   Gate: node scripts/form-control-theming.mjs */
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--surf-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r2);
  padding: 12px 16px;
  width: 100%;
  max-width: 100%;
}
select {
  /* appearance:none also removes the native arrow, so one is supplied below —
     without it the control reads as a plain text box. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239d97b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}
/* Firefox draws the option list from the page, unlike Chrome and Safari, so
   these two do reach it there. color-scheme on :root covers the rest. */
select option, select optgroup { background: var(--surf-2); color: var(--text); }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* Checkboxes, radios and range sliders are left out of the block above on
   purpose — a background and a colour break their rendering. accent-color is
   the property that themes them, and with color-scheme:dark above it they
   draw dark instead of the browser's light default. */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--accent);
}

::placeholder { color: var(--text-faint); opacity: 1; }

select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

select:disabled, textarea:disabled, input:disabled {
  /* The browser default here is near-invisible on a dark surface. */
  color: var(--text-faint);
  background: var(--surf-1);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}

/* Chrome and WebKit repaint an autofilled field with their own yellow/blue,
   which makes a filled form look broken. The background cannot be set
   directly on an autofilled field, so it is painted with an inset shadow. */
select:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surf-2) inset;
  box-shadow: 0 0 0 1000px var(--surf-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
a    { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }
main { flex: 1 0 auto; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ── DESCENDER FIX — DEFINITIVE ─────────────────────────────────────
   overflow:hidden clips BOTH layout overflow AND ink overflow (glyphs).
   overflow:clip clips layout overflow ONLY — ink (descenders) can paint
   outside the box freely. This is the correct value for containers that
   hold text. Supported: Chrome 90+, Firefox 81+, Safari 15.4+ (all modern).
   Fallback: overflow:hidden then overflow:clip — older browsers get hidden.
────────────────────────────────────────────────────────────────────── */

/* ── HEADER ──────────────────────────────────────────────────────── */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7,5,15,.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  /* overflow MUST be visible so header brand text is never clipped */
  overflow: visible;
}
.site-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--hh);
  gap: 16px;
  overflow: visible;
}

/* Brand — entire block is overflow:visible, padding creates descender room */
.brand-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  /* Top/bottom padding creates physical space above and below text */
  padding-top: 8px;
  padding-bottom: 12px;  /* extra below baseline = g/j descenders safe */
  overflow: visible;
}
.brand-link:hover { color: inherit; text-decoration: none; }

.site-logo {
  width: 52px; height: 52px;
  object-fit: contain;
  border-radius: var(--r1);
  flex-shrink: 0;
  display: block;
  align-self: center;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: visible;
}
.brand-text .brand-name {
  font-family: var(--fd);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  /* line-height:normal lets Outfit's own metrics determine the line box */
  /* This is critical — a fixed line-height can squeeze out descenders  */
  line-height: normal;
  white-space: nowrap;
  overflow: visible;
}
.brand-text .tagline {
  font-family: var(--fb);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}

/* Desktop nav */
nav.primary {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
nav.primary a {
  font-family: var(--fd);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  /* Generous vertical padding = descenders never touch container edge */
  padding: 10px 11px 12px;
  border-radius: var(--r1);
  transition: color .18s, background .18s;
  white-space: nowrap;
  line-height: normal;
}
nav.primary a:hover,
nav.primary a.active { color: var(--text); background: var(--surf-2); }

.nav-app-btn {
  font-family: var(--fd) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--purple-2), var(--purple-3)) !important;
  padding: 10px 14px 12px !important;
  border-radius: var(--r1) !important;
  border: 1px solid rgba(180,150,255,.2) !important;
  box-shadow: 0 4px 16px var(--glow) !important;
  white-space: nowrap !important;
  line-height: normal !important;
  transition: opacity .18s !important;
}
.nav-app-btn:hover { opacity: 0.88 !important; color: #fff !important; }

/* ── HAMBURGER ───────────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--r1);
  flex-shrink: 0;
  background: transparent;
  border: none;
  /* The outline is removed so the tap target has no platform ring, but a
     keyboard user still needs to see where they are — hence the replacement
     below, not a bare `outline: none`. */
  outline: none;
  outline-color: var(--accent);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  pointer-events: none;
  flex-shrink: 0;
}

/* Mobile nav */
#mobileNav {
  display: none;
  position: fixed;
  top: var(--hh);
  right: 14px;
  min-width: 215px;
  background: var(--surf-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r2);
  box-shadow: 0 20px 60px rgba(0,0,0,.75);
  z-index: 9999;
  /* overflow:clip lets nav link descenders paint freely while still
     visually clipping the border-radius of the dropdown container */
  overflow: hidden; overflow: clip;
}
#mobileNav.open { display: block; }
#mobileNav a {
  display: block;
  /* Extra bottom padding so descenders (g, j, y) clear the border below */
  padding: 14px 20px 16px;
  font-family: var(--fd);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  line-height: normal;
  transition: color .15s, background .15s;
}
#mobileNav a:last-child { border-bottom: none; }
#mobileNav a:hover,
#mobileNav a.active { color: var(--text); background: var(--surf-2); }
#mobileNav .nav-app-btn {
  margin: 10px 14px 14px !important;
  display: block !important;
  text-align: center !important;
  padding: 10px 14px 12px !important;
}

/* ── PAGE SPACING ────────────────────────────────────────────────── */
.page-main { padding-top: 8px; }

.page-hero {
  padding: 60px 0 44px;
  position: relative;
  /* NO overflow:hidden here — page hero is never a clipping parent */
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 360px;
  background: radial-gradient(ellipse at center, rgba(108,40,217,.16) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-label {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  line-height: normal;
}
.page-hero h1, .page-hero h2 {
  font-family: var(--fd);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 900;
  /* line-height:normal = Outfit sets its own line box — no descender clip */
  line-height: normal;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 640px;
}
.page-hero p {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--text-dim);
  max-width: 520px;
  font-weight: 300;
  line-height: 1.75;
}

/* ── BLOCKS ──────────────────────────────────────────────────────── */
.block {
  background: var(--surf-1);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  /* Standard padding + generous bottom so descenders of last heading clear */
  padding: 36px 36px 44px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden; overflow: clip; /* clip=ink-safe; hidden=fallback */
}
.block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
}
.block-title {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  line-height: normal;
}
.block h2 {
  font-family: var(--fd);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  line-height: normal;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.block > .lead, .block > p {
  color: var(--text-dim);
  font-weight: 300;
  max-width: 680px;
  line-height: 1.75;
}

/* ── HOME HERO ───────────────────────────────────────────────────── */
.hero-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
  padding: 72px 0 52px;
}
.hero-left  { position: relative; z-index: 1; }
.hero-right { position: relative; z-index: 1; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  line-height: normal;
}
.hero-kicker::before {
  content: '';
  display: block;
  width: 22px; height: 1px;
  background: var(--accent);
}
.hero-title {
  font-family: var(--fd);
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 900;
  /* line-height:normal — the most reliable descender fix for Outfit */
  line-height: normal;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 20px;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-dim);
  max-width: 460px;
  margin-bottom: 32px;
  line-height: 1.75;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Calculator result CTA (2026-09-30): breathing room above and below the button row. */
.result-cta { margin: 14px 0 22px; }

/* Hero card — overflow:visible so descenders are never clipped */
.hero-card {
  background: var(--surf-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r3);
  /* Extra bottom padding = descender safe zone */
  padding: 28px 28px 34px;
  margin-bottom: 16px;
  overflow: visible;
}
.hero-card h3 {
  font-family: var(--fd);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: normal;
  margin-bottom: 8px;
}
.hero-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.72; }

.social-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.social-pill {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Generous vertical padding — pill border doesn't clip text */
  padding: 7px 14px 9px;
  border-radius: 100px;
  border: 1px solid var(--border-hi);
  color: var(--text-dim);
  line-height: normal;
  transition: color .18s, border-color .18s, background .18s;
}
.social-pill:hover { color: var(--text); border-color: var(--accent); background: var(--surf-2); }

.home-hero-image {
  width: 100%;
  max-height: 540px;
  border-radius: var(--r2);
  object-fit: cover;
  object-position: center 62%;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Extra bottom padding: buttons have overflow:hidden via border-radius */
  padding: 12px 22px 14px;
  border-radius: var(--r1);
  border: none;
  cursor: pointer;
  transition: transform .18s, opacity .18s;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple-2), var(--purple-3));
  color: #fff;
  box-shadow: 0 8px 28px var(--glow);
  border: 1px solid rgba(180,150,255,.15);
}
.btn-primary:hover { transform: translateY(-2px); color: #fff; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #0a0218;
  box-shadow: 0 8px 28px var(--glow-gold);
  border: 1px solid rgba(212,175,55,.2);
}
.btn-gold:hover { transform: translateY(-2px); color: #0a0218; }
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-hi);
}
.btn-ghost:hover { color: var(--text); background: var(--surf-2); border-color: var(--accent); }

/* ── FEATURE GRID ────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.feature-card {
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  /* Extra bottom padding = descender safe in this overflow:hidden card */
  padding: 24px 24px 30px;
  transition: border-color .18s, transform .18s;
  overflow: hidden; overflow: clip; /* clip=ink-safe; hidden=fallback */
}
.feature-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.feature-card h4 {
  font-family: var(--fd);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: normal;
}
.feature-card p { font-size: 0.88rem; color: var(--text-dim); font-weight: 300; line-height: 1.72; }
.feature-icon {
  width: 36px; height: 36px;
  background: var(--surf-3);
  border-radius: var(--r1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-bottom: 14px;
}

/* ── APP BLOCK ───────────────────────────────────────────────────── */
.app-block {
  background: linear-gradient(135deg, var(--surf-2) 0%, var(--surf-1) 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r3);
  /* Extra bottom padding = descender safe */
  padding: 40px 40px 48px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden; overflow: clip; /* clip=ink-safe; hidden=fallback */
}
.app-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, rgba(108,40,217,.22) 0%, transparent 65%);
  pointer-events: none;
}
.app-block::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(212,175,55,.08) 0%, transparent 65%);
  pointer-events: none;
}
.app-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.app-label {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  line-height: normal;
}
.app-block h2 {
  font-family: var(--fd);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: normal;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.app-block p { color: var(--text-dim); font-weight: 300; max-width: 500px; font-size: 0.95rem; line-height: 1.75; }
.app-cta-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0; }
.app-url { font-family: var(--fd); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-faint); text-align: right; }

/* ── NEWSLETTER ──────────────────────────────────────────────────── */
.newsletter {
  background: linear-gradient(135deg, var(--surf-2) 0%, var(--surf-1) 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r3);
  padding: 34px 40px 38px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden; overflow: clip;
}
.newsletter::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(ellipse, rgba(108,40,217,.20) 0%, transparent 65%);
  pointer-events: none;
}
.newsletter-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  position: relative; z-index: 1;
}
.newsletter-copy h2 {
  font-family: var(--fd); font-size: 1.5rem; font-weight: 800; color: var(--text);
  line-height: 1.15; margin: 6px 0 8px; letter-spacing: -0.01em;
}
.newsletter-copy p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.7; max-width: 460px; margin: 0; }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; min-width: 320px; }
.newsletter-fields { display: flex; gap: 10px; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 0;
  background: var(--surf-2); border: 1px solid var(--border-hi); color: var(--text);
  border-radius: var(--r2); padding: 12px 16px; font-family: inherit; font-size: 0.92rem;
}
.newsletter-form input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.newsletter-form input[type="email"]::placeholder { color: var(--text-faint); }
.newsletter-form .btn { white-space: nowrap; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.newsletter-msg { font-size: 0.82rem; color: var(--text-dim); margin: 0; min-height: 1.1em; }
.newsletter-msg.is-ok  { color: #59d59a; }
.newsletter-msg.is-err { color: #ff9b9b; }
@media (max-width: 720px) {
  .newsletter-inner  { grid-template-columns: 1fr; gap: 22px; }
  .newsletter-form   { min-width: 0; }
  .newsletter-fields { flex-direction: column; }
  /* iOS Safari zooms the whole page when a focused input is under 16px, so
     tapping the field made the layout jump. 0.92rem is 14.72px against the 16px
     root. This is the only signup control on a page most people reach from a
     phone, so it is 16px there and unchanged on desktop. */
  .newsletter-form input[type="email"] { font-size: 16px; }
}

/* ── GALLERY ─────────────────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.gallery-item {
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surf-2);
  aspect-ratio: 4/5;
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.gallery-item:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.04); }

/* ── CONTACT ─────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.contact-card {
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 28px 28px 34px;
  transition: border-color .18s;
  overflow: hidden; overflow: clip; /* clip=ink-safe; hidden=fallback */
}
.contact-card:hover { border-color: var(--border-hi); }
.contact-card h4 { font-family: var(--fd); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: normal; }
.contact-card p { font-size: 0.88rem; color: var(--text-dim); font-weight: 300; line-height: 1.72; }
.contact-card a { color: var(--accent); }
.contact-card a:hover { color: var(--text); }
.contact-email { margin-top: 16px; font-family: var(--fd); font-weight: 700; color: var(--text); font-size: 0.92rem; line-height: normal; }

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  background: var(--surf-1);
  flex-shrink: 0;
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand { font-family: var(--fd); font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: normal; }
.footer-copy { font-size: 0.78rem; color: var(--text-faint); margin-top: 4px; }
.footer-right { font-size: 0.75rem; color: var(--text-faint); font-style: italic; }

/* ── LIGHTBOX ────────────────────────────────────────────────────── */
#imgModal {
  display: none;
  position: fixed; inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 40px;
}
#imgModal img.modal-content {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--r2);
  border: 1px solid var(--border-hi);
}
.modal-close {
  position: absolute;
  top: 24px; right: 32px;
  color: var(--text-dim);
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
  font-weight: 300;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:hover { color: var(--text); }
#caption {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: var(--text-faint);
  font-family: var(--fd);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── REVEAL ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }
img.smooth-img { opacity: 0; transition: opacity .4s ease; }
img.smooth-img.is-loaded { opacity: 1; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav.primary { display: none; }
  .hamburger  { display: flex; }
  .hero-wrap  { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 32px; }
  .app-inner  { grid-template-columns: 1fr; gap: 20px; }
  .app-cta-stack { align-items: flex-start; flex-direction: row; }
  .app-url    { text-align: left; }
  .grid-3     { grid-template-columns: 1fr 1fr; }
  .gallery    { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container    { padding: 0 16px; }
  .block        { padding: 20px 20px 28px; }
  .app-block    { padding: 24px 24px 30px; }
  .grid-3       { grid-template-columns: 1fr; }
  .gallery      { grid-template-columns: 1fr; }
  .hero-title   { font-size: 1.7rem; }
  .page-hero h1, .page-hero h2 { font-size: 1.6rem; }
  .cta-row      { flex-direction: column; }
  .btn          { width: 100%; justify-content: center; }
  .app-cta-stack { flex-direction: column; }
  .brand-text .brand-name { font-size: 1rem; }
  .brand-text .tagline { font-size: 0.6rem; }
  .site-logo { width: 42px; height: 42px; }
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* ── BLOG ─────────────────────────────────────────────────────────── */

/* Listing grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 8px 0 40px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--surf-1);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.blog-card:hover {
  border-color: var(--border-hi);
  background: var(--surf-2);
  transform: translateY(-3px);
  color: var(--text);
}
.blog-card-feature { grid-column: 1 / -1; }
.blog-card h3, .blog-card h4 {
  font-family: var(--fd);
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--text);
}
.blog-card-feature h3 { font-size: 1.5rem; }
.blog-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}
.blog-card-tag {
  align-self: flex-start;
  font-family: var(--fd);
  font-size: 0.68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
}
.blog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.blog-card-more { color: var(--gold); font-weight: 600; }

/* Homepage teaser */
.blog-teaser-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.blog-teaser-foot time { color: var(--text-faint); font-size: 0.85rem; }

/* Article page */
.crumbs {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin: 4px 0 24px;
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 6px; }

.article { max-width: 760px; margin: 0 auto; }
.article-head { margin-bottom: 36px; }
.article-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.pill {
  font-family: var(--fd);
  font-size: 0.68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
}
.article-head h1 {
  font-family: var(--fd);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.article-lead {
  font-size: 1.12rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.article-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.view-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.view-count[hidden] { display: none; }
/* On preview cards the chip sits just after the date. The read link is pinned
   right on its own so cards line up whether or not a count is showing. */
.view-count-push { margin-left: 10px; }
.blog-card-foot .blog-card-more { margin-left: auto; }
.view-count-icon {
  flex: none;
  opacity: 0.75;
  transform: translateY(0.5px);
}

.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 {
  font-family: var(--fd);
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 40px 0 14px;
}
.article-body h3 {
  font-family: var(--fd);
  font-size: 1.18rem;
  margin: 28px 0 10px;
}
.article-body p { margin-bottom: 18px; color: var(--text); }
.article-body ul, .article-body ol { margin: 0 0 20px 22px; }
.article-body li { margin-bottom: 8px; color: var(--text); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--gold); }
.article-body strong { color: var(--text); }
.article-body blockquote {
  margin: 24px 0;
  padding: 14px 22px;
  border-left: 3px solid var(--gold);
  background: rgba(212,175,55,0.06);
  border-radius: 0 var(--r1) var(--r1) 0;
  color: var(--text-dim);
  font-style: italic;
}

/* FAQ */
.faq-item { margin-bottom: 20px; }
.faq-item h3 { font-family: var(--fd); font-size: 1.05rem; margin-bottom: 6px; }
.faq-item p { color: var(--text-dim); margin: 0; }

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

/* ── calculator tools ──────────────────────────────────── */
.calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
/* ENTRY BOXES LINE UP, ALWAYS — Tre, 2026-09-12.
   Each field is a <label> holding its caption and its control. With the label
   as a plain column, a caption that wraps to two lines pushes its control down
   and it no longer lines up with the field beside it: measured at 22.6px out
   of line on this form, in both rows, before this rule.
   Row subgrid is the fix. The label spans two of the parent's rows and adopts
   them, so every caption shares one track and every control shares the next —
   the controls line up whatever the captions do. */
.calc-form label {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 8px;
  align-content: start;
  font-family: var(--fb);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
/* Firefox before 71 and any engine without row subgrid: bottom-pack the
   label instead. Every label in a grid row is already stretched to the same
   height, so packing to the end lines the controls up the same way.
   The captions then sit lower on short labels, which is the cost of the
   fallback and is still better than controls out of line. */
@supports not (grid-template-rows: subgrid) {
  .calc-form label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
  }
}
.calc-form input,
.calc-form select {
  font-family: var(--fd);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  /* background-color, NOT the `background` shorthand — the shorthand resets
     background-image, which is where the <select> chevron lives. */
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
/* The number fields hold short figures; this one holds a job name, so it is
   set a size down from them to stop long presets wrapping inside the control. */
.calc-form select {
  font-size: 1rem;
  font-weight: 600;
  padding-right: 38px;
  background-position: right 13px center;
}
.calc-form input:focus,
.calc-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192,132,252,0.18);
}
.calc-form .calc-note[role="alert"] {
  grid-column: 1 / -1;
  color: var(--gold);
  margin: 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 6px;
}
.calc-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px;
}
.calc-stat-label {
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.calc-stat-value {
  font-family: var(--fd);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 6px;
  line-height: normal;
}
.calc-stat-sub {
  font-family: var(--fb);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.calc-note {
  font-family: var(--fb);
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.65;
}
@media (max-width: 640px) {
  .calc-stat-value { font-size: 1.4rem; }
}

.footer-links {
  font-family: var(--fb);
  font-size: 0.82rem;
  margin-top: 6px;
}
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--accent); }

/* /founders/ — waitlist landing */
.founders-list { list-style: none; padding: 0; margin: 18px 0 24px; }
.founders-list li { position: relative; padding-left: 22px; margin-bottom: 12px; color: var(--text-dim); line-height: 1.65; }
.founders-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold, #c9a227); font-weight: 700; }