/* tryakrida.com (2026-10-31 rebuild of the 2026-10-30 neo-renaissance design).
   Type: EB Garamond for headlines, set upright (the hero's "before" is the page's only italic), Figtree for everything
   you read or click, Geist Mono for code and logs. Colour: cream paper, iron-gall ink and gold-leaf hairlines;
   vermilion only for failures, bugs, uncovered behaviour and form errors. Art: the AI-made hero painting in its gold
   arch, credited in the footer. The section files (charts.css, steps.css) style their own parts with their own
   prefixes and use the shared pieces here: .section, .wrap, .sh, .sh__sub, .eyebrow and the buttons. */
:root {
  --paper: #f7f3e8;
  --paper-2: #efe8d7;
  --paper-3: #e5dbc4;
  --card: #fbf8f0;
  --line: #d8cdb5;
  --line-strong: #c3b597;
  --field-line: #958667;   /* form field edges: 3:1 or better on white and on the card (WCAG 1.4.11) */
  --ink: #1c1a16;
  --ink-2: #4a443a;
  --ink-3: #6f6656;
  --night: #1b2615;
  --night-2: #243220;
  --on-night: #f2ecdc;
  --on-night-2: #c9c2ad;
  --sap: #3f6212;
  --lime: #a3e635;
  --gold: #a8843a;
  --gold-soft: #d9c08a;
  --vermilion: #b4321f;
  --vermilion-soft: #f3d9d2;
  --madder: #ecc6bb;
  --leadtin: #efd88e;
  --celadon: #d3e0cb;
  --lapis: #2e4a86;
  --walnut: #4b3622;

  --serif: "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(3.4rem, 1.4rem + 6vw, 7.25rem);  /* 54 to 116 */
  --fs-h2: clamp(2.5rem, 1.5rem + 3.4vw, 4.75rem);     /* 40 to 76 */
  --fs-h2-line: clamp(2rem, 1.15rem + 2.2vw, 3.25rem); /* 32 to 52: a heading that stays on one line on wide screens */
  --fs-h3: clamp(1.75rem, 1.5rem + .7vw, 2.125rem);    /* 28 to 34 */
  --fs-lead: clamp(1.125rem, 1rem + .35vw, 1.3125rem); /* 18 to 21 */
  --fs-body: 1.0625rem;                                /* 17 */
  --fs-small: .875rem;                                 /* 14 */

  --max: 1240px;
  --gutter: 24px;
  --nav-h: 72px;
  --section: clamp(88px, 10vw, 152px);
  --radius: 20px;
  --radius-lg: 36px;
  --radius-in: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-micro: 140ms;
  --dur-short: 240ms;
}
/* Tighter rhythm for the rebuilt page (the spec asks for less dead space before the product proof and the demo). */
:root {
  --section-y: clamp(64px, 7.5vw, 112px);
  --fs-hero: clamp(3.25rem, 1.1rem + 5.4vw, 6.75rem); /* 52 to 108 */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; }
