/* heliomaps.com: one stylesheet for the homepage and every sub-page, from proposal C,
   "A smarter app that shows its work."
   A black field-manual drawing: near-black ground, hairlines, lettered square callouts,
   leader lines and dimension rules. Archivo (condensed for headings) and JetBrains Mono
   for every number, unit and compass point. Amber is used only for marks and callouts.
   The sub-pages' own rules (long-form text, the join page) are at the end. */

:root {
  --ground: #0C0D0A;
  --panel: #16180F;
  --panel-2: #1C1F14;
  --hair: #2A2D20;
  --hair-2: #3D4130;
  --tick: #6A6F57;
  --cream: #EBE1C6;
  --muted: #A39D84;
  --brass: #C6AE72;
  --brass-hi: #D7C38E;
  --amber: #F2992E;
  --ink: #0C0D0A;
  --grid: rgba(235, 225, 198, .04);
  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: 1rem;
  --maxw: 75rem;
  --head-h: 6.4rem;
  --shot-w: 17.5rem;
  --notes-w: 16rem;
  --mk: 1.375rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* --head-h is the sticky header's height. A small script on every page sets it to the header's real height in
   px, so the gap clears the header at any width, text size or text spacing; the rem values set here are the
   fallback when scripts are off. */
:root { --scroll-gap: calc(var(--head-h) + 1rem); }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--scroll-gap);
}
/* The top scroll padding keeps focused content and section jumps clear of the sticky header. It also
   counted the header's own links as hidden, so with one of them focused, each Tab or Shift+Tab scrolled
   the page back up. While the header has keyboard focus the padding is off; a section reached from
   the header then stops clear of it by its own scroll margin. */
html:has(.site-head :focus-visible) { scroll-padding-top: 0; }
html:has(.site-head :focus-visible) [id] { scroll-margin-top: var(--scroll-gap); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--f-sans);
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
blockquote, figure { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-stretch: 75%;
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -.005em;
  word-spacing: .06em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h3 { font-size: 1.5rem; line-height: 1.1; word-spacing: .12em; }

/* Numbers, units and compass points */
.n {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .9em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  word-spacing: -.4em;
  white-space: nowrap;
}

.nw { white-space: nowrap; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: .75rem 1rem;
  background: var(--cream); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: .75rem; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: flex; align-items: center; gap: .625rem;
  margin: 0 0 .875rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before {
  content: "";
  flex: 0 0 1.25rem;
  height: 1px;
  background: var(--brass);
}

.lede { font-size: 1.125rem; line-height: 1.5; }
.count {
  font-family: var(--f-mono);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--brass);
}
.count .n { font-size: 1em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  padding: .625rem 1.25rem;
  border: 1px solid var(--brass);
  border-radius: 2px;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--f-sans);
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
}
.btn:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn-line { background: transparent; color: var(--brass); }
.btn-line:hover { background: rgba(198, 174, 114, .12); color: var(--brass-hi); }
.btn-sm { padding: .5rem .875rem; font-size: .9375rem; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--hair);
}
.head-row {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1rem;
  min-height: 3.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem;
  color: var(--brass);
  text-decoration: none;
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: .01em;
}
.brand img { width: 22px; height: 26px; }
.head-cta { margin-left: auto; margin-block: .375rem; }
.head-nav {
  order: 3;
  flex: 1 0 100%;
  margin-inline: calc(-1 * var(--gutter));
  border-top: 1px solid var(--hair);
  overflow-x: auto;
  scrollbar-width: none;
}
.head-nav::-webkit-scrollbar { display: none; }
/* with the keyboard, the row scrolls the focused link toward its middle, so no link stays half hidden */
.head-nav { scroll-padding-inline: 50%; }
.head-nav ul {
  display: flex;
  list-style: none;
  padding-inline: calc(var(--gutter) - .625rem);
}
.head-nav a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0 .625rem;
  white-space: nowrap;
  color: var(--cream);
  text-decoration: none;
  font-size: .9375rem;
}
.head-nav a:hover { color: var(--brass); }
.head-nav a:focus-visible { outline-offset: -3px; }
/* narrow phones: a tighter row, so all six links fit from 320px wide at 16px text instead of hiding "FAQ" */
@media (max-width: 23.4em) {
  .head-nav ul { padding-inline: .25rem; }
  .head-nav a { padding-inline: .3125rem; }
}

/* Dimension rule: a thin line with end ticks and arrowheads, carrying real numbers from the page */
.dim {
  display: flex; align-items: center; gap: .75rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  min-height: 2rem;
}
.dim i {
  position: relative;
  flex: 1 1 0;
  min-width: .75rem;
  height: 1px;
  background: var(--tick);
}
.dim i::before {
  content: "";
  position: absolute; top: -.4375rem;
  width: 1px; height: .9375rem;
  background: var(--tick);
}
.dim i::after {
  content: "";
  position: absolute; top: -3px;
  border-style: solid;
  border-color: transparent;
}
.dim i:first-child::before { left: 0; }
.dim i:first-child::after { left: 1px; border-width: 3.5px 7px 3.5px 0; border-right-color: var(--tick); }
.dim i:last-child::before { right: 0; }
.dim i:last-child::after { right: 1px; border-width: 3.5px 0 3.5px 7px; border-left-color: var(--tick); }
.dim span {
  flex: 0 1 auto;
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--muted);
  text-align: center;
}
.dim-in { max-width: none; margin: 0; padding-inline: 0; min-height: 1.75rem; }
.dim-in span { letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }

/* Drafting grid, used on the hero, the note sheet, the closing box and the join page */
.hero, .sheet, .join-box, .join-hero {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

/* Corner marks, like the registration corners of a drawing sheet */
.sheet::before, .join-box::before, .scout-sheet::before, .plan::before, .cov::before,
.prose .callout::before, .pause-card::before {
  content: "";
  position: absolute; inset: -1px;
  pointer-events: none;
  --c: var(--brass);
  --l: 1.25rem;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l) no-repeat;
}

/* ---------- Hero ---------- */
.hero {
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--hair);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
}
.hero h1 {
  /* Two fixed lines, sized to the column so neither line ever wraps
     ("that shows its work." is about 7.65em wide; the divisor leaves room to spare). */
  font-size: min(4.25rem, calc(100cqi / 8.05));
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.012em;
  margin-bottom: 1.5rem;
}
.hero h1 span { display: block; }
.hero-eyebrow { margin-bottom: 1rem; }
.hero-lede { margin-top: 1.5rem; max-width: 34rem; }
.hero-count { margin-bottom: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.paused {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1rem;
  padding: .875rem 1rem;
  border: 1px dashed var(--hair-2);
  background: rgba(12, 13, 10, .7);
  max-width: 36rem;
}
.paused p { flex: 1 1 15rem; margin: 0; font-size: .9375rem; line-height: 1.45; }

/* ---------- Annotated phone figures ---------- */
.fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.shot {
  position: relative;
  width: min(100% - 1.5rem, var(--shot-w));
  padding: .5rem;
  border-radius: 2.25rem;
  background: #000;
  box-shadow: 0 0 0 1px var(--hair-2), 0 1.25rem 3rem rgba(0, 0, 0, .5);
}
.shot img { width: 100%; border-radius: 1.75rem; }
.fig figcaption {
  margin-top: .875rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}

/* Lettered square callouts sit on the frame's right edge, at the height of what they point to */
.mk {
  position: absolute;
  left: calc(100% - var(--mk) / 2);
  top: calc(.5rem + (100% - 1rem) * var(--y));
  width: var(--mk); height: var(--mk);
  margin-top: calc(var(--mk) / -2);
  display: grid; place-items: center;
  background: var(--amber);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--ground);
  font-family: var(--f-sans);
  font-stretch: 75%;
  font-weight: 800;
  font-size: .875rem;
  line-height: 1;
}
/* A short leader inside the screen, from the edge to what the callout points at */
.lead-in {
  position: absolute;
  top: calc(.5rem + (100% - 1rem) * var(--y));
  left: calc(.5rem + (100% - 1rem) * var(--x));
  right: .5rem;
  height: 1px;
  background: var(--amber);
}
.lead-in::before {
  content: "";
  position: absolute; left: -3px; top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

/* Callout notes: a lettered list under the screenshot on phones */
.notes {
  list-style: none;
  width: 100%;
  max-width: 30rem;
  margin-top: 1.25rem;
  display: grid;
  gap: .75rem;
}
.notes li {
  display: grid;
  grid-template-columns: var(--mk) minmax(0, 1fr);
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.45;
}
.notes .key {
  display: grid; place-items: center;
  width: var(--mk); height: var(--mk);
  margin-top: .05rem;
  background: var(--amber);
  color: var(--ink);
  border-radius: 2px;
  font-stretch: 75%;
  font-weight: 800;
  font-size: .875rem;
  line-height: 1;
}

/* From tablets up, the notes sit beside the phone on leader lines */
@media (min-width: 48em) {
  .fig-hero, .fig-3d {
    grid-template-columns: var(--shot-w) var(--notes-w);
    justify-items: stretch;
    align-items: stretch;
  }
  .fig-hero .shot, .fig-3d .shot { width: var(--shot-w); grid-column: 1; grid-row: 1; }
  .fig-hero figcaption, .fig-3d figcaption { grid-column: 1; grid-row: 2; }
  .fig-hero .notes, .fig-3d .notes {
    position: relative;
    grid-column: 2; grid-row: 1;
    max-width: none;
    margin: 0;
    display: block;
  }
  .fig-hero .notes li, .fig-3d .notes li {
    position: absolute; left: 0; right: 0;
    display: block;
    bottom: calc(100% - .5rem - (100% - 1rem) * var(--y));
    padding: 0 0 .375rem 1.25rem;
    border-bottom: 1px solid var(--amber);
    font-size: .875rem;
    line-height: 1.35;
  }
  .fig-hero .notes li.below, .fig-3d .notes li.below {
    bottom: auto;
    top: calc(.5rem + (100% - 1rem) * var(--y));
    padding: .375rem 0 0 1.25rem;
    border-bottom: 0;
    border-top: 1px solid var(--amber);
  }
  .fig-hero .notes .key, .fig-3d .notes .key { display: none; }
  .fig-hero { justify-self: center; margin-bottom: 1rem; }
}

@media (min-width: 64em) {
  :root { --shot-w: 18.5rem; }
  .hero { padding: 3rem 0 4rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
    column-gap: 3rem;
  }
  .hero-eyebrow { grid-column: 1; grid-row: 2; }
  .hero h1 {
    grid-column: 1; grid-row: 3;
    font-size: min(5.25rem, calc((100cqi - var(--shot-w) - var(--notes-w) - 3rem) / 8.05));
  }
  .fig-hero { grid-column: 2; grid-row: 1 / -1; align-self: start; margin: 0 0 2rem; }
  .hero-lede { grid-column: 1; grid-row: 4; margin-top: 0; }
  .hero-count { grid-column: 1; grid-row: 5; }
  .hero-actions { grid-column: 1; grid-row: 6; }
  .hero-paused { grid-column: 1; grid-row: 7; }
}

/* ---------- Sections ---------- */
.sec { padding: 2.5rem 0; }
.sec-head { max-width: 46rem; margin-bottom: 1.5rem; }
.sec-head h2 { margin-bottom: 1rem; }
.sec-head .lede:last-child { margin-bottom: 0; }

/* The numbers behind the note */
.sheet {
  position: relative;
  padding: 1.75rem 1.125rem;
  border: 1px solid var(--hair-2);
  background-color: var(--panel);
}
.specimen {
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--hair-2);
}
.note-quote p {
  margin: 0;
  font-size: clamp(1.3125rem, .95rem + 1.6vw, 2.125rem);
  line-height: 1.55;
  font-weight: 500;
  max-width: 48rem;
}
mark {
  background: transparent;
  color: var(--amber);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .86em;
  letter-spacing: -.02em;
  padding: .02em .28em;
  border-radius: 2px;
  outline: 1px solid var(--amber);
  outline-offset: -1px;
  white-space: nowrap;
  word-spacing: -.22em;
}
@media (forced-colors: active) {
  mark { color: CanvasText; outline-color: CanvasText; }
}
.specimen figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: .875rem;
  border-top: 1px solid var(--hair);
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
}
.specimen .src { color: var(--brass); letter-spacing: .06em; text-transform: uppercase; }
.specimen .tally .n { font-size: 1em; color: var(--cream); }
/* in mono text a unit keeps a gap from its number, narrower than the gap between items; the tally wraps in even lines */
.specimen .tally .n, .quote figcaption .n { word-spacing: -.22em; }
.specimen .tally { text-wrap: balance; }

