/* Orca Systems - long-form sales letter system ("Ledger" identity)
   A reusable block set for direct-response letters: pages A, B and C share this file and differ only in copy.

   Identity: a typeset letter from one hotelier to another, crossed with a precise product document.
   Source Serif 4 for the letter voice and display, Work Sans for UI and body, deep navy ink on warm paper,
   amber as the single accent. One corner radius (3px) for every rectangle; circles only for numbered hotspots.
   Light theme only, on purpose: it is a printed-letter metaphor, so it does not follow prefers-color-scheme.

   Layout vocabulary (children of <section class="lf-sec">):
     .lf-col   the reading column (about 40rem)         .lf-wide  breaks out for screens, charts, the offer
     .lf-mnote a margin note on desktop, an inline aside on phones
   Fonts are loaded by the page (Google Fonts <link>); stacks below fall back cleanly. */

:root {
  --paper: #F3F0E8;
  --paper-2: #E9E4D6;     /* plates, recessed areas */
  --paper-3: #FAF8F3;     /* raised: forms, dialogs, screens */
  --ink: #14213D;
  --ink-2: #2C3A57;
  --muted: #525E76;
  --rule: #D3CCBC;
  --rule-strong: #B9B19E;
  --amber: #E8A33D;        /* the one accent: fills */
  --amber-hover: #D8922A;
  --amber-deep: #8A5200;   /* the one accent: small text and strokes on paper */
  --err: #9A2B22;

  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 16px;
  --col: 40rem;
  --wide: 1120px;
  --radius: 3px;
  --bar-h: 56px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 0 rgba(20, 33, 61, .04), 0 22px 44px -26px rgba(20, 33, 61, .42);
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 88px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration-color: var(--amber-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); margin: 0; font-weight: 600; font-optical-sizing: auto; text-wrap: balance; line-height: 1.2; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 600; }
::selection { background: var(--amber); color: var(--ink); }
.nowrap { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.lf-on-ink :focus-visible, .lf-sticky :focus-visible, .lf-ann :focus-visible { outline-color: var(--amber); }

.lf-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 1000; border-radius: var(--radius); }
.lf-skip:focus { left: 12px; top: 12px; }
.lf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Page structure ---------- */
.lf-sec { padding: clamp(36px, 4.2vw, 60px) 0; position: relative; }
.lf-sec.lf-tight { padding: clamp(24px, 2.8vw, 40px) 0; }

/* ---------- Action row: one true line and one button that scrolls to the form (never a second ask) ---------- */
.lf-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: clamp(24px, 2.4vw, 32px); padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); }
.lf-act p { margin: 0; flex: 1 1 22rem; max-width: 40rem; font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.4; color: var(--ink); }
.lf-act .lf-btn { flex: none; }
@media (max-width: 520px) { .lf-act .lf-btn { width: 100%; } }
.lf-sec.lf-plate-bg { background: var(--paper-2); }
.lf-col { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
.lf-wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }

/* ---------- Letter typography ---------- */
.lf-letter p, .lf-letter li, .lf-serif {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.02rem + .38vw, 1.25rem);
  line-height: 1.62;
  color: var(--ink);
}
.lf-letter p { margin-bottom: 1.1em; }
.lf-letter p.lf-q { font-style: italic; }
.lf-letter p.lf-nod { font-weight: 600; margin-top: 1.4em; }
.lf-letter p.lf-pull { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); font-style: italic; font-weight: 500; line-height: 1.3; padding: .2rem 0 .2rem 1.1rem; margin: 1.6em 0; border-left: 4px solid var(--amber); color: var(--ink); text-wrap: balance; }
.lf-lede { font-family: var(--serif); font-size: clamp(1.2rem, 1.08rem + .6vw, 1.45rem); line-height: 1.5; color: var(--ink-2); }
.lf-h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.012em; margin-bottom: .55em; }
.lf-h3 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.2; margin-bottom: .4em; }
.lf-eyebrow { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin: 0 0 1.1rem; }
.lf-runin { font-family: var(--sans); font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .07em; font-size: .92em; color: var(--ink); margin-right: .15em; }
.lf-dropcap > p:first-child::first-letter,
p.lf-dropcap::first-letter {
  float: left; font-family: var(--serif); font-weight: 600; font-size: 4.3em; line-height: .8;
  padding: .06em .09em 0 0; color: var(--amber-deep);
}
.lf-dateline { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.lf-salute { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ink-2); margin: 0 0 1.3rem; }
.lf-small { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.lf-num { font-variant-numeric: lining-nums tabular-nums; }
.lf-rule { border: 0; border-top: 1px solid var(--rule-strong); margin: 0; }
.lf-ink-link { font-weight: 600; }

/* Margin notes: right margin on wide screens, quiet inline aside elsewhere */
.lf-mnote {
  margin: 1.4rem 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--amber);
  font-family: var(--sans); font-size: .875rem; line-height: 1.5; color: var(--muted); max-width: 30rem;
}
.lf-mnote b { color: var(--ink); }
@media (min-width: 1300px) {
  .lf-mnote { position: absolute; left: calc(100% + 44px); width: 210px; margin: 0; top: var(--note-top, .35rem); }
}

