/* ==========================================================================
   Dimo Softwares — Shell (shared component layer)

   Header, navigation, buttons, forms, cards, landing-page sections, auth
   screens and the settings-form controls used by every service.

   Visual language: quiet and precise. Neutral surfaces separated by hairlines,
   one accent (--primary-rgb, set per service in dimo.css) reserved for the
   primary action, focus and selection. No glows, glass, grain, grids or
   perpetual animation — motion is short, purposeful and respects
   prefers-reduced-motion.

   Loaded AFTER dimo.css, so it intentionally overrides some primitives
   (.btn, .field, .chip) that dimo.css defines.
   ========================================================================== */

:root {
    --hair: rgb(255 255 255 / 0.08);
    --glass: rgb(255 255 255 / 0.03);
    --glass-strong: rgb(255 255 255 / 0.055);
    /* Recessed wells (inputs, code blocks, prompt boxes, chart plates). */
    --sunken: rgb(0 0 0 / 0.22);
    --sunken-strong: rgb(0 0 0 / 0.36);
    --field-bg: rgb(0 0 0 / 0.22);
    /* Kept for the page stylesheets that still reference them. */
    --sheen: rgb(255 255 255 / 0.1);
    --sheen-soft: rgb(255 255 255 / 0.04);
    --glass-edge: rgb(255 255 255 / 0.09);
    /* Backdrop behind modals/sheets. */
    --scrim: rgb(0 0 0 / 0.6);
    --ease: cubic-bezier(.22, 1, .36, 1);
    /* --nav-bar is the fixed bar's own height — the only thing .shell-main
       reserves, so a page's `main_class` decides how far its content sits
       below the bar. --nav-h (bar + gap) is for sticky rails and anchors. */
    --nav-bar: 60px;
    --nav-gap: 16px;
    --nav-h: calc(var(--nav-bar) + var(--nav-gap));
}

:root[data-theme="light"] {
    --hair: rgb(14 17 22 / 0.08);
    --glass: rgb(255 255 255 / 0.9);
    --glass-strong: #FFFFFF;
    --sunken: rgb(14 17 22 / 0.03);
    --sunken-strong: rgb(14 17 22 / 0.06);
    --field-bg: #FFFFFF;
    --sheen: rgb(255 255 255 / 0.6);
    --sheen-soft: rgb(255 255 255 / 0.8);
    --glass-edge: rgb(14 17 22 / 0.08);
    --scrim: rgb(14 17 22 / 0.36);
}

@media (max-width: 560px) {
    :root { --nav-bar: 56px; }
}

/* Horizontal-scroll guard: overflow-x on body alone does not stop the
   document element from scrolling sideways. */
html.shell, html.shell body { overflow-x: clip; max-width: 100%; }

.shell-body {
    font-weight: 400;
    letter-spacing: 0;
}
.shell-body h1, .shell-body h2, .shell-body h3 {
    font-weight: 700;
    text-wrap: balance;
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.shell-body p { text-wrap: pretty; }

/* Latin/mono micro-label, isolated so it stays LTR inside RTL copy. */
.mono {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 400;
    letter-spacing: .02em;
    font-size: 11px;
    direction: ltr;
    unicode-bidi: isolate;
}
.num { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 12px; }

/* ------------------------------------------------------- ambience --------- */

/* Retired: film grain, accent halo, scroll-progress rail and section beams.
   The elements may still be in older templates; they render nothing. */
.shell-grain, .shell-halo, .shell-rail, .beam { display: none !important; }

/* ---------------------------------------------------------- header -------- */

.shell-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 60;
    height: var(--nav-bar);
    padding-inline: clamp(14px, 2.6vw, 32px);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .35s var(--ease);
}
/* NOTE: no `will-change: transform` here — it would make the header the
   containing block for the fixed mobile nav sheet. */
.shell-header.hide { transform: translateY(calc(-100% - 4px)); }
.shell-header.menu-open { transform: none !important; }
.shell-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--header-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--hair);
}
.shell-header.menu-open::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.shell-header > * { position: relative; }

.shell-brand { display: flex; align-items: center; min-height: 40px; flex: 0 0 auto; }
.shell-brand img {
    height: 26px;
    width: auto; /* the width="" attribute is only a pre-CSS placeholder */
    display: block;
    transition: opacity .2s ease;
}
.shell-brand:hover img { opacity: .8; }
/* The main Dimo mark carries ~40% transparent padding around the glyph, so it
   is drawn taller than the service lockups to read at the same weight. */
.shell-brand img.brand-main { height: 44px; margin-block: -4px; }
/* Theme-paired logos: the light wordmark on dark, logo.png on light. */
.brand-on-light { display: none !important; }
:root[data-theme="light"] .brand-on-dark { display: none !important; }
:root[data-theme="light"] .brand-on-light { display: block !important; filter: none !important; }

/* ------------------------------------------------------------- nav -------- */

/* ONE navigation element serves both breakpoints: an inline tab row on
   desktop, a full-screen sheet on mobile. */
.shell-nav {
    margin-inline-start: clamp(4px, 1.4vw, 20px);
    display: flex;
    gap: 2px;
    align-items: center;
    position: relative;
    min-width: 0;
}
/* The sliding marker is retired; the active link carries its own state. */
.shell-nav .glide { display: none; }
.shell-nav > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.shell-nav > a:hover { color: var(--color-text-main); background: var(--color-hover-subtle); }
.shell-nav > a.on { color: var(--color-text-main); background: var(--color-hover-strong); }

/* Sheet-only furniture stays out of the way on desktop. */
.shell-nav .n-head,
.shell-nav .n-foot,
.shell-nav .n-svc,
.shell-nav .m-i,
.shell-nav .m-txt span.mono { display: none; }

/* Call to action inside the nav ("sign in"): the one filled control. */
.shell-nav .cta,
.shell-cta {
    margin-inline-start: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: rgb(var(--primary-rgb));
    color: var(--color-text-on-primary) !important;
    font-weight: 600;
}
.shell-nav .cta:hover,
.shell-cta:hover { background: rgb(var(--primary-rgb)); filter: brightness(1.08); }
/* The dashboard shortcut is a quiet outlined control, not a CTA. */
.shell-nav .cta.cta-dashboard {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--color-text-main) !important;
    font-weight: 500;
    filter: none;
}
.shell-nav .cta.cta-dashboard:hover { background: var(--color-hover-subtle); }
.shell-nav .cta.cta-dashboard.on { background: var(--color-hover-strong); }

/* Placeholder rows for sections that are not launched yet. */
.shell-nav .is-disabled {
    display: inline-flex;
    align-items: center;
    opacity: .42;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

/* Icon actions at the end of the bar (theme, settings, logout). */
.shell-tools { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: 0 0 auto; }
.shell-tools form { display: flex; }
.shell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, background-color .15s ease;
}
.shell-icon:hover { color: var(--color-text-main); background: var(--color-hover-strong); }
.shell-icon:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .7); outline-offset: 2px; }
.shell-icon svg { width: 18px; height: 18px; }
.shell-icon.is-on { color: var(--color-text-main); background: var(--color-hover-strong); }

/* Burger — mobile only. */
.shell-burger {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    transition: background-color .15s ease;
}
.shell-burger:hover { background: var(--color-hover-strong); }
.shell-burger i {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--color-text-main);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s;
}
.shell-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.shell-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.shell-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ----------------------------------------------- mobile menu sheet -------- */

