:root {
    --bg: #0b111b;
    --surface: #111a28;
    --surface-2: #16202f;
    --surface-3: #1c2839;
    --line: #23324a;
    --line-soft: #1a2537;
    --text: #e9eef6;
    --muted: #97a6bd;
    /* Brand accent for fills, borders and icons. */
    --accent: #0f80ce;
    /* Lighter tint for accent-coloured TEXT: the brand blue is 4.2:1 on these
       dark surfaces, just under AA. */
    --accent-text: #3fa3e8;
    /* Slightly deeper fill so white button labels clear AA at 5.7:1. */
    --accent-btn: #0c6aab;
    --accent-dark: #0a5a93;
    --accent-soft: rgba(15, 128, 206, 0.14);
    --ok: #37a06d;
    --warn: #d4574a;
    --radius: 4px;
    --wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(23px, 2.8vw, 31px); }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links sitting inside a block of text need more than colour to stand out. */
p a, dd a, .check a, .legal li a, .coverage-result a {
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(63, 163, 232, 0.55);
}
p a:hover, dd a:hover, .check a:hover, .coverage-result a:hover { text-decoration-color: currentColor; }
.footer-bottom a, .poweredby { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.narrow { width: min(760px, calc(100% - 40px)); }
.muted { color: var(--muted); }

/* Icons */
.icon {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.icon-sprite { display: none; }
.icon-xs { width: 14px; height: 14px; stroke-width: 1.9; }
.icon-sm { width: 16px; height: 16px; stroke-width: 1.8; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--accent-btn); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11, 17, 27, 0.94);
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(6px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: 43px; height: 30px; flex: none; }
.brand-mark-sm { width: 34px; height: 24px; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.site-nav a:not(.btn) { color: var(--muted); }
.site-nav a:not(.btn):hover { color: var(--text); text-decoration: none; }
.site-nav .btn-primary { color: #fff; }
.header-phone {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text) !important; font-variant-numeric: tabular-nums;
}
.header-phone .icon { color: var(--accent); }

/* Buttons */
.btn {
    display: inline-block; padding: 12px 20px; border-radius: var(--radius);
    border: 1px solid transparent; font-size: 15px; font-weight: 600;
    cursor: pointer; text-align: center; font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-btn); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-block { display: block; width: 100%; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 84px 0 64px; border-bottom: 1px solid var(--line-soft);
    background:
        radial-gradient(900px 380px at 78% -10%, rgba(15, 128, 206, 0.20), transparent 65%),
        linear-gradient(180deg, #0d1522, var(--bg)); }
.hero-inner { position: relative; max-width: 760px; }
.hero-deco {
    position: absolute; top: 30px; right: -30px; width: 430px; height: 360px;
    color: var(--accent); opacity: 0.17; pointer-events: none;
    fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round;
}
.eyebrow { color: var(--accent-text); font-size: 13px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 14px; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 9px; }
.trust .icon { color: var(--accent); }

/* Sections */
.section { padding: 72px 0; }
.section-alt { background: #0d1421; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.band { padding: 64px 0; background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-title { margin-bottom: 8px; }
.section-lede { color: var(--muted); margin-bottom: 32px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 28px; }
.steps li { border-top: 2px solid var(--line); padding-top: 18px; }
.step-icon {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
    border-radius: var(--radius); background: var(--accent-soft); color: var(--accent);
    border: 1px solid rgba(15, 128, 206, 0.32);
}
.step-n { display: block; margin-bottom: 5px; color: var(--accent-text); font-weight: 700;
    font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.steps p { color: var(--muted); font-size: 15px; margin: 0; }

/* Package cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.card-popular { border-color: var(--accent); }
.card-flag {
    position: absolute; top: -11px; left: 26px;
    background: var(--accent-btn); color: #fff; font-size: 12px; font-weight: 650;
    padding: 3px 10px; border-radius: var(--radius); margin: 0;
}
.card-brand { display: flex; align-items: center; gap: 10px; color: var(--accent-text); font-size: 13px;
    font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.card-badge {
    display: grid; place-items: center; width: 30px; height: 30px; flex: none;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent);
}
.card-title { margin-bottom: 8px; font-size: 21px; }
.card-tagline { color: var(--muted); font-size: 15px; min-height: 66px; }
.card-price { font-size: 36px; font-weight: 680; letter-spacing: -0.02em; margin: 6px 0 2px; }
.card-deposit { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.chips li { display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 4px 9px; font-size: 12.5px; color: var(--muted); }
.chips .icon { color: var(--accent); }
.ticks { display: grid; gap: 9px; margin-bottom: 24px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--text); }
.ticks li::before {
    content: ""; position: absolute; left: 4px; top: 7px;
    width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticks-columns { grid-template-columns: repeat(2, 1fr); gap: 12px 34px; margin-bottom: 0; }
.card .btn { margin-top: auto; }

/* Icon list */
.icon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 34px; }
.icon-list li { display: flex; align-items: center; gap: 13px; font-size: 14.5px; }
.il-icon {
    display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent);
}

/* Areas covered */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 22px; }
.areas li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted); }
.areas .icon { color: var(--accent); }

/* FAQ */
details { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
summary { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
.summary-chevron { color: var(--accent); transition: transform 0.15s ease; }
details[open] .summary-chevron { transform: rotate(180deg); }
details p { color: var(--muted); margin: 12px 0 0 28px; }

/* CTA band */
.cta { padding: 56px 0; background: linear-gradient(180deg, var(--surface), #0d1421); border-top: 1px solid var(--line-soft); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta h2 { margin-bottom: 4px; }
.cta p { margin: 0; }

/* Booking layout */
.booking { padding: 44px 0 80px; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }

.alert {
    background: rgba(212, 87, 74, 0.12); border: 1px solid rgba(212, 87, 74, 0.5);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px;
}
.alert p { margin: 0; }

.progress { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.progress li {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 0; min-width: 90px; font-size: 13px; color: var(--muted);
    border-top: 3px solid var(--line); padding-top: 10px;
}
.progress li.is-active { color: var(--text); border-top-color: var(--accent); font-weight: 600; }
.progress li.is-done { color: var(--muted); border-top-color: var(--accent-dark); }
.progress li.is-active .icon, .progress li.is-done .icon { color: var(--accent); }

.step { border: 0; padding: 0; margin: 0 0 28px; }
.js-steps .step { display: none; }
.js-steps .step.is-current { display: block; }
.step-title { font-size: 21px; font-weight: 650; padding: 0; margin-bottom: 10px; }
.step-lede { color: var(--muted); font-size: 15px; }
.step-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* Package picker */
.picker { display: grid; gap: 10px; }
.pick { display: block; position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-body {
    display: block; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 15px 17px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pick:hover .pick-body { border-color: #33496b; }
.pick input:checked + .pick-body { border-color: var(--accent); background: var(--accent-soft); }
.pick input:focus-visible + .pick-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.pick-name { display: flex; align-items: center; gap: 11px; font-weight: 650; }
.pick-price { font-weight: 650; font-size: 18px; }
.pick-meta { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; padding-left: 41px; }
.pick-note { display: block; color: var(--muted); font-size: 13.5px; margin-top: 6px; padding-left: 41px; }

/* Calendar */
.calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 18px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-label { margin: 0; font-weight: 650; }
.cal-nav {
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
    border-radius: var(--radius); width: 36px; height: 34px; cursor: pointer;
}
.cal-nav .icon { width: 18px; height: 18px; }
.cal-nav:hover:not(:disabled) { background: var(--surface-3); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays li { text-align: center; font-size: 12px; color: var(--muted); }
.cal-day {
    aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cal-day .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
.cal-day:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); }
.cal-day:disabled { background: transparent; border-color: var(--line-soft); color: #4d5c73; cursor: not-allowed; }
.cal-day:disabled .dot { display: none; }
.cal-error { grid-column: 1 / -1; }
.cal-day.is-selected,
.cal-day.is-selected:hover:not(:disabled) { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; font-weight: 650; }
.cal-day.is-selected .dot { background: #fff; }
.cal-empty { aspect-ratio: 1 / 1; }
.cal-key { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.key-open, .key-closed { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.key-open { background: var(--surface-2); border: 1px solid var(--accent); }
.key-closed { background: transparent; border: 1px solid var(--line-soft); margin-left: 12px; }

/* Slots */
.slots { margin-top: 18px; }
.slots-title { font-weight: 600; margin-bottom: 10px; }
.slot-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.slot {
    display: flex; align-items: center; gap: 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 13px 16px; cursor: pointer; color: var(--text); font-family: inherit; text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.slot:hover:not(:disabled) { border-color: var(--accent); }
.slot-icon {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent);
}
.slot-text { display: flex; flex-direction: column; gap: 2px; }
.slot-label { font-weight: 650; font-size: 15px; }
.slot-time { color: var(--muted); font-size: 13px; }
.slot:disabled { opacity: 0.4; cursor: not-allowed; }
.slot.is-selected,
.slot.is-selected:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }

/* Form fields */
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.optional { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: #5f6f88; }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input[aria-invalid="true"] { border-color: var(--warn); }
textarea { resize: vertical; }
.field-error { color: #f0857a; font-size: 13.5px; margin: 6px 0 0; }

.paybox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 6px; }
.paybox-note { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.paybox-note .icon { color: var(--accent); margin-top: 1px; }
.field-check { margin-top: 18px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--muted); }
.check input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px; }

/* Summary sidebar */
.summary {
    position: sticky; top: 88px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.summary-title { font-size: 17px; margin-bottom: 16px; }
.summary-list, .summary-money { margin: 0 0 18px; }
.summary-list div, .summary-money div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.summary-list { border-bottom: 1px solid var(--line-soft); }
.summary-list dt, .summary-money dt { color: var(--muted); font-size: 14px; }
.summary-list dt { display: flex; align-items: center; gap: 9px; }
.summary-list .icon { color: var(--accent); }
.summary-list dd, .summary-money dd { margin: 0; font-size: 14.5px; text-align: right; font-weight: 600; }
.summary-money .due-now { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 12px; }
.summary-money .due-now dt { color: var(--text); font-weight: 600; }
.summary-money .due-now dd { color: var(--accent-text); font-size: 19px; }
.summary-note { color: var(--muted); font-size: 13px; margin-bottom: 8px; }

/* Confirmation */
.confirm-head { margin-bottom: 30px; }
.confirm-flag { display: inline-flex; align-items: center; gap: 8px;
    background: rgba(55, 160, 109, 0.15); border: 1px solid var(--ok);
    color: #6fd3a2; font-size: 13px; font-weight: 650; padding: 5px 12px; border-radius: var(--radius); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.panel-title { font-size: 17px; margin-bottom: 14px; }
.detail-list div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; flex: 0 0 40%; }
.detail-list dt .icon { color: var(--accent); }
.detail-list dd { margin: 0; text-align: right; }
.detail-list .due dd { color: var(--accent-text); font-weight: 650; font-size: 18px; }
.ics-link { display: block; font-size: 13px; color: var(--accent-text); }
.next-steps { counter-reset: n; display: grid; gap: 10px; margin-bottom: 14px; }
.next-steps li { counter-increment: n; position: relative; padding-left: 30px; color: var(--muted); }
.next-steps li::before {
    content: counter(n); position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-text); font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* Footer */
.site-footer { background: #080d15; border-top: 1px solid var(--line-soft); padding: 52px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; padding-bottom: 30px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; margin-bottom: 12px; }
.footer-line { display: flex; align-items: center; gap: 10px; }
.footer-line .icon { color: var(--accent); }
.footer-heading { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.site-footer p { font-size: 14.5px; margin-bottom: 6px; }
/* One row at every width. The credit is the only thing that can be squeezed,
   so it shrinks rather than dropping to a second line. */
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap;
    border-top: 1px solid var(--line-soft); padding-top: 20px;
}
.footer-bottom p { margin: 0; font-size: 13px; white-space: nowrap; }
.poweredby { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; min-width: 0; }
.poweredby:hover { color: var(--text); text-decoration: none; }
.poweredby img { height: 18px; width: auto; opacity: 0.8; }
.poweredby:hover img { opacity: 1; }

/* Below this the two halves no longer both fit, so the credit drops to the
   logo alone, which still reads as VoovodeNET, rather than wrapping. */
@media (max-width: 380px) {
    .poweredby span { display: none; }
    .poweredby img { height: 16px; }
}

@media (max-width: 980px) {
    .hero-deco { width: 320px; height: 265px; top: 12px; right: -46px; opacity: 0.14; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .booking-grid { grid-template-columns: 1fr; }
    .summary { position: static; order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .wrap, .narrow { width: calc(100% - 32px); }

    /* Header: icon-only phone so the brand and the booking button both fit */
    .site-nav a:not(.btn):not(.header-phone) { display: none; }
    .site-nav { gap: 12px; }
    .header-phone { min-width: 40px; min-height: 40px; justify-content: center; }
    .header-phone-text { display: none; }
    .brand-name { white-space: nowrap; font-size: 15px; }
    .brand-mark { width: 28px; height: 28px; }
    .brand-mark .icon { width: 18px; height: 18px; }
    .site-nav .btn-sm { padding: 10px 14px; }

    .hero { padding: 42px 0 44px; }
    .hero-deco { width: 220px; height: 183px; top: 8px; right: 4px; opacity: 0.15; }
    .hero-actions { gap: 10px; }
    .hero-actions .btn { flex: 1 1 100%; }
    .lede { font-size: 17px; }
    .trust { gap: 11px 20px; }
    .trust li { flex: 1 1 100%; }

    .section, .band { padding: 52px 0; }
    .cta { padding: 44px 0; }
    .grid { grid-template-columns: 1fr; }
    .card { padding: 22px; }
    .card-tagline { min-height: 0; }
    .card-price { font-size: 32px; }
    .steps { grid-template-columns: 1fr; gap: 26px; }
    .field-row { grid-template-columns: 1fr; }
    .ticks-columns, .icon-list { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    /* Booking: full-width actions, roomier slots, no iOS zoom on focus */
    .booking { padding: 28px 0 60px; }
    .slot-buttons { grid-template-columns: 1fr; }
    .slot { padding: 15px 16px; }
    .step-actions { flex-direction: column-reverse; }
    .step-actions .btn { width: 100%; }
    .progress li { min-width: 0; font-size: 12px; }
    .progress li .icon { display: none; }
    .calendar { padding: 14px; }
    .cal-grid, .cal-weekdays { gap: 4px; }
    .cal-day { font-size: 14px; }
    .cal-nav { width: 42px; height: 40px; }
    input[type="text"], input[type="email"], input[type="tel"], textarea { font-size: 16px; padding: 12px 13px; }
    .check input { width: 20px; height: 20px; }

    /* Summary sits above the form on mobile, so keep it tight */
    .summary { padding: 18px; }
    .summary-note { display: none; }
    .summary-list div, .summary-money div { padding: 6px 0; }

    .detail-list div { flex-direction: column; gap: 4px; }
    .detail-list dt { flex: none; }
    .detail-list dd { text-align: left; }
    .panel { padding: 20px; }
}

@media (max-width: 380px) {
    .brand-name { display: none; }
    .cal-day { font-size: 13px; }
}

/* ============================================================ phase 2 */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.link-button {
    background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text);
    cursor: pointer; text-decoration: none;
}
.link-button:hover { text-decoration: underline; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head .section-lede { margin-bottom: 0; }
.section-spaced { margin-top: 48px; }

/* Scenes behind the package sections */
/* Darkened video backdrops. The veil is what keeps headings legible: the
   footage never carries more than a fraction of the section's brightness. */
.section-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.section-media-still, .section-media-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.46;
}
.section-media-video { opacity: 0; transition: opacity 0.6s ease; }
.section-media-video.is-playing { opacity: 0.46; }
.section-media-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(11, 17, 27, 0.92) 0%,      /* heading and lede sit in here, so keep it heavy */
            rgba(11, 17, 27, 0.80) 20%,
            rgba(11, 17, 27, 0.44) 34%,     /* past the text: let the footage breathe */
            rgba(11, 17, 27, 0.44) 74%,
            rgba(11, 17, 27, 0.88) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .section-media-video { display: none; }
}
.section-indoor { position: relative; overflow: hidden; }
.section-outdoor { position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0c1524, #0b1220); }
.section-indoor > .wrap, .section-outdoor > .wrap { position: relative; }

/* Coverage checker */
.coverage-band {
    padding: 40px 0; background: var(--surface);
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.coverage-inner { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; }
.coverage-copy h2 { font-size: 22px; margin-bottom: 4px; }
.coverage-copy p { margin: 0; font-size: 14.5px; }
.coverage-form { display: flex; gap: 10px; }
.coverage-input { position: relative; display: flex; align-items: center; }
.coverage-input .icon { position: absolute; left: 12px; color: var(--accent); }
.coverage-input input {
    width: 220px; padding: 12px 14px 12px 38px; font: inherit; font-size: 16px;
    text-transform: uppercase; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.coverage-input input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.coverage-result {
    grid-column: 1 / -1; margin: 0; padding: 12px 15px; font-size: 15px;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2);
}
.coverage-result.is-covered { border-color: var(--ok); background: rgba(55, 160, 109, 0.12); }
.coverage-result.is-outside { border-color: var(--line); }
.coverage-result.is-checking { color: var(--muted); }
.coverage-note { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.coverage-note.is-covered { color: #6fd3a2; }
.coverage-note.is-outside { color: #f0b57a; }

/* Add-ons */
.addons { display: grid; gap: 10px; }
.addon {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.addon-icon {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent);
}
.addon-name { font-weight: 650; margin: 0 0 3px; }
.addon-desc { color: var(--muted); font-size: 13.5px; margin: 0; }
.addon-buy { display: flex; align-items: center; gap: 14px; }
.addon-price { margin: 0; font-weight: 650; white-space: nowrap; }
.addon-price span { color: var(--muted); font-weight: 400; font-size: 12.5px; }
select {
    font: inherit; font-size: 15px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px;
}
select:focus { border-color: var(--accent); outline: none; }
input[type="date"], input[type="password"], input[type="file"] {
    font: inherit; font-size: 15px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; width: 100%;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }

.summary-extras { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-bottom: 14px; }
.summary-extras li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); padding: 3px 0; }

/* Reviews and gallery */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.stars { display: inline-flex; gap: 2px; margin: 0 0 10px; }
.star { color: var(--line); }
.star.is-on { color: #e0a94a; }
.star .icon { fill: currentColor; stroke: currentColor; }
.review-headline { font-size: 16px; margin-bottom: 8px; }
.review-body { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.review-meta { font-size: 13px; margin: 0; }
.rating-summary { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.rating-value { font-size: 30px; font-weight: 680; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-bottom: 34px; }
.gallery-strip { grid-template-columns: repeat(4, 1fr); }
.shot { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shot img { display: block; width: 100%; height: 190px; object-fit: cover; }
.shot figcaption { display: grid; gap: 3px; padding: 12px 14px; font-size: 13.5px; }
.shot figcaption .muted { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.empty-state { text-align: center; }
.empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.feedback-head { margin-bottom: 32px; }

/* Town pages */
.hero-area { padding: 64px 0 52px; }
.area-copy { color: var(--muted); font-size: 16px; }
.panel-inline { margin-top: 28px; }
.panel-title .icon { color: var(--accent); vertical-align: -2px; margin-right: 8px; }
.chips-wide li { font-size: 13px; }
.card-compact .card-price { font-size: 28px; }
.card-compact { padding: 22px; }

/* Legal pages */
.legal h2 { margin-top: 34px; font-size: 20px; }
.legal p, .legal td { color: var(--muted); }
.legal .lede { color: var(--muted); }
.notice {
    display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 8px;
    background: rgba(224, 169, 74, 0.10); border: 1px solid rgba(224, 169, 74, 0.45);
    border-radius: var(--radius); padding: 14px 16px;
}
.notice .icon { color: #e0a94a; margin-top: 3px; }
.notice p { margin: 0; color: var(--text); font-size: 14.5px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal-table th { color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.legal-quote { margin: 18px 0; padding: 16px 18px; background: var(--surface); border-left: 3px solid var(--accent); }
.legal-quote p { margin: 0; font-size: 14.5px; line-height: 2; }
.legal-updated { margin-top: 34px; font-size: 13px; color: var(--muted); }

/* Consent banner */
.consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface); border-top: 1px solid var(--line);
}
.consent-inner {
    width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; padding: 16px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.consent p { margin: 0; font-size: 14px; color: var(--muted); max-width: 70ch; }
.consent-actions { display: flex; gap: 10px; }

.footer-legal {
    display: flex; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 20px;
    font-size: 13.5px; border-bottom: 1px solid var(--line-soft); margin-bottom: 20px;
}

/* Admin */
.admin-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.admin-main { padding: 32px 0 80px; }
.admin-title { font-size: 26px; margin-bottom: 18px; }
.admin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.admin-head .admin-title { margin: 0; }
.inline-form { display: inline-flex; gap: 8px; }
.admin-login { display: grid; place-items: center; padding: 60px 20px; }
.login-panel { width: min(400px, 100%); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 680; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
    padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--surface); color: var(--muted); font-size: 14px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: nowrap; }
.admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 12px; text-transform: capitalize; border: 1px solid var(--line); }
.pill-confirmed { color: #6fd3a2; border-color: var(--ok); background: rgba(55, 160, 109, 0.12); }
.pill-completed { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.pill-cancelled { color: #f0857a; border-color: var(--warn); background: rgba(212, 87, 74, 0.12); }

.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.admin-row:last-child { border-bottom: 0; }
.admin-row-title { margin: 0 0 2px; font-weight: 600; font-size: 14.5px; }
.admin-row p { margin: 0; font-size: 13px; }
.admin-thumb { display: flex; align-items: center; gap: 12px; }
.admin-thumb img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.btn-danger { color: #f0857a; }
.btn-danger:hover { background: rgba(212, 87, 74, 0.12); }
.action-form { margin-top: 16px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.alert-ok { background: rgba(55, 160, 109, 0.12); border-color: var(--ok); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

@media (max-width: 980px) {
    .review-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .admin-columns { grid-template-columns: 1fr; }
    .coverage-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .review-grid, .gallery, .gallery-strip { grid-template-columns: 1fr; }
    .addon { grid-template-columns: auto 1fr; row-gap: 12px; }
    .addon-buy { grid-column: 1 / -1; justify-content: space-between; }
    .coverage-form { flex-direction: column; }
    .coverage-input, .coverage-input input { width: 100%; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
    .legal-table td { border: 0; padding: 4px 0; }
    .consent-inner { flex-direction: column; align-items: stretch; }
    .consent-actions .btn { flex: 1; }
    .section-media-still, .section-media-video.is-playing { opacity: 0.34; }
}

/* Third-party review platform link-outs */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.platform {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
    background: var(--panel); color: var(--text);
}
.platform:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.platform-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 8px; background: rgba(15,128,206,0.12); color: var(--accent-text); }
.platform-body { display: flex; flex-direction: column; gap: 3px; }
.platform-name { font-weight: 600; }
.platform-note { font-size: 13.5px; }

/* ================================================ mobile navigation
   The nav links used to be display:none below 720px with nothing replacing
   them, so Systems / How it works / FAQ were unreachable on a phone. */

.nav-toggle { display: none; }

@media (max-width: 720px) {
    .nav-toggle {
        display: grid; place-items: center;
        width: 42px; height: 42px; padding: 0;
        background: transparent; border: 1px solid var(--line);
        border-radius: var(--radius); color: var(--text); cursor: pointer;
    }
    .nav-bars { display: grid; gap: 4px; width: 18px; }
    .nav-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; }

    /* The panel replaces the inline row rather than sitting alongside it. */
    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 20px 16px;
        background: rgba(11, 17, 27, 0.98);
        border-bottom: 1px solid var(--line);
        max-height: 0; overflow: hidden; visibility: hidden;
        transition: max-height 0.22s ease, visibility 0s linear 0.22s;
    }
    .site-nav.is-open { max-height: 60vh; overflow-y: auto; visibility: visible; transition-delay: 0s; }

    /* Undo the old hide-everything rule now the links have somewhere to live. */
    .site-nav a:not(.btn):not(.header-phone) {
        display: block; padding: 14px 2px; font-size: 16px;
        color: var(--text); border-bottom: 1px solid var(--line-soft);
    }
    .site-nav .header-phone {
        display: flex; justify-content: flex-start; gap: 10px;
        padding: 14px 2px; min-height: 48px;
        border-bottom: 1px solid var(--line-soft);
    }
    .header-phone-text { display: inline; }
    .site-nav .nav-book { display: block; margin-top: 14px; padding: 13px 16px; }

    .header-inner { position: relative; }

    /* One primary action per screen. Stacked, the six package cards read as six
       identical blue blocks competing with each other. The card becomes the tap
       target and the button drops back to a link. */
    .card { position: relative; }
    .card .btn-block {
        display: inline-flex; align-items: center; gap: 6px;
        width: auto; padding: 6px 0; min-height: 44px;
        background: none; border: 0; border-radius: 0;
        color: var(--accent-text); text-align: left;
    }
    .card .btn-block::after { content: "\203A"; font-size: 19px; line-height: 1; }
    .card .btn-block::before { content: ""; position: absolute; inset: 0; }

    /* The bar already carries Book, so the hero keeps a single filled button. */
    .hero-actions { gap: 4px; }
    .hero-actions .btn-ghost {
        background: none; border: 0; padding: 10px 0; min-height: 44px;
        color: var(--accent-text); text-decoration: underline;
    }

    /* Roomier calendar targets: 44px is the accessible minimum. */
    .cal-day { min-height: 44px; }
    /* The phone number in the booking summary is a conversion path, not a note. */
    .summary-note { display: block; }
    .summary-note:first-of-type { display: none; }
    /* Stop the hero graphic crowding the headline on narrow screens. */
    .hero-deco { width: 180px; height: 150px; top: 4px; right: -12px; opacity: 0.1; }
    .platforms { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- admin --- */

.admin { padding: 40px 0 72px; }
.admin-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.admin-head h1 { margin: 0; font-size: 26px; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.admin-nav a { color: var(--muted); font-size: 15px; }
.admin-nav a:hover { color: var(--text); }
.admin-nav a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.admin-logout { margin: 0; }

.admin-flash {
    margin-bottom: 20px; padding: 12px 16px; border-radius: var(--radius);
    border: 1px solid var(--accent); background: rgba(15, 128, 206, 0.1); font-size: 15px;
}
.admin-flash-error { border-color: #d4574a; background: rgba(212, 87, 74, 0.12); }
.admin-flash-warn { border-color: #d9a441; background: rgba(217, 164, 65, 0.12); }

.admin-form { max-width: 780px; }
.admin-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.admin-form input[type="text"], .admin-form input[type="password"] {
    width: 100%; max-width: 340px; padding: 11px 13px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--text); font: inherit; font-size: 15px;
}
.admin-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-form .btn { margin-top: 18px; }

.admin-select, .admin-date, .admin-textarea, .admin-form input[type="file"] {
    display: block; width: 100%; max-width: 340px; margin-bottom: 18px; padding: 11px 13px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--text); font: inherit; font-size: 15px;
}
.admin-textarea { max-width: 560px; resize: vertical; }
.admin-select:focus-visible, .admin-date:focus-visible, .admin-textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}

.admin-summary { margin: 0 0 22px; font-size: 16px; color: var(--muted); }
.admin-summary strong { color: var(--text); }

.admin-actions { display: grid; gap: 0; }
.admin-inline { display: inline; margin: 0; }
.admin-photo {
    width: 90px; height: 60px; object-fit: cover;
    border-radius: 3px; border: 1px solid var(--line);
}

.admin-block { margin: 0 0 30px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-block legend { padding: 0 8px; font-size: 15px; font-weight: 640; color: var(--accent-text); }
.admin-block .muted { font-size: 14px; }
.admin-field { margin-bottom: 18px; }

.admin-money { display: inline-flex; align-items: center; gap: 7px; }
.admin-money span { color: var(--muted); font-size: 15px; }
.admin-money input { max-width: 120px; }
.admin-form input.admin-short { max-width: 120px; }
.admin-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.admin-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* The install diary. Taller cells than the public calendar, because each one
   carries a booking or a reason rather than just a number. */
.admin-wide { max-width: none; }
.admin-cal-nav { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 16px; font-size: 14px; }
.admin-cal-weekdays, .admin-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.admin-cal-weekdays { margin: 18px 0 6px; padding: 0; list-style: none; }
.admin-cal-weekdays li { text-align: center; font-size: 12px; color: var(--muted); }
.admin-cal-day, .admin-cal-empty { min-height: 94px; }
.admin-cal-day {
    display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; font-size: 12.5px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.admin-cal-day .cal-n { font-weight: 650; font-size: 14px; }
.admin-cal-day .cal-note { color: var(--muted); }
.admin-cal-day .link-button { margin-top: auto; align-self: flex-start; font-size: 12px; }
.admin-cal-day.is-off { background: transparent; border-color: var(--line-soft); color: #4d5c73; }
.admin-cal-day.is-booked { border-color: var(--accent); background: rgba(15, 128, 206, 0.1); }
.admin-cal-day.is-blocked { border-color: #d4574a; background: rgba(212, 87, 74, 0.1); }
.admin-cal-key { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) {
    .admin-cal-weekdays, .admin-cal-grid { gap: 3px; }
    .admin-cal-day, .admin-cal-empty { min-height: 78px; }
    .admin-cal-day { padding: 5px; font-size: 11.5px; }
}

.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.admin-table th, .admin-table td {
    padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
.admin-table th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.admin-table .num { text-align: right; }
.admin-table tr.is-off td, .admin-table tr.is-cancelled td { opacity: 0.45; }
/* A cost that has gone stale, or a margin under target. Warn, do not alarm. */
.is-stale { color: #b4791f; font-weight: 600; }

.admin-detail { display: grid; gap: 2px; max-width: 700px; }
.admin-kv {
    display: grid; grid-template-columns: 160px 1fr; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.admin-kv dt { color: var(--muted); font-size: 14px; }
.admin-kv dd { margin: 0; font-size: 15px; }
.admin-result { margin-top: 14px; font-size: 15px; color: var(--accent-text); }
/* Back-office chrome: no marketing nav, no CTA, no consent banner. */
.admin-header .header-inner { justify-content: space-between; }
.admin-tag {
    margin-left: 10px; padding: 2px 8px; border-radius: var(--radius);
    background: var(--surface-3); border: 1px solid var(--line);
    color: var(--muted); font-size: 12px; font-weight: 650;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.admin-viewsite { color: var(--muted); font-size: 14px; }
.admin-viewsite:hover { color: var(--text); }
.admin-footer { padding: 26px 0; }
.admin-footer .footer-bottom { border-top: 0; margin: 0 auto; padding: 0; }

/* Sign in: a centred card, not a form loose on an empty page. */
.admin-login {
    display: grid; place-items: center;
    min-height: calc(100vh - 64px - 92px); padding: 40px 20px;
}
.login-card {
    width: min(400px, 100%); padding: 34px 32px 32px; text-align: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.login-mark { display: block; width: 72px; height: 50px; margin: 0 auto 18px; }
.login-card h1 { font-size: 25px; margin-bottom: 4px; }
.login-card .muted { font-size: 14px; margin-bottom: 24px; }
.login-form { text-align: left; margin-top: 4px; }
.login-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.login-form input[type="password"] {
    width: 100%; padding: 12px 13px; margin-bottom: 6px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--text); font: inherit; font-size: 15px;
}
.login-form .btn { margin-top: 14px; }

@media (max-width: 720px) {
    .admin-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .admin-nav { gap: 14px; }
    .admin-kv { grid-template-columns: 1fr; gap: 2px; }
    .admin-block { padding: 16px; }
}