/* ==========================================================================
   NoLie Labs. base.css
   The shared system for every page. Lifted from DESIGN.md, which is lifted
   from the Android app's tokens. Do not restyle any of this per page: add a
   page stylesheet (home.css, product.css, download.css) and override there.

   Mobile first. Breakpoints: 720px (two columns start), 1024px (full layout).

   COMPONENT CLASSES
   -----------------
   Type roles (apply to any element; they set size, weight, tracking, colour)
     .h-hero        hero headline, 700, 44px to 88px, tight.
     .h-section     section headline, 700, 34px to 48px.
     .statement     one big blunt sentence, 700, 22px to 26px.
     .eyebrow       11px cyan uppercase label, always directly above a headline.
     .lede          intro paragraph, 400, 17px to 20px, body colour.
     .body          running text, 500, 15px to 16px, body colour.
     .small         14px running text, body colour.
     .caption       13px meta text, muted.
     .toplabel      11px muted uppercase label (over a value or a card title).
     .muted         colour: text-muted. For a headline's second sentence only.

   Layout
     .container     1120px content column, centred, side padding 24px / 48px.
     .section       one page section. Adjacent sections sit 80/120/160px apart.
     .section--first  the first section under the header (more top room).
     .section-head  eyebrow + headline + optional .lede, max-width 640px.
     .rule          <hr class="rule">: 1px hairline in --rule. Use between sections
                    (inside a .container) and anywhere rows need separating.
     .rows / .row   ruled, numbered rows: <ol class="rows"> with <li class="row">
                    holding .row__rank ("01"), .row__title and .row__body.
     .rows--split   at 1024px the row becomes rank | title | body side by side.

   Components
     .wordmark      cyan diamond + "NoLie Labs". <a class="wordmark" href="/">
                    with an empty <span class="wordmark__mark" aria-hidden="true">.
     .btn           THE one solid cyan action in a section. 60px, radius 16px.
     .btn--hero     64px variant for a hero.
     .btn--compact  44px variant for the header only.
     .text-action   secondary plain-text action, 600 15px, underline on hover.
     .tag           SHIPPING / NEXT label. Add .tag--shipping or .tag--next.
     .pill          status swatch + word. Add .pill--great / --okay / --weak /
                    --terrible. The word is always written; never colour alone.
     .card          --surface box, radius 14px, 1px --rule border. Only where a
                    card carries meaning (product shelf, pricing).
     .early-access  the early-access form. Markup is fixed in DESIGN.md.
                    Children: input, .btn, .form-note, .form-status.
     .site-header   72px header: .site-header__inner, .site-nav, .site-nav__link,
                    .site-nav__long / .site-nav__short (button label swap < 480px).
     .site-footer   quiet footer: .site-footer__inner, .site-footer__line,
                    .site-footer__nav.
     .notfound      the 404 page's single block.

   Accessibility
     .skip-link       first focusable element, target #main.
     .visually-hidden hidden from sight, read by screen readers.
     :focus-visible   2px cyan ring, 3px offset, everywhere.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typeface. Self-hosted. Nothing is fetched from anywhere else.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-Medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-Semibold.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-Bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Tokens. Colours match the app exactly.
   -------------------------------------------------------------------------- */

:root {
  /* colour */
  --ink:            #070a14;
  --surface:        #0d1019;
  --surface-raised: #0f1424;
  --rule:           #151b2c;
  --rule-strong:    #1c2438;
  --outline:        #263049;
  --rank:           #3d475c;
  --placeholder:    #5b6579;
  --text:           #f2f5fa;
  --text-body:      #aeb6c8;
  --text-muted:     #7c8699;
  --accent:         #3df2ff;
  --accent-pressed: #7cf6ff;
  --great:          #34e39a;
  --okay:           #ffd23f;
  --weak:           #ff8a3d;
  --terrible:       #ff4d5e;

  /* type */
  --font: "Instrument Sans", system-ui, sans-serif;

  /* shape */
  --radius-btn:     16px;
  --radius-compact: 12px;
  --radius-card:    14px;

  /* motion: hover colour only */
  --transition: 150ms ease-out;

  /* layout */
  --container:      1120px;
  --gutter:         24px;
  --header-h:       72px;
  --space-section:  80px;   /* distance between adjacent sections */
  --card-pad:       22px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 48px;
    --space-section: 120px;
    --card-pad: 28px;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-section: 128px;
  }
}


