/* Minuta, minuta.work
   Paper and ink. One teal line runs the page. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/literata-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --paper: #f7f5f1;
  --card: #ffffff;
  --ink: #1b1b1f;
  --ink-2: #55555f;
  --hairline: rgba(27, 27, 31, 0.14);
  --frame: rgba(27, 27, 31, 0.12);
  /* 0.48 on Card is 3.1:1, the contrast a field boundary has to hold. */
  --field-border: rgba(27, 27, 31, 0.48);

  --teal: #2a6a8c;
  --teal-on: #ffffff;
  --teal-wash: rgba(42, 106, 140, 0.12);
  --teal-field: #edf1f3;

  --ochre: #d9a21b;
  --ochre-ink: #7a5a0e;
  --ochre-wash: rgba(217, 162, 27, 0.16);

  --navy: #122740;
  --navy-2: #1e4b6b;
  --navy-ink: #f7f5f1;
  --navy-ink-2: #b9c6d2;
  --navy-line: #6fb0d2;

  --line: var(--teal);

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* The rail is a fixed width per breakpoint and every line svg uses a
     200 unit viewBox, so --sw is 2px expressed in those units. */
  --rail: 140px;
  --sw: 2.857;
  --rail-gap: clamp(1rem, 2.5vw, 2rem);
  --hero-pb: clamp(3rem, 6vw, 5rem);
  --radius: 22px;
  --radius-sm: 12px;
  --nav-h: 64px;
  --band-pad: clamp(4.5rem, 9vw, 8.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131315;
    --card: #1d1d20;
    --ink: #f2f0ec;
    --ink-2: #a6a6b0;
    --hairline: rgba(242, 240, 236, 0.16);
    --frame: rgba(247, 245, 241, 0.14);
    --field-border: rgba(242, 240, 236, 0.4);

    --teal: #6fb0d2;
    --teal-on: #101418;
    --teal-wash: rgba(111, 176, 210, 0.16);
    --teal-field: #17202a;

    --ochre: #e6b43a;
    --ochre-ink: #e6b43a;
    --ochre-wash: rgba(230, 180, 58, 0.18);

    --navy-ink-2: #a9bacb;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.55rem, 6vw, 4.4rem);
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.95rem, 4vw, 2.9rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

p,
figure {
  margin: 0;
}

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

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

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

.hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Layout ---------- */

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

/* Padding lives on the body, not the section, so the rails of two sections
   meet edge to edge and the line stays continuous down the page. */
.band {
  position: relative;
}

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  column-gap: var(--rail-gap);
  align-items: stretch;
}

.band__body {
  min-width: 0;
  max-width: 52rem;
  padding-block: var(--band-pad);
}

.lead {
  color: var(--ink-2);
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  margin-top: 1.4rem;
  max-width: 34em;
}

.note {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-top: 1.5rem;
}

.sample-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}

/* ---------- The line ---------- */

.rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.rail svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.rail__motif {
  flex: 0 0 auto;
  height: auto;
}

.rail__stem {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

.line-path {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--sw);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Stems stretch vertically, so a round cap would be drawn as a long
   half ellipse past the join. */
.rail__stem .line-path {
  stroke-linecap: butt;
}

/* With scripting the line starts undrawn and is drawn by scroll position.
   A section draws in one pass: the motif over the first stretch of the
   range, then the stem that carries the line into the next section.
   Drawing both from their own tops at once left a gap with a fragment
   running ahead of it. Both run from 1, undrawn, to 0. */
.js .rail {
  --draw: 1;
  --draw-motif: clamp(0, calc((var(--draw, 1) - 0.4) / 0.6), 1);
  --draw-stem: clamp(0, calc(var(--draw, 1) / 0.4), 1);
}

.js .rail__motif .line-path {
  stroke-dashoffset: var(--draw-motif);
}

.js .rail__stem .line-path {
  stroke-dashoffset: var(--draw-stem);
}

@supports (animation-timeline: view()) {
  .js .rail {
    animation: rail-draw linear both;
    animation-timeline: view();
    /* The drawn tip leads the reader down the page rather than trailing
       in the lower third, and the last rail still finishes on screen. */
    animation-range: cover 0% cover 45%;
  }
}

@keyframes rail-draw {
  from {
    --draw: 1;
  }
  to {
    --draw: 0;
  }
}

/* The hero line is already on screen when the page opens, so it is drawn
   from the start and only breathes. Scroll drawing begins below the fold. */
.js .rail--static {
  --draw: 0;
}

@supports (animation-timeline: view()) {
  .js .rail--static {
    animation: none;
  }
}

@property --draw {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav.is-stuck {
  border-bottom-color: var(--hairline);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark__m {
  color: var(--teal);
}

.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  align-items: center;
}

.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.98rem;
}

.nav__links a:hover {
  color: var(--ink);
}

.nav .btn {
  margin-left: 1.4rem;
  white-space: nowrap;
}

.cta-short {
  display: none;
}

@media (max-width: 640px) {
  .nav .cta-full {
    display: none;
  }

  .nav .cta-short {
    display: inline;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--teal-on);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s ease;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: scale(0.97);
}

.btn--small {
  min-height: 40px;
  padding: 0.45rem 1.1rem;
  font-size: 0.95rem;
}

.btn--on-field {
  background: var(--paper);
  color: var(--navy);
}

.link-plain {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--teal);
  font-weight: 500;
}

