/* JobScoutar landing page. One loud thing: the hero's sorted postings, the product's core idea drawn as the product
   draws it. Everything else is quiet: cool paper, navy ink, the brand indigo for actions, real screenshots.
   Display type is Bricolage Grotesque, body is Plus Jakarta Sans (the app's own face, so the screenshots match). */
:root {
  --paper: #F6F7FB;
  --surface: #FFFFFF;
  --ink: #141A2E;
  --slate: #545C72;
  --rule: #E2E5EE;
  --indigo: #4F46E5;
  --indigo-hover: #4038CC;
  --indigo-soft: #ECEBFD;
  --dusk: #17153B;
  --dusk-ink: #E9E8FF;
  --dusk-slate: #B5B2DE;
  --keep: #0B7A55;
  --keep-soft: #E1F4EC;
  --drop: #9A3B33;
  --drop-soft: #F8E9E7;
  --spark: #EDA23A;
  --hero: #ECEEFC;
  --nav-h: 73px; /* the nav's 72px row and its 1px edge: the hero starts this far up, behind it */
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.section-lede { color: var(--slate); font-size: 19px; margin-top: 14px; max-width: 60ch; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 14px; background: var(--indigo); color: #fff; font: 600 16px/1 var(--body);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s; }
.btn:hover { background: var(--indigo-hover); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-light { background: #fff; color: var(--indigo); }
.btn-light:hover { background: var(--indigo-soft); }

/* ---------- nav ---------- */
/* Clear over the top of the page (the hero's band runs up behind it), solid with an edge once the page moves. The
   script marks the nav live first, so without it the nav simply stays solid. */
.nav { position: sticky; top: 0; z-index: 5; background: rgba(246, 247, 251, .9); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule); transition: border-color .2s, background-color .2s, backdrop-filter .2s; }
.nav[data-live]:not([data-scrolled]) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav-in { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--display);
  letter-spacing: -0.01em; }
.brand svg { width: 34px; height: 34px; }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.nav nav a { color: var(--slate); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 0; }
.nav nav a:hover, .nav nav a[aria-current=true] { color: var(--ink); }
.nav nav a { position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--indigo); transform: scaleX(0); transition: transform .25s ease; }
.nav nav a[aria-current=true]::after { transform: scaleX(1); }
/* the phone menu: a button that opens the same links as a panel under the bar (site.js); desktop never shows either */
.menu-btn, .nav nav .menu-join { display: none; }
.menu-btn { position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); cursor: pointer; }
.menu-btn:hover { background: rgba(20, 26, 46, .06); }
.menu-btn span, .menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 12px; width: 20px; height: 2px;
  border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-btn::before { top: 15px; }
.menu-btn span { top: 21px; }
.menu-btn::after { top: 27px; }
.menu-btn[aria-expanded=true]::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded=true] span { opacity: 0; }
.menu-btn[aria-expanded=true]::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
/* The hero has its own band: the brand tint and a quiet radar (the logo's own motif) turning behind the postings. */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(64px + var(--nav-h)) 0 0;
  margin-top: calc(-1 * var(--nav-h)); background: var(--hero);
  border-bottom: 1px solid #DCDFF5; }
.hero .wrap { position: relative; z-index: 1; }
.radar { position: absolute; z-index: 0; width: 980px; height: 980px; right: max(-260px, calc((100vw - 1200px) / 2 - 330px));
  top: -170px; pointer-events: none; }
.radar .sweep { transform-origin: 450px 450px; animation: sweep 9s linear infinite; }
.radar .blip { opacity: .0; animation: blip 9s ease-out infinite; }
.radar .b2 { animation-delay: 4.6s; }
.radar .b3 { animation-delay: 2.4s; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 8% { opacity: 0; } 12% { opacity: .55; } 40%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .radar .sweep { animation: none; }
  .radar .blip { animation: none; opacity: .35; }
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; }
.hero .lede { margin-top: 24px; font-size: 20px; line-height: 1.55; color: var(--slate); max-width: 34em; }