.flow {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 1.25rem;
}
.flow li {
  position: relative;
  padding: .875rem 1rem 1rem;
  border: 1px solid var(--hair-2);
  background: var(--ground);
}
.flow li p { margin: 0; font-size: .9375rem; }
.flow li:not(:last-child)::after {
  /* down arrow between the steps on phones */
  content: "";
  position: absolute; left: 1.5rem; bottom: calc(-1.5rem + 1px);
  width: 1px; height: calc(1.5rem - 2px);
  background: var(--tick);
}
.flow li:not(:last-child)::before {
  content: "";
  position: absolute; left: calc(1.5rem - 3.5px); bottom: calc(-1.5rem + 1px);
  border-style: solid;
  border-width: 7px 3.5px 0;
  border-color: var(--tick) transparent transparent;
}
.flow-k {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .5rem !important;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.flow-k .n {
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--brass);
  font-size: .75rem;
  letter-spacing: 0;
}
.flow .flow-check { border-color: var(--amber); }
.flow .flow-check .flow-k { color: var(--amber); }
.flow .flow-check .flow-k .n { border-color: var(--amber); }
.note-foot { margin: 0; color: var(--muted); }

@media (min-width: 48em) {
  .sheet { padding: 2.5rem 2.25rem; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .flow li:not(:last-child)::after {
    left: auto; right: calc(-2rem + 1px); bottom: auto; top: 50%;
    width: calc(2rem - 2px); height: 1px;
  }
  .flow li:not(:last-child)::before {
    left: auto; right: calc(-2rem + 1px); bottom: auto; top: calc(50% - 3.5px);
    border-width: 3.5px 0 3.5px 7px;
    border-color: transparent transparent transparent var(--tick);
  }
}
/* the arrows are drawn with a background and transparent borders, which forced colours would turn into "=" signs */
@media (forced-colors: active) {
  .flow li:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; }
  .flow li:not(:last-child)::before { forced-color-adjust: none; border-top-color: CanvasText; }
}
@media (forced-colors: active) and (min-width: 48em) {
  .flow li:not(:last-child)::before { border-top-color: transparent; border-left-color: CanvasText; }
}

/* What the phone weighs */
.tiles {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--hair-2);
  border-left: 1px solid var(--hair-2);
}
.tile {
  padding: 1.25rem 1.125rem 1.375rem;
  border-right: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2);
}
.tile svg {
  display: block;
  width: 100%; max-width: 10rem; height: auto;
  margin-bottom: .875rem;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile svg .soft { stroke: var(--tick); }
.tile svg .dash { stroke-dasharray: 4 5; }
.tile svg text { fill: var(--muted); stroke: none; font-family: var(--f-mono); font-size: 11px; }
.tile svg text.p { fill: var(--brass); font-family: var(--f-sans); font-weight: 800; font-size: 13px; }
.tile h3 { margin-bottom: .5rem; }
.tile p { margin: 0; font-size: .9375rem; }

.says-lead { margin: 1.5rem 0 .625rem; max-width: 46rem; }
.says {
  max-width: 46rem;
  padding-left: 1.125rem;
  border-left: 1px solid var(--tick);
}
.says p { margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 400; font-stretch: 100%; }
.says figcaption {
  margin-top: .625rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--muted);
}

