/* ============================================================================
   TodoDomo — design system.

   THE RULE THIS FILE ENFORCES: not one colour is written anywhere else. Every
   component, page and Telerik control paints from the variables declared here, so
   a theme is a pure override block and adding one touches nothing but this file.
   The palette is selected by <html data-site-theme="..."> (SiteTheme service).

   No web fonts and no CDN: system font stacks only.
   ============================================================================ */

/* ============================================================
   PALETTE — Lumen (default): engineered indigo lit by the warm
   amber of a house at dusk. The whole brand is that pairing.
   ============================================================ */
:root {
    --c-bg: #07070c;
    --c-bg-raise: #0d0d16;
    --c-surface: rgba(255, 255, 255, 0.045);
    --c-surface-2: rgba(255, 255, 255, 0.08);
    --c-surface-solid: #12121c;
    --c-border: rgba(255, 255, 255, 0.10);
    --c-border-strong: rgba(255, 255, 255, 0.20);
    --c-text: #f4f4fa;
    --c-text-dim: rgba(244, 244, 250, 0.60);
    --c-text-faint: rgba(244, 244, 250, 0.34);

    --c-brand: #5B3DF5;
    --c-brand-deep: #3D22C7;
    --c-brand-soft: #9c86ff;
    --c-accent: #FFB020;
    --c-accent-soft: #ffd382;

    --c-glow-brand: rgba(91, 61, 245, 0.40);
    --c-glow-accent: rgba(255, 176, 32, 0.22);
    --c-grid-line: rgba(120, 110, 255, 0.055);

    --c-ok: #3ecf8e;
    --c-ok-text: #9df0c6;
    --c-err: #f2565f;
    --c-err-text: #ff9aa0;

    --c-on-brand: #ffffff;
    --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.65);
    --field-bg: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   SWAPPABLE THEMES — one override block each. Structure, spacing
   and motion are shared; only the palette changes.
   ============================================================ */

html[data-site-theme="midnight"] {
    --c-bg: #060911;
    --c-bg-raise: #0b1020;
    --c-surface: rgba(151, 178, 225, 0.06);
    --c-surface-2: rgba(151, 178, 225, 0.12);
    --c-surface-solid: #101728;
    --c-border: rgba(151, 178, 225, 0.14);
    --c-border-strong: rgba(151, 178, 225, 0.26);
    --c-text: #edf2fb;
    --c-text-dim: rgba(237, 242, 251, 0.62);
    --c-text-faint: rgba(237, 242, 251, 0.36);
    --c-brand: #3B82F6;
    --c-brand-deep: #1D4FD8;
    --c-brand-soft: #93bbff;
    --c-accent: #22D3EE;
    --c-accent-soft: #9beaf6;
    --c-glow-brand: rgba(59, 130, 246, 0.38);
    --c-glow-accent: rgba(34, 211, 238, 0.22);
    --c-grid-line: rgba(91, 157, 255, 0.06);
    --field-bg: rgba(151, 178, 225, 0.09);
}

html[data-site-theme="aurora"] {
    --c-bg: #04100c;
    --c-bg-raise: #081813;
    --c-surface: rgba(160, 230, 205, 0.06);
    --c-surface-2: rgba(160, 230, 205, 0.12);
    --c-surface-solid: #0c1f19;
    --c-border: rgba(160, 230, 205, 0.14);
    --c-border-strong: rgba(160, 230, 205, 0.26);
    --c-text: #eefaf4;
    --c-text-dim: rgba(238, 250, 244, 0.62);
    --c-text-faint: rgba(238, 250, 244, 0.36);
    --c-brand: #14B8A6;
    --c-brand-deep: #0B7F72;
    --c-brand-soft: #7ee0d3;
    --c-accent: #A3E635;
    --c-accent-soft: #d3f58f;
    --c-glow-brand: rgba(20, 184, 166, 0.36);
    --c-glow-accent: rgba(163, 230, 53, 0.20);
    --c-grid-line: rgba(45, 212, 191, 0.06);
    --field-bg: rgba(160, 230, 205, 0.09);
}

html[data-site-theme="ember"] {
    --c-bg: #000000;
    --c-bg-raise: #120a04;
    --c-surface: rgba(255, 175, 100, 0.06);
    --c-surface-2: rgba(255, 175, 100, 0.12);
    --c-surface-solid: #170d05;
    --c-border: rgba(255, 175, 100, 0.15);
    --c-border-strong: rgba(255, 175, 100, 0.28);
    --c-text: #faf4ee;
    --c-text-dim: rgba(250, 244, 238, 0.62);
    --c-text-faint: rgba(250, 244, 238, 0.36);
    --c-brand: #FF7A1A;
    --c-brand-deep: #C4530A;
    --c-brand-soft: #ffb27a;
    --c-accent: #FFC24B;
    --c-accent-soft: #ffe0a4;
    --c-glow-brand: rgba(255, 122, 26, 0.36);
    --c-glow-accent: rgba(255, 194, 75, 0.20);
    --c-grid-line: rgba(255, 140, 26, 0.06);
    --field-bg: rgba(255, 175, 100, 0.09);
}

/* The light palette. Not a washed-out dark theme: the surfaces become paper, the
   glows become soft tints, and the shadows do the work the glows did. A promoter
   reading the site in a bright office gets this; the structural rules that cannot
   be expressed as a colour swap live in the [data-site-theme="daylight"] block
   further down. */
html[data-site-theme="daylight"] {
    --c-bg: #f6f6fb;
    --c-bg-raise: #ffffff;
    --c-surface: rgba(255, 255, 255, 0.86);
    --c-surface-2: #ffffff;
    --c-surface-solid: #ffffff;
    --c-border: rgba(20, 20, 50, 0.10);
    --c-border-strong: rgba(20, 20, 50, 0.20);
    --c-text: #14142b;
    --c-text-dim: rgba(20, 20, 43, 0.68);
    /* On paper the faint tier has to be darker than it is on black, or the
       footnotes fall below a readable contrast against a white background. */
    --c-text-faint: rgba(20, 20, 43, 0.56);
    --c-brand: #4A34D6;
    --c-brand-deep: #33219F;
    --c-brand-soft: #7a63f0;
    --c-accent: #D98200;
    --c-accent-soft: #f0b45c;
    --c-glow-brand: rgba(74, 52, 214, 0.16);
    --c-glow-accent: rgba(217, 130, 0, 0.12);
    --c-grid-line: rgba(74, 52, 214, 0.06);
    --c-ok-text: #147a4d;
    --c-err-text: #b1242c;
    --shadow-card: 0 18px 44px rgba(24, 24, 60, 0.10);
    --shadow-pop: 0 24px 56px rgba(24, 24, 60, 0.16);
    --field-bg: #ffffff;
}

/* Theme-independent tokens: type, rhythm, easing. */
:root {
    --font-body: "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 28px;
    --header-h: 76px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.22, .61, .36, 1);
    --maxw: 1200px;
    --grad-brand: linear-gradient(100deg, var(--c-brand), var(--c-accent), var(--c-brand));
    --grad-btn: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand) 55%, var(--c-accent));
    --shadow-btn: 0 8px 26px var(--c-glow-brand);
}

/* ============================================================
   TELERIK — the wizard and every form control paint from the SAME
   palette. Kendo's theme is driven by custom properties, so the
   whole mapping is this block; nothing per-control is restyled
   unless the default shape (not colour) is wrong for this site.
   ============================================================ */
