/*
 * Honest Robin site. The palette is Time's (frontend/src/design/tokens.css): an accountant's
 * columnar pad, with sage paper, green rules, red totals and dark ink. The robin's orange is kept
 * for live moments only, never for text.
 */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  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;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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;
}

:root {
  color-scheme: light;

  --paper: #f3f5f0;
  --surface: #ffffff;
  --surface-sunk: #eaeee7;
  --ink: #1c2b25;
  --ink-soft: #46554e;
  --ink-faint: #606d67;
  --rule: #c5d6ca;
  --rule-strong: #7fa08c;
  --rule-ui: #6b8f7a;
  --action: #1f5c45;
  --action-hover: #17493a;
  --action-ink: #f3f5f0;
  --action-tint: #dcebe2;
  --signal: #c8322b;
  --signal-tint: #f7e1df;
  --warn: #8a5a12;
  --warn-tint: #f6ecd9;
  --robin: #f26a2e;
  --signal-ink: #ffffff;
  --halo: none;
  --focus: #2f6fd6;
  --shadow: 0 1px 2px rgb(28 43 37 / 0.06), 0 8px 24px rgb(28 43 37 / 0.08);

  --font: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --condensed: 72%;
  --semi: 88%;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 10px;
  --radius-lg: 18px;
  --duration: 160ms;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121a16;
    --surface: #19231e;
    --surface-sunk: #0e1512;
    --ink: #e4ebe6;
    --ink-soft: #b3c1b9;
    --ink-faint: #8d9c94;
    --rule: #2a3a32;
    --rule-strong: #4d6a5a;
    --rule-ui: #5f7f6d;
    --action: #86cfa6;
    --action-hover: #a3dcbb;
    --action-ink: #0e1a14;
    --action-tint: #1f3329;
    --signal: #ff8a80;
    --signal-tint: #3a1f1d;
    --warn: #e7b866;
    --warn-tint: #352a17;
    --focus: #7fb0ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    --signal-ink: #2a0f0d;
    --halo: drop-shadow(0 0 1.2px rgb(228 235 230 / 0.75)) drop-shadow(0 0 10px rgb(228 235 230 / 0.08));
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121a16;
  --surface: #19231e;
  --surface-sunk: #0e1512;
  --ink: #e4ebe6;
  --ink-soft: #b3c1b9;
  --ink-faint: #8d9c94;
  --rule: #2a3a32;
  --rule-strong: #4d6a5a;
  --rule-ui: #5f7f6d;
  --action: #86cfa6;
  --action-hover: #a3dcbb;
  --action-ink: #0e1a14;
  --action-tint: #1f3329;
  --signal: #ff8a80;
  --signal-tint: #3a1f1d;
  --warn: #e7b866;
  --warn-tint: #352a17;
  --focus: #7fb0ff;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
  --signal-ink: #2a0f0d;
  --halo: drop-shadow(0 0 1.2px rgb(228 235 230 / 0.75)) drop-shadow(0 0 10px rgb(228 235 230 / 0.08));
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* The robin is drawn with a near-black outline; on dark paper it needs a little light around it. */
.mascot {
  filter: var(--halo);
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
/* Smooth only after the reader follows a link within this page (site.js sets the class). A link
   from another page should arrive at its place, not travel there through the whole page. */
html.moving {
  scroll-behavior: smooth;
}
/* A place a link jumps to keeps a little air above it. */
[id] {
  scroll-margin-top: 20px;
}
/* The footer stays at the bottom of a tall window, also on a short page. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--action);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--action-hover);
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
h1,
h2,
h3,
h4 {
  font-stretch: var(--condensed);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.98;
}
h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
h3 {
  font-size: 1.6rem;
  line-height: 1.1;
}
h4 {
  font-size: 1.2rem;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
li,
dd,
dt,
figcaption {
  text-wrap: pretty;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus {
  top: 8px;
}
/* Words that must not break at their hyphen: "e-invoicing", "Factur-X". */
.nowrap {
  white-space: nowrap;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-stretch: var(--condensed);
  font-size: 1.45rem;
  letter-spacing: 0;
}
.wordmark:hover {
  color: var(--ink);
}
.wordmark img {
  width: 34px;
  height: 34px;
  transition: transform 300ms var(--spring);
}
.wordmark:hover img {
  transform: rotate(-8deg) translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .wordmark img {
    transition: none;
  }
  .wordmark:hover img {
    transform: none;
  }
}
.site-nav {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  font-size: 0.98rem;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 0;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}

/* ---------- buttons, pills ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1.5px solid var(--action);
  background: var(--action);
  color: var(--action-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration) ease, background var(--duration) ease,
    box-shadow var(--duration) ease;
}
.button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.button:active {
  transform: translateY(1px);
}
.button.secondary {
  background: transparent;
  color: var(--action);
}
.button.secondary:hover {
  background: var(--action-tint);
  color: var(--action);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--action-tint);
  color: var(--action);
  white-space: nowrap;
}
.pill.warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.pill.quiet {
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.eyebrow {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  text-wrap: balance;
}

h2.eyebrow {
  font-stretch: 100%;
  line-height: inherit;
}

/* ---------- sections ---------- */

section {
  padding: clamp(56px, 7vw, 96px) 0;
}
section + section {
  border-top: 1px solid var(--rule);
}
.lead {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40rem;
}
.lead.tight {
  margin-bottom: 24px;
}
.mirror {
  transform: scaleX(-1);
}
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.ruled {
  /* the columnar pad */
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    var(--rule) calc(2rem - 1px),
    var(--rule) 2rem
  );
}

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

/* The headline is big, but the lead and both buttons still fit on a 1366 × 768 laptop screen. */
.hero {
  padding-top: clamp(32px, 5vw, 64px);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 861px) {
  .try {
    margin-top: 0;
  }
}
@media (min-width: 861px) and (max-height: 720px) {
  .hero {
    padding-top: 28px;
  }
  .hero h1 {
    font-size: 3.5rem;
  }
}
.hero h1 .then {
  display: block;
  color: var(--action);
}
.robin-stage {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
}
.robin-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* For the focus ring: round enough to look friendly, square enough to hold the tail. */
  border-radius: 24px;
}
/* The robin: inline SVG (tools/robin_svg.py), so its wings and eyes move. Pivots are in the
   drawing's own units (viewBox 0 0 400 440). Every move changes only transforms and opacity,
   and each pose starts and ends exactly where the robin rests, so nothing ever jumps. */
