/* ============================================================
   PZ Digital — design tokens
   ============================================================ */
:root {
    /* The design is dark only: one palette, no light variant to keep in sync. */
    color-scheme: dark;

    /* Electric lime on warm charcoal; dark green ink on light surfaces. */
    --acc: #C2EF48;
    --acc-ink: var(--acc);
    --acc-soft: #FF9985;
    --on-accent: #0B0C0E;

    --bg: #11140F;
    --bg-alt: #1A1E17;
    --panel: #191D16;
    --scene-glow: #29351B;
    --scene-layer: #3D4930;
    --acc-shade: #8BAD31;
    --shadow: #0005;
    --header-bg: rgba(17, 20, 15, .88);
    --hover-surface: #21271B;

    --ink: #F0F0E6;
    --ink-2: #C4C8BA;
    --ink-3: #959D8D;

    /* The inverted band: pricing, marquee. */
    --light: #E9E5DB;
    --light-ink: #14151A;
    --light-ink-2: #3F3E39;
    --light-ink-3: #55534D;

    /* `--line*` are decorative rules; `--line-strong` / `--light-line-strong`
       draw control boundaries and so clear 3:1 against their background. */
    --line: rgba(233, 229, 219, .14);
    --line-soft: rgba(233, 229, 219, .1);
    --line-strong: rgba(233, 229, 219, .42);
    --light-line: rgba(20, 21, 26, .14);
    --light-line-strong: rgba(20, 21, 26, .5);

    --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --shell: 1440px;
    --pad-x: clamp(16px, 3.4vw, 44px);
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Shared controls are upright; the monogram retains its own slant. */
    --skew: 0deg;

    /* Minimum comfortable touch target. */
    --tap: 48px;
    /* Height of the sticky header; drives `scroll-padding-top`. */
    --header-h: 81px;
}

/* The page is edge-to-edge (`viewport-fit=cover`), so the gutter has to clear
   the notch and the rounded corners in landscape. `env()` is 0 elsewhere. */
@supports (padding: max(0px)) {
    :root {
        --pad-x: max(clamp(16px, 3.4vw, 44px), env(safe-area-inset-left), env(safe-area-inset-right));
    }
}

/* 3.4vw leaves a 16px gutter on a phone, which sets every band almost flush
   with the screen edge. Below the tablet breakpoint the gutter scales off the
   viewport instead, so the copy keeps a margin the eye can rest in. */
@media (max-width: 45rem) {
    :root {
        --pad-x: max(clamp(18px, 5.2vw, 24px), env(safe-area-inset-left), env(safe-area-inset-right));
    }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* keep anchor targets clear of the sticky header */
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
    /* iOS Safari inflates text in landscape unless this is pinned. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
}

body {
    font-family: var(--sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* `clip` rather than `hidden`: `hidden` would turn this into a scroll
       container and break the scroll-driven animations below. */
    overflow-x: clip;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    color: var(--acc);
}

::selection {
    background: var(--acc);
    color: var(--on-accent);
}

input, textarea, select, button {
    font-family: inherit;
}

button, a, input, select, textarea { touch-action: manipulation; }
main { overflow-wrap: anywhere; }

/* The focus ring uses dark accent ink on the light pricing surface. */
:focus-visible {
    outline: 3px solid var(--acc-ink);
    outline-offset: 3px;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip-link {
    min-height: var(--tap);
    position: absolute;
    left: var(--pad-x);
    top: 8px;
    z-index: 80;
    background: var(--ink);
    color: var(--bg);
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: translateY(calc(-100% - 16px));
    transition: transform .2s var(--ease);
}

.skip-link:focus-visible {
    transform: none;
    color: var(--bg);
}

/* Visually hidden, still announced. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* FocusOnNavigate targets the <h1>; it should not draw a ring. */
h1:focus, h1:focus-visible {
    outline: none;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.shell {
    max-width: var(--shell);
    margin: 0 auto;
}

.section {
    padding: clamp(72px, 9vw, 144px) var(--pad-x);
}

.section--alt {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* The inverted pricing band. Tokens are re-pointed rather than overridden per
   rule, so the shared components keep working inside it. */
.section--light {
    background: var(--light);
    color: var(--light-ink);
    --ink: var(--light-ink);
    --ink-2: var(--light-ink-2);
    --ink-3: var(--light-ink-3);
    --line: var(--light-line);
    --line-soft: rgba(20, 21, 26, .1);
    --line-strong: var(--light-line-strong);
    --acc-ink: #3E590C;
    --hover-surface: rgba(20, 21, 26, .05);
}

.section--light a:hover {
    color: var(--acc-ink);
}

/* Graph paper, used behind the cost comparison. */
.section--grid {
    background-image: linear-gradient(rgba(233, 229, 219, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 229, 219, .05) 1px, transparent 1px);
    background-size: 90px 90px;
}

/* At phone width the 90px grid is finer than the figures it sits behind and
   reads as texture over them; the band keeps its flat surface instead. */
@media (max-width: 45rem) {
    .section--grid { background-image: none; }
}

/* Hairline card grids: 1px gap over a tinted background draws the rules. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 270px)), 1fr));
    gap: 1px;
    background: var(--line);
}

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

/* `.accent` only ever marks display-size text, which clears 3:1 at --acc. */
.accent {
    color: var(--acc);
}

/* The design sets its counterpoint in a light italic cut of the display face;
   Bricolage has no true italic, so this is a synthesised oblique. */
.accent-italic {
    color: var(--acc);
    font-style: italic;
    font-weight: 300;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--ink-3);
}

/* Ornamental, but it still has to be visible enough to read as a separator. */
.eyebrow .sep {
    color: var(--ink-3);
}

/* Shared control wrapper; inner content compensates if --skew changes. */
.skewed {
    transform: skewX(var(--skew));
    display: inline-block;
}

.skewed > span {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1));
}

/* ============================================================
   Section heading
   ============================================================ */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
}

.section-head h2 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(2.1rem, 4.8vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
}

