/* papr.nemixe.com: one stylesheet for every page.

   Papr is paper. You write in ink. Mint is Papr's mark, the highlighter in the margin and its
   only hue (DESIGN.md, "Color is meaning"), so the site keeps to the same three: a warm paper
   canvas, ink type and controls, and mint for links, the one marked word and the lens. No yellow,
   no blue, no purple anywhere in these tokens (shots/hues.py checks). The screenshots and the
   recording carry whatever colour a real Mac desktop has. */

:root {
  --paper: #f7f5f0;
  --sheet: #ffffff;
  --sheet-glass: rgb(247 245 240 / 80%);
  --ink: #1c1c1e;
  --ink-2: rgb(28 28 30 / 64%);
  --ink-3: rgb(28 28 30 / 48%);
  --line: rgb(28 28 30 / 10%);
  --line-strong: rgb(28 28 30 / 18%);
  --hover: rgb(28 28 30 / 5%);
  --press: rgb(28 28 30 / 9%);
  --mint: #00756e;
  --mint-ink: #ffffff;
  --mint-soft: rgb(0 117 110 / 10%);
  --link: #005550;
  --key: #ffffff;
  --key-edge: rgb(28 28 30 / 14%);
  --btn: #1c1c1e;
  --btn-ink: #f7f5f0;
  --btn-hover: #38383b;
  --shot-ring: rgb(28 28 30 / 10%);
  --shot-shadow: 0 1px 2px rgb(28 28 30 / 6%), 0 24px 48px -16px rgb(28 28 30 / 26%), 0 48px 96px -32px rgb(28 28 30 / 20%);
  /* The privacy band is ink in both looks. */
  --band: #141416;
  --band-ink: rgb(255 255 255 / 92%);
  --band-ink-2: rgb(255 255 255 / 64%);
  --band-line: rgb(255 255 255 / 12%);
  --band-edge: transparent;
  --max: 1200px;
  --gutter: 40px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f0f10;
    --sheet: #161618;
    --sheet-glass: rgb(15 15 16 / 76%);
    --ink: rgb(255 255 255 / 92%);
    --ink-2: rgb(255 255 255 / 64%);
    --ink-3: rgb(255 255 255 / 50%);
    --line: rgb(255 255 255 / 10%);
    --line-strong: rgb(255 255 255 / 18%);
    --hover: rgb(255 255 255 / 8%);
    --press: rgb(255 255 255 / 13%);
    --mint: #5ce1d8;
    --mint-ink: #1c1c1e;
    --mint-soft: rgb(92 225 216 / 14%);
    --link: #5ce1d8;
    --key: #232326;
    --key-edge: rgb(255 255 255 / 14%);
    --btn: #f5f3ee;
    --btn-ink: #0f0f10;
    --btn-hover: #d8d6d0;
    --shot-ring: rgb(255 255 255 / 12%);
    --shot-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 24px 56px -16px rgb(0 0 0 / 70%);
    --band: #000000;
    --band-edge: rgb(255 255 255 / 9%);
  }
}
:root[data-theme="dark"] {
  --paper: #0f0f10;
  --sheet: #161618;
  --sheet-glass: rgb(15 15 16 / 76%);
  --ink: rgb(255 255 255 / 92%);
  --ink-2: rgb(255 255 255 / 64%);
  --ink-3: rgb(255 255 255 / 50%);
  --line: rgb(255 255 255 / 10%);
  --line-strong: rgb(255 255 255 / 18%);
  --hover: rgb(255 255 255 / 8%);
  --press: rgb(255 255 255 / 13%);
  --mint: #5ce1d8;
  --mint-ink: #1c1c1e;
  --mint-soft: rgb(92 225 216 / 14%);
  --link: #5ce1d8;
  --key: #232326;
  --key-edge: rgb(255 255 255 / 14%);
  --btn: #f5f3ee;
  --btn-ink: #0f0f10;
  --btn-hover: #d8d6d0;
  --shot-ring: rgb(255 255 255 / 12%);
  --shot-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 24px 56px -16px rgb(0 0 0 / 70%);
  --band: #000000;
  --band-edge: rgb(255 255 255 / 9%);
}

