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

   Loaded after every other stylesheet (default.aspx), so it has the last word on the whole site: the marketing pages,
   sign-in, the preview and every screen of the member area and admin. The language is precision engineering rather
   than soft software: a carbon-black (or paper-white) ground, a wide, expanded display face set in capitals, hairline
   rules, chamfered corners cut at one angle everywhere, the hexagon as the one recurring shape, and the brand's own
   aqua -> ocean -> deep-blue gradient used as a line of light - on an edge, a rule, an underline - never as a fog.

   What it takes away from the older "epic" layer in app.css: glass pills, blurred colour orbs, drifting and glowing
   gradient text, sheens, film grain and soft glows. What it adds is structure.

       --cut         the chamfer: one 45-degree cut on the top-left and bottom-right corners of buttons, inputs' focus
                     edge, badges and cards' accents. Buttons are clipped to it (clip-path); cards keep their shadows and
                     carry the cut as a corner mark instead
       --hex         the hexagon, for every avatar, icon tile and the eyebrow's mark (clip-path)
       --rule        the gradient as a hairline

   Radii in the other stylesheets were mapped to this sharp scale (2-4px) in the same change; circles stay circles
   only where a circle means something (a live dot, a spinner). The embeddable widget and a business's own workspace
   app are NOT styled here: they wear each business's design.

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

:root,
[data-theme="dark"] {
    --bg: #05070A;
    --bg-2: #080B10;
    --surface: #0C1016;
    --surface-2: #11161E;
    --surface-3: #18202A;
    --glass: rgba(8, 11, 16, .86);
    --border: rgba(255, 255, 255, .075);
    --border-strong: rgba(255, 255, 255, .15);
    --line-accent: rgba(0, 212, 170, .35);
    --text: #F3F5F7;
    --text-2: #C2CAD3;
    --muted: #8893A0;
    --faint: #59636F;
    --eyebrow-ink: #2EE6C0;

    --shadow-sm: 0 1px 0 rgba(0, 0, 0, .6);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
    --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(0, 155, 219, .45);
    --card-rim: inset 0 1px 0 rgba(255, 255, 255, .04);
    --field-glow: 0 0 0 1px #009BDB, 0 10px 30px -18px rgba(0, 155, 219, .9);
    --input-bg: rgba(255, 255, 255, .025);
    --input-solid: #0B0F15;
    --overlay: rgba(0, 0, 0, .78);

    --font-display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --r-sm: 2px;
    --r: 2px;
    --r-lg: 3px;
    --r-xl: 4px;

    --cut: 10px;
    --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    --rule: linear-gradient(90deg, #00D4AA, #009BDB 50%, #0063D2);
    --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    --grid-line: rgba(255, 255, 255, .028);
}

[data-theme="light"] {
    --bg: #F2F3F5;
    --bg-2: #E8EAEE;
    --surface: #FFFFFF;
    --surface-2: #F6F7F9;
    --surface-3: #ECEEF2;
    --glass: rgba(255, 255, 255, .9);
    --border: rgba(10, 13, 18, .09);
    --border-strong: rgba(10, 13, 18, .2);
    --line-accent: rgba(0, 99, 210, .35);
    --text: #0A0D12;
    --text-2: #2A3039;
    --muted: #5C6470;
    --faint: #8C949F;
    --eyebrow-ink: #0063D2;

    --shadow-sm: 0 1px 0 rgba(10, 13, 18, .05);
    --shadow: 0 18px 40px -24px rgba(10, 13, 18, .28);
    --shadow-lg: 0 40px 90px -40px rgba(10, 13, 18, .35);
    --glow: 0 0 0 1px rgba(0, 99, 210, .4);
    --card-rim: 0 0 0 0 transparent;
    --field-glow: 0 0 0 1px #0063D2, 0 10px 28px -18px rgba(0, 99, 210, .7);
    --input-bg: #FFFFFF;
    --input-solid: #FFFFFF;
    --overlay: rgba(10, 13, 18, .55);
    --grid-line: rgba(10, 13, 18, .04);
}


/* ---- GROUND --------------------------------------------------------------------------------------------------------
   No fog. A flat ground with an engineering grid that fades out below the fold, and one hard beam of the brand
   gradient falling across the top of the page. */

body, [data-theme="light"] body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
               background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
               background-size: 72px 72px; background-position: -1px -1px;
               -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); }
