@charset "UTF-8";
/* ============================================================================
   aptaops.co.uk — the marketing site
   ----------------------------------------------------------------------------
   Standalone. No Bootstrap: the design is a small bespoke grid and pulling in a
   framework would cost more than it saves. Tokens are the same --apta-* set the
   portal uses, copied rather than shared because the two deploy separately.

   Measurements come from the "Marketing site" screen in the design handoff and
   are followed exactly. Where the handoff is silent the rules in its "design
   language" section decide: 8px spacing, 2px and 3px radii only, 1px hairlines,
   no shadows outside the focus ring, no gradients.
   ========================================================================== */

:root {
    --apta-primary: #0F4C4A;
    --apta-primary-deep: #0A3433;
    --apta-accent: #B4762F;
    --apta-accent-hover: #9C641F;
    --apta-accent-text: #8A5B1E;
    --apta-dark: #0B1417;

    --apta-bg: #F6F7F5;
    --apta-surface: #FFFFFF;
    --apta-surface-sunken: #EDEFEA;
    --apta-border: #D8DCD6;
    --apta-border-strong: #B9BFB7;

    --apta-text: #101A1A;
    --apta-text-body: #3C4A48;
    --apta-text-muted: #5C6866;

    --apta-success-tint: #E6F2EB;
    --apta-success-text: #0E5B38;

    --apta-footer-muted: #5F8681;
    --apta-footer-body: #CFDCD9;

    --apta-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --apta-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --apta-radius-sm: 2px;
    --apta-radius-md: 3px;

    --apta-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--apta-accent);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--apta-surface);
    color: var(--apta-text-body);
    font-family: var(--apta-font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--apta-text);
    margin: 0;
}

a {
    color: var(--apta-primary);
}

:where(a, button):focus-visible {
    outline: none;
    box-shadow: var(--apta-focus-ring);
}

/* Headings are never interactive here, so they never show a ring. Anything that
   focuses one (an anchor jump, enhanced navigation) does it for screen readers,
   and a sighted visitor should not see a box round the headline. */
:where(h1, h2, h3):focus,
:where(h1, h2, h3):focus-visible {
    outline: none;
    box-shadow: none;
}

