/* The JOV apps' landing pages (web/get/) and the content pages (About, Contact, Changelog, the
   blog). The tokens, the header, the footer and the buttons are in ../assets/css/base.css.
   A landing page is built like a Mac app's own page: white, the app icon and one large Download
   button centred at the top, one window of the app, then quiet left-aligned text. */

html { scroll-padding-top: 24px; }

/* ---------- The landing pages' view switch: Simple View (this page) and Desktop View ---------- */
/* Just before the header's Download button, which stays the one filled button. */
.view-switch { display: inline-flex; flex: none; padding: 2px; border-radius: 10px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }
.view-switch a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.view-switch a:hover { color: var(--text); text-decoration: none; }
.view-switch a[aria-current="page"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--line); }
.view-switch svg { inline-size: 16px; block-size: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Up to 1040 px the six links, the switch's two names and Download don't fit on one line: the
   switch shows its icons only (each keeps its name for screen readers), so the header stays one row. */
@media (max-width: 1040px) {
  .view-switch a { min-width: 34px; justify-content: center; padding: 0 6px; }
  .view-switch span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .header-inner:has(.view-switch) { gap: 8px 14px; }
  .header-inner:has(.view-switch) .nav-links { gap: 0 14px; }
}
@media (max-width: 720px) {
  .view-switch { align-self: center; }
  .view-switch a { min-width: 34px; min-height: 36px; justify-content: center; padding: 0 6px; }
  .site-header .header-cta { padding: 0 10px; }
  .view-switch span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 400px) {
  .header-inner:has(.view-switch) .brand { gap: 6px; font-size: 15px; }
  .header-inner:has(.view-switch) .header-cta { padding: 0 8px; font-size: 14px; }
}
/* The narrowest phones: the logo and JOV, without the app's name, so the switch keeps its place. */
@media (max-width: 360px) {
  .header-inner:has(.view-switch) .brand-app { display: none; }
  .view-switch a { min-width: 32px; padding: 0 4px; }
}

/* ---------- Hero: icon, name, one sentence, the Download button ---------- */
/* A glow of the app's colour behind the top of the page, deeper in dark appearance. */
body.get[data-app] { --glow: color-mix(in srgb, var(--accent) 13%, transparent); }
@media (prefers-color-scheme: dark) { body.get[data-app] { --glow: color-mix(in srgb, var(--accent) 30%, transparent); } }
.hero { padding: 40px 0 36px; text-align: center; }
body[data-app] .hero { background: radial-gradient(70% 100% at 50% 0%, var(--glow), transparent 72%); }
body[data-app] .hero-stage { position: relative; }
body[data-app] .hero-stage::before { content: ""; position: absolute; inset: 10% 0 0; z-index: -1; background: radial-gradient(60% 50% at 50% 45%, var(--glow), transparent 70%); pointer-events: none; }
.hero-icon { display: block; width: 48px; height: 48px; margin: 0 auto 6px; border-radius: 11px; }
.hero-name { margin: 0 0 8px; font-family: var(--display); font-size: 21px; font-weight: 600; }
.hero h1 { max-width: 17em; margin: 0 auto 16px; font-size: 56px; line-height: 1.05; text-wrap: balance; }
.get-lead { max-width: 44em; margin: 0 auto 28px; font-size: 21px; line-height: 1.4; text-wrap: balance; }
/* Download is the large filled button; Try It in Your Browser opens the desktop view beside it. */
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.hero-try { min-height: 58px; padding: 0 28px; border-radius: 999px; font-size: 19px; }
.hero-stage { padding-bottom: 72px; }
.get-meta { margin: 16px 0 0; color: var(--text-2); font-size: 13px; }
.get-meta a { text-decoration: underline; text-underline-offset: 0.18em; }

.get-started, .get-notmac { max-width: 32em; margin: 24px auto 0; padding: 12px 16px; border-radius: var(--radius); background: var(--bg-alt); font-size: 15px; }
.get-started[hidden], .get-notmac[hidden] { display: none; }

/* On a phone: send the page to yourself, to open it on the Mac (web/get/get.js). Nothing is sent
   anywhere by the page: Copy Link uses the clipboard, Email Me the Link opens the mail app. */
.get-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 32em; margin: 16px auto 0; }
.get-share[hidden] { display: none; }
.get-share .button { font-size: 15px; font-weight: 600; padding: 0 16px; }
.get-copy-field { position: fixed; top: 0; left: -9999px; opacity: 0; }
.get-copied { flex-basis: 100%; min-height: 1.5em; margin: 0; color: var(--text-2); font-size: 13px; }