/* ---------- Hero ---------- */

.hero {
  overflow: hidden;
}

.hero__grid {
  /* Capped so the screenshot, which starts level with the headline, always
     runs past the foot of the hero and is cropped by it on tall windows. */
  min-height: min(88dvh, 820px);
  align-items: start;
}

/* The columns start at the top, but the line still runs the whole section. */
.hero__rail {
  align-self: stretch;
}

.hero__split {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.2vw, 2rem);
  min-width: 0;
  padding-block: clamp(3rem, 8vw, 6rem) var(--hero-pb);
}

.hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 33rem;
}

.hero h1 {
  font-size: clamp(1.95rem, 4.3vw, 3.25rem);
  letter-spacing: -0.015em;
}

.hero__sub {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
}

.hero__actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
}

/* The screenshot starts level with the headline and runs off the bottom edge
   of the hero, which crops it, so no empty band opens up under it. */
.hero__media {
  flex: 0 0 clamp(300px, 30vw, 400px);
  margin-left: auto;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

.hero__media .shot--phone {
  position: absolute;
  left: 0;
  right: 0;
  /* Optical correction: the frame meets the cap height of the headline,
     not the top of its line box. */
  top: 6px;
  aspect-ratio: 780 / 1589;
}

.shot {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* The screenshot is framed, not floated. Its status bar is cropped out of
   the asset itself, so the image needs no offset here. */
.shot--phone {
  display: block;
  overflow: hidden;
  border: 1px solid var(--frame);
  border-radius: 20px 20px 0 0;
}

.shot--phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The line starts level with the first line of the headline, eight pixels
   above its cap height, rather than under the nav button. The last term is
   the dot's own offset inside the motif, which follows the rail to pixel
   scale. */
.hero__rail .rail__motif {
  margin-top: calc(clamp(3rem, 8vw, 6rem) + 4px - var(--rail) * 0.03);
}

/* The hero waveform laid flat, for phones. */
.hero__wave {
  display: none;
  width: 100%;
  height: 80px;
  margin-top: 2rem;
  overflow: visible;
}

/* Radius follows the same viewBox to pixel scale as the stroke,
   so the live dot is about 5px wherever the rail lands. */
.live-dot {
  fill: var(--ochre);
  r: calc(var(--sw) * 2.5px);
}

/* The line ends on the mark it opens with: the wordmark and its full stop.
   The stop arrives with the last of the M, and is simply there when nothing
   is drawing. */
.line-stop {
  fill: var(--ochre);
  r: calc(var(--sw) * 2.5px);
}

.js .line-stop {
  opacity: calc((0.42 - var(--draw, 1)) * 25);
}

.rail .rail__motif--stack {
  display: none;
}

/* Where the minutes leave, the line carries straight on and one curve peels
   off toward the apps, drawn last so it ends on the dot. The dot is part of
   that one gesture, so it stays out of sight until the curve has all but
   reached it, and is simply there when nothing is drawing. */
.branch-dot {
  fill: var(--line);
  r: calc(var(--sw) * 1.5px);
}

.js .branch-dot {
  opacity: clamp(0, calc((0.03 - var(--draw-motif, 0)) * 40), 1);
}

/* ---------- Transcript sample ---------- */

.sample {
  margin-top: 2.6rem;
}

.transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}

.transcript li {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: 1.02rem;
  line-height: 1.45;
}

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--i, 0) * 130ms);
}