.join { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; max-width: 520px; }
.join input[type=email] { flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0 18px; border: 1.5px solid var(--rule);
  border-radius: 14px; background: var(--surface); color: var(--ink); font: 400 16px var(--body); }
.join input[type=email]:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.join input[aria-invalid=true] { border-color: var(--drop); }
.join .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-note { flex-basis: 100%; font-size: 14px; color: var(--slate); }
.join .bot { flex-basis: 100%; }
.join .bot:empty { display: none; }  /* no site key, or Cloudflare needs nothing from the person */
.join[data-state=ok] .join-note { color: var(--keep); font-weight: 600; }
.join[data-state=error] .join-note { color: var(--drop); font-weight: 600; }
.join[data-state=busy] button { opacity: .7; cursor: progress; }

/* The sort: six postings, checked one after another, the ones you cannot take fade back. The one orchestrated motion
   on the page; with reduced motion it simply shows the result. */
.sort { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 24px; padding: 22px 22px 14px;
  box-shadow: 0 1px 2px rgba(20, 26, 46, .04), 0 24px 60px -24px rgba(20, 26, 46, .18); }
.sort figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 6px 14px;
  border-bottom: 1px solid var(--rule); }
.sort figcaption b { font: 700 16px/1.3 var(--display); }
.sort figcaption span { color: var(--slate); font-size: 14px; }
.sort-list { list-style: none; margin: 0; padding: 0; }
.sort-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 6px;
  border-bottom: 1px solid var(--rule); animation: arrive .45s cubic-bezier(.2, .7, .2, 1) both; }
.sort-list li:last-child { border-bottom: 0; }
.sort-list div { min-width: 0; }
.sort-list b { display: block; font-weight: 600; font-size: 16px; }
.sort-list span { display: block; color: var(--slate); font-size: 14px; }
.sort-list em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  max-width: 52%; text-align: right; line-height: 1.3; }
.sort-list .keep em { background: var(--keep-soft); color: var(--keep); }
.sort-list .drop em { background: var(--drop-soft); color: var(--drop); }
.sort-list .drop { animation: arrive .45s cubic-bezier(.2, .7, .2, 1) both, recede .5s ease-out both; }
.sort-list .drop b { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(84, 92, 114, .6); }
.sort-list li:nth-child(1) { animation-delay: .10s; }
.sort-list li:nth-child(2) { animation-delay: .25s, 1.25s; }
.sort-list li:nth-child(3) { animation-delay: .40s; }
.sort-list li:nth-child(4) { animation-delay: .55s, 1.45s; }
.sort-list li:nth-child(5) { animation-delay: .70s; }
.sort-list li:nth-child(6) { animation-delay: .85s; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
@keyframes recede { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .sort-list li, .sort-list .drop { animation: none; }
  .sort-list .drop { opacity: .55; }
}

.hero { padding-bottom: 96px; }
.proof { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.proof li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.proof li::before, .ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--keep-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%230B7A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tour-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--indigo); font-weight: 600;
  text-decoration: none; min-height: 44px; }
.tour-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.play { width: 32px; height: 32px; border-radius: 50%; background: var(--indigo); flex: none; position: relative; }
.play::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff; }

/* ---------- section heads (shared) ---------- */
.section-head { max-width: 760px; }

/* ---------- the tour ---------- */
.tour { padding: 96px 0 104px; }
.player { position: relative; margin-top: 40px; border-radius: 22px; overflow: hidden; background: var(--ink);
  border: 1px solid var(--rule); box-shadow: 0 2px 4px rgba(20, 26, 46, .05), 0 40px 90px -40px rgba(20, 26, 46, .45); }
.player video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--surface); }
.player-toggle { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: rgba(20, 26, 46, .82); color: #fff;
  font: 600 15px var(--body); cursor: pointer; backdrop-filter: blur(6px); }
.player-toggle:hover { background: var(--ink); }
.player-toggle[data-playing=true] .play::after { left: 11px; top: 10px; width: 10px; height: 12px; border: 0;
  border-left: 3.5px solid #fff; border-right: 3.5px solid #fff; box-sizing: border-box; }
.chapters { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chapters button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface);
  font: 600 15px/1.3 var(--body); color: var(--ink); position: relative; overflow: hidden; }
