/* ==========================================================================
   DealPencil — dark premium theme, built on Flock-Fly's brand palette
   (navy + gold). Glass cards, radial glow, small-caps serif display type,
   dashed process diagrams, circular score gauges.
   ========================================================================== */

:root {
  --navy: #12233F;
  --navy-deep: #0A1628;
  --navy-panel: #16294A;
  --bg: #070D18;
  --bg-elev: #0D1626;
  --gold: #C9A227;
  --gold-light: #E4C862;
  --gold-dim: rgba(201,162,39,0.16);
  --cream: #F4F1E8;
  --white: #FFFFFF;
  --text: #EDEFF3;
  --text-muted: #8D94A6;
  --text-faint: #5B6479;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(201,162,39,0.35);
  --red: #D9534F;
  --green: #3FBF7F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,13,24,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 8px; object-fit: contain;
  background: var(--white); padding: 3px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  color: var(--white); font-weight: 700; font-size: 16px; letter-spacing: 2px;
  font-family: 'Fraunces', serif; font-variant: small-caps;
}
.brand-sub { color: var(--gold); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.3px;
}
.nav-links a:hover { color: var(--gold-light); }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 90px 24px 70px;
  background:
    radial-gradient(ellipse 900px 500px at 78% 10%, rgba(201,162,39,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 80%, rgba(18,35,63,0.6), transparent 60%),
    var(--bg);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-strong); color: var(--gold-light);
  padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 26px;
}
.eyebrow-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.hero h1 {
  font-family: 'Fraunces', serif; font-variant: small-caps;
  font-size: clamp(34px, 4.6vw, 56px); font-weight: 600;
  margin: 0 0 22px; line-height: 1.12; color: var(--white);
}
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero p.lede {
  color: var(--text-muted); font-size: 17px; max-width: 480px; margin: 0 0 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Floating deal preview card in hero */
.hero-visual { position: relative; }
.float-card {
  background: linear-gradient(180deg, var(--navy-panel), var(--bg-elev));
  border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.float-card .fc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.float-card .fc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-faint); font-weight: 700; }
.float-card .fc-badge { background: rgba(63,191,127,0.14); color: var(--green); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.float-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.float-row:last-child { border-bottom: none; }
.float-row .fr-label { color: var(--text-muted); font-size: 13.5px; }
.float-row .fr-value { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: var(--white); }
.float-row .fr-value.gold { color: var(--gold-light); }
.float-row .fr-value.green { color: var(--green); }
.float-sub { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 16px; }

/* ---------- PROCESS FLOW ---------- */
.flow-strip { padding: 0 24px 70px; }
.flow-row {
  display: flex; align-items: center; justify-content: center; gap: 0;
  max-width: 980px; margin: 0 auto; flex-wrap: wrap;
}
.flow-node {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 22px; display: flex; align-items: center; gap: 12px; min-width: 210px;
}
.flow-node.active { border-color: var(--border-strong); box-shadow: 0 0 0 1px var(--gold-dim); }
.flow-node .fn-icon {
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--gold-dim); color: var(--gold-light); flex-shrink: 0;
}
.flow-node .fn-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); font-weight: 700; }
.flow-node .fn-title { font-weight: 700; font-size: 14px; color: var(--white); }
.flow-connector { width: 46px; height: 1px; border-top: 2px dashed var(--border-strong); margin: 0 6px; }
@media (max-width: 720px) { .flow-connector { display: none; } .flow-row { gap: 12px; } }

/* ---------- SECTIONS ---------- */
.section { padding: 70px 24px; position: relative; }
.section-alt { background: var(--bg-elev); }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 46px; }
.section-eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.section-title {
  font-family: 'Fraunces', serif; font-variant: small-caps; font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600; margin: 0 0 12px; color: var(--white);
}
.section-desc { color: var(--text-muted); font-size: 15.5px; margin: 0; }
.section-desc.left { text-align: left; max-width: 640px; }

/* ---------- FEATURE / PROBLEM CARDS ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
.feat-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 26px;
}
.feat-card .fc-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--gold-dim); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px;
}
.feat-card.problem .fc-icon { background: rgba(217,83,79,0.14); color: var(--red); }
.feat-card h4 { font-size: 16px; margin: 0 0 8px; color: var(--white); }
.feat-card p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* ---------- CALCULATOR LAYOUT ---------- */
.calc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  /* Without this, grid stretches the shorter card to match the taller one,
     leaving a huge empty panel next to long content like the LOI document. */
  align-items: start;
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

/* Both columns are capped to the same height and scroll internally, so their
   top edges line up exactly and neither one stretches into dead space.
   (An earlier version made the short column sticky — but a sticky grid item
   slides down inside its own grid area as you scroll, which pushed it out of
   alignment with its neighbour. Matched panes are predictable instead.) */