/* ---------- Screenshots: real windows of the app, each with a caption ---------- */
figure { margin: 0; }
figure picture { display: block; }
figure img { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--shot-shadow); }
/* In dark appearance a screenshot or install picture of a light window is dimmed a little, so it
   doesn't glare on the dark page. A picture with its own dark version isn't. */
@media (prefers-color-scheme: dark) {
  figure picture:not(:has(source[media])) img, .step img { filter: brightness(0.82); }
}
figcaption { margin: 12px 0 0; color: var(--text-2); font-size: 13px; }
.stage { padding: 40px 40px 16px; border-radius: var(--radius); background: var(--bg-alt); }
.stage figcaption { text-align: center; }

/* ---------- Sections ---------- */
.block { padding: 72px 0; }
.block-alt { background: var(--band); }
/* The app's own pages: the sections take turns between the page and a tinted band. */
body[data-app] #formats { background: var(--bg-alt); border-top: 0; }
body[data-app] #price { border-top: 0; }
.block-line { border-top: 1px solid var(--line); }
.block h2 { margin: 0 0 24px; }
.block .container > p { max-width: var(--prose); }
.block-lead { margin: -12px 0 32px; }

/* What the app does: the text at the left and its screenshot at the right, always that way round.
   A row without a screenshot has its heading at the left and its text at the right; the price,
   the questions, the guides and the other apps below are rows of that kind too, so the whole
   page keeps one grid. */
.rows { display: grid; gap: 72px; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.row > h2 { grid-column: span 5; margin: 0; }
.row > .row-text { grid-column: span 7; }
.row-shot { align-items: center; }
.row-shot > .row-text { grid-column: span 6; padding-inline-end: 48px; }
.row-shot h2 { margin: 0 0 16px; }
.row-picture { grid-column: span 6; }
.row-picture-tall picture { max-width: 320px; margin: 0 auto; }
.row-picture-tall figcaption { text-align: center; }
.row-text p:last-child { margin-bottom: 0; }

/* The stage behind a row's live window: the colour of the kind of file it works on (the app's
   own colour on JOV Cleaner's and JOV Control's pages). */
.row-live { --k: var(--accent); position: relative; padding: 18px 18px 14px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--k) 22%, var(--line));
  background: linear-gradient(150deg, color-mix(in srgb, var(--k) 16%, var(--bg-alt)), color-mix(in srgb, var(--k) 4%, var(--bg-alt)) 70%); }
