/* Pro Forma Generator — page-level styles on top of design-system tokens */

:root {
  /* Page-level semantic aliases — point at the design-system
     Bright v3 palette in colors_and_type.css. */
  --accent-rust: #D26A45;   /* Clay — warm brand accent */
  --accent-moss: #15803D;   /* Emerald — primary brand green */
  --warn:        #D9952B;
  --danger:      #DC3B2E;
  --ok:          #117A3A;
  --ok-bg:       #DCF5E6;
  --warn-bg:     #FBF0D6;
  --danger-bg:   #FBE7E4;

  /* Density (overridden by tweaks) */
  --row-gap: 14px;
  --section-pad: 22px;
  --field-h: 40px;
}

[data-density="compact"] {
  --row-gap: 10px;
  --section-pad: 16px;
  --field-h: 36px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01";
  color: var(--ink);
  background: var(--canvas-app);
}
button { font-family: inherit; }
a { color: inherit; }

/* ===== Top nav ============================================== */
.topnav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.topnav-inner {
  max-width: 1280px; margin: 0 auto;
  height: 64px; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.4px; font-size: 17px; }
/* Image-based brand (lucraforma rebrand). Mark is square; wordmark is
   sized so its cap height visually matches the mark. The SVG viewBox is
   1100×240 with the glyphs occupying ~145px of that — so an img height
   of ~44px gives a cap height of ~32px to match a 32px mark. */
.brand-mark     { height: 32px; width: 32px; display: block; flex-shrink: 0; }
.brand-wordmark { height: 44px; width: auto; display: block; flex-shrink: 0; }
/* Footer: wordmark only, smaller treatment */
.brand-footer .brand-wordmark { height: 32px; }
@media (max-width: 720px) {
  .brand-mark     { height: 24px; width: 24px; }
  .brand-wordmark { height: 32px; }
  .brand-footer .brand-wordmark { height: 28px; }
}
.topnav-links { display: flex; gap: 22px; flex: 1; }
.topnav-links a {
  text-decoration: none; color: var(--ink-secondary);
  font-size: 14px; font-weight: 400;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.topnav-links a:hover { color: var(--primary); }
.topnav-links a.active { color: var(--ink); font-weight: 500; }

/* Calculator dropdown menu */
.nav-item-with-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item-with-menu > a { display: inline-block; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  margin-top: 6px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 55, 112, 0.12), 0 4px 12px rgba(0, 55, 112, 0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 50;
}
.nav-item-with-menu:hover .nav-dropdown,
.nav-item-with-menu:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 4px);
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 18px;
}
.nav-dd-item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.nav-dd-item:hover { background: var(--canvas-soft); color: var(--primary); }
.topnav-right { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.btn-text { background: none; border: 0; font-size: 14px; color: var(--ink-secondary); cursor: pointer; padding: 6px 8px; }
.btn-text:hover { color: var(--ink); }

/* Mobile hamburger — hidden by default, revealed via responsive.css */
.mobile-menu-btn {
  display: none;
  outline: none;
  border: none;
  background: none;
  border-radius: 10px;
  padding: 0;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background 140ms ease, border-color 140ms ease;
}
.mobile-menu-btn:hover { background: var(--canvas-soft); }
.mobile-menu-btn:active { background: var(--canvas-soft); }
.mobile-menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.hamburger {
  position: relative;
  display: inline-block;
  width: 18px; height: 14px;
}
.hamburger > span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms ease, opacity 160ms ease, top 200ms ease;
}
.hamburger > span:nth-child(1) { top: 0; }
.hamburger > span:nth-child(2) { top: 6px; }
.hamburger > span:nth-child(3) { top: 12px; }
.hamburger.is-open > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hamburger.is-open > span:nth-child(2) { opacity: 0; }
.hamburger.is-open > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Mobile dropdown — hidden by default, slides down when .is-open. The
   max-height transition gives the "unfolding" effect without locking us
   into a fixed height. */
