/* Layout: pale gallery canvas, dark rounded "instrument" frame for the setup console, white 30px cards without shadow, aqua used only on the configurator card. */
:root {
  --canvas: #eef0f2;
  --card: #ffffff;
  --ink: #04080d;
  --charcoal: #121317;
  --slate: #6a6b6f;
  --graphite: #4a4e52;
  --line: rgba(4, 8, 13, 0.1);
  --dial: #a1e5e4;
  --mint: #d5efef;
  --evergreen: #00753e;
  --pill-bg: #04080d;
  --pill-fg: #ffffff;
  --bar: rgba(255, 255, 255, 0.82);
  --night: radial-gradient(53% 128% at 36.4% -18.1%, #6d6f73 0%, #04080d 95.85%);
  --icy: linear-gradient(#d6f6ff 0%, #f2ffff 100%);
  --glow: radial-gradient(50% 50% at 50% 24.1%, #bfffff 0%, #29cfcf 100%);
  --sans: ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b0e12; --card: #15191e; --ink: #eef0f2; --charcoal: #e2e5e8; --slate: #9a9ca1; --graphite: #a9adb2;
    --line: rgba(238, 240, 242, 0.12); --mint: #1d3b3b; --pill-bg: #eef0f2; --pill-fg: #04080d; --bar: rgba(21, 25, 30, 0.82);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0b0e12; --card: #15191e; --ink: #eef0f2; --charcoal: #e2e5e8; --slate: #9a9ca1; --graphite: #a9adb2;
  --line: rgba(238, 240, 242, 0.12); --mint: #1d3b3b; --pill-bg: #eef0f2; --pill-fg: #04080d; --bar: rgba(21, 25, 30, 0.82);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 18px/1.45 var(--sans); font-feature-settings: "cv03", "cv04", "cv09", "cv11"; letter-spacing: -0.01em; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--canvas); }
a { color: inherit; }
:focus-visible { outline: 2px solid #29cfcf; outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
mark { background: var(--mint); color: inherit; padding: 0 .12em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.label { font-size: 13px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: var(--slate); font-weight: 500; }
.h2 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.07; letter-spacing: -0.017em; }
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.4; color: var(--slate); max-width: 58ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 500 17px/1.2 var(--sans); letter-spacing: -0.01em; text-decoration: none; border-radius: 100px; padding: 13px 22px; border: 0; cursor: pointer; color: inherit; background: none; }
.btn-pill { background: var(--pill-bg); color: var(--pill-fg); box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.35), 0 0 1px 0 rgba(0,0,0,.1), 0 2px 4px 0 rgba(0,0,0,.1), 0 12px 30px 0 rgba(0,0,0,.1); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: 0 0 0 0.5px var(--line); }
.btn:hover { filter: brightness(1.1); }

/* Floating bar */
.top { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 20; padding-top: 12px; }
.bar { display: flex; align-items: center; gap: 24px; background: var(--bar); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border-radius: 9999px; padding: 8px 8px 8px 20px; box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.1); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.mark { width: 28px; height: 28px; flex: none; display: block; }
.bar nav { display: flex; gap: 22px; font-size: 16px; color: var(--graphite); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
.bar .spacer { flex: 1; }
.bar .btn { padding: 10px 18px; font-size: 16px; }
@media (max-width: 860px) { .bar nav { display: none; } }

/* Hero */
.hero { text-align: center; padding-block: clamp(48px, 8vw, 96px) 0; display: grid; justify-items: center; gap: 24px; }
.announce { display: inline-flex; align-items: center; gap: 10px; background: var(--icy); color: #04080d; border-radius: 9999px; padding: 8px 16px 8px 12px; font-size: 16px; font-weight: 500; text-decoration: none; box-shadow: 0 0 0 0.5px rgba(4,8,13,.08); }
.announce .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glow); }
.announce .chev { opacity: .55; }
.hero h1 { max-width: 13ch; font-size: clamp(46px, 9vw, 96px); line-height: 1; letter-spacing: -0.0125em; }
.hero .lead { margin-inline: auto; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Instrument frame (setup console) */
.frame { margin-top: clamp(40px, 6vw, 64px); background: var(--night); color: #fff; border-radius: 30px; padding: clamp(20px, 4vw, 48px); position: relative; overflow: hidden; text-align: start; }
.frame::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(41,207,207,.45) 0%, rgba(41,207,207,0) 65%); filter: blur(20px); pointer-events: none; }
.frame-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dial { aspect-ratio: 1; max-width: 340px; width: 100%; margin-inline: auto; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 40%, #1a2027 0%, #04080d 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 80px rgba(41,207,207,.18); display: grid; place-items: center; }
.dial::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: repeating-conic-gradient(from -1deg, rgba(255,255,255,.55) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); }
.dial-face { width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--glow); display: grid; place-items: center; text-align: center; color: #04080d; box-shadow: 0 0 60px rgba(41,207,207,.55); }
.dial-face b { display: block; font-size: clamp(40px, 6vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dial-face span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.console-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: rgba(255,255,255,.62); padding-bottom: 14px; }
.console-head b { color: #fff; font-weight: 500; }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; }
.row .n { font-size: 13px; color: #a1e5e4; font-variant-numeric: tabular-nums; }
.row .what { min-width: 0; }
.row strong { display: block; font-weight: 500; font-size: 16px; }
.row .what span { display: block; font-size: 13px; color: rgba(255,255,255,.6); overflow-wrap: anywhere; }
.status { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 9999px; background: rgba(161,229,228,.14); color: #a1e5e4; white-space: nowrap; }
.status.live { background: var(--glow); color: #04080d; }
@media (max-width: 860px) { .frame-in { grid-template-columns: minmax(0,1fr); } .dial { max-width: 240px; } }
@media (max-width: 520px) { .row { grid-template-columns: minmax(0,1fr) auto; } .row .n { display: none; } }

/* Benefit checklist (facts) */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 32px; }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pill-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23a1e5e4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.checks li span { color: var(--slate); }

section { padding-block: clamp(56px, 8vw, 96px); }
.intro { display: grid; gap: 16px; max-width: 820px; margin: 0 auto 40px; text-align: center; justify-items: center; }

/* Cards */
.card { background: var(--card); border-radius: 30px; padding: 30px; min-width: 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.trio .card { display: grid; gap: 14px; align-content: start; }
.trio .card.dark { background: var(--night); color: #fff; }
.trio .card.dark .label { color: rgba(255,255,255,.6); }
.trio h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; }
.trio ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.trio li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.trio li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--ink); opacity: .55; }
.trio .card.dark li::before { background: #a1e5e4; opacity: 1; }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0,1fr); } }

/* Themes */
.themes { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 15px; }

/* Theme cards: each one is a small sample of the theme, in the theme's own colors and type */
.theme { --shead: "Geist", ui-sans-serif, system-ui, sans-serif; --sbody: "Geist", ui-sans-serif, system-ui, sans-serif;
  border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; cursor: zoom-in;
  background: var(--sbg); color: var(--sfg); font-family: var(--sbody); letter-spacing: 0; box-shadow: 0 0 0 1px rgba(127,127,127,.18); transition: transform .25s ease, box-shadow .25s ease; }
.theme:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(127,127,127,.3), 0 18px 40px -18px rgba(4,8,13,.35); }
.t1, .t2 { grid-column: span 3; }
.t3, .t4, .t5 { grid-column: span 2; }
.mini { padding: 14px 14px 0; display: grid; gap: 10px; font-size: 11px; line-height: 1.2; }
.m-strip { background: var(--sdeep); color: var(--son); text-align: center; font-size: 10px; padding: 5px 8px; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 9px; border-bottom: 1px solid var(--sborder); min-width: 0; }
.m-nav { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-logo { font: 500 16px/1 var(--shead); white-space: nowrap; }
.m-icons { display: flex; gap: 6px; }
.m-icons i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; }
.m-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: center; background: var(--ssurface); border-radius: var(--sr); padding: 16px; min-height: 140px; }
.m-title { display: block; font: 500 clamp(19px, 2.3vw, 28px)/1.05 var(--shead); margin-bottom: 12px; letter-spacing: -0.01em; }
.m-btn { display: inline-block; justify-self: start; background: var(--sbtn); color: var(--sbtnfg); padding: 8px 13px; border-radius: var(--sr-btn); font-size: 11px; font-weight: 500; }
.m-art { aspect-ratio: 4 / 5; max-height: 150px; justify-self: center; width: 100%; background: var(--sart); border-radius: var(--sart-r, var(--sr)); }
.m-row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; }
.t3 .m-row, .t4 .m-row, .t5 .m-row { --cols: 3; }
.m-row span { position: relative; aspect-ratio: 1; background: var(--scard); border: 1px solid var(--sborder); border-radius: var(--sr); }
.m-row span::after { content: ""; position: absolute; inset: 26% 30%; border-radius: 6px; background: var(--sobj); opacity: .8; }
.m-row span:nth-child(2)::after { border-radius: 50%; inset: 28%; }
.m-row span:nth-child(3)::after { inset: 20% 34%; border-radius: 30px 30px 6px 6px; }
.cap { margin-top: auto; padding: 18px 20px 22px; display: grid; gap: 6px; justify-items: start; }
.cap .tag { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 9999px; background: color-mix(in srgb, currentColor 9%, transparent); }
.cap h3 { font: 500 clamp(34px, 4.4vw, 52px)/1 var(--shead); letter-spacing: -0.02em; margin-top: 6px; }
.cap p { font-size: 15px; line-height: 1.45; max-width: 46ch; opacity: .78; }
.cap .hint { font-size: 12px; font-weight: 500; opacity: .55; margin-top: 4px; }

.s-atelier { --sbg: #faf6f0; --sfg: #221c18; --sdeep: #221c18; --son: #faf6f0; --sborder: #e9e1d6; --ssurface: #f2ebe1; --scard: #fffdf9; --sbtn: #b5502d; --sbtnfg: #fff; --sobj: #b5502d;
  --sr: 14px; --sr-btn: 999px; --shead: "Fraunces", Georgia, serif; --sart: radial-gradient(circle at 50% 58%, #b5502d 0 30%, transparent 31%), #e9e1d6; --sart-r: 999px 999px 12px 12px; }
.s-atelier .m-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.s-atelier .m-icons { justify-self: end; }
.s-atelier .m-art { max-width: 120px; }
.s-atelier .m-logo { font-size: 18px; }
.s-studio { --sbg: #fafafa; --sfg: #18181b; --sborder: #e4e4e7; --ssurface: #f4f4f5; --scard: #fff; --sbtn: #2f5d50; --sbtnfg: #fff; --sobj: #2f5d50;
  --sr: 0; --sr-btn: 0; --sart: linear-gradient(160deg, #2f5d50, #4d7c6e); }
.s-studio .m-nav { text-transform: uppercase; letter-spacing: .14em; font-size: 9px; flex: 1; }
.s-market { --sbg: #f8fafc; --sfg: #0f172a; --sborder: #e2e8f0; --scard: #fff; --sbtn: #d9480f; --sbtnfg: #fff; --sobj: #d9480f; --sr: 10px; --sr-btn: 8px; }
.s-market .mini { padding: 0; gap: 12px; }
.s-market .m-head { background: #d9480f; color: #fff; padding: 12px 14px; border: 0; }
.s-market .m-search { flex: 1; min-width: 0; background: #fff; color: #64748b; border-radius: 8px; padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-market .m-cats, .s-market .m-row { margin-inline: 14px; }
.m-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.m-cats span { padding: 5px 9px; border-radius: 999px; background: #eef2f7; font-weight: 500; }
.m-row em { position: absolute; right: 6px; bottom: 6px; z-index: 1; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: #d9480f; color: #fff; font-style: normal; font-weight: 600; }
.s-nordic { --sbg: #fff; --sfg: #231f20; --sborder: #d5e0ea; --ssurface: #eef3f8; --scard: #fff; --sbtn: #a3bfdb; --sbtnfg: #231f20; --sobj: #a3bfdb; --sr: 0; --sr-btn: 0; }
.s-nordic .m-logo, .s-nordic h3 { font-weight: 300; }
.s-nordic .m-hero { grid-template-columns: minmax(0, 1fr); min-height: 120px; place-items: center; }
.s-nordic .m-title { font-weight: 300; font-size: clamp(26px, 3.4vw, 40px); margin: 0; letter-spacing: -0.03em; }
.s-gallery { --sbg: #ebebeb; --sfg: #000; --sborder: transparent; --scard: #fff; --sbtn: #000; --sbtnfg: #fff; --sobj: #000; --sr: 2px; --sr-btn: 999px; }
.s-gallery .mini { padding-top: 0; }
.s-gallery .m-strip { background: #1f3fd6; height: 5px; padding: 0; margin-inline: -14px; }
.s-gallery .m-head { border-color: #cecccc; }
.m-rowhead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.m-rowhead span { display: flex; gap: 5px; }
.m-rowhead i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-style: normal; }
@media (max-width: 900px) { .t1, .t2, .t3, .t4, .t5 { grid-column: auto; } }

/* Theme stage: a card grows into a large preview with the recorded demo */
.stage { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(4, 8, 13, 0); backdrop-filter: blur(0); transition: background .35s ease, backdrop-filter .35s ease; }
.stage[hidden] { display: none; }
.stage.on { background: rgba(4, 8, 13, .55); backdrop-filter: blur(6px); }
.panel { width: min(1240px, 100%); max-height: 100%; overflow: hidden; border-radius: 30px; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--card); color: var(--ink); transform-origin: top left; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.panel-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding: 6px 10px 0; }
.panel-head { flex-wrap: nowrap; align-items: center; }
.panel-head > div:first-child { min-width: 0; }
.panel-head h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.panel-head p { color: var(--slate); font-size: 15px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head .tag { display: none; }
.panel-head .ctas { flex: none; flex-wrap: nowrap; }
.panel-head .btn { padding: 10px 18px; font-size: 15px; }
@media (max-width: 600px) { .panel-head { flex-wrap: wrap; } .panel-head p { white-space: normal; } }
@media (max-height: 560px) { .panel-head p { display: none; } }
.screen { position: relative; flex: none; border-radius: 20px; overflow: hidden; background: #04080d; padding: 28px 10px 10px; }
.screen::before { content: ""; position: absolute; top: 10px; left: 14px; width: 42px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, #6a6b6f 98%, transparent) 0 0 / 17px 8px repeat-x; }
.screen img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; }
.screen .scr-cap { position: absolute; top: 6px; right: 14px; font-size: 12px; color: rgba(255,255,255,.6); }
@media (max-width: 600px) { .panel { padding: 12px; border-radius: 22px; } .panel-head { padding: 4px 4px 0; } .panel-head .btn { padding: 9px 14px; font-size: 15px; } }
html.locked { overflow: hidden; }
@media (max-width: 900px) { .themes { grid-template-columns: minmax(0,1fr); } .t1, .t2, .t3, .t4, .t5 { grid-column: auto; min-height: 0; } }

/* Simple cards: before hover each card shows only the theme's header, one block and its name; the stage shows the rest */
.themes { grid-template-columns: repeat(5, minmax(0,1fr)); }
.t1, .t2, .t3, .t4, .t5 { grid-column: auto; }
.theme { border-radius: 24px; }
.mini { padding: 12px 12px 0; gap: 8px; }
.theme .m-strip, .theme .m-nav, .theme .m-icons, .theme .m-cats, .theme .m-rowhead, .theme .m-btn, .theme .m-search { display: none; }
.s-gallery .m-strip { display: block; margin-inline: -12px; }
.s-atelier .m-head { display: flex; justify-content: center; }
.m-head { justify-content: flex-start; padding: 2px 2px 8px; }
.s-market .m-head { padding: 10px 12px; }
.s-market .m-row, .s-gallery .m-row { --cols: 2; }
.theme .m-hero ~ .m-row { display: none; }
.m-hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding: 14px; }
.m-hero .m-art { display: none; }
.m-title { font-size: clamp(16px, 1.6vw, 21px); margin: 0; }
.s-nordic .m-hero { min-height: 92px; }
.s-nordic .m-title { font-size: clamp(20px, 2vw, 28px); }
.mini { height: 150px; overflow: hidden; grid-template-rows: auto 1fr; align-content: start; }
.s-gallery .mini { grid-template-rows: 5px auto 1fr; }
.m-hero { align-content: center; }
.theme .m-row { align-self: start; }
.theme .m-row span:nth-child(n+3) { display: none; }
.cap { padding: 14px 16px 18px; gap: 4px; }
.cap .tag { order: 2; padding: 0; background: none; opacity: .65; font-size: 13px; }
.cap h3 { order: 1; font-size: clamp(24px, 2.2vw, 32px); margin: 0; }
.cap p, .cap .hint { display: none; }
@media (max-width: 1100px) { .themes { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .themes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .themes { grid-template-columns: minmax(0,1fr); } }

/* Shop types */
.types { display: grid; gap: 0; padding-block: 8px; }
.type { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 12px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.type:last-child { border-bottom: 0; }
.type h3 { font-size: 24px; letter-spacing: -0.015em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 9999px; background: var(--canvas); color: var(--charcoal); font-variant-numeric: tabular-nums; }
.type p { color: var(--slate); font-size: 16px; margin-top: 10px; }
@media (max-width: 700px) { .type { grid-template-columns: minmax(0,1fr); } }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.metric { display: grid; gap: 20px; align-content: space-between; }
.metric .v { font-size: clamp(64px, 8vw, 96px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metric p { font-size: 16px; color: var(--slate); }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.step { display: grid; gap: 12px; align-content: start; }
.step .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step h3 { font-size: 22px; letter-spacing: -0.015em; }
.step p { font-size: 16px; color: var(--slate); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0,1fr); } }

/* Configurator */
.config { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 15px; }
.picks { display: grid; gap: 28px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
legend { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--slate); margin-bottom: 12px; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: block; padding: 10px 16px; border-radius: 100px; background: var(--canvas); font-size: 16px; font-weight: 500; }
.opt input:checked + span { background: var(--pill-bg); color: var(--pill-fg); }
.opt input:focus-visible + span { outline: 2px solid #29cfcf; outline-offset: 2px; }
.summary { background: #a1e5e4; color: #04080d; border-radius: 30px; padding: 50px 30px 30px; display: grid; gap: 18px; align-content: start; position: relative; }
.summary .label { color: rgba(4,8,13,.62); }
.summary dl { margin: 0; display: grid; border-top: 1px solid rgba(4,8,13,.14); }
.summary dl div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(4,8,13,.14); }
.summary dt { font-size: 13px; line-height: 1.6; text-transform: uppercase; letter-spacing: .02em; color: rgba(4,8,13,.62); }
.summary dd { margin: 0; font-size: 16px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.summary .note { font-size: 15px; color: rgba(4,8,13,.72); }
.summary .btn-pill { background: #04080d; color: #fff; }
#request-text { width: 100%; height: 1px; opacity: 0; position: absolute; pointer-events: none; }
.copied { font-size: 14px; font-weight: 500; color: #04080d; min-height: 18px; }
@media (max-width: 900px) { .config { grid-template-columns: minmax(0,1fr); } }

/* FAQ */
.faq { max-width: 880px; margin-inline: auto; padding-block: 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); font-weight: 500; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: var(--slate); max-width: 68ch; font-size: 17px; }

footer { padding-block: 40px 56px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 17px; color: var(--graphite); }
footer nav a { text-decoration: none; }
footer nav a:hover { color: var(--ink); }
footer .by { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--graphite); text-decoration: none; flex-basis: 100%; }
footer .by:hover { color: var(--ink); }

/* Contact fields in the request card */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: rgba(4,8,13,.62); min-width: 0; }
.contact label small { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.contact .wide { grid-column: 1 / -1; }
.contact input, .contact textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: #04080d; background: rgba(255,255,255,.72); border: 0; border-radius: 12px; padding: 11px 14px; box-shadow: inset 0 0 0 1px rgba(4,8,13,.12); text-transform: none; letter-spacing: 0; resize: vertical; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid #04080d; outline-offset: 1px; }
.btn-line { box-shadow: inset 0 0 0 1px currentColor; }
.btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 520px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Error pages */
.err-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.err { width: min(640px, 100%); padding: 48px 16px; display: grid; justify-items: center; text-align: center; gap: 14px; }
.err .brand { margin-bottom: 28px; }
.err-code { font: 600 clamp(88px, 18vw, 150px)/0.9 var(--sans); letter-spacing: -0.05em; color: var(--slate); opacity: .35; }
.err-text { color: var(--graphite); font-size: 18px; max-width: 46ch; }
.err-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }