/* ---- type, all served from this site ----

   Nothing is fetched from another origin, so the CSP can say font-src 'self'
   and nothing else. The licences are in fonts/ and linked from the footer.

   IBM Plex is IBM's own split web fonts, unmodified apart from their file
   names: its licence reserves the name "Plex" for the fonts as IBM ships them,
   so they are not subset here. Each weight comes in two files, and a browser
   fetches the second (arrows and other symbols) only if the page uses one of
   its characters. The unicode ranges are IBM's.

   Archivo carries no reserved name, so it is cut down to what the page uses:
   widths 108 to 112 and weights 600 to 800, Latin only. The wordmark is
   Archivo SemiExpanded ExtraBold cut to the letters of "Setpoint", and is the
   same face the app bundles. */

@font-face {
  font-family: "Setpoint Wordmark";
  src: url("../fonts/wordmark-dc2764c1c25d.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-1d3685c6d1c9.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 108% 112%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular-Latin1-b5ad7bd39f99.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular-Pi-1487059829a1.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium-Latin1-b5610af04d0d.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium-Pi-bf05f10c9773.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold-Latin1-fff0ab3a88b0.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold-Pi-768421433d85.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular-Latin1-e8993d946649.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular-Pi-b8002770aa63.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium-Latin1-41201b658a32.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium-Pi-92bd18415e8c.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold-Latin1-b7acd05041ab.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold-Pi-1637166246d3.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}

/* Setpoint is a dark instrument. This page commits to that one visual world
   deliberately rather than shipping a light theme that would misrepresent it,
   so every colour is painted explicitly and nothing is left to browser defaults. */
:root {
  --ground:    #0B0C0F;
  --panel:     #111316;
  --raised:    #16181D;
  --line:      rgba(255,255,255,0.075);
  --line-firm: rgba(255,255,255,0.15);

  --ink:       #EBEDF2;
  --dim:       #99A1B0;
  --faint:     #666E7D;

  --cyan:      #38C7EB;
  --roll:      #FF6B6B;
  --pitch:     #6BD9FF;
  --yaw:       #DDB3FF;
  --good:      #4DD98C;
  --warn:      #FFAD38;

  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 64px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- shared type roles ---- */

.display {
  font-family: Archivo, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.chan {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--dim);
  max-width: var(--measure);
  margin: 0;
}

p { max-width: var(--measure); text-wrap: pretty; }

code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  color: var(--ink);
  background: var(--raised);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- page frame ---- */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The section rule is the instrument's channel marker: three hairlines in the
   roll, pitch and yaw colours, then the channel name. */
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(22px, 3vw, 34px);
}
.rule .bars { display: flex; flex-direction: column; gap: 3px; width: 26px; flex: none; }
.rule .bars i { height: 2px; border-radius: 2px; display: block; }
.rule .bars i:nth-child(1) { background: var(--roll);  width: 100%; }
.rule .bars i:nth-child(2) { background: var(--pitch); width: 70%; }
.rule .bars i:nth-child(3) { background: var(--yaw);   width: 40%; }
.rule .hair { flex: 1; height: 1px; background: var(--line); }

svg.brandbars { display: block; flex: none; margin-right: 12px; }

/* ---- hero ---- */

header { padding-top: clamp(34px, 6vw, 68px); }

.brandline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 6vw, 72px);
}
.brand {
  font-family: "Setpoint Wordmark", Archivo, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.brandline .chan { color: var(--faint); }

h1.display { font-size: clamp(36px, 5.6vw, 66px); }
h1 .lift { color: var(--cyan); }

.thesis {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  max-width: 940px;
}

/* The signal itself: the exponential sweep Betaflight injects, which
   everything else on the page depends on. */
.sweep {
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #090A0C;
  overflow: hidden;
}
.sweep img { display: block; width: 100%; height: auto; }
.sweep .caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.sweep .caption span { font-size: 11px; }

.axkey { display: flex; gap: 16px; flex-wrap: wrap; }
.axkey b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.axkey b::before { content: ""; width: 14px; height: 2px; border-radius: 2px; }
.axkey .r::before { background: var(--roll); }
.axkey .p::before { background: var(--pitch); }
.axkey .y::before { background: var(--yaw); }

/* ---- section heads ---- */

h2.display { font-size: clamp(27px, 4vw, 42px); margin-bottom: 18px; }
h3 {
  font-family: Archivo, sans-serif;
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
  color: var(--ink);
}

.head { margin-bottom: clamp(26px, 4vw, 40px); }

/* ---- screenshots, inset as panels rather than floating cards ---- */

figure { margin: 0; }
.shot {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
figcaption {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--faint);
  max-width: var(--measure);
}
figcaption b { color: var(--dim); font-weight: 500; }

.split {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.wide-right { grid-template-columns: 5fr 7fr; }
  .split.sheet { grid-template-columns: 1fr 1fr; align-items: center; }
  .split.mid { align-items: center; }
  .split.methods { grid-template-columns: 5fr 6fr; }
}
/* A sheet has a fixed width in the app and its screenshot is 2x of that, so it
   is never shown wider than the sheet itself. */
.split.sheet figure { max-width: 600px; }

/* Prose that follows a full-width figure, set in two columns so it reads as
   part of the figure rather than a long ragged column beside it. */
.notes { display: grid; gap: 0 clamp(26px, 4vw, 48px); margin-top: 8px; }
.notes p { margin: 18px 0 0; color: var(--dim); }
@media (min-width: 760px) { .notes { grid-template-columns: 1fr 1fr; } }

/* ---- readout strip: the before/after figures from the Tune tab ---- */

/* One row of three, or one column on a phone: never the two-and-one an
   auto-fit grid falls into when three cells do not quite fit. */
.readout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
}
@media (min-width: 560px) { .readout { grid-template-columns: repeat(3, 1fr); } }
.readout > div { background: var(--panel); padding: 15px 17px; }
.readout .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.readout .v { margin-top: 5px; font-size: 21px; font-weight: 500; color: var(--dim); }
.readout .v em { font-style: normal; color: var(--faint); padding: 0 5px; font-size: 15px; }
.readout .v strong { color: var(--good); font-weight: 600; }
.readout .v .w { color: var(--warn); font-weight: 600; }

