/* Droplift — dropliftapp.com
 *
 * The rules this file follows, and why, are in docs/SITE_DESIGN.md. The short
 * version: no gradients, no glassmorphism, no uniform card grid, self-hosted
 * type with a width axis, a 12-column grid with a mono margin column, and
 * radii at zero. Those are decisions, not defaults — §1 of that doc lists what
 * the defaults produced the first time.
 *
 * Ink on paper. The app is dark (DROPLIFT.md §1.1); the site is not, so a
 * near-black phone reads as an object on the page rather than as more page.
 */

/* ---------------------------------------------------------------- type */

@font-face {
  font-family: "Archivo";
  /* Plain "woff2", not "woff2-variations": the legacy format string is
     unrecognised by current browsers, and an unrecognised format makes them
     skip the whole src and fall back to Helvetica. */
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paper and ink. Warm off-white, not #fff — a flat white page is the other
     default, and this one has to hold a lot of black type. */
  --paper: #f2efe9;
  --paper-deep: #e8e4dc;
  --ink: #0a0a0a;
  --ink-soft: #44403a;
  /* Checked, not eyeballed: 5.03:1 on --paper and 4.56:1 on --paper-deep,
     which clears AA for the small mono labels this is used on. The lighter
     grey it replaced measured 3.50 on the sunk band. */
  --ink-faint: #6a655e;
  --rule: #d4cfc5;

  /* One accent, flat, used sparingly. The app's own purple (theme.dart). */
  --accent: #701ff3;
  --accent-ink: #f2efe9;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --tap: 48px; /* MOBILE_APP.md §9 — it applies in a phone browser too. */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

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

/* -------------------------------------------------------------- headings

   Display sizes get negative tracking and the width axis opened up. Archivo
   at 125% width is a poster; at 100% it is a paragraph. Same file. */

h1,
h2,
h3,
h4 {
  margin: 0 0 0.4em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-stretch: 118%;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.8rem, 7.5vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-stretch: 125%;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  text-transform: uppercase;
}

h3 {
  font-size: 1.12rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------- the page grid

   12 columns with a live left margin: mono metadata in 1–2, content in 3–11.
   Nothing is centred, and headings hang in the margin rather than sitting
   over the text (SITE_DESIGN.md §2.3). */

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

.band {
  border-top: 1px solid var(--rule);
}

.band--ink {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}

.band--ink a {
  color: var(--paper);
  text-decoration-color: #6f6a63;
}

.band--ink a:hover {
  color: #c8a9ff;
  text-decoration-color: #c8a9ff;
}

.band--sunk {
  background: var(--paper-deep);
}

/* Spacing is deliberately uneven — identical padding everywhere is a tell. */
.band > .wrap {
  padding-block: clamp(48px, 7vw, 92px);
}

.band--tight > .wrap {
  padding-block: clamp(34px, 4vw, 52px);
}

.cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.4vw, 32px);
  row-gap: 28px;
  align-items: start;
}

.col-meta {
  grid-column: 1 / 3;
}

.col-main {
  grid-column: 3 / 11;
}

.col-wide {
  grid-column: 3 / 13;
}

.col-full {
  grid-column: 1 / -1;
}

/* Placements that used to be inline `style="grid-column: …"` attributes, which
   is why they are here. An inline style outranks every selector in this file,
   media query included — so a block that carried its own column was immune to
   the collapse below and stayed in its desktop track on a phone. The player
   section held a 300px phone frame in a 110px track, overlapping the heading
   beside it, and the footer ran four columns at 390px with the support address
   clipped off the right edge. `test_no_inline_grid_column` keeps them out. */

/* The player, two-up: the phone on the left, the three dial states beside it. */
.col-device {
  grid-column: 3 / 7;
}

.col-beside {
  grid-column: 8 / 13;
}

/* The colophon: mark and blurb, then the link lists as one self-reflowing
   block. Its inner grid has no breakpoint of its own — auto-fit drops it from
   three columns to two to one as the space runs out, at whatever width that
   happens to be, which is what stops it needing to be re-tuned per device. */
.col-brand {
  grid-column: 1 / 5;
}

.col-links {
  grid-column: 6 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 30px clamp(16px, 2.4vw, 32px);
}

@media (max-width: 820px) {
  .col-meta,
  .col-main,
  .col-wide,
  .col-brand,
  .col-links {
    grid-column: 1 / -1;
  }
}

/* The player section collapses earlier than the rest of the page. The phone is
   min(300px, …) wide and its track is four of twelve columns, so it outgrows
   the track at about 900px — before the 820px breakpoint above would have
   rescued it. */
