/* Perch's public website: the Field guide design system (WEB-2).
   Ported from the approved mockups (docs/design/website-v2/home.html, pricing.html) and the designer's
   sources (.omc/research/website-v2/craft/assets/src/A-home.src.html, A-pricing.src.html, product.py).
   Tokens: the designer's notes §3. The page follows the system's light or dark appearance; there is no
   theme switch. Every style the mockups set inline is a class here, because the site's content security
   policy allows no inline style (WEB-8). */

/* ---- fonts: self-hosted Latin subsets, OFL (fonts/fonts.json) ---- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/newsreader-roman.01817351.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic.a99fb127.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk.1f21c6ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ---- */
:root {
  --paper: #FCFBF8; --plate: #F4F0E8; --plate-line: #E2DACB;
  --ink: #17140F; --ink2: #554C41; --ink3: #746A5D; --rule: #E6E0D5; --rule2: #CFC6B7;
  --blue-fill: #0A6BD9; --on-blue: #FFFFFF; --link: #0A63C9;
  --amber: #C2641A; --amber-ink: #8A4710; --glow: rgba(240,160,48,.13);
  --wash: rgba(217,117,32,.10); --wash-ring: rgba(217,117,32,.34); --hero-wash: rgba(217,117,32,.08);
  --pencil: #6F685E; --code-bg: #FFFFFF; --field: #FFFFFF;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --key-top: #FFFFFF; --key-bot: #F2EFE9; --key-edge: #CFC6B7; --key-ink: #2A2520;
  --shot-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 22px 48px -12px rgba(30,28,24,.30), 0 6px 14px -6px rgba(30,28,24,.16);
  /* the robin (SettingsBirdPalette / RobinTokens) */
  --pb-top: #9A6E40; --pb-bot: #6A4420; --pb-breast-top: #F0A030; --pb-breast-bot: #D97520;
  --pb-cream: #FFF6E6; --pb-beak: #C88810; --pb-feet: #6A4420; --pb-eye: #1A1008;
  --pb-cloud-top: #FFFFFF; --pb-cloud-bot: #E4E8EF; --pb-shadow: .20;
  --pb-tab: #FFFFFF; --pb-tab-line: #B9B2A6; --pb-tab-dot: #0A6BD9; --pb-ground: #000000;
  /* the palette redraw (Plate 2) */
  --pp-bg: #F7F7F8; --pp-ink: #1D1D1F; --pp-meta: #6E6E73; --pp-sel: #DEDFE4; --pp-line: #E3E3E6; --pp-key: #3A3A3C;
  --pp-qsel: #D4D4D8; --pp-blue: #0A6BD9; --th-paper: #FFFFFF; --th-line: #D7D7DA;
  --pp-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 22px 48px -12px rgba(30,28,24,.32), 0 6px 14px -6px rgba(30,28,24,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120F; --plate: #1C1915; --plate-line: #332D25;
    --ink: #F0E9DD; --ink2: #BFB5A6; --ink3: #8F8678; --rule: #2B2721; --rule2: #3C362D;
    --blue-fill: #1F6FDB; --link: #62A6F2;
    --amber: #F0952C; --amber-ink: #FAB264; --glow: rgba(255,192,80,.10);
    --wash: rgba(240,149,44,.12); --wash-ring: rgba(240,149,44,.40); --hero-wash: rgba(240,149,44,.10);
    --pencil: #A69E92; --code-bg: #1A1714; --field: #1A1714;
    --key-top: #3A3631; --key-bot: #2D2A26; --key-edge: #141210; --key-ink: #EDE6DA;
    --shot-shadow: 0 0 0 .5px rgba(255,255,255,.10), 0 24px 56px -12px rgba(0,0,0,.7);
    --pb-top: #C8956A; --pb-bot: #906040; --pb-breast-top: #FFC050; --pb-breast-bot: #F0952C;
    --pb-beak: #FFC050; --pb-feet: #906040;
    --pb-cloud-top: #7C7C86; --pb-cloud-bot: #5E5E68; --pb-shadow: .42;
    --pp-bg: #2B2B2E; --pp-ink: #F2F2F5; --pp-meta: #A1A1A6; --pp-sel: #3D3D42; --pp-line: #3A3A3E; --pp-key: #D8D8DC;
    --pp-qsel: #4A4A50; --pp-blue: #62A6F2; --th-paper: #E9E9EC; --th-line: #C4C4C8;
    --pp-shadow: 0 0 0 .5px rgba(255,255,255,.12), 0 24px 56px -12px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

/* ---- the robin's colours: classed rules for the sprite (site/tools/bird.py writes the classes) ---- */
.pb-c-top { stop-color: var(--pb-top); }
.pb-c-bot { stop-color: var(--pb-bot); }
.pb-c-breast-top { stop-color: var(--pb-breast-top); }
.pb-c-breast-bot { stop-color: var(--pb-breast-bot); }
.pb-c-sheen-0 { stop-color: var(--pb-cream); stop-opacity: .30; }
.pb-c-sheen-1 { stop-color: var(--pb-cream); stop-opacity: 0; }
.pb-c-cloud-top { stop-color: var(--pb-cloud-top); }
.pb-c-cloud-bot { stop-color: var(--pb-cloud-bot); }
.pb-c-shadow { flood-color: #000; flood-opacity: var(--pb-shadow); }
.pb-c-beak { fill: var(--pb-beak); stroke: var(--pb-beak); }
.pb-c-eye { fill: var(--pb-eye); }
.pb-c-cream { fill: var(--pb-cream); }
.pb-c-wing { fill: var(--pb-bot); }
.pb-c-edge { stroke: var(--pb-cream); }
.pb-c-feet { stroke: var(--pb-feet); }
.pb-c-ground { fill: var(--pb-ground); }
.pb-c-tab { fill: var(--pb-tab); stroke: var(--pb-tab-line); }
.pb-c-tab-dot { fill: var(--pb-tab-dot); }
.pb-c-tab-line { stroke: var(--pb-tab-line); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 20px; line-height: 1.55;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wrap { width: 1440px; margin: 0 auto; position: relative; overflow: hidden; }
.pad { padding: 0 72px; }
.pb { display: block; overflow: visible; }
.mono { font-family: var(--mono); font-size: .9em; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--paper); padding: 8px 12px; font-family: var(--sans); font-size: 15px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* ---- header ---- */
.nav { display: flex; align-items: center; height: 84px; gap: 40px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 29px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand .pb { color: var(--ink); }
.nav nav { display: flex; gap: 30px; font-family: var(--sans); font-size: 16px; font-weight: 500; }
.nav nav a { color: var(--ink2); text-decoration: none; }
.nav nav a[aria-current=page] { color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-family: var(--sans); font-size: 14.5px; color: var(--ink3); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--on-blue); background: var(--blue-fill);
  border: 0; border-radius: 10px; padding: 14px 22px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.sm { font-size: 15px; padding: 9px 16px; border-radius: 8px; }
.btn svg { flex: none; }
.btn-off { background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--rule2); }
.req { font-family: var(--sans); font-size: 15px; color: var(--ink3); line-height: 1.45; }
.req b { color: var(--ink2); font-weight: 600; }
.k, kbd { font-family: var(--sans); font-size: .86em; font-weight: 600; color: var(--ink); background: none; border: 1px solid var(--rule2); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px 1px; }

/* ---- shared plate parts ---- */
.margin { font-size: 16px; line-height: 1.5; color: var(--ink2); font-style: italic; padding-top: 10px; }
.pn { font-style: italic; color: var(--ink); }
.pn b { font-style: normal; font-weight: 500; color: var(--amber-ink); }
.leader { position: absolute; height: 1px; background: var(--ink3); opacity: .7; }
.leader::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.leader.rev::before { left: auto; right: -3px; }
.vleader { position: absolute; width: 1px; background: var(--ink3); opacity: .7; }
.vleader::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.lt { position: absolute; font-style: italic; font-size: 22px; color: var(--amber-ink); line-height: 1; }
.glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.say { position: absolute; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); background: var(--paper); border-radius: 10px; padding: 7px 12px; box-shadow: 0 0 0 1px var(--rule2), 0 6px 16px -8px rgba(0,0,0,.25); white-space: nowrap; }
.say::after { content: ""; position: absolute; left: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 0; border-right-color: var(--paper); filter: drop-shadow(-1px 0 0 var(--rule2)); }
.pencil { position: absolute; pointer-events: none; overflow: visible; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: url(#graphite); }
.trail { color: var(--ink3); }
h2 { font-family: var(--serif); font-weight: 400; font-size: 62px; line-height: 1; letter-spacing: -.025em; margin: 0 0 18px; font-variation-settings: "opsz" 72; }
h2 em { font-style: italic; }

/* ================= Home ================= */
.page-home h1 { font-family: var(--serif); font-weight: 400; font-size: 78px; line-height: .98; white-space: nowrap; letter-spacing: -.03em; margin: 0 0 34px; font-variation-settings: "opsz" 72; }
.page-home h1 em { font-style: italic; letter-spacing: -.035em; }
.hero { display: grid; grid-template-columns: 660px 1fr; position: relative; padding-bottom: 40px; }
.hero-copy { padding: 92px 0 80px 72px; position: relative; z-index: 2; }
.greet { display: flex; align-items: flex-end; gap: 12px; font-style: italic; font-size: 19px; color: var(--ink2); margin: 0 0 30px; }
.greet .pb { margin-bottom: -2px; }
.page-home .lede { font-size: 22px; line-height: 1.5; color: var(--ink2); margin: 0 0 36px; max-width: 520px; }
.page-home .cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; position: relative; }
.free-link { margin-top: 26px; font-size: 18px; }
.keys { display: flex; gap: 12px; align-items: flex-end; margin-top: 46px; width: max-content; cursor: pointer; }
.kk { position: relative; height: 60px; min-width: 66px; border-radius: 11px; background: linear-gradient(var(--key-top), var(--key-bot)); box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 3px 0 var(--key-edge), 0 9px 18px -8px rgba(40,30,15,.30); color: var(--key-ink); font-family: -apple-system, "SF Pro Text", sans-serif; transition: transform .08s, box-shadow .08s; }
.kk .g { position: absolute; right: 9px; top: 6px; font-size: 15px; }
.kk .w { position: absolute; left: 9px; bottom: 7px; font-size: 11px; }
.kk.space { width: 250px; }
.kk.down { transform: translateY(2px); box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 1px 0 var(--key-edge), 0 5px 12px -8px rgba(40,30,15,.3); }
.keys .plus { font-family: var(--sans); font-size: 22px; font-weight: 600; color: var(--ink3); align-self: center; }
.keyhint { margin: 12px 0 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink3); }

.plate1 { position: relative; background: var(--plate); margin-top: 56px; height: 740px; border-radius: 2px 0 0 2px; }
.plate1::before { content: ""; position: absolute; inset: 14px 0 14px 14px; border: 1px solid var(--plate-line); border-right: 0; pointer-events: none; }
.shot { position: absolute; left: 50px; top: 92px; width: 626px; aspect-ratio: 1360/936; border-radius: 15px; box-shadow: var(--shot-shadow); }
.shot img.cap { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 15px; opacity: 0; transition: opacity .22s ease; }
.shot img.cap.on { opacity: 1; }
.shot .perch { position: absolute; left: 74%; top: -14.9%; width: 12.8%; height: auto; }
.shot .glow { left: 69%; top: -3.5%; width: 23%; height: 9%; }
.ld { transition: opacity .2s; }
.plate1:not(.st-03) .ld { opacity: 0; }
.ld-a { left: 176px; top: 120px; width: 510px; }
.lt-a { left: 694px; top: 107px; }
.ld-b { left: 404px; top: 190px; width: 282px; }
.lt-b { left: 694px; top: 177px; }
.ld-c { left: 369px; top: 356px; width: 317px; }
.lt-c { left: 694px; top: 343px; }
.ld-d { left: 216px; top: 516px; height: 34px; }
.lt-d { left: 211px; top: 556px; }
.plate-cap { position: absolute; left: 50px; right: 90px; bottom: 30px; font-size: 16px; line-height: 1.5; color: var(--ink2); display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.legend span i { color: var(--amber-ink); margin-right: 6px; }

.why { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 120px 72px 110px; border-top: 1px solid var(--rule); }
.margin .fig { font-style: normal; font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--ink); letter-spacing: -.02em; display: block; margin-bottom: 8px; font-variation-settings: "opsz" 72; }
.margin .fn-mark { font-style: normal; color: var(--amber-ink); }
blockquote { margin: 0; font-size: 46px; line-height: 1.14; letter-spacing: -.015em; font-style: italic; font-weight: 350; max-width: 900px; text-indent: -.42em; font-variation-settings: "opsz" 60; }
.cite { font-family: var(--sans); font-size: 15px; color: var(--ink3); margin: 22px 0 0; }
.answer { margin: 58px 0 0; max-width: 720px; font-size: 28px; line-height: 1.38; letter-spacing: -.01em; font-variation-settings: "opsz" 30; }
.answer strong { font-weight: 600; }
.fn { font-family: var(--sans); font-size: 13.5px; color: var(--ink3); margin-top: 16px; line-height: 1.45; }

.keysec { display: grid; grid-template-columns: 560px 1fr; gap: 56px; padding: 110px 72px 120px; border-top: 1px solid var(--rule); }
.sub { font-size: 21px; color: var(--ink2); margin: 0 0 44px; max-width: 520px; }
.key { border-top: 1px solid var(--rule2); }
.kc { display: grid; grid-template-columns: 44px 1fr; padding: 18px 0 16px; border-bottom: 1px solid var(--rule); }
.kc .no { font-size: 30px; line-height: 1.05; color: var(--amber); font-variation-settings: "opsz" 40; }
.kl { display: flex; align-items: baseline; gap: 10px; font-size: 20px; line-height: 1.4; }
.kl + .kl { margin-top: 8px; }
.kl.gap { margin-top: 14px; }
.kl .c { flex: none; }
.kl .d { flex: 1; border-bottom: 2px dotted var(--rule2); transform: translateY(-6px); min-width: 24px; }
.kl .go { flex: none; font-style: italic; color: var(--ink2); }
.kl .go b { font-style: normal; font-weight: 500; color: var(--amber-ink); }
.ko { margin: 8px 0 0; font-size: 17.5px; line-height: 1.5; color: var(--ink2); max-width: 520px; }
.ko .see { font-family: var(--serif); font-weight: 500; font-style: normal; color: var(--amber-ink); }
.plate3 { margin: 52px 0 0; position: relative; }
.shot3 { position: relative; width: 100%; aspect-ratio: 1360/936; border-radius: 13px; box-shadow: var(--shot-shadow); }
.shot3 img { display: block; width: 100%; height: 100%; border-radius: 13px; }
.ld-3a { left: -38px; top: 43.3%; width: 34px; }
.lt-3a { left: -58px; top: calc(43.3% - 13px); }
.plate3 figcaption, .details figcaption { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.plate3 figcaption i { color: var(--amber-ink); }
.plate2 { position: relative; background: var(--plate); border-radius: 2px; padding: 76px 40px 112px; align-self: start; margin-top: 8px; }
.plate2::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--plate-line); pointer-events: none; }
.plate2 .pal { zoom: .86; position: relative; }
.plate2 .plate-cap { left: 40px; right: 40px; bottom: 34px; grid-template-columns: 1fr; }
.plate2 .loop { left: 171px; top: 124px; }
.plate2 .trail { position: absolute; left: 14px; top: 22px; }
.plate2 .carry { position: absolute; left: 118px; top: 6px; }
.say.found { left: 226px; top: 14px; }

/* Plate 2's palette: a faithful HTML redraw of Perch's palette (sample data), at the app's point sizes */
.pp { width: 680px; background: var(--pp-bg); border-radius: 16px; box-shadow: var(--pp-shadow); color: var(--pp-ink); overflow: hidden; position: relative; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; text-align: left; }
.pp-search { height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--pp-line); }
.pp-search svg { flex: none; }
.pp-q { font-size: 22px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.pp-q .s { background: var(--pp-qsel); border-radius: 2px; padding: 0 1px; }
.pp-note { padding: 10px 18px 2px; font-size: 12.5px; color: var(--pp-ink); }
.pp-note b { font-weight: 600; }
.pp-sec { padding: 12px 18px 4px; font-size: 11.5px; font-weight: 600; color: var(--pp-meta); }
.pp-rows { padding: 8px 8px 10px; position: relative; }
.pp-row { display: flex; align-items: center; gap: 13px; padding: 7px 8px; border-radius: 9px; min-height: 46px; }
.pp-row.sel { background: var(--pp-sel); }
.pp-row .tx { flex: 1; min-width: 0; }
.pp-t { font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-p { font-size: 12.5px; line-height: 1.3; margin-top: 2px; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.pp-p b { font-weight: 600; font-style: normal; }
.pp-m { font-size: 12.5px; color: var(--pp-meta); line-height: 1.3; margin-top: 1px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.pp-hint { font-size: 12px; color: var(--pp-meta); white-space: nowrap; padding-right: 6px; }
.pp-hint b { color: var(--pp-key); font-weight: 600; }
.pp-foot { height: 32px; border-top: 1px solid var(--pp-line); display: flex; align-items: center; gap: 18px; padding: 0 16px; font-size: 12.5px; color: var(--pp-meta); }
.pp-foot b { color: var(--pp-key); font-weight: 600; margin-right: 4px; }
.pp-foot .r { margin-left: auto; }
.th { flex: none; width: 72px; height: 44px; border-radius: 5px; background: var(--th-paper); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.08); overflow: hidden; position: relative; }
.th .bar { height: 8px; display: flex; gap: 3px; align-items: center; padding-left: 6px; }
.th .bar i { width: 7px; height: 1.5px; background: rgba(255,255,255,.9); border-radius: 1px; }
.th .ln { position: absolute; left: 6px; height: 1.5px; background: var(--th-line); border-radius: 1px; }
.th .l1 { top: 16px; right: 10px; }
.th .l2 { top: 20px; right: 16px; }
.th .l3 { top: 24px; right: 8px; }
.th .l4 { top: 28px; right: 20px; }
.th .blk { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 9px; border-radius: 2px; }
.th .hd { position: absolute; left: 6px; top: 11px; width: 38px; height: 2px; background: #555; border-radius: 1px; opacity: .7; }
.th.gone { filter: saturate(.35); opacity: .8; }
.th.plum .bar { background: #9B4C87; }
.th.plum .blk { background: #EEDDE9; }
.th.ochre .bar { background: #A39545; }
.th.ochre .blk { background: #EEEBD9; }

.ovsec { background: var(--plate); padding: 96px 0 100px; position: relative; border-top: 1px solid var(--plate-line); border-bottom: 1px solid var(--plate-line); }
.ovhead { display: grid; grid-template-columns: 232px 640px 1fr; gap: 48px; padding: 0 72px; align-items: end; margin-bottom: 56px; }
.ovhead p { margin: 0; font-size: 19.5px; color: var(--ink2); line-height: 1.55; }
.ovhead h2 { margin: 0; }
.ovhead .margin { padding-bottom: 6px; }
.pn.label { font-size: 18px; }
.ovshot { position: relative; margin-left: 72px; width: 1240px; }
.ovshot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 30px 70px -20px rgba(20,22,30,.45); }
.ovshot .onchip { position: absolute; left: 39.6%; top: 4.7%; width: 3.8%; height: auto; }
.say.chip { left: 45.6%; top: 9.2%; }
.details { display: grid; grid-template-columns: 700px minmax(0, 1fr); gap: 48px; padding: 60px 72px 0; align-items: start; }
.details figure { margin: 0; }
.details img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 18px 40px -18px rgba(20,22,30,.45); }
.details img.strip { margin-top: 12px; border-radius: 8px; }

.term { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; padding: 120px 72px; align-items: start; }
.term h2 { font-size: 52px; }
.term p { font-size: 19px; color: var(--ink2); margin: 0 0 18px; }
.term code { font-family: var(--mono); font-size: .88em; }
.listing { background: var(--code-bg); border: 1px solid var(--rule2); border-radius: 12px; padding: 30px 34px 28px; font-family: var(--mono); font-size: 13.6px; margin-top: 8px; line-height: 1.75; color: var(--ink); position: relative; box-shadow: 0 1px 0 var(--rule); }
.listing .cm { color: var(--ink3); font-family: var(--serif); font-style: italic; font-size: 17px; display: block; margin: 0 0 2px; }
.listing .ln { display: block; white-space: pre; }
.listing .ln + .cm { margin-top: 20px; }
.listing .pr { color: var(--ink3); user-select: none; }
.listing .ex { color: var(--ink2); }
.copy { position: absolute; right: 16px; top: 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--link); border: 1px solid var(--rule2); background: transparent; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.perm { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; font-family: var(--sans); font-size: 14.5px; color: var(--ink2); }
.seg { display: inline-flex; white-space: nowrap; border: 1px solid var(--rule2); border-radius: 8px; overflow: hidden; }
.seg span { padding: 5px 11px; }
.seg span.on { background: var(--blue-fill); color: #fff; font-weight: 600; }

.notes { display: grid; grid-template-columns: 200px 470px 1fr; gap: 56px; padding: 110px 72px 130px; border-top: 1px solid var(--rule); }
.entry { position: relative; }
.entry .name { font-size: 52px; line-height: 1; letter-spacing: -.02em; margin: 0 0 6px; font-variation-settings: "opsz" 72; }
.entry .name em { font-size: .62em; color: var(--ink2); letter-spacing: 0; margin-left: 8px; }
.entry .flag { font-family: var(--sans); font-size: 13.5px; color: var(--ink3); margin: 0 0 26px; }
.entry dl { margin: 0; display: grid; grid-template-columns: 118px 1fr; border-top: 1px solid var(--rule2); }
.entry dt, .entry dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 18.5px; line-height: 1.45; }
.entry dt { font-style: italic; color: var(--ink2); }
.branch { position: relative; height: 150px; margin: -10px 0 18px; }
.branch svg.twig { position: absolute; left: -10px; top: 96px; overflow: visible; }
.branch svg.twig path { fill: none; stroke: var(--ink3); stroke-width: 1.6; stroke-linecap: round; }
.branch .pb { position: absolute; left: 150px; top: -4px; }
.card-note { position: relative; background-color: var(--paper); border: 1px solid var(--rule2); border-radius: 4px; padding: 40px 40px 34px; margin-top: 126px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px -26px rgba(40,30,15,.35); background-image: linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--paper), var(--paper)), repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--rule) 33px, var(--rule) 34px); background-size: 100% 1px, 100% 73px, 100% 100%; background-position: 0 73px, 0 0, 0 74px; background-repeat: no-repeat, no-repeat, repeat; }
.card-note .hd { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 13.5px; color: var(--ink3); height: 34px; line-height: 34px; margin: 0; }
.card-note .hd b { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 20px; color: var(--amber-ink); }
.card-note p { font-size: 25px; line-height: 34px; margin: 0 0 34px; letter-spacing: -.005em; font-variation-settings: "opsz" 28; padding-top: 9px; }
.card-note .src { font-family: var(--sans); font-size: 13.5px; color: var(--ink3); line-height: 34px; padding-top: 4px; }
.next { margin-top: 22px; display: flex; gap: 14px; align-items: center; }
.ghost { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--link); background: transparent; border: 1px solid var(--rule2); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule2); }
.dots i.on { background: var(--amber); }
[hidden] { display: none !important; }

.priv { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 110px 72px; border-top: 1px solid var(--rule); }
.priv h2 { font-size: 54px; max-width: 760px; }
.ledger { margin-top: 40px; border-top: 1px solid var(--ink); }
.lr { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.lr h3 { margin: 0; font-weight: 500; font-size: 22px; line-height: 1.3; }
.lr p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink2); max-width: 700px; }
.privfoot { margin-top: 26px; font-family: var(--sans); font-size: 15.5px; color: var(--ink2); display: flex; gap: 26px; }

