/* =============================================================================
   Saypeace Society Platform — base stylesheet (vanilla CSS, design tokens)
   -----------------------------------------------------------------------------
   No build step. This file is linked directly with an asset() + ?v=filemtime
   cache-bust. Per-tenant branding (Phase 05) overrides --color-primary via a
   single injected <style> block, so keep everything below driven by the tokens.
   ========================================================================== */

/* ---- Fonts (self-hosted — the CSP is self-only, so no font CDNs) ---------- */
/* Ubuntu (Ubuntu Font Licence), latin + latin-ext (₦ lives in latin-ext). */
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ubuntu-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ubuntu-400-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ubuntu-400i.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Ubuntu";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ubuntu-400i-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ubuntu-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ubuntu-500-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ubuntu-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ubuntu-700-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
    /* Brand (swapped per tenant in Phase 05) */
    --color-primary: #16a34a;
    --color-primary-dark: #15803d;
    --color-primary-light: #dcfce7;
    --color-on-primary: #ffffff;
    /* Default secondary — the tenant layouts override it per society. Declared here
       so the color-mix() chains that build the dark bands always have a real value
       to work from; an undefined custom property would invalidate the whole mix. */
    --color-secondary: #1e293b;

    /* Neutrals / surfaces */
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-bg: #ffffff;
    --color-surface: #f9fafb;
    --color-border: #e5e7eb;

    /* Feedback */
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-info: #2563eb;

    /* Typography */
    --font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --line-height: 1.6;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* Radius / shadow / layout */
    --radius: 0.5rem;
    --radius-sm: 0.25rem;
    --radius-lg: 0.875rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 50px -20px rgba(10, 23, 18, 0.25);
    --container-max: 1120px;
}

/* Central control-plane accent (superadmin layout sets <body class="theme-superadmin">) */
.theme-superadmin {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #dbeafe;
}

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

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img,
picture,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

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

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 0 0 var(--space-4);
}

p {
    margin: 0 0 var(--space-4);
}

/* ---- Layout -------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.site-main {
    flex: 1 0 auto;
    padding-block: var(--space-8);
}

.stack > * + * {
    margin-top: var(--space-4);
}

/* ---- Navigation ---------------------------------------------------------- */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    flex-wrap: wrap;
}

.site-nav .brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* :not(.btn) matters — these outrank .btn on specificity, so without it a
   call-to-action button inside the nav loses its on-primary text colour. */
.site-nav a:not(.btn) {
    color: var(--color-text-muted);
}

.site-nav a:not(.btn):hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    padding-block: var(--space-6);
    font-size: 0.9rem;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary-light);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Cards --------------------------------------------------------------- */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

/* ---- Forms --------------------------------------------------------------- */
label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

input,
select,
textarea {
    width: 100%;
    padding: var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.field + .field {
    margin-top: var(--space-4);
}

.form-error {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin-top: var(--space-1);
}

/* ---- Alerts -------------------------------------------------------------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.alert-success { border-color: var(--color-success); background: var(--color-primary-light); }
.alert-danger  { border-color: var(--color-danger);  color: var(--color-danger); }
.alert-warning { border-color: var(--color-warning); color: var(--color-warning); }

/* ---- Utilities ----------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---- Control plane (superadmin) ----------------------------------------- */
.inline-form { display: inline; margin: 0; }

/* A <button> that reads like a nav link (used for logout inside a POST form). */
.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
}
.linkish:hover { color: var(--color-primary-dark); text-decoration: underline; }

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

.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: 0.85rem; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #b91c1c; }

/* Stat cards on the dashboard. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}
.stat { text-align: left; }
.stat .num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--color-text-muted); font-size: 0.9rem; }

/* Data tables. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.table tbody tr:hover { background: var(--color-surface); }

/* Status pills. */
.pill { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.pill-on  { background: var(--color-primary-light); color: var(--color-primary-dark); }
.pill-off { background: #f3f4f6; color: var(--color-text-muted); }

/* Two-column form grid. */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

/* Module checklist. */
.module-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.module-list label { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; margin: 0; }
.module-list input { width: auto; }

/* One-time credential reveal after provisioning. */
.temp-cred {
    border: 1px solid var(--color-warning);
    background: #fffbeb;
    border-radius: var(--radius);
    padding: var(--space-4);
}
.temp-cred code {
    display: inline-block;
    background: var(--color-text);
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

.dl-inline { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.dl-inline dt { font-weight: 600; color: var(--color-text-muted); }
.dl-inline dd { margin: 0; }

/* Status pill variants (website-request lifecycle). */
.pill-warn   { background: #fef3c7; color: #92400e; }
.pill-info   { background: var(--color-primary-light); color: var(--color-primary-dark); }
.pill-danger { background: #fee2e2; color: #991b1b; }

/* ---- Auth cards (login / register / reset — all planes) ------------------- */
.auth-card { max-width: 26rem; margin-inline: auto; }
.checkbox-inline { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; margin: 0; }
.checkbox-inline input { width: auto; }

/* Request-queue filter bar. */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-bar select { width: auto; }

/* ---- Responsive ---------------------------------------------------------- */
@media (min-width: 640px) {
    .site-nav {
        flex-wrap: nowrap;
    }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid .col-span-2 { grid-column: 1 / -1; }
}

/* =============================================================================
   Tenant public site (Phase 05) — the "learned society" identity
   -----------------------------------------------------------------------------
   Scoped under body[data-layout="tenant-public"] so nothing here leaks into the
   central/marketing or admin planes. Everything derives from --color-primary /
   --color-secondary, which the layout overrides per tenant, so one society's
   green and another's burgundy both reskin the whole site with zero extra CSS.
   Ubuntu throughout; display headings are set apart by weight and negative
   tracking, never by a second typeface.
   ========================================================================== */
/* The member area (data-layout="tenant") shares the palette so a signed-in member
   sees the same society, not a different product. Its chrome is at the end of this
   block; everything between is public-site only. */
body[data-layout="tenant-public"],
body[data-layout="tenant"] {
    /* Display face — Ubuntu, same as body. Headings are set apart by weight and
       negative tracking rather than by a second family, so the whole platform is
       one typeface. The token stays so every heading tunes from one place. */
    --tp-display: var(--font-sans);

    /* Ink & surfaces — brand-tinted neutrals, so a society's green and another's
       burgundy each read as one deliberate palette rather than grey + an accent. */
    --tp-ink: color-mix(in srgb, var(--color-primary) 12%, #101418);
    --tp-soft: color-mix(in srgb, var(--color-primary) 9%, #5c6672);
    --tp-tint: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
    --tp-tint-strong: color-mix(in srgb, var(--color-primary) 13%, #ffffff);
    --tp-line: color-mix(in srgb, var(--color-primary) 13%, #e6e8ea);
    --tp-line-strong: color-mix(in srgb, var(--color-primary) 34%, #e6e8ea);

    /* Deep bands (dark CTA + footer). The society's colours only TINT a near-black
       base — they never set its lightness. A tenant is free to pick cream or pale
       gold as its secondary, and white body copy still has to clear AA on this
       ground, so the mix is capped low rather than trusted. */
    --tp-deep: color-mix(in srgb, var(--color-secondary) 24%, #0b1016);
    --tp-deep-2: color-mix(in srgb, var(--color-primary) 26%, var(--tp-deep));
    --tp-on-deep: color-mix(in srgb, var(--color-secondary) 14%, #f4f7f9);
    --tp-footer-bg: var(--tp-deep);
    --tp-footer-ink: var(--tp-on-deep);

    /* Shadows carry a little brand so cards lift warm, not grey. */
    --tp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--tp-ink) 10%, transparent);
    --tp-shadow: 0 18px 40px -22px color-mix(in srgb, var(--tp-ink) 48%, transparent);
    --tp-shadow-lg: 0 40px 80px -34px color-mix(in srgb, var(--tp-ink) 55%, transparent);

    /* Muted body copy follows the tinted scale everywhere inside this plane. */
    --color-text-muted: var(--tp-soft);

    color: var(--color-text);
    background: var(--color-bg);
}

/* Italic accent — one phrase set apart. Weight 400 deliberately: Ubuntu ships an
   italic at 400 only, so any other weight would be a synthesised oblique. */
.tp-accent {
    font-style: italic;
    font-weight: 400;
}

/* Accessible skip link — visible only when focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary-dark);
    color: #ffffff;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    left: 0;
    text-decoration: none;
}

/* ---- Buttons (scoped) ------------------------------------------------------
   Pill geometry and a small lift on hover, matching the central storefront. The
   glow is mixed from --color-primary, so it re-tints with the tenant's brand. */
body[data-layout="tenant-public"] .btn {
    padding: 0.72rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--tp-shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body[data-layout="tenant-public"] .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary) 65%, transparent);
}
body[data-layout="tenant-public"] .btn:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

body[data-layout="tenant-public"] .btn-outline {
    background: var(--color-bg);
    border-color: var(--tp-line-strong);
    color: var(--tp-ink);
}
body[data-layout="tenant-public"] .btn-outline:hover {
    background: var(--tp-tint);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

body[data-layout="tenant-public"] .btn-sm {
    padding: 0.5rem 1.1rem;
    font-size: 0.87rem;
}

/* Light + ghost buttons for the dark CTA band. */
.tp-btn-light {
    background: #ffffff;
    color: var(--tp-ink);
}
body[data-layout="tenant-public"] .tp-btn-light:hover {
    background: var(--tp-tint-strong);
    color: var(--color-primary-dark);
}
.tp-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    box-shadow: none;
}
body[data-layout="tenant-public"] .tp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: none;
}

/* On a photographic slide the primary button needs a hard edge to sit on. */
.tp-btn-hero { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55); }
.tp-btn-hero-alt {
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
}

/* ---- Header / nav --------------------------------------------------------- */
.tp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tp-line);
    transition: box-shadow 0.2s ease;
}
/* Set by the scroll listener in app.js — the header only earns a shadow once the
   page has moved under it. */
.tp-header.is-stuck { box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--tp-ink) 70%, transparent); }

.tp-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 4.5rem;
    flex-wrap: wrap;
    padding-block: var(--space-2);
}

.tp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--tp-ink);
    font-weight: 700;
    min-width: 0;
    margin-right: auto;
}
.tp-brand:hover { text-decoration: none; }

