/* Landing page — the public marketing surface at "/".
 *
 * ONE SYSTEM, TURNED UP. Earlier drafts gave this page its own world (a
 * near-black "Night Ledger", then a deep-pine one). Both failed the same way:
 * the product's screenshots are light, so on a dark ground every capture read
 * as a bright bubble floating on a bleak field, and the page had no kinship
 * with the app it was selling. This build is the app's own Quiet Precision
 * palette on a brighter ground — same ink, same teal, same border hairline,
 * same Geist/Inter/JetBrains Mono — pushed to a display scale the app never
 * uses, plus exactly one expressive face (Instrument Serif italic) for the
 * accent word in the headline. Nothing here is a second design system.
 *
 * THE SCREENSHOT PROBLEM, SOLVED BY --lp-lift. A light UI capture on a light
 * page needs a defined edge or it dissolves; a border gives it one but turns it
 * into a framed picture sitting on top of the page. The fix is a single
 * box-shadow declaration carrying a half-pixel ring AND a very large, very soft
 * drop: the ring defines, the drop seats it in the page. Declared once, used by
 * every capture. Do not add a separate `border` to anything using it — a 1px
 * border under a wide soft shadow is the ghost card.
 *
 * Every rule is scoped under `.lp` and this file is loaded by nothing else.
 * Resets use :where() so a single-class rule further down still wins; a plain
 * `.lp p { margin: 0 }` outranks `.lp-note { margin-top: 1rem }` and silently
 * flattens the page's vertical rhythm.
 */

.lp {
  /* Ground and ink are the app's own tokens, so the page reads as the same
     product one step brighter. Accent sections carry a wash rather than a grey
     band, which is why the app's #f7f8fa surface is not used here. */
  --lp-paper: #ffffff;
  --lp-ink: #0f172a;
  --lp-ink-2: #475569;
  --lp-ink-3: #6b7280;
  --lp-line: #e6e8eb;
  --lp-line-soft: #f0f2f4;

  --lp-teal: #0f766e;
  --lp-teal-deep: #115e59;
  --lp-teal-wash: rgba(15, 118, 110, 0.08);

  --lp-display: "Geist", system-ui, sans-serif;
  --lp-body: "Inter", system-ui, sans-serif;
  --lp-accent: "Instrument Serif", Georgia, serif;
  --lp-data: "JetBrains Mono", ui-monospace, monospace;

  --lp-shell: 1240px;
  --lp-radius: 9px;

  /* The ring is 1px at 0.20 alpha -- a little heavier than the FAQ panel's
     `--lp-line` border, which is where it started; at 0.5px/0.09 and again at
     1px/0.14 it still read as a soft halo rather than an edge.
     Kept as an alpha rather than a flat #e6e8eb so it still reads correctly
     where a capture sits over the hero wash rather than over white. */
  --lp-lift:
    0 0 0 1px rgba(15, 23, 42, 0.20),
    0 2px 4px -2px rgba(15, 23, 42, 0.06),
    0 40px 60px -32px rgba(15, 23, 42, 0.14),
    0 120px 160px -60px rgba(15, 23, 42, 0.10);
}

:where(.lp) :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; padding: 0; }
:where(.lp) :where(ul, ol) { list-style: none; }
:where(.lp) *, :where(.lp) *::before, :where(.lp) *::after { box-sizing: border-box; }

html { overflow-x: clip; }

.lp {
  margin: 0;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Browser surfaces the design still owns. */
.lp ::selection { background: rgba(15, 118, 110, 0.16); }
.lp :focus-visible {
  outline: 2px solid var(--lp-teal);
  outline-offset: 2px;
  border-radius: 3px;
}

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--lp-ink); color: #fff; padding: 10px 16px;
  font-size: 14px; text-decoration: none; border-radius: 0 0 6px 0;
}
.lp-skip:focus { left: 0; }

.lp-shell { width: min(var(--lp-shell), 100% - 4rem); margin-inline: auto; }

/* ------------------------------------------------------------- masthead -- */