@media (max-width: 39.99em) {
  .tile {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 7.5rem);
    grid-template-areas: "h svg" "p p";
    column-gap: 1rem;
    align-items: center;
    padding: 1rem 1rem 1.125rem;
  }
  .tile svg { grid-area: svg; width: 100%; margin: 0; }
  .tile svg text { font-size: 14px; }
  .tile svg text.p { font-size: 15px; }
  .tile h3 { grid-area: h; margin: 0; }
  .tile p { grid-area: p; margin-top: .5rem; }
}
@media (min-width: 40em) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 1.5rem; }
  .tile svg { max-width: 12rem; }
}
@media (min-width: 64em) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Numbers band */
.band {
  padding: 1.75rem 0 1.25rem;
  border-block: 1px solid var(--hair-2);
  background: var(--panel);
}
.band-h {
  margin-bottom: 1rem;
  font-family: var(--f-mono);
  font-stretch: 100%;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.figs { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.figs li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .75rem 0;
  border-top: 1px solid var(--hair);
}
/* a figure may wrap, but only when it cannot fit its column: with wider letter and word spacing, "8 sides" would
   otherwise run into its words */
.figs .fig-n { font-size: 1.375rem; color: var(--brass); white-space: normal; }
.fig-t { font-size: .9375rem; line-height: 1.45; }
@media (min-width: 48em) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 64em) {
  .band { padding: 2.5rem 0 2.25rem; }
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: 1.5rem; }
  .figs li {
    grid-template-columns: minmax(0, 1fr);
    gap: .375rem;
    align-content: start;
    padding: .25rem 1.5rem .25rem 1.25rem;
    border-top: 0;
    border-left: 1px solid var(--hair-2);
  }
  .figs .fig-n { font-size: 2.25rem; line-height: 1.1; }
}

