/* Hallmark · shape: Bento Grid · genre: modern-minimal · theme: Ultraviolet (deal 2/3, seed job-guru-local-macos-c769·4f0e12bf·2026-11-11·r0) · job: try · draw: abe958
 * hero: Banner · nav: edge-aligned · footer: colophon block · imagery: screenshots 6 and the CV it wrote (the built app on demo data), Guru in 3D from the logo · signature: the real Inbox, scored and ticked, running off the first screen · ultraviolet: lavender, the accent on the app's brand hue 280, Jost for Outfit (the page ships in Ukrainian and Outfit has no Cyrillic), one night band, one field band
 * axes: light/geometric-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page argues only by showing the app; the by-hand table and the line that the AI provider sees your profile give a reader something to disagree with */
/* Hallmark · answered F4 · the close repeats the hero's one action, the download, as a white pill on the violet field */
/* Hallmark · dismissed 23 · the scaffold's photo tint in base.css; product captures switch it off, so no accent fill is painted */
/* Hallmark · dismissed 58 · 83 words where the by-hand table's last rows meet the first privacy rows across the night band's edge; neither section passes 60 on its own */
/* Hallmark · hero-review: folded into the finish review · finish-review: subagent · 8 findings · 7 resolved 1 partial · gap: on a phone the CV page still runs off the right edge */
/* Jost stands in for the theme's Outfit, which has no Cyrillic; Onest is the theme's own body face. Both OFL, self-hosted. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/fonts/jost-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/onest-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/onest-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 6rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(95% 0.02 300); --color-paper-2: oklch(92% 0.03 300); --color-paper-3: oklch(89% 0.035 300);
  --color-ink: oklch(18% 0.02 300); --color-ink-2: oklch(28% 0.03 300); --color-muted: oklch(46% 0.05 300);
  --color-rule: oklch(84% 0.04 300); --color-rule-2: oklch(70% 0.08 295);
  --color-accent: oklch(52% 0.25 280); --color-accent-deep: oklch(45% 0.23 280); --color-accent-soft: oklch(87% 0.07 288);
  --color-accent-ink: oklch(97% 0.01 300); --color-focus: oklch(52% 0.25 280);
  --color-field: oklch(52% 0.25 280); --color-field-rule: oklch(68% 0.16 284);
  --color-night: oklch(16% 0.025 290); --color-night-2: oklch(21% 0.03 290); --color-night-ink: oklch(93% 0.035 300); --color-night-muted: oklch(72% 0.06 300); --color-night-rule: oklch(30% 0.04 290);
  --font-display: "Jost", ui-sans-serif, system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, sans-serif;
  --radius-card: 16px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-card: 0 1px 2px oklch(18% 0.02 300 / 0.06);
  --tracking-display: -0.03em; --display-weight: 500;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: tint accent con=10 */
[data-slot]:has(> img) { isolation: isolate; background: color-mix(in oklab, var(--color-accent), white 82%); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
[data-slot] > img { z-index: 0; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
[data-slot]:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in oklab, var(--color-accent), black 55%); mix-blend-mode: lighten; pointer-events: none; }