.lp-masthead {
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--lp-line-soft);
}
.lp-masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 24px;
}
.lp-wordmark {
  font-family: var(--lp-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.022em;
  color: var(--lp-ink); text-decoration: none;
}
.lp-wordmark i { font-style: normal; color: var(--lp-teal); }

.lp-masthead__links { display: flex; gap: 26px; align-items: center; }
.lp-masthead__links a {
  font-size: 14px; color: var(--lp-ink-2);
  text-decoration: none; letter-spacing: -0.006em;
}
.lp-masthead__links a:hover { color: var(--lp-ink); }

.lp-masthead__actions { display: flex; gap: 14px; align-items: center; }
.lp-signin { font-size: 14px; color: var(--lp-ink-2); text-decoration: none; }
.lp-signin:hover { color: var(--lp-ink); }

.lp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 15px; border-radius: 6px;
  background: var(--lp-teal); color: #fff;
  border: 1px solid var(--lp-teal-deep);
  font-size: 14px; font-weight: 500; letter-spacing: -0.008em;
  text-decoration: none;
  transition: background 140ms ease;
}
.lp-cta:hover { background: var(--lp-teal-deep); }
.lp-cta--lg { height: 44px; padding: 0 22px; font-size: 15.5px; border-radius: 7px; }

/* ----------------------------------------------------------------- hero -- */

.lp-hero { position: relative; padding-top: 104px; overflow: hidden; }

/* The only colour on the page not doing a job: a wash running from the app's
   teal through mint into a warm gold, at an alpha low enough to read as light
   in the room rather than as a gradient. */
/* AURORA, NOT A TINT. Two rules, both very pale and very blurred.
 *
 * The mottling came from three radials at blur(4px): they never merged, so
 * every overlap read as a seam. One sweep cannot mottle.
 *
 * Hues are the 200-400 end of the ramp, not 500-600, so even where two layers
 * stack the result stays pale. The arc runs emerald to periwinkle, which is a
 * wider travel than green-to-teal and is what stops it reading as one strong
 * teal field. It never crosses into warm: warm over green makes khaki. */
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Stops compressed into 0-72deg. With the origin at the bottom-left corner
     the visible wedge is only about that wide, so a ramp spread over 130deg
     puts everything past cyan off-canvas and the hero reads as one green. */
  background: conic-gradient(from -6deg at 3% 100%,
    rgba(52, 211, 153, 0.14) 0deg,
    rgba(45, 212, 191, 0.11) 17deg,
    rgba(103, 232, 249, 0.09) 34deg,
    rgba(147, 197, 253, 0.11) 52deg,
    rgba(167, 180, 252, 0.10) 68deg,
    rgba(167, 180, 252, 0) 88deg);
  filter: blur(64px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 54%, rgba(0, 0, 0, 0) 92%);
          mask-image: linear-gradient(180deg, #000 0, #000 54%, rgba(0, 0, 0, 0) 92%);
}

/* The bloom the capture sits in. Anchored to the section's bottom edge, not to
   a percentage of it: the capture is nearly viewport-wide, so the only places
   this can be seen are the band above it and the dissolve below, and both are
   a fixed distance from the bottom whatever height the copy above takes. */
.lp-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -14%; right: -14%; bottom: -60px; height: 1140px;
  background: linear-gradient(90deg,
    rgba(52, 211, 153, 0.16) 0%,
    rgba(45, 212, 191, 0.12) 32%,
    rgba(103, 232, 249, 0.10) 66%,
    rgba(147, 197, 253, 0.13) 100%);
  filter: blur(72px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 18%, #000 52%, rgba(0, 0, 0, 0) 92%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 18%, #000 52%, rgba(0, 0, 0, 0) 92%);
}

.lp-hero__inner { position: relative; z-index: 1; }

/* Both columns start at the top and the right one is nudged down so the lead's
   first baseline meets the headline's. Bottom-aligning them instead leaves a
   hole above the headline, which is the largest void the page can have. */
.lp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 64px; align-items: start;
}
/* The actions sit under the headline rather than under the lead. With
   everything stacked on the right, that column ran ~330px tall against a ~110px
   headline, and the void between the headline and the capture below was the
   difference. Splitting them balances the two columns and lifts the capture. */
