@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&display=swap');

/* Tokens are deliberately the same family as ltvmax.com. Same brand, different
   property: that one is the doctrine, this one is the instrument. What differs
   here is structure, not palette. The mono face carries anything the instrument
   itself produces (criterion indices, prices, the scorecard), so the page reads
   as an instrument rather than a brochure. It is a system stack, no extra load. */

:root {
  --bg: #f4f1ec;
  --bg-2: #e8e4dc;
  --surface: #ffffff;
  --border: #d0cac0;
  --text: #1a1714;
  --text-2: #5a534a;
  --text-3: #8a8078;
  --accent: #c8401a;
  --accent-hover: #a83314;
  --accent-muted: rgba(200, 64, 26, 0.08);

  --font-display: 'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --max: 1160px;
  --measure: 60ch;
  --radius: 2px;
  --transition: 180ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111009;
    --bg-2: #1c1a16;
    --surface: #1c1a16;
    --border: #2e2a24;
    --text: #f0ece4;
    --text-2: #a09890;
    --text-3: #6a6058;
    --accent: #e05522;
    --accent-hover: #f06030;
    --accent-muted: rgba(224, 85, 34, 0.10);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
strong { font-weight: 700; color: var(--text); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.measure { max-width: var(--measure); }

/* ===== NAV ===== */
nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 2rem; }

.nav-logo { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.04em; }
.nav-logo span { color: var(--accent); }
.nav-logo em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
  vertical-align: 0.5em;
  margin-left: 0.35rem;
}

.nav-cta {
  font-family: var(--font-condensed);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: #fff;
  padding: 0.5rem 1.25rem; border-radius: var(--radius);
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--accent-hover); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-condensed);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.9rem 2rem; border-radius: var(--radius);
  transition: background var(--transition), transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

/* Secondary is a text link, never a second button. Two equal buttons make the
   reader choose between them instead of choosing the one that matters. */
.btn-text {
  font-family: var(--font-condensed);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid var(--border);
  padding-bottom: 2px; transition: color var(--transition), border-color var(--transition);
}
.btn-text:hover { color: var(--text); border-color: var(--accent); }

.cta-row { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ===== SECTIONS ===== */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: none; }

.label {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.25rem;
}

/* Bebas has no lowercase, so anything set in it renders as full caps. That is
   right for two or three words and wrong for a sentence, and every heading here
   is a sentence. So the display face is reserved for the one biggest statement
   on the page, the hero, and everything else steps down to condensed at weight
   700 in sentence case. It also keeps this property from reading as a clone of
   the doctrine site, which is Bebas nearly everywhere. */
h2 {
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.05; letter-spacing: 0.005em; font-weight: 700;
  margin-bottom: 2rem; max-width: 24ch;
}

p { max-width: var(--measure); }
p + p { margin-top: 1.15rem; }

/* ===== HERO ===== */
.hero { padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem); }

/* balance evens the rag on short multi-line headings. Ignored by browsers that
   do not support it, which is the correct failure: they get the plain wrap. */
h1, h2, .pull, .close-line { text-wrap: balance; }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: 0.9; letter-spacing: 0.01em; font-weight: 400;
  max-width: 18ch; margin-bottom: 2rem;
}
.hero h1 span { color: var(--accent); }

.hero p { font-size: clamp(1.125rem, 2vw, 1.3rem); color: var(--text-2); max-width: 54ch; }

/* ===== NUMBERED CLAIMS ===== */
.claims { display: grid; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 900px) { .claims { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.claim-n {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--accent); display: block; margin-bottom: 0.9rem;
}
.claim h3 {
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700;
  line-height: 1.35; margin-bottom: 0.75rem;
}
.claim p { color: var(--text-2); font-size: 1rem; max-width: none; }

/* ===== CRITERIA ===== */
.criteria { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 2rem; }
@media (min-width: 900px) { .criteria { grid-template-columns: repeat(3, 1fr); } }

.criterion { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.criterion-n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-3); }
.criterion h3 {
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 700;
  margin: 0.7rem 0 0.75rem;
}
.criterion p { color: var(--text-2); font-size: 1rem; max-width: none; }
.criterion q { font-style: italic; color: var(--text); quotes: '"' '"'; }

/* ===== PANEL ===== */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.pull {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.15; letter-spacing: 0.005em;
  max-width: 26ch; margin: 2.5rem 0;
}
.pull span { color: var(--accent); }

.checks { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .checks { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }
.checks p { max-width: none; margin: 0; }

.coda {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
  font-size: 1.125rem; color: var(--text);
}

/* ===== THE ORDER ===== */
.step { padding: 2rem 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: none; padding-top: 0; }

.step-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.step-head h3 { font-family: var(--font-condensed); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.01em; }
.step-price {
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--accent); border: 1px solid var(--border); padding: 0.2rem 0.6rem; border-radius: var(--radius);
}
.step p { color: var(--text-2); }
.step p strong { color: var(--text); }

/* ===== CLOSE ===== */
.close { background: var(--bg-2); }
.close-line {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.1; letter-spacing: 0.005em; max-width: 24ch;
}
.close-line span { color: var(--accent); }

/* ===== FOOTER ===== */
footer { border-top: 1px solid var(--border); padding: 3rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--text-3); }
.footer-logo span { color: var(--accent); }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-family: var(--font-condensed); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--text); }
.footer-copy { font-family: var(--font-condensed); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-3); }