/* radar.ao landing — page layout ONLY.
   Every colour, radius and type family comes from tokens.css, which build.py
   extracts verbatim from rfp-frontend/app/(beta)/signal.css (the RADAR ramp).
   This file may add layout and sizes; it may not invent a colour.

   The SURFACE LANGUAGE is taken from the Claude Design canvas
   docs/design/claude-design/landing/Landing.dc.html — the same ramp the app
   implements: a recessed --line ground, the product sitting on it as ONE
   elevated panel at --r-card, white cards inside, uppercase eyebrow over a
   large quiet title, mono for figures and keys. The two shadows below are the
   canvas's own values; their rgb(22,33,28) is --ink at alpha, not a new colour.

   The emitted pages carry NO inline style and NO <style> block — that is
   asserted by tests/test_landing_build.py — so everything the index needs is
   here, INCLUDING the strokes of the inline SVG connectors.

   /termos/ and /privacidade/ share this stylesheet. The shell, header, button,
   eyebrow, footer and .lp-doc blocks are theirs as much as the index's; a test
   checks that every class used by any built page has a rule in here.

   pt-AO copy. Classes are prefixed lp- so they can never collide with the
   app's; the wrapper is `.sig.lp` so the app's token block applies. */

html{ background:#E6ECEA }              /* = --line, before tokens.css loads */
body{ margin:0 }
.sig.lp{ min-height:100vh; background:var(--line); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:clamp(14px,2.4vw,32px) }
.lp *{ box-sizing:border-box }
.lp img{ max-width:100% }
.lp a{ color:inherit; text-decoration:none }
.lp p a,.lp li a,.lp .lp-faq-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.lp a:hover{ color:var(--accent-2) }
.lp a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm) }

/* the panel — the canvas's app shell: one raised sheet on the recessed ground */
/* `overflow:clip`, and the `hidden` before it is the fallback, not a leftover:
   both clip the sheet to its 12px radius and keep the 1084px flow grid inside
   it, but `hidden` makes the sheet a SCROLL CONTAINER, and a sticky header
   sticks to its nearest scrollport — which here never scrolls, so the header
   simply did not stick. `clip` clips without becoming one. A browser too old
   for `clip` (pre-Safari 16) takes `hidden` and gets the old, unstuck header. */
.lp .lp-sheet{ max-width:1280px; margin:0 auto; background:var(--soft); border-radius:12px;
  box-shadow:0 1px 2px rgba(22,33,28,.05), 0 24px 60px -34px rgba(22,33,28,.32);
  overflow:hidden; overflow:clip }
.lp .lp-wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,64px) }

/* buttons — the canvas's two shapes on the ramp's permitted steps */
.lp .lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px;
  border-radius:var(--r-ctl); font-size:14px; font-weight:600; white-space:nowrap; transition:background .14s,border-color .14s,color .14s }
.lp .lp-btn-primary{ background:var(--accent-fill); color:#fff }
.lp .lp-btn-primary:hover{ background:var(--accent-fill-hover); color:#fff }
.lp .lp-btn-ghost{ background:var(--paper); color:var(--ink-2); border:1px solid var(--line-3); height:42px }
.lp .lp-btn-ghost:hover{ border-color:var(--accent); color:var(--accent) }
.lp .lp-btn-lg{ height:48px; padding:0 24px; font-size:15px }
.lp .lp-btn-ghost.lp-btn-lg{ height:46px; padding:0 20px }

/* header — inside the sheet, hairline under it, and it follows the scroll.
   `background:var(--paper)` is what makes sticky safe: a transparent bar would
   let the page print through itself. The z-index beats .lp-phone, the one
   absolutely-positioned element that would otherwise paint over it. */
.lp .lp-head{ position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(20px,4vw,48px); border-bottom:1px solid var(--line); background:var(--paper) }
.lp .lp-head img{ display:block; height:42px; width:auto }
.lp .lp-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end }
.lp .lp-nav .lp-link{ padding:8px 12px; border-radius:var(--r-sm); color:var(--ink-2); font-size:13.5px; font-weight:500 }
.lp .lp-nav .lp-link:hover{ background:var(--line-2); color:var(--ink) }
.lp .lp-nav .lp-btn{ margin-left:6px }

/* eyebrow + section heads — the canvas's masthead pattern */
.lp .lp-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin:0; font-weight:500 }
.lp section{ padding:clamp(44px,5vw,76px) 0 0 }
/* the nav jumps here, and the sticky header is 81px of it (measured, both
   widths): without this the eyebrow of the section you asked for lands
   underneath the bar. 40px was enough on desktop, where the section's own top
   padding is 76px, and left 3px of daylight at 390px where it is 44px. */