:root {
    --kendo-color-primary: var(--c-brand);
    --kendo-color-primary-hover: var(--c-brand-deep);
    --kendo-color-primary-active: var(--c-brand-deep);
    --kendo-color-primary-emphasis: var(--c-brand-soft);
    --kendo-color-primary-subtle: var(--c-surface-2);
    --kendo-color-primary-on-subtle: var(--c-text);
    --kendo-color-on-primary: var(--c-on-brand);

    --kendo-color-base: var(--c-surface);
    --kendo-color-base-hover: var(--c-surface-2);
    --kendo-color-base-active: var(--c-surface-2);
    --kendo-color-base-subtle: var(--c-surface);
    --kendo-color-base-emphasis: var(--c-border-strong);
    --kendo-color-on-base: var(--c-text);

    --kendo-color-app-surface: var(--c-surface-solid);
    --kendo-color-on-app-surface: var(--c-text);
    --kendo-color-surface: var(--c-surface);
    --kendo-color-surface-alt: var(--c-surface-solid);
    --kendo-color-subtle: var(--c-text-dim);
    --kendo-color-border: var(--c-border);
    --kendo-color-border-alt: var(--c-border-strong);

    --kendo-color-success: var(--c-ok);
    --kendo-color-error: var(--c-err);
    --kendo-color-info: var(--c-brand);
    --kendo-color-warning: var(--c-accent);

    --kendo-font-family: var(--font-body);
    --kendo-font-size: 1rem;
    --kendo-border-radius-md: 12px;
    --kendo-border-radius-lg: 14px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

/* Horizontal overflow has to be clipped on BOTH html and body: on a phone the
   html element can still pan sideways when only body hides it, and the entrance
   animations translate whole sections up to 80px past the viewport edge. `clip`
   blocks it without creating a scroll container; `hidden` is the fallback. */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; }

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.62;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--c-glow-brand); color: var(--c-text); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.025em; margin: 0; }
img { max-width: 100%; display: block; }
h1:focus, h1:focus-visible { outline: none; } /* FocusOnNavigate targets it */

.gradient-text {
    background: var(--grad-brand);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-slide 7s linear infinite;
    padding-bottom: .06em;
}
@keyframes gradient-slide { to { background-position: 200% center; } }

.mono { font-family: var(--font-mono); }
.center { text-align: center; }

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
.site-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; }

.bg-grid {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background-image:
        linear-gradient(var(--c-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
    background-size: 74px 74px;
    transform: perspective(620px) rotateX(57deg) scale(1.7) translateY(-10%);
    transform-origin: top center;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 18%, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 18%, transparent 72%);
    animation: grid-breathe 10s var(--ease-out) infinite;
}
@keyframes grid-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }

.bg-aurora {
    position: fixed; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(44% 44% at 16% 10%, var(--c-glow-brand), transparent 62%),
        radial-gradient(38% 38% at 84% 18%, var(--c-glow-accent), transparent 62%),
        radial-gradient(50% 50% at 68% 90%, var(--c-glow-brand), transparent 64%);
    filter: blur(52px);
    animation: aurora-drift 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-4%, 3%, 0); } }

/* The particle field is a BACKGROUND layer: it must be out of flow like the two
   above, or it takes a full viewport of space and pushes the header down. */
#tdd-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Reading progress. One transform per frame, nothing else. */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.scroll-progress > i {
    display: block; height: 100%; width: 100%;
    background: var(--grad-btn);
    transform: scaleX(0); transform-origin: 0 50%;
    box-shadow: 0 0 12px var(--c-glow-brand);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 50; height: var(--header-h);
    display: flex; align-items: center; gap: 20px;
    padding: 0 clamp(16px, 4vw, 44px);
    background: color-mix(in srgb, var(--c-bg) 68%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border-bottom: 1px solid var(--c-border);
    transition: box-shadow .3s, background .3s;
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.28); }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--c-text); }
.brand-mark { display: inline-flex; }
.brand-mark svg { display: block; }
.brand-mark.is-compact svg { width: 32px; height: 32px; }
/* The SVG gradient stops read the palette, so the mark retints with the theme. */
.lg-a { stop-color: var(--c-brand); }
.lg-b { stop-color: var(--c-accent); }
.brand-word {
    font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.03em;
    white-space: nowrap;
}
/* The mark settles in once on load — a short rise, not a performance. */
.lg-house { animation: mark-in .6s var(--ease-spring) backwards; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes mark-in { from { opacity: 0; transform: translateY(3px) scale(.86); } to { opacity: 1; transform: none; } }
.brand:hover .lg-house { filter: brightness(1.12); transition: filter .2s; }

.header-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-link {
    color: var(--c-text-dim); font-weight: 600; font-size: .95rem;
    position: relative; padding: 4px 2px; transition: color .18s;
}
.header-link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
    background: var(--grad-btn); transition: right .28s var(--ease-out);
}
.header-link:hover { color: var(--c-text); }
.header-link:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle, .nav-burger { display: none; }
/* The mobile-only language picker (see MainLayout). Desktop shows the copy that
   lives inside .header-nav instead. */
.header-lang-mobile { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    border-radius: 999px; padding: 12px 26px; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
    transition: transform .2s var(--ease-out), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* background-clip is NOT decoration. .btn carries `border: 1px solid transparent`
   (so that .btn-ghost can colour it without shifting anything), and a gradient
   painted across the BORDER box shows through that transparent ring. At the
   rounded ends the browser's antialiasing samples past the end of the gradient
   and clamps to its final stop — which is the amber — so a crescent of orange
   appeared hugging the OUTSIDE of the left curve, on every primary button on the
   site. Confining the paint to the padding box removes it and changes no
   geometry. Do not "simplify" this away; dropping the border instead would make
   primary buttons 2px smaller than the ghost ones standing next to them. */
.btn-primary {
    background: var(--grad-btn); color: var(--c-on-brand); box-shadow: var(--shadow-btn);
    background-clip: padding-box;
}
.btn-primary:hover { box-shadow: 0 12px 34px var(--c-glow-brand); }
.btn-ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-brand); }
.btn-quiet { background: transparent; color: var(--c-text-dim); padding-left: 6px; padding-right: 6px; }
.btn-quiet:hover { color: var(--c-text); }
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-lg { padding: 16px 34px; font-size: 1.06rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* a light sweep crosses the primary button on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 44%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::after { left: 130%; }

.btn-arrow svg { transition: transform .25s var(--ease-out); }
.btn:hover .btn-arrow svg, .btn:hover > svg { transform: translateX(3px); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.site-main { flex: 1; }
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 9vw, 130px) clamp(16px, 4vw, 44px); }
.section-narrow { max-width: 860px; }
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; }
.eyebrow {
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .2em;
    font-size: .76rem; color: var(--c-accent); margin-bottom: 16px;
    display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--c-accent); opacity: .7; }
.eyebrow.center-line::before { display: none; }
.section-title { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 800; margin-bottom: 16px; }
.section-sub { color: var(--c-text-dim); font-size: 1.13rem; }
.section-foot { margin-top: 24px; color: var(--c-text-faint); font-size: .9rem; max-width: 760px; }
/* For a footnote that is actually an objection-killer rather than small print —
   "nothing is drilled, nothing is replaced". The faint tier is right for a
   trademark line and wrong for the sentence that decides a sale. */
.section-foot.strong { color: var(--c-text-dim); font-size: .95rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(24px, 5vw, 66px);
    align-items: center; min-height: calc(100vh - var(--header-h));
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(36px, 6vw, 76px) clamp(16px, 4vw, 44px) clamp(48px, 7vw, 90px);
}
.hero-copy { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.hero-title { font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 800; }
.hero-sub { color: var(--c-text-dim); font-size: clamp(1.05rem, 1.9vw, 1.28rem); margin: 24px 0 34px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 22px; color: var(--c-text-faint); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.hero-note svg { flex: none; color: var(--c-ok); }

.hero-visual { position: relative; }
.hero-img-wrap {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--c-border); box-shadow: var(--shadow-card); aspect-ratio: 3 / 2;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-img-glow {
    position: absolute; inset: -28% -12%; z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, var(--c-glow-brand), transparent 70%);
    filter: blur(44px);
}

/* The floating "scene" chip over the hero image: the house answering a phrase.
   It is the one place the AI/voice promise is shown rather than claimed. */
.hero-chip {
    position: absolute; display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--c-surface-solid) 86%, transparent);
    border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-pop);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); flex: none; box-shadow: 0 0 10px var(--c-ok); }
