/* ---------------------------------------------------------------------------
   Security Operations Center Toolkit — house style
   Direction: calm daylight, not hacker dark. Palette derived from the badge:
   navy ink, azure blue for actions, orange reserved for signals and accents.
   Monospace is used only for machine-ish labels, which is where the subject's
   own vernacular lives.
   --------------------------------------------------------------------------- */

:root {
    --ink: #0b1f33;
    --ink-soft: #38516c;
    --ink-faint: #6a7f96;
    --paper: #eef2f7;
    --surface: #ffffff;
    --rule: #d4dde7;
    --signal: #0b62b0;
    --signal-dark: #084d8b;
    --alert: #c25000;
    --ok: #1d6b3f;

    --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    --step: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
    --radius: 4px;
}

/* Base ------------------------------------------------------------------- */

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--signal-dark);
    text-underline-offset: 0.2em;
}

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

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--surface);
    padding: 0.75rem 1.25rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Typography ------------------------------------------------------------- */

.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    max-width: 20ch;
    margin: 0 0 1rem;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.section-title--xl {
    font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem);
    margin-bottom: 0.35rem;
}

.section-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.75rem;
}

.lead-text {
    font-size: 1.1875rem;
    color: var(--ink-soft);
    max-width: 62ch;
}

.section {
    padding: calc(var(--step) * 2.4) 0;
}

/* Buttons ---------------------------------------------------------------- */

.btn-signal,
.btn-quiet {
    display: inline-block;
    font-weight: 600;
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-signal {
    background: var(--signal);
    color: var(--surface);
    border: 1px solid var(--signal);
}

.btn-signal:hover,
.btn-signal:focus {
    background: var(--signal-dark);
    border-color: var(--signal-dark);
    color: var(--surface);
}

.btn-quiet {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
}

.btn-quiet:hover,
.btn-quiet:focus {
    border-color: var(--ink);
    color: var(--ink);
}

/* Header ----------------------------------------------------------------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--ink);
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
}

.brand__suffix {
    color: var(--alert);
    font-weight: 600;
}

.brand__mark {
    flex: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-grow: 0;
}

.site-nav__links {
    display: flex;
    gap: 1.25rem;
}

.site-nav__links a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav__links a:hover,
.site-nav__links a:focus {
    border-bottom-color: var(--signal);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lang-switch {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin: 0;
}

.lang-switch a {
    color: var(--ink-faint);
    text-decoration: none;
}

.lang-switch a:hover,
.lang-switch a:focus {
    color: var(--ink);
}

.lang-switch__current {
    color: var(--ink);
    font-weight: 700;
}

/* Sign-in link: present for existing customers, but visually quieter than the
   demo call to action, which is aimed at people who are not customers yet. */

.login-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius);
    white-space: nowrap;
}

.login-link:hover,
.login-link:focus {
    color: var(--signal-dark);
    background: var(--paper);
}

.login-link {
    background: transparent;
    border: 1px solid var(--rule);
    cursor: pointer;
    font-family: inherit;
}

.login-link__caret {
    color: var(--ink-faint);
    font-size: 0.7rem;
}

.login-menu {
    position: relative;
}

.login-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    min-width: 15rem;
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.14);
}

.login-list a,
.login-list__soon {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
}

.login-list a:hover,
.login-list a:focus {
    background: var(--paper);
}

.login-list__soon {
    color: var(--ink-faint);
    cursor: default;
}

.login-list__name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.login-list__note {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.55rem 0.6rem;
}

.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    margin: 4px 0;
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: #c3ceda;
    margin-top: calc(var(--step) * 2);
    padding: calc(var(--step) * 1.8) 0 var(--step);
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--step);
    flex-wrap: wrap;
}

.site-footer__brand {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 34ch;
}

.site-footer__brand p {
    margin: 0;
    color: #e4ebf2;
    font-weight: 600;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
}

.site-footer a {
    color: #c3ceda;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--surface);
    text-decoration: underline;
}

.site-footer__legal {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: var(--step);
    padding-top: 0.9rem;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    /* Collapsed by default on narrow screens; the toggle button opens it. */
    .site-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        padding-top: 0.5rem;
    }

    .site-nav--open {
        display: flex;
    }

    .site-nav__links {
        flex-direction: column;
        gap: 0.35rem;
    }

    .site-footer__inner {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Utilities -------------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.section--tint {
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Hero ------------------------------------------------------------------- */

.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: calc(var(--step) * 2.2) 0 calc(var(--step) * 2.6);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: calc(var(--step) * 1.8);
    align-items: center;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0.75rem;
}

.hero__note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
    margin: 0;
}