/* ---- Base ------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
kbd {
  display: inline-block; min-width: 1.6em; text-align: center;
  font: 500 .84em/1 var(--display); padding: .3em .45em; border-radius: 6px;
  background: var(--key); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--key-edge), 0 1px 0 var(--key-edge);
  white-space: nowrap; vertical-align: .08em;
}
mark { background: transparent; color: var(--mint); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 64px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 20px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
.ico { width: 22px; height: 22px; flex: none; color: var(--ink-2); stroke-width: 2.25; }
.mail, .link { color: var(--link); font-weight: 500; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.mail:hover, .link:hover { text-decoration-color: currentColor; }

/* ---- Controls: one shape, 10px; filled primary, outlined secondary ---------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 10px;
  background: var(--btn); color: var(--btn-ink);
  font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .15s ease, transform .12s ease-out;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.98); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.quiet:hover { background: var(--hover); }
.btn.quiet:active { background: var(--press); }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn.pending, .btn.pending:hover { background: var(--hover); color: var(--ink-2); box-shadow: none; cursor: default; transform: none; }
.round {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.round:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.round:active { background: var(--press); transform: scale(.94); }
.round .ico { width: 18px; height: 18px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .btn, .round { transition: background-color .15s ease; } .btn:active, .round:active { transform: none; } }

/* ---- Header: sticky, paper glass --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sheet-glass);
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; }
.brand { display: inline-flex; color: var(--ink); }
.brand svg { height: 20px; width: auto; }
.links { display: flex; align-items: center; gap: 30px; }
.links a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.links a:hover { color: var(--ink); }
.buy-pending .nav-pricing { display: none; }
/* The free trial's download and copy: only with PAPR_DOWNLOAD_URL set (the script at the end of index.html). */
html:not(.download-on) [data-download] { display: none !important; }
.download-on .cta .btn[data-buy] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.download-on .cta .btn[data-buy]:hover { background: var(--hover); }
.download-on .cta .btn[data-buy]:active { background: var(--press); }
.download-on .cta .see-how { display: none; }

/* Menu button: phones only (<= 760px), with JavaScript. Without it the links wrap under the bar. */
.menu-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: 0 -4px 0 auto; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease;
}
.menu-toggle:hover { background: var(--hover); }
.menu-toggle:active { background: var(--press); }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle line { stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease); }
.menu-toggle[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .bar { gap: 8px; }
  .js .menu-toggle { display: inline-flex; }
  .js .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 12px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 40px -28px rgb(0 0 0 / 35%);
  }
  .js .site-header.menu-open .links { display: flex; animation: menu-in .2s var(--ease); }
  .js .links a { padding: 14px 0; font-size: 17px; color: var(--ink); border-top: 1px solid var(--line); }
  .js .links a:first-child { border-top: 0; }
  .js .links a:hover { color: var(--ink-2); }
  html:not(.js) .bar { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 4px; }
  html:not(.js) .links { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle, .menu-toggle line { transition: none; }
  .js .site-header.menu-open .links { animation: none; }
}