.section-index {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

/* Wrapped onto two rows the counter reads as a caption of the title, so it
   sits closer to it and the rule below carries the separation. */
@media (max-width: 45rem) {
    .section-head {
        gap: 8px;
        padding-bottom: 20px;
    }
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--header-bg);
    padding-top: env(safe-area-inset-top);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* Reduce Transparency asks for an opaque bar instead of a blurred one. */
@media (prefers-reduced-transparency: reduce) {
    .site-header {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px var(--pad-x);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    flex: 0 0 auto;
    min-height: var(--tap);
}

.brand-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
}

.brand-text span {
    font-weight: 300;
    color: var(--ink-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 22px);
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nav-link {
    justify-content: center;
    color: var(--ink-2);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

/* Small navigation ordinals stay secondary to the labels. */
.nav-num { font-size: .55rem;
    color: var(--ink-3);
}

.nav-link:hover {
    border-bottom-color: var(--acc);
    color: var(--acc);
}

.nav-link:hover .nav-num { font-size: .55rem;
    color: inherit;
}

.nav-cta { border-radius: 4px;
    flex: 0 0 auto;
    background: var(--acc);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .1em;
    transition: background .2s, color .2s;
}

.nav-cta > span {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 18px;
}

.nav-cta:hover {
    background: var(--ink);
    color: var(--on-accent);
}

.mobile-navigation {
    display: none;
}

/* Keep the primary action beside a native disclosure on smaller screens. */
@media (max-width: 68rem) {
    .header-inner {
        gap: 8px;
    }

    .brand {
        margin-right: auto;
    }

    .nav-desktop {
        display: none;
    }

    .mobile-navigation {
        display: block;
        flex: 0 0 auto;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--tap);
        min-height: var(--tap);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        cursor: pointer;
        list-style: none;
        touch-action: manipulation;
    }

    .nav-toggle::-webkit-details-marker { display: none; }
    .nav-toggle:hover { background: var(--hover-surface); }
    .mobile-navigation[open] .nav-toggle { background: var(--hover-surface); }
    .nav-toggle-icon path { transform-origin: 12px 12px; }
    .mobile-navigation[open] .nav-toggle-top { transform: rotate(45deg) translateY(6px); }
    .mobile-navigation[open] .nav-toggle-middle { opacity: 0; }
    .mobile-navigation[open] .nav-toggle-bottom { transform: rotate(-45deg) translateY(-6px); }

    .nav-mobile {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 12px var(--pad-x) 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--line-strong);
        max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        font-size: 0.75rem;
    }

    .nav-mobile .nav-link {
        justify-content: flex-start;
        padding: 8px 12px;
        border-bottom-color: var(--line);
    }

    .nav-mobile .nav-link:hover { background: var(--hover-surface); }

    .nav-mobile .nav-link:focus-visible {
        outline-offset: -3px;
    }
}

@media (max-width: 24rem) {
    .brand-text span { display: none; }
    .nav-cta > span { padding-inline: 12px; }
}

/* A tall bar must not obscure content in landscape or behind a keyboard; a
   narrow but tall viewport keeps the sticky bar, so only the height cuts it. */
@media (max-height: 32rem) {
    .site-header { position: relative; }
    html { scroll-padding-top: 16px; }
}

/* Native scroll progress; unsupported browsers receive a JS-updated value. */
.scroll-progress {
    height: 2px;
    background: var(--acc);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 50%;
}

@supports (animation-timeline: scroll(root block)) {
    .scroll-progress {
        animation: pz-progress linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes pz-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ============================================================
   Reveal animations
   ------------------------------------------------------------
   `.intro` is the above-the-fold stagger that plays on load.
   `[data-reveal]` is scrolled into place by a view() timeline;
   `--stagger` offsets the range to reproduce the design's
   per-element delays.
   ============================================================ */
@keyframes pz-reveal {
    from { opacity: 0; transform: perspective(1000px) translateY(48px) rotateX(5deg); }
    to { opacity: 1; transform: none; }
}

.intro {
    animation: pz-reveal .8s var(--ease) both;
    animation-delay: var(--d, 0ms);
}

@supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
    [data-reveal] {
        animation: pz-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 20%;
    }

    /* Staggering the range start is the scroll-timeline equivalent of a delay. */
    .rv-1 { animation-range: entry 8% cover 23%; }
    .rv-2 { animation-range: entry 11% cover 26%; }
    .rv-3 { animation-range: entry 14% cover 29%; }
    .rv-4 { animation-range: entry 17% cover 32%; }
}

/* Visible by default without JS. The observer opts only offscreen content in. */
@supports not ((animation-timeline: view()) and (animation-range: entry 5% cover 20%)) {
    [data-reveal].reveal-pending {
        opacity: 0;
        transform: perspective(1000px) translateY(48px) rotateX(5deg);
    }

    [data-reveal].reveal-visible {
        animation: pz-reveal .8s var(--ease) both;
        animation-delay: var(--reveal-delay, 0ms);
    }

    .rv-1 { --reveal-delay: 60ms; }
    .rv-2 { --reveal-delay: 120ms; }
    .rv-3 { --reveal-delay: 180ms; }
    .rv-4 { --reveal-delay: 240ms; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    [data-reveal], [data-reveal].reveal-visible, [data-reveal].reveal-pending, .intro {
        animation: none;
        opacity: 1;
        transform: none;
    }

    *, *::before, *::after { transition: none !important; }
    .scroll-progress { animation: none; transform: scaleX(0); }
}

/* Keyboard navigation must never land on a transparent reveal target. */
[data-reveal]:focus-within,
[data-reveal].reveal-pending:focus-within,
[data-reveal].reveal-visible:focus-within {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 30px var(--pad-x) 0;
    background: radial-gradient(ellipse at 80% 45%, var(--scene-glow) 0, transparent 47%), var(--bg);
}
.hero-shell { position: relative; }
.hero-topline { justify-content: space-between; font-size: .625rem; letter-spacing: .13em; }
.hero-response { display: inline-flex; align-items: center; gap: 9px; }
.hero-response i { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; flex-shrink: 0; }
.hero-composition { display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; min-height: min(760px, 78svh); padding: 40px 0 60px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font: 600 clamp(4rem, 8.4vw, 8.7rem)/.98 var(--display); letter-spacing: -.065em; margin: 0; }
.hero-line { display: block; padding: .04em 0 .08em; margin: -.04em 0 -.08em; }
.hero-line > span { display: block; }
.hero-lede { max-width: 38ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; color: var(--ink-2); margin: 30px 0 26px; text-wrap: pretty; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
.hero-actions .btn { min-width: 195px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 16px; font-size: .8rem; min-height: var(--tap); }
.hero-secondary span { color: var(--acc); font-size: 1.3rem; }
.hero-art { position: relative; min-width: 0; height: 100%; min-height: 440px; perspective: 1000px; }
.monogram-sculpture { position: absolute; inset: 2% -12% 0 -14%; transform: rotateX(-10deg) rotateY(-19deg) rotateZ(-9deg); filter: drop-shadow(22px 44px 20px #0008); }
.sculpture-svg { width: 100%; height: 100%; overflow: visible; }
.orbital-plane { position: absolute; border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent); border-radius: 50%; width: 100%; aspect-ratio: 1; top: 6%; left: 0; }
.orbital-plane--one { transform: rotateX(62deg) rotateY(-18deg) rotateZ(-25deg); }
.orbital-plane--two { transform: rotateX(24deg) rotateY(60deg) rotateZ(30deg); border-color: var(--line); }
.orbital-plane--one::after { content: ""; width: 8px; height: 8px; position: absolute; left: 13%; top: 14%; border-radius: 50%; background: var(--acc); box-shadow: 0 0 22px var(--acc); }
.orbital-cross { position: absolute; color: var(--ink-3); font: 300 22px var(--mono); }
.orbital-cross--one { top: 5%; right: 8%; }
.orbital-cross--two { bottom: 14%; left: 9%; }
.art-coordinate, .art-caption { position: absolute; color: var(--ink-3); font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.art-coordinate { top: 5%; left: 10%; }
.art-caption { bottom: 3%; right: 0; }
.hero-horizon { position: absolute; z-index: -1; width: 140%; height: 50%; left: -20%; bottom: -38%; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 -20px 90px #a7db1610; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 23px 0; color: var(--ink-3); font: .625rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.hero-bottom a { display: flex; align-items: center; gap: 16px; min-height: var(--tap); }
.scroll-cue { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: var(--acc); }

/* The perspective section opens the layers as it crosses the viewport. */
.vision { overflow: clip; background: var(--bg-alt); }
.vision-layout { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 7%; min-height: 600px; }
.vision-copy .section-head { flex-direction: column-reverse; align-items: flex-start; border: 0; padding: 0; gap: 30px; }
.vision-copy .section-index { display: flex; align-items: center; gap: 12px; }
.vision-copy .section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.vision-copy h2 { font: 500 clamp(3rem, 5.5vw, 5.6rem)/1.02 var(--display); letter-spacing: -.055em; margin: 0; }
.vision-copy h2 span { color: var(--acc); display: block; }
.vision-copy p { margin-top: 30px; font-size: 1.1rem; color: var(--ink-2); line-height: 1.7; max-width: 35ch; }
.vision-copy .link-arrow { margin-top: 16px; }
.vision-stage { height: 520px; perspective: 1200px; display: grid; align-items: center; }
.vision-stack { height: 350px; position: relative; transform-style: preserve-3d; transform: rotateX(22deg) rotateY(-15deg) rotateZ(7deg); }
.vision-layer { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 30px 70px var(--shadow); }
.vision-layer--back, .vision-layer--middle { display: flex; justify-content: space-between; align-items: end; padding: 22px; font: .625rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.vision-layer--back { transform: translate3d(0, 75px, -100px); background: var(--acc); color: var(--on-accent); }
.vision-layer--middle { transform: translate3d(0, 40px, -50px); background: var(--scene-layer); color: var(--ink); }
.vision-layer--front { background: var(--light); color: var(--light-ink); overflow: hidden; }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--light-line); font: .55rem var(--mono); text-transform: uppercase; }
.canvas-toolbar > span:first-child { display: flex; gap: 4px; }
.canvas-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: var(--light-ink-3); }
.canvas-content { padding: 28px; height: calc(100% - 40px); position: relative; overflow: hidden; }
.canvas-label { font: .55rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.canvas-content strong { position: relative; z-index: 1; display: block; max-width: 7.5ch; margin-top: 20px; font: 600 clamp(2rem, 3.5vw, 3.5rem)/.98 var(--display); letter-spacing: -.055em; }
.canvas-bottom { position: absolute; bottom: 22px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; font: .55rem var(--mono); }
.canvas-bottom > span:last-child { font-size: 22px; }
.canvas-orbit { position: absolute; width: 220px; height: 220px; border: 40px solid var(--acc); border-radius: 50%; right: -15px; top: 25px; transform: rotate(-30deg) scaleX(.7); box-shadow: inset -8px 0 0 var(--acc-shade), 8px 0 0 var(--acc-shade); }

/* Native motion and fallback use the same keyframes and named ranges. */
@keyframes pz-sculpture {
    from { transform: translateY(0) rotateX(-10deg) rotateY(-19deg) rotateZ(-9deg); }
    to { transform: translateY(90px) rotateX(12deg) rotateY(24deg) rotateZ(9deg); }
}
@keyframes pz-orbit {
    from { transform: rotateX(62deg) rotateY(-18deg) rotateZ(-25deg); }
    to { transform: rotateX(35deg) rotateY(24deg) rotateZ(35deg); }
}
@keyframes pz-stack {
    from { transform: rotateX(38deg) rotateY(-24deg) rotateZ(10deg); }
    to { transform: rotateX(4deg) rotateY(5deg) rotateZ(-3deg); }
}
@keyframes pz-layer-back {
    from { transform: translate3d(0, 75px, -100px); }
    to { transform: translate3d(0, 155px, -160px); }
}
@keyframes pz-layer-middle {
    from { transform: translate3d(0, 40px, -50px); }
    to { transform: translate3d(0, 80px, -80px); }
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .hero { view-timeline-name: --hero-scene; }
        .vision { view-timeline-name: --vision-scene; }
        .monogram-sculpture { animation: pz-sculpture linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
        .orbital-plane--one { animation: pz-orbit linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
        .vision-stack, .vision-layer--back, .vision-layer--middle { animation: pz-stack linear both; animation-timeline: --vision-scene; animation-range: entry 0% exit 70%; }
        .vision-layer--back { animation-name: pz-layer-back; }
        .vision-layer--middle { animation-name: pz-layer-middle; }
    }
}
@media (max-width: 60rem) {
    .hero-composition { grid-template-columns: 1.25fr 1fr; min-height: 650px; }
    .hero h1 { font-size: clamp(3.8rem, 9vw, 6rem); }
    .hero-art { min-height: 360px; }
    .art-caption { max-width: 22ch; text-align: right; line-height: 1.6; }
    .hero-edition { display: none; }
    .vision-layout { gap: 4%; }
    .vision-stage { height: 460px; }
    .vision-stack { height: 300px; }
    .canvas-orbit { width: 160px; height: 160px; border-width: 30px; right: -40px; top: 45px; }
}
@media (max-width: 42rem) {
    .hero { padding-top: 22px; }
    .hero-topline { font-size: .6rem; gap: 14px; letter-spacing: .1em; }
    .hero-response { display: none; }
    .hero-composition { display: flex; flex-direction: column; align-items: stretch; padding: 35px 0 12px; min-height: 0; }
    .hero h1 { font-size: clamp(3.3rem, 12.7vw, 5.3rem); }
    .hero-lede { max-width: 34ch; margin-top: 24px; font-size: .98rem; }
    .hero-actions { gap: 12px 20px; }
    .hero-actions .btn { min-width: 165px; padding: 14px 18px; }
    .hero-secondary { font-size: .75rem; gap: 8px; }
    .hero-art { height: 320px; min-height: 0; width: 90%; max-width: 380px; align-self: center; margin-top: 20px; }
    .monogram-sculpture { inset: -10% 0 -5%; }
    .orbital-plane { top: -4%; }
    /* The crosses and the coordinate are ornament the monogram has no room for. */
    .orbital-cross { display: none; }
    .art-coordinate { display: none; }
    .art-caption { bottom: 4%; max-width: none; font-size: .55rem; letter-spacing: .08em; }
    .hero-bottom { font-size: .58rem; padding: 14px 0; gap: 14px; letter-spacing: .07em; }
    .hero-bottom > span:first-child { max-width: 20ch; line-height: 1.7; }
    .hero-bottom a { gap: 9px; }
    .vision-layout { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
    .vision-copy h2 { font-size: clamp(2.8rem, 11vw, 4.2rem); }
    .vision-copy p { margin-top: 30px; font-size: 1rem; }
    .vision-stage { height: 410px; width: 90%; justify-self: center; }
    .vision-stack { height: 270px; }
    .canvas-content { padding: 22px; }
    .canvas-bottom { left: 22px; right: 22px; bottom: 18px; }
    .canvas-content strong { font-size: 2.4rem; }
    .canvas-label, .canvas-bottom, .canvas-toolbar { font-size: .55rem; }
}
/* Phone widths: the actions no longer fit on one row, and a stacked 165px button
   above a 150px text link reads as two blocks of almost the same width. Both take
   the whole column instead, so the two arrows line up on the same right edge. */
@media (max-width: 27rem) {
    .hero-actions .btn, .hero-actions .hero-secondary { width: 100%; }
    .hero-actions .hero-secondary { justify-content: space-between; }
}
/* Under ~385px the ornament crowds the monogram; it gives the width back to the copy. */
@media (max-width: 24rem) {
    .hero { padding-top: 16px; }
    .hero h1 { font-size: clamp(2.9rem, 13.6vw, 3.3rem); }
    .hero-lede { margin: 20px 0 22px; font-size: .9375rem; }
    .hero-art { height: 260px; width: 100%; margin-top: 12px; }
    .art-caption { display: none; }
    .hero-bottom { justify-content: center; }
    .hero-bottom > span:first-child { display: none; }
    .vision-stage { height: 330px; }
    .vision-stack { height: 225px; }
    .canvas-content { padding: 18px; }
    .canvas-content strong { font-size: 1.9rem; margin-top: 14px; }
    .canvas-bottom { left: 18px; right: 18px; }
    .canvas-orbit { width: 130px; height: 130px; border-width: 24px; }
}
/* ============================================================
   Buttons
   ============================================================ */
.btn { border-radius: 4px;
    min-height: var(--tap);
    padding: 16px 24px;
    font-size: 0.96875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background .2s, color .2s, border-color .2s;
}

.btn--primary {
    background: var(--acc);
    color: var(--on-accent);
    font-weight: 600;
}

.btn--primary:hover {
    background: var(--ink);
    color: var(--on-accent);
}

.btn--ghost {
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 500;
}

.btn--ghost:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* Underlined text link with an arrow, used on the path cards. */
.link-arrow {
    min-height: var(--tap);
    margin-top: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    /* the underline is the affordance, so it has to clear 3:1 */
    border-bottom: 1px solid var(--line-strong);
    /* padded up to the 48px touch target without moving the underline */
    padding: 12px 0;
    align-self: flex-start;
    transition: color .2s, border-color .2s;
}

.link-arrow:hover {
    border-bottom-color: var(--acc);
    color: var(--acc);
}

/* ============================================================
   Marquee
   ------------------------------------------------------------
   A static band, not a scroller: the list wraps instead of
   animating so nothing moves outside the reader's control.
   ============================================================ */
.marquee { border-block: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-3);
    padding: 22px var(--pad-x);
}

.marquee-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.6;
}

.marquee-track li {
    display: flex;
    align-items: center;
    gap: 18px;
}

.marquee-track li:not(:last-child)::after {
    content: "✳";
    color: var(--acc);
    letter-spacing: 0;
}

/* Four or five centred, ragged rows of accent asterisks is the noisiest thing
   on a phone screen. The band left-aligns to the same gutter as everything
   else and the separators drop back to the muted ink. */
@media (max-width: 45rem) {
    .marquee { padding-block: 18px; }

    .marquee-track {
        justify-content: flex-start;
        gap: 9px 13px;
        letter-spacing: .13em;
        line-height: 1.7;
    }

    .marquee-track li { gap: 13px; }
    .marquee-track li:not(:last-child)::after { color: var(--ink-3); }
}

/* ============================================================
   Paths (Dvě cesty)
   ============================================================ */
#cesty .card-grid { gap: 22px; background: transparent; margin-top: 36px; }

.path { border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-alt);
    padding: clamp(28px, 3.8vw, 60px) clamp(20px, 2.4vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition: background .35s;
}

.path:hover {
    background: var(--hover-surface);
}

/* Outlined ordinal bleeding off the top-right corner. */
.path-figure { opacity: .65;
    font-family: var(--display);
    position: absolute;
    top: -12px;
    right: 10px;
    font-size: clamp(5.625rem, 11vw, 10rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 219, .13);
    pointer-events: none;
}

/* The ordinal is a watermark; stacked, it lands right behind the tag row, so it
   steps back rather than competing with it. */
@media (max-width: 45rem) {
    #cesty .card-grid { gap: 26px; }
    .path-figure { font-size: 4.75rem; top: -8px; right: 6px; opacity: .45; }
}

.path-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    position: relative;
}

.tag {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .16em;
    padding: 5px 9px;
    font-weight: 500;
}

.tag--solid {
    background: var(--acc);
    color: var(--on-accent);
}

.tag--outline {
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 4px 9px;
}

.tag-note {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
}

.path h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.5rem, 2.7vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
    position: relative;
}

.path p {
    margin: 0;
    color: var(--ink-2);
    line-height: 1.58;
    font-size: 0.96875rem;
    max-width: 42ch;
}

/* Numbered rows divided by hairlines rather than bulleted. Chrome will not hand
   the implicit `list-item` counter to `content` once the marker is off, so the
   numbering runs on a counter of its own. */
.num-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: num-list;
    font-size: 0.9375rem;
}

.num-list li {
    display: flex;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--line-soft);
    counter-increment: num-list;
}

.num-list li:last-child {
    border-bottom: 1px solid var(--line-soft);
}

.num-list li::before {
    content: counter(num-list, decimal-leading-zero);
    color: var(--acc);
    font-family: var(--mono);
    font-size: 0.75rem;
    flex: 0 0 auto;
}

/* ============================================================
   WaaS
   ============================================================ */
#waas { background: var(--bg-alt); }

.waas-lede {
    margin: 40px 0 60px;
    max-width: 47ch;
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
}

.waas-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.4375rem), 1fr));
    gap: clamp(18px, 2.4vw, 36px);
}

