/* =====================================================================================================================
   owns.ai  -  THE SHELL STYLESHEET

   Tokens, base, and every shared component. Two stylesheets build on this one and only this one:

       marketing.css   the home page funnel, pricing, about, support, legal, preview
       dashboard.css   the member area: dashboard, assistant editor, billing, invoices, profile, admin

   Dark is the default theme; [data-theme="light"] on <html> switches every token. Nothing outside :root should name
   a raw colour - use the tokens, so both themes stay right by construction.

   COMPONENT INDEX (the class names every page uses)
       layout      .container .container-narrow .section .grid .grid-2 .grid-3 .grid-4 .stack .row .row-between .wrap
       type        .eyebrow .display .lead .muted .small .gradient-text .mono .center
       buttons     .btn .btn-primary .btn-ghost .btn-outline .btn-danger .btn-success .btn-sm .btn-lg .btn-xl .btn-block .btn-icon .is-loading
       forms       .field .label .input .select .textarea .help .error-text .switch .input-group .check
       surfaces    .card .card-pad .card-glow .card-header .card-title .divider
       status      .badge(-success|-warning|-danger|-info|-brand|-muted) .dot-live .alert(-info|-warning|-danger|-success)
       data        .table .table-wrap .kpi .meter .progress .chip .chips .kbd .avatar .empty-state .skeleton
       navigation  .tabs .tab .is-active .site-nav .mobile-menu .site-footer .breadcrumb
       overlays    .modal-backdrop .modal .modal-header .modal-body .modal-footer .toasts .toast .tooltip
       auth        .auth-wrap .auth-card .auth-aside
       motion      .reveal (+ .is-visible, set by core.js) .pulse
       code        .copy-box (pre + .copy-btn)

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

:root,
[data-theme="dark"] {
    /* the palette: aqua -> ocean -> deep blue on cool slate, both themes */
    --bg: #0B1220;
    --bg-2: #0F172A;
    --surface: #111A2C;
    --surface-2: #16213A;
    --surface-3: #1E2A44;
    --glass: rgba(15, 23, 42, 0.72);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --line-accent: rgba(0, 212, 170, 0.24);
    --text: #F1F5F9;
    --text-2: #CBD5E1;
    --muted: #94A3B8;
    --faint: #64748B;

    --brand: #38BDF8;
    --brand-2: #2EE6C0;
    --brand-3: #60A5FA;
    --brand-ink: #FFFFFF;
    --eyebrow-ink: #5EEAD4;
    --cyan: #22D3EE;
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --info: #60A5FA;

    --grad: linear-gradient(135deg, #00D4AA 0%, #009BDB 50%, #0063D2 100%);
    --grad-soft: linear-gradient(135deg, rgba(0, 212, 170, 0.14), rgba(0, 155, 219, 0.12) 50%, rgba(0, 99, 210, 0.16));
    --grad-text: linear-gradient(100deg, #2EE6C0 0%, #38B6F0 45%, #60A5FA 100%);
    --glow: 0 0 0 1px rgba(0, 155, 219, 0.35), 0 10px 40px -10px rgba(0, 155, 219, 0.55);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.65);
    --card-rim: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --input-bg: rgba(255, 255, 255, 0.04);
    --fl-focus: #5EEAD4;                    /* a floated label while its field is focused */
    --input-solid: #0F1A2E;                 /* the opaque fill behind a focused field's gradient border */
    --field-glow: 0 0 0 4px rgba(0, 155, 219, .14), 0 0 26px -4px rgba(0, 155, 219, .5), 0 0 70px -20px rgba(0, 212, 170, .5);
    --code-bg: #0A1120;
    --overlay: rgba(2, 6, 16, 0.72);

    --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --r-sm: 8px;
    --r: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --nav-h: 68px;
    --hive-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83.14' viewBox='0 0 48 83.14'%3E%3Cg fill='none' stroke='%23009BDB' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M24 2.5 44.6 14.4v23.8L24 50.1 3.4 38.2V14.4z'/%3E%3Cpath d='M0 44.07 20.6 55.96v23.8L0 91.66M48 44.07 27.4 55.96v23.8L48 91.66M0-39.07 20.6-27.17v23.8L0 8.53M48-39.07 27.4-27.17v23.8L48 8.53'/%3E%3C/g%3E%3C/svg%3E");   /* one honeycomb tile, for textures */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #F4FBFD;
    --bg-2: #EAF5FA;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #EEF3F8;
    --glass: rgba(255, 255, 255, 0.72);
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);
    --line-accent: rgba(0, 99, 210, 0.16);
    --text: #0F172A;
    --text-2: #334155;
    --muted: #64748B;
    --faint: #94A3B8;

    --brand: #0063D2;
    --brand-2: #009BDB;
    --brand-3: #00B894;
    --eyebrow-ink: #0063D2;
    --success: #059669;
    --warning: #B45309;
    --danger: #DC2626;
    --info: #0063D2;
    --grad-text: linear-gradient(100deg, #00B894 0%, #009BDB 45%, #0063D2 100%);
    --grad-soft: linear-gradient(135deg, rgba(0, 212, 170, 0.12), rgba(0, 155, 219, 0.10) 50%, rgba(0, 99, 210, 0.12));
    --glow: 0 0 0 1px rgba(0, 99, 210, 0.22), 0 12px 36px -8px rgba(0, 99, 210, 0.3);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 8px 32px -8px rgba(0, 99, 210, 0.14);
    --shadow-lg: 0 20px 60px -15px rgba(0, 99, 210, 0.22);
    --card-rim: 0 0 0 0 transparent;

    --input-bg: #FFFFFF;
    --fl-focus: #0063D2;
    --input-solid: #FFFFFF;
    --field-glow: 0 0 0 4px rgba(0, 99, 210, .12), 0 0 22px -4px rgba(0, 99, 210, .3), 0 0 60px -20px rgba(0, 155, 219, .3);
    --code-bg: #0F172A;
    --overlay: rgba(15, 23, 42, 0.45);

    color-scheme: light;
}