.lp-head__side { padding-top: 7px; }

.lp-head h1 {
  font-family: var(--lp-display);
  font-size: clamp(2.05rem, 3.6vw, 2.95rem);
  font-weight: 500; line-height: 1.04; letter-spacing: -0.033em;
  max-width: 17ch; text-wrap: balance;
}
.lp-head h1 em {
  font-family: var(--lp-accent);
  font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -0.01em;
}

.lp-lead {
  font-size: 16.5px; line-height: 1.6; color: var(--lp-ink-2);
  max-width: 46ch; letter-spacing: -0.006em;
}
.lp-actions { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.lp-quiet-link {
  font-size: 15px; color: var(--lp-ink); text-decoration: none;
  border-bottom: 1px solid var(--lp-line); padding-bottom: 3px;
}
.lp-quiet-link:hover { border-color: var(--lp-ink-3); }

.lp-price {
  margin-top: 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--lp-ink-3); max-width: 44ch;
}
.lp-trust {
  margin-top: 26px; padding-top: 15px;
  border-top: 1px solid var(--lp-line);
  max-width: 52ch; font-size: 13.5px; line-height: 1.58; color: var(--lp-ink-2);
}
.lp-trust b { color: var(--lp-ink); font-weight: 600; }

/* TWO SCREENSHOT TREATMENTS, AND THEY ARE NOT INTERCHANGEABLE.
 *
 * --full is for a whole app view. It bleeds past the right edge and dissolves
 * toward the bottom, so the app reads as continuing past the page rather than
 * ending inside it. The mask fades the drop shadow with it, which is the point:
 * no bottom edge, nothing to frame. These always sit on white.
 *
 * --framed is for a cropped fragment. A crop with no border reads as a mistake,
 * so it gets a slim white mat and the ring. These sit on a washed section,
 * where the white mat is visible.
 */
.lp-shot--full {
  position: relative; margin-top: 92px;
  /* Anchored to the text column's left edge, running to just past the
     viewport's right edge, so at ordinary widths the screen cuts the capture
     rather than it ending on a rounded corner floating in white -- which is
     what it did at 1920, stopping 160px short. Past ~1700px the max-width
     takes over: the whole capture is visible with the splash around it.
     The margins are explicit rather than the shell's `auto`, because an auto
     margin re-solves against the negative one and shunts the whole block
     right instead of anchoring it. */
  width: min(var(--lp-shell), 100% - 4rem);
  margin-inline: auto;
}
.lp-shot--full img {
  display: block; width: 100%; max-width: 1120px; height: auto;
  margin-inline: auto;
  /* NO CROP, pending a taller capture. Cropping to a measured "clean" row hid
     the redemption rail and all but one action card, which costs more than the
     ragged bottom edge it bought: this asset is only 871 CSS px of app tall and
     ends just as Pending Redemptions begins, so no crop of it shows both the
     card stack and the rail. The fix is a taller source, not a better cut line.
     When it arrives, scan it for a cut row and reinstate:
         aspect-ratio: <w> / <row>;
         object-fit: cover; object-position: top center;
     Note that below 9% of THIS capture there is not one row clear across the
     full frame, because the feed column and the right rail never have their
     gaps aligned. Take the new one tall enough that such a row exists. */
  /* Square at the bottom and flush with the section's edge, so the divider
     below is the thing that ends the capture. A rounded, shadowed bottom edge
     announces "the screenshot stops here"; a straight cut on a rule reads as
     "the app continues past the page", which is true and is what the reference
     does. The hero clips, so the drop shadow does not leak below the rule. */
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
  box-shadow: var(--lp-lift);
}

.lp-shot--framed {
  background: var(--lp-paper); padding: 8px;
  border-radius: 12px; box-shadow: var(--lp-lift);
}
.lp-shot--framed img {
  display: block; width: 100%; height: auto; border-radius: 6px;
}

/* ---------------------------------------------------------------- spine -- */