.waas-step {
    border-top: 2px solid var(--line-strong);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* The first phase is the one the reader is buying; it carries the accent. */
.waas-step:first-child {
    border-top-color: var(--acc);
}

.waas-step .num {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    color: var(--ink-3);
}

.waas-step h3 {
    font-family: var(--display);
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.waas-step p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.55;
}

.stats {
    margin-top: clamp(36px, 4.5vw, 64px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.stat-value {
    font-family: var(--display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.stat-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 8px;
}

/* Stacked, the phases sit one hairline apart; the rules only read as separate
   phases with more air between them. */
@media (max-width: 45rem) {
    .waas-lede { margin: 28px 0 40px; }
    .waas-steps { gap: 30px; }
    .stats { gap: 28px; }
}

/* ============================================================
   Cost comparison (Propočet)
   ============================================================ */
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: clamp(26px, 4vw, 64px);
    margin-top: clamp(26px, 3.4vw, 46px);
    align-items: start;
}

.compare-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 34px);
}

.compare-lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.6;
    max-width: 44ch;
}

.compare-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.compare-slider-head output {
    color: var(--ink);
    font-size: 0.9375rem;
    letter-spacing: .04em;
}

.compare-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.65625rem;
    color: var(--ink-3);
}

/* The native track is replaced so it reads as part of the same system as the
   badges: a 2px rule and a square accent thumb. */
