@font-face {
  font-family: "Nunito Caption";
  src: url("/assets/Nunito-ExtraBold.20468b99.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --page: #faf9f6;
  --ink: #272b26;
  --body: #454b42;
  --muted: #666c63;
  --rule: #dfe2d8;
  --edge: #c6ccbf;
  --wash: #eeefe8;
  --select: #e2e7dc;
  --focus: #5c6b62;
  --primary: #272b26;
  --primary-hover: #3b4139;
  --on-primary: #faf9f6;
  /* The wing's slate, used only behind the illustrations. */
  --stage: radial-gradient(120% 100% at 15% 0%, #e3e8f0 0%, #eceef0 48%, #f1f1ec 100%);
  --stage-edge: rgb(51 65 90 / .10);
  --win-shadow: 0 1px 2px rgb(20 26 38 / .10), 0 24px 48px -20px rgb(20 26 38 / .45);
  /* The app's dark appearance (mac/Sources/YapwingApp/EditorStyle.swift). */
  --tile: #f1f0eb;
  --tile-edge: rgb(39 43 38 / .07);
  --accent: #2f7a57;
  --app-canvas: #222222;
  --app-chrome: #2a2a2a;
  --app-well: #181818;
  --app-line: #3b3b3b;
  --app-text: #ececea;
  --app-muted: #a3a39e;
  --app-accent: #6bbd94;
  --app-clip: #304a3d;
  --app-text-item: #544a36;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #161815;
    --ink: #eceee7;
    --body: #c9cdc3;
    --muted: #9da397;
    --rule: #2b2f29;
    --edge: #434a40;
    --wash: #222621;
    --select: #38412f;
    --focus: #a9b8ae;
    --primary: #eceee7;
    --primary-hover: #ffffff;
    --on-primary: #161815;
    --stage: radial-gradient(120% 100% at 15% 0%, #26304a 0%, #1d2129 50%, #1a1c19 100%);
    --stage-edge: rgb(236 238 231 / .08);
    --win-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 48px -20px rgb(0 0 0 / .7);
    --tile: #1d201c;
    --tile-edge: rgb(236 238 231 / .07);
    --accent: #6bbd94;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
::selection { color: var(--ink); background: var(--select); }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--edge); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
.skip-link { position: fixed; z-index: 10; top: -80px; left: 24px; padding: 12px 16px; border-radius: 8px; background: var(--page); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }


/* Page chrome, shared with sponge.computer. */
.wrap { width: min(1080px, 100% - 48px); margin-inline: auto; }
.header-row, .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-row { min-height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.brand img { border-radius: 22.5%; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-header nav a, .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; text-decoration: none; }
.site-header nav a:hover, .site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.site-header nav a[aria-current], .site-footer nav a[aria-current] { color: var(--ink); }
.site-footer { margin-top: 24px; }
.site-footer .footer-row { padding-block: 20px 32px; border-top: 1px solid var(--rule); }
.site-footer .brand { color: var(--muted); font-size: 13px; }


/* Introduction and download. */
.introduction { display: grid; justify-items: center; padding-block: 40px 48px; text-align: center; }
.eyebrow { margin-bottom: 20px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.eyebrow span { margin-inline: 4px; }
h1 { max-width: 920px; margin-bottom: 22px; font-size: clamp(2.25rem, 7.4vw, 4.875rem); line-height: 1.02; font-weight: 650; letter-spacing: -.045em; text-wrap: balance; }
.summary { max-width: 33rem; margin-bottom: 32px; color: var(--body); font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.55; text-wrap: balance; }
.get-started { display: grid; justify-items: center; row-gap: 4px; }
.download { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 30px; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 600 16px / 1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 10px 24px -12px rgb(0 0 0 / .45); transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
a.download:hover { border-color: var(--primary-hover); background: var(--primary-hover); transform: translateY(-1px); }
a.download:active { transform: translateY(0); }
a.download:focus-visible { border-radius: 999px; }
button.download:disabled { border-color: var(--edge); background: transparent; color: var(--muted); font-weight: 500; box-shadow: none; opacity: 1; cursor: not-allowed; }
.compatibility, .availability { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.compatibility { margin-top: 14px; }

/* Illustrations: HTML drawings of the app, not screenshots. Media inside them
   are generated samples (site/art/art.json). */
.win { width: 100%; overflow: hidden; border-radius: 12px; background: var(--app-canvas); box-shadow: var(--win-shadow); color: var(--app-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.35; }
.clip-name, .words, .r-text, .term .line { display: block; }
.win .lights, .term .lights { display: inline-flex; gap: 7px; }
.lights i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.lights i + i { background: #febc2e; }
.lights i + i + i { background: #28c840; }


/* The editor window scales like a picture: every size is a multiple of --u,
   one thousandth of its width. */
.hero-win { container-type: inline-size; }
.hero-win > * { --u: .1cqw; }
.hero-win .lights { gap: calc(8 * var(--u)); }
.hero-win .lights i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.win-bar { display: flex; align-items: center; height: calc(48 * var(--u)); padding-inline: calc(18 * var(--u)); border-bottom: 1px solid var(--app-line); background: var(--app-chrome); }
.win-title { margin-left: calc(18 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.win-tools { display: flex; gap: calc(8 * var(--u)); margin-left: auto; }
.tool { padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: calc(7 * var(--u)); background: rgb(255 255 255 / .08); font-size: calc(12 * var(--u)); }
.tool b { font-weight: 400; color: var(--app-muted); }
.win-body { display: grid; grid-template-columns: 54% 1fr; height: calc(420 * var(--u)); }
.transcript { padding: calc(16 * var(--u)) calc(26 * var(--u)); border-right: 1px solid var(--app-line); }
.seg { display: inline-flex; padding: calc(2 * var(--u)); border-radius: calc(8 * var(--u)); background: rgb(255 255 255 / .07); font-size: calc(12 * var(--u)); }
.seg span { padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--app-muted); }
.seg .on { background: rgb(255 255 255 / .16); color: var(--app-text); }
.para { margin-top: calc(22 * var(--u)); padding-left: calc(16 * var(--u)); border-left: calc(3 * var(--u)) solid #5b84c4; }
.para.c2 { border-left-color: #c98d3e; }
.clip-name { margin-bottom: calc(6 * var(--u)); color: var(--app-muted); font-size: calc(11 * var(--u)); }
.words { font-size: calc(21 * var(--u)); line-height: 1.6; }
.words .cut { padding: 0 calc(7 * var(--u)); border: 1px dashed rgb(255 255 255 / .3); border-radius: calc(4 * var(--u)); color: var(--app-muted); font-size: .7em; text-decoration: line-through; vertical-align: .1em; }
.words .fixed { padding: 0 calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: rgb(107 189 148 / .2); color: var(--app-accent); box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--app-accent); }
.words .fixed s { margin-right: calc(4 * var(--u)); color: var(--app-muted); font-size: .7em; }
.words .pause { padding: calc(1 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: #404040; color: var(--app-muted); font-size: .58em; vertical-align: .2em; }
.preview { position: relative; display: grid; place-items: center; background: var(--app-well); }
.zoom { position: absolute; top: calc(12 * var(--u)); left: calc(14 * var(--u)); right: calc(14 * var(--u)); display: flex; justify-content: space-between; color: var(--app-muted); font-size: calc(11 * var(--u)); }
.frame { position: relative; overflow: hidden; }
.portrait { height: calc(356 * var(--u)); aspect-ratio: 9 / 16; margin-top: calc(26 * var(--u)); border-radius: calc(4 * var(--u)); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.caption { position: absolute; left: 6%; right: 6%; bottom: 24%; color: #fff; font: 800 calc(25 * var(--u)) / 1.1 "Nunito Caption", -apple-system, sans-serif; text-align: center; -webkit-text-stroke: calc(5 * var(--u)) #141414; paint-order: stroke fill; }
.win-timeline { position: relative; padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--app-line); background: var(--app-chrome); }
.transport { display: flex; gap: calc(14 * var(--u)); color: var(--app-muted); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums; }
.transport .play { color: var(--app-text); }
.ruler { height: calc(12 * var(--u)); margin-block: calc(10 * var(--u)) calc(4 * var(--u)); background: repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 1px, transparent 1px calc(40 * var(--u))) bottom / 100% 50% no-repeat, repeating-linear-gradient(90deg, rgb(255 255 255 / .3) 0 1px, transparent 1px calc(200 * var(--u))) bottom / 100% 100% no-repeat; }
.lane { display: flex; gap: calc(3 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(5 * var(--u)); }
.text-lane { height: calc(22 * var(--u)); }
.text-lane .item { display: flex; align-items: center; width: 40%; margin-left: 4%; padding-inline: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--app-text-item); color: #efe3c8; font-size: calc(11 * var(--u)); }
.clipblock { position: relative; height: 100%; overflow: hidden; border-radius: calc(4 * var(--u)); background: linear-gradient(rgb(48 74 61 / .55), rgb(48 74 61 / .55)), url("/assets/art/hero.webp") 0 0 / auto 100% repeat-x, var(--app-clip); }
.clipblock.k1 { width: 63%; border-top: calc(2 * var(--u)) solid #5b84c4; }
.clipblock.k2 { width: 36%; border-top: calc(2 * var(--u)) solid #c98d3e; }
.clipblock span { padding: calc(6 * var(--u)) calc(8 * var(--u)); color: #fff; font-size: calc(11 * var(--u)); text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.playhead { position: absolute; top: calc(40 * var(--u)); bottom: calc(10 * var(--u)); left: 31%; width: calc(2 * var(--u)); border-radius: 1px; background: #fff; }
/* A narrow window gets its own proportions so the words stay legible. */
@container (max-width: 560px) {
  .hero-win > * { --u: .25cqw; }
  .win-tools .tool:first-child, .zoom { display: none; }
  .win-body { grid-template-columns: 1fr 34%; height: calc(330 * var(--u)); }
  .transcript { padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .words { font-size: calc(15 * var(--u)); }
  .para.c2, .seg { display: none; }
  .para { margin-top: calc(4 * var(--u)); }
  .portrait { height: auto; width: 88%; margin-top: 0; }
  .caption { font-size: calc(13 * var(--u)); -webkit-text-stroke-width: calc(3 * var(--u)); }
}


/* The hero: a Mac desktop, Wi-Fi off, with the editor open. */
.desktop { position: relative; isolation: isolate; overflow: hidden; padding: clamp(52px, 8vw, 96px) clamp(14px, 8.5vw, 112px) 0; border-radius: 22px; background: #8fa3bd; box-shadow: 0 40px 80px -48px rgb(20 26 38 / .55), inset 0 0 0 1px var(--stage-edge); }
.wallpaper { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.menubar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 20px; height: 30px; padding-inline: 18px; background: rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); color: #11151c; font: 500 12.5px / 1 -apple-system, BlinkMacSystemFont, sans-serif; }
.menu-app { font-weight: 700; }
.menu-items { word-spacing: 14px; opacity: .82; }
.menu-status { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.wifi-off { width: 18px; height: 15px; }
.desktop .hero-win { border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 30px 70px -10px rgb(10 14 24 / .6); }


/* Sections. */
.anywhere, .simple, .pricing { padding-top: clamp(80px, 12vw, 144px); }
.anywhere h2, .private h2, .simple h2, .pricing h2 { max-width: 840px; font-size: clamp(2rem, 5.2vw, 3.375rem); line-height: 1.04; font-weight: 650; letter-spacing: -.042em; text-wrap: balance; }
.lede { max-width: 36rem; margin-top: 20px; color: var(--body); font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.2vw, 24px); margin: 56px 0 0; }
.places figure { margin: 0; }
.places figure:nth-child(2) { margin-top: 48px; }
.places img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; }
.places figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.places figcaption b { display: block; color: var(--ink); font-weight: 600; }

.private { margin-top: clamp(80px, 12vw, 144px); padding-block: clamp(72px, 11vw, 128px); background: #121411; color: #f3f4ef; }
.private .lede { color: #c5cabf; }
.zeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 64px 0 0; padding: 32px 0 0; border-top: 1px solid rgb(255 255 255 / .14); list-style: none; }
.zeros b { display: block; color: #fff; font-size: clamp(4rem, 10vw, 7rem); font-weight: 200; line-height: .9; letter-spacing: -.06em; }
.zeros span { display: block; max-width: 17rem; margin-top: 14px; color: #c5cabf; font-size: 15px; line-height: 1.45; }

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tile { display: flex; flex-direction: column; min-height: 400px; padding: 34px 34px 0; overflow: hidden; border-radius: 26px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-edge); }
.tile h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; }
.tile p { max-width: 26rem; color: var(--body); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 48px; min-height: 0; padding-bottom: 34px; }
.tile.wide h3 { grid-column: 1; align-self: end; }
.tile.wide p { grid-column: 1; }
.tile.wide .vignette { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; align-self: center; }
.vignette { margin-top: auto; padding-top: 32px; }

/* Vignettes: small drawings of one feature each. */
.v-cut, .v-ask, .v-find { display: grid; gap: 12px; padding: 22px 22px 26px; border-radius: 16px 16px 0 0; background: var(--app-canvas); box-shadow: var(--win-shadow); color: var(--app-text); font-size: 14px; line-height: 1.45; }
.v-cut { margin-top: auto; gap: 8px; font-size: 18px; line-height: 1.6; }
.v-cut del { padding: 0 5px; border-radius: 4px; background: rgb(255 255 255 / .07); color: var(--app-muted); text-decoration-color: rgb(255 120 110 / .9); text-decoration-thickness: 2px; }
.v-cut del.gap { text-decoration: none; padding: 1px 9px; background: repeating-linear-gradient(135deg, rgb(255 120 110 / .3) 0 3px, transparent 3px 7px); border-radius: 999px; font-size: .62em; vertical-align: .2em; }
.doc-wave, .strip { display: flex; gap: 3px; height: 26px; margin-top: 10px; }
.doc-wave i, .strip i { flex: 1; border-radius: 4px; background: linear-gradient(rgb(48 74 61 / .5), rgb(48 74 61 / .5)), url("/assets/art/talk.webp") 0 30% / auto 260% repeat-x, var(--app-clip); }
.doc-wave i.x { flex: .5; background: repeating-linear-gradient(135deg, rgb(255 120 110 / .35) 0 3px, transparent 3px 7px); }
.strip { margin-top: 2px; }
.v-caption { display: flex; justify-content: center; }
.frame-sm { position: relative; width: min(220px, 70%); aspect-ratio: 9 / 11; overflow: hidden; border-radius: 18px 18px 0 0; box-shadow: var(--win-shadow); }
.frame-sm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.caption-sm { position: absolute; left: 6%; right: 6%; bottom: 16%; color: #fff; font: 800 19px / 1.15 "Nunito Caption", -apple-system, sans-serif; text-align: center; -webkit-text-stroke: 4px #141414; paint-order: stroke fill; }
.typing { border-radius: 3px; background: rgb(107 189 148 / .55); -webkit-text-stroke-width: 0; padding-inline: 2px; }
.typing::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; background: #fff; vertical-align: -.12em; }
.bubble { max-width: 88%; padding: 9px 13px; border-radius: 14px; }
.bubble.me { justify-self: end; background: #3d6fd1; color: #fff; }
.bubble.them { padding-inline: 0; }
.bubble b { color: var(--app-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.strip.after i { flex: 1; }
.search { padding: 9px 13px; border-radius: 9px; background: rgb(255 255 255 / .08); }
.result { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--app-line); }
.result img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.r-text b { font-weight: 700; }
.tag { padding: 2px 8px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-muted); font-size: 11px; }
.tag.shows { border-color: rgb(107 189 148 / .5); color: var(--app-accent); }

.formats { display: grid; width: 100%; grid-template-columns: .5625fr .8fr 1fr 1.778fr; align-items: end; gap: 12px; }
.fmt { position: relative; display: block; overflow: hidden; border-radius: 10px; box-shadow: var(--win-shadow); }
.fmt img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; }
.f916 { aspect-ratio: 9 / 16; }
.f45 { aspect-ratio: 4 / 5; }
.f11 { aspect-ratio: 1; }
.f169 { aspect-ratio: 16 / 9; }
.fmt i, .follow { position: absolute; padding: 3px 7px; border-radius: 5px; background: rgb(0 0 0 / .58); color: #fff; font: 600 11px / 1.3 -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; }
.fmt i { left: 8px; bottom: 8px; }
.follow { top: 8px; left: 8px; right: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.follow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--app-accent); vertical-align: .1em; }

.term { display: block; overflow: hidden; border-radius: 12px; background: #141414; box-shadow: var(--win-shadow); color: #d6d6d2; font: 13px / 1.8 ui-monospace, "SF Mono", Menlo, monospace; }
.term .line { padding-inline: 18px; overflow-wrap: anywhere; }
.term .ask { padding-top: 16px; color: #fff; }
.term .cmd { color: #9fd3b6; }
.term .code { padding-left: 34px; color: #dcc68e; }
.term .ok { padding-bottom: 16px; color: var(--app-accent); }

/* Price. */
.pricing { display: grid; justify-items: center; text-align: center; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; margin-top: 44px; }
.plan { display: grid; gap: 8px; padding: 28px 30px; border-radius: 22px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-edge); text-align: left; }
.plan-name { color: var(--muted); font-size: 14px; font-weight: 500; }
.plan-name em { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--select); color: var(--ink); font-size: 12px; font-style: normal; }
.plan-price { font-size: 44px; font-weight: 650; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan-price small { margin-left: 2px; color: var(--muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 32px 0 0; padding: 0; color: var(--muted); font-size: 14px; list-style: none; }
.specs li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.renews { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.renews a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px; }
.fine { margin-top: 64px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fine a { display: inline-flex; align-items: center; min-height: 44px; }

/* Motion: the desktop settles in, and tiles rise as they scroll into view. */
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(.985); } }
@keyframes rise { from { opacity: 0; transform: translateY(36px); } }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .desktop { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both; }
  .typing::after { animation: caret 1.1s steps(1) infinite; }
  @supports (animation-timeline: view()) {
    .tile, .places figure, .plan { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* Privacy and support, in sponge.computer's legal style. */
.legal { padding-block: 60px 72px; }
.legal-wrap { max-width: 680px; }
.legal h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); }
.legal-meta { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.legal section { margin-top: 36px; }
.legal h2 { margin-bottom: 12px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.legal p + p { margin-top: 14px; }
.legal ul { margin-block: 14px; padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--ink); font-weight: 500; }

/* Comparison and topic pages: the legal layout plus a facts table, commands
   and questions. No page-specific styles; every guide uses these. */
.guide .legal-wrap { max-width: 720px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.guide .answer { margin-top: 22px; color: var(--ink); font-size: clamp(1.0625rem, 1.9vw, 1.1875rem); line-height: 1.55; }
.guide section { margin-top: 48px; }
.guide h2 { font-size: 22px; letter-spacing: -.02em; }
.guide h3 { margin: 26px 0 8px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.guide p, .guide li, .guide td, .guide dd { color: var(--body); }
.guide ol { margin-block: 14px; padding-left: 22px; }
.guide code { font: .92em / 1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.guide :not(pre) > code { padding: 1px 5px; border-radius: 5px; background: var(--wash); color: var(--ink); overflow-wrap: anywhere; }
.guide pre { margin: 14px 0; padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-edge); color: var(--ink); font-size: 13px; }
.guide pre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.facts { width: 100%; margin-top: 18px; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.5; }
.facts th, .facts td { padding: 12px 16px 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.facts thead th { border-top: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.facts thead th:first-child { width: 24%; }
.facts tbody th { color: var(--ink); font-weight: 500; }
.facts td { overflow-wrap: break-word; }
.facts-note, .sources li { color: var(--muted); font-size: 13px; }
.facts-note { margin-top: 14px; }
.sources { overflow-wrap: anywhere; }
.tools { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 20px; margin: 16px 0 0; font-size: 15px; line-height: 1.6; }
.tools dt, .tools dd { margin: 0; padding-block: 9px; border-top: 1px solid var(--rule); }
.tools dt { color: var(--ink); font: 500 14px / 1.7 ui-monospace, "SF Mono", Menlo, monospace; }
.pages { margin: 18px 0 0; padding: 0; list-style: none; }
.pages li { border-top: 1px solid var(--rule); }
.pages li + li { margin-top: 0; }
.pages a { display: block; padding-block: 14px; text-decoration: none; }
.pages b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.pages a:hover b { text-decoration: underline; }
.pages span { display: block; margin-top: 2px; color: var(--body); }
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; }
.next a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; }
a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
a.button:hover { background: var(--primary-hover); }
a.button:focus-visible { border-radius: 999px; }

/* The product page's contrast line, comparison links and questions. */
.contrast { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: 26px 0 0; padding: 0; color: var(--body); font-size: 14px; line-height: 1.6; list-style: none; }
.contrast li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.tile .more { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; font-size: 14px; }
.more { margin-top: 8px; font-size: 15px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }
.compared, .questions { padding-top: clamp(80px, 12vw, 144px); }
.compared h2, .questions h2 { max-width: 840px; font-size: clamp(2rem, 5.2vw, 3.375rem); line-height: 1.04; font-weight: 650; letter-spacing: -.042em; text-wrap: balance; }
.others { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.others a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-edge); font-size: 15px; text-decoration: none; }
.others a:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.questions .faq-list { max-width: 720px; margin-top: 36px; border-bottom: 1px solid var(--rule); }
.questions details { border-top: 1px solid var(--rule); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; color: var(--muted); font-size: 22px; font-weight: 300; line-height: 1; }
.questions details[open] summary::after { content: "−"; }
.questions summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.questions details p { max-width: 38rem; padding-bottom: 20px; color: var(--body); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* The subscription service's checkout-return page (api/src/worker.ts). */
main:not(.product-page):not(.legal) { width: min(1080px, 100% - 48px); margin: 40px auto 72px; }
.welcome { max-width: 34rem; margin-top: min(18vh, 160px); }
.return-title { margin-bottom: 14px; font-size: clamp(1.875rem, 5vw, 2.5rem); }
.return-text { margin: 0 0 28px; color: var(--body); font-size: 17px; line-height: 1.6; }


@media (prefers-color-scheme: dark) {
  .private { background: #0b0c0b; box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
  .bubble.me { background: #3a64bb; }
}
@media (max-width: 800px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; padding: 28px 24px 0; }
  .tile.wide { display: flex; padding-bottom: 28px; }
  .tile.wide h3 { align-self: auto; }
  .tile.wide .vignette { margin-top: 28px; }
  .menu-items { display: none; }
}
@media (max-width: 600px) {
  .wrap, main:not(.product-page):not(.legal) { width: calc(100% - 40px); }
  .header-row { min-height: 72px; gap: 12px; }
  .site-header nav { gap: 16px; }
  .site-header nav a, .site-footer nav a { font-size: 12px; }
  .introduction { padding-block: 12px 32px; }
  .eyebrow { margin-bottom: 14px; }
  h1 { margin-bottom: 16px; }
  .summary { margin-bottom: 24px; }
  .desktop { border-radius: 16px; }
  .menubar { height: 24px; padding-inline: 12px; font-size: 11px; }
  .menu-status .clock { display: none; }
  .legal { padding-block: 36px 48px; }
  .places figure:nth-child(2) { margin-top: 24px; }
  .places img { border-radius: 12px; }
  .places figcaption { font-size: 12px; }
  .zeros { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .zeros li { display: flex; align-items: baseline; gap: 18px; }
  .zeros b { font-size: 4rem; }
  .zeros span { margin: 0; }
  .formats { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .footer-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  /* A facts table becomes one block per row, each cell under its product's name. */
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .facts tr { padding-block: 14px; border-top: 1px solid var(--rule); }
  .facts tbody th, .facts td { padding: 0; border: 0; }
  .facts td { margin-top: 8px; }
  .facts td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .tools dd { padding-top: 0; border-top: 0; }
  .contrast { gap: 2px 16px; margin-top: 20px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-contrast: more) {
  :root { --muted: var(--body); --rule: var(--edge); }
  a { text-decoration-color: currentColor; }
}
@media print {
  :root { --page: #fff; --ink: #000; --body: #000; --muted: #333; }
  .site-header nav, .skip-link, .get-started, .desktop, .vignette, .crumbs { display: none; }
  .private { background: none; color: #000; }
}