/* ============================================================
   maja by looklike — brand tokens
   A tasteful derivative of the look: design system (docs/external-distribution/brand/looklike-tokens.css).
   Kept: black/off-white foundation, Neue Haas Black display, lowercase, dim-25 soft emphasis,
   8px radii (NEVER pill), the long printed-on-paper card shadow, 1px ink rules, serif italic accents,
   one theme color per piece — Maja's is teal #15AA9B, picked from looklike's own theme set.
   SaaS-ified: body text at Roman/Medium for legibility, web-responsive type scale, functional density.
   NOTE: Neue Haas Display is licensed type (from Gustav's brand bundle) — keep self-hosted, never CDN it.
   ============================================================ */
/* All @import rules MUST sit at the very top — a misplaced @import (after any rule) is dropped by the
   browser per the CSS spec. Inter (the UI typeface) lives up here with Instrument Serif for that reason;
   moving it lower silently kills Inter and body text falls back to the heavy Neue Haas Display. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayRoman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayMediu.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Display';
    src: url('/assets/fonts/NeueHaasDisplayBlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --look-black: #000000;
    --look-offwhite: #f9f9f9;
    --ink: #000000;
    --ink-25: rgba(0, 0, 0, 0.25);
    --ink-50: rgba(0, 0, 0, 0.5);
    --ink-08: rgba(0, 0, 0, 0.08);
    --paper: #f9f9f9;
    --paper-25: rgba(249, 249, 249, 0.25);
    --paper-50: rgba(249, 249, 249, 0.5);
    --theme: #15aa9b; /* maja's one theme color — looklike --theme-teal */
    --theme-soft: rgba(21, 170, 155, 0.1);
    --ff: 'Neue Haas Display', 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ff-serif: 'Instrument Serif', 'Signifier', 'Times New Roman', serif;
    --r-xs: 4px;
    --r-s: 8px;
    --r-m: 16px; /* never pill */
    --shadow-card:
        7px 7px 22px 0 rgba(0, 0, 0, 0.08), 26px 29px 39px 0 rgba(0, 0, 0, 0.07), 59px 66px 53px 0 rgba(0, 0, 0, 0.04),
        105px 117px 63px 0 rgba(0, 0, 0, 0.01);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
}

html,
body {
    margin: 0;
    background: var(--look-offwhite);
    color: var(--ink);
    font-family: var(--ff);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection {
    background: var(--ink);
    color: var(--paper);
}
a {
    color: inherit;
    text-decoration: none;
}

/* display type — Black 900, tight, lowercase by class */
.mk-display {
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.02;
}
.mk-title {
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.low {
    text-transform: lowercase;
}
.mk-serif {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}
.dim {
    color: var(--ink-25);
} /* soft emphasis — the system's substitute for bold */
.dim50 {
    color: var(--ink-50);
}
.pdim {
    color: var(--paper-50);
}
.stamp {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    font-weight: 500;
}
.stamp.on-dark {
    color: var(--paper-50);
}

/* containers */
.mk-card {
    background: #fff;
    border-radius: var(--r-s);
    box-shadow: var(--shadow-card);
}
.mk-flat {
    background: #fff;
    border: 1px solid var(--ink-08);
    border-radius: var(--r-s);
}
.mk-dark {
    background: var(--look-black);
    color: var(--paper);
    border-radius: var(--r-s);
}
.rule-b {
    border-bottom: 1px solid var(--ink);
}
.rule-t {
    border-top: 1px solid var(--ink);
}

/* buttons — black rectangles, r-s, hover invert. never pill. */
.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: var(--r-s);
    padding: 14px 24px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        color var(--dur) var(--ease);
}
.mk-btn:hover {
    background: var(--look-offwhite);
    color: var(--ink);
}
.mk-btn.on-dark {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.mk-btn.on-dark:hover {
    background: transparent;
    color: var(--paper);
}
.mk-btn.theme {
    background: var(--theme);
    border-color: var(--theme);
    color: #04201c;
}
.mk-btn.theme:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.mk-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-25);
    border-radius: var(--r-s);
    padding: 14px 24px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}
.mk-ghost:hover {
    border-color: var(--ink);
}

/* form fields */
.mk-input {
    width: 100%;
    background: #fff;
    border: 1px solid var(--ink-25);
    border-radius: var(--r-s);
    padding: 13px 16px;
    font: inherit;
    color: var(--ink);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.mk-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(21, 170, 155, 0.25);
}
.mk-input::placeholder {
    color: var(--ink-25);
}

/* editorial section heads — num · title · sub */
.sec {
    padding: 96px 0;
}
.sec-head {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 24px;
    align-items: baseline;
    margin-bottom: 48px;
}
.sec-num {
    font-weight: 900;
    color: var(--theme);
    font-size: 15px;
}

/* range slider */
input[type='range'].mk-range {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    background: var(--ink-25);
    border-radius: 0;
}
input[type='range'].mk-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink);
    border: 3px solid var(--look-offwhite);
    box-shadow: 0 0 0 1px var(--ink);
    cursor: pointer;
}