.hero-chip.one { left: -22px; top: 16%; animation: float-a 7s ease-in-out infinite; }
.hero-chip.two { right: -14px; bottom: 14%; animation: float-b 8.5s ease-in-out infinite; }
@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* ============================================================
   TRUST / MARQUEE STRIP
   ============================================================ */
.strip { padding-top: 0; }
.strip-label { text-align: center; color: var(--c-text-faint); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 20px; }
.strip-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.strip-row li {
    font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700;
    letter-spacing: -.02em; line-height: 1.4; color: var(--c-text-dim);
    transition: color .25s;
}
.strip-row li:hover { color: var(--c-text); }
/* the separator lives on the item, so it wraps with it and never dangles */
.strip-row li + li::before { content: "·"; color: var(--c-text-faint); font-weight: 400; margin: 0 .5em; }

/* ============================================================
   CARDS + GRIDS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }

.card {
    position: relative; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 26px;
    transition: transform .35s var(--ease-out), border-color .3s, background .3s, box-shadow .35s;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.card:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); box-shadow: var(--shadow-card); }
.card-img-wrap { border-radius: 12px; overflow: hidden; margin: -6px -6px 18px; aspect-ratio: 16 / 11; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.card:hover .card-img { transform: scale(1.06); }
.card-num { font-family: var(--font-mono); color: var(--c-accent); font-size: .82rem; letter-spacing: .12em; }
.card-title { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; margin: 10px 0 8px; letter-spacing: -.02em; }
.card-body { color: var(--c-text-dim); font-size: .97rem; }
.card-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-accent); margin-bottom: 16px;
}

/* A "when X → the house does Y" scenario card. The trigger is set in the mono
   face and the accent colour so the eye can scan the six conditions on their own
   before reading any of the outcomes. */
.scene-when {
    display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
    font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--c-accent); line-height: 1.4;
}
.scene-when svg { flex: none; }
.scene .card-body { font-size: .97rem; }

/* signature interaction: a pool of light follows the pointer across every card */
.card::after, .price-card::after, .svc-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), var(--c-glow-brand), transparent 68%);
    opacity: 0; transition: opacity .35s;
}
.card:hover::after, .price-card:hover::after, .svc-card:hover::after { opacity: .55; }

/* ============================================================
   SERVICES — the two things we sell, side by side
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.svc-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    background: var(--c-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.svc-card:hover { transform: translateY(-6px); border-color: var(--c-border-strong); box-shadow: var(--shadow-card); }
.svc-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--c-bg) 2%, transparent 58%);
}
.svc-tag {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 13px; border-radius: 999px; color: var(--c-on-brand); background: var(--c-brand);
    box-shadow: var(--shadow-btn);
}
.svc-body { padding: 4px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.svc-title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.svc-desc { color: var(--c-text-dim); font-size: 1rem; margin-bottom: 18px; }
.svc-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--c-text); }
/* The tick, defined ONCE. .price-list on /start uses the same mark: a second
   copy would be a second chance for the two to drift, and a tick drawn from a
   literal colour could not follow the theme. */
.svc-list li::before, .price-list li::before {
    content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
    background: var(--c-glow-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: var(--c-accent);
}
.svc-body .btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   SPLIT — image on one side, argument on the other
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.split.flip .split-media { order: 2; }
.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); }
/* height:auto is load-bearing. The <img> carries width/height attributes (they
   reserve the box and stop the page jumping while it loads), and the height
   attribute lands as a used height of 1024px — which beats aspect-ratio, since
   aspect-ratio only sizes the box when the other axis is auto. Without this the
   photograph rendered a thousand pixels tall in a 458px column. */
.split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.split-glow { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, var(--c-glow-brand), transparent 70%); filter: blur(40px); }

/* the "them vs us" comparison — the core of the pitch */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.vs-col { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; background: var(--c-surface); }
.vs-col.them { opacity: .82; }
.vs-col.us { border-color: color-mix(in srgb, var(--c-brand) 45%, transparent); box-shadow: 0 0 0 1px var(--c-glow-brand); }
.vs-head { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.vs-col.them .vs-head { color: var(--c-text-faint); }
.vs-col.us .vs-head { color: var(--c-accent); }
.vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vs-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.vs-list li span:first-child { flex: none; width: 18px; text-align: center; font-weight: 800; }
.vs-col.them .vs-list li { color: var(--c-text-dim); }
.vs-col.them .vs-list li span:first-child { color: var(--c-err-text); }
.vs-col.us .vs-list li span:first-child { color: var(--c-ok-text); }

/* ============================================================
   CAPABILITIES — what the home can do
   ============================================================ */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.cap {
    position: relative; overflow: hidden; border-radius: var(--radius);
    border: 1px solid var(--c-border); aspect-ratio: 1 / 1;
    transition: transform .4s var(--ease-out), border-color .3s;
}
.cap:hover { transform: translateY(-6px); border-color: var(--c-border-strong); }
.cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.cap:hover img { transform: scale(1.08); }
.cap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 4%, rgba(0,0,0,.15) 55%, transparent 80%); }
.cap-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; }
.cap-title { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: #fff; }
.cap-sub { font-size: .84rem; color: rgba(255,255,255,.66); margin-top: 3px; }

/* the plain list of everything else, so nothing looks omitted */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
    font-size: .88rem; padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-dim);
    transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease-out);
}
.chip:hover { color: var(--c-text); border-color: var(--c-brand); transform: translateY(-2px); }

/* ============================================================
   PROCESS — a bus line with stations
   ============================================================ */
.process { position: relative; }
.proc-line { position: absolute; left: 0; right: 0; top: 62px; height: 2px; overflow: hidden; }
.proc-line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, var(--c-brand), var(--c-accent), transparent); transform: scaleX(0); transform-origin: 0 50%; }
.proc-line.is-drawn i { transform: scaleX(1); transition: transform 1.6s var(--ease-out); }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; position: relative; }
.proc-step { text-align: left; }
.proc-node {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 700; font-size: .95rem;
    color: var(--c-on-brand); background: var(--grad-btn);
    box-shadow: 0 0 0 6px var(--c-bg), 0 0 22px var(--c-glow-brand);
    margin-bottom: 20px;
}
.proc-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 16px; border: 1px solid var(--c-border); }
.proc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.proc-step:hover .proc-img img { transform: scale(1.06); }
.proc-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }
.proc-body { color: var(--c-text-dim); font-size: .95rem; }

/* ============================================================
   STATS
   ============================================================ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.stat { text-align: center; padding: 26px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-label { color: var(--c-text-dim); font-size: .92rem; margin-top: 10px; }

/* ============================================================
   BANDS — quote pull-out and the closing CTA
   ============================================================ */
.pull {
    border-left: 3px solid var(--c-accent); padding: 6px 0 6px 26px; margin: 34px 0;
    font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.35;
}

.cta-band { text-align: center; position: relative; }
.cta-inner {
    position: relative; overflow: hidden;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 60px);
    background: var(--c-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
}
.cta-inner::before {
    content: ""; position: absolute; inset: -40%;
    background: radial-gradient(38% 38% at 50% 0%, var(--c-glow-brand), transparent 66%);
    pointer-events: none;
}
.cta-inner > * { position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.cta-note { margin-top: 18px; color: var(--c-text-faint); font-size: .88rem; }

/* ============================================================
   PANELS / FORMS
   ============================================================ */
.panel-page { max-width: 520px; margin: 0 auto; padding: clamp(44px, 8vw, 90px) 20px; }
.panel-page.wide { max-width: 900px; }
.panel-card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 38px);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-card);
}
.panel-eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px; }
.panel-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; margin-bottom: 10px; }
.panel-sub { color: var(--c-text-dim); margin-bottom: 26px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label { font-size: .9rem; color: var(--c-text-dim); font-weight: 600; }
.field .hint { font-size: .82rem; color: var(--c-text-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* native controls, for the few places a Telerik control would be overkill */
.field input, .field select, .field textarea {
    background: var(--field-bg); border: 1px solid var(--c-border); border-radius: 12px;
    padding: 12px 14px; color: var(--c-text); font-size: 1rem; font-family: var(--font-body); width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-glow-brand);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-faint); }

.form-msg { border-radius: 12px; padding: 13px 15px; font-size: .93rem; margin: 4px 0 16px; }
.form-msg.err { background: color-mix(in srgb, var(--c-err) 15%, transparent); color: var(--c-err-text); border: 1px solid color-mix(in srgb, var(--c-err) 40%, transparent); }
.form-msg.ok { background: color-mix(in srgb, var(--c-ok) 15%, transparent); color: var(--c-ok-text); border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); }
.form-alt { text-align: center; color: var(--c-text-dim); font-size: .92rem; margin-top: 18px; }
.form-alt a { color: var(--c-brand-soft); font-weight: 600; }

