/* =====================================================================
   VoltaServices status: site.css
   Public pages only (status, incidents, subscribe). The admin console
   keeps foundation.css + components.css + admin.css.

   Brand     v2, mirrored from the main site (vs-2/assets/css/site.css).
             Tokens and shared components are copied, not reinvented, so
             the two sites read as one company. Keep them in step.
   Palette   paper + ink, one accent: volt (#D8F53A). Volt is only ever a
             FILL behind ink text. Status colours (ok / warn / danger) are
             semantic state, never decoration.
   Shape     interactive = pill. Panels are double-bezel: shell 26px around
             a 20px core. Inputs, chips and hover plates 12px. History bars
             are thin pills. Nothing else.
   Type      Geist for everything; Geist Mono only for small fact labels.
   Theme     follows the OS (prefers-color-scheme).
   Z-index   mobile menu 45 · nav 50 · tooltip 55 · grain 60 · skip link 70
   ===================================================================== */

:root {
    --paper:      #F2F3EF;
    --surface:    #FAFBF8;
    --surface-2:  #E8EAE4;
    --ink:        #111413;
    --ink-2:      #393E3C;
    --ink-3:      #5A605D;   /* 5.6:1 on --paper */
    --line:       #D5D8D1;
    --line-strong:#B4B9B1;
    --volt:       #D8F53A;
    --volt-ink:   #111413;
    --volt-soft:  rgba(216, 245, 58, 0.28);
    --danger:     #B42318;
    --ok:         #2F6B1F;
    --shadow:     0 1px 1px rgba(17, 20, 19, 0.04), 0 12px 32px -12px rgba(17, 20, 19, 0.14);
    --nav-bg:     rgba(242, 243, 239, 0.82);
    --shell-bg:   rgba(17, 20, 19, 0.035);
    --shell-ring: rgba(17, 20, 19, 0.07);
    --shell-ring-hover: rgba(17, 20, 19, 0.22);
    --core-hi:    rgba(255, 255, 255, 0.9);
    --grain-opacity: 0.035;

    /* Status semantics (this site only). Text variants pass AA on their wash. */
    --warn:       #B54708;
    --warn-text:  #93370D;
    --warn-wash:  rgba(181, 71, 8, 0.12);
    --danger-wash:rgba(180, 35, 24, 0.10);
    --bar-none:   #DCDFD8;
    --bar-ok:     #4F8F35;   /* 4:1 on --surface; --ok is for text */

    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "Cascadia Code", monospace;

    --r-pill: 999px;
    --r-card: 20px;
    --r-shell: 26px;
    --r-input: 12px;
    --r-chip: 12px;

    --wrap: 1240px;
    --gutter: clamp(16px, 4vw, 32px);
    --section: clamp(72px, 10vw, 136px);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:      #0F1211;
        --surface:    #161A19;
        --surface-2:  #1D2221;
        --ink:        #EEF0EA;
        --ink-2:      #C5CAC3;
        --ink-3:      #939A94;   /* 6.6:1 on --paper */
        --line:       #272D2B;
        --line-strong:#3A413E;
        --volt-soft:  rgba(216, 245, 58, 0.14);
        --danger:     #F97066;
        --ok:         #A6D96A;
        --shadow:     0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
        --nav-bg:     rgba(15, 18, 17, 0.8);
        --shell-bg:   rgba(238, 240, 234, 0.035);
        --shell-ring: rgba(238, 240, 234, 0.07);
        --shell-ring-hover: rgba(238, 240, 234, 0.24);
        --core-hi:    rgba(255, 255, 255, 0.06);
        --grain-opacity: 0.05;

        --warn:       #F5B544;
        --warn-text:  #F7C46C;
        --warn-wash:  rgba(245, 181, 68, 0.14);
        --danger-wash:rgba(249, 112, 102, 0.14);
        --bar-none:   #262C2A;
        --bar-ok:     #A6D96A;
    }
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 560; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { list-style: none; padding: 0; }
::selection { background: var(--volt); color: var(--volt-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 96px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 70;
    background: var(--ink); color: var(--paper);
    padding: 10px 18px; border-radius: var(--r-pill); font-size: 15px; text-decoration: none;
    transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.status-hero + .section, .page-hero + .section { padding-top: 0; }
.ph-light { line-height: 1; }

/* Film grain. Fixed and non-interactive so it never repaints on scroll. */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Double bezel: a machined tray (shell) holding a plate (core). */
.shell {
    padding: 6px; border-radius: var(--r-shell);
    background: var(--shell-bg);
    box-shadow: 0 0 0 1px var(--shell-ring), var(--shadow);
}
.core {
    border-radius: var(--r-card); background: var(--surface);
    box-shadow: inset 0 1px 0 var(--core-hi), 0 1px 2px rgba(17, 20, 19, 0.05);
    overflow: hidden; height: 100%;
}

/* Type scale */
.display { font-size: clamp(2.6rem, 5.4vw, 4.75rem); letter-spacing: -0.045em; line-height: 1.02; font-weight: 560; }
.h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.2; }
.lead { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; letter-spacing: -0.01em; }
.body { color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

.text-link {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: underline; text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px; text-underline-offset: 4px;
    transition: text-decoration-color 0.2s var(--ease);
}
.text-link:hover { text-decoration-color: var(--ink); }
.text-link i { transition: transform 0.5s var(--ease-spring); }
.text-link:hover i { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Buttons. Pill shape, with the arrow in its own volt bubble.
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--ink); --btn-fg: var(--paper);
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 6px 6px 6px 24px;
    border-radius: var(--r-pill);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.5s var(--ease-spring), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn__bubble {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: var(--r-pill);
    background: var(--volt); color: var(--volt-ink); font-size: 18px;
    transition: transform 0.5s var(--ease-spring);
}
.btn:hover .btn__bubble { transform: translate(3px, -1px) scale(1.06); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost .btn__bubble { background: var(--surface-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 42px; font-size: 15px; padding: 4px 4px 4px 18px; gap: 10px; }
.btn--sm .btn__bubble { width: 34px; height: 34px; font-size: 16px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .spin { display: none; animation: spin 0.9s linear infinite; }
.btn.is-loading .spin { display: block; }
.btn.is-loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* The one eyebrow per page: a pill with a volt chip. */
.pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 14px 5px 5px; margin-bottom: 26px; border-radius: var(--r-pill);
    background: var(--shell-bg); box-shadow: 0 0 0 1px var(--shell-ring), inset 0 1px 0 var(--core-hi);
    font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.pill__chip { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--volt); color: var(--volt-ink); font-size: 14px; }

/* ---------------------------------------------------------------------
   Status pills: one per state. Icon + word, never colour alone.
   --------------------------------------------------------------------- */
.state {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 5px 12px 5px 9px; border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
    background: var(--surface-2); color: var(--ink);
}
.state i { font-size: 15px; }
.state--ok { background: var(--volt); color: var(--volt-ink); }
.state--degraded, .state--partial { background: var(--warn-wash); color: var(--warn-text); }
.state--major { background: var(--danger-wash); color: var(--danger); }
.state--maint { background: var(--surface-2); color: var(--ink); }
.state--none, .state--muted { background: var(--surface-2); color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Header & navigation
   --------------------------------------------------------------------- */
.nav-sentinel { position: absolute; top: 0; height: 8px; width: 1px; }
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 14px; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.nav {
    display: flex; align-items: center; gap: 24px;
    width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto;
    height: 60px; padding: 0 8px 0 18px; border-radius: var(--r-pill);
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 0 0 1px var(--shell-ring), inset 0 1px 0 var(--core-hi);
    transition: box-shadow 0.4s var(--ease);
}
.site-header.is-stuck .nav { box-shadow: 0 0 0 1px var(--shell-ring), inset 0 1px 0 var(--core-hi), var(--shadow); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.03em; white-space: nowrap; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo__box { fill: var(--ink); }
.logo__v { stroke: var(--paper); }
.logo__dot { fill: var(--volt); }
.logo__sub { font-weight: 400; color: var(--ink-3); margin-left: -3px; }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-left: 2px; }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 8px 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav__phone:hover { color: var(--ink); }
.nav__phone i { font-size: 18px; }
.nav__actions { display: flex; align-items: center; gap: 12px; margin-left: 8px; }

/* Hamburger + mobile menu */
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); position: relative; margin-left: auto; background: var(--surface-2); }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.45s var(--ease-spring), top 0.45s var(--ease-spring); }
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed; inset: 0; z-index: 45;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
    overflow-y: auto; padding: 104px var(--gutter) 40px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu li { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.mobile-menu.is-open li { opacity: 1; transform: none; }
.mobile-menu__big { display: block; font-size: 30px; font-weight: 560; letter-spacing: -0.035em; padding: 10px 0; text-decoration: none; }
.mobile-menu__foot { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.mobile-menu__foot .btn { justify-content: space-between; }

@media (max-width: 1023px) {
    .nav__links, .nav__actions { display: none; }
    .nav__toggle { display: block; }
    .nav { width: auto; margin-inline: 12px; max-width: none; padding-right: 8px; }
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* Breadcrumb */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-3); margin-bottom: 28px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }

/* ---------------------------------------------------------------------
   Status hero: the state now (left), the track record (right)
   --------------------------------------------------------------------- */
.status-hero { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.status-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.status-hero h1 { max-width: 13ch; }
.status-hero .lead { margin-top: 24px; }
.status-hero .btn-row { margin-top: 36px; }

/* The last word of the headline carries the state. */
.hl { padding: 0 0.08em; margin-inline: -0.04em; border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.6s var(--ease), color 0.6s var(--ease); }
[data-state="ok"] .hl { background: var(--volt); color: var(--volt-ink); }
[data-state="degraded"] .hl, [data-state="partial"] .hl { background: var(--warn-wash); color: var(--warn-text); }
[data-state="major"] .hl { background: var(--danger-wash); color: var(--danger); }
[data-state="maint"] .hl { background: var(--surface-2); }

/* Live indicator: the one looping animation, and only while a refresh runs. */
.pill__chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--volt); opacity: 0; }
.is-refreshing .pill__chip::after { animation: ring 1.4s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }

.record { padding: clamp(22px, 3vw, 32px); display: grid; gap: 22px; }
.record__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.record__num { display: block; margin-top: 6px; font-size: clamp(2.8rem, 4.6vw, 4rem); font-weight: 560; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.record__num small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 4px; font-weight: 500; color: var(--ink-3); }
.record__num--none { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.04em; }
.record__caption { display: block; margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.record__chip { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--r-pill); font-size: 26px; background: var(--surface-2); color: var(--ink); transition: background-color 0.6s var(--ease), color 0.6s var(--ease); }
[data-state="ok"] .record__chip { background: var(--volt); color: var(--volt-ink); }
[data-state="degraded"] .record__chip, [data-state="partial"] .record__chip { background: var(--warn-wash); color: var(--warn-text); }
[data-state="major"] .record__chip { background: var(--danger-wash); color: var(--danger); }
.record__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 18px; }
.record__facts > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.record__facts dt { font-size: 13.5px; color: var(--ink-3); }
.record__facts dd { font-size: 26px; font-weight: 560; letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   History bars: one thin pill per day, oldest left
   --------------------------------------------------------------------- */
.bars { display: flex; align-items: stretch; gap: 2px; height: 36px; }
.bars--tall { height: 56px; gap: 1.5px; }
.bars > li { flex: 1 1 0; min-width: 2px; border-radius: var(--r-pill); background: var(--bar-none); transform-origin: 50% 100%; transition: opacity 0.2s var(--ease); }
.bars > .d-ok { background: var(--bar-ok); }
.bars > .d-degraded { background: color-mix(in srgb, var(--warn) 55%, var(--bar-none)); }
.bars > .d-partial { background: var(--warn); }
.bars > .d-major { background: var(--danger); }
.bars > .d-maint { background: var(--ink-3); }
.bars:hover > li { opacity: 0.55; }
.bars:hover > li:hover { opacity: 1; }
.bars__scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
.bars__scale b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.bars__30 { display: none; }

/* Floating day tooltip (one element, positioned by site.js). */
.tip {
    position: fixed; z-index: 55; left: 0; top: 0; pointer-events: none;
    padding: 8px 12px; border-radius: var(--r-chip);
    background: var(--ink); color: var(--paper);
    font-size: 13.5px; line-height: 1.4; white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0; transform: translate(-50%, calc(-100% - 6px));
    transition: opacity 0.18s var(--ease);
}
.tip.is-on { opacity: 1; }
.tip b { font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 6px; height: 16px; border-radius: var(--r-pill); background: var(--bar-none); }
.legend .d-ok { background: var(--bar-ok); }
.legend .d-degraded { background: color-mix(in srgb, var(--warn) 55%, var(--bar-none)); }
.legend .d-partial { background: var(--warn); }
.legend .d-major { background: var(--danger); }
.legend .d-maint { background: var(--ink-3); }

/* ---------------------------------------------------------------------
   Notices: open incidents and planned work
   --------------------------------------------------------------------- */
.notices__head { margin-bottom: 28px; }
.notices { display: grid; gap: 16px; }
.notice { padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 40px; }
.notice__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.notice h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.035em; }
.notice__body { margin-top: 10px; color: var(--ink-2); max-width: 60ch; }
.notice__facts { display: grid; align-content: start; border-top: 1px solid var(--ink); }
.notice__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.notice__facts dt { color: var(--ink-3); }
.notice__facts dd { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Incident progress: where this incident is in its life. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; grid-column: 1 / -1; }
.steps li { position: relative; padding-top: 18px; font-size: 14px; color: var(--ink-3); border-top: 2px solid var(--line); }
.steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.steps li.is-done { border-top-color: var(--ink); color: var(--ink-2); }
.steps li.is-done::before { background: var(--ink); border-color: var(--ink); }
.steps li.is-now { color: var(--ink); font-weight: 500; }
.steps li.is-now::before { background: var(--volt); border-color: var(--ink); }

/* ---------------------------------------------------------------------
   Services: one panel, a row per service
   --------------------------------------------------------------------- */
.svc-head { max-width: 720px; margin-bottom: 36px; }
.svc-head .body { margin-top: 16px; }
.svc-list > .svc + .svc { border-top: 1px solid var(--line); }
.svc { padding: clamp(22px, 3vw, 32px); }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.svc__top h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.2; }
.svc__top p { margin-top: 4px; color: var(--ink-3); font-size: 15px; line-height: 1.45; max-width: 60ch; }
.svc__note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.svc__note i { font-size: 18px; margin-top: 2px; }
.svc__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--ink-3); }
.svc__foot b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Fleet (VoltaVPN): the central server, then every node */
.fleet { display: grid; gap: 12px; margin-top: 22px; }
.fleet__central { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-chip); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.fleet__central > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-chip); background: var(--surface-2); font-size: 22px; }
.fleet__central b { display: block; font-weight: 500; letter-spacing: -0.01em; }
.fleet__central span:not(.state) { display: block; font-size: 14px; color: var(--ink-3); }
.fleet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 8px; }
.fleet__head h4 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.fleet__head span { font-size: 14.5px; color: var(--ink-3); }
.nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.node { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--r-chip); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.node > div { min-width: 0; }
.node b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.node span:not(.state) { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.node .state { padding: 3px 10px 3px 8px; font-size: 12.5px; }
/* Maintenance reads as "under works" at a glance, not just by colour. */
.node--maint { background: repeating-linear-gradient(-45deg, var(--paper) 0 9px, var(--surface-2) 9px 11px); }
.node--major { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 50%, transparent); }
.node--partial, .node--degraded { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }
.fleet__note { font-size: 14.5px; color: var(--ink-3); }