details > summary {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker {
    display: none;
}
.num {
    font-variant-numeric: tabular-nums;
}

/* aurora — the hero gradient field (blaise-mood: dark → steel blue → warm sand glow; ours, with a teal breath) */
.aurora {
    background:
        radial-gradient(95% 75% at 12% 108%, rgba(233, 214, 178, 0.5), transparent 62%),
        radial-gradient(75% 65% at 88% 98%, rgba(122, 162, 192, 0.32), transparent 66%),
        radial-gradient(65% 55% at 50% 85%, rgba(56, 92, 116, 0.4), transparent 72%),
        radial-gradient(50% 40% at 70% 70%, rgba(21, 170, 155, 0.1), transparent 70%), #0a0c10;
}
.aurora-text {
    color: var(--paper);
}
.aurora .stamp {
    color: var(--paper-50);
}

/* ============ SaaS blend v2 — motion system + UI typography ============ */
/* (Inter @import moved to the top of the file — a non-leading @import is invalid and gets dropped.) */
:root {
    --ff-ui: 'Inter', 'Neue Haas Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --theme2: #4acad1; /* looklike theme-cyan — gradient partner */
    --grad: linear-gradient(100deg, #15aa9b, #4acad1);
}
body {
    font-family: var(--ff-ui);
}
.mk-display,
.mk-title {
    font-family: var(--ff);
} /* Neue Haas stays ONLY on display type */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font: 600 12px/1 var(--ff-ui);
    letter-spacing: 0.02em;
}

/* scroll reveal — only hides when JS is active (html.js); no-JS / failsafe keeps content visible */
html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal.in {
    opacity: 1;
    transform: none;
}

/* aurora drift — pre-blurred gradient blobs (NO filter:blur — 70px blur on 60vw surfaces was the
   single worst GPU cost on weak devices; long gradient falloff gives the same softness for free) */
.aurora-wrap {
    position: relative;
    overflow: hidden;
    background: #0a0c10;
}
.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.55;
    will-change: transform, opacity;
}
.blob.b1 {
    width: 60vw;
    height: 60vw;
    left: -15vw;
    bottom: -38vw;
    background: radial-gradient(circle, rgba(233, 214, 178, 0.5) 0%, rgba(233, 214, 178, 0.22) 38%, transparent 72%);
    animation: drift1 16s ease-in-out infinite alternate;
}
.blob.b2 {
    width: 48vw;
    height: 48vw;
    right: -12vw;
    bottom: -30vw;
    background: radial-gradient(circle, rgba(122, 162, 192, 0.4) 0%, rgba(122, 162, 192, 0.18) 38%, transparent 72%);
    animation: drift2 19s ease-in-out infinite alternate;
}
.blob.b3 {
    width: 34vw;
    height: 34vw;
    left: 38vw;
    bottom: -20vw;
    background: radial-gradient(circle, rgba(21, 170, 155, 0.3) 0%, rgba(21, 170, 155, 0.13) 38%, transparent 72%);
    animation: drift3 23s ease-in-out infinite alternate;
}
@keyframes drift1 {
    to {
        transform: translate(6vw, -4vw) scale(1.08);
    }
}
@keyframes drift2 {
    to {
        transform: translate(-5vw, -6vw) scale(1.12);
    }
}
@keyframes drift3 {
    to {
        transform: translate(-7vw, -3vw) scale(0.94);
    }
}
.grain {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* marquee */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-track {
    display: inline-flex;
    gap: 56px;
    padding-right: 56px;
    animation: marq 30s linear infinite;
    will-change: transform;
}
@keyframes marq {
    to {
        transform: translateX(-50%);
    }
}

/* hero slack mock float + glow */
.float-card {
    animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
    0%,
    100% {
        transform: translateY(0) rotate(-0.4deg);
    }
    50% {
        transform: translateY(-10px) rotate(0.4deg);
    }
}
.glow {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 30px 80px -20px rgba(21, 170, 155, 0.35),
        0 18px 50px rgba(0, 0, 0, 0.45);
}

/* typing dots */
.tdots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 1.5px;
    border-radius: 50%;
    background: #94a3b8;
    animation: tblink 1.1s infinite;
}
.tdots span:nth-child(2) {
    animation-delay: 0.18s;
}
.tdots span:nth-child(3) {
    animation-delay: 0.36s;
}
@keyframes tblink {
    0%,
    80%,
    100% {
        opacity: 0.25;
    }
    40% {
        opacity: 1;
    }
}
.msg-pop {
    animation: pop 0.42s var(--ease) both;
}
@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* timeline progress line */
.tl-line {
    position: absolute;
    top: 22px;
    left: 0;
    height: 2px;
    background: var(--grad);
    width: 0;
    transition: width 1.6s var(--ease);
}
.in .tl-line {
    width: 100%;
}

/* hover physics */
.lift {
    transition:
        transform 0.28s var(--ease),
        box-shadow 0.28s var(--ease);
}
.lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}
.btn-sheen {
    position: relative;
    overflow: hidden;
}
.btn-sheen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease);
}
.btn-sheen:hover::after {
    transform: translateX(120%);
}