p { margin: 0; }
figure { margin: 0; }
code { font: 400 .86em/1 var(--mono); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* Focus: a clear ink ring, offset from the edge, on everything you can reach with Tab. Components below keep their own
   corner radius. Fields get theirs with the form. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
summary:focus-visible { outline-offset: 2px; }

/* Section header: a small label (optional), the headline, one sentence at most under it. */
.section { padding: var(--section-y) 0 0; }
.sh { margin-bottom: clamp(32px, 4vw, 52px); }
.sh h2 { max-width: 20ch; }
.sh--center { text-align: center; }
.sh--center h2 { margin-inline: auto; }
.sh__sub, .lede { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
.sh--center .sh__sub { margin-inline: auto; }
/* A heading kept to one line on wide screens (Kavin, 2026-11-01): smaller than --fs-h2 and no measure; on phones it
   wraps, balanced. Its sentence, if any, sits right under it. */
.sh--line h2 { max-width: none; font-size: var(--fs-h2-line); line-height: 1.05; text-wrap: balance; }
.sh--line .sh__sub { margin-top: 14px; max-width: 64ch; }
.sh.sh--line { margin-bottom: clamp(28px, 3vw, 40px); }
/* The eyebrow: the label above a headline. Walnut on paper is about 10:1, so it reads at 13px. */
.eyebrow { margin: 0 0 16px; font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--walnut); }

/* Buttons: ink pills. Primary is filled ink ("Request a demo"); secondary is an ink outline ("Watch a real run"),
   with an optional play mark. Nothing moves on hover but the colour. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font: 500 16px/1 var(--sans); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.btn--lg { height: 56px; padding: 0 30px; font-size: 17px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #3a352d; }
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--paper-2); }
.btn--lg.btn--line { padding: 0 28px 0 12px; }
.btn--lg.btn--line:not(:has(.btn__icon)) { padding: 0 30px; }
.btn__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.btn__icon svg { width: 12px; height: 12px; margin-left: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.btn:disabled { cursor: progress; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color var(--dur-short), box-shadow var(--dur-short); }
.nav.is-scrolled { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.nav__inner { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; }
/* Kavin's lockup (logo kit 2026-10-31): the dotted locust and the wordmark, drawn as one. 1151 x 317 units. */
.brand__lockup { display: block; height: 32px; width: 116px; flex: none; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 15.5px; color: var(--ink-2); }
.nav__links a { padding: 8px 0; }
.nav__links a:hover { color: var(--ink); }
.nav .btn { margin-left: 4px; }

/* Hero: the sentence and both actions on the left, the painting in its arch on the right. Below 1024px the text comes
   first and the painting follows, smaller, so a phone shows the eyebrow, the headline, the sentence and both buttons
   on its first screen. */
.hero { position: relative; padding: clamp(20px, 3.2vw, 48px) 0 clamp(88px, 8vw, 112px); overflow: hidden; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* The frieze runs under the arch, so the arch stands at the foot of the row and the text keeps clear of it: where the
   text is the taller of the two (short laptop screens), the frieze still passes below the buttons. */
.hero__text { padding-bottom: 40px; }
.hero__title { font-size: var(--fs-hero); line-height: .94; letter-spacing: -0.03em; }
.hero__title em { display: block; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 36px; }
/* Short screens get a smaller painting, so the arch and the frieze under it still fit on the first screen. */
.hero__art { position: relative; align-self: end; justify-self: end; width: clamp(280px, calc((100svh - 230px) * .8), min(100%, 480px)); }

/* The arch: a painting in a round-topped window with a gold hairline around it. */
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
/* The painting sits in its own box inside the arch, clipped to the arch's shape: the intro (below) moves this box. */
.arch__pic { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--paper-2); }
.arch__shape, .arch__paint { position: absolute; inset: 0; }
.arch__pic img { width: 100%; height: 100%; object-fit: cover; }
.arch::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--gold); border-bottom: 0; border-radius: inherit; pointer-events: none; }

/* The frieze: a Greek key border in gold, one line that runs into a chip under the painting and out the other side.
   It's wider than any screen, centred on the painting and cropped by the page edges, so the pattern keeps its size.
   Its top rule meets the legs of the arch's gold line, 12px below the painting. */
.frieze { position: absolute; left: 50%; top: 100%; width: 3520px; max-width: none; height: 64px; transform: translateX(-50%); pointer-events: none; }
.frieze__rule, .frieze__ring, .frieze__line { fill: none; stroke: var(--gold); }
.frieze__rule, .frieze__ring { stroke-width: 1; }
.frieze__line { stroke-width: 1.5; stroke-linecap: square; }

/* The intro (main.js): the page opens on the hero painting, full screen, and as you scroll it shrinks back into its
   arch while the hero holds still at the top, uncovering the page around it. The hero is sticky inside .hero-run, and
   the track under it is the scroll that plays the intro. It is the painting itself that moves, not a copy: the
   painting (.arch__paint) is laid out at full-screen size and only ever scaled down (so it is never drawn bigger than
   it was painted), and it is seen through a window (.arch__pic) that runs from the whole screen in to the arch, so
   the painting is never wider than the screen. Inside the window, the arch (.arch__shape) clips the painting's sides
   and round top; its curve starts above the screen and comes down to the window's top as the zoom begins. All three
   are transforms and nothing else: a frame of the zoom only moves layers, never repaints or reshapes anything, and
   where the browser has scroll-driven animations (Safari since iOS 26.4, Chrome) main.js hands those transforms to the browser as one, which plays them in step with the scroll itself,
   off the page's main thread. (Drawn from JavaScript on each scroll, as it was, the zoom ran a beat behind the finger
   at half the screen's rate on an iPhone: Kavin, 2026-11-02, "very laggy and not smooth".) The painting moves with
   the hero wherever the hero goes.
   The screen it fills is the small viewport (100svh, the screen with the browser's toolbars showing). Safari on iOS 26
   draws nothing sticky or fixed below the top of its bottom toolbar, so a painting reaching further down was cut off
   flat there, and showed a strip of the frieze under it as the toolbar shrank (Kavin's iPhone, 2026-11-02).
   While the painting still covers the header, the header is clear and empty over it (no ground, no line, nothing to
   tap); once the painting's top edge has come down past it (html.intro-clear, main.js), its name and its button fade
   in. (It used to stay under the painting, and showed in a sliver, cut through, as the painting's edge came down.)
   The page doesn't bounce at its ends while it has the intro: a bounce at the top dragged the full-screen painting down
   and showed a band of bare page over it, and a pull there reloaded the page.
   html.intro is set in <head> unless the visitor prefers reduced motion, came in on a link to a section, or has a
   screen too short for the painting to land on it; html.intro-back holds the painting in its arch while a reload or a
   step back puts the scroll back. Until main.js has measured (html.intro-ready), the picture box covers the screen on
   its own: the first paint is the painting, and main.js takes over from exactly the same place. A thumbnail of the
   painting (32 x 40 px, inline) shows under the picture until it has loaded; if none of it was drawn yet, it fades in. */
