/* Azimuth landing page. Tokens and fonts live in base.css.
   Frame: a mapping product page built around one number. Two capsules float at the top
   corners (logo left, links and download right). The first screen is the search area in km²,
   set very large and counting down, with the three instruments that produce it in a row of
   cards under it: the frame, the sun, the Earth. Below: the clue list next to the shrinking
   rings, the video frames in one card, questions as a row of open cards, and a closing card
   with the compass dial drawn behind the text. Flat colour only; orange is the sun. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--sans); }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root { --gutter: max(24px, calc((100vw - 1200px) / 2)); }

/* ---------- small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border: 0; border-radius: 18px; background: var(--sun); color: var(--sun-ink); font: 600 16px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #FF9557; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline-color: var(--text); }
.btn svg { flex: none; width: 18px; height: 18px; }
.btn--sm { height: 44px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
.btn--quiet { background: var(--panel-2); color: var(--text); }
.btn--quiet:hover { background: #26324A; }
.card { border-radius: 28px; background: var(--panel); }
.note { font-size: 14px; color: var(--text-3); }

/* ---------- nav: two capsules at the corners ---------- */

.nav { position: sticky; top: 14px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 20px; pointer-events: none; }
.cap { display: inline-flex; align-items: center; height: 60px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); pointer-events: auto; transition: background-color .2s ease-out, border-color .2s ease-out; }
.nav.is-stuck .cap { border-color: rgba(255, 255, 255, .16); background: var(--panel-2); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.logo img { border-radius: 8px; }
.cap.logo { padding: 0 20px 0 15px; }
.cap--menu { gap: 6px; padding: 0 7px 0 8px; }
.nav__links { display: flex; }
.nav__links a { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: background-color .15s ease-out, color .15s ease-out; }
.nav__links a:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

/* ---------- first screen: one number ---------- */

.hero { display: grid; justify-items: center; padding: 22px var(--gutter) 0; text-align: center; }
h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.lede { max-width: 30em; margin-top: 12px; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.45; color: var(--text-2); text-wrap: balance; }
.rig { width: 100%; margin-top: 26px; }

/* The number, with its label and unit stacked beside it. */
.area { --fs: clamp(44px, 13.3vw, 184px); display: grid; grid-template-columns: auto auto; grid-template-areas: "n label" "n unit"; justify-content: center; column-gap: .12em; font-size: var(--fs); line-height: .9; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; text-align: left; }
.area b { grid-area: n; align-self: end; align-self: last baseline; font-weight: inherit; }
/* One cell per digit (site.js): equal widths while the number counts, the digit's own width at rest. */
.area b i { display: inline-block; min-width: 0; font-style: normal; text-align: center; transition: min-width .3s ease-out; }
.area b.is-counting i { min-width: .6em; transition: none; }
.area__unit { grid-area: unit; align-self: end; align-self: last baseline; font-size: .27em; font-weight: 600; letter-spacing: -.02em; color: var(--text-2); }
.area__label { grid-area: label; align-self: start; margin-top: calc(var(--fs) * .1 - 5px); font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: var(--text-2); }

/* The three instruments. */
.rig__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; text-align: left; }
.inst { display: grid; align-content: start; gap: 12px; padding: 18px; border-radius: 28px; background: var(--panel); }
.inst figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 30px; padding-left: 4px; }
.inst figcaption b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.read { padding: 6px 10px; border-radius: 10px; background: var(--bg); font: 500 12px/1.5 var(--mono); color: var(--text); }
.view { position: relative; }
.inst svg { display: block; width: 100%; height: auto; }
.inst text { font: 500 14px var(--mono); fill: var(--text-3); }
/* Notes on the file, pinned to the corners of the instrument. */
.hud { position: absolute; inset: 0; font: 500 12px/1.45 var(--mono); color: var(--text-2); }
.hud span, .hud i { position: absolute; left: 0; padding: 3px 8px; border-radius: 8px; background: var(--bg); font-style: normal; }
.hud span { top: 0; }
.hud i { bottom: 0; background: var(--panel-2); }
.hud--low span { top: auto; bottom: 0; }
.hud--photo span { left: auto; right: 10px; top: 10px; background: rgba(10, 14, 20, .84); color: var(--text); }
.hud--photo i { left: 10px; bottom: 10px; }