.compare input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    /* The thumb stays small, but the drag target is the whole control box, so
       it carries the same --tap floor as every other control. */
    height: var(--tap);
    margin: 3px 0 0;
    cursor: grab;
}

.compare input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--line-strong);
}

.compare input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 18px;
    margin-top: -8px;
    background: var(--acc);
    border: 0;
    border-radius: 0;
    transform: skewX(var(--skew));
}

.compare input[type=range]::-moz-range-track {
    height: 2px;
    background: var(--line-strong);
}

.compare input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: var(--acc);
    border: 0;
    border-radius: 0;
}

.compare-inputs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    margin: 0;
}

.compare-inputs > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.90625rem;
}

.compare-inputs dt {
    color: var(--ink-3);
    margin: 0;
}

.compare-inputs dd {
    margin: 0;
    font-family: var(--mono);
    text-align: right;
}

/* The Czech labels are long; below this the row would set two words per side. */
@media (max-width: 26rem) {
    .compare-inputs > div {
        flex-direction: column;
        gap: 4px;
    }

    .compare-inputs dd { text-align: left; }
}

.compare-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.compare-bar-head span:first-child {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.compare-bar-head strong {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.compare-bar {
    height: 14px;
    background: rgba(233, 229, 219, .1);
    margin-top: 12px;
    overflow: hidden;
}

.compare-bar > span {
    display: block;
    height: 100%;
    background: var(--ink);
    width: var(--w, 0%);
    transition: width .45s var(--ease);
}

.compare-foot {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
    margin-top: 8px;
}

.compare-waas .compare-bar-head span:first-child,
.compare-waas .compare-bar-head strong {
    color: var(--acc);
}

.compare-waas .compare-bar > span {
    background: var(--acc);
}

.compare-verdict {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.compare-verdict h3 {
    font-family: var(--display);
    margin: 10px 0 0;
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    max-width: 34ch;
}

.compare-verdict .section-index {
    white-space: normal;
}

.compare-note {
    margin: 14px 0 0;
    font-size: 0.78125rem;
    color: var(--ink-3);
    line-height: 1.5;
    max-width: 46ch;
}

@media (max-width: 45rem) {
    .compare { gap: 40px; }
    .compare-note { margin-top: 18px; }
}

/* ============================================================
   Services
   ============================================================ */
.service-list {
    display: flex;
    flex-direction: column;
}

.service {
    display: grid;
    grid-template-columns: minmax(0, 54px) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(14px, 2.4vw, 36px);
    padding: clamp(28px, 3.4vw, 48px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background .3s;
}

.service:hover {
    background: var(--bg-alt);
}

.service .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--acc);
}

.service h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -.025em;
}

.service p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.9375rem;
    line-height: 1.55;
}