html.intro { overscroll-behavior-y: none; }
.hero-run__track { display: none; }
html.intro .hero-run__track { display: block; height: clamp(420px, 85vh, 820px); }
html.intro .hero { position: sticky; top: var(--nav-h); overflow: visible; overflow-x: clip; } /* the painting reaches up under the header; the frieze is still cropped at the sides */
html.intro:not(.intro-clear):not(.intro-back) .nav { background: none; box-shadow: none; pointer-events: none; transition: none; } /* its ground fades back in, but goes at once */
html.intro .nav__inner { transition: opacity .3s ease-out; }
html.intro:not(.intro-clear):not(.intro-back) .nav__inner { opacity: 0; transition-duration: .12s; }
/* What is drawn round the painting stays under it while it is away from its arch (html.intro-home, main.js), and the
   frieze waits for the painting's first landing: otherwise the gold line and the frieze show over the painting, above
   all in the first paint, before motion.js has hidden them to draw them in. */
html.intro:not(.intro-home) .arch { z-index: 1; }
html.intro:not(.intro-home) .arch::after, html.intro:not(.hero-landed) .frieze { visibility: hidden; }
html.intro .arch__pic { right: auto; bottom: auto; width: 100%; height: 100%; background: none; will-change: transform; }
html.intro-ready .arch__pic { border-radius: 0; } /* the arch inside it has the round top */
html.intro .arch__shape, html.intro .arch__paint { will-change: transform; }
html.intro-ready .arch__shape { right: auto; bottom: auto; overflow: hidden; } /* main.js lays them out */
html.intro-ready .arch__paint { right: auto; bottom: auto; }
html.intro .arch__paint::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/webp;base64,UklGRkABAABXRUJQVlA4IDQBAADwBgCdASogACgAPt1qrlIopaQipWgBEBuJQBhmzZRrRTv9j7uiTTofbo/KRT7MpRQckIMat+3bCovxE3Yz9nvwAP7DMa6TwQUVUF6OEtyxU4TP5t8odiCe2UCfoQF6UH1Son1/PGPYozhQNZuBnUW3GMDSKGtlQj+tLDubQxc43Vf5RIdAHLnxLRX0xTPtOFO/NV5o/ERj10csm/xZDoYPNhQkzWCa6L07uVVHT5+bTfuxbmTurrV4/Bv6j9v5Ml5wFFhbrE/geFWYYLxXEo11+UrwrW/ABXme4DmmMViXCLRiXCqE+/AL7pbpO76pF3N52HhMNyTh9Jtbha3Kfbu8hLlnUMs5UQMV/KJEjE3GdneFZcFGqK+mHG6u5b0Vm9OpW4+TGxyk+ElBGbD0sYXNg6gAAA==") 40% 60% / cover; will-change: transform; }
html.intro .arch__pic.is-shown .arch__paint::before { display: none; }
html.intro .arch__pic img { will-change: transform; transition: opacity .45s ease-out; }
html.intro .arch__pic.is-loading img { opacity: 0; transition: none; } /* hidden at once, faded in */
html.intro:not(.intro-ready):not(.intro-back) .arch__pic { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh; border-radius: 0; }
html.intro:not(.intro-ready):not(.intro-back) .arch__pic img { object-position: 40% 60%; }
@media print {
  html.intro .hero-run__track { display: none; }
  html.intro .hero { position: relative; overflow: hidden; }
  html.intro .arch__pic, html.intro .arch__shape, html.intro .arch__paint { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; animation: none !important; border-radius: inherit !important; }
  html.intro .nav__inner { opacity: 1 !important; }
}

/* FAQ (Kavin, 2026-11-01): the heading above the questions, everything left-aligned, set smaller than the other
   sections. */