.tp-brand-logo {
    height: 2.6rem;
    width: auto;
    max-width: 4rem;
    object-fit: contain;
}

.tp-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--color-primary) 82%, #ffffff),
        var(--color-primary-dark));
    color: var(--color-on-primary);
    font-family: var(--tp-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.tp-brand-name {
    font-family: var(--tp-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.tp-nav a {
    display: inline-block;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    color: var(--tp-soft);
    font-weight: 500;
    font-size: 0.93rem;
}
.tp-nav a:hover {
    color: var(--tp-ink);
    background: var(--tp-tint-strong);
    text-decoration: none;
}
.tp-nav a.is-active {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 12%, #ffffff);
    font-weight: 600;
}

/* The actions sit beside the brand at every width; the nav trails them so that,
   once it collapses to a full-width panel, it wraps onto a row of its own instead
   of pushing the buttons down. Desktop swaps the two back. */
.tp-header-actions {
    order: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.tp-nav { order: 2; }

@media (min-width: 768px) {
    .tp-header-actions { order: 2; }
    .tp-nav { order: 1; }
}

/* The header CTA is the one filled button in the chrome — keep it compact. */
.tp-header-cta { white-space: nowrap; }
@media (max-width: 479px) {
    .tp-header-cta { display: none; }
}

/* Mobile nav toggle: only shown (and nav only collapsed) when JS is available,
   so the site stays fully navigable without JavaScript. */
.tp-nav-toggle { display: none; }

@media (max-width: 767px) {
    html.js .tp-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        background: var(--color-bg);
        border: 1px solid var(--tp-line-strong);
        border-radius: 999px;
        padding: 0.5rem 0.9rem;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--tp-ink);
        cursor: pointer;
    }
    html.js .tp-nav-toggle[aria-expanded="true"] {
        background: var(--tp-tint-strong);
        border-color: var(--color-primary);
        color: var(--color-primary-dark);
    }

    .tp-nav-toggle-bar,
    .tp-nav-toggle-bar::before,
    .tp-nav-toggle-bar::after {
        content: "";
        display: block;
        width: 1.1rem;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        position: relative;
    }
    .tp-nav-toggle-bar::before { position: absolute; top: -5px; }
    .tp-nav-toggle-bar::after { position: absolute; top: 5px; }

    html.js .tp-nav {
        display: none;
        width: 100%;
    }
    html.js .tp-nav.is-open { display: block; }

    .tp-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-block: var(--space-2);
        border-top: 1px solid var(--tp-line);
    }
    .tp-nav a {
        display: block;
        padding: var(--space-3);
        border-radius: var(--radius);
    }
}

/* ---- Type & shared blocks -------------------------------------------------- */
.tp-main { flex: 1 0 auto; }

.tp-flash { margin-top: var(--space-4); }

/* Kicker: a short brand rule then small caps. Used on every section head and page
   hero, so this one rule is most of the plane's editorial character. */
.tp-eyebrow {
    /* Block-level flex with a shrink-to-fit width: the rule+caps stay a single
       tight unit, but the element keeps normal block margins (an inline-flex <p>
       would not reliably space itself off the heading beneath it). */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}
.tp-eyebrow::before {
    content: "";
    width: 1.4rem;
    height: 2px;
    border-radius: 1px;
    background: var(--color-primary);
    flex-shrink: 0;
}
/* On dark bands and slides the rule and type invert. */
.tp-eyebrow-light { color: rgba(255, 255, 255, 0.85); }
.tp-eyebrow-light::before { background: rgba(255, 255, 255, 0.7); }

.tp-heading {
    font-family: var(--tp-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.9vw, 2.1rem);
    letter-spacing: -0.022em;
    line-height: 1.18;
    color: var(--tp-ink);
    text-wrap: balance;
    margin-bottom: var(--space-3);
}

.tp-sub {
    color: var(--tp-soft);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 58ch;
    margin: 0;
}

/* Text link with a travelling arrow — the arrow is a separate span so only it
   moves, leaving the label's underline alone. */
.tp-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
}
.tp-textlink::after {
    content: "→";
    transition: transform 0.18s ease;
}
.tp-textlink:hover::after { transform: translateX(3px); }

.tp-section { padding-block: clamp(3rem, 7vw, 5rem); }
.tp-section-tint {
    background: var(--tp-tint);
    border-block: 1px solid var(--tp-line);
}

.tp-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    flex-wrap: wrap;
}
.tp-section-head .tp-heading { margin-bottom: 0; }

/* Empty states read as a deliberate placeholder card, not a broken page. */
.tp-empty {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) var(--space-6);
    background: var(--tp-tint);
    border: 1px dashed var(--tp-line-strong);
    border-radius: var(--radius-lg);
}
.tp-empty .tp-heading { margin-bottom: var(--space-2); }
.tp-empty p { margin: 0 auto; max-width: 42ch; }

/* ---- Hero ------------------------------------------------------------------
   Shown until the society publishes its first slide, so it has to look finished
   on its own: two brand washes, a fading dot grid, and a framed crest.
   -------------------------------------------------------------------------- */
.tp-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(52rem 28rem at 8% -15%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 62%),
        radial-gradient(48rem 26rem at 100% -10%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 58%),
        linear-gradient(180deg, var(--tp-tint), var(--color-bg) 72%);
    border-bottom: 1px solid var(--tp-line);
}
.tp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--tp-ink) 9%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 68%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 68%);
    pointer-events: none;
}

.tp-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-block: clamp(3.5rem, 9vw, 6rem);
}

.tp-hero-copy { max-width: 40rem; }

.tp-hero-title {
    font-family: var(--tp-display);
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.06;
    color: var(--tp-ink);
    text-wrap: balance;
    margin-bottom: var(--space-4);
}

.tp-hero-lede {
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.7;
    color: var(--tp-soft);
    max-width: 36rem;
    margin-bottom: var(--space-8);
}