/* Sample dashboard: a scaled-down redrawing of the real interface, so the
   visitor sees what they would actually get. Not live data — hence the caption
   and the aria-hidden body. */

.dash {
    background: #1b1c1e;
    border: 1px solid #313336;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
}

.dash__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #232427;
    border-bottom: 1px solid #313336;
    padding: 0.45rem 0.6rem;
}

.dash__title {
    font-weight: 700;
    font-size: 0.78rem;
    color: #f0f2f5;
}

.dash__user {
    margin-left: auto;
    font-size: 0.6rem;
    color: #9aa3ad;
}

.dash__cols {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem;
}

.dash__col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.card {
    background: #26282b;
    border: 1px solid #34373b;
    border-radius: 5px;
    overflow: hidden;
}

.card__head {
    font-size: 0.63rem;
    font-weight: 700;
    color: #e8ebee;
    margin: 0;
    padding: 0.38rem 0.5rem;
    border-bottom: 1px solid #34373b;
}

.card__meta {
    font-size: 0.58rem;
    color: #9aa3ad;
    margin: 0;
    padding: 0.35rem 0.5rem 0.15rem;
}

.rows,
.checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rows li,
.checks li {
    font-size: 0.575rem;
    line-height: 1.5;
    color: #ccd3da;
    padding: 0.26rem 0.5rem;
    border-bottom: 1px solid #2e3134;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rows li:last-child,
.checks li:last-child {
    border-bottom: 0;
}

.rows__date {
    color: #8b939c;
    margin-right: 0.35rem;
}

.rows__hot {
    background: #34301f;
}

/* The rolling list is clipped by its wrapper, so rows can never slide over
   the card heading. Fixed row height keeps the steps and the wrapper in sync. */

.rollwrap {
    height: 4.5rem;
    overflow: hidden;
}

.rows--roll li {
    height: 1.5rem;
    line-height: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.rows--roll {
    animation: roll 15s steps(1, end) infinite;
}

@keyframes roll {
    0%, 14% { transform: translateY(0); }
    16.6%, 30.6% { transform: translateY(-1.5rem); }
    33.3%, 47.3% { transform: translateY(-3rem); }
    50%, 64% { transform: translateY(-4.5rem); }
    66.6%, 80.6% { transform: translateY(-6rem); }
    83.3%, 97.3% { transform: translateY(-7.5rem); }
    100% { transform: translateY(-9rem); }
}

.card--clock {
    text-align: center;
}

.clock {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: #f0f2f5;
    margin: 0.35rem 0 0;
    letter-spacing: 0.01em;
}

.clock__date {
    font-size: 0.58rem;
    color: #9aa3ad;
    margin: 0 0 0.45rem;
}

.badges {
    display: flex;
    gap: 0.28rem;
    margin: 0;
    padding: 0.15rem 0.5rem 0.5rem;
}

.badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffffff;
    border-radius: 3px;
    padding: 0.12rem 0.42rem;
}

.badge--red { background: #c0392b; }
.badge--orange { background: #d9782d; }
.badge--green { background: #2f8f57; }
.badge--dark { background: #1f6b45; }

.checks li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.chip {
    font-size: 0.53rem;
    font-weight: 700;
    color: #ffffff;
    background: #2f8f57;
    border-radius: 3px;
    padding: 0.08rem 0.34rem;
    flex: none;
}

.chip--warn {
    background: #d9782d;
}

/* Two perspectives ------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--step) * 1.6);
    margin-top: calc(var(--step) * 1.6);
}

.split__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

.marked {
    list-style: none;
    padding: 0;
    margin: 0;
}

.marked li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.7rem;
    color: var(--ink-soft);
}

.marked li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--alert);
}

/* Plans ------------------------------------------------------------------ */

.plan-table-wrap {
    overflow-x: auto;
    margin-top: calc(var(--step) * 1.5);
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
}

.plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 780px;
}

.plan-table th,
.plan-table td {
    text-align: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.plan-table tbody th,
.plan-table__feature {
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    position: sticky;
    left: 0;
    min-width: 240px;
    border-right: 1px solid var(--rule);
}

.plan-table thead th {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--surface);
    border-bottom: 2px solid var(--ink);
    padding-top: 0.9rem;
}

.plan-table thead .plan-table__feature {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
    border-bottom: 0;
}

/* The featured column is tinted end to end so the eye follows it down. */
.plan-table .is-featured {
    background: #eaf2fb;
}

.plan-table thead .is-featured {
    border-bottom-color: var(--signal);
}

/* Group headings inside the table: a full-width dark band with the section
   link as a pill on the right. Needs a more specific selector than the sticky
   first-column rule above, which would otherwise repaint the background. */

.plan-table tbody tr.plan-group th {
    /* Stays a table cell so colspan keeps working; the inner span does the
       layout. A flex th collapses to the first column's width. */
    background: var(--ink);
    color: var(--surface);
    padding: 0.5rem 0.9rem;
    position: static;
    border-right: 0;
    border-bottom: 0;
    min-width: 0;
}

.plan-group__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.plan-group__title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
}

.plan-group__link {
    flex: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    text-decoration: none;
    padding: 0.2rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    white-space: nowrap;
}

.plan-group__link:hover,
.plan-group__link:focus {
    color: var(--ink);
    background: #ffffff;
    border-color: #ffffff;
}

.plan-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: calc(var(--step) * 1.2);
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 8px;
    color: var(--ink-soft);
}

.plan-flag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
    margin-top: 0.15rem;
}

.plan-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: block;
    line-height: 1.1;
}