/* --------------------------------------------------------------------------
   3. Reset. Small on purpose.
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd,
figure, blockquote, hr, fieldset {
  margin: 0;
}

ul, ol {
  padding: 0;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 0.15em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* Focus ring everywhere. The one exception is the underline input, below. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}


/* --------------------------------------------------------------------------
   4. Page. Ink background, Instrument Sans, film grain over everything.
   -------------------------------------------------------------------------- */

html {
  background: var(--ink);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

main {
  flex: 1 0 auto;
}

/* Film grain. A tiled static image, not a live filter. Nothing animates. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
}


/* --------------------------------------------------------------------------
   5. Type roles. Desktop size down to the mobile size with clamp(), never
      below the mobile value. Fluid between 375px and 1280px viewports.
   -------------------------------------------------------------------------- */

.h-hero {
  font-weight: 700;
  font-size: clamp(44px, 25.8px + 4.86vw, 88px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--text);
}

.h-section {
  font-weight: 700;
  font-size: clamp(34px, 28.2px + 1.55vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
}

.statement {
  font-weight: 700;
  font-size: clamp(22px, 20.3px + .44vw, 26px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
}

.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-weight: 400;
  font-size: clamp(17px, 15.8px + .33vw, 20px);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-body);
}

.body {
  font-weight: 500;
  font-size: clamp(15px, 14.6px + .11vw, 16px);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-body);
}

.small {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-body);
}

.caption {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-muted);
}

.toplabel {
  display: block;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A headline's second sentence, by contrast. Use once per page at most. */
.muted {
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Each section takes half the rhythm top and bottom, so two adjacent
   sections sit exactly --space-section apart. */
.section {
  padding-block: calc(var(--space-section) / 2);
}

.section--first {
  padding-top: 48px;
}

@media (min-width: 720px) {
  .section--first {
    padding-top: 96px;
  }
}

@media (min-width: 1024px) {
  .section--first {
    padding-top: 104px;
  }
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head .lede {
  margin-top: 20px;
}

@media (min-width: 720px) {
  .section-head {
    margin-bottom: 64px;
  }
  .section-head .lede {
    margin-top: 24px;
  }
}

.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
}

/* Ruled, numbered rows. Rules, not boxes. */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "rank title"
    "rank body";
  column-gap: 12px;
  row-gap: 10px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}

.row__rank {
  grid-area: rank;
  padding-top: 3px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .04em;
  color: var(--text-muted); /* the app's --rank is too faint for AA on the web */
}

.row__title {
  grid-area: title;
  font-weight: 700;
  font-size: clamp(20px, 19.2px + .22vw, 22px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}

.row__body {
  grid-area: body;
  max-width: 560px;
  font-weight: 500;
  font-size: clamp(15px, 14.6px + .11vw, 16px);
  line-height: 1.5;
  color: var(--text-body);
}

@media (min-width: 720px) {
  .row {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    padding-block: 32px;
  }
}

@media (min-width: 1024px) {
  .rows--split .row {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "rank title body";
    column-gap: 32px;
    align-items: start;
  }
  .rows--split .row__body {
    padding-top: 2px;
  }
}


/* --------------------------------------------------------------------------
   7. Components
   -------------------------------------------------------------------------- */

/* Wordmark: 10px cyan square turned 45 degrees, then the name. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 13px; /* 44px touch target */
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--accent);
}

.wordmark__mark {
  flex: none;
  width: 10px;
  height: 10px;
  margin-inline: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Primary button. One per section, solid cyan, no shadow, no gradient. */
.btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 28px;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition);
}

.btn:hover {
  background: var(--accent-pressed);
  color: var(--ink);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: default;
}

.btn--hero {
  height: 64px;
}

.btn--compact {
  display: inline-flex;
  width: auto;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-compact);
  font-size: 15px;
  line-height: 18px;
}

@media (min-width: 720px) {
  .btn {
    display: inline-flex;
    width: auto;
  }
}

/* Text action: the secondary control. Plain text, underline on hover. */
.text-action {
  display: inline-block;
  padding-block: 12px; /* 44px touch target */
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-body);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transition);
}