.lp section[id]{ scroll-margin-top:56px }
.lp .lp-sec-head{ max-width:780px; margin-bottom:26px }
.lp .lp-sec-head h2{ font-size:clamp(23px,2.6vw,29px); font-weight:600; letter-spacing:-.02em; line-height:1.18; margin:10px 0 10px; color:var(--ink) }
.lp .lp-sec-head p{ font-size:15.5px; color:var(--ink-2); margin:0 }

/* hero */
.lp .lp-hero{ padding:clamp(34px,4.4vw,60px) 0 0; max-width:900px }
.lp .lp-hero h1{ font-size:clamp(30px,3.6vw,46px); font-weight:600; letter-spacing:-.025em; line-height:1.09; margin:14px 0 20px; color:var(--ink) }
.lp .lp-hero .lp-lede{ font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.55; color:var(--ink-2); margin:0 0 28px; max-width:720px }
.lp .lp-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.lp .lp-cta .lp-hint{ font-size:13px; color:var(--ink-3); margin-left:6px }

/* the hero shot — a browser frame with the phone overlapping its corner */
.lp .lp-shot{ position:relative; margin-top:clamp(28px,3.4vw,44px) }
.lp .lp-browser{ border:1px solid var(--line-3); border-radius:12px; overflow:hidden; background:var(--paper);
  box-shadow:0 2px 4px rgba(22,33,28,.09), 0 28px 56px -28px rgba(22,33,28,.30) }
.lp .lp-browser-bar{ display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:var(--line-2); border-bottom:1px solid var(--line) }
.lp .lp-dots{ display:flex; gap:6px; flex-shrink:0 }
.lp .lp-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-3) }
.lp .lp-url{ flex-grow:1; display:flex; justify-content:center }
.lp .lp-url span{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 16px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3) }
.lp .lp-browser img{ display:block; width:100%; height:auto }
.lp .lp-phone{ position:absolute; right:-14px; bottom:-84px; width:250px; border:9px solid var(--ink); border-radius:32px;
  overflow:hidden; background:var(--paper); box-shadow:0 18px 44px -18px rgba(22,33,28,.45) }
/* a phone's own aspect (390×844), whatever the frame's width: the first cut
   was 232×660 — 1:2.85, a phone nobody sells — and read as a stretched mockup. */
.lp .lp-phone-screen{ aspect-ratio:390 / 844; overflow:hidden }
.lp .lp-phone-screen img{ display:block; width:100%; height:auto }
.lp .lp-shot-note{ font-size:12px; color:var(--ink-3); margin:14px 0 0; max-width:820px }

/* dated figures — big quiet numbers in mono, the canvas's figure treatment */
.lp .lp-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:clamp(36px,4vw,64px);
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden }
.lp .lp-fig{ background:var(--paper); padding:20px 24px }
.lp .lp-fig .lp-fl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:10px }
.lp .lp-fig .lp-fv{ font-family:var(--mono); font-size:34px; font-weight:500; color:var(--accent-fill); letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1 }
.lp .lp-figs .lp-figdate{ grid-column:1 / -1; background:var(--line-2); margin:0; padding:13px 24px; font-size:12.5px; color:var(--ink-3) }
.lp .lp-figs .lp-figdate b{ font-weight:600; color:var(--ink-2) }