@media (min-width: 901px) {
  .calc-grid > .card {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .calc-grid > .card::-webkit-scrollbar { width: 8px; }
  .calc-grid > .card::-webkit-scrollbar-track { background: transparent; }
  .calc-grid > .card::-webkit-scrollbar-thumb {
    background: rgba(201,162,39,0.22); border-radius: 4px;
  }
  .calc-grid > .card::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.4); }
  .calc-grid > .card { scrollbar-width: thin; scrollbar-color: rgba(201,162,39,0.28) transparent; }
  /* A pane that scrolls shouldn't also drift on hover */
  .calc-grid > .card.lift:hover { transform: none; }
}

.card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px;
}
.card h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-faint);
  margin: 0 0 20px; font-weight: 700;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px;
}
.form-group input, .form-group select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; color: var(--white); background: var(--navy-deep);
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: var(--gold);
}
.form-group .hint { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

.divider { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* ---------- RESULTS ---------- */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.result-box {
  background: var(--navy-deep); border-radius: 12px; padding: 18px; text-align: center;
  border: 1px solid var(--border);
}
.result-box .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); font-weight: 700; }
.result-box .value { font-size: 24px; font-weight: 600; color: var(--white); margin-top: 6px; font-family: 'Fraunces', serif; }

/* Score gauge + pencil banner */
.score-row { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; padding: 18px; background: var(--navy-deep); border-radius: 12px; border: 1px solid var(--border); }
.gauge { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); width: 74px; height: 74px; }
.gauge circle { fill: none; stroke-width: 7; }
.gauge .track { stroke: rgba(255,255,255,0.08); }
.gauge .fill { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease; }
.gauge .fill.fail { stroke: var(--red); }
.gauge-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--white); }
.score-text .st-title { font-weight: 700; font-size: 15px; color: var(--white); margin-bottom: 4px; }
.score-text .st-title.fail { color: var(--red); }
.score-text .st-title.pass { color: var(--gold-light); }
.score-text p { margin: 0; font-size: 13px; color: var(--text-muted); }

.cashflow-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cashflow-head-cols { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); font-weight: 700; }

.cashflow-row {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.cashflow-row.cashflow-total { border-bottom: none; font-weight: 700; color: var(--white); }
.cashflow-row span:first-child { color: var(--text-muted); }
.cashflow-row.cashflow-total span:first-child { color: var(--white); }
.cashflow-row .amt { font-weight: 700; color: var(--white); }
.cashflow-row .amt.neg { color: var(--red); }

.amt-group { display: flex; align-items: baseline; gap: 8px; }
.amt-mo { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.amt-mo.neg { color: var(--red); opacity: 0.8; }

/* ---------- FINANCING STACK (one bar, three proportional segments) ---------- */
.stack-bar {
  display: flex; height: 38px; border-radius: 8px; overflow: hidden; margin-bottom: 16px;
  border: 1px solid var(--border); background: var(--navy-deep);
}
.stack-seg { height: 100%; transition: width 0.3s ease; }
.stack-seg.senior { background: var(--text-faint); }
.stack-seg.carry { background: var(--gold); }
.stack-seg.cash { background: var(--green); }

.stack-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.stack-legend .item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.stack-legend .item strong { color: var(--white); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dot.senior { background: var(--text-faint); }
.dot.carry { background: var(--gold); }
.dot.cash { background: var(--green); }

/* ---------- CASH TO BUYER CALLOUT ---------- */
.cash-callout {
  background: linear-gradient(135deg, rgba(201,162,39,0.16), rgba(201,162,39,0.04));
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 22px 24px; margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.cash-callout .cc-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-light); font-weight: 700; }
.cash-callout .cc-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.cash-callout .cc-value { font-family: 'Fraunces', serif; font-weight: 600; font-size: 32px; color: var(--white); }
.cash-callout .cc-value.neg { color: var(--red); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 8px; font-weight: 700; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit;
}
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); }
.btn-block { width: 100%; text-align: center; }

/* ---------- LOI document ----------
   The on-screen preview mirrors the branded PDF layout 1:1 so what you see
   is what downloads. Ink colours are fixed (not theme vars) because this is
   a white paper document, not part of the dark UI. */
.loi-preview {
  --doc-navy: #12233f;
  --doc-gold: #c9a227;
  --doc-ink: #212936;
  --doc-muted: #6e7784;
  --doc-rule: #d8dde5;
  --doc-tint: #f6f8fb;
  --doc-gold-tint: #fcf7e9;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--doc-ink);
  max-width: 720px;
  margin: 0 auto;
}
.loi-preview > *:not(.loi-letterhead) { margin-left: 46px; margin-right: 46px; }
.loi-preview p { margin: 0 0 13px; }