/* ---- Hero --------------------------------------------------------------------------------- */
.hero { padding-block: 84px 0; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; font-weight: 500; margin-bottom: 28px; }
.eyebrow img { width: 30px; height: 30px; }
h1 { font-size: clamp(40px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 12em; margin-inline: auto; }
.lede { margin: 26px auto 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.meta { margin-top: 20px; color: var(--ink-3); font-size: 14px; }
.meta s { color: var(--ink-3); }
.meta + .meta { margin-top: 8px; }

/* The recording: a real desktop, in a hairline ring with a soft shadow, no device around it. */
.stage { position: relative; max-width: 1320px; margin: 64px auto 0; padding-inline: var(--gutter); }
.shot { position: relative; border-radius: 14px; overflow: hidden; background: var(--sheet); box-shadow: 0 0 0 1px var(--shot-ring), var(--shot-shadow); }
.shot img, .shot video { width: 100%; }
.demo { max-width: 1240px; margin-inline: auto; border-radius: 12px; }
.demo video, .demo img { aspect-ratio: 16 / 10; object-fit: cover; }
.demo .poster { display: none; }
.demo.still video { display: none; }
.demo.still .poster { display: block; }
/* Play / pause: a small round control in the corner, there for anyone who wants the motion to stop. */
.demo-ctl {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgb(20 20 22 / 62%); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .2s ease, transform .15s ease;
}
.demo-ctl .ico { width: 18px; height: 18px; color: #fff; }
.demo:hover .demo-ctl, .demo-ctl:focus-visible, .demo.still .demo-ctl, .demo.paused .demo-ctl { opacity: 1; }
.demo-ctl:active { transform: scale(.94); }
@media (hover: none) { .demo-ctl { opacity: 1; } }
html:not(.js) .demo-ctl { display: none; }
.caption { position: relative; z-index: 1; margin-top: 20px; color: var(--ink-3); font-size: 14px; }
@media (max-width: 640px) {
  .hero { padding-block: 48px 0; }
  .stage { margin-top: 44px; }
  .demo { max-width: 420px; border-radius: 14px; }
  .demo video, .demo img { aspect-ratio: 4 / 5; }
}

/* ---- Chapters: paper and sheet alternate; space does the separating ---------------------- */
.chapter { padding-block: 120px; }
.chapter.alt { background: var(--sheet); }
@media (max-width: 640px) { .chapter { padding-block: 76px; } }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.kicker .ico { width: 18px; height: 18px; }
h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; max-width: 15em; }
h2 span { color: var(--ink-3); }
.intro { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.head.center { text-align: center; }
.head.center h2, .head.center .intro { margin-inline: auto; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.split .media { width: 100%; max-width: 540px; justify-self: center; }
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: 56px; }
  .split .media { justify-self: start; max-width: 520px; }
}

.feats { display: grid; gap: 26px; margin-top: 44px; }
.feats li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
.feats .ico { margin-top: 2px; }
.feats strong { display: block; font-weight: 600; }
.feats span { color: var(--ink-2); font-size: 16px; }
.feats.row { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; }
@media (max-width: 860px) { .feats.row { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; } }

/* ---- How it works: three moments of the recording, side by side -------------------------- */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; counter-reset: s; }
.steps3 li { counter-increment: s; }
.steps3 .shot { border-radius: 14px; }
.steps3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.steps3 .num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: 24px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps3 .num::before { content: counter(s); }
.steps3 h3 { margin-top: 14px; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.steps3 h3 kbd { font-size: .78em; vertical-align: .1em; }
.steps3 p { margin-top: 8px; color: var(--ink-2); font-size: 16px; text-wrap: pretty; }
@media (max-width: 860px) {
  /* Phones: one row that scrolls sideways, each step a card the width of the screen less a peek of the next. */
  .steps3 { display: flex; gap: 16px; margin: 48px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .steps3::-webkit-scrollbar { display: none; }
  .steps3 li { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
}

/* ---- Use cases: tabs the reader picks; each slide the screen at that moment ----------------- */
#use-cases h2 { max-width: none; }
.chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.chips a {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border-radius: 19px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.alt .chips a { background: var(--sheet); }
.chips a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.chips a:active { background: var(--press); }
.chips .ico { width: 17px; height: 17px; color: inherit; }
.chips a[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.show-stage { position: relative; margin-top: 36px; }
.slide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 48px; align-items: start; align-content: start; scroll-margin-top: 300px; }
.slide + .slide { margin-top: 72px; }
.js .slides { display: grid; touch-action: pan-y; }
.js .slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.js .slide.is-active { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.js .show:not(.is-ready) .chips a, .js .show:not(.is-ready) .slide { transition: none; }
.slide .shot img { aspect-ratio: 16 / 10; }
.slide-copy { padding-top: 4px; }
.js .slide-copy { padding-bottom: 72px; }
.slide-copy h3 { font-size: clamp(24px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.pf { display: grid; gap: 20px; margin-top: 24px; }
.pf > div { padding-left: 16px; border-left: 2px solid var(--line-strong); }
.pf > div.fix { border-left-color: var(--mint); }
.pf dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pf dd { margin-top: 6px; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.pf .fix dd { color: var(--ink); }
.show-ctrl { display: none; }
.js .show-ctrl { display: block; position: absolute; z-index: 2; right: 0; bottom: 0; left: calc((100% - 48px) * 2 / 3 + 48px); }
.show-row { display: flex; align-items: center; gap: 8px; }
.show-count { margin: 0 6px 0 auto; color: var(--ink-2); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .chips { gap: 6px; } .chips a { padding: 0 13px 0 11px; } }
@media (max-width: 960px) {
  .slide { grid-template-columns: minmax(0, 1fr); }
  .slide-copy { margin-top: 32px; padding-top: 0; }
  .js .slide-copy { margin-top: 92px; padding-bottom: 0; }
  .js .show-ctrl { top: 0; bottom: auto; left: 0; aspect-ratio: 16 / 10; pointer-events: none; }
  .show-bits { position: absolute; top: calc(100% + 20px); left: 0; right: 0; pointer-events: auto; }
  .pf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips a { flex: none; }
  .show-stage { margin-top: 28px; }
  .slide { scroll-margin-top: 150px; }
  .slide .shot, .slide-copy, .js .show-ctrl { max-width: 420px; margin-inline: auto; }
  .slide .shot { border-radius: 14px; }
  .slide .shot img, .js .show-ctrl { aspect-ratio: 4 / 5; }
  .js .slide-copy { margin-top: 92px; }
  .pf { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { .chips a, .js .slide, .js .slide.is-active { transition: none; } }

/* ---- What a note can hold: a lens on a real window, moved by the reader -------------------- */
.craft-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head fig" "list fig"; grid-template-rows: auto 1fr; column-gap: 72px; }
.craft-head { grid-area: head; }
.craft-head h2 { max-width: 12em; }
.craft-list { grid-area: list; }
.craft-steps { display: grid; gap: 4px; margin: 36px 0 0 -18px; }
.craft-steps button {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.craft-steps button:hover { background: var(--hover); }
.craft-steps button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 28px -18px rgb(0 0 0 / 30%); }
.craft-steps .ico { margin-top: 2px; }
.craft-steps button[aria-pressed="true"] .ico { color: var(--mint); }
.craft-steps strong { display: block; font-weight: 600; color: var(--ink); }
.craft-steps span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; }
.craft-nav { display: none; }
.showcase { grid-area: fig; align-self: start; justify-self: center; width: 100%; max-width: 500px; position: sticky; top: 96px; }
/* The window edge to edge, rounded like it (18pt of 500); with JavaScript a lens of --lens-h on it,
   at actual size on desktop, which the script slides to the note on show (--ty). */
.sc-frame { position: relative; border-radius: 3.6% / 1.9%; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px var(--shot-ring), var(--shot-shadow); }
.js .sc-frame { --lens-h: 520px; height: var(--lens-h); border-radius: 18px; }
.sc-zoom { position: relative; }
.js .sc-zoom { transform: translateY(var(--ty, 0px)); transition: transform .8s var(--ease); }
.sc-zoom img { width: 100%; aspect-ratio: 1000 / 1880; }
.sc-zoom img.light { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.showcase.light .sc-zoom img.light { opacity: 1; }
.sc-spot {
  position: absolute; left: var(--sx, 0%); top: var(--sy, 0%); width: var(--sw, 100%); height: var(--sh, 100%);
  border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px var(--mint), 0 0 0 200vmax rgb(20 20 22 / 50%);
  transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .4s ease;
}
.showcase.on .sc-spot { opacity: 1; }
.showcase figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: var(--ink-3); font-size: 14px; }
/* Light or dark: a two-state control under the lens, swapping the two captures of the same window. */
.look { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--hover); }
.look button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.look button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.alt .look button[aria-pressed="true"] { background: var(--paper); }
html:not(.js) .look { display: none; }
.craft-more { margin-top: 88px; }
@media (max-width: 920px) {
  .craft-row { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "list"; grid-template-rows: auto; }
  .showcase { position: static; margin-top: 32px; justify-self: start; max-width: 520px; }
  .js .sc-frame { --lens-h: 420px; }
  .js .craft-steps { margin: 20px 0 0; max-width: 520px; }
  .js .craft-steps button:not([aria-pressed="true"]) { display: none; }
  .js .craft-steps button[aria-pressed="true"] { grid-template-columns: 1fr; padding: 0 0 12px; border-radius: 0; background: none; box-shadow: none; cursor: default; }
  .js .craft-steps button[aria-pressed="true"] .ico { display: none; }
  .js .craft-steps strong { font-size: 18px; }
  .js .craft-steps span { font-size: 16px; }
  .js .craft-nav { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .js .craft-nav .show-count { margin: 0 0 0 6px; }
  .craft-more { margin-top: 56px; }
}
@media (max-width: 640px) {
  .showcase { justify-self: center; }
  .sc-spot { border-radius: 10px; }
  .js .showcase { justify-self: stretch; width: auto; max-width: none; margin: 32px calc(-1 * var(--gutter)) 0; }
  .js .sc-frame { --lens-h: 260px; border-radius: 0; box-shadow: none; touch-action: pan-y; }
  .js .sc-zoom { width: calc(100% * 500 / 492); margin-left: calc(-100% * 4 / 492); }
  .js .showcase figcaption { padding-inline: var(--gutter); }
  .js .craft-steps { margin: 20px 0 0; }
  .craft-more { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-steps button, .js .sc-zoom, .sc-spot, .sc-zoom img.light, .look button { transition: none; }
}

/* ---- Find it again: two windows side by side, each with its words under it ----------------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 64px; }
.pair .media { width: 100%; max-width: 520px; }
.pair .shot { border-radius: 18px; }
.pair .intro { margin-top: 32px; font-size: 18px; }
.pair .feats { margin-top: 28px; }
.pair [id] { scroll-margin-top: 88px; }
@media (max-width: 920px) {
  .pair { grid-template-columns: 1fr; gap: 80px; margin-top: 48px; }
}

/* ---- Privacy: an ink band laid out like a spec sheet -------------------------------------- */
.band { background: var(--band); color: var(--band-ink); border-block: 1px solid var(--band-edge); }
.band .kicker, .band .intro { color: var(--band-ink-2); }
.band .kicker .ico { color: var(--band-ink-2); }
.band h2 span { color: var(--band-ink-2); }
.band mark { color: #5ce1d8; }
.privacy { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--band-line); }
.spec > div:last-child { border-bottom: 1px solid var(--band-line); }
.spec dt { font-weight: 600; font-size: 16px; }
.spec dd { color: var(--band-ink-2); font-size: 16px; }
.band .mail { color: var(--band-ink); }
@media (max-width: 920px) { .privacy { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 560px) { .spec > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Pricing -------------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 26px; margin-top: 44px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps strong { display: block; font-weight: 600; }
.steps span { color: var(--ink-2); font-size: 16px; }
.steps a:not(.btn) { color: var(--link); text-underline-offset: 3px; }
.license { background: var(--sheet); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 24px 48px -28px rgb(0 0 0 / 18%); }
.alt .license { background: var(--paper); }
@media (max-width: 640px) { .license { padding: 26px; } }
.license .head { display: flex; align-items: center; gap: 14px; }
.license .head img { width: 52px; height: 52px; }
.license .head strong { display: block; font-size: 20px; font-weight: 600; }
.license .head span { color: var(--ink-2); font-size: 15px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.price .now { font: 700 48px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price s { color: var(--ink-3); font-size: 20px; font-variant-numeric: tabular-nums; }
.price .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--mint-soft); color: var(--mint); font-size: 13px; font-weight: 600; }
.license ul { display: grid; gap: 16px; margin: 28px 0 32px; }
.license li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--ink-2); font-size: 15px; }
.license li strong { color: var(--ink); font-weight: 600; }
.license li .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.license li[id] { scroll-margin-top: 88px; }
.license .btn { width: 100%; }
.license .note { margin-top: 14px; color: var(--ink-3); font-size: 14px; text-align: center; }

/* TEMPORARY: first-open steps while releases aren't notarized. Remove with the #first-open block. */
.first-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.first-open h3 { font-size: 22px; letter-spacing: -0.01em; }
.first-open p { margin-top: 10px; color: var(--ink-2); font-size: 16px; max-width: 30em; }
.first-open .steps { margin-top: 0; }
@media (max-width: 920px) { .first-open { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; } }

/* ---- FAQ: native details, the chevron the only motion -------------------------------------- */
.policy { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); scroll-margin-top: 88px; }
.policy h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.policy p { color: var(--ink-2); font-size: 15px; }
.policy p + p { margin-top: 12px; }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; grid-template-areas: "head list" "support list"; grid-template-rows: auto 1fr; column-gap: 96px; row-gap: 40px; align-items: start; }
.faq-head { grid-area: head; }
.faq-list { grid-area: list; border-bottom: 1px solid var(--line); }
.faq-grid .policy { grid-area: support; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 20px 12px; margin-inline: -12px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; line-height: 1.4; border-radius: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--ink-2); }
.faq-item summary:focus-visible { outline-offset: 2px; }
.faq-item summary .ico { transform: rotate(180deg); transition: transform .2s var(--ease); }
.faq-item[open] summary .ico { transform: none; color: var(--mint); }
.faq-item p { padding: 0 42px 24px 0; color: var(--ink-2); font-size: 16px; max-width: 34em; text-wrap: pretty; }
.faq-item p kbd { color: var(--ink); }
@media (max-width: 920px) { .faq-grid { grid-template-columns: 1fr; grid-template-areas: "head" "list" "support"; grid-template-rows: auto; row-gap: 40px; } }
@media (max-width: 640px) { .faq-item summary { padding-block: 18px; } .faq-item p { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .faq-item summary .ico { transition: none; } }

/* ---- Closing --------------------------------------------------------------------------------- */
.closing { text-align: center; padding-block: 128px; }
.closing img { width: 72px; height: 72px; margin: 0 auto 28px; }
.closing h2 { margin-inline: auto; }
.closing h2 kbd { font-size: .6em; font-weight: 600; padding: .32em .5em; border-radius: 12px; vertical-align: .22em; box-shadow: inset 0 0 0 1px var(--key-edge), 0 2px 0 var(--key-edge); }
.closing .cta { margin-top: 32px; }
@media (max-width: 640px) { .closing { padding-block: 88px; } }

footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 32px 48px; color: var(--ink-3); font-size: 14px; }
footer .left { display: flex; align-items: center; gap: 14px; }
footer .left svg { height: 16px; width: auto; color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer nav a { color: var(--ink-2); text-decoration: none; }
footer nav a:hover { color: var(--ink); }

/* ---- Text pages: /thanks, /privacy, /terms ----------------------------------------------------- */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; height: 60px; }
.doc { padding-block: 88px 128px; max-width: 760px; }
.thanks { padding-block: 88px 128px; max-width: 800px; }
@media (max-width: 640px) { .doc, .thanks { padding-block: 48px 80px; } }
.doc h1, .thanks h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; max-width: none; margin-inline: 0; }
.doc .eyebrow, .thanks .eyebrow { display: flex; margin-bottom: 24px; }
.doc .lede, .thanks .lede { margin: 20px 0 0; font-size: 19px; max-width: 31em; }
.updated { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.doc section { margin-top: 56px; scroll-margin-top: 24px; }
.doc h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; max-width: none; }
.doc p, .doc li { color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.doc h2 + p, .doc h2 + ul, .doc h2 + dl { margin-top: 14px; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 14px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { display: grid; gap: 12px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.doc a:not(.btn) { color: var(--link); text-underline-offset: 3px; }
.who { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.who > div { display: grid; grid-template-columns: 130px 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.who dt { color: var(--ink); font-weight: 600; font-size: 16px; }
.who dd { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 560px) { .who > div { grid-template-columns: 1fr; } }
.todo { background: var(--mint-soft); color: var(--ink); border-radius: 4px; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.thanks .steps { gap: 32px; margin-top: 48px; }
.thanks .steps span { display: block; }
.thanks .downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.thanks .fine { margin-top: 10px; font-size: 14px; }
.after { margin-top: 56px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); display: grid; gap: 12px; color: var(--ink-2); font-size: 16px; }