/* ---- BASE ---------------------------------------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}
[data-theme="light"] body { background: var(--bg) linear-gradient(180deg, #F0FDFA 0%, #F0F9FF 50%, #EFF6FF 100%) fixed; }

[hidden] { display: none !important; }

img, svg, video { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand-2); }

/* Plus Jakarta Sans sets a narrow word space; with negative tracking on top, words run together at display sizes.
   The word-spacing gives the gap back without loosening the letters. */
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); line-height: 1.15; letter-spacing: -0.02em; word-spacing: 0.06em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
hr, .divider { border: 0; height: 1px; background: var(--border); margin: 24px 0; }
code, .mono, kbd, pre { font-family: var(--font-mono); font-size: .9em; }
::selection { background: rgba(0, 155, 219, 0.35); color: var(--text); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* The ambient light behind every page: three slow, blurred orbs. Purely decorative. */
.bg-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-aurora span { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .34; animation: aurora 26s var(--ease) infinite alternate; }
.bg-aurora span:nth-child(1) { width: 640px; height: 640px; background: linear-gradient(135deg, #00D4AA, #0063D2); top: -260px; left: -180px; }
.bg-aurora span:nth-child(2) { width: 520px; height: 520px; background: linear-gradient(135deg, #60A5FA, #00D4AA); top: 10%; right: -220px; opacity: .24; animation-delay: -8s; }
.bg-aurora span:nth-child(3) { width: 560px; height: 560px; background: linear-gradient(135deg, #009BDB, #00D4AA); bottom: -320px; left: 30%; opacity: .16; animation-delay: -16s; }
[data-theme="light"] .bg-aurora span { opacity: .3; }
[data-theme="light"] .bg-aurora span:nth-child(3) { opacity: .16; }
/* On a phone or small tablet held upright the orbs are wider than the screen, so between them they tint all of it and the
   light theme reads as pale blue rather than white. There they drop to a whisper, keeping the text crisp on near-white. */
@media (orientation: portrait) and (max-width: 820px) {
    [data-theme="light"] .bg-aurora span { opacity: .035; }
    [data-theme="light"] .bg-aurora span:nth-child(3) { opacity: .02; }
}
.page-dashboard .bg-aurora, .page-assistant .bg-aurora, .page-billing .bg-aurora, .page-invoices .bg-aurora,
.page-invoice .bg-aurora, .page-profile .bg-aurora, .page-new .bg-aurora, .page-admin .bg-aurora { opacity: .45; }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(60px, 40px, 0) scale(1.12); } }


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

/* overflow-x: clip, on the page and the footer rather than on body: a phone ignores body's overflow-x when it sizes the
   page, so a decorative glow or anything else poking past the right edge used to widen the whole page and leave a gap
   down the right side. clip (unlike hidden) is not a scroll container, so every position: sticky inside keeps working. */
#app { min-height: calc(100vh - var(--nav-h)); padding-top: var(--nav-h); overflow-x: clip; }
.site-footer { overflow-x: clip; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 56px 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; }

@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .section { padding: 64px 0; } .container, .container-narrow, .container-wide { padding: 0 16px; } }


/* ---- TYPE HELPERS -------------------------------------------------------------------------------------------------- */

/* EYEBROW: a tinted glass pill. A leading icon (or .dot-live) sits in its own gradient bubble; a plain-text eyebrow just
   gets even padding. Never white on white: the fill is the accent tinted into the surface, so it holds on cards too. */
.eyebrow { position: relative; display: inline-flex; align-items: center; gap: 9px; width: max-content; max-width: 100%; margin-bottom: 16px;
           padding: 7px 16px; border-radius: 2px; overflow: hidden; isolation: isolate;
           font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: var(--eyebrow-ink);
           background: linear-gradient(135deg, rgba(0, 212, 170, .12), rgba(0, 155, 219, .10) 50%, rgba(0, 99, 210, .14)), var(--glass);
           border: 1px solid var(--line-accent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
           box-shadow: 0 6px 24px -10px rgba(0, 155, 219, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.eyebrow:has(> i:first-child, > .dot-live:first-child) { padding-left: 5px; }
.eyebrow > i:first-child { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; letter-spacing: 0;
                           color: #fff; background: var(--grad); box-shadow: 0 4px 12px -3px rgba(0, 155, 219, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.eyebrow > .dot-live:first-child { margin: 0 4px 0 7px; }
/* a slow sheen crosses the pill every few seconds */
.eyebrow::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
                  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); animation: eyebrow-sheen 7s ease-in-out infinite 1.5s; }
@keyframes eyebrow-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
[data-theme="light"] .eyebrow { background: linear-gradient(135deg, rgba(0, 212, 170, .10), rgba(0, 155, 219, .08) 50%, rgba(0, 99, 210, .10)), rgba(255, 255, 255, .85);
                                box-shadow: 0 4px 18px -6px rgba(0, 99, 210, .22), inset 0 1px 0 #fff; }
[data-theme="light"] .eyebrow::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%); }
.display { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -0.032em; word-spacing: 0.08em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); line-height: 1.65; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strike { text-decoration: line-through; color: var(--faint); }


/* ---- BUTTONS ------------------------------------------------------------------------------------------------------- */

.btn {
    --btn-bg: var(--surface-2);
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 42px; padding: 10px 18px; border-radius: var(--r);
    border: 1px solid var(--border); background: var(--btn-bg); color: var(--text);
    font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -0.01em; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; user-select: none;
    transition: transform .45s var(--ease), box-shadow .5s var(--ease), background-color .4s ease, border-color .4s ease, color .4s ease, opacity .2s;
}
.btn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.btn i { font-size: 1em; }

/* PRIMARY: the brand gradient. On hover the gradient drifts, the glow deepens and a gloss flash sweeps across
   (::before; ::after is the loading spinner). Every change runs on a transition, so it eases in and out alike: on the
   way out the gloss fades where it is, then resets unseen. */
.btn-primary { background: var(--grad); background-size: 180% 180%; background-position: 0% 50%; color: #fff; border-color: transparent; overflow: hidden; isolation: isolate;
               box-shadow: 0 10px 30px -12px rgba(0, 155, 219, .65);
               transition: transform .45s var(--ease), box-shadow .5s var(--ease), background-position .7s var(--ease), opacity .2s; }
.btn-primary::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; z-index: -1; pointer-events: none; opacity: 0;
                       background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .12) 62%, transparent 85%);
                       transform: translateX(-190%) skewX(-20deg); transition: opacity .35s ease, transform 0s linear .35s; }
.btn-primary:hover { color: #fff; background-position: 100% 50%; box-shadow: 0 16px 40px -14px rgba(0, 212, 170, .8), 0 0 28px -8px rgba(0, 155, 219, .6); }
.btn-primary:hover::before { opacity: 1; transform: translateX(290%) skewX(-20deg); transition: opacity .2s ease, transform 1s cubic-bezier(.3, .7, .2, 1); }
.btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* SECONDARY: quiet glass with a hairline border. On hover the fill takes a violet tint, the border warms and a soft
   glow rises - colours and shadows only, so it eases in and out. */
.btn-ghost, .btn-outline {
    background-color: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); color: var(--text); box-shadow: 0 0 0 0 rgba(0, 155, 219, 0);
    transition: transform .45s var(--ease), box-shadow .5s var(--ease), background-color .4s ease, border-color .4s ease, color .4s ease;
}
.btn-ghost:hover, .btn-outline:hover { background-color: rgba(0, 155, 219, .12); border-color: rgba(0, 155, 219, .55); box-shadow: 0 10px 30px -14px rgba(0, 155, 219, .75); }
.btn-ghost i, .btn-outline i { transition: color .4s ease; }
.btn-ghost:hover i, .btn-outline:hover i { color: var(--brand); }
[data-theme="light"] .btn-ghost, [data-theme="light"] .btn-outline { background-color: #fff; }
[data-theme="light"] .btn-ghost:hover, [data-theme="light"] .btn-outline:hover { background-color: color-mix(in srgb, var(--brand) 7%, #fff); }
.btn-danger { background: rgba(244, 63, 94, .12); color: var(--danger); border-color: rgba(244, 63, 94, .3); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success { background: rgba(34, 197, 94, .14); color: var(--success); border-color: rgba(34, 197, 94, .3); }
.btn-white { background: #fff; color: #0F172A; border-color: #fff; }
.btn-white:hover { color: #0F172A; box-shadow: 0 14px 40px -12px rgba(255, 255, 255, .5); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: .85rem; border-radius: 3px; }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1.05rem; border-radius: 3px; }
.btn-xl { min-height: 62px; padding: 18px 34px; font-size: 1.15rem; border-radius: 4px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; min-width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; min-width: 34px; }

.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 currentColor;
                          border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) transparent transparent; animation: spin .7s linear infinite; }
.btn-ghost.is-loading::after, .btn-outline.is-loading::after { border-color: var(--text) var(--text) transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-btn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; font-weight: 600; }
.link-btn:hover { color: var(--brand-2); }


/* ---- FORMS --------------------------------------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.label, .field > label { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.label .opt { color: var(--faint); font-weight: 500; }
/* Every field carries a faint violet halo at rest, warms on hover, and on focus gets a gradient border (an opaque
   fill clipped to the padding box over the gradient clipped to the border box) inside a soft, layered glow. */
.input, .select, .textarea {
    width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r);
    background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong);
    font: inherit; font-size: .95rem; transition: border-color .25s, box-shadow .35s var(--ease), background-color .25s; appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 0 0 0 rgba(0, 155, 219, 0), 0 8px 26px -18px rgba(0, 155, 219, .55);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(0, 155, 219, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 0 0 3px rgba(0, 155, 219, .07), 0 0 22px -8px rgba(0, 155, 219, .45); }
.input:focus, .textarea:focus {
    outline: none; border-color: transparent; box-shadow: var(--field-glow);
    background-image: linear-gradient(var(--input-solid), var(--input-solid)), var(--grad);
    background-origin: border-box; background-clip: padding-box, border-box;
}
.select:focus {
    outline: none; border-color: transparent; box-shadow: var(--field-glow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A99CFF' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"),
                      linear-gradient(var(--input-solid), var(--input-solid)), var(--grad);
    background-origin: padding-box, border-box, border-box; background-clip: padding-box, padding-box, border-box;
    background-repeat: no-repeat; background-position: right 14px center, 0 0, 0 0; background-size: auto, 100% 100%, 100% 100%;
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: .6; cursor: not-allowed; }
.input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 40px var(--input-solid); caret-color: var(--text); }
.input:-webkit-autofill:focus { box-shadow: inset 0 0 0 40px var(--input-solid), var(--field-glow); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239B98BE' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
          background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.select option { background: var(--surface); color: var(--text); }
.input-lg { min-height: 56px; font-size: 1.05rem; padding: 14px 18px; border-radius: 3px; }
.help { font-size: .82rem; color: var(--muted); }
.error-text { font-size: .85rem; color: var(--danger); }
.input.is-invalid, .input.is-invalid:focus { border-color: var(--danger); background-image: none; background-color: var(--input-bg); box-shadow: 0 0 0 4px rgba(244, 63, 94, .12), 0 0 24px -6px rgba(244, 63, 94, .5); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r) 0 0 var(--r); }
.input-group .btn { border-radius: 0 var(--r) var(--r) 0; }
.input-color { width: 52px; min-width: 52px; height: 44px; padding: 4px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--input-bg); cursor: pointer; }
.field-link { align-self: flex-end; font-size: .82rem; font-weight: 600; margin-top: -2px; }

/* IN-FIELD LABELS. A .field whose label sits right before its control (.input, .textarea, .select, or a .pw-wrap /
   .tm-pw around an .input) keeps the label inside the field: resting in the middle while the field is empty, and
   gliding up to a small caption in its top edge on focus or once there is a value (tinted while focused). The control
   is padded for the caption from the start, so the text never jumps. The placeholder stays hidden until the field is
   focused. "Has a value" is :not(:placeholder-shown) - core.js gives every such control a placeholder - and a select
   always has one, so its label is always up. Browsers without :has() keep the plain label above the field. */
@supports selector(:has(*)) {
    .field:has(> label + :is(.input, .textarea, .select, .pw-wrap, .tm-pw)) { position: relative; }
    .field > label + :is(.input, .select), .field > label + :is(.pw-wrap, .tm-pw) > .input { min-height: 54px; padding-top: 22px; padding-bottom: 6px; }
    .field > label + .input-lg, .field > label + :is(.pw-wrap, .tm-pw) > .input-lg { min-height: 60px; padding-top: 25px; padding-bottom: 7px; }
    .field > label + .textarea { padding-top: 26px; }

    .field > label:has(+ :is(.input, .textarea, .select, .pw-wrap, .tm-pw)) {
        position: absolute; z-index: 2; left: 15px; top: 27px; transform: translateY(-50%); max-width: calc(100% - 30px); pointer-events: none;
        color: var(--muted); font-size: .95rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        transition: top .32s var(--ease), font-size .32s var(--ease), color .3s ease, letter-spacing .32s var(--ease);
    }
    .field > label:has(+ .input-lg), .field > label:has(+ :is(.pw-wrap, .tm-pw) > .input-lg) { top: 30px; left: 19px; font-size: 1rem; }
    .field > label:has(+ .textarea) { top: 38px; }
    .field > label .opt { font-weight: 400; opacity: .8; }

    /* up in the top edge */
    .field > label:has(+ :is(.input, .textarea):is(:focus, :not(:placeholder-shown))),
    .field > label:has(+ :is(.pw-wrap, .tm-pw) > .input:is(:focus, :not(:placeholder-shown))),
    .field > label:has(+ .select) {
        top: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
    }
    .field > label:has(+ .input-lg:is(:focus, :not(:placeholder-shown))),
    .field > label:has(+ :is(.pw-wrap, .tm-pw) > .input-lg:is(:focus, :not(:placeholder-shown))) { top: 16px; font-size: .74rem; }
    .field > label:has(+ .textarea:is(:focus, :not(:placeholder-shown))) { top: 14px; }
    .field > label:has(+ .input:-webkit-autofill), .field > label:has(+ :is(.pw-wrap, .tm-pw) > .input:-webkit-autofill) {
        top: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    }

    /* focused: the caption takes the brand tint */
    .field > label:has(+ :is(.input, .textarea, .select):focus),
    .field > label:has(+ :is(.pw-wrap, .tm-pw) > .input:focus) { color: var(--fl-focus); }
    .field > label:has(+ .input.is-invalid) { color: var(--danger); }
    .field > label:has(+ .input:disabled) { opacity: .6; }

    /* the placeholder shows only once the label has moved out of its way */
    .field > label + :is(.input, .textarea)::placeholder,
    .field > label + :is(.pw-wrap, .tm-pw) > .input::placeholder { color: transparent; transition: color .2s .1s; }
    .field > label + :is(.input, .textarea):focus::placeholder,
    .field > label + :is(.pw-wrap, .tm-pw) > .input:focus::placeholder { color: var(--faint); }
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; color: var(--text-2); }
.check input { margin-top: 4px; accent-color: var(--brand); width: 16px; height: 16px; }

/* A toggle: <label class="switch"><input type="checkbox"><span></span> Label</label> */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .92rem; color: var(--text-2); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch > span { position: relative; width: 42px; min-width: 42px; height: 24px; border-radius: 2px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .25s; }
.switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease); }
.switch input:checked + span { background: var(--brand); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px rgba(0, 155, 219, .25); }

/* Segmented choice: <div class="segmented"><button class="is-active">Monthly</button>...</div> */
.segmented { display: inline-flex; padding: 4px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border); gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--muted); padding: 8px 18px; border-radius: 2px; font: 600 .9rem var(--font-display); cursor: pointer; transition: all .2s; }
.segmented button.is-active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); }


/* ---- SURFACES ------------------------------------------------------------------------------------------------------ */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), var(--card-rim); position: relative; }
.card-pad { padding: 24px; }
.card-pad-lg { padding: 32px; }
.card-glass { background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.card-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad);
                     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .75; }
.card-hover { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.card-title i { color: var(--brand); }


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

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 2px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
         background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.badge-success { background: rgba(34, 197, 94, .12); color: var(--success); border-color: rgba(34, 197, 94, .25); }
.badge-warning { background: rgba(245, 158, 11, .12); color: var(--warning); border-color: rgba(245, 158, 11, .25); }
.badge-danger { background: rgba(244, 63, 94, .12); color: var(--danger); border-color: rgba(244, 63, 94, .25); }
.badge-info { background: rgba(56, 189, 248, .12); color: var(--info); border-color: rgba(56, 189, 248, .25); }
.badge-brand { background: rgba(0, 155, 219, .14); color: var(--brand); border-color: rgba(0, 155, 219, .3); }
.badge-grad { background: var(--grad); color: #fff; border-color: transparent; }

/* A contact detail the plan doesn't show (shared/js/core.js OA.locked): made-up text, blurred and not selectable. */
.oa-locked { filter: blur(5px); user-select: none; -webkit-user-select: none; cursor: not-allowed; display: inline-block; }
.oa-locked-line { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.oa-locked-line::after { content: "\f023"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: .85em; color: var(--muted); }

.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pulse-dot 2s infinite; display: inline-block; flex: none; }
.dot-live.is-warning { background: var(--warning); box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); }
.dot-live.is-off { background: var(--faint); animation: none; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); font-size: .92rem; color: var(--text-2); }
.alert i { margin-top: 3px; }
.alert-info { background: rgba(56, 189, 248, .08); border-color: rgba(56, 189, 248, .25); } .alert-info i { color: var(--info); }
.alert-warning { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .28); } .alert-warning i { color: var(--warning); }
.alert-danger { background: rgba(244, 63, 94, .08); border-color: rgba(244, 63, 94, .28); } .alert-danger i { color: var(--danger); }
.alert-success { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .28); } .alert-success i { color: var(--success); }
.alert-brand { background: var(--grad-soft); border-color: rgba(0, 155, 219, .3); } .alert-brand i { color: var(--brand); }


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

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.kpi { padding: 20px 22px; }
.kpi-label { font-size: .8rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: var(--faint); margin-top: 4px; }
.kpi-icon { width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); }

