/* Omni site. Look follows catalog/nubo/design.md: warm paper, ink, one accent colour, Google Sans + Abel, rounded controls. */
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/google-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/google-sans-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Abel"; src: url("/assets/fonts/abel.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f7f6f3;
  --white: #ffffff;      /* surfaces: cards, fields */
  --ink: #262626;        /* text, and dark fills */
  --muted: #57564f;      /* secondary text */
  --soft: #3b3a36;       /* body text on cards */
  --line: #e8e7e1;
  --edge: #d9d7ce;       /* field and card borders */
  --edge-strong: #b9b7ad;
  --wash: #efeee9;
  --dot: #d4d2ca;
  --placeholder: #85837a;
  /* The accent: apricot glass. Buttons and highlights are frosted, lightly tinted glass with dark text
     and a glossy top edge. Change these together to recolour the site. */
  --accent: #e7a676;          /* the solid apricot, for edges and single-colour uses */
  --accent-fill: linear-gradient(180deg, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / .14) 50%, rgb(255 255 255 / 0) 52%),
    linear-gradient(125deg, #fff0e4 0%, #fddcc4 55%, #fde6d6 100%); /* buttons and small markers */
  --accent-ink: #2e1c10;      /* text on the apricot */
  --accent-edge: rgb(255 255 255 / .85);
  --accent-glow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(231 166 118 / .25), 0 12px 28px -12px rgb(231 166 118 / .6);
  --accent-soft: linear-gradient(140deg, rgb(255 245 237 / .76) 0%, rgb(253 230 213 / .62) 55%, rgb(253 238 228 / .7) 100%); /* large highlighted glass surfaces (they keep dark text) */
  --accent-soft-solid: #fde6d5;
  --accent-soft-edge: rgb(255 255 255 / .9);
  --accent-bright: #ffd9bd;   /* the accent on the dark welcome screen and navigation */
  /* Frosted glass: cards and the navigation let the soft apricot background glow through. */
  --glass: rgb(255 255 255 / .55);
  --glass-edge: rgb(255 255 255 / .9);
  --glass-line: rgb(38 38 38 / .07);
  --glass-blur: blur(22px) saturate(170%);
  --nav-glass: rgb(30 27 25 / .84);
  --glow-1: rgb(250 185 140 / .3);
  --glow-2: rgb(252 215 185 / .34);
  --glow-3: rgb(250 230 205 / .34);
  --green: #e6eddf;
  --red: #a64437;
  --alert: #f6e4e0;
  --alert-ink: #7a2f25;
  --sans: "Google Sans", Arial, sans-serif;
  --label: "Abel", "Google Sans", Arial, sans-serif;
  --side: clamp(20px, 5vw, 76px);
  --nav-shadow: 0 8px 24px #2626261a;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Night mode. Only the colours change; the layout and type stay the same. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171716;
  --white: #232322;
  --ink: #f2f1eb;
  --muted: #bebdb4;
  --soft: #dbdad2;
  --line: #343432;
  --edge: #474742;
  --edge-strong: #63635c;
  --wash: #2c2c2a;
  --dot: #55554f;
  --placeholder: #7d7c75;
  --red: #ee9585;
  --alert: #4a2620;
  --alert-ink: #ffd5cd;
  --nav-shadow: 0 8px 24px #0006;
  --glass: rgb(36 36 40 / .6);
  --glass-edge: rgb(255 255 255 / .1);
  --glass-line: rgb(255 255 255 / .06);
  --glow-1: rgb(200 130 80 / .16);
  --glow-2: rgb(200 130 80 / .16);
  --glow-3: rgb(255 255 255 / .04);
  --accent-soft: linear-gradient(140deg, #fff0e4, #fddcc4); /* opaque at night, so its dark text stays sharp */
  --accent-soft-edge: #e7a676;
}
/* Parts that look the same day and night: the dark welcome screen and navigation keep their own colours... */
:root[data-theme="dark"] :is(.hero, .nav) {
  color-scheme: light;
  --white: #ffffff; --ink: #262626; --muted: #57564f; --soft: #3b3a36; --line: #e8e7e1; --edge: #d9d7ce; --wash: #efeee9;
}
/* ...and anything filled with a light colour keeps dark text. (Accent fills use --accent-ink instead.) */
:root[data-theme="dark"] :is(.rules div:nth-child(2), .compare :is(td, th):last-child, .tag-free, .plan-free, .choice-yes,
  .plan-choice label:has(input:checked), .field label.addon:has(input:checked), .drop.is-over, .tick, .mini-list i, .form-steps button.is-done span) {
  color-scheme: light;
  --white: #ffffff; --ink: #262626; --muted: #57564f; --soft: #3b3a36; --line: #e8e7e1; --edge: #d9d7ce; --wash: #efeee9;
  color: #262626;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--sans); overflow-wrap: break-word; }
h1, h2, h3, p, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .nav :focus-visible { outline-color: var(--accent-bright); }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 24px; background: var(--accent-fill); color: var(--accent-ink); text-decoration: none; }
.skip-link:focus { top: 12px; }

h2 { font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -.05em; }
h3 { font-weight: 500; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.035em; }
.label { font: 400 1rem/1.4 var(--label); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 24px; font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s, border-color .2s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-dark { background: var(--ink); color: var(--white); }
.button-light { background: var(--white); color: var(--ink); }
.button-lemon { background: var(--accent-fill); color: var(--accent-ink); box-shadow: var(--accent-glow); }
.button-wash { background: var(--wash); color: var(--ink); border-color: var(--line); }
.button-glass { background: rgb(255 255 255 / .12); color: var(--white); border-color: rgb(255 255 255 / .38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.link-button { border: 0; background: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; font-size: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WhatsApp, always one tap away */
.wa-float { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 26px -8px rgb(0 0 0 / .45); transition: transform .2s var(--ease); }
.wa-float:hover { transform: translateY(-2px) scale(1.04); }

/* Floating navigation */
.nav { position: fixed; top: 18px; left: var(--side); right: var(--side); z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: #fff; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav-brand, .nav-links, .theme-toggle { height: 54px; border-radius: 27px; background: var(--nav-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), var(--nav-shadow); }
.nav-brand { justify-self: start; display: inline-flex; align-items: center; padding: 0 26px 3px; font-weight: 500; font-size: 1.5rem; letter-spacing: -.06em; text-decoration: none; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 40px; padding: 0 34px; }
.nav-links a { font-size: 1rem; text-decoration: none; color: rgb(255 255 255 / .72); white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: #fff; }
.nav-side { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* Day and night switch: an icon with a word, so it is easy to spot. */
.theme-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 0 20px 0 16px; border: 0; color: #fff; font-weight: 500; font-size: 1rem; transition: background-color .2s; }
.theme-toggle:hover { background: rgb(58 58 64 / .82); }
.theme-toggle svg { color: var(--accent-bright); }
.theme-toggle .icon-sun, .theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
/* Section position: previous, "2 / 7", next. Always in the header, at every width. */
.nav-steps { display: flex; align-items: center; gap: 2px; height: 54px; padding: 0 6px; border-radius: 27px; background: var(--nav-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), var(--nav-shadow); }
.step-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; }
.step-arrow:hover:not(:disabled) { background: rgb(255 255 255 / .14); }
.step-arrow:disabled { opacity: .35; cursor: default; }
.step-count { min-width: 44px; text-align: center; font: 400 .9375rem var(--label); letter-spacing: .06em; color: rgb(255 255 255 / .85); white-space: nowrap; }
.menu-button { display: none; align-items: center; gap: 8px; height: 54px; padding: 0 18px; border: 0; border-radius: 27px; background: var(--nav-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), var(--nav-shadow); color: #fff; font-weight: 500; font-size: 1rem; }
.menu-button[aria-expanded="true"] { background: var(--accent-fill); color: var(--accent-ink); }
.menu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 24px)); max-height: calc(100svh - 90px); overflow-y: auto; padding: 8px; border-radius: 22px; background: var(--nav-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 24px 50px -20px rgb(0 0 0 / .5); }
.menu-panel a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px 0 8px; border-radius: 16px; color: #fff; text-decoration: none; font-size: 1.0625rem; }
.menu-panel a span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / .12); font-size: .875rem; }
.menu-panel a:hover { background: rgb(255 255 255 / .1); }
.menu-panel a[aria-current="true"] { background: rgb(255 255 255 / .14); }
.menu-panel a[aria-current="true"] span { background: var(--accent-fill); color: var(--accent-ink); }
.nav .menu-panel :focus-visible { outline-color: var(--accent-bright); }
.menu-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; padding: 10px 14px 6px; border-top: 1px solid rgb(255 255 255 / .14); }
.menu-panel .menu-contact a { display: inline; min-height: 0; padding: 6px 0; font-size: .9375rem; color: rgb(255 255 255 / .8); text-decoration: underline; text-underline-offset: 3px; }
.nav-cta { display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 27px; background: var(--accent-fill); color: var(--accent-ink); font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; box-shadow: var(--accent-glow), var(--nav-shadow); }

/* Sections: one per screen. Native scroll snapping moves one screen per swipe, wheel or key; nothing intercepts
   the wheel or touch. A section taller than the screen (a long form, large text, a short landscape phone)
   grows and scrolls inside its own snap area instead of clipping. */
html { scroll-snap-type: y mandatory; }
html.is-typing, html.is-full-view, html.has-price-detail { scroll-snap-type: none; }
@media (max-height: 520px) { html { scroll-snap-type: y proximity; } }
.panel { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding: 96px var(--side) 28px; }
.slide-inner { display: grid; gap: clamp(16px, 3vh, 32px); width: 100%; max-width: 1240px; margin-inline: auto; }
.slide-head { display: grid; gap: 8px; }
.slide-head h2 { font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: 1.02; }
.slide-lead { max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.45; color: var(--muted); }
/* Each screen ends with one plain next step. */
.slide-next { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line); font: 400 .9375rem var(--label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--soft); }
.slide-next:hover { border-color: var(--ink); color: var(--ink); }
.slide-next-light { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border-color: rgb(255 255 255 / .3); color: rgb(255 255 255 / .85); }
.slide-next-light:hover { border-color: #fff; color: #fff; }

/* 1. Welcome: one line, one action. */
.hero { align-items: center; background: var(--ink); color: var(--white); overflow: hidden; text-align: center; }
.wall { position: absolute; inset: 0; display: grid; align-content: center; gap: 20px; }
.wall-row { display: flex; gap: 20px; width: max-content; animation: drift 140s linear infinite; }
.wall-row:nth-child(even) { animation-direction: reverse; }
.wall-row img { width: 440px; height: auto; aspect-ratio: 1265 / 739; object-fit: cover; object-position: top; border-radius: 12px; }
@keyframes drift { to { transform: translateX(-50%); } }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, rgb(38 38 38 / .97) 0%, rgb(38 38 38 / .93) 42%, rgb(38 38 38 / .76) 100%); }
.hero-inner { position: relative; display: grid; justify-items: center; gap: clamp(16px, 2.8vh, 26px); max-width: 1100px; }
.hero h1 { font-weight: 500; font-size: clamp(2.75rem, 7vw, 6rem); line-height: .98; letter-spacing: -.06em; text-wrap: balance; }
.hero h1 .dot { color: var(--accent-bright); }
.hero-copy { font-size: clamp(1.125rem, 1.8vw, 1.625rem); line-height: 1.4; letter-spacing: -.02em; color: rgb(255 255 255 / .9); text-wrap: balance; }
.hero-copy span { display: block; } /* two short lines, one thought each */
.hero-cta { min-height: 56px; padding: 0 32px; border-radius: 28px; font-size: 1.0625rem; }
.hero-note { font: 400 .9375rem var(--label); letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .75); }