/* Plates: one tool each, in the walk in and in elk country */
.plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.plate-head { order: 0; }
.plate .fig { order: 1; }
.plate-text { order: 2; }
.plate-head h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.tier { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.tier span:where(:not(.vh)) {
  padding: .1875rem .5rem;
  border: 1px solid var(--brass);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.tier .t-scout { background: var(--brass); color: var(--ink); }
.tier .t-plain { border-color: var(--hair-2); color: var(--muted); }
.plate-text > p { max-width: 38rem; }
.plate-text > :last-child { margin-bottom: 0; }

.quote {
  margin: 0 0 1.25rem;
  padding-left: 1.125rem;
  border-left: 2px solid var(--brass);
}
.quote p { margin: 0; font-size: 1.1875rem; line-height: 1.5; font-weight: 500; }
.quote figcaption {
  margin-top: .625rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
}
.quote figcaption .n { font-size: 1em; }
.gloss {
  padding: .875rem 1rem;
  background: var(--panel);
  border: 1px solid var(--hair);
  font-size: .9375rem;
}
.gloss b { color: var(--brass); font-weight: 700; }

/* Plates that follow each other: approach wind is a text plate; the others are full plates with their own phones */
.plate + .plate { margin-top: 2rem; }
.quote-app blockquote p { font-size: 1.125rem; }
/* when an app line wraps, it wraps in even lines, so no compass point is left alone */
.quote-app blockquote p { text-wrap: balance; }
.quote-app blockquote p + p { margin-top: .25rem; }

/* Callouts on the frame's left edge, for a screenshot whose right edge is a column of app buttons */
.mk-left { left: calc(var(--mk) / -2); }
.lead-left {
  left: .5rem;
  right: calc(.5rem + (100% - 1rem) * (1 - var(--x)));
}
.lead-left::before { left: auto; right: -3px; }

@media (min-width: 48em) {
  .plate-3d {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "fig head" "fig text";
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    row-gap: 1rem;
    align-items: start;
  }
  .plate-3d .plate-head { grid-area: head; }
  .plate-3d .fig { grid-area: fig; }
  .plate-3d .plate-text { grid-area: text; }
  .plate + .plate { margin-top: 2.5rem; }
  /* Each tool's text lines up in one column, beside its phone or under its name */
  .plate-side, .plate-see, .plate-elk {
    grid-template-columns: var(--shot-w) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .plate-side { grid-template-areas: "head text"; }
  .plate-side .plate-head { grid-area: head; }
  .plate-side .plate-text { grid-area: text; }
  .plate-see, .plate-elk {
    grid-template-areas: "fig head" "fig text";
    grid-template-rows: auto 1fr;
    row-gap: 1rem;
  }
  .plate-see .plate-head, .plate-elk .plate-head { grid-area: head; }
  .plate-see .fig, .plate-elk .fig { grid-area: fig; }
  .plate-see .plate-text, .plate-elk .plate-text { grid-area: text; }
  .fig-see, .fig-elk { grid-template-columns: var(--shot-w); }
  .fig-see .shot, .fig-elk .shot { width: var(--shot-w); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  /* the 3D plate's figure is wide (phone plus notes): stack its text under it */
  .plate-3d {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "fig" "text";
    grid-template-rows: auto;
  }
  .plate-3d .fig { justify-self: center; }
  /* room for the half of each left-edge square that sits outside the phone */
  .plate-side, .plate-see, .plate-elk { grid-template-columns: calc(var(--shot-w) + var(--mk) / 2) minmax(0, 1fr); }
  .fig-see, .fig-elk { padding-left: calc(var(--mk) / 2); }
}
@media (min-width: 64em) {
  .plate-side, .plate-see, .plate-elk { grid-template-columns: calc(var(--shot-w) + var(--notes-w)) minmax(0, 1fr); }
  /* From desktops up the notes of line of sight and the elk terrain finder sit left of the phone, on leader lines */
  .fig-see, .fig-elk {
    grid-template-columns: var(--notes-w) var(--shot-w);
    justify-items: stretch;
    align-items: stretch;
  }
  .fig-see .shot, .fig-elk .shot { grid-column: 2; grid-row: 1; }
  .fig-see figcaption, .fig-elk figcaption { grid-column: 2; grid-row: 2; }
  .fig-see .notes, .fig-elk .notes {
    position: relative;
    grid-column: 1; grid-row: 1;
    max-width: none;
    margin: 0;
    display: block;
  }
  .fig-see .notes li, .fig-elk .notes li {
    position: absolute; left: 0; right: 0;
    display: block;
    bottom: calc(100% - .5rem - (100% - 1rem) * var(--y));
    padding: 0 1.25rem .375rem 0;
    border-bottom: 1px solid var(--amber);
    font-size: .875rem;
    line-height: 1.35;
    text-align: right;
  }
  .fig-see .notes .key, .fig-elk .notes .key { display: none; }
}

/* Which way in: the route on the map beside the report that ranks it */
.plate .route-pair { order: 1; }
.route-pair { display: grid; gap: 2rem; }
.plate-route .plate-text { max-width: 38rem; }
@media (min-width: 48em) {
  /* two phones side by side; the report's notes stay a lettered list under it */
  .route-pair {
    grid-template-columns: repeat(2, var(--shot-w));
    justify-content: center;
    align-items: start;
    column-gap: 2.5rem;
  }
  .route-pair .shot { width: var(--shot-w); }
}
@media (min-width: 64em) {
  /* from desktops up the report's notes sit beside it on leader lines. The .fig-route rules below repeat the
     48em side-note block above (the hero and the 3D map); keep the two in step. */
  .route-pair {
    grid-template-columns: var(--shot-w) calc(var(--shot-w) + var(--notes-w));
    justify-content: start;
  }
  .fig-route {
    grid-template-columns: var(--shot-w) var(--notes-w);
    justify-items: stretch;
    align-items: stretch;
  }
  .fig-route .shot { grid-column: 1; grid-row: 1; }
  .fig-route figcaption { grid-column: 1; grid-row: 2; }
  .fig-route .notes {
    position: relative;
    grid-column: 2; grid-row: 1;
    max-width: none;
    margin: 0;
    display: block;
  }
  .fig-route .notes li {
    position: absolute; left: 0; right: 0;
    display: block;
    bottom: calc(100% - .5rem - (100% - 1rem) * var(--y));
    padding: 0 0 .375rem 1.25rem;
    border-bottom: 1px solid var(--amber);
    font-size: .875rem;
    line-height: 1.35;
  }
  .fig-route .notes li.below {
    bottom: auto;
    top: calc(.5rem + (100% - 1rem) * var(--y));
    padding: .375rem 0 0 1.25rem;
    border-bottom: 0;
    border-top: 1px solid var(--amber);
  }
  .fig-route .notes .key { display: none; }
}

/* Elk country: the head ends on its count line */
.elk .sec-head .count { margin-bottom: 0; }

/* Ranch overview */
.overview-grid { display: grid; gap: 2rem; }
.overview-text h2 { margin-bottom: 1rem; }
.overview-text > p { max-width: 38rem; }
.overview .count { margin-bottom: 1.5rem; }
.doc {
  position: relative;
  padding: 1.25rem 1.25rem .5rem;
  border: 1px solid var(--hair-2);
  background: var(--panel);
  align-self: start;
}
.doc::after {
  /* a folded corner, as on a printed sheet */
  content: "";
  position: absolute; top: -1px; right: -1px;
  width: 1.25rem; height: 1.25rem;
  background: linear-gradient(225deg, var(--ground) 50%, var(--hair-2) 50%);
}
.doc-h {
  margin-bottom: .5rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.doc-parts { list-style: none; }
.doc-parts li {
  display: flex; align-items: baseline; gap: .875rem;
  padding: .4375rem 0;
  border-top: 1px dashed var(--hair-2);
  font-weight: 600;
  font-stretch: 87.5%;
  font-size: 1.0625rem;
}
.doc-parts .n {
  flex: 0 0 auto;
  color: var(--brass);
  font-size: .8125rem;
}
@media (min-width: 64em) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) 24rem; column-gap: 4rem; align-items: center; }
}

/* Scout */
.scout { padding-top: 2rem; }
.scout-sheet {
  position: relative;
  padding: 2rem 1.125rem 1.5rem;
  border: 1px solid var(--brass);
  background: var(--panel);
  outline: 1px solid rgba(198, 174, 114, .35);
  outline-offset: -.5rem;
}
.scout-sheet h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem); margin-bottom: 1.125rem; }
.scout-top { display: grid; gap: 1.5rem; }
/* on phones the headline is capped to the sheet, so "Best blinds" (kept whole) fits at large text */
@media (max-width: 47.99em) {
  .scout-sheet { container-type: inline-size; }
  .scout-sheet h2 { font-size: min(clamp(2.25rem, 1.3rem + 3.6vw, 4rem), 17cqi); }
}
.scout-top > * { min-width: 0; }
.scout-head .lede { margin: 0; max-width: 40rem; font-size: 1.0625rem; }
.scout-price {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.25rem;
}
.scout-price .amt { margin: 0 0 .25rem; color: var(--brass); }
.scout-price .amt .n { font-size: 2.75rem; line-height: 1; }
.scout-price .per { font-size: 1rem; color: var(--muted); }
.scout-price .alt { margin: 0; color: var(--muted); }
.scout-price .alt .n { color: var(--cream); }