.close { position: relative; padding: 130px 72px 140px; display: grid; grid-template-columns: 232px 1fr; gap: 48px; border-top: 1px solid var(--rule); }
.close h2 { font-size: 84px; line-height: .98; max-width: 980px; margin-bottom: 40px; }
.close .later { font-size: 18px; color: var(--ink2); margin-top: 28px; max-width: 640px; }

/* ================= Pricing ================= */
.page-pricing .margin { padding-top: 14px; }
.page-pricing h1 { font-weight: 400; font-size: 92px; line-height: .95; letter-spacing: -.03em; margin: 0 0 30px; max-width: 1000px; font-variation-settings: "opsz" 72; }
.page-pricing h1 em { font-style: italic; }
h1 .u { position: relative; display: inline-block; }
h1 .u svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .22em; overflow: visible; }
h1 .u path { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; filter: url(#graphite); vector-effect: non-scaling-stroke; }
.page-pricing .lede { font-size: 24px; line-height: 1.45; color: var(--ink2); max-width: 760px; margin: 0; }
.head { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 96px 72px 70px; }
.two { display: grid; grid-template-columns: 232px 560px minmax(0, 1fr); gap: 48px; padding: 0 72px 110px; align-items: start; }
.free h2, .cloud h2 { font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.025em; margin: 0; font-variation-settings: "opsz" 72; }
.free .what { font-family: var(--sans); font-size: 16px; color: var(--ink2); margin: 12px 0 28px; }
.free .what b { color: var(--ink); }
.feat { border-top: 1px solid var(--ink); }
.f { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0 15px; border-bottom: 1px solid var(--rule); }
.f h3 { margin: 0; font-weight: 500; font-size: 19.5px; line-height: 1.35; }
.f p { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--ink2); }
.f .k { padding: 0 5px 1px; }
.free .cta { display: flex; gap: 20px; align-items: center; margin-top: 34px; }
.mfree { position: relative; align-self: stretch; }
.brace { position: absolute; right: -34px; top: 146px; height: 600px; overflow: visible; }
.brace path { fill: none; stroke: var(--pencil); stroke-width: 1.8; stroke-linecap: round; filter: url(#graphite); }
.pnote2 { position: absolute; right: -4px; top: 404px; margin: 0; width: 206px; text-align: right; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.25; color: var(--pencil); transform: rotate(-3deg); }
.cloud { margin-top: 132px; position: relative; background: var(--plate); border-radius: 2px; padding: 0 40px 40px; }
.cloud::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--plate-line); pointer-events: none; }
.cloud .hero-wash { position: relative; height: 172px; margin: 0 -40px; background: linear-gradient(var(--hero-wash), transparent); }
.cloud .hero-wash .pb { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); }
.cloud .line { text-align: center; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink2); margin: 6px 0 26px; }
.cloud h2 { font-size: 46px; }
.cloud .tags { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.tag { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--amber-ink); background: var(--wash); box-shadow: inset 0 0 0 1px var(--wash-ring); border-radius: 999px; padding: 3px 10px 4px; }
.namenote { font-family: var(--sans); font-size: 12.5px; color: var(--ink3); border: 1px dashed var(--rule2); border-radius: 6px; padding: 2px 7px; }
.cloud ul { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule2); }
.cloud li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45; }
.status { margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.status b { color: var(--ink); font-weight: 600; }
/* the waitlist's form (WEB-6), on Pricing and /waitlist only while flags.waitlist is on */
.btn.quiet { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--rule2); }
.notify { margin-top: 24px; position: relative; }
.notify > label { font-family: var(--sans); font-size: 14px; color: var(--ink2); display: block; margin-bottom: 8px; }
.notify .row { display: flex; gap: 10px; }
.notify .btn { white-space: nowrap; padding: 12px 16px; }
.notify input[type=email] { flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--rule2); background: var(--field); color: var(--ink); }
.notify .consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-family: var(--sans); font-size: 13.5px; color: var(--ink2); line-height: 1.45; }
.notify .consent input { margin: 2px 0 0; width: 15px; height: 15px; flex: none; }
.notify .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.token-form { margin-top: 30px; }
.where { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 100px 72px; border-top: 1px solid var(--rule); }
.where h2, .faq h2 { font-size: 54px; margin: 0 0 14px; }
.where .sub { font-size: 20px; color: var(--ink2); margin: 0 0 40px; max-width: 700px; }
.map { display: grid; grid-template-columns: 1.55fr 1fr 1fr; border-top: 1px solid var(--ink); }
.zone { padding: 22px 28px 26px 0; border-right: 1px solid var(--rule); }
.zone + .zone { padding-left: 28px; }
.zone:last-child { border-right: 0; }
.zone h3 { margin: 0 0 4px; font-weight: 500; font-size: 24px; }
.zone .who { font-family: var(--sans); font-size: 14px; color: var(--ink3); margin-bottom: 16px; }
.zone ul { margin: 0; padding: 0; list-style: none; }
.zone li { font-size: 17.5px; line-height: 1.45; padding: 7px 0; border-top: 1px solid var(--rule); color: var(--ink2); }
.zone li:first-child { border-top: 0; }
.zone.later { background: repeating-linear-gradient(135deg, transparent 0 9px, var(--rule) 9px 10px); }
.zone.later h3, .zone.later .who, .zone.later li { background: var(--paper); display: table; }
.zone.later li { display: block; }
.faq { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 100px 72px 110px; border-top: 1px solid var(--rule); }
.faq h2 { margin-bottom: 40px; }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.q { padding: 22px 0 24px; border-top: 1px solid var(--rule2); }
.q h3 { margin: 0 0 8px; font-weight: 500; font-size: 23px; line-height: 1.3; }
.q p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink2); }

