/* Gadopis landing page. Palette and type follow docs/gadopis/IDENTYFIKACJA.md:
   clay, sage and cream, Figtree for text. Caprasimo (the brand display face)
   has no Polish letters except "ó", so it only sets text that fits it: the
   hero line, the step numbers and the F8 key. */

@font-face {
  font-family: "Figtree";
  src:
    url("assets/fonts/Figtree-Variable.woff2") format("woff2"),
    url("assets/fonts/Figtree-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Caprasimo";
  src:
    url("assets/fonts/Caprasimo-Regular.woff2") format("woff2"),
    url("assets/fonts/Caprasimo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f5ead8;
  --surface: #ebddc5;
  --raised: #f9f4ed;
  --line: #dcd3c4;
  --line-strong: #a19786;
  --text: #201e1d;
  --text-2: #645c50;
  --text-3: #8a7f6e;
  /* onplan's single accent, the arrow in the author card. */
  --onplan: #3358ff;
  --clay: #c67139;
  --clay-hover: #b2622d;
  --clay-press: #8c491a;
  --clay-text: #8c491a;
  --on-clay: #201e1d;
  --sage: #7a8a5e;
  --logo-bars: #f5ead8;
  --blob-peach: #fddfd0;
  --blob-sage: #dfebcb;
  --shadow: 0 22px 50px -28px rgba(32, 30, 29, 0.45);
  --radius-card: 28px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Caprasimo", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #201e1d;
    --surface: #2e2b25;
    --raised: #2a2723;
    --line: #474238;
    --line-strong: #82796a;
    --text: #f5ead8;
    --text-2: #c0b6a5;
    --text-3: #9b917f;
    --onplan: #7d93ff;
    --clay: #d67f48;
    --clay-hover: #f6a06b;
    --clay-press: #b2622d;
    --clay-text: #f6a06b;
    --sage: #aebf92;
    --logo-bars: #2e2b25;
    --blob-peach: rgba(214, 127, 72, 0.14);
    --blob-sage: rgba(174, 191, 146, 0.1);
    --shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* A faint paper grain over everything. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

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

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

kbd {
  font: 700 0.85em/1 var(--font);
  padding: 0.18em 0.5em 0.12em;
  border: 1.5px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 8px;
  background: var(--raised);
  color: var(--text);
}

code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface);
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--text);
}

.skip:focus {
  left: 12px;
}

/* Peach and sage circles, as on the brand cover. */
.blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
}

.blob-peach {
  width: 48vmax;
  height: 48vmax;
  right: -16vmax;
  top: -20vmax;
  background: var(--blob-peach);
}

.blob-sage {
  width: 60vmax;
  height: 60vmax;
  left: -26vmax;
  bottom: -34vmax;
  background: var(--blob-sage);
}

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

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 20px 6px;
}

.brand {
  display: block;
  border-radius: 12px;
}

.logo {
  display: block;
  width: 128px;
  height: auto;
}

.logo-circle {
  fill: var(--clay);
}

.logo-bars {
  fill: var(--logo-bars);
}

.logo-word {
  fill: var(--text);
}

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

.nav a:not(.btn) {
  display: none;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.nav a:not(.btn):hover {
  color: var(--text);
}

@media (min-width: 720px) {
  .nav a:not(.btn) {
    display: inline;
  }

  .logo {
    width: 142px;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 17px/1.1 var(--font);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  background: var(--clay);
  color: var(--on-clay);
  box-shadow: 0 12px 28px -14px var(--clay);
}

.btn-primary:hover {
  background: var(--clay-hover);
}

.btn-primary:active {
  background: var(--clay-press);
}

.btn-ghost {
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost:hover {
  background: var(--raised);
}

.btn-outline {
  color: var(--text);
  border-color: var(--clay);
}

.btn-outline:hover {
  background: color-mix(in srgb, var(--clay) 14%, transparent);
}

.btn-small {
  min-height: 42px;
  padding: 0 20px;
  font-size: 15px;
  background: var(--clay);
  color: var(--on-clay);
}

.btn-small:hover {
  background: var(--clay-hover);
}

.btn-note {
  padding-left: 10px;
  border-left: 1.5px solid currentColor;
  font-weight: 600;
  font-size: 0.82em;
  opacity: 0.75;
  white-space: nowrap;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.hero {
  display: grid;
  gap: 44px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 20px 64px;
}

@media (min-width: 980px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 88px;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sage) 20%, transparent);
  font-size: 14px;
  font-weight: 700;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 28%, transparent);
}

.display {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 12vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.display .accent {
  color: var(--clay-text);
}

/* What the program is, inside the h1 for search engines, set in the text
   face under the slogan. */
.display-sub {
  display: block;
  margin-top: 18px;
  font-family: var(--font);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 34ch;
  margin: 0 0 30px;
  font-size: clamp(18px, 2.3vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 520px) {
  .cta .btn {
    width: 100%;
  }
}

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
}

.counter {
  color: var(--text-2);
}

.counter strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35em;
  color: var(--clay-text);
}

/* ---------- live demo ---------- */

.demo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  margin: 0;
}