/* nav glass-on-scroll */
.navbar {
    transition:
        background 0.3s var(--ease),
        border-color 0.3s var(--ease),
        backdrop-filter 0.3s var(--ease);
    border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(249, 249, 249, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .blob,
    .float-card,
    .marquee-track,
    .msg-pop,
    .tdots span,
    .orbit-chip {
        animation: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============ mobile optimization layer (viktor-audit parity, 2026-06-10) ============ */

/* dynamic viewport height — 100vh overshoots the visible area on iOS Safari/Chrome */
.dvh {
    min-height: 100vh;
    min-height: 100dvh;
}

/* anchor auth/signup content upper-middle on phones instead of dead center (browser
   chrome eats the bottom; dead center pushes CTAs down toward the toolbar) */
.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1023px) {
    .auth-main {
        justify-content: flex-start;
        padding-top: clamp(36px, 9dvh, 96px);
    }
}

/* fixed bottom support bar — solid surface, safe-area aware, never clipped by the toolbar */
.helpbar {
    background: var(--look-offwhite);
    border-top: 1px solid var(--ink-08);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.safe-bottom {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* ── mobile nav menu ── */
.menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-s);
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.menu-btn .i-close {
    display: none;
}
body.menu-open .menu-btn .i-burger {
    display: none;
}
body.menu-open .menu-btn .i-close {
    display: block;
}
@media (max-width: 767px) {
    .menu-btn {
        display: inline-flex;
    }
}

.menu-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(10, 12, 16, 0.45);
}
.mobile-menu {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    z-index: 1000;
    padding: 8px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(10, 12, 16, 0.1);
    border-radius: var(--r-m);
    box-shadow: 0 18px 44px rgba(10, 12, 16, 0.28);
}
body.menu-open {
    overflow: hidden;
}
body.menu-open .menu-scrim {
    display: block;
}
body.menu-open .mobile-menu {
    display: block;
}
body.menu-open .navbar {
    z-index: 1001;
    background: rgba(10, 12, 16, 0.95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    color: #0a0c10;
    font-weight: 600;
    font-size: 16px;
}
.mobile-menu a:active {
    background: rgba(10, 12, 16, 0.06);
}
.mobile-menu .mm-cta {
    background: var(--grad);
    color: #000;
    font-weight: 700;
    justify-content: center;
    margin-top: 6px;
}

/* ── loading state: zero layout shift (reserved dims, centered spinner) ── */
.mk-btn {
    --spin: var(--paper);
}
.mk-btn.theme {
    --spin: #04201c;
}
.mk-ghost {
    --spin: var(--ink);
}
.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.is-loading .ld-wrap,
.is-loading svg,
.is-loading img {
    visibility: hidden;
}
.is-loading::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2.5px solid rgba(127, 127, 127, 0.3);
    border-top-color: var(--spin, #0a0c10);
    animation: mkspin 0.7s linear infinite;
}
@keyframes mkspin {
    to {
        transform: rotate(360deg);
    }
}
.ld-note {
    display: block;
    min-height: 18px;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}
.ld-note.show {
    opacity: 1;
}

/* ── sticky header: anchored sections never slide under the bar ── */
section[id] {
    scroll-margin-top: 76px;
}

/* ── horizontal control rows (dashboard tabs): snap, hidden scrollbar, stable height ── */
@media (max-width: 767px) {
    .dash-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    }
    .dash-tabs::-webkit-scrollbar {
        display: none;
    }
    .dash-tabs a {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 44px;
        align-items: center;
    }
}

/* ── slider: bigger thumb on touch ── */
@media (max-width: 768px) {
    input[type='range'].mk-range::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }
}

/* ── dark-section contrast at real mobile brightness (audit P1) ──
   text-white/N utilities are only used on dark surfaces in this codebase */
@media (max-width: 768px) {
    .text-white\/30 {
        color: rgba(255, 255, 255, 0.5);
    }
    .text-white\/35 {
        color: rgba(255, 255, 255, 0.55);
    }
    .text-white\/40 {
        color: rgba(255, 255, 255, 0.58);
    }
    .text-white\/45 {
        color: rgba(255, 255, 255, 0.62);
    }
    .text-white\/50 {
        color: rgba(255, 255, 255, 0.68);
    }
    .text-white\/55 {
        color: rgba(255, 255, 255, 0.72);
    }
    .text-white\/60 {
        color: rgba(255, 255, 255, 0.75);
    }
    .stamp.on-dark,
    .pdim {
        color: rgba(249, 249, 249, 0.68);
    }
}

/* ============ motion system v2 (artisan-reference, 2026-06-10) ============ */

/* 1. staggered hero entrance — pure CSS, --i per element */
html.js .hi {
    opacity: 0;
    animation: heroin 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.1s + 0.05s);
}
@keyframes heroin {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 9. arrow micro-translate on hover */
.arr {
    display: inline-block;
    transition: transform 0.2s ease-out;
}
a:hover .arr,
button:hover .arr {
    transform: translateX(4px);
}

/* masked word reveals — headlines rise line-by-line out of their own baseline */
.ws .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
html.js .ws .w > span {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--wi, 0) * 0.04s);
}
html.js .ws.in .w > span,
html.js .reveal.in .ws .w > span {
    transform: none;
}

/* uniform premium hover physics on every primary control */
.mk-btn,
.mk-ghost,
.btn-sheen {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}
.mk-btn:hover,
.btn-sheen:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.mk-btn:active,
.btn-sheen:active,
.mk-ghost:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.12s;
}
.mk-ghost:hover {
    transform: translateY(-1px);
}

/* 10. nav shrink on scroll (glass already handled by .scrolled) */
.navbar .nav-inner {
    height: 64px;
    transition: height 0.3s var(--ease);
}
.navbar.scrolled .nav-inner {
    height: 56px;
}

/* 3. chaos pile — REAL physics: tool logos + the humans it used to take, draggable.
   Grounded: dot-grid texture + soft floor shading so the pit reads as a place, not dead space. */
.chaos {
    position: relative;
    height: 430px;
    max-width: 620px;
    margin: 40px auto 0;
    touch-action: pan-y;
    overflow: hidden;
    border-radius: var(--r-m);
    background:
        radial-gradient(60% 55% at 50% 102%, rgba(10, 12, 16, 0.05), transparent 70%),
        radial-gradient(rgba(10, 12, 16, 0.05) 1px, transparent 1px);
    background-size:
        100% 100%,
        26px 26px;
}
.pile-body {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
    opacity: 0;
}
.pile-body.live {
    opacity: 1;
}
/* physics mode ONLY: tiles capture the pointer. Never in static mode — a touch starting on a tile
   must scroll the page (touch-action:none on every tile was the mobile scroll-hijack). */