/* Hand-drawn feeling stroke (SVG, used twice on the page) */
.lf-scribble { position: relative; display: inline-block; }
.lf-scribble svg { position: absolute; left: 0; bottom: -.2em; width: 100%; height: .34em; overflow: visible; pointer-events: none; }
.lf-scribble path { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .15s; }
.lf-motion .lf-scribble:not(.is-drawn) path { stroke-dashoffset: 1; }

/* ---------- Buttons ---------- */
.lf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font: 600 .95rem/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms ease, color 160ms ease;
}
.lf-btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.lf-btn:active { transform: translateY(1px) scale(.99); }
.lf-btn-primary { background: var(--amber); color: var(--ink); }
.lf-btn-primary:hover { background: var(--amber-hover); color: var(--ink); box-shadow: 0 10px 22px -12px rgba(20, 33, 61, .55); transform: translateY(-1px); }
.lf-btn-block { width: 100%; }
.lf-btn[disabled] { opacity: .55; cursor: not-allowed; }
.lf-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lf-textlink { font-weight: 600; color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2.5px; }
.lf-textlink:hover { text-decoration-color: var(--amber-deep); }

/* ---------- Announcement bar (section 0) ---------- */
.lf-ann { background: var(--ink); color: var(--paper); font-size: .8125rem; line-height: 1.4; }
.lf-ann-in { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; padding: 9px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: center; text-align: center; }
.lf-ann a { color: var(--paper); }
.lf-ann .lf-clock { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }
.lf-tag-preview { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: 2px 8px; border-radius: var(--radius); }

/* ---------- Header (section 1) ---------- */
.lf-header { background: var(--paper); border-bottom: 1px solid var(--rule-strong); }
.lf-header-in { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 66px; display: flex; align-items: center; gap: 28px; }
.lf-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; }
.lf-brand img { width: 26px; height: 26px; }
.lf-nav { display: none; gap: 26px; }
.lf-nav a { font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 8px 0; }
.lf-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
@media (min-width: 900px) { .lf-nav { display: flex; } }
.lf-header .lf-btn { min-height: 44px; padding: 0 18px; font-size: .88rem; }
@media (max-width: 420px) { .lf-header .lf-btn { padding: 0 12px; font-size: .8rem; } .lf-brand { font-size: 1.05rem; } .lf-brand img { width: 22px; height: 22px; } }
.lf-sm { display: none; }
@media (max-width: 359px) { .lf-header .lf-lg { display: none; } .lf-header .lf-sm { display: inline; } .lf-header-in { gap: 12px; } }

/* ---------- Art bands: an illustration under a dark scrim, text on top (hero, July 2026, the harbor) ---------- */
.lf-art { position: relative; isolation: isolate; overflow: hidden; background: #0B1226; color: var(--paper); }
.lf-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(1.18) saturate(1.05); }
.lf-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 13, 28, .86) 0%, rgba(8, 13, 28, .6) 45%, rgba(8, 13, 28, .2) 100%); }
.lf-art h1, .lf-art h2, .lf-art h3 { color: var(--paper); }
.lf-art .lf-eyebrow { color: var(--amber); }
.lf-art ::selection { background: var(--amber); color: var(--ink); }
.lf-art :focus-visible { outline-color: var(--amber); }
.lf-art .lf-scribble path { stroke: var(--amber); }
.lf-band-copy { padding: clamp(48px, 7vw, 100px) 0; max-width: var(--wide); }
.lf-band-copy > * { max-width: 40rem; }
.lf-band-dawn::before { background: linear-gradient(90deg, rgba(8, 13, 28, .9) 0%, rgba(8, 13, 28, .66) 50%, rgba(8, 13, 28, .22) 100%); }
.lf-band-harbor::before { background: linear-gradient(180deg, rgba(8, 13, 28, .55) 0%, rgba(8, 13, 28, .72) 100%); }
.lf-band-harbor .lf-band-copy > * { max-width: 36rem; }
.lf-band-harbor .lf-band-copy { text-align: left; }

/* ---------- Story type: big beats, plain sentences ---------- */
.lf-display { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.1rem); line-height: 1.06; letter-spacing: -.022em; font-weight: 600; margin: 0 0 .5em; text-wrap: balance; }
.lf-display-sm { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.lf-letter p.lf-big, p.lf-big { font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); line-height: 1.38; color: inherit; margin: 0 0 .9em; max-width: 40rem; }
.lf-art p.lf-big { color: #EDE9DE; }
.lf-letter p.lf-big { color: var(--ink); }
.lf-bigline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.2; margin: .4em 0 0; padding-left: 1.1rem; border-left: 4px solid var(--amber); max-width: 36rem; }
.lf-dropcap::first-letter { font-size: 3.6em; }
.lf-waits { list-style: none; display: grid; gap: 0; margin: 28px 0 32px; border-top: 2px solid var(--ink); }
.lf-waits li { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); line-height: 1.2; font-weight: 500; padding: clamp(16px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--rule-strong); max-width: 48rem; }
.lf-waits li::before { content: ''; display: inline-block; width: .55em; height: 3px; background: var(--amber); vertical-align: .32em; margin-right: .5em; }
.lf-after-waits { margin-top: 1em; }
.lf-rise { transition: transform 700ms var(--ease); }

