/* The website: the home page and the document pages (scripts/generate-pages.py). Colours are the apps' roles
   (tokens.css); the page follows the visitor's appearance (appearance.js). */
:root { --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); --wrap: 72rem; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--s-3); top: -4rem; z-index: 50; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--ink); color: var(--ground); }
.skip:focus { top: var(--s-3); }
.i.brand-i { fill: currentColor; stroke: none; }

/* Pictures in light and dark: the page shows the one that matches its appearance. */
.for-dark { display: none; }
[data-env="dark"] .for-dark, [data-env="black"] .for-dark, [data-env="contrast-dark"] .for-dark { display: block; }
[data-env="dark"] .for-light, [data-env="black"] .for-light, [data-env="contrast-dark"] .for-light { display: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: var(--bw) solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-6); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--w-head); font-size: var(--t-lead); color: var(--ink); text-decoration: none; letter-spacing: var(--track-tight); }
.brand svg { width: 2rem; height: auto; color: var(--indigo); }
.nav { display: flex; align-items: center; gap: var(--s-1); flex: 1; }
.nav a:not(.btn) { padding: 0.375rem 0.75rem; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-size: var(--t-small); font-weight: var(--w-strong); display: inline-flex; align-items: center; gap: var(--s-2); }
.nav a:not(.btn):hover { background: var(--sheet-2); color: var(--ink); }
.nav .btn { margin-left: auto; }
@media (max-width: 52rem) { .hide-sm { display: none !important; } }
@media (max-width: 26rem) { .hide-xs { display: none !important; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-16) var(--s-12); display: grid; gap: var(--s-6); }
.hero h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: var(--track-display); max-width: 12ch; }
.hero .lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); color: var(--ink-2); max-width: 36rem; line-height: 1.45; }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.facts-line { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: 0; margin: 0; list-style: none; font-size: var(--t-small); color: var(--ink-3); }
.facts-line li { display: inline-flex; align-items: center; gap: var(--s-2); }
.facts-line .i { width: 1rem; height: 1rem; color: var(--indigo); }
.facts-line a { color: inherit; }
.new-link { font-size: var(--t-small); font-weight: var(--w-strong); justify-self: start; }
.browser-check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-3); }
.browser-check[hidden] { display: none; }
.browser-check svg { width: 1rem; height: 1rem; fill: none; stroke: var(--indigo); stroke-width: 2.4; }
.browser-check.ok { color: var(--ink-2); }

.product { margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.frame-img { border-radius: var(--r-surface); border: var(--bw) solid var(--rule-strong); overflow: hidden; background: var(--ground); box-shadow: var(--shadow); }
.frame-img img { width: 100%; height: auto; }
/* On a phone the hero shows the phone app, at a size that can be read. */
@media (max-width: 40rem) { .hero-shot { width: min(100%, 20rem); justify-self: center; border-radius: 1.75rem; } }
.product figcaption { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: var(--t-small); color: var(--ink-2); }
.product figcaption span { display: inline-flex; align-items: center; gap: var(--s-2); }
.product figcaption .i { color: var(--indigo); }

.strip { padding-block: var(--s-8) var(--s-10); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); color: var(--ink-3); font-size: var(--t-small); }
.strip ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
.strip li { color: var(--ink); font-size: var(--t-lead); font-weight: var(--w-head); letter-spacing: var(--track-tight); }
.strip li:last-child { color: var(--ink-3); font-size: var(--t-small); font-weight: var(--w-body); letter-spacing: 0; }

/* ---------- Sections ---------- */
main > section { scroll-margin-top: 4rem; }
.sec { padding-block: var(--s-20); border-top: var(--bw) solid var(--rule); }
.sec h2, .final h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.05; letter-spacing: var(--track-display); max-width: 18ch; }
.section-lede { color: var(--ink-2); max-width: 40rem; margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; }
.fine { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s-4); }
.body { margin-top: var(--s-10); }