.tp-hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tp-hero-crest {
    margin-left: auto;
    flex-shrink: 0;
    width: clamp(9rem, 18vw, 14rem);
    aspect-ratio: 1;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: color-mix(in srgb, #ffffff 78%, transparent);
    border: 1px solid var(--tp-line);
    border-radius: 50%;
    box-shadow:
        var(--tp-shadow),
        0 0 0 10px color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.tp-hero-crest img { max-height: 100%; object-fit: contain; }

@media (min-width: 768px) {
    .tp-hero-crest { display: flex; }
}

/* ---- Home hero slider ------------------------------------------------------
   Slides are stacked and cross-faded (opacity), never reflowed, so the band height
   is stable and there is no layout shift between slides. Copy sits on a left-to-
   right scrim so any photo keeps the text readable. Without JS the first slide is
   the only .is-active one and the band degrades to a static image hero.
   -------------------------------------------------------------------------- */
.tp-slider {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--tp-ink);
    border-bottom: 1px solid var(--tp-line);
}

.tp-slider-track {
    position: relative;
    display: grid;
    min-height: clamp(20rem, 56vw, 34rem);
}

/* Every slide occupies the same grid cell; only the active one is visible. */
.tp-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.tp-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 700ms ease, visibility 0s;
}

.tp-slide-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrim: dark enough on the copy side for AA contrast on any photograph. The
   second layer tints the deep end with the tenant's brand so the band belongs to
   the site rather than sitting on a neutral black wash. */
.tp-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--tp-deep) 55%, transparent) 0%,
            transparent 70%),
        linear-gradient(90deg,
            rgba(6, 12, 18, 0.82) 0%,
            rgba(6, 12, 18, 0.6) 42%,
            rgba(6, 12, 18, 0.14) 100%);
}

.tp-slide-inner { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

.tp-slide-copy { max-width: 42rem; }

.tp-slide-title {
    font-family: var(--tp-display);
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #ffffff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    margin-bottom: var(--space-4);
}

.tp-slide-lede {
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    max-width: 36rem;
    margin-bottom: var(--space-8);
}

/* ---- Slider controls ---- */
.tp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.tp-slider-arrow:hover,
.tp-slider-arrow:focus-visible {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.8);
}

.tp-slider-prev { left: var(--space-3); }
.tp-slider-next { right: var(--space-3); }

.tp-slider-dots {
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
}

/* Dots grow into a capsule when active — clearer than a scale-up at small sizes. */
.tp-slider-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms ease, width 200ms ease;
}

.tp-slider-dot.is-active {
    width: 1.6rem;
    background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .tp-slider-dot { transition: none; }
}

@media (max-width: 640px) {
    .tp-slider-arrow { display: none; }
    .tp-slide::before {
        background: linear-gradient(180deg, rgba(6, 20, 14, 0.45) 0%, rgba(6, 20, 14, 0.85) 100%);
    }
}

/* No cross-fade for readers who asked for less motion (the JS also stops autoplay). */
@media (prefers-reduced-motion: reduce) {
    .tp-slide { transition: none; }
    .tp-slide.is-active { transition: none; }
}

/* ---- Page hero (inner pages) ----------------------------------------------- */
.tp-page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40rem 20rem at 88% -40%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%),
        linear-gradient(180deg, var(--tp-tint), var(--color-bg));
    border-bottom: 1px solid var(--tp-line);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
.tp-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--tp-ink) 8%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 75%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 75%);
    pointer-events: none;
}
.tp-page-hero > .container { position: relative; }

.tp-page-title {
    font-family: var(--tp-display);
    font-size: clamp(1.85rem, 4.2vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--tp-ink);
    text-wrap: balance;
    margin: 0;
}

/* ---- About: section nav + prose -------------------------------------------- */
.tp-about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-8);
}

.tp-section-nav-label {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.tp-section-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-1);
}

.tp-section-nav a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--tp-line);
    color: var(--tp-soft);
    font-size: 0.93rem;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tp-section-nav a:hover {
    color: var(--color-primary-dark);
    background: var(--tp-tint);
    border-left-color: var(--color-primary);
    text-decoration: none;
}

.tp-prose-column { max-width: 68ch; }

.tp-prose-section {
    scroll-margin-top: 6rem;
    padding-block: var(--space-8);
}
.tp-prose-section:first-child { padding-top: 0; }
.tp-prose-section + .tp-prose-section { border-top: 1px solid var(--tp-line); }

/* Society prose is long-form and often the whole page — give it real measure. */
.tp-prose {
    font-size: 1.03rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--tp-ink) 88%, #ffffff);
}
.tp-prose p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
    .tp-about-layout { grid-template-columns: 14rem minmax(0, 1fr); }
    .tp-section-nav {
        position: sticky;
        top: 5.5rem;
        align-self: start;
    }
}

/* ---- About teaser (home) ----------------------------------------------------
   Two columns with a hairline between them at desktop width: the heading holds the
   left rail, the excerpt runs as a single generous column on the right.
   -------------------------------------------------------------------------- */
.tp-about-teaser {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}
.tp-about-teaser-body p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--tp-soft);
}
.tp-about-teaser-body p:first-child::first-letter {
    float: left;
    font-family: var(--tp-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 0.9;
    padding: 0.2rem 0.55rem 0 0;
    color: var(--color-primary-dark);
}
@media (min-width: 768px) {
    .tp-about-teaser {
        grid-template-columns: 1fr 1.6fr;
        gap: var(--space-12);
    }
    .tp-about-teaser-body {
        padding-left: var(--space-12);
        border-left: 1px solid var(--tp-line);
    }
}

/* ---- Cards (news & events) --------------------------------------------------- */
.tp-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 640px) { .tp-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tp-card-grid { grid-template-columns: repeat(3, 1fr); } }

.tp-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--tp-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.tp-card:hover {
    border-color: var(--tp-line-strong);
    box-shadow: var(--tp-shadow);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .tp-card, .tp-card:hover { transition: none; transform: none; }
}

.tp-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--tp-tint-strong);
    overflow: hidden;
}
.tp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tp-card:hover .tp-card-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .tp-card-media img,
    .tp-card:hover .tp-card-media img { transition: none; transform: none; }
}
.tp-card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--tp-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-primary) 45%, #ffffff);
}

.tp-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-6) var(--space-6);
}

.tp-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.tp-pill {
    display: inline-block;
    padding: 0.15rem var(--space-2);
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tp-card-title {
    font-family: var(--tp-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.32;
    margin: 0;
}
.tp-card-title a { color: var(--tp-ink); }
.tp-card-title a:hover { color: var(--color-primary-dark); text-decoration: none; }

.tp-card-excerpt {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* ---- Category filter chips ---------------------------------------------------- */
.tp-filter {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.tp-chip {
    display: inline-block;
    padding: 0.5rem var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    color: var(--tp-soft);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tp-chip:hover {
    background: var(--tp-tint);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    text-decoration: none;
}
.tp-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 80%, transparent);
}

/* ---- EXCO grid ----------------------------------------------------------------- */
.tp-exco-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (min-width: 768px) { .tp-exco-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

/* The full-council page runs wider than the home preview but keeps the same card. */
.tp-exco-grid-full { gap: var(--space-4); }
@media (min-width: 960px) { .tp-exco-grid-full { grid-template-columns: repeat(4, 1fr); } }

.tp-exco {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--tp-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.tp-exco:hover {
    border-color: var(--tp-line-strong);
    box-shadow: var(--tp-shadow);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .tp-exco, .tp-exco:hover { transition: none; transform: none; }
}

/* A soft brand halo replaces the old hard ring — reads as portraiture, not a
   bordered thumbnail, and stays legible against any society colour. */
.tp-exco-photo {
    width: min(8.5rem, 70%);
    aspect-ratio: 1;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--tp-tint-strong);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
        0 0 0 7px color-mix(in srgb, var(--color-primary) 7%, transparent);
}
.tp-exco-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tp-exco-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--tp-display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
}

.tp-exco-name {
    font-family: var(--tp-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.3;
    margin: 0 0 var(--space-2);
    color: var(--tp-ink);
}
/* The office is the fact people scan for — set it as a pill, not body copy. */
.tp-exco-position {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}
.tp-exco-term {
    font-size: 0.78rem;
    color: var(--tp-soft);
    margin: var(--space-2) 0 0;
}

.tp-past-council {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--tp-line);
}

/* ---- Article (news detail) ------------------------------------------------------ */
.tp-article { padding-block: clamp(2.5rem, 6vw, 4rem); }

.tp-article-head {
    max-width: 46rem;
    margin-bottom: var(--space-8);
}
.tp-article-head .tp-card-meta { margin-bottom: var(--space-4); }
.tp-article-head .tp-page-title { margin-bottom: var(--space-6); }

/* Event facts read as a ticket stub: brand rule down the leading edge. */
.tp-event-facts {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--tp-tint);
    border: 1px solid var(--tp-line);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.tp-event-facts dt {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tp-soft);
}
.tp-event-facts dd {
    margin: var(--space-1) 0 0;
    font-weight: 600;
    color: var(--tp-ink);
}

.tp-article-cover {
    margin: 0 0 var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--tp-line);
    box-shadow: var(--tp-shadow);
}

.tp-article-back {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--tp-line);
    max-width: 68ch;
}
/* The back link points the other way, so flip the travelling arrow. */
.tp-article-back .tp-textlink::after { content: none; }
.tp-article-back .tp-textlink::before {
    content: "←";
    transition: transform 0.18s ease;
}
.tp-article-back .tp-textlink:hover::before { transform: translateX(-3px); }