/* ---------- The five rules ---------- */
.lf-rules { list-style: none; counter-reset: rule; display: grid; gap: 0; margin-top: 12px; border-top: 2px solid var(--ink); }
.lf-rules li { counter-increment: rule; display: grid; gap: 4px 36px; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--rule-strong); grid-template-columns: minmax(0, 1fr); position: relative; }
.lf-rules h3 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem); line-height: 1.15; margin: 0 0 6px; }
.lf-rules h3::before { content: counter(rule); display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .5em; border: 2px solid var(--ink); border-radius: 50%; background: var(--amber); font: 700 .6em/1 var(--sans); vertical-align: .28em; }
.lf-rules p { font-size: 1.08rem; color: var(--ink-2); margin: 0 0 .5em; max-width: 36rem; }
.lf-rules .lf-proof { font-size: .95rem; color: var(--muted); padding-left: 14px; border-left: 2px solid var(--amber); margin-top: .6em; }
.lf-rules .lf-proof b { color: var(--ink); }
@media (min-width: 900px) {
  .lf-rules li { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .lf-rules li > h3 { grid-column: 1; }
  .lf-rules li > p:nth-of-type(1) { grid-column: 1; }
  .lf-rules li > .lf-proof { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
}

/* ---------- Hero (sections 2 to 5) ---------- */
.lf-hero { padding: 0; min-height: min(88dvh, 780px); display: flex; align-items: center; }
.lf-hero-in { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 32px 48px; grid-template-columns: minmax(0, 1fr); padding: clamp(40px, 6vw, 88px) 0; }
.lf-hero h1 { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.024em; font-weight: 600; max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(8, 13, 28, .55); }
.lf-hero .lf-scribble { margin-bottom: .1em; }
.lf-hero h1 { margin: 0 0 .4em; }
.lf-hero-sub { text-wrap: pretty; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.42; color: #E6E1D4; max-width: 30rem; margin: 0 0 1.6rem; }
.lf-hero-fig { margin: 0; min-width: 0; }
.lf-hero .lf-hero-cap { font-size: .84rem; color: #D5D9E3; line-height: 1.45; margin: 12px 0 0; max-width: 34rem; }
.lf-btn-light { color: var(--paper); border-color: rgba(243, 240, 232, .75); }
.lf-btn-light:hover { background: var(--paper); color: var(--ink); }
@media (min-width: 1000px) {
  .lf-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .lf-hero h1 { max-width: 20ch; }
}
@media (max-width: 999px) { .lf-art::before { background: linear-gradient(180deg, rgba(8, 13, 28, .86), rgba(8, 13, 28, .78)); } }

/* Hero entrance: pure CSS so nothing waits for a script. */
@media (prefers-reduced-motion: no-preference) {
  .lf-hero .lf-eyebrow, .lf-hero h1, .lf-hero-sub, .lf-hero .lf-btn-row, .lf-hero-fig { animation: lf-in 820ms var(--ease) both; }
  .lf-hero h1 { animation-delay: 70ms; }
  .lf-hero-sub { animation-delay: 160ms; }
  .lf-hero .lf-btn-row { animation-delay: 240ms; }
  .lf-hero-fig { animation-delay: 300ms; }
}
@keyframes lf-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Plates and screens ---------- */
.lf-plate { background: var(--paper-3); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.lf-fig { margin: 0; }
.lf-fig figcaption { padding: 14px 4px 0; font-size: .9rem; color: var(--muted); line-height: 1.5; max-width: 46rem; }
.lf-fig figcaption b { color: var(--ink); }
.lf-shotframe { background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.lf-shotframe a.zoomable { color: var(--muted); }
a.zoomable:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.zoom-hint { background: var(--paper-2); }
/* --w/--h: visible box in source pixels; --iw: full image width; --ox/--oy: crop offset (all source pixels) */
.shot { position: relative; display: block; aspect-ratio: var(--w) / var(--h); background: #fff; overflow: hidden; }
.shot img { position: absolute; max-width: none; height: auto; width: calc(var(--iw, var(--w)) / var(--w) * 100%); left: calc(var(--ox, 0) / var(--w) * -100%); top: calc(var(--oy, 0) / var(--h) * -100%); }
.hs {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--x) / var(--w) * 100%); top: calc(var(--y) / var(--h) * 100%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .8rem/1 var(--sans); font-style: normal;
  background: var(--amber); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .4);
  transition: transform 220ms var(--ease), box-shadow 220ms ease;
}
.hs.is-on { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(232, 163, 61, .55); }
.lf-motion .lf-fig:not(.is-in) .hs { transform: scale(.6); }
@media (max-width: 719px) {
  .lf-shotframe a.zoomable.is-scroll { overflow-x: auto; }
  .lf-shotframe a.zoomable.is-scroll .shot { min-width: 640px; }
  .lf-shotframe a.zoomable.is-scroll .zoom-hint { position: sticky; left: 0; width: calc(100vw - 2 * var(--gutter) - 2px); }
}
ol.lf-legend { list-style: none; counter-reset: hs; display: grid; gap: 14px; }
ol.lf-legend li { counter-increment: hs; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .94rem; line-height: 1.5; color: var(--muted); }
ol.lf-legend li::before {
  content: counter(hs); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--amber); color: var(--ink); font: 700 .8rem/1 var(--sans);
  transition: transform 180ms var(--ease);
}
ol.lf-legend li strong { color: var(--ink); font-weight: 600; }
ol.lf-legend li.is-on::before { transform: scale(1.18); }
.lf-legend-cols ol.lf-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 960px) { .lf-legend-cols ol.lf-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lf-legend-cols ol.lf-legend { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Section 6: who it is for ---------- */
.lf-fit { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--ink); }
.lf-fit > div { padding: 24px 0 8px; }
.lf-fit h3 { font-size: 1.35rem; margin-bottom: 14px; }
.lf-fit ul { list-style: none; display: grid; gap: 14px; }
.lf-fit li { font-size: 1.02rem; line-height: 1.5; padding-left: 18px; border-left: 2px solid var(--rule-strong); color: var(--ink-2); }
.lf-fit .lf-yes li { border-left-color: var(--amber); }
@media (min-width: 860px) {
  .lf-fit { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 64px; }
}

/* ---------- Section 8: the problem named ---------- */
.lf-entries { margin-top: 12px; }
.lf-entry { display: grid; gap: 8px 40px; padding: 28px 0; border-top: 1px solid var(--rule-strong); grid-template-columns: minmax(0, 1fr); }
.lf-entry:last-child { border-bottom: 1px solid var(--rule-strong); }
.lf-entry h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); font-style: italic; font-weight: 500; line-height: 1.15; }
.lf-entry p { font-size: 1.05rem; color: var(--ink-2); max-width: 38rem; margin: 0; }
.lf-entry p + p { margin-top: .7em; }
@media (min-width: 860px) { .lf-entry { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.lf-motion .lf-entry:not(.is-in), .lf-motion .lf-rise:not(.is-in) { transform: translateY(18px); }
.lf-entry, .lf-rise { transition: transform 700ms var(--ease); }

/* ---------- Calculators ---------- */
.lf-calc { display: grid; gap: 28px; padding: clamp(20px, 3vw, 36px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .lf-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.lf-field { display: grid; gap: 6px; margin: 0 0 16px; }
.lf-field label, .lf-legend-label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.lf-field .lf-hint { font-size: .8125rem; color: var(--muted); }
.lf-input, .lf-field input[type="text"], .lf-field input[type="email"], .lf-field input[type="tel"], .lf-field input[type="number"], .lf-field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.lf-field textarea { min-height: 112px; resize: vertical; }
.lf-input:focus, .lf-field input:focus, .lf-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232, 163, 61, .55); }
.lf-input::placeholder, .lf-field input::placeholder, .lf-field textarea::placeholder { color: #6B7388; opacity: 1; }
.lf-result { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-top: 4px; }
.lf-bignum { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.lf-result .lf-unit { font-size: .95rem; color: var(--muted); margin: 0 0 14px; }
.lf-result dl { margin: 0; display: grid; gap: 8px; }
.lf-result dl > div { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .95rem; }
.lf-result dt { color: var(--muted); }
.lf-result dd { margin: 0; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.lf-fold { margin-top: 6px; border-top: 1px solid var(--rule); padding-top: 12px; }
.lf-fold summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: 6px 0; }
html:not(.js) .js-only { display: none; }
.js .no-js-only { display: none; }

/* ---------- Section 12/13: the Rehearsal Cutover ---------- */
.lf-flow { counter-reset: flow; list-style: none; display: grid; gap: 0; position: relative; }
.lf-flow li { position: relative; padding: 0 0 28px 44px; }
.lf-flow li::before { content: ''; position: absolute; left: 11px; top: 28px; bottom: 0; width: 2px; background: var(--rule-strong); }
.lf-flow li:last-child::before { display: none; }
.lf-flow li::after {
  content: counter(flow); counter-increment: flow; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--ink); display: grid; place-items: center; font: 700 .72rem/1 var(--sans); color: var(--ink);
}
.lf-flow h3 { font-size: 1.35rem; margin-bottom: 6px; }
.lf-flow p { font-size: 1rem; color: var(--ink-2); margin: 0; max-width: 34rem; }
.lf-timeline { display: none; }
.lf-flow.is-scrubbed li::after { background: var(--paper-3); transition: background-color 300ms ease; }
.lf-flow.is-scrubbed li.is-passed::after { background: var(--amber); }
@media (min-width: 900px) {
  .lf-flow.is-scrubbed::before { content: ''; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--amber); transform-origin: left center; transform: scaleX(var(--p, 0)); z-index: 1; }
  .lf-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); padding-top: 0; }
  .lf-flow li { padding: 26px 0 0 0; }
  .lf-flow li::before { display: none; }
  .lf-flow li::after { left: 0; top: -13px; }
  .lf-flow h3 { font-size: 1.3rem; }
  .lf-flow p { font-size: .95rem; }
  .lf-timeline { display: block; margin-top: 44px; }
}
.lf-tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; align-items: center; margin-bottom: 10px; }
.lf-tl-label { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.lf-bar { height: 22px; border-radius: var(--radius); display: flex; align-items: center; padding: 0 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; transform-origin: left center; }
.lf-bar-old { background: var(--ink); color: var(--paper); grid-column: 1 / 5; }
.lf-bar-practice { background: repeating-linear-gradient(135deg, var(--paper-3) 0 6px, #DCD5C0 6px 12px); border: 1.5px solid var(--ink); color: var(--ink); grid-column: 2 / 5; }
.lf-bar-new { background: var(--amber); border: 1.5px solid var(--ink); color: var(--ink); grid-column: 5 / 6; }
.lf-tl-note { font-size: .84rem; color: var(--muted); margin: 8px 0 0; max-width: 42rem; }

/* ---------- Section 14: screens ---------- */
.lf-screen { margin-top: clamp(36px, 4.5vw, 56px); }
.lf-screen-head { max-width: 40rem; margin-bottom: 18px; }
.lf-screen-head h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.2; margin-bottom: 8px; }
.lf-screen-head p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
.lf-screen-body { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .lf-screen-body.lf-side { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; }
  .lf-screen-body.lf-side-narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 56px; }
  .lf-screen-body .lf-sticky-legend { position: sticky; top: 100px; }
}
.lf-link-step { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 8px; }

/* ---------- Section 15: walkthrough placeholder ---------- */
.lf-video { position: relative; aspect-ratio: 5 / 2; background: var(--ink); color: var(--paper); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 24px; overflow: hidden; box-shadow: var(--shadow); }
.lf-video::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(243, 240, 232, .22); border-radius: 2px; pointer-events: none; }
.lf-video-inner { max-width: 34rem; position: relative; }
.lf-video h3 { color: var(--paper); font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); margin-bottom: 10px; }
.lf-video p { color: #D9DEE9; margin: 0 0 18px; font-size: 1rem; }
.lf-play { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(243, 240, 232, .55); display: grid; place-items: center; margin: 0 auto 16px; }
.lf-play::after { content: ''; width: 0; height: 0; border-left: 15px solid rgba(243, 240, 232, .55); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
@media (max-width: 560px) { .lf-video { aspect-ratio: auto; min-height: 300px; } }

/* ---------- Section 16: the real hotel ---------- */
.lf-facts { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); padding: clamp(22px, 3.2vw, 40px); }
.lf-facts-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.12; margin-bottom: 8px; }
.lf-facts dl { margin: 0; display: grid; gap: 0; }
.lf-facts dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.lf-facts dt { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.lf-facts dd { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; }
@media (min-width: 900px) { .lf-facts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
@media (max-width: 480px) { .lf-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Section 18: voices ---------- */
.lf-sample-note { padding: 16px 20px; background: var(--paper-2); border-left: 3px solid var(--ink); font-size: 1rem; margin: 0 0 32px; color: var(--ink); }
.lf-slips { display: grid; gap: 0; }
.lf-slip { display: grid; gap: 10px 32px; padding: 20px 0; border-top: 1px solid var(--rule-strong); grid-template-columns: minmax(0, 1fr); }
.lf-slip:last-child { border-bottom: 1px solid var(--rule-strong); }
.lf-slip blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.02rem + .38vw, 1.25rem); line-height: 1.55; font-style: italic; color: var(--ink-2); }
.lf-slip footer { font-size: .88rem; color: var(--muted); }
.lf-slip footer b { display: block; color: var(--ink); font-weight: 600; }
.lf-sample-label { display: inline-block; margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink); padding: 2px 8px; border-radius: var(--radius); background: var(--paper-3); }
@media (min-width: 760px) { .lf-slip { grid-template-columns: minmax(0, 1fr) 13rem; } .lf-slip footer { order: 2; padding-top: 34px; } }