.robin-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.robin-svg .lean,
.robin-svg .bird,
.robin-svg .shadow,
.robin-svg .wing,
.robin-svg .wing > g,
.robin-svg .eyes,
.robin-svg .blink {
  transform-box: view-box;
}
/* The hover lean has a group of its own, so it eases in and out under any pose. */
.robin-svg .lean,
.robin-svg .bird {
  transform-origin: 200px 410px;
}
.robin-svg .lean {
  transition: transform 380ms var(--spring);
}
.robin-svg .shadow {
  transform-origin: 200px 414px;
}
.robin-svg .wing-l,
.robin-svg .wing-l > g {
  transform-origin: 100px 220px;
}
.robin-svg .wing-r,
.robin-svg .wing-r > g {
  transform-origin: 300px 216px;
}
.robin-svg .eyes,
.robin-svg .blink {
  transform-origin: 200px 200px;
}
.robin-svg .blink {
  animation: robin-idle-blink 6.5s infinite;
}
/* At rest: one wing raised, the other on the heart. The resting wings wait, unseen, for a flap. */
.robin-svg .w-down {
  opacity: 0;
}
.robin-button:hover .lean {
  transform: translateY(-6px) rotate(-3deg);
}

/* wave: the raised wing says hello */
.robin-svg.wave .wing-l {
  animation: robin-wave 1s ease-in-out;
}
/* flap: both wings come down (the raised one swings out and down, the other leaves the heart),
   flap twice with a little lift, and go back up the same way. 0-20% down, 80-100% up. */
.robin-svg.flap .w-up {
  --lower: -160deg;
}
.robin-svg.flap .w-heart {
  --lower: -57deg;
}
.robin-svg.flap .wing-l .w-down {
  --raise: 160deg;
}
.robin-svg.flap .wing-r .w-down {
  --raise: 57deg;
}
.robin-svg.flap .w-up,
.robin-svg.flap .w-heart {
  animation: robin-lower 1.3s ease-in-out, robin-hand-off 1.3s linear;
}
.robin-svg.flap .w-down {
  animation: robin-settle 1.3s ease-in-out, robin-take-over 1.3s linear;
}
.robin-svg.flap .wing-l {
  animation: robin-flap 1.3s ease-in-out;
}
.robin-svg.flap .wing-r {
  animation: robin-flap 1.3s ease-in-out;
  --flap: -34deg;
}
.robin-svg.flap .bird {
  animation: robin-lift 1.3s ease-in-out;
}
/* look: a head tilt and a slow blink */
.robin-svg.look .bird {
  animation: robin-look 0.9s ease-in-out;
}
.robin-svg.look .eyes {
  animation: robin-blink 0.3s 0.35s ease-in-out;
}
/* hop: up and down, the shadow shrinking underneath */
.robin-svg.hop .bird {
  animation: robin-hop 0.55s var(--spring);
}
.robin-svg.hop .shadow {
  animation: robin-shadow 0.55s ease-in-out;
}