/* ---- the tuning loop: numbered because it genuinely is a sequence ---- */

.loop { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .loop { grid-template-columns: repeat(4, 1fr); } }
.loop > div { background: var(--ground); padding: 22px 20px 24px; }
figure + .loop { margin-top: 34px; }
.loop .n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.loop p { font-size: 14px; color: var(--dim); margin: 0; max-width: 34ch; }

/* Five steps go in one row or one column. Four-across would strand the fifth. */
.loop.five { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .loop.five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 820px) { .loop.pairs { grid-template-columns: 1fr 1fr; } }
.loop.pairs p { max-width: 46ch; }

/* The methods, as a list beside their heading. */
.split.methods dl { margin: 0; }
.split.methods dl > div { padding: 16px 0; border-top: 1px solid var(--line); }
.split.methods dl > div:first-child { border-top: 0; padding-top: 4px; }
.split.methods dt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.split.methods dd { margin: 6px 0 0; color: var(--dim); max-width: 52ch; }

/* Accuracy figures: the numbers large, what they measure small. */
.figures { display: grid; gap: 34px clamp(26px, 4vw, 48px); }
@media (min-width: 760px) { .figures { grid-template-columns: 1fr 1fr; } }
.figures > div { border-top: 1px solid var(--line); padding-top: 20px; }
.figures .nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; margin: 14px 0 12px; }
.figures .nums b { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: var(--ink); }
.figures .nums span { display: block; font-size: 12px; color: var(--faint); }
.figures p { margin: 0; color: var(--dim); font-size: 14.5px; }
.loop + .after { margin: 22px 0 0; color: var(--dim); }

/* ---- spec table ---- */

.spec { border-top: 1px solid var(--line); }
.spec .row {
  display: grid;
  gap: 4px 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 700px) { .spec .row { grid-template-columns: 220px 1fr; } }
.spec dt { color: var(--faint); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-family: "IBM Plex Mono", monospace; }
.spec dd { margin: 0; color: var(--dim); font-size: 15px; max-width: 62ch; }
.spec dd b { color: var(--ink); font-weight: 500; }
dl { margin: 0; }

/* ---- closing ---- */

.close {
  border: 1px solid var(--line-firm);
  border-radius: 12px;
  padding: clamp(30px, 5vw, 52px);
  background: linear-gradient(160deg, var(--panel), var(--ground) 70%);
  margin-bottom: clamp(56px, 8vw, 96px);
}
.close .display { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 14px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 9px 16px;
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.status::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(56,199,235,0.16);
}

footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 46px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
footer .chan { color: var(--faint); }
footer .type { flex-basis: 100%; }
footer a {
  color: var(--dim);
  text-decoration: underline;
  text-decoration-color: var(--line-firm);
  text-underline-offset: 3px;
}
footer a:hover { color: var(--ink); }

/* ---- the mailing-list signup, and the pages behind it ---- */

.signup { max-width: 560px; margin-top: 28px; }

/* The header's way to the signup: small, top right, the same pill shape as the
   "In development" status it leads down to. */
.brandline .loop-link {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid rgba(56,199,235,0.45); border-radius: 999px;
  color: var(--cyan); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color 200ms ease;
}
.brandline .loop-link:hover { background: rgba(56,199,235,0.1); }
@media (max-width: 640px) {
  .brandline { gap: 10px; flex-wrap: nowrap; }
  .brandline .chan { display: none; }
  .brandline .loop-link { padding: 6px 11px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .brand { font-size: 16px; letter-spacing: 0.12em; }
  .brandline .loop-link { padding: 5px 9px; font-size: 11.5px; }
}
/* Below this the pill can't share a line with the wordmark: it takes the next. */
@media (max-width: 359px) {
  .brandline { flex-wrap: wrap; }
  .brandline .loop-link { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.signup label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 10px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input[type="email"] {
  flex: 1 1 240px; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--line-firm); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 16px;
}
.signup input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* The honeypot: out of sight for people, still filled in by naive bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button {
  height: 46px; padding: 0 20px;
  border: 0; border-radius: 8px;
  background: var(--cyan); color: var(--ground);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, transform 120ms ease;
}
button:hover { background: #64D4F0; }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

a.brand { text-decoration: none; }
header.short .brandline { margin-bottom: 0; }
.page section { min-height: 52vh; }
.page section > .rule { padding-top: clamp(28px, 4vw, 48px); }
.page h1.display { font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
.page .back { margin-top: 28px; }
.page p a, .page dd a { color: var(--cyan); }
.page .small { font-size: 14px; color: var(--faint); margin-top: 18px; }
.unsubscribe { margin-top: 6px; }

/* Keyboard access: a skip link, and a visible focus ring. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: 6px;
  background: var(--raised); color: var(--ink);
}
.skip:focus { top: 16px; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* Sections ease in as they scroll into view. CSS only, so no script, and
   only where the browser supports scroll-driven animation and the reader
   hasn't asked for less motion. Anywhere else everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main section > :not(.rule) {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}