/* Letterhead band */
.loi-preview .loi-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  background: var(--doc-navy);
  border-bottom: 4px solid var(--doc-gold);
  padding: 30px 46px 22px;
  margin-bottom: 30px;
}
.loi-preview .loi-letterhead p { margin: 0; }
.loi-preview .lh-mark {
  font-size: 21px; font-weight: 800; letter-spacing: 2px; color: #fff; line-height: 1.1;
}
.loi-preview .lh-tag,
.loi-preview .lh-sub {
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--doc-gold); margin-top: 6px;
}
.loi-preview .lh-right { text-align: right; }
.loi-preview .lh-doc {
  font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: #fff; line-height: 1.1;
}

/* Property / date meta row */
.loi-preview .loi-meta {
  display: flex; justify-content: space-between; gap: 24px;
  padding-bottom: 12px; border-bottom: 1px solid var(--doc-rule); margin-bottom: 20px;
}
.loi-preview .loi-meta p { margin: 0; }
.loi-preview .meta-right { text-align: right; }
.loi-preview .meta-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--doc-muted);
}
.loi-preview .meta-value { font-size: 14px; font-weight: 700; color: var(--doc-navy); margin-top: 3px !important; }
.loi-preview .loi-re { font-weight: 700; color: var(--doc-navy); margin-bottom: 16px; }

/* Section headings — gold tick + serif navy + hairline */
.loi-preview .loi-h {
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--doc-navy);
  margin: 26px 0 0;
  padding: 0 0 8px 13px;
  border-bottom: 1px solid var(--doc-rule);
}
.loi-preview .loi-h::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 3px; height: 15px; background: var(--doc-gold);
}
.loi-preview .loi-h + * { margin-top: 18px; }

/* Key-terms spec card */
.loi-preview .loi-terms {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  background: var(--doc-tint);
  border: 1px solid var(--doc-rule);
  border-left: 3px solid var(--doc-gold);
  border-radius: 5px;
  padding: 6px 18px;
  margin-bottom: 20px;
}
.loi-preview .term-row {
  display: flex; flex-direction: column;
  padding: 11px 0;
  border-bottom: 1px solid var(--doc-rule);
}
.loi-preview .loi-terms .term-row:nth-last-child(-n+2) { border-bottom: 0; }
.loi-preview .term-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--doc-muted);
}
.loi-preview .term-value { font-size: 14.5px; font-weight: 700; color: var(--doc-navy); margin-top: 2px; }

/* Numbered step cards */
.loi-preview .loi-step {
  background: var(--doc-tint);
  border-left: 3px solid var(--doc-gold);
  border-radius: 5px;
  padding: 14px 18px 12px;
  margin-bottom: 12px;
}
.loi-preview .step-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px; color: var(--doc-navy); margin: 0 0 8px !important;
}
.loi-preview .step-num {
  flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--doc-navy); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.loi-preview .step-list { margin: 0; padding-left: 18px; list-style: none; }
.loi-preview .step-list li { position: relative; margin-bottom: 4px; }
.loi-preview .step-list li::before {
  content: ''; position: absolute; left: -13px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--doc-gold);
}

/* Seller benefits — gold card with check marks */
.loi-preview .loi-benefits {
  background: var(--doc-gold-tint);
  border: 1px solid var(--doc-gold);
  border-radius: 5px;
  padding: 16px 20px 14px;
  margin: 16px 0 20px;
}
.loi-preview .ben-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--doc-navy); margin: 0 0 10px !important;
}
.loi-preview .ben-list { margin: 0; padding-left: 22px; list-style: none; }
.loi-preview .ben-list li { position: relative; margin-bottom: 6px; }
.loi-preview .ben-list li::before {
  content: ''; position: absolute; left: -18px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--doc-gold); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Validity callout — inverted navy panel */