.plan-price--text {
    font-size: 1rem;
}

.plan-price__note {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.plan-table__price-row td {
    padding-top: 0.8rem;
}

.plan-table__cta-row td {
    padding: 0.9rem 0.6rem;
}

/* Yearly price: the crossed-out figure is the twelve-month total, the figure
   below it is what you actually pay. */

.price-was {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.price-now {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.price-save {
    display: inline-block;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d6b3f;
    background: #e6f4ec;
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
}

.cell-note {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* Included / not included: a filled circle for yes, a quiet outlined dash for
   no. The glyphs are inline SVG so they stay crisp at any size and look the
   same on every system, unlike font characters. The label for screen readers
   sits in visually-hidden text rather than an aria-label on a bare span, which
   many readers ignore. */

.mark {
    display: inline-block;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    vertical-align: middle;
}

.mark__icon {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62%;
}

.mark--yes {
    background: var(--ok);
}

.mark--yes .mark__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

.mark--no {
    background: transparent;
    border: 1px solid var(--rule);
}

/* A dash rather than a cross: not having something is not a failure. */
.mark--no .mark__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7f96' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
    background-size: 70%;
}

.is-featured .mark--no {
    border-color: #c3d5ea;
}

.plan-footnote {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-top: 0.9rem;
}

.btn-signal--sm,
.btn-quiet--sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Services ---------------------------------------------------------------- */

.services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: calc(var(--step) * 1.4);
}

.service {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 1.2rem 1.15rem;
}

.service--soon {
    border-style: dashed;
    background: var(--surface);
}

.service__flag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
    margin: 0 0 0.35rem;
}

.service__flag--soon {
    color: var(--alert);
}

.service__name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.service p {
    color: var(--ink-soft);
}

.service__price {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0.9rem 0 0.9rem;
}

.service__price span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-left: 0.3rem;
}

.service__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.page-head {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding-bottom: calc(var(--step) * 1.6);
}

/* Closing ---------------------------------------------------------------- */

.closing__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step);
    flex-wrap: wrap;
}

.closing__action {
    margin: 0;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
    .hero__inner,
    .split,
    .services {
        grid-template-columns: 1fr;
    }

    .hero__panel {
        order: -1;
    }
}

@media (max-width: 600px) {
    .rows--roll {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rows--roll {
        animation: none;
    }
}

/* Contact ---------------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: calc(var(--step) * 2);
    align-items: start;
}

.contact__mail {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    margin: 1.25rem 0 0.35rem;
}

.contact__note {
    font-size: 0.9rem;
    color: var(--ink-faint);
}

.contact__form {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 1.5rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.1rem;
}

.field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.field input,
.field select,
.field textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--signal);
}

.field textarea {
    resize: vertical;
}

.field__error {
    font-size: 0.85rem;
    color: #a32d0b;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    font-weight: 600;
}

.notice--ok {
    background: #e6f4ec;
    border: 1px solid #2f8f57;
    color: #17532f;
}

.notice--warn {
    background: #fdf0e6;
    border: 1px solid var(--alert);
    color: #7c3608;
}

@media (max-width: 900px) {
    .contact {
        grid-template-columns: 1fr;
    }
}

/* Screenshots ------------------------------------------------------------ */

.shot {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}

.shot a {
    display: block;
    line-height: 0;
}

.shot img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--paper);
}