/* The page's whole argument as one sentence. The three numbers in it are the
   three sections that follow, in the order of the actual day, which is what
   earns the numbering. */
.lp-spine { border-top: 1px solid var(--lp-line); }
.lp-spine__inner { padding: 96px 0 100px; }
.lp-spine h2 {
  font-family: var(--lp-display); font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.32; letter-spacing: -0.024em;
  max-width: 34ch;
}
.lp-spine h2 .lp-spine__said { color: var(--lp-ink-3); }

.lp-n {
  font-family: var(--lp-data); font-size: 0.44em; font-weight: 500;
  color: var(--lp-teal); vertical-align: 0.72em;
  letter-spacing: 0; margin-right: 0.34em;
}

/* -------------------------------------------------------------- section -- */

.lp-section { padding: 104px 0; border-top: 1px solid var(--lp-line); }
/* Accent sections carry the wash, not a flat grey. A grey band next to a white
   one reads as two panels; a wash reads as light falling across one page. */
/* Only two sections carry it, plus the hero. It is strong on the reference
   because it appears in about four places on a page that is otherwise white;
   putting it behind every other section is what turned it into a tint. */
.lp-spine,
.lp-section--wash {
  background:
    radial-gradient(46% 74% at 6% 26%, rgba(52, 211, 153, 0.13), rgba(52, 211, 153, 0) 70%),
    radial-gradient(44% 70% at 96% 74%, rgba(147, 197, 253, 0.13), rgba(147, 197, 253, 0) 70%),
    var(--lp-paper);
}

/* The heading column is sized to its art, not to half the shell. At 1fr/1fr the
   400px phone sat in a 588px column, so the visible gap between the capture and
   the copy beside it was 250px rather than the 60px the grid declares. */
.lp-section__head {
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 60px; align-items: start;
}
.lp-section h2 {
  font-family: var(--lp-display); font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.1; letter-spacing: -0.028em; max-width: 17ch;
}
.lp-section__body p {
  font-size: 16px; line-height: 1.62; color: var(--lp-ink-2);
  max-width: 52ch; letter-spacing: -0.005em;
}
.lp-section__body p + p { margin-top: 14px; }
.lp-note { color: var(--lp-ink-3); font-size: 14.5px; }

.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.lp-chip {
  font-size: 13px; color: var(--lp-ink-2); letter-spacing: -0.004em;
  padding: 5px 11px; border: 1px solid var(--lp-line);
  border-radius: 5px; background: var(--lp-paper);
}
.lp-section--band .lp-chip { background: var(--lp-paper); }

/* ---------------------------------------------------------------- split -- */

/* Text left, a portrait capture right. The board's action cards are 660px wide
   and stack downward inside the feed, so the only honest shot of them is taller
   than it is wide; a section that can only host a landscape crop cannot show
   this feature at all. */
.lp-split {
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 60px; align-items: start;
}
.lp-split h2 { max-width: 15ch; }
.lp-split__body { margin-top: 22px; }
.lp-split__body p {
  font-size: 16px; line-height: 1.62; color: var(--lp-ink-2);
  max-width: 48ch; letter-spacing: -0.005em;
}
.lp-split__body p + p { margin-top: 14px; }
.lp-split .lp-art { margin-top: 0; max-width: 520px; }

/* ------------------------------------------------------------------ art -- */

.lp-art { margin-top: 56px; }
.lp-section__head .lp-art { margin-top: 40px; max-width: 400px; }

/* A settle rather than a reveal: the crop eases to rest as it enters view, and
   without scroll-driven animation support it is simply already at rest. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-settle {
      animation: lp-settle linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 38%;
    }
    @keyframes lp-settle {
      from { transform: scale(1.045); opacity: 0.82; }
      to   { transform: scale(1); opacity: 1; }
    }
  }
}

/* ----------------------------------------------------------------- grid -- */

/* Section 03: four framed crops, two up. Every cell is the same 3:2 crop so the
   grid stays even; a mixed-size pair reads as two spare screenshots. */
/* The crops are capped well under their column width. At full width they were
   the largest things on the page while carrying the least information. */