.loi-preview .loi-callout {
  background: var(--doc-navy);
  border-left: 3px solid var(--doc-gold);
  border-radius: 5px;
  padding: 15px 20px;
  margin: 20px 0;
  color: #fff;
}
.loi-preview .loi-callout p { margin: 0; color: #fff; }
.loi-preview .loi-callout strong { color: var(--doc-gold); }

.loi-preview .loi-clause strong { color: var(--doc-navy); }
.loi-preview .loi-clause span[class^="b-"],
.loi-preview .loi-clause span[class*=" b-"] { font-weight: 700; color: var(--doc-navy); }
.loi-preview .loi-signoff { margin-top: 20px; }

/* Document footer strip */
.loi-preview .loi-docfoot {
  margin: 34px 0 0 !important;
  padding: 12px 46px 22px;
  border-top: 1px solid var(--doc-rule);
  font-size: 9.5px;
  color: var(--doc-muted);
}
.loi-preview .loi-docfoot strong { color: var(--doc-navy); letter-spacing: 0.6px; }

/* Signer contact blocks — bold name, italic primary title, plain contacts */
.loi-preview .signer-block { margin: 0 0 18px; }
.loi-preview .signer-block p { margin: 0; line-height: 1.45; color: #1c2434; }
.loi-preview .sg-name { font-weight: 700; }
.loi-preview .sg-title { font-weight: 700; font-style: italic; }
.loi-preview .sg-role,
.loi-preview .sg-contact { color: #374151; }

/* Two-column signature rows: value above a ruled line, caption beneath */
.loi-preview .sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 34px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.loi-preview .sig-col { display: flex; flex-direction: column; }
.loi-preview .sig-fill {
  margin: 0 0 4px;
  min-height: 18px;
  text-align: center;
  color: #1c2434;
}
.loi-preview .sig-rule {
  border-bottom: 1px solid #1c2434;
  height: 1px;
  position: relative;
}
.loi-preview .sig-rule-by { margin-left: 26px; }
.loi-preview .sig-rule-by .sig-by {
  position: absolute;
  left: -26px;
  bottom: 2px;
  font-size: 12px;
  color: #1c2434;
}
.loi-preview .sig-label {
  margin: 7px 0 0;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--doc-muted);
}
.loi-preview .sig-rule { border-bottom-color: var(--doc-navy); }
.loi-preview .sig-rule-by .sig-by { color: var(--doc-navy); }
.loi-preview .sig-fill { font-weight: 700; color: var(--doc-navy); }
.loi-preview .acceptance-label {
  display: inline-block;
  margin: 30px 0 0;
  padding-bottom: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--doc-navy);
  border-bottom: 2px solid var(--doc-gold);
}
.loi-preview .sg-name,
.loi-preview .sg-title { color: var(--doc-navy); }

@media print {
  /* Hide literally everything on the page except the LOI document itself —
     more robust than listing sections by class, since any new section added
     later (e.g. the feature grid) would otherwise leak into the printout. */
  body * { visibility: hidden; }
  .loi-preview, .loi-preview * { visibility: visible; }
  .loi-preview {
    visibility: visible;
    position: absolute; left: 0; top: 0; width: 100%;
    border: none; box-shadow: none; padding: 20px; margin: 0;
    max-width: none;
  }
  body { background: white; }
  /* The on-screen preview is a capped scroll pane — it must expand to full
     length for printing, or only the first screenful would come out. */
  .loi-preview {
    max-height: none !important;
    overflow: visible !important;
  }
  .loi-preview .loi-letterhead { position: static !important; }
  @page { margin: 0.75in; }
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--navy-deep); border-top: 1px solid var(--border);
  color: var(--text-faint); padding: 36px 24px; text-align: center; font-size: 12.5px;
}
.site-footer .ft-brand { color: var(--text-muted); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.site-footer .ft-disclaimer { max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* ==========================================================================
   MOTION & ATMOSPHERE LAYER
   Everything below is presentation-only: ambient background motion, scroll
   reveals, pointer-reactive lighting, and state-change feedback. All of it
   is disabled wholesale under prefers-reduced-motion at the bottom of this
   file, so the site stays fully usable without any of it.
   ========================================================================== */

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), #fff3c4);
  box-shadow: 0 0 12px rgba(201,162,39,0.7);
  z-index: 200; will-change: transform;
}

/* ---------- Header condense on scroll ---------- */
.site-header {
  transition: padding 0.35s cubic-bezier(.4,0,.2,1), background 0.35s ease,
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-header.condensed {
  background: rgba(7,13,24,0.94);
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  border-bottom-color: rgba(201,162,39,0.22);
}
.site-header.condensed .nav { padding-top: 10px; padding-bottom: 10px; }
.site-header .nav { transition: padding 0.35s cubic-bezier(.4,0,.2,1); }
.brand-mark { transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 22px rgba(201,162,39,0.5); }

/* Nav underline sweep */
.nav-links a { position: relative; transition: color 0.25s ease; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- Ambient hero atmosphere ---------- */
.hero { isolation: isolate; }
.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-grid, .hero .container { position: relative; z-index: 2; }

.aurora {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
  will-change: transform;
}
.aurora.a1 {
  width: 620px; height: 520px; top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(201,162,39,0.42), transparent 68%);
  animation: drift1 22s ease-in-out infinite;
}
.aurora.a2 {
  width: 560px; height: 480px; bottom: -200px; left: -140px;
  background: radial-gradient(circle, rgba(58,105,182,0.38), transparent 68%);
  animation: drift2 27s ease-in-out infinite;
}
.aurora.a3 {
  width: 400px; height: 400px; top: 34%; left: 42%;
  background: radial-gradient(circle, rgba(201,162,39,0.16), transparent 70%);
  animation: drift3 19s ease-in-out infinite;
}
@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-70px, 60px) scale(1.14); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(80px,-50px) scale(1.1); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.7; }
  50%     { transform: translate(-40px,-40px) scale(1.25); opacity: 0.35; }
}