/* ---- Contact -------------------------------------------------------------------- */
/* Display-only since the message form was removed (bot spam). auto-fit means the
   grid closes up around however many details a society actually publishes, so one
   filled field reads as a deliberate panel rather than a broken column. */
.tp-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-5);
    align-items: start;
}
.tp-contact-card {
    padding: clamp(1.35rem, 3vw, 1.85rem);
    background: var(--tp-tint);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius);
}
/* An address is long-form, so let it span the row when there is room. */
@media (min-width: 700px) { .tp-contact-card-wide { grid-column: 1 / -1; } }

.tp-contact-card-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tp-soft);
    margin: 0;
}
.tp-contact-card-value {
    margin: var(--space-2) 0 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--tp-ink);
    word-break: break-word;
}
.tp-contact-card-value a { color: var(--color-primary-dark); }
.tp-contact-address { font-weight: 400; line-height: 1.6; }

.tp-contact-empty {
    color: var(--tp-soft);
    text-align: center;
    padding: var(--space-8) 0;
}

.tp-optional {
    font-weight: 400;
    color: var(--tp-soft);
    font-size: 0.85rem;
}

/* ---- Forms & cards (scoped) ------------------------------------------------------
   The public plane's inputs get the same soft, rounded treatment as its cards, so a
   membership application doesn't look like the admin panel dropped into the site.
   -------------------------------------------------------------------------------- */
body[data-layout="tenant-public"] .card {
    border-color: var(--tp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--tp-shadow-sm);
}

body[data-layout="tenant-public"] label {
    font-size: 0.92rem;
    color: var(--tp-ink);
}

body[data-layout="tenant-public"] input,
body[data-layout="tenant-public"] select,
body[data-layout="tenant-public"] textarea {
    padding: 0.7rem var(--space-4);
    background: var(--tp-tint);
    border-color: var(--tp-line);
    border-radius: var(--radius);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
body[data-layout="tenant-public"] input:focus,
body[data-layout="tenant-public"] select:focus,
body[data-layout="tenant-public"] textarea:focus {
    background: var(--color-bg);
}
body[data-layout="tenant-public"] input::placeholder,
body[data-layout="tenant-public"] textarea::placeholder { color: var(--tp-soft); }

/* ---- CTA band --------------------------------------------------------------------
   A dark, textured close to the page. Both stops are mixed from the tenant's own
   secondary and brand, so it is never a generic near-black slab bolted onto a
   coloured site. Text is white-on-deep, which holds AA for any brand hue because
   --tp-deep floors the mix at 90% of the secondary against near-black.
   -------------------------------------------------------------------------------- */
.tp-cta-band {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding: clamp(2.25rem, 5vw, 3.25rem);
    border-radius: calc(var(--radius-lg) + 0.25rem);
    color: var(--tp-on-deep);
    background:
        radial-gradient(34rem 18rem at 88% 120%, color-mix(in srgb, var(--color-primary) 32%, transparent), transparent 62%),
        linear-gradient(135deg, var(--tp-deep-2), var(--tp-deep) 58%);
    box-shadow: var(--tp-shadow-lg);
}
.tp-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 78%);
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 78%);
    pointer-events: none;
}
.tp-cta-band > * { position: relative; }

.tp-cta-band .tp-heading {
    color: #ffffff;
    margin-bottom: var(--space-3);
}
/* Lift the accent word off the deep ground with a pale mix of the brand. */
.tp-cta-band .tp-accent { color: color-mix(in srgb, var(--color-primary) 45%, #ffffff); }
.tp-cta-band p {
    margin: 0;
    max-width: 38rem;
    color: color-mix(in srgb, var(--tp-on-deep) 82%, transparent);
    line-height: 1.7;
}
.tp-cta-band .text-muted { color: color-mix(in srgb, var(--tp-on-deep) 82%, transparent); }

.tp-cta-band-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---- Pagination ------------------------------------------------------------------ */
.tp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.tp-page-btn {
    display: inline-block;
    padding: 0.55rem var(--space-4);
    border: 1px solid var(--tp-line-strong);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
}
.tp-page-btn:hover {
    background: var(--tp-tint);
    border-color: var(--color-primary);
    text-decoration: none;
}
.tp-page-btn.is-disabled {
    color: var(--color-text-muted);
    opacity: 0.5;
    pointer-events: none;
}

.tp-page-status {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ---- Footer ------------------------------------------------------------------------ */
.tp-footer {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: clamp(3rem, 7vw, 5rem);
    /* The wash sits over the brand block's copy, so it is kept lighter than the
       CTA band's — enough to tint, not enough to lift the ground under the text. */
    background:
        radial-gradient(46rem 22rem at 6% -30%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 62%),
        var(--tp-footer-bg);
    color: var(--tp-footer-ink);
    font-size: 0.95rem;
}
/* Hairline of brand across the top edge — ties the dark footer to the site. */
.tp-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-primary),
        color-mix(in srgb, var(--color-primary) 30%, transparent) 65%,
        transparent);
}

.tp-footer a { color: inherit; }
.tp-footer a:hover { color: #ffffff; }

.tp-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: clamp(2.75rem, 6vw, 4rem) var(--space-8);
}
@media (min-width: 768px) { .tp-footer-grid { grid-template-columns: 2fr 1fr 1.4fr; gap: var(--space-12); } }

.tp-footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.tp-footer-logo {
    height: 2.75rem;
    width: auto;
    max-width: 4.5rem;
    object-fit: contain;
}
.tp-footer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, #ffffff 12%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
    color: #ffffff;
    font-family: var(--tp-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.tp-footer-name {
    font-family: var(--tp-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}
.tp-footer-tagline {
    margin: 0;
    opacity: 0.8;
    max-width: 32rem;
    line-height: 1.7;
}

.tp-footer-heading {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.65;
    margin-bottom: var(--space-4);
}

.tp-footer-links ul,
.tp-footer-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.tp-footer-links a,
.tp-footer-contact a { opacity: 0.85; }
.tp-footer-links a:hover,
.tp-footer-contact a:hover { opacity: 1; text-decoration: none; }

.tp-footer-address {
    white-space: pre-line;
    opacity: 0.85;
    line-height: 1.6;
}

/* Social links as outlined pills — legible on the dark ground without icons
   (the CSP is self-only, so no icon font). */
.tp-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding: 0;
}
.tp-social a {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.85;
}
.tp-social a:hover {
    background: color-mix(in srgb, #ffffff 12%, transparent);
    border-color: color-mix(in srgb, #ffffff 40%, transparent);
    opacity: 1;
    text-decoration: none;
}

.tp-footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-block: var(--space-6);
    border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    font-size: 0.85rem;
    opacity: 0.75;
}
.tp-footer-legal p { margin: 0; }

/* =============================================================================
   Member area chrome (body[data-layout="tenant"])
   -----------------------------------------------------------------------------
   The signed-in member's view of their own society. It reuses the generic
   .site-header / .site-nav / .site-footer markup rather than the tp-* partials,
   so this block restyles those to match the public site: same glass header, same
   pill nav, same deep footer. Scoped to the layout attribute so the central and
   superadmin planes, which share those class names, are untouched.
   ========================================================================== */
body[data-layout="tenant"] .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tp-line);
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}
body[data-layout="tenant"] .site-header.is-stuck {
    box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--tp-ink) 70%, transparent);
}

body[data-layout="tenant"] .site-nav { min-height: 4.25rem; }

body[data-layout="tenant"] .site-nav .brand {
    font-family: var(--tp-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tp-ink);
    gap: var(--space-3);
}
body[data-layout="tenant"] .site-nav .brand:hover { text-decoration: none; }
body[data-layout="tenant"] .site-nav .brand .badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

body[data-layout="tenant"] .site-nav > ul {
    gap: 0.15rem;
    align-items: center;
}

