/* =====================================================================================================================
   owns.ai  -  UNFOLD, THE DESIGN LAYER

   Loaded after every other stylesheet (default.aspx), so it has the last word on the whole site. Two companions load
   straight after it: unfold-app.css (the member area and admin) and unfold-home.css (the home page). The previous
   layer, Velocity (design.css), is no longer loaded; it stays on disk.

   The language is a confident consumer-electronics flagship: a pure white (or pure black) ground, soft grey tiles with
   no borders, one cobalt accent, big rounded stages (28px), pill buttons, pill tabs and pill fields, heavy tight
   headlines in Outfit and calm, roomy reading text in the same face. Motion is quick and springy (--ease), never
   floaty; nothing glows, nothing drifts, there is no gradient fog. Colour lives in imagery (the hero stages) and in
   the accent, not in the chrome.

   TOKENS. Every token the older stylesheets use (app.css :root) is redefined here, so a component that was written
   against tokens follows Unfold by construction. New tokens for the system:
       --r-xs .. --r-xl    the corner scale 8 / 12 / 16 / 22 / 28; --r-pill for every button, tab, chip and field
       --tile, --tile-2    the borderless grey tiles that hold content (cards are tiles, not boxes)
       --ink, --ink-inv    solid ink (black on light, white on dark) and its inverse: primary buttons are ink pills
       --accent*           cobalt: links, focus, active states, the one coloured thing in the chrome
       --band*             the always-dark band (a stage that stays dark in both themes)
   Literal 2/3/4px corners in the other stylesheets were mapped to var(--r-xs) / var(--r-sm) / var(--r).

   Coded By Darko G.
   ===================================================================================================================== */