/* Perspective grid floor */
.grid-floor {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 62%;
  background-image:
    linear-gradient(rgba(201,162,39,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.11) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(420px) rotateX(66deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  animation: gridPan 14s linear infinite;
  opacity: 0.75;
}
@keyframes gridPan { from { background-position: 0 0; } to { background-position: 0 62px; } }

/* Film grain — kills the flat "CSS gradient" look */
.grain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-3px,2px); }
  100% { transform: translate(2px,-3px); }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s cubic-bezier(.22,1,.36,1),
    transform 0.75s cubic-bezier(.22,1,.36,1),
    filter 0.75s ease;
  transition-delay: var(--d, 0ms);
  filter: blur(5px);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; filter: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* ---------- Pointer-reactive card lighting ---------- */
.lift {
  position: relative;
  transition: transform 0.45s cubic-bezier(.22,1,.36,1),
              border-color 0.4s ease, box-shadow 0.45s ease;
}
.lift::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(201,162,39,0.13), transparent 62%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
.lift:hover::before { opacity: 1; }
.lift:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,39,0.42);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.14);
}
.lift > * { position: relative; z-index: 1; }

/* Gradient hairline that traces the top edge on hover */
.lift::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: 0; transition: opacity 0.45s ease; z-index: 2;
}
.lift:hover::after { opacity: 0.9; }

/* Feature card icon gets a life of its own */
.feat-card .fc-icon {
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease;
}
.feat-card:hover .fc-icon {
  transform: translateY(-4px) rotate(-7deg) scale(1.12);
  box-shadow: 0 10px 26px rgba(201,162,39,0.28);
}

/* ---------- Buttons: sheen sweep + press ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 2;
  transition: left 0.65s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after { left: 125%; }
.btn-gold {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease, filter 0.3s ease;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(201,162,39,0.4);
  filter: saturate(1.12);
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn-outline { transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
.btn-outline:hover { transform: translateY(-2px); background: rgba(201,162,39,0.07); }

/* Pulse ring on the primary hero CTA */
.btn-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(201,162,39,0.75);
  animation: pulseRing 2.6s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none; z-index: 1;
}
@keyframes pulseRing {
  0%   { transform: scale(1);    opacity: 0.85; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* ---------- Hero float card ---------- */
.hero-visual { perspective: 1000px; }
.float-card {
  animation: floaty 7s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(-0.25deg); }
  50%     { transform: translateY(-14px) rotate(0.25deg); }
}
.float-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(201,162,39,0.55), transparent 42%, rgba(201,162,39,0.28));
  opacity: 0.55; filter: blur(0.5px);
}
.float-row .fr-value { transition: color 0.4s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.float-row.swapping .fr-value { transform: translateY(-6px); opacity: 0; }
.float-card .fc-badge { position: relative; overflow: hidden; }
.float-card .fc-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent, rgba(63,191,127,0.55), transparent);
  transform: translateX(-100%);
  animation: badgeSweep 3.4s ease-in-out infinite;
}
@keyframes badgeSweep {
  0%, 65% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* ---------- Section headings ---------- */
.section-title {
  background: linear-gradient(180deg, #ffffff 12%, #c8d0e0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-eyebrow { position: relative; display: inline-block; }
.section-eyebrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(.22,1,.36,1) 0.15s;
}
[data-reveal].revealed .section-eyebrow::after,
.section-head.revealed .section-eyebrow::after { transform: scaleX(1); }

/* ---------- Process flow: travelling pulse ---------- */
.flow-connector { position: relative; overflow: hidden; }
.flow-connector::after {
  content: ''; position: absolute; top: 50%; left: -20%;
  width: 26px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 10px var(--gold);
  animation: travel 2.6s cubic-bezier(.55,0,.45,1) infinite;
}
.flow-connector:nth-of-type(4)::after { animation-delay: 1.3s; }
@keyframes travel {
  0%   { left: -22%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.flow-node {
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), border-color 0.35s ease, box-shadow 0.4s ease;
}
.flow-node:hover { transform: translateY(-4px); border-color: rgba(201,162,39,0.45); }
.flow-node.active { animation: activeGlow 3.2s ease-in-out infinite; }
@keyframes activeGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(201,162,39,0.16), 0 0 22px rgba(201,162,39,0.08); }
  50%     { box-shadow: 0 0 0 1px rgba(201,162,39,0.4),  0 0 38px rgba(201,162,39,0.22); }
}

/* ---------- Metrics band ---------- */
.metrics-band {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(201,162,39,0.05), transparent 40%, rgba(201,162,39,0.05)),
    var(--bg-elev);
  padding: 40px 24px;
}
.metrics-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 1000px; margin: 0 auto; text-align: center;
}
@media (max-width: 760px) { .metrics-row { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.metric .m-value {
  font-family: 'Fraunces', serif; font-size: clamp(26px, 3.4vw, 38px); font-weight: 600;
  color: var(--white); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric .m-value em { font-style: normal; color: var(--gold-light); }
.metric .m-label {
  margin-top: 8px; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.metric { position: relative; }
.metric + .metric::before {
  content: ''; position: absolute; left: -10px; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border), transparent);
}
@media (max-width: 760px) { .metric + .metric::before { display: none; } }

/* ---------- Live-value feedback ---------- */
.value, .cc-value, .amt, .amt-mo, .gauge-num, #legSenior, #legCarry, #legCash {
  font-variant-numeric: tabular-nums;
}
.result-box { transition: border-color 0.45s ease, background 0.45s ease, transform 0.35s ease; }
.result-box.bump { animation: bump 0.5s cubic-bezier(.22,1,.36,1); }
@keyframes bump {
  0%   { transform: none; }
  35%  { transform: translateY(-4px) scale(1.022); }
  100% { transform: none; }
}
.result-box.bump .value { color: var(--gold-light); }
.result-box .value { transition: color 0.7s ease; }

.cash-callout { position: relative; overflow: hidden; transition: box-shadow 0.5s ease, border-color 0.5s ease; }
.cash-callout::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(201,162,39,0.16), transparent);
  transform: skewX(-16deg); opacity: 0;
}
.cash-callout.flash::after { animation: calloutSweep 0.85s cubic-bezier(.22,1,.36,1); }
@keyframes calloutSweep {
  0%   { left: -50%; opacity: 1; }
  100% { left: 130%;  opacity: 0; }
}