body[data-layout="tenant"] .site-nav a:not(.btn),
body[data-layout="tenant"] .site-nav .linkish {
    display: inline-block;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    color: var(--tp-soft);
    font-size: 0.93rem;
    font-weight: 500;
}
body[data-layout="tenant"] .site-nav a:not(.btn):hover,
body[data-layout="tenant"] .site-nav .linkish:hover {
    color: var(--tp-ink);
    background: var(--tp-tint-strong);
    text-decoration: none;
}

body[data-layout="tenant"] .site-main { padding-block: clamp(2rem, 5vw, 3rem); }

body[data-layout="tenant"] .card {
    border-color: var(--tp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--tp-shadow-sm);
}

body[data-layout="tenant"] h1,
body[data-layout="tenant"] h2 {
    font-family: var(--tp-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tp-ink);
}

body[data-layout="tenant"] .btn {
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    box-shadow: var(--tp-shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body[data-layout="tenant"] .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary) 65%, transparent);
}

body[data-layout="tenant"] input,
body[data-layout="tenant"] select,
body[data-layout="tenant"] textarea {
    padding: 0.7rem var(--space-4);
    background: var(--tp-tint);
    border-color: var(--tp-line);
    border-radius: var(--radius);
}
body[data-layout="tenant"] input:focus,
body[data-layout="tenant"] select:focus,
body[data-layout="tenant"] textarea:focus { background: var(--color-bg); }

body[data-layout="tenant"] .site-footer {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    background: var(--tp-footer-bg);
    border-top: none;
    color: color-mix(in srgb, var(--tp-footer-ink) 78%, transparent);
    padding-block: var(--space-8);
}

/* =============================================================================
   Tenant CMS (Phase 06) — admin-only affordances.
   ========================================================================== */
.drag-handle { cursor: grab; color: var(--color-text-muted); user-select: none; width: 1.5rem; text-align: center; }

/* Current-logo preview on the platform settings screen. */
.adm-logo-preview {
    height: 3.5rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    margin-bottom: var(--space-2);
}

/* Row thumbnail for image-bearing CMS lists (hero slides). */
.adm-thumb {
    width: 7rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
}
table[data-sortable] tbody tr { cursor: default; }
table[data-sortable] tbody tr.is-dragging { opacity: 0.5; background: var(--color-primary-light); }
.card.is-unread { border-left: 3px solid var(--color-primary); }
fieldset { border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px); padding: var(--space-4); }
fieldset legend { padding: 0 var(--space-2); }

/* =============================================================================
   Membership module (Phase 07) — public plans, directory, member area helpers.
   ========================================================================== */

/* Small shared helpers */
.form-hint { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.form-thumb { display: block; width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); border: 1px solid var(--color-border); }
.pill-success { background: var(--color-primary-light); color: var(--color-primary-dark); }
.pill-muted { background: #f3f4f6; color: var(--color-text-muted); }

/* Definition-list detail layout (member/admin detail cards) */
.detail-list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; }
@media (min-width: 640px) { .detail-list { grid-template-columns: repeat(2, 1fr); } }
.detail-list > div { display: flex; flex-direction: column; gap: 2px; }
.detail-list dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.detail-list dd { margin: 0; font-weight: 500; }

/* Public membership plans */
.tp-page-lead {
    margin: var(--space-4) 0 0;
    max-width: 44rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--tp-soft);
}
.tp-section-narrow { max-width: 48rem; margin-inline: auto; }
.tp-cta { margin-top: var(--space-8); text-align: center; }

.tp-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
@media (min-width: 640px) { .tp-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tp-plan-grid { grid-template-columns: repeat(3, 1fr); } }

.tp-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--tp-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.tp-plan:hover {
    border-color: var(--tp-line-strong);
    box-shadow: var(--tp-shadow);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .tp-plan, .tp-plan:hover { transition: none; transform: none; }
}

.tp-plan-name { font-family: var(--tp-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.018em; margin: 0; color: var(--tp-ink); }

/* The fee is the headline of the card — big figure, small qualifier, and a rule
   under it so the benefits below read as a separate block. */
.tp-plan-fee {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--tp-line);
}
.tp-plan-amount {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--tp-ink);
}
.tp-plan-period { color: var(--tp-soft); font-size: 0.85rem; margin-left: 0; }
.tp-plan-desc { margin: 0; color: var(--tp-soft); line-height: 1.65; }
.tp-plan-benefits {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--tp-soft);
}
.tp-plan .btn { margin-top: auto; width: 100%; }

/* Directory search bar */
.tp-search {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
    padding: var(--space-4);
    background: var(--tp-tint);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius-lg);
}
body[data-layout="tenant-public"] .tp-search input[type="search"],
body[data-layout="tenant-public"] .tp-search select { background: var(--color-bg); }
.tp-search input[type="search"] { flex: 1 1 16rem; }
.tp-search select { flex: 0 1 12rem; }
.tp-search .btn { flex-shrink: 0; }

/* Directory member cards */
.tp-member {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--tp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--tp-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.tp-member:hover {
    border-color: var(--tp-line-strong);
    box-shadow: var(--tp-shadow);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .tp-member, .tp-member:hover { transition: none; transform: none; }
}
.tp-member-photo {
    width: min(7.5rem, 62%);
    aspect-ratio: 1;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--tp-tint-strong);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
        0 0 0 6px color-mix(in srgb, var(--color-primary) 7%, transparent);
}
.tp-member-photo img { width: 100%; height: 100%; object-fit: cover; }
.tp-member-initials {
    display: flex; align-items: center; justify-content: center; height: 100%;
    font-family: var(--tp-display); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-primary-dark);
}
.tp-member-name { font-family: var(--tp-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.012em; margin: 0 0 var(--space-2); color: var(--tp-ink); }
.tp-member-role { font-size: 0.9rem; color: var(--tp-soft); margin: 0; line-height: 1.5; }
.tp-member-cat {
    display: inline-block;
    margin: var(--space-3) 0 0;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
}

/* =============================================================================
   Admin CMS shell — dark fixed sidebar + sticky topbar (tenant admin and
   superadmin planes). Vanilla reproduction of the conference-dashboard shell:
   no Bootstrap/FontAwesome (CSP is self-only); icons are the inline SVG sprite
   in layouts/partials/svg-icons.blade.php. The active-link accent follows
   --color-primary, so tenant branding and the superadmin blue both apply.
   ========================================================================== */
:root {
    --adm-sidebar-w: 250px;
    --adm-sidebar-bg: #111827;
    --adm-sidebar-line: rgba(255, 255, 255, 0.07);
    --adm-sidebar-ink: rgba(255, 255, 255, 0.66);
    --adm-topbar-h: 56px;
}

/* The shell replaces the body's stacked flex layout with sidebar + main. */
body.adm-body {
    display: block;
    background: var(--color-surface);
}

.adm-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---- Sidebar --------------------------------------------------------------- */
.adm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: var(--adm-sidebar-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--adm-sidebar-bg);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.adm-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--adm-topbar-h);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--adm-sidebar-line);
    flex-shrink: 0;
}

.adm-brand-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.adm-brand-link:hover { text-decoration: none; }

.adm-brand-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-brand-sub {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Close button — only shown inside the off-canvas sidebar on mobile. */
.adm-close {
    display: none;
    background: none;
    border: 0;
    padding: var(--space-2);
    color: var(--adm-sidebar-ink);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.adm-close:hover { color: #ffffff; background: var(--adm-sidebar-line); }

.adm-nav {
    flex: 1;
    overflow-y: auto;
    padding-block: var(--space-2) var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.adm-section {
    padding: var(--space-4) var(--space-4) var(--space-1);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

.adm-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    min-height: 2.5rem;
    color: var(--adm-sidebar-ink);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.12s ease, background-color 0.12s ease;
    /* Also used on the logout <button> inside a POST form. */
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.adm-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}
.adm-link.is-active {
    color: #ffffff;
    background: var(--color-primary);
}
.adm-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}
.adm-link-logout { color: rgba(255, 130, 130, 0.85); }
.adm-link-logout:hover { color: #ffb4b4; background: rgba(255, 100, 100, 0.09); }

/* Pending-count badge inside a sidebar link. */
.adm-count {
    margin-left: auto;
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--color-warning);
    color: #111827;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
}

.adm-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--adm-sidebar-line);
    padding-block: var(--space-2);
}
.adm-sidebar-footer .inline-form { display: block; }

/* ---- Overlay (mobile off-canvas) ------------------------------------------- */
.adm-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
}
.adm-overlay[hidden] { display: none; }

