/* Sable Glassworks concept (JayLM Studio). Fictional company; demo only. Near-white, graphite, one verdigris accent. */

@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 300 900; font-stretch: 75% 125%; font-display: swap; src: url(../../../assets/fonts/font-5ea3740633e5ac7af56c.woff2) format('woff2'); }

:root {
  --bg: #f6f6f3; --surface: #fff; --surface-2: #eeeeea; --surface-3: #e4e5e0;
  --ink: #1d2024; --ink-2: #3f444b; --muted: #5b6069;
  --line: #d9dad5; --line-strong: #aeb0ab;
  --accent: #0f6b63; --accent-deep: #0a524b; --accent-soft: #e2efec; --error: #b42318; --ok: #1f7a4d;
  --r-s: 8px; --r-m: 14px; --r-l: 20px;
  --sans: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px); --max: 1280px;
  --shadow: 0 1px 2px rgba(29, 32, 36, .06), 0 18px 48px rgba(29, 32, 36, .08);
  --ease: cubic-bezier(.3, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 550; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.no-js .needs-js { display: none !important; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 8px; }
.eyebrow { font-size: .75rem; font-weight: 650; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.note { font-size: .875rem; color: var(--muted); }
main { flex: 1; }

/* Concept bar, header, footer */
.concept-bar { background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.4; text-align: center; padding: 8px var(--gutter); }
.concept-bar a { color: inherit; }
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 60px; padding: 4px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav .nav-cta { border: 1.5px solid var(--ink); color: var(--ink); margin-left: 6px; }
.nav .nav-cta:hover { background: var(--ink); color: #fff; }
@media (max-width: 599px) { .nav a { padding: 0 9px; } .nav .nav-more, .nav .nav-home { display: none; } .brand { font-size: 1rem; gap: 8px; } }
@media (max-width: 359px) { .nav a { padding: 0 6px; font-size: .875rem; } .nav .nav-cta { margin-left: 2px; } .brand { font-size: .9375rem; gap: 6px; } .brand svg { width: 22px; height: 22px; } }
.site-foot { background: var(--ink); color: #d9dbd6; padding: 44px 0 40px; margin-top: 72px; }
.site-foot a { color: #fff; }
.site-foot .brand { color: #fff; }
.foot-row { display: grid; gap: 18px; }
@media (min-width: 720px) { .foot-row { grid-template-columns: 1fr auto; align-items: start; } }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.site-foot :focus-visible { outline-color: #fff; }
.disclaimer { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; max-width: 72ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: #000; border-color: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
.link-btn:hover { color: var(--accent-deep); }

/* The drawn panel: the stage box keeps the SVG's aspect so the HTML labels can sit on SVG coordinates */
.sg-stage { position: relative; aspect-ratio: 560 / 612; width: 100%; }
.sg-stage svg { width: 100%; height: 100%; border-radius: var(--r-l); overflow: hidden; }
.sg-wall { fill: #ebebe7; }
.sg-open { fill: #e2e3de; }
.sg-tile-line { fill: none; stroke: #1d2024; stroke-opacity: .07; stroke-width: 1; }
.sg-jamb { fill: #1d2024; fill-opacity: .16; }
.sg-floor { fill: #d8d9d3; }
.sg-fix-fill { fill: #8d9298; }
.sg-fix-ring { fill: none; stroke: #8d9298; stroke-width: 2; }
.sg-fix-line { fill: none; stroke: #a7acb2; stroke-width: 1.4; stroke-linecap: round; }
.sg-pane { fill-opacity: var(--ga); }
.sg-sheen { opacity: var(--hi); }
.sg-sheen-2 { opacity: calc(var(--hi) * .5); }
.sg-inner { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.2px; }
.sg-edge { fill: none; stroke: var(--edge); stroke-width: 2px; }
.sg-seam { fill: #fff; fill-opacity: .7; }
.sg-sweep { fill: #fff; fill-opacity: .55; }
.sg-hw-fill { fill: var(--hw); }
.sg-hw-hi { fill: var(--hw-hi); fill-opacity: .55; }
.sg-hw-dark { fill: #000; fill-opacity: .28; }
.sg-glass, .sg-hw, .sg-fix { transform-box: view-box; transform-origin: 0 0; }
.sg-label { position: absolute; font-size: .8125rem; font-weight: 600; color: var(--ink-2); background: rgba(246, 246, 243, .85); padding: 1px 5px; border-radius: 4px; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.sg-label-w { left: var(--lwx); top: var(--lwy); transform: translate(-50%, -100%); }
.sg-label-h { left: var(--lhx); top: var(--lhy); writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); }
.sg-stage rect, .sg-stage g, .sg-stage stop, .sg-stage polygon, .sg-stage path { transition: x .5s var(--ease), y .5s var(--ease), width .5s var(--ease), height .5s var(--ease), transform .5s var(--ease), opacity .35s, stop-color .35s, fill .35s, stroke .35s, fill-opacity .35s; }
.sg-label { transition: left .5s var(--ease), top .5s var(--ease); }

/* Opening: the configurator */
.hero { padding: 20px 0 0; scroll-margin-top: 8px; }
.hero-grid { display: grid; gap: 18px; }
.hero-text h1 { font-size: min(clamp(1.9rem, 3.4vw, 2.75rem), 10.5vw); font-weight: 550; letter-spacing: -.03em; line-height: 1.04; margin-top: 10px; max-width: 22ch; overflow-wrap: anywhere; }
.lede { color: var(--ink-2); max-width: 48ch; margin-top: 12px; font-size: 1rem; }
.hero-stage { display: grid; gap: 10px; align-content: start; }
.readout { font-size: .875rem; color: var(--muted); text-align: center; padding: 0 8px; }
.controls { display: grid; gap: 14px; }
.dim { display: grid; gap: 2px; }
.dim-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dim-head label { font-weight: 650; font-size: .9375rem; }
.dim-head .lim { font-size: .8125rem; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 999px; font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.stepper button:hover { background: var(--surface-2); }
.stepper button:focus-visible, .stepper input:focus-visible { outline-offset: -3px; }
.stepper input { width: 4.4em; height: 44px; border: 0; background: transparent; text-align: right; font-weight: 650; font-size: 1.0625rem; padding: 0 2px 0 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { font-size: .875rem; color: var(--muted); padding-right: 6px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.slider:focus-visible { outline-offset: 0; }
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) 0 var(--fill, 40%), var(--line-strong) var(--fill, 40%) 100%); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.choice legend { font-weight: 650; font-size: .9375rem; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.choice legend span { font-weight: 400; font-size: .8125rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 500; }
.chip label:hover { border-color: var(--ink); color: var(--ink); }
.chip input:checked + label { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 3px; }
.sw { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 1px solid rgba(29, 32, 36, .2); background: var(--sw); }
.sw-glass { background: linear-gradient(135deg, var(--sw-1), var(--sw-2) 55%, var(--sw-3)); box-shadow: inset 0 0 0 2px var(--sw-edge); }
.sw-brushed { background: linear-gradient(90deg, #e6e8ea, #aeb3b8 30%, #dcdfe2 55%, #a3a8ad 80%, #e2e4e6); }
.dock { display: grid; gap: 12px; align-items: center; padding: 16px 0 14px; border-top: 1px solid var(--line); }
.from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.from strong { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 650; letter-spacing: -.02em; }
.from span { font-size: .875rem; color: var(--muted); }
.dock-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dock .btn { flex: 1 1 auto; }
.tools { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-size: .875rem; }
.tools a, .tools button { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .hero { padding-top: 24px; }
  .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: 'stage text' 'stage panel' 'stage dock'; grid-template-rows: auto auto 1fr; gap: 14px 48px; align-items: start; }
  .hero-text { grid-area: text; }
  .hero-stage { grid-area: stage; position: sticky; top: 16px; }
  .hero-panel { grid-area: panel; display: grid; gap: 14px; }
  .dock { grid-area: dock; grid-template-columns: 1fr auto; padding: 14px 0 0; align-self: start; }
}
@media (min-width: 1200px) { .hero-grid { gap: 14px 72px; } }
@media (min-width: 900px) and (max-height: 820px) {
  /* Short laptops: the range and the action still land inside the first screen */
  .hero { padding-top: 12px; }
  .hero-grid { row-gap: 10px; }
  .hero-text h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-top: 6px; }
  .lede { margin-top: 8px; font-size: .9375rem; }
  .lede-more { display: none; }
  .hero-panel, .controls { gap: 6px; }
  .dock { padding-top: 10px; }
  .from strong { font-size: 1.5rem; }
}
@media (max-width: 899px) {
  /* Phones: words, then the panel, then the controls, in plain block flow so the dock (range and action) can stick
     to the bottom of the screen from the first scroll position until the opening ends. Stage capped at 34 svh. */
  .hero-grid { display: block; }
  .hero-text { margin-bottom: 14px; }
  .hero-stage { margin-bottom: 18px; }
  .hero-panel { display: grid; gap: 16px; }
  .sg-stage { width: min(100%, calc(34svh * 560 / 612)); margin-inline: auto; }
  .hero-text h1 { margin-top: 6px; max-width: none; font-size: min(1.9rem, 9.4vw); }
  .lede { margin-top: 8px; font-size: .9375rem; }
  .lede-more { display: none; }
  .readout { font-size: .8125rem; }
  .dock { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px var(--gutter); background: rgba(246, 246, 243, .95); backdrop-filter: blur(10px); margin-inline: calc(-1 * var(--gutter)); box-shadow: 0 -8px 24px rgba(29, 32, 36, .07); }
  .from { display: grid; gap: 2px; }
  .from strong { font-size: 1.25rem; white-space: nowrap; }
  .from span { font-size: .75rem; line-height: 1.3; }
  .dock .btn { min-height: 46px; padding: 0 16px; font-size: .9375rem; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .sg-stage { width: min(100%, calc(30svh * 560 / 612)); }
  .hero-text h1 { font-size: min(1.6rem, 8.2vw); }
  .hero-text { margin-bottom: 10px; }
  .hero-stage { margin-bottom: 12px; }
}
@media (max-width: 359px) {
  /* Narrowest phones: the low end and the action share the first row of the dock, the range sentence takes the second */
  .dock { gap: 4px 8px; padding-inline: 12px; grid-template-columns: minmax(0, 1fr) auto; }
  .from { display: contents; }
  .from strong { grid-area: 1 / 1; font-size: 1.0625rem; }
  .from span { grid-area: 2 / 1 / 3 / 3; }
  .dock-actions { grid-area: 1 / 2; }
  .dock .btn { padding: 0 12px; font-size: .875rem; }
}
.no-js .readout, .no-js .tools { display: none; }
.no-js-note { margin-top: 0; font-size: .8125rem; line-height: 1.45; }

/* Sections below the opening */
.section { padding: 72px 0 0; }
.section-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 60ch; }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.025em; }
.section-head p { color: var(--ink-2); }
.steps { display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; }
.step h3 { font-size: 1.2rem; display: flex; gap: 12px; align-items: baseline; }
.step h3::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: .8125rem; font-weight: 650; color: var(--accent); letter-spacing: .08em; }
.step p { color: var(--ink-2); font-size: .9375rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; font-size: .9375rem; }
.pricing caption { text-align: left; caption-side: bottom; padding: 12px 2px 0; font-size: .875rem; color: var(--muted); }
.pricing th, .pricing td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pricing thead th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface-2); }
.pricing th[scope="row"] { font-weight: 500; }
.pricing th[scope="row"] small { display: block; font-weight: 400; color: var(--muted); font-size: .8125rem; }
.pricing td.n, .pricing th.n { text-align: right; white-space: nowrap; }
.pricing tbody tr:last-child th, .pricing tbody tr:last-child td { border-bottom: 0; }
.pricing .group th { background: var(--bg); font-size: .8125rem; font-weight: 650; color: var(--ink-2); padding-top: 10px; padding-bottom: 8px; }
@media (max-width: 459px) { .pricing th, .pricing td { padding: 10px 10px; } .pricing { font-size: .875rem; } }
.lines { display: grid; gap: 6px; margin-top: 10px; }
.lines li { display: flex; justify-content: space-between; gap: 14px; font-size: .9375rem; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.lines li span:last-child { white-space: nowrap; font-weight: 600; }
.worked { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; margin-top: 16px; }
.worked h3 { font-size: 1.1rem; }
.worked .total { display: flex; justify-content: space-between; gap: 14px; padding-top: 10px; font-weight: 650; }
.gets { display: grid; gap: 12px; }
@media (min-width: 720px) { .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.gets li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.gets svg { width: 28px; height: 28px; color: var(--accent); }
.gets strong { display: block; font-weight: 650; margin-bottom: 2px; }
.gets p { color: var(--ink-2); font-size: .9375rem; }

/* Gallery */
.page-head { padding: 32px 0 20px; display: grid; gap: 10px; max-width: 64ch; }
.page-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); letter-spacing: -.03em; }
.page-head p { color: var(--ink-2); }
.gallery-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.scene { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; display: grid; }
.scene svg { width: 100%; height: auto; aspect-ratio: 600 / 440; background: #ebebe7; }
.scene figcaption { padding: 16px 18px 18px; display: grid; gap: 6px; }
.scene h2 { font-size: 1.2rem; }
.scene p { color: var(--ink-2); font-size: .9375rem; }
.scene .spec { font-size: .8125rem; color: var(--muted); }
.scene .more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; gap: 6px; }
.scene .more:hover { text-decoration: underline; }

/* Quote */
.quote-grid { display: grid; gap: 28px; padding-bottom: 24px; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } .summary { position: sticky; top: 16px; } .quote-grid .summary { order: 2; } }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 20px 20px; display: grid; gap: 14px; }
.summary h2 { font-size: 1.25rem; }
.summary .sg-stage { width: min(100%, 240px); margin-inline: auto; }
.summary dl > div { display: contents; }
.summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: .9375rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 550; }
.summary .range-row dd { color: var(--accent-deep); font-weight: 650; }
.summary .note { padding-top: 10px; border-top: 1px solid var(--line); }
.summary > a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
@media (max-width: 899px) { .summary .sg-stage { width: min(100%, 200px); } }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 650; font-size: .9375rem; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field textarea { min-height: 48px; width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--r-s); padding: 10px 14px; background: var(--surface); color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.err { font-size: .875rem; color: var(--error); font-weight: 550; }
.err-summary { border: 1.5px solid var(--error); border-radius: var(--r-m); padding: 14px 18px; margin-bottom: 20px; background: #fff; }
.err-summary h2 { font-size: 1.05rem; color: var(--error); margin-bottom: 6px; }
.err-summary li a { color: var(--error); display: inline-flex; align-items: center; min-height: 44px; }
.form-nav { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.done { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px 24px; display: grid; gap: 12px; }
.done h2 { font-size: clamp(1.5rem, 3vw, 2rem); display: flex; gap: 12px; align-items: center; }
.done h2 svg { width: 32px; height: 32px; flex: none; }
.done p { color: var(--ink-2); max-width: 56ch; }
.no-js .needs-js { display: none !important; }

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