/* Gauge: smooth sweep + glow */
.gauge .fill {
  transition: stroke-dashoffset 0.9s cubic-bezier(.22,1,.36,1), stroke 0.6s ease;
  filter: drop-shadow(0 0 6px rgba(201,162,39,0.55));
}
.gauge .fill.fail { filter: drop-shadow(0 0 6px rgba(217,83,79,0.55)); }
.gauge-num { transition: color 0.5s ease; }

/* Stack bar: animated widths + moving shimmer */
.stack-seg {
  transition: width 0.85s cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
}
.stack-seg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 3.6s ease-in-out infinite;
}
.stack-seg.carry::after { animation-delay: 0.45s; }
.stack-seg.cash::after  { animation-delay: 0.9s; }
@keyframes shimmer {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* Inputs: focus glow */
.form-group input, .form-group select {
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: rgba(201,162,39,0.6);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.13);
}
.form-group label { transition: color 0.25s ease; }
.form-group:focus-within label { color: var(--gold-light); }

/* Cards get a soft entrance-ready base */
.card { transition: border-color 0.4s ease, box-shadow 0.45s ease; }

/* LOI preview: a contained document viewer, not a 3,000px-tall page section.
   The full letter is still there — it scrolls inside its own pane, the way a
   PDF preview does — so the section stays one screen tall. */
.loi-preview {
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  transition: box-shadow 0.5s ease;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scroll-behavior: smooth;
}
/* Letterhead stays pinned while the body of the letter scrolls under it */
.loi-preview .loi-letterhead { position: sticky; top: 0; z-index: 3; }

.loi-preview::-webkit-scrollbar { width: 10px; }
.loi-preview::-webkit-scrollbar-track { background: #eef1f6; }
.loi-preview::-webkit-scrollbar-thumb {
  background: #c2c9d6; border-radius: 5px; border: 2px solid #eef1f6;
}
.loi-preview::-webkit-scrollbar-thumb:hover { background: var(--doc-gold, #c9a227); }
.loi-preview { scrollbar-width: thin; scrollbar-color: #c2c9d6 #eef1f6; }

/* Section divider glow between alternating bands */
.section-alt { position: relative; }
.section-alt::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);
}

/* Footer shimmer line */
.site-footer { position: relative; }
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.45), transparent);
  background-size: 200% 100%;
  animation: footerSweep 6s linear infinite;
}
@keyframes footerSweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Accessibility: honour reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .grain, .aurora, .grid-floor { display: none; }
}

/* Never print the atmosphere */
@media print {
  .scroll-progress, .grain, .hero-atmos { display: none !important; }
  /* Capped, scrolling panes must expand fully for print */
  .calc-grid > .card {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ---------- Itemised operating expenses ---------- */
.expense-note {
  margin: -8px 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(201,162,39,0.06);
  border-radius: 0 6px 6px 0;
}
.expense-note strong { color: var(--gold-light); }
.opex-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border-strong);
  font-weight: 700; color: var(--white); font-size: 14px;
}
.opex-ratio {
  text-align: right; font-size: 12px; color: var(--text-faint); margin-top: 4px;
}