.meter { height: 8px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .8s var(--ease); }
.meter.is-warning > span { background: linear-gradient(90deg, #F59E0B, #F97316); }
.meter.is-danger > span { background: linear-gradient(90deg, #F43F5E, #E11D48); }

.progress { position: relative; height: 10px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--grad); background-size: 200% 100%; animation: shimmer-bar 2s linear infinite; transition: width .6s var(--ease); }
@keyframes shimmer-bar { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
        font-size: .86rem; font-weight: 500; cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--brand); color: var(--text); }
.chip.is-active { background: var(--grad-soft); border-color: rgba(0, 155, 219, .5); color: var(--text); }
.kbd { display: inline-block; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: .78rem; }

.avatar { width: 40px; height: 40px; border-radius: 3px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--grad); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 56px; height: 56px; border-radius: 4px; font-size: 1.5rem; }

.empty-state { text-align: center; padding: 56px 24px; color: var(--muted); }
.empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 4px; display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); font-size: 1.6rem; }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r); min-height: 16px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); animation: skeleton 1.4s infinite; }
@keyframes skeleton { 100% { transform: translateX(100%); } }


/* ---- TABS AND BREADCRUMBS ------------------------------------------------------------------------------------------ */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: .92rem;
       border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--brand); }
.tab .badge { padding: 1px 7px; font-size: .7rem; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--faint); margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }


/* ---- NAVIGATION ---------------------------------------------------------------------------------------------------- */

.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h); display: flex; align-items: center;
            transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.site-nav.is-scrolled, .signed-in .site-nav { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; gap: 28px; width: 100%; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.04em; color: var(--text); }
.nav-logo:hover { color: var(--text); }
/* The wordmark is an image, one per theme: ownsai_logo_dark.png (white "ai") on the dark theme, ownsai_logo_light.png
   on the light one. Both are in the page; the theme on <html> (set before first paint) shows the right one. */
.nav-logo .logo-img { display: block; height: 26px; width: auto; max-width: none; }
.nav-logo .logo-for-light, [data-theme="light"] .nav-logo .logo-for-dark { display: none; }
[data-theme="light"] .nav-logo .logo-for-light { display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: var(--text-2); font-weight: 500; font-size: .94rem; padding: 8px 12px; border-radius: 3px; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--text); background: var(--surface-2); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-user { position: relative; }
.nav-user-btn { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 2px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600; font-size: .9rem; }
.nav-user-btn .avatar { width: 30px; height: 30px; border-radius: 50%; font-size: .85rem; }
.nav-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
                box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all .2s var(--ease); }
.nav-user.is-open .nav-dropdown { opacity: 1; transform: none; pointer-events: auto; }
.nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 3px; color: var(--text-2); font-size: .92rem;
                                        background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--surface-2); color: var(--text); }
