/* ─────────────────────────────────────────────────────────────────────
   SquareLog — brand CSS
   Canonical reference: docs/BRANDING.md §3.1 (color) & §3.2 (typography)
   This file sits on top of MudBlazor's stylesheet and overrides where the
   MudTheme tokens can't reach (marketing sections, brand gestures, the
   Blazor error UI, etc.). Keep it tight — if a value can live on the theme,
   put it on the theme, not here.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Self-hosted brand fonts ──────────────────────────────────────────
   Run `bash wwwroot/brand/fonts/download.sh` to populate the woff2 files.
   Until populated, browsers fall back to system-ui (graceful degrade).
   font-display: swap avoids invisible text during font load.
   ───────────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400; font-display: swap;
    src: local('Unbounded Regular'), local('Unbounded'), url('/brand/fonts/unbounded-400.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap;
    src: local('Unbounded SemiBold'), url('/brand/fonts/unbounded-600.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap;
    src: local('Unbounded ExtraBold'), url('/brand/fonts/unbounded-800.woff2') format('woff2'); }

@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: local('Albert Sans Regular'), local('AlbertSans-Regular'), url('/brand/fonts/albert-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: local('Albert Sans Medium'), url('/brand/fonts/albert-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: local('Albert Sans SemiBold'), url('/brand/fonts/albert-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: local('Albert Sans Bold'), url('/brand/fonts/albert-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: italic; font-weight: 400; font-display: swap;
    src: local('Albert Sans Italic'), url('/brand/fonts/albert-sans-400i.woff2') format('woff2'); }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: local('JetBrains Mono Regular'), url('/brand/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
    src: local('JetBrains Mono SemiBold'), url('/brand/fonts/jetbrains-mono-600.woff2') format('woff2'); }

/* ── Brand palette ─────────────────────────────────────────────────────────
   Default = dark mode. The :root values are the dark surface/text tokens.
   [data-theme="light"] below redefines just the surface/text tokens with
   cream/coal-text values; brand accents (lime, danger, warning, info) stay
   invariant across modes per the brand spec.

   Naming kept as --coal / --bone / --dim / --mute even in light mode for
   minimum-churn migration: existing CSS that says `var(--coal)` continues to
   resolve to the active mode's background. New CSS should still prefer these
   names; their meaning is "active background tier" / "active text tier", not
   the literal hex.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Surface tiers — dark by default */
    --coal: #0B0B0F;
    --coal-2: #15151B;
    --coal-3: #1E1E26;
    --coal-4: #272732;
    /* Text tiers */
    --bone: #F1EDE3;
    --dim: #8E8F99;
    --mute: #5A5B66;
    /* Lines */
    --line: rgba(241, 237, 227, 0.10);
    --line-strong: rgba(241, 237, 227, 0.20);

    /* Brand accents — invariant across modes */
    --lime: #D9F56A;
    --lime-hot: #C6F432;
    --lime-soft: rgba(217, 245, 106, 0.12);
    --line-lime: rgba(217, 245, 106, 0.35);
    --danger: #FF5A47;
    --warning: #F5A623;
    --info: #6CA7FF;

    /* Accent text — what to use when you want "the brand color" for TEXT on
       the active surface. In dark mode = lime (high contrast on coal). In
       light mode = coal (lime on cream is illegible, ~1.4:1 contrast). Lime
       remains the right choice for backgrounds + the tape-highlight gesture
       in BOTH modes — only flip for text. New CSS that styles text in the
       accent color should prefer `var(--accent-text)` over `var(--lime)`. */
    --accent-text: var(--lime);

    /* Body-paragraph text — crisper than --dim, semantically distinct from
       it. --dim is for kickers/meta/labels; --text-body is for prose. Both
       AA-pass on the active surface. Without this token, body paragraphs
       inherit hardcoded greys (#BDBEC8 et al) tuned for coal — illegible
       on cream. */
    --text-body: #C2C4CF;

    /* Invariant near-coal text used on lime backgrounds. Lime always wants
       dark foreground regardless of mode — encoding that as an invariant
       token (vs flipping with var(--coal)) prevents the cream-on-lime trap
       when someone writes `color: var(--coal)` on a lime button. */
    --on-lime: #15151B;

    /* Sticky nav backdrops. Translucent so the grid overlay shows through. */
    --appbar-glass: rgba(11, 11, 15, 0.72);
    --appbar-glass-strong: rgba(11, 11, 15, 0.92);

    --font-display: "Unbounded", "Inter", system-ui, sans-serif;
    --font-body: "Albert Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Light mode — warm cream surfaces, coal text. Lime stays as the only accent
   so the brand signature reads identically in either mode. Lines invert from
   bone-on-coal to coal-on-bone alpha. */