/* ---- Main column ------------------------------------------------------------ */
.adm-main {
    margin-left: var(--adm-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.adm-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--adm-topbar-h);
    padding-inline: var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.adm-hamburger {
    display: none;
    background: none;
    border: 0;
    padding: var(--space-2);
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.adm-hamburger:hover { background: var(--color-surface); color: var(--color-text); }

.adm-topbar-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.adm-page-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-chip {
    flex-shrink: 0;
    padding: 0.1rem var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.adm-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.adm-viewsite {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}
.adm-viewsite:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    text-decoration: none;
}
.adm-viewsite .adm-ico { width: 15px; height: 15px; }

/* ---- Avatar + dropdown ------------------------------------------------------ */
.adm-user { position: relative; }

.adm-avatar-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    padding: var(--space-1);
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
}
.adm-avatar-btn:hover,
.adm-avatar-btn[aria-expanded="true"] { background: var(--color-surface); }

.adm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.adm-user-name {
    max-width: 10rem;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-caret {
    width: 13px;
    height: 13px;
    color: var(--color-text-muted);
    transition: transform 0.18s ease;
}
.adm-avatar-btn[aria-expanded="true"] .adm-caret { transform: rotate(180deg); }

.adm-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 14rem;
    padding-block: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.adm-dropdown[hidden] { display: none; }
.adm-dropdown .inline-form { display: block; }

.adm-dropdown-head {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
}
.adm-dropdown-name { font-weight: 600; font-size: 0.88rem; }
.adm-dropdown-mail {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.adm-dropdown-item:hover {
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
}
.adm-dropdown-item .adm-ico { width: 15px; height: 15px; color: var(--color-text-muted); }
.adm-dropdown-logout { color: var(--color-danger); }
.adm-dropdown-logout .adm-ico { color: var(--color-danger); }
.adm-dropdown-logout:hover { background: #fef2f2; color: #b91c1c; }

/* ---- Content + footer -------------------------------------------------------- */
.adm-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-6);
}

.adm-page-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ---- Admin shell: mobile ------------------------------------------------------ */
@media (max-width: 768px) {
    /* Off-canvas only when JS is available; a no-JS visitor gets the sidebar
       stacked above the content instead of an unreachable drawer. */
    html.js .adm-sidebar { transform: translateX(-100%); }
    html.js .adm-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }
    html:not(.js) .adm-sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .adm-main { margin-left: 0; }
    .adm-hamburger { display: inline-flex; }
    html.js .adm-close { display: inline-flex; }
    .adm-chip { display: none; }
    .adm-user-name, .adm-caret { display: none; }
    .adm-viewsite span { display: none; }
    .adm-content { padding: var(--space-4); }
    .adm-topbar { padding-inline: var(--space-4); }
    .adm-page-footer { padding-inline: var(--space-4); }
}

@media (max-width: 480px) {
    .adm-content { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .adm-sidebar, .adm-caret { transition: none; }
}

/* =============================================================================
   Generic mobile collapse for .site-nav headers (member area + central
   marketing). Mirrors the tp-nav toggle: collapsed only when html.js is
   present, so no-JS visitors always see the full menu.
   ========================================================================== */
.sn-toggle { display: none; }

@media (max-width: 767px) {
    html.js .sn-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        background: none;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: var(--space-2) var(--space-3);
        font: inherit;
        font-size: 0.9rem;
        color: var(--color-text);
        cursor: pointer;
    }

    .sn-toggle-bar,
    .sn-toggle-bar::before,
    .sn-toggle-bar::after {
        content: "";
        display: block;
        width: 1.1rem;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        position: relative;
    }
    .sn-toggle-bar::before { position: absolute; top: -5px; }
    .sn-toggle-bar::after { position: absolute; top: 5px; }

    html.js .site-nav > ul { display: none; }
    html.js .site-nav > ul.is-open { display: flex; }

    .site-nav > ul {
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-border);
    }
    /* Comfortable ≥44px touch targets on the collapsed menu. */
    .site-nav > ul a,
    .site-nav > ul .linkish {
        display: block;
        width: 100%;
        padding: var(--space-3);
        text-align: left;
    }
    .site-nav > ul .btn { display: inline-flex; margin: var(--space-2) var(--space-3); }
}

/* =============================================================================
   Responsive polish (mobile-first pass)
   ========================================================================== */
/* Detail lists collapse to a single column on small screens. */
@media (max-width: 480px) {
    .dl-inline { grid-template-columns: 1fr; gap: 0 0; }
    .dl-inline dt { margin-top: var(--space-3); }
    .dl-inline dt:first-child { margin-top: 0; }
}

/* Keep long unbroken strings (emails, URLs, references) from overflowing cards. */
.card, .table td { overflow-wrap: break-word; }

/* =============================================================================
   Central plane redesign — the Saypeace storefront (marketing + client account).
   -----------------------------------------------------------------------------
   Scoped to body[data-layout="public"] so nothing leaks into the tenant or
   admin planes. Self-hosted Ubuntu throughout (see @font-face at the top) —
   one typeface across the whole platform, with italic used for accent phrases.
   ========================================================================== */
body[data-layout="public"] {
    --color-primary: #059669;
    --color-primary-dark: #047857;
    --color-primary-light: #d5f0e3;

    --mk-ink: #0d1b14;
    --mk-soft: #4f5f57;
    --mk-mist: #f4f8f5;
    --mk-line: #e2eae5;
    --mk-dark: #0a1712;
    --mk-display: var(--font-sans);

    --color-text: var(--mk-ink);
    --color-text-muted: var(--mk-soft);
    --color-border: var(--mk-line);
    --color-surface: var(--mk-mist);
}

/* Serif italic accent — one word set apart, editorial style. */
/* Italic accent — Ubuntu ships italic at 400 only, so any heavier weight here
   would render as a synthesised oblique. */
.mk-accent {
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ---- Header ---------------------------------------------------------------- */
body[data-layout="public"] .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mk-line);
    box-shadow: none;
}

body[data-layout="public"] .site-nav {
    min-height: 4.25rem;
    padding-block: var(--space-2);
}

body[data-layout="public"] .site-nav .brand {
    gap: var(--space-3);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mk-ink);
}
body[data-layout="public"] .site-nav .brand:hover { text-decoration: none; }

.mk-mark {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, #10b981, #047857);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.35);
}

/* Operator-uploaded platform logo (falls back to .mk-mark when unset). */
.mk-logo {
    height: 2.25rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
    flex-shrink: 0;
}
.mk-auth-brand .mk-logo { height: 2.9rem; max-width: 13rem; }

body[data-layout="public"] .site-nav > ul {
    gap: var(--space-1);
    align-items: center;
}

body[data-layout="public"] .site-nav > ul a:not(.btn) {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--mk-soft);
}
body[data-layout="public"] .site-nav > ul a:not(.btn):hover {
    color: var(--mk-ink);
    background: var(--mk-mist);
    text-decoration: none;
}
body[data-layout="public"] .site-nav > ul a.is-active {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
}

body[data-layout="public"] .site-nav .linkish {
    padding: 0.45rem 0.85rem;
    font-size: 0.93rem;
    font-weight: 500;
}
body[data-layout="public"] .site-nav .linkish:hover { text-decoration: none; color: var(--mk-ink); }

/* ---- Buttons ---------------------------------------------------------------- */
body[data-layout="public"] .btn {
    padding: 0.72rem 1.5rem;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.18);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
body[data-layout="public"] .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(5, 150, 105, 0.5);
}
body[data-layout="public"] .btn:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

body[data-layout="public"] .btn-outline {
    background: #ffffff;
    border-color: var(--mk-line);
    color: var(--mk-ink);
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.06);
}
body[data-layout="public"] .btn-outline:hover {
    background: var(--mk-mist);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--mk-line));
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.06);
}

body[data-layout="public"] .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* White + ghost buttons for dark bands. */
.mk-btn-light {
    background: #ffffff;
    color: var(--mk-ink);
}
body[data-layout="public"] .mk-btn-light:hover { background: #e8f5ee; color: var(--mk-ink); }
.mk-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: none;
}
body[data-layout="public"] .mk-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: none;
}