.nav-dropdown i { width: 18px; text-align: center; color: var(--muted); }
.nav-dropdown .dd-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nav-dropdown .dd-head strong { display: block; color: var(--text); }
.nav-dropdown .dd-head span { font-size: .8rem; color: var(--muted); }
.theme-toggle { width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-accent); }
.theme-toggle i.is-spinning { animation: theme-spin .5s cubic-bezier(.4, 0, .2, 1); }
@keyframes theme-spin { from { opacity: 0; transform: rotate(-90deg) scale(.5); } to { opacity: 1; transform: none; } }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; place-items: center; }

.signed-in .show-signed-out, .signed-out .show-signed-in { display: none !important; }

.mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 899; background: var(--bg); padding: 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .25s var(--ease); overflow-y: auto; }
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 8px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; border-bottom: 1px solid var(--border); }
.mobile-menu a i { color: var(--brand); width: 22px; }
.mobile-menu .btn { margin-top: 18px; }
/* the menu's link style (dark text, brand-coloured icons, a rule under each) must not reach its buttons */
.mobile-menu a.btn { justify-content: center; border-bottom: 0; padding: 14px 18px; }
.mobile-menu a.btn i { width: auto; }
.mobile-menu a.btn-primary, .mobile-menu a.btn-primary i { color: #fff; }

@media (max-width: 900px) {
    .nav-links, .nav-cta .hide-mobile { display: none; }
    .nav-burger { display: grid; }
}

/* The top bar's call to action reads "Build my AI free", or just "Start" on a phone held upright, where the long one
   would push the bar wider than the screen. */
.nav-cta-short { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
    .nav-cta-long { display: none; }
    .nav-cta-short { display: inline; }
}


/* ---- FOOTER -------------------------------------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--border); padding: 64px 0 36px; margin-top: 40px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-2) 70%, transparent)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-grid h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.footer-grid a { display: block; color: var(--text-2); padding: 5px 0; font-size: .94rem; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px; font-size: .85rem; color: var(--faint); }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-grid a.nav-logo { display: inline-flex; padding: 0; }
.footer-socials a { width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); padding: 0; color: var(--muted); transition: color .2s, border-color .2s, transform .2s; }
.footer-socials a:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); }
.member-area .site-footer { display: none; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }


/* ---- MODALS -------------------------------------------------------------------------------------------------------- */

.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                  display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s var(--ease); }
.modal-backdrop.is-open { opacity: 1; }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl);
         box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); }
.modal-backdrop.is-open .modal { transform: none; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 980px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px 6px; }
.modal-header h3 { margin: 0; font-size: 1.25rem; }
.modal-close { width: 36px; height: 36px; border-radius: 3px; border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 1rem; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 14px 26px 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--border); }
body.modal-open { overflow: hidden; }


/* ---- TOASTS -------------------------------------------------------------------------------------------------------- */

.toasts { position: fixed; z-index: 1100; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 40px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 420px; padding: 14px 16px; border-radius: 3px;
         background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text); font-size: .92rem;
         animation: toast-in .4s var(--ease); }
.toast.is-leaving { animation: toast-out .3s var(--ease) forwards; }
.toast i { font-size: 1.05rem; }
.toast-success i { color: var(--success); } .toast-error i { color: var(--danger); } .toast-info i { color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }


/* ---- COPY BOX ------------------------------------------------------------------------------------------------------ */