.mobile-dropdown {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transition: max-height 240ms ease, opacity 180ms ease;
}
.mobile-dropdown.is-open {
  max-height: 520px;
  opacity: 1;
}
.mobile-dropdown-inner {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 14px;
  gap: 2px;
  max-width: 1280px;
  margin: 0 auto;
}
.mobile-dropdown-inner a {
  display: block;
  padding: 12px 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 8px;
}
.mobile-dropdown-inner a:hover,
.mobile-dropdown-inner a:active { background: var(--canvas-soft); color: var(--primary); }
.mobile-dropdown-inner a.active { color: var(--primary); font-weight: 500; }
.mobile-dropdown-divider {
  height: 1px;
  background: var(--hairline);
  margin: 8px 0;
}
.mobile-dropdown-cta {
  color: var(--primary) !important;
  font-weight: 500 !important;
}

/* ===== Page intro ============================================ */
.page-intro {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 24px 16px;
}
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { opacity: 0.5; }
.page-intro h1 {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 300; letter-spacing: -1px; line-height: 1.05;
  margin: 0 0 12px; color: var(--ink);
}
.page-intro h1 .accent { color: var(--primary); }
.page-intro .lead {
  font-size: 17px; font-weight: 300; line-height: 1.5;
  color: var(--ink-secondary); max-width: 640px; margin: 0 0 14px;
}
.trust-line {
  font-size: 12px; color: var(--ink-mute);
  display: inline-flex; gap: 16px; align-items: center;
}
.trust-line .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); display:inline-block; margin-right:6px; }

/* ===== Calculator layout ===================================== */
.calc-shell {
  max-width: 1280px; margin: 0 auto;
  padding: 8px 24px 64px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 32px;
  align-items: start;
}

/* Left input column */
.input-col { display: flex; flex-direction: column; gap: 16px; }

.section-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.section-head {
  padding: var(--section-pad) 24px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.section-head.open { border-bottom-color: var(--hairline); }
.section-head .ix {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px; color: var(--ink-mute); font-weight: 500;
  font-feature-settings: "ss01", "tnum";
}
.section-head h3 {
  margin: 0; font-family: var(--font-display);
  font-size: 17px; font-weight: 400; letter-spacing: -0.2px;
}
.section-head .meta {
  margin-left: auto; font-size: 12px; color: var(--ink-mute);
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
}
.section-head .chev { color: var(--ink-mute); transition: transform 200ms ease; }
.section-head.open .chev { transform: rotate(180deg); }

.section-body {
  padding: 20px 24px 24px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--row-gap) 16px;
}
.section-body.full { grid-template-columns: 1fr; }

/* Field */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-secondary); font-weight: 500;
  letter-spacing: 0;
}
.field-label .req { color: var(--danger); }
.tip {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--canvas-soft); border: 1px solid var(--hairline);
  color: var(--ink-mute); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; position: relative;
}
.tip:hover { background: var(--primary-bg-subdued); color: var(--primary-deep); border-color: var(--primary-soft); }
.tip:hover::after {
  content: attr(data-tip);
  position: absolute; left: 18px; top: -4px;
  background: var(--ink); color: #fff;
  font-size: 11px; line-height: 1.4; font-weight: 300;
  padding: 8px 10px; border-radius: 6px;
  width: 220px; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,55,112,0.18);
}

.input-wrap { position: relative; }
.input-wrap .prefix, .input-wrap .suffix {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); font-size: 14px; pointer-events: none;
  font-feature-settings: "ss01", "tnum";
}
.input-wrap .prefix { left: 12px; }
.input-wrap .suffix { right: 12px; }
.input-wrap.has-prefix input { padding-left: 26px; }
.input-wrap.has-suffix input { padding-right: 32px; }

.input {
  width: 100%; height: var(--field-h);
  background: var(--canvas);
  border: 1px solid var(--hairline-input);
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400;
  color: var(--ink);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
}
.input:hover { border-color: var(--ink-mute); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,107,74,0.14); }

.helper { font-size: 11px; color: var(--ink-mute); }