/* Labels drawn over the photo get a dark edge so they read on grass and sky. */
.photo text { paint-order: stroke; stroke: rgba(6, 9, 14, .8); stroke-width: 3.5px; stroke-linejoin: round; font-weight: 600; }
.m1, .m2, .m3, .m4, .m34, .g1, .g1t, .g2, .g3 { opacity: 0; transition: opacity .5s ease-out; }
.m1 path { fill: none; stroke: var(--sun); stroke-width: 2.5; }
.m1 text, .m2 text { fill: var(--sun); }
.m2 path { fill: none; stroke: var(--sun); stroke-width: 3; stroke-linecap: round; }
.m2 .m2__tip { fill: var(--sun); stroke: none; }
.m3, .m4 { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 4; }
.m34 text { fill: #fff; }

.wire, .wire * { fill: none; stroke: var(--wire); stroke-width: 1.5; }
.dial .wire, .globe__rim { fill: none; stroke: var(--wire-2); stroke-width: 1.5; }
.tick { fill: none; stroke: var(--wire); }
.tick--major { stroke: var(--wire-2); }
.dial__deg text { font-size: 12.5px; }
.dial__nesw text { font: 600 15px var(--sans); fill: var(--text-2); }
.dial__nesw text:first-child { fill: var(--text); }
.dial__hub { fill: var(--text); }
.needle { transform-origin: 200px 134px; opacity: .35; transition: transform 1.3s cubic-bezier(.3, 1.25, .5, 1), opacity .4s ease-out; }
.needle__tail { fill: none; stroke: var(--wire-2); stroke-width: 5; stroke-linecap: round; }
.needle__ray { fill: none; stroke: var(--sun); stroke-width: 3; }
.needle__sun { fill: var(--sun); stroke: var(--panel); stroke-width: 3; }
.g1, .g2 { fill: var(--sun); }
.globe .g1t { fill: var(--sun); }
.g3 circle { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g3 path { stroke: var(--text-2); stroke-width: 1.5; }
.globe .g3 text { fill: var(--text); }

.rig.is-s1 .m1, .rig.is-s2 .m2, .rig.is-s1 .g1t { opacity: 1; }
.rig.is-s1 .g1 { opacity: .34; }
.rig.is-s2 .g1, .rig.is-s2 .g2 { opacity: .16; }
.rig.is-s2 .g2--patch { opacity: 1; }
.rig.is-s2 .needle { transform: rotate(172deg); opacity: 1; }
.rig.is-done .m3, .rig.is-done .m4, .rig.is-done .m34, .rig.is-done .g3 { opacity: 1; }

/* Under the instruments: which clues have landed, what they said, and the offer once the run ends. */
.strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin-top: 12px; padding: 18px 18px 18px 22px; border-radius: 28px; background: var(--panel); text-align: left; }
.clues { display: flex; flex-wrap: wrap; gap: 6px; }
.clues li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid transparent; border-radius: 10px; background: var(--panel-2); font-size: 14px; font-weight: 600; color: var(--text-2); transition: color .3s ease-out; }
.clues li::before { content: ''; width: 10px; height: 10px; border: 1.5px solid var(--wire-2); border-radius: 50%; transition: background-color .3s ease-out, border-color .3s ease-out; }
.clues .is-done { color: var(--text); }
.clues .is-done::before { border-color: var(--sun); background: var(--sun); }
.clues .is-app { border: 1px dashed var(--wire); background: none; font-weight: 500; }
.clues .is-app::before { border-style: dashed; }
.clues small { font: 500 12px var(--mono); color: var(--text-3); }
.msg { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.rig.is-done .msg { color: var(--text); }
/* On wide screens the strip keeps its height without the offer, so it is simply absent until the run ends. */
.strip__go { display: none; flex-wrap: wrap; gap: 8px; }
.strip__go .btn { padding: 0 22px; }
.rig.is-done .strip__go { display: flex; animation: rise .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

/* ---------- what it reads: the list and the rings ---------- */

h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.reads { padding: 136px var(--gutter) 0; }
.reads__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; margin-top: 40px; }
.card--list { padding: 22px; }
.cols { display: flex; justify-content: space-between; padding: 0 20px 12px 16px; font-size: 14px; font-weight: 500; color: var(--text-3); }
.funnel { display: grid; gap: 8px; counter-reset: clue; }
.funnel li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "n name area" "n what area"; column-gap: 16px; align-items: center; padding: 14px 20px 14px 16px; border-radius: 18px; background: var(--panel-2); counter-increment: clue; transition: background-color .15s ease-out; }
.funnel li::before { content: counter(clue); grid-area: n; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--wire-2); border-radius: 50%; font: 500 14px var(--mono); color: var(--text-2); }
.funnel b { grid-area: name; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.funnel span { grid-area: what; font-size: 15px; line-height: 1.35; color: var(--text-2); }
.funnel em { grid-area: area; font: 500 15px var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.funnel li:last-child::before { border-color: var(--sun); background: var(--sun); color: var(--sun-ink); font-weight: 600; }
.funnel li:last-child em { color: var(--sun); }
.funnel li:hover { background: #222C3F; }

.card--rings { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 10px; padding: 28px 28px 22px; }
.rings { width: 100%; max-width: 408px; height: auto; }
.rings circle { fill: none; stroke: var(--wire); stroke-width: 1.5; transition: stroke .15s ease-out; }
.rings__axes { fill: none; stroke: var(--panel-2); stroke-width: 1.5; stroke-dasharray: 3 6; }
.rings .rings__spot { fill: var(--sun); stroke: none; }
.rings .rings__n circle { fill: var(--panel); stroke: var(--wire-2); }
.rings text { font: 500 13px var(--mono); fill: var(--text-2); text-anchor: middle; }
.rings .rings__five { fill: var(--sun-ink); font-weight: 600; }
/* Pointing at a clue lights its ring. */
.reads__row:has(.funnel li:nth-child(1):hover) .rings > circle:nth-of-type(1),
.reads__row:has(.funnel li:nth-child(2):hover) .rings > circle:nth-of-type(2),
.reads__row:has(.funnel li:nth-child(3):hover) .rings > circle:nth-of-type(3),
.reads__row:has(.funnel li:nth-child(4):hover) .rings > circle:nth-of-type(4) { stroke: var(--text); }

/* ---------- video: one card with a strip of frames ---------- */

.video { padding: 12px var(--gutter) 0; }
.card--video { padding: 44px 44px 36px; }
.video__text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; }
.video__text p { font-size: clamp(17px, 1.32vw, 19px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.frames li { display: grid; gap: 10px; }
.frames svg { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--bg); }
.frames .ri { fill: var(--panel); }
.frames .gr { fill: var(--panel-2); }
.frames .sh { stroke: #05070B; stroke-width: 4; stroke-linecap: round; }
.frames .po { stroke: #AFC0DA; stroke-width: 3; stroke-linecap: round; }
.frames .si { fill: #AFC0DA; }
.frames span { padding-left: 4px; font: 500 13px var(--mono); color: var(--text-3); }
/* Two frames are enough: the first and the last are marked, the ones between sit back. */
.frames li:not(.is-first, .is-now) svg { opacity: .55; }
.frames .is-first svg { outline: 2px solid var(--wire-2); outline-offset: -2px; }
.frames .is-first span { color: var(--text-2); }
.frames .is-now svg { outline: 2px solid var(--sun); outline-offset: -2px; }
.frames .is-now .sh { stroke: var(--sun); }
.frames .is-now .was { stroke: var(--wire-2); stroke-width: 2; stroke-dasharray: 3 4; }
.frames .is-now .arc { fill: none; stroke: var(--sun); stroke-width: 1.5; }
.frames .is-now span { color: var(--sun); }

/* ---------- questions: a row of open cards ---------- */

.faq { padding: 136px var(--gutter) 0; }
.faq__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.qa { padding: 28px 26px 30px; border-radius: 28px; background: var(--panel); }
.qa h3 { min-height: 2.4em; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.qa p { margin-top: 12px; font-size: 16px; color: var(--text-2); text-wrap: pretty; }

/* ---------- closing card: the dial behind the text ---------- */

.final { position: relative; display: grid; justify-items: center; align-content: center; min-height: 704px; margin: 136px var(--gutter) 0; padding: 40px 24px; border-radius: 28px; background: var(--panel); text-align: center; overflow: hidden; }
.final__dial { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; translate: -50% -50%; }
.final__dial circle, .final__dial path { fill: none; stroke: var(--panel-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.final__dial .t2 { stroke: #26324A; }
.final__dial .t3, .final__dial .nesw path { stroke: var(--wire); stroke-width: 3; }
.final__dial .bead { fill: var(--sun); stroke: var(--panel); stroke-width: 5; }
.final::before, .final::after { content: ''; position: absolute; left: 50%; top: 50%; width: 920px; height: 920px; translate: -50% -50%; border: 2px solid var(--panel-2); border-radius: 50%; }
.final::after { width: 1240px; height: 1240px; }
.final > :not(svg) { position: relative; }
.final h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.045em; }
.final__req { margin-top: 16px; font-size: 17px; color: var(--text-2); text-wrap: balance; }
.final .btn { margin-top: 30px; }

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

.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 20px 48px; align-items: start; padding: 56px var(--gutter) 64px; font-size: 14px; color: var(--text-3); }
.foot .logo { justify-self: start; min-height: 40px; color: var(--text); }
.foot p { max-width: 44ch; text-wrap: pretty; }
.foot b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-2); }

.js [data-reveal] { opacity: 0; translate: 0 20px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- smaller screens ---------- */

@media (max-width: 1247px) {
  /* The reading no longer fits beside the card title: it goes under it. */
  .inst figcaption { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-left: 0; }
  .inst figcaption b { padding-left: 4px; }
  .msg { min-height: 2.9em; }
}
@media (max-width: 1100px) {
  .faq__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa h3 { min-height: 0; }
}
@media (max-width: 980px) {
  .rig__row { grid-template-columns: minmax(0, 1fr); }
  .view { width: 100%; max-width: 480px; margin-inline: auto; }
  .strip { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .strip__go { display: flex; visibility: hidden; }
  .rig.is-done .strip__go { visibility: visible; }
  .reads__row { grid-template-columns: minmax(0, 1fr); }
  .video__text { grid-template-columns: minmax(0, 1fr); }
  .reads, .faq { padding-top: 96px; }
  .final { margin-top: 96px; }
}
@media (max-width: 760px) {
  .nav { top: 10px; margin-top: 10px; padding: 0 12px; }
  .nav__links { display: none; }
  .cap--menu { padding: 0 7px; }
  .hero { padding-top: 28px; }
  .area { grid-template-areas: "label label" "n unit"; }
  .area__label { justify-self: center; margin: 0 0 10px; }
  .area__unit { font-size: .3em; }
  .inst { padding: 16px; }
  .msg { min-height: 4.35em; }
  .strip__go .btn { flex: 1 1 auto; }
  .card--list { padding: 14px; }
  .cols { padding: 6px 14px 10px; }
  .funnel li { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "n name area" "n what what"; column-gap: 12px; padding: 12px 14px 12px 12px; }
  .funnel li::before { width: 32px; height: 32px; }
  .funnel em { font-size: 13px; }
  .card--video { padding: 28px 20px 22px; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .frames .is-now { grid-column: 1 / -1; }
  .frames .is-now svg { aspect-ratio: 2 / 1; }
  .faq__row { grid-template-columns: minmax(0, 1fr); }
  .qa { padding: 24px 22px 26px; }
  .final { min-height: 440px; padding: 40px 20px; }
  .final__dial { width: min(100% - 28px, 400px); height: auto; aspect-ratio: 1; }
  .final__req { max-width: 16em; font-size: 16px; }
  .foot { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .m1, .m2, .m3, .m4, .m34, .g1, .g1t, .g2, .g3, .needle, .clues li, .clues li::before, .area b i { transition: none; }
  .rig.is-done .strip__go { animation: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --gutter: max(24px, calc((100vw - min(1200px + (100vw - 1600px) * 0.98, 1740px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(52px, 20.8px + 1.95vw, 65px); }
  h2 { font-size: clamp(48px, 26.4px + 1.35vw, 57.6px); }
  .lede { font-size: clamp(19px, 13.3px + 0.3563vw, 21.85px); }
}

/* Short laptop screens: the number gives up some height so the three instruments come into the first screen. */
@media (min-width: 1101px) and (max-height: 899px) { .area { --fs: clamp(44px, min(13.3vw, 20.5vh), 184px); } .rig, .rig__row { margin-top: clamp(14px, 2.6vh, 26px); } .hero { padding-top: clamp(10px, 2.2vh, 22px); } }
/* Big screens: the number keeps pace with the wider instruments while the window is tall enough. */
@media (min-width: 1600px) and (min-height: 900px) { .area { --fs: clamp(184px, min(9.6vw, 18vh), 236px); } }
/* ---------- end every screen size ---------- */