.chaos:not(.static) .pile-body {
    cursor: grab;
    touch-action: none;
}
.chaos:not(.static) .pile-body:active {
    cursor: grabbing;
}
/* labeled card tiles — icon/face + role INSIDE the tile, so the pile explains itself */
.pile-tile {
    width: 122px;
    height: 104px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(10, 12, 16, 0.1);
    box-shadow:
        0 14px 30px rgba(10, 16, 28, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
}
.pile-tile svg {
    width: 34px;
    height: 34px;
}
.pt-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.pt-face {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(10, 16, 28, 0.18);
    pointer-events: none;
    display: block;
}
.pt-label {
    font: 700 10px/1.1 var(--ff-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-50);
    text-align: center;
    max-width: 106px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* static pile (touch devices / reduced-motion / no-JS / ?cap / matter load failure): tidy heap.
   Coarse pointers skip physics entirely (shell.ts) — page swipes must never fight a sandbox,
   and phones skip the Matter.js download. Tilts keep a little of the mess; ?cap straightens them. */
.chaos.static {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 18px;
    padding: 8px 0;
}
.chaos.static .pile-body {
    position: static;
    opacity: 1;
    will-change: auto;
}
.chaos.static .pile-body:nth-child(3n + 1) {
    transform: rotate(-2.5deg);
}
.chaos.static .pile-body:nth-child(3n + 2) {
    transform: rotate(1.8deg);
}
.chaos.static .pile-body:nth-child(4n + 3) {
    transform: rotate(3.2deg);
}
/* the "drag the mess around" invite only makes sense where the physics pile runs */
@media (pointer: coarse) {
    .drag-hint {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .drag-hint {
        display: none;
    }
}
@media (max-width: 640px) {
    .chaos {
        height: 400px;
    }
    .chaos.static {
        gap: 10px 12px;
    }
    .pile-tile {
        width: 96px;
        height: 84px;
        border-radius: 14px;
        gap: 5px;
    }
    .pile-tile svg {
        width: 26px;
        height: 26px;
    }
    .pt-ic {
        height: 30px;
    }
    .pt-face {
        width: 34px;
        height: 34px;
    }
    .pt-label {
        font-size: 8.5px;
        max-width: 84px;
    }
}

/* pulse layer — pings on live dots, breathing glows on portraits + primary CTAs */
.pdot {
    position: relative;
}
.pdot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.4s);
}
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    75%,
    100% {
        transform: scale(3.4);
        opacity: 0;
    }
}
/* breathe: animating box-shadow on large surfaces forces full repaints every frame and tanked
   scroll perf (Gustav, 2026-06-10) — pulse glows are now ONLY tiny pdot pings + the small CTA */
.btn-breathe {
    animation: btnbreathe 3.8s ease-in-out infinite;
}
@keyframes btnbreathe {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 202, 209, 0);
    }
    50% {
        box-shadow: 0 0 14px 1px rgba(74, 202, 209, 0.35);
    }
}

/* sheet seam — light sections slide over the dark ones like a sheet (kills the flashbang cut) */
.sheet-top {
    border-radius: 28px 28px 0 0;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

/* offstage — ambient animations pause while their section is out of view (battery + weak GPUs) */
.offstage .blob,
.offstage .marquee-track,
.offstage .gpulse,
.offstage .orbit-chip,
.offstage .float-card,
.offstage .cta-float,
.offstage .hero-float,
.offstage .pdot::after,
.offstage .pdot::before,
.offstage .step-pane.on .m-seq,
.offstage .step-pane.on .mbar > span,
.offstage .step-pane.on .mthumb,
.offstage .step-pane.on .mcol,
.offstage .step-dot.on::after,
.offstage .step-dot.on::before {
    animation-play-state: paused !important;
}

/* lite mode — weak devices (low cores/memory, set by motion()): kill ambience + expensive blurs */
html.lite .blob,
html.lite .gpulse,
html.lite .float-card,
html.lite .orbit-chip,
html.lite .cta-float,
html.lite .hero-float,
html.lite .pdot::after,
html.lite .pdot::before,
html.lite .btn-breathe,
html.lite .reel-play,
html.lite .step-dot.on {
    animation: none !important;
}
html.lite .orbit-chip {
    opacity: 1 !important;
}
html.lite .mobile-menu,
html.lite .orbit-chip,
html.lite .cta-float,
html.lite .hero-float,
html.lite .nav-panel,
html.lite .reel-chip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.lite .navbar.scrolled,
html.lite body.menu-open .navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 12, 16, 0.97);
}
html.lite .grain {
    display: none;
}

/* topbar — launch-energy announcement banner (landing only); hides on scroll, nav slides up */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: linear-gradient(100deg, #0e2e29, #0a0c10 70%);
    color: rgba(255, 255, 255, 0.85);
    font: 600 12.5px/1 var(--ff-ui);
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid rgba(74, 202, 209, 0.18);
    transition: transform 0.35s var(--ease);
}
.topbar a {
    color: #4acad1;
    font-weight: 800;
}
/* small phones: swap the full banner copy (.tb-f) for the short form (.tb-s) so nothing clips at 390px */
.topbar .tb-s {
    display: none;
}
@media (max-width: 480px) {
    .topbar {
        font-size: 11.5px;
    }
    .topbar .tb-f {
        display: none;
    }
    .topbar .tb-s {
        display: inline;
    }
}
body.has-topbar .navbar {
    top: 38px;
    transition:
        top 0.35s var(--ease),
        background 0.3s var(--ease),
        border-color 0.3s var(--ease);
}
body.has-topbar #H {
    padding-top: calc(4rem + 38px);
}
body.past-top .topbar {
    transform: translateY(-100%);
}
body.has-topbar.past-top .navbar {
    top: 0;
}
body.has-topbar .mobile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 72px + 38px);
}
body.has-topbar.past-top .mobile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
}

/* hero floating mini-cards — the product keeps performing after the entrance */
.hero-float {
    position: absolute;
    z-index: 2;
    display: none;
    padding: 12px 14px;
    border-radius: 13px;
    text-align: left;
    background: rgba(17, 21, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
    color: #fff;
    font: 500 12.5px/1.5 var(--ff-ui);
    max-width: 220px;
    animation: chipfloat 6.8s ease-in-out infinite alternate;
}
@media (min-width: 1180px) {
    .hero-float {
        display: block;
    }
}

/* marquee logo marks */
.mq-ic {
    display: inline-flex;
}
.mq-ic svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* nav: underline-grow links + hover dropdown panel */
.nlink {
    position: relative;
    padding-bottom: 3px;
}
.nlink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.nlink:hover::after {
    transform: scaleX(1);
}
.nav-drop {
    position: relative;
    display: inline-flex;
}
.nav-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -14px;
    min-width: 215px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: rgba(14, 17, 23, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease);
}
.nav-drop::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
} /* hover bridge */
.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.nav-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.78);
    font: 500 13.5px/1 var(--ff-ui);
}
.nav-panel a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* persona hover: photo zoom */
.persona-card {
    overflow: hidden;
}
.persona-card img {
    transition: transform 0.6s var(--ease);
}
.persona-card:hover img {
    transform: scale(1.05);
}