/* 3. The offer: one website, optional extras beside it. */
.pricing-inner { max-width: 1160px; margin-inline: auto; width: 100%; }
.offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.offer-main { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--white); border: 1.5px solid var(--ink); }
.offer-top { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; letter-spacing: -.03em; }
.offer-price { font-size: clamp(3rem, 6vw, 4.5rem); letter-spacing: -.06em; line-height: 1; }
.offer-lead { font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.offer-more { justify-self: start; }
.offer-extras { display: grid; gap: 12px; align-content: start; }
.ticks { display: grid; gap: 8px; align-content: start; }
.ticks > * { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.35; color: var(--soft); }
.ticks > *::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.4' fill='none' stroke='%23262626' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Each extra is a button: it opens a short explanation. */
.extra { display: grid; gap: 4px; align-content: start; padding: 16px 20px; border-radius: 16px; background: var(--wash); border: 1.5px solid transparent; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.extra:hover { transform: translateY(-2px); border-color: var(--ink); }
.extra > span:not(.extra-head) { color: var(--soft); }
.extra-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); }
.extra-head strong, .extra-head b { font-weight: 500; font-size: 1.0625rem; letter-spacing: -.02em; }
.extra-not { background: transparent; border: 1.5px dashed var(--edge-strong); }
.extra-not .extra-head b { font: 400 .875rem var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* 2. How it works: four cards in a row, read left to right. Every card is complete on its own;
   the one that is "on" replays its small animation while the others rest in their finished state. */

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); counter-reset: flow; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 10px); padding: 14px 14px clamp(16px, 2.6vh, 24px); border-radius: 24px; background: var(--white); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .35s, box-shadow .35s, transform .35s var(--ease); }
.flow-step.is-on { border-color: var(--ink); box-shadow: 0 26px 50px -36px rgb(38 38 38 / .5); transform: translateY(-4px); }
/* arrow to the next card */
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: clamp(20px, 2.4vw, 36px); height: 14px; transform: translateY(-50%); background: var(--ink); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7.5 3.5 11 7l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask: var(--arrow) center / 14px no-repeat; mask: var(--arrow) center / 14px no-repeat; }
.flow-art { display: grid; place-items: center; height: clamp(124px, 22vh, 210px); padding: 14px; border-radius: 14px; background: var(--paper); overflow: hidden; margin-bottom: clamp(4px, 1vh, 10px); }
.flow-who { display: flex; align-items: center; gap: 8px; padding-inline: 6px; font: 400 .875rem var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.flow-who span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); font: 500 .875rem var(--sans); letter-spacing: 0; }
.flow-who.who-us span { background: var(--ink); color: var(--white); }
.flow-step h3 { padding-inline: 6px; font-size: clamp(1.25rem, 1.9vw, 1.625rem); letter-spacing: -.04em; }
.flow-step > p:not(.flow-who) { padding-inline: 6px; font-size: 1rem; line-height: 1.45; color: var(--muted); }
.step-bar { position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.flow.is-playing .flow-step.is-on .step-bar { animation: fill var(--step-time, 4200ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

/* 1. the link and the request */
.mini-form { display: grid; gap: 7px; width: 100%; max-width: 250px; }
.mini-input { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); font-size: .8125rem; overflow: hidden; }
.mini-input svg { flex: none; color: var(--muted); }
.type { font-weight: 400; white-space: nowrap; }
.flow-step.is-on .type-a { animation: typing .7s .2s steps(13) both; }
.flow-step.is-on .type-b { animation: typing 1s 1.1s steps(21) both; }
@keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mini-send { justify-self: start; display: grid; place-items: center; height: 30px; padding: 0 16px; border-radius: 15px; background: var(--ink); color: var(--white); font-weight: 500; font-size: .8125rem; }
.flow-step.is-on .mini-send { animation: press .5s 2.4s var(--ease) both; }
@keyframes press { 50% { transform: scale(.9); } }

/* 2. our checklist */
.mini-list { display: grid; gap: 8px; width: 100%; max-width: 230px; }
.mini-list li { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); font-size: .8125rem; white-space: nowrap; }
.mini-list i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--ink); }
.flow-step.is-on .mini-list i { animation: pop .4s .4s var(--ease) both; }
.flow-step.is-on .mini-list li:nth-child(2) i { animation-delay: 1.3s; }
.flow-step.is-on .mini-list li:nth-child(3) i { animation-delay: 2.2s; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* 3. the preview */
.mini-browser { width: 100%; max-width: 260px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--white); box-shadow: 0 14px 30px -20px rgb(0 0 0 / .4); }
.mini-bar { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: var(--wash); }
.mini-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--dot); }
.mini-bar span { margin-left: 6px; font-size: .625rem; color: var(--muted); }
.mini-page { position: relative; aspect-ratio: 1265 / 739; background: var(--wash) center top / cover no-repeat; }
.flow-step.is-on .mini-page { animation: reveal 1.3s .2s var(--ease) both; }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mini-badge { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 12px; background: var(--accent-fill); color: var(--accent-ink); font-weight: 500; font-size: .75rem; transform-origin: left bottom; }
.flow-step.is-on .mini-badge { animation: pop .4s 1.6s var(--ease) both; }

