/* lpzenith.com home page.
 *
 * Standalone on purpose. tools.html and stats.html keep loading styles.css,
 * which still carries the old landing-page rules; class names like .hero
 * exist in both, so sharing one sheet would have meant editing a file whose
 * other consumer cannot be checked visually from here. The duplicated block
 * below is the tokens and the reset only, and it is copied from DESIGN.md
 * rather than invented, so the two files cannot disagree about the brand.
 *
 * Lane: technical manual. Braun product manuals, IKEA instruction sheets,
 * Swiss package inserts. Numbered chapters, a numeral rail, hairlines, and
 * plates rather than cards. The cream and the type are the existing brand;
 * what changed is the scale, the rhythm, and letting exactly one section
 * (the failure chapter) take the full width on a dark ground. One loud
 * move, so it reads as the peak instead of competing with a second.
 */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #f5f1e4;
  --ink: #2c2e2a;
  --white: #ffffff;
  --sand: #e0dbce;
  --stone: #80827f;
  /* DESIGN.md's Stone Gray is 3.43:1 on the cream canvas, under the 4.5 AA
     needs for normal text, and PRODUCT.md asks for AA. This is the nearest
     tone of the same warm grey that clears it (4.63:1). Stone stays defined
     because it is the brand token; text uses this. Worth fixing in
     DESIGN.md too: the sheet flags the green as failing for text but not
     this. */
  --muted: #6b6d68;
  --hair: #d5d5d4;
  --grass: #8ed462;
  --coral: #ff705d;
  --sun: #f5e211;
  --sky: #2ba0ff;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid, ≥1.25 between steps. A flat scale is what "weak typography"
     actually means most of the time. */
  --t-hero: clamp(3.1rem, 11.5vw, 9.5rem);
  --t-chapter: clamp(1.8rem, 4.2vw, 3.1rem);
  --t-numeral: clamp(2.6rem, 7vw, 5.2rem);
  --t-lede: clamp(1.06rem, 1.5vw, 1.3rem);
  --t-body: 1rem;
  --t-micro: 0.8rem;

  --rail: 168px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 60ch;

  /* DESIGN.md's canonical names. tools.css is written against these, and it
     is the sheet that styles the calculator, so this file has to speak both
     vocabularies for the tools page to drop styles.css. Same values, no
     second source of truth · the short names above are the aliases, these
     are what the design system actually calls them. */
  --color-cream-paper: var(--cream);
  --color-ink-black: var(--ink);
  --color-pure-white: var(--white);
  --color-pure-ink: #000000;
  --color-sandstone: var(--sand);
  --color-stone-gray: var(--muted);
  --color-hairline-mist: var(--hair);
  --color-fresh-grass: var(--grass);
  --color-coral-pop: var(--coral);
  --color-sunshine-pop: var(--sun);
  --color-sky-pop: var(--sky);

  --font-inter: var(--font);
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --text-body-sm: 0.9375rem;
  --leading-body-sm: 1.5;
  --text-body-lg: 1.125rem;
  --leading-body-lg: 1.5;
  --text-subheading: 1.25rem;
  --text-heading-sm: 1.875rem;

  --text-heading-lg: clamp(2.6rem, 6vw, 4.4rem);
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -0.05em;

  --radius-buttons: 50px;
  /* DESIGN.md says 50px for cards, and that is right for the sticker-soft
     surfaces it was written for. A 50px corner on a dense calculator panel
     is not soft, it is a wasted 50px of the panel's own edge. The home page
     already draws the line the same way: pills stay fully round, plates are
     nearly square. */
  --radius-cards: 20px;
  --radius-small: 10px;
  --radius-2xl: 20px;
  --spacing-20: 20px;
  --section-gap: clamp(52px, 8vw, 104px);
  --page-max-width: 1160px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
dl,
dd,
figure,
table {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

button,
input {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  z-index: 10;
}

.skip:focus {
  left: 8px;
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- head */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--gut);
  border-bottom: 1px solid var(--hair);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mastnav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  font-size: var(--t-micro);
}

.mastnav a {
  color: var(--muted);
}

.mastnav a:hover {
  color: var(--ink);
}

.mastcta {
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 50px;
  color: var(--ink) !important;
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mastcta:hover {
  background: var(--ink);
  color: var(--cream) !important;
}

@media (max-width: 620px) {
  .mastnav a:not(.mastcta) {
    display: none;
  }
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding: clamp(56px, 11vw, 132px) var(--gut) clamp(40px, 7vw, 80px);
}

.hero-kicker {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vw, 34px);
}

/* The signature move of the existing system: Inter pushed to display scale
   with tracking pulled hard in. The old page set it at 53px, which is why it
   read as a subtitle rather than a headline. */
.hero-headline {
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
  max-width: 14ch;
}

.hero-headline-quiet {
  color: var(--muted);
}

.hero-sub {
  margin-top: clamp(24px, 3.5vw, 40px);
  max-width: var(--measure);
  font-size: var(--t-lede);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* DESIGN.md's own CTA pattern: a small chromatic circle inside the button as
   the action affordance. This is where the yellow belongs · one dot, not a
   field. */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 15px 30px;
  border-radius: 50px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 500;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-solid:hover {
  transform: translateY(-2px);
}

.btn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sun);
  flex: none;
}

.btn-quiet {
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.btn-quiet:hover {
  color: var(--ink);
  border-color: var(--muted);
}

/* Front matter, the way a manual states its specifications before it starts
   explaining anything. */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 7vw, 88px);
  background: var(--hair);
  border: 1px solid var(--hair);
}

.spec > div {
  background: var(--cream);
  padding: 18px 20px;
}

.spec dt {
  font-size: var(--t-micro);
  color: var(--muted);
  margin-bottom: 6px;
}

.spec dd {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ chapters */

.chapter {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(52px, 8vw, 104px) var(--gut);
  border-top: 1px solid var(--hair);
}

.chapter-rail {
  position: sticky;
  top: 28px;
  align-self: start;
}

.chapter-num {
  display: block;
  font-size: var(--t-numeral);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}

.chapter-title {
  margin-top: 12px;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.chapter-body {
  max-width: 68ch;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  max-width: var(--measure);
}

.lede + .lede {
  margin-top: 1.1em;
}

.chapter-body > .lede + .fig,
.chapter-body > .lede + .ledger,
.chapter-body > .lede + .rate {
  margin-top: clamp(28px, 4vw, 44px);
}

/* The one section on a dark ground. Volunteering the failure modes is the
   page's strongest move, so it gets the page's strongest contrast. */
.chapter-dark {
  background: var(--ink);
  color: var(--cream);
  border-top-color: var(--ink);
}

.chapter-dark .chapter-num {
  color: #4a4d47;
}

.chapter-dark .chapter-title,
.chapter-dark .ledger-v {
  color: #a9aca5;
}

.chapter-dark .ledger li {
  border-top-color: #43463f;
}

/* Definition rows. Not cards: a manual lists, it does not tile. */
.ledger li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
}

.ledger li:last-child {
  border-bottom: 1px solid var(--hair);
}

.chapter-dark .ledger li:last-child {
  border-bottom-color: #43463f;
}

.ledger-k {
  font-weight: 500;
}

.ledger-v {
  color: var(--muted);
}

@media (max-width: 700px) {
  .ledger li {
    grid-template-columns: 1fr;
  }
}

/* Rate table. Figures are tabular so the column reads as a column. */
.rate {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rate th,
.rate td {
  padding: 15px 0;
  border-top: 1px solid var(--hair);
  text-align: left;
  font-weight: 400;
}

.rate tr:last-child th,
.rate tr:last-child td {
  border-bottom: 1px solid var(--hair);
}

.rate td {
  text-align: right;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  letter-spacing: -0.02em;
}

.rate-wide td {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  letter-spacing: -0.035em;
}

.rate + .lede {
  margin-top: clamp(22px, 3vw, 32px);
  color: var(--muted);
  font-size: var(--t-body);
}

/* ------------------------------------------------------- range figure */

.fig {
  border: 1px solid var(--ink);
  background: var(--white);
}

.fig-frame {
  position: relative;
  padding: 26px 22px 10px;
}

.fig-svg {
  width: 100%;
  height: 148px;
}

.fig-out {
  fill: var(--sand);
}

.fig-band {
  fill: var(--grass);
  transition: x 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fig-edge {
  stroke: var(--ink);
  stroke-width: 2;
  transition: x1 260ms cubic-bezier(0.22, 1, 0.36, 1), x2 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fig-price {
  stroke: var(--ink);
  stroke-width: 3;
}

[data-state='out'] .fig-price {
  stroke: var(--coral);
}

[data-state='out'] .fig-band {
  fill: var(--sand);
}

/* The scrubber sits over the drawing: the price line is the thumb, so the
   thing you drag and the thing that moves are the same object. */
.fig-scrub {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 4px;
  width: calc(100% - 44px);
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.fig-scrub::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--hair);
  border-radius: 2px;
}

.fig-scrub::-moz-range-track {
  height: 4px;
  background: var(--hair);
  border-radius: 2px;
}

.fig-scrub::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--white);
}

.fig-scrub::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--white);
}

