/* ══════════════════════════════════════════════════════════════════════════
   Alongside Tutor — landing page, direction F "Kitchen Table"

   Scoped entirely to #lp, which wraps the landing page's content block. Nothing
   here can reach another page, and nothing here relies on Tailwind: the id in
   every selector wins against any single-class utility regardless of which
   stylesheet the CDN injects last.

   Ported from docs/design/landing_directions_2026-08-04/f-real-product.html
   (the approved mock) on 2026-08-04. Three groups of rules were deliberately
   left behind in the mock:

     · the mock's own page chrome (.shell-head, .topbar, .logo, .navlinks,
       .foot) — base.html supplies the real nav and footer;
     · the tutor "device" internals (.dev, .bub, .devboard and friends) — the
       mock recreated templates/landing/_hero_demo.html because it could not
       include it; the real page includes the real component instead;
     · the global resets (* box-sizing, body margin) — Tailwind's preflight in
       base.html already does exactly that, and duplicating it here would only
       create a second place to look.

   Oat ground, product-navy bands, amber action, teal only where the real UI
   uses teal. Every dark surface is a colour sampled out of a real capture.
   ══════════════════════════════════════════════════════════════════════════ */

#lp {
  /* light side */
  --bg:#F6F2E8; --panel:#FFFFFF; --ink:#141B2E; --mid:#4C566B; --dim:#7C8698; --hair:#E3DCCA;
  /* the product's own dark — every one of these was sampled out of a real capture */
  --navy:#0B1120; --navy2:#131936; --navy3:#1A2246; --deep:#070B15;
  /* the product's own accents */
  --teal:#0D9488; --tealL:#2DD4BF; --honey:#F5B02E; --honeyD:#241700;
  --serif: Constantia, "Hoefler Text", Cambria, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
}
#lp .wrap { max-width: 1160px; margin: 0 auto; padding: 0 26px; }
#lp .wrap.wide { max-width: none; padding: 0 clamp(26px, 6vw, 112px); }
#lp img, #lp video { max-width: 100%; }
/* base.html puts the nav in `fixed` mode on this page, so anything an in-page link jumps to has
   to reserve room for it — #pricing especially, which templates/core/curriculum.html links to.
   The video's block is pulled 92px up over the hero (see .videolift below), so its target needs
   that much again or the jump lands with the frame's top edge already off screen. */
#lp [id] { scroll-margin-top: 88px; }
#lp #lp-see { scroll-margin-top: 184px; }
#lp h1, #lp h2, #lp h3 { margin: 0; font-family: var(--serif); text-wrap: balance; }
#lp h1 { font-size: clamp(2.25rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.022em; font-weight: 700; }
#lp h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); line-height: 1.13; letter-spacing: -.016em; font-weight: 700; }
#lp h3 { font-size: 1.16rem; line-height: 1.3; font-weight: 700; }
#lp p { margin: 0; }
#lp .lede { font-size: clamp(1.04rem, 1.8vw, 1.22rem); color: var(--mid); line-height: 1.6; max-width: 56ch; }
#lp .ck { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .28em; }

#lp .btn {
  display: inline-block; background: var(--honey); color: var(--honeyD); font-weight: 700; font-size: 15.5px;
  padding: 14px 28px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
  font-family: var(--sans); line-height: 1.2;
}
#lp .btn:hover { background: #FFC257; }
#lp .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
#lp .btn.ghost:hover { background: rgba(255,255,255,.12); }
#lp .btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
#lp .btn.line:hover { background: var(--ink); color: var(--bg); }
#lp .btn.sm { padding: 10px 20px; font-size: 14px; }
#lp a:focus-visible, #lp button:focus-visible, #lp summary:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

#lp .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .19em; text-transform: uppercase;
  color: #A2762A; display: block; margin-bottom: 14px;
}
#lp .band .eyebrow, #lp .shots .eyebrow, #lp .wont .eyebrow, #lp .hero .eyebrow { color: var(--honey); }
#lp .fine { font-size: 13px; color: var(--dim); }
#lp .tag {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #F2D9A4; background: rgba(245,176,46,.13); box-shadow: inset 0 0 0 1px rgba(245,176,46,.3);
  border-radius: 3px; padding: 5px 10px;
}
#lp .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--honey); display: block; }