.chapters button:hover { border-color: var(--indigo); }
.chapters button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.chapters .ch-time { font-weight: 500; font-size: 13px; color: var(--slate); }
.chapters button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--indigo);
  transform: scaleX(var(--progress, 0)); transform-origin: left; }
.chapters button[aria-current=true] { border-color: var(--indigo); background: var(--indigo-soft); }

/* ---------- by the numbers ---------- */
.numbers { padding: 104px 0; }
.stats-when { margin-top: 36px; color: var(--slate); font-size: 15px; }
.stats-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; border-top: 2px solid var(--ink); }
.stat { padding: 26px 22px 6px 0; }
.stat + .stat { padding-left: 22px; border-left: 1px solid var(--rule); }
.stat b { display: block; font: 800 clamp(34px, 3.4vw, 46px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; color: var(--slate); font-size: 15px; line-height: 1.45; }
.stat-loud b { color: var(--drop); }
.numbers .fine { margin-top: 28px; max-width: 70ch; }

/* ---------- ticks (feature and audience lists) ---------- */
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.ticks li::before { margin-top: 3px; }

/* ---------- templates ---------- */
.templates { padding: 112px 0 96px; }
.tpl-row { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
.tpl-row img { width: 100%; border-radius: 10px; border: 1px solid var(--rule); background: #fff;
  box-shadow: 0 1px 2px rgba(20, 26, 46, .05), 0 16px 34px -20px rgba(20, 26, 46, .3); transition: transform .25s ease, box-shadow .25s ease; }
.tpl-row li:hover img { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(20, 26, 46, .06), 0 26px 44px -20px rgba(20, 26, 46, .38); }
.tpl-row b { display: block; margin-top: 14px; font: 700 17px var(--display); }
.tpl-row span { display: block; font-size: 13px; color: var(--slate); margin-top: 2px; }
.tpl-row p { font-size: 14px; color: var(--slate); margin-top: 8px; line-height: 1.45; }

/* ---------- who it is for ---------- */
.for { background: var(--surface); border-block: 1px solid var(--rule); padding: 104px 0; }
.for-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.for-row article { padding: 30px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.for-row h3 { font-size: 22px; }
.for-row p { margin-top: 12px; color: var(--slate); }

/* ---------- how it works: a real sequence, so it is numbered ---------- */
.how { background: var(--surface); border-block: 1px solid var(--rule); padding: 96px 0; }
.steps .illo img { transition: transform .4s ease; }
.steps li:hover .illo img { transform: translateY(-4px) scale(1.02); }
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  counter-reset: step; }
.steps li { counter-increment: step; }
.steps .illo { aspect-ratio: 4 / 3; border-radius: 20px; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.steps .illo img { width: 92%; }
.steps h3 { margin-top: 22px; font-size: 21px; display: flex; gap: 10px; align-items: baseline; }
.steps h3::before { content: counter(step); font: 700 15px/1 var(--body); color: var(--indigo); background: var(--indigo-soft);
  min-width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; transform: translateY(-2px); }
.steps p { margin-top: 10px; color: var(--slate); font-size: 16px; }

/* ---------- features: copy beside a real screen, sides alternating ---------- */
.features { padding: 112px 0 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.7fr); gap: 56px; align-items: center; margin-top: 88px; }
.feature.flip { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.62fr); }
.feature.flip .feature-copy { order: 2; }
.feature-copy h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; }
.feature-copy p { margin-top: 16px; color: var(--slate); font-size: 17px; }
.shot { width: 100%; border-radius: 18px; border: 1px solid var(--rule); background: var(--surface);
  box-shadow: 0 2px 4px rgba(20, 26, 46, .04), 0 30px 70px -30px rgba(20, 26, 46, .28); }