.bg-aurora span { border-radius: 0; filter: blur(70px); animation: none; }
.bg-aurora span:nth-child(1) { width: 140vw; height: 160px; top: -40px; left: -20vw; transform: rotate(-8deg); opacity: .22; background: var(--rule); }
.bg-aurora span:nth-child(2) { width: 60vw; height: 2px; top: 0; right: -10vw; left: auto; filter: none; opacity: .5; transform: none; background: linear-gradient(90deg, transparent, #009BDB); }
.bg-aurora span:nth-child(3) { display: none; }
.bg-aurora::after { display: none; }
[data-theme="light"] .bg-aurora span:nth-child(1) { opacity: .12; }
@media (orientation: portrait) and (max-width: 820px) { [data-theme="light"] .bg-aurora span:nth-child(1) { opacity: .06; } }
::selection { background: #009BDB; color: #fff; }


/* ---- TYPE ----------------------------------------------------------------------------------------------------------
   Archivo, expanded (font-stretch 125%) and set in capitals for the headlines; Inter stays for reading. */

h1, h2, .display, .auth-card h1 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.012em; word-spacing: 0; line-height: 1.02; }
h1 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); }
.display { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -0.015em; }
h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; letter-spacing: -0.005em; word-spacing: 0; }
h4, h5 { font-family: var(--font-display); font-stretch: 108%; letter-spacing: 0; word-spacing: 0; }
.lead { color: var(--text-2); }

/* the gradient as ink: still, crisp, no glow */
.gradient-text { animation: none !important; background-size: 100% 100%; filter: none !important; }
h1 .gradient-text, h2 .gradient-text, .display .gradient-text { filter: none; }

/* EYEBROW: no pill - a gradient rule, a hexagon mark when there is an icon, and widely tracked capitals */
.eyebrow { padding: 0; gap: 12px; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
           font-family: var(--font-display); font-stretch: 125%; font-size: .68rem; font-weight: 700; letter-spacing: .24em; color: var(--eyebrow-ink); }
.eyebrow::before { content: ""; width: 34px; height: 2px; flex: none; background: var(--rule); }
.eyebrow::after { display: none; }
.eyebrow:has(> i:first-child, > .dot-live:first-child) { padding-left: 0; }
.eyebrow:has(> i:first-child)::before { width: 18px; }
.eyebrow > i:first-child { width: 24px; height: 24px; border-radius: 0; clip-path: var(--hex); box-shadow: none; background: var(--grad); color: #fff; }
.eyebrow > .dot-live:first-child { margin: 0; }
.center > .eyebrow, .mk-head.center .eyebrow, .eyebrow.center { margin-left: auto; margin-right: auto; }

/* ---- BUTTONS -------------------------------------------------------------------------------------------------------
   Capitals in the expanded face, cut on the chamfer. Primary is the gradient, flat; hover runs a light-bar across it
   and lifts nothing. Secondary is an outline in the text colour that fills on hover. The focus ring is drawn inside
   (an outline would be clipped away with the corners). */

.btn { --cut: 9px; border-radius: 0; clip-path: var(--chamfer); font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: .8rem; letter-spacing: .08em;
       text-transform: uppercase; box-shadow: none; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--text); }
/* No border, and the gradient painted from the border box: with a transparent border the 200%-wide gradient repeated
   into it and showed its far (deep-blue) end as a hairline down the left edge and along the bottom. */