/* ── how it works: the four stations, and the moment two sources become one ── */
.lp .lp-flow{ background:var(--paper); border-radius:var(--r-card); padding:clamp(20px,2.4vw,32px) clamp(18px,2.6vw,34px) 30px }
/* minmax(0,X), not X: at 1081-1343px the sheet is narrower than the 1084px
   these columns add up to, and .lp-sheet has overflow:hidden — so a fixed track
   list did not scroll, it CLIPPED the fourth station off the page. Measured
   before the fix: .lp-station right=1181 in a 1082px viewport. The stack
   breakpoint moved to 1200px for the same reason. */
.lp .lp-flow-grid{ display:grid; grid-template-columns:minmax(0,230px) 52px minmax(0,300px) 52px minmax(0,168px) 52px minmax(0,230px); align-items:start; row-gap:12px }
/* A station is one label plus the thing it names, in ONE grid cell. Splitting
   the labels into their own row aligns them at seven columns and breaks at one:
   every grid item becomes its own row, so all four labels stack at the top and
   the cards follow unlabelled. Under align-items:start the labels line up
   across the desktop row anyway. */
.lp .lp-station{ min-width:0 }
.lp .lp-flow-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--accent); letter-spacing:.04em; margin:0 0 12px }
/* the label is 12px + a 11px line: push the connector down by that much so the
   arrow sits on the CARDS' centre line rather than the station's. */
.lp .lp-conn{ align-self:start; display:grid; place-items:center; height:204px; margin-top:27px }
.lp .lp-conn-v{ display:none }
.lp .lp-conn-line{ stroke:var(--line-3); stroke-width:1.5; fill:none }
.lp .lp-conn-head{ stroke:var(--accent-fill); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round }

.lp .lp-sourcecol{ display:flex; flex-direction:column; gap:10px }
.lp .lp-doccard{ border:1px solid var(--line); border-radius:var(--r-ctl); padding:12px 14px; background:var(--paper); height:97px }
.lp .lp-doccard h3{ font-size:12.5px; font-weight:600; color:var(--ink); margin:0 }
.lp .lp-doc-meta{ font-size:11.5px; color:var(--ink-3); margin:2px 0 0 }
.lp .lp-doc-meta.lp-mono{ font-family:var(--mono) }
.lp .lp-lines{ display:flex; flex-direction:column; gap:4px; margin-top:11px }
.lp .lp-line{ height:5px; border-radius:3px; background:var(--line-2) }

.lp .lp-merged{ border:1px solid var(--accent-tint-2); border-radius:var(--r-ctl); padding:15px 16px; background:var(--accent-tint) }
.lp .lp-merged-kicker{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600 }
.lp .lp-merged h3{ font-size:15px; font-weight:600; line-height:1.32; color:var(--ink); margin:7px 0 0; letter-spacing:-.01em }
.lp .lp-merged-meta{ font-size:12.5px; color:var(--ink-2); margin:6px 0 0 }
.lp .lp-merged-foot{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px; padding-top:11px; border-top:1px solid var(--accent-tint-2) }
.lp .lp-tag{ font-size:11px; font-weight:500; color:var(--accent); background:var(--paper); border:1px solid var(--accent-tint-2); border-radius:var(--r-chip); padding:3px 8px }
.lp .lp-tag-note{ font-size:11px; font-weight:500; color:var(--ink-3) }

.lp .lp-scorecard{ border:1px solid var(--line); border-radius:var(--r-ctl); padding:15px 16px; background:var(--paper) }
.lp .lp-score{ display:flex; align-items:baseline; gap:8px }
.lp .lp-score-num{ font-size:32px; font-weight:400; color:var(--accent-fill); line-height:1; font-variant-numeric:tabular-nums }
.lp .lp-score-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4) }
.lp .lp-crit{ list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:6px }
.lp .lp-crit li{ font-size:11.5px; color:var(--ink-2) }
.lp .lp-crit b{ font-weight:600; color:var(--ink) }