.choice { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--c-text); cursor: pointer; padding: 4px 0; }
.choice input { width: auto; accent-color: var(--c-brand); margin: 0; }

.spinner { width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--c-on-brand) 28%, transparent); border-top-color: var(--c-on-brand); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the reference the visitor gets back after a successful submission */
.ref-box {
    font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .12em; text-align: center;
    background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); border-radius: 14px;
    padding: 20px; margin: 22px 0; color: var(--c-accent);
}

/* ============================================================
   QUOTE WIZARD
   ============================================================ */
.wiz { max-width: 940px; margin: 0 auto; padding: clamp(32px, 6vw, 70px) clamp(16px, 4vw, 24px); }
.wiz-head { text-align: center; margin-bottom: 26px; }
.wiz-card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.wiz-step-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; }
.wiz-step-sub { color: var(--c-text-dim); margin-bottom: 26px; }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.wiz-progress { display: flex; align-items: center; gap: 10px; color: var(--c-text-faint); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; }

/* big tappable answers — the wizard is mostly this control */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.opt {
    position: relative; text-align: left; cursor: pointer;
    border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
    padding: 18px 18px 18px 18px; color: var(--c-text); font-family: inherit; font-size: 1rem;
    transition: border-color .2s, background .2s, transform .2s var(--ease-out), box-shadow .25s;
}
.opt:hover { transform: translateY(-3px); border-color: var(--c-border-strong); background: var(--c-surface-2); }
.opt.on { border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 14%, var(--c-surface)); box-shadow: 0 0 0 1px var(--c-glow-brand); }
.opt-ico { color: var(--c-accent); margin-bottom: 12px; display: block; }
/* Both are <span> (a <div> inside a <button> is invalid), so they need to be
   made block or the label and its explanation run together on one line. */
.opt-title { display: block; font-weight: 700; font-family: var(--font-display); letter-spacing: -.015em; line-height: 1.25; }
.opt-sub { display: block; color: var(--c-text-dim); font-size: .87rem; margin-top: 5px; line-height: 1.4; }
.opt-check {
    position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--c-border-strong); display: grid; place-items: center;
    opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--ease-spring);
}
.opt.on .opt-check { opacity: 1; transform: scale(1); background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }

/* Dense variant for the long multi-select steps: twenty systems as full-size
   tiles would be three screens of scrolling. */
.opt-grid.dense { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.opt.compact { padding: 13px 14px; }
.opt.compact .opt-title { font-size: .95rem; }
.opt.compact .opt-check { top: 10px; right: 10px; width: 17px; height: 17px; }

/* the success badge on the last screen of the wizard and of the contact form */
.ok-badge {
    width: 66px; height: 66px; margin: 4px auto 20px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--c-on-brand); background: var(--grad-btn); box-shadow: 0 10px 30px var(--c-glow-brand);
    animation: ok-pop .55s var(--ease-spring) backwards;
}
@keyframes ok-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }

.terms-row { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0 4px; }
.terms-row label { font-size: .93rem; color: var(--c-text-dim); cursor: pointer; }
.terms-row a { color: var(--c-brand-soft); font-weight: 600; text-decoration: underline; }

/* floors and rooms */
.floor {
    border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 16px;
    background: var(--c-surface); overflow: hidden;
}
.floor-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--c-surface-2); }
.floor-name { font-family: var(--font-display); font-weight: 700; flex: 1; min-width: 0; }
.floor-count { color: var(--c-text-faint); font-size: .85rem; font-family: var(--font-mono); }
.room-list { display: flex; flex-direction: column; }

/* A room is two lines rather than one wide row: identity on top, the numbers
   underneath, each one carrying its own label. A single row of six unlabelled
   spinners is unreadable on a laptop and impossible on a phone. */
.room { display: flex; flex-direction: column; gap: 13px; padding: 15px 16px; border-top: 1px solid var(--c-border); }
.room-top { display: flex; gap: 10px; align-items: center; }
.room-top .rt-type { width: 178px; flex: none; }
.room-top .rt-name { flex: 1; min-width: 0; }
.room-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mini { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Two lines' worth of height whether the label wraps or not ("Presence
   detection" does, "Blinds" does not) — otherwise the controls in a room row sit
   on two different baselines. */
.mini > label {
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-text-faint); line-height: 1.3; min-height: 2.1em;
}
.mini-check { display: flex; align-items: center; height: 38px; }
/* Kendo's default checkbox is a 16px box, which is a small target next to the
   38px-tall spinners beside it and reads as a dot rather than a control.
   The radius has to be pinned back too: --kendo-border-radius-md is 12px for
   this site's inputs, and 12px on a 22px box is a circle — which reads as a
   radio button, i.e. "pick one of these", the opposite of what it does. */
.k-checkbox { border-radius: 5px; border-color: var(--c-border-strong); background-color: var(--field-bg); }
.k-checkbox:checked, .k-checkbox.k-checked { background-color: var(--c-brand); border-color: var(--c-brand); }
.mini-check .k-checkbox { width: 22px; height: 22px; }
.terms-row .k-checkbox { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.icon-btn {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-dim);
    transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--c-text); border-color: var(--c-border-strong); background: var(--c-surface-2); }
.icon-btn.danger:hover { color: var(--c-err-text); border-color: color-mix(in srgb, var(--c-err) 50%, transparent); }

/* the recap the visitor confirms before sending */
.recap { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin: 8px 0 24px; }
.recap-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-size: .94rem; }
.recap-row:last-child { border-bottom: none; }
.recap-row > span { color: var(--c-text-dim); }
.recap-row > b { text-align: right; word-break: break-word; font-weight: 700; }
.recap-total { background: var(--c-surface-2); }
.recap-total > b { color: var(--c-accent); }

/* ============================================================
   TELERIK COMPONENT FIT
   The palette is already mapped above; these rules only fix SHAPE
   where Kendo's default does not match this site's geometry.
   ============================================================ */
.k-stepper { --kendo-color-base: var(--c-surface-2); margin-bottom: 30px; }
.k-stepper .k-step-label { font-family: var(--font-body); font-size: .86rem; }
.k-stepper .k-step-indicator { border-width: 1px; }
.k-input, .k-picker, .k-textarea { border-radius: 12px; }
.k-input-solid, .k-picker-solid { background-color: var(--field-bg); border-color: var(--c-border); color: var(--c-text); }
.k-input-solid:focus-within, .k-picker-solid:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-glow-brand); }
/* The primary Kendo button carries the site's own gradient and glow, so a
   Telerik button and a site button are the same object to a visitor. */
/* Telerik 14 emits `k-button-primary`, NOT `k-button-solid-primary`. This rule
   matched nothing, so the wizard's and the forms' submit buttons were painting
   in Kendo's flat primary colour while every other primary button on the site
   carried the brand gradient — the two sat side by side on /contact looking like
   different systems. Both class names are listed so the rule survives whichever
   one a future Telerik version emits. */