/* ── hero — the photograph is shown whole, never cropped ────────────────────
   base.html puts the nav in `fixed` mode for this page (transparent_nav), so
   it floats over the photograph's top edge; the scrim's second gradient is
   what keeps the wordmark legible there. */
#lp .hero { position: relative; background: var(--deep); isolation: isolate; }
#lp .hero .heroimg { display: block; width: 100%; height: auto; }
#lp .hero .heroscrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(7,11,21,.95) 0%, rgba(7,11,21,.9) 20%, rgba(7,11,21,.66) 34%,
                    rgba(7,11,21,.24) 50%, rgba(7,11,21,0) 68%),
    linear-gradient(180deg, rgba(7,11,21,.42) 0%, rgba(7,11,21,0) 34%);
}
#lp .hero .heroinner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
/* 38% keeps the type clear of the laptop edge in the photograph */
#lp .hero .hcopy { width: min(530px, 38%); min-width: 300px; }
#lp .hero h1 { color: #fff; }
#lp .hero .lede { color: #DCE2EE; margin-top: 20px; max-width: 44ch; }
#lp .hero .cta-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
#lp .hero .undernote {
  margin-top: 26px; font-size: 13px; color: #AEB8CC; display: flex; align-items: center; gap: 9px;
}
#lp .hero .undernote span { width: 7px; height: 7px; border-radius: 50%; background: var(--tealL); flex: 0 0 7px; }

/* ── the app overview video, lifted into the hero's lower edge ──────────── */
#lp .videolift { background: var(--bg); }
#lp .videolift .wrap { margin-top: -92px; position: relative; z-index: 3; padding-bottom: 74px; }
#lp .vidframe {
  position: relative; background: var(--navy2); border-radius: 14px; padding: 12px;
  box-shadow: 0 40px 80px -28px rgba(7,11,21,.7), 0 0 0 1px rgba(255,255,255,.08);
}
#lp .vidframe video { display: block; width: 100%; height: auto; border-radius: 7px; background: #000; }
#lp .vidcap {
  margin-top: 16px; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  font-size: 14px; color: var(--mid);
}
#lp .vidcap .tag { color: #6C4E0F; background: rgba(245,176,46,.2); box-shadow: inset 0 0 0 1px rgba(162,118,42,.35); }

#lp .chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 22px 26px;
  background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
#lp .chip {
  display: inline-flex; align-items: flex-start; gap: 8px; background: var(--bg); border: 1px solid var(--hair);
  border-radius: 999px; padding: 9px 16px; font-size: 13.5px; color: var(--mid); font-weight: 600;
}
#lp .chip .ck { color: var(--teal); }

/* ── navy bands — the photograph is mounted, not bled, so it stays whole ── */
#lp .band { color: #fff; background: var(--navy); }
#lp .band.alt { background: var(--navy2); }
#lp .band .inner { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 56px; padding: 76px 0 80px; }
#lp .band.flip .inner > .media { order: -1; }
#lp .band h2 { color: #fff; }
#lp .band .ruleline { height: 2px; background: rgba(245,176,46,.55); margin: 22px 0 26px; max-width: 240px; }
#lp .band .bodycopy { color: #DDE3EF; font-size: 15.5px; line-height: 1.62; max-width: 52ch; }
#lp .band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
#lp .band ul.spaced { margin-top: 26px; }
#lp .band ul li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.5; color: #DDE3EF; }
#lp .band ul li svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: .22em; color: var(--honey); }
#lp .mount { max-width: 430px; margin-left: auto; margin-right: auto; }
#lp .band.flip .mount { margin-left: 0; }
#lp .mount .plate {
  background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
}
#lp .mount img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* No caption rule here on purpose. The mock carried a "SHOWN WHOLE — 1100×1366, NO CROP" note
   under each mounted photo; that was an instruction to the reviewer, not copy, and it shipped
   once by mistake. These photographs must never carry a caption anyway — see rule 2 in
   static/landing/README.md. The plate and its shadow are what say "shown whole". */