.btn-primary { background: var(--grad); background-size: 200% 100%; background-position: 0 50%; background-origin: border-box; border: 0; box-shadow: none; }
.btn-primary:hover { background-position: 100% 50%; box-shadow: none; }
.btn-primary::before { width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-160%) skewX(-30deg); }
.btn-primary:hover::before { transform: translateX(420%) skewX(-30deg); }
.btn-primary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.btn-ghost, .btn-outline { background-color: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-ghost:hover, .btn-outline:hover { background-color: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }
.btn-ghost:hover i, .btn-outline:hover i { color: inherit; }
[data-theme="light"] .btn-ghost, [data-theme="light"] .btn-outline { background-color: transparent; }
[data-theme="light"] .btn-ghost:hover, [data-theme="light"] .btn-outline:hover { background-color: var(--text); color: #fff; }
.btn-white { background: #fff; color: #05070A; }
.btn-danger { border: 0; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .45); }
.btn-success { border: 0; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .45); }
.btn-sm { --cut: 6px; font-size: .7rem; letter-spacing: .07em; border-radius: 0; }
.btn-lg { --cut: 11px; font-size: .86rem; border-radius: 0; }
.btn-xl { --cut: 13px; font-size: .95rem; letter-spacing: .1em; border-radius: 0; }
.btn-icon { --cut: 6px; }
.link-btn { font-family: var(--font-display); }

/* ---- FORMS ---------------------------------------------------------------------------------------------------------
   Square fields with a hairline; focus draws one line of the brand blue round them. */

.input, .select, .textarea { border-radius: 0; box-shadow: none; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); box-shadow: none; }
.input:focus, .textarea:focus, .select:focus { border-color: transparent; }
.input-lg { border-radius: 0; }
.input-group .input, .input-group .btn { border-radius: 0; }
.input-color { border-radius: 0; }
.label, .field > label { font-family: var(--font-sans); }
.switch > span { border-radius: 0; }
.switch > span::after { border-radius: 0; background: #fff; }
.switch input:checked + span { background: var(--grad); background-origin: border-box; box-shadow: none; }
.segmented { border-radius: 0; padding: 3px; }
.segmented button { border-radius: 0; font-family: var(--font-display); font-stretch: 112%; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.segmented button.is-active { background: var(--text); color: var(--bg); box-shadow: none; }
.check input { accent-color: #009BDB; }

/* ---- SURFACES ------------------------------------------------------------------------------------------------------
   Cards are sharp with a hairline and carry the chamfer as a mark: a small gradient wedge in the top-right corner.
   No cursor spotlights and no glows. */

.card { border-radius: var(--r-lg); box-shadow: var(--card-rim); background-clip: padding-box; }
.card:not(.skeleton)::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; pointer-events: none; z-index: 1;
               background: linear-gradient(225deg, #009BDB 0 50%, transparent 50%); opacity: .9; }
.card-glow { box-shadow: none; }
.card-glow::before { padding: 1px; opacity: 1; background: var(--rule); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.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 {
    background: linear-gradient(225deg, #009BDB 0 50%, transparent 50%); inset: -1px -1px auto auto; width: 12px; height: 12px; opacity: .9; border-radius: 0; }
.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::after, .mk-pain-card:hover::after { background: linear-gradient(225deg, #F43F5E 0 50%, transparent 50%); }
.card-header { border-bottom-color: var(--border); }
.card-title { font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
.card-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
hr, .divider { background: var(--border); }
.hive-tex::before, .auth-aside::before { opacity: .35; }

/* ---- STATUS --------------------------------------------------------------------------------------------------------
   Badges are square tags in tracked capitals; alerts carry a coloured bar on their leading edge. */

.badge { border-radius: 0; font-family: var(--font-display); font-stretch: 112%; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; }
.badge-grad { background: var(--grad); background-origin: border-box; border-color: transparent; }
.alert { border-radius: 0; border-left-width: 3px; }
.alert-info { border-left-color: var(--info); } .alert-warning { border-left-color: var(--warning); } .alert-danger { border-left-color: var(--danger); }
.alert-success { border-left-color: var(--success); } .alert-brand { border-left-color: #009BDB; }
.dot-live { border-radius: 50%; }

/* ---- DATA ----------------------------------------------------------------------------------------------------------
   Hexagons for every avatar and icon tile; gauges are thin, square bars. */

.avatar, .avatar-lg, .nav-user-btn .avatar, .kpi-icon, .empty-state .empty-icon, .pv-empty-icon { border-radius: 0; clip-path: var(--hex); }
.kpi-icon { width: 38px; height: 34px; }
.kpi-value { font-stretch: 118%; letter-spacing: -0.02em; }
.kpi-label { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.table th { font-family: var(--font-display); font-stretch: 112%; letter-spacing: .12em; font-size: .66rem; }
.meter, .progress { height: 6px; border-radius: 0; }
.meter > span, .progress > span { border-radius: 0; }
.chip { border-radius: 0; }
.chip.is-active { background: transparent; box-shadow: inset 0 0 0 1px #009BDB; }
.kbd { border-radius: 0; }
.skeleton { border-radius: 0; }

/* ---- NAVIGATION ----------------------------------------------------------------------------------------------------
   The bar is solid ground with a gradient hairline; links are small tracked capitals with a sliding underline. */

.site-nav.is-scrolled, .signed-in .site-nav { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-nav::after { background: var(--rule); height: 1px; }
.site-nav.is-scrolled::after, .signed-in .site-nav::after { opacity: .7; }
.nav-links a { position: relative; border-radius: 0; background: none !important; font-family: var(--font-display); font-stretch: 112%; font-size: .74rem; font-weight: 600;
               letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; }
/* Eight links on one line: never wrapped, tightened on narrower desktops, and the home page's own section links (also
   in the footer and the mobile menu) give way first. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1500px) { .nav-links { gap: 0; } .nav-links a { padding: 8px 10px; letter-spacing: .1em; } }
@media (max-width: 1320px) { .site-nav .nav-links a[href="/#themes"], .site-nav .nav-links a[href="/#team-ai"] { display: none; } }
@media (max-width: 1080px) { .site-nav .nav-links a[href="/#features"] { display: none; } .nav-links a { padding: 8px 8px; letter-spacing: .08em; } }
.nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
/* the open page's item is marked by full-strength text only - the bar's own gradient line is the one line under it */
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after { transform: scaleX(0); }
.nav-user-btn { border-radius: 0; }
.nav-dropdown { border-radius: 0; box-shadow: var(--shadow-lg); border-top: 2px solid #009BDB; }
.nav-dropdown a, .nav-dropdown button { border-radius: 0; }
.theme-toggle, .nav-burger { border-radius: 0; clip-path: var(--chamfer); --cut: 7px; }
.mobile-menu a { font-stretch: 118%; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.tabs { border-bottom-color: var(--border); }
.tab { font-stretch: 112%; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-bottom-width: 2px; }
.tab.is-active { border-bottom-color: transparent; border-image: var(--rule) 1; }
.breadcrumb { font-family: var(--font-display); font-stretch: 112%; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer { background: var(--bg-2); border-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); opacity: .7; }
.footer-grid h4 { font-stretch: 125%; letter-spacing: .2em; font-size: .68rem; }
.footer-socials a { border-radius: 0; clip-path: var(--hex); border: 0; width: 40px; height: 36px; }

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

.modal { border-radius: 0; border-top: 2px solid #009BDB; box-shadow: var(--shadow-lg); }
.modal-header h3 { text-transform: uppercase; font-stretch: 118%; letter-spacing: .02em; font-size: 1.05rem; }
.modal-close { border-radius: 0; }
.modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.toast { border-radius: 0; border-left: 3px solid #009BDB; }
.toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); }
.copy-box { border-radius: 0; }
.spot-tip { border-radius: 0; clip-path: none; font-stretch: 118%; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }

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

.auth-aside { background: var(--bg-2); border-left: 1px solid var(--border); }
.auth-aside::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #00D4AA, #009BDB 50%, #0063D2); }
.auth-card h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* ---- QUIET THE OLD FX ---------------------------------------------------------------------------------------------- */

.switch input:checked + span, .segmented button.is-active { box-shadow: none; }
:focus-visible { outline-color: #009BDB; border-radius: 0; }
* { scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; }
::-webkit-scrollbar-thumb { border-radius: 0; background: color-mix(in srgb, var(--muted) 45%, transparent) padding-box; }
::-webkit-scrollbar-thumb:hover { background: #009BDB padding-box; }

@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }


/* ---- MARKETING ------------------------------------------------------------------------------------------------------
   The hero: the brand keeps its own lower case inside the capitals; "60 seconds" is underlined by one cut bar of the
   gradient (no brushstroke) that slides in; the glow behind the browser becomes a skewed frame drawn in a hairline. */

.mk-hero .display { font-size: clamp(2.1rem, 4.3vw, 3.55rem); }
.mk-own, .mk-own-t { text-transform: none; letter-spacing: -0.02em; }
.mk-swoosh svg { display: none; }
.mk-swoosh::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.12em; bottom: calc(-.1em + 5px); height: .16em; background: var(--rule); transform: skewX(-28deg) scaleX(0); transform-origin: left;
                    pointer-events: none; }
.mk-swoosh::after { animation: vel-bar .9s cubic-bezier(.65, 0, .35, 1) 1.3s forwards; }
@keyframes vel-bar { to { transform: skewX(-28deg) scaleX(1); } }
.mk-hero-visual::before { inset: 6% -3% -6% 10%; filter: none; opacity: 1; animation: none; border-radius: 0; background: none; border: 1px solid var(--line-accent); transform: skewX(-6deg); }
[data-theme="light"] .mk-hero-visual::before { opacity: 1; }
.mk-browser { box-shadow: var(--shadow-lg); }
.mk-pill { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--font-display); font-stretch: 112%; letter-spacing: .04em; }

/* the plans: names in the expanded face, and buttons that wrap rather than clip in a narrow column */
.plan-name, .plan-amount { font-stretch: 118%; }
.plan-name { text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.plan-cta .btn { white-space: normal; text-align: center; line-height: 1.25; font-stretch: 106%; letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) { .mk-swoosh::after { animation: none !important; transform: skewX(-28deg); } }

/* ---- PHONES: the expanded face eases in width so capitals never crowd a narrow screen ------------------------------ */
@media (max-width: 480px) {
    .btn { font-stretch: 100%; letter-spacing: .04em; }
    h1, h2, .display, .auth-card h1 { font-stretch: 112%; }
    .eyebrow { letter-spacing: .16em; }
}


/* =====================================================================================================================
   VELOCITY II - the hexagon everywhere an icon sits, owns.ai's own chats on the chamfer, and the details that make it
   feel engineered: numbered sections, outline type, frame brackets, a lit sidebar.
   ===================================================================================================================== */

/* ---- THE HEXAGON: every icon tile, avatar and badge-mark across the site and the member area -------------------------- */
.auth-demo-av, .auth-benefits li i, .mini-chat-head .avatar, .bkp-ic, .d-av, .d-locked .empty-icon, .d-new-card .d-new-plus, .d-item .d-kind,
.d-steps-list li::before, .d-install-status .big, .d-quick-card .qc-ico, .mk-chat-avatar, .mk-launcher, .mk-pain-icon, .mk-step-num, .mk-b-icon,
.mk-ts-site-btn i, .ms-logo i, .mk-team-feats i, .bld-step-dot, .bld-fail-icon, .bld-mini-icon, .bld-back-icon, .mk-bc-av, .mk-bc-card-head > span,
.ms-perk > i, .ms-how-step span, .ms-person-av, .mk-ws-feats > div:not(.mk-ws-cta) > i, .pv-tpl-ai, .tm-empty .empty-icon,
.tm-limit-icon, .tm-upload-orb, .tm-access-opt > i, .tm-role-opt > i, .tm-inv-ok-icon, .tm-bot-face, .tm-join-icon, .tm-welcome-face, .tm-msg-face,
.d-tpl .tp-dot, .kpi-icon, .avatar, .empty-state .empty-icon {
    border-radius: 0 !important; clip-path: var(--hex); box-shadow: none;
}
/* a hexagon reads best a touch wider than tall */
.d-quick-card .qc-ico, .mk-b-icon, .mk-pain-icon { width: 48px; height: 44px; }
.auth-benefits li i, .mk-team-feats i, .ms-perk > i { width: 38px; height: 34px; }

/* ---- OWNS.AI'S OWN CHATS: bubbles cut on the chamfer, composers square --------------------------------------------- */
.tm-msg .tm-bub, .pg-msgs .d-msg .bub, .mk-msg, .mc-msg, .mk-bc-msg, .mk-dc-msg, .mk-demo-chat .mk-msg { --cut: 9px; border-radius: 0 !important; clip-path: var(--chamfer); }
.tm-composer-box, .mk-chat-input, .pg-chat { border-radius: 0; }
.tm-send { --cut: 7px; border-radius: 0; clip-path: var(--chamfer); }
.mk-chat, .mini-chat, .mk-book-chat { border-radius: 0; }
.mini-chat-head, .mk-chat-head { position: relative; }
.mini-chat-head::after, .mk-chat-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); opacity: .9; }

/* ---- HOME: numbered sections -----------------------------------------------------------------------------------------
   Each section headline's eyebrow carries its number, "01", "02"…, ahead of the gradient rule. */
#page-home { counter-reset: vel-sec; }
#page-home .mk-head .eyebrow { counter-increment: vel-sec; }
#page-home .mk-head .eyebrow::before { content: counter(vel-sec, decimal-leading-zero); width: auto; height: auto; padding-right: 46px; background: var(--rule) no-repeat right center / 34px 2px;
                                        color: var(--muted); font-stretch: 112%; letter-spacing: .1em; }

/* ---- HOME: the hero -------------------------------------------------------------------------------------------------
   The second line in outline type, the gradient words solid; the copy sits on the plain page; the browser is held in
   four corner brackets that lean with it. */
.mk-h1-line2 { color: transparent; -webkit-text-stroke: 1.2px var(--text); }
.mk-h1-line2 .gradient-text { -webkit-text-stroke: 0; }

/* FRAME BRACKETS: four L-marks just outside a frame */
.mk-tilt::after, .mk-ts-browser::before, .pv-browser::before {
    content: ""; position: absolute; inset: -11px; z-index: 6; pointer-events: none; --bk: #009BDB;
    background:
        linear-gradient(var(--bk), var(--bk)) top left / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) top left / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) top right / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) top right / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) bottom left / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) bottom left / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) bottom right / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) bottom right / 2px 22px no-repeat;
}
.mk-ts-browser, .pv-browser { overflow: visible; }
.mk-ts-viewport, .pv-viewport { overflow: hidden; }
.pv-stage::before { display: none; }
.pv-browser { border-radius: 0; }

/* ---- CARDS AND BUTTONS IN MOTION ------------------------------------------------------------------------------------
   A lit top edge on hover; the primary button's arrow runs ahead of it. */
.card-hover:hover, .mk-bento-item:hover, .plan-card:hover, .mk-ind:hover, .d-quick-card:hover, .d-bot-card:hover, .d-theme:hover {
    box-shadow: inset 0 2px 0 #009BDB, var(--shadow); }
.btn-primary i.fa-arrow-right, .btn-primary i.fa-arrow-right-long, .btn i.fa-arrow-right { transition: transform .35s var(--ease); }
.btn-primary:hover i.fa-arrow-right, .btn:hover i.fa-arrow-right { transform: translateX(4px); }

/* ---- THE MEMBER AREA ------------------------------------------------------------------------------------------------
   A lit active item in the rail (a gradient edge, a fading wash), tracked capitals for its group labels; a gradient
   rule under each page's heading; tables mark the row under the cursor. */
.side-label { font-family: var(--font-display); font-stretch: 125%; letter-spacing: .22em; font-size: .62rem; }
.side-nav a { border-radius: 0; position: relative; }
.side-nav a.is-active { background: linear-gradient(90deg, color-mix(in srgb, #009BDB 18%, transparent), transparent 85%); box-shadow: inset 2px 0 0 #00D4AA; }
.side-nav a.is-active i { color: #00D4AA; }
[data-theme="light"] .side-nav a.is-active i { color: #0063D2; }
.app-head { position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.app-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 140px; height: 2px; background: var(--rule); }
.table tbody tr:hover { box-shadow: inset 2px 0 0 #009BDB; }
.d-kpis .card .kpi-value, .kpi-value { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) { .mk-h1-line2 { -webkit-text-stroke-width: 1px; } }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover i.fa-arrow-right { transform: none; } }


/* ---- THE TEAM ASSISTANT PAGE, IN NOVA'S DESIGN ------------------------------------------------------------------------
   The same language as Nova (App_Code/HouseBot.cs): a frosted-glass panel over the page, the assistant's name in
   expanded capitals over a gradient hairline, hexagon faces, every answer in a card cut on the chamfer with its
   sources and suggestions under it, the visitor's own messages ocean-to-aqua, chamfered chips and composer. It follows
   the site's light/dark switch - frosted white in light, frosted carbon in dark. */
.tm-chat { position: relative; background: color-mix(in srgb, var(--surface) 74%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
           border-left: 1px solid var(--border); }
.tm-chat::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; z-index: 3; pointer-events: none; background: linear-gradient(225deg, #009BDB 0 50%, transparent 50%); }
.tm-chat-head { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); }
.tm-chat-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, #009BDB, #00D4AA 55%, transparent); }
.tm-bot-name { font-stretch: 118%; text-transform: uppercase; letter-spacing: .06em; font-size: .98rem; }
.tm-bot-face, .tm-welcome-face, .tm-msg-face { background: linear-gradient(135deg, #009BDB, #00D4AA) !important; box-shadow: none; }
.tm-welcome h2 { font-stretch: 125%; }

.tm-msg.is-bot .tm-text { --cut: 10px; display: inline-block; max-width: 100%; padding: 12px 16px; clip-path: var(--chamfer);
                          background: var(--surface-2); border: 1px solid var(--border); color: var(--text); line-height: 1.65; }
.tm-msg.is-bot .tm-text:empty { display: none; }
.tm-msg.is-bot .tm-bub { padding-top: 0; }
.tm-msg.is-user .tm-bub { --cut: 10px; background: linear-gradient(135deg, #009BDB, #00D4AA); box-shadow: none; clip-path: var(--chamfer); }
.tm-starter { --cut: 9px; border-radius: 0; clip-path: var(--chamfer); }
.tm-starter:hover { transform: none; border-color: #009BDB; }
.tm-source, .tm-know span, .tm-suggest .chip { --cut: 6px; border-radius: 0; clip-path: var(--chamfer); }
.tm-composer { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 82%, transparent) 40%); }
.tm-composer-box { --cut: 11px; border-radius: 0; clip-path: var(--chamfer); box-shadow: none; }
.tm-composer-box:hover { box-shadow: none; }
.tm-composer-box:focus-within { box-shadow: none; }
.tm-send { background: linear-gradient(135deg, #009BDB, #00D4AA); box-shadow: none; }
.tm-history-item { border-radius: 0; }
.tm-history-item.is-active { background: linear-gradient(90deg, color-mix(in srgb, #009BDB 16%, transparent), transparent 85%); box-shadow: inset 2px 0 0 #00D4AA; }
.tm-msg.is-bot .tm-bub { clip-path: none; }


/* =====================================================================================================================
   VELOCITY III - the living details: the primary button's gradient turning, the hero's glass eyebrow, and the role
   line that types itself.
   ===================================================================================================================== */

/* ---- THE PRIMARY BUTTON: its gradient turns slowly, a full revolution every 9 seconds. The angle is a registered
   property (@property), so it animates; browsers without it keep the gradient still at 135deg. ---------------------- */
@property --vel-a { syntax: "<angle>"; inherits: false; initial-value: 135deg; }
.btn-primary { background: linear-gradient(var(--vel-a), #00D4AA 0%, #009BDB 50%, #0063D2 100%); background-size: 100% 100%; background-origin: border-box;
               animation: vel-turn 9s linear infinite; }
.btn-primary:hover { background-position: 0 0; }
@keyframes vel-turn { to { --vel-a: 495deg; } }

/* ---- THE HERO EYEBROW: a plate of frosted glass held in two gradient corner brackets, "Who owns.ai?" as its title
   (the brand in gradient lower case) and the line after it, all on one line, with a slow light passing through it. -- */
.mk-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 7px 18px; max-width: 100%; white-space: nowrap; border-radius: 0;
           border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); color: var(--text-2);
           background:
               linear-gradient(#00D4AA, #00D4AA) top left / 16px 2px no-repeat, linear-gradient(#00D4AA, #00D4AA) top left / 2px 16px no-repeat,
               linear-gradient(#0063D2, #0063D2) bottom right / 16px 2px no-repeat, linear-gradient(#0063D2, #0063D2) bottom right / 2px 16px no-repeat,
               linear-gradient(115deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 28%, transparent));
           -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 50px -30px rgba(0, 155, 219, .9);
           font-family: var(--font-display); font-stretch: 118%; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.mk-pill::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%);
                  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%); animation: vel-pass 7s ease-in-out 2.4s infinite; }
@keyframes vel-pass { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.mk-pill b { color: var(--text); font-weight: 600; font-size: 1.4em; text-transform: none; letter-spacing: .01em; }
.mk-pill b em { font-style: normal; text-transform: none; letter-spacing: .01em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .mk-pill { box-shadow: inset 0 1px 0 #fff, 0 18px 40px -28px rgba(0, 99, 210, .6); }
[data-theme="light"] .mk-pill::after { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); }
/* phones: the tagline drops to its own line under "Who owns.ai?" */
@media (max-width: 520px) {
    .mk-pill { flex-wrap: wrap; row-gap: 3px; padding: 7px 12px; white-space: normal; letter-spacing: .1em; font-size: .62rem; }
    .mk-pill-t { flex-basis: 100%; }
}
/* phones held upright: less room between the header and the hero */
@media (max-width: 600px) and (orientation: portrait) { .mk-hero { padding-top: 24px; } }

/* ---- THE HERO'S ROLE LINE (js/home.js heroRoles) -----------------------------------------------------------------
   "Your website's own …" then a role that types itself in, letter by letter - each one landing as the chat's streamed
   letters do (large, soft, settling) - holds, falls away letter by letter, and gives way to the next. Every letter
   takes its own colour along the brand gradient (--t, 0 at the first to 1 at the last), so it reads as gradient text
   while it moves; a hard gradient caret blinks after it. Without script, or with reduced motion, it is the first role
   as still gradient text. */
/* .92em: the longest role ("AI customer support") then fits its column at every width - measured, 97% at most */
.mk-cycle { display: block; white-space: nowrap; min-height: 1.12em; font-size: .92em; -webkit-text-stroke: 0; --cy-a: #2EE6C0; --cy-b: #4F8DF5; color: var(--cy-a); }
[data-theme="light"] .mk-cycle { --cy-a: #00B894; --cy-b: #0063D2; }
.mk-cycle:not(.is-on) { background: linear-gradient(100deg, var(--cy-a), var(--cy-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-cycle .cy-ch { display: inline-block; color: color-mix(in oklab, var(--cy-a), var(--cy-b) calc(var(--t, 0) * 100%)); transform-origin: 50% 70%;
                   animation: vel-land .72s cubic-bezier(.16, 1, .3, 1) both; }
.mk-cycle .cy-ch.is-rest { animation: none; }
.mk-cycle .cy-sp { display: inline-block; width: .32em; }
.mk-cycle .cy-ch.is-out { animation: vel-leave .4s cubic-bezier(.5, 0, .75, 0) both; }
.mk-cycle.is-on::after { content: ""; display: inline-block; width: .09em; height: .86em; margin-left: .1em; vertical-align: -.02em; background: linear-gradient(180deg, #00D4AA, #0063D2);
                         animation: vel-caret 1s steps(1) infinite; }
@keyframes vel-land { 0% { opacity: 0; transform: translateY(-.14em) scale(1.7); filter: blur(6px); } 45% { opacity: 1; filter: blur(0); } 62% { transform: translateY(0) scale(.94); }
                      82% { transform: scale(1.025); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes vel-leave { to { opacity: 0; transform: translateY(.22em) scale(.82); filter: blur(5px); } }
@keyframes vel-caret { 50% { opacity: 0; } }
@media (hover: none) and (pointer: coarse) { .mk-cycle .cy-ch { animation-name: vel-land-touch; } }
@keyframes vel-land-touch { 0% { opacity: 0; transform: translateY(-.14em) scale(1.7); } 45% { opacity: 1; } 62% { transform: translateY(0) scale(.94); } 82% { transform: scale(1.025); } 100% { opacity: 1; transform: none; } }

@media (max-width: 340px) { .mk-cycle { font-size: .84em; } }

/* visually hidden, still read aloud */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { .btn-primary, .mk-pill::after, .mk-cycle.is-on::after { animation: none !important; } }

/* ---- THE HERO'S BUILD FORM: the address on its own row above the button. Until something is typed, the placeholder
   is replaced by a live hint - "yourbusiness.com" with a light running through it, a blinking caret before it and a
   "Your website here" tag - so it reads as a slot for the visitor's own site, not as an example. The globe stays on
   every screen size. */
.mk-build-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.mk-build-url { position: relative; display: flex; align-items: center; gap: 4px; cursor: text; margin: 0;
                --cut: 9px; clip-path: var(--chamfer); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--border); }
.mk-build-url > i { color: var(--brand); padding-left: 16px; font-size: 1.15rem; animation: vel-globe 6s ease-in-out infinite; }
@keyframes vel-globe { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-18deg) scale(1.12); } 90% { transform: rotate(10deg) scale(1.05); } }
.mk-build-stack .mk-build-input { padding: 15px 10px; font-size: 1.15rem; text-align: left; }
.mk-build-stack .mk-build-input::placeholder { color: transparent; }
.mk-build-stack .btn { width: 100%; justify-content: center; }
.mk-build-hint { position: absolute; left: 46px; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; pointer-events: none;
                 font: 600 1.15rem var(--font-sans); transition: opacity .2s; }
.mk-build-hint::before { content: ""; width: 2px; height: 1.2em; margin-right: -9px; background: linear-gradient(180deg, #00D4AA, #0063D2); animation: vel-caret 1s steps(1) infinite; }
.mk-build-hint-t { background: linear-gradient(100deg, var(--faint) 0 38%, #00D4AA 46%, #009BDB 52%, var(--faint) 60% 100%); background-size: 260% 100%; background-position: 100% 0;
                   -webkit-background-clip: text; background-clip: text; color: transparent; animation: vel-hint 3.2s ease-in-out infinite; }
@keyframes vel-hint { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.mk-build-hint em { --cut: 5px; clip-path: var(--chamfer); margin-left: auto; padding: 4px 9px; font-style: normal; font-family: var(--font-display); font-stretch: 118%; font-size: .6rem; font-weight: 700;
                    letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--grad); white-space: nowrap; animation: vel-tag 3.2s ease-in-out infinite; }
@keyframes vel-tag { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.mk-build-input:focus ~ .mk-build-hint, .mk-build-input:not(:placeholder-shown) ~ .mk-build-hint { opacity: 0; }
.mk-build-url:focus-within { border-color: #009BDB; }
@media (max-width: 560px) {
    .mk-build-stack > .mk-build-url > i { display: block; padding-left: 12px; }
    .mk-build-stack .mk-build-input { text-align: left; font-size: 1.05rem; }
    .mk-build-hint { left: 40px; font-size: 1.05rem; gap: 10px; }
    .mk-build-hint em span { display: none; }
}
@media (max-width: 380px) { .mk-build-hint em { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-build-url > i, .mk-build-hint::before, .mk-build-hint-t, .mk-build-hint em { animation: none !important; } .mk-build-hint-t { background-position: 0 0; } }


/* ---- THE SALES FUNNEL: "wins jobs" in the headline and the missed-revenue calculator. ------------------------------ */
.mk-h1 .mk-own.is-word, .mk-h1 .mk-own.is-word .mk-own-t { text-transform: uppercase; letter-spacing: inherit; }
.mk-h1 .mk-own.is-word .mk-own-t { filter: none; }
/* light theme: the words take a 1px white outline, and the hero's description one drawn outside its letters (eight 1px
   shadows), so both read over the hive */
[data-theme="light"] .mk-h1 .mk-own.is-word .mk-own-t { -webkit-text-stroke: 1px #fff; }
[data-theme="light"] .mk-hero-copy .lead { text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }


.mk-roi-money.is-loss { background: linear-gradient(100deg, #FF4D6D, #FF8A3D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-roi-row b { font-stretch: 118%; }
/* the calculator's slider handles: a white hexagon ringed in the brand gradient (an SVG, so the ring follows the
   diagonal edges - a clipped border would lose them) */
.mk-range input[type=range]::-webkit-slider-thumb { width: 28px; height: 25px; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 155, 219, .5));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 25'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2300D4AA'/%3E%3Cstop offset='.5' stop-color='%23009BDB'/%3E%3Cstop offset='1' stop-color='%230063D2'/%3E%3C/linearGradient%3E%3Cpath d='M8 2.5h12l5.5 10-5.5 10H8l-5.5-10z' fill='%23fff' stroke='url(%23g)' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mk-range input[type=range]::-moz-range-thumb { width: 28px; height: 25px; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 155, 219, .5));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 25'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2300D4AA'/%3E%3Cstop offset='.5' stop-color='%23009BDB'/%3E%3Cstop offset='1' stop-color='%230063D2'/%3E%3C/linearGradient%3E%3Cpath d='M8 2.5h12l5.5 10-5.5 10H8l-5.5-10z' fill='%23fff' stroke='url(%23g)' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mk-roi-pays { align-items: flex-start; line-height: 1.45; }
.mk-roi-pays > i { margin-top: 3px; }
.mk-roi-one { color: var(--text) !important; font-size: inherit !important; }