@media (max-width: 45rem) {
    .service {
        grid-template-columns: minmax(0, 36px) minmax(0, 1fr);
        row-gap: 10px;
    }

    .service p {
        grid-column: 2;
    }
}

.audience {
    margin-top: clamp(42px, 5vw, 76px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(20px, 3vw, 44px);
}

.audience-intro {
    min-width: 0;
}

.audience-intro h3 {
    font-family: var(--display);
    margin: 12px 0 0;
    font-size: clamp(1.3125rem, 2.4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
    max-width: 19ch;
}

.audience-item {
    border-top: 1px solid var(--line-strong);
    padding-top: 16px;
    min-width: 0;
}

.audience-item h4 {
    font-family: var(--display);
    margin: 0 0 9px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.audience-item p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.6;
}

@media (max-width: 45rem) {
    .audience { gap: 30px; }
}

/* ============================================================
   Pricing
   ============================================================ */
#cenik { border-radius: 18px; margin: 0 12px; }
@media (max-width: 42rem) { #cenik { margin-inline: 0; border-radius: 0; } }

.pricing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.pricing-bar p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 52ch;
}

.pricing-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pricing-save {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.segmented {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.segmented button {
    border: 0;
    cursor: pointer;
    min-height: var(--tap);
    padding: 0 16px;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: transparent;
    color: var(--ink);
    transition: background .2s, color .2s;
}

.segmented button.is-active {
    background: var(--ink);
    color: var(--light);
}

/* The table is wider than a phone; the row labels stay put while it scrolls. */
.plan-scroll {
    margin-top: clamp(26px, 3.4vw, 44px);
    overflow-x: auto;
    container-type: inline-size;
}

.plan-scroll:focus-visible {
    outline: 2px solid var(--acc-ink);
    outline-offset: 3px;
}

.plan-table {
    width: 100%;
    min-width: 41.25rem;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.90625rem;
}

.plan-table thead th:first-child {
    width: 28%;
}

.plan-table thead th {
    width: 24%;
    vertical-align: bottom;
    padding: 0 16px 20px;
    border-bottom: 2px solid var(--ink);
    font-weight: 400;
}

.plan-table thead th:first-child {
    padding-left: 0;
}

.plan-table thead th:last-child {
    padding-right: 0;
}

.plan-table thead th.is-featured {
    position: relative;
    padding: max(34px, 2.6vw) 16px 20px;
}

.plan-bill {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* The dark column — and, on a phone, the dark card — keeps the page's own ink,
   so it re-points the tokens its contents read rather than restating every
   colour. Specificity carries it over `.plan-card`'s own light background. */
.plan-table .is-featured,
.plan-card.is-featured {
    background: #14151A;
    color: var(--light);
    --ink: #F0F0E6;
    --ink-2: #C4C8BA;
    --ink-3: #959D8D;
    --acc-ink: var(--acc);
    --line: rgba(233, 229, 219, .14);
    --line-strong: rgba(233, 229, 219, .42);
    --hover-surface: rgba(233, 229, 219, .08);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--acc);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    padding: 5px 10px;
    font-weight: 500;
}

.plan-name {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.plan-price {
    display: block;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-top: 8px;
}

.plan-table thead th.is-featured .plan-price,
.plan-card.is-featured .plan-price {
    color: var(--acc);
}

.plan-unit {
    display: block;
    font-family: var(--mono);
    font-size: 0.65625rem;
    color: var(--ink-3);
}

.plan-table tbody th {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    color: var(--light-ink);
}

.plan-cell {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.84375rem;
    color: var(--ink-2);
    vertical-align: top;
}

.plan-table td:last-child {
    padding-right: 0;
}

.plan-table td.is-featured:last-child {
    padding-right: 16px;
}

.plan-cell.is-featured {
    color: var(--acc-ink);
}

/* "Not included" must not read as an accent highlight in the featured column. */
.plan-mark--no {
    color: var(--ink-3);
}

/* The summary is a sentence, not a value — it reads as body copy. */
.plan-cell--text {
    font-family: var(--sans);
    font-size: 0.875rem;
    line-height: 1.55;
}

.plan-cell--text.is-featured {
    color: var(--ink-2);
}

.plan-row-cta td {
    padding: 24px 16px 0;
    vertical-align: top;
}

.plan-row-cta td:first-child {
    padding-left: 0;
}

.plan-row-cta td.is-featured {
    padding-bottom: 24px;
}

.plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    text-align: center;
    border: 1px solid var(--line-strong);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background .2s, border-color .2s, color .2s;
}

.plan-cta:hover {
    border-color: var(--ink);
    background: var(--hover-surface);
    color: var(--ink);
}

.plan-cta--primary {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-accent);
    font-weight: 500;
}

.plan-cta--primary:hover {
    background: var(--light);
    border-color: var(--light);
    color: var(--on-accent);
}

/* Below the table's own min-width it scrolls sideways, so the row labels pin to
   the left edge — otherwise the right-hand plans are columns of bare ticks. The
   condition is the scroll port, not the viewport, and the rule stays out of the
   wide layout, where the divider would be one vertical line the design lacks. */
@container (max-width: 41.25rem) {
    .plan-table thead th:first-child,
    .plan-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--light);
        border-right: 1px solid var(--light-line);
    }

    .plan-table thead th:first-child {
        padding-right: 16px;
    }
}

/* The table needs 660px before it starts scrolling sideways, and a phone gives
   it under 400 — so the plan the badge points at is the one that ends up off
   screen. Below 45rem the same rows stack into a card each: the price sits at
   the top where the eye lands, every row carries its own label, and the CTA is
   at the end of the card people just read instead of in a shared row. */
.plan-cards {
    display: none;
}

@media (max-width: 45rem) {
    .plan-scroll {
        display: none;
    }

    /* The house hairline grid: 1px gaps over the rule colour draw the lines. */
    .plan-cards {
        display: grid;
        gap: 1px;
        margin: clamp(26px, 3.4vw, 44px) 0 0;
        padding: 0;
        list-style: none;
        background: var(--line);
        border: 1px solid var(--line);
    }

    .plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Grid items default to min-content, which at large text sizes pushes
           the card wider than the screen instead of rewrapping. */
        min-width: 0;
        background: var(--light);
        padding: 24px clamp(16px, 5vw, 24px) 26px;
    }

    /* The badge sits in the corner, so the card it marks opens lower. */
    .plan-card.is-featured {
        padding-top: 42px;
    }

    .plan-card-price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 4px 0 6px;
    }

    .plan-card .plan-price {
        font-size: clamp(2rem, 8.5vw, 2.75rem);
        margin-top: 0;
    }

    .plan-card .plan-unit {
        font-size: 0.75rem;
        color: var(--ink-2);
    }

    .plan-card-summary {
        margin: 14px 0 0;
        font-size: 0.9375rem;
        line-height: 1.55;
        color: var(--ink-2);
    }

    .plan-card-list {
        width: 100%;
        margin: 18px 0 0;
        border-top: 1px solid var(--line);
    }

    /* Label and answer on one line, so the card reads as its own small table —
       until they no longer fit side by side, at enlarged text sizes, and the
       answer drops to its own line rather than widening the card. */
    .plan-card-list > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 2px 18px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
    }

    /* `main` breaks words anywhere, which here lets the flex row shrink a label
       past its own min-content and split "Podpora" across two lines.
       `break-word` keeps the min-content intact and only breaks a word that
       genuinely cannot fit. */
    .plan-card-list dt,
    .plan-card-list dd {
        overflow-wrap: break-word;
        line-height: 1.4;
    }

    .plan-card-list dt {
        font-size: 0.875rem;
    }

    .plan-card-list dd {
        margin: 0;
        margin-left: auto;
        text-align: right;
        font-family: var(--mono);
        font-size: 0.8125rem;
        color: var(--ink-2);
    }

    .plan-card.is-featured .plan-card-list dd {
        color: var(--acc-ink);
    }

    /* The card is the button's margin: it stays clear of the screen edges. */
    .plan-card .plan-cta {
        width: 100%;
        margin-top: 22px;
    }
}