/* ── the real captures, full frame, nothing cut ─────────────────────────── */
#lp .shots { background: var(--navy); color: #fff; padding: 86px 0 94px; }
#lp .shots .shead { max-width: 62ch; margin-bottom: 56px; }
#lp .shots .shead h2 { color: #fff; }
#lp .shots .shead p { color: #A9B4C9; margin-top: 15px; font-size: 1.05rem; }
#lp .shotrow { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
#lp .shotrow + .shotrow { margin-top: 62px; }
#lp .shotrow.flip { grid-template-columns: 1fr 340px; }
#lp .shotrow.flip .shottxt { order: 2; }
#lp .shottxt h3 { color: #fff; font-family: var(--serif); font-size: 1.42rem; }
#lp .shottxt p { color: #A9B4C9; font-size: 15px; margin-top: 13px; line-height: 1.6; }
#lp .shottxt .tag { margin-top: 18px; }
#lp .frame {
  background: var(--navy2); border-radius: 12px; padding: 11px;
  box-shadow: 0 34px 66px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.09);
}
#lp .frame .bar { display: flex; gap: 6px; padding: 3px 4px 10px; }
#lp .frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.17); display: block; }
/* height:auto is the whole point — the capture sets its own aspect ratio */
#lp .frame img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ── the tutor band's device ────────────────────────────────────────────────
   Only the frame and the caption live here. What sits inside is the real
   component, {% include "landing/_hero_demo.html" %}, which brings its own
   Tailwind classes and its own reduced-motion handling. Do not restyle its
   internals from this file — it is shared with nothing, but it is also not
   ours to fork. */
#lp .devwrap { width: 100%; max-width: 420px; margin: 0 auto; }
#lp .devcap {
  margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ── light sections ─────────────────────────────────────────────────────── */
#lp section.plain { padding: 78px 0; }
#lp section.plain.panel { background: var(--panel); }
#lp .sechead { text-align: center; max-width: 64ch; margin: 0 auto 46px; }
#lp .sechead p { color: var(--mid); margin-top: 15px; font-size: 1.05rem; }
#lp .tri { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; text-align: center; }
#lp .tri .ic { width: 104px; height: 104px; margin: 0 auto 22px; color: var(--navy); }
#lp .tri h3 { color: var(--navy); }
#lp .tri p { color: var(--mid); font-size: 15px; margin-top: 12px; }
#lp .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#lp .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
#lp .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
#lp .card { background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 26px; }
#lp section.plain.panel .card { background: #FFFDF6; }
#lp .card h3 { font-family: var(--sans); font-size: 1.02rem; letter-spacing: -.01em; }
#lp .card h3.big { font-size: 1.15rem; }
#lp .card p { color: var(--mid); font-size: 14.5px; margin-top: 10px; }
#lp .card .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #A2762A; display: block; margin-bottom: 12px;
}
#lp .stats { margin-top: 42px; text-align: center; }
#lp .stat { font-family: var(--serif); font-size: 2.8rem; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: lining-nums; }
#lp .stat + .sl { font-size: 13.5px; color: var(--dim); margin-top: 10px; }
#lp ul.pts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
#lp ul.pts li { display: flex; gap: 11px; font-size: 15px; color: var(--mid); line-height: 1.5; }
#lp ul.pts .ck { color: var(--teal); }

/* ── the quiet still-life strip ─────────────────────────────────────────── */
#lp .strip { position: relative; background: var(--deep); }
#lp .strip img { display: block; width: 100%; height: auto; }
#lp .strip .over {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(92deg, rgba(7,11,21,.86) 0%, rgba(7,11,21,.66) 34%, rgba(7,11,21,.12) 60%, rgba(7,11,21,0) 78%);
}
#lp .strip .over p {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.95rem); line-height: 1.3;
  color: #fff; max-width: 22ch; letter-spacing: -.015em;
}