/* a screen opens at full size in a dialog (site.js wraps each one in a button), so it can be read on a phone */
.shot-zoom { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: 18px; }
.shot-zoom:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
.zoom { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: rgba(20, 26, 46, .94); color: #fff; }
.zoom::backdrop { background: rgba(20, 26, 46, .6); }
.zoom[open] { display: flex; flex-direction: column; }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px var(--gutter);
  font-size: 14px; color: var(--dusk-slate); }
.zoom-bar .btn { min-height: 44px; }
.zoom-view { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--gutter); }
.zoom-view img { max-width: none; height: auto; margin: 0 auto; border-radius: 12px; }  /* at its layout width (the width attribute) */
@media (min-width: 1081px) { .zoom-view img { width: min(100%, 1400px); } }

/* ---------- Scouta: the dark band ---------- */
.scouta { background: var(--dusk); color: var(--dusk-ink); padding: 112px 0; }
.scouta-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.scouta h2 { color: #fff; }
.scouta-in > div > p { margin-top: 22px; color: var(--dusk-slate); font-size: 18px; max-width: 34em; }
.ledger { border: 1px solid rgba(233, 232, 255, .16); border-radius: 22px; overflow: hidden; }
.ledger-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 22px 26px; align-items: baseline; }
.ledger-row + .ledger-row { border-top: 1px solid rgba(233, 232, 255, .12); }
.ledger-row > span { color: var(--dusk-slate); font-size: 14px; }
.ledger-row p { display: flex; flex-wrap: wrap; gap: 8px; color: #fff; }
.ledger-row.out { background: rgba(255, 255, 255, .05); }
.ledger-row.out p { display: block; font-size: 16px; line-height: 1.55; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.chip.hit { background: #CFEFDF; color: #08583E; }
.chip.miss { background: transparent; color: var(--dusk-slate); box-shadow: inset 0 0 0 1.5px rgba(181, 178, 222, .45); }

/* ---------- pricing ---------- */
.pricing { padding: 112px 0; }
.pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.currency { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); }
.currency button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--slate);
  font: 600 15px var(--body); cursor: pointer; }