@media (max-width: 900px) {
    .shell-burger { display: flex; }

    .shell-header { gap: 8px; padding-inline: 14px; }
    .shell-brand { min-height: 40px; }
    .shell-brand img { height: 24px; }
    .shell-brand img.brand-main { height: 40px; }
    .shell-tools { gap: 2px; }

    .shell-nav {
        position: fixed;
        inset: 0;
        height: 100dvh;
        z-index: 55;
        margin: 0;
        padding: 0 14px calc(18px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--color-bg-dark);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .25s var(--ease), visibility 0s linear .25s;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
    .shell-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: none;
        transition: opacity .2s ease, transform .25s var(--ease), visibility 0s;
    }

    .shell-nav .n-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: var(--nav-bar);
        flex: 0 0 auto;
        margin-bottom: 8px;
        color: var(--color-text-muted);
        border-bottom: 1px solid var(--hair);
        margin-inline: -14px;
        padding-inline: 14px;
    }
    .shell-nav .n-head .mono { font-size: 12px; letter-spacing: .04em; }

    .shell-nav > a {
        display: flex;
        align-items: center;
        gap: 12px;
        height: auto;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 15.5px;
        font-weight: 500;
        color: var(--color-text-main);
        background: transparent;
    }
    .shell-nav .m-i {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        flex: 0 0 auto;
        background: var(--color-hover-strong);
        color: var(--color-text-muted);
    }
    .shell-nav .m-i svg { width: 18px; height: 18px; }
    .shell-nav .m-txt { display: grid; gap: 0; margin-inline-end: auto; }
    .shell-nav > a:active { background: var(--color-hover-strong); }
    .shell-nav > a.on,
    .shell-nav > a:hover { background: var(--color-hover-subtle); }
    .shell-nav > a.on .m-i { color: rgb(var(--primary-ink-rgb)); background: rgb(var(--primary-rgb) / .12); }

    /* The sign-in CTA becomes the sheet's primary action. */
    .shell-nav .cta {
        margin: 12px 0 0;
        min-height: 50px;
        justify-content: center;
        font-size: 15.5px;
        font-weight: 600;
        border-radius: 12px;
    }
    .shell-nav .cta .m-i { display: none; }
    .shell-nav .cta .m-txt { margin: 0; text-align: center; }

    /* On mobile the dashboard is already a tile in the service grid. */
    .shell-nav .cta-dashboard { display: none !important; }

    /* ── Cross-service switcher ────────────────────────────────────────── */
    .shell-nav .n-svc {
        display: grid;
        gap: 10px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--hair);
    }
    /* The service grid and footer fade with the sheet — no stagger, so
       closing starts at once. */
    .shell-nav .n-svc,
    .shell-nav .n-foot { opacity: 0; transition: opacity .18s ease; }
    .shell-nav.is-open .n-svc,
    .shell-nav.is-open .n-foot { opacity: 1; }
    .shell-nav .n-svc-t {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-text-muted);
    }
    .shell-nav .n-svc-g {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .shell-nav .n-svc-g > a {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-main);
        border: 1px solid var(--hair);
        background: var(--color-surface);
        transition: border-color .15s ease, background-color .15s ease;
    }
    .shell-nav .n-svc-g > a[data-svc="agents"]  { --svc: 34 211 238; }
    .shell-nav .n-svc-g > a[data-svc="imagine"] { --svc: 214 120 255; }
    .shell-nav .n-svc-g > a[data-svc="storage"] { --svc: 250 204 21; }
    .shell-nav .n-svc-g > a[data-svc="edits"]   { --svc: 255 138 76; }
    .shell-nav .n-svc-g > a[data-svc="support"] { --svc: 45 212 191; }
    .shell-nav .n-svc-g > a[data-svc="dashboard"] { --svc: 163 230 53; }
    .shell-nav .n-svc-g > a[data-svc="admin"]   { --svc: 145 150 161; }
    .shell-nav .n-svc-g > a svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: rgb(var(--svc, var(--color-text-muted-rgb)));
    }
    .shell-nav .n-svc-g > a:hover { border-color: var(--border-strong); }
    [data-service="agents"]  .shell-nav .n-svc-g > a[data-svc="agents"],
    [data-service="imagine"] .shell-nav .n-svc-g > a[data-svc="imagine"],
    [data-service="storage"] .shell-nav .n-svc-g > a[data-svc="storage"],
    [data-service="edits"]   .shell-nav .n-svc-g > a[data-svc="edits"],
    [data-service="support"] .shell-nav .n-svc-g > a[data-svc="support"],
    [data-service="dashboard"] .shell-nav .n-svc-g > a[data-svc="dashboard"] {
        border-color: rgb(var(--svc) / .45);
        font-weight: 600;
    }

    .shell-nav .n-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 14px;
        color: var(--color-text-muted);
        font-size: 12.5px;
    }
    .shell-nav .n-soc { display: flex; gap: 6px; }
    .shell-nav .n-soc a {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        color: var(--color-text-muted);
        border: 1px solid var(--hair);
    }
    .shell-nav .n-soc a svg { width: 18px; height: 18px; }

    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="agents"]  { --svc: 8 112 140; }
    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="imagine"] { --svc: 134 46 190; }
    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="storage"] { --svc: 161 111 0; }
    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="edits"]   { --svc: 194 65 12; }
    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="support"] { --svc: 13 110 100; }
    :root[data-theme="light"] .shell-nav .n-svc-g > a[data-svc="dashboard"] { --svc: 58 118 16; }
}

/* Backdrop is retained for click-outside dismissal. */
.nav-backdrop { display: none; }
@media (max-width: 900px) {
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 54;
        display: block;
        background: transparent;
        visibility: hidden;
    }
    .nav-backdrop.is-open { visibility: visible; }
}

/* Page content clears the fixed header by exactly the bar height; the page's
   own `main_class` padding decides the gap below it. */
.shell-main { position: relative; z-index: 2; }
.shell-header ~ .shell-main { margin-top: var(--nav-bar); }

/* --------------------------------------------------------- buttons -------- */

/* One flat box per button; every variant is a set of --btn-* tokens.
   Variants:  .btn (neutral) · .btn-primary · .btn-outline · .btn-ghost · .btn-danger
   Sizes:     .btn-sm · (default) · .btn-lg · .btn-icon (square, icon only)
   States:    :hover · :active · :focus-visible · :disabled/[aria-disabled] ·
              .is-loading/[aria-busy="true"] (spinner, keeps the width) */
.btn {
    --btn-bg: var(--color-hover-strong);
    --btn-bg-hover: rgb(var(--color-text-main-rgb) / .1);
    --btn-border: var(--border-subtle);
    --btn-border-hover: var(--border-strong);
    --btn-fg: var(--color-text-main);
    --btn-shadow: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, filter .15s ease, transform .1s ease;
}
/* Retired decoration: the templates still carry <i class="sheen|pulse">. */
.btn::before,
.go::before, .go::after { content: none; }
.btn .sheen, .btn .pulse, .go .sheen { display: none; }

.btn:hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    color: var(--btn-fg);
}
.btn:active { transform: scale(.985); }
.btn:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb) / .8);
    outline-offset: 2px;
}
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}
.btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
    background-color: var(--btn-bg);
    border-color: var(--btn-border);
}

/* Primary: the one solid action on a screen. */
.btn-primary {
    --btn-bg: rgb(var(--primary-rgb));
    --btn-bg-hover: rgb(var(--primary-rgb));
    --btn-border: transparent;
    --btn-border-hover: transparent;
    --btn-fg: var(--color-text-on-primary);
    --btn-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
}
.btn-primary:hover { filter: brightness(1.08); }

/* Outline: accent-coloured secondary action. */
.btn-outline {
    --btn-bg: transparent;
    --btn-bg-hover: rgb(var(--primary-rgb) / .08);
    --btn-border: rgb(var(--primary-rgb) / .4);
    --btn-border-hover: rgb(var(--primary-rgb) / .7);
    --btn-fg: rgb(var(--primary-ink-rgb));
}

/* Ghost: quiet secondary action for toolbars and card footers. */
.btn-ghost {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-hover-strong);
    --btn-border: var(--border-strong);
    --btn-border-hover: rgb(var(--color-text-muted-rgb) / .4);
}

/* Danger keeps its own red identity on every service. */
.btn-danger {
    --btn-bg: rgb(239 68 68 / .1);
    --btn-bg-hover: rgb(239 68 68 / .16);
    --btn-border: rgb(239 68 68 / .28);
    --btn-border-hover: rgb(239 68 68 / .5);
    --btn-fg: #F87171;
}
.btn-danger:focus-visible { outline-color: #EF4444; }

/* Sizes. */
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; border-radius: 8px; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: 15px; gap: 10px; border-radius: 11px; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }

/* Templates written before .btn-sm existed shrink buttons with utilities
   (`!py-1.5 !px-3 text-xs`); honour them. */
.btn:is(.text-xs, [class*="!text-xs"], [class*="!text-[10px]"], [class*="!text-[11px]"], [class*="!py-1"]) {
    min-height: 30px;
    padding-inline: 11px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: 8px;
}

/* Loading: the label is hidden (not removed) so the button keeps its width. */
.btn.is-loading, .btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--btn-fg);
    border-inline-end-color: transparent;
    animation: shell-spin .7s linear infinite;
}
.btn:not(.is-loading):not([aria-busy="true"])::after { content: none; }
@keyframes shell-spin { to { transform: rotate(1turn); } }