/* ---- Main / flash ------------------------------------------------------------ */
body[data-layout="public"] .site-main { padding-block: 0; }

.mk-flash { padding-top: var(--space-6); }
.mk-flash .alert { margin-bottom: 0; }

/* ---- Section scaffolding ----------------------------------------------------- */
.mk-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.mk-section-flush-top { padding-top: 0; }
.mk-section-tint {
    background: var(--mk-mist);
    border-block: 1px solid var(--mk-line);
}

.mk-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.mk-kicker::before {
    content: "";
    width: 1.4rem;
    height: 2px;
    border-radius: 1px;
    background: var(--color-primary);
}

.mk-h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--mk-ink);
    text-wrap: balance;
    margin: var(--space-3) 0;
}

.mk-sub {
    color: var(--mk-soft);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 58ch;
    margin: 0;
}

.mk-section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.mk-section-head.is-center {
    margin-inline: auto;
    text-align: center;
}
.mk-section-head.is-center .mk-sub { margin-inline: auto; }

/* ---- Hero -------------------------------------------------------------------- */
.mk-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(52rem 28rem at 12% -12%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 62%),
        radial-gradient(46rem 26rem at 92% -4%, color-mix(in srgb, #0ea5e9 8%, transparent), transparent 58%),
        linear-gradient(180deg, var(--mk-mist), #ffffff 70%);
    border-bottom: 1px solid var(--mk-line);
}
.mk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--mk-ink) 8%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 65%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 65%);
    pointer-events: none;
}

.mk-hero-inner {
    position: relative;
    text-align: center;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 7vw, 5.5rem);
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--mk-line);
    box-shadow: var(--shadow-sm);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mk-soft);
}
.mk-eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.mk-hero-title {
    font-size: clamp(2.3rem, 5.6vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--mk-ink);
    text-wrap: balance;
    max-width: 22ch;
    margin: var(--space-6) auto var(--space-4);
}
.mk-hero-title .mk-accent { color: var(--color-primary-dark); }

.mk-hero-lede {
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.7;
    color: var(--mk-soft);
    max-width: 44rem;
    margin: 0 auto var(--space-8);
}

.mk-hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Quiet reassurance points under the hero CTAs. */
.mk-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-6);
    font-size: 0.9rem;
    color: var(--mk-soft);
}
.mk-point {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.mk-point svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ---- Browser-frame product mockup (pure CSS, no images) ---------------------- */
.mk-browser {
    position: relative;
    max-width: 54rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
    background: #ffffff;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius-lg);
    box-shadow:
        0 40px 90px -30px rgba(10, 23, 18, 0.3),
        0 12px 30px -18px rgba(10, 23, 18, 0.18);
    overflow: hidden;
    text-align: left;
}

.mk-browser-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.6rem 1rem;
    background: var(--mk-mist);
    border-bottom: 1px solid var(--mk-line);
}
.mk-browser-dots { display: flex; gap: 0.4rem; flex-shrink: 0; }
.mk-browser-dots span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #d9e1dc;
}
.mk-browser-dots span:nth-child(1) { background: #fca5a5; }
.mk-browser-dots span:nth-child(2) { background: #fcd34d; }
.mk-browser-dots span:nth-child(3) { background: #6ee7b7; }

.mk-browser-url {
    flex: 1;
    max-width: 17rem;
    margin-inline: auto;
    padding: 0.22rem 0.9rem;
    background: #ffffff;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    font-size: 0.73rem;
    color: var(--mk-soft);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Miniature society site inside the frame; --mini-brand is set inline per use. */
.mk-mini { --mini-brand: #0f766e; }

.mk-mini-nav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--mk-line);
}
.mk-mini-logo {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.35rem;
    background: var(--mini-brand);
    flex-shrink: 0;
}
.mk-mini-word {
    width: 5.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mk-ink) 78%, #ffffff);
}
.mk-mini-links {
    display: flex;
    gap: 0.7rem;
    margin-left: auto;
}
.mk-mini-links i {
    display: block;
    width: 2.1rem;
    height: 0.38rem;
    border-radius: 2px;
    background: var(--mk-line);
}

.mk-mini-hero {
    padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
    background:
        radial-gradient(24rem 12rem at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(120deg, color-mix(in srgb, var(--mini-brand) 88%, #000000), var(--mini-brand));
    color: #ffffff;
}
.mk-mini-hero-title {
    font-family: var(--mk-display);
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 24rem;
    margin: 0 0 0.6rem;
}
.mk-mini-hero .mk-bar { background: rgba(255, 255, 255, 0.35); }
.mk-mini-btn {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--mini-brand);
    font-size: 0.68rem;
    font-weight: 700;
}

.mk-bar {
    display: block;
    height: 0.42rem;
    border-radius: 2px;
    background: var(--mk-line);
}
.mk-bar + .mk-bar { margin-top: 0.45rem; }
.mk-bar-70 { width: 70%; }
.mk-bar-45 { width: 45%; }

.mk-mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    padding: 1.25rem;
}
.mk-mini-card {
    border: 1px solid var(--mk-line);
    border-radius: 0.55rem;
    padding: 0.7rem;
}
.mk-mini-thumb {
    aspect-ratio: 16 / 7;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--mini-brand) 16%, #ffffff);
    margin-bottom: 0.6rem;
}

@media (max-width: 560px) {
    .mk-mini-cards { grid-template-columns: repeat(2, 1fr); }
    .mk-mini-card:nth-child(3) { display: none; }
    .mk-mini-links { display: none; }
}

/* ---- Feature cards ------------------------------------------------------------ */
.mk-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 640px) { .mk-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mk-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.mk-feature {
    padding: var(--space-6);
    background: #ffffff;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mk-feature:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--mk-line));
    box-shadow: 0 18px 40px -18px rgba(10, 23, 18, 0.2);
}

.mk-feature-ico {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--color-primary) 11%, #ffffff);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}
.mk-feature-ico svg { width: 1.35rem; height: 1.35rem; }

.mk-feature h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mk-ink);
    margin-bottom: var(--space-2);
}
.mk-feature p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--mk-soft);
}

/* ---- Horizontal steps (home) --------------------------------------------------- */
.mk-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 820px) { .mk-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-4); } }

.mk-step { position: relative; }

.mk-step-num {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--mk-line));
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-bottom: var(--space-3);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

@media (min-width: 820px) {
    .mk-step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 1.2rem;
        left: calc(2.4rem + 0.9rem);
        right: 0.5rem;
        border-top: 1px dashed color-mix(in srgb, var(--color-primary) 30%, var(--mk-line));
    }
}

.mk-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mk-ink);
    margin-bottom: var(--space-1);
}
.mk-step p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--mk-soft);
}

/* ---- Vertical timeline (how-it-works page) ------------------------------------- */
.mk-timeline {
    position: relative;
    max-width: 44rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mk-timeline::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 35%, #ffffff), var(--mk-line));
}

.mk-tl-item {
    position: relative;
    padding: 0 0 clamp(2rem, 5vw, 2.75rem) 4.25rem;
}
.mk-tl-item:last-child { padding-bottom: 0; }

.mk-tl-num {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--mk-line));
    color: var(--color-primary-dark);
    font-weight: 700;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mk-tl-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mk-ink);
    margin-bottom: var(--space-2);
}
.mk-tl-item > p {
    margin: 0;
    color: var(--mk-soft);
    line-height: 1.7;
    max-width: 54ch;
}

.mk-tl-hint {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--mk-mist);
    border: 1px solid var(--mk-line);
    border-radius: var(--radius);
    font-size: 0.88rem;
    color: var(--mk-soft);
}
.mk-tl-hint p { margin: 0; }

/* ---- Dark CTA band -------------------------------------------------------------- */
.mk-band {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) + 0.25rem);
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    color: #e9f2ec;
    background:
        radial-gradient(38rem 20rem at 85% 115%, rgba(16, 185, 129, 0.25), transparent 60%),
        linear-gradient(135deg, #0d241a, var(--mk-dark) 55%, #0e2b1f);
}
.mk-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 75%);
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 75%);
    pointer-events: none;
}
.mk-band > * { position: relative; }