/* reel play chip: idle pulse */
.reel-play {
    animation: playpulse 2.8s ease-in-out infinite;
}
@keyframes playpulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* blobs breathe (opacity only — compositor) on top of their drift */
.blob.b1 {
    animation:
        drift1 16s ease-in-out infinite alternate,
        blobpulse 7s ease-in-out infinite alternate;
}
.blob.b2 {
    animation:
        drift2 19s ease-in-out infinite alternate,
        blobpulse 8.5s ease-in-out infinite alternate;
}
.blob.b3 {
    animation:
        drift3 23s ease-in-out infinite alternate,
        blobpulse 6.2s ease-in-out infinite alternate;
}
@keyframes blobpulse {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 0.68;
    }
}

/* step carousel active dot: pulse ring */
.step-dot.on::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(21, 170, 155, 0.55);
    border-radius: 99px;
    animation: ringpulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes ringpulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70%,
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* gpulse — the Artisan-style breathing radial glow, done cheap: a gradient layer animating
   ONLY opacity+transform (compositor), never box-shadow. Place behind portraits/mocks. */
.gpulse {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(21, 170, 155, 0.62),
        rgba(74, 202, 209, 0.24) 48%,
        transparent 72%
    );
    animation: gpulse 4.2s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes gpulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.22);
    }
}

/* double-ripple pings: second delayed ring makes the pulse readable at a glance */
.pdot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.4s + 1.3s);
}
.jr-row.on .jr-day {
    position: relative;
}
.jr-row.on .jr-day::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(21, 170, 155, 0.5);
    animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* journey — scroll-driven honest timeline */
.jr-visual {
    position: relative;
    aspect-ratio: 4/3.4;
}
.jr-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    filter: blur(7px);
    transform: translateY(20px) scale(0.97);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s 0.55s;
    pointer-events: none;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.jr-pane.on {
    opacity: 1;
    visibility: visible;
    filter: none;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
    z-index: 2;
}
.jr-row {
    display: flex;
    gap: 16px;
    padding: 17px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.3s var(--ease),
        opacity 0.3s var(--ease);
    opacity: 0.45;
}
.jr-row.on {
    opacity: 1;
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.jr-day {
    min-width: 52px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 11.5px/1 var(--ff-ui);
    letter-spacing: 0.04em;
    background: var(--ink-08);
    color: var(--ink-50);
}
.jr-row.on .jr-day {
    background: var(--grad);
    color: #04201c;
}
.jr-line {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 99px;
    background: var(--ink-08);
    overflow: hidden;
}
.jr-line > span {
    display: block;
    width: 100%;
    height: 0;
    background: var(--grad);
    border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
    .pdot::after,
    .pdot::before,
    .btn-breathe,
    .gpulse,
    .jr-row.on .jr-day::after,
    .hero-float,
    .cta-float,
    .reel-play,
    .step-dot.on {
        animation: none !important;
    }
    html.js .dpop,
    .dbar > span,
    .dcol {
        animation: none !important;
        opacity: 1 !important;
        transform: scaleX(var(--w, 1)) scaleY(1) !important;
    }
    html.js .dpop {
        transform: none !important;
    }
    html.js .ws .w > span {
        transform: none !important;
        transition: none !important;
    }
    .mk-btn,
    .mk-ghost,
    .btn-sheen {
        transition:
            background var(--dur) var(--ease),
            color var(--dur) var(--ease);
    }
}

/* 4+5. orbit chip entrance (fade-stagger; float owns transform) */
html.js .orbit-chip {
    opacity: 0;
}
.orbit-wrap.in .orbit-chip {
    animation:
        chipfade 0.6s ease-out forwards,
        chipfloat 6.5s ease-in-out infinite alternate;
    animation-delay: calc(0.15s + var(--i, 0) * 0.07s), calc(var(--i, 0) * -1.3s);
}
@keyframes chipfade {
    to {
        opacity: 1;
    }
}
@media (max-width: 1023px) {
    .orbit-wrap.in .orbit-chip {
        animation: chipfade 0.5s ease-out forwards;
        animation-delay: calc(0.1s + var(--i, 0) * 0.06s);
    }
}

/* scroll-pinned steps shell + layered stage (image backdrop, floating mock) */
.steps-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.step-stage {
    position: relative;
    padding-bottom: 36px;
}
.step-bg {
    width: 84%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow: var(--shadow-soft);
}
.step-pane.on .step-bg {
    animation: stepin 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-mock {
    position: absolute;
    right: -2%;
    bottom: 0;
    width: 74%;
}
@media (max-width: 1023px) {
    .steps-sticky {
        align-items: flex-start;
        padding-top: 72px;
        overflow-y: auto;
    }
    .step-bg {
        display: none;
    }
    .step-mock {
        position: static;
        width: 100%;
    }
    .step-stage {
        padding-bottom: 0;
    }
}

/* 7+8. step carousel — elastic dots, slide-fade panes, animated UI mocks */
.step-dot {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--ink-25);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background 0.3s var(--ease);
}
.step-dot.on {
    width: 38px;
    background: var(--ink-08);
}
.step-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: var(--grad);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
}
.step-pane {
    display: none;
}
.step-pane.on {
    display: grid;
}
.step-pane.on .step-copy {
    animation: stepin 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-pane.on .step-mock {
    animation: stepin 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}
@keyframes stepin {
    from {
        opacity: 0;
        transform: translateX(26px);
    }
}
.step-mock {
    background: #fff;
    border: 1px solid var(--ink-08);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-card);
    padding: 20px;
    min-height: 0;
    overflow: hidden;
    transform: translateZ(0);
    contain: paint;
}
/* mock building blocks — each animates when its pane activates */
.mrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--look-offwhite);
    border: 1px solid var(--ink-08);
    font: 500 13.5px/1.2 var(--ff-ui);
}
/* mock internals LOOP while their step is active (artisan: the UI never freezes) —
   build with springy overshoot → hold → tear down → rebuild, synced to --step-dur */