[data-theme="light"] {
    --coal: #F8F6EE;       /* warm cream — page background */
    --coal-2: #EFEAD8;     /* cards / surfaces — wider gap from page bg
                              (#F1EDE3 → #EFEAD8) so cards visibly separate
                              on cream; eye is less sensitive to small dark
                              increments on light backgrounds. */
    --coal-3: #E8E2D2;     /* deeper — popovers / drawer */
    --coal-4: #DBD5C4;     /* deepest — strong elevation */
    --bone: #15151B;       /* near-coal — primary text */
    --dim: #5A5B66;        /* mid-gray — secondary text (kickers, meta) */
    --mute: #8E8F99;       /* light-gray — disabled / placeholder */
    --line: rgba(11, 11, 15, 0.13);  /* hairlines need slightly more weight
                                         on cream than on coal to read at all. */
    --line-strong: rgba(11, 11, 15, 0.20);
    --accent-text: #15151B;  /* coal — lime is unreadable on cream as text */

    /* Body prose: ~9:1 on cream. Distinct from --dim (#5A5B66, ~6.6:1) which
       is reserved for kickers/meta. */
    --text-body: #3A3B45;

    /* --on-lime stays #15151B (invariant) — defined once in :root. */

    --appbar-glass: rgba(248, 246, 238, 0.78);
    --appbar-glass-strong: rgba(248, 246, 238, 0.92);
}

/* Light-mode MudBlazor guard. MudBlazor paints Color.Primary as a FOREGROUND
   (MudText/MudIcon/MudLink text, outlined-button text + border) straight from
   the lime palette token — ~1.4:1 on cream, the "lime accents unreadable"
   report. Retint just the foreground to --accent-text (coal) in light mode;
   FILLED primary buttons/chips (lime bg + coal text) and the lime tape/
   selection gestures are deliberately untouched. Selectors verified against
   MudBlazor 9.5.0 (.mud-primary-text carries !important, so we match it). */
[data-theme="light"] .mud-primary-text,
[data-theme="light"] .mud-button-outlined-primary,
[data-theme="light"] .mud-button-text-primary {
    color: var(--accent-text) !important;
}
[data-theme="light"] .mud-button-outlined-primary {
    border-color: var(--line-strong) !important;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--coal);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force MudBlazor's body reset to our palette */
.mud-appbar, .mud-drawer, .mud-main-content, .mud-container {
    font-family: var(--font-body);
}

/* Headings take the display stack even inside Mud components */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

/* Mono helper */
.sq-mono { font-family: var(--font-mono); }
.sq-display { font-family: var(--font-display); letter-spacing: -0.03em; }

/* ── Boot splash (shown until WASM is interactive) ──────────────── */
.sq-bootsplash {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px;
    background: var(--coal);
    color: var(--bone);
    z-index: 9999;
}
.sq-boot-lockup {
    max-width: min(440px, 70vw);
    height: auto;
    display: block;
}
.sq-boot-spinner { display: flex; gap: 6px; margin-top: 8px; }
.sq-boot-spinner span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime);
    animation: sq-bounce 1.2s infinite ease-in-out both;
}
.sq-boot-spinner span:nth-child(1) { animation-delay: -0.32s; }
.sq-boot-spinner span:nth-child(2) { animation-delay: -0.16s; }
@keyframes sq-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Brand gestures — used by Landing page and anywhere a "tape highlight"
       is needed per BRANDING.md §5. ──────────────────────────────── */
.sq-tape {
    background: var(--lime);
    color: var(--on-lime);
    padding: 0 0.3em;
    display: inline-block;
    transform: rotate(-1.5deg);
}