.currency button[aria-checked=true] { background: var(--ink); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.plan { background: var(--surface); border: 1px solid var(--rule); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; }
.plan h3 { font-size: 22px; }
.price { margin-top: 18px; font: 800 56px/1 var(--display); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 10px; }
.price small { font: 500 16px var(--body); letter-spacing: 0; color: var(--slate); }
.per { margin-top: 10px; color: var(--slate); font-size: 15px; min-height: 1.6em; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 12px; flex: 1; }
.plan li { padding-left: 30px; position: relative; font-size: 16px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--keep-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%230B7A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.plan .btn { align-self: flex-start; }
.plan.pro { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.plan.pro .price small, .plan.pro .per { color: #DCDAFB; }
.plan.pro li::before { background-color: rgba(255, 255, 255, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fine { margin-top: 20px; color: var(--slate); font-size: 14px; }

/* ---------- questions ---------- */
.faq { background: var(--surface); border-block: 1px solid var(--rule); padding: 112px 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-weight: 600; font-size: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq-list details p { padding: 0 44px 24px 0; color: var(--slate); max-width: 62ch; }

/* ---------- privacy ---------- */
.privacy { padding: 112px 0 96px; }
.promises { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px 28px; }
.promises li { color: var(--slate); font-size: 16px; padding-top: 18px; border-top: 2px solid var(--ink); }
.promises b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }

/* ---------- last call ---------- */
.cta { padding: 0 0 112px; }
.cta-in { background: var(--indigo-soft); border-radius: 32px; padding: 72px var(--gutter); text-align: center;
  display: flex; flex-direction: column; align-items: center; max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.cta h2 { max-width: 16ch; }
.cta-in > p { margin-top: 14px; color: var(--slate); font-size: 18px; }
.cta .join { justify-content: center; width: 100%; }
.cta .join-note { text-align: center; }

/* ---------- footer ---------- */
.foot { background: var(--dusk); color: var(--dusk-slate); padding: 80px 0 36px; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: 64px; }
.foot .brand { color: #fff; }
.foot-brand p { margin: 18px 0 24px; max-width: 34ch; line-height: 1.6; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-cols h2 { font: 600 14px var(--body); letter-spacing: 0; color: #fff; margin-bottom: 16px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-cols a { display: inline-block; padding: 6px 0; color: var(--dusk-slate); text-decoration: none; }
.foot-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-cols .foot-sub { margin-top: 26px; }
.foot-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-legal a { color: var(--dusk-slate); text-decoration: none; }
.foot-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px;
  border-top: 1px solid rgba(233, 232, 255, .14); font-size: 14px; }

/* ---------- motion: reveal on scroll, only when the script runs and motion is welcome ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion .tpl-row [data-reveal] { transform: translateY(26px) rotate(-1deg); }
.motion .tpl-row [data-reveal].in { transform: none; }

/* ---------- inner pages: legal and blog (built by services/site/pages.py) ---------- */
.page .nav { background: rgba(246, 247, 251, .9); }
.page-head { padding: 72px 0 40px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; }
/* the 404 page: a short message, centred in the space above the footer, no rule under it */
.missing { text-align: center; }
.missing .page-head { padding-top: 120px; border-bottom: 0; margin-bottom: 32px; }
.missing .page-head > p { margin-inline: auto; }
.lost { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 160px; }
.page-head h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.page-head > p { margin-top: 16px; color: var(--slate); font-size: 18px; max-width: 60ch; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 112px; }
.toc { position: sticky; top: 96px; }
.toc h2 { font: 600 14px var(--body); color: var(--slate); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--slate);
  text-decoration: none; font-size: 15px; }
.toc a:hover, .toc a[aria-current=true] { color: var(--ink); border-left-color: var(--indigo); }
.prose { max-width: 68ch; font-size: 17px; line-height: 1.72; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: 28px; line-height: 1.2; margin-top: 48px; scroll-margin-top: 96px; }
.prose h3 { font-size: 21px; margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--indigo); text-underline-offset: 3px; }
.prose blockquote { margin-left: 0; padding-left: 20px; border-left: 3px solid var(--indigo); color: var(--slate); }
.prose code { font-size: .9em; background: var(--indigo-soft); padding: 2px 6px; border-radius: 6px; }
.prose figure { margin: 32px 0; }
.prose figure img { border-radius: 14px; border: 1px solid var(--rule); }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--slate); }
.legal-lede { font-size: 19px; color: var(--ink); padding: 20px 22px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 16px; }
.blog { padding-bottom: 112px; }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.post-list article { height: 100%; padding: 30px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule);
  transition: border-color .2s, transform .2s; }
.post-list article:hover { border-color: var(--indigo); transform: translateY(-3px); }
.post-list h2 { font-size: 26px; line-height: 1.15; margin-top: 12px; }
.post-list h2 a { text-decoration: none; }
.post-list h2 a::after { content: ""; position: absolute; inset: 0; }  /* the whole card is the link */
.post-list article { position: relative; }
.post-list article > p:last-child { margin-top: 12px; color: var(--slate); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--slate); font-size: 14px; }
.post { max-width: 760px; }
.post .page-head { margin-bottom: 36px; padding-top: 40px; }
.back a { color: var(--indigo); font-weight: 600; text-decoration: none; display: inline-block; padding: 48px 0 0; }
.back a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 10px; vertical-align: 1px; }
.post-cta { margin-top: 64px; padding: 36px; border-radius: 24px; background: var(--indigo-soft); }
.post-cta h2 { font-size: 28px; }
.post-cta p { margin: 12px 0 22px; color: var(--slate); }

/* Narrower desktops and tablets. Phones get their own pass (backlog item 1); nothing here may scroll sideways. */
@media (max-width: 1080px) {
  .hero-in, .scouta-in, .faq-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 72px; }
  .feature.flip .feature-copy { order: 0; }
  .feature-copy { max-width: 40em; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .for-row, .foot-top, .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}
/* Tablets and phones: the six section links do not fit beside the logo and the button, so they move into a menu.
   Without the script the links stay hidden and the waitlist button still works. */
@media (max-width: 1080px) {
  .nav nav { display: none; }
  .nav-in { gap: 8px; }
  .nav .nav-join { margin-left: auto; }
  .nav[data-live] .menu-btn { display: inline-block; }
  .nav[data-open] { background: var(--paper); backdrop-filter: none; border-bottom-color: var(--rule); }
  .nav[data-open] nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; margin: 0; padding: 4px var(--gutter) 24px; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -24px rgba(20, 26, 46, .3); }
  .nav[data-open] nav a { display: flex; align-items: center; min-height: 52px; padding: 0; font-size: 18px; color: var(--ink);
    border-bottom: 1px solid var(--rule); }
  .nav[data-open] nav a::after { display: none; }
  .nav[data-open] nav .menu-join { display: none; justify-content: center; margin-top: 20px; border-bottom: 0; color: #fff; }
  /* touch screens: every link at least 44px tall to tap */
  .brand { min-height: 44px; }
  .foot-cols ul { gap: 0; }
  .foot-cols a, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .toc a { min-height: 44px; display: flex; align-items: center; padding-block: 0; }
  .back a { min-height: 44px; }
}
@media (max-width: 760px) {
  .nav .nav-join { padding: 0 12px; font-size: 14px; }
  /* phones: less air between sections, cards a little tighter */
  .hero { padding: calc(36px + var(--nav-h)) 0 56px; }
  .hero .lede { font-size: 18px; margin-top: 18px; }
  .join { margin-top: 24px; }
  .join .btn { flex: 1 1 100%; }
  .tour, .numbers, .templates, .for, .how, .features, .scouta, .pricing, .faq, .privacy { padding-top: 64px; padding-bottom: 64px; }
  .features { padding-bottom: 8px; }
  .feature, .feature.flip { margin-top: 56px; }
  .section-lede { font-size: 17px; }
  .player { margin-top: 28px; border-radius: 16px; }
  .player-toggle { left: 12px; bottom: 12px; }
  .stats-row { column-gap: 20px; }
  .stat, .stat + .stat { padding: 22px 0 4px; border-left: 0; }
  .tpl-row { margin-top: 32px; gap: 16px; }
  .for-row { gap: 16px; margin-top: 28px; }
  .for-row article, .post-list article { padding: 22px; }
  .ledger-row { padding: 18px; }
  .scouta-in { gap: 36px; }
  .pricing-head { gap: 20px; }
  .plans { margin-top: 32px; gap: 16px; }
  .plan { padding: 26px 22px; }
  .price { font-size: 48px; }
  .plan .btn { align-self: stretch; }
  .faq-in { gap: 24px; }
  .faq-list summary { padding: 18px 40px 18px 0; font-size: 17px; }
  .promises { margin-top: 28px; gap: 24px; }
  .cta { padding-bottom: 64px; }
  .cta-in { padding: 48px 20px; border-radius: 24px; }
  .foot { padding-top: 56px; }
  .foot-top { gap: 40px; }
  .foot-cols { gap: 8px 24px; }
  .foot-bottom { margin-top: 40px; }
  .page-head { padding: 40px 0 28px; margin-bottom: 32px; }
  .missing .page-head { padding-top: 72px; }
  .lost { margin-bottom: 96px; }
  .legal-grid { gap: 32px; padding-bottom: 72px; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .back a { padding-top: 32px; }
  .post-cta { margin-top: 48px; padding: 24px; }
  .plans, .steps, .chapters, .post-list { grid-template-columns: minmax(0, 1fr); }
  .tpl-row, .stats-row, .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sort-list li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sort-list em { max-width: none; text-align: left; }
}
/* the narrowest phones (360 and 320 px): the bar keeps the logo, the name and the menu; the waitlist button moves into
   the menu, and the hero form is right below */
@media (max-width: 369px) {
  .nav .nav-join { display: none; }
  .menu-btn { margin-left: auto; }
  .nav[data-open] nav .menu-join { display: flex; }
}