.overline {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--apta-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--apta-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.btn--primary {
    background-color: var(--apta-primary);
    color: #FFFFFF;
}

.btn--primary:hover {
    background-color: var(--apta-primary-deep);
}

.btn--secondary {
    background-color: var(--apta-surface);
    border-color: var(--apta-border-strong);
    color: var(--apta-primary);
}

.btn--secondary:hover {
    background-color: var(--apta-surface-sunken);
}

.btn--accent {
    background-color: var(--apta-accent);
    color: #FFFFFF;
}

.btn--accent:hover {
    background-color: var(--apta-accent-hover);
}

/* Marketing CTA, per the button table */
.btn--cta {
    padding: 14px 22px;
    font-size: 15px;
}

.btn--nav {
    padding: 10px 16px;
}

.btn--sm {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
    background-color: var(--apta-surface);
    border-bottom: 1px solid var(--apta-border);
    padding: 20px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__logo img {
    display: block;
    height: 34px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a:not(.btn) {
    font-size: 14px;
    font-weight: 500;
    color: var(--apta-text-body);
    text-decoration: none;
}

.site-nav a:not(.btn):hover {
    color: var(--apta-text);
    text-decoration: underline;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
    background-color: var(--apta-bg);
    padding: 76px 44px 64px;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
}

.hero__overline {
    color: var(--apta-accent-text);
    margin-bottom: 16px;
}

.hero h1 {
    font-size: 54px;
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin-bottom: 20px;
}

.hero__body {
    font-size: 18px;
    line-height: 1.6;
    color: var(--apta-text-body);
    max-width: 520px;
    margin: 0 0 28px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.hero__trust {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    color: var(--apta-text-muted);
    letter-spacing: .04em;
    margin: 0;
}

/* --- Requirement to capability card --------------------------------------- */
.match-card {
    background-color: var(--apta-surface);
    border: 1px solid var(--apta-border);
    border-radius: var(--apta-radius-md);
    padding: 26px;
}

.match-card__heads {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    gap: 0;
    margin-bottom: 14px;
}

.match-card__head {
    font-family: var(--apta-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apta-text-muted);
}

.match-card__head--right {
    grid-column: 3;
}

.match-card__grid {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    align-items: center;
    gap: 10px 0;
}

.match-card__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chip {
    display: block;
    background-color: var(--apta-surface-sunken);
    border-radius: var(--apta-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--apta-text-body);
}

.chip--met {
    background-color: var(--apta-success-tint);
    color: var(--apta-success-text);
    font-weight: 500;
}

.match-card__mark {
    display: flex;
    justify-content: center;
}

.match-card__mark img {
    width: 40px;
    height: 40px;
    display: block;
}

.match-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--apta-border);
}

.match-card__result {
    font-size: 14px;
    font-weight: 600;
    color: var(--apta-success-text);
}

/* --- Feature row ---------------------------------------------------------- */
.features {
    padding: 56px 44px;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.feature {
    border-left: 2px solid var(--apta-primary);
    padding-left: 20px;
}

.feature h2 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin-bottom: 10px;
}

.feature p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0;
}

.feature__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    background-color: var(--apta-dark);
    padding: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-footer__logo img {
    display: block;
    height: 32px;
    width: auto;
    margin-bottom: 10px;
}

.site-footer__domain {
    font-family: var(--apta-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apta-footer-muted);
}

.site-footer__line {
    font-size: 16px;
    color: var(--apta-footer-body);
    max-width: 420px;
    margin: 0;
    text-align: right;
}

/* --- Responsive ------------------------------------------------------------
   Below 1024px the hero and feature grids collapse to one column and the H1
   drops to 40px, per the handoff. Below 768px the header stacks so the nav
   does not squeeze the lockup. */
@media (max-width: 1023.98px) {
    .hero__grid,
    .features__grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 40px;
        letter-spacing: -.025em;
        line-height: 1.05;
    }

    .hero {
        padding: 56px 32px 48px;
    }

    .features {
        padding: 48px 32px;
    }

    .site-header,
    .site-footer {
        padding: 20px 32px;
    }
}

@media (max-width: 767.98px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-nav {
        flex-wrap: wrap;
        gap: 18px;
    }

    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
    }

    .site-footer__line {
        text-align: left;
    }

    .hero {
        padding: 44px 24px 40px;
    }

    .features {
        padding: 40px 24px;
    }

    .hero h1 {
        font-size: 34px;
    }
}

/* --- Narrow single-column sections (demo, 404, error) --------------------- */
.narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* --- Registration brackets and empty states -------------------------------
   Opposite corners only, never all four. Same component as the portal. */
.apta-brackets {
    position: relative;
    padding: 32px 36px;
}

.apta-brackets::before,
.apta-brackets::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid var(--apta-primary);
    pointer-events: none;
}

.apta-brackets::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.apta-brackets::after {
    right: 0;
    bottom: 0;
    border-left: 0;
    border-top: 0;
}

.apta-brackets--accent::before,
.apta-brackets--accent::after {
    border-color: var(--apta-accent);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    margin: 76px auto;
}

.empty-state__overline {
    color: var(--apta-accent-text);
    margin: 0;
}

.empty-state__title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
}

.empty-state__body {
    font-size: 16px;
    color: var(--apta-text-body);
    margin: 0;
}

.empty-state__ref {
    font-family: var(--apta-font-mono);
    font-size: 13px;
    color: var(--apta-text-muted);
    background-color: var(--apta-surface-sunken);
    border-radius: var(--apta-radius-sm);
    padding: 8px 10px;
    margin: 0;
    overflow-wrap: anywhere;
}

.empty-state .btn {
    margin-top: 6px;
}