.mk-band h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #ffffff;
    text-wrap: balance;
    margin-bottom: var(--space-3);
}
.mk-band h2 .mk-accent { color: #6ee7b7; }

.mk-band p {
    color: rgba(233, 242, 236, 0.78);
    max-width: 42rem;
    margin: 0 auto var(--space-6);
    line-height: 1.7;
}

.mk-band-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---- Pricing tiers ---------------------------------------------------------------- */
.mk-tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
@media (min-width: 900px) { .mk-tiers { grid-template-columns: repeat(3, 1fr); } }

.mk-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: #ffffff;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.04);
}
.mk-tier.is-featured {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--mk-line));
    box-shadow: 0 28px 60px -28px rgba(4, 120, 87, 0.4);
}

.mk-tier-flag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.28rem 0.9rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mk-tier-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--mk-ink);
    margin: 0;
}

.mk-tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}
.mk-tier-amount {
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mk-ink);
    line-height: 1;
}
.mk-tier-once {
    font-size: 0.85rem;
    color: var(--mk-soft);
}

.mk-tier-blurb {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mk-soft);
}

.mk-checks {
    list-style: none;
    margin: 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--mk-line);
    display: grid;
    gap: 0.65rem;
    font-size: 0.93rem;
}
.mk-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.mk-checks svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.14rem;
}

.mk-tier .btn { margin-top: auto; }

.mk-fineprint {
    text-align: center;
    font-size: 0.9rem;
    color: var(--mk-soft);
    margin: var(--space-8) 0 0;
}

/* ---- Example site cards ------------------------------------------------------------ */
.mk-shots {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 820px) { .mk-shots { grid-template-columns: repeat(2, 1fr); } }

.mk-shot {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(10, 23, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mk-shot:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -20px rgba(10, 23, 18, 0.22);
}

.mk-shot-body {
    padding: var(--space-4) var(--space-6) var(--space-6);
}
.mk-shot-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mk-ink);
    margin-bottom: var(--space-1);
}
.mk-shot-body p {
    margin: 0 0 var(--space-3);
    font-size: 0.93rem;
    color: var(--mk-soft);
}
.mk-shot-link {
    font-weight: 500;
    font-size: 0.93rem;
    color: var(--color-primary-dark);
}

/* "Your society here" placeholder card. */
.mk-shot-cta {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: var(--mk-mist);
    border-style: dashed;
    border-width: 2px;
    box-shadow: none;
    gap: var(--space-3);
}
.mk-shot-cta h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mk-ink);
    margin: 0;
}
.mk-shot-cta p { margin: 0; color: var(--mk-soft); max-width: 26rem; }

/* ---- Contact ------------------------------------------------------------------------- */
.mk-contact-solo { max-width: 42rem; margin-inline: auto; }

.mk-contact-aside {
    position: relative;
    overflow: hidden;
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    color: #e9f2ec;
    background:
        radial-gradient(24rem 14rem at 90% -10%, rgba(16, 185, 129, 0.28), transparent 60%),
        linear-gradient(150deg, #0d241a, var(--mk-dark));
}
.mk-contact-aside h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin-bottom: var(--space-3);
}
.mk-contact-aside > p {
    color: rgba(233, 242, 236, 0.78);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.mk-contact-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}
.mk-contact-list > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.mk-contact-list svg {
    width: 1.15rem;
    height: 1.15rem;
    color: #6ee7b7;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.mk-contact-list dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(233, 242, 236, 0.6);
}
.mk-contact-list dd { margin: 0.1rem 0 0; }
.mk-contact-list a { color: #ffffff; }

.mk-contact-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* ---- Auth ---------------------------------------------------------------------------- */
.mk-auth {
    position: relative;
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background:
        radial-gradient(40rem 22rem at 50% -10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
        var(--mk-mist);
    min-height: 100%;
}

body[data-layout="public"] .auth-card {
    max-width: 27rem;
    border-radius: var(--radius-lg);
    border-color: var(--mk-line);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
}

.mk-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.mk-auth-brand .mk-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 1.3rem;
}

.mk-auth h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: var(--space-2);
}
.mk-auth-sub {
    text-align: center;
    color: var(--mk-soft);
    font-size: 0.95rem;
    margin-bottom: var(--space-6);
}

.mk-auth-foot {
    text-align: center;
    font-size: 0.92rem;
    color: var(--mk-soft);
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--mk-line);
}

/* --- Inline domain edit on the request review screen ----------------------- */
.domain-edit {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.domain-edit input {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 24rem;
}
.domain-edit-hint {
    font-size: 0.85rem;
    margin: var(--space-2) 0 0;
}

/* --- Signed-in identity ----------------------------------------------------
   The nav chip and the dashboard greeting exist to answer one question fast:
   "am I actually logged in, and as who?" Both pair an initial mark with a name. */
.sn-account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sn-account-mark,
.acct-hello-mark {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
}
.sn-account-mark {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
}

.acct-hello {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.acct-hello-mark {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
}
.acct-hello-sub {
    margin: 0.15rem 0 0;
    color: var(--mk-soft);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.acct-next-lead {
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}
.acct-next .text-muted { max-width: 34rem; margin-inline: auto; }

/* --- "Continue with Google" ------------------------------------------------
   Neutral surface rather than the brand colour: Google's guidelines want their
   mark on white or a plain light/dark ground, and it should not read as the
   primary action over the site's own Log in button. */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-google:hover,
.btn-google:focus-visible {
    background: var(--mk-mist);
    border-color: color-mix(in srgb, var(--color-text) 22%, var(--mk-line));
    text-decoration: none;
}
.btn-google:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn-google-mark {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

/* Rule either side of a centred label, drawn with borders so it needs no extra
   markup and inherits the card's line colour. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--mk-soft);
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mk-line);
}

/* ---- Client account / request pages (contained app pages) ----------------------------- */
.mk-page { padding-block: clamp(2rem, 5vw, 3rem); }

body[data-layout="public"] .mk-page .page-head h1 {
    font-size: clamp(1.45rem, 3vw, 1.8rem);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}
body[data-layout="public"] .mk-page .page-head h2 { letter-spacing: -0.015em; }

body[data-layout="public"] .mk-page .card { border-radius: var(--radius-lg); }
body[data-layout="public"] .mk-page h2 { font-size: 1.2rem; letter-spacing: -0.015em; }

/* ---- Error / status hero --------------------------------------------------------------- */
.mk-error {
    text-align: center;
    padding-block: clamp(4rem, 12vw, 7rem);
}
.mk-error .mk-hero-title { margin-top: var(--space-6); }
.mk-error .mk-hero-lede { margin-bottom: var(--space-6); }

/* ---- Forms (central plane) -------------------------------------------------------------- */
body[data-layout="public"] label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}
body[data-layout="public"] input,
body[data-layout="public"] select,
body[data-layout="public"] textarea {
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    border-color: #d5dfd9;
    background: #ffffff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body[data-layout="public"] input:focus,
body[data-layout="public"] select:focus,
body[data-layout="public"] textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
body[data-layout="public"] input[type="checkbox"] {
    box-shadow: none;
    accent-color: var(--color-primary);
}

/* ---- Footer ------------------------------------------------------------------------------ */
.mk-footer {
    flex-shrink: 0;
    background: var(--mk-dark);
    color: #a7b8ae;
    font-size: 0.92rem;
}
.mk-footer a { color: inherit; }
.mk-footer a:hover { color: #ffffff; text-decoration: none; }

.mk-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: clamp(2.5rem, 6vw, 4rem) var(--space-8);
}
@media (min-width: 820px) { .mk-footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.4fr; } }

.mk-footer-brand-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.015em;
}
.mk-footer-tag {
    margin: var(--space-3) 0 0;
    max-width: 24rem;
    line-height: 1.7;
    color: #8ba296;
}

.mk-footer-h {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7b9287;
    margin-bottom: var(--space-3);
}
.mk-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.mk-footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-block: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    color: #7b9287;
}
.mk-footer-legal p { margin: 0; }

/* ---- Mobile nav (collapsed menu inherits the generic .sn-toggle collapse) ---------------- */
@media (max-width: 767px) {
    body[data-layout="public"] .site-nav > ul a:not(.btn) {
        display: block;
        border-radius: var(--radius-sm);
    }
    body[data-layout="public"] .site-nav > ul .btn {
        display: inline-flex;
        margin: var(--space-2) var(--space-3);
    }
}

/* ---- Reduced motion ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body[data-layout="public"] .btn,
    .mk-feature,
    .mk-shot {
        transition: none;
    }
    body[data-layout="public"] .btn:hover,
    .mk-feature:hover,
    .mk-shot:hover {
        transform: none;
    }
}