.rows { margin: 0; display: grid; }
.rows > div { display: grid; gap: var(--s-2) var(--s-10); padding: var(--s-6) 0; border-top: var(--bw) solid var(--rule); }
@media (min-width: 56rem) { .rows > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rows h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-title); }
.rows h3 .i { color: var(--indigo); width: 1.5rem; height: 1.5rem; }
.rows p { color: var(--ink-2); }

.proof { background: var(--field); color: var(--on-field); padding-block: var(--s-20); }
.proof h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: var(--track-display); max-width: 14ch; }
.proof p { color: var(--field-2); max-width: 36rem; font-size: var(--t-lead); margin-top: var(--s-4); }
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: var(--s-12) 0 var(--s-8); }
.stats div { border-top: 2px solid color-mix(in oklab, var(--on-field) 40%, transparent); padding-top: var(--s-4); display: grid; gap: var(--s-1); }
.stats dt { font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: var(--w-head); line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.stats dd { margin: 0; color: var(--field-2); }
.proof .check { font-size: var(--t-small); max-width: 44rem; }
/* Black and E-ink: the band's ground is the page's, so edges mark it. */
[data-env="black"] .proof, [data-env="eink"] .proof { border-block: var(--bw) solid var(--rule-strong); }

.steps { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); counter-reset: step; list-style: none; padding: 0; margin: var(--s-10) 0 0; }
.steps li { display: grid; gap: var(--s-2); align-content: start; }
.steps li::before { counter-increment: step; content: counter(step); font-size: var(--t-head); font-weight: var(--w-head); color: var(--indigo); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--t-lead); }
.steps p { color: var(--ink-2); }

.table-wrap { overflow-x: auto; margin-top: var(--s-10); }
.model-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.model-table th, .model-table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.model-table th { color: var(--ink); border-bottom-color: var(--rule-strong); }
.model-table td { color: var(--ink-2); }
.model-table td strong { display: block; color: var(--ink); font-size: var(--t-body); }
.model-table td span { color: var(--ink-3); font-size: var(--t-meta); }

.split-2 { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 60rem) { .split-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.dl-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.dl-btn, .store { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 3.25rem; padding: 0 1.25rem 0 1rem; border-radius: var(--r-pill); border: var(--bw) solid var(--rule-strong); color: var(--ink); text-decoration: none; transition: background-color var(--d-micro) var(--e-out); }
.dl-btn:hover, .store:hover { background: var(--sheet-2); }
.dl-btn span, .store span { display: grid; line-height: 1.15; }
.dl-btn small, .store small { font-size: var(--t-meta); color: var(--ink-3); }
.dl-btn strong, .store strong { font-size: var(--t-body); }
.dl-btn.is-recommended { background: var(--indigo-fill); border-color: var(--indigo-fill); color: var(--on-indigo); }
.dl-btn.is-recommended small { color: var(--on-indigo); }
.store.is-soon { opacity: 1; border-style: dashed; color: var(--ink-3); cursor: default; }

.shots { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-10); }
@media (max-width: 60rem) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shots figure { margin: 0; display: grid; gap: var(--s-3); }
.shots .shot { border-radius: 1.5rem; border: var(--bw) solid var(--rule-strong); overflow: hidden; box-shadow: var(--shadow); }
.shots .shot img { width: 100%; height: auto; }
.shots figcaption { font-size: var(--t-small); color: var(--ink-2); font-weight: var(--w-strong); }
.store-row { margin-top: var(--s-8); }

.plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: var(--s-10); }
.plan { border: var(--bw) solid var(--rule); border-radius: var(--r-card); background: var(--sheet); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
.plan h3 { font-size: var(--t-lead); }
.plan .price { font-size: var(--t-head); font-weight: var(--w-head); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.plan .price small { display: block; margin-top: var(--s-1); font-size: var(--t-small); font-weight: var(--w-body); color: var(--ink-3); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-small); }
.plan li { display: flex; gap: var(--s-2); }
.plan li .i { color: var(--indigo); width: 1rem; height: 1rem; margin-top: 0.2rem; }

.term { margin: 0; padding: var(--s-5); border-radius: var(--r-card); background: var(--code-bg); border: var(--bw) solid var(--rule); color: var(--code-ink); overflow-x: auto; font-size: 0.875rem; line-height: 1.6; }
.term .c { color: var(--syn-comment); }

.faq details, .doc details { border-top: var(--bw) solid var(--rule); padding: var(--s-4) 0; }
.faq details:last-child, .doc details:last-of-type { border-bottom: var(--bw) solid var(--rule); }
.faq summary, .doc summary { cursor: pointer; font-size: var(--t-lead); font-weight: var(--w-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.faq summary::-webkit-details-marker, .doc summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--ink-3); transition: transform var(--d-short) var(--e-out); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq p, .doc details p { color: var(--ink-2); margin-top: var(--s-3); max-width: 46rem; }

.final { padding-block: var(--s-20); border-top: var(--bw) solid var(--rule); }
.final .wrap { display: grid; gap: var(--s-5); justify-items: start; }
.final .mark { width: 4rem; height: auto; color: var(--indigo); }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--bw) solid var(--rule); padding-block: var(--s-12) var(--s-16); font-size: var(--t-small); color: var(--ink-3); }
.site-footer .wrap { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.site-footer h3 { margin: 0 0 var(--s-2); font-size: var(--t-small); color: var(--ink); letter-spacing: 0; }
.site-footer nav a { display: block; color: var(--ink-2); text-decoration: none; padding: 0.2rem 0; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.foot-brand p { margin-top: var(--s-2); }
.foot-look { display: grid; gap: var(--s-2); align-content: start; }
.copyright { grid-column: 1 / -1; }

/* ---------- Dialogs ---------- */
.modal { width: min(30rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--s-6); border: var(--bw) solid var(--rule); border-radius: var(--r-surface); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.modal[open] { display: grid; gap: var(--s-3); animation: rise var(--d-medium) var(--e-out); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.modal::backdrop { background: var(--scrim); }
.modal h2 { font-size: var(--t-lead); padding-right: var(--s-8); }
.modal-x { position: absolute; top: var(--s-3); right: var(--s-3); }
.modal-sub { color: var(--ink-2); }
.modal-icon { color: var(--indigo); }
.modal-icon .i { width: 1.75rem; height: 1.75rem; }
.dl-list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.dl { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-card); border: var(--bw) solid var(--rule); color: var(--ink); text-decoration: none; }
.dl:hover { background: var(--sheet-2); }
.dl span { display: grid; flex: 1; }
.dl small { color: var(--ink-3); font-size: var(--t-meta); }
.dl em { display: none; font-style: normal; font-size: var(--t-meta); font-weight: var(--w-strong); color: var(--indigo); }
.dl.is-recommended { border-color: var(--indigo); background: var(--indigo-wash); }
.dl.is-recommended em { display: inline; }
.dl.is-soon { color: var(--ink-3); cursor: default; }
.install-steps { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-2); color: var(--ink-2); }
.modal-actions { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.btn-block { width: 100%; }
.modal-foot { font-size: var(--t-small); color: var(--ink-3); }
.btn-link { justify-self: center; font-size: var(--t-small); font-weight: var(--w-strong); white-space: nowrap; }

/* ---------- Document pages: privacy, terms, support, delete account, brand (scripts/generate-pages.py) ---------- */
.doc { width: 100%; max-width: calc(46rem + var(--gutter) * 2); margin: 0 auto; padding: var(--s-16) var(--gutter) var(--s-20); }
.doc.wide { max-width: calc(62rem + var(--gutter) * 2); }
.doc h1 { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.doc .meta { margin: var(--s-3) 0 var(--s-8); color: var(--ink-3); font-size: var(--t-small); }
.doc h2 { font-size: var(--t-title); margin: var(--s-12) 0 var(--s-3); }
.doc h3 { font-size: var(--t-lead); margin: var(--s-8) 0 var(--s-2); }
.doc p, .doc li { color: var(--ink-2); line-height: 1.65; }
.doc p + p { margin-top: var(--s-3); }
.doc ul, .doc ol { padding-left: 1.4em; margin: var(--s-3) 0; }
.doc li + li { margin-top: var(--s-2); }
.doc li::marker { color: var(--ink-3); }
.doc strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--t-small); display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-4) var(--s-2) 0; border-bottom: var(--bw) solid var(--rule); color: var(--ink-2); }
.doc th { color: var(--ink); border-bottom-color: var(--rule-strong); }
.doc code { padding: 0.05em 0.35em; border-radius: 0.3rem; background: var(--sunken); border: 1px solid var(--rule); font-size: 0.9em; }
.summary { margin: 0 0 var(--s-8); padding: var(--s-5) var(--s-6); border-radius: var(--r-card); background: var(--indigo-wash); }
.summary p { color: var(--ink); }

/* Brand: logos on fixed grounds (a logo is shown on white or ink whatever the page's appearance). */
:root { --art-white: #ffffff; --art-tint: #f1f2f7; --art-indigo: #3b2eff; --art-ink: #0e0e1a; }
.brand-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: var(--s-4) 0; }
.brand-tile { border-radius: var(--r-card); border: var(--bw) solid var(--rule); overflow: hidden; background: var(--sheet); }
.brand-tile .art { display: grid; place-items: center; height: 13rem; padding: var(--s-8); background: var(--art-white); }
.brand-tile .art img { max-height: 7rem; width: auto; }
.brand-tile .art img.icon { border-radius: 22%; }
.brand-tile .art.tint { background: var(--art-tint); }
.brand-tile .art.indigo { background: var(--art-indigo); }
.brand-tile .art.ink { background: var(--art-ink); }
.brand-tile .tile-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--rule); font-size: var(--t-small); }
.brand-tile .tile-meta span { color: var(--ink); font-weight: var(--w-strong); }
.brand-tile .tile-meta nav { display: flex; gap: var(--s-3); }
.swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin: var(--s-4) 0; }
.swatch { border-radius: var(--r-card); overflow: hidden; border: var(--bw) solid var(--rule); background: var(--sheet); font-size: var(--t-small); }
.swatch i { display: block; height: 5rem; border-bottom: var(--bw) solid var(--rule); }
.sw-indigo { background: #3b2eff; } .sw-ink { background: #131522; } .sw-ground { background: #f9fafd; } .sw-dark { background: #0d0f16; } .sw-cloud { background: #006d8f; }
.swatch span { display: block; padding: var(--s-2) var(--s-3) 0; font-weight: var(--w-strong); color: var(--ink); }
.swatch code { display: block; padding: 0 var(--s-3) var(--s-3); color: var(--ink-3); background: none; border: 0; }

/* 404 */
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--s-16) var(--gutter); }
.not-found > div { display: grid; gap: var(--s-4); justify-items: center; }
.not-found .mark { width: 5rem; height: auto; color: var(--indigo); }
.not-found h1 { font-size: var(--t-display); letter-spacing: var(--track-display); }
.not-found p { color: var(--ink-2); }
/* Pricing: four plans; Quo Pro marked with an indigo edge, and a line under a plan says what its credits buy. */
.plans { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.plan.featured { border-color: var(--indigo); box-shadow: 0 0 0 var(--bw) var(--indigo); }
.plan-note { font-size: var(--t-meta); color: var(--ink-3); margin-top: auto; padding-top: var(--s-2); border-top: var(--bw) solid var(--rule); }
.plan { grid-template-rows: auto auto 1fr auto; }
.plan ul { align-content: start; }
.shared-credits { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-weight: var(--w-strong); color: var(--ink); }
.shared-credits .i { color: var(--indigo); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }