/* LOCALQ website. One stylesheet for the home page and the legal pages. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque-latin-wght.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-latin-wght.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --green: #2F8454; --green-light: #46A669; --green-ink: #1f6b42; --yellow: #FBD800; --off: #F6FAF7;
  --ink: #101b16; --muted: #4c5f55; --line: #dbe6df;
  --dusk: #0d1426;
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  /* One left and right edge for everything: nav, words, sections, footer. It grows on very wide
     screens so lines never run longer than a 1680px column. */
  --gut: max(clamp(20px, 5vw, 88px), calc((100vw - 1680px) / 2));
  --measure: 44rem;
  --eyebrow: clamp(0.95rem, 0.9rem + 0.3vw, max(1.2rem, 1.6vh));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.55 var(--body); color: var(--ink); background: var(--off); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.02; margin: 0; text-wrap: balance; }
a { color: var(--green-ink); text-underline-offset: 0.16em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- Top bar, on every page ---- */
.nav { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: calc(12px + env(safe-area-inset-top)) var(--gut) 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 1.2rem/1 var(--display); letter-spacing: -0.02em; }
.brand img { border-radius: 9px; }
.nav nav { display: flex; gap: clamp(12px, 3vw, 28px); }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.nav nav a:hover { text-decoration: underline; }

/* ---- Home page ---- */
.home { background: var(--dusk); color: var(--off); }
.home .nav { color: var(--off); }
.home a { color: inherit; }
#film { display: none; }
.vignette { display: none; }
.eyebrow { margin: 0 0 0.8em; color: var(--yellow); font-weight: 700; font-size: var(--eyebrow); line-height: 1.55; letter-spacing: 0.01em; }
.lede { margin: 0.85em 0 0; font-size: clamp(1.05rem, 0.95rem + 0.45vw, max(1.4rem, 2vh)); line-height: 1.4; font-weight: 450; max-width: 30em; text-wrap: pretty; }
/* Caps grow with the window's height on big screens, so the words keep their weight against the film. */
h1 { font-size: clamp(2.5rem, 1.1rem + 4.2vw, max(5.75rem, 8.4vh)); }
h2 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, max(5rem, 7.2vh)); }
.cue { display: none; }
.note { font-size: 0.82rem; opacity: 0.74; margin: 0; }

/* Static version: every chapter is a picture and its words, in order. It's what shows without
   JavaScript, without WebGL, or with reduced motion. */
