/* ============================================================
   FRACS — LANDING PAGES (paid-ad destinations)
   Layers on css/styles.css:  styles.css FIRST, then this file.

   Depends on styles.css for: palette tokens, @font-face, body base,
   the intake box (.try/.tryb/.tryr/.tryn), the line-mask reveal
   (.rl / html.anim / [data-rv]), the marker circle (.circ),
   the cropped giant word (.giant), and the grain overlay.

   House rules for these pages, held deliberately tight:
     · one pun per page, in the headline, nowhere else
     · one photograph (or one pattern panel), used large
     · three divider treatments: the Crimson Cherry marquee under the nav,
       the numbered hairline rule, the tick strip
     · exactly one marquee per page — brand guide §04 makes the marquee the
       only home for Crimson Cherry, and caps it at two per page
     · 1–2 marker PNGs per PAGE
     · patterns quiet, large-scale, on cream or pine only
   Everything is prefixed .lp- and cannot collide with the main site.
   ============================================================ */

/* ---------- shell ---------- */
/* clip, not hidden: no scroll container, so the sticky-free layout and
   focus scrolling behave, but an oversized marker can never open a
   horizontal scrollbar on a narrow phone */
.lp-page{overflow-x:clip}
.lp-wrap{max-width:1080px;margin:0 auto;padding:0 40px}
@media(max-width:640px){.lp-wrap{padding:0 22px}}

.lp-nav{border-bottom:1.5px solid var(--ink)}
.lp-nav-in{max-width:1080px;margin:0 auto;padding:0 40px;height:86px;display:flex;align-items:center}
@media(max-width:640px){.lp-nav-in{padding:0 22px;height:68px}}
.lp-brand{font-family:var(--bomb);font-size:22px;letter-spacing:.04em;color:var(--ink);text-decoration:none}
.lp-brand i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red);letter-spacing:0}

/* ---------- hero ---------- */
.lp-hero{padding:104px 0 0}
@media(max-width:820px){.lp-hero{padding-top:60px}}
.lp-kicker{margin:0 0 34px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.lp-h1{--lp-h1max:8rem;margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,var(--lp-h1vw,8.6vw),var(--lp-h1max));line-height:.9;letter-spacing:-.02em;
  text-wrap:balance}
.lp-h1 .up{font-family:var(--bomb);font-size:.8em;letter-spacing:.005em}
.lp-h1 i{color:var(--red);font-style:italic}
/* the reveal mask from styles.css pads itself; keep the left edge on the grid.
   The right padding is the clearance the marker circle needs — the mask clips. */
.lp-h1 .rl{padding-left:0;margin-left:0;padding-right:.62em;max-width:100%}
.lp-dek{margin:38px 0 0;font-size:20px;line-height:1.5;color:#3b352c;max-width:44ch}
.lp-dek i{font-family:var(--serif);font-style:italic;font-size:1.1em;color:var(--red)}
@media(max-width:640px){.lp-dek{font-size:17.5px;line-height:1.6;max-width:none}}

/* the intake — the only CTA on the page */
.lp-hero .try{margin:46px 0 0;max-width:620px}
/* min-width:0 lets the input shrink inside the flex row — without it the
   placeholder's intrinsic width pushes the whole page wider than the phone */
.lp-hero .tryb input{min-width:0;font-size:16.5px;padding:21px 20px}
.lp-hero .tryb button{flex:none;font-size:14px;padding:0 34px}
.lp-hero .tryn{margin-top:15px;letter-spacing:.16em}
.lp-hero .tryr{max-width:620px;font-size:15.5px;padding:16px 20px}
@media(max-width:640px){
  .lp-hero .tryb input{font-size:16px;padding:18px 15px}
  .lp-hero .tryb button{font-size:12.5px;padding:0 18px}
}

/* three real requests, priced on click. Quiet by design. */
.lp-eg{margin:34px 0 0;max-width:600px}
.lp-eg span{display:block;margin:0 0 4px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lp-eg button{display:block;width:100%;text-align:left;font:inherit;font-size:15.5px;color:#4c4438;
  background:none;border:none;border-bottom:1px solid var(--line);padding:13px 2px;cursor:pointer}
.lp-eg button::before{content:"“";font-family:var(--serif);color:var(--red)}
.lp-eg button::after{content:"”";font-family:var(--serif);color:var(--red)}
.lp-eg button:hover{color:var(--ink)}

/* ---------- the photograph, used big ----------
   --ar   aspect ratio of the frame
   --pos  object-position (which part of the frame survives the crop)
   --zoom scale for a tight detail crop                              */
/* the intake label is for screen readers only — the placeholder carries it visually */
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- photography ----------
   The architectural library tops out at 1024px on the long edge,
   so those are large but CONTAINED: a band inside the
   cream page, never past native width, never edge-to-edge on a wide display.
   .lp-frame caps at 1024px for that reason. The 2026 founder frames are
   2400px and clear that cap at 2x,
   and the cap now buys retina rather than hiding a soft source.
   Photography is full colour under the brand guide
   §07 grade, which lives on .ph-grade in css/styles.css and nowhere else —
   do not add a filter here, and never grayscale, which would fight it.
     --ar  frame ratio   --pos  object-position   --zoom  tighter crop      */
.lp-frame{overflow:hidden;aspect-ratio:var(--ar,21/9);max-width:1024px;margin:0 auto;
  background:var(--cream-2);border:1.5px solid var(--ink)}
.lp-frame img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1))}
/* the tall shot takes the guide's polaroid frame (.pl-tile, styles.css);
   restate the mat colour because this file loads after styles.css */