.lp .lp-mail{ border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; background:var(--paper) }
.lp .lp-mail-head{ background:var(--ink); padding:10px 14px }
.lp .lp-mail-head b{ display:block; font-size:11.5px; font-weight:600; color:var(--soft) }
.lp .lp-mail-head span{ display:block; font-size:10.5px; color:var(--ink-5); margin-top:1px }
.lp .lp-mail-body{ padding:13px 14px 15px }
.lp .lp-mail-body p{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin:0 }
.lp .lp-mail-rows{ display:flex; flex-direction:column; gap:9px; margin-top:11px }
.lp .lp-mail-row{ display:flex; align-items:center; gap:9px }
.lp .lp-mail-score{ font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--accent-fill); width:24px; flex-shrink:0 }
.lp .lp-mail-bar{ height:5px; border-radius:3px; background:var(--line-2); flex-grow:1 }

/* the email itself, beside the moment a prazo moves. The capture is the
   template's own 720px; the frame shows its top ~880px and lets the rest fall
   off the bottom edge, the way an inbox preview does. */
.lp .lp-mailrow{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:28px; align-items:start; margin-top:28px; padding-top:28px; border-top:1px solid var(--line) }
.lp .lp-mailshot{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--paper); box-shadow:var(--e-raise) }
.lp .lp-mailshot-bar{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:10px 16px; background:var(--line-2); border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-3) }
.lp .lp-mailshot-bar b{ font-weight:600; color:var(--ink) }
.lp .lp-mailshot-bar .lp-mono{ font-family:var(--mono) }
.lp .lp-mailshot img{ display:block; width:100%; height:auto }
.lp .lp-mailside p{ font-size:14.5px; color:var(--ink-2); margin:0 0 12px }
.lp .lp-mailside p:last-child{ margin-bottom:0 }
.lp .lp-mailside h3{ font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0 0 10px; color:var(--ink) }
.lp .lp-mailside .lp-rect{ margin-top:18px }
.lp .lp-rect{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:28px; padding:16px 20px;
  background:var(--warn-soft); border:1px solid var(--warn-100); border-radius:var(--r-ctl) }
.lp .lp-rect-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-text); font-weight:600; white-space:nowrap }
.lp .lp-rect-dates{ display:flex; align-items:center; gap:10px; white-space:nowrap }
.lp .lp-was{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-3); text-decoration:line-through }
.lp .lp-now{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--amber-text) }
.lp .lp-arrow{ stroke:var(--amber-text); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round }
.lp .lp-rect p{ font-size:13.5px; color:var(--ink-2); margin:0; flex:1 1 320px }
.lp .lp-rect b{ font-weight:600; color:var(--ink) }

/* ── the six sources ── */
/* the four causes of a missed tender. 2x2 rather than a 4-up row: they are not
   ranked and not a sequence, and a single row reads as one. The 1px gap over a
   --line ground is the same hairline-grid idiom as .lp-figs above. */
.lp .lp-why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-top:clamp(28px,3vw,40px); background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden }
.lp .lp-why-item{ background:var(--paper); padding:24px 26px }
.lp .lp-why-item h3{ font-size:15px; font-weight:600; color:var(--ink); margin:0 0 7px; letter-spacing:-.01em }
.lp .lp-why-item p{ font-size:14px; color:var(--ink-2); margin:0 }

.lp .lp-sources{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.lp .lp-source{ background:var(--paper); border-radius:var(--r-card); padding:20px 22px }
.lp .lp-src{ font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin:0 }
.lp .lp-source p{ font-size:13.5px; color:var(--ink-2); margin:9px 0 0 }

/* ── the three proofs ── */
.lp .lp-proof{ background:var(--paper); border-radius:var(--r-card); padding:clamp(20px,2.4vw,30px) clamp(18px,2.6vw,34px); margin-bottom:12px }
.lp .lp-proof:last-child{ margin-bottom:0 }
.lp .lp-split{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:44px; align-items:center }
.lp .lp-split-wide-left{ grid-template-columns:minmax(0,1fr) minmax(0,400px); align-items:start }
/* the Província capture is 1110 CSS px wide and its type is the app's own 13px:
   in a 650px column it was a thumbnail (0.59×). It spans both columns now. */
.lp .lp-span{ grid-column:1 / -1 }
.lp .lp-kicker{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-chip);
  background:var(--accent-tint); color:var(--accent); font-family:var(--mono); font-size:11px; letter-spacing:.04em; margin-bottom:14px }