.copy-box { position: relative; background: var(--code-bg); border: 1px solid var(--border-strong); border-radius: var(--r); }
.copy-box pre { margin: 0; padding: 18px 120px 18px 18px; color: #E2F3FF; font-size: .86rem; white-space: pre-wrap; word-break: break-all; line-height: 1.6; }
.copy-box .copy-btn { position: absolute; top: 10px; right: 10px; }
.code-tag { color: #93C5FD; } .code-attr { color: #7DD3FC; } .code-str { color: #7EE7C0; }


/* ---- AUTH PAGES ---------------------------------------------------------------------------------------------------- */

.auth-wrap { min-height: calc(100vh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 2rem; margin-bottom: 8px; }
.auth-card .lead { font-size: 1rem; margin-bottom: 28px; }
.auth-aside { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; border-left: 1px solid var(--border);
              background: radial-gradient(800px 500px at 20% 10%, rgba(0, 155, 219, .25), transparent 60%), radial-gradient(600px 400px at 90% 90%, rgba(0, 99, 210, .18), transparent 60%), var(--bg-2); }
.auth-aside-inner { max-width: 440px; }
.auth-foot { margin-top: 22px; text-align: center; font-size: .92rem; color: var(--muted); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: .8rem; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-error { display: none; margin-bottom: 14px; }
.form-error.is-shown { display: flex; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } }


/* ---- MOTION -------------------------------------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}


/* ---- RENDERED ANSWERS (markdown from OA.md) ------------------------------------------------------------------------ */

.md p { margin: 0 0 .6em; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: .3em 0 .7em; padding-left: 1.25em; }
.md li { margin: .2em 0; }
.md a { text-decoration: underline; text-underline-offset: 2px; }
.md strong { color: var(--text); }


/* ---- PRINT --------------------------------------------------------------------------------------------------------- */

@media print {
    .site-nav, .site-footer, .bg-aurora, .no-print, .toasts, .mobile-menu { display: none !important; }
    body { background: #fff; color: #000; }
    #app { padding-top: 0; }
}


/* ---- THE MEMBER AREA SHELL -----------------------------------------------------------------------------------------
   <div class="app-shell">{{section.app-sidebar}}<div class="app-main"> ...page... </div></div>
   Used by every member page (dashboard.css and account.css style what goes inside .app-main). */

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - var(--nav-h)); }
.app-side { position: sticky; top: var(--nav-h); align-self: start; height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: space-between;
            gap: 16px; padding: 22px 14px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--bg-2) 60%, transparent); overflow-y: auto; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 14px 12px 6px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px; color: var(--text-2); font-weight: 500; font-size: .93rem; transition: background .15s, color .15s; }
.side-nav a i { width: 18px; text-align: center; color: var(--muted); transition: color .15s; }
.side-nav a:hover { background: var(--surface-2); color: var(--text); }
.side-nav a.is-active { background: var(--grad-soft); color: var(--text); box-shadow: inset 0 0 0 1px rgba(0, 155, 219, .25); }
.side-nav a.is-active i { color: var(--brand); }
.side-plan { padding: 16px; }
.app-main { padding: 32px 36px 64px; min-width: 0; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.app-head h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }
.app-head p { margin: 6px 0 0; color: var(--muted); }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-side { position: static; height: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; overflow-x: auto; }
    .side-nav { flex-direction: row; }
    .side-label, .side-plan { display: none; }
    .side-nav a { white-space: nowrap; }
    .app-main { padding: 22px 16px 48px; }
}



/* ---- PAGE ARRIVAL ----------------------------------------------------------------------------------------------------
   The first paint is held (opacity 0) until core.js adds .oa-ready - fonts loaded or 400 ms, whichever is first. The
   page head adds it anyway after 1.5 s, and a <noscript> rule shows the page without JavaScript, so it can never stay
   hidden. Every page change after that replays .page-enter. Both are the same 0.5 s fade and lift. */

html:not(.oa-ready) #app, html:not(.oa-ready) .site-footer { opacity: 0; }
html.oa-ready #app { animation: page-in .55s var(--ease) both; }
.page-enter { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page-enter .reveal { transition-delay: 0s; }


/* ---- THE ACTIVE NAV LINK: a pill that slides between links ---------------------------------------------------------- */

.nav-links { position: relative; }
.nav-links a { position: relative; z-index: 1; }
.nav-links a.is-active { background: transparent; color: var(--text); }
.nav-pill { position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--surface-2);
            box-shadow: inset 0 0 0 1px var(--border-strong), 0 6px 18px -10px rgba(0, 155, 219, .6); opacity: 0; z-index: 0; pointer-events: none;
            transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; }
.nav-pill::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }


/* ---- STREAMED TEXT: the letters' own styles (.fs-w, .fs-ch) travel with shared/js/fade-stream.js. ---- */
@media (prefers-reduced-motion: reduce) { html:not(.oa-ready) #app { opacity: 1; } }

/* ---- UNDER AN ANSWER: copy + the Sources / Suggestions pills (OA.answerBar, used by the playground and the team assistant) */
.ab { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ab-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ab-row > * { flex: none; }
.ab-row > .tm-gap { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ab-btn { width: 30px; height: 30px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; transition: background .2s, color .2s; }
.ab-btn:hover { background: var(--surface-2); color: var(--text); }
.ab-btn.is-done { color: var(--success); }
.ab-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 2px; border: 1px solid var(--border); background: var(--surface-2);
           color: var(--text-2); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.ab-pill:hover { border-color: var(--border-strong); }
.ab-pill i { font-size: .62rem; }
.ab-pill .fa-minus, .ab-pill[aria-expanded="true"] .fa-plus { display: none; }
.ab-pill[aria-expanded="true"] .fa-minus { display: inline-block; }
.ab-pill[aria-expanded="true"] { color: var(--brand); border-color: rgba(0, 155, 219, .5); background: rgba(0, 155, 219, .08); }
.ab-fold:not([hidden]) { animation: ab-drop .3s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes ab-drop { from { opacity: 0; transform: translateY(-5px); } }
/* what is under an answer that has just finished comes in from the top down (OA.reveal): one row after another, each
   fading in behind a soft edge that sweeps down it - the mask is 2.5x the row's height, opaque at its top, and slides
   up from showing only its clear end to its opaque one. --rv staggers the rows. */
.rv { -webkit-mask-image: linear-gradient(#000 40%, transparent 60%); mask-image: linear-gradient(#000 40%, transparent 60%);
      -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      animation: rv-in .7s cubic-bezier(.25, .7, .25, 1) var(--rv, 0s) both !important; }
.rv-box { animation: none !important; }     /* the rows come in one by one, so their box does not fade in as well */
@keyframes rv-in { from { opacity: 0; transform: translateY(-4px); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
                   to { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rv { animation: none !important; -webkit-mask-image: none; mask-image: none; } }


/* ---- THE EPIC LAYER --------------------------------------------------------------------------------------------------
   The finish that makes the shell feel like an AI product rather than a template: a faint grain over the ambient light,
   a gradient hairline under the scrolled nav, glowing eyebrow chips, gradient headlines that shimmer slowly, a cursor
   spotlight on the cards that have one (core.js sets --sx/--sy), a digital honeycomb texture for feature panels, and
   the scrollbars. Tokens only, so both themes hold; all of it is decorative and stands still with reduced motion. */

/* film grain over the aurora, so the gradients never band */
.bg-aurora::after { content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] .bg-aurora::after { opacity: .035; mix-blend-mode: multiply; }

/* the nav: a gradient hairline once it has a background */
.site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: 0; transition: opacity .3s; pointer-events: none;
                   background: linear-gradient(90deg, transparent, rgba(0, 155, 219, .7) 25%, rgba(0, 212, 170, .7) 50%, rgba(0, 99, 210, .6) 75%, transparent); }
.site-nav.is-scrolled::after, .signed-in .site-nav::after { opacity: .55; }
                          50% { box-shadow: 0 0 0 1px rgba(0, 212, 170, .5), 0 6px 30px -4px rgba(0, 212, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .35); } }

/* gradient headlines drift slowly and glow a little */
.gradient-text { background-size: 220% 100%; animation: grad-drift 9s ease-in-out infinite alternate; }
h1 .gradient-text, h2 .gradient-text, .display .gradient-text { filter: drop-shadow(0 0 28px rgba(0, 212, 170, .28)); }
[data-theme="light"] h1 .gradient-text, [data-theme="light"] h2 .gradient-text { filter: none; }
@keyframes grad-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* cards: a lit top edge, and a spotlight that follows the cursor on the interactive ones */
.card-hover, .mk-bento-item, .mk-pain-card, .plan-card, .mk-ind, .mk-assure > div, .mk-step-visual { --sx: 50%; --sy: -200px; }
.card-hover::after, .mk-bento-item::after, .mk-pain-card::after, .plan-card::after, .mk-ind::after, .mk-assure > div::after, .mk-step-visual::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(340px circle at var(--sx) var(--sy), rgba(0, 155, 219, .14), transparent 60%);
}
.card-hover:hover::after, .mk-bento-item:hover::after, .mk-pain-card:hover::after, .plan-card:hover::after, .mk-ind:hover::after, .mk-assure > div:hover::after, .mk-step-visual:hover::after { opacity: 1; }
.mk-pain-card:hover::after { background: radial-gradient(340px circle at var(--sx) var(--sy), rgba(244, 63, 94, .12), transparent 60%); }
.mk-assure > div, .mk-step-visual { position: relative; }

/* the digital honeycomb as a texture: <div class="hive-tex"> or any panel given the class */
.hive-tex { position: relative; isolation: isolate; }
.hive-tex::before, .auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .55;
                    background-image: var(--hive-svg);
                    background-size: 48px 83.14px;
                    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%); }
.auth-aside { isolation: isolate; }
.auth-aside::before { -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 10%, transparent 80%); }

/* modals and dropdowns: a faint gradient rim */
.modal { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 155, 219, .14), 0 0 80px -30px rgba(0, 155, 219, .55); }
.nav-dropdown { box-shadow: var(--shadow-lg), 0 0 50px -24px rgba(0, 155, 219, .5); }

/* switches and segmented controls glow when on */
.switch input:checked + span { background: var(--grad); box-shadow: 0 0 16px -4px rgba(0, 155, 219, .8); }
.segmented button.is-active { box-shadow: inset 0 0 0 1px rgba(0, 155, 219, .55), 0 4px 16px -8px rgba(0, 155, 219, .8); }

/* focus rings glow */
:focus-visible { outline-color: rgba(56, 189, 248, .9); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { box-shadow: var(--field-glow); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 155, 219, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 3px; border: 3px solid transparent; background: linear-gradient(180deg, rgba(0, 155, 219, .55), rgba(0, 212, 170, .45)) padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--grad) padding-box; }

@media (prefers-reduced-motion: reduce) {
    .gradient-text, .eyebrow::after { animation: none; }
    .btn-primary::before { display: none; }
}

/* ---- GUIDED TO IT (core.js guideTo): a link that lands on an element marked data-spotlight points at it -------------- */
[data-spotlight] { position: relative; }
.spot-tip { position: absolute; left: 14px; bottom: calc(100% + 8px); z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
            border-radius: 2px; background: var(--grad); color: #fff; font: 700 .86rem var(--font-display); white-space: nowrap; pointer-events: none;
            box-shadow: 0 10px 28px -8px rgba(0, 99, 210, .7); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.spot-tip::after { content: ""; position: absolute; left: 22px; top: 100%; border: 7px solid transparent; border-top-color: #0B7FD8; }
.spot-tip i { color: #fff; }
.is-spotlit > .spot-tip { opacity: 1; transform: none; animation: spot-bob .8s ease-in-out .3s infinite alternate; }
@keyframes spot-bob { to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .is-spotlit > .spot-tip { animation: none; } }