.shot a:hover img,
.shot a:focus img {
    opacity: 0.92;
}

.shot figcaption {
    font-size: 0.85rem;
    color: var(--ink-soft);
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--rule);
    line-height: 1.45;
}

.shot--lead {
    margin-top: calc(var(--step) * 1.4);
}

/* Slider: the remaining screenshots differ too much in height for a grid, so
   they scroll horizontally with snap points. Native scrolling does the work;
   the buttons are a convenience on top of it. */

.slider {
    position: relative;
    margin-top: 1rem;
}

.slider__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.slider__track:focus-visible {
    outline: 3px solid var(--alert);
    outline-offset: 3px;
}

.slider__slide {
    flex: 0 0 clamp(240px, 30%, 340px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

/* A fixed frame keeps every card the same height; contain shows the whole
   screenshot rather than cropping it. */
.slider__slide a {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
}

.slider__slide img {
    max-height: 210px;
    width: 100%;
    object-fit: contain;
}

.slider__slide figcaption {
    flex: 1;
}

.slider__controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.slider__button {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

.slider__button:hover:not([disabled]),
.slider__button:focus:not([disabled]) {
    border-color: var(--signal);
    color: var(--signal-dark);
}

.slider__button[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* Features page ---------------------------------------------------------- */

.feat-hero {
    background: var(--ink);
    color: #dbe6f1;
    padding: calc(var(--step) * 2.4) 0 calc(var(--step) * 2.6);
    position: relative;
    overflow: hidden;
}

/* A faint instrument grid, the same motif as the share image. */
.feat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.feat-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--step);
    align-items: center;
}

.feat-hero .display-title,
.feat-hero .eyebrow {
    color: #ffffff;
}

.feat-hero .eyebrow {
    color: #7fb2e8;
}

.feat-hero .lead-text {
    color: #b8c9db;
}

/* On the dark hero the quiet button needs light borders and light text. */
.feat-hero .btn-quiet {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.feat-hero .btn-quiet:hover,
.feat-hero .btn-quiet:focus {
    color: var(--ink);
    background: #ffffff;
    border-color: #ffffff;
}

.feat-hero__count {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7f93aa;
    margin: 0;
    line-height: 1.5;
}

.feat-hero__count span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--alert);
    line-height: 1;
}

/* Section navigation: sticky pills, so the page stays navigable while reading. */

.feat-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.feat-nav__inner {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
}

.feat-nav a {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    white-space: nowrap;
}

.feat-nav a:hover,
.feat-nav a:focus {
    color: var(--signal-dark);
    border-color: var(--signal);
    background: #eaf2fb;
}

.feat-section--tint {
    background: var(--surface);
}

.feat-section__head {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.feat-section__number {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--alert);
    margin: 0;
    padding-top: 0.15rem;
    line-height: 1;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: calc(var(--step) * 1.3);
}

.feat-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 1.15rem 1.2rem 1.25rem;
    border-top: 3px solid var(--signal);
}

.feat-section--tint .feat-card {
    background: var(--paper);
}

.feat-card h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.45rem;
}

.feat-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 0;
}

/* Closing band: darker, so the page ends on a different note. */

.feat-measuring {
    background: var(--ink);
    color: #b8c9db;
    padding: calc(var(--step) * 2.2) 0;
}

.feat-measuring .section-title {
    color: #ffffff;
}

.feat-measuring .lead-text {
    color: #b8c9db;
}

.feat-measuring__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: calc(var(--step) * 1.3);
}

.feat-measuring__grid h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.4rem;
    padding-top: 0.9rem;
    border-top: 2px solid var(--alert);
}

.feat-measuring__grid p {
    font-size: 0.92rem;
    margin: 0;
}

@media (max-width: 900px) {
    .feat-hero__inner {
        grid-template-columns: 1fr;
    }

    /* On the dark hero the quiet button needs light borders and light text. */
.feat-hero .btn-quiet {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.feat-hero .btn-quiet:hover,
.feat-hero .btn-quiet:focus {
    color: var(--ink);
    background: #ffffff;
    border-color: #ffffff;
}

.feat-hero__count {
        text-align: left;
    }
}