.note {
  width: 100%;
  max-width: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--raised);
  box-shadow: var(--shadow);
}

.note-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
}

.note-dots {
  display: inline-flex;
  gap: 6px;
}

.note-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.note-body {
  min-height: 9.6em;
  margin: 0;
  padding: 20px 22px 24px;
  font-size: 18px;
  line-height: 1.55;
  transition: opacity 0.4s ease;
}

.note-body.clearing {
  opacity: 0;
}

.note-text .pasted {
  border-radius: 4px;
  background: color-mix(in srgb, var(--clay) 24%, transparent);
  transition: background-color 1.6s ease;
}

.note-text .pasted.settled {
  background: transparent;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--clay);
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.demo-caption {
  max-width: 34ch;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

/* The recording pill, drawn to the brand spec: 256x50, #2E2B25, radius 25,
   a 34px status circle, content from x=52, 22px right margin. It is the
   same dark pill in both themes, as in the app. */
.pill {
  display: flex;
  align-items: center;
  width: 256px;
  height: 50px;
  padding: 0 22px 0 8px;
  border-radius: 25px;
  background: #2e2b25;
  color: #f5ead8;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease);
}

@media (min-width: 980px) {
  .pill {
    transform: scale(1.12);
  }
}

.pill[data-state="idle"] {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

.pill-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #474238;
  transition: background-color 0.2s ease;
}

.pill-circle i {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6a06b;
}

.pill[data-state="recording"] .pill-circle {
  background: #d67f48;
}

.pill[data-state="recording"] .pill-circle i:first-child {
  display: block;
  width: 11px;
  height: 11px;
  background: #f5ead8;
  animation: pulse 1.6s ease-in-out infinite;
}

.pill[data-state="working"] .pill-circle i {
  display: block;
  animation: dots 1s ease-in-out infinite;
}

.pill[data-state="working"] .pill-circle i:nth-child(2) {
  animation-delay: 0.15s;
}

.pill[data-state="working"] .pill-circle i:nth-child(3) {
  animation-delay: 0.3s;
}

.pill[data-state="done"] .pill-circle {
  background: #aebf92;
}

.pill[data-state="done"] .pill-circle::after {
  content: "";
  width: 13px;
  height: 7px;
  margin-top: -3px;
  border-left: 2.4px solid #2e2b25;
  border-bottom: 2.4px solid #2e2b25;
  transform: rotate(-45deg);
}

@keyframes pulse {
  50% {
    transform: scale(0.72);
  }
}

@keyframes dots {
  0%,
  80%,
  100% {
    opacity: 0.4;
  }
  40% {
    opacity: 1;
  }
}

.pill-mid {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-left: 10px;
}

.pill-bars {
  display: none;
  align-items: center;
  gap: 5px;
  height: 22px;
}

.pill-bars i {
  width: 4px;
  height: var(--h, 2px);
  border-radius: 2px;
  background: #f6a06b;
  transition: height 0.12s linear;
}

.pill[data-state="recording"] .pill-bars {
  display: flex;
}

.pill-label {
  display: none;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pill[data-state="working"] .pill-label,
.pill[data-state="done"] .pill-label {
  display: block;
}

.pill-side {
  flex: none;
  padding-left: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #c0b6a5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pill[data-state="recording"] .pill-side {
  font-weight: 600;
  color: #f5ead8;
}

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

main > section:not(.hero) {
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 20px;
}

.section-title {
  margin: 0 0 28px;
  font-size: clamp(30px, 5.6vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.section-title .accent {
  color: var(--clay-text);
}

.section-lead {
  margin: -14px 0 28px;
  color: var(--text-2);
}

.feature-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .feature-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  padding: 26px 24px 28px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.feature h3 {
  margin: 18px 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  font-size: 16px;
  color: var(--text-2);
}

.feature-icon {
  display: block;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 15px;
  background: var(--clay);
  fill: none;
  stroke: var(--on-clay);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-key {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 2px 10px 0;
  border-radius: 15px;
  border-bottom: 4px solid var(--clay-press);
  background: var(--clay);
  color: var(--on-clay);
  font-family: var(--display);
  font-size: 21px;
}

.step-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 880px) {
  .step-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  position: relative;
  padding: 24px 24px 26px 86px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--raised);
}

.step-num {
  position: absolute;
  left: 24px;
  top: 16px;
  font-family: var(--display);
  font-size: 48px;
  line-height: 1;
  color: var(--clay);
}

.step h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
}

.step p {
  margin: 0;
  font-size: 16px;
  color: var(--text-2);
}

/* ---------- the app window and the F8 animation ---------- */

.showcase {
  display: grid;
  gap: 28px;
}

.showcase-copy .section-title {
  margin-bottom: 14px;
}

.showcase-copy p {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(17px, 2vw, 19px);
  color: var(--text-2);
}

.showcase-shot {
  max-width: 720px;
  margin: 0;
}

.showcase-shot img {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* A loop recorded from the app: dark in both themes, like the recording pill.
   app.js plays it only while it is on screen. The ring shows its edge on the
   dark page, where the video and the background are nearly the same color. */
.film {
  position: relative;
  justify-self: center;
  width: min(100%, 82vh * 1.6);
  width: min(100%, 82svh * 1.6);
  margin: 0;
  border-radius: var(--radius-card);
  background: #1f1d1b;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent),
    var(--shadow);
}

.film video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.film-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(245, 234, 216, 0.16);
  border-radius: 50%;
  background: rgba(32, 30, 29, 0.66);
  color: #f5ead8;
  cursor: pointer;
  opacity: 0.75;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.film-toggle[hidden] {
  display: none;
}

.film-toggle:hover,
.film-toggle:focus-visible {
  opacity: 1;
  background: rgba(32, 30, 29, 0.86);
}

.film-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.film-play path {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.film-toggle[data-state="playing"] .film-play,
.film-toggle[data-state="paused"] .film-pause {
  display: none;
}

/* Phones get the middle of the frame, where the text field and F8 are. */
@media (max-width: 520px) {
  .film video {
    aspect-ratio: 1;
    object-fit: cover;
  }
}

@media (min-width: 980px) {
  .showcase {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 56px;
  }

  .film {
    grid-column: 1 / -1;
  }
}

/* ---------- download ---------- */

.download-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .download-grid {
    grid-template-columns: 1.25fr 1fr 1fr;
  }
}

.dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--raised);
}

.dl-main {
  border-color: var(--clay);
  background: var(--surface);
}

.dl h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dl p {
  flex: 1;
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text-2);
}