/* --- Page sections --------------------------------------------------------
   Shared furniture for the inner pages. The home page is laid out to the
   handoff exactly; these follow its design language instead, since the handoff
   designs only the home page. */
.section {
    padding: 64px 44px;
}

.section--sunken {
    background-color: var(--apta-bg);
}

.section--dark {
    background-color: var(--apta-primary);
    color: #FFFFFF;
}

.section__inner {
    max-width: 1240px;
    margin: 0 auto;
}

.section__head {
    max-width: 720px;
    margin-bottom: 40px;
}

.section__overline {
    color: var(--apta-accent-text);
    margin: 0 0 14px;
}

.section--dark .section__overline {
    color: #C98C3E;
}

/* Scoped deliberately. A bare `.section h2` also matches `.feature h2` inside the
   same section and, being later in the file, silently overrides its 19px. */
.section__head h2,
.section__title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 14px;
}

.section--dark .section__head h2,
.section--dark .section__title {
    color: #FFFFFF;
}

.section__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0;
}

.section--dark .section__lead {
    color: var(--apta-footer-body);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- Hairline register ----------------------------------------------------
   Motif 3 from the handoff: 1px rules with mono numbering, the active line
   taking a 2px teal rule. Used for ordered explanations. */
.register {
    border-top: 1px solid var(--apta-border);
}

.register__item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--apta-border);
}

.register__num {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--apta-text-muted);
    padding-top: 3px;
}

.register__item--active {
    border-bottom: 2px solid var(--apta-primary);
}

.register__item--active .register__num {
    color: var(--apta-primary);
}

.register__item h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 8px;
}

.register__item p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0;
}

/* --- Match meter ----------------------------------------------------------
   The same component the portal renders, reproduced here because the
   qualifications page is largely about what it means. Kept in step with
   aptaops.web.app/wwwroot/assets/css/aptaops.theme.css. */
.match-meter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.match-meter__bars {
    display: inline-flex;
    gap: 3px;
}

.match-meter__bar {
    display: block;
    width: 22px;
    height: 8px;
    border-radius: 1px;
    background-color: #E3E6E1;
}

.match-meter__label {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--apta-text-muted);
}

.match-meter--ready .match-meter__bar--met { background-color: #157F4E; }
.match-meter--ready .match-meter__label { color: #0E5B38; }
.match-meter--review .match-meter__bar--met { background-color: #C9910B; }
.match-meter--review .match-meter__label { color: #7A5905; }
.match-meter--blocked .match-meter__bar--met { background-color: #B3261E; }
.match-meter--blocked .match-meter__label { color: #8C1D17; }

.state-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0 24px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--apta-border);
}

.state-row:first-child {
    border-top: 1px solid var(--apta-border);
}

.state-row p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0;
}

/* --- Pricing --------------------------------------------------------------- */
.plan {
    background-color: var(--apta-surface);
    border: 1px solid var(--apta-border);
    border-top: 3px solid var(--apta-accent);
    border-radius: var(--apta-radius-md);
    padding: 32px;
    max-width: 560px;
}

.plan__name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.plan__blurb {
    font-size: 15px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0 0 24px;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--apta-border);
}

.plan__amount {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--apta-text);
    line-height: 1;
}

.plan__period {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apta-text-muted);
}

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

.feature-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--apta-border-subtle, #EDEFEA);
    font-size: 15px;
}

.feature-list li:last-child {
    border-bottom: 0;
}

.feature-list__note {
    font-family: var(--apta-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apta-accent-text);
    flex: none;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1023.98px) {
    .section { padding: 48px 32px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .state-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 767.98px) {
    .section { padding: 40px 24px; }
    .register__item { grid-template-columns: 1fr; gap: 6px; }
    .plan { padding: 24px; }
    .feature-list li { flex-direction: column; gap: 4px; }
}

/* --- Course record card (hero) ---------------------------------------------
   The hero's right-hand column. One course with the instructor, the venue, the
   delegates and the purchase order on it, because the point of the page is
   that those live on the same record. Mono for the labels and the reference,
   sans for the values, per the type rules. */
.record-card {
    background-color: var(--apta-surface);
    border: 1px solid var(--apta-border);
    border-radius: var(--apta-radius-md);
    padding: 26px;
}

.record-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.record-card__kicker {
    font-family: var(--apta-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apta-text-muted);
}

.record-card__title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 10px 0 20px;
}