/* ── what we won't do ───────────────────────────────────────────────────── */
#lp .wont { background: var(--deep); color: #E2E7F1; }
#lp .wont h2 { color: #fff; }
#lp .wont .sechead p { color: #97A3BA; }
#lp .wont .wlist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#lp .wont .w {
  background: rgba(255,255,255,.05); border-radius: 10px; padding: 20px 22px;
  display: flex; gap: 13px; align-items: baseline;
}
#lp .wont .w b { color: var(--honey); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; flex: 0 0 auto; }
#lp .wont .w span { font-size: 14.5px; line-height: 1.5; color: #C3CDDE; }
#lp .wont .w span strong { color: #fff; font-weight: 600; }

/* ── pricing ────────────────────────────────────────────────────────────── */
#lp #pricing .sechead h2 { font-variant-numeric: lining-nums; }  /* it's a price, not prose */
#lp .price { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 660px; margin: 0 auto; }
#lp .price .card { display: flex; flex-direction: column; }
#lp .price .card.pick { border: 2px solid var(--navy); }
#lp .price .amt { font-family: var(--serif); font-size: 2.8rem; letter-spacing: -.02em; margin: 8px 0 2px; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
#lp .price .per { font-size: 13px; color: var(--dim); }
#lp .price .btn { margin-top: auto; align-self: flex-start; }
#lp .price .btn.spaced { margin-top: 22px; }

/* ── the value anchor ───────────────────────────────────────────────────────
   A real market comparison — a genuine private-tutor hourly range against our
   monthly price. Never a struck-through fictitious own "was" price
   (owner rule 2026-07-13; FTC 16 CFR 233). */
#lp .anchor { max-width: 660px; margin: 34px auto 0; }
#lp .anchor .row { display: flex; align-items: stretch; gap: 14px; }
#lp .anchor .box { flex: 1; border-radius: 10px; padding: 20px; border: 1px solid var(--hair); background: var(--panel); }
#lp .anchor .box.ours { background: #F0FBF9; border-color: #B7E6DF; }
#lp .anchor .box .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); display: block; margin-bottom: 9px;
}
#lp .anchor .box.ours .k { color: #0B7268; }
#lp .anchor .box .n {
  font-family: var(--serif); font-size: 1.9rem; letter-spacing: -.02em; color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
}
#lp .anchor .box.ours .n { color: var(--navy); }
#lp .anchor .box .n small { font-family: var(--sans); font-size: 13px; color: var(--dim); letter-spacing: 0; }
#lp .anchor .vs { align-self: center; font-family: var(--mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--dim); }
#lp .anchor .note { margin-top: 13px; text-align: center; font-size: 13px; color: var(--dim); }

/* ── the receipt ────────────────────────────────────────────────────────────
   Replaces the two-column tick list. Same items, but a till roll puts the
   price next to the pile it buys, which a checklist can't. Paper is warmer
   than the page's own white panels; the leaders are a dotted border on a flex
   spacer, so a long item wraps without breaking them. */
#lp .receipt {
  max-width: 470px; margin: 46px auto 0; background: #FFFDF6;
  border: 1px solid var(--hair); border-radius: 10px; padding: 32px 30px 28px;
  box-shadow: 0 26px 44px -30px rgba(20,27,46,.5), 0 1px 0 rgba(20,27,46,.04);
}
#lp .receipt .rhead { text-align: center; }
#lp .receipt .rhead b {
  display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase; color: var(--navy);
}
#lp .receipt .rhead span {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
#lp .receipt .rrule { border-top: 1.5px dashed var(--hair); margin: 20px 0 19px; }
#lp .receipt .rrule.solid { border-top: 1.5px solid var(--ink); margin: 22px 0 18px; }
#lp .receipt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
#lp .receipt li { display: flex; align-items: baseline; gap: 7px; font-size: 13px; line-height: 1.45; }
#lp .receipt li .it { color: var(--mid); }
#lp .receipt li .dots {
  flex: 1 1 auto; min-width: 14px; align-self: flex-end;
  border-bottom: 1.5px dotted #CDC2A8; transform: translateY(-.34em);
}
#lp .receipt li .vl {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--teal);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#lp .receipt .tot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
#lp .receipt .tot + .tot { margin-top: 10px; }
#lp .receipt .tot .lb {
  font-family: var(--mono); font-size: 11px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink);
}
/* Constantia sets oldstyle figures by default, so an un-hinted $39.00 comes
   out with the 3 and 9 dropping below the baseline — fine in prose, wrong on
   a total. lining-nums is what makes it read as a price. */
#lp .receipt .tot .am {
  font-family: var(--serif); font-size: 1.72rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--navy); font-variant-numeric: lining-nums tabular-nums;
}
#lp .receipt .tot.sub .lb { color: var(--dim); letter-spacing: .13em; }
#lp .receipt .tot.sub .am { font-size: 1.02rem; color: var(--mid); }
#lp .receipt .stamp {
  margin: 26px auto 0; max-width: 310px; text-align: center; transform: rotate(-1.4deg);
  border: 2px solid rgba(162,118,42,.5); border-radius: 4px; padding: 11px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em;
  text-transform: uppercase; color: #A2762A;
}
#lp .receipt .rnote { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--dim); line-height: 1.62; }

/* ── FAQ ────────────────────────────────────────────────────────────────────
   <details> rather than JS: it opens without scripting, it is keyboard
   operable for free, and browser find-in-page can open a closed answer. */
#lp .faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
#lp .faq details {
  background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 18px 22px;
}
#lp .faq details[open] { background: #FFFDF6; }
#lp .faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; color: var(--ink);
}
#lp .faq summary::-webkit-details-marker { display: none; }
#lp .faq summary .chev {
  width: 18px; height: 18px; flex: 0 0 18px; color: #A2762A; transition: transform .2s ease;
}
#lp .faq details[open] summary .chev { transform: rotate(180deg); }
#lp .faq details p { margin-top: 13px; font-size: 14.5px; line-height: 1.62; color: var(--mid); }

/* ── closer ─────────────────────────────────────────────────────────────── */
#lp .closer { position: relative; background: var(--deep); }
#lp .closer img { display: block; width: 100%; height: auto; }
#lp .closer .over {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(92deg, rgba(7,11,21,.9) 0%, rgba(7,11,21,.76) 30%,
              rgba(7,11,21,.28) 54%, rgba(7,11,21,0) 76%);
  color: #fff;
}
#lp .closer h2 { color: #fff; }
#lp .closer .ctxt { max-width: 40ch; }
#lp .closer p { margin-top: 14px; color: #C9D2E2; font-size: 15px; line-height: 1.6; }
#lp .closer .cta-row { margin-top: 26px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  #lp .shotrow, #lp .shotrow.flip { grid-template-columns: 1fr; gap: 26px; }
  #lp .shotrow.flip .shottxt { order: 0; }
}
@media (max-width: 940px) {
  #lp .band .inner, #lp .grid2, #lp .grid3, #lp .tri,
  #lp .price, #lp .wont .wlist { grid-template-columns: 1fr; }
  #lp .band.flip .inner > .media { order: 0; }
  #lp .grid4 { grid-template-columns: 1fr 1fr; }
  #lp .mount, #lp .band.flip .mount { margin-left: auto; margin-right: auto; }
  #lp .videolift .wrap { margin-top: -46px; padding-bottom: 56px; }
  #lp .anchor .row { flex-direction: column; }
  #lp .anchor .vs { align-self: flex-start; }
  /* stack the hero rather than crop it: picture on top, words underneath */
  #lp .hero { display: flex; flex-direction: column; }
  /* Not display:none. The words have moved off the photograph and no longer need the side
     wash, but the nav is still `fixed` over the picture's top edge and its wordmark is still
     white — so keep the vertical wash, clipped to a top strip so it can't reach the copy
     now sitting below the image. */
  #lp .hero .heroscrim {
    bottom: auto; height: 128px;
    background: linear-gradient(180deg, rgba(7,11,21,.58) 0%, rgba(7,11,21,0) 100%);
  }
  #lp .hero .heroinner { position: static; padding: 44px 0 50px; }
  #lp .hero .hcopy { width: 100%; }
  #lp .strip .over, #lp .closer .over { position: static; background: none; padding: 40px 0 46px; }
  #lp .strip, #lp .closer { background: var(--deep); }
  #lp .strip .over p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  #lp * { transition-duration: .01ms !important; }
}