/* ---------- Extra: seven things to confirm ---------- */
.lf-seven { list-style: none; counter-reset: sev; display: grid; gap: 0; margin-top: 8px; }
.lf-seven li { counter-increment: sev; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; }
.lf-seven li::before { content: counter(sev); font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.05; color: var(--amber-deep); font-variant-numeric: lining-nums; }
.lf-seven li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- Section 19: mid band ---------- */
.lf-band { display: grid; gap: 28px 56px; padding: clamp(24px, 4vw, 48px); border-top: 3px solid var(--ink); border-radius: 0; }
.lf-band h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.12; margin-bottom: 10px; }
.lf-band p { color: var(--ink-2); max-width: 36rem; }
@media (min-width: 900px) { .lf-band { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; } }
.lf-door-stack { display: grid; gap: 12px; }
.lf-door-stack .lf-btn { width: 100%; }

/* ---------- Section 20: what I will not tell you ---------- */
.lf-notyet { padding: clamp(24px, 4vw, 56px); background: var(--paper-3); border: 1.5px solid var(--ink); border-radius: var(--radius); }
.lf-nots { margin: 18px 0 0; display: grid; gap: 0; }
.lf-nots > div { display: grid; gap: 4px 40px; padding: 14px 0; border-top: 1px solid var(--rule-strong); grid-template-columns: minmax(0, 1fr); }
.lf-nots dt { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); font-weight: 600; line-height: 1.22; }
.lf-nots dd { margin: 0; font-size: 1.05rem; color: var(--ink-2); max-width: 34rem; }
@media (min-width: 860px) { .lf-nots > div { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: baseline; } }