/* ============================================================
   Process
   ============================================================ */
.process-grid {
    background: transparent;
    gap: 24px;
    margin-top: clamp(22px, 3vw, 40px);
}

.process-card { border-top: 1px solid var(--line-strong);
    background: var(--bg);
    padding: clamp(22px, 2.4vw, 32px) 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 230px;
}

.process-card .num {
    font-family: var(--display);
    font-size: 4.75rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 219, .24);
}

.process-card:first-child .num {
    -webkit-text-stroke-color: var(--acc);
}

.process-card h3 {
    font-family: var(--display);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.process-card p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.55;
}

/* min-height reserves a row of empty space under every card once they stack,
   and the outlined ordinal is half the width of the card it heads. */
@media (max-width: 45rem) {
    .process-grid { gap: 30px; }
    .process-card { min-height: 0; padding-block: 18px 0; }
    .process-card .num { font-size: 3.4rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
#faq .shell { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7%; align-items: start; }
#faq .section-head { border: 0; flex-direction: column; align-items: flex-start; gap: 24px; position: sticky; top: calc(var(--header-h) + 40px); }
#faq .section-head h2 { line-height: 1.08; }
@media (max-width: 60rem) {
    #faq .shell { grid-template-columns: 1fr; gap: 30px; }
    #faq .section-head { position: static; }
}
.faq-list {
    max-width: 1000px;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: clamp(19px, 2.2vw, 26px) 0;
    display: grid;
    grid-template-columns: minmax(0, 54px) minmax(0, 1fr) 26px;
    gap: clamp(10px, 2vw, 24px);
    align-items: baseline;
    font: inherit;
    color: var(--ink);
}

.faq-num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
}

.faq-q .faq-text {
    font-family: var(--display);
    font-size: clamp(1.0625rem, 1.8vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.faq-sign {
    font-family: var(--mono);
    font-size: 1.0625rem;
    color: var(--acc);
    justify-self: end;
    transition: transform .3s;
}

.faq-item.is-open .faq-sign {
    transform: rotate(45deg);
}

/* 0fr -> 1fr gives a height transition without measuring anything. */
.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s var(--ease);
}

.faq-item.is-open .faq-body {
    grid-template-rows: 1fr;
}

/* A collapsed row is still 1fr-of-nothing rather than `display:none`, so
   without this the answers stay in the accessibility tree and in the tab
   order while invisible. `visibility` is delayed on close so the height
   transition still plays out, and applied immediately on open. */
.faq-body > div {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s .38s;
}

.faq-item.is-open .faq-body > div {
    visibility: visible;
    transition: visibility 0s;
}

.faq-body p {
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    padding-left: clamp(0px, 5vw, 78px);
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.65;
    max-width: 68ch;
}

@media (max-width: 45rem) {
    .faq-q {
        grid-template-columns: minmax(0, 32px) minmax(0, 1fr) 26px;
    }
}

/* Under ~385px the ordinal column costs the question a word on every line. */
@media (max-width: 24rem) {
    .faq-q {
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .faq-num { display: none; }
    .faq-body p { padding-left: 0; }
}

/* ============================================================
   Contact
   ============================================================ */
#kontakt { background: var(--bg-alt); border-top: 1px solid var(--line); }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: clamp(32px, 4.5vw, 80px);
}

.contact-col {
    min-width: 0;
}

.contact-col h2 {
    font-family: var(--display);
    margin: 18px 0 0;
    font-size: clamp(2rem, 5vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .9;
    max-width: 14ch;
}

.contact-lede {
    margin: 22px 0 0;
    color: var(--ink-2);
    font-size: clamp(0.96875rem, 1.3vw, 1.125rem);
    line-height: 1.6;
    max-width: 42ch;
}

.contact-list {
    margin: clamp(28px, 3.6vw, 48px) 0 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--tap);
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.contact-row a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: inherit;
    /* underlined so it doesn't rely on position alone to read as a link */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
    transition: color .2s, text-decoration-color .2s;
}

.contact-row a:hover {
    color: var(--acc);
    text-decoration-color: currentColor;
}

.contact-row dt {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.contact-row dd {
    min-width: 0;
    font-size: 1rem;
    margin: 0;
    text-align: right;
}

/* `address` is the element that marks these up as contact details; its default
   italic is the only thing the row does not want from it. */
.contact-address {
    font-style: normal;
    display: inline;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--panel);
    padding: clamp(22px, 2.8vw, 40px);
    border: 1px solid rgba(233, 229, 219, .16);
    /* The panel is dark, so the native bits the browser draws for itself —
       the select popup, the caret, autofill — should be dark too. */
    color-scheme: dark;
}

.form-title {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field > label {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.field > div:empty { display: none; }

.form :is(input, textarea, select) {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 1rem;
    /* the underline is the field's only boundary, so the hit area is padded
       out to the 48px minimum */
    min-height: var(--tap);
    padding: 10px 0;
    border-radius: 0;
    transition: border-color .2s;
}

/* Safari and Chrome both render a default chevron and bezel on <select>;
   strip them and draw one that matches the rest of the form. */
.form select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--panel);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 10px center, right 4px center;
    background-repeat: no-repeat;
    padding-right: 26px;
}

.form textarea {
    resize: vertical;
}

.form :is(input, textarea, select):focus {
    border-bottom-color: var(--acc);
}

.form :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--acc-soft);
    outline-offset: 4px;
}