/* Definition list rather than a table: it is one record's fields, not rows. */
.record-card__rows {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--apta-border);
}

.record-card__rows dt,
.record-card__rows dd {
    padding: 11px 0;
    margin: 0;
    border-bottom: 1px solid var(--apta-border);
}

.record-card__rows dt {
    font-family: var(--apta-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apta-text-muted);
    padding-top: 14px;
}

.record-card__rows dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 14px;
    color: var(--apta-text);
}

.record-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.record-card__status {
    font-size: 14px;
    font-weight: 600;
    color: var(--apta-success-text);
}

/* --- Split: a card beside a stack of short points -------------------------- */
.split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: start;
}

.brief-stack {
    display: grid;
    gap: 24px;
}

/* --- Brief: a denser block than .feature ----------------------------------
   Used where a section has a lot of short items and a wall of 2px teal rules
   would read as noise. */
.brief-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 34px;
}

.brief h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}

.brief p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--apta-text-body);
    margin: 0;
}

/* --- Prose (privacy policy, terms) ----------------------------------------- */
.prose h2 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 40px 0 12px;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    font-size: 16px;
    line-height: 1.65;
    color: var(--apta-text-body);
}

.prose p {
    margin: 0 0 14px;
}

.prose ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.prose li {
    margin-bottom: 8px;
}

.prose strong {
    color: var(--apta-text);
    font-weight: 600;
}

.prose code {
    font-family: var(--apta-font-mono);
    font-size: 13px;
    background-color: var(--apta-surface-sunken);
    border-radius: var(--apta-radius-sm);
    padding: 2px 5px;
}

.prose h2[id] {
    scroll-margin-top: 24px;
}

/* --- Terms of service -------------------------------------------------------
   Long and numbered, so it gets a summary, a contents list and mono clause
   numbers in a fixed column, the way the hairline register sets its numbers.
   The section number sits in the same column so headings line up with the
   clause text under them. Selectors that override `.prose p` / `.prose li`
   are scoped under .prose so they actually win. */
.terms-summary {
    background-color: var(--apta-bg);
    border: 1px solid var(--apta-border);
    border-radius: var(--apta-radius-md);
    padding: 24px 28px;
    margin-bottom: 40px;
}

.prose .terms-overline {
    font-size: 12px;
    line-height: 1.4;
    color: var(--apta-accent-text);
    margin: 0 0 14px;
}

.prose .terms-summary__note {
    font-size: 14px;
    color: var(--apta-text-muted);
    margin: 0;
}

.terms-toc {
    border-top: 1px solid var(--apta-border);
    border-bottom: 1px solid var(--apta-border);
    padding: 24px 0 20px;
}

.terms-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 32px;
}

.prose .terms-toc li {
    font-size: 15px;
    margin: 0;
    padding: 4px 0;
    break-inside: avoid;
}

.terms-toc a {
    display: grid;
    grid-template-columns: 32px 1fr;
    color: var(--apta-text-body);
    text-decoration: none;
}

.terms-toc a:hover {
    color: var(--apta-primary);
    text-decoration: underline;
}

.terms-toc a span {
    font-family: var(--apta-font-mono);
    font-size: 12px;
    color: var(--apta-text-muted);
    padding-top: 3px;
}

/* A grid rather than an inline number: the columns line up with the clauses,
   and the number becomes its own block so screen readers hear "1 About these
   terms" rather than "1About". */
.terms-heading {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: baseline;
}

.terms-num {
    font-family: var(--apta-font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--apta-accent-text);
}