/* Inline two-cell rehab line */
.rehab-row {
  display: grid; grid-template-columns: 1fr 110px 32px;
  gap: 8px; align-items: center;
}
.rehab-row .label-row { font-size: 13px; color: var(--ink-secondary); }
.rehab-row .ico-x {
  border: 0; background: transparent; color: var(--ink-mute);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
}
.rehab-row .ico-x:hover { background: var(--canvas-soft); color: var(--danger); }
.rehab-row .input { height: 32px; font-size: 13px; }

.add-line {
  border: 1px dashed var(--hairline-input);
  background: transparent;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px; color: var(--ink-mute);
  cursor: pointer;
  text-align: left;
  display: inline-flex; align-items: center; gap: 6px;
}
.add-line:hover { border-color: var(--primary); color: var(--primary); }

/* Footer of input column */
.input-foot {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 4px;
}
.input-foot .reset {
  background: none; border: 0; color: var(--ink-mute);
  font-size: 13px; cursor: pointer; padding: 6px 0;
}
.input-foot .reset:hover { color: var(--danger); }

/* ===== Results panel (sticky) =============================== */
.results-col { position: sticky; top: 80px; }

.scenario-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 12px;
  font-size: 12px; color: var(--ink-mute);
}
.switch {
  position: relative; width: 32px; height: 18px;
  background: var(--hairline); border-radius: 9999px;
  cursor: pointer; transition: background 160ms ease;
}
.switch.on { background: var(--primary); }
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: left 160ms ease;
}
.switch.on::after { left: 16px; }

.results-panel {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.hero-metric {
  padding: 24px;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
  border-bottom: 1px solid var(--hairline);
}
.hero-metric .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-mute); font-weight: 500; margin-bottom: 8px;
}
.hero-metric .value {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 300; line-height: 1.0;
  letter-spacing: -1.2px;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.hero-metric .value .sym { font-size: 24px; color: var(--ink-mute); }
.hero-metric .value.pos { color: var(--ok); }
.hero-metric .value.neg { color: var(--danger); }
.hero-metric .sub {
  margin-top: 8px; font-size: 12px; color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.hero-metric .delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 500;
  background: var(--ok-bg); color: var(--ok);
  font-feature-settings: "ss01", "tnum";
}
.hero-metric .delta.neg { background: var(--danger-bg); color: var(--danger); }

/* Secondary metrics */
.metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.metric-cell {
  background: var(--canvas);
  padding: 14px 16px;
}
.metric-cell .l {
  font-size: 11px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 4px; font-weight: 500;
}
.metric-cell .v {
  font-size: 18px; font-weight: 400;
  font-family: var(--font-display); letter-spacing: -0.3px;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Rule checks */
.rules {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--hairline);
  background: #fbfcfe;
}
.rule {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.rule .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 9999px;
  font-size: 11px; font-weight: 500;
}
.rule .badge.pass { background: var(--ok-bg); color: var(--ok); }
.rule .badge.tight { background: var(--warn-bg); color: var(--warn); }
.rule .badge.fail { background: var(--danger-bg); color: var(--danger); }
.rule .badge .d { width: 5px; height: 5px; border-radius: 50%; }
.rule .badge.pass .d { background: var(--ok); }
.rule .badge.tight .d { background: var(--warn); }
.rule .badge.fail .d { background: var(--danger); }
.rule .name { font-weight: 500; color: var(--ink); }
.rule .why { color: var(--ink-mute); margin-left: auto; font-size: 11px; font-feature-settings: "ss01","tnum"; font-variant-numeric: tabular-nums; }

/* Holding-cost timeline chart */
.chart-wrap { padding: 16px 16px 12px; border-bottom: 1px solid var(--hairline); }
.chart-wrap .head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-mute); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500;
}
.chart-wrap .head .total {
  margin-left: auto; color: var(--ink); font-size: 13px; text-transform: none;
  font-weight: 400; letter-spacing: 0;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
}

/* Export buttons */
.exports {
  padding: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.btn-export-primary {
  background: var(--primary); color: #fff;
  border: 0; border-radius: 9999px;
  padding: 12px 16px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px rgba(31,107,74,0.28);
}
.btn-export-primary:hover { background: var(--primary-deep); }
.btn-export-primary.pulse { animation: pulse 1.4s ease-out 2; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px rgba(31,107,74,0.28); }
  50% { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 24px rgba(31,107,74,0.55), 0 0 0 6px rgba(31,107,74,0.18); }
}
.btn-export-secondary {
  background: var(--canvas);
  color: var(--primary);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 11px 16px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  transition: border-color 140ms, color 140ms;
}
.btn-export-secondary:hover { border-color: var(--primary); }

.exports-foot {
  padding: 0 16px 16px;
  font-size: 11px; color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}

/* ===== Paywall modal ======================================== */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13, 37, 61, 0.42);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein 200ms ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideup { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal {
  background: #fff;
  border-radius: 16px;
  width: 520px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,55,112,0.25), 0 4px 12px rgba(0,55,112,0.10);
  overflow: hidden;
  animation: slideup 220ms ease-out;
}
.modal-head {
  padding: 24px 24px 8px;
  position: relative;
}
.modal-head .close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--ink-mute);
}
.modal-head .close:hover { background: var(--canvas-soft); color: var(--ink); }
.modal-head .eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--primary); font-weight: 500;
}
.modal-head h2 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 300; letter-spacing: -0.4px; line-height: 1.15;
  margin: 6px 0 6px;
}
.modal-head p { margin: 0; font-size: 14px; color: var(--ink-secondary); font-weight: 300; line-height: 1.5; }

.tier-grid {
  padding: 20px 24px 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tier-card {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
  display: flex; flex-direction: column; gap: 8px;
}
.tier-card:hover { border-color: var(--primary); }
.tier-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier-card.featured .tier-name,
.tier-card.featured .tier-price { color: #fff; }
.tier-card.featured .tier-sub { color: rgba(255,255,255,0.65); }
.tier-card.featured .tier-bullets li { color: rgba(255,255,255,0.85); }
.tier-card .badge-pop {
  position: absolute; top: -10px; right: 14px;
  background: var(--accent-rust); color: #fff;
  padding: 3px 10px; border-radius: 9999px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase;
}
.tier-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.tier-price {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 300; letter-spacing: -0.6px;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tier-sub { font-size: 11px; color: var(--ink-mute); }
.tier-bullets { list-style: none; padding: 0; margin: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.tier-bullets li { font-size: 12px; line-height: 1.4; color: var(--ink-secondary); display: flex; gap: 6px; align-items: flex-start; }
.tier-bullets li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); margin-top: 7px; flex-shrink: 0;
}
.tier-card.featured .tier-bullets li::before { background: var(--lavender); }

.tier-cta {
  width: 100%; padding: 9px 12px; border-radius: 9999px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500;
  background: var(--canvas-soft); color: var(--ink);
  border: 1px solid var(--hairline);
  transition: background 140ms, color 140ms, border-color 140ms;
  margin-top: auto;
}
.tier-card:hover .tier-cta { background: var(--primary); color: #fff; border-color: var(--primary); }
.tier-card.featured .tier-cta { background: var(--primary); color: #fff; border-color: var(--primary); }
.tier-card.featured:hover .tier-cta { background: var(--primary-deep); }

.modal-foot {
  padding: 8px 24px 20px;
  text-align: center;
}
.modal-foot .secure {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-mute);
}
.modal-foot .later {
  display: block; margin-top: 12px;
  background: none; border: 0; color: var(--ink-mute);
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.modal-foot .later:hover { color: var(--ink); }

/* ===== Checkout view ======================================== */
.checkout-shell {
  max-width: 560px; margin: 40px auto 80px; padding: 0 24px;
}
.checkout-shell .back {
  background: none; border: 0; color: var(--ink-mute); font-size: 13px;
  cursor: pointer; padding: 6px 0; margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.checkout-shell .back:hover { color: var(--ink); }
.checkout-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 32px;
}
.checkout-card h1 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 300; letter-spacing: -0.4px;
  margin: 0 0 24px;
}
.order-summary {
  background: var(--canvas-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums;
}
.order-summary .row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; padding: 4px 0;
}
.order-summary .row.total {
  font-size: 17px; font-weight: 500; padding-top: 12px;
  border-top: 1px solid var(--hairline); margin-top: 8px;
}
.order-summary .row .desc { color: var(--ink-secondary); font-weight: 300; }

.field-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-block label { font-size: 12px; color: var(--ink-secondary); font-weight: 500; }

.pay-element {
  border: 1px solid var(--hairline-input);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.pay-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.pay-tab {
  flex: 1; padding: 8px; border: 1px solid var(--hairline);
  border-radius: 6px; background: #fff;
  font-size: 12px; cursor: pointer; color: var(--ink-secondary);
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-tab.active { border-color: var(--ink); background: var(--canvas-soft); color: var(--ink); font-weight: 500; }
.card-row { display: grid; grid-template-columns: 1fr 90px 80px; gap: 8px; }

.pay-cta {
  width: 100%; margin-top: 20px;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 9999px;
  padding: 14px 16px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease;
}
.pay-cta:hover { background: var(--primary-deep); }

.trust-strip {
  margin-top: 16px;
  display: flex; gap: 16px; justify-content: center; align-items: center;
  font-size: 11px; color: var(--ink-mute);
}
.trust-strip .stripe-mark {
  font-size: 11px; font-weight: 600; color: var(--primary);
  background: var(--primary-bg-subdued); padding: 3px 8px; border-radius: 4px;
}

/* ===== Export preview (above paywall) ======================= */
.export-preview {
  margin-top: 28px;
  padding: 18px 16px 16px;
  border: 1px dashed var(--hairline);
  border-radius: 10px;
  background: #fafaf8;
}
.export-preview-head {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  margin-bottom: 12px;
}
.export-preview-thumb-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.export-preview-thumb {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: blur(1.5px) saturate(0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border-radius: 6px;
}
.export-preview-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(31, 107, 74, 0.32);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  pointer-events: none;
  user-select: none;
}
.export-preview-bullets {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink-mute);
}
.export-preview-bullets li {
  position: relative;
  padding-left: 16px;
  margin: 4px 0;
  line-height: 1.5;
}
.export-preview-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 600;
}

/* ===== Success ============================================== */
.success-shell {
  max-width: 640px; margin: 60px auto 80px; padding: 0 24px;
  text-align: center;
}
.success-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 20px;
}
.success-shell h1 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 300; letter-spacing: -0.6px;
  margin: 0 0 8px;
}
.success-shell .sub { color: var(--ink-secondary); font-size: 15px; margin: 0 0 28px; font-weight: 300; }
.success-downloads {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 480px; margin: 0 auto 24px;
}
.dl-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 24px 16px; cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  font-family: inherit; color: inherit;
}
.dl-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(31,107,74,0.12); }
.dl-card .doc {
  width: 56px; height: 72px; border-radius: 6px;
  background: var(--canvas-soft); border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.dl-card .doc::before {
  content: ""; position: absolute; top: 6px; left: 6px; right: 16px; height: 4px;
  background: var(--primary); border-radius: 2px;
}
.dl-card .doc::after {
  content: ""; position: absolute; top: 14px; left: 6px; right: 6px; bottom: 6px;
  background: repeating-linear-gradient(180deg, var(--hairline) 0 1px, transparent 1px 6px);
}
.dl-card.xlsx .doc { background: #e7f4ec; border-color: #c4e3cf; }
.dl-card.xlsx .doc::before { background: var(--ok); }
.dl-card.xlsx .doc::after {
  background:
    repeating-linear-gradient(0deg, var(--ok) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--ok) 0 1px, transparent 1px 14px);
  opacity: 0.35;
}
.dl-card .label { font-size: 13px; font-weight: 500; }
.dl-card .meta { font-size: 11px; color: var(--ink-mute); }

.email-prompt {
  background: var(--canvas-soft); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 14px 16px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-secondary);
}
.cross-sell {
  margin-top: 32px; padding: 24px; background: var(--ink); color: #fff;
  border-radius: 14px; text-align: left;
  display: flex; gap: 16px; align-items: center;
}
.cross-sell .left { flex: 1; }
.cross-sell h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 300; letter-spacing: -0.2px; }
.cross-sell p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 300; }
.cross-sell button { background: #fff; color: var(--ink); border: 0; border-radius: 9999px; padding: 10px 18px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }

/* ===== SEO sections ========================================== */
.seo-band { background: var(--canvas-soft); border-top: 1px solid var(--hairline); }
.seo-shell { max-width: 1280px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.seo-toc { position: sticky; top: 88px; align-self: start; }
.seo-toc .tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-mute); margin-bottom: 12px; font-weight: 500; }
.seo-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.seo-toc a { font-size: 13px; color: var(--ink-secondary); text-decoration: none; padding: 4px 0; display: block; border-left: 2px solid transparent; padding-left: 10px; }
.seo-toc a:hover { color: var(--primary); border-left-color: var(--primary); }