.form ::placeholder {
    color: var(--ink-3);
    opacity: 1; /* Firefox dims placeholders by default */
}

.form .invalid {
    border-bottom-color: var(--acc);
}

.form .validation-message {
    color: var(--acc-soft);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .08em;
}

.btn-submit {
    min-height: var(--tap);
    background: var(--acc);
    color: var(--on-accent);
    border: 0;
    cursor: pointer;
    padding: 16px 22px;
    font-size: 0.96875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background .2s;
}

.btn-submit:hover {
    background: var(--ink);
}

.btn-submit:disabled { opacity: .65; cursor: wait; }
.form-validation { margin: 0; color: var(--acc-soft); line-height: 1.5; }

@media (max-width: 24rem) {
    .contact-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .contact-row dd { text-align: left; }
    .segmented { width: 100%; }
    .segmented button { flex: 1; padding-inline: 10px; }
}

.form-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-note {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--ink-3);
    line-height: 1.5;
}

.form-note a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-note a:hover {
    color: var(--acc-soft);
}

.form-error {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--acc-soft);
    background: rgba(255, 86, 54, .1);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.form-error a {
    color: var(--acc-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sent-card {
    background: var(--panel);
    padding: clamp(26px, 3.2vw, 44px);
    border: 1px solid var(--acc);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 320px;
    justify-content: center;
}

.sent-card h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.4375rem, 2.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.sent-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.6;
    max-width: 40ch;
}

.sent-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acc);
}

.btn-reset {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    min-height: var(--tap);
    padding: 12px 20px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .2s, color .2s;
}

.btn-reset:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* ============================================================
   Footer
   ============================================================ */
.footer-statement { font: 500 clamp(2.4rem, 5.4vw, 5.4rem)/1.15 var(--display); letter-spacing: -.055em; padding: 35px 0 70px; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer-statement a { color: var(--acc); flex-shrink: 0; }
@media (max-width: 42rem) { .footer-statement { padding-block: 16px 42px; } }
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    padding: clamp(28px, 3.4vw, 44px) var(--pad-x);
    /* clear the iOS home indicator */
    padding-bottom: calc(clamp(28px, 3.4vw, 44px) + env(safe-area-inset-bottom));
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.footer-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px clamp(14px, 2.4vw, 28px);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    padding-bottom: clamp(20px, 2.4vw, 32px);
    margin-bottom: clamp(20px, 2.4vw, 32px);
    border-bottom: 1px solid var(--line-soft);
}

.footer-areas-label { text-transform: uppercase; color: var(--ink-2); }

.footer-areas ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(14px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-areas a {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.footer-areas a:hover { color: var(--acc); }

.footer-nap {
    font-family: var(--mono);
    font-style: normal;
    font-size: 0.6875rem;
    letter-spacing: .08em;
    line-height: 1.7;
    color: var(--ink-3);
    margin-top: clamp(18px, 2.4vw, 28px);
    padding-top: clamp(18px, 2.4vw, 28px);
    border-top: 1px solid var(--line-soft);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
}

.footer-brand .brand-text {
    font-size: 0.9375rem;
}

.footer-meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 28px);
    flex-wrap: wrap;
}

.footer-meta a {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.footer-meta a:hover {
    color: var(--acc);
}

/* Every link is a 48px target, so the wrapped rows already stand well apart;
   the row gap on top of that reads as a hole in the list. */
@media (max-width: 45rem) {
    .footer-inner { gap: 14px; }
    .footer-meta { gap: 0 20px; }
}

/* ============================================================
   Service areas (/tvorba-webu and the town pages)
   ============================================================ */
/* These pages are prose with cards between, not the home page's full-bleed
   bands, so the grid falls back to gapped cards like #cesty rather than the
   hairline default. */
.area-page .card-grid {
    gap: 22px;
    background: transparent;
    margin-block: 36px clamp(48px, 6vw, 88px);
}

.breadcrumbs {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--ink-3);
}

.breadcrumbs a {
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.breadcrumbs a:hover { color: var(--acc); }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); }

.area-title {
    font-family: var(--display);
    font-size: clamp(2.1rem, 5.6vw, 4.5rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.045em;
    margin: 18px 0 24px;
    max-width: 18ch;
}

.area-lede {
    max-width: 62ch;
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 32px;
}

/* The one canonical NAP, repeated on every page of the branch. `address` is
   the element search engines and browsers both read as contact details. */
.area-nap {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: .04em;
    line-height: 1.9;
    color: var(--ink-3);
    border-left: 2px solid var(--acc);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    margin-block: clamp(40px, 5vw, 72px) 0;
}

.area-nap-name { color: var(--ink); }
.area-nap a { color: var(--ink-3); text-decoration: underline; text-underline-offset: .2em; }
.area-nap a:hover { color: var(--acc); }

.area-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin: 0 0 clamp(40px, 5vw, 64px);
}