/* Details disclosure (components and models). The open panel takes its own
   full-width row under the response figures. <details> is never a flex
   container: Chrome wraps its content in an internal slot box, which would
   sit beside the summary and stretch it. */
.svc__foot > span { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; }
.more { margin-left: auto; }
.more > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px; width: max-content;
    padding: 6px 8px 6px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); color: var(--ink); font-weight: 500;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { border-color: var(--ink); }
.more > summary i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 13px; transition: transform 0.45s var(--ease-spring), background-color 0.3s var(--ease); }
.more[open] > summary i { transform: rotate(180deg); background: var(--volt); color: var(--volt-ink); }
.more__body { display: grid; gap: 22px; padding: 22px; margin-top: 14px; border-radius: var(--r-chip); background: var(--paper); color: var(--ink-2); }
.svc__foot { position: relative; }
.svc__foot .more[open] { flex-basis: 100%; margin-left: 0; }
@media (min-width: 768px) {
    /* Keep the button exactly where it was when the panel opens. */
    .svc__foot .more[open] > summary { position: absolute; top: 16px; right: 0; }
    .svc__foot .more[open] > .more__body { margin-top: 0; }
}
.more__body h4 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-bottom: 10px; }
.kv { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.kv b { color: var(--ink); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.models > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; min-width: 0; }
.models > li > span:first-child { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 13.5px; }
.models .state { padding: 3px 10px 3px 8px; font-size: 12.5px; }
.models__count { font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; }

/* Skeleton rows while models load */
.skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.skeleton span { height: 14px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s var(--ease) infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.footnote { margin-top: 22px; font-size: 14.5px; color: var(--ink-3); max-width: 70ch; }

/* ---------------------------------------------------------------------
   Recent incidents (status page): sticky intro + timeline
   --------------------------------------------------------------------- */
.recent { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.recent__intro { position: sticky; top: 108px; }
.recent__intro .body { margin-top: 16px; }
.recent__intro .text-link { margin-top: 24px; }
.timeline { border-top: 1px solid var(--ink); }
.timeline > li { display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline time { font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 19px; font-weight: 540; letter-spacing: -0.02em; line-height: 1.3; }
.timeline p { margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.timeline__took { font-size: 15px; color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Empty state: composed, never a bare sentence */
.empty { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: clamp(24px, 4vw, 40px); }
.empty > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--volt); color: var(--volt-ink); font-size: 26px; }
.empty h2, .empty h3 { font-size: 22px; letter-spacing: -0.03em; line-height: 1.25; }
.empty p { margin-top: 8px; color: var(--ink-2); max-width: 54ch; }
.empty .btn-row { margin-top: 22px; }

/* ---------------------------------------------------------------------
   Page hero (inner pages)
   --------------------------------------------------------------------- */
.page-hero { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px); }
.page-hero h1 { max-width: 14ch; }
.page-hero .lead { margin-top: 22px; }

/* Unsubscribe: one message, one decision */
.unsub { min-height: 56dvh; padding-bottom: var(--section); }
.unsub h1 { max-width: 16ch; }
.unsub .btn-row { margin-top: 32px; }
.unsub__alert { margin-top: 24px; max-width: 60ch; }
.unsub__chip { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: var(--volt); color: var(--volt-ink); font-size: 28px; }

/* Facts row (big numbers) */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.facts > div { display: flex; flex-direction: column; padding: 24px 24px 0 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { order: 2; font-size: 15px; color: var(--ink-2); line-height: 1.45; margin-top: 10px; }
.facts dd { font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 560; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Incident history: month index */
.month { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.month + .month { margin-top: clamp(48px, 6vw, 80px); }
.month__title { position: sticky; top: 108px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.04em; }
.month__title span { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.entries { border-top: 1px solid var(--ink); }
.entry { display: grid; grid-template-columns: 110px 1fr 120px; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.entry__when b { display: block; font-size: 19px; font-weight: 540; letter-spacing: -0.02em; }
.entry__when span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.entry h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); letter-spacing: -0.025em; line-height: 1.25; }
.entry__service { margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.entry__body { margin-top: 12px; color: var(--ink-2); max-width: 62ch; }
.entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.entry__took { text-align: right; }
.entry__took b { display: block; font-size: 19px; font-weight: 540; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Subscribe
   --------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: clamp(32px, 5vw, 64px) var(--section); }
.contact h1 { max-width: 12ch; }
.contact .lead { margin-top: 22px; }
.ways { margin-top: 40px; border-top: 1px solid var(--ink); }
.way { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.way i { font-size: 24px; margin-top: 2px; }
.way b { display: block; font-size: 19px; font-weight: 540; letter-spacing: -0.02em; }
.way p { color: var(--ink-3); font-size: 15px; margin-top: 2px; }
.way a { font-variant-numeric: tabular-nums; }

.form-shell { position: sticky; top: 96px; }
.form-card { padding: clamp(24px, 4vw, 44px); }
.form-card h2 { font-size: 28px; letter-spacing: -0.035em; }
.form-card > p { margin-top: 8px; color: var(--ink-3); font-size: 15px; }
.form { display: grid; gap: 24px; margin-top: 28px; }
.field { display: grid; gap: 8px; }
.field > label, .field > legend, .group-label { font-size: 15px; font-weight: 500; color: var(--ink); padding: 0; }
.field label .opt { color: var(--ink-3); font-weight: 400; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.field input[type="email"], .field input[type="tel"] {
    width: 100%; min-height: 50px; padding: 12px 16px;
    border-radius: var(--r-input); border: 1px solid var(--line-strong);
    background: var(--paper); color: var(--ink); font-size: 16px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover { border-color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--volt-soft); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__help { font-size: 13.5px; color: var(--ink-3); }
.field__error { font-size: 14px; color: var(--danger); }
.field__error:empty { display: none; }

/* Choice pills: real checkboxes and radios, styled as toggles */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 16px 8px 10px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); background: var(--paper);
    font-size: 15px; font-weight: 500; color: var(--ink-2);
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice span i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 13px; color: transparent; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.45s var(--ease-spring); }
.choice:hover span { border-color: var(--ink-3); }
.choice input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.choice input:checked + span i { background: var(--volt); color: var(--volt-ink); transform: scale(1.04); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice--child span { padding-left: 10px; }
.choice--child span::before { content: ""; width: 10px; height: 1px; background: var(--line-strong); margin-right: -2px; }
.picker { margin-top: 12px; padding: 16px; border-radius: var(--r-chip); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.picker .choice span { background: var(--surface); }

.form__alert { padding: 14px 16px; border-radius: var(--r-input); border: 1px solid var(--danger); color: var(--danger); font-size: 15px; }
.form__alert:empty { display: none; }
.form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 4px; }
.form__foot p { font-size: 13.5px; color: var(--ink-3); max-width: 32ch; }
.form-done i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--volt); color: var(--volt-ink); font-size: 28px; }
.form-done h2 { margin-top: 24px; }
.form-done p { margin-top: 10px; color: var(--ink-2); }
.form-done .btn-row { margin-top: 28px; }

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
.cta {
    /* Rule: the CTA band always has the strongest contrast against the page.
       Ink on light paper, volt on dark paper. Volt is a spark, not paint. */
    --cta-bg: #151918; --cta-fg: #EEF0EA; --cta-muted: #B8BEB7; --cta-faint: #939A94;
    --cta-btn-bg: var(--volt); --cta-btn-fg: #111413; --cta-bubble-bg: #111413; --cta-bubble-fg: var(--volt);
    --cta-glyph: var(--volt); --cta-glyph-opacity: 0.14;
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 28px; background: var(--cta-bg); color: var(--cta-fg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow);
    padding: clamp(36px, 6vw, 80px);
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end;
}
@media (prefers-color-scheme: dark) {
    .cta {
        --cta-bg: var(--volt); --cta-fg: #111413; --cta-muted: #2C322F; --cta-faint: #3B423E;
        --cta-btn-bg: #111413; --cta-btn-fg: #F2F3EF; --cta-bubble-bg: var(--volt); --cta-bubble-fg: #111413;
        --cta-glyph: #111413; --cta-glyph-opacity: 0.08;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
}
.cta h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); letter-spacing: -0.045em; max-width: 14ch; }
.cta p { margin-top: 18px; font-size: 18px; color: var(--cta-muted); max-width: 40ch; }
.cta__actions { display: grid; gap: 18px; justify-items: start; }
.cta .btn { --btn-bg: var(--cta-btn-bg); --btn-fg: var(--cta-btn-fg); }
.cta .btn .btn__bubble { background: var(--cta-bubble-bg); color: var(--cta-bubble-fg); }
.cta__phone { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 560; letter-spacing: -0.03em; text-decoration: none; font-variant-numeric: tabular-nums; display: inline-flex; gap: 10px; align-items: center; }
.cta__phone:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cta__hours { font-size: 14.5px; color: var(--cta-faint); }
.cta__glyph { position: absolute; right: 4%; top: -30%; font-size: 420px; color: var(--cta-glyph); opacity: var(--cta-glyph-opacity); z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 64px 32px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h2 { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-bottom: 16px; }
.footer ul { display: grid; gap: 8px; }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__about p { color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
.footer__contact li { color: var(--ink-2); }
.footer__phone { font-size: 20px; font-weight: 540; letter-spacing: -0.02em; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.footer__mark {
    margin-top: 56px; font-size: clamp(48px, 15.2vw, 196px); font-weight: 600; line-height: 0.82;
    letter-spacing: -0.065em; color: var(--surface-2); white-space: nowrap; overflow: hidden;
    user-select: none; padding-bottom: 0.06em;
}
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }

/* Headline word reveal: each word rises out of its own mask. The bottom
   padding keeps descenders (p, y, g) from being clipped by the mask. */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.words .w > span { display: inline-block; }

/* ---------------------------------------------------------------------
   Motion. Content is visible without JS; .js enables the reveal.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity 0.9s var(--ease), transform 1s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
    .js .reveal.in { opacity: 1; transform: none; filter: none; }
    .js .rise { animation: rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
    .js .words .w > span { animation: word 1.1s var(--ease-spring) both; animation-delay: calc(var(--w) * 55ms + 120ms); }
    /* History fills in left to right, once, when it scrolls into view. */
    .js .bars > li { transform: scaleY(0.25); opacity: 0; }
    .js .in .bars > li, .js .bars.in > li { transform: none; opacity: 1; transition: transform 0.7s var(--ease-spring), opacity 0.4s var(--ease); transition-delay: calc(var(--i, 0) * 6ms + 120ms); }
    .js .in .bars:hover > li, .js .bars.in:hover > li { transition-delay: 0s; }
    @keyframes word { from { transform: translateY(105%); } }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
}
@media (prefers-reduced-transparency: reduce) {
    .nav, .mobile-menu { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav { background: var(--surface); }
    .mobile-menu { background: var(--paper); }
    body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .status-hero__grid, .recent, .contact, .cta, .month, .notice { grid-template-columns: 1fr; }
    .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recent__intro, .form-shell, .month__title { position: static; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    /* Thirty days fit a phone; ninety turn into a grey smear. */
    .bars--90 > li:nth-child(-n+60) { display: none; }
    .bars__90 { display: none; }
    .bars__30 { display: inline; }
    .bars--tall { height: 48px; }
    .record__facts dd { font-size: 22px; }
    .facts { grid-template-columns: 1fr; }
    .facts > div, .facts > div + div { padding: 20px 0 0; border-left: 0; }
    .facts > div + div { margin-top: 20px; border-top: 1px solid var(--line); }
    .svc__top { flex-direction: column; gap: 12px; }
    .more { margin-left: 0; }
    .models, .skeleton, .nodes { grid-template-columns: 1fr; }
    .fleet__central { grid-template-columns: 40px 1fr; }
    .fleet__central > .state { grid-column: 2; justify-self: start; }
    .models > li > span:first-child { white-space: normal; overflow-wrap: anywhere; }
    .bars__scale { flex-wrap: wrap; row-gap: 4px; }
    .bars__scale > span:nth-child(2):not(:last-child) { order: 3; flex-basis: 100%; }
    .timeline > li { grid-template-columns: 1fr; gap: 6px; }
    .timeline__took { text-align: left; }
    .entry { grid-template-columns: 1fr; gap: 10px; }
    .entry__when { display: flex; gap: 10px; align-items: baseline; }
    .entry__when span { margin-top: 0; }
    .entry__took { text-align: left; display: flex; gap: 8px; align-items: baseline; }
    .entry__took b { display: inline; font-size: 16px; }
    .steps { grid-template-columns: 1fr 1fr; row-gap: 22px; }
    .empty { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .btn-row .btn { width: 100%; justify-content: space-between; }
}