/* Hallmark · shape: Take Sheet · genre: playful · theme: custom · job: hire · idea: "The submission form is a working clapperboard: you shoot, you fill the slate, we cut." · vibe: "loud orange poster, honest edit-only studio"
 * paper: oklch(96.5% 0.013 87) · accent: oklch(66.9% 0.220 38) · display: Bricolage Grotesque · body: Bricolage Grotesque · hero: a giant "We cut." on a Clap Orange field with the tagline above it · nav: wordmark left, one quiet action right · footer: wordmark in Chalk on Ink with three links · imagery: none, type and colour carry it · signature: the form built as a clapperboard slate with the striped bar
 * axes: light/grotesk-heavy/chromatic-orange · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V, the brand has no photographs yet so the page leans on type and the striped bar; a labelled slot holds the portfolio */
/* Hallmark · dismissed 58 · the screens are the price list itself, twelve prices in three tabs with their add-ons, which the brief requires */
/* Hallmark · dismissed 25 · the footer line is one sentence of eight words, a caption rather than prose */
/* Hallmark · waive 37 · one family, Bricolage Grotesque, set at two weights in tokens.css and the font file · the brand kit names it for display and body so a second face would break the kit */


:root {
  --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.9375rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-lead: clamp(1.25rem, 0.5vw + 1.1rem, 1.625rem);
  --text-section: clamp(2.25rem, 3.6vw + 0.5rem, 4.5rem);
  --text-title: clamp(1.375rem, 0.9vw + 1.1rem, 1.875rem);
  --text-hero-a: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  --text-hero-b: clamp(5.75rem, 19vw, 15rem);
  --text-price: clamp(4.25rem, 8vw + 1rem, 8rem);
  --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;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 96px; --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;
  --radius-card: 4px; --radius-input: 4px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.035em;

  /* Daylight Slate, from the brand kit (hex in brackets). Chalk is the page, Ink the board, Clap Orange the field. */
  --color-paper: oklch(96.5% 0.013 87);              /* Chalk [#F7F3EA] */
  --color-paper-2: oklch(90.2% 0.020 88);            /* Mist [#E4DED0] */
  --color-paper-3: oklch(85% 0.024 88);
  --color-ink: oklch(17.9% 0.006 286);               /* Ink [#111114] */
  --color-ink-2: oklch(40% 0.016 295);               /* Graphite, darkened a step for body copy */
  --color-muted: oklch(46.6% 0.016 295);             /* Graphite [#5A5862] */
  --color-rule: oklch(80% 0.022 88);
  --color-accent: oklch(66.9% 0.220 38);             /* Clap Orange [#FE5000] */
  --color-accent-ink: oklch(17.9% 0.006 286);        /* text on orange is always Ink (5.7:1) */
  --color-focus: oklch(60% 0.2 38);
  --color-field: var(--color-accent);
  --color-board: oklch(17.9% 0.006 286);
  --color-slate: oklch(26% 0.015 285);               /* Slate [#23232B] */
  --color-stone: oklch(68.6% 0.020 292);             /* Stone [#9A98A6] */
  --color-chalk: oklch(96.5% 0.013 87);
  --color-rule-ink: oklch(34% 0.012 285); --color-rule-mist: oklch(76% 0.024 88); --color-rule-slate: oklch(38% 0.014 285);
  --color-error-on-ink: oklch(78% 0.14 27);
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
}

*, *::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) 22%, transparent); color: var(--color-ink); }
: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-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
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; } }

@font-face { font-family: "Bricolage Grotesque"; src: url("./fonts/bricolage-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

body { font-weight: 400; font-optical-sizing: auto; font-synthesis: none; }
h1, h2, h3, b, strong, summary, .btn, .price, label, legend { font-weight: 800; }

/* ---- grounds. A section changes paper by re-pointing the same tokens. */
.is-field { --color-paper: var(--color-field); --color-ink: var(--color-board); --color-ink-2: var(--color-board); --color-muted: var(--color-board); --color-rule: var(--color-board); --color-focus: var(--color-board); background: var(--color-paper); color: var(--color-ink); }
.is-ink { --color-paper: var(--color-board); --color-ink: var(--color-chalk); --color-ink-2: var(--color-stone); --color-muted: var(--color-stone); --color-rule: var(--color-rule-ink); --color-focus: var(--color-accent); background: var(--color-paper); color: var(--color-ink); }
.is-mist { --color-paper: var(--color-paper-2); --color-rule: var(--color-rule-mist); background: var(--color-paper); color: var(--color-ink); }

.section { padding-block: var(--section-gap-s); }
.send { padding-top: var(--section-gap); padding-bottom: var(--section-gap-l); }
.prices { padding-bottom: calc(var(--section-gap-l) + var(--space-2xl)); }
.addons-s { padding-top: var(--section-gap-l); padding-bottom: var(--section-gap-l); }
.section > .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
h2 { font-size: var(--text-section); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 14ch; }
.lead { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); max-width: 34ch; }

/* ---- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.is-field .btn:not(.btn--quiet) { color: var(--color-chalk); }
.is-field .btn:not(.btn--quiet):hover { color: var(--color-ink); }
.btn--quiet { background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-ink); color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear, color var(--dur-short) linear; } }

.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); background: var(--color-board); color: var(--color-chalk); }
.skip:focus-visible { top: var(--space-md); }

.stripe { height: 28px; background: repeating-linear-gradient(135deg, var(--color-board) 0 14px, var(--color-field) 14px 28px); }

/* ---- hero */
.hero { position: relative; display: flex; flex-direction: column; min-height: min(100svh, 48rem); }
.nav { position: relative; z-index: var(--z-sticky-nav); }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding-block: var(--space-md); gap: var(--space-md); }
.nav a.logo { display: block; color: var(--color-ink); line-height: 0; }
.nav a.logo svg { width: clamp(140px, 14vw, 190px); height: auto; }
.nav .links { display: flex; align-items: center; gap: var(--space-xl); }
.nav .links a:not(.btn) { text-decoration: none; font-size: var(--text-md); }
.nav .links a:not(.btn):hover { text-decoration: underline; }
.nav .btn { min-height: 44px; padding-inline: var(--space-md); }
@media (max-width: 60rem) { .nav .links a:not(.btn) { display: none; } }

.hero__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-xl); }
.hero h1 { max-width: none; line-height: 0.82; letter-spacing: var(--tracking-display); }
.hero h1 .a { display: block; font-size: var(--text-hero-a); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--space-sm); }
.hero h1 .b { display: block; font-size: var(--text-hero-b); margin-left: -0.04em; }
.hero .lead { color: var(--color-ink); max-width: 30ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- who it is for */
.who h2 { grid-column: 1 / span 6; max-width: 16ch; }
.who ul { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-ink); }
.who li { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.who li b { font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.02em; }
.who li span { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.4; max-width: 38ch; }

/* ---- how it works */
.how h2 { grid-column: 1 / span 7; max-width: 16ch; }
.how .only { grid-column: 1 / span 9; font-size: var(--text-title); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; max-width: 32ch; }
.how ol { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); border-top: 1px solid var(--color-rule); }
.how ol li { padding-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); max-width: 30ch; }
.how ol li b { color: var(--color-ink); }

/* ---- prices */
.prices h2 { grid-column: 1 / span 7; }
.prices .lead { grid-column: 1 / span 6; }
.group { grid-column: 1 / -1; display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.group h3 { font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.02em; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-ink); }
.tiers { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.tiers > li { list-style: none; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) var(--space-lg); border-left: 1px solid var(--color-rule); }
.tiers > li:first-child { padding-left: 0; border-left: 0; }
.tiers { margin: 0; padding: 0; }
.price { font-size: var(--text-price); line-height: 0.95; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.price small { font-size: 0.42em; line-height: 1.1; margin-top: 0.12em; margin-right: 0.04em; }
.tiers .name { font-size: var(--text-lg); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.tiers .what { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.45; max-width: 28ch; }
.switch { grid-column: 1 / -1; display: grid; gap: var(--space-lg); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg button { min-height: 48px; padding: 0 var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); font-size: var(--text-md); font-weight: 800; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:hover { background: var(--color-paper-2); }
.seg button[aria-selected="true"] { background: var(--color-paper-2); box-shadow: inset 0 -5px 0 var(--color-accent); }
.seg button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.panel { display: grid; gap: var(--space-md); }
.panel h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-ink); max-width: none; }
.note { color: var(--color-ink-2); font-size: var(--text-md); max-width: 64ch; }
.define { color: var(--color-ink-2); }
.define summary { cursor: pointer; font-weight: 800; color: var(--color-ink); min-height: 44px; display: flex; align-items: center; }
.define summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.define p { max-width: 56ch; padding-bottom: var(--space-sm); }
.addons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-sm); }
.addons h3 { grid-column: 1 / span 4; font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; }
.addons ul { grid-column: 5 / span 8; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-lg); line-height: 1.4; }
.addons p { grid-column: 5 / span 8; color: var(--color-ink-2); font-size: var(--text-md); }
.js .panel[hidden] { display: none; }
.field.checks { border: 0; padding: var(--space-sm) 0; margin: 0; min-width: 0; display: flex; align-content: start; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.field.checks legend { padding: 0; margin-bottom: var(--space-2xs); width: 100%; }
.field.checks label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-md); color: var(--color-chalk); cursor: pointer; font-weight: 400; }
.field.checks input { width: 22px; height: 22px; min-height: 0; accent-color: var(--color-accent); flex: none; padding: 0; outline-offset: 2px; }
.fill { display: inline-block; padding: max(var(--space-2xs), 0.3em) max(var(--space-xs), 0.5em); border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); font-weight: 400; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- work slot */
.work h2 { grid-column: 1 / span 6; }
.work .slot { background: var(--color-paper-2); }
.work .lead { grid-column: 1 / span 6; }
.work .slot { grid-column: 1 / -1; aspect-ratio: 16 / 5; min-height: 180px; display: grid; place-items: center; border: 2px dashed var(--color-muted); border-radius: var(--radius-card); color: var(--color-muted); font-size: var(--text-lg); text-align: center; padding: var(--space-lg); }