.kind-docx { --k: #2f6fe4; } .kind-xlsx { --k: #1f9d55; } .kind-pptx { --k: #e0602a; } .kind-pdf { --k: #d93a3a; }
@media (prefers-color-scheme: dark) {
  .row-live { background: linear-gradient(150deg, color-mix(in srgb, var(--k) 26%, var(--bg-alt)), color-mix(in srgb, var(--k) 7%, var(--bg-alt)) 70%); }
}

/* Coming into view once (web/assets/js/reveal.js): a row's text, then its window; a section's
   heading; the formats' rows tick in; the install steps one after another. */
@media (prefers-reduced-motion: no-preference) {
  html.js .row[data-reveal]:not(.is-now) > *, html.js .sec-head[data-reveal]:not(.is-now), html.js .steps[data-reveal]:not(.is-now) > li,
  html.js .guide-cards[data-reveal]:not(.is-now) > li, html.js .closing-get[data-reveal]:not(.is-now),
  html.js .formats[data-reveal]:not(.is-now) tbody tr { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  html.js .row[data-reveal]:not(.is-in) > *, html.js .sec-head[data-reveal]:not(.is-in), html.js .closing-get[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
  html.js .row[data-reveal]:not(.is-in) > .row-live { transform: translateY(48px) scale(0.96); }
  .row[data-reveal] > :nth-child(2) { transition-delay: 140ms; }
  html.js .steps[data-reveal]:not(.is-in) > li, html.js .guide-cards[data-reveal]:not(.is-in) > li { opacity: 0; transform: translateY(24px); }
  :is(.steps, .guide-cards) > li:nth-child(2) { transition-delay: 100ms; } :is(.steps, .guide-cards) > li:nth-child(3) { transition-delay: 200ms; } :is(.steps, .guide-cards) > li:nth-child(4) { transition-delay: 300ms; }
  html.js .formats[data-reveal]:not(.is-in) tbody tr { opacity: 0; transform: translateX(-16px); }
  html.js .formats[data-reveal]:not(.is-now) td.yes::before { transition: transform 360ms var(--ease-pop); }
  html.js .formats[data-reveal]:not(.is-in) td.yes::before { transform: scale(0); }
  .formats tbody tr:nth-child(2), .formats tbody tr:nth-child(2) td.yes::before { transition-delay: 80ms; } .formats tbody tr:nth-child(3), .formats tbody tr:nth-child(3) td.yes::before { transition-delay: 160ms; }
  .formats tbody tr:nth-child(4), .formats tbody tr:nth-child(4) td.yes::before { transition-delay: 240ms; } .formats tbody tr:nth-child(5), .formats tbody tr:nth-child(5) td.yes::before { transition-delay: 320ms; }
  .formats tbody tr:nth-child(6), .formats tbody tr:nth-child(6) td.yes::before { transition-delay: 400ms; }
}
/* One moment driven by the scroll itself, where the browser can: the first window tilts back
   and straightens as the page scrolls. Elsewhere, and with reduced motion, it simply stands. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-stage > .lv { animation: stage-up linear both; animation-timeline: view(); animation-range: cover 0% cover 42%; }
    @keyframes stage-up { from { transform: perspective(1800px) rotateX(9deg) scale(0.95); } to { transform: none; } }
  }
}

/* JOV Office: what it opens, edits and saves. */
.table-scroll { overflow-x: auto; }
.formats { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: 15px; }
.formats th, .formats td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; font-weight: 400; }
.formats thead th { background: var(--bg-alt); font-weight: 600; }
.formats tbody tr:last-child > * { border-bottom: 0; }
.formats tbody th { white-space: nowrap; }
.formats th:first-child { width: 30%; }
.formats th:nth-child(2) { width: 10%; }
.formats th:last-child, .formats td:last-child { width: 9em; white-space: nowrap; }
.formats .mono { font-weight: 600; }
.fmt-short { display: none; }
@media (max-width: 480px) { .fmt-long { display: none; } .fmt-short { display: inline; } }
.formats { background: var(--bg); }
.formats td.yes:not(:last-child) { white-space: nowrap; }
.formats td.yes::before { content: ""; display: inline-block; inline-size: 0.32em; block-size: 0.62em; margin: 0 0.6em 0.12em 0.12em; border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.format-kind { color: var(--text-2); margin-inline-start: 8px; }

/* The install steps: four pictures of the same shape in one line on a computer (two on a tablet,
   one on a phone), each with its sentence. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin: 0 0 20px; padding: 0; list-style: none; }
.step img { display: block; width: 100%; aspect-ratio: 880 / 560; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line), 0 12px 24px -16px rgb(0 0 0 / 0.35); }
.step p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }
#install { padding: 56px 0; }
#install .block-lead { margin-bottom: 24px; }

/* A section's heading with one line or link beside it. */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 20px; }
.block .sec-head h2 { margin: 0; }
.sec-head p { margin: 0; }
.sec-link { font-size: 15px; font-weight: 600; }

/* One guide: a line under the questions. */
.faq-guide { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: none; margin: 20px 0 0; font-size: 15px; }
.faq-guide span { padding: 2px 8px; border-radius: 999px; background: var(--band); color: var(--text-2); font: 600 13px/1.5 var(--font-mono); }
.faq-guide a:first-of-type { color: var(--text); font-weight: 600; }
.faq-guide .sec-link { margin-inline-start: auto; }

/* Questions: two columns of short questions, each opening in place; the rest under More Questions. */
#questions { padding: 56px 0 40px; }
.faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 40px; }
.qa { border-bottom: 1px solid var(--line); }
.faq-cols > .qa:nth-child(-n+2) { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker, .faq-rest > summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; color: var(--text-2); font-size: 21px; font-weight: 400; line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa p { margin: 0 0 14px; padding-inline-end: 24px; font-size: 15px; }
.faq-more { color: var(--text-2); font-size: 15px; }
.faq-rest { grid-column: 1 / -1; }
.faq-rest > summary { display: inline-flex; align-items: center; min-height: 44px; margin: 16px 0 0; padding: 0 20px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-rest > summary:hover { background: var(--band); }
.faq-close, .faq-rest[open] .faq-open { display: none; }
.faq-rest[open] .faq-close { display: inline; }
.faq-rest[open] > summary { order: 2; }
.faq-rest[open] { display: flex; flex-direction: column; }
.faq-rest[open] > summary { align-self: flex-start; }
/* Chromium lays a <details>' content in a ::details-content box; keep it full width. */
.faq-rest::details-content { inline-size: 100%; }
.faq-rest > .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 40px; }

/* Guides: one row of cards with the kind of file each is about, then the rest as a line of links. */
.guides { margin: 0; padding: 0; list-style: none; }
.guide-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guide-cards li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--radius); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }
.guide-cards li::before { content: attr(data-kind); align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--band); color: var(--text-2); font: 600 13px/1.5 var(--font-mono); }
.guide-cards a { color: var(--text); font-weight: 600; line-height: 1.35; }
.guide-cards a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-cards li:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.guide-cards li:hover a { color: var(--accent-text); text-decoration: none; }
.guide-more { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 14px 0 0; font-size: 15px; }
.guide-more a { display: inline-flex; align-items: center; min-height: 32px; }
#guides { padding: 40px 0 48px; }
@media (prefers-reduced-motion: no-preference) {
  .guide-cards li { transition: transform var(--m-fast) var(--ease-out), box-shadow var(--m-fast), opacity 600ms var(--ease-out); }
  .guide-cards li:hover { transform: translateY(-2px); }
}