.chapter { padding: 0; }
.stage { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(48px, 6vw, 96px) var(--gut); }
.chapter-hero .stage { padding-top: clamp(84px, 11vw, 150px); text-align: center; }
.chapter-hero .lede, .chapter-close .lede { margin-inline: auto; }
.chapter-hero h1 { max-width: 11.5em; margin-inline: auto; }
.still { order: 2; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(14px, 2.4vw, 28px); background: linear-gradient(180deg, #2b2e66, #c9798e 70%, #f6b07c); }
.chapter-hero .still, .chapter-close .still { order: 3; }
.stage > .beat { order: 1; }
.chapter-close .stage { text-align: center; }
/* Chapters with several beats lay them out side by side, at one smaller size, over the picture. */
.chapter-steps .stage, .chapter-clearing .stage, .chapter-services .stage { column-gap: clamp(24px, 3vw, 48px); }
@media (min-width: 640px) {
  .chapter-steps .stage, .chapter-clearing .stage, .chapter-services .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .chapter-services .stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chapter-steps .stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .chapter-steps .stage { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.chapter-steps .still, .chapter-clearing .still, .chapter-services .still { grid-column: 1 / -1; }
.chapter-steps .still { order: 0; }
.chapter-steps .step h2, .chapter-clearing h2, .chapter-services h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem); }
.chapter-steps .step .lede, .chapter-clearing .lede, .chapter-services .lede { font-size: clamp(1.02rem, 1rem + 0.2vw, 1.2rem); }
.chapter-clearing br { display: none; }
/* "First up" sits over the first service only; the others keep its line so the headings align. */
.chapter-services .beat:not(:first-of-type) { padding-top: calc(var(--eyebrow) * 2.35); }
.chapter-steps .note { grid-column: 1 / -1; order: 5; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75em; }
.chapter-close .stores { justify-content: center; }
.store { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 60px; padding: 12px 24px; min-width: 196px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); text-align: left; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.store-name { font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.store-soon { font-size: 0.86rem; opacity: 0.85; }
.store.dark { background: var(--ink); color: var(--off); border-color: var(--ink); }

/* The film. boot.js adds .fx before first paint. */
.fx #film { display: block; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; opacity: 0; transition: opacity 0.9s ease; }
.fx.fx-ready #film { opacity: 1; }
.fx .vignette { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 8, 22, 0.42), rgba(5, 8, 22, 0) 26%), radial-gradient(120% 90% at 50% 45%, rgba(5, 8, 22, 0) 55%, rgba(5, 8, 22, 0.42) 100%); }
.fx main, .fx .nav, .fx .foot { position: relative; z-index: 2; }
.fx .nav { position: absolute; z-index: 3; }
.fx .chapter { height: 300vh; }
.fx .len-190 { height: 190svh; } .fx .len-210 { height: 210svh; } .fx .len-230 { height: 230svh; }
.fx .len-340 { height: 340svh; } .fx .len-400 { height: 400svh; } .fx .len-640 { height: 640svh; }
.fx .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; max-width: none; overflow: hidden; }
.fx .still { display: none; }
/* The hero's picture holds the place while the film loads, then gets out of the way. */
.fx .still-hero { display: block; position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; transition: opacity 0.9s ease; }
.fx.fx-ready .still-hero { opacity: 0; }
.fx .beat { position: absolute; left: var(--gut); right: var(--gut); opacity: 0; visibility: hidden; will-change: opacity, transform; text-shadow: 0 2px 28px rgba(8, 10, 34, 0.45); }
.fx .beat.left { top: clamp(96px, 16vh, 180px); right: auto; width: min(44vw, max(700px, 50vh)); }
.fx .beat.right { top: clamp(96px, 16vh, 180px); left: auto; width: min(44vw, max(700px, 50vh)); }
.fx .beat.top { top: clamp(76px, 10vh, 120px); }
.fx .beat.center .lede { max-width: 34em; margin-inline: auto; text-wrap: balance; }
.fx .beat.center { text-align: center; }
.fx .beat-note { position: absolute; left: var(--gut); bottom: 20px; }
/* A little dark behind the words, wherever they sit over a busy street. */
.fx [data-chapter='landing'] .stage::before, .fx [data-chapter='clearing'] .stage::before, .fx [data-chapter='services'] .stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 34, 0.62), rgba(8, 10, 34, 0.3) 38%, rgba(8, 10, 34, 0) 66%); }
/* Steps share the other chapters' top line, level with the top of the phone and clear of the route. */
.fx .chapter-steps .beat.left { width: min(40vw, max(620px, 44vh)); }
.fx .chapter-steps .stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 10, 34, 0.82), rgba(8, 10, 34, 0.56) 42%, rgba(8, 10, 34, 0) 66%); }
.fx .chapter-steps .step h2, .fx .chapter-clearing h2, .fx .chapter-services h2 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, max(5rem, 7.2vh)); }
.fx .chapter-clearing br { display: inline; }
.fx .chapter-services .beat { padding-top: 0; }
.fx .chapter-steps .step .lede, .fx .chapter-clearing .lede, .fx .chapter-services .lede { font-size: clamp(1.05rem, 0.95rem + 0.45vw, max(1.4rem, 2vh)); }
.fx .note[data-in] { opacity: 0; }
.fx .cue { display: block; position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.fx .cue::after { content: ''; display: block; width: 1px; height: 34px; margin: 8px auto 0; background: linear-gradient(var(--off), transparent); }

/* Portrait phones and tablets: subject above, words below, on a scrim that keeps them readable. */
@media (max-aspect-ratio: 1/1) {
  .fx .beat.left, .fx .beat.right { top: auto; bottom: calc(clamp(28px, 6svh, 64px) + env(safe-area-inset-bottom)); left: var(--gut); right: var(--gut); margin: 0; width: auto; }
  .fx .stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 11, 30, 0), rgba(8, 11, 30, 0.74) 60%); }
  .fx .chapter-hero .stage::after, .fx .chapter-close .stage::after { display: none; }
  .fx .chapter-steps .stage::before { display: none; }
  .fx .beat-note { display: none; }
  .fx .chapter-steps .beat.left { top: auto; margin: 0; width: auto; bottom: calc(clamp(20px, 4svh, 40px) + env(safe-area-inset-bottom)); }
  .fx .chapter-steps .step h2 { font-size: clamp(2.2rem, 9vw, 4rem); }
  .fx .chapter-steps .step .lede { font-size: clamp(1.02rem, 3.6vw, 1.4rem); }
  .fx .chapter-steps .eyebrow { margin-bottom: 0.3em; }
}
@media (max-width: 560px) {
  .nav nav a:not(:first-child) { display: none; }
}