.clauses {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.prose .clauses > li {
    display: grid;
    grid-template-columns: 52px 1fr;
    margin-bottom: 12px;
}

.clauses__num {
    font-family: var(--apta-font-mono);
    font-size: 13px;
    color: var(--apta-text-muted);
    padding-top: 4px;
}

.clauses > li > p,
.clauses > li > div > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .terms-summary { padding: 20px; }
    .terms-toc ol { columns: 1; }
    .prose .clauses > li { grid-template-columns: 44px 1fr; }
    .terms-heading { grid-template-columns: 44px 1fr; }
}

/* --- Small match meter -----------------------------------------------------
   The inline variant, for when the meter sits on a record row rather than
   being the thing being explained. */
.match-meter--sm .match-meter__bar {
    width: 14px;
    height: 6px;
}

.match-meter--sm .match-meter__label {
    font-size: 11px;
}

/* --- Footer right-hand column ---------------------------------------------- */
.site-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.site-footer__links {
    display: flex;
    gap: 20px;
}

.site-footer__links a {
    font-size: 14px;
    color: var(--apta-footer-muted);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--apta-footer-body);
    text-decoration: underline;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1023.98px) {
    .split { grid-template-columns: 1fr; gap: 32px; }
    .brief-grid { grid-template-columns: repeat(2, 1fr); }
}

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

    .record-card__rows { grid-template-columns: 1fr; }

    .record-card__rows dt {
        border-bottom: 0;
        padding: 12px 0 0;
    }

    .site-footer__right {
        align-items: flex-start;
    }
}

/* --- Smooth in-page scrolling ----------------------------------------------
   The nav and the CTAs are all anchors into this one page, so a jump-cut makes
   it hard to tell you have moved rather than the page has changed. Honours a
   reduced-motion preference, which is the whole reason for the guard. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- Static button ---------------------------------------------------------
   The copper buttons inside the record card and the match card are part of the
   picture of the product, not controls on this page. pointer-events removes the
   hover state, the pointer cursor and the click in one go; the markup is a span,
   so there is nothing to tab to either. */
.btn--static {
    pointer-events: none;
    cursor: default;
    user-select: none;
}

/* --- Why the optional features are optional --------------------------------
   Sits under the plan. The rule above it ties it to the list it explains. */
.optional {
    max-width: 900px;
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--apta-border);
}

.optional__head {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}

.optional__lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--apta-text-body);
    max-width: 720px;
    margin: 0 0 28px;
}

/* --- Footer legal line ------------------------------------------------------ */
.site-footer__legal {
    font-size: 13px;
    line-height: 1.6;
    color: var(--apta-footer-muted);
    max-width: 460px;
    margin: 0;
    text-align: right;
}

.site-footer__legal a {
    color: var(--apta-footer-body);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .site-footer__legal {
        text-align: left;
    }
}

/* --- The public demo band ---------------------------------------------------
   The one .section--dark on the site. It is a break in the page rather than
   another point in the argument, which is what the ground change is for.

   Its own grid instead of .split because the weighting is the other way round
   here: the credentials card is short and fixed, the copy beside it is not.

   .record-card is reused as the credentials card, so the only additions are the
   ones a card of usernames needs and the hero's card does not. */
.demo-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

/* .section__lead sets margin: 0 and leans on .section__head for its spacing. This
   lead is not in a head, so the gap below it has to come from here or the warning
   runs straight into the sentence above it. */
.demo-note {
    font-size: 15px;
    line-height: 1.65;
    max-width: 560px;
    margin: 22px 0 26px;
}

/* Usernames and the password are things to copy character by character, so they
   are mono and set apart from the label. The card is white even inside the dark
   band, so these keep the light-ground text colour. */
.record-card code {
    font-family: var(--apta-font-mono);
    font-size: 13px;
    background-color: var(--apta-surface-sunken);
    border-radius: var(--apta-radius-sm);
    padding: 2px 6px;
    color: var(--apta-text);
}

@media (max-width: 1023.98px) {
    .demo-grid { grid-template-columns: 1fr; gap: 32px; }
}