/* Trailing arrow: nudges toward the reading direction on hover. */
.btn .ico {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform .2s var(--ease);
}
.btn .ico svg { width: 15px; height: 15px; }
[dir="rtl"] .btn .ico svg { transform: scaleX(-1); }
.btn:hover .ico { transform: translateX(2px); }
[dir="rtl"] .btn:hover .ico { transform: translateX(-2px); }

/* Section-level link ("Open Agents →"). */
.go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background-color: transparent;
    color: var(--color-text-main);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.go:hover { background-color: var(--color-hover-strong); }
.go:active { transform: scale(.985); }
.go:focus-visible { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 2px; }
.go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
[dir="rtl"] .go svg { transform: scaleX(-1); }
.go:hover svg { transform: translateX(2px); }
[dir="rtl"] .go:hover svg { transform: scaleX(-1) translateX(2px); }

/* Phones: hero/auth call-to-action rows stack into full-width buttons. */
@media (max-width: 560px) {
    .hero-actions .btn,
    .auth-form .btn { width: 100%; }
}

/* ----------------------------------------------------------- hero --------- */

.hero {
    position: relative;
    padding: clamp(56px, 11vh, 120px) clamp(18px, 5vw, 56px) clamp(48px, 8vh, 88px);
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(32px, 5vh, 56px);
    text-align: start;
}
.hero-main { min-width: 0; max-width: 780px; }

/* Eyebrow: a quiet label above the headline. */
.hero .eyebrow, .eyebrow-rule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px 4px 12px;
    border-radius: 99px;
    border: 1px solid var(--hair);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    direction: inherit;
    unicode-bidi: normal;
    margin: 0;
}
.hero .eyebrow::before, .eyebrow-rule::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgb(var(--primary-rgb));
}
.hero .eyebrow b, .eyebrow-rule b { color: var(--color-text-main); font-weight: 600; }
/* A Latin label (e.g. "Model Context Protocol") keeps its own direction. */
.eyebrow-rule:is(:lang(en), [dir="ltr"]) { direction: ltr; }

/* Display type: large, tight, calm. */
.hero h1 {
    font-size: clamp(36px, 5.8vw, 68px);
    line-height: 1.18;
    margin: 22px 0 0;
    font-weight: 800;
    letter-spacing: -.02em;
}
.hero h1 .line { display: inline; }
.hero h1 .line span { display: inline; }
.hero h1 .line + .line::before { content: ' '; }
.hero h1 em { font-style: normal; color: rgb(var(--primary-ink-rgb)); white-space: nowrap; }

.hero .sub {
    max-width: 60ch;
    margin: 20px 0 0;
    color: var(--color-text-muted);
    font-size: clamp(15px, 1.25vw, 17.5px);
    line-height: 1.95;
}
.hero .sub strong { color: var(--color-text-main); font-weight: 600; }
.hero-actions {
    margin-top: 32px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

/* Retired: the numbered index rail, the "scroll" hint and the marquee. */
.hero-rail, .scroll-hint, .strip { display: none !important; }

/* Stat band. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-lg);
    background: var(--hair);
    overflow: hidden;
}
.hero-stats div { display: grid; gap: 4px; align-content: start; padding: 18px 20px; background: var(--color-bg-dark); }
.hero-stats .sv { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.hero-stats .sv em { font-style: normal; color: rgb(var(--primary-ink-rgb)); }
.hero-stats .sl { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 700px) {
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .hero { padding-top: 40px; padding-bottom: 40px; row-gap: 28px; }
    .hero .btn-lg { min-height: 48px; font-size: 15px; }
    .hero h1 { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.25; margin-top: 18px; }
    .hero .sub { font-size: 15px; line-height: 1.9; }
    .hero-actions { margin-top: 26px; width: 100%; gap: 8px; }
}

/* -------------------------------------------------- content sections ----- */

/* Two-column section: copy on one side, a product mock on the other. */
.svc {
    position: relative;
    padding: clamp(64px, 10vh, 112px) clamp(18px, 5vw, 56px);
    scroll-margin-top: var(--nav-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
    border-top: 1px solid var(--hair);
}
.svc-meta { display: none; }
.svc-logo { height: clamp(26px, 3vw, 34px); width: auto; margin: 0 0 20px; display: block; }
.svc h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.4; margin: 0; letter-spacing: -.015em; }
.svc .lead {
    margin-top: 16px;
    color: var(--color-text-muted);
    font-size: clamp(15px, 1.2vw, 16.5px);
    line-height: 1.95;
    max-width: 52ch;
}
.svc .go { margin-top: 28px; }

/* Feature list: check-marked rows. The numeric .k markers are retired. */
.feat { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feat li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--color-text-main);
}
.feat li::before {
    content: '';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    background-color: rgb(var(--primary-ink-rgb));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.feat .k { display: none; }

/* Product mock: a plain window with stacked panels. Replaces the old
   floating glass pane, colour blobs and tilt. */
.stage { display: grid; place-items: center; min-width: 0; }
.pane {
    position: relative;
    width: min(100%, 460px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 50px 14px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hair);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}
.pane::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 36px;
    border-bottom: 1px solid var(--hair);
    background:
        radial-gradient(circle at 18px 18px, var(--border-strong) 0 4px, transparent 4.5px),
        radial-gradient(circle at 34px 18px, var(--border-strong) 0 4px, transparent 4.5px),
        radial-gradient(circle at 50px 18px, var(--border-strong) 0 4px, transparent 4.5px);
}
.glass, .blob { display: none !important; }
.pane .card {
    position: static;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--color-bg-dark);
    border: 1px solid var(--hair);
}
.pane .card .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pane .card .tag {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--color-text-muted);
    direction: ltr;
    margin-inline-end: 4px;
}
.pane .card .txt { font-size: 13.5px; color: var(--color-text-main); line-height: 1.85; margin-top: 6px; }
.bar {
    height: 4px;
    border-radius: 99px;
    background: var(--color-hover-strong);
    overflow: hidden;
    margin-top: 10px;
}
.bar i { display: block; height: 100%; width: 0; background: rgb(var(--primary-rgb)); border-radius: 99px; transition: width 1.2s var(--ease); }

/* Chip, restyled to the shell language. */
.chip {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    border: 1px solid var(--hair);
    color: var(--color-text-muted);
    background: var(--color-hover-subtle);
    letter-spacing: 0;
}
.chip-primary {
    border-color: rgb(var(--primary-rgb) / .25);
    color: rgb(var(--primary-ink-rgb));
    background: rgb(var(--primary-rgb) / .08);
}

@media (max-width: 940px) {
    .svc { grid-template-columns: 1fr; gap: 36px; }
    .svc .stage { order: 2 !important; }
    .svc .copy { order: 1; }
    .pane { width: min(100%, 480px); }
}
@media (max-width: 560px) {
    .svc { padding-block: 56px; }
    .pane { padding: 46px 12px 12px; }
}

/* Card grid used for feature/format/tutorial tiles. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 12px;
}
.tile-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hair);
    background: var(--color-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tile-card:hover { border-color: var(--border-strong); }
.tile-card .t-i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-hover-strong);
    color: rgb(var(--primary-ink-rgb));
    margin-bottom: 6px;
}
.tile-card .t-i svg { width: 19px; height: 19px; }
.tile-card h3 { font-size: 15.5px; font-weight: 700; }
.tile-card p { color: var(--color-text-muted); font-size: 14px; line-height: 1.85; }

/* Section head used above a tile grid. */
.sec {
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(56px, 9vh, 104px) clamp(18px, 5vw, 56px);
    position: relative;
    z-index: 2;
    scroll-margin-top: var(--nav-h);
    border-top: 1px solid var(--hair);
}
.sec-head { max-width: 58ch; display: grid; gap: 12px; margin-bottom: clamp(26px, 4vh, 40px); justify-items: start; }
.sec-head h2 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.015em; }
.sec-head p { color: var(--color-text-muted); font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.95; }

/* Persian eyebrow (landing heroes) — same quiet label. */
.hero .eyebrow.eyebrow-fa { direction: rtl; }

/* ------------------------------------------------------------ faq -------- */