.fig-read {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  padding: 16px 22px;
  border-top: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}

.fig-state {
  font-weight: 500;
}

[data-state='out'] .fig-state {
  color: color-mix(in srgb, var(--coral) 84%, var(--ink));
}

.fig-split b,
.fig-price-read b {
  font-weight: 500;
}

.fig-sep {
  color: var(--hair);
}

.fig-price-read {
  margin-left: auto;
  color: var(--muted);
}

.fig-widths {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 14px 22px;
  border: 0;
  border-top: 1px solid var(--hair);
}

.fig-widths input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fig-widths span {
  display: block;
  padding: 7px 15px;
  border: 1px solid var(--hair);
  border-radius: 50px;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fig-widths input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.fig-widths input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.fig-note {
  padding: 0 22px 18px;
  font-size: var(--t-micro);
  color: var(--muted);
  max-width: 56ch;
}

.after-fig {
  margin-top: clamp(22px, 3vw, 32px);
  color: var(--muted);
  max-width: var(--measure);
}

.after-fig a {
  color: var(--ink);
  border-bottom: 1px solid var(--muted);
}

/* --------------------------------------------------------------- proof */

.proof {
  margin-top: clamp(34px, 5vw, 56px);
}

.proof img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hair);
}

.proof figcaption {
  margin-top: 12px;
  font-size: var(--t-micro);
  color: var(--muted);
  max-width: 52ch;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--white);
  border: 1px solid var(--hair);
  padding: 2px 7px;
  border-radius: 5px;
}

/* -------------------------------------------------------------- closer */

/* This was a full-bleed yellow field. DESIGN.md calls that token "used
   sparingly for warmth and playfulness", and a wall of it was neither
   sparing nor the right note directly above a custody disclosure. The page
   already spends its one loud chromatic move on the failure chapter; a
   second shout only stops the first one reading as the peak.
   The close now carries its weight with scale and air, and the yellow
   survives where DESIGN.md actually puts it: a small circle inside the CTA. */
.closer {
  padding: clamp(72px, 13vw, 156px) var(--gut) clamp(56px, 9vw, 104px);
  border-top: 1px solid var(--hair);
}

.closer-head {
  font-size: clamp(2.3rem, 7.5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
  max-width: 16ch;
}

.closer .btn-solid {
  margin-top: clamp(30px, 4.5vw, 48px);
}

.closer-fine {
  margin-top: 24px;
  max-width: 48ch;
  font-size: var(--t-micro);
  color: var(--muted);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px var(--gut);
  font-size: var(--t-micro);
  color: var(--muted);
}

.foot nav {
  display: flex;
  gap: 22px;
}

.foot a:hover {
  color: var(--ink);
}

/* ----------------------------------------------------------- tools page */

/* tools.html dropped styles.css so it could take this file's chrome and
   tokens, but a handful of its classes were defined there and nowhere else.
   These are those, carried over rather than reinvented, so the calculator
   and the position viewer keep working exactly as they did. Verified by
   diffing the classes tools.html uses against both sheets. */

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 11px 22px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius-buttons);
  font-size: var(--t-micro);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-pill:hover {
  border-color: var(--ink);
}

.cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grass);
  flex: 0 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.stat-tile {
  border: 1px solid var(--hair);
  border-radius: var(--radius-small);
  padding: 14px 16px;
  background: var(--cream);
}

/* The tools are plates in the same manual: a hairline box on cream, squared
   off, not a floating rounded card. Overrides tools.css's white surface so
   the two pages read as one document. */
.tool-panel-surface {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius-cards);
}

.tools-headline {
  letter-spacing: var(--tracking-heading-lg);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .chapter-rail {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }

  .chapter-title {
    margin-top: 0;
  }
}