/* ================= Pages extended from the system (not designed; the Field guide's type, tokens, plates
   and margin column applied to new content) ================= */
.doc h1 { font-weight: 400; font-size: 72px; line-height: .98; letter-spacing: -.03em; margin: 0 0 26px; font-variation-settings: "opsz" 72; }
.doc h1 em { font-style: italic; }
.doc .lede { font-size: 23px; line-height: 1.45; color: var(--ink2); max-width: 760px; margin: 0; }
.doc-head { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 96px 72px 64px; }
.doc-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; padding: 0 72px 110px; align-items: start; }
.doc-body + .doc-body { padding-top: 0; }
.doc-body.ruled { padding-top: 80px; border-top: 1px solid var(--rule); }
.doc h2 { font-size: 46px; margin: 0 0 22px; }
.doc .main { max-width: 860px; }
.doc .main > p { font-size: 19px; color: var(--ink2); margin: 0 0 18px; max-width: 760px; }
.plate { position: relative; background: var(--plate); border-radius: 2px; padding: 44px 44px 40px; }
.plate::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--plate-line); pointer-events: none; }
.plate > * { position: relative; }
.plate .cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.facts { margin: 30px 0 0; display: grid; grid-template-columns: 160px 1fr; border-top: 1px solid var(--rule2); }
.facts dt, .facts dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45; }
.facts dt { font-style: italic; color: var(--ink2); }
.facts code, .check code { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.sample-note { margin: 18px 0 0; font-family: var(--sans); font-size: 14px; color: var(--ink3); border: 1px dashed var(--rule2); border-radius: 6px; padding: 6px 10px; display: inline-block; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule2); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0 15px; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 1.5; counter-increment: step; }
.steps li::before { content: counter(step); font-size: 28px; line-height: 1.05; color: var(--amber); font-variation-settings: "opsz" 40; }
.steps b { font-weight: 600; }
.check { background: var(--code-bg); border: 1px solid var(--rule2); border-radius: 12px; padding: 22px 26px; margin: 22px 0 0; font-family: var(--mono); font-size: 13.6px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.pairs > div { padding: 22px 28px 26px 0; border-right: 1px solid var(--rule); }
.pairs > div + div { padding-left: 28px; }
.pairs > div:last-child { border-right: 0; }
.pairs h3 { margin: 0 0 6px; font-weight: 500; font-size: 24px; }
.pairs p { margin: 0 0 12px; font-size: 17.5px; line-height: 1.5; color: var(--ink2); }
.note, .doc .main > p.note { font-family: var(--sans); font-size: 15px; color: var(--ink3); line-height: 1.5; margin: 18px 0 0; }
.prose { max-width: 760px; }
.prose h1 { font-size: 64px; margin: 0 0 30px; }
.prose h2 { font-size: 34px; letter-spacing: -.015em; margin: 52px 0 14px; }
.prose h3 { font-weight: 500; font-size: 24px; margin: 34px 0 10px; }
.prose p, .prose li { font-size: 19px; line-height: 1.6; }
.prose li { margin: 0 0 8px; }
.prose blockquote { font-size: 17px; line-height: 1.5; font-style: normal; font-weight: 400; text-indent: 0; font-family: var(--sans); border: 1px dashed var(--rule2); border-radius: 8px; padding: 6px 18px; margin: 0 0 28px; color: var(--ink2); background: var(--plate); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 34px 0; }
.prose code { font-family: var(--mono); font-size: .86em; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 22px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
.prose th { font-family: var(--sans); font-size: 14px; color: var(--ink2); border-bottom-color: var(--rule2); }
.lost { display: grid; grid-template-columns: 232px 1fr; gap: 48px; padding: 120px 72px 150px; }
.lost .perched { position: relative; height: 110px; }
.lost .perched .pb { position: absolute; left: 0; bottom: 0; }
.lost .perched .say { left: 104px; top: 22px; }

/* ---- footer ---- */
footer { padding: 0 72px 56px; position: relative; }
.frule { position: relative; height: 56px; border-bottom: 1px solid var(--rule2); }
.frule .pb { position: absolute; left: 0; bottom: -1px; }
.frule button { position: absolute; left: 0; bottom: -1px; padding: 0; border: 0; background: none; cursor: pointer; }
.frule button .pb { position: static; }
.frule .clickable { cursor: pointer; }
.frule .say { left: 64px; top: 4px; opacity: 0; transition: opacity .2s; }
.frule.spoke .say { opacity: 1; }
.fl { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; font-family: var(--sans); font-size: 15px; color: var(--ink3); align-items: baseline; }
.fl a { color: var(--ink2); text-decoration: none; }
.fl .r { margin-left: auto; }
.identity { margin: 10px 0 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink3); }
.identity a { color: var(--ink3); }

/* ---- motion: only the bird, only on purpose ---- */
@media (prefers-reduced-motion: no-preference) {
  .hop { animation: hop .34s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes hop { 0% { transform: translateY(0); } 45% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- narrower desktops: the 1440 layout, scaled to fit ---- */
@media (min-width: 1280px) and (max-width: 1439px) { .wrap { zoom: .888; } }
@media (min-width: 1100px) and (max-width: 1279px) { .wrap { zoom: .763; } }

/* ---- one column below 1100 px (the designer's phone layout, §11.6): the margin column folds above its
   section, plates lose their letters and keep their captions ---- */
@media (max-width: 1099px) {
  body { font-size: 18px; }
  .wrap { width: 100%; }
  .pad, .hero-copy, footer { padding-left: 40px; padding-right: 40px; }
  .nav { height: 64px; gap: 12px; }
  .nav nav, .nav .right span { display: none; }
  .brand { font-size: 25px; }
  .page-home h1, .page-pricing h1, .doc h1 { font-size: 46px; white-space: normal; margin-bottom: 24px; }
  .page-home .lede, .page-pricing .lede, .doc .lede { font-size: 19px; margin-bottom: 28px; }
  h2 { font-size: 40px; }
  .hero { display: block; padding-bottom: 8px; }
  .hero-copy { padding-top: 34px; padding-bottom: 30px; }
  .page-home .cta { gap: 16px; }
  .keys { margin-top: 30px; }
  .kk { height: 50px; min-width: 56px; }
  .kk.space { width: 180px; }
  .plate1 { height: auto; margin: 0; padding: 64px 16px 26px; border-radius: 0; }
  .plate1::before { inset: 8px; border-right: 1px solid var(--plate-line); }
  .shot { position: relative; left: 0; top: 0; width: 100%; }
  .ld, .legend { display: none; }
  .plate-cap { position: static; display: block; margin-top: 18px; font-size: 15px; }
  .plate-cap .pn { margin-right: 6px; }
  .why, .keysec, .priv, .close, .notes, .term, .head, .two, .where, .faq, .doc-head, .doc-body, .lost { display: block; padding: 64px 40px; }
  .doc-body { padding-top: 0; }
  .doc-body.ruled { padding-top: 56px; }
  .margin { padding: 0 0 22px; }
  .margin .fig { font-size: 44px; }
  blockquote { font-size: 30px; text-indent: 0; }
  .answer { font-size: 21px; margin-top: 34px; }
  .sub { font-size: 19px; margin-bottom: 30px; }
  .kl { font-size: 18px; flex-wrap: wrap; }
  .kl .d { min-width: 12px; }
  .plate2 { margin-top: 40px; padding: 84px 12px 24px; }
  .plate2 .pal { zoom: .5; }
  .plate2 .loop { left: 76px; top: 111px; width: 62px; height: 22px; }
  .plate2 .carry { left: 20px; top: 8px; width: 72px; height: auto; }
  .plate2 .trail { display: none; }
  .say.found { left: 100px; top: 16px; }
  .plate2 .plate-cap { left: 16px; right: 16px; bottom: 22px; }
  .ovsec { padding: 64px 0 60px; }
  .ovhead { display: block; padding: 0 40px; margin-bottom: 28px; }
  .ovhead h2 { margin: 8px 0 14px; }
  .ovhead p { font-size: 18px; }
  .ovshot { margin: 0 40px; width: auto; }
  .say.chip { display: none; }
  .details { display: block; padding: 34px 40px 0; }
  .details figure + figure { margin-top: 34px; }
  .term h2 { font-size: 36px; }
  .listing { padding: 22px 18px; font-size: 12px; margin-top: 24px; }
  .listing .ln { white-space: pre-wrap; word-break: break-all; }
  .copy { display: none; }
  .entry .name { font-size: 42px; }
  .branch .pb { left: 110px; width: 120px; height: auto; }
  .branch svg.twig { width: 100%; }
  .card-note { margin-top: 60px; padding: 34px 22px 28px; }
  .card-note p { font-size: 21px; }
  .lr { grid-template-columns: 1fr; gap: 6px; }
  .priv h2 { font-size: 38px; }
  .privfoot { flex-direction: column; gap: 8px; }
  .close h2 { font-size: 44px; }
  .two { padding-top: 8px; }
  .head { padding-top: 40px; padding-bottom: 28px; }
  .free h2, .cloud h2 { font-size: 48px; }
  .f { grid-template-columns: 1fr; gap: 4px; }
  .free .cta { flex-wrap: wrap; }
  .mfree { padding-bottom: 6px; }
  .brace { display: none; }
  .pnote2 { position: static; width: auto; text-align: left; transform: rotate(-1.5deg); margin: 12px 0 4px; font-size: 20px; }
  .cloud { margin-top: 56px; padding: 0 20px 28px; }
  .cloud .hero-wash { margin: 0 -20px; }
  .where h2, .faq h2 { font-size: 40px; }
  .map, .pairs { grid-template-columns: 1fr; }
  .zone, .zone + .zone, .pairs > div, .pairs > div + div { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .qa { grid-template-columns: 1fr; }
  .doc h2 { font-size: 34px; }
  .plate { padding: 32px 22px 28px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .prose h1 { font-size: 44px; }
  .prose h2 { font-size: 28px; }
  .fl .r { margin-left: 0; }
}
@media (max-width: 640px) {
  .pad, .hero-copy, footer { padding-left: 16px; padding-right: 16px; }
  .why, .keysec, .priv, .close, .notes, .term, .head, .two, .where, .faq, .doc-head, .doc-body, .lost { padding-left: 16px; padding-right: 16px; }
  .ovhead { padding: 0 16px; }
  .ovshot { margin: 0 16px; }
  .details { padding-left: 16px; padding-right: 16px; }
  .fl { gap: 10px 18px; }
}