@keyframes robin-wave {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-18deg); }
  40%, 80% { transform: rotate(9deg); }
}
/* The posed wing turns away from where it rests... */
@keyframes robin-lower {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: rotate(var(--lower)); }
}
/* ...while the resting wing turns in step from the same place, and they swap halfway. The wing
   on top (the resting one) fades in before the one beneath fades out, and on the way back the
   one beneath returns first, so the wing is never see-through. */
@keyframes robin-settle {
  0%, 100% { transform: rotate(var(--raise)); }
  20%, 80% { transform: rotate(0); }
}
@keyframes robin-hand-off {
  0%, 11%, 89%, 100% { opacity: 1; }
  14%, 86% { opacity: 0; }
}
@keyframes robin-take-over {
  0%, 8%, 92%, 100% { opacity: 0; }
  11%, 89% { opacity: 1; }
}
@keyframes robin-flap {
  0%, 20%, 50%, 80%, 100% { transform: rotate(0); }
  35%, 65% { transform: rotate(var(--flap, 34deg)); }
}
@keyframes robin-lift {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  35%, 65% { transform: translateY(-10px); }
}
@keyframes robin-look {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(-7deg); }
}
@keyframes robin-blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}
@keyframes robin-idle-blink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}
@keyframes robin-hop {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(2px) scale(1.04, 0.95); }
  55% { transform: translateY(-24px) rotate(-4deg) scale(0.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes robin-shadow {
  55% { transform: scale(0.75); opacity: 0.6; }
}
/* A new line in the bubble eases in rather than swapping in place. */
.bubble.say {
  transform-origin: left bottom;
  animation: bubble-say 260ms var(--spring);
}
@keyframes bubble-say {
  from { transform: scale(0.94); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .robin-svg *,
  .robin-button:hover .lean,
  .bubble.say {
    animation: none !important;
    transform: none !important;
  }
}
.bubble {
  position: absolute;
  margin: 0;
  bottom: calc(100% - 4px);
  right: -8px;
  max-width: 13.5rem;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 0.98rem;
  line-height: 1.3;
  box-shadow: var(--shadow);
}
.robin-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 4px;
}
/* Nobody clicks on a touch screen. */
.by-touch {
  display: none;
}
@media (hover: none) {
  .by-mouse {
    display: none;
  }
  .by-touch {
    display: inline;
  }
}

/* ---------- the drift ledger ---------- */

.drift {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.drift-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.drift-row + .drift-row {
  border-top: 1px solid var(--rule);
}
.drift-row > * {
  padding: 18px 24px;
  margin: 0;
}
.drift-row > :first-child {
  border-right: 1px solid var(--rule);
}
.drift-head {
  background: var(--surface-sunk);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.drift-head > * {
  padding-top: 12px;
  padding-bottom: 12px;
}
.usually {
  color: var(--ink-soft);
}
.usually s {
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
}
.instead strong {
  display: block;
  font-stretch: var(--semi);
}
.instead .art {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- values ---------- */

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 24px;
}
.value {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.value > :last-child {
  margin-bottom: 0;
}
.value h3 {
  font-size: clamp(2rem, 4vw, 2.6rem);
}
.value ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.value li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.value li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--rule-strong);
}
.value li strong {
  color: var(--ink);
}

/* ---------- the Code in short, under the table ---------- */

.code-short {
  margin-top: clamp(40px, 6vw, 64px);
  max-width: 46rem;
}
.code-short h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}
.also-label {
  margin: 0 0 10px;
  font-weight: 650;
}
.also {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.also a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rule-ui);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  font-size: 0.95rem;
}
.also a:hover {
  border-color: var(--rule-strong);
}

/* ---------- the code: how a promise is written ---------- */

.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 40px;
}
.three > div {
  padding: 22px 24px;
}
.three > div + div {
  border-left: 1px solid var(--rule);
}
.three h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.three p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.three .num {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.articles li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}
.articles h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.articles p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.status-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--warn-tint);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 32px;
  max-width: 46rem;
}
.status-note p {
  margin: 0;
}
/* The Code page's note has no label and more than one paragraph. */
.prose .status-note {
  display: block;
}
.prose .status-note p + p {
  margin-top: 12px;
}
.status-note .pill {
  background: var(--surface);
  color: var(--warn);
  flex: none;
  margin-top: 2px;
}