.dots { margin: 2rem 0 0; border-top: 1px solid var(--hair-2); }
.dots-cap {
  margin: 1rem 0 .25rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.dot-row { padding: .75rem 0 .875rem; border-bottom: 1px solid var(--hair); }
.dot-label { margin: 0 0 .375rem; font-weight: 700; font-stretch: 87.5%; font-size: 1.0625rem; }
.dot-line {
  display: grid;
  grid-template-columns: 3rem minmax(0, 15rem) 1.75rem;
  grid-template-areas: "plan pips num";
  justify-content: start;
  align-items: center;
  column-gap: .625rem;
  padding: .3125rem 0;
}
.dot-line .dl-plan {
  grid-area: plan;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dot-line.is-scout .dl-plan { color: var(--brass); }
.dot-line .num { grid-area: num; font-size: 1.125rem; line-height: 1.2; color: var(--cream); text-align: right; }
.pips {
  grid-area: pips;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: .25rem;
  max-width: 15rem;
}
.pips i {
  display: block;
  aspect-ratio: 1;
  max-width: .9375rem;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: var(--muted);
}
.is-scout .pips i { background: var(--brass); border-color: var(--brass); }
/* when the chart is narrow for its text size, plan and count share a line and the dots run full width under them */
.dots { container-type: inline-size; }
@container (max-width: 15em) {
  .dot-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plan num" "pips pips"; row-gap: .375rem; }
  .pips { max-width: none; }
}

.only-h { margin: 2rem 0 .5rem; }
.only { list-style: none; display: grid; }
.only li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: .875rem 0;
  border-top: 1px solid var(--hair);
}
.only li p { margin: 0; }
.only svg {
  width: 2.75rem; height: 2.75rem;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.only svg .soft { stroke: var(--tick); }
.only svg .dash { stroke-dasharray: 3 3; }

@media (min-width: 48em) {
  .scout-sheet { padding: 3rem 2.5rem 2rem; }
  .scout-top { grid-template-columns: minmax(0, 1fr) 15rem; column-gap: 3rem; align-items: end; }
  .scout-price { display: grid; justify-items: start; gap: .875rem; padding-left: 1.5rem; border-left: 1px solid var(--hair-2); }
  .only { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 60em) {
  .dot-line {
    grid-template-columns: 4.5rem minmax(0, auto) 2.5rem;
    justify-content: start;
    column-gap: .75rem;
    padding: .25rem 0;
  }
  .pips { grid-template-columns: repeat(30, minmax(0, .9375rem)); gap: .4375rem; max-width: none; }
  .dot-line .num { text-align: left; }
}
@media (min-width: 75em) {
  .dot-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: center; column-gap: 1.5rem; }
  .dot-label { grid-row: span 2; margin: 0; }
}

/* The map is free */

.free-grid { display: grid; gap: 1.5rem; }
.free-head h2 { margin-bottom: .75rem; }
.free-price { margin: 0; color: var(--muted); }
.free-price .n { color: var(--brass); font-size: 1.25rem; }
.free-list { list-style: none; display: grid; }
.free-list li {
  position: relative;
  padding: .5rem 0 .5rem 1.375rem;
  border-top: 1px solid var(--hair);
  font-size: .9375rem;
  line-height: 1.45;
}
.free-list li::before {
  content: "";
  position: absolute; left: 0; top: .95rem;
  width: .5rem; height: .5rem;
  border: 1.5px solid var(--brass);
}
@media (min-width: 48em) {
  .free-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 48em) {
  /* the map on the left, room for its left-edge squares; the head and the list on the right */
  .free-grid {
    grid-template-columns: calc(var(--shot-w) + var(--mk) / 2) minmax(0, 1fr);
    grid-template-areas: "fig head" "fig list";
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }
  .free-head { grid-area: head; }
  .free-list { grid-area: list; }
  .fig-free { grid-area: fig; padding-left: calc(var(--mk) / 2); }
  .fig-free .shot { width: var(--shot-w); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .free-list { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing */
.pricing-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  max-width: none;
}
.pricing-head h2 { margin: 0; }
.period { display: none; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1.125rem;
  border: 1px solid var(--hair-2);
  background: var(--panel);
}
.plan-top { padding-bottom: .875rem; }
.plan .dim-in { margin-bottom: .375rem; }
.plan h3 { font-size: 2rem; }
.price { margin: .5rem 0 0; font-size: 1rem; line-height: 1.3; }
.price .n { font-size: 1.875rem; color: var(--brass); }
.price .per { color: var(--muted); }
.price .p-or { color: var(--muted); }
.plan ul { list-style: none; }
.plan li {
  position: relative;
  padding: .4375rem 0 .4375rem 1.125rem;
  border-top: 1px solid var(--hair);
  font-size: .9375rem;
  line-height: 1.45;
}
.plan li:first-child { border-top: 0; }
.plan li::before {
  content: "";
  position: absolute; left: 0; top: 1.15em;
  width: .5rem; height: 1px;
  background: var(--brass);
}
.plan-scout { border: 2px solid var(--brass); }
.plan-scout .plan-top {
  /* the same heights as the other cards, so the three "Includes" rules line up */
  margin: -1.25rem -1.25rem .75rem;
  padding: calc(1.25rem - 1px) 1.25rem .875rem;
  background: var(--brass);
  color: var(--ink);
}
.plan-scout .price .n, .plan-scout .price .per, .plan-scout .price .p-or { color: var(--ink); }
.badge {
  position: absolute; top: -.8125rem; right: 1rem; z-index: 1;
  margin: 0;
  padding: .1875rem .625rem;
  background: var(--ground);
  border: 1px solid var(--brass);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.fineprint { margin-top: 1.5rem; color: var(--muted); font-size: .875rem; }
.fineprint p { margin: 0 0 .375rem; }

@media (min-width: 60em) {
  .js .period {
    display: inline-flex; gap: 3px;
    padding: 3px;
    border: 1px solid var(--hair-2);
  }
  .period button {
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 1px;
    background: transparent;
    color: var(--cream);
    font: inherit;
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
  }
  .period button:hover { color: var(--brass); }
  .period button[aria-pressed="true"] { background: var(--brass); color: var(--ink); }
  .period button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
  .js .plans[data-period="year"] .p-month,
  .js .plans[data-period="year"] .p-or,
  .js .plans[data-period="month"] .p-year,
  .js .plans[data-period="month"] .p-or { display: none; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
  /* side by side, the price blocks match the Scout card's brass block so the three "Includes" rules line up */
  .plan-top { padding-bottom: 1.625rem; }
}
@media (forced-colors: active) {
  .period button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pips i { forced-color-adjust: none; border-color: CanvasText; }
  .is-scout .pips i { background: CanvasText; }
  .mk, .notes .key, .lead-in, .lead-in::before { forced-color-adjust: none; }
  /* dimension rules are drawn with backgrounds, which forced colours remove */
  .dim i { forced-color-adjust: none; background: CanvasText; }
  .dim i::before { background: CanvasText; }
  .dim i:first-child::after { border-right-color: CanvasText; }
  .dim i:last-child::after { border-left-color: CanvasText; }
}

/* Coverage and data sources */
.coverage { border-top: 1px solid var(--hair); }
.coverage-grid { display: grid; gap: 2rem; }
.coverage h2 { margin-bottom: 1.25rem; }
.cov {
  position: relative;
  margin: 0;
  padding: .25rem 1rem;
  border: 1px solid var(--hair-2);
  background: var(--panel);
}
.cov div { padding: .75rem 0; border-top: 1px solid var(--hair); }
.cov div:first-child { border-top: 0; }
.cov dt {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass);
}
.cov dd { margin: .25rem 0 0; }
.sources h3 { margin-bottom: .75rem; }
.sources p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
@media (min-width: 48em) {
  .cov { padding-inline: 1.25rem; }
  .cov div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; }
  .cov dd { margin: 0; }
}
@media (min-width: 64em) {
  .coverage-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 4rem; }
  .sources { padding-top: 2.5rem; }
}

/* FAQ */
.faq { border-top: 1px solid var(--hair); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.faq-list details { border-top: 1px solid var(--hair-2); }
.faq-list details:last-child { border-bottom: 1px solid var(--hair-2); }
.faq-list summary {
  position: relative;
  min-height: 2.75rem;
  padding: .875rem 2.5rem .875rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 1.1875rem;
  line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  content: "+" / "";
  position: absolute; right: .25rem; top: .9375rem;
  display: grid; place-items: center;
  width: var(--mk); height: var(--mk);
  border: 1px solid var(--brass);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--brass);
}
.faq-list details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq-list summary:focus-visible { outline-offset: -2px; }
.faq-list details p { margin: 0 0 1.25rem; max-width: 42rem; }
@media (min-width: 64em) {
  .faq-grid { grid-template-columns: 18rem minmax(0, 1fr); column-gap: 3rem; }
}

/* Privacy line */
.privacy { padding: 1.5rem 0; border-block: 1px solid var(--hair); background: var(--panel); }
.privacy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.privacy h2 { font-size: 1.375rem; }
.privacy p { margin: 0; color: var(--muted); }
.text-link {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  color: var(--brass);
  text-underline-offset: .2em;
}
.text-link:hover { color: var(--brass-hi); }

/* Closing call to action */
.join-box {
  position: relative;
  display: grid; gap: 1.5rem;
  padding: 2rem 1.125rem;
  border: 1px solid var(--hair-2);
  background-color: var(--panel);
}
.join-copy h2 { margin-bottom: .75rem; }
.join-copy p:last-child { margin: 0; color: var(--muted); }
.join-act { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) {
  .join-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 3rem; padding: 3rem; }
}

/* Footer */
.site-foot { padding: 2rem 0 2.25rem; border-top: 1px solid var(--hair); }
.foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.foot-brand img { width: 157px; height: auto; }
.foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.foot-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--cream);
  text-decoration: none;
  font-size: .9375rem;
  overflow-wrap: anywhere;
}
.foot-nav a:hover { color: var(--brass); text-decoration: underline; }
.copy { margin: 0; color: var(--muted); font-size: .875rem; }
@media (min-width: 64em) {
  .foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 3rem; }
  .foot-nav ul { justify-content: flex-end; }
  .copy { grid-column: 1 / -1; }
}

/* Wider screens */
@media (min-width: 30em) {
  :root { --gutter: 1.5rem; }
  .sheet { padding-inline: 1.5rem; }
  .scout-sheet { padding-inline: 1.5rem; }
  .join-box { padding-inline: 1.5rem; }
}
@media (min-width: 61.25em) {
  :root { --head-h: 4rem; }
  .head-row { flex-wrap: nowrap; min-height: 4rem; }
  .head-nav {
    order: 0;
    flex: 0 1 auto;
    margin: 0 0 0 auto;
    border-top: 0;
    overflow: visible;
  }
  .head-nav ul { padding: 0; }
  .head-cta { margin-left: .5rem; }
}
@media (min-width: 64em) {
  :root { --gutter: 2rem; }
  .sec { padding: 5rem 0; }
  .dim span { font-size: .75rem; }
}

/* Very narrow screens, and phones with large text: "Join the beta" drops to a row of its own, so the header
   is three rows tall and the scroll gap above has to clear all three. Mostly because the logo is a fixed
   22px wide, the width where that happens drifts with the text size (18.19em at 16px text, 17.25em at
   32px), so this covers the widest case; just under it, a two-row header only gets a larger gap. */
@media (max-width: 18.2em) {
  :root { --head-h: 9.15rem; }
}