.text-action:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Tag: SHIPPING / NEXT */
.tag {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag--shipping {
  color: var(--great);
}

.tag--next {
  color: var(--text-muted);
}

/* Status pill: swatch + word, same colour. The word is never omitted. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.pill::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.pill--great    { color: var(--great); }
.pill--okay     { color: var(--okay); }
.pill--weak     { color: var(--weak); }
.pill--terrible { color: var(--terrible); }

/* Card: only where a card carries meaning. A card that holds a link lifts
   faintly on hover: the border steps up one token. */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  transition: border-color var(--transition), background-color var(--transition);
}

.card:has(a:hover) {
  border-color: var(--outline);
  background: var(--surface-raised);
}

/* Monospace, for checksums and commands only. */
.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: .92em;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Early-access form. The markup is fixed in DESIGN.md. */
.early-access {
  display: grid;
  gap: 16px;
}

.early-access input {
  width: 100%;
  height: 60px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: var(--text);
  transition: border-color var(--transition);
}

.early-access input::placeholder {
  color: var(--text-muted); /* AA against ink; --placeholder is too faint for text */
  opacity: 1;
}

/* The input's focus state is its underline turning cyan (DESIGN.md, Input). */
.early-access input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.early-access input:-webkit-autofill,
.early-access input:-webkit-autofill:hover,
.early-access input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.early-access .form-note {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

.early-access .form-status {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.early-access .form-status:empty {
  display: none;
}

.early-access .form-status--invalid,
.early-access .form-status--failed {
  color: var(--weak);
}

.early-access input[aria-invalid="true"] {
  border-bottom-color: var(--weak);
}

.early-access button:disabled {
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: wait;
}

/* Success: replaces the form in place. */
.form-done {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-strong);
}

.form-done:focus {
  outline: none;
}

.form-done__title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
}

.form-done__body {
  max-width: 34em;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}

@media (min-width: 720px) {
  .early-access {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: end;
  }
  .early-access input {
    grid-column: 1;
  }
  .early-access .btn {
    grid-column: 2;
  }
  .early-access .form-note,
  .early-access .form-status {
    grid-column: 1 / -1;
  }
}


/* Rings: the app's home-screen radar. Hairline circles and a cyan dot that
   breathes. The app's own graphic, nothing stock. Place inside a
   position:relative box; it fills it and sits behind the content. */
.rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rings__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid var(--outline);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.rings__ring:nth-child(1) { width: 26%;  opacity: 1; }
.rings__ring:nth-child(2) { width: 52%;  opacity: .8; }
.rings__ring:nth-child(3) { width: 78%;  opacity: .6; }
.rings__ring:nth-child(4) { width: 104%; opacity: .4; }
.rings__ring:nth-child(5) { width: 130%; opacity: .25; }

.rings__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  animation: rings-breathe 2.8s ease-in-out infinite;
}

@keyframes rings-breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61, 242, 255, .22); }
  50%      { box-shadow: 0 0 0 14px rgba(61, 242, 255, 0); }
}

/* Mini room list: three real rows from the app, for a product card. */
.mini-list {
  list-style: none;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.mini-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -.01em;
  color: var(--text);
}

.mini-list__rank {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   8. Accessibility helpers
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius-compact);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--text);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   9. Header. 72px, transparent, no border, three items fit at 375px.
   -------------------------------------------------------------------------- */

/* Sticky. 72px tall, stuck at -16px: once scrolled, the top 16px slide away
   and a 56px band stays, with a faint surface tint. Height never changes, so
   nothing below it moves. */
.site-header {
  position: sticky;
  top: -16px;
  z-index: 100;
  padding-top: 16px;
  background: transparent;
  transition: background-color var(--transition);
}

.site-header.is-scrolled {
  background: rgba(13, 16, 25, .92);
}

.site-header__inner {
  height: 56px;
}

.site-nav__action {
  white-space: nowrap;
}

.site-nav__menu {
  display: inline-block;
  padding: 13px 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -.01em;
  color: var(--text);
}

.site-nav__menu:hover {
  color: var(--accent);
}

@media (max-width: 719.98px) {
  .site-nav .site-nav__link {
    display: none;   /* lives in the menu on small screens */
  }
}

@media (min-width: 720px) {
  .site-nav__menu {
    display: none;
  }
}

