/* GENERATED by scripts/sync-lit-path.mjs from homepage-static/lit-path.src.html. Do not edit. */

/* ============================================================
   The Advocate Ally, homepage direction "Lit Path" v6
   One visual world: warm paper, ink, a single teal accent, gold for
   light, flame and highlighter. Photographs are dithered at runtime
   into the same engraved texture as the torch, then resolve as you
   scroll. Committed light theme on purpose (no dark surfaces).
   ============================================================ */
.lp {
  color-scheme: light;
  --paper: #fdfbf7; --paper-2: #f3ede1; --paper-3: #eae2d0; --card: #f7f2e8;
  --ink: #12201b; --ink-2: #2a3a33; --muted: #5b6a63; --faint: #8b978f;
  --hair: #e4ddd0; --hair-2: #d6ccb9;
  --brand: #0d9488; --brand-2: #0b7f75; --brand-tint: #e4f3f0; --brand-tint-2: #cfe9e4;
  --gold: #c9871a; --gold-2: #e3a43a; --gold-tint: #f6ead2; --gold-ink: #8a5a0e;
  --crit: #b42318; --crit-tint: #fbe5e2;
  --focus: 0 0 0 3px rgba(13, 148, 136, 0.35);
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shell: 1200px;
}
.lp * { box-sizing: border-box; }
.lp { background: var(--paper); color: var(--ink); font: 500 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
.lp img { max-width: 100%; display: block; }
.lp a { color: inherit; }
.lp button { font: inherit; }
.lp :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.lp .shell { width: min(var(--shell), calc(100% - 48px)); margin: 0 auto; }
.lp { position: relative; }

/* ---------- torchlight: a warm pool of light follows the pointer (desktop only) ---------- */

/* ---------- the golden path: drawn down the margin as you read ---------- */

/* ---------- type ---------- */
.lp .kicker { font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-2); margin: 0 0 18px; }
.lp h1, .lp h2, .lp h3 { font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; letter-spacing: -0.018em; text-wrap: balance; margin: 0; }
.lp h1 { font-size: clamp(46px, 7.6vw, 104px); line-height: .98; }
.lp h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; }
.lp h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.lp h1 em, .lp h2 em, .lp h3 em { font-style: italic; font-weight: 500; color: var(--brand-2); }
/* gold sheen sweeps across the emphasised words once they come into view */
.lp.js .rv.in h2 em, .lp.js h2.rv.in em { background: linear-gradient(100deg, var(--brand-2) 0%, var(--brand-2) 40%, var(--gold-2) 50%, var(--brand-2) 60%, var(--brand-2) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 1.8s var(--ease) .3s 1 both; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.lp .lede { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.55; color: var(--ink-2); max-width: 36em; margin: 0; }
.lp p { margin: 0; }

/* ---------- buttons, pills ---------- */
.lp .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; cursor: pointer; overflow: hidden; }
.lp .btn--primary { background: var(--brand); color: #fff; box-shadow: 0 14px 30px -18px rgba(13, 148, 136, .8); }
.lp .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.lp .btn--primary:hover::after { transform: translateX(120%); }
.lp .btn--primary:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 18px 36px -18px rgba(13, 148, 136, .9); }
.lp .btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.lp .btn--ghost:hover { background: var(--card); transform: translateY(-1px); }
.lp .btn svg { width: 18px; height: 18px; }
.lp .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 12px/1 var(--sans); white-space: nowrap; }
.lp .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp .pill--brand { background: var(--brand-tint); color: var(--brand-2); }
.lp .pill--gold { background: var(--gold-tint); color: var(--gold-ink); }
.lp .pill--crit { background: var(--crit-tint); color: var(--crit); }
.lp .pill--muted { background: var(--paper-3); color: var(--muted); }
.lp .ref { font: 600 12px/1 var(--sans); color: var(--muted); background: linear-gradient(transparent 55%, var(--gold-tint) 55%); padding: 0 2px; border-radius: 2px; white-space: nowrap; }
.lp .tx { font: 500 9px/1.45 var(--sans); color: var(--muted); display: block; margin: 0 0 6px; }
.lp .tx b { display: block; font: 700 9px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.lp .tx.hl { background: linear-gradient(transparent 12%, rgba(201, 135, 26, .38) 12%, rgba(201, 135, 26, .38) 88%, transparent 88%); color: var(--ink); }

/* ---------- nav ---------- */

/* ---------- hero: the torch ---------- */
@keyframes ember { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.lp .proof { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; flex-wrap: wrap; }
.lp .faces { display: flex; }
.lp .faces .av { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -10px; box-shadow: 0 6px 14px -8px rgba(18, 32, 27, .35); background: var(--paper-2); overflow: hidden; }
.lp .faces .av:first-child { margin-left: 0; }
.lp .faces .av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.lp .stars { display: inline-flex; gap: 2px; color: #e3a43a; }
.lp .stars svg { fill: currentColor; width: 18px; height: 18px; }
.lp .proof__text { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.lp .proof__text b { display: block; font-weight: 700; color: var(--ink); }
/* Faces ship as small engravings (homepage-static/imagery/face-*.png, baked by scripts/dither-image.py); keep the dots crisp. */
.lp .av img { image-rendering: pixelated; }
/* Phones only: the bar has no room for a sign-in link beside the brand and the button. */
.lp .fact b { display: block; font: 600 34px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp .fact span { font-size: 13px; color: var(--muted); }
/* load choreography (JS only) */
@keyframes rise { from { opacity: 0; transform: translateY(.9em) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 720px) {
  /* Phones: the whole torch sits top right (flame, hand, papers), the proof cluster top left, and the copy rises over the papers. */
  /* svh minus the sticky nav, not 100vh: on phones 100vh runs under the browser toolbar and hides whatever sits at the bottom. With the inner wrappers flattened every hero element is its own grid row, so pack the rows at the bottom instead of letting them stretch across the screen. */
  .lp .proof { position: static; order: 4; margin: 0 0 16px; gap: 10px; }
  .lp .faces .av { width: 34px; height: 34px; margin-left: -9px; }
  .lp .proof__text { font-size: 13px; }
  .lp .stars svg { width: 15px; height: 15px; }
  .lp .signed-in .hero__note--signin { display: none; }
  /* Signed in: the dashboard is the one control; the hero carries the free-review button. */
  .lp .fact b { font-size: 26px; }
  .lp .fact span { font-size: 12px; line-height: 1.3; display: block; }
}

/* ---------- proof band ---------- */
.lp .stat__portrait { width: 80px; height: 80px; flex: none; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center 25%; object-position: center 25%; border-radius: 50%; }
@media (max-width: 860px) {
  .lp .stat__portrait { width: 68px; height: 68px; }
}

/* ---------- dithered photographs (runtime ordered dither, resolves on scroll) ---------- */
.lp .dither { --dp: 0; position: relative; overflow: hidden; background: var(--paper-3); margin: 0; }
.lp .dither img, .lp .dither canvas { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.lp .dither canvas { image-rendering: pixelated; }
.lp .dither img { opacity: clamp(0, calc((var(--dp) - .25) * 1.8), 1); transition: opacity .12s linear; }
.lp.rm .dither img, .lp:not(.js) .dither img { opacity: 1; }

/* ---------- interludes: full-bleed images with one line of copy ---------- */
.lp .inter { position: relative; padding: clamp(80px, 12vh, 150px) 0; overflow: hidden; }
.lp .inter__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lp .inter .dither { aspect-ratio: 4 / 5; border-radius: 28px; box-shadow: 0 60px 100px -60px rgba(18, 32, 27, .55); }
.lp .inter--flip .inter__grid > .dither { order: 2; }
.lp .inter .lede { margin-top: 18px; }
.lp .inter .cap { margin-top: 18px; font-size: 13px; color: var(--faint); }
.lp .inter .light { position: absolute; width: 60vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(249, 198, 76, .22) 0%, rgba(249, 198, 76, .08) 40%, transparent 68%); pointer-events: none; z-index: -1; }
.lp .inter--a .light { right: -20vw; top: -10%; }
.lp .inter--b .light { left: -20vw; bottom: -10%; }
@media (max-width: 960px) { .lp .inter__grid { grid-template-columns: 1fr; } .lp .inter--flip .inter__grid > .dither { order: 0; } .lp .inter .dither { aspect-ratio: 4 / 3; } }

/* ---------- chapters (pinned stages on desktop, sequential on phones) ---------- */
.lp .chapter { padding: clamp(80px, 12vh, 150px) 0 0; }
.lp .pin { position: relative; height: calc(var(--n) * 80vh + 20vh); }
.lp .pin__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.lp .pin__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; width: 100%; }
.lp .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp .steps li { padding: 14px 16px 14px 18px; border-left: 2px solid var(--hair); transition: border-color .4s, opacity .4s; opacity: .45; }
.lp .steps li.on { border-color: var(--gold); opacity: 1; }
.lp:not(.js) .steps li, .lp.rm .steps li { opacity: 1; }
.lp .steps b { display: block; font: 600 clamp(20px, 1.7vw, 25px)/1.2 var(--serif); margin-bottom: 6px; }
.lp .steps p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.lp .steps small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.lp .steps li.on small { color: var(--gold-ink); }
.lp .stage { position: relative; width: 100%; max-width: 640px; margin-left: auto; aspect-ratio: 1 / .92; }
.lp .pin[data-step="0"] .L0, .lp .pin[data-step="1"] .L1, .lp .pin[data-step="2"] .L2, .lp .pin[data-step="3"] .L3, .lp .pin[data-step="4"] .L4 { opacity: 1; transform: none; }
@media (max-width: 960px) {
  /* phones keep the pinned animation: the stage on top, one caption below */
  .lp .pin { height: calc(var(--n) * 60vh + 14vh); }
  .lp .pin__sticky { align-items: flex-start; padding-top: 74px; }
  .lp .pin__grid { grid-template-columns: 1fr; gap: 14px; }
  .lp .stage { max-width: 100%; margin: 0; aspect-ratio: 1 / 1; order: -1; }
  .lp.js .steps li { display: none; }
  .lp.js .steps li.on { display: block; animation: fade .5s var(--ease) both; }
  .lp .steps li { border-left: 2px solid var(--gold); padding: 6px 0 6px 14px; }
  .lp .steps b { font-size: 22px; }
  .lp .steps p { font-size: 15.5px; }
  .lp .stage .ring, .lp .stage .ring__cap { display: none; }
  .lp .stage .areas { right: 4%; }
  .lp .packet .price { display: none; }
  .lp .pin--packet { --fan: .42; }
  .lp .pin--packet .pg { width: 66%; top: 2%; }
  .lp .pin--packet .stage { aspect-ratio: 1 / 1.08; }
  .lp .pin--packet .folder { height: 22%; opacity: .75; }
}


/* ---------- the engine stage: a fixed 640x520 design, scaled to fit wherever it sits ---------- */
.lp .edoc { background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 30px 50px -36px rgba(18, 32, 27, .5); overflow: hidden; display: flex; flex-direction: column; }
.lp .edoc small { display: block; font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 6px; }
.lp .edoc > b { display: block; font: 600 17px/1.15 var(--serif); margin-bottom: 8px; color: var(--ink); }
.lp .edoc .tx { font-size: 8.5px; margin-bottom: 5px; }
.lp .edoc .tx b { font-size: 8.5px; }
.lp .edoc .pill { margin-top: auto; align-self: flex-start; font-size: 11px; }
.lp .edoc .beam { position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient(to bottom, transparent, rgba(13, 148, 136, .28), transparent); opacity: 0; pointer-events: none; }
@keyframes scan { from { top: -30px; } to { top: 100%; } }
@keyframes hubpulse { 0%, 100% { box-shadow: 0 20px 40px -24px rgba(18, 32, 27, .5), 0 0 0 10px rgba(13, 148, 136, .06); } 50% { box-shadow: 0 20px 40px -24px rgba(18, 32, 27, .5), 0 0 0 22px rgba(13, 148, 136, .1); } }
@keyframes ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.lp .ecap { left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: center; opacity: 0; transition: opacity .6s .9s; }
.lp .grid84 { left: 152px; top: 120px; width: 336px; display: grid; grid-template-columns: repeat(12, 22px); gap: 6px; }
.lp .glegend { left: 60px; right: 60px; top: 340px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
.lp .glegend span { font: 600 11px/1 var(--sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.lp .glegend span i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.lp .ecap--grid { bottom: 34px; flex-direction: column; align-items: center; gap: 4px; }
.lp .ecap--grid b { font: 600 26px/1 var(--serif); color: var(--ink); }
.lp .ecap--grid span { font-size: 13px; color: var(--muted); }
.lp .epage { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 18px 16px 30px; box-shadow: 0 30px 50px -40px rgba(18, 32, 27, .5); overflow: hidden; }
.lp .epage small { display: block; font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 8px; }
.lp .epage .tx { font-size: 10px; margin-bottom: 6px; }
.lp .epage .tx b { font-size: 10px; }
.lp .epage .cell { margin: 8px 0; border: 1px dashed var(--gold); background: var(--gold-tint); border-radius: 6px; padding: 8px; font: 600 11px/1.3 var(--sans); color: var(--gold-ink); }
.lp .epage .q { position: absolute; left: 16px; bottom: 10px; font: 600 10px/1 var(--sans); color: var(--muted); }
.lp .epage.ghost { opacity: .9; }
@keyframes fromleft { from { opacity: 0; transform: translateX(-50px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes fromright { from { opacity: 0; transform: translateX(50px) rotate(3deg); } to { opacity: 1; transform: none; } }
.lp .ethread { left: 0; top: 0; width: 640px; height: 520px; pointer-events: none; overflow: visible; }
.lp .ethread path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; filter: drop-shadow(0 0 5px rgba(201, 135, 26, .5)); transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.lp .elink { transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: 10px 14px; font: 700 13px/1 var(--sans); box-shadow: 0 20px 40px -28px rgba(18, 32, 27, .5); white-space: nowrap; display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .6s 1.5s; }
.lp .elink i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.lp .efind { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 30px 60px -40px rgba(18, 32, 27, .5); }
.lp .efind .row { display: flex; gap: 6px; flex-wrap: wrap; }
.lp .efind h4 { margin: 10px 0 8px; font: 600 22px/1.15 var(--serif); }
.lp .efind dl { margin: 10px 0 0; display: grid; gap: 10px; }
.lp .efind dt { font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.lp .efind dd { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
@keyframes hlpop { from { background: transparent; } to { background: rgba(201, 135, 26, .38); } }
.lp .E5 .cov { position: absolute; }


/* compact engine for phones: bigger type inside the scaled stage, smaller reviewer dots, fewer lines per record */

/* chapter 1 layers (legacy, kept for the other chapters) */
.lp .docs { position: absolute; inset: 8% 6%; display: flex; gap: 4%; align-items: flex-end; }
.lp .doc { flex: 1; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 16px 14px 14px; box-shadow: 0 30px 50px -36px rgba(18, 32, 27, .5); overflow: hidden; display: flex; flex-direction: column; }
.lp .doc:nth-child(1) { height: 78%; } .lp .doc:nth-child(2) { height: 62%; } .lp .doc:nth-child(3) { height: 68%; }
.lp .doc small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 8px; }
.lp .doc > b { display: block; font: 600 18px/1.15 var(--serif); margin-bottom: 12px; }
.lp .doc .pill { margin-top: auto; align-self: flex-start; }
.lp .pin[data-step="0"] .doc { animation: pop .9s var(--ease) both; animation-delay: calc(var(--i) * 140ms); }
.lp .tile { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 12px 10px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.lp .tile i { width: 10px; height: 10px; border-radius: 3px; background: var(--paper-3); flex: none; transition: background .4s, transform .4s var(--ease); }
.lp .pin[data-step="1"] .tile { animation: lit .7s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes lit { 0% { background: var(--card); color: var(--muted); } 100% { background: var(--brand-tint); color: var(--ink); border-color: var(--brand-tint-2); } }
.lp .pin[data-step="1"] .tile i { background: var(--brand); transform: rotate(45deg); transition-delay: calc(var(--i) * 110ms + 350ms); }
.lp .pin[data-step="1"] .ring .fg, .lp .pin[data-step="2"] .ring .fg, .lp .pin[data-step="3"] .ring .fg, .lp .pin[data-step="4"] .ring .fg { stroke-dashoffset: 0; }
.lp .zoom { position: absolute; left: 2%; top: 4%; width: 54%; aspect-ratio: 8.5 / 11; background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 7% 7%; overflow: hidden; box-shadow: 0 40px 70px -44px rgba(18, 32, 27, .5); }
.lp .zoom .q { position: absolute; left: 7%; bottom: 5%; font: 600 11px/1 var(--sans); color: var(--muted); }
.lp .big { position: absolute; right: 0; top: 16%; width: 52%; background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 30px 60px -40px rgba(18, 32, 27, .5); }
.lp .big h4 { margin: 10px 0 8px; font: 600 clamp(18px, 1.6vw, 24px)/1.15 var(--serif); }
.lp .big dl { margin: 12px 0 0; display: grid; gap: 10px; }
.lp .big dt { font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.lp .big dd { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lp .big .row { display: flex; gap: 6px; flex-wrap: wrap; }
.lp .pin[data-step="2"] .big > * { animation: fade .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 400ms); }
.lp .two { position: absolute; inset: 6% 2%; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: start; }
.lp .mini { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 8% 7% 12%; box-shadow: 0 30px 50px -40px rgba(18, 32, 27, .5); position: relative; }
.lp .mini small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 10px; }
.lp .mini .cell { margin-top: 8px; border: 1px dashed var(--gold); background: var(--gold-tint); border-radius: 6px; padding: 8px; font: 600 12px/1.3 var(--sans); color: var(--gold-ink); }
.lp .mini .foot { position: absolute; left: 7%; bottom: 4%; font: 600 11px/1 var(--sans); color: var(--muted); }
.lp .link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: 10px 14px; font: 700 13px/1 var(--sans); box-shadow: 0 20px 40px -28px rgba(18, 32, 27, .5); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.lp .link i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.lp .pin[data-step="3"] .link { animation: pop .8s var(--ease) .5s both; }
.lp .cov { position: absolute; left: 4%; right: 4%; top: 18%; background: var(--card); border: 1px solid var(--hair); border-radius: 20px; padding: 26px 28px 24px; box-shadow: 0 30px 60px -40px rgba(18, 32, 27, .45); }
.lp .cov b { font: 600 clamp(22px, 2vw, 30px)/1.2 var(--serif); display: block; margin-bottom: 14px; }
.lp .bar { height: 10px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.lp .bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width 1.4s var(--ease) .3s; }
.lp .pin[data-step="4"] .bar i { width: 72.6%; }
.lp .cov .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 10px; }
.lp .cov .note { margin-top: 18px; padding: 14px 16px; background: var(--gold-tint); border-radius: 12px; font-size: 14px; color: var(--gold-ink); display: flex; gap: 10px; align-items: flex-start; }
.lp .cov .note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.lp .cov ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.lp .cov li { display: flex; gap: 10px; align-items: center; }
.lp .cov li i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.lp .cov li.x i { background: var(--gold); }
@media (max-width: 960px) { .lp .cov { padding: 20px 18px 18px; } .lp .big { width: 58%; } }

/* chapter 2: device */
.lp .device { position: absolute; inset: 0 8%; background: var(--card); border: 1px solid var(--hair); border-radius: 26px; box-shadow: 0 50px 90px -50px rgba(18, 32, 27, .55); overflow: hidden; display: flex; flex-direction: column; }
.lp .device__bar { height: 52px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; padding: 0 18px; font-weight: 600; font-size: 14px; color: var(--ink-2); flex: none; }
.lp .device__bar .brand__mark { width: 28px; height: 28px; border-radius: 8px; }
.lp .device__bar .brand__mark svg { width: 14px; height: 14px; }
.lp .device__bar span:last-child { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
.lp .screens { position: relative; flex: 1; }
.lp .screen { position: absolute; inset: 0; padding: 22px 20px; overflow: hidden; background: var(--card); transition: transform .8s var(--ease), opacity .8s var(--ease); }
.lp .screen .kicker { margin-bottom: 8px; font-size: 11px; }
.lp .screen h4 { margin: 0 0 14px; font: 600 clamp(20px, 1.9vw, 28px)/1.1 var(--serif); }
.lp .next { background: var(--paper-2); border: 1px solid var(--hair); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.lp .next small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.lp .next b { display: block; font: 600 18px/1.2 var(--serif); margin-bottom: 8px; }
.lp .next .btn { padding: 10px 14px; font-size: 13px; }
.lp .rows { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.lp .scr-concern { transform: translateX(104%); }
.lp .scr-concern .box { border: 1px solid var(--hair); border-radius: 14px; padding: 14px; margin-bottom: 10px; background: #fff; }
.lp .scr-concern .box small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.lp .scr-concern .box p { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.lp .mark { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hair-2); border-radius: 999px; padding: 10px 14px; font-weight: 700; font-size: 14px; background: #fff; transition: background .5s, border-color .5s, color .5s; }
.lp .mark i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hair-2); display: grid; place-items: center; transition: background .5s, border-color .5s; }
.lp .mark i svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .3s .2s; }
.lp .next .unlock { display: none; }
.lp .next .cont { display: inline-flex; }

/* chapter 3: the packet */
.lp .packet { position: absolute; inset: 0; perspective: 1400px; }
.lp .folder { position: absolute; left: 6%; right: 6%; bottom: 0; height: 34%; background: linear-gradient(180deg, #f3ecdd, #e9e0cd); border: 1px solid var(--hair-2); border-radius: 18px 18px 10px 10px; box-shadow: 0 40px 70px -46px rgba(18, 32, 27, .45); }
.lp .folder::before { content: ""; position: absolute; left: -1px; right: 46%; top: -14px; height: 20px; background: #f3ecdd; border: 1px solid var(--hair-2); border-bottom: 0; border-radius: 12px 12px 0 0; }
.lp .pg { position: absolute; left: 50%; top: 4%; width: 54%; aspect-ratio: 8.5 / 11; background: #fff; border: 1px solid var(--hair); border-radius: 6px; box-shadow: 0 30px 60px -36px rgba(18, 32, 27, .55), 0 1px 0 rgba(255, 255, 255, .8) inset; padding: 6% 6.5%; transform-origin: 50% 110%; transform: translate(-50%, 0) rotate(0deg); transition: transform .9s var(--ease), box-shadow .5s; will-change: transform; font-size: clamp(8px, .95vw, 12px); line-height: 1.45; color: var(--ink-2); overflow: hidden; }
.lp .pg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%); transform: translateX(-120%); transition: transform 1.2s var(--ease); pointer-events: none; }
.lp .pg .k { font: 700 .82em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); margin-bottom: .9em; display: flex; justify-content: space-between; align-items: center; }
.lp .pg .k .heart { width: 1.3em; height: 1.3em; color: var(--brand); }
.lp .pg h5 { font: 600 1.9em/1.1 var(--serif); color: var(--ink); margin: 0 0 .7em; }
.lp .pg p { margin: 0 0 .7em; }
.lp .pg ol, .lp .pg ul { margin: 0 0 .7em; padding-left: 1.4em; }
.lp .pg li { margin-bottom: .55em; }
.lp .pg .ans { display: block; height: 1.1em; border-bottom: 1px solid var(--hair-2); margin-top: .35em; }
.lp .pg .cb { display: inline-block; width: 1em; height: 1em; border: 1px solid var(--ink-2); border-radius: 2px; vertical-align: -.15em; margin-right: .5em; }
.lp .pg .cb.on { background: var(--brand); border-color: var(--brand); }
.lp .pg .foot { position: absolute; left: 6.5%; right: 6.5%; bottom: 4%; display: flex; justify-content: space-between; font-size: .8em; color: var(--faint); border-top: 1px solid var(--hair); padding-top: .6em; }
.lp .pg .ref { font-size: .82em; }
.lp .pg .clip { position: absolute; right: 8%; top: -3%; width: 2.2em; height: 5em; border: .32em solid #9aa6a1; border-radius: 1.2em; border-bottom-color: transparent; transform: rotate(8deg); opacity: .9; }
.lp .pg .toc li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--hair-2); padding-bottom: .3em; list-style: none; }
.lp .pg .toc { padding: 0; }
.lp .pg .use { margin-top: 1.1em; padding-top: .9em; border-top: 1px solid var(--hair); }
.lp .pg .use b { display: block; font: 700 .82em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); margin-bottom: .7em; }
.lp .pg .use ol { padding-left: 1.3em; margin: 0; }
.lp .pg .use li { margin-bottom: .45em; }
.lp .pg.pg-0 { z-index: 5; } .lp .pg.pg-1 { z-index: 4; } .lp .pg.pg-2 { z-index: 3; } .lp .pg.pg-3 { z-index: 2; } .lp .pg.pg-4 { z-index: 1; }
.lp .pin--packet .pg-0 { transform: translate(-50%, 0) rotate(calc(var(--f, 1) * var(--fan, 1) * -2deg)) translateX(calc(var(--f, 1) * var(--fan, 1) * -6%)); }
.lp .pin--packet .pg-1 { transform: translate(-50%, 0) rotate(calc(var(--f, 1) * var(--fan, 1) * -9deg)) translateX(calc(var(--f, 1) * var(--fan, 1) * -24%)); }
.lp .pin--packet .pg-2 { transform: translate(-50%, 0) rotate(calc(var(--f, 1) * var(--fan, 1) * 5deg)) translateX(calc(var(--f, 1) * var(--fan, 1) * 18%)); }
.lp .pin--packet .pg-3 { transform: translate(-50%, 0) rotate(calc(var(--f, 1) * var(--fan, 1) * 13deg)) translateX(calc(var(--f, 1) * var(--fan, 1) * 36%)); }
.lp .pin--packet .pg-4 { transform: translate(-50%, 0) rotate(calc(var(--f, 1) * var(--fan, 1) * -16deg)) translateX(calc(var(--f, 1) * var(--fan, 1) * -42%)); }
.lp .pin--packet[data-step="0"] .pg-0, .lp .pin--packet[data-step="1"] .pg-1, .lp .pin--packet[data-step="2"] .pg-2, .lp .pin--packet[data-step="3"] .pg-3, .lp .pin--packet[data-step="4"] .pg-4 { z-index: 9; transform: translate(-50%, -4%) rotate(0deg) scale(1.04) rotateX(2deg); box-shadow: 0 60px 90px -40px rgba(18, 32, 27, .6); }
.lp .pin--packet[data-step="0"] .pg-0::after, .lp .pin--packet[data-step="1"] .pg-1::after, .lp .pin--packet[data-step="2"] .pg-2::after, .lp .pin--packet[data-step="3"] .pg-3::after, .lp .pin--packet[data-step="4"] .pg-4::after { transform: translateX(120%); }
.lp .pin--packet .pg:hover { z-index: 10; transform: translate(-50%, -4%) rotate(0deg) scale(1.05); }
.lp .price { position: absolute; left: 4%; bottom: 6%; background: var(--card); color: var(--ink-2); border: 1px solid var(--gold); border-radius: 16px; padding: 12px 16px; font-size: 13px; line-height: 1.3; box-shadow: 0 24px 44px -28px rgba(18, 32, 27, .45); z-index: 12; }
.lp .price b { display: block; font: 600 26px/1 var(--serif); color: var(--gold-ink); margin-bottom: 4px; }
@media (max-width: 960px) { .lp .packet .price { left: 2%; top: 0; bottom: auto; padding: 10px 12px; font-size: 12px; } .lp .packet .price b { font-size: 20px; } }

/* ---------- wall of love ---------- */
.lp .love { padding: clamp(90px, 14vh, 170px) 0 40px; position: relative; }
.lp .love__head { text-align: center; max-width: 820px; margin: 0 auto 30px; }
.lp .love__head .stars svg { width: 26px; height: 26px; }
.lp .love__head .stars { justify-content: center; margin-bottom: 20px; gap: 6px; }
.lp.js .love__head .stars svg { opacity: 0; transform: scale(.4) rotate(-20deg); }
.lp.js .love__head.in .stars svg { animation: star .6s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes star { to { opacity: 1; transform: none; } }
.lp .love__sub { display: flex; justify-content: center; gap: 18px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.lp .love__sub .faces .av { width: 48px; height: 48px; }
.lp .note-sticky { position: absolute; right: max(12px, calc((100% - var(--shell)) / 2 - 20px)); top: clamp(60px, 9vh, 110px); transform: rotate(3deg); background: var(--gold-tint); color: var(--gold-ink); font: 600 13px/1.4 var(--sans); padding: 14px 16px; width: 220px; border-radius: 4px; box-shadow: 0 16px 30px -18px rgba(18, 32, 27, .5); z-index: 2; }
.lp .note-sticky::before { content: ""; position: absolute; left: 50%; top: -8px; width: 54px; height: 16px; transform: translateX(-50%) rotate(-2deg); background: rgba(255, 255, 255, .55); border-radius: 2px; }
@media (max-width: 1100px) { .lp .note-sticky { position: static; transform: none; width: auto; margin: 0 auto 26px; max-width: 460px; text-align: center; } }
.lp .marquee { overflow: hidden; margin: 34px 0 10px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp .marquee__track { display: flex; gap: 12px; width: -moz-max-content; width: max-content; animation: slide 60s linear infinite; }
.lp .marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 74s; }
.lp .marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.lp .cmt { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: 8px 14px 8px 8px; font-size: 14px; white-space: nowrap; }
.lp .cmt .av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; }
.lp .cmt .av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.lp .cmt .stars svg { width: 12px; height: 12px; }
.lp .wall { -moz-columns: 3; columns: 3; -moz-column-gap: 18px; column-gap: 18px; margin-top: 40px; }
.lp .tcard { -moz-column-break-inside: avoid; break-inside: avoid; background: var(--card); border: 1px solid var(--hair); border-radius: 20px; padding: 22px 22px 18px; margin: 0 0 18px; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lp .tcard:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(18, 32, 27, .45); }
.lp .tcard .top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.lp .tcard .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; }
.lp .tcard .av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.lp .tcard .who b { display: block; font-weight: 700; font-size: 15px; }
.lp .tcard .who span { font-size: 13px; color: var(--muted); }
.lp .tcard q { quotes: none; font: italic 500 clamp(18px, 1.4vw, 21px)/1.35 var(--serif); color: var(--ink); display: block; }
.lp .tcard .stars { margin-top: 12px; }
.lp .tcard .stars svg { width: 14px; height: 14px; }
.lp .av--ini { display: grid; place-items: center; font: 800 15px/1 var(--sans); }
.lp .ini--brand { background: var(--brand-tint); color: var(--brand-2); }
.lp .ini--gold { background: var(--gold-tint); color: var(--gold-ink); }
.lp .ini--paper { background: var(--paper-3); color: var(--ink-2); }
.lp .cmt b { font-weight: 700; margin-right: 2px; }
.lp .cmt .av--ini { font-size: 12px; }
.lp .wall__note { text-align: center; font-size: 13px; color: var(--faint); margin-top: 8px; }
@media (max-width: 960px) { .lp .wall { -moz-columns: 2; columns: 2; } }
@media (max-width: 640px) { .lp .wall { -moz-columns: 1; columns: 1; } }
.lp .platforms { display: flex; gap: 14px; justify-content: center; margin: 34px 0 0; flex-wrap: wrap; }
.lp .platforms span { border: 1px solid var(--hair); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--muted); background: var(--card); }

/* ---------- care (trust) ---------- */
.lp .ccard2 { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lp .ccard2:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(18, 32, 27, .4); }
.lp .ccard2 .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--brand-tint); color: var(--brand-2); display: grid; place-items: center; margin-bottom: 16px; }
.lp .ccard2 .ico svg { width: 20px; height: 20px; }
.lp .ccard2 b { display: block; font: 600 22px/1.15 var(--serif); margin-bottom: 8px; }
.lp .ccard2 p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.lp .isnot { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp .isnot li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.lp .isnot li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand-2); }

/* ---------- founders ---------- */
.lp .portrait { position: relative; max-width: 440px; }
.lp .portrait img { border-radius: 24px; aspect-ratio: 527 / 640; -o-object-fit: cover; object-fit: cover; box-shadow: 0 50px 90px -50px rgba(18, 32, 27, .55); }
.lp .portrait .frame { position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--hair-2); border-radius: 26px; z-index: -1; }
.lp .portrait .cap { position: absolute; left: 18px; bottom: 18px; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 20px 40px -26px rgba(18, 32, 27, .5); }
.lp .portrait .cap .brand__mark { width: 30px; height: 30px; border-radius: 9px; }
.lp .portrait .cap .brand__mark svg { width: 14px; height: 14px; }
.lp .portrait .cap b { display: block; font-size: 15px; }
.lp .portrait .cap small { color: var(--muted); font-size: 12px; }
.lp .honest { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--gold-tint); border-radius: 0 12px 12px 0; font-size: 14px; color: var(--gold-ink); }
@media (max-width: 960px) { .lp .portrait { margin: 0 auto; } }

/* ---------- faq ---------- */

/* ---------- final: the torch again, resolving into the photograph ---------- */
.lp .credits { margin-top: 14px; font-size: 12px; color: var(--faint); }

/* ---------- phones: tighter vertical rhythm ---------- */
@media (max-width: 720px) {
  .lp .chapter { padding-top: 56px; }
  .lp .inter { padding: 56px 0; }
  .lp .love { padding: 64px 0 24px; }
  .lp .marquee { margin: 24px 0 6px; }
  .lp .wall { margin-top: 26px; }
}

/* ---------- reveal + motion preferences ---------- */
.lp.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.lp.js .rv.in { opacity: 1; transform: none; }
.lp.rm .rv, .lp.rm .love__head .stars svg { opacity: 1 !important; transform: none !important; animation: none !important; }
.lp.rm .pin { height: auto; }
.lp.rm .pin__sticky { position: static; height: auto; padding: 60px 0; overflow: visible; }
.lp.rm .stage { aspect-ratio: auto; }
.lp.rm .stage .layer { min-height: 520px; }
.lp.rm .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.lp.rm .marquee { mask-image: none; -webkit-mask-image: none; }
.lp.rm .btn--primary::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .lp { } }