.k-button-solid-primary, .k-button-primary {
    border-radius: 999px; border-color: transparent;
    background: var(--grad-btn); color: var(--c-on-brand); box-shadow: var(--shadow-btn);
    /* Same transparent border, same gradient, same amber crescent — see .btn-primary. */
    background-clip: padding-box;
    transition: transform .2s var(--ease-out), box-shadow .25s;
}
.k-button-solid-primary:hover, .k-button-primary:hover { background: var(--grad-btn); transform: translateY(-2px); box-shadow: 0 12px 34px var(--c-glow-brand); }
.k-button-solid-base { border-radius: 999px; background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
.k-button-solid-base:hover { background: var(--c-surface-2); }
.k-w-full { width: 100%; }
.k-animation-container, .k-popup { box-shadow: var(--shadow-pop); }
.k-form .k-form-field { margin-bottom: 16px; }
.k-numerictextbox { max-width: 100%; }
.k-invalid-msg, .k-form-error { color: var(--c-err-text); }

/* ============================================================
   LANGUAGE + THEME PICKERS
   ============================================================ */
.site-lang, .theme-picker { position: relative; }
.site-lang > summary, .theme-picker > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: 1px solid var(--c-border); border-radius: 999px;
    color: var(--c-text-dim); font-size: .86rem; font-weight: 600; transition: color .2s, border-color .2s;
}
.site-lang > summary:hover, .theme-picker > summary:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.site-lang > summary::-webkit-details-marker, .theme-picker > summary::-webkit-details-marker { display: none; }
.site-lang-menu, .theme-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 14px;
    padding: 6px; min-width: 170px; box-shadow: var(--shadow-pop);
}
.site-lang-item, .theme-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
    color: var(--c-text-dim); font-size: .92rem; transition: background .15s, color .15s;
}
.site-lang-item:hover, .theme-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.site-lang-item.active, .theme-item.active { color: var(--c-brand-soft); font-weight: 700; }
.theme-menu-title { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); padding: 8px 12px 6px; }
.theme-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid var(--c-border-strong); }
/* The swatches are the ONLY literal colours in this file outside the palette
   blocks: a swatch must show the theme it switches TO, which by definition is not
   the palette currently in effect. */