/* The mobile menu. Full screen, ink, big type. Sits under the grain. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: var(--ink);
}

.site-menu[hidden] {
  display: none;
}

html.menu-open,
html.menu-open body {
  overflow: hidden;
}

.site-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-block: 8px 40px;
}

.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-menu__close {
  padding: 13px 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--text);
}

.site-menu__close:hover {
  color: var(--accent);
}

.site-menu__nav {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

.site-menu__nav a {
  display: block;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
  font-size: clamp(28px, 24px + 1.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
  text-decoration: none;
}

.site-menu__nav a:hover {
  color: var(--accent);
}

/* Back to top. Small, quiet, bottom right, only after a couple of screens. */
.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-compact);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-body);
  text-decoration: none;
}

.totop:hover {
  color: var(--text);
  border-color: var(--outline);
}

.totop[hidden] {
  display: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-nav__link {
  display: inline-block;
  padding: 13px 4px; /* 44px tall touch target */
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--accent);
}

/* The header button's label shortens under 480px. */
.site-nav__long {
  display: none;
}

.site-nav__short {
  display: inline;
}

@media (min-width: 480px) {
  .site-nav__long {
    display: inline;
  }
  .site-nav__short {
    display: none;
  }
}

@media (min-width: 720px) {
  .site-nav {
    gap: 28px;
  }
}


/* --------------------------------------------------------------------------
   10. Footer. Quiet and small.
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: calc(var(--space-section) / 2);
  padding-block: 40px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.site-footer__line {
  margin: 0;
}

.site-footer__nav {
  display: flex;
  gap: 20px;
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 14px; /* 44px touch target */
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer__cookies {
  margin: 0;
}

.site-footer__cookies a {
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: .15em;
}

.site-footer__cookies a:hover {
  color: var(--accent);
}

.site-footer__brand {
  display: grid;
  gap: 12px;
}

.site-footer__nav a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

@media (min-width: 720px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
  }
}

/* CTA section before the footer (home). */
.cta__title {
  max-width: 14em;
}

.cta__sub {
  max-width: 34em;
  margin-top: 20px;
}

.cta__action {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 40px;
}

/* FAQ. Without JavaScript: plain stacked questions, every answer open.
   With it: each question is a button, the answer animates open and closed. */
.faq {
  border-top: 1px solid var(--rule);
}

.faq__item {
  display: grid;
  gap: 16px;
  padding-block: 32px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 80px;
}

.faq__q {
  font-weight: 700;
  font-size: clamp(22px, 19.5px + .7vw, 30px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text);
}

.faq__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  transition: color var(--transition);
}

.faq__btn:hover {
  color: var(--accent);
}

/* The mark: two hairlines, a plus that becomes a minus. Drawn, not an icon font. */
.faq__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: .3em;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease;
}

.faq__mark::after {
  transform: rotate(90deg);
}

.is-collapsible.is-open .faq__mark::after {
  transform: rotate(0deg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms ease;
}

.faq__panel > .faq__a {
  overflow: hidden;
}

.is-collapsible:not(.is-open) .faq__panel {
  grid-template-rows: 0fr;
}

.is-collapsible:not(.is-open) .faq__panel > .faq__a {
  visibility: hidden;
  transition: visibility 0s 300ms;
}

.is-collapsible.is-open .faq__panel > .faq__a {
  visibility: visible;
}

.is-collapsible:not(.is-open) {
  gap: 0;
}

.faq__a {
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.faq__a a,
.reading a {
  color: var(--text);
  text-decoration-color: var(--outline);
}

@media (min-width: 720px) {
  .faq__item {
    padding-block: 40px;
  }
}

@media (min-width: 1024px) {
  .faq__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 48px;
    align-items: start;
  }
  .faq__a {
    max-width: none;
  }
}


/* --------------------------------------------------------------------------
   11. Not found. One block, lots of room.
   -------------------------------------------------------------------------- */

.notfound {
  max-width: 640px;
}

.notfound .lede {
  margin-top: 24px;
}

.notfound .text-action {
  margin-top: 32px;
}

@media (min-width: 720px) {
  .notfound .lede {
    margin-top: 32px;
  }
}


/* --------------------------------------------------------------------------
   12. Motion. There is none beyond hover colour; honour the preference anyway.
   -------------------------------------------------------------------------- */

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