.faq .sec-head { max-width: 60ch; }
.faq-list { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--hair); }
.faq-item {
    border-bottom: 1px solid var(--hair);
    background: transparent;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 2px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.75;
    margin: 0;
}
.faq-item summary:hover h3 { color: var(--color-text-main); }
/* Plus that turns into a minus. */
.faq-ico {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--color-text-muted);
    transition: background-color .15s ease;
}
.faq-item summary:hover .faq-ico { background: var(--color-hover-strong); }
.faq-ico::before, .faq-ico::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease;
}
.faq-ico::after { transform: rotate(90deg); }
.faq-item[open] .faq-ico::after { transform: rotate(0deg); }
.faq-item p {
    padding: 0 2px 20px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 2;
    max-width: 72ch;
}
.faq-more { margin-top: 22px; color: var(--color-text-muted); font-size: 14px; }
.faq-more a { color: rgb(var(--primary-ink-rgb)); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* --------------------------------------------------------- finale -------- */

.finale {
    margin: clamp(40px, 8vh, 80px) auto clamp(56px, 10vh, 104px);
    padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
    text-align: center;
    max-width: min(1088px, calc(100% - 36px));
    position: relative;
    z-index: 2;
    border-radius: var(--radius-xl);
    border: 1px solid var(--hair);
    background: var(--color-surface);
}
.finale h2 { font-size: clamp(24px, 3.4vw, 40px); line-height: 1.35; letter-spacing: -.015em; }
.finale .sub {
    margin: 14px auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: clamp(15px, 1.15vw, 16.5px);
    line-height: 1.9;
    max-width: 52ch;
}
.finale .hero-actions { justify-content: center; margin-top: 28px; }
.sso { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.sso span {
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--hair);
    font-size: 12.5px;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------- footer -------- */

.shell-footer {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    border-top: 1px solid var(--hair);
    background: var(--color-bg-dark);
}
.f-in {
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(40px, 5vw, 60px) clamp(18px, 5vw, 56px) 0;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(28px, 4vw, 56px);
}
.f-brand img { height: 26px; width: auto; margin-bottom: 16px; }
.f-brand img.brand-main { height: 44px; margin: -6px 0 10px; margin-inline-start: -8px; }
.f-brand p { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.95; max-width: 36ch; }
.f-social { display: flex; gap: 6px; margin-top: 18px; }
.f-social a {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hair);
    color: var(--color-text-muted);
    transition: color .15s ease, background-color .15s ease;
}
.f-social a:hover { color: var(--color-text-main); background: var(--color-hover-strong); }
.f-social svg { width: 17px; height: 17px; }
.f-col h3 { font-size: 13px; font-weight: 600; color: var(--color-text-main); margin-bottom: 10px; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.f-col li a {
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-text-muted);
    font-size: 13.5px;
    transition: color .15s ease;
}
.f-col li a:hover { color: var(--color-text-main); }
.f-col li a i { display: none; }
.f-note { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.95; margin-bottom: 14px; }
.f-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--hair);
    color: var(--color-text-main);
    font-size: 13.5px;
    font-weight: 500;
    direction: ltr;
    transition: background-color .15s ease;
}
.f-mail:hover { background: var(--color-hover-strong); }
.enamad-seal { background: var(--color-surface) !important; border: 1px solid var(--hair); border-radius: 12px !important; }
.f-bar {
    max-width: 1200px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    padding: 18px clamp(18px, 5vw, 56px) calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hair);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 12.5px;
}
.f-bar .subs { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.f-bar .subs a {
    direction: ltr;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 11.5px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    transition: color .15s ease;
}
.f-bar .subs a:hover { color: var(--color-text-main); }
@media (max-width: 1000px) {
    .f-in { grid-template-columns: 1fr 1fr; gap: 32px; }
    .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .f-in { grid-template-columns: 1fr 1fr; }
    .f-in > .f-col:last-child { grid-column: 1 / -1; }
    .f-bar { flex-direction: column; align-items: stretch; text-align: center; gap: 4px; }
    .f-bar .subs { justify-content: center; }
}

/* ------------------------------------------------------ auth screens ------ */

.auth {
    min-height: calc(100svh - var(--nav-bar));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    max-width: 1120px;
    margin-inline: auto;
    padding: clamp(36px, 7vh, 88px) clamp(18px, 5vw, 56px);
}
.auth-rail { display: grid; gap: 18px; align-content: center; justify-items: start; }
.auth-rail h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; letter-spacing: -.02em; font-weight: 800; }
.auth-rail h1 em { font-style: normal; color: rgb(var(--primary-ink-rgb)); }
.auth-rail p { color: var(--color-text-muted); font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.95; max-width: 44ch; }
.auth-points { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.auth-points li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    color: var(--color-text-main);
    font-size: 14.5px;
    line-height: 1.8;
}
.auth-points li svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 3px;
    border-radius: 50%;
    background: rgb(var(--primary-rgb) / .12);
    color: rgb(var(--primary-ink-rgb));
}

.auth-card {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--hair);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 3vw, 36px);
}
.auth-card::before { content: none; }
.auth-card h2 { font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; }
.auth-card .auth-sub { color: var(--color-text-muted); font-size: 14px; line-height: 1.85; margin-top: 6px; }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
.auth-form .btn { width: 100%; }