.faq-wrap .faq { max-width: 920px; }
.faq__title { font-size: var(--fs-h2-line); line-height: 1.05; margin-bottom: clamp(18px, 2.2vw, 28px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font: 400 clamp(1.1875rem, 1.05rem + .4vw, 1.4375rem)/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transition: transform var(--dur-short) var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--ink-2); }
.faq details p { padding: 0 44px 20px 0; color: var(--ink-2); max-width: 68ch; }
a.inline, .form__status a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a.inline:hover, .form__status a:hover { text-decoration-color: var(--ink); }

/* Request a demo: the final section. The heading on the left (centred against the form), the form on the right, in a
   panel with a double gold hairline; one column below 1024px, and no panel on phones. */
.demo { padding-bottom: clamp(48px, 6vw, 96px); }
.demo__panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  background: var(--paper-2); border-radius: 4px; padding: clamp(28px, 4.5vw, 64px);
  box-shadow: inset 0 0 0 1px rgb(168 132 58 / .45), inset 0 0 0 12px var(--paper-2), inset 0 0 0 13px rgb(168 132 58 / .25); }
.demo__text h2 { font-size: clamp(2.5rem, 1.5rem + 2.9vw, 4.5rem); line-height: 1; max-width: 14ch; }
.form-card { background: var(--card); border-radius: 4px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgb(60 40 20 / .4); }

/* The form. Hooks are in main.js. Optional fields say so; the two required ones don't need a mark. */
.form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.form > * { grid-column: 1 / -1; }
.form > .field--half { grid-column: auto; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font: 500 14.5px/1.35 var(--sans); color: var(--ink); }
.opt { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-width: 0; height: 48px; padding: 0 14px;
  background: #fff; border: 1px solid var(--field-line); border-radius: var(--radius-in);
  color: var(--ink); font: 400 16px/1.4 var(--sans);
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.field textarea { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; border-radius: var(--radius-in); }
.field [aria-invalid="true"] { border-color: var(--vermilion); box-shadow: inset 0 0 0 1px var(--vermilion); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn--block { margin-top: 4px; }
/* The live region stays rendered (an empty paragraph has no height) so screen readers hear the first error too. */
.form__foot { display: block; }
.form__status:not(:empty) { margin-bottom: 10px; }
.form__status { font-size: var(--fs-small); line-height: 1.5; color: var(--vermilion); }
.form__fine { font-size: 13px; color: var(--ink-3); }
.form__done { padding: clamp(24px, 4vw, 48px) 8px; text-align: center; outline: none; }
.form__done h3 { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); }
.form__done p { margin: 12px auto 0; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.is-sending .spinner { display: inline-block; }
.is-sending .btn__label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer: the descriptor, the links and a quiet credits line. */
.footer { padding: 36px 0 40px; font-size: 14.5px; }
.footer__brand b { font: 500 1.3em/1 var(--serif); letter-spacing: -0.005em; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; color: var(--ink-2); }
.footer__links a { padding: 4px 0; }
.footer__links a:hover { color: var(--ink); }
.credits { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.credits a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.credits cite { font-style: normal; } /* only "before" is italic on this page */

/* Tablet */
@media (max-width: 1023px) {
  .hero { padding-top: clamp(16px, 3vw, 32px); }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero__text { padding-bottom: 0; }
  .hero__art { justify-self: center; width: min(60%, 340px); }
  .demo__panel { grid-template-columns: 1fr; }
  .demo__text h2 { max-width: 18ch; }
}

/* Phone */
@media (max-width: 720px) {
  :root { --gutter: 16px; --nav-h: 64px; }
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero__ctas { margin-top: 28px; }
  .faq summary { padding: 16px 40px 16px 0; }
  .faq details p { padding-right: 0; }
  .demo__panel { background: none; box-shadow: none; padding: 0; gap: 28px; }
  .form-card { padding: 20px 18px; }
  .footer__links { margin-left: 0; }
}
/* Phones and small tablets, one column with the steps stacked (Kavin, 2026-11-02: "an audit of the space on the mobile
   app, namely the spacing between the sections"). The breaks between sections were 64px, the same as the gap between
   the steps inside How it works (steps.css), so How it works ran on into Questions and the sections didn't read as
   sections; they also ranged from 70 to 93px of bare paper. Every break now shows about 96px: the hero's frieze already
   leaves 24px under it, the demo's form card is followed by the footer, and the steps stay 64px apart. Headings sit
   28px above what they head, as How it works and the demo already did. */
@media (max-width: 899.98px) {
  :root { --section-y: 88px; }
  .hero-run + .problem { padding-top: 70px; }
  .demo { padding-bottom: 60px; }
  .faq__title { margin-bottom: 28px; }
}
@media (max-width: 560px) {
  /* Both hero actions full width, one under the other. */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}