.seo-content { max-width: 760px; }
.seo-section { margin-bottom: 56px; }
.seo-section h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.2;
  margin: 0 0 16px;
}
.seo-section p {
  font-size: 16px; font-weight: 300; line-height: 1.6;
  color: var(--ink-secondary); margin: 0 0 14px;
}
.seo-section p strong, .seo-section li strong { color: var(--ink); font-weight: 500; }

.def-list dt {
  font-weight: 500; color: var(--ink); font-size: 14px;
  font-family: var(--font-body);
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  margin-top: 0;
}
.def-list dd {
  margin: 6px 0 18px; font-size: 14px; line-height: 1.6;
  color: var(--ink-secondary); font-weight: 300;
}

.mistake { padding: 16px 18px; border: 1px solid var(--hairline); border-left: 3px solid var(--accent-rust); border-radius: 6px; margin-bottom: 12px; background: #fff; }
.mistake h4 { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.mistake p { margin: 0; font-size: 13px; color: var(--ink-secondary); line-height: 1.55; font-weight: 300; }

.faq-item { border-top: 1px solid var(--hairline); }
.faq-item .q { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; user-select: none; font-size: 16px; color: var(--ink); font-weight: 400; }
.faq-item .q .chev { transition: transform 200ms ease; color: var(--ink-mute); }
.faq-item.open .q .chev { transform: rotate(45deg); }
.faq-item .a { padding: 0 0 18px; font-size: 14px; color: var(--ink-secondary); line-height: 1.6; font-weight: 300; max-width: 640px; }

/* Lender-ready CTA — Stripe DS pattern */
.lender-cta-band {
  max-width: 1280px;
  margin: 96px auto 16px;
  padding: 0 24px;
}
.lender-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.lender-cta-band h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}
.lender-cta-band p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-secondary);
  font-weight: 300;
  margin: 0 auto 28px;
  max-width: 56ch;
}
.lender-cta-band .btn-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  cursor: pointer;
  line-height: 1;
  transition: background 160ms ease;
}
.lender-cta-band .btn-primary-pill:hover { background: var(--primary-deep); }
.lender-cta-band .btn-primary-pill:active { background: var(--primary-press); }

/* Calc switcher (renovation / dev / flip) */
.calc-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: 20px;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
}
.calc-switcher button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.calc-switcher button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.calc-switcher button:hover:not(.on) { color: var(--ink); }

/* Reno totals strip (inside section) */
.reno-totals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
}
.reno-totals > div { display: flex; flex-direction: column; gap: 2px; }
.reno-totals span { color: var(--ink-mute); }
.reno-totals b { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 15px; }
.reno-totals .total b { color: var(--primary); font-weight: 500; }

/* S-curve row */
.scurve-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.scurve-cell { display: flex; flex-direction: column; gap: 4px; }
.scurve-cell > span { font-size: 11px; color: var(--ink-mute); font-weight: 500; }

