/* ===== Type Daily ===== */

/* Paper and ink from the app's Palette. Dark appearance swaps them, following the system unless the
   visitor picked one with the header toggle, which sets data-theme on the root. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#f5f3ee, #14110f);
  --ink: light-dark(#14110f, #f2efe8);
  --secondary-ink: light-dark(#3a342e, #cfc8bd);
  --soft-ink: light-dark(#5c554d, #a39a90);
  --rule: light-dark(#dcd6cc, #34302b);
  --accent: light-dark(#c0442e, #e0694f);
  --sheet: light-dark(#ece8e0, #1d1916);
  --tile: light-dark(#e2ddd2, #1d1916);
  --widget-edge: light-dark(transparent, #34302b);
  --widget-drop: light-dark(rgba(20, 17, 15, 0.28), transparent);
  --widget-lift: light-dark(rgba(20, 17, 15, 0.06), transparent);
  --lock: light-dark(#1e1a17, #0b0908);
  --lock-edge: light-dark(transparent, #34302b);
  --band: light-dark(#14110f, #0b0908);
  --band-ink: #f2efe8;
  --band-soft: #a39a90;
  --band-rule: light-dark(#3a342e, #34302b);

  /* The seven inks, after inks found on old paper, each with a lighter shade for dark paper. */
  --ink-carbon: var(--ink);
  --ink-sepia: light-dark(#5b3a24, #d9b48f);
  --ink-iron-gall: light-dark(#23304a, #a3b6d3);
  --ink-oxblood: light-dark(#6e1f24, #e3968c);
  --ink-verdigris: light-dark(#21493b, #8fc7b0);
  --ink-ochre: light-dark(#7f5410, #e2b45e);
  --ink-aubergine: light-dark(#4a2945, #cda3c5);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --gutter: 24px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ===== Day composition ===== */

/* A face class carries the canvas's hand-tuned sizes, in design pixels. A context sets --s, and
   optionally --sm and --sw, as lengths per design pixel for the numeral, month and weekday. */
.face-instrument-serif { --ff: "Instrument Serif", serif; --n: 300; --nw: 400; --nt: -0.025em; --m: 22; --ms: italic; --mw: 400; --mt: 0.01em; --mc: none; --w: 54; --ws: normal; --ww: 400; --wt: -0.01em; --wc: none; }
.face-bebas-neue { --ff: "Bebas Neue", sans-serif; --n: 350; --nw: 400; --nt: 0; --m: 22; --ms: normal; --mw: 400; --mt: 0.12em; --mc: uppercase; --w: 60; --ws: normal; --ww: 400; --wt: 0.03em; --wc: uppercase; }
.face-silkscreen { --ff: Silkscreen, monospace; --n: 180; --nw: 700; --nt: 0; --m: 13; --ms: normal; --mw: 400; --mt: 0.04em; --mc: uppercase; --w: 28; --ws: normal; --ww: 700; --wt: 0; --wc: uppercase; }
.face-ms-madi { --ff: "Ms Madi", cursive; --n: 270; --nw: 400; --nt: 0; --m: 30; --ms: normal; --mw: 400; --mt: 0; --mc: none; --w: 66; --ws: normal; --ww: 400; --wt: 0; --wc: none; }
.face-shrikhand { --ff: Shrikhand, serif; --n: 210; --nw: 400; --nt: -0.02em; --m: 18; --ms: normal; --mw: 400; --mt: 0.02em; --mc: none; --w: 42; --ws: normal; --ww: 400; --wt: -0.01em; --wc: none; }
.face-space-mono { --ff: "Space Mono", monospace; --n: 240; --nw: 700; --nt: -0.06em; --m: 14; --ms: normal; --mw: 400; --mt: 0.02em; --mc: uppercase; --w: 34; --ws: normal; --ww: 400; --wt: -0.02em; --wc: none; }
.face-bodoni-moda { --ff: "Bodoni Moda", serif; --n: 270; --nw: 800; --nt: -0.02em; --m: 20; --ms: italic; --mw: 400; --mt: 0.01em; --mc: none; --w: 50; --ws: italic; --ww: 500; --wt: -0.01em; --wc: none; }
.face-cormorant-garamond { --ff: "Cormorant Garamond", serif; --n: 300; --nw: 300; --nt: -0.02em; --m: 22; --ms: italic; --mw: 400; --mt: 0.01em; --mc: none; --w: 56; --ws: italic; --ww: 300; --wt: -0.01em; --wc: none; }

.ink-carbon { color: var(--ink-carbon); }
.ink-sepia { color: var(--ink-sepia); }
.ink-iron-gall { color: var(--ink-iron-gall); }
.ink-oxblood { color: var(--ink-oxblood); }
.ink-verdigris { color: var(--ink-verdigris); }
.ink-ochre { color: var(--ink-ochre); }
.ink-aubergine { color: var(--ink-aubergine); }

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--s));
}

.day-month,
.day-weekday,
.day-n {
  font-family: var(--ff);
  white-space: nowrap;
}

.day-month {
  font-size: calc(var(--m) * var(--sm, var(--s)));
  font-style: var(--ms);
  font-weight: var(--mw);
  letter-spacing: var(--mt);
  text-transform: var(--mc);
  line-height: 1.2;
  opacity: 0.8;
}

.day-weekday {
  font-size: calc(var(--w) * var(--sw, var(--s)));
  font-style: var(--ws);
  font-weight: var(--ww);
  letter-spacing: var(--wt);
  text-transform: var(--wc);
  line-height: 1.2;
}

.day-n {
  font-size: calc(var(--n) * var(--s));
  font-weight: var(--nw);
  letter-spacing: var(--nt);
  line-height: 0.8;
}

.day-box {
  width: calc(334 * var(--s));
  height: calc(280 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Shared type ===== */

.eyebrow,
.caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

.credit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.credit::before {
  content: "";
  height: 1px;
  background: var(--rule);
}

.credit > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

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

/* Controls that only work with the script stay hidden without it. */
:root:not(.js) .needs-js { display: none; }

.section {
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-head > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-head h2 {
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.section-head p {
  max-width: 480px;
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--soft-ink);
}

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

/* ===== Buttons ===== */

.pill {
  height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pill-large {
  height: 54px;
  padding: 0 20px;
  border-radius: 27px;
  font-size: 17px;
}

.round {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
}

.round-text {
  width: auto;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

a.pill:hover,
.site-header > a:hover,
.credit a:hover,
.site-footer a:hover { opacity: 0.72; }

/* ===== Header ===== */

.site-header {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}

.site-header > a,
.site-footer .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}

.site-header > a img {
  width: 30px;
  height: 30px;
}

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

/* The toggle shows the appearance it switches to. */
.icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* ===== Hero ===== */

.hero {
  padding: 44px var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero h1 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(52px, 6.7vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}

.hero-copy p {
  max-width: 460px;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.hero-copy .pill { margin-top: 32px; }

.hero-leaf {
  position: relative;
  margin-top: 56px;
  padding: 44px 0 48px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  --s: min(0.92px, calc((100vw - 48px) / 334));
}

/* The bookmark ribbon hangs from the top edge of a saved day. */
.ribbon {
  position: absolute;
  top: 0;
  right: 8px;
  width: 26px;
  height: 66px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
}

.ribbon[hidden] { display: none; }

.hero-leaf .credit {
  align-self: stretch;
  margin-top: 40px;
}

.hero-leaf .credit a { text-decoration: none; }

.hero-controls {
  align-self: stretch;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-controls .caption {
  flex-grow: 1;
  min-width: 0;
  padding-left: 6px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.hero-controls [hidden] { display: none; }

#bookmark[aria-pressed="true"] { color: var(--accent); }
#bookmark[aria-pressed="true"] path { fill: currentColor; }

/* ===== The week ===== */

.week {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  --s: 0.22px;
}

.week-day {
  height: 88px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}

.week-day.today { background: var(--sheet); }

.week-day .caption {
  width: 62px;
  flex-shrink: 0;
  letter-spacing: 0.14em;
}

.week-day.today .caption { color: var(--ink); }

.week-day .numeral {
  width: 100px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-day .name {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.week-day .name span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Widgets ===== */

.widgets { background: var(--tile); }

.widget-row {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.widget-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget {
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--widget-edge), 0 1px 2px var(--widget-lift), 0 18px 40px -18px var(--widget-drop);
}

.widget-large {
  width: min(342px, 100%);
  height: 360px;
  padding: 20px 20px 18px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  --s: 0.68px;
}

.widget-large .day {
  flex-grow: 1;
  justify-content: center;
}

.widget-small-and-medium {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.widget-smalls {
  display: flex;
  gap: 22px;
}

.widget-small {
  width: min(160px, calc((100% - 22px) / 2));
  aspect-ratio: 1;
  padding: 13px 11px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  --k: 0.94;
  --s: calc(0.27px * var(--k));
  --sm: calc(0.5px * var(--k));
  --sw: calc(0.36px * var(--k));
}

.widget-small.bare {
  padding-bottom: 17px;
  --s: calc(0.33px * var(--k));
  --sw: calc(0.4px * var(--k));
}

.widget-small .numeral,
.widget-lock .numeral {
  flex-grow: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-medium {
  width: min(342px, 100%);
  height: 160px;
  padding: 15px 18px 15px 11px;
  display: flex;
  gap: 13px;
  --k: 0.94;
  --s: calc(0.42px * var(--k));
  --sm: calc(0.75px * var(--k));
  --sw: calc(0.52px * var(--k));
}

.widget-medium .numeral {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-medium .rule {
  width: 1px;
  flex-shrink: 0;
  background: var(--rule);
}

.widget-medium .lines {
  flex-grow: 1;
  min-width: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.widget-medium .lines > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.widget-medium .day-weekday { line-height: 1.1; }

.widget-medium .name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.widget-medium .name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lock-screen {
  height: 300px;
  padding: 32px 20px;
  border-radius: 30px;
  background: var(--lock);
  box-shadow: 0 0 0 1px var(--lock-edge);
  color: #f5f3ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lock-inline {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
  white-space: nowrap;
}

.lock-time {
  margin-top: 2px;
  font-size: 84px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lock-widgets {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.widget-lock {
  flex-shrink: 0;
  height: 76px;
  display: flex;
  align-items: center;
  background: rgba(245, 243, 238, 0.14);
  --s: 0.13px;
}

.widget-lock.circular {
  width: 72px;
  height: 72px;
  border-radius: 36px;
}

.widget-lock.rectangular {
  width: 190px;
  padding: 0 12px;
  border-radius: 14px;
  gap: 10px;
  --s: 0.15px;
}

.widget-lock.rectangular .numeral {
  width: 52px;
  flex-grow: 0;
  flex-shrink: 0;
}

.widget-lock .lines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.widget-lock .lines span:first-child {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.widget-lock .lines span:last-child {
  opacity: 0.66;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Features ===== */

.features {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
}

.feature {
  padding: 22px 0;
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--rule);
}

.feature-icon {
  width: 28px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.feature-icon.accent { color: var(--accent); }

.feature-icon.aa {
  font-family: var(--ff);
  font-weight: var(--ww);
  font-size: 22px;
  line-height: 1;
}

.feature div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature h3 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
}

.feature p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--soft-ink);
}

/* ===== Open type ===== */

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

.band .eyebrow,
.band p { color: var(--band-soft); }

.stats {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stat {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--band-rule);
}

.stat strong {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.stat p {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.5;
}

/* ===== Download ===== */

.download {
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.download img {
  width: 96px;
  height: 96px;
  /* The icon carries its own squircle and transparent corners. */
  filter: drop-shadow(0 12px 18px rgba(20, 17, 15, 0.22));
}

.download h2 {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: clamp(56px, 5.6vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}

.download p {
  max-width: 440px;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.download .pill {
  margin-top: 32px;
  align-self: stretch;
}

/* ===== Site footer ===== */

.site-footer {
  padding: 28px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer .brand {
  font-size: 19px;
}

.site-footer .brand img {
  width: 26px;
  height: 26px;
}

.site-footer .brand small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--soft-ink);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer nav a {
  padding: 14px 0;
  text-decoration: none;
}

/* ===== Desktop ===== */

@media (min-width: 900px) {
  :root { --gutter: clamp(40px, 5.56vw, 80px); }

  .eyebrow { font-size: 12px; }

  .site-header {
    height: 88px;
    padding: 0 var(--gutter);
  }

  .site-header > a {
    gap: 12px;
    font-size: 26px;
  }

  .site-header > a img {
    width: 36px;
    height: 36px;
  }

  .site-header nav { gap: 12px; }
  .site-header .pill { padding: 0 22px; }

  .hero {
    min-height: 840px;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }

  .hero-copy {
    align-items: flex-start;
    padding-bottom: 24px;
  }

  .hero h1 { margin-top: 28px; }

  .hero-copy p {
    margin-top: 32px;
    font-size: 19px;
  }

  .hero-copy .pill { margin-top: 44px; }

  .pill-large { padding: 0 30px; }

  .hero-leaf {
    margin-top: 0;
    padding: 72px 0;
    border-top: 0;
    --s: clamp(0.92px, 0.09vw, 1.3px);
  }

  .ribbon {
    right: 36px;
    width: 34px;
    height: 86px;
  }

  .hero-leaf .credit {
    margin-top: 56px;
    gap: 12px;
    font-size: 12px;
  }

  .hero-controls {
    margin-top: 28px;
    gap: 10px;
  }

  .hero-controls .caption {
    padding-left: 8px;
    font-size: 12px;
  }

  .hero-controls .round-text {
    padding: 0 18px;
    font-size: 12px;
  }

  .section {
    padding: 96px var(--gutter);
    gap: 56px;
  }

  .section-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }

  .section-head > div { gap: 20px; }

  .section-head h2 { line-height: 1.02; }

  .section-head p {
    margin-top: 0;
    font-size: 18px;
  }

  .week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule);
    --s: clamp(0.3px, 0.029vw, 0.42px);
  }

  .week-day {
    height: auto;
    padding: 24px 8px 26px;
    flex-direction: column;
    gap: 14px;
    border-bottom: 0;
  }

  .week-day + .week-day { border-left: 1px solid var(--rule); }

  .week-day .caption {
    width: auto;
    letter-spacing: 0.16em;
  }

  .week-day .numeral {
    width: auto;
    height: calc(357 * var(--s));
    align-self: stretch;
  }

  .week-day .name {
    align-items: center;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: normal;
  }

  .widgets {
    padding-block: 104px;
    gap: 64px;
  }

  .widget-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px 24px;
    align-items: flex-start;
  }

  .widget-group { gap: 16px; }

  .widget-large {
    width: 364px;
    height: 382px;
    --s: 0.72px;
  }

  .widget-small-and-medium {
    height: 382px;
    justify-content: space-between;
    gap: 0;
  }

  .widget-smalls { gap: 24px; }

  .widget-small {
    width: 170px;
    padding: 14px 12px 16px;
    --k: 1;
  }

  .widget-small.bare { padding-bottom: 18px; }

  .widget-medium {
    width: 364px;
    height: 170px;
    padding: 16px 20px 16px 12px;
    gap: 14px;
    --k: 1;
  }

  .widget-medium .numeral { width: 150px; }

  .widget-group.lock {
    flex: 1 1 340px;
  }

  .lock-screen {
    height: 382px;
    padding: 40px 32px;
    border-radius: 32px;
  }

  .lock-inline { font-size: 17px; }
  .lock-time { font-size: 104px; }

  .lock-widgets {
    margin-top: 28px;
    gap: 16px;
  }

  .widget-lock.rectangular { width: 196px; }

  .features-section { gap: 64px; }

  .features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
    border-bottom: 0;
  }

  .feature {
    padding: 24px 0 0;
    flex-direction: column;
    gap: 14px;
  }

  .feature-icon {
    width: auto;
    height: 28px;
  }

  .feature-icon.aa { font-size: 24px; }

  .feature div { gap: 14px; }

  .feature h3 { font-size: 32px; }

  .feature p {
    font-size: 16px;
    line-height: 1.55;
  }

  .band { gap: 64px; }

  .band .section-head {
    display: flex;
    align-items: stretch;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
  }

  .stat {
    padding-top: 24px;
    gap: 16px;
  }

  .stat strong { font-size: 120px; }

  .stat p { font-size: 16px; line-height: 1.55; }

  .download { padding: 120px var(--gutter); }

  .download img {
    width: 112px;
    height: 112px;
  }

  .download h2 { margin-top: 32px; }

  .download p {
    margin-top: 20px;
    font-size: 19px;
  }

  .download .pill {
    margin-top: 36px;
    align-self: center;
  }

  .site-footer {
    height: 112px;
    padding: 0 var(--gutter);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer .brand { gap: 12px; font-size: 20px; }

  .site-footer .brand img {
    width: 28px;
    height: 28px;
  }

  .site-footer .brand small { margin-left: 8px; }

  .site-footer nav { column-gap: 32px; }
}