/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font: 500 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 36px; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; text-decoration: none; white-space: nowrap; color: var(--color-ink-2); transition: color var(--dur-micro) var(--ease-out); }
.nav__link:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--quiet { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.link { text-decoration: underline; text-decoration-color: var(--color-rule-2); transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }

h1, h2, h3 { text-transform: lowercase; line-height: 1; }
h3 { line-height: 1.1; letter-spacing: -0.02em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.terms { max-width: none; font-size: var(--text-sm); color: var(--color-muted); }
.label { font: 500 var(--text-sm)/1.4 var(--font-display); text-transform: lowercase; color: var(--color-muted); }

/* A capture of the app is shown as it is: the theme's photo tint stays off it. */
[data-slot][data-kind="product"] { margin: 0; border-radius: var(--radius-card); background: var(--color-paper-2); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
[data-slot][data-kind="product"] > img, [data-slot][data-kind="product"] > picture > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: none; mix-blend-mode: normal; }
[data-slot][data-kind="product"]:has(> img)::before { content: none; }

/* Hero: a banner, the Inbox rising into the first screen under it */
.hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: end; }
.hero__side { display: grid; gap: var(--space-lg); justify-items: start; }
.hero .lead { color: var(--color-ink-2); }
.showcase__shot { aspect-ratio: 16 / 10; box-shadow: var(--shadow-card); }
.showcase figure { margin: 0; }
.showcase figcaption { margin-top: var(--space-md); max-width: 60ch; }

/* Guru, the app's own character, in 3D: he looks over the Inbox, sits by the privacy rows, waits on the guide. */
.guru { height: auto; pointer-events: none; user-select: none; }
.showcase figure { position: relative; }
.showcase__shot { z-index: 1; }
.showcase figure::before { content: ""; position: absolute; right: var(--space-2xl); bottom: 100%; z-index: 0; width: 168px; aspect-ratio: 1; margin-bottom: -56px; background: image-set(url("/guru/guru-peek-400.webp") 1x, url("/guru/guru-peek-800.webp") 2x) center / contain no-repeat; pointer-events: none; }
.split__head { display: grid; gap: var(--space-2xl); justify-items: start; }
.guru--sit { width: 260px; }
.doc__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: end; }
.guru--beside { width: 300px; justify-self: center; margin-bottom: calc(-1 * var(--space-lg)); }
.guru--lost { width: 220px; }

/* Sections */
.s { padding-top: var(--section-gap); }
.s--l { padding-top: var(--section-gap-l); }
.s--end { padding-bottom: var(--section-gap); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: end; }
.head .lead { color: var(--color-ink-2); }

/* What one tick sets off: the bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-height: 440px; padding: var(--space-xl); overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.tile--7 { grid-column: span 7; }
.tile--5 { grid-column: span 5; }
.bento > :nth-child(n + 3) { min-height: 540px; }
.tile p { color: var(--color-ink-2); }
[data-slot][data-kind="product"].tile__shot { flex: 1; min-height: 240px; margin: var(--space-lg) calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) 0; border-radius: var(--radius-card) 0 0 0; box-shadow: var(--shadow-card); }

/* By hand, and with Guru */
.compare { width: 100%; border-collapse: collapse; }
.compare caption { text-align: left; padding-bottom: var(--space-md); }
.compare th, .compare td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.compare thead th { padding-block: var(--space-sm); font: 500 var(--text-sm)/1.4 var(--font-display); text-transform: lowercase; color: var(--color-muted); white-space: nowrap; }
.compare tbody th { width: 28%; font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; text-transform: lowercase; }
.compare td { width: 36%; color: var(--color-muted); }
.compare td:last-child { padding-right: 0; color: var(--color-ink); }

/* Bands */
.band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); }
.band--night { background: var(--color-night); color: var(--color-night-ink); }
.band--night :focus-visible { outline-color: var(--color-night-ink); }
.band--field { padding-bottom: 0; overflow: hidden; background: var(--color-field); color: var(--color-accent-ink); }
.band--field :focus-visible { outline-color: var(--color-accent-ink); }
.band--field .btn--primary { background: var(--color-accent-ink); color: var(--color-accent-deep); }
.band--field .btn--primary:hover { background: var(--color-paper-2); }
.band--field .btn--quiet { color: var(--color-accent-ink); box-shadow: inset 0 0 0 1.5px var(--color-accent-ink); }
.band--field .btn--quiet:hover { background: var(--color-accent-deep); }
.band--field .terms { color: var(--color-accent-ink); }
.band--field .link, .band--field .link:hover { text-decoration-color: var(--color-accent-ink); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }

.rows { display: grid; margin: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.rows > div:last-child { padding-bottom: 0; }
.rows dt { font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; text-transform: lowercase; }
.rows dd { margin: 0; max-width: 46ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.band--night .rows > div { border-top-color: var(--color-night-rule); }
.band--night .rows dd { color: var(--color-night-ink); }

/* From download to first search */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { display: grid; gap: var(--space-sm); align-content: start; padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); counter-increment: step; }
.steps > li:first-child { padding-left: 0; border-left: 0; }
.steps > li:last-child { padding-right: 0; }
.steps > li::before { content: counter(step); margin-bottom: var(--space-xl); font: 300 var(--text-display-s)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.steps p { color: var(--color-ink-2); }
.steps--rows { grid-template-columns: minmax(0, 1fr); }
.steps--rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: baseline; padding: var(--space-lg) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
.steps--rows > li:first-child { border-top: 1px solid var(--color-rule); }
.steps--rows > li::before { margin-bottom: 0; font-size: var(--text-3xl); }
.steps--rows > li { padding-block: var(--space-xl); }
.steps--rows p { font-size: var(--text-lead); line-height: 1.45; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.cols > div { display: grid; gap: var(--space-sm); align-content: start; min-height: 200px; padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.cols > div:first-child { padding-left: 0; border-left: 0; }
.cols > div:last-child { padding-right: 0; }
.cols dt { font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; text-transform: lowercase; }
.cols dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

/* The close: the download beside one last screen */
.close__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: end; }
.close__text { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--section-gap-s); }
.close__text h2 { margin-bottom: var(--space-md); }
[data-slot][data-kind="product"].close__shot { aspect-ratio: 2 / 1; border-radius: var(--radius-card) var(--radius-card) 0 0; outline-color: var(--color-field-rule); }

/* Footer: a colophon block */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); row-gap: var(--space-2xl); align-items: start; }
.footer__about { display: grid; gap: var(--space-lg); justify-items: start; }
.footer__about p { max-width: 46ch; color: var(--color-ink-2); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); max-width: none; }

/* The first-launch guide and the not-found page */
.doc { padding-block: var(--space-3xl) 0; }
.doc h1 { font-size: var(--text-display-s); }
.doc__head { display: grid; gap: var(--space-lg); justify-items: start; }
.doc__head .lead { color: var(--color-ink-2); }
.note { margin-top: var(--space-lg); max-width: 60ch; font-size: var(--text-sm); color: var(--color-muted); }
.statement { max-width: 28ch; font: 500 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); text-transform: lowercase; }
.lost { display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--section-gap); }

@media (max-width: 60rem) {
  .nav__opt { display: none; }
  .hero { padding-block: var(--space-2xl); }
  .hero__in, .head--split, .split, .close__in, .footer__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .showcase__shot { aspect-ratio: 4 / 3; }
  .showcase figure::before { right: var(--space-lg); width: 128px; margin-bottom: -44px; }
  .split__head { gap: var(--space-lg); }
  .guru--sit { width: 150px; }
  .doc__in { grid-template-columns: minmax(0, 1fr); }
  .guru--beside { display: none; }
  .tile--7, .tile--5, .bento > :nth-child(n + 3) { grid-column: 1 / -1; min-height: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .steps > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps > li:nth-child(even) { padding-right: 0; }
  .steps > li::before { margin-bottom: var(--space-md); }
  .steps--rows { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps--rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); padding: var(--space-lg) 0; }
  .steps--rows > li > :last-child { grid-column: 2; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > div { min-height: 0; padding: var(--space-lg) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .close__text { padding-bottom: 0; }
  .footer__links { justify-content: flex-start; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tr { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
  .compare tbody tr:first-child { padding-top: 0; }
  .compare caption { padding: 0; }
  .compare th, .compare td, .compare tbody th { display: block; width: auto; padding: 0; border: 0; }
  .compare td::before { content: attr(data-label); display: block; font: 500 var(--text-sm)/1.4 var(--font-display); text-transform: lowercase; color: var(--color-muted); }
  .compare td { color: var(--color-ink-2); }
}
@media (max-width: 40rem) {
  .nav__in { gap: var(--space-sm); min-height: 64px; }
  .nav__links { gap: var(--space-md); }
  .brand img { width: 32px; height: 32px; }
  .showcase__shot { aspect-ratio: 4 / 5; }
  .showcase figure::before { width: 104px; margin-bottom: -36px; }
  .tile { padding: var(--space-lg); }
  [data-slot][data-kind="product"].tile__shot { min-height: 300px; margin: var(--space-md) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0; }
  .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .steps > li, .steps > li:nth-child(even) { padding-inline: 0; border-left: 0; }
  [data-slot][data-kind="product"].close__shot { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav__link, .link { transition: none; }
  .btn:active { transform: none; }
}