/* ---------- Section 21: the statement ---------- */
.lf-statement { padding: clamp(20px, 3.4vw, 44px); }
.lf-statement-title { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 4px; }
.lf-statement-title span { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lf-items { list-style: none; }
.lf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.lf-item:last-child { border-bottom: 0; }
.lf-item h3 { font-size: 1.22rem; font-weight: 600; }
.lf-item p { grid-column: 1; margin: 2px 0 0; font-size: .95rem; color: var(--ink-2); max-width: 40rem; }
.lf-item .lf-val { grid-column: 2; grid-row: 1; font-weight: 600; font-size: .92rem; text-align: right; white-space: nowrap; color: var(--ink); }
.lf-item .lf-val.lf-val-amber { color: var(--amber-deep); }
@media (max-width: 560px) { .lf-item { grid-template-columns: minmax(0, 1fr); } .lf-item .lf-val { grid-column: 1; grid-row: auto; text-align: left; margin-top: 2px; } }

/* ---------- Section 22/23: price ---------- */
.lf-price-top { display: grid; gap: 28px; padding: clamp(20px, 3.4vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .lf-price-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.lf-rooms { display: flex; align-items: stretch; gap: 0; max-width: 20rem; }
.lf-rooms input { border-radius: var(--radius); font-size: 1.6rem; font-family: var(--serif); font-weight: 600; min-height: 60px; padding: 8px 16px; font-variant-numeric: lining-nums; }
.lf-formula { font-size: .95rem; color: var(--ink-2); margin: 14px 0 0; max-width: 32rem; }
.lf-price-body { display: grid; gap: 32px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .lf-price-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.lf-chart { padding: 20px 16px 8px; }
.lf-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.lf-chart .grid { stroke: var(--rule); stroke-width: 1; }
.lf-chart .axis { stroke: var(--ink); stroke-width: 1.5; }
.lf-chart text { font-family: var(--sans); fill: var(--muted); font-size: 13px; }
.lf-chart .line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lf-chart .area { fill: rgba(232, 163, 61, .16); stroke: none; }
.lf-chart .seg-label { fill: var(--ink); font-weight: 600; font-size: 14px; }
.lf-chart .mark { fill: var(--amber); stroke: var(--ink); stroke-width: 2; }
.lf-chart .mark-ri { fill: var(--paper-3); stroke: var(--ink); stroke-width: 2; }
.lf-chart .tick { fill: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) {
  .lf-chart { padding: 14px 8px 4px; }
  .lf-chart text { font-size: 19px; }
  .lf-chart .seg-label { font-size: 20px; }
  .lf-chart .tick { font-size: 18px; }
}
.lf-chart-cap { padding: 4px 8px 14px; font-size: .84rem; color: var(--muted); }
.lf-table-wrap { overflow-x: auto; }
table.lf-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; font-size: .95rem; }
.lf-table caption { text-align: left; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; padding: 0 0 10px; color: var(--ink); }
.lf-table th { white-space: nowrap; text-align: left; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 2px solid var(--ink); }
.lf-table th.r, .lf-table td.r { text-align: right; }
.lf-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lf-table td.lf-how { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.lf-table tr.is-ri td { font-weight: 600; background: rgba(232, 163, 61, .16); }
.lf-table tr.is-hit td { background: rgba(232, 163, 61, .3); }
.lf-incl { display: grid; gap: 24px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .lf-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.lf-incl h3 { font-size: 1.15rem; margin-bottom: 8px; }
.lf-incl p { font-size: .98rem; color: var(--ink-2); margin: 0; }
.lf-context { font-family: var(--serif); }
.lf-context .lf-sum { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); line-height: 1.35; }
.lf-context .lf-sum b { font-variant-numeric: lining-nums; }

/* ---------- Section 24: founding offer ---------- */
.lf-offer { position: relative; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-3); box-shadow: var(--shadow); }
.lf-offer-ribbon { display: block; background: var(--amber); color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 20px; border-bottom: 2px solid var(--ink); }
.lf-offer-in { display: grid; gap: 28px 56px; padding: clamp(22px, 3.6vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .lf-offer-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.lf-offer h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.1; margin-bottom: 14px; }
.lf-terms { list-style: none; display: grid; gap: 10px; margin: 16px 0; }
.lf-terms li { font-size: 1rem; line-height: 1.5; padding-left: 16px; border-left: 2px solid var(--amber); }
.lf-clockbox { background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 22px; align-self: start; }
.lf-clock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; text-align: center; }
.lf-clock-grid div { background: var(--paper-3); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 10px 2px 8px; }
.lf-clock-grid b { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.lf-clock-grid span { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lf-slots { display: flex; gap: 6px; margin: 8px 0 6px; flex-wrap: wrap; }
.lf-slots i { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: var(--radius); display: block; }
.lf-slots i.is-taken { background: var(--ink); }
.lf-closes { font-size: .95rem; line-height: 1.45; margin: 0 0 8px; }
.lf-closes b { font-weight: 600; }
.lf-offer-closed { padding: clamp(24px, 4vw, 48px); }

/* ---------- Section 25: risk reversal ---------- */
.lf-promises { display: grid; gap: 0 56px; margin-top: 8px; grid-template-columns: minmax(0, 1fr); }
.lf-promise { padding: 22px 0; border-top: 1px solid var(--rule-strong); }
.lf-promise:last-child { border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 760px) {
  .lf-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-promise:nth-last-child(2) { border-bottom: 1px solid var(--rule-strong); }
}
.lf-promise h3 { font-size: 1.4rem; margin-bottom: 6px; }
.lf-promise p { font-size: 1.02rem; color: var(--ink-2); margin: 0; }

/* ---------- Section 26: enclosures ---------- */
.lf-encl { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.lf-encl a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 22px 0; border-top: 1.5px solid var(--ink); text-decoration: none; color: var(--ink); align-items: baseline; transition: background-color 160ms ease, padding 200ms var(--ease); }
.lf-encl a:last-child { border-bottom: 1.5px solid var(--ink); }
.lf-encl a:hover { background: rgba(232, 163, 61, .16); padding-left: 10px; padding-right: 10px; }
.lf-encl h3 { font-size: 1.35rem; }
.lf-encl p { grid-column: 1; margin: 4px 0 0; font-size: .98rem; color: var(--ink-2); max-width: 36rem; }
.lf-encl .lf-go { grid-column: 2; grid-row: 1; font-weight: 600; font-size: .9rem; color: var(--amber-deep); white-space: nowrap; }
.lf-encl .lf-go::after { content: ' \2192'; }
@media (max-width: 560px) { .lf-encl a { grid-template-columns: minmax(0, 1fr); } .lf-encl .lf-go { grid-column: 1; grid-row: auto; margin-top: 6px; } }

/* ---------- Section 27: request ---------- */
.lf-request { display: grid; gap: 40px 64px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .lf-request { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.lf-next { list-style: none; counter-reset: nx; display: grid; gap: 0; margin: 22px 0 0; }
.lf-next li { counter-increment: nx; position: relative; padding: 0 0 20px 44px; font-size: 1.02rem; color: var(--ink-2); }
.lf-next li::before { content: counter(nx); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: var(--amber); display: grid; place-items: center; font: 700 .8rem/1 var(--sans); color: var(--ink); }
.lf-next li::after { content: ''; position: absolute; left: 12px; top: 30px; bottom: 4px; width: 2px; background: var(--rule-strong); }
.lf-next li:last-child::after { display: none; }
.lf-form { padding: clamp(20px, 3vw, 36px); scroll-margin-top: 90px; }
.lf-form h3 { font-size: 1.4rem; margin-bottom: 4px; }
.lf-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.lf-route legend { padding: 0; font-size: .86rem; font-weight: 600; margin-bottom: 8px; }
.lf-route label { position: relative; display: block; cursor: pointer; }
.lf-route input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.lf-route span { display: block; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: #fff; font-weight: 600; font-size: .95rem; line-height: 1.25; transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
.lf-route span small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.lf-route input:checked + span { border-color: var(--ink); background: rgba(232, 163, 61, .24); box-shadow: inset 0 0 0 1px var(--ink); }
.lf-route input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.lf-grid2 { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .lf-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lf-chan { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.lf-chan legend { padding: 0; font-size: .86rem; font-weight: 600; margin-bottom: 8px; width: 100%; }
.lf-chan label { position: relative; cursor: pointer; }
.lf-chan input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lf-chan span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: #fff; font-size: .92rem; font-weight: 500; transition: border-color 140ms ease, background-color 140ms ease; }
.lf-chan input:checked + span { border-color: var(--ink); background: rgba(232, 163, 61, .24); font-weight: 600; }
.lf-chan input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.lf-field .lf-error { display: none; font-size: .84rem; color: var(--err); font-weight: 500; }
.lf-field.has-error .lf-error { display: block; }
.lf-field.has-error input, .lf-field.has-error textarea { border-color: var(--err); }
.lf-status { display: none; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: .95rem; border: 1.5px solid var(--ink); }
.lf-status.is-error { display: block; background: #F8E5E1; color: #6F1D17; border-color: var(--err); }
.lf-status.is-success { display: block; background: var(--paper-2); color: var(--ink); padding: 22px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.lf-status:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.lf-fine { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Section 28: FAQ ---------- */
.lf-faq { border-top: 2px solid var(--ink); margin-top: 16px; }
.lf-faq details { border-bottom: 1px solid var(--rule-strong); }
.lf-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: start; padding: 18px 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); font-weight: 600; line-height: 1.35; min-height: 44px; }
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary::after { content: ''; width: 14px; height: 14px; margin-top: 7px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; transition: transform 220ms var(--ease); justify-self: end; }
.lf-faq details[open] summary::after { transform: rotate(45deg); }
.lf-faq summary:hover { color: var(--amber-deep); }
.lf-faq .lf-ans { padding: 0 40px 22px 0; }
.lf-faq .lf-ans p { font-size: 1.02rem; color: var(--ink-2); max-width: 36rem; margin-bottom: .7em; }
.lf-faq .lf-ans p:last-child { margin-bottom: 0; }

/* ---------- Section 29: sign-off ---------- */
.lf-sign { margin-top: 2rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; }
.lf-sign .lf-who { font-size: 1.5rem; font-weight: 600; font-style: italic; display: block; }
.lf-ps { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-strong); }
.lf-ps p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; }
.lf-ps .lf-psl { font-weight: 700; margin-right: .3em; }

/* ---------- Footer (section 30) ---------- */
.lf-footer { border-top: 2px solid var(--ink); padding: 40px 0 56px; background: var(--paper-2); }
.lf-footer-in { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr); font-size: .9rem; color: var(--ink-2); }
@media (min-width: 860px) { .lf-footer-in { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); } }
.lf-footer p { margin: 0 0 .6em; max-width: 34rem; }
.lf-footer nav { display: grid; gap: 4px; }
.lf-footer nav a { padding: 6px 0; font-weight: 500; }
.lf-footer .lf-brand { margin-bottom: 10px; }

/* ---------- Sticky bar ---------- */
.lf-sticky {
  position: fixed; z-index: 90; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 18px;
  transition: transform 320ms var(--ease), opacity 200ms ease;
  left: 0; right: 0; bottom: 0; min-height: var(--bar-h);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateY(110%); opacity: 0; visibility: hidden;
  box-shadow: 0 -10px 30px -12px rgba(20, 33, 61, .5);
}
.lf-sticky.is-on { transform: none; opacity: 1; visibility: visible; }
.lf-sticky-text { flex: 1; min-width: 0; font-size: .74rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-sticky-text b { display: block; font-family: var(--serif); font-size: .98rem; font-weight: 600; }
.lf-sticky-text span { display: block; overflow: hidden; text-overflow: ellipsis; }
.lf-sticky .lf-btn { min-height: 44px; padding: 0 14px; font-size: .84rem; border-color: var(--amber); }
@media (max-width: 899px) { .lf-sticky { gap: 8px; padding-left: 14px; } }
.lf-sticky .lf-btn:hover { background: var(--amber-hover); }
.lf-sticky-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius); flex: none; }
.lf-sticky-x:hover { background: rgba(243, 240, 232, .14); }
.lf-sticky-x svg { width: 16px; height: 16px; }
.lf-toc { display: none; position: relative; }
@media (max-width: 379px) { .lf-sticky-text span { display: none; } }
/* Slim phone bar: one line, the price and the button, nothing else. It is still hidden while the form is on screen. */
@media (max-width: 479px) {
  :root { --bar-h: 52px; }
  .lf-sticky { min-height: var(--bar-h); gap: 6px; padding: 4px 4px 4px 14px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .lf-sticky-text { display: flex; align-items: center; font-size: .9rem; }
  .lf-sticky-text span { display: none; }
  .lf-sticky-text b { display: block; font-size: 1.02rem; white-space: nowrap; }
  .lf-sticky .lf-btn { min-height: 44px; padding: 0 14px; }
}
@media (max-width: 339px) { .lf-sticky-text { display: none; } .lf-sticky .lf-btn { flex: 1; } }
@media (min-width: 900px) {
  .lf-sticky { top: 0; bottom: auto; padding: 8px max(20px, calc((100vw - 1240px) / 2)) 8px; transform: translateY(-110%); box-shadow: 0 10px 30px -14px rgba(20, 33, 61, .5); min-height: 60px; }
  .lf-sticky.is-on { transform: none; }
  .lf-sticky-text { display: flex; align-items: baseline; gap: 14px; font-size: .88rem; }
  .lf-sticky-text b { display: inline; font-size: 1.05rem; }
  .lf-toc { display: block; }
  .lf-toc > summary { list-style: none; cursor: pointer; font-size: .86rem; font-weight: 600; padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid rgba(243, 240, 232, .4); min-height: 44px; display: flex; align-items: center; }
  .lf-toc > summary::-webkit-details-marker { display: none; }
  .lf-toc > summary:hover { background: rgba(243, 240, 232, .12); }
  .lf-toc nav { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: var(--paper-3); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 8px; display: grid; gap: 0; box-shadow: var(--shadow); }
  .lf-toc nav a { display: block; padding: 10px 12px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink); border-left: 3px solid transparent; }
  .lf-toc nav a:hover { background: var(--paper-2); }
  .lf-toc nav a[aria-current="true"] { border-left-color: var(--amber); font-weight: 600; background: var(--paper-2); }
}
body.lf-has-bar { padding-bottom: var(--bar-h); }
@media (min-width: 900px) { body.lf-has-bar { padding-bottom: 0; } }

/* ---------- Dialog (exit-intent) and the phone slide-up ---------- */
.lf-dialog { border: 1.5px solid var(--ink); border-top: 6px solid var(--amber); border-radius: var(--radius); background: var(--paper-3); color: var(--ink); padding: 0; width: min(30rem, calc(100vw - 32px)); max-height: min(34rem, calc(100dvh - 48px)); box-shadow: 0 30px 70px -20px rgba(20, 33, 61, .6); overflow: auto; }
.lf-dialog::backdrop { background: rgba(20, 33, 61, .55); }
.lf-dialog-in { padding: 30px 28px 26px; }
.lf-dialog h2 { font-size: 1.55rem; line-height: 1.15; margin: 0 40px 12px 0; }
.lf-dialog p { font-size: 1rem; color: var(--ink-2); }
.lf-dialog-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: var(--radius); color: var(--ink); }
.lf-dialog-x:hover { background: var(--paper-2); }
.lf-dialog-x svg { width: 18px; height: 18px; }
.lf-dialog .lf-btn-row { margin-top: 20px; }
.lf-slide { margin: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-3); color: var(--ink); padding: 0; position: fixed; inset: auto 12px calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)) 12px; width: auto; max-width: 28rem; box-shadow: 0 18px 40px -16px rgba(20, 33, 61, .55); z-index: 95; }
.lf-slide-in { padding: 14px 52px 14px 16px; }
.lf-slide p { margin: 0 0 8px; font-size: .95rem; font-weight: 600; font-family: var(--serif); }
.lf-slide .lf-btn { min-height: 44px; padding: 0 16px; font-size: .86rem; }
.lf-slide .lf-dialog-x { top: 2px; right: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .lf-dialog[open] { animation: lf-pop 220ms var(--ease); }
  .lf-dialog[open]::backdrop { animation: lf-fade 220ms ease; }
  .lf-slide[open] { animation: lf-up 360ms var(--ease); }
}
@keyframes lf-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .lf-slide { display: none !important; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .lf-entry, .lf-rise { transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .lf-sticky, .lf-ann, .lf-dialog, .lf-slide, .lf-header .lf-btn { display: none !important; }
  body { background: #fff; }
}