/* Very large text on a narrow phone (below 11.75em, about 375px at 32px text). With the single columns above
   that may shrink below their longest word, nothing scrolls sideways: each figure in the numbers band sits
   over its words, the plans' "Includes" rule may shrink to its ticks, and a number with its unit in a quote,
   such as "355 yd SSW", may break onto two lines. */
@media (max-width: 11.75em) {
  .figs li { grid-template-columns: minmax(0, 1fr); row-gap: .125rem; }
  .dim-in i { min-width: 0; }
  .quote .n { white-space: normal; }
}

/* Short screens, and phones with large default text: the header scrolls away instead of covering the page */
@media (max-height: 36em) {
  .site-head { position: static; }
  :root { --scroll-gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Sub-pages ---------- */
/* In the footer, the link to the page you are on */
.foot-nav a[aria-current="page"] { color: var(--brass); }

/* Long-form text: support, privacy, terms and delete your account */
.prose {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2rem var(--gutter) 3.5rem;
}
.prose h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}
.prose .updated {
  display: flex; gap: .625rem;
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
}
.prose .updated::before {
  content: "";
  flex: 0 0 1.25rem;
  height: 1px;
  margin-top: .78em;
  background: var(--brass);
}
.prose h2 {
  margin: 2.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  line-height: 1.08;
}
.prose h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.25rem;
  font-stretch: 87.5%;
  font-weight: 700;
  line-height: 1.25;
}
.prose h2 + h3 { margin-top: 1.25rem; }
.prose p, .prose li { line-height: 1.65; }
.prose p { margin: 0 0 1rem; }
.prose b, .prose strong { font-weight: 700; }
.prose a { color: var(--brass); text-underline-offset: .2em; }
.prose a:hover { color: var(--brass-hi); }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: .625rem; }
/* native square markers, so Safari and VoiceOver still announce these as lists */
.prose ul { list-style: square; }
.prose ul > li::marker { color: var(--brass); }
.prose ol > li::marker { font-family: var(--f-mono); font-size: .875em; color: var(--brass); }
/* tables and definition lists: no page has one yet, so these keep one in the same style if it is added.
   A table wider than the column scrolls sideways inside itself instead of widening the page. */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .9375rem;
}
.prose th, .prose td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.prose th { font-weight: 700; border-bottom-color: var(--hair-2); }
.prose dl { margin: 0 0 1.25rem; }
.prose dt { font-weight: 700; line-height: 1.5; }
.prose dd { margin: .25rem 0 1rem; padding-left: 1.5rem; line-height: 1.65; }
/* notices sit on a panel with the drawing sheet's corner marks */
.prose .callout {
  position: relative;
  margin: 1.5rem 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hair-2);
  background: var(--panel);
}
.prose .callout::before { --l: .75rem; }
.prose .callout p { margin: 0; }

/* The join page */
.join-hero { padding: 2.5rem 0 3.5rem; }
.join-hero .wrap { max-width: 42rem; }
.join-hero h1 {
  margin-bottom: 2rem;
  font-size: clamp(2.75rem, 1.6rem + 5vw, 4.25rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.012em;
}
.join-hero h1 .hl { color: var(--brass); }
/* here, and in the steps below, the column and the text in it may shrink below the longest word, so with
   very large text a long word or the email address breaks instead of widening the page */
.downloads { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; max-width: 24rem; }
.dl {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
  padding: .75rem 1.25rem;
  border: 1px solid var(--brass);
  border-radius: 2px;
  text-decoration: none;
}
.dl svg { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; }
.dl > span { min-width: 0; }
/* with very large text on a phone the icon goes above the words, so "TestFlight" keeps to one line */
@media (max-width: 13.5em) {
  .dl { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
.dl .lbl { font-size: .875rem; line-height: 1.3; }
.dl .name { font-stretch: 75%; font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: .01em; }
.dl.ios { background: var(--brass); color: var(--ink); }
.dl.ios svg { stroke: var(--ink); }
.dl.ios:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.dl.android { color: var(--brass); }
.dl.android svg { stroke: var(--brass); }
.dl.android:hover { background: rgba(198, 174, 114, .12); color: var(--brass-hi); }
.steps {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  max-width: 30rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair);
}
.step { display: flex; align-items: flex-start; gap: .875rem; line-height: 1.5; }
.step > :not(.num) { min-width: 0; }
/* step numbers are the lettered square callouts of the homepage */
.step .num {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: var(--mk); height: var(--mk);
  margin-top: .0625rem;
  border: 1px solid var(--brass);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1;
  color: var(--brass);
}
.step a { color: var(--brass); text-underline-offset: .2em; }
.step a:hover { color: var(--brass-hi); }
/* "New version coming soon", shown by either download button while downloads are paused */
.pause-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(12, 13, 10, .8);
}
.pause-modal[hidden] { display: none; }
.pause-card {
  position: relative;
  width: 100%; max-width: 26rem;
  padding: 1.5rem 1.375rem 1.375rem;
  border: 1px solid var(--hair-2);
  background: var(--panel);
  animation: pause-pop .16s ease-out;
}
@keyframes pause-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.pause-card h3 { margin: 0 0 1.25rem; font-size: 1.75rem; }
.pause-actions { display: flex; gap: .625rem; }
.pause-actions .btn { cursor: pointer; }