/* ProctorReady download page. Cordaves brand kit colours (website-design-test/cordaves-ci/final/kit/tokens.css),
   the app's own layout (navy header band with rounded lower corners, white rounded cards, dark pill, filled crimson
   primary and outlined secondary buttons), the Station mark variant A, Big Shoulders as the voice (as on sialia.app)
   and Archivo for reading (as on cordaves.com). All fonts self-hosted, SIL OFL. No inline style: the CSP of
   cordaves.com allows only this file. */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/BigShoulders-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("../fonts/BigShoulders-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --navy: #1A2440;
  --raven: #131313;
  --crimson: #B0122E;
  --crimson-hover: #960F27;
  --page: #F3F1EC;
  --surface: #FFFFFF;
  --text: #131313;
  --muted: #3E3F42;            /* 10.1:1 on paper */
  --line: #DDD9D0;
  --ok: #02592A; --note: #0135AB; --check: #531395; --fix: #B0122E;
  --display: "Big Shoulders", "Arial Narrow", "Bahnschrift", sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 112px);
  --r-card: 20px;
  --r-btn: 12px;
  --shadow: 0 1px 2px rgb(19 19 19 / .06), 0 8px 24px rgb(26 36 64 / .10);
  color-scheme: light;
}

/* ---------- the two bands (header and download): light by default; the navy look is dark mode, switched on by a
   click on the header logo and not stored (as on cordaves.com) ---------- */
:root {
  --b-bg: #FFFFFF; --b-text: #131313; --b-muted: #3E3F42; --b-label: #B0122E; --b-shadow: 0 1px 0 #DDD9D0;
  --b-btn: #B0122E; --b-btn-text: #FFFFFF; --b-btn-hover: #960F27; --b-ghost-hover: rgb(19 19 19 / .06);
  --b-panel: #F3F1EC; --b-panel-line: #DDD9D0; --b-rule: #DDD9D0; --b-focus: #0135AB; --b-dl-border: 1px solid #DDD9D0;
  --b-badge: #1A2440; --b-badge-text: #F3F1EC;
  --b-mark-main: #B0122E; --b-mark-side: #1A2440; --b-mark-desk: #131313; --b-mark-desk-o: .3;
  --d-desk: #E4DED2; --d-metal: #2B2D32; --d-kbd: #CFC9BD; --d-key: #B8B1A3; --d-screen: #FFFFFF; --d-line: #D6D3CC; --d-line-b: #9A978F; --d-av: #CDCFD4; --d-cell: #E2E6EE; --d-cell-h: #AEB6C6;
}
:root[data-theme="dark"] {
  --b-bg: #1A2440; --b-text: #F3F1EC; --b-muted: #CDCFD4; --b-label: #F07A8C; --b-shadow: none;
  --b-btn: #E8455F; --b-btn-text: #131313; --b-btn-hover: #F06177; --b-ghost-hover: rgb(243 241 236 / .1);
  --b-panel: #222E50; --b-panel-line: rgb(205 207 212 / .18); --b-rule: rgb(205 207 212 / .25); --b-focus: #F3F1EC; --b-dl-border: 0;
  --b-badge: #F3F1EC; --b-badge-text: #131313;
  --b-mark-main: #D0243F; --b-mark-side: #CDCFD4; --b-mark-desk: #F3F1EC; --b-mark-desk-o: .35;
  --d-desk: #3A4566; --d-metal: #0E0F12; --d-kbd: #4E5A7E; --d-key: #66729A;
}
.hero, .dl { transition: background 300ms, color 300ms; }
@media (prefers-reduced-motion: reduce) { .hero, .dl { transition: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--crimson); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--crimson-hover); }
:focus-visible { outline: 3px solid var(--note); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .dl :focus-visible { outline-color: var(--b-focus); }
code { font: 700 .88em/1 var(--mono); }
kbd { display: inline-block; min-width: 2.2em; padding: 4px 8px; border: 2px solid var(--raven); border-bottom-width: 4px; border-radius: 8px; background: var(--surface); font: 700 .8125rem/1 var(--mono); text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: 8px; }
[hidden] { display: none !important; }
.shot-hint { display: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; font-synthesis: none; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 5.25rem); line-height: .9; letter-spacing: .005em; color: var(--b-text); }
h1 em { font-style: normal; color: var(--b-label); display: block; white-space: nowrap; }
h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: .005em; color: var(--raven); }
h3 { font-size: 1.625rem; line-height: 1.05; letter-spacing: .01em; color: var(--raven); }
.eyebrow { margin: 0 0 14px; font: 600 1rem/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); }
.eyebrow--navy { color: var(--b-label); }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; margin: 22px 0 0; max-width: 40ch; color: var(--muted); text-wrap: pretty; }
.hero .lead, .dl .lead { color: var(--b-muted); }
.lead--dark { color: var(--muted); max-width: 52ch; }
.prose p, .prose li { text-wrap: pretty; }
.prose > p { margin: 0 0 16px; max-width: 62ch; }
.prose h3 { margin-bottom: 12px; }
.small { font-size: .9375rem; color: var(--muted); }
.fine { margin: 0; font-size: .9375rem; color: var(--b-muted); text-wrap: balance; }
.hero__text { grid-column: 1; grid-row: 1; }
.hero .demo { grid-column: 2; grid-row: 1 / span 2; }
.hero .fine { grid-column: 1; grid-row: 2; align-self: start; margin-top: -8px; }

/* ---------- buttons: the app's buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--r-btn); font: 700 1.1875rem/1 var(--display); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; transition: background 120ms, transform 80ms, color 120ms; }
.btn:active { transform: translateY(1px); }
.btn--s { min-height: 44px; padding: 0 18px; font-size: 1.0625rem; }
.btn--primary { background: var(--crimson); color: #fff; }
.btn--primary:hover { background: var(--crimson-hover); color: #fff; }
.btn--on-navy { background: var(--b-btn); color: var(--b-btn-text); }
.btn--on-navy:hover { background: var(--b-btn-hover); color: var(--b-btn-text); }
.btn--ghost { border-color: var(--b-text); color: var(--b-text); background: transparent; }
.btn--ghost:hover { background: var(--b-ghost-hover); color: var(--b-text); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

/* ---------- lockup: Station mark A + "Proctor" + "Ready"; mark = 1.5 x cap height, gap = mark / 4 ---------- */
.lockup { --fs: 2.25rem; display: inline-flex; align-items: center; gap: calc(var(--fs) * .27); text-decoration: none; }
.mark { width: calc(var(--fs) * 1.08); height: calc(var(--fs) * 1.08); flex: none; }
.m-main { fill: var(--crimson); }
.m-side { fill: var(--navy); }
.m-tick { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.m-desk { fill: var(--raven); opacity: .3; }
.word { font: 700 var(--fs)/1 var(--display); letter-spacing: .005em; color: var(--raven); white-space: nowrap; }
.word span { color: var(--crimson); }
.hero .m-main { fill: var(--b-mark-main); }
.hero .m-side { fill: var(--b-mark-side); }
.hero .m-desk { fill: var(--b-mark-desk); opacity: var(--b-mark-desk-o); }
.hero .word { color: var(--b-text); }
.hero .word span { color: var(--b-label); }
button.lockup { border: 0; padding: 4px 0; margin: 0; background: none; cursor: pointer; min-height: 48px; font: inherit; border-radius: 10px; }
button.lockup:hover .word span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- hero: the app header band ---------- */
.hero { background: var(--b-bg); color: var(--b-text); box-shadow: var(--b-shadow); border-radius: 0 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 7vw, 96px); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav a:not(.btn) { color: var(--b-text); font: 600 1.1875rem/1 var(--display); letter-spacing: .04em; text-decoration: none; padding: 13px 4px; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { border-bottom-color: var(--b-label); color: var(--b-text); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.16fr); grid-template-rows: auto 1fr; gap: 20px clamp(32px, 5vw, 64px); align-items: start; padding-top: clamp(24px, 4vw, 56px); }

/* the desk scene: a real-looking desk that switches to exam mode once, then rests */
.demo { position: relative; margin: 0; background: var(--b-panel); border: 1px solid var(--b-panel-line); border-radius: var(--r-card); padding: 20px 20px 16px; }
.badge { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-block; padding: 7px 12px; background: var(--b-badge); color: var(--b-badge-text); font: 700 .9375rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; transition: background 300ms, color 300ms; }
.demo.is-exam .badge { background: var(--b-btn); color: var(--b-btn-text); }
.desk { width: 100%; height: auto; display: block; margin-top: 18px; }
.desk__top { fill: var(--d-desk); }
.bezel, .neck, .foot, .cam { fill: var(--d-metal); }
.lens { fill: #4A90D9; }
.kbd, .mouse { fill: var(--d-kbd); }
.key { fill: var(--d-key); }
.scrn { fill: var(--d-screen); }
.ln { fill: var(--d-line); } .ln--b { fill: var(--d-line-b); }
.av { fill: var(--d-av); }
.cell { fill: var(--d-cell); } .cell--h { fill: var(--d-cell-h); }
.bub { fill: var(--d-cell-h); } .bub--me { fill: #0135AB; }
.tw-bar { fill: #1A2440; } .tw-dot { fill: #D0243F; } .tw-name { fill: #F3F1EC; font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; } .tw-timer { fill: #F3F1EC; }
.opt { fill: none; stroke: var(--d-line-b); stroke-width: 2; } .opt--on { fill: #B0122E; stroke: #B0122E; }
.tw-next { fill: #B0122E; }
.off { fill: #17191D; opacity: 0; transition: opacity 600ms ease; }
.off-t { fill: #8D93A3; font: 700 22px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; opacity: 0; transition: opacity 600ms ease 200ms; }
.content--exam { opacity: 0; transition: opacity 500ms ease 300ms; }
.content--normal { transition: opacity 400ms ease; }
.demo.is-exam .off, .demo.is-exam .off-t { opacity: 1; }
.demo.is-exam .content--exam { opacity: 1; }
.demo.is-exam .content--normal { opacity: 0; }
.demo__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.ready { background: #FFFFFF; color: #131313; border-radius: 14px; padding: 12px 14px 8px; border: 1px solid var(--b-panel-line); opacity: 0; transform: translateY(8px); transition: opacity 400ms ease 700ms, transform 400ms ease 700ms; }
.ready__h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; font: 700 1.0625rem/1.1 var(--display); letter-spacing: .02em; }
.ready__ex { font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #3E3F42; }
.ready ul { list-style: none; margin: 0; padding: 0; }
.ready li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .9375rem; line-height: 1.25; opacity: 0; transition: opacity 250ms ease; }
.ready li svg { width: 16px; height: 16px; flex: none; }
.ready li svg rect { fill: #02592A; } .ready li svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.demo.is-exam .ready { opacity: 1; transform: none; }
.demo.is-exam .ready li { opacity: 1; }
.demo.is-exam .ready li:nth-child(1) { transition-delay: 1000ms; } .demo.is-exam .ready li:nth-child(2) { transition-delay: 1300ms; }
.demo.is-exam .ready li:nth-child(3) { transition-delay: 1600ms; } .demo.is-exam .ready li:nth-child(4) { transition-delay: 1900ms; }
.demo figcaption { text-wrap: balance; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 2px; font-size: .9375rem; color: var(--b-muted); }
.replay { min-height: 44px; padding: 0 14px; border: 2px solid var(--b-text); border-radius: 10px; background: transparent; color: var(--b-text); font: 600 1rem/1 var(--display); letter-spacing: .04em; cursor: pointer; }
.replay:hover { background: var(--b-ghost-hover); }
@media (prefers-reduced-motion: reduce) { .off, .off-t, .content--exam, .content--normal, .ready, .ready li, .badge { transition: none !important; } }
.tag-bg { fill: #1A2440; } .tag-t { fill: #F3F1EC; font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
:root[data-theme="dark"] .demo { background: #121A30; }
@media (max-width: 600px) { .demo__foot { grid-template-columns: minmax(0, 1fr); } .ready { transform: none; } .badge { top: 14px; left: 14px; } }

/* ---------- the founder's story ---------- */
.story { padding: var(--section) 0; }
.story + #why { padding-top: 0; }
.story__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.story__quote { margin: 0; position: relative; padding-left: clamp(24px, 3vw, 40px); border-left: 6px solid var(--crimson); }
.story__quote blockquote { margin: 0; }
.story__quote p { margin: 0 0 18px; font: 600 clamp(1.25rem, 1.9vw, 1.5625rem)/1.4 var(--body); letter-spacing: -.005em; color: var(--raven); text-wrap: pretty; max-width: 40ch; }
.story__quote p + p { font: 400 clamp(1.0625rem, 1.4vw, 1.1875rem)/1.55 var(--body); color: var(--muted); max-width: 56ch; }
.story__quote figcaption { margin-top: 6px; font-size: .9875rem; color: var(--muted); }
.story__quote figcaption strong { color: var(--raven); }

/* ---------- reviews ---------- */
.revs { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rev { display: flex; flex-direction: column; background: var(--page); border-radius: var(--r-card); padding: 22px 24px 20px; }
.rev__stars { width: 88px; height: auto; }
.rev blockquote { margin: 14px 0 16px; flex: 1; }
.rev blockquote p { margin: 0; font: 600 1.0625rem/1.45 var(--body); color: var(--raven); text-wrap: pretty; }
.rev__src { margin: 0; font-size: .875rem; color: var(--muted); }
.rev__src a { color: var(--muted); }
.ratings { margin-top: 40px; max-width: 860px; }
.ratings .small { margin-top: 14px; }
.more-revs { margin-top: 16px; border: 0 !important; }
.more-revs > summary { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border: 2px solid var(--raven); border-radius: var(--r-btn); font: 700 1.0625rem/1 var(--display); letter-spacing: .03em; cursor: pointer; list-style: none; }
.more-revs > summary::-webkit-details-marker { display: none; }
.more-revs[open] > summary { margin-bottom: 16px; }
.more-revs .revs { margin-top: 0; }
.ratings table { width: 100%; border-collapse: collapse; font-size: .9875rem; }
.ratings caption { text-align: left; font: 600 1.0625rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); padding-bottom: 10px; }
.ratings th, .ratings td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ratings thead th { font-weight: 600; color: var(--muted); font-size: .875rem; }
.ratings tbody th { font-weight: 600; }
.ratings td a { font-weight: 600; }

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section--white { background: var(--surface); }
.section--white + .section--white, .section:not(.section--white) + .section:not(.section--white) { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split .prose { padding-top: 6px; }

.shot { margin: 40px 0 0; border-radius: var(--r-card); overflow: hidden; background: var(--page); box-shadow: var(--shadow); border: 1px solid var(--line); }
.shot img { width: 100%; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.shot--wide { margin-top: 44px; }

.features { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 48px; border-top: 2px solid var(--raven); }
.feat { padding: 26px 28px 8px 0; }
.feat + .feat { padding-left: 28px; border-left: 1px solid var(--line); }
.feat h3 { font-size: 2rem; margin-bottom: 10px; }
.feat:first-child h3 { font-size: 2.5rem; color: var(--crimson); }
.feat p { margin: 0 0 14px; text-wrap: pretty; }
.feat h3 { line-height: 1; min-height: 2.5rem; display: flex; align-items: flex-end; }
.keys { display: flex; gap: 6px; }

.pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 88px); }
.pair .shot { margin: 0; }
.pair--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pair--flip > .shot { order: 2; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.block { margin-top: clamp(56px, 7vw, 88px); }
.block-top { margin-top: 32px; }

.chips { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 10px; border-radius: 6px; font-size: .9375rem; line-height: 1.3; background: var(--page); color: var(--raven); }
.tag { display: inline-block; padding: 3px 8px 2px; border-radius: 4px; font: 700 .875rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tag--ok { background: var(--ok); } .tag--note { background: var(--note); } .tag--check { background: var(--check); } .tag--fix { background: var(--fix); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; color: var(--muted); }
.lg { white-space: nowrap; margin-right: 10px; }

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 0 0 14px 38px; max-width: 58ch; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 6px; background: var(--crimson) url("../img/tick.svg") center / 16px no-repeat; }
.note { margin: 40px 0 0; padding: 18px 22px; border-left: 5px solid var(--note); background: var(--surface); border-radius: 0 14px 14px 0; max-width: 78ch; font-size: .9875rem; }

.safe { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.safe li { background: var(--surface); border-radius: var(--r-card); padding: 26px 28px; border-left: 6px solid var(--ok); }
.safe li:nth-child(2) { border-left-color: var(--note); }
.safe li:nth-child(3) { border-left-color: var(--check); }
.safe li:nth-child(4) { border-left-color: var(--crimson); }
.safe h3 { margin-bottom: 8px; }
.safe p { margin: 0; text-wrap: pretty; }

.steps { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: s; max-width: 820px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: 1 / 3; font: 700 3.5rem/.9 var(--display); color: var(--crimson); }
.steps h3 { font-size: 1.625rem; margin-bottom: 6px; }
.steps p { margin: 0; text-wrap: pretty; max-width: 60ch; }

/* ---------- download band ---------- */
.dl { background: var(--b-bg); color: var(--b-text); border: var(--b-dl-border); padding: var(--section) 0; border-radius: clamp(24px, 3vw, 40px); margin: 0 clamp(0px, 1.2vw, 16px); }
.dl h2 { color: var(--b-text); }
.dl .lead { max-width: 44ch; }
.dl code { color: var(--b-text); }
.dl__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.facts { margin: 32px 0 0; display: grid; gap: 0; border-top: 1px solid var(--b-rule); }
.facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--b-rule); }
.facts dt { font: 600 1.0625rem/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--b-label); }
.facts dd { margin: 0; color: var(--b-text); }
.hash { font-size: .8125rem; line-height: 1.5; word-break: break-all; }
.dl__box { background: var(--b-panel); border: 1px solid var(--b-panel-line); border-radius: var(--r-card); padding: 22px 24px; margin-top: 24px; max-width: 560px; }
.facts { margin-top: 0; }
.verify { margin-top: 18px; }
.verify > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 700 1.125rem/1 var(--display); letter-spacing: .03em; color: var(--b-text); }
.verify p { margin: 8px 0; color: var(--b-muted); }
.cmd { display: inline-block; padding: 8px 10px; border-radius: 8px; background: var(--b-panel); color: var(--b-text); font-size: .8125rem; line-height: 1.5; word-break: break-all; }
.dl__box h3 { color: var(--b-text); margin-bottom: 8px; }
.dl__box p { margin: 0 0 22px; color: var(--b-muted); text-wrap: pretty; }
.dl__box p:last-child { margin-bottom: 0; }
.dl__box strong { color: var(--b-text); }

/* ---------- FAQ ---------- */
#faq h2 { margin-bottom: 28px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font: 700 1.5rem/1.15 var(--display); letter-spacing: .01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--raven); background: url("../img/plus.svg") center / 14px no-repeat; transition: transform 160ms; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; max-width: 64ch; text-wrap: pretty; }

/* ---------- footer ---------- */
.foot { padding: 56px 0 40px; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.lockup--foot { --fs: 1.75rem; }
.by { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot__links a { color: var(--raven); padding: 12px 0; display: inline-block; }
.foot__small { margin-top: 20px; font-size: .8125rem; color: var(--muted); }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .hero__text, .hero .demo, .hero .fine { grid-column: 1; grid-row: auto; }
  .hero .fine { margin-top: 0; }
  .hero__grid, .story__grid, .split, .split--even, .pair, .pair--flip, .dl__grid { grid-template-columns: minmax(0, 1fr); }
  .pair--flip .shot { order: 0; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat, .feat + .feat { padding: 22px 0 6px; border-left: 0; }
  .feat + .feat { border-top: 1px solid var(--line); }
  .bar { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .nav { order: 3; width: 100%; gap: 4px 18px; flex-wrap: wrap; padding-bottom: 6px; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .lockup { --fs: 1.875rem; }
  .bar { min-height: 80px; }
  .cta .btn { width: 100%; }
  .safe { grid-template-columns: minmax(0, 1fr); }
  .revs { grid-template-columns: minmax(0, 1fr); }
  .ratings table, .ratings thead, .ratings tbody, .ratings tr, .ratings caption { display: block; }
  .ratings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ratings tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ratings th, .ratings td { display: block; border: 0; padding: 2px 0; }
  .ratings td::before { color: var(--muted); font-size: .875rem; }
  .ratings td:nth-of-type(1)::before { content: "Trustpilot: "; }
  .ratings td:nth-of-type(2)::before { content: "G2: "; }
  .steps li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .steps li::before { font-size: 2.5rem; }
  .demo { padding: 16px 14px 14px; border-radius: 22px; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  summary { font-size: 1.3125rem; }
  .dl { margin: 0 8px; border-radius: 24px; }
  .foot__links { gap: 4px 16px; }
  .foot__links a { font-size: .9375rem; }
  /* app screenshots: keep them readable and let them scroll sideways */
  .shot { overflow-x: auto; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .shot img { width: 760px; max-width: none; }
  .shot--small img { width: 620px; }
  .dl-name { display: none; }
  .nav .btn { display: none; }
  .nav a:not(.btn) { font-size: 1.0625rem; }
  .shot-hint { display: block; margin: 32px 0 -28px; font-size: .875rem; color: var(--muted); }
  .bar { gap: 12px; }
}
@media (max-width: 340px) { .lockup { --fs: 1.375rem; } }
@media (max-width: 380px) {
  .lockup { --fs: 1.5rem; }
  .btn--s { padding: 0 14px; }
}


/* 1-2 switch under the desk scene (owner, 4 Nov: replaces Play again) */
.demo .steps { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.step { min-width: 40px; min-height: 40px; justify-content: center; }
.step[aria-pressed="true"] { background: var(--b-btn); color: var(--b-btn-text); border-color: var(--b-btn); }

/* Check card under the hero buttons (4 Nov: replaces the small print) */
.check-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 16px; margin-top: 20px; max-width: 540px; padding: 16px 20px; background: var(--b-panel); border: 1px solid var(--b-panel-line); border-left: 6px solid var(--crimson); border-radius: 14px; color: var(--b-text); text-decoration: none; transition: transform 150ms, box-shadow 150ms; }
.check-card:hover { color: var(--b-text); transform: translateY(-2px); box-shadow: 0 8px 22px rgb(19 19 19 / .12); }
.check-card .mark { width: 56px; height: 56px; }
.check-card .m-main { fill: var(--b-mark-main); } .check-card .m-side { fill: var(--b-mark-side); } .check-card .m-desk { fill: var(--b-mark-desk); opacity: var(--b-mark-desk-o); }
.check-card__txt { display: flex; flex-direction: column; gap: 4px; }
.check-card strong { font: 700 1.3125rem/1.1 var(--display); letter-spacing: .02em; }
.check-card__txt span { font-size: .9375rem; line-height: 1.4; color: var(--b-muted); text-wrap: pretty; }
.check-card__go { color: var(--crimson); transition: transform 150ms; }
.check-card:hover .check-card__go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .check-card, .check-card__go { transition: none; } }
@media (max-width: 420px) { .check-card { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; } .check-card .mark { width: 44px; height: 44px; } .check-card__go { display: none; } }

/* demo footer: checklist floats over the desk, caption + 1/2 switch in one row */
.demo__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.demo figcaption { display: contents; }
.demo figcaption > span:first-child { max-width: 38ch; font-size: .9375rem; color: var(--b-muted); text-wrap: pretty; }
.demo .steps { margin-left: 0; flex: none; }
.ready { position: absolute; right: 14px; top: 47%; width: min(46%, 260px); z-index: 2; box-shadow: 0 10px 28px rgb(19 19 19 / .18); }
@media (max-width: 600px) { .ready { position: static; width: auto; margin-top: 12px; display: none; } .demo.is-exam .ready { display: block; } .demo__foot { flex-wrap: wrap; } }