.lp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 40px; margin-top: 56px;
}
.lp-grid__item .lp-shot--framed { max-width: 468px; }
.lp-grid__item h3 {
  font-family: var(--lp-display); font-size: 19px; font-weight: 500;
  line-height: 1.32; letter-spacing: -0.018em; margin-top: 22px; max-width: 26ch;
}
.lp-grid__item p {
  font-size: 15px; line-height: 1.6; color: var(--lp-ink-2); max-width: 52ch;
}
.lp-grid__item h3 + p { margin-top: 10px; }
.lp-grid__item p + p { margin-top: 10px; }
.lp-grid__item .lp-shot--framed + h3 { margin-top: 24px; }

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

/* Set apart with a hairline enclosure rather than another ground: the answers
   are long, and a panel tells the eye it can skip the whole block at once. */
.lp-faq {
  margin-top: 44px; border: 1px solid var(--lp-line);
  border-radius: 14px; background: var(--lp-paper);
  padding: 8px 34px 10px;
}
/* One column and collapsed by default. Two columns forced an uncomfortably wide
   measure on a large screen, and eight open answers made the section the longest
   thing on the page on a phone. <details> gives this with no JavaScript, which
   this page has none of. */
.lp-faq__item {
  padding: 0; border-bottom: 1px solid var(--lp-line-soft);
}
.lp-faq__item:last-child { border-bottom: 0; }
.lp-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 16px;
  padding: 17px 0;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item h3 {
  font-family: var(--lp-display); font-size: 16.5px; font-weight: 500;
  line-height: 1.36; letter-spacing: -0.014em; flex: 1;
}
/* Drawn from borders rather than set as a glyph, so it keeps the page's own
   stroke weight and rotates rather than swapping character. */
.lp-faq__item summary::after {
  content: ""; flex: none; align-self: center;
  width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.5px solid var(--lp-ink-3);
  border-bottom: 1.5px solid var(--lp-ink-3);
  rotate: 45deg; translate: 0 -2px;
  transition: rotate 160ms ease, border-color 160ms ease;
}
.lp-faq__item[open] summary::after { rotate: 225deg; translate: 0 2px; }
.lp-faq__item summary:hover::after { border-color: var(--lp-ink); }
.lp-faq__a { padding: 0 0 20px; }
.lp-faq__a p {
  font-size: 15px; line-height: 1.64; color: var(--lp-ink-2); max-width: 68ch;
}
.lp-faq__a p + p { margin-top: 10px; }
.lp-faq__a i { font-style: italic; }

/* The founder/testimonial section is withdrawn pending a proper treatment
   (owner, 2026-08-10). Its styles are gone rather than orphaned here. */

/* ---------------------------------------------------------------- close -- */

/* Centred, and lit from below rather than washed across like the other accent
   sections: the last thing on the page should read as the page opening up, not
   as one more band. */
.lp-close {
  position: relative;
  padding: 62px 0 128px;
  border-top: 1px solid var(--lp-line);
  text-align: center;
  background: var(--lp-paper);
}
/* The glow rises out of the divider at the top of the section and falls away
   downward, so the closing block reads as light coming through the rule rather
   than as another band. It lives on its own layer so it can be masked: painted
   onto the section directly it kept its full strength at whichever edge it was
   anchored to, and that edge cut it off in a hard line. */