/* Final CTA strip */
.final-cta {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background: url("design-system/assets/gradient-mesh.svg?v=3") center top / 100% auto no-repeat;
  opacity: 0.18;
}
.final-cta-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: 64px 24px;
  display: flex; align-items: center; gap: 32px;
}
.final-cta h2 { font-family: var(--font-display); font-size: 36px; font-weight: 300; letter-spacing: -0.6px; margin: 0 0 6px; }
.final-cta p { margin: 0; color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 300; }
.final-cta button {
  margin-left: auto;
  background: #fff; color: var(--ink);
  border: 0; border-radius: 9999px;
  padding: 14px 22px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  transition: transform 160ms ease;
}
.final-cta button:hover { transform: translateY(-1px); }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--hairline); padding: 56px 24px 32px; }
.site-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 48px; }
.site-footer h4 { font-size: 12px; font-weight: 500; color: var(--ink); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.4px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { font-size: 13px; color: var(--ink-mute); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { max-width: 1280px; margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; color: var(--ink-mute); font-size: 12px; }

/* ===== Credit redemption on /checkout =================================
   When credits are detected for the typed email, the order summary
   re-skins with a soft green wash and the primary CTA flips to the
   "Continue with credit" variant. */
.order-summary.credit {
  background: rgba(31, 107, 74, 0.07);
  border: 1px solid rgba(31, 107, 74, 0.18);
}
.order-summary.credit .row .desc { color: var(--primary-deep, #155138); font-weight: 400; }
.order-summary.credit .row.total { color: var(--primary-deep, #155138); }

.pay-cta.credit {
  background: var(--primary);
  letter-spacing: -0.1px;
}
.pay-cta.credit:hover { background: var(--primary-deep); }
.pay-cta.credit:disabled { opacity: 0.65; cursor: default; }

/* ===== /credits standalone lookup page ================================ */
.credits-shell {
  min-height: calc(100vh - 200px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 64px 24px 96px;
  background: var(--canvas-soft, #fafaf9);
}
.credits-card {
  width: 100%; max-width: 440px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.credits-card h1 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 300; letter-spacing: -0.5px;
  margin: 0 0 10px; color: var(--ink);
}
.credits-card h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400; letter-spacing: -0.3px;
  margin: 14px 0 8px; color: var(--ink);
}
.credits-sub {
  font-size: 14px; line-height: 1.55; color: var(--ink-secondary);
  margin: 0 0 22px;
}
.credits-label {
  display: block; font-size: 12px; color: var(--ink-mute); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.credits-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: #fff; color: var(--ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.credits-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,107,74,0.12); }
.credits-input:disabled { background: #f7f7f6; color: var(--ink-mute); }
.credits-error {
  margin-top: 10px;
  color: #b42318; font-size: 13px;
}
.credits-cta {
  width: 100%; margin-top: 18px;
  padding: 12px 18px;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: background 140ms ease;
}
.credits-cta:hover { background: var(--primary-deep); }
.credits-cta:disabled { opacity: 0.6; cursor: default; }
.credits-link {
  background: none; border: 0; padding: 0;
  color: var(--primary); cursor: pointer;
  font-size: 13px; font-family: inherit;
  text-decoration: underline;
  margin-top: 22px;
}
.credits-link:hover { color: var(--primary-deep); }
.credits-result { text-align: center; padding: 8px 0; }
.credits-balance {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 300; letter-spacing: -2px;
  color: var(--primary); line-height: 1;
  margin: 20px 0 4px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.credits-balance-sub {
  font-size: 13px; color: var(--ink-secondary);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 14px;
}
.credits-expiry {
  font-size: 13px; color: var(--ink-mute);
  margin-bottom: 24px;
}
.credits-help {
  font-size: 13px; line-height: 1.5; color: var(--ink-secondary);
  margin: 6px 0 0; text-align: center;
}
.credits-empty-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--canvas-soft, #fafaf9); color: var(--ink-mute);
  font-size: 22px;
  margin: 18px 0 8px;
}