.dl .btn {
  align-self: stretch;
}

/* Size and margin come from .dl p; flex: none keeps the pill from growing. */
.dl .dl-tag {
  flex: none;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--clay);
  /* White, not the dark on-clay: it reads clearly better on clay. */
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notes {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .notes {
    grid-template-columns: 1fr 1fr;
  }
}

.note-card {
  padding: 24px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-card);
}

.note-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.note-card p,
.note-card ul {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
}

.note-card ul {
  padding-left: 20px;
}

.note-card li {
  margin: 4px 0;
}

.beta-card {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(26px, 5vw, 44px);
  border-radius: 32px;
  background: color-mix(in srgb, var(--sage) 22%, var(--bg));
}

.beta-card h2 {
  margin: 0;
  font-size: clamp(25px, 4.6vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.beta-card p {
  max-width: 60ch;
  margin: 0 0 4px;
  color: var(--text-2);
}

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

.faq details {
  border-bottom: 1.5px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--clay);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 70ch;
  margin: 0 0 20px;
  color: var(--text-2);
}

/* ---------- from the author ---------- */

/* The author's other project, after the FAQ. Gadopis tokens throughout:
   onplan shows only as its logo (in the text color) and the arrow's accent.
   Clay stays for downloading Gadopis. Static on purpose. */
main > section.author {
  padding-top: 0;
  padding-bottom: 24px;
}

.author-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "title"
    "text"
    "cta";
  row-gap: 6px;
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--raised);
  transition: border-color 0.15s ease;
}