.lp .lp-kicker-crit{ background:var(--crit-soft); color:var(--red-text) }
.lp .lp-proof h3{ font-size:22px; font-weight:600; letter-spacing:-.015em; line-height:1.24; margin:0 0 12px; color:var(--ink) }
.lp .lp-proof p{ font-size:14.5px; color:var(--ink-2); margin:0 0 12px }
.lp .lp-proof p:last-child{ margin-bottom:0 }
.lp .lp-figure{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden }
.lp .lp-figure-raise{ box-shadow:var(--e-raise) }
/* a capture drawn no wider than it was cut: the «Porque» panel is 322 CSS px
   in the app and its column is 400, so width:100% stretched it 1.24× */
.lp .lp-figure-fit{ width:322px; max-width:100% }
.lp .lp-figure img{ display:block; width:100%; height:auto }
.lp .lp-cap{ font-size:12px; color:var(--ink-3); margin:11px 0 0 }

.lp .lp-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px }
.lp .lp-chip-card{ border:1px solid var(--line); border-radius:9px; padding:18px 20px; background:var(--soft) }
.lp .lp-chip-img{ height:78px; display:flex; align-items:center }
/* The chip files are cut at 2x, so their CSS size comes from the <img> width
   attribute — `width:auto` would draw them at file size, and a `max-height`
   normalising all three to one height is a lie about the app: the critical
   chip really is two lines where the others are three. `height:auto` keeps the
   ratio if `max-width` ever bites. The stylesheet URL carries a content hash
   (build.version_stylesheets), which is what makes attribute sizing safe again
   after a stale cached rule painted these at file size on 2026-09-02. */
.lp .lp-chip-img img{ display:block; height:auto; max-width:100% }
.lp .lp-chip-card h4{ font-size:13.5px; font-weight:600; color:var(--ink); margin:12px 0 0 }
.lp .lp-chip-card p{ font-size:13px; color:var(--ink-2); margin:5px 0 0 }
.lp .lp-note-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:22px; padding-top:22px; border-top:1px solid var(--line) }
/* the wide/narrow switch lives on this WRAPPER, never on the <img>: a rule like
   `.lp-note-row img{display:block}` outranks `.lp-narrow{display:none}` on the
   image itself, and both variants then render at once. */
.lp .lp-note-shot{ width:600px; max-width:100%; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden }
.lp .lp-note-row img{ display:block; width:100%; height:auto }
.lp .lp-note-row p{ font-size:13px; color:var(--ink-3); margin:0; flex:1 1 220px }
.lp .lp-callout{ margin-top:18px; padding:16px 18px; background:var(--accent-tint); border:1px solid var(--accent-tint-2); border-radius:var(--r-ctl) }
.lp .lp-callout h4{ font-size:13px; font-weight:600; color:var(--ink); margin:0 0 6px }
.lp .lp-callout p{ font-size:13px; color:var(--ink-2); margin:0 }
.lp .lp-stack-gap{ margin-top:12px }
.lp .lp-side-note{ font-size:13px; color:var(--ink-2); margin:14px 0 0 }

/* ── what the app is ── */
/* one screen per card, WHOLE, in the hero's browser frame — a crop that cut
   the search box and the KPI band mid-element was not showing the product
   where it matters most. On a phone the frame is a phone, with the phone app. */