.theme-dot.lumen { background: linear-gradient(135deg, #5B3DF5, #FFB020); }
.theme-dot.midnight { background: linear-gradient(135deg, #3B82F6, #22D3EE); }
.theme-dot.aurora { background: linear-gradient(135deg, #14B8A6, #A3E635); }
.theme-dot.ember { background: linear-gradient(135deg, #FF7A1A, #FFC24B); }
.theme-dot.daylight { background: linear-gradient(135deg, #f6f6fb 48%, #4A34D6); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--c-border); margin-top: 40px; background: color-mix(in srgb, var(--c-bg-raise) 60%, transparent); }
.footer-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 56px clamp(16px, 4vw, 44px) 34px;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-claim { color: var(--c-text-dim); font-size: .95rem; max-width: 320px; margin: 0 0 14px; }
.footer-mail { color: var(--c-brand-soft); font-weight: 600; font-size: .95rem; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: 3px; }
.footer-col a { color: var(--c-text-dim); font-size: .94rem; transition: color .18s; }
.footer-col a:hover { color: var(--c-text); }
.footer-bar {
    max-width: var(--maxw); margin: 0 auto; padding: 20px clamp(16px, 4vw, 44px) 34px;
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    color: var(--c-text-faint); font-size: .82rem;
}
.footer-tm { max-width: 620px; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
/* Obfuscated company name — assembled from two pseudo-element fragments so the
   name never exists as one indexable string in the HTML, the DOM or this file.
   Splitting it here is the whole point: do not join these back together.
   nowrap keeps the two halves on the same line at any width. */
.co-name { font-weight: 700; color: var(--c-text); white-space: nowrap; }
.co-name::before { content: "EB"; }
.co-name::after { content: "OX3"; }
.legal-entity { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--c-border); color: var(--c-text-faint); font-size: .88rem; }
.legal-entity .co-name { color: var(--c-text-dim); }
.footer-entity { color: var(--c-text-faint); }
.footer-entity .co-name { color: var(--c-text-faint); font-weight: 600; }
.legal-page { max-width: 800px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 20px; }
.legal-title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; margin-bottom: 10px; }
.legal-meta { color: var(--c-text-faint); font-size: .88rem; margin-bottom: 30px; }
.legal-page h2 { font-size: 1.28rem; margin: 32px 0 10px; }
.legal-page p, .legal-page li { color: var(--c-text-dim); }
.legal-page a { color: var(--c-brand-soft); }

/* ---------- long-form legal documents ----------
   These are read, not skimmed: a narrower measure, more air between clauses, and
   enough hierarchy that a reader can find clause 17.4 again. */
.legal-doc { max-width: 860px; }
.legal-doc h2 {
    font-size: 1.22rem; margin: 40px 0 12px; padding-top: 18px;
    border-top: 1px solid var(--c-border); color: var(--c-text);
}
.legal-doc h3 { font-size: 1.02rem; margin: 24px 0 8px; color: var(--c-text); }
.legal-doc p, .legal-doc li, .legal-doc dd { font-size: .97rem; line-height: 1.72; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { color: var(--c-text); font-weight: 700; }
.legal-doc code {
    font-family: var(--font-mono); font-size: .86em; padding: 2px 6px; border-radius: 6px;
    background: var(--c-surface-2); color: var(--c-accent-soft);
}
/* A numbered sub-clause hangs its number in the margin so the numbering column
   reads as a column instead of disappearing into the prose. */
.legal-doc .legal-num { padding-left: 2px; }
/* The three clauses that actually carry the risk, and the consumer carve-out,
   are marked so neither a reader nor a future editor can miss them. */
.legal-doc .legal-warn {
    border-left: 3px solid var(--c-accent); padding: 12px 0 12px 16px; margin: 18px 0;
    background: linear-gradient(90deg, var(--c-glow-accent), transparent 60%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-doc .legal-good {
    border-left: 3px solid var(--c-ok); padding: 12px 0 12px 16px; margin: 18px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c-ok) 12%, transparent), transparent 60%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* definitions */
.legal-def { margin: 0 0 18px; }
.legal-def dt {
    font-weight: 700; color: var(--c-text); font-family: var(--font-display);
    margin-top: 12px; letter-spacing: -.01em;
}
.legal-def dd { margin: 2px 0 0; padding-left: 0; color: var(--c-text-dim); }

/* tables (legal bases, retention, cookies) */
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border: 1px solid var(--c-border); vertical-align: top; }
.legal-table th { background: var(--c-surface-2); color: var(--c-text); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.legal-table td { color: var(--c-text-dim); }
/* a legal table must never force the page to scroll sideways on a phone */
.legal-doc .legal-table { display: block; overflow-x: auto; white-space: normal; }

/* ---------- the multilingual language declaration ---------- */
.legal-lang {
    border: 1px solid var(--c-border-strong); border-radius: var(--radius);
    background: var(--c-surface); padding: 20px 22px; margin: 26px 0 34px;
}
.legal-lang-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-accent);
}
.legal-lang-line {
    font-size: .88rem; line-height: 1.6; color: var(--c-text-dim);
    margin: 0 0 11px; padding-bottom: 11px; border-bottom: 1px solid var(--c-border);
}
.legal-lang-line:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.ln-lang {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; font-weight: 700;
    color: var(--c-brand-soft); background: var(--c-surface-2);
    border-radius: 5px; padding: 2px 7px; margin-right: 10px; vertical-align: 1px;
}

@media (max-width: 620px) {
    .legal-doc h2 { font-size: 1.1rem; }
    .legal-lang { padding: 16px 15px; }
    .legal-table th, .legal-table td { padding: 9px 10px; }
}

/* ============================================================
   ENTRANCE ANIMATIONS
   ============================================================ */
/* Slide-in elements are hidden from the FIRST paint: browsers paint progressively
   before end-of-body scripts run, so JS-only hiding flashes the content once
   before the animation. The <head> sets .js-on pre-paint; without JS everything
   simply shows. The animator restores opacity inline when it finishes. */
html.js-on [data-slide] { opacity: 0; }

[data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
html:not(.js-on) [data-reveal] { opacity: 1; transform: none; }

/* hero: the copy rises, then the photograph lights up like a house at dusk */
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lights-on { 0% { filter: brightness(.2) saturate(.5); } 66% { filter: brightness(1.08) saturate(1.06); } 100% { filter: brightness(1) saturate(1); } }
@keyframes glow-bloom { from { opacity: 0; } to { opacity: 1; } }
.hero-eyebrow, .hero-title, .hero-sub, .hero-actions, .hero-note { animation: rise-in .75s var(--ease-out) backwards; }
.hero-title { animation-delay: .08s; }
.hero-sub { animation-delay: .17s; }
.hero-actions { animation-delay: .26s; }
.hero-note { animation-delay: .36s; }
.hero-img { animation: lights-on 1.7s ease-out .3s backwards; }
.hero-img-glow { animation: glow-bloom 2s ease-out .5s backwards; }
.hero-chip { animation-delay: .9s; animation-fill-mode: backwards; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Grid/flex children default to min-width:auto, which lets long content force a
   track wider than a phone screen — the other horizontal-scroll trigger. */
.hero > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .svc-grid > *, .cap-grid > *,
.proc-grid > *, .stat-row > *, .vs > *, .split > *, .footer-inner > * { min-width: 0; }

/* The four process cards carry a paragraph each and need ~280px of text apiece.
   Between 1000px and 1100px they were still four across at 221px — measured, not
   guessed. They pair up earlier than the picture and number grids, which are
   perfectly legible at four across right down to 1000px. */
@media (max-width: 1100px) {
    .proc-grid { grid-template-columns: repeat(2, 1fr); }
    /* Same arithmetic for the three-across text cards: at 1024px a .grid-3 card
       is 300px wide, and once its own 26px padding comes off, only 247px of that
       is text. The audit flags it, correctly. Two across leaves an orphan on the
       second row, which is a far smaller price than unreadable columns. */
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
    .proc-line { display: none; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
    .hero { grid-template-columns: 1fr; text-align: center; min-height: auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-note { justify-content: center; }
    .hero-visual { max-width: 520px; margin: 10px auto 0; }
    .hero-chip.one { left: 4px; }
    .hero-chip.two { right: 4px; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .svc-grid { grid-template-columns: 1fr; }
    .split, .split.flip { grid-template-columns: 1fr; }
    .split.flip .split-media { order: 0; }
    .vs { grid-template-columns: 1fr; }
    .room-nums { grid-template-columns: repeat(3, 1fr); }
    .room-top { flex-wrap: wrap; }
    .room-top .rt-type { width: 100%; }
}

@media (max-width: 860px) {
    /* ---- language picker: promoted OUT of the collapsed menu ----
       It sits in the bar itself, left of the burger, at a full 44px tap target
       and with the current language spelled out. Six languages are no use to a
       visitor who cannot find the switch. */
    .header-lang-mobile { display: inline-flex; margin-left: auto; }
    .header-nav .site-lang { display: none; }          /* the desktop copy */
    .header-lang-mobile > .site-lang > summary {
        min-height: 44px; padding: 8px 14px; gap: 8px;
        font-size: .95rem; color: var(--c-text);
        border-color: var(--c-border-strong); background: var(--c-surface);
    }
    .header-lang-mobile > .site-lang > summary svg { width: 17px; height: 17px; color: var(--c-accent); }
    /* This one is a real popover — it is not inside the burger panel. */
    .header-lang-mobile .site-lang-menu {
        position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px;
        background: var(--c-surface-solid); border: 1px solid var(--c-border);
        border-radius: 14px; padding: 6px; box-shadow: var(--shadow-pop); z-index: 70;
    }
    .header-lang-mobile .site-lang-item { padding: 12px 14px; font-size: 1rem; }

    /* the nav collapses behind a hamburger — CSS only, no circuit needed */
    .nav-burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        margin-left: 10px; width: 44px; height: 44px; padding: 11px; cursor: pointer;
        border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface);
    }
    .nav-burger span { display: block; height: 2px; width: 100%; background: var(--c-text); border-radius: 2px; transition: transform .22s, opacity .22s; }
    .header-nav {
        position: absolute; top: 100%; left: 0; right: 0; margin: 0;
        display: none; flex-direction: column; align-items: stretch; gap: 4px;
        padding: 14px clamp(16px, 4vw, 44px) 22px;
        background: color-mix(in srgb, var(--c-bg) 94%, transparent);
        backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
        border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-card);
    }
    #nav-toggle:checked ~ .header-nav { display: flex; }
    .header-link { display: block; padding: 12px 4px; font-size: 1.05rem; }
    .header-link::after { display: none; }
    .header-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
    .header-actions .btn { width: 100%; }
    .site-lang, .theme-picker { align-self: stretch; margin: 4px 0; }
    .site-lang > summary, .theme-picker > summary { width: max-content; }
    /* Inside the burger panel the menus flow inline instead of as an off-screen
       popover. Scoped to .header-nav so the promoted mobile language picker,
       which lives in the bar and not in the panel, keeps its real dropdown. */
    .header-nav .site-lang-menu, .header-nav .theme-menu { position: static; min-width: 0; margin-top: 6px; padding: 4px 0 0; background: transparent; border: none; box-shadow: none; }
    #nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    #nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- TEXT grids go single-column early ----
   A card full of prose needs roughly 300px before it starts wrapping every three
   words. .grid-2 previously had NO collapse rule at all, so /why-us rendered four
   paragraphs in ~180px columns on a phone. These four carry body copy, so they
   drop to one column while there is still room to read them; the picture grids
   (.cap-grid) and the number grid (.stat-row) stay 2-up, because a square image
   and a two-digit figure are perfectly happy narrow. */
@media (max-width: 760px) {
    .grid-2, .grid-3, .grid-4, .proc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .grid-3, .grid-4, .cap-grid, .proc-grid, .stat-row { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .room-nums { grid-template-columns: repeat(2, 1fr); }
    .wiz-nav { flex-wrap: wrap; }
    .wiz-progress { order: 3; width: 100%; justify-content: center; }
}

/* ============================================================
   LIGHT THEME — the rules a colour swap cannot express
   ============================================================ */
html[data-site-theme="daylight"] .svc-media::after { background: linear-gradient(to top, var(--c-bg) 2%, transparent 58%); }
/* glass over paper needs to be opaque, or the grid shows through the text */
html[data-site-theme="daylight"] .card,
html[data-site-theme="daylight"] .svc-card,
html[data-site-theme="daylight"] .panel-card,
html[data-site-theme="daylight"] .wiz-card,
html[data-site-theme="daylight"] .cta-inner,
html[data-site-theme="daylight"] .stat,
html[data-site-theme="daylight"] .opt,
html[data-site-theme="daylight"] .floor,
html[data-site-theme="daylight"] .vs-col { background: var(--c-bg-raise); }
html[data-site-theme="daylight"] .site-header { background: color-mix(in srgb, var(--c-bg) 86%, transparent); }
/* the pointer spotlight would be a grey smear on paper — it belongs to the dark themes */
html[data-site-theme="daylight"] .card::after,
html[data-site-theme="daylight"] .svc-card::after { display: none; }
html[data-site-theme="daylight"] .proc-node { box-shadow: 0 0 0 6px var(--c-bg), 0 8px 20px var(--c-glow-brand); }
html[data-site-theme="daylight"] .bg-aurora { opacity: .55; }
html[data-site-theme="daylight"] .site-footer { background: var(--c-bg-raise); }
html[data-site-theme="daylight"] .cap::after { background: linear-gradient(to top, rgba(10,10,30,.85) 4%, rgba(10,10,30,.12) 55%, transparent 80%); }

/* ============================================================
   REDUCED MOTION
   Only the AMBIENT layers stop. Content entrances keep playing:
   Windows' "show animations = off" and RDP sessions both report
   reduced motion, and hiding the page's content behind an
   animation that never runs is the one unacceptable outcome.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .bg-grid, .bg-aurora { animation: none; }
    .hero-chip.one, .hero-chip.two { animation: none; }
    .gradient-text { animation: none; }
}

/* ============================================================
   THE STARTER LANDING PAGE (/start)
   Everything below is used only by PgStarter and its UcStarter*
   components. Same rule as the rest of the file: not one colour
   is written here, every value resolves from the palette block
   at the top, so /start repaints with every theme like the rest
   of the site.
   ============================================================ */

/* ---------- "pick the one that annoys you" cards ----------
   A .card that is also a link into the section answering it. The arrow is the
   only affordance that distinguishes it from the page's other cards, so it
   moves on hover — a link that looks exactly like a static card is a link
   nobody clicks. */
.card.pick { display: flex; flex-direction: column; cursor: pointer; }
.card.pick .card-body { flex: 1; }
.pick-go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    color: var(--c-brand-soft); font-weight: 700; font-size: .92rem;
}
.pick-go svg { transition: transform .25s var(--ease-out); }
.card.pick:hover .pick-go svg { transform: translateX(4px); }

/* ---------- the 499 package ---------- */
.price-card {
    position: relative; overflow: hidden; margin-top: 46px;
    border: 1px solid color-mix(in srgb, var(--c-brand) 45%, transparent);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--c-glow-brand), var(--shadow-card);
    padding: clamp(28px, 5vw, 52px);
    transition: border-color .3s, box-shadow .35s;
}
.price-card > * { position: relative; }
.price-card:hover { border-color: var(--c-brand); }
.price-head { text-align: center; margin-bottom: 30px; }
.price-fig {
    font-family: var(--font-display); font-weight: 800; line-height: 1;
    font-size: clamp(3rem, 9vw, 4.6rem); letter-spacing: -.04em;
}
.price-tax { color: var(--c-text-faint); font-size: .92rem; margin-top: 12px; }
.price-monthly { color: var(--c-text-dim); font-size: .98rem; font-weight: 600; margin-top: 6px; }
.price-what {
    text-align: center; color: var(--c-text); font-size: 1.06rem;
    max-width: 620px; margin: 0 auto 28px;
}

/* auto-fit rather than a fixed column count: these are short lines, so they pair
   up when there is room and stack when there is not, with no breakpoint of their
   own to keep in step with the rest of the file. */
.price-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 13px 26px;
}
/* The ::before tick comes from the shared .svc-list rule above — see it there. */
.price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; color: var(--c-text); }
.price-cta { text-align: center; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--c-border); }
.price-small { margin: 16px 0 0; color: var(--c-text-faint); font-size: .88rem; }

/* ---------- questions ----------
   Native <details>: the page is statically rendered and an accordion is browser
   behaviour, so this needs no component, no circuit and no script. */
.faq { margin-top: 42px; border-top: 1px solid var(--c-border); }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 20px 4px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: 1.08rem; font-weight: 700;
    letter-spacing: -.015em; color: var(--c-text); transition: color .2s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--c-brand-soft); }
.faq-chev { flex: none; color: var(--c-accent); transition: transform .25s var(--ease-out); }
.faq-item[open] > summary .faq-chev { transform: rotate(180deg); }
.faq-item > p { margin: -4px 0 22px; padding-right: 34px; color: var(--c-text-dim); font-size: .99rem; }

/* ---------- the call-back form ----------
   It lives inside .cta-band, which centres everything — right for the heading and
   wrong for a column of labelled fields. */
.call-inner { text-align: center; }
.call-form { text-align: left; max-width: 620px; margin: 34px auto 0; }
.call-form .cta-note { text-align: center; }
/* The band is already a bordered, blurred surface: a second border around the
   options inside it would read as a box in a box. */
.call-form .opt { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- light theme ----------
   Glass over paper has to become opaque, exactly as for .card and .cta-inner. */
html[data-site-theme="daylight"] .price-card { background: var(--c-bg-raise); }
html[data-site-theme="daylight"] .price-card::after { display: none; }

/* ---------- narrow ----------
   .price-list manages itself (auto-fit). These are the two places on this page
   where prose would otherwise be squeezed: the answer text indents for a chevron
   it no longer needs room for, and the package padding gives it back. */
@media (max-width: 620px) {
    .faq-item > p { padding-right: 0; }
    .faq-item > summary { font-size: 1rem; padding: 17px 2px; }
}

/* ============================================================
   THE SHORT LANDING PAGE (/start)
   The long build lives on at /start-v1 and uses the block above;
   this block is what the advertising page itself needs.
   ============================================================ */

/* ---------- stripped-down chrome ----------
   LandingLayout keeps the shell and throws away the navigation: the only
   controls are the language picker and one button that scrolls DOWN. */
.landing-header { justify-content: space-between; }
.landing-header .brand { cursor: default; }
.landing-header-right { display: flex; align-items: center; gap: 12px; }

.landing-footer { margin-top: 0; }
.landing-footer-bar { justify-content: center; text-align: center; }
.landing-footer-links { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.landing-footer-links a { color: var(--c-text-dim); }
.landing-footer-links a:hover { color: var(--c-text); }

/* The hero sits directly under a much shorter header, so it needs less room
   above it than the one on a page with a full navigation bar. */
.landing-hero { padding-top: clamp(28px, 5vw, 64px); }

/* ---------- what it does: the checklist, high on the page ----------
   auto-fit rather than a fixed column count, so it is three columns on a desk,
   two on a tablet and one on a phone with no breakpoint of its own. Each item is
   a single short line, which is why 240px is comfortable here where a prose card
   would need 300. */
.landing-what { padding-bottom: clamp(40px, 6vw, 80px); }
.bul-grid {
    list-style: none; margin: 44px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px;
}
.bul-grid li {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: .98rem; color: var(--c-text);
    padding: 9px 0; border-bottom: 1px solid var(--c-border);
}
.bul-grid li::before {
    content: ""; flex: none; width: 17px; height: 17px; margin-top: 3px;
    background: var(--c-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section-foot.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- renting, as one band ---------- */
.rent-band {
    display: flex; gap: 20px; align-items: flex-start;
    border: 1px solid color-mix(in srgb, var(--c-brand) 38%, transparent);
    border-radius: var(--radius); background: var(--c-surface);
    padding: clamp(20px, 3vw, 30px);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rent-ico {
    flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
    background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-accent);
}
.rent-title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; margin-bottom: 8px; }
.rent-body { color: var(--c-text-dim); font-size: .98rem; margin: 0; }

html[data-site-theme="daylight"] .rent-band { background: var(--c-bg-raise); }

@media (max-width: 620px) {
    .rent-band { flex-direction: column; gap: 14px; }
    .landing-header-right { gap: 8px; }
}

/* ---------- tighter vertical rhythm ----------
   The site's section padding is built for pages somebody is reading their way
   through; stacked on a short landing page it leaves up to 260px of empty
   ground between one argument and the next, which reads as the page having
   finished. Scoped to .landing-main so no other page is touched. */
.landing-main .section { padding-top: clamp(40px, 5.5vw, 82px); padding-bottom: clamp(40px, 5.5vw, 82px); }
.landing-main .hero { padding-bottom: clamp(24px, 4vw, 56px); }

/* ---------- the header CTA on a phone ----------
   The long label plus the mark, the word and the language picker overflowed a
   390px header. Because html/body are overflow-x:clip the button was simply
   sliced off with nothing to reveal it, so this is a silent break rather than a
   visible one: keep it measured, not eyeballed. */
.landing-cta-short { display: none; }
@media (max-width: 620px) {
    .landing-cta-full { display: none; }
    .landing-cta-short { display: inline-flex; }
    /* The mark alone carries the brand at this width; the word is what makes the
       row too wide. */
    .landing-header .brand-word { display: none; }
    .landing-header { padding-left: 14px; padding-right: 14px; }
    .landing-header-right { gap: 8px; }
    .landing-cta-short { padding: 8px 14px; font-size: .84rem; }
}

/* ============================================================
   THE COUNTRY PICKER ON TOUCH — a backdrop-filter trap
   ============================================================
   A `backdrop-filter` makes an element the CONTAINING BLOCK for any
   position:fixed descendant. Telerik's adaptive country picker is a
   full-screen action sheet (position:fixed, inset:0) rendered INSIDE the form
   card — so on a phone it was being sized and positioned against the card
   instead of the screen: 348x1244 on a 390x844 device, its top 188px above the
   viewport and its bottom 400px below it. The list was unusable and the filter
   box was off-screen entirely.

   Measured, not guessed: Telerik switches to the action sheet at <= 768px and
   uses an ordinary popup from 800px (tools/dropprobe.py). The cut-off here is
   820px — above the switch with room to spare, and far below any desktop — so
   the glass survives everywhere it is actually visible. On a phone these cards
   fill the screen and there is nothing behind them to blur anyway.

   If a Telerik upgrade moves that breakpoint, dropprobe.py is what catches it. */
@media (max-width: 820px) {
    .panel-card,          /* /contact */
    .wiz-card,            /* /quote, step 7 */
    .cta-inner {          /* /start, the call-back form */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* "from" above the figure — small, muted, and close to the number so the two
   read as one price rather than as a stray word. */
.price-from {
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--c-text-faint); margin-bottom: 4px;
}

/* ============================================================
   FAILING OUT LOUD — the Blazor error and reconnect UI
   ============================================================
   Both elements live in App.razor and are driven by Blazor itself: it sets
   `display` on #blazor-error-ui, and puts .components-reconnect-show /
   -failed / -rejected on the modal. Without this block they would be plain
   unstyled boxes; without the MARKUP they do not exist at all, which is how a
   dead circuit used to look identical to a working page. */

#blazor-error-ui {
    display: none;                       /* Blazor sets display:block */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 14px clamp(16px, 4vw, 44px);
    background: var(--c-err); color: #fff;
    font-size: .95rem; text-align: center;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .4);
}
#blazor-error-ui .reload {
    color: #fff; font-weight: 700; text-decoration: underline; margin-left: 10px;
}

/* The reconnect modal is hidden until Blazor adds one of its classes. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 1001;
    background: color-mix(in srgb, var(--c-bg) 78%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reconnect-card {
    background: var(--c-surface-solid); border: 1px solid var(--c-border-strong);
    border-radius: var(--radius); padding: 26px 30px; text-align: center;
    box-shadow: var(--shadow-pop); color: var(--c-text); max-width: 360px;
}
.reconnect-trying { display: flex; align-items: center; gap: 12px; justify-content: center; }
.reconnect-trying .spinner {
    border-color: color-mix(in srgb, var(--c-text) 25%, transparent);
    border-top-color: var(--c-brand);
}
.reconnect-lost { display: none; }
.reconnect-lost p { color: var(--c-text-dim); margin: 0 0 16px; }

/* Once reconnection has actually failed, stop pretending and offer the reload. */
.components-reconnect-failed .reconnect-trying,
.components-reconnect-rejected .reconnect-trying { display: none; }
.components-reconnect-failed .reconnect-lost,
.components-reconnect-rejected .reconnect-lost { display: block; }

/* ============================================================
   /hola — the MAILBOX flyer's landing page (PgHola, UcHolaHero,
   UcHolaHooks, UcFloorPlan). The drawing is the printed flyer's own
   (tools/makemailflyer.py): same geometry, colours from the palette.
   ============================================================ */
.hola-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.hola-title .gradient-text { display: block; margin-top: .18em; font-size: .62em; font-weight: 700; line-height: 1.12; }

.hola-plan-card {
    position: relative; border-radius: var(--radius-lg); padding: clamp(14px, 2.4vw, 26px);
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.floorplan { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.floorplan .fp-floor { fill: var(--c-bg-raise); }
.floorplan .fp-wall { fill: none; stroke: var(--c-brand-soft); stroke-width: 3.2; stroke-linecap: square; }
.floorplan .fp-rad rect { fill: none; stroke: var(--c-brand-soft); stroke-width: 1.6; opacity: .8; }
.floorplan .fp-valve circle { fill: var(--c-accent); }
.floorplan .fp-room { font-size: 13px; font-weight: 600; fill: var(--c-text-dim); }
.floorplan .fp-tiny { font-size: 10.5px; font-style: italic; fill: var(--c-text-faint); }
.floorplan .fp-note { font-size: 10px; fill: var(--c-text-faint); }
.floorplan .fp-old rect, .floorplan .fp-old circle { fill: none; stroke: var(--c-text-faint); stroke-width: 1.5; }
.floorplan .fp-strike { stroke: var(--c-err-text); stroke-width: 3; stroke-linecap: round; }
.floorplan .fp-pill rect { fill: var(--c-accent); }
.floorplan .fp-pill text { font-family: var(--font-display); font-size: 17px; font-weight: 800; fill: var(--c-bg-raise); }
.floorplan .fp-pill.cold rect { fill: var(--c-text-faint); }
.floorplan .gar-bld { fill: var(--c-bg-raise); stroke: var(--c-brand-soft); stroke-width: 2.6; stroke-linejoin: round; }
.floorplan .gar-win { fill: var(--c-glow-brand); stroke: var(--c-border-strong); stroke-width: 1.2; }
.floorplan .gar-door { fill: var(--c-glow-accent); stroke: var(--c-accent); stroke-width: 2.2; }
.floorplan .gar-slats { stroke: var(--c-accent); stroke-width: 1.3; }
.floorplan .gar-ground { stroke: var(--c-brand-soft); stroke-width: 2.6; }
.floorplan .gar-arrow { fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.floorplan .car path { fill: none; stroke: var(--c-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.floorplan .car circle { fill: var(--c-bg-raise); stroke: var(--c-text); stroke-width: 2.4; }
.floorplan .pin path { fill: var(--c-brand); }
.floorplan .pin circle { fill: var(--c-bg-raise); }
.floorplan .gps-ring { fill: none; stroke: var(--c-brand-soft); stroke-dasharray: 3 4; transform-box: fill-box; transform-origin: center; }
.floorplan .gps-ring.r1 { stroke-width: 1.8; opacity: .9; }
.floorplan .gps-ring.r2 { stroke-width: 1.4; opacity: .6; }
.floorplan .gps-ring.r3 { stroke-width: 1.1; opacity: .35; }
.floorplan .gps-lbl { font-size: 11px; font-weight: 700; fill: var(--c-brand-soft); }

/* Motion, used once: each room "settles" to its own temperature, then the GPS
   ring breathes. Nothing loops fast, and all of it stops for reduced motion. */
.floorplan .fp-pill { animation: fp-settle .7s var(--ease-out) backwards; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.floorplan .gps-ring.r1 { animation: fp-gps 3.2s ease-in-out infinite; }
.floorplan .gps-ring.r2 { animation: fp-gps 3.2s ease-in-out .5s infinite; }
@keyframes fp-settle { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fp-gps { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .floorplan .fp-pill, .floorplan .gps-ring { animation: none !important; }
}
.hola-chips .chip { cursor: default; }
.hola-chips .chip:hover { transform: none; color: var(--c-text-dim); border-color: var(--c-border); }
/* The drawing is wide and short, unlike the photo the hero chips were placed
   for: over it they hid a temperature and the garage label. Here they sit on
   the card's top and bottom edges instead, and on a phone (where they would
   cover the whole drawing) the headline already says the same, so they go. */
.hola-hero .hero-chip.one { left: 5%; top: -36px; }
.hola-hero .hero-chip.two { right: 5%; bottom: -36px; top: auto; }
@media (max-width: 620px) {
    .hola-hero .hero-chip { display: none; }
    .hola-plan-card { padding: 8px; border-radius: var(--radius); }
}