.sq-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--accent-text);
    text-transform: uppercase;
}

.sq-rule {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 0;
}

.sq-grid-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
    z-index: 0;
}

/* ── Landing / public layouts — optional classes for custom marketing
       HTML used inside Razor components. ──────────────────────────── */
.sq-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--bone);
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
}
.sq-pill .sq-pulse {
    width: 7px; height: 7px;
    background: var(--lime);
    border-radius: 50%;
    animation: sq-pulse 1.6s infinite ease-in-out;
}
@keyframes sq-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Focus outlines — brand-consistent across the app ─────────────── */
/* Uses --accent-text (lime on coal in dark, coal on cream in light) so the
   ring stays high-contrast in both modes. Raw --lime here was ~1.4:1 on the
   cream light-mode surface — effectively invisible. */
:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Mobile app-shell — stop the appbar chip row overflowing ──────────
   The toolbar packs brand + account-email chip + usage chip + the MVP tag
   + theme/logout buttons, none of it wrapped, so a long email pushed the
   row past the viewport on phones. Collapse the decorative bits
   progressively; the MudBlazor drawer is already a responsive overlay
   below 960px so it is NOT the offender — only the toolbar is. */
@media (max-width: 700px) {
    .sq-env-chip { display: none !important; }   /* pure decoration */
    /* Keep the account chip — a visible signed-in email is the
       wrong-account safeguard (issue #80) — but cap it so a long address
       truncates instead of overrunning the bar. */
    .sq-account-chip { max-width: 132px; }
    .sq-account-chip .mud-chip-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (max-width: 480px) {
    .sq-brand-word { display: none; }            /* logo mark still IDs the app */
    .sq-account-chip { max-width: 96px; }
}

/* Blazor error UI — branded, not lightyellow */
#blazor-error-ui {
    background: var(--danger);
    color: var(--coal);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    display: none;
    position: fixed;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}
#blazor-error-ui .reload {
    color: var(--coal);
    margin-left: 10px;
    border-bottom: 1px solid var(--coal);
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--lime); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-family: var(--font-mono); font-size: 12px; }

/* Scrollbar — coal-tinted to match palette */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--coal-3) var(--coal);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--coal); }
::-webkit-scrollbar-thumb { background: var(--coal-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--coal-4); }

/* Selection */
::selection { background: var(--lime); color: var(--on-lime); }
/* Shared styles for the split-screen auth layout (Login + Register) */

.sq-auth {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: var(--coal);
    color: var(--bone);
}

/* ── Brand panel (left) ──────────────────────────────────── */
.sq-auth-brand {
    position: relative;
    padding: 32px 48px 48px;
    background: var(--coal-2);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sq-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 30% 40%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 30%, transparent 80%);
    pointer-events: none;
}
.sq-auth-brand::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(217, 245, 106, 0.12), transparent 60%);
    top: -300px;
    right: -200px;
    pointer-events: none;
}
[data-theme="light"] .sq-auth-brand::after {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background:
        radial-gradient(circle 140px at 65% 25%, rgba(217,245,106,0.40), transparent 70%),
        radial-gradient(ellipse 100% 75% at 50% 85%, rgba(11,11,15,0.10), transparent 65%);
}

.sq-auth-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dim);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    width: fit-content;
}
.sq-auth-home:hover { color: var(--accent-text); }
.sq-auth-home svg { transition: transform 0.15s ease; }
.sq-auth-home:hover svg { transform: translateX(-3px); }

.sq-auth-brand-inner {
    position: relative;
    z-index: 2;
    max-width: 500px;
    /* auto vertical margins center the block in the leftover space below
       the home link — keeps the logo in the first viewport on any height */
    margin: auto 0;
    padding-top: 24px;
}

.sq-auth-lockup {
    /* Just the crate mark — wordmark + tagline used to be baked into the
       wide lockup PNG, but that asset was authored white-on-coal so it
       broke on the cream light-mode panel. The headline below carries
       the brand voice now ("Welcome back" / "Start the record" / etc.).
       Sizing matches the visual weight of the crate-as-it-was within the
       old lockup so the rest of the panel layout stays balanced. */
    display: block;
    width: 88px;
    height: 88px;
    margin-bottom: 24px;
    margin-left: -6px;
}

.sq-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--bone);
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    margin-bottom: 20px;
    width: fit-content;
}
.sq-pulse {
    width: 7px;
    height: 7px;
    background: var(--lime);
    border-radius: 50%;
    animation: sq-auth-pulse 1.6s infinite ease-in-out;
}
@keyframes sq-auth-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.sq-auth-hl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 0.94;
    letter-spacing: -0.04em;
    margin: 0 0 16px;
    color: var(--bone);
}
.sq-tape {
    background: var(--lime);
    color: var(--coal);
    padding: 0 12px;
    display: inline-block;
    transform: rotate(-1.5deg);
}

.sq-auth-sub {
    color: var(--text-body);
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 420px;
}

.sq-auth-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.sq-auth-trust-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--dim);
}
.sq-auth-trust-line svg { color: var(--accent-text); }

.sq-mono { font-family: var(--font-mono); }

/* ── Form panel (right) ──────────────────────────────────── */
.sq-auth-form-panel {
    display: flex;
    padding: 48px;
    background: var(--coal);
    overflow-y: auto;
}
.sq-auth-form {
    width: 100%;
    max-width: 440px;
    /* auto margins center the form but, unlike align/justify center,
       keep the top reachable when the panel scrolls (short viewports,
       Register's taller form) */
    margin: auto;
}

.sq-auth-kicker {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--accent-text);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sq-auth-form-h {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    color: var(--bone);
}
.sq-auth-form-sub {
    color: var(--dim);
    font-size: 15px;
    margin: 0 0 32px;
    line-height: 1.55;
}

.sq-auth-switch {
    margin-top: 24px;
    text-align: center;
    color: var(--dim);
    font-size: 14px;
}
.sq-auth-switch a {
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.sq-auth-switch a:hover { border-bottom-color: var(--lime); }

/* ── Responsive: collapse to single column on narrow screens ───
   The brand panel compresses to a slim strip (logo + headline only)
   so the login form is in the first viewport — no scrolling to it. */
@media (max-width: 900px) {
    .sq-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sq-auth-brand {
        padding: 16px 24px 20px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .sq-auth-brand-inner { margin: 0; padding-top: 14px; }
    .sq-auth-lockup { width: 52px; height: 52px; margin-bottom: 12px; margin-left: 0; }
    .sq-auth-pill, .sq-auth-sub, .sq-auth-trust { display: none; }
    .sq-auth-hl { font-size: 26px; margin-bottom: 0; }
    .sq-auth-form-panel { padding: 24px; }
}

/* ── Register-specific extensions ────────────────────────── */
.sq-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sq-strength { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 8px; height: 14px; }

/* ── 404 (both /not-found and unrouted-fallback) ────────── */
.sq-404 {
    min-height: 100vh; background: var(--coal);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px; position: relative; overflow: hidden;
}
.sq-404::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
    pointer-events: none;
}
.sq-404-inner { position: relative; z-index: 2; max-width: 640px; text-align: center; }
.sq-404-code { color: var(--accent-text); font-size: 12px; letter-spacing: 0.14em; margin-bottom: 24px; text-transform: uppercase; }
.sq-404-h { font-size: clamp(40px, 7vw, 92px); font-weight: 800; line-height: 1; margin: 0 0 24px; color: var(--bone); letter-spacing: -0.04em; }
.sq-404-body { color: var(--dim); font-size: 18px; line-height: 1.5; max-width: 520px; margin: 0 auto 40px; }
.sq-404-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sq-btn-lime {
    background: var(--lime); color: var(--on-lime); padding: 16px 26px; border-radius: 6px; font-weight: 700; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--lime);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.sq-btn-lime:hover { background: var(--lime-hot); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--bone); }
.sq-btn-ghost {
    color: var(--bone); padding: 16px 22px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--line); border-radius: 6px; display: inline-flex; align-items: center;
}
.sq-btn-ghost:hover { border-color: var(--bone); }

/* ── Legal pages (/terms, /privacy, /security) ──────────────────────────── */
.sq-legal {
    background: var(--coal);
    color: var(--bone);
    min-height: 100vh;
    font-family: var(--font-body);
}

.sq-legal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--appbar-glass-strong);
    backdrop-filter: blur(12px);
    z-index: 10;
}

.sq-legal-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dim);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.15s ease;
}
.sq-legal-back svg { transition: transform 0.15s ease; }
.sq-legal-back:hover { color: var(--accent-text); }
.sq-legal-back:hover svg { transform: translateX(-3px); }

.sq-legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bone);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.03em;
}

.sq-legal-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 32px 96px;
}

.sq-legal-header {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 60px;
}

.sq-legal-h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 54px);
    letter-spacing: -0.04em;
    color: var(--bone);
    margin: 14px 0 18px;
    line-height: 1;
}

.sq-legal-updated {
    color: var(--mute);
    font-size: 13px;
    letter-spacing: 0.06em;
}

/* Heading styles inside legal body */
.sq-legal-body h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--bone);
    margin: 56px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.sq-legal-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--bone);
    margin: 28px 0 10px;
    letter-spacing: 0.01em;
}

.sq-legal-body p {
    color: var(--text-body);
    font-size: 15.5px;
    line-height: 1.8;
    margin: 0 0 18px;
}

.sq-legal-body ul {
    color: var(--text-body);
    font-size: 15.5px;
    line-height: 1.8;
    margin: 0 0 18px;
    padding-left: 20px;
}

.sq-legal-body li { margin-bottom: 8px; }

.sq-legal-body a {
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s ease;
}
.sq-legal-body a:hover { border-bottom-color: var(--lime); }

.sq-legal-body strong { color: var(--bone); font-weight: 600; }

/* Callout box for notices and warnings */
.sq-legal-notice {
    background: var(--coal-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--lime);
    padding: 16px 20px;
    border-radius: 0 4px 4px 0;
    margin: 8px 0 24px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--dim);
}
.sq-legal-notice a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; }
.sq-legal-notice a:hover { border-bottom-color: var(--lime); }
.sq-legal-notice strong { color: var(--bone); }

/* Footer */
.sq-legal-footer {
    border-top: 1px solid var(--line);
    padding: 40px 32px;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sq-legal-footer-links {
    display: flex;
    gap: 28px;
}

.sq-legal-footer a {
    color: var(--mute);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: color 0.12s ease;
}
.sq-legal-footer a:hover { color: var(--accent-text); }

@media (max-width: 640px) {
    .sq-legal-nav { padding: 16px 20px; }
    .sq-legal-inner { padding: 0 20px 64px; }
    .sq-legal-header { padding: 40px 0 32px; }
    .sq-legal-footer { flex-direction: column; gap: 20px; padding: 28px 20px; align-items: flex-start; }
}

/* ─── Pre-hydration / crawler-visible content ──────────────────────────
   Visible only before Blazor WASM mounts (Blazor wipes #app on render).
   Same content as Landing.razor — no cloaking. Styled lightly so users
   who hit the page before WASM finishes loading still see something
   on-brand. Hydrated users never see this block.
   ───────────────────────────────────────────────────────────────────── */
.sq-prerender {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    color: var(--bone);
}
.sq-prerender-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.sq-prerender-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--bone);
    margin: 0 0 24px;
}
.sq-prerender h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0 0 24px;
}
.sq-prerender h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    margin: 56px 0 20px;
}
.sq-prerender h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 8px;
}
.sq-prerender p, .sq-prerender li { font-size: 17px; line-height: 1.6; color: var(--bone); }
.sq-prerender-lede { font-size: 19px; color: var(--dim); margin: 0 0 28px; max-width: 640px; }
.sq-prerender-cta { margin: 32px 0; }
.sq-prerender-cta a {
    display: inline-block;
    background: var(--lime);
    color: var(--coal);
    padding: 12px 22px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    margin-right: 12px;
}
.sq-prerender-cta a + a { background: transparent; color: var(--bone); border: 1px solid var(--line); }
.sq-prerender ul { padding-left: 22px; }
.sq-prerender ul li { margin-bottom: 8px; }
.sq-prerender a { color: var(--accent-text); }
.sq-prerender-footer {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mute);
}
.sq-prerender-footer a { color: var(--mute); margin: 0 4px; }
.sq-prerender-footer a:hover { color: var(--accent-text); }