.lp .lp-cards{ display:grid; grid-template-columns:1fr; gap:12px }
.lp .lp-card{ background:var(--paper); border-radius:var(--r-card); padding:26px 28px }
.lp .lp-card h3{ font-size:17px; font-weight:600; margin:0 0 8px; letter-spacing:-.01em }
.lp .lp-card p{ font-size:14px; color:var(--ink-2); margin:0 0 18px; max-width:760px }
.lp .lp-fade{ -webkit-mask-image:linear-gradient(#000 82%,transparent); mask-image:linear-gradient(#000 82%,transparent) }
.lp .lp-device{ width:296px; margin:0 auto; border:9px solid var(--ink); border-radius:32px; overflow:hidden; background:var(--paper);
  box-shadow:0 18px 44px -18px rgba(22,33,28,.45) }
.lp .lp-device{ aspect-ratio:390 / 844 }
.lp .lp-device img{ display:block; width:100%; height:auto }

/* ── perguntas ── */
.lp .lp-faq{ background:var(--paper); border-radius:var(--r-card); overflow:hidden }
.lp .lp-faq-row{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:36px; padding:26px 32px; border-bottom:1px solid var(--line) }
.lp .lp-faq-row:last-child{ border-bottom:none }
.lp .lp-faq-q{ font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin:0 }
.lp .lp-faq-a{ font-size:14.5px; color:var(--ink-2); margin:0 }
.lp .lp-faq-a b{ font-weight:600; color:var(--ink) }

/* ── the close: the one dark band on the page ── */
.lp .lp-close{ background:var(--ink); border-radius:12px; padding:clamp(28px,3.4vw,44px) clamp(22px,3.6vw,48px);
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:center }
.lp .lp-close .lp-eyebrow{ color:var(--accent-mark) }
.lp .lp-close h2{ font-size:clamp(24px,2.8vw,31px); font-weight:600; letter-spacing:-.02em; line-height:1.16; margin:12px 0 14px; color:#fff }
.lp .lp-close p{ font-size:15.5px; line-height:1.6; color:var(--ink-5); margin:0 0 26px }
.lp .lp-close-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.lp .lp-close-mail{ font-family:var(--mono); font-size:13.5px; color:var(--soft) }
.lp .lp-close-alt{ font-size:13.5px; color:var(--ink-5); margin:20px 0 0 }
.lp .lp-close-alt a{ color:var(--accent-mark); font-weight:600; text-decoration:none }
.lp .lp-close-alt a:hover{ color:#fff }
.lp .lp-close-shot{ border-radius:var(--r-card); overflow:hidden; box-shadow:0 16px 40px -16px rgba(22,33,28,.9) }
.lp .lp-close-shot img{ display:block; width:100%; height:auto }

/* footer */
.lp .lp-foot{ margin-top:clamp(40px,4.4vw,64px); border-top:1px solid var(--line); background:var(--paper); padding:24px clamp(20px,4vw,48px) 28px }
.lp .lp-foot-row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--ink-3) }
.lp .lp-foot-brand{ display:flex; align-items:center; gap:16px }
.lp .lp-foot-brand img{ display:block; height:34px; width:auto }
.lp .lp-foot-brand b{ font-weight:600; color:var(--ink-2) }
.lp .lp-foot a{ color:var(--ink-2) }
.lp .lp-foot a:hover{ color:var(--ink) }
.lp .lp-foot nav{ display:flex; gap:18px; flex-wrap:wrap }
.lp .lp-disclaimer{ font-size:11.5px; color:var(--ink-3); margin:18px 0 0; max-width:960px }

/* legal pages */
.lp .lp-doc{ max-width:720px; padding:clamp(30px,4vw,44px) 0 56px }
.lp .lp-doc h1{ font-size:31px; font-weight:600; letter-spacing:-.02em; margin:10px 0 6px }
.lp .lp-doc .lp-updated{ font-size:12.5px; color:var(--ink-3); margin:0 0 22px }
.lp .lp-doc h2{ font-size:17px; font-weight:600; letter-spacing:-.01em; margin:30px 0 8px }
.lp .lp-doc p,.lp .lp-doc li{ font-size:15px; color:var(--ink-2) }
.lp .lp-doc ul{ padding-left:20px }
.lp .lp-draft{ background:var(--accent-tint); border:1px solid var(--accent-tint-2); color:var(--accent);
  border-radius:var(--r-ctl); padding:13px 16px; font-size:13.5px; margin:0 0 26px }
.lp .lp-todo{ font-family:var(--mono); font-size:12.5px; color:var(--amber-text); background:var(--warn-soft);
  border-radius:var(--r-chip); padding:1px 6px }

/* which crop of a screenshot is legible at this width. The -m variants are cut
   tighter so their type survives 390px; showing the wide one there would be a
   picture of text nobody can read. */
.lp .lp-narrow{ display:none }

@media (max-width:1200px){
  .lp .lp-mailrow{ grid-template-columns:minmax(0,1fr) }
  .lp .lp-flow-grid{ grid-template-columns:1fr; row-gap:0 }
  .lp .lp-conn{ height:auto; margin-top:0; padding:10px 0 8px }
  .lp .lp-conn-h{ display:none }
  .lp .lp-conn-v{ display:grid }
  .lp .lp-doccard{ height:auto }
  .lp .lp-sourcecol{ flex-direction:row }
  .lp .lp-sourcecol .lp-doccard{ flex:1 1 0 }
  .lp .lp-sources{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lp .lp-split,.lp .lp-split-wide-left{ grid-template-columns:minmax(0,1fr); gap:28px; align-items:start }
  .lp .lp-close{ grid-template-columns:minmax(0,1fr); gap:32px }
  .lp .lp-close-shot{ max-width:420px }
  .lp .lp-phone{ display:none }
}

@media (max-width:820px){
  .lp .lp-figs{ grid-template-columns:1fr }
  .lp .lp-fig{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:15px 20px }
  .lp .lp-fig .lp-fl{ margin-bottom:0; font-size:11px }
  .lp .lp-fig .lp-fv{ font-size:26px }
  .lp .lp-figs .lp-figdate{ padding:12px 20px }
  .lp .lp-chips{ grid-template-columns:1fr }
  .lp .lp-why{ grid-template-columns:1fr }
  .lp .lp-faq-row{ grid-template-columns:1fr; gap:8px }
  /* The wide/narrow switch stays at 640, NOT here: the -m crops are cut at
     284-440 CSS px, and a 641-820 column is 600-770 px wide, so showing them
     here stretched every one (measured 0.46-0.71 of the pixels needed at 2x)
     while the wide crops, cut at 2x, render at 0.55-1.0× — small, but sharp. */
}

/* narrow screens: the section anchors are one scroll away, the two actions are not */
@media (max-width:640px){
  .sig.lp{ padding:0 }
  .lp .lp-sheet{ border-radius:0; box-shadow:none }
  .lp .lp-nav .lp-link{ display:none }
  .lp .lp-head img{ height:36px }
  .lp .lp-sources{ grid-template-columns:1fr }
  .lp .lp-sourcecol{ flex-direction:column }
  .lp .lp-cta{ flex-direction:column; align-items:stretch }
  .lp .lp-cta .lp-btn{ width:100% }
  .lp .lp-cta .lp-hint{ margin:2px 0 0; text-align:center }
  .lp .lp-wide{ display:none }
  .lp .lp-narrow{ display:block }
  .lp .lp-browser{ display:none }
  .lp .lp-phone{ display:block; position:static; width:296px; margin:0 auto; right:auto; bottom:auto }
  .lp .lp-shot-note{ text-align:center }
  .lp .lp-bleed{ margin-left:-20px; margin-right:-20px; width:calc(100% + 40px); max-width:none; border-left:none; border-right:none; border-radius:0 }
  .lp .lp-note-row{ gap:14px }
  .lp .lp-close-cta{ flex-direction:column; align-items:stretch }
  .lp .lp-close-cta .lp-btn{ width:100% }
  .lp .lp-close-mail{ text-align:center }
  .lp .lp-close-alt{ text-align:center }
  .lp .lp-foot-row{ align-items:flex-start; flex-direction:column; gap:16px }
  .lp .lp-foot nav{ flex-direction:column; gap:10px }
}