.author-card:hover {
  border-color: var(--line-strong);
}

.author-head {
  grid-area: head;
  display: grid;
  justify-items: start;
  gap: 16px;
}

.author-logo {
  display: block;
  width: auto;
  height: 24px;
  color: var(--text);
}

.author-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.author-title {
  grid-area: title;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.author-text {
  grid-area: text;
  max-width: 64ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}

/* The signature: its own line under the note, set off to the right. */
.author-sign {
  display: block;
  margin-top: 14px;
  text-align: right;
  font-style: italic;
  white-space: nowrap;
  color: var(--text);
}

.btn.author-cta {
  grid-area: cta;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 20px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  color: var(--text);
}

.btn.author-cta:hover {
  background: var(--surface);
}

.author-arrow {
  width: 16px;
  height: 16px;
  color: var(--onplan);
  transition: transform 0.15s ease;
}

.author-cta:hover .author-arrow {
  transform: translate(2px, -2px);
}

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

@media (min-width: 521px) {
  .author-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head cta"
      "title cta"
      "text cta";
    column-gap: 24px;
    align-items: end;
  }

  .author-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
  }

  .author-logo {
    height: 26px;
  }

  .btn.author-cta {
    margin-top: 0;
    white-space: nowrap;
  }
}

@media (min-width: 980px) {
  .author-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo label cta"
      "logo title cta"
      "logo text cta";
    column-gap: 32px;
    row-gap: 4px;
    align-items: center;
    padding: 24px 24px 24px 32px;
  }

  /* The logo and label become cells of the card's grid. */
  .author-head {
    display: contents;
  }

  .author-logo {
    grid-area: logo;
    height: 28px;
  }

  .author-label {
    grid-area: label;
  }

  .author-title {
    font-size: 20px;
  }
}

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

.foot {
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px 20px max(40px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

.foot-mark {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
}

.foot p {
  margin: 4px 0;
}

.foot a {
  color: inherit;
}

.foot-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- consent for statistics ---------- */

.consent {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  z-index: 50;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--raised);
  box-shadow: var(--shadow);
}

.consent[hidden] {
  display: none;
}

.consent-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
}

.consent-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

.consent-text a {
  color: var(--clay-text);
}

/* Both answers look the same: refusing is as easy as agreeing. */
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent-actions .btn {
  flex: 1 1 180px;
  min-height: 46px;
  font-size: 16px;
}

/* ---------- other pages: privacy policy and "not found" ---------- */

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.page h1 {
  margin: 8px 0 18px;
}

.page h2 {
  margin: 34px 0 10px;
  font-size: 21px;
}

.page p,
.page li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.page a {
  color: var(--clay-text);
}

.page-note {
  font-size: 15px;
  color: var(--text-3);
}

.lost {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 100svh;
  align-content: center;
  padding: 24px 20px;
  text-align: center;
}

.lost p {
  margin: 0 0 16px;
  color: var(--text-2);
}

/* ---------- entrance ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.75s var(--ease) forwards;
}

.hero-copy .reveal:nth-child(2) {
  animation-delay: 0.06s;
}

/* The heading is the largest thing on first load (Google's LCP), so it is
   visible from the first frame and only slides in. */
.display.reveal {
  opacity: 1;
}

.hero-copy .reveal:nth-child(3) {
  animation-delay: 0.12s;
}

.hero-copy .reveal:nth-child(4) {
  animation-delay: 0.18s;
}

.hero-copy .reveal:nth-child(5) {
  animation-delay: 0.24s;
}

.demo.reveal {
  animation-delay: 0.3s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

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

  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .caret,
  .pill-circle i,
  .pill-circle i:first-child {
    animation: none !important;
  }
}