/* ---------- Locked (fixed) form fields ---------- */
.locked-group {
  position: relative;
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-dim);
  border-radius: 10px;
  padding: 16px 16px 4px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.015);
}
.locked-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.locked-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-faint);
}
.locked-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-light);
  background: var(--gold-dim);
  border: 1px solid rgba(201,162,39,0.28);
  padding: 3px 8px; border-radius: 100px;
  cursor: default;
}
.locked-badge::before {
  content: ''; width: 8px; height: 9px; flex: none;
  border-radius: 1.5px;
  background: currentColor;
  box-shadow: 0 -3px 0 -1px transparent;
  position: relative;
}
input.locked-field {
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  cursor: default;
}
/* Readonly fields shouldn't advertise themselves as editable */
input.locked-field:hover { border-color: rgba(255,255,255,0.06); }
input.locked-field:focus {
  outline: none;
  border-color: rgba(201,162,39,0.3);
  box-shadow: none;
}
.locked-group .form-group:focus-within label { color: var(--text-faint); }

/* ==========================================================================
   DEAL TOOLS — save / share / compare / stress / lead capture
   ========================================================================== */

.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-xs { padding: 6px 12px; font-size: 11.5px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* ---------- Deal action bar ---------- */
.deal-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.deal-bar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.deal-bar-note {
  font-size: 12px; color: var(--text-faint); transition: color 0.3s ease;
}
.deal-bar-note.is-flash { color: var(--gold-light); }

/* ---------- Saved deals panel ---------- */
.saved-panel {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 24px;
}
.saved-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.saved-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-faint);
}
.saved-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px;
  background: var(--gold-dim); color: var(--gold-light); font-size: 10.5px;
}
.saved-head-actions { display: flex; gap: 8px; }
.saved-list { display: flex; flex-direction: column; gap: 8px; }

.saved-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.saved-row:hover { border-color: rgba(201,162,39,0.3); background: rgba(255,255,255,0.035); }

.saved-pick { position: relative; display: flex; flex: none; cursor: pointer; }
.saved-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.saved-pick span {
  width: 17px; height: 17px; border-radius: 5px; display: block;
  border: 1px solid var(--border-strong); background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.saved-pick input:checked + span { background: var(--gold); border-color: var(--gold); }
.saved-pick input:checked + span::after {
  content: ''; position: absolute; left: 6px; top: 2.5px;
  width: 4px; height: 9px; border: solid var(--navy-deep);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.saved-pick input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201,162,39,0.25); }

.saved-name {
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.2s ease;
}
.saved-name:hover { color: var(--gold-light); }

.saved-metrics { display: flex; align-items: center; gap: 16px; flex: none; }
.saved-metrics .sm {
  font-size: 13px; font-weight: 700; color: var(--white);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.saved-metrics .sm em {
  display: block; font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint);
}
.saved-metrics .sm.pos { color: var(--green); }
.saved-metrics .sm.neg { color: var(--red); }

.verdict {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
}
.verdict.pass { background: rgba(63,191,127,0.14); color: var(--green); }
.verdict.fail { background: rgba(217,83,79,0.14); color: var(--red); }

