/* captionsnap.app: a first-party Mac app page. SF Pro, white and light grey (black in dark),
   the system blue, big sharp product images. Brief 28, direction 1, with direction 2's
   comparison table in this palette. Every page uses this one file. */

:root {
  --bg: #ffffff;
  --band: #f5f5f7;
  --tile: #f5f5f7;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --link: #0066cc;
  --btn: #0071e3;
  --btn-text: #ffffff;
  --btn2-text: #0066cc;
  --focus: #0071e3;
  --accent: #0066cc;      /* CaptionSnap's own answers in the table */
  --accent-bar: #0071e3;
  --tint: #eef5fe;        /* CaptionSnap's row */
  --img-edge: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px -10px rgba(0,0,0,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --band: #161617;
    --tile: #1d1d1f;
    --card: #1d1d1f;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --line: #424245;
    --link: #2997ff;
    --btn: #0071e3;
    --btn-text: #ffffff;
    --btn2-text: #2997ff;
    --focus: #2997ff;
    --accent: #2997ff;
    --accent-bar: #2997ff;
    --tint: #0f2238;
    --img-edge: 0 0 0 1px rgba(255,255,255,.10), 0 8px 24px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--bg); color: var(--text);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.022em;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, pre { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(980px, 100% - 48px); margin-inline: auto; }
.nw { white-space: nowrap; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 52px; padding-inline: max(24px, calc((100% - 980px) / 2));
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 15px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.logo-mark { width: 28px; height: 28px; border-radius: 7px; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link { text-decoration: none; color: var(--muted); font-size: 13px; letter-spacing: 0; }
.nav-cta {
  text-decoration: none; background: var(--btn); color: var(--btn-text);
  padding: 5px 14px; border-radius: 980px; font-size: 13px; font-weight: 500; letter-spacing: 0;
}

/* Hero */
.hero { padding: 96px 0 0; text-align: center; overflow: hidden; }
.h1 {
  font: 700 clamp(40px, 6.4vw, 80px)/1.04 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.035em; text-wrap: balance;
}
.h1 > span { display: block; }
.h1-b { color: var(--muted); }
.lead {
  max-width: 34em; margin: 28px auto 0;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.38; letter-spacing: -0.02em; text-wrap: pretty;
}
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.btn {
  display: inline-block; text-decoration: none; background: var(--btn); color: var(--btn-text);
  font-size: 17px; font-weight: 500; padding: 12px 24px; border-radius: 980px; letter-spacing: -0.01em;
}
.btn-2 { background: transparent; color: var(--btn2-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.under { margin-top: 16px; color: var(--muted); font-size: 14px; letter-spacing: -0.01em; }

.hero-shot { width: min(1280px, 100% - 48px); margin: 72px auto 0; }
.window { filter: drop-shadow(0 30px 50px rgba(0,0,0,.22)); }
.window img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) {
  .window { filter: drop-shadow(0 30px 60px rgba(0,0,0,.8)); }
  .window img { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
}
.who {
  margin-top: 96px; padding-bottom: 112px;
  font: 600 clamp(24px, 3vw, 36px)/1.22 -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.03em; text-wrap: balance; max-width: 820px;
}

/* Sections */
.band { background: var(--band); padding: 112px 0; }
.h2 {
  font: 700 clamp(32px, 4.4vw, 56px)/1.07 -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.03em; margin-bottom: 48px;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps li { border-top: 1px solid var(--line); padding-top: 22px; }
.steps .n {
  display: block; font: 600 15px/1 -apple-system, system-ui, sans-serif; color: var(--muted);
  margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.steps p { font-size: 21px; line-height: 1.38; letter-spacing: -0.02em; font-weight: 500; text-wrap: pretty; }
.note { margin-top: 44px; color: var(--muted); font-size: 17px; }

/* What you get */
.get-sec { padding: 112px 0; width: min(1200px, 100% - 48px); }
.get-sec .h2 { width: min(980px, 100%); margin-inline: auto; margin-bottom: 48px; }
.get { display: flex; flex-direction: column; gap: 20px; }
.f {
  background: var(--tile); border-radius: 30px; overflow: hidden;
  display: grid; grid-template-columns: 330px 1fr; gap: 64px; padding: 64px 64px 0;
}
.f-text { align-self: start; padding-bottom: 64px; }
.f h3 { font: 700 32px/1.12 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
.f p { margin-top: 14px; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.f-img { align-self: end; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.f-img img { border-radius: 14px 14px 0 0; box-shadow: var(--img-edge); }
.f-search .shot-field { align-self: flex-end; width: 62%; }
.f-search .shot-field img { border-radius: 999px; }
.shot-hit { display: none; }
.f-names .f-img { align-items: center; }
.f-names .shot-side { width: 250px; }
.f-live .shot-now { width: 250px; }
.f-live .shot-now img { border-radius: 12px; }
.f-live .shot-live { width: 500px; }
.f-markdown { padding-bottom: 64px; align-items: center; }
.f-markdown .f-text { padding: 0; }
.f-markdown .f-img { align-self: center; align-items: stretch; }
.file {
  background: var(--bg); border-radius: 14px; padding: 22px 26px; box-shadow: var(--img-edge);
  font: 500 15px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); letter-spacing: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.md-mark { color: var(--muted); }
.md-b { font-weight: 700; }

/* Comparison: the table as the centrepiece, CaptionSnap's row highlighted. */
.compare-p { max-width: 44em; font-size: 19px; line-height: 1.47; margin: -16px 0 40px; text-wrap: pretty; }
table.cmp {
  width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--card); border-radius: 18px; box-shadow: 0 0 0 1px var(--line); overflow: hidden;
  font-size: 16px; letter-spacing: -0.01em;
}
table.cmp th, table.cmp td { text-align: left; vertical-align: top; }
table.cmp thead th {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding: 20px 20px 16px; border-bottom: 1px solid var(--line);
}
table.cmp tbody th, table.cmp td { padding: 24px 20px; border-bottom: 1px solid var(--line); }
table.cmp tbody tr:last-child > * { border-bottom: 0; }
table.cmp tbody th { font-size: 18px; font-weight: 600; width: 18%; }
table.cmp .c-how { width: 32%; }
table.cmp .c-audio, table.cmp .c-kept { width: 12%; }
table.cmp tr.me > * { background: var(--tint); }
table.cmp tr.me th { box-shadow: inset 4px 0 0 var(--accent-bar); font-size: 19px; }
table.cmp tr.me .c-audio, table.cmp tr.me .c-kept, table.cmp tr.me .c-price {
  color: var(--accent); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2;
}
.source { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* Lightweight */
.quiet-sec { padding: 112px 0; }
.quiet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.quiet li { border-top: 1px solid var(--line); padding-top: 22px; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.quiet strong { display: block; color: var(--text); font: 700 24px/1.17 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.025em; margin-bottom: 10px; }

/* Price */
.price { text-align: center; }
.price .h2 { margin-bottom: 20px; }
.price-h { font: 700 clamp(48px, 7vw, 96px)/1 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.04em; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.price p:not(.actions, .price-h) { font-size: 21px; letter-spacing: -0.02em; }
.price p:not(.actions, .price-h) + p:not(.actions) { margin-top: 6px; color: var(--muted); }

/* Questions */
.faq-sec { padding: 112px 0; }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.faq div { border-top: 1px solid var(--line); padding: 24px 0 32px; }
.faq dt { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.faq dd { margin-top: 8px; color: var(--muted); text-wrap: pretty; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px max(24px, calc((100% - 980px) / 2)); background: var(--band); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }
.foot nav + nav { margin-top: 14px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .nav-link:hover { color: var(--text); }

/* Text pages: guides, legal, changelog, share */
.page-content { width: min(720px, 100% - 48px); margin: 0 auto; padding: 72px 0 104px; }
.page-content h1 {
  font: 700 clamp(34px, 5vw, 48px)/1.08 -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.03em; margin-bottom: 16px; text-wrap: balance;
}
.page-content .lead { margin: 0 0 40px; max-width: none; font-size: 21px; }
.page-content h2 {
  font: 700 26px/1.2 -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.025em; margin: 48px 0 14px; text-wrap: balance;
}
.page-content h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 28px 0 8px; }
.page-content p, .page-content li { line-height: 1.6; text-wrap: pretty; }
.page-content p { margin-bottom: 16px; }
.page-content a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.page-content a.btn { color: var(--btn-text); text-decoration: none; }
.page-content ul, .page-content ol { margin-bottom: 16px; padding-left: 24px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: 6px; }
.page-content li::marker { color: var(--muted); }
.page-content strong { font-weight: 600; }
.page-content .last-updated { font-size: 14px; color: var(--muted); margin-bottom: 40px; }
.page-content .release + .release { border-top: 1px solid var(--line); margin-top: 48px; }
.page-content .release h2 { margin-top: 48px; margin-bottom: 4px; }
.page-content .release .last-updated { margin-bottom: 16px; }
.page-content .summary, .page-content .info-block, .page-content .withdrawal-form, .page-content .box {
  background: var(--band); border-radius: 18px; padding: 22px 26px; margin: 0 0 24px;
}
.page-content .summary p { font-weight: 600; margin-bottom: 0; }
.page-content .caps { text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.page-content figure { margin: 8px 0 32px; }
.page-content figure img { border-radius: 14px; box-shadow: var(--img-edge); }
.page-content .actions { justify-content: flex-start; margin: 24px 0 8px; }
.page-content .faq { grid-template-columns: 1fr; }
.page-content .faq div { padding: 20px 0 22px; }
.page-content .faq dd { margin-top: 6px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Share */
.share-page { text-align: center; }
.share-page .steps { text-align: left; margin: 40px 0; gap: 28px; padding-left: 0; list-style: none; }
.share-page .steps li { margin: 0; }
.share-page .steps h2 { font: inherit; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.share-page .steps p { font-size: 17px; font-weight: 400; color: var(--muted); margin: 0; }
.share-page .box { text-align: left; }
.share-page .box .label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.share-page .box p:last-child { margin-bottom: 0; }
.share-page .actions { justify-content: center; }
.share-page .under { margin-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-shot { animation: rise .9s cubic-bezier(.2,.7,.2,1) both .1s; }
  @keyframes rise { from { transform: translateY(24px); } }
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Phone */
@media (max-width: 760px) {
  .hero { padding-top: 56px; }
  .lead { margin-top: 20px; }
  .hero-shot { width: calc(100% - 32px); margin-top: 48px; }
  .window { filter: none; }
  .window img { border-radius: 12px; box-shadow: var(--img-edge); }
  .who { margin-top: 56px; padding-bottom: 72px; text-align: left; }
  .band, .get-sec, .quiet-sec, .faq-sec { padding: 72px 0; }
  .h2 { margin-bottom: 32px; }
  .steps, .get, .quiet, .faq { grid-template-columns: 1fr; gap: 28px; }
  .get { gap: 16px; }
  .get-sec { width: calc(100% - 32px); }
  .get-sec .h2 { padding-inline: 8px; }
  .f { grid-template-columns: 1fr; padding: 32px 22px 0; border-radius: 22px; gap: 24px; }
  .f-text { padding: 0; }
  .f-markdown { padding-bottom: 22px; }
  .f-names .shot-side { margin-inline: auto; }
  .f-live .shot-live { width: 100%; }
  .f h3 { font-size: 24px; }
  .f-search .shot-field { width: 100%; }
  .f-search .shot-hit img { border-radius: 12px 12px 0 0; }
  .file { font-size: 14px; padding: 16px 18px; }
  .compare-p { font-size: 17px; margin: -8px 0 24px; }
  /* The table becomes one card per app; CaptionSnap's card keeps its tint and bar. */
  table.cmp, table.cmp tbody, table.cmp tr, table.cmp th, table.cmp td { display: block; }
  table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cmp tr { padding: 18px 18px; border-bottom: 1px solid var(--line); }
  table.cmp tbody tr:last-child { border-bottom: 0; }
  table.cmp tbody th, table.cmp td { width: auto !important; border: 0; padding: 4px 0; background: none !important; box-shadow: none !important; }
  table.cmp tbody th { font-size: 19px; padding-bottom: 8px; }
  table.cmp td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; }
  table.cmp td::before { content: attr(data-label); color: var(--muted); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; line-height: 1.47; }
  table.cmp tr.me { background: var(--tint); box-shadow: inset 4px 0 0 var(--accent-bar); }
  table.cmp tr.me .c-audio, table.cmp tr.me .c-kept, table.cmp tr.me .c-price { font-size: 19px; }
  .quiet { gap: 24px; }
  .faq div { padding: 20px 0 24px; }
  .page-content { width: calc(100% - 40px); padding: 48px 0 72px; }
  .page-content .lead { font-size: 19px; }
  .nav-link { display: none; }
}
@media (max-width: 640px) {
  .nw { white-space: normal; }
  .shot-lines { display: none; }
  .shot-hit { display: block; }
}