.js .is-in .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- Minutes sample ---------- */

.minutes {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.8rem;
}

.minutes__doc {
  display: grid;
  gap: 1.6rem;
}

.minutes__summary {
  font-size: 1.1rem;
  line-height: 1.5;
}

.minutes__group h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.minutes__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.minutes__group li {
  padding-left: 1.15rem;
  position: relative;
  line-height: 1.45;
}

.minutes__group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.chip--owner {
  background: var(--teal-wash);
  color: var(--teal);
}

.chip--due {
  background: var(--ochre-wash);
  color: var(--ochre-ink);
}

/* ---------- Navy field ---------- */

.field-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--navy-ink);
  --line: var(--navy-line);
  --ink-2: var(--navy-ink-2);
}

.field-navy h2 {
  color: var(--navy-ink);
}

.statements {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 30em;
}

.statements li {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
}

.closing {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(247, 245, 241, 0.22);
  color: var(--navy-ink);
  font-size: 1.05rem;
  max-width: 30em;
}

/* ---------- Logos ---------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  margin-top: 2.6rem;
}

.logos {
  list-style: none;
  padding: 0;
}

.logos img {
  width: 36px;
  height: 36px;
  opacity: 0.9;
}

.logos__more {
  color: var(--ink-2);
  margin-top: 1.6rem;
  font-size: 1rem;
}

/* ---------- Statements grid ---------- */

.two-col {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.6rem clamp(2rem, 5vw, 4rem);
}

.two-col li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  line-height: 1.45;
}

.figure-wide {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.figure-wide img {
  width: 100%;
  border-radius: var(--radius);
}

/* There is no dark capture of the Mac or of this iPad screen, so in dark
   appearance the light ones sit on a card instead of glaring off the page. */
@media (prefers-color-scheme: dark) {
  .figure-wide,
  .minutes .shot {
    background: var(--card);
    padding: 12px;
    border-radius: var(--radius);
  }

  .figure-wide img,
  .minutes .shot img {
    border-radius: 12px;
  }
}

figcaption {
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

/* ---------- Pricing ---------- */

.field-teal {
  background: color-mix(in oklab, var(--teal) 6%, var(--paper));
}

@media (prefers-color-scheme: dark) {
  .field-teal {
    background: color-mix(in oklab, var(--teal) 10%, var(--paper));
  }
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .field-teal {
    background: var(--teal-field);
  }
}

.prices {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  max-width: 40rem;
}

.prices li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hairline);
}

.prices li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.prices__plan {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 0 0 8rem;
}

/* The trial belongs to the price, not to a badge, so it reads as one line. */
.prices__note {
  color: var(--ink-2);
}

.footnote {
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

/* ---------- Close and form ---------- */

.band--close .band__body {
  padding-top: clamp(5rem, 12vw, 10rem);
}

.notify {
  margin-top: 2.6rem;
  max-width: 30rem;
}

.notify__title {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1.15;
}

.notify__hint {
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-top: 0.7rem;
  margin-bottom: 1.4rem;
  max-width: 34em;
}

.notify label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.notify input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-border);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.notify input[type="email"][aria-invalid="true"] {
  border-color: var(--ink);
}

.notify input[type="email"]::placeholder {
  color: var(--ink-2);
  opacity: 0.75;
}

.notify .btn {
  margin-top: 0.9rem;
}

.notify__msg {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  min-height: 1.4em;
}

.notify__msg[data-state="ok"] {
  color: var(--teal);
}

.notify__msg[data-state="error"] {
  color: var(--ink);
}

.close__actions {
  margin-top: 2.2rem;
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 3.5rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
}

.foot a {
  color: var(--ink-2);
}

.foot a:hover {
  color: var(--ink);
}

.foot__end {
  margin-left: auto;
}

/* ---------- Documents (privacy, support, 404) ---------- */

.doc {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
}

.doc h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
}

.doc h2 {
  font-size: 1.35rem;
  margin-top: 2.8rem;
  margin-bottom: 0.6rem;
}

.doc p,
.doc li {
  margin-top: 1rem;
  line-height: 1.6;
}