.saved-del {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.saved-del:hover { color: var(--red); border-color: var(--red); }

/* ---------- Stress testing ---------- */
.stress-bar {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 22px;
  background: rgba(255,255,255,0.015);
}
.stress-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.stress-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-faint);
}
.stress-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stress-chip {
  padding: 6px 12px; border-radius: 100px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-family: inherit;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  transition: all 0.25s ease;
}
.stress-chip:hover { border-color: rgba(201,162,39,0.45); color: var(--gold-light); }
.stress-chip.is-on {
  background: var(--gold-dim); border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: 0 0 14px rgba(201,162,39,0.18);
}
.stress-readout {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.sr-line { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sr-line em {
  display: block; font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 2px;
}
.sr-arrow { color: var(--text-faint); }
.sr-line strong.pos { color: var(--green); }
.sr-line strong.neg { color: var(--red); }
.sr-delta { color: var(--text-faint); font-size: 11px; }
.result-box.is-stressed { border-color: rgba(201,162,39,0.35); }

/* ---------- Comparison table ---------- */
.compare-wrap {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px; overflow-x: auto;
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare-table th, .compare-table td {
  padding: 13px 16px; text-align: right; font-size: 14px;
  border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.compare-table thead th {
  font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600;
  color: var(--white); border-bottom-color: var(--border-strong);
}
.compare-table th.cmp-metric, .compare-table td.cmp-metric {
  text-align: left; color: var(--text-muted); font-size: 12.5px;
  font-family: 'Inter', sans-serif; font-weight: 600; white-space: nowrap;
}
.compare-table tbody td { color: var(--white); font-weight: 600; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.is-best {
  color: var(--gold-light);
  background: rgba(201,162,39,0.07);
  box-shadow: inset 2px 0 0 var(--gold);
}
.compare-table tr.cmp-verdict td { padding-top: 16px; padding-bottom: 16px; }
.compare-note {
  text-align: center; font-size: 12px; color: var(--text-faint); margin: 16px 0 0;
}

/* ---------- Lead capture ---------- */
.lead-section { padding-top: 20px; }
.lead-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
  background:
    radial-gradient(ellipse 600px 340px at 12% 20%, rgba(201,162,39,0.12), transparent 62%),
    linear-gradient(180deg, var(--navy-panel), var(--bg-elev));
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 44px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
@media (max-width: 860px) { .lead-card { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; } }
.lead-title {
  font-family: 'Fraunces', serif; font-variant: small-caps;
  font-size: clamp(24px, 3vw, 34px); font-weight: 600;
  color: var(--white); margin: 0 0 12px; line-height: 1.15;
}
.lead-desc { color: var(--text-muted); font-size: 15px; margin: 0; }
.lead-form .form-group { margin-bottom: 12px; }
.lead-fine { font-size: 11.5px; color: var(--text-faint); margin: 12px 0 0; line-height: 1.5; }
.lead-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.lead-status {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.lead-status.ok { background: rgba(63,191,127,0.12); color: var(--green); border: 1px solid rgba(63,191,127,0.3); }
.lead-status.err { background: rgba(217,83,79,0.12); color: var(--red); border: 1px solid rgba(217,83,79,0.3); }
.lead-status a { color: inherit; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .deal-bar { flex-direction: column; align-items: stretch; }
  .deal-bar-actions .btn { flex: 1 1 auto; text-align: center; }
  .deal-bar-note { text-align: center; }
  .saved-row { flex-wrap: wrap; row-gap: 10px; }
  .saved-name { flex: 1 1 100%; order: -1; white-space: normal; }
  .saved-metrics { gap: 14px; flex: 1 1 auto; }
  .saved-metrics .sm { font-size: 12px; }
  .stress-chips .stress-chip { flex: 1 1 calc(50% - 4px); text-align: center; }
  .stress-readout { gap: 12px; }
}

/* ==========================================================================
   RESPONSIVE HARDENING
   Grids that previously never collapsed, iOS focus-zoom, and the document
   preview on small screens.
   ========================================================================== */

/* iOS zooms the viewport when a focused input is under 16px. Bump form
   controls to 16px on touch-sized screens so tapping a field doesn't punt
   the layout sideways. */
@media (max-width: 780px) {
  .form-group input, .form-group select { font-size: 16px; padding: 12px 13px; }
}

@media (max-width: 620px) {
  /* Paired inputs are too narrow to read on a phone — stack them */
  .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .result-grid { gap: 10px; }
  .section { padding: 52px 20px; }
  .container { padding: 0 18px; }
  .metrics-band { padding: 32px 20px; }
}

/* Header: three nav links plus the brand overflow a narrow phone */
@media (max-width: 640px) {
  .site-header .nav { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 18px; }
  .nav-links { gap: 18px; width: 100%; justify-content: center; }
  .nav-links a { font-size: 12.5px; }
  .brand-name { font-size: 15px; }
}

/* LOI document preview on small screens */
@media (max-width: 900px) {
  /* Generous print margins are wasteful on a 375px-wide screen */
  .loi-preview > *:not(.loi-letterhead) { margin-left: 22px; margin-right: 22px; }
  .loi-preview { font-size: 13px; }
  .loi-preview .loi-letterhead {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 22px 22px 18px;
  }
  .loi-preview .lh-right { text-align: left; }
  .loi-preview .loi-terms { grid-template-columns: 1fr; column-gap: 0; }
  /* With one column, every row except the last needs its divider back */
  .loi-preview .loi-terms .term-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--doc-rule); }
  .loi-preview .loi-terms .term-row:last-child { border-bottom: 0; }
  .loi-preview .sig-grid { grid-template-columns: 1fr; gap: 26px; }
  .loi-preview .loi-docfoot { padding-left: 22px; padding-right: 22px; }
  .loi-preview .loi-meta { flex-direction: column; gap: 12px; }
  .loi-preview .meta-right { text-align: left; }
}

@media (max-width: 700px) {
  /* A shorter pane on phones, so the document is obviously scrollable
     without swallowing the whole screen */
  .loi-preview {
    max-height: 65vh;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table th, .compare-table td { padding: 11px 12px; font-size: 13px; }
}

/* Very small screens — keep the metrics band readable */
@media (max-width: 400px) {
  .metrics-row { gap: 22px; }
  .metric .m-label { font-size: 10.5px; letter-spacing: 1px; }
  .stress-chips .stress-chip { flex: 1 1 100%; }
}