/* ---------- products ---------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow);
}
.product + .product {
  margin-top: 24px;
}
.product-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.product-title img {
  width: 72px;
  height: auto;
  flex: none;
}
.product-title h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
}
.product-title h3 small {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 100%;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.features {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.features li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.features li:last-child {
  border-bottom: 0;
}
/* The card's head and its screenshots run the full width; the list and the timer share the row below. */
.product-head,
.shots {
  grid-column: 1 / -1;
}
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.shots .shot:first-child {
  grid-column: 1 / -1;
}
/* The two small ones are cut to the same shape, from the top. Opened, they show whole. */
.shots .shot:not(:first-child) img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}
.shot {
  margin: 0;
}
.shot a {
  display: block;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.try + p {
  margin-top: 24px;
}
/* A screenshot at full size, over the page (site.js). */
.zoom {
  /* As wide as the window allows, up to the picture's own width. A tall picture scrolls. */
  width: min(96vw, 1920px);
  max-width: 96vw;
  max-height: 96vh;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  cursor: zoom-out;
}
.zoom[open] {
  display: flex;
  flex-direction: column;
}
html:has(.zoom[open]) {
  overflow: hidden;
}
.zoom::backdrop {
  background: rgb(14 21 18 / 0.78);
}
.zoom img {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
}
/* The button sits above the picture, and stays in reach while a tall picture scrolls. */
.zoom .button {
  position: sticky;
  top: 8px;
  z-index: 1;
  flex: none;
  align-self: flex-end;
  margin: 8px;
  padding: 8px 16px;
  min-height: 0;
}
/* What the features above haven't met yet: said once, in the same size as the features. */
.features-note {
  margin: 16px 0 0;
}
.tell-me {
  margin: 16px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.shot img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow);
}
.shot figcaption {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 8px;
}
/* the one-step timer */
.try {
  margin-top: 24px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  background: var(--paper);
}
.try label {
  display: block;
  font-weight: 650;
  margin-bottom: 8px;
}
.try-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.try input {
  flex: 1 1 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink-faint);
  background: var(--surface);
  color: var(--ink);
}
.try input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}
.try input:focus-visible {
  outline-offset: 1px;
}
.clock {
  margin-right: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-stretch: var(--semi);
  font-size: 1.5rem;
  min-width: 6.2ch;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clock .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  opacity: 0.35;
}
.try.running .dot {
  background: var(--robin);
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
}
.try.running .button {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
@keyframes pulse {
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .try.running .dot {
    animation: none;
  }
}
.try-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
  min-height: 4.8em;
  overflow-wrap: anywhere;
}

/* ---------- how it's made ---------- */