:root,
[data-theme="light"] {
    --bg: #FFFFFF;
    --bg-2: #F5F5F7;
    --surface: #FFFFFF;
    --surface-2: #F4F4F6;
    --surface-3: #EAEAEE;
    --tile: #F4F4F4;
    --tile-2: #EAEAEA;
    --glass: rgba(255, 255, 255, .86);
    --border: #E5E5E8;
    --border-strong: #D2D2D6;
    --line-accent: rgba(26, 75, 255, .28);
    --text: #000000;
    --text-2: #2E2E31;
    --muted: #646469;
    --faint: #8D8D93;
    --ink: #000000;
    --ink-inv: #FFFFFF;

    --accent: #1A4BFF;
    --accent-2: #2E5BFF;
    --accent-ink: #FFFFFF;
    --accent-soft: #E8EDFF;
    --accent-text: #1A4BFF;
    --brand: #1A4BFF;
    --brand-2: #4D7BFF;
    --brand-3: #0F34D6;
    --brand-ink: #FFFFFF;
    --eyebrow-ink: #1A4BFF;
    --cyan: #1A4BFF;
    --success: #0A8F4E;
    --warning: #B25E00;
    --danger: #D92D20;
    --info: #1A4BFF;
    --success-soft: #E5F6EC;
    --warning-soft: #FFF2DE;
    --danger-soft: #FDECEA;

    --grad: linear-gradient(135deg, #1A4BFF, #1A4BFF);
    --grad-soft: linear-gradient(135deg, #E8EDFF, #E8EDFF);
    --grad-text: linear-gradient(100deg, #1A4BFF 0%, #1A4BFF 100%);
    --glow: 0 0 0 1px rgba(26, 75, 255, .25);

    --shadow-sm: 0 1px 2px rgba(10, 14, 30, .06);
    --shadow: 0 30px 60px -28px rgba(10, 14, 30, .32), 0 2px 6px rgba(10, 14, 30, .05);
    --shadow-lg: 0 50px 90px -30px rgba(10, 14, 30, .42), 0 4px 14px rgba(10, 14, 30, .07);
    --ring: 0 0 0 1px rgba(0, 0, 0, .06);
    --card-rim: 0 0 0 0 transparent;

    --input-bg: #FFFFFF;
    --input-solid: #FFFFFF;
    --fl-focus: #1A4BFF;
    --field-glow: 0 0 0 3px rgba(26, 75, 255, .18);
    --code-bg: #0B0B0D;
    --overlay: rgba(0, 0, 0, .45);
    --nav-bg: rgba(255, 255, 255, .86);

    --band: #000000;
    --band-tile: #111114;
    --band-line: #26262B;
    --band-text: #FFFFFF;
    --band-muted: #A1A1A8;

    --grid-line: transparent;
    --rule: linear-gradient(90deg, #1A4BFF, #1A4BFF);

    --font-display: "Outfit", ui-sans-serif, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-sans: "Outfit", ui-sans-serif, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --r-xs: 8px;
    --r-sm: 12px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;
    --nav-h: 68px;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --ease-snap: cubic-bezier(.4, 0, .1, 1);
    --ease-fade: cubic-bezier(.4, 0, .2, 1);   /* colour fades (hover on AND off): even, so leaving never looks like a snap */

    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #000000;
    --bg-2: #0A0A0B;
    --surface: #121214;
    --surface-2: #1C1C1F;
    --surface-3: #26262A;
    --tile: #121214;
    --tile-2: #1C1C1F;
    --glass: rgba(0, 0, 0, .78);
    --border: #26262A;
    --border-strong: #34343A;
    --line-accent: rgba(77, 123, 255, .35);
    --text: #FFFFFF;
    --text-2: #D6D6DB;
    --muted: #9C9CA3;
    --faint: #74747B;
    --ink: #FFFFFF;
    --ink-inv: #000000;

    --accent: #4D7BFF;
    --accent-2: #2E5BFF;
    --accent-ink: #FFFFFF;
    --accent-soft: #111A33;
    --accent-text: #7598FF;
    --brand: #4D7BFF;
    --brand-2: #7598FF;
    --brand-3: #2E5BFF;
    --brand-ink: #FFFFFF;
    --eyebrow-ink: #7598FF;
    --cyan: #7598FF;
    --success: #3DD68C;
    --warning: #FFB547;
    --danger: #FF6B5E;
    --info: #7598FF;
    --success-soft: #0D2619;
    --warning-soft: #2B1F0A;
    --danger-soft: #2E1311;

    --grad: linear-gradient(135deg, #2E5BFF, #2E5BFF);
    --grad-soft: linear-gradient(135deg, #111A33, #111A33);
    --grad-text: linear-gradient(100deg, #7598FF 0%, #7598FF 100%);
    --glow: 0 0 0 1px rgba(77, 123, 255, .35);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05);
    --shadow-lg: 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
    --ring: 0 0 0 1px rgba(255, 255, 255, .08);
    --card-rim: 0 0 0 0 transparent;

    --input-bg: #121214;
    --input-solid: #121214;
    --fl-focus: #7598FF;
    --field-glow: 0 0 0 3px rgba(77, 123, 255, .3);
    --code-bg: #0B0B0D;
    --overlay: rgba(0, 0, 0, .72);
    --nav-bg: rgba(0, 0, 0, .78);

    --band: #05070F;
    --band-tile: #0D1020;
    --band-line: #1C2140;
    --band-text: #FFFFFF;
    --band-muted: #A1A1A8;

    color-scheme: dark;
}


/* ---- GROUND --------------------------------------------------------------------------------------------------------
   A flat, pure ground. The older layers' aurora orbs, grid, honeycomb and film grain are switched off. */

html, body, [data-theme="light"] body { background: var(--bg); }
body { color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; letter-spacing: -.003em;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before, body::after { display: none !important; }
.bg-aurora { display: none !important; }
::selection { background: var(--accent); color: #fff; }


/* =====================================================================================================================
   THE COMPONENTS

   Every shared class from app.css's component index, redrawn in Unfold. Page stylesheets and the other two Unfold
   files rely on these; they are written against the tokens above only, so both themes hold by construction.
   ===================================================================================================================== */

/* ---- LAYOUT -------------------------------------------------------------------------------------------------------- */

.container-wide { max-width: 1440px; padding: 0 clamp(16px, 2.2vw, 32px); }
.section { padding: 112px 0; }
.section-sm { padding: 64px 0; }
.grid { gap: 16px; }
@media (max-width: 680px) {
    .section { padding: 72px 0; }
    .section-sm { padding: 48px 0; }
}


/* ---- TYPE ------------------------------------------------------------------------------------------------------------
   Outfit everywhere. Headlines are heavy, tight and in sentence case; reading text is calm and roomy. */

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); word-spacing: normal; text-transform: none; font-stretch: 100%; }
h1, h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.2vw, 72px); }
h2 { font-size: clamp(32px, 4vw, 56px); }
h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
h4 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h5 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.display { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.038em; word-spacing: normal; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
small, .small { font-size: 14px; }
a { color: var(--accent-text); }
a:hover { color: var(--text); }

/* No gradient text in Unfold: what was a gradient is now the accent, flat and still. */
.gradient-text, h1 .gradient-text, h2 .gradient-text, .display .gradient-text {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
    color: var(--accent-text); filter: none; animation: none;
}

/* EYEBROW: a short line of accent text over a headline. No pill, no box, no sheen; a leading icon is plain. */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; margin-bottom: 16px; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
    font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; text-transform: none; color: var(--accent-text);
}
.eyebrow::before, .eyebrow::after { content: none; display: none; }
.eyebrow:has(> i:first-child, > .dot-live:first-child) { padding-left: 0; }
.eyebrow > i:first-child { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: .95em; }
.eyebrow > .dot-live:first-child { margin: 0 2px 0 0; }

code, .mono, kbd, pre { font-family: var(--font-mono); }


/* ---- BUTTONS ---------------------------------------------------------------------------------------------------------
   Pills. Primary is solid ink that turns cobalt on hover; secondary is an outline ring that fills with ink. No
   gradients, no gloss, no glow; a press squeezes a little. */

.btn {
    --btn-bg: transparent;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); border: 0; background: var(--btn-bg); color: var(--text);
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-transform: none; font-stretch: 100%;
    clip-path: none; overflow: visible;
    transition: transform .4s var(--ease), background-color .4s var(--ease-fade), color .4s var(--ease-fade), box-shadow .4s var(--ease-fade), opacity .2s;
}
.btn::before { content: none; display: none; }
.btn:hover { color: var(--ink-inv); background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transform: none; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-pill); }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }
.btn i { font-size: .95em; }

.btn-primary { background: var(--ink); color: var(--ink-inv); box-shadow: none; isolation: auto; overflow: visible; }
.btn-primary:hover { background: var(--accent); color: #fff; box-shadow: none; background-position: 0 0; }
.btn-primary::before, .btn-primary:hover::before { content: none; display: none; }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-ghost, .btn-outline {
    background: transparent; color: var(--text); border: 0; box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.btn-outline { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover, .btn-outline:hover {
    background: var(--ink); color: var(--ink-inv); box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn-ghost i, .btn-outline i, .btn-ghost:hover i, .btn-outline:hover i { color: inherit; }

.btn-accent { background: var(--accent); color: #fff; box-shadow: none; }
.btn-accent:hover { background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.btn-white { background: #fff; color: #000; box-shadow: none; }
.btn-white:hover { background: var(--accent); color: #fff; box-shadow: none; }
.btn-danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: none; }
.btn-success { background: var(--success-soft); color: var(--success); box-shadow: none; }
.btn-success:hover { background: var(--success); color: #fff; box-shadow: none; }

.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; border-radius: var(--r-pill); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 17px; border-radius: var(--r-pill); }
.btn-xl { min-height: 60px; padding: 0 34px; font-size: 18px; border-radius: var(--r-pill); }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.btn-icon.btn-sm { width: 36px; min-width: 36px; min-height: 36px; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid; animation: spin .7s linear infinite;
                         border-color: var(--ink-inv) var(--ink-inv) transparent transparent; }
.btn-ghost.is-loading::after, .btn-outline.is-loading::after { border-color: var(--text) var(--text) transparent transparent; }
.btn-white.is-loading::after { border-color: #000 #000 transparent transparent; }
.btn-accent.is-loading::after, .btn-danger.is-loading::after { border-color: #fff #fff transparent transparent; }

.link-btn { color: var(--accent-text); font-weight: 600; }
.link-btn:hover { color: var(--text); }

/* a text link whose arrow runs ahead on hover: <a class="more">Learn more <i>&rarr;</i></a> */
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: inherit; transition: color .4s var(--ease-fade); }
.more i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); }
.more:hover { color: var(--accent-text); }
.more:hover i { transform: translateX(4px); }


/* ---- FORMS -----------------------------------------------------------------------------------------------------------
   Plain fields with one hairline; focus turns the line cobalt inside a soft halo. Labels float into the top edge
   (app.css IN-FIELD LABELS keeps the mechanics; this keeps it quiet). */

.label, .field > label { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -.005em; text-transform: none; }
.input, .select, .textarea {
    min-height: 48px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
    background: var(--input-bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; box-shadow: none;
    transition: border-color .4s var(--ease-fade), box-shadow .4s var(--ease-fade), background-color .4s var(--ease-fade);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); box-shadow: none; }
.input:focus, .textarea:focus, .input:focus-visible, .textarea:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: var(--field-glow); background-image: none; background-color: var(--input-bg); background-clip: padding-box;
}
.select, .select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238D8D93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; background-origin: padding-box; background-clip: padding-box;
    background-color: var(--input-bg); padding-right: 42px;
}
.select:focus, .select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--field-glow); }
.input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 40px var(--input-solid); }
.input:-webkit-autofill:focus { box-shadow: inset 0 0 0 40px var(--input-solid), var(--field-glow); }
.input-lg { min-height: 56px; font-size: 17px; padding: 14px 18px; border-radius: var(--r-sm); }
.input.is-invalid, .input.is-invalid:focus { border-color: var(--danger); background-image: none; background-color: var(--input-bg); box-shadow: 0 0 0 3px var(--danger-soft); }
.help { font-size: 13.5px; color: var(--muted); }
.error-text { font-size: 14px; color: var(--danger); }
.field-link { font-size: 14px; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-color { height: 48px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); }

.check { font-size: 15px; color: var(--text-2); }
.check input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; }

/* the toggle: a pill track with a round knob, cobalt when on */
.switch { font-size: 15px; color: var(--text-2); }
.switch > span { width: 46px; min-width: 46px; height: 28px; border: 0; border-radius: var(--r-pill); background: var(--tile-2); box-shadow: inset 0 0 0 1px var(--border-strong);
                 transition: background .4s var(--ease-fade), box-shadow .4s var(--ease-fade); }
.switch > span::after { top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .35s var(--ease); }
.switch input:checked + span { background: var(--accent); box-shadow: none; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--field-glow); }

/* segmented choice: pills on a tile track, the chosen one in ink */
.segmented { display: inline-flex; gap: 4px; padding: 5px; border: 0; border-radius: var(--r-pill); background: var(--tile); }
.segmented button { min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
                    font: 600 15px var(--font-sans); letter-spacing: -.01em; box-shadow: none; transition: background .4s var(--ease-fade), color .4s var(--ease-fade); }
.segmented button:hover { color: var(--text); }
.segmented button.is-active, .segmented button.is-active:hover { background: var(--ink); color: var(--ink-inv); box-shadow: none; }

input[type="range"] { accent-color: var(--accent); }


/* ---- SURFACES --------------------------------------------------------------------------------------------------------
   A card is a tile: soft grey, no border, generously rounded. It never glows and never wears a corner mark. */

.card, .card-glass { background: var(--tile); border: 0; border-radius: var(--r-lg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none; }
.card::before, .card::after { content: none; }
.card-pad { padding: 28px; }
.card-pad-lg { padding: 40px; }
.card-glow, .card-hover.card-glow:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.card-glow::before { content: none; display: none; }
.card-hover { transition: background-color .4s var(--ease-fade), transform .45s var(--ease); }
.card-hover:hover { background: var(--tile-2); transform: none; box-shadow: none; }
.card-header { padding: 20px 28px; border-bottom: 1px solid var(--border); }
.card-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.card-title i { color: var(--accent-text); }
hr, .divider { background: var(--border); }

/* a tile on the ground; and the always-dark band (a stage that stays dark in both themes) */
.tile { position: relative; background: var(--tile); border-radius: var(--r-xl); overflow: hidden; }
.uf-band { position: relative; background: var(--band); color: var(--band-text); }
.uf-band h1, .uf-band h2, .uf-band h3, .uf-band h4 { color: var(--band-text); }
.uf-band .muted, .uf-band .lead, .uf-band p { color: var(--band-muted); }
.uf-band .eyebrow { color: #9DB4FF; }
.uf-band .card, .uf-band .tile { background: var(--band-tile); box-shadow: inset 0 0 0 1px var(--band-line); }
.uf-band .btn-primary { background: #fff; color: #000; }
.uf-band .btn-primary:hover { background: var(--accent); color: #fff; }
.uf-band .btn-ghost, .uf-band .btn-outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.uf-band .btn-ghost:hover, .uf-band .btn-outline:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #fff; }


/* ---- STATUS ---------------------------------------------------------------------------------------------------------- */

.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border: 0; border-radius: var(--r-pill);
         background: var(--tile-2); color: var(--text-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .005em; line-height: 1.2;
         text-transform: none; clip-path: none; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info, .badge-brand { background: var(--accent-soft); color: var(--accent-text); }
.badge-grad { background: var(--accent); color: #fff; }
.badge-muted { background: var(--tile-2); color: var(--muted); }

.dot-live { background: var(--success); }

.alert { gap: 12px; padding: 16px 18px; border: 0; border-radius: var(--r); background: var(--tile); font-size: 15px; color: var(--text-2); }
.alert-info, .alert-brand { background: var(--accent-soft); }
.alert-info i, .alert-brand i { color: var(--accent-text); }
.alert-warning { background: var(--warning-soft); }
.alert-danger { background: var(--danger-soft); }
.alert-success { background: var(--success-soft); }


/* ---- DATA ------------------------------------------------------------------------------------------------------------ */

.table { font-size: 15px; }
.table th { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.table td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.table tbody tr:hover { background: color-mix(in srgb, var(--tile) 70%, transparent); }
.card .table tbody tr:hover { background: color-mix(in srgb, var(--tile-2) 60%, transparent); }

.kpi { padding: 24px 26px; }
.kpi-label { font-size: 14px; font-weight: 500; color: var(--muted); }
.kpi-value { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.kpi-sub { font-size: 13px; color: var(--faint); }
.kpi-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); clip-path: none; }

.meter, .progress { height: 8px; border-radius: var(--r-pill); background: var(--tile-2); }
.meter > span, .progress > span { background: var(--accent); animation: none; border-radius: inherit; }
.meter.is-warning > span { background: var(--warning); }
.meter.is-danger > span { background: var(--danger); }

.chips { gap: 8px; }
.chip { min-height: 38px; padding: 0 16px; gap: 8px; border: 0; border-radius: var(--r-pill); background: var(--tile); color: var(--text-2); font-size: 14.5px; font-weight: 500;
        transition: background .4s var(--ease-fade), color .4s var(--ease-fade); }
.chip:hover { background: var(--tile-2); color: var(--text); border: 0; }
.chip.is-active, .chip.is-active:hover { background: var(--ink); color: var(--ink-inv); border: 0; }
.card .chip:not(.is-active) { background: var(--bg); }

.kbd { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--tile); font-size: 12.5px; }

.avatar, .avatar-lg { border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-sans); font-weight: 700; clip-path: none; }

.empty-state { padding: 64px 24px; }
.empty-state .empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); clip-path: none; }
.empty-state h3 { color: var(--text); }

.skeleton { background: var(--tile); border-radius: var(--r-sm); }
.skeleton::after { background: linear-gradient(90deg, transparent, rgba(127, 127, 127, .09), transparent); }

/* a tooltip the page places: <span class="tooltip">..</span> */
.tooltip { position: absolute; z-index: 60; padding: 7px 12px; border-radius: var(--r-xs); background: var(--ink); color: var(--ink-inv); font-size: 13px; font-weight: 500; line-height: 1.35;
           white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }


/* ---- TABS ------------------------------------------------------------------------------------------------------------
   Pill tabs: quiet text pills, the current one in solid ink. */

.tabs { display: flex; gap: 6px; padding: 0; border-bottom: 0; }
.tab { min-height: 40px; padding: 0 18px; margin: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
       font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; transition: background .4s var(--ease-fade), color .4s var(--ease-fade); }
.tab:hover { background: var(--tile); color: var(--text); }
.tab.is-active, .tab.is-active:hover { background: var(--ink); color: var(--ink-inv); border-bottom-color: transparent; }
.tab .badge { min-height: 20px; padding: 0 7px; font-size: 11.5px; }
.tab.is-active .badge { background: color-mix(in srgb, var(--ink-inv) 18%, transparent); color: inherit; }

.breadcrumb { font-size: 14px; color: var(--faint); }


/* ---- OVERLAYS -------------------------------------------------------------------------------------------------------- */

.modal-backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal { background: var(--surface); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .modal { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border); }
.modal-header { padding: 26px 28px 6px; }
.modal-header h3 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.modal-close { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--tile); color: var(--text); transition: background .4s var(--ease-fade); }
.modal-close:hover { background: var(--tile-2); color: var(--text); }
.modal-body { padding: 14px 28px 24px; }
.modal-footer { padding: 18px 28px 24px; border-top: 1px solid var(--border); }

/* a toast is a small ink slip: black on light, white on dark */
.toast { min-height: 52px; padding: 14px 20px; border: 0; border-radius: var(--r); background: var(--ink); color: var(--ink-inv); box-shadow: var(--shadow-lg); font-size: 15px; font-weight: 500; }
.toast-success i { color: #3DD68C; } .toast-error i { color: #FF6B5E; } .toast-info i { color: #7598FF; }
[data-theme="dark"] .toast-success i { color: #0A8F4E; }
[data-theme="dark"] .toast-error i { color: #D92D20; }
[data-theme="dark"] .toast-info i { color: #1A4BFF; }


/* ---- CODE ------------------------------------------------------------------------------------------------------------ */

.copy-box { background: var(--code-bg); border: 0; border-radius: var(--r); }
[data-theme="dark"] .copy-box { background: #161618; box-shadow: inset 0 0 0 1px var(--border); }
.copy-box pre { color: #E6E6EA; font-size: 13.5px; }
.copy-box .copy-btn.btn-ghost, .copy-box .copy-btn.btn-outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.copy-box .copy-btn.btn-ghost:hover, .copy-box .copy-btn.btn-outline:hover { background: #fff; color: #000; box-shadow: none; }
/* the copy button is centred on the code with a transform (microsite.css): it keeps it on hover and press, where
   .btn:hover would drop it 20px out from under the pointer */
.copy-box > .btn, .copy-box > .btn:hover, .copy-box > .btn:focus-visible { transform: translateY(-50%); }
.copy-box > .btn:active { transform: translateY(-50%) scale(.97); }
.ws-pw button, .ws-pw button:hover { transform: translateY(-50%); }
.code-tag { color: #7FA2FF; } .code-attr { color: #B8C4FF; } .code-str { color: #9BE3BE; }


/* ---- UNDER AN ANSWER (OA.answerBar) AND GUIDED TO IT (core.js guideTo) ---------------------------------------------- */

.ab-btn { border-radius: 50%; }
.ab-btn:hover { background: var(--tile); }
.ab-pill { border: 0; border-radius: var(--r-pill); background: var(--tile); }
.ab-pill:hover { background: var(--tile-2); }
.ab-pill[aria-expanded="true"] { color: var(--accent-text); background: var(--accent-soft); }
.spot-tip { border-radius: var(--r-pill); background: var(--accent); font: 600 14px var(--font-sans); box-shadow: var(--shadow); }
.spot-tip::after { border-top-color: var(--accent); }


/* ---- MOTION, FOCUS AND SCROLLBARS ------------------------------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-fade), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--r-pill); background: color-mix(in srgb, var(--muted) 45%, transparent) padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted) padding-box; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:active { transform: none; }
}


/* =====================================================================================================================
   THE CHROME  -  content/chrome/nav.inc, mobile-menu.inc, footer.inc
   ===================================================================================================================== */

/* ---- THE NAV ---------------------------------------------------------------------------------------------------------
   Always translucent with a blur; a hairline appears once the page has scrolled (core.js .is-scrolled). The wordmark
   PNG on the left, pill links, then a round theme button, a "Sign in" text pill and the ink call to action. */

.site-nav, .site-nav.is-scrolled, .signed-in .site-nav {
    height: var(--nav-h); background: var(--nav-bg); border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    transition: border-color .4s var(--ease-fade), background-color .4s var(--ease-fade);
}
.site-nav.is-scrolled, .signed-in .site-nav.is-scrolled, .member-area .site-nav { border-bottom-color: var(--border); }
.site-nav::after { content: none; display: none; }
.nav-inner { gap: 24px; }
.nav-logo .logo-img { height: 25px; }
.nav-links { gap: 2px; margin-left: 4px; }
.nav-links a { padding: 8px 13px; border-radius: var(--r-pill); color: var(--text-2); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -.005em;
               text-transform: none; transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.nav-links a::after { content: none; }
/* a menu item never breaks over two lines ("How it / works"); narrower screens tighten the menu instead (below) */
.nav-links a, .nav-cta > a, .nav-cta > .btn { white-space: nowrap; }
.nav-links a:hover { background: var(--tile); color: var(--text); }
.nav-links a.is-active { color: var(--text); background: transparent; }
.nav-pill { height: 36px; margin-top: -18px; border-radius: var(--r-pill); background: var(--tile); box-shadow: none; }
.nav-pill::after { content: none; display: none; }
.nav-cta { gap: 6px; }

/* round icon buttons: the theme switch and the menu */
.nav-icon-btn, .theme-toggle, .nav-burger { width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text);
                                            display: grid; place-items: center; font-size: 17px; cursor: pointer; transition: background-color .4s var(--ease-fade); }
.nav-icon-btn:hover, .theme-toggle:hover, .nav-burger:hover { background: var(--tile); color: var(--text); border: 0; }
.nav-burger { display: none; }
.nav-signin { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
              transition: background-color .4s var(--ease-fade); }
.nav-signin:hover { background: var(--tile); color: var(--text); }
.nav-build { margin-left: 4px; }

/* signed in: the account button is a pill with a round initial */
.nav-user-btn { min-height: 40px; padding: 4px 14px 4px 4px; gap: 10px; border: 0; border-radius: var(--r-pill); background: var(--tile); color: var(--text); font-family: var(--font-sans); font-size: 15px; font-weight: 600;
                transition: background-color .4s var(--ease-fade); }
.nav-user-btn:hover { background: var(--tile-2); }
.nav-user-btn .avatar { width: 32px; height: 32px; font-size: 14px; }
.nav-user-btn .fa-chevron-down { font-size: 11px; color: var(--muted); transition: transform .35s var(--ease); }
.nav-user.is-open .nav-user-btn .fa-chevron-down { transform: rotate(180deg); }
.nav-dropdown { top: calc(100% + 10px); min-width: 260px; padding: 8px; border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg);
                transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .4s var(--ease-fade), transform .35s var(--ease); }
[data-theme="dark"] .nav-dropdown { background: var(--surface-2); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border); }
.nav-dropdown a, .nav-dropdown button { padding: 10px 14px; border-radius: var(--r-sm); color: var(--text-2); font-size: 15px; font-weight: 500;
                                        transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--tile); color: var(--text); }
[data-theme="dark"] .nav-dropdown a:hover, [data-theme="dark"] .nav-dropdown button:hover { background: var(--surface-3); }
.nav-dropdown i { color: var(--muted); }
.nav-dropdown .dd-head { padding: 12px 14px 14px; border-bottom: 1px solid var(--border); }
.nav-dropdown .dd-head strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.nav-dropdown .dd-head span { font-size: 13.5px; }

@media (max-width: 1180px) {
    .nav-inner { gap: 16px; }
    .nav-links { gap: 0; margin-left: 0; }
    .nav-links a { padding: 8px 9px; font-size: 14.5px; }
}
@media (max-width: 1060px) {
    .nav-logo .logo-img { height: 22px; }
    .nav-links a { padding: 8px 7px; font-size: 14px; }
}
@media (max-width: 960px) {
    .nav-burger { display: grid; }
}
@media (max-width: 640px) {
    .nav-inner { gap: 10px; }
    .nav-logo .logo-img { height: 22px; }
    .nav-cta { gap: 4px; }
    .nav-build { min-height: 38px; padding: 0 16px; margin-left: 2px; }
    .nav-user-btn { padding: 4px; }
}


/* ---- THE MOBILE MENU: a full-screen sheet of large links ------------------------------------------------------------ */

.mobile-menu { inset: var(--nav-h) 0 0 0; padding: 12px clamp(16px, 4vw, 32px) 40px; background: var(--bg); transform: translateY(-10px);
               transition: opacity .4s var(--ease-fade), transform .45s var(--ease); }
.mobile-menu a:not(.btn) { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--text);
                           font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.mobile-menu a:not(.btn) i, .mobile-menu .btn i { display: none; }
.mobile-menu a:not(.btn):hover { color: var(--accent-text); }
.mobile-menu .btn { margin-top: 24px; }
.mobile-menu a.btn-primary { color: var(--ink-inv); }
.mobile-menu a.btn-primary:hover { color: #fff; }
.mobile-menu .row.mt-3 { margin-top: 28px; gap: 12px; }
.mobile-menu .theme-toggle { background: var(--tile); }


/* ---- THE FOOTER: a tile across the page, quiet columns, round social buttons ---------------------------------------- */

.site-footer { margin-top: 0; padding: 80px 0 40px; border-top: 0; background: var(--tile); }
.footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-grid h4 { margin-bottom: 16px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--text); }
.footer-grid a { padding: 6px 0; color: var(--muted); font-size: 15px; transition: color .4s var(--ease-fade); }
.footer-grid a:hover { color: var(--text); }
.footer-grid .nav-logo .logo-img { height: 27px; }
.footer-grid p.muted { font-size: 15px; line-height: 1.55; }
.footer-socials { gap: 8px; margin-top: 22px; }
.footer-socials a { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 15px;
                    transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.footer-socials a:hover { background: var(--ink); color: var(--ink-inv); border: 0; transform: none; }
.footer-bottom { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--border-strong); color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-bottom span:last-child { max-width: 34ch; text-align: right; }
@media (max-width: 800px) {
    .site-footer { padding: 56px 0 32px; }
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 24px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; margin-top: 44px; }
    .footer-bottom span:last-child { text-align: left; }
}


/* =====================================================================================================================
   THE PUBLIC PAGES  -  what the page stylesheets (marketing.css, careers.css, account.css, preview.css, demos.css) do
   not already draw in Unfold: page heroes, reading pages, the sign-in pages, and the small token-driven pages.
   ===================================================================================================================== */

/* ---- PAGE HEROES: a big, tight, centred headline ---------------------------------------------------------------------- */

.mk-page-hero { padding: clamp(64px, 8vw, 112px) 0 clamp(36px, 4vw, 56px); }
.mk-page-hero h1 { margin-bottom: 22px; font-size: clamp(44px, 6.2vw, 88px); line-height: 1; letter-spacing: -.04em; }
.mk-page-hero .lead { font-size: clamp(17px, 1.4vw, 21px); }
.mk-page-hero .eyebrow { margin-bottom: 20px; }
.mk-page-hero .segmented { margin-top: 36px; }
.mk-legal-hero h1 { font-size: clamp(40px, 5vw, 68px); }
.mk-head { margin-bottom: 56px; }
.mk-head h2 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -.03em; }

/* the yearly saving rides inside the segmented pill: soft cobalt, solid when its option is chosen */
.segmented .badge { min-height: 22px; padding: 0 9px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.segmented button.is-active .badge { background: var(--accent); color: #fff; }

/* ---- READING PAGES: about's story, privacy, terms, a guide ------------------------------------------------------------ */

.mk-prose, .guide { font-size: 17.5px; line-height: 1.7; color: var(--text-2); }
.mk-prose h2, .guide h2 { margin: 2.2em 0 .6em; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.mk-prose > h2:first-child { margin-top: 0; }
.mk-prose h3, .guide h3 { margin: 1.6em 0 .5em; font-size: 20px; letter-spacing: -.02em; }
.mk-prose a, .guide a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mk-prose a:hover, .guide a:hover { color: var(--text); }
.mk-prose b, .mk-prose strong, .guide b, .guide strong { color: var(--text); font-weight: 600; }
.mk-prose ul, .guide ul { padding-left: 1.2em; }
.mk-prose li::marker, .guide li::marker { color: var(--accent-text); }
.mk-legal h2 { font-size: clamp(22px, 2vw, 28px); }
.mk-legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk-legal th, .mk-legal td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.mk-legal th { color: var(--muted); font-weight: 600; font-size: 13.5px; }
#page-about .mk-prose { max-width: 760px; }

/* a guide article (/guides/<slug>, default.aspx.cs articleHTML) */
#page-guide .guide { padding-top: clamp(48px, 6vw, 88px); padding-bottom: 96px; }
#page-guide .guide > h1 { margin: 0 0 28px; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.038em; }
#page-guide .guide img { border-radius: var(--r); }
#page-guide .guide blockquote { margin: 1.5em 0; padding: 20px 24px; border: 0; border-radius: var(--r); background: var(--tile); color: var(--text); }

/* ---- SIGN IN, SIGN UP, FORGOT, RESET -----------------------------------------------------------------------------------
   The form on the plain ground; beside it a night stage (it stays dark in both themes) holding the little chat. */

@media (min-width: 901px) { .auth-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.auth-main { padding: 56px 32px; }
.auth-card { max-width: 440px; }
.auth-card h1 { margin-bottom: 12px; font-size: clamp(40px, 4vw, 56px); line-height: 1.02; letter-spacing: -.038em; }
.auth-card .lead { margin-bottom: 32px; font-size: 18px; }
.auth-card .btn-block { margin-top: 6px; }
.auth-foot { margin-top: 26px; font-size: 15px; }
.auth-foot a { font-weight: 600; }
.auth-divider { font-size: 13px; }
.auth-divider::before, .auth-divider::after { background: var(--border-strong); }
.pw-eye { width: 38px; height: 38px; right: 8px; border-radius: 50%; }
.pw-eye:hover { background: var(--tile); }
.pw-strength span { border-radius: var(--r-pill); background: var(--tile-2); }
.auth-perks i { color: var(--accent-text); }
.auth-consent { font-size: 13px; }

.auth-aside { margin: 16px 16px 16px 0; padding: clamp(36px, 4vw, 64px); border: 0; border-radius: var(--r-xl); color: #fff;
              background: radial-gradient(42% 62% at 80% 96%, rgba(26, 75, 255, .85), rgba(26, 75, 255, 0) 70%), radial-gradient(70% 90% at 80% 110%, rgba(46, 92, 255, .45), transparent 70%),
                          linear-gradient(180deg, #030409 0%, #070B1C 60%, #0A1236 100%); }
.auth-aside::before { content: ""; position: absolute; inset: auto -140px -240px auto; width: 560px; height: 560px; z-index: -1; border-radius: 50%; border: 1px solid rgba(140, 165, 255, .14);
                      background: none; -webkit-mask-image: none; mask-image: none; opacity: 1; }
[data-theme="dark"] .auth-aside { box-shadow: 0 0 0 1px #1C1F2E; }
.auth-aside-inner { max-width: 460px; }
.auth-aside h2 { color: #fff; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.035em; }
.auth-aside h2 .gradient-text { color: #9DB4FF; }
.auth-aside .eyebrow { color: #9DB4FF; }
.auth-aside .lead, .auth-aside .lead.muted { color: rgba(255, 255, 255, .72); font-size: 17px; }
.auth-aside a { color: #9DB4FF; }
.auth-benefits li { color: rgba(255, 255, 255, .72); font-size: 15.5px; }
.auth-benefits strong { color: #fff; font-family: var(--font-sans); font-weight: 600; }
.auth-benefits li i { width: 40px; min-width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.auth-stat { border: 0; border-radius: var(--r); background: rgba(255, 255, 255, .08); }
.auth-stat b { color: #fff; }
.auth-stat span { color: rgba(255, 255, 255, .65); }

/* the little chat, as a white widget card on the stage */
.auth-aside .mini-chat, .auth-aside .mini-chat.card { border-radius: 22px; background: #fff; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75); color: #111114; }
.mini-chat-head { background: #1A4BFF; }
.auth-aside .mini-chat-body { background: #fff; }
.auth-aside .mc-user { background: #1A4BFF; border-radius: 16px; border-bottom-right-radius: 5px; }
.auth-aside .mc-bot { background: #F1F2F5; color: #2E2E31; border: 0; border-radius: 16px; border-bottom-left-radius: 5px; }
.auth-aside .mc-bot strong { color: #000; }
.auth-aside .mc-typing { background: #F1F2F5; border: 0; border-radius: 16px; }
.auth-aside .mc-typing i { background: #8D8D93; }
.auth-aside .mc-form { background: #fff; border: 1px solid #E7E7EC; border-radius: 14px; }
.auth-aside .mc-label { color: #6B6B73; font-size: 11.5px; }
.auth-aside .mc-field { background: #F7F7F9; border-color: #E2E2E6; color: #111114; border-radius: 10px; }
.auth-aside .mc-ph { color: #8D8D93; }
.auth-aside .mc-submit { background: #000; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 600; }
.auth-aside .mc-chips span { border-color: #E2E2E6; color: #2E2E31; border-radius: var(--r-pill); }
@keyframes mc-focus { 0%, 100% { border-color: #E2E2E6; box-shadow: none; } 15%, 85% { border-color: #1A4BFF; box-shadow: 0 0 0 3px rgba(26, 75, 255, .18); } }
@media (max-width: 900px) { .auth-main { padding: 40px 16px 64px; } }

/* ---- JOIN A TEAM (/join), A CUSTOMER'S BOOKING (/booking/<token>) ------------------------------------------------------ */

#page-join .tm-join-glow { display: none; }
#page-join .tm-join-card, #page-join .tm-join-card.card-glass { max-width: 500px; padding: 44px 40px; border-radius: var(--r-xl); background: var(--tile); box-shadow: none; }
#page-join .tm-join-card h1 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.06; }
#page-join .tm-join-icon { border-radius: 50%; }
#page-join .tm-join-perks i { color: var(--accent-text); }
#page-booking .bkp { padding-top: clamp(48px, 6vw, 88px); padding-bottom: 96px; }
#page-booking .bkp-card { border-radius: var(--r-xl); }
#page-booking .bkp-top h1 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; }
#page-booking .bkp-ic { border-radius: 50%; }

/* ---- CLAIM (/claim/<token>) and the demo pages -------------------------------------------------------------------------- */

#page-claim .cl-form-head h2 { font-size: 26px; letter-spacing: -.025em; }
#page-claim .cl-form-head h2 i { color: var(--accent-text); }
#page-claim .cl-free-head h2 { font-size: 22px; letter-spacing: -.02em; }
#page-claim .cl-free-h, #page-claim .cl-free-up > i, .cl-built-txt small { color: var(--accent-text); }
#page-claim .card { border-radius: var(--r-xl); }

/* the pricing questions: the heading holds still on the left while the answers open on the right */
.mk-faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.mk-faq-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.mk-faq-side h2 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 20px; }
.mk-faq-side .btn { margin-top: 12px; }
@media (max-width: 900px) { .mk-faq-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .mk-faq-side { position: static; } }

/* the always-dark tiles keep an edge on the black ground of the dark theme */
[data-theme="dark"] .mk-enterprise, [data-theme="dark"] .bd-vs-card.is-with, [data-theme="dark"] .cr-office-card, [data-theme="dark"] .cs-story-cta,
[data-theme="dark"] .uf-band { box-shadow: inset 0 0 0 1px var(--band-line); }