.area-facts > div {
    background: var(--bg-alt);
    padding: 18px clamp(16px, 2vw, 24px);
}

.area-facts dt {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 7px;
}

.area-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.area-copy p {
    max-width: 72ch;
    line-height: 1.75;
    color: var(--ink-2);
    margin-block: 0 22px;
}

/* Whole card is the link, so the target is the card and not a five-word run
   of text at the bottom of it. */
.area-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-alt);
    padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    color: inherit;
    transition: background .35s, border-color .35s;
}

.area-card:hover {
    background: var(--hover-surface);
    border-color: var(--line-strong);
}

.area-card-figure {
    font-family: var(--display);
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: clamp(4.5rem, 9vw, 8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 219, .13);
    pointer-events: none;
}

.area-card h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.04;
    position: relative;
}

.area-card-meta {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.area-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.area-card .link-arrow { margin-top: auto; padding-top: 8px; }

.area-point {
    border-top: 1px solid var(--line-strong);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.area-point .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--acc);
}

.area-point h2 {
    font-family: var(--display);
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.area-point p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.6;
}

.area-pricing,
.area-cta {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-alt);
    padding: clamp(26px, 3.4vw, 48px);
    margin-block: clamp(40px, 5vw, 72px);
}

.area-pricing h2,
.area-cta h2,
.area-faq h2,
.area-nearby h2,
.area-siblings h2 {
    font-family: var(--display);
    margin: 0 0 14px;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.area-pricing p,
.area-cta p {
    margin: 0 0 24px;
    max-width: 62ch;
    color: var(--ink-2);
    line-height: 1.65;
}

.area-pricing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
}

/* Native details: the accordion works during static SSR and with scripting
   off, which is why these pages need no render mode. */
.area-faq { margin-block: clamp(40px, 5vw, 72px); }

.area-faq-item {
    border-top: 1px solid var(--line);
}

.area-faq-item:last-of-type { border-bottom: 1px solid var(--line); }

.area-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--tap);
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.015em;
}

.area-faq-item summary::-webkit-details-marker { display: none; }

.area-faq-item summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 1.25rem;
    color: var(--acc);
    flex: 0 0 auto;
    transition: transform .25s var(--ease);
}

.area-faq-item[open] summary::after { transform: rotate(45deg); }

.area-faq-item p {
    margin: 0;
    padding: 0 0 22px;
    max-width: 72ch;
    color: var(--ink-2);
    line-height: 1.7;
}

.area-nearby { margin-block: clamp(40px, 5vw, 64px); }

.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-chips li {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    padding: 7px 12px;
}

.area-siblings { margin-block: clamp(40px, 5vw, 64px); }

.area-sibling-list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.area-sibling-list li { border-top: 1px solid var(--line-soft); }
.area-sibling-list li:last-child { border-bottom: 1px solid var(--line-soft); }

.area-sibling-list a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 8px 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.area-sibling-list a:hover { color: var(--acc); }

@media (max-width: 45rem) {
    .area-title { max-width: none; }
    .area-page .card-grid { gap: 18px; }
}


/* ============================================================
   Cookie information
   ============================================================ */
.cookie-policy h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.045em;
    margin: 24px 0;
}

.cookie-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.cookie-intro,
.cookie-copy {
    max-width: 75ch;
    line-height: 1.7;
    color: var(--ink-2);
}

.cookie-intro { font-size: 1.125rem; }
.cookie-updated { color: var(--ink-3); font-family: var(--mono); font-size: .75rem; }
.cookie-copy { margin-block: 32px; }
.cookie-copy h2 { font-family: var(--display); color: var(--ink); font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em; }
.cookie-copy a, .cookie-back { text-decoration: underline; text-underline-offset: .2em; }
.cookie-policy .section-head { margin-top: 48px; }

.cookie-inventory {
    margin: 0;
    border: 1px solid var(--line);
    padding: clamp(20px, 3vw, 32px);
    background: var(--panel);
}

.cookie-inventory > div {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(0, 4fr);
    gap: 12px 24px;
    padding-block: 12px;
    line-height: 1.6;
}

.cookie-inventory dt { font-weight: 600; }
.cookie-inventory dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.cookie-inventory code { font-family: var(--mono); }

@media (max-width: 540px) {
    .cookie-inventory > div { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================
   Terms and conditions
   ============================================================ */
.terms h1 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 24px 0;
}

.terms-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.terms a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.terms-party {
    max-width: 75ch;
    border: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(20px, 3vw, 32px);
    color: var(--ink-2);
    line-height: 1.7;
}

.terms-party p { margin: 0; }
.terms-party-label { color: var(--ink); font-weight: 600; }
.terms-party .terms-vat { margin-top: 1em; }

.terms-effective {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
    margin-block: 24px 0;
}

.terms-article {
    max-width: 75ch;
    margin-top: clamp(40px, 6vw, 64px);
}

.terms-article h2,
.terms-contact h2 {
    font-family: var(--display);
    color: var(--ink);
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0 0 20px;
}

.terms-article-num {
    font-family: var(--mono);
    color: var(--acc);
}

.terms-subhead {
    color: var(--ink);
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .06em;
    margin: 32px 0 16px;
}

.terms-clause,
.terms-list li {
    display: grid;
    grid-template-columns: var(--terms-gutter, 3.5rem) minmax(0, 1fr);
    gap: 0 12px;
    color: var(--ink-2);
    line-height: 1.7;
    margin-block: 16px;
}

.terms-num,
.terms-marker {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: .75rem;
    padding-top: .25em;
}

.terms-list {
    --terms-gutter: 2rem;
    list-style: none;
    margin: 16px 0 16px calc(3.5rem + 12px);
    padding: 0;
}

.terms-clause-mail {
    margin: 16px 0 16px calc(3.5rem + 12px);
    font-family: var(--mono);
    font-size: .8125rem;
}

.terms-clause-block {
    margin: 16px 0 16px calc(3.5rem + 12px);
    color: var(--ink-2);
    line-height: 1.7;
}

.terms-clause-block p { margin: 0; }

.terms-contact {
    margin-top: clamp(48px, 7vw, 80px);
}

@media (max-width: 540px) {
    .terms-clause,
    .terms-list li { grid-template-columns: 1fr; gap: 2px; }
    .terms-list { margin-left: 1.25rem; }
    .terms-clause-mail,
    .terms-clause-block { margin-left: 0; }
}

/* ============================================================
   Not found
   ============================================================ */
.not-found h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: .95;
    font-weight: 700;
    letter-spacing: -.045em;
    margin: 16px 0 24px;
}

.not-found .section-index { color: var(--acc); }

.not-found-text {
    max-width: 52ch;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 32px;
}

/* ============================================================
   Blazor error UI
   ============================================================ */
.blazor-error-boundary {
    background: var(--panel);
    padding: 1rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.blazor-error-boundary::after {
    content: "Došlo k neočekávané chybě.";
}