/* podwobble.com
   Built from the Claude Design lander handoff: near-black ground, warm greys,
   one sky-blue accent, Schibsted Grotesk with IBM Plex Mono for labels.
   Everything is served from this site; nothing loads from anywhere else. */

/* Schibsted Grotesk, Copyright 2023 The Schibsted-Grotesk Project Authors.
   IBM Plex Mono, Copyright 2017 IBM Corp.
   Both SIL Open Font License 1.1, see /assets/OFL-schibsted-grotesk.txt
   and /assets/OFL-ibm-plex-mono.txt */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/schibsted-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0d0d0c;
  --bg-band: #0b0b0a;
  --surface: #111110;
  --surface-deep: #0b0c0d;
  --border: #262523;
  --border-section: #201f1d;
  --border-rule: #221f1d;
  --border-control: #33312e;
  --border-control-hover: #55524d;
  --ink: #f4f2ef;
  --ink-2: #d6d2cb;
  --ink-muted: #b4b0a8;
  --ink-dim: #a09c95;
  --ink-dimmer: #8e8a83;
  /* the handoff's #6f6c66 is 3.6:1 on the ground; this clears 4.5:1 */
  --ink-faint: #827e77;
  --sep: #46443f;
  --accent: #56c2f2;
  --accent-hover: #8ad6f8;
  --accent-tint: rgba(86, 194, 242, 0.07);
  --on-accent: #0d0d0c;
  --success-bg: #14251c;
  --success-border: #2c4a37;
  --success-ink: #cdeedb;
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1180px;
  --gutter: 24px;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* The hero shot bleeds past the right edge; clip it rather than scroll. */
  overflow-x: clip;
}

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

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p,
figure {
  margin: 0;
}
p {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
a:hover {
  color: var(--accent-hover);
}

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

::selection {
  background: rgba(86, 194, 242, 0.3);
}

strong,
b {
  font-weight: 600;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
}

input,
button {
  font: inherit;
}

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 30;
  padding: 8px 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 8px;
}
.skip:focus {
  left: var(--gutter);
}

.eyebrow,
.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
}

.sep {
  color: var(--sep);
}

/* ---------- header and footer ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 13, 12, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-section);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--ink);
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 22.5%;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}
.site-nav a {
  color: var(--ink-dim);
}
.site-nav a:hover {
  color: var(--ink);
}
.site-nav .nav-cta {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
}
.site-nav .nav-cta:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
}
@media (max-width: 700px) {
  .site-nav a:not(.nav-cta) {
    display: none;
  }
}

.site-foot {
  border-top: 1px solid var(--border-section);
  background: var(--bg-band);
  font-size: 14px;
  color: var(--ink-dimmer);
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 16px;
  padding-block: 32px 40px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.foot-links a {
  color: var(--ink-dim);
}
.foot-links a:hover,
.foot-links a[aria-current="page"] {
  color: var(--ink);
}
.site-foot .fine {
  flex-basis: 100%;
  max-width: 60em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}

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

/* The Mac App Store and Windows downloads, in the hero and in Get Podwobble.
   Each has its secondary route (direct .dmg, Windows install notes)
   underneath, left-aligned with the button. */
.dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.dl-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.btn-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-control-hover);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.1;
  white-space: nowrap;
}
.btn-badge:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}
.btn-badge .os-icon {
  width: 26px;
  height: 26px;
  flex: none;
  fill: currentColor;
  margin-top: -3px;
}
.badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.badge-text small {
  font-size: 13px;
  font-weight: 500;
}
.badge-text span {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dl-link {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 500;
}

/* ---------- home: hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px;
  align-items: center;
  padding-block: 72px 40px;
}
.hero .dl-row {
  margin-top: 8px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.hero h1 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.lede {
  max-width: 30em;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-muted);
}
/* The capture is cropped to the window edge with its own rounded corners and
   a see-through sidebar, so there's no fill behind it. The radius matches the
   capture's 24px corners so the shadow follows them. */
.hero-shot {
  min-width: 0;
}
.hero-shot img {
  width: 100%;
  border-radius: 1.36% / 2.03%;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

/* Wide screens: the shot reaches back across the gap and tucks its
   see-through sidebar under the text column, which draws on top, and bleeds
   off the right edge of the viewport so the preview pane is never cropped by
   the wrap. The headline breaks after "Audio in." so its first line stays
   clear of the sidebar's labels. */
@media (min-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: visible;
  }
  .hero-text {
    position: relative;
    z-index: 1;
  }
  .hero h1 {
    white-space: nowrap;
  }
  .hero-shot {
    margin-left: calc(-1 * clamp(120px, 14vw, 200px));
    /* Past the wrap's edge and gutter, plus enough that the capture's own
       rounded right corners sit off-screen. */
    margin-right: calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) + 28px));
  }
}