/* 4. the decision */
.mini-choice { display: grid; gap: clamp(5px, 1vh, 8px); width: 100%; max-width: 250px; }
.choice { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: clamp(6px, 1.1vh, 9px) 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); font-size: .8125rem; white-space: nowrap; }
.choice b { font-weight: 500; }
.choice em { font-style: normal; color: var(--muted); }
.choice-yes { background: var(--accent-soft); border-color: var(--accent-soft-edge); }
.choice-yes em { color: var(--ink); }
.flow-step.is-on .choice { animation: rise .5s .3s var(--ease) both; }
.flow-step.is-on .choice + .choice { animation-delay: 1s; }
.flow-step.is-on .choice + .choice + .choice { animation-delay: 1.7s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tick { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--ink); }


/* 4. Choose a style: both filter groups on one screen. */
.filter-groups { display: grid; gap: 16px; }
.filter-group { display: grid; gap: 10px; }
.filter-group .label b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 11px; background: var(--accent-fill); color: var(--accent-ink); font: 500 .8125rem var(--sans); letter-spacing: 0; vertical-align: 1px; }
.filter-group .label b:empty { display: none; }

/* The short explanation that opens from a price card */
.detail { width: min(640px, calc(100vw - 32px)); }
.detail h2 { margin-bottom: 20px; }
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 4px 0 22px; padding: 20px 18px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); counter-reset: none; }
.timeline li { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px 12px 0 0; font-size: .9375rem; line-height: 1.35; color: var(--soft); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fill); box-shadow: inset 0 0 0 2px var(--ink); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 2px; background: var(--edge); }
.timeline li:last-child::after { display: none; }
.timeline b { font-weight: 500; font-size: 1rem; color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 22px; }
.tiles i { aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft-solid), #d6f3cf); }
.tiles i:nth-child(2) { background: linear-gradient(135deg, #d3e9ff, #e2d8ff); }
.tiles i:nth-child(3) { background: linear-gradient(135deg, #ffe3c9, #ffd0dc); }
.detail .ticks > * { font-size: 1rem; line-height: 1.45; color: var(--soft); }
.detail-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* $600 and Tailored, side by side */
.compare { width: 100%; margin: 4px 0 18px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); font-size: 1rem; line-height: 1.35; }
.compare th, .compare td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
.compare thead th { border-top: 0; font-weight: 500; }
.compare thead b { display: block; font-weight: 500; font-size: 1.625rem; letter-spacing: -.045em; line-height: 1.15; }
.compare tbody th { width: 22%; font: 400 .875rem/1.5 var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.compare td { color: var(--soft); }
.compare :is(td, th):last-child { background: var(--accent-soft); color: #262626; border-top-color: var(--accent-soft-edge); }
.compare-note { font-size: 1rem; line-height: 1.5; color: var(--soft); }
/* Refund rules */
.rules { display: grid; gap: 10px; margin: 0; }
.rules div { padding: 14px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.rules dt { font-weight: 500; }
.rules dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; color: var(--soft); }
.rules div:nth-child(2) { background: var(--accent-soft); border-color: var(--accent-soft-edge); }
.rules div:nth-child(2) dd { color: #262626; }
/* Ways to email us */
#detail-email h2 { clear: both; font-size: clamp(1.125rem, 5.2vw, 2rem); letter-spacing: -.04em; white-space: nowrap; user-select: all; }
.mail-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 5. Preview designs: one stage filling the screen. The window is drawn (with its loader) before the list
   arrives, so the screen is never an unexplained blank. */
.designs { justify-content: flex-start; padding-bottom: 14px; }
.designs-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "viewer about"; gap: 12px 24px; width: 100%; max-width: 1480px; margin-inline: auto; height: calc(100svh - 110px); min-height: 440px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 15px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); font-size: 1rem; white-space: nowrap; transition: background-color .2s, color .2s; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* The design menu's list: every design in curated order, each with a small screenshot, its name and what it suits. */
.design-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.design-card { display: grid; gap: 2px; align-content: start; padding: 6px 6px 10px; border: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .2s; }
.design-card:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.design-card img { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 6px; border-radius: 9px; background: var(--wash); object-fit: cover; object-position: top; }
.design-card strong { padding: 0 4px; font-size: .9375rem; font-weight: 500; letter-spacing: -.02em; }
.design-card span { padding: 0 4px; font-size: .8125rem; color: var(--muted); }
.design-card[aria-current="true"] { background: var(--accent-soft-solid); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.design-card[aria-current="true"] span { color: var(--accent-ink); }
.empty { display: grid; gap: 6px; justify-items: start; padding: 18px; border-radius: 16px; background: var(--wash); font-size: 1rem; }
.viewer { grid-area: viewer; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.browser { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line); background: var(--white); overflow: hidden; box-shadow: 0 30px 60px -40px rgb(38 38 38 / .35); }
.browser-bar { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; height: 58px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.browser-nav { display: flex; gap: 6px; }
/* The two arrows are the only accent colour in the window bar: they are how you change design. */
.browser-nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-edge); color: var(--accent-ink); transition: transform .2s var(--ease); }
.browser-nav button:hover { transform: scale(1.08); }
/* The design menu button names the design on show; it opens the list and filters. */
.picker-open { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; height: 40px; padding: 0 14px 0 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--wash); color: var(--ink); font-size: 1rem; font-weight: 500; white-space: nowrap; transition: border-color .2s; }
.picker-open:hover, .picker-open[aria-expanded="true"] { border-color: var(--ink); }
.picker-open svg { flex: none; }
.picker-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; }
.picker-text > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.picker-text small { flex: none; font-weight: 400; font-size: .875rem; color: var(--muted); }
.picker-badge { flex: none; padding: 2px 8px; border-radius: 10px; background: var(--accent-fill); color: var(--accent-ink); font-size: .75rem; font-weight: 500; }
.picker-badge[hidden] { display: none; }
/* Preview size: Desktop, Tablet and Phone widths. On a phone-sized screen the first two are visibly off. */
.device-toggle { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 19px; background: var(--wash); }
.device-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font-size: .875rem; }
.device-toggle button[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.device-toggle button[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.device-toggle button:focus-visible, .picker-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.device-note { position: absolute; top: calc(100% + 8px); right: 0; z-index: 4; padding: 7px 12px; border-radius: 14px; background: rgb(38 38 38 / .92); color: #fff; font-size: .8125rem; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .5); }
.device-note[hidden] { display: none; }
.browser-body { position: relative; flex: 1 1 auto; min-height: 220px; background: var(--wash); overflow: hidden; touch-action: pan-y; }
.browser-body img { position: absolute; inset: 0; width: 100%; height: 100%; margin-inline: auto; background: #fff; object-fit: cover; object-position: top; }
/* The live page is laid out at a full desktop width, then scaled to fit (sizes set in app.js). */
.browser-body iframe { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: 100%; border: 0; background: #fff; color-scheme: light; transform-origin: 0 0; }
.browser:is([data-device="phone"], [data-device="tablet"]) .browser-body iframe { box-shadow: 0 0 0 1px var(--line), 0 24px 48px -30px rgb(0 0 0 / .45); }
.browser-body iframe.is-waiting { opacity: 0; pointer-events: none; }
/* Full screen: a labelled button in the window bar. */
.view-full { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--wash); color: var(--ink); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.view-full:hover { border-color: var(--ink); }
.view-full:focus-visible, .frame-retry:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* What the live window is doing: loading (with a spinner), still loading, didn't load (Try again) or a short tip. */
.frame-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); color: #fff; font-size: .9375rem; line-height: 1.4; }
.frame-status[hidden] { display: none; }
.frame-status[data-state="failed"] { background: color-mix(in srgb, var(--paper) 30%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.frame-status-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(340px, 100%); padding: 20px 24px; border-radius: 18px; background: rgb(38 38 38 / .88); text-align: center; box-shadow: 0 18px 40px -24px rgb(0 0 0 / .55); }
.frame-status .spinner { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .3); border-top-color: #fff; animation: spin .9s linear infinite; }
/* The short tip after loading is a small label at the bottom, never a cover. */
.frame-status[data-state="hint"] { inset: auto 0 14px; place-items: end center; padding: 0 14px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.frame-status[data-state="hint"] .frame-status-card { flex-direction: row; padding: 7px 14px; font-size: .875rem; }
.frame-status:not([data-state="loading"]):not([data-state="slow"]) .spinner { display: none; }
.frame-retry { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: #fff; color: #262626; font-size: .875rem; font-weight: 500; pointer-events: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The same window covers the screen; the design inside keeps running, so it never reloads. */
html.is-full-view { overflow: hidden; }
.browser.is-full { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: var(--white); }
.browser.is-full .browser-body { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
.browser.is-full .browser-bar { padding-top: env(safe-area-inset-top, 0px); }
.browser.is-full .view-full { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* The chosen design: its name, what it suits and the two actions. */
/* Zero matches or no catalog: the stage explains itself and offers the way back instead of going blank. */
.anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.picker { width: min(600px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100dvh - 48px)); max-height: none; margin: auto; border-radius: 22px; background: var(--paper); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .5); overflow: hidden; }
.picker[open] { display: flex; flex-direction: column; }
.picker-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 22px; }
.picker-head h3 { font-size: 1.375rem; letter-spacing: -.04em; }
.picker-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); }
.picker-close:hover { border-color: var(--ink); }
.picker-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: 2px 22px 20px; }
.picker-filters { border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.picker-filters summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 500; cursor: pointer; list-style: none; border-radius: 16px; }
.picker-filters summary::-webkit-details-marker { display: none; }
.picker-filters summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.picker-filters summary svg { margin-left: auto; transition: transform .2s var(--ease); }
.picker-filters[open] summary svg { transform: rotate(180deg); }
.picker-filters-count { font-weight: 400; color: var(--muted); }
.picker-filters .filter-groups { padding: 2px 16px 16px; }
.picker-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.picker-foot .button { margin-left: auto; min-height: 48px; }
.picker-help { font-size: .9375rem; color: var(--ink); }
.stage-empty { grid-area: viewer; grid-column: 1 / -1; align-self: center; justify-self: center; display: grid; gap: 12px; justify-items: center; width: min(100%, 460px); padding: clamp(24px, 4vw, 36px); border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); text-align: center; }
.stage-empty[hidden] { display: none; }
.stage-empty strong { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.stage-empty p { margin: 0; color: var(--soft); line-height: 1.45; }
.stage-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.stage-empty-help { font-size: .9375rem; color: var(--ink); }
.about { grid-area: about; align-self: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.about h3 { font-size: 1.5rem; letter-spacing: -.045em; }
.about-text { font-size: 1rem; line-height: 1.45; color: var(--soft); }
.about-tags { display: none; } /* owner request: no category/style badges under the preview; the list stays for the script */
.about-actions { display: grid; gap: 8px; margin-top: 4px; }
.about-actions .button { width: 100%; }
.about .full-open { display: none; } /* computers use Full screen in the window bar */
.about-note { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.about-note a, .about-note .link-button, .hint .link-button { padding: 0; font-size: inherit; color: var(--ink); }

/* 5. Request */
.request { display: flex; flex-direction: column; }
.request-inner { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1240px; margin: auto; width: 100%; }
.request-side { display: grid; gap: clamp(12px, 2vh, 20px); }
.request-lead { color: var(--muted); max-width: 40ch; }
.chosen { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.chosen:has(img[hidden]) { grid-template-columns: 1fr; padding: 14px 16px; }
.chosen img { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
.chosen .label { display: block; font-size: .875rem; }
.chosen strong { display: block; font-weight: 500; font-size: 1.125rem; letter-spacing: -.02em; }
.chosen a { font-size: .9375rem; }
.after { display: grid; gap: 10px; counter-reset: after; font-size: 1rem; color: var(--muted); }
.after li { position: relative; padding-left: 34px; counter-increment: after; }
.after li::before { content: counter(after); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--ink); font-size: .875rem; font-weight: 500; }

/* Spacing in the form grows with the height of the screen: roomy on a tall screen, still one screen on a short one. */
.form { --gap: clamp(9px, calc(5vh - 27px), 24px); scroll-margin-top: 88px; padding: clamp(18px, calc(7vh - 32px), 40px) clamp(20px, 3vw, 40px); border-radius: 26px; background: var(--white); border: 1px solid var(--line); min-width: 0; }
.form-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.form-steps button { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 7px; border: 0; border-radius: 19px; background: transparent; font-size: .9375rem; color: var(--muted); }
.form-steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--ink); font-weight: 500; font-size: .875rem; }
.form-steps button[aria-current="step"] { background: var(--wash); color: var(--ink); font-weight: 500; }
.form-steps button[aria-current="step"] span { background: var(--ink); color: var(--white); }
.form-steps button.is-done span { background: var(--green); }
.form-step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) 20px; }
.field { display: grid; gap: clamp(5px, 1vh, 8px); align-content: start; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field-label, .plan-choice legend { font-size: 1rem; font-weight: 500; }
.field label span, .field-label span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; min-height: clamp(46px, 5.6vh, 50px); padding: 11px 16px; border-radius: 10px; border: 1px solid var(--edge); background: var(--paper); transition: border-color .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgb(38 38 38 / .1); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field ::placeholder { color: var(--placeholder); }
.error { font-size: .875rem; color: var(--red); min-height: 0; }
.error:empty { display: none; }
.hint { font-size: .875rem; color: var(--muted); }

.swatches { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 0; }
.swatch { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgb(128 128 128 / .35); background: var(--c, var(--wash)); color: #fff; transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.is-light { color: #262626; }
.swatch svg { opacity: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.swatch[aria-pressed="true"] svg { opacity: 1; }
.swatch-add { border: 1.5px dashed var(--edge-strong); background: var(--paper); color: var(--ink); font-size: 1.125rem; line-height: 1; cursor: pointer; }
.swatch-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swatch-add:focus-within { outline: 2.5px solid var(--ink); outline-offset: 3px; }

.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--edge-strong); background: var(--paper); transition: border-color .2s, background-color .2s; }
.drop.is-over { border-color: var(--ink); background: var(--accent-soft); }
.drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.drop-input:focus-visible + .drop-button { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.field label.drop-button { min-height: 40px; padding: 0 18px; font-size: 1rem; background: var(--white); cursor: pointer; }
.drop-hint { font-size: .875rem; color: var(--muted); }
.files-note { margin-top: calc(var(--gap) * -.5); }
.file-list { display: grid; gap: 4px; }
.file-list:empty { display: none; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 8px; background: var(--wash); font-size: .9375rem; }
.file-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li small { flex: none; margin-left: auto; color: var(--muted); font-size: .875rem; }
.file-list li button { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: var(--white); font-size: .875rem; }

/* Optional fields fold away; a field with an error opens its group. */
.more-fields { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.more-fields > summary { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 12px 16px; font-weight: 500; cursor: pointer; list-style: none; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary span { font-weight: 400; color: var(--muted); }
.more-fields > summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; background: var(--wash); font-weight: 400; }
.more-fields[open] > summary::after { content: "−"; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) 20px; padding: 4px 16px 16px; }
/* Review: the answers that matter, then the terms in short, before consent. */
.review { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--wash); font-size: 1rem; }
.review dt { color: var(--muted); }
.review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.terms { display: grid; gap: 10px; justify-items: start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); }
.terms .label { font-size: .875rem; }
.terms-list { display: grid; gap: 8px; font-size: .9375rem; line-height: 1.45; color: var(--soft); }
.terms-list strong { color: var(--ink); font-weight: 500; }
.terms .link-button { padding: 0; font-size: .9375rem; }
.form-legacy { padding: 12px 14px; border-radius: 12px; background: var(--alert); color: var(--alert-ink); font-size: .9375rem; }
.form-legacy .link-button { padding: 0; font-size: inherit; color: inherit; }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.form-end { gap: 6px; }
.field label.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.field label.consent span { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.consent .link-button { padding: 0; font-size: inherit; }
.form-alert { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--alert); color: var(--alert-ink); font-size: 1rem; }
.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-send { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.form-note { font-size: .875rem; color: var(--muted); text-align: right; max-width: 30ch; }

.success { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--white); border: 1px solid var(--line); }
.success h3 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); letter-spacing: -.05em; }
.success p { color: var(--muted); }
.success p strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.contact { display: flex; align-items: center; gap: 14px; padding-top: clamp(10px, 1.8vh, 16px); border-top: 1px solid var(--line); }
.contact-icons { display: flex; gap: 8px; }
.icon-link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 1px solid var(--edge); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; }
.icon-link:hover { transform: translateY(-1px); border-color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 12px; }
.foot-links .icon-link { width: 34px; height: 34px; }
.foot-links .link-button { margin-left: 8px; }
.success p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.success p a { color: var(--ink); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; width: 100%; margin: clamp(6px, 3vh, 28px) auto 0; font-size: .9375rem; color: var(--muted); }

/* 6. FAQ: supporting terms together, with native keyboard and touch controls. */
.faq { display: flex; flex-direction: column; }
.faq-inner { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); max-width: 1240px; margin: auto; width: 100%; align-items: start; }
.faq-head { display: grid; justify-items: start; gap: 18px; }
.faq-head > p:not(.label) { color: var(--muted); }
.faq-list { min-width: 0; }
.faq-group + .faq-group { margin-top: 24px; }
.faq-group > .label { margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--edge); scroll-margin-top: 100px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 14px 0; font-weight: 500; line-height: 1.35; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wash); font-weight: 400; line-height: 1; }
.faq details[open] > summary::after { content: "−"; background: var(--accent-fill); color: var(--accent-ink); }
.faq summary:hover { color: var(--soft); }
.faq-answer { padding: 0 40px 18px 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.faq-answer p + p { margin-top: 10px; }
.faq-answer strong { color: var(--ink); font-weight: 500; }
.faq details[open] .faq-answer { animation: faq-reveal .2s var(--ease); }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Dialogs */
dialog { border: 0; padding: 0; color: var(--ink); }
dialog::backdrop { background: rgb(38 38 38 / .55); }
.details { width: min(760px, calc(100vw - 32px)); max-height: min(86svh, 860px); padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--paper); box-shadow: 0 20px 70px #0002; overscroll-behavior: contain; }
.details h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 8px 0 22px; }
.details-body { display: grid; gap: 18px; }
.details-body p { color: var(--muted); margin-top: 4px; }
.dialog-close { position: sticky; top: 0; float: right; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); font-size: 1rem; }
html.has-price-detail { overflow: hidden; }
.price-detail { width: min(560px, calc(100vw - 32px)); overflow-y: auto; }
.price-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.price-detail-top .label { margin: 0; }
.price-detail .dialog-close { position: static; float: none; flex-shrink: 0; min-height: 44px; }
.price-detail h2 { margin: 18px 0 8px; }
.price-detail-price { font-size: 1.125rem; font-weight: 500; }
.price-detail-summary { margin-top: 18px; color: var(--soft); }
.price-detail-points { display: grid; gap: 12px; margin-top: 20px; padding: 20px 0 0 20px; border-top: 1px solid var(--line); list-style: disc; color: var(--soft); }