.step-pane.on .m-seq {
    opacity: 0;
    animation: mockcycle var(--step-dur, 6.5s) var(--ease) infinite;
    animation-delay: calc(0.25s + var(--i, 0) * 0.22s);
}
@keyframes mockcycle {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    3.5% {
        opacity: 1;
        transform: translateY(-2px) scale(1.012);
    }
    5.5% {
        transform: none;
    }
    78% {
        opacity: 1;
        transform: none;
    }
    85% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}
.mbar {
    height: 8px;
    border-radius: 99px;
    background: var(--ink-08);
    overflow: hidden;
}
.mbar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--grad);
    transform-origin: left;
    transform: scaleX(0);
}
.step-pane.on .mbar > span {
    animation: barcycle var(--step-dur, 6.5s) cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: 0.9s;
}
@keyframes barcycle {
    0% {
        transform: scaleX(0);
    }
    13% {
        transform: scaleX(var(--w, 1));
    }
    78% {
        transform: scaleX(var(--w, 1));
    }
    85%,
    100% {
        transform: scaleX(0);
    }
}
.mthumb {
    width: 64px;
    aspect-ratio: 9/16;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}
.step-pane.on .mthumb {
    opacity: 0;
    animation: thumbcycle var(--step-dur, 6.5s) cubic-bezier(0.18, 0.89, 0.32, 1.18) infinite;
    animation-delay: calc(0.4s + var(--i, 0) * 0.16s);
}
@keyframes thumbcycle {
    0% {
        opacity: 0;
        transform: translateY(16px) rotate(0);
    }
    5% {
        opacity: 1;
        transform: translateY(-3px) rotate(var(--r, 0deg));
    }
    7.5% {
        transform: rotate(var(--r, 0deg));
    }
    78% {
        opacity: 1;
        transform: rotate(var(--r, 0deg));
    }
    85% {
        opacity: 0;
        transform: translateY(-10px) rotate(var(--r, 0deg));
    }
    100% {
        opacity: 0;
        transform: translateY(16px) rotate(0);
    }
}
.mcell {
    aspect-ratio: 1;
    border-radius: 7px;
    background: var(--look-offwhite);
    border: 1px solid var(--ink-08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.mdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.step-pane.on .mcell .mdot {
    opacity: 0;
    animation: dotpop 0.5s ease-out forwards;
    animation-delay: calc(0.4s + var(--i, 0) * 0.07s);
}
@keyframes dotpop {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    60% {
        opacity: 1;
        transform: scale(1.25);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.mcol {
    border-radius: 6px 6px 0 0;
    background: var(--ink-08);
    transform-origin: bottom;
    transform: scaleY(0);
}
.step-pane.on .mcol {
    animation: colcycle var(--step-dur, 6.5s) cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: calc(0.35s + var(--i, 0) * 0.09s);
}
@keyframes colcycle {
    0% {
        transform: scaleY(0);
    }
    9% {
        transform: scaleY(1.04);
    }
    12% {
        transform: scaleY(1);
    }
    78% {
        transform: scaleY(1);
    }
    85%,
    100% {
        transform: scaleY(0);
    }
}
.steps.paused .step-pane.on .m-seq,
.steps.paused .step-pane.on .mbar > span,
.steps.paused .step-pane.on .mthumb,
.steps.paused .step-pane.on .mcell .mdot,
.steps.paused .step-pane.on .mcol {
    animation-play-state: paused;
}

/* 6. scroll-linked light→dark agency interpolation (JS drives --agp 0→1) */
#agencyX {
    background: var(--look-offwhite);
}
#agencyX .ag-a,
#agencyX .ag-b {
    grid-area: 1/1;
    transition: none;
}

/* final CTA flanking outcome cards */
.cta-float {
    position: absolute;
    display: none;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: left;
    background: rgba(20, 24, 31, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    color: #fff;
    font: 500 13px/1.45 var(--ff-ui);
    max-width: 250px;
    animation: chipfloat 7s ease-in-out infinite alternate;
}
@media (min-width: 1280px) {
    .cta-float {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js .hi,
    .chaos.in .chaos-tile,
    .orbit-wrap.in .orbit-chip,
    .step-pane.on .m-seq,
    .step-pane.on .mbar > span,
    .step-pane.on .mthumb,
    .step-pane.on .mcell .mdot,
    .step-pane.on .mcol,
    .step-pane.on .step-copy,
    .step-pane.on .step-mock,
    .cta-float,
    .step-dot.on::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .step-pane.on .mbar > span {
        transform: scaleX(var(--w, 1)) !important;
    }
    .step-pane.on .mcol {
        transform: scaleY(1) !important;
    }
}

/* ============ marketing imagery layer (2026-06-10 redesign) ============ */

/* the employee, centered — portrait card + floating capability chips */
.orbit-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 28px 0;
}
.orbit-img {
    width: min(360px, 78%);
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(74, 202, 209, 0.22),
        0 0 0 1.5px rgba(255, 255, 255, 0.06),
        0 38px 110px -22px rgba(21, 170, 155, 0.55),
        0 24px 70px rgba(0, 0, 0, 0.55);
}
.orbit-chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.orbit-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    white-space: nowrap;
    pointer-events: auto;
    font: 600 13px/1 var(--ff-ui);
    color: #fff;
    background: rgba(14, 17, 23, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    animation: chipfloat var(--fd, 6.5s) ease-in-out infinite alternate;
    transition:
        border-color 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        background 0.35s var(--ease);
}
.orbit-chip:hover {
    border-color: rgba(74, 202, 209, 0.7);
    background: rgba(14, 17, 23, 0.82);
    box-shadow: 0 12px 40px rgba(21, 170, 155, 0.35);
}
.orbit-chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grad);
}
@keyframes chipfloat {
    to {
        transform: translate3d(var(--dx, 6px), var(--dy, -12px), 0) rotate(var(--dr, 1deg));
    }
}
@media (max-width: 1023px) {
    .orbit-chips {
        position: static;
        pointer-events: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }
    .orbit-chip {
        position: static !important;
        animation: none;
    }
    .orbit-wrap {
        flex-direction: column;
        align-items: center;
        padding: 8px 0 0;
    }
}

/* roster persona cards */
.persona-card {
    background: #fff;
    border: 1px solid var(--ink-08);
    border-radius: var(--r-m);
    overflow: hidden;
}
.persona-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
.persona-ghost {
    border: 1.5px dashed var(--ink-25);
    border-radius: var(--r-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    min-height: 100%;
}

/* niche-fit self-check ticks (the "Why there's a waitlist" section) — teal, square (never pill), aligned to first text line */
.fit-tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--r-xs);
    background: var(--theme-soft);
    color: var(--theme);
    font-weight: 900;
    font-size: 12px;
}