.lp-close::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 86% at 50% -16%, rgba(52, 211, 153, 0.32), rgba(52, 211, 153, 0) 66%),
    radial-gradient(48% 70% at 50% -4%, rgba(103, 232, 249, 0.22), rgba(103, 232, 249, 0) 64%),
    radial-gradient(76% 98% at 50% -28%, rgba(147, 197, 253, 0.24), rgba(147, 197, 253, 0) 68%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34%, rgba(0, 0, 0, 0) 86%);
          mask-image: linear-gradient(180deg, #000 0, #000 34%, rgba(0, 0, 0, 0) 86%);
}
.lp-close > .lp-shell { position: relative; z-index: 1; }
.lp-close h2 {
  font-family: var(--lp-display); font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.12; letter-spacing: -0.028em;
  max-width: 20ch; text-wrap: balance; margin-inline: auto;
}
.lp-close .lp-actions { margin-top: 30px; justify-content: center; }
.lp-close .lp-trust { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------- footer -- */

.lp-footer { padding: 40px 0 56px; border-top: 1px solid var(--lp-line); }
.lp-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.lp-footer__inner > span {
  font-family: var(--lp-display); font-size: 15px;
  font-weight: 500; letter-spacing: -0.018em;
}
.lp-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-footer nav a { font-size: 14px; color: var(--lp-ink-2); text-decoration: none; }
.lp-footer nav a:hover { color: var(--lp-ink); }
.lp-footer__note {
  margin-top: 20px; font-size: 12.5px; line-height: 1.6;
  color: var(--lp-ink-3); max-width: 74ch;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 60rem) {
  .lp-head,
  .lp-split,
  .lp-section__head { grid-template-columns: 1fr; gap: 34px; }
  /* Every stacked capture inherits the full shell width here, which on a tablet
     is ~730px of screenshot carrying a caption's worth of information. Each one
     is capped near the size it has on desktop instead. */
  .lp-section__head .lp-art,
  .lp-split .lp-art { max-width: 420px; }
  .lp-grid__item .lp-shot--framed { max-width: 460px; }
  .lp-head__side { padding-top: 0; }
  .lp-head h1 { max-width: none; }
  .lp-hero { padding-top: 64px; }
  /* The splash is sized for a desktop hero; at this width the same band covers
     most of a much shorter section and swamps the copy sitting on it. */
  .lp-hero::after { height: 860px; bottom: -30px; filter: blur(46px); opacity: 0.7; }
  .lp-shot--full img { max-width: 760px; }
  .lp-section, .lp-spine__inner { padding: 68px 0; }
  .lp-close { padding: 76px 0 84px; }
  .lp-row, .lp-faq__item { grid-template-columns: 1fr; gap: 14px; }
  .lp-grid { grid-template-columns: 1fr; gap: 44px; }
  .lp-faq { padding: 8px 26px 10px; }
}

@media (max-width: 48rem) {
  .lp-shell { width: calc(100% - 2.5rem); }

  /* Body sizes are absolute, so unlike the headings they do not come down with
     the viewport on their own. */
  .lp-lead { font-size: 15.5px; }
  .lp-section__body p,
  .lp-split__body p { font-size: 15px; }
  .lp-grid__item h3 { font-size: 17px; }
  .lp-grid__item p { font-size: 14.5px; }
  .lp-note { font-size: 14px; }
  .lp-faq__item h3 { font-size: 15.5px; }
  .lp-faq__a p { font-size: 14px; }
  .lp-chip { font-size: 12.5px; }

  /* No max-width reset here. 768px matches this query AND the 60rem one, so
     undoing the caps at this breakpoint removed them from exactly the width
     that needed them most. Below ~460px the caps are inert anyway, because the
     column is already narrower than the cap. */
  /* The section nav is the one thing here with no room to shrink into; the two
     account actions are what a phone visitor came for. */
  .lp-masthead__links { display: none; }
  .lp-masthead__inner { height: 56px; }
  .lp-section, .lp-spine__inner { padding: 56px 0; }
  /* The hero keeps the desktop capture at every width (the phone build is
     section 01's, and having it in both places showed the same screen twice).
     Shrinking a ~1300px-wide app into a 340px column is a grey smear, so here
     it stays larger than the column and the screen crops it. The negative
     offset slides the visible window off the sidebar and onto the Daily Bonus
     card, which is the part worth seeing. */
  .lp-shot--full { width: auto; margin-left: -140px; margin-right: -1.25rem; }
  .lp-shot--full img {
    width: 880px; max-width: none; margin-inline: 0;
    border-radius: var(--lp-radius);
  }
  .lp-faq { padding: 4px 18px 6px; border-radius: 12px; }
  .lp-faq__item { padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp * { transition: none !important; animation: none !important; }
}