/* The public pages' one look (#250, design 1B Blue: prototype/front-page, ?variant=3): every page
   server/pages.py builds, the legal pages, the licences, the 404 page, the converter and the pages
   after Checkout load this sheet and no other look, so a click never lands on an older one. White
   pages under a pale blue first screen, navy ink and footer, one blue for what is done (the Open
   button, links, ticks, step numbers); Barlow throughout, the name in osifont as the logo has it
   (D52). The viewers (app.html, model.html) keep style.css. The sheets shared with them (pay.css,
   and convert.css, opening.css) ask for colours by style.css's names, which this sheet gives the
   site's values: --graphite is the ink, --pencil the secondary text, --board the first screen's sky. */

@font-face { font-family: "osifont"; src: url("/fonts/osifont.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 400; src: url("/fonts/Barlow-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 600; src: url("/fonts/Barlow-SemiBold.woff2") format("woff2"); font-display: swap; }
/* Medium for what is free and the way to the sample, cut to their letters (tools/make_site_fonts.py,
   whose UNICODES this range repeats); any other letter falls back to Regular. */
@font-face {
  font-family: "Barlow";
  font-weight: 500;
  src: url("/fonts/Barlow-Medium-site.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0020-007E, U+00C4, U+00D5-00D6, U+00DC, U+00E4, U+00F5-00F6, U+00FC, U+0160-0161, U+017D-017E, U+2013-2014, U+2018-2019, U+201C-201E;
}

/* Every text at WCAG AA: ink 17:1 on white, secondary 6.3:1 on white and 5.6:1 on the sky, blue 5.8:1
   and 5.2:1; the footer's light text 11:1 on navy. */
:root {
  --paper: #ffffff;
  --graphite: #0f1b2c;
  --pencil: #52607a;
  --rule: #d6dee8;
  --edge: #7d8aa0; /* a control's outline, 3.5:1 on white */
  --board: #edf2f8;
  --wash: #f3f6fa;
  --blue: #1a5fd0;
  --blue-hover: #134ba8;
  --selection: var(--blue);
  --text: "Barlow", system-ui, sans-serif;
  --lettering: var(--text); /* the app's technical lettering is the page's type here */
  --gutter: clamp(16px, 3vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Buttons and labels set their own display; the hidden attribute must still win. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* The footer at the window's foot, however short the page. */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; font: 400 18px/1.5 var(--text); color: var(--graphite); background: var(--paper); }
body > main { flex: 1 0 auto; }
:where(h1, h2, h3, p, ul, ol, dl, figure) { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { letter-spacing: -0.01em; }
main h2 { margin-bottom: 14px; font-size: clamp(22px, 2.1vw, 27px); }
main h3 { font-size: 20px; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.lead { font-size: clamp(19px, 1.8vw, 21px); color: var(--pencil); }
.hint, .note { color: var(--pencil); font-size: 15px; }
.note { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- Controls: the main action filled blue, the others outlined ---- */

button, .button, select, input { font: inherit; color: inherit; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper);
  color: var(--graphite);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
:is(button, .button):hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
button:disabled { opacity: 0.55; cursor: default; }
.primary, .primary:hover:not(:disabled) { border-color: var(--blue); background: var(--blue); color: #ffffff; }
.primary:hover:not(:disabled) { border-color: var(--blue-hover); background: var(--blue-hover); }
.big { min-height: 56px; padding: 12px 28px; font-size: 19px; }
.quiet { border-color: transparent; background: transparent; color: var(--pencil); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
select, input[type="text"], input[type="email"], input[type="number"], input[type="date"] {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
}
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { margin: 0; accent-color: var(--blue); }
.field { display: flex; flex-direction: column; gap: 4px; }
dialog { width: min(32rem, calc(100% - 32px)); padding: 22px 24px; border: 1px solid var(--rule); border-radius: 10px; color: var(--graphite); background: var(--paper); box-shadow: 0 24px 60px -20px rgb(15 27 44 / 0.45); }
dialog::backdrop { background: rgb(15 27 44 / 0.4); }
dialog h2 { margin-bottom: 8px; font-size: 22px; }
dialog p { margin: 6px 0; font-size: 16px; }

/* ---- Header: the name and the language, nothing else (D41) ---- */

.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 400 21px/1 "osifont", var(--text); letter-spacing: 0.01em; color: var(--graphite); text-decoration: none; }
.brand-mark { flex: none; width: 26px; height: 26px; margin-right: 8px; }
/* The public pages' EN/ET switch: links, the current language as text; the app pages', buttons. */
.language { display: flex; }
.language :is(a, span, button) { display: inline-grid; place-items: center; min-width: 46px; min-height: 44px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 0; background: var(--paper); font: 400 16px/1 var(--text); color: var(--pencil); text-decoration: none; }
.language > :first-child { border-radius: 6px 0 0 6px; }
.language > :last-child { margin-left: -1px; border-radius: 0 6px 6px 0; }
.language :is(span, [aria-pressed="true"]) { position: relative; border-color: var(--graphite); color: var(--graphite); }
.language :is(a, button):hover:not(:disabled) { border-color: var(--rule); color: var(--graphite); }

/* ---- The first screen: the words and the Open button, the viewer on a laptop and a phone ---- */

.first { padding-block: clamp(28px, 6vw, 84px) clamp(32px, 4.5vw, 64px); background: var(--board); border-bottom: 1px solid var(--rule); }
.first-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.first h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.015em; }
.first .lead { max-width: 30ch; margin: 18px 0 30px; }
.open { display: grid; justify-items: start; gap: 4px; }
/* The whole label opens the picker. The files beside the button wrap under it where the column is
   narrow, never squeezed. */
.open .drop { position: relative; justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; cursor: pointer; }
.open .drop .button { flex: none; min-height: 62px; padding: 0 38px; border-radius: 10px; font-size: 21px; box-shadow: 0 8px 20px -10px var(--blue); }
.open .drop:hover .button { border-color: var(--blue-hover); background: var(--blue-hover); }
.open .drop.dragging .button { border-color: var(--graphite); background: var(--graphite); }
.drop:has(.file-input:focus-visible) .button { outline: 3px solid var(--blue); outline-offset: 3px; }
.drop-text { display: grid; flex: 1 1 11em; font-size: 15px; line-height: 1.35; color: var(--pencil); }
.drop-files { font-weight: 600; color: var(--graphite); }
/* Hidden from view, not from the keyboard: Tab reaches it and Enter opens the picker. */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.see-sample, .sample a { display: inline-flex; align-items: center; min-height: 44px; }
.see-sample { font-size: 17px; font-weight: 500; }
.sample { margin-top: 4px; font-size: 16px; color: var(--pencil); }
.drop-status { margin-top: 10px; font-size: 16px; }
.drop-status:empty { display: none; }
/* A file this page does not open, or could not read: in a box under the button. */
.drop-status.error { padding: 12px 14px; border: 1px solid var(--rule); border-left: 5px solid var(--graphite); border-radius: 10px; background: var(--paper); font-weight: 600; }
.drop-status a { padding-block: 12px; }
.drop-status button { margin-top: 8px; }
/* What is free, ticked: under a rule. */
.title-strip { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 40px; margin-top: 26px; padding: 22px 0 0; border-top: 1px solid var(--rule); list-style: none; font-size: 19px; font-weight: 500; }
.title-strip li { position: relative; padding-left: 28px; }
.title-strip li::before { content: ""; position: absolute; left: 5px; top: 0.22em; width: 7px; height: 13px; border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.first .promise, .price-line { max-width: 40em; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--pencil); }
.price-line a { padding-block: 13px; }
/* Prices in rupees first in India's time zone (D50 G1): lang.js marks the page before it is drawn.
   Without the mark (any other zone, no JavaScript) the dollar prices, which name India's too. */
html:not([data-region="in"]) .in-india, html[data-region="in"] .not-india { display: none; }

/* The devices, drawn here: a laptop with a browser bar over a silver base, a phone with its titanium
   edge, side buttons, status bar, camera island and home bar. The phone's sizes follow its width
   (container units), so it reads the same at any size. The base is the widest part and inside the
   column: nothing passes the window's edge. */
.devices { position: relative; padding: 0 9% 3% 0; }
.mobile-preview { display: none; }
.laptop { filter: drop-shadow(0 30px 34px rgb(15 20 30 / 0.26)); }
.laptop-lid { position: relative; margin-inline: 5%; padding: 2.4% 2.4% 2.8%; border-radius: 18px 18px 4px 4px; background: #0c0d10; box-shadow: inset 0 0 0 1.5px #3a3e45; }
.laptop-lid::before { content: ""; position: absolute; top: 0.9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a2e35; }
.laptop-window { overflow: hidden; border-radius: 6px; background: #2b2f36; }
.browser-bar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 12px; background: #e9ecef; border-bottom: 1px solid #cfd4da; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { margin-right: 6px; background: #28c840; }
.browser-bar span { flex: 1; max-width: 46%; margin-inline: auto; padding: 3px 10px; border-radius: 6px; background: #ffffff; font-size: 12px; line-height: 1.2; color: #4b525a; text-align: center; }
.devices img { display: block; width: 100%; height: auto; }
.laptop-base { position: relative; height: 18px; border-radius: 2px 2px 18px 18px; background: linear-gradient(#e4e7ea, #c9ced3 45%, #a9afb6); }
.laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #b3b9c0; }
.handset { position: absolute; right: 0; bottom: 0; width: 27%; container-type: inline-size; padding: 3.4%; border-radius: 16% / 7.4%; background: #0b0c0e; box-shadow: 0 0 0 1.5px #8d939b, 0 0 0 3px #3c4047, 0 30px 46px -14px rgb(10 14 22 / 0.6); }
.handset::before, .handset::after { content: ""; position: absolute; top: 21%; left: -4px; width: 3px; height: 12%; border-radius: 2px; background: #6f757e; box-shadow: 0 -9cqw 0 #6f757e; }
.handset::after { top: 27%; right: -4px; left: auto; height: 15%; box-shadow: none; }
.handset-screen { position: relative; overflow: hidden; padding-bottom: 5cqw; border-radius: 13% / 6%; background: #2b2f36; }
.status-bar { display: flex; align-items: center; justify-content: space-between; height: 13.5cqw; padding: 2.6cqw 8cqw 0; color: #ffffff; }
.status-bar b { width: 20cqw; font-size: 4.4cqw; line-height: 1; text-align: center; }
.status-bar svg { display: block; width: 19cqw; height: auto; }
.handset-screen::before { content: ""; position: absolute; top: 3cqw; left: 50%; width: 28cqw; height: 8.2cqw; transform: translateX(-50%); border-radius: 99px; background: #000000; }
.handset-screen::after { content: ""; position: absolute; bottom: 2cqw; left: 50%; width: 36cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 99px; background: rgb(255 255 255 / 0.85); }

/* ---- Sections under it: bands of their own, each a title and its cards ---- */

.band { padding-block: clamp(40px, 6vw, 80px); }
.band + .band { border-top: 1px solid var(--rule); }
.how { background: var(--wash); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 64px; align-items: start; }
.split > div > p { max-width: 34em; font-size: 16px; color: var(--pencil); }

/* The tools as tiles, each with a swatch in an AutoCAD colour (1 to 8, in order); the titles of a row
   line up. */
.register { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.register li { display: flex; }
.register a { flex: 1; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-content: start; gap: 2px 14px; min-height: 48px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--graphite); text-decoration: none; }
.register a::before { content: ""; grid-row: span 2; width: 12px; height: 12px; margin-top: 7px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(15 27 44 / 0.2); }
.register a:hover { border-color: var(--blue); color: var(--graphite); }
.register-name { font-size: 19px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.register a:hover .register-name { text-decoration-color: currentColor; }
.register-text { font-size: 16px; color: var(--pencil); }
.register li:nth-child(8n + 1) { --swatch: #ff3b3b; }
.register li:nth-child(8n + 2) { --swatch: #ffe14d; }
.register li:nth-child(8n + 3) { --swatch: #6ee06e; }
.register li:nth-child(8n + 4) { --swatch: #33d1e0; }
.register li:nth-child(8n + 5) { --swatch: #4c7dff; }
.register li:nth-child(8n + 6) { --swatch: #e04ce0; }
.register li:nth-child(8n + 7) { --swatch: var(--graphite); } /* colour 7 as AutoCAD draws it on white */
.register li:nth-child(8n + 8) { --swatch: #8b939c; }

/* The front page explains each step before its picture. All three pictures are real phone
   drawing crops of the same shape and theme, so the instructions stay together while scrolling. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 10px; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; color: var(--pencil); }
.steps img { display: block; width: 96px; height: 96px; margin-bottom: 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.front .steps li { display: flex; flex-direction: column; gap: 14px; }
.front .step-copy { flex: 1; font-size: 16px; line-height: 1.5; }
.steps .shot { aspect-ratio: 13 / 8; width: 100%; height: auto; margin: 0; }
.steps strong, .steps h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--graphite); }
.steps strong::before { content: counter(step); }
.steps strong::before, .axis { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); font-size: 16px; font-weight: 600; line-height: 1; color: #ffffff; }
.steps li:has(.axis) { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; column-gap: 12px; }
.steps li:has(.axis) > :not(.axis, h3) { grid-column: 1 / -1; }
.steps h3 { margin: 0; }

/* What we promise: each promise on a blue line, with where it is said. */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 0; list-style: none; }
.promises li { padding: 4px 0 6px 16px; border-left: 2px solid var(--blue); font-size: 16px; line-height: 1.45; }
/* Each link is 44 px high by its padding, without moving the lines. */
.promises a { padding: 13px 4px; white-space: nowrap; }

/* Questions: each a line to tap, its answer under it (pages.collapsed()). */
.questions { max-width: 46em; border-top: 1px solid var(--rule); }
.questions details { border-bottom: 1px solid var(--rule); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; list-style: none; cursor: pointer; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; width: 28px; font-size: 28px; line-height: 1; text-align: center; color: var(--blue); }
.questions details[open] summary::after { content: "\2212"; }
.questions summary h3 { font-size: 19px; }
.questions summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.questions details p { padding-bottom: 16px; }
.questions details p:has(+ p) { padding-bottom: 8px; }
/* A link in an answer stays a text link; its padding makes the tap 44 px high, and 44 px wide for a
   short word, without moving the lines or the words. */
.questions a { padding: 12px 6px; margin-inline: -6px; }
.more-help, .marks { margin-top: 18px; }
.more-help a { display: inline-flex; align-items: center; min-height: 44px; }
.marks { max-width: 46em; font-size: 15px; color: var(--pencil); }

/* Prices: the offers as cards. */
.pricing .lead { max-width: 46em; margin-bottom: 28px; }
.title-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.offer { padding: 22px 24px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.offer h3 { font-size: 18px; }
.offer .price { margin: 14px 0 4px; font-size: clamp(40px, 4.2vw, 52px); font-weight: 600; line-height: 1; }
/* A card's price in rupees says where it is charged (#175 review round 1). */
.offer .price .where { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--pencil); }
.offer .term { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--pencil); }
.offer p:last-child { font-size: 16px; }
.pricing > .hint { max-width: 48em; margin-top: 16px; }

/* ---- Other pages: a title on the sky, then their part ---- */

.page-title { padding-block: clamp(28px, 5vw, 64px) clamp(28px, 4vw, 48px); background: var(--board); border-bottom: 1px solid var(--rule); }
.page-title h1 { margin-bottom: 14px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.015em; }
.page-title .lead { max-width: 40em; }

/* The help page: its contents, then each how-to with its picture framed as the front page's steps. */
.contents ol { max-width: 760px; margin-top: 16px; padding-left: 1.4em; columns: 2 16em; column-gap: 40px; }
.contents li { break-inside: avoid; }
.contents a { display: inline-flex; align-items: center; min-height: 44px; }
.how-to {
  /* Laid out, and its lazy picture loaded, only as it comes near the screen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-areas: "title title" "picture text";
  column-gap: 40px;
  align-items: start;
  padding-top: clamp(40px, 6vw, 72px);
}
.how-to:not(:has(img)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text"; }
.how-to h2 { grid-area: title; max-width: 24ch; margin-bottom: 18px; }
.how-to img { grid-area: picture; display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--board); }
.how-to-text { grid-area: text; max-width: 36em; }
.how-to-text > * + * { margin-top: 12px; }
.how-to ol { padding-left: 1.3em; }
.how-to li + li { margin-top: 10px; }
.how-to li { padding-left: 4px; }
.how-to a { padding-block: 12px; }

/* The legal pages and the licences: a readable column. A page without an Estonian part says, in
   Estonian, that it is in English, when the switch's ET leads to it (#et, pages.english_frame()). */
.language-note { padding-block: 14px; border-bottom: 1px solid var(--rule); background: var(--board); font-size: 16px; }
.language-note:not(:target) { display: none; }
.doc main { width: 100%; max-width: calc(70ch + 2 * var(--gutter)); margin-inline: auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 56px; }
.doc h1 { margin-bottom: 14px; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.doc h2 { margin: 34px 0 8px; font-size: 23px; }
.doc h3 { margin: 22px 0 6px; font-size: 19px; }
.doc :is(p, ul, ol, dl, pre) { margin-bottom: 12px; }
.doc :is(p, li) { line-height: 1.6; }
.doc :is(ul, ol) { padding-left: 22px; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.doc dl > div { display: contents; }
.doc dt { color: var(--pencil); }
.doc dd { margin: 0; }
.doc pre { padding: 12px 14px; border-radius: 10px; background: var(--wash); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* ---- Footer: who, help, where to write, and the legal pages ---- */

.page-footer { padding-block: 36px 44px; background: var(--graphite); color: #c5cedb; font-size: 16px; }
.page-footer :focus-visible { outline-color: #9ec3ff; }
.page-footer a { color: #ffffff; }
.page-footer a:hover { color: #ffffff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 48px; }
.page-footer .brand { min-height: 0; margin-bottom: 10px; font-size: 19px; color: #ffffff; }
.footer-about p:not(.brand) { max-width: 36em; margin-bottom: 4px; }
.footer-help a, .footer-legal a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
/* The address in a sentence: its padding makes the tap 44 px high without moving the lines. */
.footer-support a { padding-block: 15px; }
/* The pages for builders' searches (D47): one line, every name with the same padding, so the gaps
   between them are even and each tap is 44 px. */
.footer-searches a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 9px; }
.footer-legal { display: flex; flex-wrap: wrap; align-content: start; gap: 0 22px; }
.legal-note { flex-basis: 100%; font-size: 15px; }

/* ---- Touch screens and narrow screens ---- */

@media (hover: none) { .drop-hint { display: none; } }

@media (max-width: 960px) {
  .split, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .how-to { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "picture" "text"; }
  .how-to img { max-width: 360px; margin-bottom: 18px; }
}

/* On a phone the drawing is the preview: a compact, legible canvas crop, without a second
   phone's bezel and controls. Desktop keeps the approved laptop and phone composition. Hidden
   pictures select BLANK in devices.html so neither layout downloads the other's assets. */
@media (max-width: 860px) {
  .first-grid { grid-template-columns: minmax(0, 1fr); }
  .first h1 { font-size: clamp(34px, 10vw, 44px); }
  .first .lead { max-width: none; margin: 12px 0 22px; font-size: 19px; }
  .open, .open .drop { justify-items: stretch; }
  .open .drop .button { flex: 1 1 100%; padding: 0 16px; }
  .devices { padding: 0; }
  .laptop, .handset { display: none; }
  .mobile-preview { display: block; max-width: 440px; margin-inline: auto; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .front .steps .shot { max-width: 440px; }
  .promises { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* A tool page's title, button and promises first; its lead is the title said again (Raido,
     2026-10-24: "a little bit long to scroll down"). */
  .tool-page .first .lead { display: none; }
  .tool-page .first h1 { margin-bottom: 18px; font-size: clamp(28px, 7.4vw, 36px); }
  .title-strip { gap: 6px 18px; margin-top: 18px; padding-top: 16px; font-size: 18px; }
  /* The tools by name, two to a row; what each opens is on its page. */
  .register a { padding: 12px 14px; }
  .register-name { font-size: 17px; }
  .register-text { display: none; }
  .pricing .lead { display: none; } /* the page's lead says it */
  .questions summary { min-height: 52px; padding: 6px 0; }
  .questions summary h3 { font-size: 17px; }
  .questions details p { font-size: 16px; }
  .questions a { padding-block: 13px; } /* still 44 px a tap in the smaller type */
  .how-to { contain-intrinsic-size: auto 560px; padding-top: 30px; }
  .how-to img { max-width: 260px; }
  .page-footer { padding-block: 24px 28px; font-size: 15px; }
  .footer-grid { gap: 8px; }
  .footer-about .about { display: none; } /* what the page's title says already */
  .footer-legal { gap: 0 16px; }
}

@media (max-width: 400px) {
  .brand { font-size: 19px; }
  .title-strip { column-gap: 14px; font-size: 17px; }
}