/* ---------- home: sections ---------- */

.section {
  padding-block: 72px;
}
.section.tight {
  padding-block: 64px;
}
.band {
  background: var(--bg-band);
}
.rule {
  border-top: 1px solid var(--border-section);
}
section[id] {
  scroll-margin-top: 72px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 40em;
  min-width: 0;
}
.section h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.section h2.small {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
}
.body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}

/* waveforms */

.waves-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
  align-items: end;
}
.waves-head .section-head {
  gap: 14px;
}
.waves-head .body {
  max-width: 34em;
}

/* a real five-column track: wrapping flex items would balloon the wells */
.wave-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .wave-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .wave-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wave-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.wave-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.wave-card p {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dimmer);
}

.well {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--surface-deep);
  overflow: hidden;
}

.ring {
  position: relative;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px dashed var(--accent);
}
.ring::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: #23262b;
}

.bars {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 74%;
  height: 56%;
}
.bars i {
  flex: 1;
  min-width: 0;
  height: var(--h);
  border-radius: 2px;
  background: var(--accent);
}
.bars.round i {
  border-radius: 99px;
}
.bars.dots i {
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Diagrams, not captures: each bar breathes on its own clock so the row
   reads as moving. Off when the reader asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .bars i {
    animation: bob var(--t, 1.1s) ease-in-out var(--d, 0s) infinite alternate;
  }
  .bars.dots i {
    animation-name: glow;
  }
  .ring {
    animation: breathe 1.8s ease-in-out infinite alternate;
  }
  .ring::after {
    animation: counter 1.8s ease-in-out infinite alternate;
  }
}
.bars i:nth-child(1) { --t: 1.05s; --d: -0.3s; }
.bars i:nth-child(2) { --t: 0.85s; --d: -0.7s; }
.bars i:nth-child(3) { --t: 1.25s; --d: -0.1s; }
.bars i:nth-child(4) { --t: 0.95s; --d: -0.9s; }
.bars i:nth-child(5) { --t: 1.15s; --d: -0.5s; }
.bars i:nth-child(6) { --t: 0.8s;  --d: -0.2s; }
.bars i:nth-child(7) { --t: 1.3s;  --d: -0.8s; }
.bars i:nth-child(8) { --t: 0.9s;  --d: -0.4s; }
.bars i:nth-child(9) { --t: 1.2s;  --d: -1s; }
.bars i:nth-child(10) { --t: 1s;   --d: -0.6s; }

@keyframes bob {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}
@keyframes glow {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
@keyframes breathe {
  from { transform: scale(0.94) rotate(0deg); }
  to { transform: scale(1) rotate(10deg); }
}
@keyframes counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-10deg); }
}

/* film: the 38-second overview, click to play with sound */

.film {
  position: relative;
  margin: 28px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: rgba(13, 13, 12, 0.18);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.film-play[hidden] {
  display: none;
}
.film-play:hover {
  background: rgba(13, 13, 12, 0.05);
}
.film-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.film-play-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.film-play:hover .film-play-icon {
  transform: scale(1.06);
  background: var(--accent-hover);
}
.film-play-icon svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
  fill: var(--on-accent);
}
.film-play-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(13, 13, 12, 0.82);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.film-play-meta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
}
@media (max-width: 560px) {
  /* the frame is small here: just the button, the label stays for screen readers */
  .film-play-icon {
    width: 56px;
    height: 56px;
  }
  .film-play-icon svg {
    width: 24px;
    height: 24px;
  }
  .film-play-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .film-play,
  .film-play-icon {
    transition: none;
  }
}

/* gallery: each figure's width carries its ratio so the caption stays
   under its own frame, and all four share one frame height */

.gallery {
  --fh: clamp(140px, 19vw, 240px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 18px;
  margin-top: 32px;
}
@media (max-width: 700px) {
  /* 16:9 + 9:16 fill the first row exactly; 4:5 + 1:1 take the second */
  .gallery {
    --fh: min(240px, calc((100vw - 67px) / 2.35));
  }
}
.shot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  width: calc(var(--fh) * var(--r));
  max-width: 100%;
  min-width: 0;
}
.shot video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.shot .ratio {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-dimmer);
}

/* how it works */

.steps {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 190px) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding-block: 26px;
  border-top: 1px solid var(--border-rule);
}
.steps .num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
}
.steps h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.steps p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .steps li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
  }
  .steps p {
    grid-column: 2;
  }
}

/* reviews */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) {
  .quotes {
    grid-template-columns: minmax(0, 1fr);
  }
}
.quotes li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.quotes blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.quotes blockquote p::before {
  content: "\201C";
}
.quotes blockquote p::after {
  content: "\201D";
}
.who {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  color: var(--ink-dimmer);
}
.who-name {
  font-weight: 600;
  color: var(--ink-2);
}
/* privacy */

.privacy-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.privacy-copy strong {
  color: var(--ink);
}
.privacy-copy code {
  font-size: 15px;
}
.more {
  font-weight: 600;
}

/* price */

.price-intro .body {
  max-width: 32em;
}
.prices {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prices li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--border);
}
.plan {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.plan-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dimmer);
}
.pill {
  padding: 4px 8px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
}
.amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.price-foot {
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dimmer);
}

/* get podwobble */

.section.get {
  padding-block: 72px 64px;
}
.get-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.get-meta {
  font-size: 14px;
  color: var(--ink-dimmer);
}

.win-card {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.win-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
}
.win-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.win-card > p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.win-card .fine {
  font-size: 13px;
  color: var(--ink-faint);
}

.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.waitlist input[type="email"] {
  flex: 1;
  min-width: 190px;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-control);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  transition: border-color 0.12s ease;
}
.waitlist input::placeholder {
  color: var(--ink-faint);
}
.waitlist input:hover {
  border-color: var(--border-control-hover);
}
.waitlist input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 10px;
}
.waitlist button {
  flex: 0 0 auto;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.waitlist button:hover {
  background: var(--accent-hover);
}
.waitlist button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.waitlist .bot {
  display: none;
}
.form-error {
  flex-basis: 100%;
  font-size: 14px;
  color: #f2a39a;
}
.sent {
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: 15px;
}

/* ---------- legal, support and small pages ---------- */

.page {
  padding-block: 72px 88px;
}

.prose {
  max-width: 40rem;
  font-size: 17px;
}
.prose > * + * {
  margin-top: 16px;
}
.prose h1 {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.prose > .label + h1 {
  margin-top: 14px;
}
.prose > .meta {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-dimmer);
}
.prose > h2 {
  margin-top: 44px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  scroll-margin-top: 80px;
}
.prose > h2 + * {
  margin-top: 12px;
}
.prose p,
.prose li {
  color: var(--ink-muted);
}
.prose strong,
.prose b {
  color: var(--ink);
}
.prose a {
  text-decoration-line: underline;
  text-decoration-color: rgba(86, 194, 242, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose ul,
.prose ol {
  padding-left: 20px;
}
.prose li + li {
  margin-top: 8px;
}
.prose li::marker {
  color: var(--ink-faint);
}

.summary {
  padding: 16px 20px;
  background: var(--accent-tint);
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: 0 10px 10px 0;
}
.prose > .summary {
  margin-top: 32px;
}

/* About: the maker's photo, ringed like a host photo in the app */
.portrait {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.about-head {
  display: flex;
  align-items: center;
  gap: 28px;
}
.about-head .portrait {
  flex: none;
}
.prose > .about-head + .meta {
  margin-top: 20px;
}
@media (max-width: 560px) {
  .about-head {
    gap: 18px;
  }
  .about-head .portrait {
    width: 88px;
    height: 88px;
  }
}

.contact {
  padding-block: 20px;
  border-block: 1px solid var(--border);
}
.prose > .contact {
  margin-top: 32px;
}
.contact .email {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.contact p + p {
  margin-top: 8px;
}

.prose .toc {
  padding-left: 0;
  list-style: none;
}
.prose .toc li + li {
  margin-top: 6px;
}

/* ---------- blog ---------- */

.prose > .byline {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-dimmer);
}
.prose > h3 {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.prose > h3 + * {
  margin-top: 8px;
}
.prose figure img,
.prose figure video {
  border-radius: 12px;
  border: 1px solid var(--border);
}
.prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-dimmer);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th,
.prose td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--ink-muted);
}
.prose th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
}
.table-scroll {
  overflow-x: auto;
}

.prose .posts {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.prose .posts li {
  margin: 0;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}
.posts h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.posts h2 a {
  color: var(--ink);
}
.posts h2 a:hover {
  color: var(--accent-hover);
}
.posts p {
  margin-top: 8px;
  color: var(--ink-muted);
}
.posts time {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.post-cta {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.prose > .post-cta {
  margin-top: 40px;
}
.post-cta p + p {
  margin-top: 12px;
}
.prose > .post-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-dimmer);
}
.prose .posts h2 a {
  text-decoration: none;
}

/* A preparation checklist alongside the existing editorial layout. */
.prep-list { list-style: none; margin: 0; padding: 0; }
.prep-list li { padding: 16px 0; border-bottom: 1px solid var(--border); }
.prep-list li:first-child { padding-top: 0; }
.prep-list strong, .prep-list span { display: block; }
.prep-list strong { margin-bottom: 5px; }
.prep-list small { font-weight: 400; margin-left: 8px; }
.prep-list span { color: var(--ink-muted); line-height: 1.6; }