/* ---- the slate form */
.send h2 { grid-column: 1 / span 4; max-width: 10ch; }
.send .lead { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
.slate { grid-column: 5 / -1; grid-row: 1 / span 3; background: var(--color-slate); color: var(--color-chalk); border-radius: var(--radius-card); overflow: hidden; --color-paper: var(--color-board); --color-ink: var(--color-chalk); --color-ink-2: var(--color-stone); --color-muted: var(--color-stone); --color-rule: var(--color-rule-slate); --color-focus: var(--color-accent); }
.slate .stripe { height: 40px; background: repeating-linear-gradient(135deg, var(--color-field) 0 20px, var(--color-board) 20px 40px); }
.slate form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.field { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--text-sm); line-height: 1.2; color: var(--color-stone); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-stone); border-radius: var(--radius-input); background: var(--color-board); color: var(--color-chalk); font-size: 1rem; outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-stone); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-stone); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error-on-ink); }
.field .err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error-on-ink); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-stone) 50%), linear-gradient(135deg, var(--color-stone) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: var(--space-2xl); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slate .btn { border-color: var(--color-chalk); }
.send .actions { grid-column: 1 / -1; display: grid; gap: var(--space-sm); padding-top: var(--space-md); }
.status { min-height: 1lh; font-size: var(--text-md); color: var(--color-stone); }
.status.is-error { color: var(--color-error-on-ink); }
.thanks { padding: var(--space-xl); display: grid; gap: var(--space-md); }
.thanks h3 { font-size: var(--text-section); line-height: 1.02; letter-spacing: var(--tracking-display); }
.thanks p { color: var(--color-stone); font-size: var(--text-lead); }

/* ---- questions */
.faq h2 { grid-column: 1 / span 5; }
.faq .list { grid-column: 6 / -1; border-top: 2px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; cursor: pointer; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; background: linear-gradient(var(--color-ink), var(--color-ink)) center / 100% 3px no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) center / 3px 100% no-repeat; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.faq details > p { padding-bottom: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---- footer */
.foot { padding-block: var(--space-2xl); }
.foot .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); }
.foot svg { width: clamp(220px, 34vw, 480px); height: auto; color: var(--color-chalk); }
.foot p { color: var(--color-stone); max-width: 32ch; margin-top: var(--space-md); }
.foot nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.foot nav a { font-size: var(--text-md); }

/* ---- small screens */
@media (max-width: 60rem) {
  .who h2, .who ul, .how h2, .how .only, .prices h2, .prices .lead, .work h2, .work .lead, .faq h2, .faq .list, .send h2, .send .lead, .slate { grid-column: 1 / -1; grid-row: auto; }
  .how ol { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers > li { border-left: 0; border-top: 1px solid var(--color-rule); padding: var(--space-md) var(--space-md) var(--space-md) 0; }
  .tiers > li:nth-child(-n+2) { border-top: 0; }
  .tiers > li:nth-child(even) { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
  .addons h3, .addons ul, .addons p { grid-column: 1 / -1; }
  .seg button { flex: 1 1 auto; }
  .slate form { grid-template-columns: minmax(0, 1fr); padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .field { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .hero__actions .btn { flex: 1 1 100%; }
  .tiers[style] { --cols: 2; }
  .price { font-size: clamp(3.5rem, 17vw, 5rem); }
  .work .slot { aspect-ratio: 4 / 3; }
}