/* EasyRankly · white ground, black ink, the yellow of the logo as the one accent. Fields of flat colour instead of lines, the plugin's real screens as pictures. CSS only: the site loads no JavaScript of its own. */

:root {
	--bg: #ffffff;
	--bg-2: #f2f2f2;
	--bg-3: #e6e6e6;
	--ink: #0a0a0a;
	--ink-2: #575757; /* 7:1 on white, 6.4:1 on --bg-2: secondary notes only */
	--accent: #f0b22c; /* the logo's yellow; text on it is --ink (10.9:1) */
	--field: #0a0a0a;
	--field-2: #1d1d1d;
	--field-3: #2b2b2b;
	--field-ink-2: #b3b3b3; /* 9:1 on --field */
	--ui-blue: #2f55d4; /* links inside the WordPress and Google fragments */

	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* literal code only: pre and code */ /* taste-skill-ignore */

	/* five sizes do the work: figure, display, heading, statement, text */
	--t-fig: clamp(7.5rem, 19vw, 20rem);
	--t-1: clamp(3rem, 1.2rem + 6.4vw, 7rem);
	--t-2: clamp(2.125rem, 1.2rem + 3vw, 4rem);
	--t-3: clamp(1.375rem, 1.05rem + 1vw, 2rem);
	--t-4: 1.0625rem;
	--t-5: 0.9375rem;

	--max: 1360px;
	--m: clamp(16px, 3.4vw, 40px);
	--gap: clamp(16px, 2vw, 28px);
	--sec: clamp(120px, 12vw, 200px);
	--r: 20px;
	--inset: clamp(16px, 2vw, 24px); /* one inset for everything laid on a picture or a card */
	--card: clamp(24px, 3vw, 40px); /* the same padding on all four sides of a card */
	--pad: clamp(24px, 5vw, 72px); /* one distance between a screen and the edge of its stage */
	/* a quiet dot grid on the fields that hold a screen, so large flat areas do not read as empty */
	--dots-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.25' fill='%23fff' fill-opacity='.16'/%3E%3C/svg%3E");
	--dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.25' fill='%23000' fill-opacity='.09'/%3E%3C/svg%3E");
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: var(--t-4); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.board-sec :focus-visible, .on-field :focus-visible { outline-color: #fff; }
::selection { background: var(--accent); color: var(--ink); }
h1, h2, h3, summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { color: inherit; }
h1 { font-size: var(--t-1); }
h2 { padding-top: 0.12em; font-size: var(--t-2); }
h3 { font-size: var(--t-3); letter-spacing: -0.025em; line-height: 1.15; }
.lead, .st { font-size: var(--t-3); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* WordPress adapters */
.wp-block-list.also, .wp-block-list.plain { padding: 0; list-style: none; }

/* every section sits on one pair of margins and one 12-column grid */
main .sec { width: 100%; max-width: calc(var(--max) + 2 * var(--m)); margin: var(--sec) auto 0; padding-inline: var(--m); }

/* ---------- buttons: one shape, fully round ---------- */
.wp-block-buttons.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
	border: 0;
	font: 600 var(--t-4)/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
	transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}
.wp-block-button__link:hover { background: #333; color: #fff; transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0) scale(0.97); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 0; background: var(--bg-2); color: var(--ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--bg-3); color: var(--ink); }
.btn-sm .wp-block-button__link { min-height: 40px; padding: 0 18px; font-size: var(--t-5); }

/* ---------- header: a plain bar ---------- */
.nav-wrap { padding: 0 var(--m); background: var(--bg); }
.nav { display: flex; align-items: center; gap: 24px; max-width: var(--max); height: 76px; margin: 0 auto; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--sans); letter-spacing: -0.03em; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav .wp-block-navigation { margin-left: auto; font-size: var(--t-5); font-weight: 500; }
.nav .wp-block-navigation__container { gap: 4px; }
.nav .wp-block-navigation-item__content { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; transition: background-color 160ms; }
.nav .wp-block-navigation-item__content:hover { background: var(--bg-2); }
.nav .wp-block-navigation-item__content[aria-current="page"],
.nav .current-menu-item > .wp-block-navigation-item__content { background: var(--bg-2); }
.nav-cta { flex: none; }
.nav-wrap:has(.is-menu-open) { position: relative; z-index: 100000; }
.nav .wp-block-navigation__responsive-container.is-menu-open { background: #fff !important; padding: calc(24px + var(--wp-admin--admin-bar--height, 0px)) var(--m) 24px; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; align-items: stretch !important; }
.nav .is-menu-open .wp-block-navigation__container { gap: 6px; align-items: stretch !important; width: 100%; }
.nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.nav .is-menu-open .wp-block-navigation-item__content { width: 100%; padding: 18px 20px; border-radius: 14px; background: var(--bg-2); font: 600 1.5rem/1.2 var(--sans); letter-spacing: -0.02em; }
.nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; display: grid; place-items: center; top: calc(16px + var(--wp-admin--admin-bar--height, 0px)); right: var(--m); }
@media (max-width: 599px) {
	.nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: var(--bg-2); }
}

/* ---------- home: the hero ---------- */
main .sec.hero { margin-top: clamp(24px, 4vw, 56px); }
.hero-head, .page-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.hero-head h1 { grid-column: 1 / span 7; }
.hero-side { grid-column: 8 / -1; padding-bottom: 8px; }
.hero-side .lead, .page-hero .lead { font-size: 1.25rem; line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; }
.hero-side .actions { margin-top: 28px; }
.hero-stage { position: relative; margin-top: clamp(40px, 5vw, 72px); height: clamp(420px, 60vw, 800px); border-radius: var(--r); background: var(--bg-2) var(--dots-light); overflow: hidden; }
.hero-stage .shots { position: absolute; left: var(--pad); right: var(--pad); top: var(--pad); display: grid; transform-origin: 50% 0; }
.hero-stage .shot { grid-area: 1 / 1; width: 100%; border-radius: 10px 10px 0 0; }
.hero-stage .shot + .shot { opacity: 0; }
.hero-stage figcaption { position: absolute; right: var(--inset); bottom: var(--inset); max-width: 32ch; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: var(--t-5); line-height: 1.35; }

/* ---------- home: set a field, read the head ---------- */
.conf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.conf-out { grid-column: 1 / span 6; grid-row: 1; position: sticky; top: 24px; min-height: min(calc(100svh - 48px), 920px); display: grid; place-items: center; padding: var(--pad); border-radius: var(--r); background: var(--bg-2) var(--dots-light); }
.conf-read { grid-column: 8 / -1; grid-row: 1; padding-top: 72px; }
.conf-read .lead { margin-top: 24px; }
.step { padding-block: 10vh; }
.step:last-child { padding-bottom: 16vh; }
/* the steps carry the section: set as headings, not as captions */
.step .st, .how-step .st { max-width: 18ch; font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.step > p:not(.st), .how-step > p:not(.st) { font-size: var(--t-4); }
.step > p:not(.st) { max-width: 44ch; margin-top: 16px; }

/* the sheet: a Google result over the head of the page */
.conf-sheet { width: 100%; max-width: 560px; padding: 24px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.45; }
.serp { padding-bottom: 20px; }
.serp-site { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; }
.serp-site::before { content: "F"; grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dfe8d8; color: #2f4a22; font: 700 13px/1 var(--sans); }
.serp-name { font-size: 14px; color: #202124; }
.serp-url { font-size: 13px; color: #4d5156; }
.serp-title { margin-top: 10px; font-size: 20px; line-height: 1.3; color: var(--ui-blue); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.serp-desc { margin-top: 4px; color: #474747; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.serp-gone { display: none; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #fff4d9; color: #5c3d00; font-weight: 600; }
.head-code { margin: 0; padding: 16px; border-radius: 8px; background: var(--field); color: #e9e9e9; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.head-code .ln { display: block; margin: 0 -6px; padding: 1px 6px; border-radius: 4px; }
.map { margin-top: 14px; font-weight: 600; }
.map .i-on::before, .map .i-off::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #1e8e3e; }
.map .i-off::before { background: #c5221f; }
.conf .i-off, .conf .ln.l-on { display: none; }
.conf:has(#er-noindex:checked) .i-on { display: none; }
.conf:has(#er-noindex:checked) .i-off { display: inline; }
.conf:has(#er-noindex:checked) .ln.i-off { display: block; }
.conf:has(#er-lang:checked):not(:has(#er-noindex:checked)) .ln.l-on { display: block; }
.conf .l-none { display: none; font-weight: 400; color: var(--ink-2); }
.conf:has(#er-lang:checked):has(#er-noindex:checked) .l-none { display: block; }
.conf:has(#er-noindex:checked) .serp > :not(.serp-gone) { opacity: 0.32; }
.conf:has(#er-noindex:checked) .serp-gone { display: block; }

/* controls in the plugin's own look: the fields and switches of the editor sidebar */
.ctl { min-width: 0; max-width: 440px; margin: 28px 0 0; padding: 0; border: 0; }
.fld-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.fld { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid #949494; border-radius: 2px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); transition: border-color 160ms; }
textarea.fld { min-height: 104px; resize: vertical; }
.fld::placeholder { color: #757575; opacity: 1; }
.fld:hover { border-color: #757575; }
.fld:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.sw { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-4); cursor: pointer; }
.sw input { position: absolute; left: 0; width: 36px; height: 20px; margin: 0; opacity: 0; }
.sw-track { flex: none; position: relative; width: 36px; height: 20px; border: 1px solid #1e1e1e; border-radius: 999px; background: #fff; transition: background-color 180ms; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #1e1e1e; transition: transform 180ms var(--ease), background-color 180ms; }
.sw input:checked + .sw-track { background: #1e1e1e; }
.sw input:checked + .sw-track::after { transform: translateX(16px); background: #fff; }
.sw input:focus-visible + .sw-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw:active .sw-track::after { transform: scale(1.2); }
.sw:active input:checked + .sw-track::after { transform: translateX(16px) scale(1.2); }

/* ---------- home: redirects as a board ---------- */
main .board-sec { max-width: none; padding: clamp(96px, 10vw, 160px) var(--m); background: var(--field); color: #fff; }
.board-head, .board { max-width: var(--max); margin-inline: auto; }
.board-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.board-head h2 { grid-column: 1 / span 7; }
.board-head p { grid-column: 9 / -1; color: var(--field-ink-2); }
.board { display: grid; gap: 4px; margin-block: 0; padding: 0; border: 0; min-width: 0; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: 76px; padding: 14px 24px; border-radius: 8px; background: var(--field-2); font-size: var(--t-3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; cursor: pointer; }
.row:hover { background: var(--field-3); }
.row .src { grid-column: 1 / span 5; overflow-wrap: anywhere; }
.row .to { grid-column: 6 / span 3; color: var(--field-ink-2); }
.row .note { grid-column: 9 / span 3; font-size: var(--t-4); color: var(--field-ink-2); letter-spacing: 0; }
.row .code { grid-column: 12; justify-self: end; padding: 6px 12px; border-radius: 6px; background: #fff; color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.row .more { display: none; grid-column: 1 / span 8; max-width: 56ch; margin-top: 20px; font-size: var(--t-4); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.row:has(input:checked) { min-height: 216px; background: var(--accent); color: var(--ink); }
.row:has(input:checked) .to, .row:has(input:checked) .note { color: var(--ink); }
.row:has(input:checked) .code { background: var(--ink); color: #fff; }
.row:has(input:checked) .more { display: block; }
.row:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- home: switching, with the screen pinned ---------- */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.how-read { grid-column: 1 / span 5; }
.how-read > h2 { max-width: 14ch; }
.how-step { padding-top: 56px; }
.how-step > p:not(.st) { max-width: 46ch; margin-top: 14px; }
/* the import screens are shown whole, the same distance from every edge of their stage */
.stage.how-inline { margin-top: 24px; padding: var(--pad); }
.stage.how-inline img { border-radius: 10px; }
.how-stage { display: none; }
.how:not(:has(.how-stage)) .how-read, .how-solo .how-read { grid-column: 1 / -1; }

/* ---------- home: what it adds ---------- */
main .weight { max-width: none; min-height: 88svh; display: grid; grid-template-rows: auto 1fr; padding: clamp(72px, 8vw, 120px) var(--m) clamp(40px, 4vw, 64px); background: var(--accent); }
.weight-top, .weight-bottom { width: 100%; max-width: var(--max); margin-inline: auto; }
.weight-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.weight-top h2 { grid-column: 1 / span 6; }
/* a browser's network panel, filtered to EasyRankly */
.net { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 440px; padding: var(--inset); border-radius: 14px; background: #fff; font-size: 15px; }
.net-head { margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.net-list { display: grid; gap: 4px; margin: 0; }
.net-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 8px; background: var(--bg-2); }
.net-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.net-list .net-total { background: var(--ink); color: #fff; font-weight: 600; }
.weight-bottom { align-self: end; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-top: 48px; }
.figure { grid-column: 1 / span 8; font-size: var(--t-fig); font-weight: 700; line-height: 0.8; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figure span { font-size: 0.22em; letter-spacing: -0.03em; }
.working { grid-column: 9 / -1; justify-self: end; max-width: 32ch; }

/* ---------- home: made of WordPress ---------- */
.also { display: grid; gap: 8px; margin-top: 32px; }
.also li { padding: var(--inset); border-radius: 14px; background: var(--bg-2); }
.native { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.native-copy { display: contents; }
.native-copy > h2 { grid-column: 1 / span 6; grid-row: 1; }
.native-copy > p { grid-column: 8 / -1; grid-row: 1; max-width: 50ch; }
/* the whole admin, opened up as it scrolls in */
.native-shot { grid-column: 1 / -1; grid-row: 2; height: clamp(360px, 54vw, 760px); margin-top: clamp(40px, 5vw, 64px); padding: var(--pad) var(--pad) 0; border-radius: var(--r); background: var(--field) var(--dots-dark); overflow: clip; } /* clip, not hidden: the screen inside keeps the page as its scroll timeline */
.native-shot img { width: 100%; border-radius: 10px 10px 0 0; transform-origin: 50% 0; }
.native-copy > .also { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }

/* ---------- questions: filled tiles ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq > h2 { grid-column: 1 / span 4; position: sticky; top: 96px; }
.faq > .tiles { grid-column: 5 / -1; }
.tiles { display: grid; gap: 8px; }
.tiles .wp-block-details { border-radius: var(--r); background: var(--bg-2); transition: background-color 220ms var(--ease); }
.tiles .wp-block-details:hover { background: var(--bg-3); }
.tiles .wp-block-details[open] { background: var(--accent); }
.tiles summary { position: relative; display: flex; align-items: center; min-height: 76px; padding: 20px 72px 20px 28px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; cursor: pointer; list-style: none; }
.tiles summary::-webkit-details-marker { display: none; }
.tiles summary::before, .tiles summary::after { content: ""; position: absolute; right: 28px; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ink); transition: transform 240ms var(--ease); }
.tiles summary::after { transform: rotate(90deg); }
.tiles details[open] > summary::after { transform: rotate(0deg); }
.tiles details > :not(summary) { max-width: 60ch; padding: 0 28px 28px; }
.tiles details code { font-size: 0.9em; overflow-wrap: anywhere; }
.tiles .more { margin-top: 16px; padding-left: 4px; }

/* ---------- the close: one row of tiles ---------- */
main .cta { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 880px) minmax(0, 1fr); grid-template-rows: 400px; gap: 12px; padding: 0; }
.cta-side { min-height: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--field) var(--dots-dark); overflow: hidden; }
.cta-right { border-radius: var(--r) 0 0 var(--r); background: var(--bg-2) var(--dots-light); }
.cta-right img { width: 520px; max-width: none; margin: var(--pad) 0 0 var(--pad); border-radius: 10px; }
.cta-tile { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); border-radius: var(--r); background: var(--accent); }
.cta-tile h2 { max-width: 16ch; }
.cta-tile p { max-width: 46ch; margin-top: 20px; }

/* ---------- footer: one quiet line ---------- */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; max-width: calc(var(--max) + 2 * var(--m)); margin: clamp(120px, 20svh, 200px) auto 0; padding: 0 var(--m) 32px; font-size: var(--t-5); }
.foot-what { color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot-links a, .foot-end a { text-decoration: none; }
.foot-links a { display: inline-block; min-width: 24px; padding-block: 6px; text-align: center; }
.foot-links a:hover, .foot-end a:hover { text-decoration: underline; }
.foot-end { justify-self: end; color: var(--ink-2); }
.foot-end a { color: var(--ink); }

/* ---------- inner pages: the opening ---------- */
main .sec.page-hero { margin-top: clamp(32px, 5vw, 72px); row-gap: 32px; }
.page-hero > * { grid-column: 1 / -1; }
.page-hero > h1 { grid-column: 1 / span 8; }
.page-hero > .lead { grid-column: 9 / -1; padding-bottom: 10px; }
.crumbs, .date { font-size: var(--t-5); color: var(--ink-2); }
.crumbs a { display: inline-block; padding-block: 4px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jump a { padding: 10px 18px; border-radius: 999px; background: var(--bg-2); font-size: var(--t-5); font-weight: 500; text-decoration: none; transition: background-color 180ms var(--ease); }
.jump a:hover { background: var(--accent); }
.reqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 16px 0 0; padding: var(--card); border-radius: var(--r); background: var(--bg-2); list-style: none; font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

/* a real screen on a flat field, cut by its edge */
.stage { overflow: hidden; padding: var(--pad) 0 0 var(--pad); border-radius: var(--r); background: var(--field) var(--dots-dark); }
.stage.sun { background: var(--accent) var(--dots-light); }
.stage img { width: 100%; border-radius: 10px 0 0 0; }
.stage.panel { grid-column: 7 / -1; display: grid; justify-items: center; height: clamp(420px, 44vw, 620px); padding: var(--pad) var(--pad) 0; }
.stage.panel img { width: min(420px, 100%); border-radius: 10px 10px 0 0; }

/* ---------- features: copy beside a screen ---------- */
.frow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.frow-copy { grid-column: 1 / span 5; }
.frow-copy > p { max-width: 44ch; margin-top: 24px; }
.frow .stage { grid-column: 7 / -1; max-height: 640px; }
.frow.flip .frow-copy { grid-column: 8 / -1; grid-row: 1; }
.frow.flip .stage { grid-column: 1 / span 6; grid-row: 1; }
.also code, .lines code { font-size: 0.88em; overflow-wrap: anywhere; }

/* ---------- features: a wide screen under its heading ---------- */
.fwide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.fwide > h2 { grid-column: 1 / span 6; }
.fwide > p { grid-column: 8 / -1; max-width: 50ch; }
.fwide > .stage { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 64px); }
.fwide > .codes, .fwide > .pair { grid-column: 1 / -1; margin-top: 12px; }
.codes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: var(--card); border-radius: var(--r); background: var(--bg-2); list-style: none; }
.codes .code { display: inline-block; margin: 0 6px 12px 0; padding: 6px 12px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 1.125rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.codes li { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; }
.codes li > :not(.code) { flex-basis: 100%; }
.pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; align-items: center; }
.pair > p { grid-column: 1 / span 5; max-width: 44ch; padding: 8px 0; }
.snippet { grid-column: 6 / -1; margin: 0; padding: var(--card); border-radius: var(--r); background: var(--bg-2); font-size: 14px; line-height: 1.7; white-space: pre; overflow-x: auto; }
.snippet .c { color: var(--ink-2); }

/* ---------- features: what it works with ---------- */
.lines { display: grid; gap: 8px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.lines li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: var(--card); border-radius: var(--r); background: var(--bg-2); }
.lines strong { grid-column: 1 / span 5; font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.lines span { grid-column: 7 / -1; max-width: 56ch; }

/* ---------- a black field ---------- */
main .field-sec, main .zeros { max-width: none; padding: clamp(80px, 8vw, 128px) var(--m); background: var(--field); color: #fff; }
main .zeros { background: var(--accent); color: var(--ink); }
.field-sec > *, .zeros > * { max-width: var(--max); margin-inline: auto; }
.field-sec > p { margin-top: 20px; color: var(--field-ink-2); }
.field-sec a { color: #fff; }
.field-sec .wp-block-button__link { background: #fff; color: var(--ink); }
.field-sec .wp-block-button__link:hover { background: var(--bg-3); color: var(--ink); }
.field-sec .is-style-outline .wp-block-button__link { background: var(--field-3); color: #fff; }
.field-sec .is-style-outline .wp-block-button__link:hover { background: #3d3d3d; color: #fff; }
.field-sec .wp-block-buttons.actions { max-width: var(--max); }
.nos, .principles { display: grid; gap: 8px; margin-block: clamp(40px, 5vw, 72px) 0; padding: 0; list-style: none; }
.nos li { padding: var(--card); border-radius: var(--r); background: var(--field-2); font-size: var(--t-3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.principles li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: baseline; padding: var(--card); border-radius: var(--r); background: var(--field-2); color: var(--field-ink-2); }
.principles strong { color: #fff; font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

/* ---------- about ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: start; }
.statement > h2 { grid-column: 1 / span 6; }
.statement > .big { grid-column: 8 / -1; padding-top: 0.4em; font-size: var(--t-3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.zero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: clamp(48px, 6vw, 88px) 0 0; }
.zero-grid dt { font-size: clamp(6rem, 12vw, 12rem); font-weight: 700; letter-spacing: -0.07em; line-height: 0.8; }
.zero-grid dd { max-width: 22ch; margin: 24px 0 0; }
.open-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.open-copy { grid-column: 1 / span 6; }
.open-copy > p { max-width: 44ch; margin-top: 24px; }
.open-sec .actions { margin-top: 32px; }

/* ---------- docs ---------- */
.install, .doc-import { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.install-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.install-head h2 { grid-column: 1 / span 6; }
.install-head p { grid-column: 8 / -1; }
.install > .stage { grid-column: 1 / -1; max-height: 560px; margin-top: clamp(40px, 5vw, 64px); }
.doc-import > h2 { grid-column: 1 / span 8; }
.doc-import > .stage { grid-column: 1 / -1; max-height: 560px; margin-top: clamp(40px, 5vw, 64px); }
.path { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.path.small { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.path li { position: relative; padding-top: 32px; }
.path li::before, .path li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--bg-3); }
.path li::after { background: var(--ink); transform-origin: 0 50%; }
.path strong { display: block; margin-bottom: 12px; font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p.note { grid-column: 1 / -1; justify-self: start; max-width: 64ch; margin-top: 40px; padding: var(--inset); border-radius: 14px; background: var(--accent); }
.helpline .actions { margin-top: 40px; }

/* ---------- changelog ---------- */
.rel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
main .rel + .rel { margin-top: 12px; }
.rel-v { grid-column: 1 / span 5; position: sticky; top: 96px; font-size: var(--t-1); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.rel-body { grid-column: 6 / -1; padding: clamp(28px, 4vw, 56px); border-radius: var(--r); background: var(--bg-2); }
.rel-body > p { max-width: 56ch; margin-top: 16px; }
.changes { display: grid; gap: 10px; margin-top: 24px; padding-left: 1.2em; }
.rel-body p.note { margin-top: 32px; }
.rel-shot { margin-top: 32px; }
main .more.sec { margin-top: 64px; color: var(--ink-2); }
.more a { color: var(--ink); }

/* ---------- contact ---------- */
.links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.links a { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; align-items: center; min-height: clamp(140px, 14vw, 200px); padding: var(--card); border-radius: var(--r); background: var(--bg-2); text-decoration: none; transition: background-color 220ms var(--ease); }
.links a:hover { background: var(--accent); }
.links a:active { transform: scale(0.995); }
.links strong { grid-column: 1 / span 7; font-size: var(--t-2); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; overflow-wrap: anywhere; }
.links span { grid-column: 8 / span 4; max-width: 34ch; }
.links a::after { content: "→"; grid-column: 12; grid-row: 1; justify-self: end; font-size: var(--t-3); transition: transform 220ms var(--ease); }
.links a:hover::after { transform: translateX(6px); }
.bug { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.bug-report { grid-column: 1 / span 6; }
.bug-report > p { margin-top: 20px; }
.bug-security { grid-column: 8 / -1; margin-top: 12px; padding: var(--card); border-radius: var(--r); background: var(--field); color: #fff; }
.bug-security p { margin-top: 12px; color: var(--field-ink-2); }
.bug-security a { color: #fff; }

/* ---------- privacy, posts and plain pages ---------- */
.nones { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.nones > h2 { grid-column: 1 / span 5; }
.none-list { grid-column: 7 / -1; display: grid; gap: 8px; margin: 0; }
.none-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: baseline; padding: var(--card); border-radius: 14px; background: var(--bg-2); }
.none-list dt { font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.none-list dd { margin: 0; color: var(--ink-2); }
.prose > * { max-width: 720px; }
.prose > h2 { margin-top: 64px; padding-top: 0; font-size: var(--t-3); letter-spacing: -0.025em; line-height: 1.15; }
.prose > h3 { margin-top: 40px; font-size: 1.25rem; }
.prose > :first-child { margin-top: 0; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > pre { margin-top: 16px; }
.prose > h2 + p, .prose > h3 + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration-line: underline; }
.prose > figure, .prose > .wp-block-image { margin-block: 40px; }
.prose img { border-radius: 12px; }
.prose blockquote { margin-inline: 0; padding: var(--card); border-radius: 14px; background: var(--bg-2); font-size: 1.25rem; }
.prose pre { padding: var(--inset); border-radius: 14px; background: var(--bg-2); font-size: 14px; overflow-x: auto; }
.prose :not(pre) > code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--bg-2); font-size: 0.9em; }
.single-cover { margin: 0 0 64px; border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 96px; }
.post-nav > div { flex: 1 1 280px; padding: var(--card); border-radius: var(--r); background: var(--bg-2); }
.post-nav a { display: inline-block; padding-block: 4px; font-weight: 600; text-decoration: none; }
.post-nav > div:empty { visibility: hidden; }
.post-nav .post-navigation-link-next { text-align: right; }
.post-navigation-link__label { display: block; margin-bottom: 6px; font-size: var(--t-5); font-weight: 500; color: var(--ink-2); }
.post-navigation-link__title { font-size: 1.25rem; letter-spacing: -0.015em; }
.post-grid .wp-block-post-template.is-layout-grid { gap: clamp(40px, 5vw, 72px) var(--gap); }
.post-card .wp-block-post-featured-image { margin: 0 0 20px; border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.post-card .wp-block-post-featured-image img { transition: transform 500ms var(--ease); }
.post-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.post-card .wp-block-post-title { margin-top: 8px; font-size: var(--t-3); }
.post-card .wp-block-post-title a { text-decoration: none; }
.post-card .wp-block-post-title a:hover { text-decoration: underline; }
.post-card .wp-block-post-excerpt { margin-top: 10px; color: var(--ink-2); }
.post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-query-pagination { margin-top: 72px; gap: 8px; font-weight: 500; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bg-2); text-decoration: none; }
.wp-block-query-pagination .current { background: var(--ink); color: #fff; }
.lead.center { text-align: center; }
.hero-search .wp-block-search__inside-wrapper { max-width: 560px; gap: 8px; padding: 0; border: 0; }
.hero-search .wp-block-search__input { min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--bg-2); font: inherit; }
.hero-search .wp-block-search__button { margin: 0; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 var(--t-4)/1 var(--sans); }

/* ---------- not found ---------- */
.lost { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; }
main .sec.lost { min-height: 52svh; margin-top: clamp(40px, 6vw, 96px); }
.lost-code { grid-column: 1 / span 7; font-size: var(--t-fig); font-weight: 700; letter-spacing: -0.07em; line-height: 0.8; }
.lost-copy { grid-column: 8 / -1; padding-bottom: 8px; }
.lost-copy h1 { font-size: var(--t-2); letter-spacing: -0.035em; line-height: 1.02; }
.lost-copy .lead { margin-top: 20px; }

/* =====================================================================
   Motion: transform and opacity only. Nothing waits for it to be read.
   ===================================================================== */
@keyframes er-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes er-rise { from { transform: translateY(48px); } to { transform: none; } }
@keyframes er-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes er-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes er-settle { from { transform: scale(1.05) translateY(24px); } to { transform: none; } }
@keyframes er-drift { from { transform: translateY(40px); } to { transform: translateY(-40px); } }
@keyframes er-cross-2 { 0%, 25% { opacity: 0; } 31.67%, 56.66% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
@keyframes er-cross-3 { 0%, 50% { opacity: 0; } 56.67%, 81.66% { opacity: 1; } 81.67%, 100% { opacity: 0; } }
@keyframes er-cross-4 { 0%, 75% { opacity: 0; } 81.67%, 93.33% { opacity: 1; } 100% { opacity: 0; } }
@keyframes er-flash { from { background-color: rgba(240, 178, 44, 0.6); } to { background-color: transparent; } }
@keyframes er-open { from { clip-path: inset(0 7% round var(--r)); } to { clip-path: inset(0 0 round var(--r)); } }
@keyframes er-lift { from { transform: translateY(72px) scale(0.9); } to { transform: none; } }
@keyframes er-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes er-ink { 0% { opacity: 0.3; } 35%, 65% { opacity: 1; } 100% { opacity: 0.3; } }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.hero-head h1, .page-hero > * { animation: er-up 900ms var(--ease) both; }
	.hero-side, .page-hero > :nth-child(2) { animation: er-up 900ms 90ms var(--ease) both; }
	.hero-stage { animation: er-up 1000ms 180ms var(--ease) both; }
	.lost > * { animation: er-up 900ms var(--ease) both; }
	.lost-copy { animation-delay: 120ms; }
	.hero-stage .shots { animation: er-settle 2200ms 180ms var(--ease) both; }
	.hero-stage .shot:nth-child(2) { animation: er-cross-2 24s 2s linear infinite; }
	.hero-stage .shot:nth-child(3) { animation: er-cross-3 24s 2s linear infinite; }
	.hero-stage .shot:nth-child(4) { animation: er-cross-4 24s 2s linear infinite; }
	.conf .ln, .conf .map > span { animation: er-flash 1400ms ease-out; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		main .sec:not(.hero) :is(.lead, .board-head p, .st, .step > p, .ctl, .how-step > p, .native-copy > p, .open-copy > p, .also li, .native-shot, .tiles > *, .figure, .working, .cta-tile, .cta-side, .conf-sheet, .row, .frow-copy > p, .frow-copy .also li, .frow .stage, .stage.panel, .fwide > p, .fwide > .stage, .codes, .pair > *, .lines li, .nos li, .principles li, .zero-grid > div, .statement > .big, .reqs, .path li, p.note, .rel-body, .links li, .bug-report > *, .bug-security, .none-list > div, .net-list > div, .post-card) {
			animation: er-up linear forwards;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
		main .sec:not(.hero) :is(h2, .figure) { animation: er-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
		main .sec:not(.hero) :is(.lead, .step > p, .board-head p, .how-step > p, .native-copy > p, .working, .tiles > :nth-child(even), .row:nth-child(odd)) { animation-range: entry 10% entry 90%; }
		main .sec:not(.hero) :is(.stage.panel, .ctl, .cta-right) { animation-range: entry 15% entry 100%; }
		main .sec.native:not(.hero) figure.native-shot.native-shot { animation: er-open linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
		.native-shot img { animation: er-lift linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
		.native .also li:nth-child(2) { animation-range: entry 10% entry 90%; }
		.native .also li:nth-child(3) { animation-range: entry 20% entry 100%; }
		main .sec:not(.hero) :is(.lines li, .nos li, .principles li, .zero-grid > div, .path li, .links li, .none-list > div):nth-child(even) { animation-range: entry 10% entry 90%; }
		.net-list > div:nth-child(2) { animation-range: entry 8% entry 84%; }
		.net-list > div:nth-child(3) { animation-range: entry 16% entry 88%; }
		.net-list > div:nth-child(4) { animation-range: entry 24% entry 92%; }
		.net-list > div:nth-child(5) { animation-range: entry 32% entry 96%; }
		.path li::after { animation: er-fill linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
		.path li:nth-child(2)::after { animation-range: entry 60% cover 60%; }
		.path li:nth-child(3)::after { animation-range: entry 80% cover 70%; }
		.path li:nth-child(4)::after { animation-range: entry 100% cover 80%; }
	}
}

/* the import screens change while the three steps pass */
@supports (timeline-scope: --a) and (animation-timeline: view()) {
	@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
		.how { timeline-scope: --er-step-2, --er-step-3; }
		.how-step { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
		.how-read > h2 { margin-bottom: -10vh; }
		.how-step:nth-child(3) { view-timeline: --er-step-2 block; }
		.how-step:nth-child(4) { view-timeline: --er-step-3 block; }
		.how-step .st { animation: er-ink linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
		.how-inline { display: none; }
		.how-stage { display: grid; grid-column: 6 / -1; grid-row: 1; position: sticky; top: 22vh; padding: var(--pad); border-radius: var(--r); background: var(--field) var(--dots-dark); overflow: hidden; }
		.hs { grid-area: 1 / 1; width: 100%; border-radius: 10px; }
		.hs-1 { animation: er-out linear forwards; animation-timeline: --er-step-2; animation-range: entry 50% entry 80%; }
		.hs-2 { opacity: 0; animation: er-in linear both, er-out linear forwards; animation-timeline: --er-step-2, --er-step-3; animation-range: entry 50% entry 80%, entry 50% entry 80%; }
		.hs-3 { opacity: 0; animation: er-in linear both; animation-timeline: --er-step-3; animation-range: entry 50% entry 80%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* the Site Editor */
.editor-styles-wrapper .conf-out, .editor-styles-wrapper .faq > h2 { position: relative; top: 0; height: auto; }

/* ---------- tablet ---------- */
@media (max-width: 960px) {
	.hero-head h1, .hero-side, .page-hero > * { grid-column: 1 / -1; }
	.hero-side, .page-hero .lead { max-width: 560px; }
	.conf { display: flex; flex-direction: column; }
	.conf-read, .conf-read > .step { display: contents; }
	.conf-read > h2 { order: 1; }
	.conf-read > .lead { order: 2; }
	.conf-out { order: 3; position: static; min-height: 0; margin-top: 32px; padding: var(--inset); }
	.conf .ctl { order: 4; width: 100%; max-width: none; margin-top: 12px; padding: var(--inset); border-radius: 14px; background: var(--bg-2); }
	.conf .step > :not(.ctl) { order: 10; }
	.conf .step .st { margin-top: 48px; }
	.board-head h2, .board-head p { grid-column: 1 / -1; }
	.row .src { grid-column: 1 / span 6; }
	.row .to { grid-column: 7 / span 4; }
	.row .note { display: none; }
	.row .code { grid-column: 11 / -1; }
	.how-read { grid-column: 1 / -1; }
	.weight-top h2, .net, .figure, .working { grid-column: 1 / -1; justify-self: start; }
	.net { margin-top: 28px; }
	.working { margin-top: 24px; }
	.native-copy > h2, .native-copy > p, .native-shot, .open-copy { grid-column: 1 / -1; grid-row: auto; }
	.native-copy > p { margin-top: 24px; }
	.native-shot { margin-top: 40px; }
	.native-copy > .also { grid-row: auto; grid-template-columns: minmax(0, 1fr); }
	.native-shot { order: 1; }
	.native-copy > .also { order: 2; }
	.faq > h2 { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
	.faq > .tiles { grid-column: 1 / -1; }
	main .cta { grid-template-columns: 1fr 1fr; padding-inline: var(--m); }
	main .cta { grid-template-rows: auto 140px; }
	.cta-tile { grid-column: 1 / -1; grid-row: 1; min-height: 300px; }
	.cta-side, .cta-right { border-radius: var(--r); }
	.cta-right img { width: 280px; }
	.foot { grid-template-columns: 1fr; gap: 8px; margin-top: 20svh; }
	.foot-links { justify-content: flex-start; }
	.foot-end { justify-self: start; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
	.foot-links { gap: 8px 16px; }
	.native-shot { height: 380px; padding: var(--pad) 0 0 var(--pad); }
	.native-shot img { width: 190%; max-width: none; border-radius: 10px 0 0 0; }
	body { font-size: 16px; }
	.nav { height: 68px; gap: 12px; }
	.wp-block-buttons.actions { flex-direction: column; align-items: stretch; }
	.wp-block-buttons.actions .wp-block-button__link { width: 100%; }
	.hero-stage { height: 460px; }
	.hero-stage .shots { right: auto; width: 760px; max-width: none; }
	.hero-stage figcaption { left: var(--inset); max-width: none; }
	.conf-sheet { padding: var(--inset); }
	.serp-title { font-size: 18px; }
	.row { min-height: 64px; padding: 12px 16px; font-size: 1.25rem; }
	.row .to { display: none; }
	.row .src { grid-column: 1 / span 9; }
	.row .code { grid-column: 10 / -1; font-size: 1rem; }
	.row:has(input:checked) { min-height: 200px; }
	.row:has(input:checked) .to, .row:has(input:checked) .note { display: block; grid-column: 1 / -1; margin-top: 10px; font-size: 16px; }
	.row .more { grid-column: 1 / -1; }
	.row .code { grid-row: 1; }
	main .weight { min-height: 84svh; }
	.figure { font-size: 30vw; line-height: 0.85; }
	.cta-tile h2 { font-size: 1.875rem; }
	.figure span { display: block; margin-top: 12px; font-size: 1.25rem; letter-spacing: -0.01em; }
	.tiles summary { min-height: 64px; padding: 18px 60px 18px 20px; font-size: 1.125rem; }
	.tiles summary::before, .tiles summary::after { right: 22px; }
	.tiles details > :not(summary) { padding: 0 20px 20px; }
}

/* ---------- inner pages, tablet ---------- */
@media (max-width: 960px) {
	.page-hero > h1, .page-hero > .lead { grid-column: 1 / -1; }
	.page-hero > .lead { padding-bottom: 0; }
	.frow-copy, .frow .stage, .frow.flip .frow-copy, .frow.flip .stage { grid-column: 1 / -1; grid-row: auto; }
	.frow .stage { margin-top: 40px; max-height: 520px; }
	.stage.panel { grid-column: 1 / -1; margin-top: 48px; }
	.fwide > h2, .fwide > p, .install-head h2, .install-head p, .doc-import > h2, .statement > h2, .statement > .big, .nones > h2, .none-list, .bug-report, .bug-security, .lost-code, .lost-copy { grid-column: 1 / -1; }
	.fwide > p, .install-head p { margin-top: 20px; }
	.statement > .big { padding-top: 0; }
	.none-list { margin-top: 32px; }
	.bug-security { margin-top: 48px; }
	.codes, .zero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	.pair > p, .snippet { grid-column: 1 / -1; }
	.lines strong, .lines span { grid-column: 1 / -1; }
	.lines span { margin-top: 10px; }
	.path, .path.small { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.rel-v { grid-column: 1 / -1; position: static; margin-bottom: 20px; }
	.rel-body { grid-column: 1 / -1; }
	main .rel + .rel { margin-top: 64px; }
	.links strong { grid-column: 1 / span 11; }
	.links span { grid-column: 1 / span 11; }
	.post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- inner pages, phone ---------- */
@media (max-width: 640px) {
	.frow .stage { max-height: 380px; }
	.frow .stage img { width: 170%; max-width: none; }
	.reqs { grid-template-columns: 1fr; gap: 16px; }
	.codes { grid-template-columns: 1fr; }
	.snippet { white-space: pre-wrap; overflow-wrap: anywhere; }
	.stage.wide img, .install > .stage img, .doc-import > .stage img { width: 190%; max-width: none; }
	.rel-shot img { width: 160%; max-width: none; }
	.path, .path.small { grid-template-columns: 1fr; }
	.principles li { grid-template-columns: 1fr; row-gap: 10px; }
	.none-list > div { grid-template-columns: 1fr; gap: 6px; }
	.links strong { font-size: var(--t-3); }
	.links a { min-height: 0; }
	.rel-v { font-size: var(--t-2); }
	.post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
	.lost-code { font-size: 38vw; }
}