/* Field with a leading icon and an optional trailing action. */
.f-row { display: grid; gap: 7px; }
.f-row > label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}
.f-row > label .opt { color: var(--color-text-muted); font-weight: 400; }
.f-wrap { position: relative; display: flex; align-items: center; }
.f-wrap > svg.f-lead {
    position: absolute;
    inset-inline-start: 13px;
    width: 17px;
    height: 17px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color .15s ease;
}
.f-wrap:focus-within > svg.f-lead { color: rgb(var(--primary-ink-rgb)); }
.field {
    width: 100%;
    min-height: 42px;
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0 13px;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-form .field { min-height: 46px; }
select.field { padding-inline-end: 13px; }
.f-wrap .field { padding-inline-start: 40px; }
.f-wrap.has-action .field { padding-inline-end: 48px; }
textarea.field { padding: 11px 13px; min-height: 7rem; line-height: 1.8; resize: vertical; }
.field::placeholder { color: rgb(var(--color-text-muted-rgb) / .7); }
.field:hover:not(:focus) { border-color: rgb(var(--color-text-muted-rgb) / .38); }
.field:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb) / .75);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .16);
}
.field.is-bad { border-color: rgb(239 68 68 / .6); }
.field.is-bad:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / .16); }
.field.is-good { border-color: rgb(var(--primary-rgb) / .5); }
.f-eye {
    position: absolute;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.f-eye:hover { color: var(--color-text-main); background: var(--color-hover-strong); }
.f-eye svg { width: 17px; height: 17px; }
.f-hint { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.75; }
.f-err {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    color: #F87171;
    line-height: 1.7;
}
.f-err svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.f-err.hidden,
.pw-meter.hidden,
.f-eye svg.hidden { display: none; }

/* Form-level error banner. */
.auth-alert {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgb(239 68 68 / .28);
    background: rgb(239 68 68 / .08);
}
.auth-alert p { font-size: 13px; color: #F87171; line-height: 1.8; }
.auth-alert.is-info { border-color: rgb(34 197 94 / .28); background: rgb(34 197 94 / .08); }
.auth-alert.is-info p { color: #4ADE80; }

/* Password strength meter. */
.pw-meter { display: grid; gap: 8px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-bars i {
    height: 3px;
    border-radius: 99px;
    background: var(--color-hover-strong);
    transition: background .25s ease;
}
.pw-meter[data-score="1"] .pw-bars i:nth-child(-n+1),
.pw-meter[data-score="2"] .pw-bars i:nth-child(-n+2),
.pw-meter[data-score="3"] .pw-bars i:nth-child(-n+3),
.pw-meter[data-score="4"] .pw-bars i:nth-child(-n+4) { background: var(--pw-color, rgb(var(--primary-rgb))); }
.pw-label { font-size: 12px; color: var(--color-text-muted); display: flex; justify-content: space-between; gap: 10px; }
.pw-label b { color: var(--pw-color, var(--color-text-main)); font-weight: 600; }

/* Live checklist of the server's password rules. */
.pw-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pw-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    transition: color .15s ease;
}
.pw-rules li .tick {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: transparent;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pw-rules li .tick svg { width: 10px; height: 10px; }
.pw-rules li.ok { color: var(--color-text-main); }
.pw-rules li.ok .tick {
    border-color: rgb(var(--primary-rgb));
    background: rgb(var(--primary-rgb));
    color: var(--color-text-on-primary);
}

.auth-alt {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--hair);
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
}
.auth-alt a { color: rgb(var(--primary-ink-rgb)); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-fine { margin-top: 16px; font-size: 12px; color: var(--color-text-muted); line-height: 1.9; text-align: center; }

@media (max-width: 940px) {
    .auth { grid-template-columns: 1fr; gap: 28px; padding-top: clamp(24px, 4vh, 40px); min-height: 0; max-width: 520px; }
    .auth-rail { order: 2; }
    .auth-rail h1 { font-size: 24px; }
    .auth-rail .auth-points { display: none; }
    .auth-card { order: 1; }
}

/* ------------------------------------------------------- reveal ----------- */

/* Scroll reveals only hide content once the inline script in shared/base.html
   has marked <html class="js">. Short and subtle. */
html.js .reveal { opacity: 0; transform: translateY(8px); }

/* Above-the-fold content never waits for JavaScript. */
html.js .hero .reveal,
html.js .hero h1 .line span {
    opacity: 1;
    transform: none;
    animation: shell-rise .5s var(--ease) both;
}
html.js .hero h1 .line span { animation-delay: .03s; }
html.js .hero .sub.reveal { animation-delay: .08s; }
html.js .hero .hero-actions.reveal { animation-delay: .13s; }
@keyframes shell-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shell-body *, .shell-body *::before, .shell-body *::after {
        animation: none !important;
        transition: none !important;
    }
    html.js .reveal { opacity: 1; transform: none; }
}

/* Component display rules (.btn/.go are inline-flex) outrank the UA's
   [hidden] rule; re-assert it so the attribute always hides. */
.btn[hidden], .go[hidden] { display: none; }

/* ── Live agent state dots (dashboard cards + usage dashboard) ────────── */
.agent-state-dot {
    width: 7px; height: 7px; border-radius: 99px;
    display: inline-block; margin-inline-end: 5px;
    background: var(--color-text-muted);
}
.agent-state-dot[data-state="running"]    { background: #34D399; box-shadow: 0 0 0 3px rgb(52 211 153 / .15); }
.agent-state-dot[data-state="pending"]    { background: #FBBF24; animation: agent-dot-blink 1.4s ease-in-out infinite; }
.agent-state-dot[data-state="exited"],
.agent-state-dot[data-state="absent"]     { background: #F87171; }
.agent-state-dot[data-state="unreachable"]{ background: #FB923C; }
.agent-state-dot[data-state="unknown"]    { background: var(--color-text-subtle); }
@keyframes agent-dot-blink { 50% { opacity: .35; } }

/* Agent avatar initials fallback (profile image present → <img> instead). */
.agent-avatar { user-select: none; letter-spacing: .5px; }

/* ==========================================================================
   Light theme — component layer

   Tokens do most of the work; what remains are the places where a white
   control on a grey page needs a real edge and a little elevation.
   ========================================================================== */

:root[data-theme="light"] .shell-body h1,
:root[data-theme="light"] .shell-body h2,
:root[data-theme="light"] .shell-body h3 { letter-spacing: -0.01em; }

:root[data-theme="light"] ::selection {
    background: rgb(var(--primary-rgb) / .18);
    color: var(--color-text-main);
}

/* ── header ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] .shell-nav > a { color: var(--color-text-muted); }
:root[data-theme="light"] .shell-nav > a:hover,
:root[data-theme="light"] .shell-nav > a.on { color: var(--color-text-main); }

/* ── buttons ──────────────────────────────────────────────────────────── */
:root[data-theme="light"] .btn {
    --btn-bg: #FFFFFF;
    --btn-bg-hover: #F7F8FA;
    --btn-border: var(--border-strong);
    --btn-border-hover: rgb(14 17 22 / .24);
    --btn-fg: var(--color-text-main);
    --btn-shadow: var(--shadow-xs);
}
:root[data-theme="light"] .btn:focus-visible,
:root[data-theme="light"] .go:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgb(var(--primary-rgb) / .55);
}
:root[data-theme="light"] .btn-primary {
    --btn-bg: rgb(var(--primary-rgb));
    --btn-bg-hover: rgb(var(--primary-rgb));
    --btn-border: transparent;
    --btn-border-hover: transparent;
    --btn-fg: var(--color-text-on-primary);
    --btn-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(14 17 22 / .12);
}
:root[data-theme="light"] .btn-primary:hover { filter: brightness(.94); }
:root[data-theme="light"] .btn-outline {
    --btn-bg: transparent;
    --btn-bg-hover: rgb(var(--primary-rgb) / .06);
    --btn-border: rgb(var(--primary-rgb) / .38);
    --btn-border-hover: rgb(var(--primary-rgb) / .65);
    --btn-fg: rgb(var(--primary-ink-rgb));
    --btn-shadow: none;
}
:root[data-theme="light"] .btn-ghost {
    --btn-bg: transparent;
    --btn-bg-hover: rgb(14 17 22 / .045);
    --btn-border: var(--border-strong);
    --btn-shadow: none;
}
:root[data-theme="light"] .btn-danger {
    --btn-bg: #FEF3F2;
    --btn-bg-hover: #FEE4E2;
    --btn-border: rgb(180 35 24 / .24);
    --btn-border-hover: rgb(180 35 24 / .45);
    --btn-fg: #B42318;
}
:root[data-theme="light"] .shell-nav .cta:not(.cta-dashboard):hover { filter: brightness(.94); }

/* dimo.css primitives */
:root[data-theme="light"] .icon-btn:hover { background: rgb(14 17 22 / .055); }

/* ── surfaces & cards ─────────────────────────────────────────────────── */
:root[data-theme="light"] .surface,
:root[data-theme="light"] .surface-flat { box-shadow: var(--shadow-xs); }
:root[data-theme="light"] .surface-sunken { background-color: #F7F8FA; }
:root[data-theme="light"] .card-hover:hover { box-shadow: var(--shadow-md); }
:root[data-theme="light"] .tile-card { box-shadow: var(--shadow-xs); }
:root[data-theme="light"] .tile-card:hover { box-shadow: var(--shadow-md); }
:root[data-theme="light"] .pane { box-shadow: var(--shadow-lg); }
:root[data-theme="light"] .pane .card { background: #F7F8FA; }
:root[data-theme="light"] .finale { box-shadow: var(--shadow-xs); }
:root[data-theme="light"] .auth-card { box-shadow: var(--shadow-md); }
:root[data-theme="light"] .hero-stats div { background: var(--color-surface); }

/* ── forms ────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .field,
:root[data-theme="light"] .model-search-input,
:root[data-theme="light"] .mp-control,
:root[data-theme="light"] .mp-search {
    background-color: #FFFFFF;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}
:root[data-theme="light"] .field::placeholder { color: #8C93A1; }
:root[data-theme="light"] .field:hover:not(:focus) { border-color: rgb(14 17 22 / .24); }
:root[data-theme="light"] .field:focus,
:root[data-theme="light"] .model-search-input:focus,
:root[data-theme="light"] .mp-search:focus {
    border-color: rgb(var(--primary-rgb) / .75);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .14);
}
:root[data-theme="light"] .field:disabled,
:root[data-theme="light"] .field[readonly] {
    opacity: 1;
    background-color: #F7F8FA;
    box-shadow: none;
}
:root[data-theme="light"] select.field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235B6271' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .f-err,
:root[data-theme="light"] .auth-alert p { color: #B42318; }
:root[data-theme="light"] .auth-alert { background: #FEF3F2; border-color: #FECDCA; }
:root[data-theme="light"] .auth-alert.is-info { background: #ECFDF3; border-color: #ABEFC6; }
:root[data-theme="light"] .auth-alert.is-info p { color: #067647; }

/* ── chips, pills, segmented options ──────────────────────────────────── */
:root[data-theme="light"] .chip {
    background: #F2F4F7;
    border-color: var(--border-subtle);
    color: #475467;
}
:root[data-theme="light"] .chip-primary {
    background: rgb(var(--primary-rgb) / .08);
    border-color: rgb(var(--primary-rgb) / .2);
    color: rgb(var(--primary-ink-rgb));
}
:root[data-theme="light"] .opt-btn { background: #fff; }
:root[data-theme="light"] .opt-btn.is-on {
    background: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: var(--color-text-on-primary);
}
/* Photo-overlay kebabs stay dark-on-image on either theme. */
:root[data-theme="light"] .opt-btn.fx-dots { background: rgb(14 17 22 / .6); border-color: rgb(255 255 255 / .3); color: #fff; }

/* ── meters & progress ────────────────────────────────────────────────── */
:root[data-theme="light"] .meter { background: #E9ECF0; }
:root[data-theme="light"] .meter.is-critical > span { background: #D92D20; }
:root[data-theme="light"] .bar { background: #E9ECF0; }
:root[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, #EEF0F3, #E4E7EB, #EEF0F3);
    background-size: 200% 100%;
}

/* ── tables ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] .shell-main table thead th { color: #475467; font-weight: 600; }
:root[data-theme="light"] .shell-main table tbody tr:hover { background: rgb(14 17 22 / .02); }

/* ── Tailwind status colours authored for dark ───────────────────────────
   The templates use the 200–400 shades for errors and warnings; on white
   those are 1.6–2.4:1. Map them to the 700-level equivalents on light. */
:root[data-theme="light"] .text-red-200,
:root[data-theme="light"] .text-red-300,
:root[data-theme="light"] .text-red-400 { color: #B42318; }
:root[data-theme="light"] .text-yellow-300,
:root[data-theme="light"] .text-yellow-300\/80,
:root[data-theme="light"] .text-yellow-300\/90,
:root[data-theme="light"] .text-yellow-400 { color: #93370D; }
:root[data-theme="light"] .text-cyan-400 { color: #08708C; }
:root[data-theme="light"] .text-orange-400 { color: #C2410C; }
:root[data-theme="light"] .text-fuchsia-400 { color: #862EBE; }
:root[data-theme="light"] .text-emerald-400,
:root[data-theme="light"] .text-green-400 { color: #067647; }
:root[data-theme="light"] .bg-red-500\/10,
:root[data-theme="light"] .bg-red-500\/5 { background-color: #FEF3F2; }
:root[data-theme="light"] .border-red-500\/30,
:root[data-theme="light"] .border-red-500\/40,
:root[data-theme="light"] .border-red-400\/30 { border-color: #FECDCA; }
:root[data-theme="light"] .bg-yellow-500\/5 { background-color: #FFFAEB; }
:root[data-theme="light"] .border-yellow-500\/30,
:root[data-theme="light"] .border-yellow-500\/40 { border-color: #FEDF89; }

/* Muted copy at reduced alpha: keep the hierarchy, lose the illegibility. */
:root[data-theme="light"] .text-txt-muted\/70,
:root[data-theme="light"] .text-txt-muted\/60 { color: rgb(var(--color-text-muted-rgb) / .9); }
:root[data-theme="light"] .text-txt-muted\/50 { color: rgb(var(--color-text-muted-rgb) / .82); }

/* Status dots: slightly deeper so they read on white. */
:root[data-theme="light"] .agent-state-dot[data-state="running"] { background: #12B76A; box-shadow: 0 0 0 3px rgb(18 183 106 / .14); }
:root[data-theme="light"] .agent-state-dot[data-state="pending"] { background: #F79009; }
:root[data-theme="light"] .agent-state-dot[data-state="exited"],
:root[data-theme="light"] .agent-state-dot[data-state="absent"] { background: #F04438; }

/* ── Light theme: status colours in the service stylesheets ──────────────
   Semantic ramp: success #067647 · warning #93370D · danger #B42318 · info #08708C */
:root[data-theme="light"] .msg-action-allow { color: #067647; border-color: rgb(6 118 71 / .3); }
:root[data-theme="light"] .msg-action-deny,
:root[data-theme="light"] .session-del:hover,
:root[data-theme="light"] .hcx-item-btn.is-danger:hover,
:root[data-theme="light"] .spl-act--danger:hover { color: #B42318; }
:root[data-theme="light"] .msg-action-deny { border-color: rgb(180 35 24 / .3); }
:root[data-theme="light"] .msg-permission { background: #FFFAEB; border-color: #FEDF89; }
:root[data-theme="light"] .recording-bar { background: #FEF3F2; border-color: #FECDCA; }
:root[data-theme="light"] #mic-btn.is-recording { color: #B42318; background: #FEF3F2; border-color: #FDA29B; }
:root[data-theme="light"] .toast-error,
:root[data-theme="light"] .toast-warning { border-color: #FDA29B; }
:root[data-theme="light"] .hcx-row.is-error .hcx-bubble { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }

:root[data-theme="light"] .sp-badge.is-open     { color: #026AA2; border-color: #B9E6FE; background-color: #F0F9FF; }
:root[data-theme="light"] .sp-badge.is-answered { color: #067647; border-color: #ABEFC6; background-color: #ECFDF3; }
:root[data-theme="light"] .sp-badge.is-pending  { color: #93370D; border-color: #FEDF89; background-color: #FFFAEB; }
:root[data-theme="light"] .sp-badge.is-resolved { color: #3A7610; border-color: #D0EFA6; background-color: #F5FBEE; }
:root[data-theme="light"] .sp-badge.is-normal   { color: #175CD3; border-color: #B2DDFF; background-color: #EFF8FF; }
:root[data-theme="light"] .sp-badge.is-high     { color: #B93815; border-color: #F9DBAF; background-color: #FEF6EE; }
:root[data-theme="light"] .sp-badge.is-urgent   { color: #B42318; border-color: #FECDCA; background-color: #FEF3F2; }
:root[data-theme="light"] .sp-late { color: #B42318; }
:root[data-theme="light"] .sp-msg.is-note .sp-bubble { background-color: #FFFAEB; border-color: #FEC84B; }
:root[data-theme="light"] .sp-star.is-on { color: #DC6803; }

:root[data-theme="light"] .field.wz-invalid { border-color: #F97066; background: #FFFBFA; }
:root[data-theme="light"] .wz-err { color: #B42318; }

:root[data-theme="light"] .ac-state[data-state="running"] { color: #067647; }
:root[data-theme="light"] .ac-state[data-state="running"] .ac-state-dot { background: #12B76A; }
:root[data-theme="light"] .ac-state[data-state="pending"] { color: #93370D; }
:root[data-theme="light"] .ac-state[data-state="pending"] .ac-state-dot { background: #F79009; }
:root[data-theme="light"] .ac-state[data-state="exited"],
:root[data-theme="light"] .ac-state[data-state="absent"],
:root[data-theme="light"] .ac-state[data-state="unreachable"] { color: #B42318; }
:root[data-theme="light"] .ac-state[data-state="exited"] .ac-state-dot,
:root[data-theme="light"] .ac-state[data-state="absent"] .ac-state-dot,
:root[data-theme="light"] .ac-state[data-state="unreachable"] .ac-state-dot { background: #F04438; }
:root[data-theme="light"] .ac-note[data-kind="error"] { color: #B42318; }
:root[data-theme="light"] .ac-note[data-kind="ok"] { color: #067647; }

:root[data-theme="light"] .mp-u-low    { background: #ECFDF3; color: #067647; }
:root[data-theme="light"] .mp-u-medium { background: #FFFAEB; color: #93370D; }
:root[data-theme="light"] .mp-u-high   { background: #FEF3F2; color: #B42318; }

/* The file explorer is one big card on the storage pages. */
:root[data-theme="light"] .fx-shell { box-shadow: var(--shadow-xs); }
:root[data-theme="light"] .fx-nav,
:root[data-theme="light"] .fx-details { background: #FAFBFC; }

/* ── Both themes: interaction polish ─────────────────────────────────────
   One consistent keyboard focus ring for every interactive element that
   does not draw its own, and tabular figures for numbers. */
.shell-body a:focus-visible,
.shell-body button:focus-visible,
.shell-body [role="button"]:focus-visible,
.shell-body summary:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb) / .7);
    outline-offset: 2px;
    border-radius: 8px;
}
.tabular, .num, .stat-value { font-variant-numeric: tabular-nums; }

/* Small meta text dimmed with opacity utilities stacks to ~3.4:1 on white.
   On light, raise the floor so meta labels stay >= 4.5:1. */
:root[data-theme="light"] .shell-main :is(.text-xs, .text-\[11px\], .text-\[10px\], .text-sm).opacity-50,
:root[data-theme="light"] .shell-main :is(.text-xs, .text-\[11px\], .text-\[10px\], .text-sm).opacity-60 { opacity: .8; }
:root[data-theme="light"] .shell-main :is(.text-xs, .text-\[11px\], .text-\[10px\], .text-sm).opacity-70 { opacity: .88; }
:root[data-theme="light"] .ac-date { opacity: .9; }
:root[data-theme="light"] .plan-allow-f { color: #475467; opacity: 1; }
:root[data-theme="light"] .\!text-red-300 { color: #B42318 !important; }
:root[data-theme="light"] .\!border-red-500\/40 { border-color: #FECDCA !important; }

/* Keyboard users land on "skip to content" first. */
.skip-link {
    position: fixed;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2000;
    padding: 9px 14px;
    border-radius: 9px;
    background: rgb(var(--primary-rgb));
    color: var(--color-text-on-primary);
    font-size: 14px;
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.skip-link:focus { transform: none; outline: 2px solid var(--color-text-main); outline-offset: 2px; }
.shell-main:focus { outline: none; }

/* Label with a trailing aside link ("forgot password?") on the same line. */
.f-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.f-label-row > label { font-size: 13px; font-weight: 500; color: var(--color-text-main); }
.f-aside { font-size: 12.5px; color: rgb(var(--primary-ink-rgb)); font-weight: 500; }
.f-aside:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Form controls shared by every settings screen
   ========================================================================== */

/* ── Checkbox ─────────────────────────────────────────────────────────── */
.checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
    background-color: var(--field-bg);
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.checkbox:hover { border-color: rgb(var(--color-text-muted-rgb) / .5); }
.checkbox:checked { background-color: rgb(var(--primary-rgb)); border-color: rgb(var(--primary-rgb)); }
.checkbox:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0B0D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
:root[data-theme="light"] .checkbox:checked::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.checkbox:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .7); outline-offset: 2px; }

/* ── Switch (on/off setting) ──────────────────────────────────────────── */
.switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: 99px;
    background: rgb(var(--color-text-muted-rgb) / .3);
    cursor: pointer;
    transition: background-color .2s ease;
}
.switch::after {
    content: '';
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / .3);
    transition: transform .2s var(--ease);
}
.switch:checked { background: rgb(var(--primary-rgb)); }
.switch:checked::after { transform: translateX(16px); }
[dir="rtl"] .switch:checked::after { transform: translateX(-16px); }
.switch:focus-visible { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 3px; }
.switch:disabled { opacity: .45; cursor: not-allowed; }
:root[data-theme="light"] .switch:not(:checked) { background: #D0D5DD; }

/* ── Radio ────────────────────────────────────────────────────────────── */
.radio {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--field-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.radio:checked {
    border-color: rgb(var(--primary-rgb));
    box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 10px rgb(var(--primary-rgb));
}
.radio:focus-visible { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 3px; }

/* ── Option row: the whole row is the hit area ────────────────────────── */
.opt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.opt-row:hover { border-color: var(--border-strong); }
.opt-row:has(input:checked) {
    border-color: rgb(var(--primary-rgb) / .45);
    background: rgb(var(--primary-rgb) / .045);
}
.opt-row:has(input:focus-visible) { border-color: rgb(var(--primary-rgb) / .7); }
.opt-row:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.opt-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-hover-strong);
    color: var(--color-text-muted);
}
.opt-row:has(input:checked) .opt-ico { color: rgb(var(--primary-ink-rgb)); }
.opt-ico svg { width: 18px; height: 18px; }
.opt-ico img { width: 22px; height: 22px; object-fit: contain; }
.opt-text { flex: 1 1 auto; min-width: 0; }
.opt-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-main);
}
.opt-note { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.75; color: var(--color-text-muted); }
.opt-list { display: grid; gap: 8px; }
@media (min-width: 720px) { .opt-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root[data-theme="light"] .opt-row:has(input:checked) { background: rgb(var(--primary-rgb) / .04); }
:root[data-theme="light"] .opt-ico { background: #F2F4F7; }

/* ── Segmented control (a short, exclusive choice) ────────────────────── */
.seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--border-subtle);
    background: var(--sunken);
}
.seg > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg > label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.seg > label small { font-size: 11px; font-weight: 400; opacity: .85; line-height: 1.4; }
.seg > label:hover { color: var(--color-text-main); }
.seg > input:checked + label {
    background: var(--color-raised);
    color: var(--color-text-main);
    box-shadow: 0 1px 2px rgb(0 0 0 / .25), inset 0 0 0 1px var(--border-subtle);
}
.seg > input:focus-visible + label { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 2px; }
/* Longer choice lists (reasoning levels) wrap instead of squeezing. */
.seg.seg-wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.seg > label[hidden], [data-effort-wrap][hidden] { display: none !important; }
:root[data-theme="light"] .seg { background: #F2F4F7; }
:root[data-theme="light"] .seg > input:checked + label { background: #fff; box-shadow: var(--shadow-sm); }

/* ── Sticky save bar ──────────────────────────────────────────────────── */
.save-bar {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding: 8px 8px 8px 14px;
    padding-inline-start: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--color-raised-translucent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--shadow-lg);
    transition: border-color .2s ease;
}
.save-bar-state { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--color-text-muted); }
.save-bar-state::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--color-text-muted-rgb) / .5);
}
.save-bar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.save-bar.is-dirty .save-bar-state { color: var(--color-text-main); font-weight: 500; }
.save-bar.is-dirty .save-bar-state::before { background: #FBBF24; }
@media (max-width: 560px) {
    .save-bar { padding: 7px 7px 7px 12px; padding-inline-start: 14px; border-radius: 13px; }
    .save-bar-state { font-size: 12.5px; }
    .save-bar-actions .btn-ghost { display: none; }
}

/* ── Toasts (Django messages) ─────────────────────────────────────────── */
.toast {
    pointer-events: auto;
    max-width: 32rem;
    padding: .7rem 1rem;
    border-radius: 11px;
    font-size: .875rem;
    color: var(--color-text-main);
    background-color: var(--color-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    animation: toast-in .25s var(--ease) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast-success { border-inline-start: 3px solid #34D399; }
.toast-error, .toast-warning { border-inline-start: 3px solid #F87171; }

/* ==========================================================================
   Motion & depth layer (static/js/motion.js)

   Deliberate, short motion that explains what happened — a page arrives, a
   number counts, a card answers the cursor — plus a little atmosphere where
   it earns its place (hero sections, the page top). Everything degrades to
   the still design above with JavaScript off or reduced motion on.
   ========================================================================== */

/* ── Page transitions (cross-document View Transitions) ───────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
/* The header stays put while the page underneath changes. */
.shell-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }

/* Theme switch: the new theme spreads from the toggle (JS drives clip-path). */
html.theme-vt .shell-header { view-transition-name: none; }
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Navigation progress ──────────────────────────────────────────────── */
#nav-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 3000;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: right;
    opacity: 0;
    background: linear-gradient(to left, rgb(var(--primary-rgb)), rgb(var(--primary-rgb) / .35));
    box-shadow: 0 0 10px rgb(var(--primary-rgb) / .45);
}
[dir="ltr"] #nav-progress { transform-origin: left; background: linear-gradient(to right, rgb(var(--primary-rgb)), rgb(var(--primary-rgb) / .35)); }
#nav-progress.is-going {
    opacity: 1;
    transform: scaleX(.86);
    transition: transform 7s cubic-bezier(.08, .8, .2, 1), opacity .12s ease;
}

/* ── Header: gliding hover highlight + active underline ───────────────── */
.nav-hl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 8px;
    background: var(--color-hover-strong);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .18s ease;
}
.nav-hl.is-on { opacity: 1; }
.shell-nav.has-hl > a { z-index: 1; }
.shell-nav.has-hl > a:hover { background: transparent; }
.shell-nav.has-hl > a.on { background: transparent; }
@media (min-width: 901px) {
    .shell-nav > a.on:not(.cta)::after {
        content: '';
        position: absolute;
        inset-inline: 12px;
        bottom: calc((34px - var(--nav-bar)) / 2);
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: rgb(var(--primary-rgb));
    }
}
@media (max-width: 900px) { .nav-hl { display: none; } }

.shell-header.stuck::before { box-shadow: 0 8px 24px -16px var(--shadow-color); }

/* ── Search / command palette trigger ─────────────────────────────────── */
.shell-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px 0 10px;
    margin-inline-end: 4px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
    background: var(--color-hover-subtle);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.shell-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.shell-search:hover { color: var(--color-text-main); border-color: var(--border-strong); }
.shell-search-t { min-width: 5.5em; text-align: start; }
.shell-kbd, .cmdk kbd, .cmdk-esc {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--color-surface);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .shell-search { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .shell-search-t, .shell-search .shell-kbd { display: none; }
}

/* ── Command palette ──────────────────────────────────────────────────── */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(16vh, 140px) 16px 16px;
    background: var(--scrim);
    opacity: 0;
    transition: opacity .16s ease;
}
.cmdk[hidden] { display: none; }
.cmdk.is-open { opacity: 1; }
html.cmdk-lock, html.cmdk-lock body { overflow: hidden; }
.cmdk-panel {
    width: min(640px, 100%);
    max-height: min(520px, calc(100dvh - 140px));
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--border-strong);
    background: var(--color-raised);
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(var(--primary-rgb) / .06);
    overflow: hidden;
    transform: translateY(-8px) scale(.985);
    transition: transform .22s var(--ease);
}
.cmdk.is-open .cmdk-panel { transform: none; }
.cmdk-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.cmdk-search > svg { width: 18px; height: 18px; color: var(--color-text-muted); flex: 0 0 auto; }
.cmdk-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    border: 0;
    background: transparent;
    color: var(--color-text-main);
    font: inherit;
    font-size: 15.5px;
    outline: none;
}
.cmdk-input::placeholder { color: rgb(var(--color-text-muted-rgb) / .8); }
.cmdk-esc { cursor: pointer; }
.cmdk-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmdk-group {
    padding: 10px 10px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--color-text-main);
    font-size: 14px;
    scroll-margin: 6px;
}
.cmdk-item.is-active { background: var(--color-hover-strong); }
.cmdk-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.cmdk-item.is-active .cmdk-ico { color: rgb(var(--primary-ink-rgb)); border-color: rgb(var(--primary-rgb) / .35); }
.cmdk-ico svg { width: 15px; height: 15px; }
.cmdk-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.cmdk-t small { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.cmdk-go { opacity: 0; font-size: 12px; color: var(--color-text-muted); }
.cmdk-item.is-active .cmdk-go { opacity: 1; }
.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--color-text-muted); font-size: 13.5px; }
.cmdk-foot {
    display: flex;
    gap: 16px;
    padding: 9px 14px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11.5px;
    color: var(--color-text-muted);
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) {
    .cmdk { padding-top: 10px; }
    .cmdk-foot { display: none; }
}
:root[data-theme="light"] .cmdk-panel { box-shadow: 0 30px 70px -20px rgb(14 17 22 / .28); }

/* ── Cursor spotlight on cards ────────────────────────────────────────── */
.is-lit:is(.surface, .opt-row, .finale, .auth-card, .demo-window) {
    background-image: radial-gradient(460px circle at var(--mx) var(--my), rgb(255 255 255 / .045), transparent 60%);
}
:root[data-theme="light"] .is-lit:is(.surface, .opt-row, .finale, .auth-card, .demo-window) {
    background-image: radial-gradient(460px circle at var(--mx) var(--my), rgb(var(--primary-rgb) / .05), transparent 60%);
}
/* Cards also catch the light on their edge. */
:is(.tile-card, .learn .post) { position: relative; }
:is(.tile-card, .svc-card, .bento-card, .agent-card-v2, .plan-card, .pane, .learn .post)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--primary-rgb) / .6), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
}
.is-lit:is(.tile-card, .svc-card, .bento-card, .agent-card-v2, .plan-card, .pane, .learn .post)::after { opacity: 1; }

/* Interactive cards lift a little. */
:is(.tile-card, .svc-card, .bento-card, .learn .post, a.surface) {
    transition: transform .4s var(--ease), border-color .2s ease, box-shadow .4s var(--ease);
}
@media (hover: hover) {
    :is(.tile-card, .svc-card, .bento-card, .agent-card-v2, .plan-card, .learn .post, a.surface):hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }
}

/* ── Staggered entrances ([data-stagger]) ─────────────────────────────── */
html.motion-ready [data-stagger]:not(.is-in) > * { opacity: 0; }
html.motion-ready [data-stagger].is-in > * {
    animation: st-in .42s var(--ease) backwards;
    animation-delay: var(--st-delay, 0ms);
}
@keyframes st-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Hero: words, gradient accent, atmosphere ─────────────────────────── */
html.motion-ready .hero h1.words-in .line span:not(.w) { animation: none; }
html.motion-ready .hero h1.words-in .w,
html.motion-ready .words-in .w {
    display: inline-block;
    animation: w-in .75s var(--ease) backwards;
    animation-delay: calc(var(--wi) * 70ms + 60ms);
}
@keyframes w-in { from { opacity: 0; transform: translateY(.3em); filter: blur(10px); } }

/* Guarded: without color-mix() the declaration would drop and leave the
   word transparent, so older browsers keep the plain accent colour. */
@supports (color: color-mix(in srgb, red, blue)) and ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero h1 em:not(:has(.w)),
    .hero h1 em .w {
        background-image: linear-gradient(100deg, rgb(var(--primary-rgb)) 10%, color-mix(in srgb, rgb(var(--primary-rgb)) 55%, #8B9CFF) 90%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    :root[data-theme="light"] .hero h1 em:not(:has(.w)),
    :root[data-theme="light"] .hero h1 em .w {
        background-image: linear-gradient(100deg, rgb(var(--primary-ink-rgb)) 10%, color-mix(in srgb, rgb(var(--primary-ink-rgb)) 60%, #4F46E5) 90%);
    }
}

.hero { isolation: isolate; }
/* A slow, soft aurora in the service colours… */
.hero::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: calc(-1 * var(--nav-bar) - 40px) -12% -8%;
    pointer-events: none;
    background:
        radial-gradient(34% 40% at 28% 26%, rgb(var(--primary-rgb) / .2), transparent 70%),
        radial-gradient(30% 38% at 74% 16%, rgb(99 102 241 / .16), transparent 70%),
        radial-gradient(26% 34% at 56% 58%, rgb(var(--primary-rgb) / .09), transparent 70%);
    animation: aurora 22s ease-in-out infinite alternate;
    will-change: transform;
}
/* …over a fine dot grid that fades out towards the edges. */
.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--nav-bar)) -6% 0;
    pointer-events: none;
    background-image: radial-gradient(rgb(var(--color-text-main-rgb) / .1) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 25%, transparent 75%);
}
@keyframes aurora {
    0%   { transform: translate3d(-3%, -1%, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(2%, 3%, 0) scale(1.08) rotate(2deg); }
    100% { transform: translate3d(4%, -2%, 0) scale(1.03) rotate(-2deg); }
}
:root[data-theme="light"] .hero::before {
    background:
        radial-gradient(34% 40% at 28% 26%, rgb(var(--primary-rgb) / .12), transparent 70%),
        radial-gradient(30% 38% at 74% 16%, rgb(99 102 241 / .09), transparent 70%),
        radial-gradient(26% 34% at 56% 58%, rgb(var(--primary-rgb) / .06), transparent 70%);
}
:root[data-theme="light"] .hero::after { background-image: radial-gradient(rgb(14 17 22 / .09) 1px, transparent 1.3px); }

/* A "what's new" pill above a hero headline. */
.hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 5px;
    padding-inline: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: var(--color-surface);
    font-size: 13px;
    color: var(--color-text-muted);
    overflow: hidden;
    transition: border-color .2s ease, color .2s ease;
}
.hero-badge:hover { color: var(--color-text-main); border-color: rgb(var(--primary-rgb) / .45); }
.hero-badge .hb-tag {
    padding: 1px 8px;
    border-radius: 99px;
    background: rgb(var(--primary-rgb));
    color: var(--color-text-on-primary);
    font-size: 11.5px;
    font-weight: 700;
}
.hero-badge svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
[dir="rtl"] .hero-badge svg { transform: scaleX(-1); }
.hero-badge:hover svg { transform: translateX(2px); }
[dir="rtl"] .hero-badge:hover svg { transform: scaleX(-1) translateX(2px); }
.hero-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .12) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: badge-sheen 5s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes badge-sheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── App pages: a faint wash of the service colour under the header ──── */
.dimo-canvas::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 520px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 100% at 50% 0%, rgb(var(--primary-rgb) / .075), transparent 70%);
}
:root[data-theme="light"] .dimo-canvas::after {
    background: radial-gradient(55% 100% at 50% 0%, rgb(var(--primary-rgb) / .06), transparent 70%);
}

/* ── Buttons: a light sweep across the primary action ─────────────────── */
.btn-primary { overflow: hidden; isolation: isolate; }
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .7s var(--ease);
    pointer-events: none;
}
[dir="rtl"] .btn-primary::before { transform: translateX(110%); }
.btn-primary:hover::before { transform: translateX(110%); }
[dir="rtl"] .btn-primary:hover::before { transform: translateX(-110%); }

/* ── FAQ: open and close smoothly where the browser can ───────────────── */
@supports (interpolate-size: allow-keywords) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content {
        height: 0;
        overflow: clip;
        transition: height .35s var(--ease), content-visibility .35s allow-discrete;
    }
    .faq-item[open]::details-content { height: auto; }
}
.faq-item[open] p { animation: faq-in .4s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero-badge::after { animation: none !important; }
    html.motion-ready [data-stagger]:not(.is-in) > * { opacity: 1; }
    #nav-progress { display: none; }
}