/* reel cards — paused-UGC frames with real receipts */
.reel-card {
    position: relative;
    display: block;
    aspect-ratio: 9/16;
    border-radius: var(--r-m);
    overflow: hidden;
    background: #0a0c10;
}
.reel-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.reel-card:hover img {
    transform: scale(1.045);
}
.reel-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 12, 16, 0.22) 0%,
        transparent 26%,
        transparent 44%,
        rgba(10, 12, 16, 0.86) 100%
    );
}
.reel-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    font: 700 10px/1 var(--ff-ui);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(14, 17, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.reel-play {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 17, 23, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 16px;
    transition:
        transform 0.3s var(--ease),
        background 0.3s var(--ease);
}
.reel-card:hover .reel-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(21, 170, 155, 0.6);
}
.reel-meta {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    color: #fff;
}

/* avatar stack */
.avatar-stack {
    display: flex;
    align-items: center;
}
.avatar-stack img,
.avatar-stack .more {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #16191f;
    margin-left: -9px;
}
.avatar-stack img:first-child {
    margin-left: 0;
}
.avatar-stack .more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: 700 11px/1 var(--ff-ui);
}

/* horizontal snap rail on phones (roster, reels, timeline) */
@media (max-width: 767px) {
    .rail {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -24px;
        padding: 4px 24px 10px;
    }
    .rail::-webkit-scrollbar {
        display: none;
    }
    .rail > * {
        flex: 0 0 70%;
        scroll-snap-align: start;
    }
    .rail.rail-sm > * {
        flex: 0 0 46%;
    }
}

/* ── app-surface one-shot animations (dashboard/subpages — pop once, never loop) ── */
html.js .dpop {
    opacity: 0;
    animation: dpopin 0.5s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 0.06s);
}
@keyframes dpopin {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.dbar {
    overflow: hidden;
}
.dbar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad);
    transform-origin: left;
    transform: scaleX(0);
    animation: dbarfill 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
@keyframes dbarfill {
    to {
        transform: scaleX(var(--w, 1));
    }
}
.dcol {
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dcolup 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.07s);
}
@keyframes dcolup {
    to {
        transform: scaleY(1);
    }
}

/* ── mobile type scale + density (audit P1: first viewport sells, copy stays scannable) ── */
.cta-row {
    flex-wrap: wrap;
}
.sl-h {
    height: 560px;
}
@media (max-width: 640px) {
    section.py-28 {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    #H .py-16 {
        padding-top: 40px;
        padding-bottom: 48px;
    }
    #H .mk-display {
        font-size: 42px;
    }
    #H p.text-lg {
        font-size: 16px;
    }
    .mk-display.text-6xl {
        font-size: 46px;
    }
    .mk-display.text-8xl {
        font-size: 72px;
    }
    .sl-h {
        height: 480px;
    }
    .marquee-track {
        font-size: 12px;
    }
}

/* 8. guides — long-form SEO articles (server-rendered, brand-aligned long-form typography;
   tw.css is purged so prose styling lives here, not in new utility classes) */
.guide-prose {
    font-size: 16.5px;
    line-height: 1.78;
    color: var(--ink);
}
.guide-prose p {
    margin: 0 0 1.15em;
}
.guide-prose h2 {
    font: 700 26px/1.25 var(--ff-ui);
    letter-spacing: -0.01em;
    margin: 2em 0 0.65em;
}
.guide-prose ul,
.guide-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.25em;
}
.guide-prose li {
    margin: 0 0 0.55em;
}
.guide-prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(10, 12, 16, 0.3);
}
.guide-prose a:hover {
    text-decoration-color: var(--ink);
}
.guide-prose a.mk-flat,
.guide-prose a.mk-btn {
    text-decoration: none;
}
.guide-prose b {
    color: var(--ink);
}
.guide-prose i {
    color: var(--ink-50);
}

/* ── /interview — the live pulsing orb (Maja's avatar in expanding rings).
   The "talk to her" motion made literal: avatar sits inside concentric rings that
   breathe outward (compositor-only transform/opacity, like .pdot's ping). The .gpulse
   glow goes BEHIND the orb in markup; these rings ride the orb's own edge. */