/* ---- After the film: plain, bright, and easy to read ---- */
.light { position: relative; background: var(--off); color: var(--ink); }
.light a, .foot a { color: var(--green-ink); }
.light .lede { color: var(--muted); }
.light .eyebrow { color: var(--green-ink); }
.answers, .pro { padding: clamp(64px, 9vw, 136px) var(--gut); }
.answers h2, .pro h2 { font-size: clamp(2.3rem, 1.4rem + 4vw, 5.2rem); }
.answers dl { margin: clamp(32px, 5vw, 72px) 0 0; display: grid; gap: clamp(28px, 3.6vw, 56px) clamp(24px, 4vw, 72px); }
/* Six answers: two or three even columns, never a row with a straggler. */
@media (min-width: 700px) { .answers dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .answers dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.answers dt { font: 700 clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.012em; }
.answers dd { margin: 0.6em 0 0; color: var(--muted); }
/* The rule between the two sections spans the content column, not the window. */
.pro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; padding-top: 0; }
.pro::before { content: ''; grid-column: 1 / -1; border-top: 1px solid var(--line); margin-bottom: clamp(40px, 6vw, 96px); }
.pro > div { max-width: 46rem; }
.pro .stores { max-width: 380px; }
.pro .stores { margin: 0; flex-direction: column; align-items: stretch; }
@media (max-width: 800px) { .pro { grid-template-columns: minmax(0, 1fr); } }

/* Brand and links on one line, the operator underneath, all on the page's edges. */
.foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 36px var(--gut) calc(36px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--off); font-size: 0.95rem; }
.foot p { order: 3; flex-basis: 100%; margin: 0; opacity: 0.72; font-size: 0.9rem; }
.foot .brand { color: var(--off); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot nav a { color: var(--off); }

/* ---- Legal pages ---- */
.page { min-height: 100vh; display: flex; flex-direction: column; }
/* Legal pages: header and footer line up with the text column. */
.page { --gut: max(clamp(20px, 5vw, 88px), calc((100% - var(--measure)) / 2)); }
.page .nav { position: static; background: var(--ink); color: var(--off); }
.prose { flex: 1; width: 100%; padding: clamp(40px, 7vw, 88px) var(--gut) clamp(56px, 8vw, 110px); }
.prose p, .prose li { line-height: 1.65; }
.prose h1 { font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.4rem); margin-bottom: 0.5em; color: var(--ink); }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.15; margin: 2em 0 0.5em; letter-spacing: -0.016em; }
.prose p, .prose li { color: #26332c; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 0.4em 0; }
.prose .table { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.97em; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.7em 1em 0.7em 0; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--display); font-weight: 700; }
.draft { background: #f9e1dc; color: #8e2a1b; padding: 0.75rem 1rem; border-radius: 14px; font-weight: 600; }
.lost { text-align: center; }
.lost .prose { align-self: center; flex: none; margin-block: auto; }