/* The landing page (templates/landing.html), generated from the design in notes/brand and design/ and then edited by hand.
   Everything is scoped under .lp so the product's own styles are untouched. See paper.css for tokens and fonts. */
html:has(.lp) { font-size: 93.75%; }
.lp, .lp * { box-sizing: border-box; }
body.paper { background: var(--desk); color: var(--graphite); font: 400 1.0625rem/1.6 var(--font-body); margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.lp h1,
.lp h2,
.lp h3 { font-family: var(--font-display); margin: 0; color: var(--graphite); text-wrap: balance; }
.lp p { margin: 0; }
.lp a { color: inherit; }
.lp :focus-visible { outline: 3px solid var(--pen); outline-offset: 4px; border-radius: 2px; }
.lp .mono { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; }
.lp .eyebrow { text-transform: uppercase; letter-spacing: .16em; color: var(--graphite-2); }
.lp .hand { font-family: var(--font-hand); color: var(--pen); font-weight: 400; letter-spacing: 0; }
.lp .w { display: inline-block; }
.lp .n { font-family: var(--font-display); font-weight: 600; }
.lp .src { font-family: var(--font-mono); font-size: .72rem; line-height: 1.6; letter-spacing: .02em; color: var(--graphite-2); max-width: 40rem; }
.lp .pad { padding-inline: var(--gutter); }
.lp .inner { max-width: 76rem; margin-inline: auto; }
.lp #desk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; transition: opacity .2s linear; }
.lp .page { position: relative; z-index: 1; }
.lp .pen { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; opacity: 0;
  filter: drop-shadow(2px 4px 2px var(--shadow)); transition: opacity .45s, filter .3s; will-change: transform; }
.lp .pen.on { opacity: 1; }
.lp .pen.lifted { filter: drop-shadow(9px 16px 7px var(--shadow)); }
.lp .pen svg { position: absolute; left: calc(var(--pw) * -.5); bottom: 0; width: var(--pw); height: calc(var(--pw) * 7.5); transform-origin: 50% 100%; transform: rotate(var(--pr, 26deg)); overflow: visible; }
.lp .pen .p-tip { fill: var(--graphite-2); }
.lp .pen .p-grip { fill: var(--pen); }
.lp .pen .p-ridge { stroke: var(--sheet); stroke-width: 1; opacity: .45; fill: none; }
.lp .pen .p-barrel { fill: var(--sheet); stroke: var(--graphite); stroke-width: 1.2; }
.lp .pen .p-band { fill: var(--marigold); }
.lp .pen .p-cap { fill: var(--pen); }
.lp .pen .p-clip { fill: none; stroke: var(--graphite-2); stroke-width: 2; stroke-linecap: round; }
.lp .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lp .ln > span { display: block; transition: transform 1.05s var(--ease-out), opacity 1.05s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.lp .is-pre .ln > span { transform: translateY(108%); opacity: 0; }
.lp .ln.is-open { overflow: visible; }
.lp .fade { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.lp .is-pre.fade,
.lp .is-pre .fade { opacity: 0; transform: translateY(1.2rem); }
.lp [data-rough] { position: relative; }
.lp .rl { position: absolute; pointer-events: none; overflow: visible; color: var(--graphite); }
.lp [data-rough-color="ink"] > .rl { color: var(--pen); }
.lp [data-rough="highlight"] { z-index: 0; }
.lp [data-rough="highlight"] > .rl { z-index: -1; color: var(--hl); mix-blend-mode: var(--hl-blend); }
.no-rough .lp [data-rough="box"] { outline: 2px solid currentColor; }
.no-rough .lp [data-rough="circle"] { box-shadow: 0 0 0 2px var(--pen); border-radius: 999px; }
.no-rough .lp [data-rough="highlight"] { background: var(--hl); }
.no-rough .lp [data-rough="underline"] { text-decoration: underline 2px var(--pen); }
.lp .scrib { position: absolute; overflow: visible; pointer-events: none; color: var(--pen); }
.lp .scrib path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp .inl { display: inline-block; }
.lp .sheet { position: relative; background-color: var(--sheet); background-image: var(--grain); border-radius: 2px;
  box-shadow: 0 1px 1px var(--shadow), 0 22px 44px -18px var(--shadow); }
.lp .tape { position: absolute; width: 7.5rem; height: 1.7rem; background: var(--tape); z-index: 2;
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 12%, 96% 0, 100% 10%, 100% 90%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
.lp .lbtn { position: relative; display: inline-flex; align-items: center; gap: .5rem; font: 700 1rem/1 var(--font-body); padding: 1rem 1.4rem; color: var(--graphite); background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.lp .lbtn.primary { background: var(--marigold); color: var(--on-marigold); border-radius: 4px 2px 5px 3px; }
.lp .lbtn.primary > .rl { color: var(--on-marigold); }
.lp .ctas { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: center; }
.lp .ltop { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; }
.lp .lbrand { display: inline-flex; align-items: center; gap: .85rem; font: 800 1.55rem/1 var(--font-display); letter-spacing: -.03em; text-decoration: none; }
.lp .lbrand-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--marigold); display: inline-block; }
.lp .lnav { display: flex; gap: 1.6rem; }
.lp .lnav a { font-weight: 600; font-size: .95rem; text-decoration: none; background: linear-gradient(var(--hl), var(--hl)) 0 88% / 0 .45em no-repeat; transition: background-size .25s; }
.lp .lnav a:hover { background-size: 100% .45em; }
.lp .lhero { min-height: 86svh; display: flex; flex-direction: column; justify-content: center; gap: 1.8rem; padding-block: 3rem 5rem; }
.lp .lhero-copy { display: flex; flex-direction: column; gap: 1.6rem; max-width: 62rem; position: relative; }
.lp .lhero-copy::before { content: ""; position: absolute; inset: -3rem -4rem -3rem -6rem; background: radial-gradient(closest-side, var(--scrim), transparent); z-index: -1; }
.lp .lhero h1 { font-family: var(--font-headline); font-size: var(--fs-mega); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; }
.lp .lhero h1 .hand { display: inline-block; font-size: 1.22em; line-height: .8; letter-spacing: 0; white-space: nowrap; padding-inline: .05em; }
.lp .lead { font-size: var(--fs-lead); color: var(--graphite-2); max-width: 38rem; }
.lp .scrollcue { display: flex; align-items: center; gap: .8rem; color: var(--graphite-2); }
.lp .scrollcue i { width: 1px; height: 3.2rem; background: linear-gradient(var(--graphite-2), transparent); transform-origin: top; animation: lp-cue 2.4s var(--ease-out) infinite; }
@keyframes lp-cue{ 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.lp .pin-sec { position: relative; }
.pin .lp #pile { height: 260vh; }
.lp .sticky { display: flex; align-items: center; padding-block: clamp(3rem, 8vw, 5rem); }
.pin .lp .sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; padding-block: 0; }
.lp .count-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; width: 100%; }
.lp .tally { font: 800 clamp(5.4rem, 3rem + 15vw, 17.5rem)/.8 var(--font-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.lp .count-side { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.8rem; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 2px; }
.lp .count-side h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.08; }
.lp .count-side .claim2 { font: 700 1.2rem/1.3 var(--font-display); letter-spacing: -.01em; }

.lp .track { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 4rem); padding-inline: var(--gutter); align-items: stretch; width: 100%; }
.pin .lp .track { flex-direction: row; will-change: transform; align-items: center; width: auto; }
.lp .chap-intro { max-width: 34rem; display: flex; flex-direction: column; gap: 1rem; }
.lp .chap-intro h2 { font-size: var(--fs-h2); font-weight: 780; letter-spacing: -.04em; line-height: 1; }
.lp .panel { max-width: 34rem; padding: 2.4rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.pin .lp .chap-intro { flex: 0 0 min(30rem, 80vw); }
.pin .lp .panel { flex: 0 0 min(34rem, 84vw); min-height: min(34rem, 72svh); }
.lp .panel .tape { top: -.8rem; left: calc(50% - 3.75rem); transform: rotate(-2deg); }
.lp .panel .no { font: 800 4.5rem/.8 var(--font-display); letter-spacing: -.05em; color: var(--rule); }
.lp .panel h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.05; }
.lp .panel > p { color: var(--graphite-2); }
.lp .panel .ui { margin-top: auto; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.lp .ui-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--rule); }
.lp .ui-row b { font: 700 1.05rem/1.3 var(--font-display); }
.lp .ui-row .mono { color: var(--graphite-2); text-align: right; }
.lp .ui .hand { font-size: 1.5rem; line-height: 1.1; padding-top: .6rem; }
.lp .pick { display: inline-block; padding-inline: .3rem; }
.lp .letter-mini { font-size: .95rem; line-height: 1.6; padding-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.lp .letter-mini .hand { font-size: 1.9rem; line-height: 1; padding: 0; }
.lp .credits { display: flex; flex-direction: column; padding-block: clamp(5rem, 12vw, 10rem); }
.lp .credits header { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.lp .credits header h2 { font-size: var(--fs-h2); font-weight: 780; letter-spacing: -.04em; line-height: 1; }
.lp .credit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(2.2rem, 5vw, 3.6rem); border-top: 1px solid var(--graphite-2); }
.lp .credit:last-child { border-bottom: 1px solid var(--graphite-2); }
.lp .big { font: 800 clamp(3.6rem, 2.2rem + 6.6vw, 8.4rem)/.85 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .big .inl { padding-inline: .06em; }
.lp .big small { font-size: .38em; letter-spacing: -.02em; color: var(--graphite-2); font-weight: 700; }
.lp .credit .txt { display: flex; flex-direction: column; gap: .8rem; }
.lp .credit .claim { font: 700 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.25 var(--font-display); letter-spacing: -.015em; }
.lp .credit .note { color: var(--graphite-2); }
.lp .credits .after { margin-top: clamp(2.5rem, 6vw, 4rem); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; max-width: 48rem; }
.lp .veil { background: var(--scrim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pin .lp #letter { height: 240vh; }
.lp .letter-stage { width: 100%; display: grid; place-items: center; position: relative; }
.lp .big-letter { width: min(46rem, 92vw); padding: calc(var(--lh) * 2) clamp(1.2rem, 3vw, 2.4rem) var(--lh) clamp(3.2rem, 6vw, 4.6rem); line-height: var(--lh); font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); will-change: transform;
  background-image: var(--grain),
    linear-gradient(90deg, transparent 2.6rem, var(--margin) 2.6rem, var(--margin) calc(2.6rem + 1.5px), transparent calc(2.6rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh)); }
.lp .big-letter .head { color: var(--graphite-2); font-size: .72rem; line-height: var(--lh); }
.lp .big-letter .head b { color: var(--graphite); font-weight: 600; }
.lp .to-line { position: relative; margin-top: calc(var(--lh) * 2.2); margin-bottom: calc(var(--lh) * .4); }
.lp .struck { position: relative; display: inline-block; text-decoration: line-through 2px var(--pen); }
.js .lp .struck { text-decoration: none; }
.lp .salute { position: absolute; left: -.2rem; top: calc(var(--lh) * -1.7); font-size: 2.4rem; line-height: 1; transform: rotate(-3deg); white-space: nowrap; }
.lp .big-letter .body { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; column-gap: 1.2rem; }
.lp .big-letter .body p { margin-bottom: var(--lh); }
.lp .big-letter .note { font-size: 1.5rem; line-height: calc(var(--lh) * .82); transform: rotate(-2.5deg); }
.lp .big-letter .sign .hand { font-size: 2rem; }
.lp .big-letter .meta { color: var(--graphite-2); font-size: .7rem; margin-top: var(--lh); }
.lp .postmark { position: absolute; right: .8rem; top: .8rem; width: 6rem; height: 6rem; color: var(--pen); opacity: .85; transform: rotate(14deg); }
.lp .postmark text { font-family: var(--font-mono); fill: currentColor; }
.lp .lreveal { clip-path: inset(-40% calc(100% - var(--r, 1) * 112%) -40% -12%); }
.lp .letter-caps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.pin .lp .letter-caps { position: absolute; left: 0; right: 0; bottom: 6svh; margin: 0; pointer-events: none; }
.lp .letter-caps p { font: 800 clamp(1.4rem, 1rem + 2vw, 3rem)/1 var(--font-display); letter-spacing: -.035em; padding: .4rem .7rem; background: var(--scrim); }
.lp .closing { display: flex; flex-direction: column; gap: clamp(5rem, 11vw, 8rem); padding-block: clamp(5rem, 10vw, 8rem) 3rem; }
.lp .lstory { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.lp .torn-wrap { filter: drop-shadow(0 12px 22px var(--shadow)); min-width: 0; }
.lp .torn { background-color: var(--sheet); padding: calc(var(--lh-hand) * 2) clamp(1.2rem, 3vw, 2.4rem) var(--lh-hand) 4rem;
  background-image: var(--grain),
    linear-gradient(90deg, transparent 2.9rem, var(--margin) 2.9rem, var(--margin) calc(2.9rem + 1.5px), transparent calc(2.9rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh-hand) - 1px), var(--rule) calc(var(--lh-hand) - 1px) var(--lh-hand)); }
.lp .torn h2 { font-size: 1.1rem; font-weight: 750; letter-spacing: .02em; line-height: var(--lh-hand); text-transform: uppercase; color: var(--graphite-2); }
.lp .torn .hand { font-size: 1.95rem; line-height: var(--lh-hand); }
.lp .torn .hand + .hand { margin-top: var(--lh-hand); }
.lp .torn .sig { display: block; font-size: 2.9rem; margin-top: var(--lh-hand); line-height: var(--lh-hand); transform: rotate(-4deg); transform-origin: left; }
.lp .promises { display: flex; flex-direction: column; gap: 1.2rem; padding: 2rem 1.8rem; }
.lp .promises h2 { font-size: 1.6rem; font-weight: 780; letter-spacing: -.03em; }
.lp .promises ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.lp .promises li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .7rem; color: var(--graphite-2); }
.lp .promises li::before { content: "✓"; font: 400 1.6rem/1 var(--font-hand); color: var(--pen); }
.lp .promises b { color: var(--graphite); font-weight: 700; }
.lp .lplans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.lp .lplan { padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.lp .lplan h3 { font-size: 1.3rem; font-weight: 750; }
.lp .lprice { font: 800 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--font-display); letter-spacing: -.04em; }
.lp .lprice small { font: 400 1rem var(--font-body); letter-spacing: 0; color: var(--graphite-2); }
.lp .lplan p { color: var(--graphite-2); }
.lp .lplan .hand { font-size: 1.55rem; line-height: 1.1; }
.lp .final { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.lp .final h2 { font-size: var(--fs-h2); font-weight: 780; letter-spacing: -.04em; line-height: 1; max-width: 50rem; }
.lp .airmail {
  padding: clamp(1.6rem, 4vw, 2.8rem); border: 11px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--margin) 0 14px, var(--sheet) 14px 22px, var(--pen) 22px 36px, var(--sheet) 36px 44px) 11;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: end;
}
.lp .airmail h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); margin: .5rem 0 .6rem; }
.lp .airmail p { color: var(--graphite-2); }
.lp .wl { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; }
.lp .lfield { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 11rem; min-width: 0; }
.lp .lfield span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-2); }
.lp .lfield input { font: 400 1.7rem/1.2 var(--font-hand); color: var(--pen); background: transparent; border: 0; border-bottom: 2px solid var(--graphite-2); padding: .2rem .1rem; width: 100%; }
.lp .lfield input:focus { outline: none; border-bottom-color: var(--pen); }
.lp .wl-done { font-size: 1.7rem; line-height: 1.2; }
.lp .marquee { overflow: hidden; border-block: 1px solid var(--graphite-2); padding-block: 1rem; margin-top: 4rem; }
.lp .marquee .row { display: flex; width: max-content; animation: lp-slide 38s linear infinite; }
.lp .marquee span { font: 800 clamp(1.6rem, 1.2rem + 2vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; padding-right: 2.2rem; white-space: nowrap; }
.lp .marquee span.hand { font-family: var(--font-hand); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); letter-spacing: 0; }
@keyframes lp-slide{ to { transform: translateX(-50%); } }
.lp footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; color: var(--graphite-2); padding-block: 1.4rem 2.5rem; }
@media (prefers-reduced-motion: reduce) {
  .lp, .lp *,
.lp *::before,
.lp *::after { transition: none !important; animation: none !important; }
  .lp .pen, .lp .marquee, .lp .scrollcue { display: none; }
  .lp .lnav a { transition: none; }
}
@media (max-width: 880px) {
  .lp .count-wrap,
.lp .credit,
.lp .lstory,
.lp .lplans,
.lp .airmail { grid-template-columns: minmax(0, 1fr); }
  .lp .count-wrap { align-items: start; }
  .lp .lnav { display: none; }
  .lp .big-letter .body { grid-template-columns: minmax(0, 1fr); }
  .lp .big-letter .note { margin: calc(var(--lh) * -1) 0 var(--lh) .6rem; }
  .pin .lp .letter-caps { flex-direction: column; align-items: flex-start; bottom: 3svh; }
  .lp .postmark { width: 4.6rem; height: 4.6rem; }
  .lp .big-letter .head { padding-right: 4.4rem; }
}
@media (max-width: 640px) {
  .lp { --pw: 16px; }
}

/* tokens that were :root in the design */
.lp {
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --font-headline: "Newsreader", Georgia, serif;
  --pw: 22px;
  --fs-mega: clamp(2.3rem, 1.1rem + 4.6vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem);
  --fs-lead: clamp(1.1rem, 1rem + .4vw, 1.32rem);
  --gutter: max(1rem, 4vw);
  --lh: 1.75rem; --lh-hand: 2.3rem;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
  max-width: none; padding: 0; margin: 0;
}
body.paper { font-family: var(--font-body, "Atkinson Hyperlegible Next", sans-serif); }
.lp .lhero h1 { letter-spacing: -.03em; }   /* Newsreader runs tighter than the design's first serif */

/* ---------- additions for the live page ---------- */
.lp :focus-visible { outline: 3px solid var(--pen); outline-offset: 4px; }
.lp .lbtn { min-height: 44px; justify-content: center; }
.lp .lbtn.primary { background: var(--marigold); color: var(--on-marigold); border-radius: 4px 2px 5px 3px; }
.lp form { margin: 0; display: contents; }
.lp .ctas form { display: inline-flex; }
.lp .lnav a, .lp .ltop-in a { min-height: 44px; display: inline-flex; align-items: center; }
.lp .ltop-in { display: flex; align-items: center; gap: 1.6rem; }
.lp .draft-note { color: var(--graphite); background: var(--hl); padding: .5rem .8rem; border-radius: 2px; margin-top: .5rem; }
.lp .fine { color: var(--graphite-2); font-size: .95rem; max-width: 40rem; }
.lp .src a { color: inherit; text-underline-offset: .18em; }
.lp .walk-hint { display: none; }
.pin .lp .walk-hint { display: block; }
.lp .ex { display: inline-block; align-self: flex-start; color: var(--graphite-2); border: 1px dashed var(--graphite-2); border-radius: 999px; padding: .15rem .6rem; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.lp .lfield select { font: 400 1.7rem/1.2 var(--font-hand); color: var(--pen); background: transparent; border: 0; border-bottom: 2px solid var(--graphite-2); padding: .2rem .1rem; width: 100%; min-height: 44px; border-radius: 0; }
.lp .lfield select:focus { outline: none; border-bottom-color: var(--pen); }
.lp .lfield select option { font: 1rem var(--font-body); color: var(--graphite); background: var(--sheet); }
.lp .lfield input { min-height: 44px; }
.lp .lfield input:focus-visible, .lp .lfield select:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.lp .lphoto { margin: 0; border: 1.5px dashed var(--graphite-2); padding: 1.5rem; color: var(--graphite-2); font-size: .95rem; }
.lp .lfooter a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
.lp .lfooter .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.lp .wl .lbtn { align-self: flex-end; }
.lp .lhero .lbtn + .lbtn, .lp .ctas > * { margin: 0; }
.lp .tally-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 880px) {
  .lp .ltop-in a.anchor { display: none; }
  .lp .ctas { flex-direction: column; align-items: stretch; }
  .lp .ctas .lbtn { width: 100%; }
  .lp .ctas form { display: block; }
}
main.wrap.lp { max-width: none; padding: 0; margin: 0; }
.lp .lbrand { min-height: 44px; }
.lp .lfield select, .lp .lfield input { min-height: 44px; }
html:not(.pin) .lp #desk { opacity: .75; }
.lp .final .ctas { align-self: stretch; }
body.paper.bare:has(.lp) { padding-bottom: 0; }
.lp .lfooter { padding-bottom: calc(2.5rem + 64px); }
/* no pinned walk (reduced motion, no script): the four steps sit in two columns on wide screens instead of one thin column */
@media (min-width: 881px) {
  html:not(.pin) .lp .track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
  html:not(.pin) .lp .chap-intro { grid-column: 1 / -1; }
  html:not(.pin) .lp .panel { max-width: none; height: 100%; }
}
/* without script (or without rough.js) the buttons keep an edge */
html:not(.js) .lp .lbtn, .no-rough .lp .lbtn { border: 2px solid var(--graphite); border-radius: 4px 2px 5px 3px; }