/* The end of the page: Download again (the same button as at the top) beside the other two apps, in one band. */
.closing { padding: 40px 0; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--band)), var(--band) 60%); border-top: 1px solid var(--line); }
.closing-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px 56px; }
.closing-get { text-align: center; }
.closing-get .get-meta { max-width: 26em; margin-inline: auto; }
.closing-get .get-meta { margin-top: 10px; }
.other-apps h2 { margin: 0 0 8px; color: var(--text-2); font: 600 13px/1.5 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.other { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.other img { flex: none; width: 40px; height: 40px; border-radius: 9px; }
.other h3 { margin: 0; font-size: 15px; }
.other p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.other a { font-weight: 600; white-space: nowrap; }

/* ---------- Content pages: About, Contact, Changelog, the blog (scripts/site/site_shell.py) ---------- */
.page-top { padding: 72px 0 0; }
.page-top h1 { margin: 0; line-height: 1.15; }
.page-lead { margin: 16px 0 0; font-size: 21px; line-height: 1.4; }
.page-body { padding: 32px 0 72px; }
.doc { line-height: 1.65; }
.doc h2 { margin: 40px 0 12px; }
.doc h3 { margin: 32px 0 8px; }
.doc > :first-child { margin-top: 0; }
.doc li { margin: 0 0 8px; }
.doc a { text-decoration: underline; text-underline-offset: 0.18em; }
.doc code { padding: 1px 4px; border-radius: 4px; background: var(--bg-alt); font-family: var(--font-mono); font-size: 15px; }
.doc pre { overflow-x: auto; padding: 16px; border-radius: var(--radius); background: var(--bg-alt); line-height: 1.55; }
.doc pre code { padding: 0; background: none; }
.doc img { display: block; margin: 24px 0; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.doc figure { margin: 24px 0; }
.doc figure img { margin: 0; }
.doc blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--line-strong); }
.doc table { width: 100%; margin: 0 0 16px; border-collapse: collapse; border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.doc th, .doc td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.doc thead th { background: var(--bg-alt); font-weight: 600; }
.doc .note { padding: 16px; border-radius: var(--radius); background: var(--bg-alt); }

/* The blog: where a page is on the site, a post's first lines, the box at its end, the related
   posts, and the list of all posts. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; color: var(--text-2); font-size: 15px; }
.post-meta { margin: 12px 0 0; color: var(--text-2); font-size: 13px; }
.doc .table-scroll { margin: 0 0 16px; }
.doc .table-scroll table { margin: 0; min-width: 34em; }
.doc tbody th { font-weight: 600; }
.post-end { margin: 48px 0 0; padding: 24px; border-radius: var(--radius); background: var(--bg-alt); line-height: 1.55; }
.post-end p { margin: 0 0 16px; }
.doc .post-end .button { text-decoration: none; }
.more-posts { margin: 48px 0 0; }
.more-posts h2 { margin: 0 0 16px; font-size: 21px; }
.more-posts .post-list li { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.more-all { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.doc .post-list { margin: 0; padding: 0; list-style: none; }
.post-list li { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.post-index li:first-child { padding-top: 0; }
.post-list h2 { margin: 0 0 4px; font-size: 21px; line-height: 1.3; letter-spacing: 0; }
.post-list h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.4; letter-spacing: 0; }
.doc .post-list h2 a, .doc .post-list h3 a { color: var(--text); text-decoration: none; }
.doc .post-list h2 a:hover, .doc .post-list h3 a:hover { color: var(--accent-text); text-decoration: underline; }
.post-list p { margin: 0; color: var(--text-2); }
.post-list .post-meta { margin: 8px 0 0; }
/* The list of posts: what kind of file each is about, which fades in once; a post lifts under the pointer. */
.post-index li { margin-inline: -16px; padding-inline: 16px; border-radius: var(--radius); }
.post-kind { display: inline-block; margin: 0 0 8px; padding: 2px 8px; border-radius: 999px; background: var(--bg-alt); color: var(--text-2); font: 600 13px/1.5 var(--font-mono); }
@media (prefers-reduced-motion: no-preference) {
  .post-index li { transition: transform var(--m-fast) var(--ease-out), box-shadow var(--m-fast); }
  .post-index li:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35); }
  html.js .post-kind:not(.is-now) { transition: opacity var(--m-slow), transform var(--m-slow) var(--ease-out); }
  html.js .post-kind:not(.is-in) { opacity: 0; transform: translateY(6px); }
  .post-index li:nth-child(2) .post-kind { transition-delay: 60ms; } .post-index li:nth-child(3) .post-kind { transition-delay: 120ms; }
  .post-index li:nth-child(4) .post-kind { transition-delay: 180ms; } .post-index li:nth-child(5) .post-kind { transition-delay: 240ms; }
}
.more-posts .post-list p { font-size: 15px; }

/* The app pages: the guide under a row's text (the list of guides is with the questions, above). */
.row-guide { font-size: 15px; }

/* The Changelog. */
.release { padding: 24px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.release:first-of-type { padding-top: 8px; }
.release h3 { margin: 0 0 4px; }
.release h3 a { color: var(--text); text-decoration: none; }
.release h3 a:hover { color: var(--accent-text); }
.release time { display: block; margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.release p:last-child, .release ul:last-child { margin-bottom: 0; }
.apps-jump { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; }
.apps-jump a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 0.18em; }

/* Contact: where the help is in each app. */
.doc .help-apps { margin: 0 0 16px; padding: 0; list-style: none; }
.help-apps li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.help-apps li:first-child { border-top: 1px solid var(--line); }
.help-apps h3 { margin: 0 0 4px; font-size: 17px; }
.help-apps p { margin: 0; }

/* ---------- Smaller screens ---------- */
@media (max-width: 820px) {
  .hero { padding: 48px 0 32px; }
  .hero h1 { font-size: 40px; line-height: 1.1; }
  .stage { padding: 24px 24px 12px; }
  .rows { gap: 48px; }
  .row { display: block; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-cols, .faq-rest > .faq { grid-template-columns: 1fr; }
  .faq-cols > .qa:nth-child(2) { border-top: 0; }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-in { grid-template-columns: 1fr; }
  .row-live { padding: 12px 12px 10px; border-radius: 16px; }
  .row > h2, .row-shot h2 { margin: 0 0 12px; }
  .row-shot > .row-text { padding: 0; }
  .row-picture { margin-top: 24px; }
  /* A screenshot is 880 px wide: no wider than 560 here, so it stays sharp on a Retina screen. */
  .row-picture picture { max-width: 560px; }
  .row-picture figcaption { max-width: 560px; }
  .row-picture-tall picture { max-width: 320px; }
  .steps { gap: 24px; }
}
@media (max-width: 520px) {
  .hero { padding: 32px 0 24px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-stage { padding-bottom: 48px; }
  .get-lead { font-size: 17px; line-height: 1.55; }
  .button-download { display: block; min-width: 0; }
  .stage { padding: 12px 12px 8px; }
  .block { padding: 48px 0; }
  .closing { padding: 32px 0; }
  #questions, #install { padding: 40px 0 32px; }
  #guides { padding: 32px 0 40px; }
  .guide-cards { grid-template-columns: 1fr; gap: 10px; }
  .guide-cards li { flex-direction: row; align-items: center; padding: 12px 14px; }
  .guide-cards li::before { flex: none; }
  .others { grid-template-columns: 1fr; gap: 8px; }
  .page-top { padding: 48px 0 0; }
  .page-top h1 { font-size: 28px; line-height: 1.2; }
  .page-body { padding: 24px 0 48px; }
  .page-lead { font-size: 17px; line-height: 1.55; }
  .steps { gap: 16px 12px; }
  .step p { font-size: 14px; }
  .formats th, .formats td { padding: 8px; }
  .formats th:first-child, .formats th:nth-child(2) { width: auto; }
  .formats th:last-child, .formats td:last-child { width: auto; }
  .format-kind { display: none; }
  .post-end .button { display: flex; }
}