/* Glass. A soft blue glow sits behind the page; cards are frosted panels over it. Text on them keeps full contrast. */
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 40% at 10% 16%, var(--glow-1), transparent 72%), radial-gradient(44% 42% at 90% 80%, var(--glow-2), transparent 72%), radial-gradient(38% 34% at 60% 6%, var(--glow-3), transparent 72%), radial-gradient(34% 30% at 40% 96%, var(--glow-3), transparent 72%); }
:is(.offer-main, .browser, .about, .form, .chosen, .success, .extra:not(.extra-not)) {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge); box-shadow: inset 0 0 0 1px var(--glass-line), 0 18px 40px -30px rgb(30 40 90 / .35); }
.offer-main { border-color: var(--ink); }
.about { box-shadow: inset 0 0 0 1.5px var(--ink), 0 18px 40px -30px rgb(30 40 90 / .35); }
/* Highlighted surfaces are tinted glass too. */
.button-lemon, .nav-cta { backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); }
.details { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
dialog::backdrop { background: rgb(20 22 34 / .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@media (min-width: 1000px) and (max-width: 1279px) {
  .device-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .device-toggle button { width: 38px; padding: 0; }
  .nav-links { gap: 24px; padding: 0 24px; }
  .theme-label, .nav-cta { display: none; }
  .theme-toggle { width: 54px; padding: 0; justify-content: center; }
  .browser-bar { gap: 10px; }
  .designs-inner { grid-template-columns: minmax(0, 1fr) 270px; }
}

/* Phones and tablets: the header keeps the brand, the section arrows, day/night and a Menu of every section. */
@media (max-width: 999px) {
  .nav { top: 12px; left: 12px; right: 12px; grid-template-columns: auto 1fr; gap: 6px; }
  .nav-links, .theme-label, .nav-cta { display: none; }
  .nav-brand, .theme-toggle, .nav-steps, .menu-button { height: 46px; }
  .nav-brand { padding: 0 16px 3px; font-size: 1.375rem; }
  .theme-toggle { width: 46px; padding: 0; justify-content: center; }
  .nav-steps { padding: 0 3px; }
  .step-arrow { width: 36px; height: 36px; }
  .step-count { min-width: 38px; font-size: .875rem; }
  .menu-button { display: inline-flex; padding: 0 14px; }
  .nav-side { gap: 6px; }
  .panel { padding: 76px 20px 20px; }
  .hero-shade { background: rgb(38 38 38 / .955); }
  .wall-row img { width: 300px; }
  .field textarea { min-height: 112px; }
  .foot { padding-right: 64px; }
  .offer, .request-inner, .faq-inner { grid-template-columns: minmax(0, 1fr); }
  .faq-answer { padding-right: 0; }
  /* The stage: the window takes the screen; a compact strip under it holds the tags and the two actions. */
  .designs { padding-bottom: 12px; }
  .designs-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "viewer" "about"; gap: 10px; height: calc(100svh - 88px); min-height: 400px; }
  .about { padding: 10px 12px; gap: 8px; border-radius: 16px; }
  #about-position, .about h3, .about-text { display: none; }
  .about-actions { grid-template-columns: auto 1fr; margin-top: 0; }
  .about-actions .button { min-height: 46px; padding: 0 16px; }
  .about .full-open { display: inline-flex; }
  .about-note { text-align: center; }
  /* The window bar: previous/next, the design menu and preview size. Full screen sits under the window;
     inside full screen its exit is here. Size names are kept for screen readers and shown as icons. */
  .browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; height: auto; padding: 7px 8px; }
  .browser-nav button { width: 44px; height: 44px; }
  .picker-open { height: 44px; border-radius: 22px; padding: 0 12px 0 16px; }
  .device-toggle { border-radius: 22px; }
  .device-toggle button { width: 40px; height: 38px; padding: 0; border-radius: 19px; }
  .device-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .view-full { display: none; }
  .browser.is-full .browser-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  .browser.is-full .view-full { display: inline-flex; height: 44px; border-radius: 22px; }
  /* Until the design has loaded, its screenshot sits at the top over a soft blur of itself. */
  .browser-body::before { content: ""; position: absolute; inset: -30px; background: var(--shot, none) center / cover no-repeat; filter: blur(26px); opacity: .7; }
  .browser-body img { height: auto; object-fit: contain; }
  .browser.is-full .frame-status[data-state="hint"] { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mail-options { grid-template-columns: 1fr; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .panel { padding-inline: 32px; }
  .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .flow-step:not(:last-child)::after { display: none; }
  .flow-art { height: clamp(96px, 14vh, 150px); }
}
/* Phones: the four steps sit side by side and scroll sideways, each one complete. */
@media (max-width: 699px) {
  /* The design menu, previous/next by swipe: the bar holds the menu button and the preview size. */
  .browser-nav { display: none; }
  .browser-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .browser.is-full .browser-bar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .device-toggle button { width: 36px; }
  .device-note { right: -4px; white-space: normal; width: max-content; max-width: min(260px, calc(100vw - 48px)); }
  /* The menu rises from the bottom edge, nearly full height. */
  .picker { width: 100%; height: calc(100dvh - 32px); margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .picker-head { padding: 12px 12px 8px 18px; }
  .picker-scroll { padding: 2px 16px 16px; }
  .picker-foot { padding-inline: 16px; }
  .design-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .flow { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .flow::-webkit-scrollbar { display: none; }
  .flow-step { flex: 0 0 78%; scroll-snap-align: center; }
  .flow-step:not(:last-child)::after { display: none; }
  .flow-step.is-on { transform: none; }
  .flow-art { height: min(150px, 20svh); }
  .offer-main { padding: 20px; gap: 10px; }
  .offer-price { font-size: 3rem; }
  .offer-extras { gap: 8px; }
  .slide-head h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .pricing .slide-inner { gap: 12px; }
  .offer-lead { font-size: 1rem; }
  .pricing .ticks > * { font-size: .9375rem; }
  /* Filters in the design menu stay comfortably tappable. */
  .filter-groups { gap: 12px; }
  .filter-group { gap: 6px; }
  .filter-group .label { font-size: .875rem; }
  .chips { gap: 6px; }
  .chip { min-height: 36px; padding: 0 12px; font-size: .875rem; }
  .pricing .slide-head { gap: 4px; }
  .pricing .slide-lead { font-size: .9375rem; }
  .offer-main { padding: 18px; gap: 8px; }
  .extra { padding: 10px 14px; }
  /* The design screen needs its full width at the bottom; WhatsApp stays in the header menu and form. */
  html[data-section="designs"] .wa-float { display: none; }
}
@media (max-width: 560px) {
  .form-step, .more-grid { grid-template-columns: 1fr; }
  .hero-cta { width: 100%; }
  .form-send { flex-direction: column-reverse; align-items: stretch; }
  .form-note { text-align: left; max-width: none; }
  .form-steps button:not([aria-current]) { gap: 0; padding-right: 6px; font-size: 0; }
  .review { grid-template-columns: 1fr; gap: 2px; }
  .review dd + dt { margin-top: 8px; }
}
@media (max-width: 380px) {
  .picker-text small, .picker-badge { display: none; } /* the name matters most on the smallest phones */
  /* Brand, step arrows, day/night and Menu fit 300px of content (a 320px phone with a scrollbar). */
  .nav-brand { padding-inline: 10px; }
  .nav { gap: 4px; }
  .nav-side { gap: 5px; }
  .nav-steps { padding: 0 3px; gap: 0; }
  .step-count { min-width: 36px; }
  .menu-button span { display: none; }
  .theme-toggle, .menu-button { width: 42px; padding: 0; justify-content: center; }
  .chips { gap: 6px; }
  .chip { min-height: 36px; padding: 0 10px; font-size: .8125rem; }
  .slide-lead { font-size: .9375rem; }
  .about-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px; }
  .about-actions .button { padding: 0 8px; font-size: .875rem; gap: 6px; }
}
/* Short screens (landscape phones): sections may be taller than the screen and simply scroll. */
@media (max-height: 520px) {
  .panel { justify-content: flex-start; }
  .designs-inner { height: auto; min-height: 0; }
  .browser-body { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow-step.is-on { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .wall-row { animation: none; }
}