.lp-frame.pl-tile{background:var(--paper)}

/* treatment A — the short band, full measure of the page */
.lp-fig{margin:96px 0 0;padding:0}
@media(max-width:640px){.lp-fig{margin-top:60px}.lp-fig .lp-frame{aspect-ratio:var(--ar-m,16/9)}}

/* treatment B — the tall shot beside one big statement */
.lp-shot{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.lp-shot figure{margin:0}
@media(max-width:900px){
  .lp-shot{grid-template-columns:1fr;gap:36px}
  .lp-shot .lp-frame{aspect-ratio:var(--ar-m,4/3)}
}

/* ---------- divider one: the numbered hairline rule ---------- */
.lp-sec{padding:112px 0 0}
.lp-sec--after{padding-top:56px}   /* follows a full-bleed ground, which brings its own air */
@media(max-width:820px){.lp-sec{padding-top:74px}.lp-sec--after{padding-top:48px}}
.lp-rule{display:flex;align-items:baseline;gap:18px;border-top:1.5px solid var(--ink);padding:18px 0 0;margin:0 0 56px}
.lp-rule .no{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--red);line-height:1}
.lp-rule h2{margin:0;font-family:var(--bomb);font-size:14px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.lp-rule .rt{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:640px){.lp-rule{margin-bottom:38px}.lp-rule .rt{display:none}}

/* ---------- divider two: the tick strip (once per page) ---------- */
.lp-strip{height:12px;margin:112px 0 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  background:url(../assets/rule-strip-lp.svg) repeat-x center/auto 12px}
@media(max-width:820px){.lp-strip{margin-top:74px}}

/* ---------- type ---------- */
.lp-lead,.lp-body p.lp-lead{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em;max-width:30ch;color:var(--ink)}
.lp-lead i{font-size:1em;color:var(--red)}
.lp-body p{margin:0 0 18px;font-size:17px;line-height:1.66;color:#4c4438;max-width:56ch}
.lp-body p:last-child{margin-bottom:0}
.lp-body i{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--red)}
.lp-body b{color:var(--ink);font-weight:600}
.lp-body u{text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.lp-fine{margin:44px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:72ch}
.lp-fine i{font-family:var(--serif);font-style:italic;font-size:1.12em;color:var(--pine)}

.lp-cols{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.lp-cols--lead{grid-template-columns:1.1fr 1fr}
@media(max-width:900px){.lp-cols,.lp-cols--lead{grid-template-columns:1fr;gap:40px}}

/* ---------- hairline lists ---------- */
.lp-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lp-rows li{display:flex;align-items:baseline;gap:24px;justify-content:space-between;
  padding:22px 2px;border-bottom:1px solid var(--line)}
.lp-rows .l{font-family:var(--bomb);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.lp-rows .l small{display:block;max-width:64ch;margin-top:7px;font-family:var(--sans);font-size:14.5px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.5}
/* --asked: the left column carries a client's own words, so it is serif,
   not Cherry Bomb — the brief keeps Cherry Bomb off anything sentence-like */
.lp-rows--asked .l{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3;
  letter-spacing:0;text-transform:none}
.lp-rows--asked .l small{margin-top:7px;font-size:13.5px;font-style:normal}
.lp-rows .r{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);line-height:.9;color:var(--red);white-space:nowrap}
.lp-rows .r small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:right;margin-top:8px}

/* three steps / the bench — hairline tops, no boxes */
.lp-grid{display:grid;gap:56px 44px}
.lp-grid--3{grid-template-columns:repeat(3,1fr)}
.lp-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.lp-grid--3,.lp-grid--4{grid-template-columns:1fr 1fr;gap:44px 36px}}
@media(max-width:600px){.lp-grid--3,.lp-grid--4{grid-template-columns:1fr;gap:38px}}
/* six on the bench */
.lp-grid--6{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.lp-grid--6{grid-template-columns:1fr 1fr;gap:44px 36px}}
@media(max-width:600px){.lp-grid--6{grid-template-columns:1fr;gap:38px}}
.lp-item{border-top:1.5px solid var(--ink);padding:20px 0 0}
.lp-item h3{margin:0 0 12px;font-family:var(--bomb);font-size:14px;letter-spacing:.07em;text-transform:uppercase}
.lp-item .n{display:block;margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--red)}
.lp-item p{margin:0;font-size:15.5px;line-height:1.6;color:#4c4438}
.lp-item .said{display:block;margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:17px;
  line-height:1.35;color:var(--pine)}

/* ---------- prices: one hairline row, real numbers, no dead buttons ---------- */
.lp-prices{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
@media(max-width:760px){.lp-prices{grid-template-columns:1fr 1fr}}
.lp-price{padding:26px 24px 26px 0;border-bottom:1px solid var(--line)}
.lp-price b{display:block;font-family:var(--bomb);font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.01em}
.lp-price b em{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.34em;letter-spacing:.04em;color:var(--muted)}
.lp-price span{display:block;margin:12px 0 0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lp-price small{display:block;margin:10px 0 0;font-size:14px;line-height:1.5;color:#4c4438}
.lp-price.on b{color:var(--red)}
.lp-price.on span{color:var(--ink)}

/* ---------- one quiet ground per page ---------- */
.lp-quiet{position:relative;margin-top:112px;padding:88px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  background:var(--cream-2)}
.lp-quiet>*{position:relative}
.lp-quiet--pine{background:var(--pine);color:var(--cream);border-color:var(--ink)}
/* the only pattern on these pages: a large, slow diamond on pine, at the
   opacity where you notice it on the second look and not the first */
.lp-quiet--pine::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../assets/pattern-21-lp.svg) repeat;background-size:520px;opacity:.045}
.lp-quiet--pine .lp-lead i{color:#eeb8ab}
.lp-quiet--pine .lp-body p{color:#e6ded0}
.lp-quiet--pine .lp-body b{color:var(--cream)}
.lp-quiet--pine .lp-body i{color:#eeb8ab}
@media(max-width:820px){.lp-quiet{margin-top:74px;padding:60px 0}}

/* plain ✳-marked list, used inside the quiet ground */
.lp-marks{margin:0;padding:0;list-style:none}
.lp-marks li{position:relative;padding:13px 0 13px 30px;font-size:16.5px;line-height:1.55;color:#4c4438;
  border-bottom:1px solid var(--line)}
.lp-marks li:last-child{border-bottom:none}
.lp-marks li::before{content:"✳";position:absolute;left:0;top:14px;font-size:13px;line-height:1.4;color:var(--red)}
.lp-marks b{color:var(--ink);font-weight:600}
.lp-marks i{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--pine)}
.lp-quiet--pine .lp-marks li{color:#e6ded0;border-color:rgba(241,235,224,.2)}
.lp-quiet--pine .lp-marks li::before{color:#eeb8ab}
.lp-quiet--pine .lp-marks b{color:var(--cream)}
.lp-quiet--pine .lp-marks i{color:#eeb8ab}

/* ---------- questions, answered straight ---------- */
.lp-qa{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px}
@media(max-width:820px){.lp-qa{grid-template-columns:1fr;gap:40px}}
.lp-qa div{border-top:1px solid var(--line);padding:20px 0 0}
.lp-qa h3{margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;color:var(--ink)}
.lp-qa p{margin:0;font-size:16px;line-height:1.65;color:#4c4438;max-width:46ch}
.lp-qa b{color:var(--ink);font-weight:600}
.lp-qa i{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--red)}

/* ---------- close ---------- */
.lp-close{padding:112px 0 96px;text-align:center}
@media(max-width:820px){.lp-close{padding:74px 0 64px}}
.lp-close h2{margin:0 auto;font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.6vw,72px);
  line-height:1.02;letter-spacing:-.02em;max-width:22ch}
.lp-close h2 .up{font-family:var(--bomb);font-size:.78em;letter-spacing:.01em}
.lp-close h2 i{color:var(--red)}
/* 14px Cherry Bomb — 3.69:1 on #e03a26, 4.86:1 on #bf2f1d. Hover moves to
   --ink because --red-dark is now the rest state and hover would be a no-op.
   See the two-reds house rule at the head of styles.css. */
.lp-close .lp-go{display:inline-block;margin:44px 0 0;background:var(--red-dark);color:var(--cream);
  font-family:var(--bomb);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:20px 40px;border-radius:99px;text-decoration:none;transition:background .15s}
.lp-close .lp-go:hover{background:var(--ink)}
.lp-close p{margin:20px 0 0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.giant.lp-giant{margin-top:0}

/* ---------- footer ---------- */
.lp-foot{border-top:1.5px solid var(--ink);padding:30px 0 64px;display:flex;justify-content:space-between;
  gap:16px 30px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.lp-foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.lp-foot a:hover{color:var(--red);border-color:var(--red)}
.lp-foot .ast{color:var(--red)}

/* ---------- focus ---------- */
.lp-page a:focus-visible,.lp-page button:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
.lp-page .tryb input:focus-visible{outline:none}
.lp-page .tryb:focus-within{box-shadow:5px 5px 0 var(--ink),0 0 0 3px rgba(224,58,38,.4)}

/* ---------- reduced motion (everything this file adds) ---------- */
@media (prefers-reduced-motion: reduce){
  .lp-close .lp-go,.lp-eg button{transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   TYPE SCALE — onto the shared scale defined at the foot of styles.css.
   Evidence: fracsio-source-assets/docs/type-and-space-audit.md

   This file loads after styles.css so its values won over the scale there.
   It also held the single smallest piece of real text on the site: the "/mo"
   on .lp-price was set at .34em of a clamp()ed display price, so it had no
   size of its own and collapsed to 8.84px at 390px while reading 12.24px at
   1440px. Same class, two sizes, neither chosen. It is absolute now.
   ============================================================ */
.lp-kicker,.lp-rule .rt,.lp-eg span,.lp-rows .r small,.lp-price span,
.lp-price b em,.lp-close p,.lp-foot,.lp-go{font-size:var(--fs-micro)}
.lp-price b em{letter-spacing:.06em}   /* holds its width at the smaller size */
.lp-rule h2,.lp-rows .l,.lp-item h3,.lp-price small,.lp-marks li::before,
.lp-fine{font-size:var(--fs-fine)}
.lp-fine i{font-size:var(--fs-small)}
.lp-rows .l small,.lp-rows--asked .l small{font-size:var(--fs-fine)}
.lp-eg button,.lp-item p,.lp-marks li,.lp-qa p,.lp-hero .tryr{font-size:var(--fs-small)}
.lp-marks i,.lp-item .said,.lp-qa i,.lp-body i{font-size:var(--fs-base)}
.lp-body p,.lp-hero .tryb input,.lp-hero .tryb button{font-size:var(--fs-base)}
.lp-hero .tryb button{font-size:var(--fs-micro)}
.lp-rule .no,.lp-item .n,.lp-rows--asked .l,.lp-dek{font-size:var(--fs-lead)}
.lp-dek i{font-size:1em}               /* was 1.1em: no baseline wobble mid-dek */
.lp-qa h3{font-size:var(--fs-figure)}
.lp-brand{font-size:var(--fs-figure)}
/* measures: ch delivers ~18% more characters than it reads in Archivo — and
   more than that at 14px, where the average glyph is narrower still relative
   to "0". 60ch was re-measured at 79 chars per line, so it is set from the
   measurement rather than from the correction factor. */
.lp-fine{max-width:54ch}
.lp-rows .l small{max-width:56ch}
.lp-body p{max-width:52ch}
@media(max-width:640px){
  .lp-dek{font-size:var(--fs-lead);line-height:1.6;max-width:none}
  .lp-hero .tryb input{font-size:var(--fs-base)}
  .lp-hero .tryb button{font-size:var(--fs-micro)}
}