@media (max-width: 900px) {
  #how .col-meta,
  .col-device,
  .col-beside {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------- mono bits */

.meta,
.tag,
.num,
.rule-label {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

.meta {
  margin: 0;
}

.meta strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.num {
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.band--ink .num {
  color: #c8a9ff;
}

.band--ink .meta,
.band--ink .rule-label {
  color: #8f8a83;
}

/* .meta strong pins itself to --ink so it reads as the label's title. On a
   dark band that is black on black, which is exactly how "Fig. 1" and
   "Waitlist" went missing until a WebKit snapshot showed the gap. */
.band--ink .meta strong,
.colophon .meta strong {
  color: var(--paper);
}

/* ------------------------------------------------------------------ nav

   Not sticky, not blurred. It scrolls away like a masthead. */

/* Ink, not paper. The logo is the app icon on its own near-black tile
   (SITE_DESIGN.md §2.9), and a dark tile floating on a pale bar reads as a
   sticker someone dropped on the page. On ink the tile all but disappears and
   the mark itself does the work — and the page now opens and closes dark,
   with the paper in between. */
.masthead {
  background: var(--ink);
  color: var(--paper);
}

.masthead .wrap {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 4vw, 48px);
  padding-block: 20px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* The app icon itself, not a redrawing of it — SITE_DESIGN.md §2.9. It carries
   its own dark tile because the mark's waveform is white, so it needs no
   colour from the page and looks the same on paper and on ink. */
.wordmark img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 6px;
  translate: 0 1px;
}

.masthead nav {
  display: flex;
  gap: clamp(14px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.masthead .wordmark {
  color: var(--paper);
}

.masthead nav a {
  text-decoration: none;
  color: #b8b3ac; /* 9.5:1 on ink */
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}

/* The deep accent is unreadable on black; the light tone is the one every
   other dark band on this site uses. */
.masthead nav a:hover {
  color: var(--paper);
  border-bottom-color: #c8a9ff;
}

.masthead nav a[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

@media (max-width: 560px) {
  .masthead nav a.opt {
    display: none;
  }
}

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

.hero > .wrap {
  padding-block: clamp(44px, 7vw, 88px) clamp(40px, 6vw, 76px);
}

.hero h1 {
  margin-bottom: 26px;
}

/* The only motion on the site: one staggered arrival, then nothing.
 *
 * Transform only — deliberately. The obvious version also fades opacity from
 * 0, which means that any time the animation doesn't run, the entire hero is
 * invisible. A WebKit snapshot caught exactly that. Nothing on this page is
 * allowed to depend on an animation to be readable. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .rise:nth-child(2) {
    animation-delay: 0.06s;
  }
  .rise:nth-child(3) {
    animation-delay: 0.12s;
  }
  .rise:nth-child(4) {
    animation-delay: 0.18s;
  }
}

@keyframes rise {
  from {
    transform: translateY(14px);
  }
}

.standfirst {
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 44ch;
  font-stretch: 104%;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 34px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  /* Belt and braces, not a fix for an observed bug: older WebKit paints a
     native push-button and ignores background-color on <button>, while still
     honouring font, border and padding — so the CTA would render system grey
     on some engines while the anchors styled .btn stayed correct. Current
     Safari does not need this. It costs one declaration. */
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}

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

.btn--line {
  background: transparent;
  color: var(--ink);
}

.btn--line:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.band--ink .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

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

/* ------------------------------------------------------------ the device

   A real capture of the Player, silent, filmed against an invented catalogue
   — ops/make_promo_clip.sh, and SITE_DESIGN.md §2.5 for why that is allowed
   where a screenshot of the real catalogue is not.

   The frame is flat: a bezel, a radius, one hairline. No glossy highlight, no
   reflection, no perspective tilt — the recording is the thing worth looking
   at. The video carries its own status bar and Dynamic Island, so the frame
   draws neither. */

/* Capped at its own natural size, but never wider than the track it sits in.
   The `74vw` this replaced measured the viewport rather than the column, so in
   a narrow track the frame simply overflowed it and sat on top of whatever was
   in the next column. */
.device {
  width: min(300px, 100%);
  padding: 9px;
  background: #17161b;
  border: 1px solid #2a2730;
  border-radius: 42px;
  box-shadow: 0 24px 48px rgb(0 0 0 / 45%);
  position: relative;
}

.device video,
.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  background: var(--ink);
  /* 540x1174, the simulator's screen scaled down. Reserving the box stops the
     page reflowing when the file lands. */
  aspect-ratio: 540 / 1174;
  object-fit: cover;
}

/* Stills of the planning screens sit in the same frame, two up. */
.device--sm {
  width: 100%;
  padding: 7px;
  border-radius: 30px;
}

.device--sm img {
  border-radius: 24px;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-top: 38px;
  max-width: 30rem;
}

.shots figure {
  margin: 0;
}

.shots figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* Two phones side by side need about 560px to stay readable, not 420px — at
   420 a 430px-wide handset (the Pro Max sizes) still got the two-up grid and
   rendered each screenshot 185px wide, which is smaller than the phone it is a
   picture of. */
@media (max-width: 560px) {
  .shots {
    grid-template-columns: 1fr;
    max-width: 17rem;
  }
}

.device-caption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f8a83;
  margin: 14px 0 0;
  max-width: 30ch;
}

/* The three dial states, listed beside the phone. */
.phases {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.phases li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 4px clamp(12px, 2vw, 24px);
  padding-block: 16px;
  border-top: 1px solid #2a2724;
}

.phases .state {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.phases p {
  margin: 0;
  color: #b8b3ac;
  max-width: 46ch;
}

@media (max-width: 560px) {
  .phases li {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- the set diagram

   Bespoke: this is one set on a timeline, and no other site could carry it
   (SITE_DESIGN.md §2.5). Scales with the column; scrolls on a phone. */

.diagram {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 22px 22px 16px;
}

.band--ink .diagram {
  border-color: #2a2724;
  background: #121110;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Below about 700px the figure scrolls instead of shrinking. Its labels are
   12 units in a 920-unit viewBox, so a full-width fit on a 390px phone renders
   them at 4.6px — present, and unreadable. A floor of 680px holds them near
   9px and costs one swipe. The comment above has claimed this behaviour since
   the diagram was written; it was never actually implemented. */
@media (max-width: 700px) {
  .diagram {
    overflow-x: auto;
    /* Momentum scrolling, and the padding stays with the scrolled content
       rather than collapsing against the right edge. */
    padding-right: 0;
  }

  .diagram svg {
    min-width: 680px;
  }

  .diagram figcaption {
    padding-right: 22px;
  }
}

.diagram figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-top: 14px;
  max-width: 70ch;
}

.band--ink .diagram figcaption {
  color: #8f8a83;
}

/* ---------------------------------------------------------- the step list

   Numbered, hanging, ruled. Not cards. */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 clamp(14px, 2vw, 26px);
  padding-block: 26px;
  border-top: 1px solid var(--rule);
}

.band--ink .steps > li {
  border-top-color: #2a2724;
}

.steps > li::before {
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.3em;
}

.band--ink .steps > li::before {
  color: #c8a9ff;
}

.steps h3 {
  margin-bottom: 6px;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 58ch;
}

.band--ink .steps p {
  color: #b8b3ac;
}

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

   The features section. A table of facts, not a 3x2 grid of cards
   (SITE_DESIGN.md §2.4). */

.spec {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.spec th,
.spec td {
  padding: 18px 16px 18px 0;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.spec th {
  width: 30%;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
}

.spec td {
  color: var(--ink-soft);
}

.spec td .aside {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 7px;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .spec th,
  .spec td {
    display: block;
    width: auto;
  }
  .spec td {
    border-top: 0;
    padding-top: 0;
  }
  .spec tr:last-child td {
    border-bottom: 0;
  }
  .spec tr:last-child th {
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------ FAQ */

.qa {
  border-top: 1px solid var(--rule);
}

.qa > div {
  border-bottom: 1px solid var(--rule);
  padding-block: 24px;
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 6px clamp(16px, 3vw, 40px);
}

@media (max-width: 720px) {
  .qa > div {
    grid-template-columns: 1fr;
  }
}

.qa h3 {
  margin: 0;
  font-size: 1.02rem;
}

.qa p {
  margin: 0 0 0.8em;
  color: var(--ink-soft);
}

.qa p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- prose */

.prose h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-top: 2.4em;
  scroll-margin-top: 24px;
  text-transform: none;
  letter-spacing: -0.02em;
  font-stretch: 110%;
}

.prose h2:first-of-type {
  margin-top: 1em;
}

.prose h3 {
  margin-top: 1.9em;
  text-transform: none;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose ul,
.prose ol {
  padding-left: 1.15em;
  margin: 0 0 1.2em;
  max-width: 62ch;
}

.prose li {
  margin-bottom: 0.55em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.96rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
}

.prose th {
  color: var(--ink);
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
}

/* A testimonial. Big, set in the display face, hanging off a rule — the
   quotation mark is drawn rather than typed so it can sit in the margin. */
.quote {
  margin: 2.4em 0 1.6em;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  max-width: 34ch;
}

.quote p {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}

.quote cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The citation under the evidence paragraph. Small, and deliberately legible
   rather than hidden: a performance claim that cannot be checked is worse
   than no claim. */
.cite-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  max-width: 52ch;
  margin: 2em 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.cite-note em {
  font-style: italic;
}

/* A pull quote, set in the accent — no left border bar, which is a named
   tell (SITE_DESIGN.md §1). Rules top and bottom instead. */
.note {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0 20px;
  margin: 2em 0;
  max-width: 62ch;
}

.note p:last-child {
  margin-bottom: 0;
}

.note--warn {
  border-top-color: var(--accent);
}

/* Margin contents on the long legal pages. The margin column is there
   anyway; a 15-section document may as well use it for something. */
.toc {
  position: sticky;
  top: 22px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

.toc h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 9px;
}

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
}

.toc a::before {
  content: counter(toc) " ";
  color: var(--ink-faint);
}

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

@media (max-width: 820px) {
  .toc {
    position: static;
    display: none; /* on a phone the contents are longer than the reach */
  }
}

.doc-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.4em;
}

/* ---------------------------------------------------------------- forms */

form {
  max-width: 46rem;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.field label {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--display);
}

input,
select,
textarea {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 2px;
  min-height: var(--tap);
  width: 100%;
}

select {
  /* Native select needs a background or the arrow sits on paper oddly. */
  background: var(--paper);
  padding-left: 0;
}

textarea {
  min-height: 130px;
  resize: vertical;
  border: 1px solid var(--ink);
  padding: 12px;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.band--ink input,
.band--ink select,
.band--ink textarea {
  color: var(--paper);
  border-color: var(--paper);
  background: transparent;
}

.band--ink input::placeholder {
  color: #8f8a83;
}

/* One-line email capture: field and button share a baseline. */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  max-width: 34rem;
}

.inline-form .field {
  flex: 1 1 16rem;
  margin-bottom: 0;
}

.inline-form .btn {
  flex: 0 0 auto;
}

.inline-form .form-status,
.inline-form .form-note {
  flex-basis: 100%;
}

/* Honeypot. Bots fill it, people never see it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 52ch;
  margin: 14px 0 0;
  text-transform: uppercase;
}

.band--ink .form-note {
  color: #8f8a83;
}

.form-status {
  display: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid currentColor;
}

.form-status[data-state] {
  display: block;
}

.form-status[data-state="ok"] {
  color: #1f6b3a;
}

.form-status[data-state="error"] {
  color: #97141f;
}

.form-status[data-state="busy"] {
  color: var(--ink-faint);
}

.band--ink .form-status[data-state="ok"] {
  color: #7fd6a0;
}

.band--ink .form-status[data-state="error"] {
  color: #ff9d9d;
}

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

.colophon {
  background: var(--ink);
  color: var(--paper);
}

.colophon .wrap {
  padding-block: 54px 34px;
}

.colophon .cols {
  row-gap: 34px;
}

.colophon h4 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8a83;
  margin: 0 0 12px;
  font-stretch: 100%;
}

.colophon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.colophon li {
  margin-bottom: 9px;
  /* support@dropliftapp.com is wider than a footer column on a phone and was
     running off the right edge of the page. `break-word` rather than
     `anywhere` on purpose: it only breaks mid-word when the line offers no
     other opportunity, so the <wbr> placed after the `@` in the markup wins
     and the address splits where an address should. `anywhere` ignores that
     and fills the line, which left an orphaned "m" on its own. */
  overflow-wrap: break-word;
}

.colophon a {
  color: var(--paper);
  text-decoration: none;
}

.colophon a:hover {
  color: #c8a9ff;
  text-decoration: underline;
}

.colophon .wordmark {
  color: var(--paper);
}

.colophon-blurb {
  color: #b8b3ac;
  font-size: 0.95rem;
  max-width: 30ch;
  margin: 12px 0 0;
}

.colophon-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #2a2724;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8f8a83;
}

.colophon-foot p {
  margin: 0;
  max-width: none;
}

/* ------------------------------------------------------------ utilities */

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

.stack-tight > * + * {
  margin-top: 10px;
}