.made {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.made-robin {
  width: min(100%, 260px);
}
/* Big numbers. Not on the page today: they are for outcomes (hours tracked, teams using Time),
   and those are still zero. */
.tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  margin: 0 0 12px;
}
/* When the numbers were counted. */
.tally-note {
  margin: 0 0 40px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.tally div {
  padding: 16px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.tally dt {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.tally dd {
  margin: 0 0 4px;
  font-weight: 800;
  font-stretch: var(--condensed);
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tally-wrap {
  display: flex;
  flex-direction: column;
}
.tally-wrap dd {
  order: -1;
}
.wrongs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrongs li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.wrongs li:first-child {
  border-top: 1px solid var(--rule);
}
.wrongs .when {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding-top: 4px;
  white-space: nowrap;
}
.wrongs p {
  margin: 0;
}
.wrongs .fix {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ---------- what we can't promise ---------- */

.cant {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cant li {
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
}
.cant li:last-child {
  border-bottom: 0;
}
.cant strong {
  display: block;
  font-size: 1.2rem;
}
.cant span {
  color: var(--ink-soft);
}

/* ---------- testimonials (none) ---------- */

.empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  max-width: 52rem;
}
.empty img {
  width: clamp(140px, 22vw, 220px);
}
.empty blockquote {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 1.1;
}
.empty blockquote::before {
  content: "“";
  color: var(--rule-strong);
}
.empty blockquote::after {
  content: "”";
  color: var(--rule-strong);
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
  padding: 48px 0 40px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h2 {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.footer-grid li a,
.footer-grid p a {
  display: inline-block;
  padding: 5px 0;
}
.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-grid li {
  margin-bottom: 6px;
}
.fine {
  font-size: 0.84rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin: 0;
}
/* Both pages are long, and the menu stays at the top. */
.to-top {
  margin: 16px 0 0;
  font-size: 0.9rem;
}

/* ---------- the code page ---------- */

.doc-hero {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: 40px;
}
.doc-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
}
.doc-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.doc-hero img {
  width: 180px;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.doc-section {
  padding-top: 0;
  border-top: 0 !important;
}
.doc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.toc {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  font-size: 0.93rem;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover {
  border-left-color: var(--action);
  color: var(--ink);
}
.toc .toc-title {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.prose {
  max-width: 44rem;
}
.prose h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-top: 64px;
  scroll-margin-top: 20px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h2 .n {
  color: var(--action);
}
.prose ul {
  padding-left: 1.2em;
}
.prose li {
  margin-bottom: 8px;
}
.prose li::marker {
  color: var(--rule-strong);
}
.held {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 24px 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.held > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 18px;
  font-size: 0.97rem;
}
.held > div + div {
  border-top: 1px solid var(--rule);
}
.held dt {
  font-weight: 750;
  font-stretch: var(--semi);
  color: var(--ink);
}
.held dd {
  margin: 0;
  color: var(--ink-soft);
}
.open {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--warn-tint);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 0.96rem;
}
.open::before {
  content: "Not decided yet";
  flex: none;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--surface);
  border-radius: 999px;
  padding: 3px 9px;
  margin-top: 2px;
}
.limit {
  border-left: 3px solid var(--signal);
  padding: 4px 0 4px 16px;
  margin: 20px 0;
  color: var(--ink-soft);
}

/* ---------- small screens ---------- */

@media (max-width: 980px) {
  .values {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Between a phone and a laptop: boxes run the full width instead of stopping just short of it. */
@media (max-width: 900px) {
  .status-note,
  .cant,
  .code-short,
  .prose {
    max-width: none;
  }
}
@media (max-width: 860px) {
  .hero .wrap,
  .made,
  .product,
  .doc,
  .doc-hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .robin-stage {
    width: min(64%, 240px);
    margin-top: 88px;
  }
  /* The space above is for the speech bubble. The error page's robin has none. */
  .robin-stage:not(:has(.bubble)) {
    margin-top: 0;
  }
  .three {
    grid-template-columns: minmax(0, 1fr);
  }
  .three > div + div {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .toc {
    position: static;
  }
  .toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .toc a {
    border: 1px solid var(--rule-ui);
    border-radius: 999px;
    padding: 8px 12px;
  }
  /* A robin alone on a row, with a hole beside it, pushed the page's title down: it steps aside. */
  .doc-hero img,
  .made-robin {
    display: none;
  }
}
/* A tablet keeps the hero's robin beside the headline instead of alone underneath it. */
@media (min-width: 641px) and (max-width: 860px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  /* Side by side the two buttons fill the column; stacked, they are equally wide. */
  .hero .actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }
  .robin-stage {
    width: 220px;
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .drift-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .drift-row > :first-child {
    border-right: 0;
    padding-bottom: 4px;
  }
  .drift-row > :last-child {
    padding-top: 4px;
  }
  .drift-head {
    display: none;
  }
  .held > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .empty {
    grid-template-columns: minmax(0, 1fr);
  }
  .empty img {
    width: 140px;
  }
  .bubble {
    right: -4px;
    bottom: calc(100% - 4px);
    font-size: 0.9rem;
  }
  .wrongs li {
    grid-template-columns: minmax(0, 1fr);
  }
  .wrongs .fix {
    grid-column: 1;
  }
  /* The four menu links fit on one row on a phone, instead of leaving "GitHub" alone on a second. */
  .site-nav {
    gap: 2px 14px;
    font-size: 0.9rem;
  }
  /* Tall enough for a thumb. */
  .site-nav a {
    padding: 11px 0;
  }
  .site-header .wrap {
    padding-top: 10px;
    row-gap: 0;
  }
  /* The two small screenshots stack, at a size you can make something out. */
  .shots {
    grid-template-columns: minmax(0, 1fr);
  }
  .actions .button {
    width: 100%;
    justify-content: center;
  }
  .try-note {
    min-height: 8em;
  }
  /* The "Draft" label sits above its text, so the text keeps the full width. */
  .status-note {
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .site-nav {
    gap: 2px 10px;
    font-size: 0.85rem;
  }
  /* A small phone still shows the first button on its first screen. */
  .hero h1 {
    font-size: 2.25rem;
  }
  .try-note {
    min-height: 9.6em;
  }
  /* A long label wraps inside its card instead of poking through the edge. */
  .pill {
    white-space: normal;
    border-radius: 14px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .robin-hint,
  .try,
  .toc {
    display: none;
  }
  body {
    background: #fff;
  }
}
@media (max-width: 351px) {
  .site-nav {
    gap: 2px 8px;
    font-size: 0.75rem;
  }
}