.doc ul {
  padding-left: 1.2rem;
}

.doc .updated {
  color: var(--ink-2);
  margin-top: 0.4rem;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1.4rem;
  font-size: 0.98rem;
}

.doc th,
.doc td {
  text-align: left;
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.doc th {
  color: var(--ink-2);
  font-weight: 600;
}

.doc__back {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 1079px) {
  :root {
    --rail: 112px;
    --sw: 3.571;
  }
}

@media (max-width: 900px) {
  :root {
    --rail: 88px;
    --sw: 4.545;
  }

  .band__body {
    max-width: none;
  }

  .hero__split {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .hero__media {
    flex: 0 0 auto;
    width: min(320px, 100%);
    margin-inline: auto;
    align-self: center;
  }

  /* In flow here, and the containing block for the fade below. */
  .hero__media .shot--phone {
    position: relative;
    max-height: none;
    border-radius: 20px;
  }

  /* The capture ends mid row, so the last rows fade into the page rather
     than being cut through. */
  .hero__media .shot--phone::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 44px;
    background: linear-gradient(to bottom, transparent, var(--paper));
    pointer-events: none;
  }

  .hero__grid {
    min-height: 0;
  }

  .minutes {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav__links a[data-secondary] {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --rail: 44px;
    --sw: 9.091;
  }

  /* On phones the line leaves the margin. The body takes the whole width and
     each motif is re-staged as an interstitial between two sections, centred,
     entering at the top centre and leaving at the bottom centre. */
  .band__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    width: 100%;
  }

  /* The motifs no longer share one scale, so the stroke is held at two
     pixels by the geometry rather than by the rail token. */
  .line-path {
    vector-effect: non-scaling-stroke;
    stroke-width: 2px;
  }

  .rail__motif {
    height: 120px;
    margin-top: clamp(1.5rem, 6vw, 2.75rem);
  }

  .rail__stem {
    flex: 0 0 auto;
    height: 32px;
  }

  .live-dot,
  .line-stop {
    r: 7px;
  }

  .branch-dot {
    r: 7.5px;
  }

  .rail .rail__motif--wide {
    display: none;
  }

  .rail .rail__motif--stack {
    display: block;
  }

  /* The hero keeps its waveform, laid flat under the actions. */
  .hero__rail {
    display: none;
  }

  .hero__wave {
    display: block;
  }

  .hero__wave .live-dot {
    r: 10px;
  }

  /* Each sentence holds its own line. The size is the width of the body
     column divided by the longest sentence, which measures 9.7 em in
     Literata semibold, with the rest left as slack. */
  .hero h1 {
    font-size: min(2rem, calc((100vw - var(--gutter) * 2) / 10.2));
  }

  .nav__links {
    gap: 1rem;
  }

  .nav__links a {
    display: none;
  }

  .nav .btn {
    margin-left: auto;
  }

  .prices__plan {
    flex: 0 0 100%;
  }

  /* The two links hold the first line, the two notes the second, which
     needs the smaller size to keep the year beside the name. */
  .foot {
    font-size: 0.88rem;
  }

  .foot__inner {
    column-gap: 1rem;
  }

  .foot__inner::after {
    content: "";
    flex: 0 0 100%;
    height: 0;
    order: 1;
  }

  .foot__inner span {
    order: 2;
  }

  .foot__end {
    order: 3;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .wave-breathe {
    transform-box: view-box;
    transform-origin: 100px 0;
    animation: breathe 6.5s ease-in-out infinite alternate;
  }

  .wave-breathe--flat {
    transform-origin: 16px 80px;
    animation-name: breathe-flat;
  }

  .live-dot {
    animation: live 2.4s ease-in-out infinite;
  }
}

@keyframes breathe {
  from {
    transform: scaleX(0.88);
  }
  to {
    transform: scaleX(1.12);
  }
}

@keyframes breathe-flat {
  from {
    transform: scaleY(0.88);
  }
  to {
    transform: scaleY(1.12);
  }
}

@keyframes live {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .line-path,
  .js .line-path,
  .js .rail__motif .line-path,
  .js .rail__stem .line-path {
    stroke-dashoffset: 0;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn {
    transition: none;
  }

  .btn:active {
    transform: none;
  }

  @supports (animation-timeline: view()) {
    .js .rail {
      animation: none;
    }
  }
}