.iv-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.iv-orb .iv-face {
    position: relative;
    z-index: 2;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.14),
        0 20px 60px -10px rgba(21, 170, 155, 0.5);
}
/* the breathing teal halo immediately around the avatar */
.iv-orb::before {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(21, 170, 155, 0.55),
        rgba(74, 202, 209, 0.18) 55%,
        transparent 72%
    );
    animation: ivglow 4s ease-in-out infinite;
}
@keyframes ivglow {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}
/* expanding rings — three staggered, like a voice waveform radiating out */
.iv-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(74, 202, 209, 0.55);
    opacity: 0;
    animation: ivping 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}
.iv-ring.r2 {
    animation-delay: 1.06s;
}
.iv-ring.r3 {
    animation-delay: 2.13s;
}
@keyframes ivping {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70%,
    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iv-orb::before,
    .iv-ring {
        animation: none !important;
    }
    .iv-ring {
        display: none;
    }
}
html.lite .iv-orb::before,
html.lite .iv-ring {
    animation: none !important;
}
html.lite .iv-ring {
    display: none;
}
.offstage .iv-orb::before,
.offstage .iv-ring {
    animation-play-state: paused;
}

/* ============================================================
   marketing subpages layer (2026-06-16) — brings product / pricing /
   security / about / legal / login up to the landing's system: shared
   hero seam, richer feature cards, structured legal layout. Lives here
   (not tw.css) because tw.css is purged and frozen.
   ============================================================ */

/* page hero → sheet seam: the next (light) section slides up over the dark hero,
   killing the hard flashbang cut exactly like the landing's .sheet-top sections.
   The hero gets a little extra bottom room so the seam never clips the sub copy. */
.page-hero {
    padding-bottom: 28px;
}
.page-hero + section,
.page-hero + main > section:first-child,
.page-seam {
    border-radius: 28px 28px 0 0;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

/* hero aside frame — the premium image / preview that sits beside hero copy on the
   two-column heroes (security image, login preview). Teal ring + deep glow, landing parity. */
.hero-aside {
    position: relative;
    border-radius: var(--r-m);
    overflow: hidden;
    display: block;
    width: 100%;
    box-shadow:
        0 0 0 1px rgba(74, 202, 209, 0.22),
        0 38px 110px -30px rgba(21, 170, 155, 0.5),
        0 24px 70px rgba(0, 0, 0, 0.5);
}
.hero-aside img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-aside .ha-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 16, 0.5) 100%);
    pointer-events: none;
}
/* floating spec chip on the hero aside (mirrors landing's .hero-float, but inline-positioned) */
.ha-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 11px;
    font: 600 12.5px/1 var(--ff-ui);
    color: #fff;
    background: rgba(14, 17, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

/* feature cards (security, "every salary includes" grids) — flat cards that lift, with a
   tinted icon plate. One class, used wherever the landing would use a quiet card grid. */
.sec-card {
    background: #fff;
    border: 1px solid var(--ink-08);
    border-radius: var(--r-m);
    padding: 28px;
    transition:
        transform 0.28s var(--ease),
        box-shadow 0.28s var(--ease),
        border-color 0.28s var(--ease);
}
.sec-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: rgba(21, 170, 155, 0.3);
}
.sec-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: var(--theme-soft);
    color: var(--theme);
    box-shadow: inset 0 0 0 1px rgba(21, 170, 155, 0.18);
}

/* ── legal pages — structured, scannable, branded (no more wall-of-text) ── */
.legal-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .legal-wrap {
        grid-template-columns: 220px 1fr;
        gap: 56px;
        align-items: start;
    }
}
/* sticky table of contents (desktop) */
.legal-toc {
    position: relative;
}
@media (min-width: 1024px) {
    .legal-toc {
        position: sticky;
        top: 92px;
    }
}
.legal-toc .toc-label {
    margin-bottom: 14px;
}
.legal-toc a {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ink-50);
    font: 500 13.5px/1.35 var(--ff-ui);
    border-left: 2px solid transparent;
    transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease);
}
.legal-toc a:hover {
    color: var(--ink);
    background: var(--look-offwhite);
}
.legal-toc a.tnum {
    color: var(--theme);
    font-weight: 700;
}
/* numbered legal section cards */
.legal-sec {
    scroll-margin-top: 92px;
    padding-top: 28px;
    border-top: 1px solid var(--ink-08);
}
.legal-sec:first-child {
    border-top: 0;
    padding-top: 0;
}
.legal-sec h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font: 900 21px/1.2 var(--ff);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.legal-sec .ls-num {
    flex: 0 0 auto;
    font: 900 14px/1 var(--ff-ui);
    color: var(--theme);
    width: 24px;
}
.legal-sec p {
    color: var(--ink-50);
    font-size: 15.5px;
    line-height: 1.72;
    margin: 0;
    max-width: 62ch;
}
.legal-sec p a {
    color: var(--theme);
    font-weight: 600;
}
/* last-updated badge in the legal hero */
.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font: 600 12px/1 var(--ff-ui);
    color: rgba(255, 255, 255, 0.7);
}
.legal-badge .pdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme);
    display: inline-block;
}

/* shotwall — floating captioned screenshot collage ("everything Maja does") */
.shotwall {
    columns: 2;
    column-gap: 18px;
}
@media (max-width: 720px) {
    .shotwall {
        columns: 1;
    }
}
.shot {
    break-inside: avoid;
    margin: 0 0 14px;
    animation: shotbob var(--d, 7s) ease-in-out infinite alternate;
    will-change: transform;
}
.shotframe {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #15181d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    transform: rotate(var(--r, 0deg));
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
}
.shotframe:hover {
    transform: rotate(0deg) scale(1.035);
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.62);
    z-index: 30;
}
.shotframe img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.shotcap {
    padding: 13px 15px 15px;
}
.shotcap-h {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.shotcap-s {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 5px;
}
@keyframes shotbob {
    from {
        transform: translateY(2px);
    }
    to {
        transform: translateY(-9px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .shot {
        animation: none;
    }
}