/* ==========================================================================
   CRG Nexus marketing site, design tokens
   Palette: cobalt blue on white with cool blue-grey tints, matching the
   modern SaaS reference: one saturated brand blue, a very light blue wash
   for surfaces, near-black navy for headings, and a slate grey for body.
   Green/red appear only as metric deltas.
   ========================================================================== */

:root {
    /* brand */
    --blue:        #114A7E;   /* primary accent */
    --blue-hover:  #0D3C68;
    --blue-deep:   #032D4E;
    --blue-tint:   #EAF1F8;   /* icon chips, soft fills (navy-anchored) */
    --blue-tint-2: #CBDDEC;   /* borders on tinted surfaces */

    /* neutrals */
    --ink:         #0E1B33;   /* headings */
    --ink-soft:    #2B3A55;   /* strong body text */
    --slate:       #5B6880;   /* muted body text */
    --slate-light: #8794AB;
    --white:       #FFFFFF;
    --wash:        #F5F8FF;   /* page / section background wash */
    --wash-deep:   #EAF0FE;
    --line:        #E4EBF7;   /* hairlines, card borders */
    --line-soft:   #EFF3FA;

    /* status */
    --green:       #16A34A;
    --green-tint:  #E7F7EE;
    --red:         #E11D48;
    --red-tint:    #FEECF0;
    --amber:       #D97706;
    --amber-tint:  #FEF3E2;

    --font-sans: 'Inter', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    --shadow-xs:    0 1px 2px rgba(14, 27, 51, 0.05);
    --shadow-card:  0 2px 4px rgba(14, 27, 51, 0.04);
    --shadow-lift:  0 18px 40px -20px rgba(17, 74, 126, 0.35);
    --shadow-panel: 0 40px 80px -32px rgba(23, 44, 92, 0.42);
    --shadow-pop:   0 20px 45px -18px rgba(23, 44, 92, 0.28);

    --wrap: 1180px;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--white);
    color: var(--slate);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; }

.accent { color: var(--blue); }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 11px 20px;
    font-size: 0.94rem;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform 140ms var(--ease), background 140ms var(--ease),
                border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-lift); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-quiet { color: var(--ink); padding-left: 6px; padding-right: 6px; }
.btn-quiet:hover { color: var(--blue); }
.btn-white { background: var(--white); color: var(--blue-deep); }
.btn-white:hover { background: var(--blue-tint); }
.btn-ghost-inverse { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-ghost-inverse:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }

/* circular arrow that sits inside pill CTAs, as in the reference */
.btn-arrow {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 160ms var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn-ghost .btn-arrow, .btn-white .btn-arrow { background: var(--blue-tint); color: var(--blue); }
.play-badge {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--blue-tint); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(14,27,51,0.5); }
.header-row { display: flex; align-items: center; gap: 36px; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--blue); display: flex; }
.brand-name { font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.02em; }
.primary-nav { flex: 1; }
.primary-nav > ul { display: flex; gap: 6px; }
.primary-nav li { position: relative; }
.nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.94rem; font-weight: 500; color: var(--ink-soft);
    padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
    transition: color 140ms var(--ease), background 140ms var(--ease);
}
.nav-link:hover { color: var(--blue); background: var(--blue-tint); }
.nav-caret { transition: transform 180ms var(--ease); }
.nav-link[aria-expanded="true"] { color: var(--blue); background: var(--blue-tint); }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
    min-width: 300px; padding: 10px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column; gap: 2px;
}
/* invisible bridge over the 10px gap so moving the pointer from the trigger
   into the menu doesn't leave the <li> and snap it shut before you can click */
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-menu[hidden] { display: none; }
.nav-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); }
.nav-menu a:hover { background: var(--wash); }
.nav-menu strong { display: block; font-size: 0.92rem; color: var(--ink); font-weight: 600; }
.nav-menu span { display: block; font-size: 0.82rem; color: var(--slate); margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.sign-in { font-size: 0.94rem; font-weight: 500; color: var(--ink-soft); }
.sign-in:hover { color: var(--blue); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); display: block; border-radius: 2px; transition: transform 180ms var(--ease), opacity 140ms var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--line); padding: 18px 24px 26px; background: var(--white); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav a { display: block; padding: 10px 4px; font-weight: 500; color: var(--ink-soft); }
.mobile-nav .btn { margin-top: 8px; width: 100%; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 70px 0 96px; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: -30% -10% 30% -10%; z-index: -2;
    background:
        radial-gradient(ellipse 60% 55% at 72% 38%, rgba(17,74,126,0.16) 0%, transparent 62%),
        radial-gradient(ellipse 50% 50% at 18% 10%, rgba(17,74,126,0.08) 0%, transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, var(--wash) 65%, #FFFFFF 100%);
}
.hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 260px; z-index: -1;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
                      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
    mask-image: linear-gradient(180deg, transparent, #000 70%);
    opacity: 0.75;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: 48px; align-items: center; }

.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 6px 16px 6px 6px;
    font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 24px;
    box-shadow: var(--shadow-xs);
}
.pill-tag {
    background: var(--blue-tint); color: var(--blue-deep); font-weight: 700;
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.pill-link { color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.pill-link:hover { text-decoration: underline; }

.hero-copy h1 { font-size: clamp(2.3rem, 4.4vw, 3.35rem); line-height: 1.1; max-width: 14ch; }
.hero-sub { font-size: 1.08rem; color: var(--slate); margin-top: 22px; max-width: 44ch; }
.hero-ctas { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; align-items: center; }
.trust-bullets { display: flex; gap: 24px; margin-top: 30px; flex-wrap: wrap; font-size: 0.86rem; color: var(--slate); }
.trust-bullets li { display: flex; align-items: center; gap: 8px; }
.check-dot {
    width: 17px; height: 17px; border-radius: 50%; background: var(--blue);
    color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- app window (hero + scale panel) ---------- */
.hero-visual { position: relative; }
.orb {
    position: absolute; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle at 32% 28%, #7CA4FF 0%, #114A7E 45%, #1B3FA8 100%);
    box-shadow: 0 30px 60px -25px rgba(17,74,126,0.7);
}
.orb--lg { width: 150px; height: 150px; top: -46px; right: 14%; opacity: 0.92; }
.orb--sm { width: 66px; height: 66px; bottom: 18%; right: -22px; opacity: 0.85; }

.app-window {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}
.app-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--white);
}
.app-brand { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.app-brand svg { color: var(--blue); }
.app-title { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.app-search {
    flex: 1; max-width: 260px; margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    background: var(--wash); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 6px 12px;
    font-size: 0.76rem; color: var(--slate-light);
}
.app-search input {
    border: 0; background: none; outline: none; width: 100%;
    font: inherit; color: var(--ink-soft);
}
.app-icon-btn {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--slate); cursor: pointer; position: relative;
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.app-icon-btn:hover { background: var(--blue-tint); color: var(--blue); }
.app-icon-btn .dot-badge {
    position: absolute; top: 4px; right: 5px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--red); border: 1.5px solid var(--white);
}
.app-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #7CA4FF, #114A7E);
    color: var(--white); font-size: 0.72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.app-body { display: grid; grid-template-columns: 172px minmax(0, 1fr); }
.app-sidebar { border-right: 1px solid var(--line-soft); padding: 14px 12px; background: var(--white); display: flex; flex-direction: column; gap: 14px; }
.side-rail { display: flex; flex-direction: column; gap: 3px; }
.side-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 11px; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 500; color: var(--slate); cursor: pointer; text-align: left;
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.side-item svg { flex-shrink: 0; }
.side-item:hover { background: var(--wash); color: var(--ink); }
.side-item[aria-selected="true"] { background: var(--blue); color: var(--white); box-shadow: var(--shadow-lift); }
.side-upsell {
    margin-top: auto; background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: var(--white); border-radius: var(--radius-md); padding: 13px; font-size: 0.72rem;
}
.side-upsell strong { display: block; font-size: 0.8rem; margin-bottom: 3px; }
.side-upsell span { opacity: 0.82; display: block; margin-bottom: 9px; line-height: 1.4; }
.side-upsell .mini-btn {
    display: inline-block; background: var(--white); color: var(--blue-deep);
    font-weight: 700; font-size: 0.72rem; padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer;
}

/* Fixed height so switching tabs never changes the window size (which would
   otherwise re-flow the hero headline beside it). Panels scroll internally. */
.app-main { padding: 18px; background: var(--wash); height: 472px; overflow-y: auto; }
.app-main::-webkit-scrollbar { width: 7px; }
.app-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.app-view[hidden] { display: none; }
.app-view-head { margin-bottom: 14px; }
.app-view-head h4 { font-size: 0.98rem; }
.app-view-head p { font-size: 0.78rem; color: var(--slate); margin-top: 3px; }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric-tile {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
    cursor: pointer; text-align: left; width: 100%;
    transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.metric-tile:hover { border-color: var(--blue-tint-2); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.metric-tile[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.metric-label { font-size: 0.7rem; color: var(--slate); }
.metric-value { font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.metric-delta { font-size: 0.7rem; font-weight: 600; }
.metric-delta.up { color: var(--green); }
.metric-delta.down { color: var(--red); }

.panel-card {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px;
}
.panel-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-card-head h5 { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 0; }
.panel-card-head .muted { font-size: 0.72rem; color: var(--slate); }
.range-switch { display: flex; gap: 2px; background: var(--wash); border-radius: var(--radius-pill); padding: 3px; }
.range-switch button {
    font-size: 0.68rem; font-weight: 600; color: var(--slate);
    padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.range-switch button[aria-pressed="true"] { background: var(--white); color: var(--blue); box-shadow: var(--shadow-xs); }

/* interactive line chart */
.chart-wrap { position: relative; }
.line-chart { width: 100%; height: 128px; display: block; overflow: visible; }
.line-chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.line-chart .area { fill: url(#chartFill); }
.line-chart .line { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.line-chart .hit { fill: transparent; cursor: pointer; }
.line-chart .node { fill: var(--white); stroke: var(--blue); stroke-width: 2; opacity: 0; transition: opacity 120ms var(--ease); }
.line-chart .point.is-active .node, .line-chart .point:hover .node { opacity: 1; }
.line-chart .marker-line { stroke: var(--blue-tint-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.line-chart .point.is-active .marker-line { opacity: 1; }
.chart-tooltip {
    position: absolute; transform: translate(-50%, -120%); pointer-events: none;
    background: var(--ink); color: var(--white); font-size: 0.7rem; font-weight: 600;
    padding: 5px 9px; border-radius: var(--radius-sm); white-space: nowrap;
    opacity: 0; transition: opacity 120ms var(--ease); box-shadow: var(--shadow-pop);
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip span { display: block; font-weight: 500; opacity: 0.7; font-size: 0.64rem; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.64rem; color: var(--slate-light); }

/* rows / activity */
.row-list { display: flex; flex-direction: column; }
.row-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px;
    padding: 9px 6px; border-top: 1px solid var(--line-soft); width: 100%;
    font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; text-align: left;
    border-radius: var(--radius-sm);
    transition: background 140ms var(--ease);
}
.row-item:first-child { border-top: 0; }
.row-item:hover { background: var(--wash); }
.row-name { font-weight: 600; color: var(--ink); }
.row-meta { display: block; font-size: 0.7rem; color: var(--slate); font-weight: 400; margin-top: 2px; }
.status-chip { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); }
.status-chip.blue  { background: var(--blue-tint); color: var(--blue-deep); }
.status-chip.green { background: var(--green-tint); color: var(--green); }
.status-chip.amber { background: var(--amber-tint); color: var(--amber); }
.status-chip.red   { background: var(--red-tint); color: var(--red); }
.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 92px; }
.progress-track { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--wash-deep); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--blue); width: var(--p, 0%); transition: width 700ms var(--ease); }
.progress-num { font-size: 0.68rem; font-weight: 700; color: var(--ink); }

.activity-list { display: flex; flex-direction: column; gap: 2px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); font-size: 0.78rem; }
.activity-item:hover { background: var(--wash); }
.activity-icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue-tint); color: var(--blue);
}
.activity-icon.green { background: var(--green-tint); color: var(--green); }
.activity-icon.amber { background: var(--amber-tint); color: var(--amber); }
.activity-text { color: var(--ink-soft); }
.activity-text span { display: block; font-size: 0.7rem; color: var(--slate); }
.activity-item time { margin-left: auto; font-size: 0.68rem; color: var(--slate-light); white-space: nowrap; }

/* ---------- trusted-by ---------- */
.trusted-by { padding: 46px 0 8px; background: var(--white); }
.trusted-label {
    text-align: center; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--slate-light); margin-bottom: 26px; font-weight: 600;
}
.logo-row { display: flex; justify-content: center; gap: 46px; flex-wrap: wrap; }
.logo-row li {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 1.02rem; color: var(--slate-light);
    letter-spacing: -0.01em; transition: color 160ms var(--ease);
}
.logo-row li:hover { color: var(--ink-soft); }
.logo-row svg { color: currentColor; }

/* ---------- section heads ---------- */
.section-head { max-width: 660px; margin: 0 auto 46px; text-align: center; }
.eyebrow {
    display: inline-block; background: var(--blue-tint); color: var(--blue-deep);
    font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.section-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); line-height: 1.18; }
.section-body { color: var(--slate); font-size: 1.02rem; margin-top: 14px; }

/* ---------- features ---------- */
.features { padding: 86px 0; background: var(--white); position: relative; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* each card sits in a .reveal wrapper; stretch both so a row stays even */
.feature-grid > * { display: flex; }
.feature-grid > * > .feature-card { flex: 1 1 auto; }
.feature-card {
    position: relative;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; text-align: left;
    cursor: pointer; width: 100%;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.feature-card:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.feature-card[aria-expanded="true"] { border-color: var(--blue); box-shadow: var(--shadow-pop); }
.feature-icon {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    background: var(--blue-tint); color: var(--blue); border-radius: var(--radius-md);
}
.feature-card h3 { font-size: 1.05rem; }
.feature-card p { color: var(--slate); font-size: 0.92rem; }
.feature-link { font-size: 0.86rem; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.feature-card:hover .feature-link .chev { transform: translateX(3px); }
.chev { transition: transform 160ms var(--ease); }
.feature-detail {
    border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 14px;
    display: flex; flex-direction: column; gap: 9px;
}
.feature-detail[hidden] { display: none; }
.feature-detail li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); }
.feature-detail .check-dot { margin-top: 2px; }

/* the connector dots from the reference grid */
.feature-grid { position: relative; }
.feature-card::after {
    content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--blue); opacity: 0.28; top: -14px; right: -14px;
}
@media (max-width: 720px) { .feature-card::after { display: none; } }

/* ==========================================================================
   Features value band, replaces the old app "peek" (which just re-showed the
   hero window). This SELLS the core loop instead of re-demoing the UI: every
   action becomes one balanced double-entry that flows to the reports and to
   every companion app, automatically. Marketing cobalt palette (this is
   chrome, not an app surface). Micro-animated, a packet travels each
   connector, nodes light in sequence, the balance chip pulses. All motion is
   switched off under prefers-reduced-motion by the global rule.
   ========================================================================== */
.fx-band {
    margin: 6px auto 62px; max-width: 1000px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--wash) 100%);
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-pop);
    padding: 32px 36px 30px;
}
.fx-band::before {
    content: ''; position: absolute; top: -45%; right: -12%; width: 360px; height: 360px;
    z-index: 0; pointer-events: none;
    background: radial-gradient(circle at 60% 40%, rgba(17,74,126,0.14), transparent 66%);
}
.fx-band::after {
    content: ''; position: absolute; bottom: -55%; left: -8%; width: 320px; height: 320px;
    z-index: 0; pointer-events: none;
    background: radial-gradient(circle at 40% 40%, rgba(139,92,246,0.10), transparent 68%);
}
.fx-band > * { position: relative; z-index: 1; }
.fx-band-lead {
    display: flex; align-items: center; justify-content: center; gap: 11px; text-align: center;
    font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 28px;
}
.fx-band-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex-shrink: 0;
    animation: liveDot 2.4s var(--ease) infinite;
}
.fx-band-foot {
    text-align: center; font-size: 0.9rem; color: var(--slate);
    margin-top: 26px; max-width: 60ch; margin-left: auto; margin-right: auto;
}

.fx-pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 4px; }
/* NB: use .fx-step, NOT .fx-node, .fx-node is already taken (line ~1560) by
   the tiny 24px approval-flow circle in the feature-card showcase; reusing it
   here let that later rule override the band and collapse it. */
.fx-step {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
    background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 15px; box-shadow: var(--shadow-card);
    animation: fxNodeGlow 6.4s var(--ease) infinite; animation-delay: var(--d, 0s);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.fx-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--blue-tint-2); }
.fx-step-ic {
    width: 46px; height: 46px; border-radius: var(--radius-md); margin-bottom: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue-tint); color: var(--blue);
    transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.fx-step:hover .fx-step-ic { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 18px -8px rgba(17,74,126,0.6); }
.fx-step strong { font-size: 0.94rem; color: var(--ink); }
.fx-step em { font-style: normal; font-size: 0.77rem; color: var(--slate); line-height: 1.4; max-width: 22ch; }
.fx-inbal {
    margin-top: 3px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--green); background: var(--green-tint); padding: 3px 10px; border-radius: var(--radius-pill);
    animation: pillPulse 2.6s var(--ease) infinite;
}
.fx-conn {
    position: relative; align-self: center; min-width: 40px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--blue-tint-2), var(--blue-tint));
}
.fx-packet {
    position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
    background: var(--blue); box-shadow: 0 0 0 4px rgba(17,74,126,0.14);
    transform: translate(-50%, -50%); animation: fxPacket 2.9s var(--ease) infinite;
}
.fx-conn:nth-of-type(2) .fx-packet { animation-delay: 0.5s; }
.fx-conn:nth-of-type(3) .fx-packet { animation-delay: 1s; }
@keyframes fxPacket { 0% { left: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fxNodeGlow {
    0%, 100% { box-shadow: var(--shadow-card); border-color: var(--line); }
    50%      { box-shadow: 0 16px 36px -20px rgba(17,74,126,0.5); border-color: var(--blue-tint-2); }
}

@media (max-width: 760px) {
    .fx-band { padding: 24px 18px 24px; }
    .fx-band-lead { font-size: 0.92rem; }
    .fx-pipe { grid-template-columns: 1fr; gap: 0; }
    .fx-step { padding: 16px 14px; }
    .fx-conn { width: 3px; height: 26px; min-width: 0; justify-self: center;
        background: linear-gradient(180deg, var(--blue-tint-2), var(--blue-tint)); }
    .fx-packet { animation-name: fxPacketV; }
    @keyframes fxPacketV { 0% { top: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
}

/* ==========================================================================
   Feature quick-nav, a compact index that previews the six features and
   jumps to each scene (replaces the old core-loop band).
   ========================================================================== */
.fnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 940px; margin: 2px auto 54px; }
.fnav-chip {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 8px 16px 8px 9px; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
    box-shadow: var(--shadow-xs);
    transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.fnav-chip:hover { border-color: var(--blue-tint-2); color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.fnav-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); flex-shrink: 0; transition: transform 200ms var(--ease); }
.fnav-chip:hover .fnav-ic { transform: scale(1.08) rotate(-4deg); }
.fnav-num { font-size: 0.7rem; font-weight: 800; color: var(--slate-light); }
.fnav-label { white-space: nowrap; }
@media (max-width: 560px) { .fnav { gap: 8px; margin-bottom: 40px; } .fnav-num { display: none; } .fnav-chip { padding: 7px 13px 7px 8px; font-size: 0.82rem; } }

/* ==========================================================================
   Features scrollytelling, one scene per feature. Each scene PINS its own app
   screen (position: sticky) while the copy scrolls beside it, then releases to
   the next scene. On mobile it collapses to a natural stacked flow (screen no
   longer pinned) so it scrolls with you and stays fully interactive. The AI
   chat and Auto-match demos are live (peekChat / featureFx).
   ========================================================================== */
.fstory { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 88px; align-items: start; }

/* narrative rail, tall steps; inactive dim, the active one brightens with an
   accent bar. These drive the shared window. */
.fstory-rail { display: flex; flex-direction: column; }
.fstory-step {
    position: relative; min-height: 74vh; padding: 22px 0 22px 22px; scroll-margin-top: 96px;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0.4; transition: opacity 420ms var(--ease);
}
.fstory-step:first-child { min-height: 60vh; padding-top: 2px; }
.fstory-step:last-child  { min-height: 62vh; }
.fstory-step.is-active { opacity: 1; }
.fstory-step::before {
    content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px;
    background: var(--blue); opacity: 0; transform: scaleY(0.5); transform-origin: top;
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.fstory-step.is-active::before { opacity: 1; transform: scaleY(1); }
.fstory-step h3 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.14; margin-bottom: 12px; }
.fstory-step > p { color: var(--slate); font-size: 1.04rem; line-height: 1.62; }
.fstory-step ul { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.fstory-step li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.fstory-step li .check-dot { margin-top: 3px; }

/* Features: the blue lives on the TEXT (heading, "Feature 0X" index, icon and
   the side rail), NEVER on the "module / mini version of the app" — the mock's
   frame accent + module chip are neutralised (below) so no feature colour paints
   onto the app screen. */
.fstory-step h3 { color: var(--blue); }
.fscene-index {
    display: inline-flex; align-items: center; margin-bottom: 15px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--blue-deep); background: var(--blue-tint); padding: 4px 11px; border-radius: var(--radius-pill);
}
.fscene-icon {
    width: 52px; height: 52px; border-radius: var(--radius-md); margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue-tint); color: var(--blue); box-shadow: var(--shadow-card);
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.fstory-step.is-active .fscene-icon { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(17,74,126,0.35); }
/* keep the accent OFF the mini-app mock: neutral frame edge + neutral module chip */
.fsc-frame { border-top-color: var(--line) !important; }
.fsc-chip { color: var(--slate) !important; background: var(--wash-deep) !important; }
.fscene-learn { margin-top: 22px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.94rem; font-weight: 600; color: var(--blue); }
.fscene-learn:hover { color: var(--blue-hover); }
.fscene-learn .chev { transition: transform 160ms var(--ease); }
.fscene-learn:hover .chev { transform: translateX(3px); }

/* position: sticky is broken by ANY ancestor with overflow: hidden, and
   .features has it (from the parallax-section group rule LATER in this file).
   Use overflow: clip, which still clips the decorative layers but is NOT a
   scroll container, so the window below can stick. NOTE the selector must be
   `section.features` (0,1,1): a plain `.features` (0,1,0) would lose the
   cascade to that later group rule and overflow:hidden would win again. */
section.features { overflow: clip; }

/* ONE window on the right, FOLLOWS the scroll (sticky), parked at the VERTICAL
   CENTRE of the viewport (top = 50vh − half the window height). Its screens
   crossfade with a subtle scale/opacity SETTLE as each feature centres. */
.fstory-stage { position: sticky; top: calc(50vh - 250px); }
.fstory-screens { position: relative; z-index: 1; height: 500px; }
.fscreen {
    /* per-feature accent, overridden by the .fsc-tone-* class (see below) */
    --fsc-accent: var(--blue); --fsc-accent-soft: var(--blue-tint); --fsc-accent-deep: var(--blue-deep);
    --fsc-glow: rgba(17, 74, 126, 0.22);
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.985); transform-origin: center 45%;
    transition: opacity 640ms var(--ease), transform 760ms var(--ease), visibility 0s linear 760ms;
}
.fscreen.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 620ms var(--ease), transform 780ms var(--ease);   /* gentle settle, small travel, long smooth ease, no snap */
}
.fsc-frame {
    position: relative;
    height: 100%; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--fsc-accent);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 1px 2px rgba(14,27,51,0.05), 0 26px 54px -28px rgba(14,27,51,0.32), 0 52px 96px -58px rgba(14,27,51,0.30);
    transition: box-shadow 500ms var(--ease);
}
/* macro settle, the window rises + overshoots a hair as its feature centres */
.fscreen.is-active .fsc-frame { animation: fscSettle 820ms var(--ease) both; }
@keyframes fscSettle {
    0%   { transform: translateY(12px) scale(0.984); }
    58%  { transform: translateY(-3px) scale(1.005); }
    100% { transform: none; }
}
.fsc-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: #fff; flex: 0 0 auto; }
.fsc-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.fsc-brand .app-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.fsc-dots { display: inline-flex; gap: 5px; }
.fsc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--wash-deep); display: inline-block; }
.fsc-chip { margin-left: auto; font-size: 0.64rem; font-weight: 700; color: var(--fsc-accent-deep); background: var(--fsc-accent-soft); padding: 4px 10px; border-radius: var(--radius-pill); }
.fscreen.is-active .fsc-chip { animation: fscChipPulse 2.8s var(--ease) 0.6s infinite; }
@keyframes fscChipPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--fsc-glow); } 50% { box-shadow: 0 0 0 5px transparent; } }
.fsc-body { flex: 1 1 auto; min-height: 0; padding: 20px; background: var(--wash); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.fsc-pagehead h5 { font-size: 0.94rem; color: var(--ink); }
.fsc-pagehead span { display: block; font-size: 0.72rem; color: var(--slate); margin-top: 2px; line-height: 1.4; }
.fsc-note { font-size: 0.72rem; color: var(--slate); margin-top: auto; }
.fsc-recon-do, .fsc-report-btn { cursor: pointer; border: 0; }

/* chat screen */
.fsc-body .peek-chat { gap: 11px; }
.fsc-body .peek-bubble { font-size: 0.82rem; }

/* reconciliation screen */
.fsc-recon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fsc-recon-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 4px rgba(31,41,55,0.05); }
.fsc-recon-h { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }
.fsc-recon-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; color: var(--ink-soft); padding: 6px 8px; border-radius: 7px; background: var(--wash); }
.fsc-recon-row.matched { background: var(--green-tint); color: var(--green); font-weight: 600; }
.fsc-recon-row .num { font-variant-numeric: tabular-nums; }
.fsc-recon-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fsc-recon-do { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--blue); padding: 7px 13px; border-radius: var(--radius-pill); box-shadow: 0 6px 14px -8px rgba(32,107,196,0.6); }

/* income-statement screen */
.fsc-stmt { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 4px rgba(31,41,55,0.05); }
.fsc-stmt-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px; font-size: 0.78rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }
.fsc-stmt-row:first-child { border-top: 0; }
.fsc-stmt-row .num { font-variant-numeric: tabular-nums; }
.fsc-stmt-row.sec { background: var(--wash); font-weight: 700; color: var(--ink); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.04em; }
.fsc-stmt-row.total { background: var(--blue); color: #fff; font-weight: 800; }
.fsc-stmt-row.total .num { color: #fff; }
.fsc-stmt-foot { display: flex; align-items: center; gap: 8px; }
.fsc-report-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: var(--blue); background: var(--blue-tint); padding: 7px 13px; border-radius: var(--radius-pill); }

/* multi-tenant screen */
.fsc-tenants { display: flex; flex-direction: column; gap: 8px; }
.fsc-tenant { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: 0 0 4px rgba(31,41,55,0.05); }
.fsc-tenant.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }
.fsc-tenant .app-cc-avatar { width: 36px; height: 36px; border-radius: 10px; }
.fsc-tenant .app-cc-avatar.tone-blue { background: var(--blue-tint); color: var(--blue-deep); }
.fsc-tenant-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fsc-tenant-mid b { font-size: 0.8rem; color: var(--ink); }
.fsc-tenant-mid em { font-style: normal; font-size: 0.66rem; color: var(--slate); }

/* roles/approvals screen */
.fsc-perm { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 4px rgba(31,41,55,0.05); }
.fsc-perm-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; gap: 6px; padding: 9px 13px; font-size: 0.74rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }
.fsc-perm-row:first-child { border-top: 0; }
.fsc-perm-row.head { background: var(--wash); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.fsc-perm-row.head span:not(:first-child) { text-align: center; }
.fsc-perm-row > span:first-child { font-weight: 600; color: var(--ink); }
.fsc-perm-row i { justify-self: center; width: 16px; height: 16px; border-radius: 5px; background: var(--wash-deep); position: relative; }
.fsc-perm-row i.on { background: var(--green); }
.fsc-perm-row i.on::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 900; }
.fsc-chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.fsc-chain-node { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; background: var(--blue-tint); color: var(--blue-deep); }
.fsc-chain-node.done { background: var(--green); color: #fff; }
.fsc-chain-arr { color: var(--slate-light); }

/* module-activation screen */
.fsc-packs { display: flex; flex-direction: column; gap: 11px; }
.fsc-pack-grp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fsc-pack-cat { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); width: 84px; flex-shrink: 0; }

/* ---------- per-feature accent tones ----------
   Each feature owns a distinct accent; the class is set on BOTH the .fscreen
   (frame edge, module chip) and the .fstory-aura (the backdrop behind it), so
   every showcased feature reads as its own scene. */
.fsc-tone-violet, .fstory-aura.tone-violet { --fsc-accent: #7c3aed; --fsc-accent-soft: #F1EBFF; --fsc-accent-deep: #5B21B6; --fsc-glow: rgba(124, 58, 237, 0.24); }
.fsc-tone-blue,   .fstory-aura.tone-blue   { --fsc-accent: #206bc4; --fsc-accent-soft: #E6F0FB; --fsc-accent-deep: #174E91; --fsc-glow: rgba(32, 107, 196, 0.24); }
.fsc-tone-teal,   .fstory-aura.tone-teal   { --fsc-accent: #0d9488; --fsc-accent-soft: #E1F5F2; --fsc-accent-deep: #0F766E; --fsc-glow: rgba(13, 148, 136, 0.24); }
.fsc-tone-cyan,   .fstory-aura.tone-cyan   { --fsc-accent: #0891b2; --fsc-accent-soft: #E1F3FA; --fsc-accent-deep: #0E7490; --fsc-glow: rgba(8, 145, 178, 0.24); }
.fsc-tone-amber,  .fstory-aura.tone-amber  { --fsc-accent: #d97706; --fsc-accent-soft: #FDF0DC; --fsc-accent-deep: #B45309; --fsc-glow: rgba(217, 119, 6, 0.24); }
.fsc-tone-rose,   .fstory-aura.tone-rose   { --fsc-accent: #e11d48; --fsc-accent-soft: #FDE6EC; --fsc-accent-deep: #BE123C; --fsc-glow: rgba(225, 29, 72, 0.22); }

/* ---------- unique backdrop per feature (behind the window) ----------
   A wider-than-window layer holding one .fstory-aura per feature; only the
   active one is shown (crossfade). Each is a soft accent glow + a couple of
   decorative shapes whose colour (and, via :nth-child, placement) differ, so
   no two feature scenes look the same. */
.fstory-aurae { position: absolute; inset: -74px -64px -56px; z-index: 0; pointer-events: none; }
.fstory-aura { position: absolute; inset: 0; opacity: 0; transform: scale(0.94); transition: opacity 720ms var(--ease), transform 1000ms var(--ease); }
.fstory-aura.is-active { opacity: 1; transform: none; }
.fstory-aura > span { position: absolute; display: block; }
.fsa-glow { inset: 8% 10%; border-radius: 46% 54% 57% 43% / 52% 48% 52% 48%; filter: blur(34px);
    background: radial-gradient(58% 54% at 50% 46%, var(--fsc-glow), transparent 72%); }
.fsa-ring { width: 128px; height: 128px; border-radius: 50%; border: 2px dashed var(--fsc-accent); opacity: 0.32; top: -30px; right: -14px; animation: fsaSpin 40s linear infinite; }
.fsa-dots { width: 132px; height: 132px; bottom: -22px; left: -26px; color: var(--fsc-accent); opacity: 0.3;
    background-image: radial-gradient(currentColor 1.5px, transparent 1.6px); background-size: 15px 15px; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.fsa-bar { width: 74px; height: 6px; border-radius: 6px; background: var(--fsc-accent); opacity: 0.5; bottom: 8%; right: -8px; }
@keyframes fsaSpin { to { transform: rotate(360deg); } }
/* placement variety across the six scenes */
.fstory-aura:nth-child(even) .fsa-ring { top: auto; right: auto; bottom: -26px; left: -20px; }
.fstory-aura:nth-child(even) .fsa-dots { bottom: auto; left: auto; top: -20px; right: -22px; }
.fstory-aura:nth-child(3n)   .fsa-glow { border-radius: 58% 42% 45% 55% / 46% 58% 42% 54%; inset: 6% 6% 12% 14%; }
.fstory-aura:nth-child(3n+1) .fsa-bar { bottom: auto; top: 6%; right: auto; left: -6px; }
.fstory-aura:nth-child(5) .fsa-dots, .fstory-aura:nth-child(2) .fsa-bar { display: none; }

/* ---------- staggered reveal of the window's content (macro → micro) ----------
   When a screen activates, its main blocks fade+rise in sequence, then the
   rows inside slide up a beat later, so the panel assembles itself. */
.fscreen .fsc-body > * { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 600ms var(--ease); }
.fscreen.is-active .fsc-body > * { opacity: 1; transform: none; }
.fscreen.is-active .fsc-body > *:nth-child(1) { transition-delay: 140ms; }
.fscreen.is-active .fsc-body > *:nth-child(2) { transition-delay: 220ms; }
.fscreen.is-active .fsc-body > *:nth-child(3) { transition-delay: 300ms; }
.fscreen.is-active .fsc-body > *:nth-child(4) { transition-delay: 380ms; }

.fscreen .fsc-recon-col, .fscreen .fsc-stmt-row, .fscreen .fsc-tenant,
.fscreen .fsc-perm-row, .fscreen .fsc-pack-grp,
.fscreen .peek-bubble, .fscreen .peek-chat-actions, .fscreen .peek-suggest {
    transform: translateY(10px); transition: transform 560ms var(--ease);
}
.fscreen.is-active .fsc-recon-col, .fscreen.is-active .fsc-stmt-row, .fscreen.is-active .fsc-tenant,
.fscreen.is-active .fsc-perm-row, .fscreen.is-active .fsc-pack-grp,
.fscreen.is-active .peek-bubble, .fscreen.is-active .peek-chat-actions, .fscreen.is-active .peek-suggest {
    transform: none;
}
.fscreen.is-active .fsc-stmt-row:nth-child(2) { transition-delay: 60ms; }
.fscreen.is-active .fsc-stmt-row:nth-child(3) { transition-delay: 110ms; }
.fscreen.is-active .fsc-stmt-row:nth-child(4) { transition-delay: 160ms; }
.fscreen.is-active .fsc-stmt-row:nth-child(5) { transition-delay: 210ms; }
.fscreen.is-active .fsc-stmt-row:nth-child(6) { transition-delay: 260ms; }
.fscreen.is-active .fsc-tenant:nth-child(2) { transition-delay: 70ms; }
.fscreen.is-active .fsc-tenant:nth-child(3) { transition-delay: 130ms; }
.fscreen.is-active .fsc-tenant:nth-child(4) { transition-delay: 190ms; }
.fscreen.is-active .fsc-perm-row:nth-child(2) { transition-delay: 70ms; }
.fscreen.is-active .fsc-perm-row:nth-child(3) { transition-delay: 120ms; }
.fscreen.is-active .fsc-perm-row:nth-child(4) { transition-delay: 170ms; }

/* micro-interactions, statement + reconciliation rows nudge on hover; the
   matched ledger rows breathe once when the recon scene lands. */
.fsc-stmt-row, .fsc-recon-row { transition: background 180ms var(--ease), transform 180ms var(--ease); }
.fsc-stmt-row:not(.sec):not(.total):hover, .fsc-recon-row:not(.matched):hover { transform: translateX(2px); background: var(--wash-deep); }
.fscreen.is-active .fsc-recon-row.matched { animation: fscMatchGlow 900ms var(--ease) 520ms both; }
@keyframes fscMatchGlow { 0% { box-shadow: inset 0 0 0 0 transparent; } 45% { box-shadow: inset 0 0 0 1px var(--green); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* the approval chain lights up node-by-node as the roles scene lands
   (nodes are nth-child 1/3/5 inside .fsc-chain, interleaved with arrows) */
.fscreen.is-active .fsc-chain-node { animation: fscNodePop 520ms var(--ease) both; }
.fscreen.is-active .fsc-chain-node:nth-child(1) { animation-delay: 360ms; }
.fscreen.is-active .fsc-chain-node:nth-child(3) { animation-delay: 480ms; }
.fscreen.is-active .fsc-chain-node:nth-child(5) { animation-delay: 600ms; }
@keyframes fscNodePop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- scroll snapping ----------
   The feature steps no longer snap — scrolling the module walkthrough is free
   (the scrollytelling active-detector + parallax still fire on plain scroll).
   `scroll-snap-type` stays on <html> because the product-page interactive stage
   (`.wk-stage`/`.wk-devstage`, see below) still snaps to centre; desktop +
   non-reduced-motion only. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    html { scroll-snap-type: y proximity; }
}

/* ---------- responsive: STACKED features (mobile-optimized) ----------
   The desktop "one sticky window that follows the scroll" is a desktop metaphor
   that overlapped the copy and clipped its content on phones (the reported bug).
   On mobile we instead show every feature's copy with ITS OWN screen inline,
   stacked — all content visible, nothing pinned, nothing overlapping. site.js
   `featureStory` relocates each .fscreen into its .fstory-step and flags the
   story `.is-stacked`; a no-JS fallback keeps the shared stage visible inline. */
@media (max-width: 900px) {
    .fstory { grid-template-columns: 1fr; gap: 0; }

    /* no-JS / pre-enhance fallback: don't pin the shared window, show it inline
       (first screen) above the readable steps rather than a broken sticky box. */
    .fstory:not(.is-stacked) .fstory-stage { position: static; top: auto; order: -1; margin-bottom: 26px; }
    .fstory:not(.is-stacked) .fstory-screens { height: auto; min-height: 300px; }
    .fstory-aurae { inset: -24px -18px -20px; }

    /* JS-enhanced stacked layout */
    .fstory.is-stacked .fstory-stage { display: none; }         /* screens moved inline */
    .fstory-rail { gap: 48px; }
    .fstory-step { min-height: 0; opacity: 1; padding-left: 16px; }
    /* the step's full-height rail stays off (it used to run down the app screen);
       the blue rail now lives on the copy wrapper, spanning only the TEXT. */
    .fstory-step::before { display: none; }
    .fstory.is-stacked .fstory-copy { position: relative; }
    .fstory.is-stacked .fstory-copy::before {
        content: ""; position: absolute; left: -16px; top: 2px; bottom: 2px;
        width: 3px; border-radius: 3px; background: var(--blue);
    }

    /* the relocated screen: static, full-width, no clipping */
    .fstory.is-stacked .fstory-step .fscreen {
        position: relative; inset: auto; z-index: auto;
        visibility: visible;
        /* 30px clearance so the clamped (≤10px) parallax drift can never let the
           mock rise over the "Learn more" link that sits above it in the step. */
        margin-top: 30px; pointer-events: auto; height: auto;
        /* SCROLLYTELLING reveal — opacity only on .fscreen because its transform
           is owned by parallax; the "rise" is done on .fsc-frame below. Hidden
           until the module scrolls in and JS flags the step .is-inview. */
        opacity: 0; transition: opacity 620ms var(--ease);
    }
    .fstory.is-stacked [data-fstep].is-inview .fscreen { opacity: 1; }
    .fstory.is-stacked .fscreen .fsc-frame { height: auto; transform: translateY(26px); transition: transform 780ms var(--ease); }
    .fstory.is-stacked [data-fstep].is-inview .fscreen .fsc-frame { transform: none; }
    /* the copy rises + fades in too (no parallax on it, so a transform is safe) */
    .fstory.is-stacked .fstory-copy { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease), transform 700ms var(--ease); }
    .fstory.is-stacked [data-fstep].is-inview .fstory-copy { opacity: 1; transform: none; }
    .fstory.is-stacked .fscreen .fsc-body { overflow: visible; }
    /* undo the desktop "hidden until active" entrance state for inline screens */
    .fstory.is-stacked .fscreen .fsc-body > *,
    .fstory.is-stacked .fscreen .fsc-recon-col,
    .fstory.is-stacked .fscreen .fsc-stmt-row,
    .fstory.is-stacked .fscreen .fsc-tenant,
    .fstory.is-stacked .fscreen .fsc-perm-row,
    .fstory.is-stacked .fscreen .fsc-pack-grp,
    .fstory.is-stacked .fscreen .peek-bubble,
    .fstory.is-stacked .fscreen .peek-chat-actions,
    .fstory.is-stacked .fscreen .peek-suggest { opacity: 1; transform: none; }
}
/* Reduced motion: skip the mobile scrollytelling reveal — show every module's
   copy + mock outright (no dependence on the .is-inview scroll trigger).
   `.is-stacked` only exists on mobile, so this is effectively mobile-scoped. */
@media (prefers-reduced-motion: reduce) {
    .fstory.is-stacked .fscreen,
    .fstory.is-stacked .fstory-copy,
    .fstory.is-stacked .fscreen .fsc-frame { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 560px) {
    .fstory.is-stacked .fscreen .fsc-recon { grid-template-columns: 1fr; }  /* stack recon cols on narrow phones */
    .fstory-step h3 { font-size: 1.3rem; }
}

/* ---------- scale / stats section ---------- */
.scale-section { padding: 86px 0; background: linear-gradient(180deg, var(--white) 0%, var(--wash) 45%, var(--white) 100%); }
.scale-grid { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 56px; align-items: center; }
/* The Stats panel reuses .app-window only for its skin, it must NOT inherit
   the hero/product window's fixed 600px height + flex column (that left a tall
   empty gap below the tiles and made the box look unjustified). Size to content. */
.scale-visual .app-window { height: auto; display: block; }
.scale-visual .tab-panel { min-height: 0; }

.tab-strip { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.tab-strip button {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 600; color: var(--slate);
    padding: 7px 13px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.tab-strip button:hover { background: var(--wash); color: var(--ink); }
.tab-strip button[aria-selected="true"] { background: var(--blue-tint); color: var(--blue-deep); }
.tab-panel { padding: 18px; background: var(--wash); }
.tab-panel[hidden] { display: none; }

.stat-tile-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.stat-label { display: block; font-size: 0.72rem; color: var(--slate); }
.stat-value { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-top: 4px; letter-spacing: -0.02em; }
.stat-delta { display: inline-block; font-size: 0.7rem; font-weight: 700; margin-top: 4px; }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }
.sparkline { width: 100%; height: 34px; margin-top: 8px; overflow: visible; }
.sparkline path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline.blue path  { stroke: var(--blue); }
.sparkline.green path { stroke: var(--green); }
.sparkline.red path   { stroke: var(--red); }

.scale-copy h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); line-height: 1.18; }
.scale-copy .section-body { margin-top: 18px; }
.check-list { margin: 26px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-soft); font-size: 0.98rem; }
.check-list .check-dot { margin-top: 3px; }

/* ---------- testimonials ---------- */
.testimonials { padding: 86px 0; background: var(--white); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.testimonial-card {
    margin: 0; background: var(--wash); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 26px;
    transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.testimonial-card:hover { border-color: var(--blue-tint-2); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.stars { display: flex; gap: 3px; color: var(--blue); margin-bottom: 14px; }
.testimonial-card blockquote { margin: 0 0 20px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.testimonial-card figcaption { display: flex; align-items: center; gap: 11px; font-size: 0.86rem; }
.t-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #7CA4FF, #114A7E); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem;
}
.t-author { font-weight: 700; color: var(--ink); display: block; }
.t-role { color: var(--slate); font-size: 0.82rem; }

/* ---------- cta banner ---------- */
.cta-banner { padding: 0 0 86px; background: var(--white); }
.cta-banner-inner {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    border-radius: var(--radius-xl); padding: 58px 56px;
    display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-lift);
}
.cta-banner-inner::before {
    content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
    right: -90px; top: -160px; background: rgba(255,255,255,0.09);
}
.cta-banner-inner::after {
    content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    right: 120px; bottom: -140px; background: rgba(255,255,255,0.07);
}
.cta-banner h2 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.2rem); max-width: 17ch; position: relative; }
.cta-banner p { color: rgba(255,255,255,0.82); margin-top: 14px; max-width: 44ch; position: relative; }
.cta-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); padding: 62px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; padding-bottom: 44px; }
.footer-brand .brand-name { color: var(--white); font-size: 1.15rem; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand .brand-mark { color: #7CA4FF; }
.footer-brand p { color: rgba(255,255,255,0.6); max-width: 32ch; font-size: 0.92rem; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgba(255,255,255,0.62); font-size: 0.9rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { color: rgba(255,255,255,0.5); font-size: 0.82rem; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7);
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.footer-social a:hover { background: var(--blue); color: var(--white); }

/* ---------- modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(14, 27, 51, 0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--white); border-radius: var(--radius-lg); max-width: 720px; width: 100%;
    box-shadow: var(--shadow-panel); overflow: hidden;
}
/* Entrance: the backdrop fades and the card pops in whenever a modal opens.
   Re-triggered by JS when the form "refreshes" into the success screen so it
   reads as a fresh modal. Flattened under reduced motion. */
.modal-backdrop:not([hidden]) { animation: nxModalBg .26s var(--ease) both; }
.modal-backdrop:not([hidden]) > .modal { animation: nxModalPop .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes nxModalBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxModalPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop:not([hidden]),
    .modal-backdrop:not([hidden]) > .modal { animation: none; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 1.05rem; }
.modal-close { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--slate); display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--wash); color: var(--ink); }
.modal-body { padding: 22px; }
.video-frame {
    aspect-ratio: 16 / 9; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #0E1B33 0%, #032D4E 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: rgba(255,255,255,0.85); font-size: 0.9rem;
}
.video-play {
    width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.16);
    display: inline-flex; align-items: center; justify-content: center; color: var(--white);
}
/* Watch-Demo video: fills the modal at 16:9, dark backing while it loads. */
.demo-video {
    display: block; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-md); background: #0E1B33; overflow: hidden;
}
.modal-note { font-size: 0.86rem; color: var(--slate); margin-top: 16px; }

/* ---------- toast (click feedback on demo CTAs) ---------- */
.toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
    background: var(--ink); color: var(--white); font-size: 0.86rem; font-weight: 500;
    padding: 12px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-panel);
    opacity: 0; pointer-events: none; z-index: 400;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- page transitions (every page: on load + on exit) ----------
   A cohesive whole-page motion layer. On LOAD the main content fades and rises
   in once; on internal navigation (EXIT) `body.is-leaving` fades + lifts it out
   just before the browser navigates (site.js `pageExit` sets the flag & delays
   the nav a beat). Both are flattened by the global prefers-reduced-motion rule. */
@keyframes pageEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
main#main-content { animation: pageEnter 640ms var(--ease) both; }
body.is-leaving main#main-content {
    opacity: 0;
    transform: translateY(-12px) scale(0.994);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
    animation: none;
}

/* ---------- error page ---------- */
.error-page { padding: 120px 0; text-align: center; }
.error-page h1 { font-size: 2rem; margin-bottom: 14px; }
.error-page a { color: var(--blue); font-weight: 600; }

/* ==========================================================================
   Hero window, same 3-D treatment as the Features peek: tilt to the pointer,
   a glow + gem-coloured shadow, and a shine sweep. No idle float here so the
   headline beside it stays visually calm.
   ========================================================================== */
.hero-visual { perspective: 1600px; }
/* Reads like the real admin app's boxed .page: a clean, neutral elevation
   (the app itself uses a subtle 0 4px 24px drop shadow), not a rainbow glow. */
.app-window {
    box-shadow:
        0 1px 2px rgba(14,27,51,0.05),
        0 18px 42px -24px rgba(14,27,51,0.30),
        0 40px 80px -48px rgba(14,27,51,0.34);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
    will-change: transform;
}
.hero-visual:hover .app-window {
    box-shadow:
        0 1px 2px rgba(14,27,51,0.06),
        0 24px 54px -22px rgba(14,27,51,0.34),
        0 46px 96px -48px rgba(32,107,196,0.30);
}
.app-shine { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: inherit; }
.app-shine::before {
    content: ''; position: absolute; top: -60%; left: 0; width: 26%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: sheen 8s var(--ease) infinite;
}

/* ==========================================================================
   Idle animations, the "New" pill, the "Modern Teams" accent, and primary
   buttons breathe gently so the page feels alive at rest. All are switched
   off under prefers-reduced-motion by the global rule near the top.
   ========================================================================== */
@keyframes pillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(17,74,126,0.0); transform: translateY(0); }
    50%      { box-shadow: 0 0 0 4px rgba(17,74,126,0.12); transform: translateY(-1px); }
}
.pill-tag { display: inline-block; animation: pillPulse 2.6s var(--ease) infinite; }

@keyframes accentShimmer { to { background-position: -220% center; } }
.hero-copy h1 .accent {
    /* Animated gradient on the rotating hero word (returned per brief), kept in
       the CRG navy/blue family so it stays anchored to the logo. */
    background: linear-gradient(100deg, var(--blue) 0%, #2f6fae 26%, #16b8c6 52%, #2f6fae 76%, var(--blue) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: accentShimmer 6s linear infinite;
}

/* typewriter headline, the rotating word sits on its OWN line so it can never
   re-flow the rest of the headline as its length changes while typing. The line
   is a FIXED single-line height (not min-height) and the whole wrap is nowrap, so
   neither a long word nor the trailing caret can ever spill onto a second line and
   bump the headline height as the word cycles. */
.type-wrap { display: block !important; width: 100%; white-space: nowrap; height: 1.15em; }
.type-text { white-space: nowrap; }
.type-caret {
    display: inline-block; width: 3px; height: 0.92em; margin-left: 5px;
    vertical-align: -0.08em; border-radius: 2px;
    background: linear-gradient(180deg, #8B5CF6, var(--blue));
    animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { display: none; } }

@keyframes btnGlow {
    0%, 100% { box-shadow: var(--shadow-lift); }
    50%      { box-shadow: 0 18px 40px -16px rgba(17,74,126,0.65), 0 0 22px -6px rgba(17,74,126,0.5); }
}
.btn-primary { animation: btnGlow 3.2s var(--ease) infinite; }
.btn-primary:hover { animation: none; box-shadow: 0 20px 46px -16px rgba(17,74,126,0.7); }

/* ==========================================================================
   Dashboard sneak-peek (Features section) + ambient motion
   The peek is drawn at a FIXED intrinsic size (--peek-w × --peek-h) and only
   ever scaled uniformly via --peek-scale (set in site.js). Because nothing
   inside uses fluid widths or viewport media queries, the internal layout can
   never re-wrap, it just shrinks as one piece. It also tilts to the pointer,
   floats when idle, and carries a glow, a gem-coloured shadow and a shine.
   ========================================================================== */
@keyframes peekFloat {
    0%, 100% { transform: scale(var(--peek-scale, 1)) translateY(0); }
    50%      { transform: scale(var(--peek-scale, 1)) translateY(-10px); }
}
@keyframes gemPulse {
    0%, 100% { opacity: 0.72; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.04); }
}
@keyframes sheen {
    0%   { transform: translateX(-120%) rotate(18deg); }
    58%  { transform: translateX(-120%) rotate(18deg); }
    100% { transform: translateX(560%) rotate(18deg); }
}
@keyframes liveDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}
@keyframes softGlow {
    0%, 100% { box-shadow: var(--shadow-card); }
    50%      { box-shadow: 0 10px 30px -14px rgba(17,74,126,0.35); }
}

.peek { margin: 4px auto 64px; --peek-w: 760px; --peek-h: 470px; --peek-scale: 1; }
.peek-eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--slate); margin-bottom: 30px;
}
.peek-live {
    width: 8px; height: 8px; border-radius: 50%; background: var(--green);
    animation: liveDot 2.4s var(--ease) infinite;
}

.peek-scene {
    perspective: 1600px;
    display: flex; justify-content: center;
    height: calc(var(--peek-h) * var(--peek-scale));
}
.peek-stage {
    position: relative;
    width: var(--peek-w); height: var(--peek-h);
    transform-origin: top center;
    transform: scale(var(--peek-scale));
    animation: peekFloat 7.5s var(--ease) infinite;
}
/* the gem-coloured shadow cast beneath the card */
.peek-stage::before {
    content: ''; position: absolute; inset: 8% 3% -14% 3%; z-index: -1;
    border-radius: 44px;
    background:
        radial-gradient(48% 60% at 28% 32%, rgba(17,74,126,0.55) 0%, transparent 70%),
        radial-gradient(46% 56% at 76% 38%, rgba(139,92,246,0.50) 0%, transparent 70%),
        radial-gradient(52% 52% at 56% 82%, rgba(34,211,238,0.42) 0%, transparent 72%);
    filter: blur(36px);
    animation: gemPulse 9s var(--ease) infinite;
}

/* the second card, offset up-and-right behind the front one */
.peek-ghost {
    position: absolute; inset: 0; z-index: 1;
    transform: translate(34px, -26px) scale(0.965);
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -34px rgba(23,44,92,0.5);
    opacity: 0.6; filter: blur(0.4px);
    display: flex; flex-direction: column; gap: 12px; padding: 26px;
}
.peek-ghost-bar { height: 12px; border-radius: var(--radius-pill); background: var(--wash-deep); }
.peek-ghost-bar:nth-child(1) { width: 60%; }
.peek-ghost-bar:nth-child(2) { width: 85%; }
.peek-ghost-bar:nth-child(3) { width: 45%; }

.peek-card {
    position: absolute; inset: 0; z-index: 2;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-panel), 0 0 0 1px rgba(17,74,126,0.06), 0 0 40px -12px rgba(17,74,126,0.28);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
    will-change: transform;
}
.peek-scene:hover .peek-card {
    box-shadow: var(--shadow-panel), 0 0 0 1px rgba(17,74,126,0.14), 0 0 60px -8px rgba(17,74,126,0.4);
}
/* shine sweep across the glass */
.peek-shine { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: inherit; }
.peek-shine::before {
    content: ''; position: absolute; top: -60%; left: 0; width: 30%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: sheen 7s var(--ease) infinite;
}

/* peek top bar */
.peek-top {
    display: flex; align-items: center; gap: 12px;
    height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line-soft);
}
.peek-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.peek-brand svg { color: var(--blue); }
.peek-tenant {
    display: inline-flex; align-items: center; gap: 6px; cursor: default;
    font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
    background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 4px 10px;
}
.peek-tenant-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.peek-search {
    flex: 1; display: inline-flex; align-items: center; gap: 7px;
    background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 5px 12px; font-size: 0.72rem; color: var(--slate-light); white-space: nowrap; overflow: hidden;
}
.peek-bell { position: relative; color: var(--slate); display: inline-flex; }
.peek-bell-dot { position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--white); }
.peek-ai {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #8B5CF6, #114A7E); color: var(--white);
    box-shadow: 0 4px 12px -4px rgba(139,92,246,0.7);
}

/* peek body: fixed rail + fluid-inside-fixed main */
.peek-body { display: grid; grid-template-columns: 152px 1fr; height: calc(var(--peek-h) - 46px); }
.peek-rail { border-right: 1px solid var(--line-soft); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.peek-nav {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.78rem; font-weight: 500; color: var(--slate);
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.peek-nav svg { flex-shrink: 0; }
.peek-nav:hover { background: var(--wash); color: var(--ink); }
.peek-nav[aria-selected="true"] { background: var(--blue); color: var(--white); box-shadow: var(--shadow-lift); }
.peek-modules { margin-top: auto; display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px dashed var(--line); }
.peek-modules span {
    font-size: 0.64rem; font-weight: 600; color: var(--slate-light);
    background: var(--wash); border-radius: var(--radius-sm); padding: 4px 8px;
}

.peek-main { padding: 16px; background: var(--wash); overflow: hidden; }
.peek-view[hidden] { display: none; }
.peek-view-head { margin-bottom: 12px; }
.peek-view-head h4 { font-size: 0.95rem; }
.peek-view-head span { display: block; font-size: 0.73rem; color: var(--slate); margin-top: 2px; }

.peek-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.peek-kpi {
    text-align: left; cursor: pointer; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
    transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.peek-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.peek-kpi[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.peek-kpi-l { font-size: 0.66rem; color: var(--slate); }
.peek-kpi-v { font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.peek-kpi-d { font-size: 0.66rem; font-weight: 700; }
.peek-kpi-d.up { color: var(--green); }
.peek-kpi-d.down { color: var(--red); }

.peek-panel-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
.peek-pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.peek-pc-head h5 { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.peek-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--slate); }
.peek-legend i { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }
.peek-legend i.rev { background: var(--blue); }
.peek-legend i.exp { background: var(--slate-light); }
.peek-chart { position: relative; height: 66px; }
.peek-chart .sparkline { position: absolute; inset: 0; width: 100%; height: 100%; }
.sparkline.slate path { stroke: var(--slate-light); stroke-dasharray: 3 3; }

.peek-activity { display: flex; flex-direction: column; gap: 4px; }
.peek-activity li { display: flex; align-items: center; gap: 9px; font-size: 0.74rem; color: var(--ink-soft); }
.peek-activity time { margin-left: auto; font-size: 0.66rem; color: var(--slate-light); }
.peek-ai-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--blue-tint); color: var(--blue); }
.peek-ai-ic.green { background: var(--green-tint); color: var(--green); }
.peek-ai-ic.blue { background: var(--blue-tint); color: var(--blue); }

.peek-table { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.peek-tr { display: grid; grid-template-columns: 1fr 0.8fr 1fr 1fr; gap: 8px; padding: 8px 12px; font-size: 0.74rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); align-items: center; }
.peek-tr:first-child { border-top: 0; }
.peek-th { background: var(--wash); font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.peek-tr .num { text-align: right; font-variant-numeric: tabular-nums; }
.peek-tr .mono { font-weight: 700; color: var(--ink); }
.peek-foot { margin-top: 10px; font-size: 0.72rem; color: var(--slate); display: flex; align-items: center; gap: 8px; }

.peek-rows { display: flex; flex-direction: column; gap: 6px; }
.peek-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; font-size: 0.76rem; transition: border-color 140ms var(--ease), transform 140ms var(--ease); }
.peek-row:hover { border-color: var(--blue-tint-2); transform: translateX(2px); }
.peek-row b { color: var(--ink); }
.peek-row em { display: block; font-style: normal; font-size: 0.68rem; color: var(--slate); margin-top: 1px; }

.peek-chip { font-size: 0.64rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--wash-deep); color: var(--ink-soft); }
.peek-chip.blue { background: var(--blue-tint); color: var(--blue-deep); }
.peek-chip.green { background: var(--green-tint); color: var(--green); }
.peek-chip.amber { background: var(--amber-tint); color: var(--amber); }

.peek-chat { display: flex; flex-direction: column; gap: 10px; }
.peek-bubble { font-size: 0.76rem; line-height: 1.45; padding: 10px 13px; border-radius: 14px; max-width: 85%; }
.peek-bubble.user { align-self: flex-end; background: var(--blue); color: var(--white); border-bottom-right-radius: 4px; }
.peek-bubble.ai { align-self: flex-start; background: var(--white); border: 1px solid var(--line); color: var(--ink-soft); border-bottom-left-radius: 4px; display: flex; gap: 8px; align-items: flex-start; }
.peek-chat-actions { display: flex; gap: 8px; align-self: flex-start; }
.peek-chat-actions .peek-chip { cursor: pointer; }

/* ambient shimmer + idle glow on the feature cards */
.feature-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.5) 48%, transparent 58%);
    background-size: 250% 100%; background-position: 150% 0;
    opacity: 0; transition: opacity 200ms var(--ease);
}
.feature-card:hover::before { opacity: 1; animation: cardSheen 900ms var(--ease); }
@keyframes cardSheen { from { background-position: 150% 0; } to { background-position: -80% 0; } }
.feature-icon { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.feature-card:hover .feature-icon { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(17,74,126,0.6); }

/* idle breathing glow on the ambient boxes */
.testimonial-card, .stat-tile { animation: softGlow 6s var(--ease) infinite; }
.testimonial-card:nth-child(2) { animation-delay: 1.2s; }
.testimonial-card:nth-child(3) { animation-delay: 2.4s; }
.stat-tile:nth-child(2) { animation-delay: 1s; }
.stat-tile:nth-child(3) { animation-delay: 2s; }

/* ==========================================================================
   Skeleton loading, a shimmering placeholder over the "app" surfaces (the
   hero dashboard and the Features peek) that fades out once the page has
   loaded and the charts are drawn. It sits ON TOP of the real, server-rendered
   content, so on a slow load the user sees structure immediately.
   ========================================================================== */
.app-window { position: relative; }
@keyframes skShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-layer {
    position: absolute; inset: 0; z-index: 20; border-radius: inherit;
    background: var(--white); padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    opacity: 1; visibility: visible; transition: opacity 420ms var(--ease), visibility 0s linear 420ms;
}
.skeleton-layer.sk-done { opacity: 0; visibility: hidden; }
.sk-bar, .sk-tile, .sk-block {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--wash-deep) 25%, var(--line-soft) 37%, var(--wash-deep) 63%);
    background-size: 200% 100%;
    animation: skShimmer 1.4s linear infinite;
}
.sk-bar { height: 14px; }
.sk-bar.sk-40 { width: 40%; } .sk-bar.sk-55 { width: 55%; } .sk-bar.sk-70 { width: 70%; } .sk-bar.sk-85 { width: 85%; }
.sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-tile { height: 58px; }
.sk-block { flex: 1; min-height: 90px; }

/* ==========================================================================
   Parallax, every section carries a set of decorative layers (.pfx) that
   drift as the section scrolls through the viewport (site.js, viewport-
   relative). Real content lives in .wrap, which is lifted above the layers,
   so nothing important ever moves. Disabled under reduced motion.
   ========================================================================== */
[data-parallax] { will-change: transform; }

/* keep real content above the decorative layers in every section */
.wrap { position: relative; z-index: 1; }

/* sections that host parallax layers must clip + stack them */
.trusted-by, .features, .scale-section, .testimonials, .cta-banner, .page-hero, .page-section {
    position: relative; overflow: hidden;
}

.pfx { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
/* blobs: softer colour wash (kept a touch crisper than before) */
.pfx.blob { border-radius: 50%; filter: blur(24px); }
.pfx.blob.blue   { background: radial-gradient(circle at 40% 35%, rgba(17,74,126,0.55), transparent 70%); opacity: 0.6; }
.pfx.blob.violet { background: radial-gradient(circle at 40% 35%, rgba(139,92,246,0.52), transparent 70%); opacity: 0.55; }
.pfx.blob.cyan   { background: radial-gradient(circle at 40% 35%, rgba(34,211,238,0.48), transparent 70%); opacity: 0.55; }
/* crisp shapes, sharp edges that read clearly as they parallax */
.pfx.ring { border-radius: 50%; border: 2px solid rgba(17,74,126,0.22); opacity: 0.8; }
.pfx.ring.violet { border-color: rgba(139,92,246,0.22); }
.pfx.ring.cyan { border-color: rgba(34,211,238,0.28); }
.pfx.ring.thick { border-width: 4px; }
.pfx.dots {
    border-radius: 14px; opacity: 0.7;
    background-image: radial-gradient(rgba(17,74,126,0.22) 1.8px, transparent 1.8px);
    background-size: 16px 16px;
}
.pfx.dot { border-radius: 50%; background: var(--blue); opacity: 0.5; box-shadow: 0 6px 16px -6px rgba(17,74,126,0.7); }
.pfx.dot.violet { background: #8B5CF6; box-shadow: 0 6px 16px -6px rgba(139,92,246,0.7); }
.pfx.dot.cyan { background: #22D3EE; box-shadow: 0 6px 16px -6px rgba(34,211,238,0.7); }
.pfx.chip {
    border-radius: var(--radius-pill); background: rgba(17,74,126,0.08);
    border: 1px solid var(--blue-tint-2); opacity: 0.85;
}
.pfx.square { border-radius: 8px; border: 2px solid rgba(17,74,126,0.20); opacity: 0.75; }
/* on dark surfaces (the CTA banner) the layers read in white */
.cta-banner .pfx.ring { border-color: rgba(255,255,255,0.3); }
.cta-banner .pfx.square { border-color: rgba(255,255,255,0.28); }
.cta-banner .pfx.dot { background: #fff; box-shadow: none; opacity: 0.6; }
.cta-banner .pfx.dots { background-image: radial-gradient(rgba(255,255,255,0.28) 1.8px, transparent 1.8px); }

/* ==========================================================================
   Context pages (Product / Solutions / Pricing / Security)
   ========================================================================== */
.page-hero { position: relative; padding: 84px 0 66px; overflow: hidden; text-align: center; }
.page-hero::before {
    content: ''; position: absolute; inset: -50% -10% 0 -10%; z-index: -1;
    background:
        radial-gradient(ellipse 62% 62% at 50% -6%, rgba(17,74,126,0.30) 0%, transparent 60%),
        radial-gradient(ellipse 42% 52% at 84% 16%, rgba(139,92,246,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 42% 52% at 14% 22%, rgba(34,211,238,0.14) 0%, transparent 62%),
        linear-gradient(180deg, #E9F1FF 0%, var(--wash) 58%, #FFFFFF 100%);
}
/* a soft blue grid fading in under the hero, echoing the home hero */
.page-hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 180px; z-index: -1;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
                      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 75%);
    mask-image: linear-gradient(180deg, transparent, #000 75%);
    opacity: 0.6;
}
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; max-width: 18ch; margin: 0 auto; }
.page-hero p { color: var(--slate); font-size: 1.06rem; margin: 20px auto 0; max-width: 56ch; }
.page-hero .hero-ctas { justify-content: center; }
.page-section { padding: 46px 0 24px; }
.page-section:last-of-type { padding-bottom: 86px; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; position: relative;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--blue-tint-2); }
.price-card.featured {
    border-color: var(--blue);
    box-shadow: var(--shadow-lift), 0 0 44px -18px rgba(17,74,126,0.5);
    animation: softGlow 6s var(--ease) infinite;
}
.price-badge {
    position: absolute; top: -11px; left: 22px; background: var(--blue); color: var(--white);
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.price-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.price-amt { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.price-amt small { font-size: 0.82rem; font-weight: 500; color: var(--slate); }
.price-desc { font-size: 0.86rem; color: var(--slate); min-height: 40px; }
.price-card ul { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 20px; }
.price-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); }
.price-card li .check-dot { margin-top: 2px; }
.price-card .btn { margin-top: auto; width: 100%; }
.price-best { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-deep); background: var(--blue-tint); align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 2px; }
.price-cycle { font-size: 0.74rem; color: var(--slate); margin-top: -4px; }
.price-foot { text-align: center; margin-top: 28px; font-size: 0.86rem; }
.price-foot code { background: var(--wash-deep); padding: 1px 6px; border-radius: 5px; font-size: 0.82em; }

/* billing period toggle */
.billing-toggle {
    display: inline-flex; gap: 4px; margin: 26px auto 0; padding: 5px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs);
}
.billing-toggle button {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; color: var(--slate);
    padding: 9px 20px; border-radius: var(--radius-pill);
    transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.billing-toggle button:hover { color: var(--ink); }
.billing-toggle button.is-active { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -8px rgba(17,74,126,0.7); }
.billing-save { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green); background: var(--green-tint); padding: 3px 8px; border-radius: var(--radius-pill); }
.billing-toggle button.is-active .billing-save { color: #fff; background: rgba(255,255,255,0.24); }

/* ---- upgrade steps ---- */
.upgrade-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.upgrade-step {
    position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.upgrade-step:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.upgrade-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), transparent 82%); }
.upgrade-num {
    position: absolute; top: 18px; right: 20px; font-size: 2.3rem; font-weight: 800; line-height: 1;
    color: var(--blue-tint-2); letter-spacing: -0.03em;
}
.upgrade-step h3 { font-size: 1.06rem; }
.upgrade-step p { color: var(--slate); font-size: 0.9rem; line-height: 1.55; }

/* ---- comparison table ---- */
.compare-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; background: var(--white); box-shadow: var(--shadow-card); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare-table th, .compare-table td { padding: 13px 16px; text-align: center; font-size: 0.86rem; }
.compare-table thead th { position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.82rem; font-weight: 700; z-index: 1; }
.compare-table thead th.cmp-hi { color: var(--blue-deep); }
.compare-table .cmp-feat { text-align: left; font-weight: 600; color: var(--ink-soft); white-space: normal; }
.compare-table tbody th.cmp-feat { font-weight: 500; }
.compare-table tbody tr:not(.cmp-group):hover td, .compare-table tbody tr:not(.cmp-group):hover th { background: var(--wash); }
.compare-table td.cmp-hi { background: rgba(17,74,126,0.045); }
.compare-table thead th.cmp-hi { background: var(--blue-tint); }
.cmp-group th {
    text-align: left; background: var(--wash); color: var(--slate);
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 9px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
    position: relative;
}
/* keep the category label (Access & security, Support, …) pinned while the tier
   columns scroll horizontally. `position: sticky` on the colspan <th> itself is
   unreliable in a border-collapse table, so we pin the inner label span instead. */
.cmp-group-lbl { position: sticky; left: 16px; display: inline-block; }
.cmp-yes { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.cmp-no { color: var(--slate-light); font-weight: 700; }
.cmp-val { font-weight: 600; color: var(--ink); }

/* ---- Comparison table mobile UX: keep the Feature column pinned while the tier
   columns scroll horizontally, so every row keeps its label. + a swipe hint. */
.compare-table .cmp-feat { position: sticky; left: 0; z-index: 2; background: var(--white); box-shadow: 1px 0 0 var(--line); }
.compare-table thead th.cmp-feat { z-index: 3; }
.compare-table tbody tr:not(.cmp-group):hover .cmp-feat { background: var(--wash); }
.compare-hint { display: none; }
@media (max-width: 720px) {
    .compare-table { min-width: 540px; }
    .compare-table th, .compare-table td { padding: 11px 9px; font-size: 0.8rem; }
    .compare-table .cmp-feat { max-width: 150px; }
    .compare-hint { display: block; text-align: right; font-size: 0.76rem; font-weight: 600; color: var(--slate); margin: 0 2px 8px; }
}

/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); overflow: hidden; transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.faq-item.is-open { border-color: var(--blue-tint-2); box-shadow: var(--shadow-card); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
    padding: 18px 20px; text-align: left; font-size: 1rem; font-weight: 600; color: var(--ink);
    transition: color 160ms var(--ease);
}
.faq-q:hover { color: var(--blue); }
.faq-ic {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue-tint); color: var(--blue); transition: transform 260ms var(--ease), background 200ms var(--ease);
}
.faq-item.is-open .faq-ic { transform: rotate(135deg); background: var(--blue); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq-a p { padding: 0 20px 18px; color: var(--slate); font-size: 0.94rem; line-height: 1.62; margin: 0; }

/* pricing, responsive */
@media (max-width: 900px) {
    .upgrade-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .billing-toggle { width: 100%; justify-content: center; }
    .billing-toggle button { flex: 1; justify-content: center; padding: 9px 12px; }
    .faq-q { font-size: 0.94rem; padding: 16px; }
}

/* ==========================================================================
   Shared marketing content managers, used across Security / Solutions /
   Pricing: an animated stat band (count-up), an interactive rows→detail
   showcase, and a stepped flow strip. All motion is reduced-motion-safe.
   ========================================================================== */

/* ---- stat band (count-up) ---- */
.statband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-cell {
    position: relative; overflow: hidden; text-align: center;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 20px;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.stat-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--blue-tint-2); }
.stat-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), transparent 78%); }
.stat-cell .feature-icon { margin: 0 auto 12px; }
.stat-num { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num .u { color: var(--blue); }
.stat-label { display: block; margin-top: 9px; font-size: 0.86rem; color: var(--slate); line-height: 1.45; }

/* ---- rows → detail showcase ---- */
.rsx { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 26px; align-items: start; }
.rsx-list { display: flex; flex-direction: column; gap: 8px; }
.rsx-row {
    position: relative; display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer; text-align: left;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 15px;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.rsx-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--blue); opacity: 0; transform: scaleY(0.4); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.rsx-row:hover { transform: translateX(3px); }
.rsx-row.is-active { border-color: var(--blue-tint-2); box-shadow: var(--shadow-card); }
.rsx-row.is-active::before { opacity: 1; transform: scaleY(1); }
.rsx-row-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); }
.rsx-row.is-active .rsx-row-ic { background: var(--blue); color: #fff; transform: scale(1.06); }
.rsx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rsx-row-main b { font-size: 0.96rem; color: var(--ink); }
.rsx-row-main em { font-style: normal; font-size: 0.79rem; color: var(--slate); }
.rsx-row-arrow { flex: 0 0 auto; color: var(--slate-light); transition: transform 200ms var(--ease), color 200ms var(--ease); }
.rsx-row.is-active .rsx-row-arrow { color: var(--blue); transform: translateX(3px); }

/* Right detail panel — same behaviour as the mobile view, on web too: the box
   SIZES TO THE ACTIVE panel's content and the active panel is simply SHOWN while
   the rest are hidden (a display toggle). No absolute stacking, no transforms, so
   the content can never shift lower and lower as you click through the layers. */
.rsx-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(162deg, var(--wash), #fff 68%); overflow: hidden; box-shadow: var(--shadow-card); }
.rsx-panel { display: none; padding: 34px 32px; flex-direction: column; gap: 12px; }
.rsx-panel.is-active { display: flex; animation: rsxFade 320ms var(--ease); }
@keyframes rsxFade { from { opacity: 0; } to { opacity: 1; } }
.rsx-p-ic { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--blue-tint); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.rsx-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); }
.rsx-panel h3 { font-size: 1.4rem; line-height: 1.18; }
.rsx-panel > p { color: var(--slate); font-size: 1rem; line-height: 1.65; }
.rsx-panel ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.rsx-panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.rsx-panel li .check-dot { margin-top: 2px; }
.rsx-chip { align-self: flex-start; font-size: 0.72rem; font-weight: 700; color: var(--blue-deep); background: #fff; border: 1px solid var(--blue-tint-2); padding: 5px 11px; border-radius: var(--radius-pill); font-family: ui-monospace, "Cascadia Code", monospace; }

/* ---- stepped flow strip (macro pop-in) ---- */
.flowstrip { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.flowstrip::before { content: ''; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-tint-2) 0 8px, transparent 8px 16px); }
.flow-node { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.flow-dot { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--blue-tint-2); color: var(--blue); box-shadow: var(--shadow-xs); transition: transform 500ms var(--ease), opacity 500ms var(--ease), box-shadow 240ms var(--ease); }
.flow-node:hover .flow-dot { box-shadow: 0 10px 22px -10px rgba(17,74,126,0.55); transform: translateY(-3px); }
.flow-num { position: absolute; top: -4px; right: calc(50% - 34px); width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.64rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.flow-node h4 { font-size: 0.9rem; margin-bottom: 4px; }
.flow-node p { font-size: 0.78rem; color: var(--slate); line-height: 1.45; }
/* pop-in when the wrapping .reveal becomes visible */
.reveal .flow-dot { opacity: 0; transform: scale(0.6); }
.reveal.is-visible .flow-dot { opacity: 1; transform: none; }
.reveal.is-visible .flow-node:nth-child(1) .flow-dot { transition-delay: 60ms; }
.reveal.is-visible .flow-node:nth-child(2) .flow-dot { transition-delay: 150ms; }
.reveal.is-visible .flow-node:nth-child(3) .flow-dot { transition-delay: 240ms; }
.reveal.is-visible .flow-node:nth-child(4) .flow-dot { transition-delay: 330ms; }
.reveal.is-visible .flow-node:nth-child(5) .flow-dot { transition-delay: 420ms; }
.reveal.is-visible .flow-node:nth-child(6) .flow-dot { transition-delay: 510ms; }

@media (max-width: 860px) {
    .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rsx { grid-template-columns: 1fr; }
    /* the base display-toggle already sizes the box to the active panel — the
       list just stacks above it here. */
    .flowstrip { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .flowstrip::before { display: none; }
}
@media (max-width: 520px) {
    .statband { grid-template-columns: 1fr; }
    .flowstrip { grid-template-columns: 1fr; }
    .rsx-panel { padding: 26px 22px; }
}

/* solutions split rows */
.solution-row {
    display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start;
    padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white); margin-bottom: 18px;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.solution-row:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); }
.solution-row .feature-icon { margin-bottom: 12px; }
.solution-row h3 { font-size: 1.15rem; margin-bottom: 6px; }
.solution-row .lede { color: var(--slate); font-size: 0.95rem; }
.solution-row ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.solution-row li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); }
.solution-row li .check-dot { margin-top: 2px; }

/* ==========================================================================
   Solutions page, expanded: value strip · industry carousel · companion apps
   · platform capabilities. Per-industry accent tones drive the carousel scene.
   ========================================================================== */
.sol-tone-violet  { --sol-accent: #7c3aed; --sol-accent-soft: #F3EEFF; --sol-accent-deep: #5B21B6; }
.sol-tone-blue    { --sol-accent: #114A7E; --sol-accent-soft: #E9F0FF; --sol-accent-deep: #032D4E; }
.sol-tone-teal    { --sol-accent: #0d9488; --sol-accent-soft: #E3F5F2; --sol-accent-deep: #0F766E; }
.sol-tone-emerald { --sol-accent: #059669; --sol-accent-soft: #E6F6EE; --sol-accent-deep: #047857; }
.sol-tone-amber   { --sol-accent: #d97706; --sol-accent-soft: #FDF1DD; --sol-accent-deep: #B45309; }
.sol-tone-rose    { --sol-accent: #e11d48; --sol-accent-soft: #FDE7EC; --sol-accent-deep: #BE123C; }

/* value overview strip */
.sol-overview-section { padding-top: 8px; }
.sol-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sol-ov-item {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.sol-ov-item:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.sol-ov-item .feature-icon { flex: 0 0 auto; }
.sol-ov-item b { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 3px; }
.sol-ov-item span { color: var(--slate); font-size: 0.86rem; line-height: 1.5; }

/* ---- industry carousel ---- */
/* The big carousel card tilts toward the pointer in 3-D, the SAME pointer-follow
   tilt the hero window uses: `.sol-carousel` is the [data-tilt-scene] (it holds
   the perspective) and `.sol-carousel-viewport` is the [data-tilt] child that
   rotates via --rx/--ry (set by site.js `tilt`). Rests flat when the pointer
   leaves; disabled under reduced motion / no-hover by the tilt module itself. */
.sol-carousel { position: relative; perspective: 1700px; }
.sol-carousel:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: var(--radius-xl); }
.sol-carousel-viewport {
    overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 240ms var(--ease);
    will-change: transform;
}
.sol-track { display: flex; align-items: stretch; }
.sol-track { transition: transform 620ms var(--ease); }
.sol-slide {
    flex: 0 0 100%; min-width: 100%;
    display: grid; grid-template-columns: 1.38fr 0.92fr;
    background: var(--white); border-top: 3px solid var(--sol-accent);
}
.sol-slide-main { padding: 38px 36px 34px; display: flex; flex-direction: column; gap: 13px; position: relative; }
.sol-slide-index { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--sol-accent-deep); opacity: 0.85; }
.sol-slide-ic { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--sol-accent-soft); color: var(--sol-accent); }
.sol-slide h3 { font-size: clamp(1.3rem, 2.4vw, 1.72rem); line-height: 1.14; }
.sol-slide-lede { color: var(--ink-soft); font-size: 1.02rem; font-weight: 600; }
.sol-slide-copy { color: var(--slate); font-size: 0.94rem; line-height: 1.65; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sol-chip {
    font-size: 0.76rem; font-weight: 600; color: var(--sol-accent-deep);
    background: var(--sol-accent-soft); border: 1px solid color-mix(in srgb, var(--sol-accent) 22%, transparent);
    padding: 6px 12px; border-radius: var(--radius-pill);
}
.sol-slide-cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.94rem; font-weight: 700; color: var(--sol-accent); align-self: flex-start; }
.sol-slide-cta:hover .chev { transform: translateX(3px); }

.sol-slide-aside {
    padding: 34px 30px; display: flex; flex-direction: column; gap: 14px;
    background: linear-gradient(165deg, var(--sol-accent-soft), #fff 78%);
    border-left: 1px solid var(--line);
}
.sol-aside-label { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sol-accent-deep); }
.sol-slide-aside ul { display: flex; flex-direction: column; gap: 11px; }
.sol-slide-aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4;
    opacity: 0; transform: translateY(8px); transition: opacity 460ms var(--ease), transform 460ms var(--ease); }
.sol-slide.is-active .sol-slide-aside li { opacity: 1; transform: none; }
.sol-slide.is-active .sol-slide-aside li:nth-child(1) { transition-delay: 200ms; }
.sol-slide.is-active .sol-slide-aside li:nth-child(2) { transition-delay: 280ms; }
.sol-slide.is-active .sol-slide-aside li:nth-child(3) { transition-delay: 360ms; }
.sol-slide.is-active .sol-slide-aside li:nth-child(4) { transition-delay: 440ms; }
.sol-slide-aside .check-dot { margin-top: 2px; }
.sol-runs { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.sol-runs-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--sol-accent-soft); color: var(--sol-accent); }
.sol-runs span { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.sol-runs b { font-size: 0.86rem; color: var(--ink); }

.sol-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.sol-nav {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer;
    transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.sol-nav:hover { border-color: var(--blue-tint-2); color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sol-nav:active { transform: translateY(0); }
.sol-nav-prev svg { transform: rotate(180deg); }
.sol-dots { display: flex; align-items: center; gap: 8px; }
.sol-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wash-deep); cursor: pointer; padding: 0; border: 0;
    transition: background 200ms var(--ease), width 240ms var(--ease); }
.sol-dot:hover { background: var(--blue-tint-2); }
.sol-dot.is-active { background: var(--blue); width: 26px; border-radius: var(--radius-pill); }

/* jump chips, quick-nav that drives the carousel */
.sol-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.sol-jump-chip {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 7px 15px 7px 8px; font-size: 0.84rem; font-weight: 600; color: var(--ink-soft);
    transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.sol-jump-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--sol-accent) 40%, var(--line)); color: var(--sol-accent-deep); }
.sol-jump-ic { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sol-accent-soft); color: var(--sol-accent); transition: transform 200ms var(--ease); }
.sol-jump-chip:hover .sol-jump-ic { transform: scale(1.08) rotate(-4deg); }
.sol-jump-chip.is-active { background: var(--sol-accent); border-color: var(--sol-accent); color: #fff; box-shadow: 0 8px 18px -10px var(--sol-accent); }
.sol-jump-chip.is-active .sol-jump-ic { background: rgba(255,255,255,0.22); color: #fff; }

/* auto-play progress bar under the viewport */
.sol-progress { display: block; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--wash-deep); overflow: hidden; }
.sol-progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); }
.sol-progress.is-animating i { transition: width linear; }
[data-carousel].is-paused .sol-progress i { transition: none; }
@media (prefers-reduced-motion: reduce) { .sol-progress { display: none; } }

/* play / pause toggle (CSS-drawn glyphs, no icon needed) */
.sol-play-glyph { position: relative; width: 15px; height: 15px; display: inline-block; }
.sol-play.is-playing .sol-play-glyph::before,
.sol-play.is-playing .sol-play-glyph::after {
    content: ''; position: absolute; top: 1px; bottom: 1px; width: 4px; border-radius: 2px; background: currentColor;
}
.sol-play.is-playing .sol-play-glyph::before { left: 2px; }
.sol-play.is-playing .sol-play-glyph::after { right: 2px; }
.sol-play.is-paused .sol-play-glyph::before {
    content: ''; position: absolute; top: 0; left: 3px;
    border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

/* ---- companion apps & capabilities cards ---- */
.sol-cards { display: grid; gap: 18px; }
.sol-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-card {
    position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 11px;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.sol-card:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.sol-card:hover .feature-icon { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(17,74,126,0.55); }
.sol-card h3 { font-size: 1.06rem; }
.sol-card p { color: var(--slate); font-size: 0.92rem; line-height: 1.55; }
.sol-card ul { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sol-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); }
.sol-card li .check-dot { margin-top: 2px; }
.sol-card-tag {
    position: absolute; top: 18px; right: 18px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--slate); background: var(--wash); padding: 4px 9px; border-radius: var(--radius-pill);
}
.sol-cap { gap: 9px; }
.res-card { text-decoration: none; }
.res-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--blue); padding-top: 4px; }
.res-card:hover .res-more .chev { transform: translateX(3px); }

/* solutions, responsive */
@media (max-width: 960px) {
    .sol-overview { grid-template-columns: 1fr; }
    .sol-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sol-slide { grid-template-columns: 1fr; }
    .sol-slide-aside { border-left: 0; border-top: 1px solid var(--line); }
    .sol-slide-main { padding: 28px 24px 26px; }
    .sol-cards-2, .sol-cards-3 { grid-template-columns: 1fr; }
    .sol-slide-copy { font-size: 0.9rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
    .app-body { grid-template-columns: 148px minmax(0, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .primary-nav, .header-actions { display: none; }
    /* logo stays on the left; hamburger clings to the far right */
    .header-row { justify-content: space-between; gap: 12px; }
    .nav-toggle { display: flex; margin-left: auto; }
    .hero { padding-top: 44px; }
    .hero-grid, .scale-grid { grid-template-columns: 1fr; gap: 44px; }
    .hero-copy h1, .hero-sub { max-width: none; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cta-banner-inner { padding: 40px 30px; }
}
@media (max-width: 720px) {
    .feature-grid { grid-template-columns: 1fr; }
    .app-body { grid-template-columns: 1fr; }
    .app-main { height: auto; overflow: visible; }
    .app-sidebar { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); gap: 6px; }
    .side-rail { flex-direction: row; }
    .side-item { width: auto; white-space: nowrap; }
    .side-upsell { display: none; }
    .app-search { display: none; }
    .stat-tile-row { grid-template-columns: 1fr; }
    .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr; }
    .logo-row { gap: 26px; }
    .row-item { grid-template-columns: minmax(0,1fr) auto; }
    .row-item .progress-cell { display: none; }
    .price-grid { grid-template-columns: 1fr; }
    .solution-row { grid-template-columns: 1fr; gap: 16px; }
    .solution-row ul { grid-template-columns: 1fr; }
}

/* ---------- responsive buttons ---------- */
@media (max-width: 560px) {
    /* CTA groups stack and go full-width; labels may wrap instead of overflowing */
    .hero-ctas, .cta-banner-actions { width: 100%; }
    .hero-ctas .btn, .cta-banner-actions .btn { width: 100%; }
    .btn { white-space: normal; text-align: center; padding-left: 16px; padding-right: 16px; }
    .btn-lg { padding: 13px 18px; font-size: 0.95rem; }
    .btn-arrow { width: 24px; height: 24px; }
    .peek-eyebrow { font-size: 0.68rem; letter-spacing: 0.08em; }
}
@media (max-width: 380px) {
    .btn { font-size: 0.9rem; gap: 8px; }
    .btn-arrow { display: none; } /* keep tiny buttons from wrapping their arrow */
}

/* ==========================================================================
   Product-accurate skin for the mock "app" surfaces
   The hero window, the Features peek and the phone screen all represent the
   REAL CRGNexus apps, so inside those surfaces we swap the marketing's cobalt
   palette for the actual product palette (Tabler): primary #206bc4, plus the
   app's success/danger/warning and its light-slate "boxed" greys. Because
   every inner rule already uses the palette tokens, re-pointing the tokens
   here re-skins the whole mock in one place, the surrounding marketing site
   keeps its own cobalt identity untouched.
   ========================================================================== */
.app-window, .peek-card, .phone-screen, .wk-tablet-screen, .fsc-frame {
    --blue:        #206bc4;   /* real app primary (custom-nav + MAUI Primary) */
    --blue-hover:  #1a5aa8;
    --blue-deep:   #15487f;
    --blue-tint:   #E6F0FB;   /* MAUI PrimarySoft-ish */
    --blue-tint-2: #C9DFF5;
    --green:       #2fb344;
    --green-tint:  #E7F6EA;
    --red:         #d63939;
    --red-tint:    #FBE9E9;
    --amber:       #f59f00;
    --amber-tint:  #FDF1DA;
    --info:        #17a2b8;
    /* cooler slate neutrals so the mocks match the real apps' Inter/Tabler +
       MAUI slate scale (body #1f2937, muted #64748b, borders #e2e8f0) */
    --ink:         #1b2534;
    --ink-soft:    #33415a;
    --slate:       #64748b;
    --slate-light: #94a3b8;
    --line:        #E2E8F0;
    --line-soft:   #EDF1F7;
    --wash:        #f5f7fb;   /* app content surface (≈ Tabler body-bg #f9fafb) */
    --wash-deep:   #E6ECF4;
}
.app-window .app-avatar,
.peek-card .peek-ai { background: linear-gradient(135deg, #4b90d9, #206bc4); }

/* Real admin-app card feel: hairline border + a faint rest shadow (Tabler's
   --tblr-shadow-card 0 0 4px rgba(31,41,55,.04)) rather than a flat outline. */
.app-window .panel-card,
.app-window .kpi-card,
.app-window .metric-tile,
.app-window .app-table,
.app-window .app-jgrid,
.app-window .app-acct,
.app-window .app-prod,
.app-window .app-steps {
    box-shadow: 0 0 4px rgba(31, 41, 55, 0.05);
}
/* ============ EXACT real-app motion (copied from CRGNexusApp site.css +
   nexus-ui.css): card lift + growing accent bar, the bouncy custom-nav pill,
   icon pop/tilt, primary-button sheen, dropdown settle, close-spin, chip pop.
   Scoped to the mock surfaces so the surrounding marketing site is untouched. */

/* Cards: the real .card:hover lifts 5px + a growing 3px primary accent bar
   (nexus-ui .card::before) with the exact hover shadow. */
.app-window .panel-card,
.app-window .kpi-card { position: relative; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.app-window .panel-card::before,
.app-window .kpi-card::before {
    content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
    background: var(--blue); transform: scaleY(0); transform-origin: top; opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); pointer-events: none;
}
.app-window .panel-card:hover,
.app-window .kpi-card:hover,
.app-window .metric-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}
.app-window .panel-card:hover::before,
.app-window .kpi-card:hover::before { transform: scaleY(1); opacity: 1; }
.app-window .app-quick:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -12px rgba(32, 107, 196, 0.20), 0 6px 12px -8px rgba(14, 27, 51, 0.07); }

/* Company picker: the real app deliberately DROPS the lift here — the side
   accent bar + a faint theme wash is the whole hover cue (nexus-ui
   .nx-company-cards .card:hover). */
.app-window .app-company-card { position: relative; }
.app-window .app-company-card::before {
    content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
    background: var(--blue); transform: scaleY(0); transform-origin: top; opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); pointer-events: none;
}
.app-window .app-company-card:hover::before { transform: scaleY(1); opacity: 1; }
.app-window .app-company-card { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); }
.app-window .app-company-card:hover {
    transform: translateY(-5px);
    background-color: rgba(32, 107, 196, 0.04);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* Nav items: the exact "bouncy" custom-nav-trigger — icon scale(1.2) rotate(-5deg)
   + primary tint, label bolds + turns primary, and a spring-up active pill. */
.app-window .app-menu-item { position: relative; }
.app-window .app-menu-item svg:first-child,
.app-window .app-menu-item > span { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.app-window .app-menu-item:hover svg:first-child { transform: scale(1.2) rotate(-5deg); color: var(--blue); }
.app-window .app-menu-item:hover > span { color: var(--blue); font-weight: 600; }
/* Active tab is NEUTRAL (no blue): bold ink label, ink-soft icon at scale, and a
   neutral springy underline pill — the blue is reserved for hover only. */
.app-window .app-menu-item.is-active > span { color: var(--ink); font-weight: 600; }
.app-window .app-menu-item.is-active svg:first-child { color: var(--ink-soft); transform: scale(1.1); }
.app-window .app-menu-item.is-active::after {
    content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    height: 3px; width: 24px; background: var(--ink-soft); border-radius: 4px 4px 0 0;
    animation: activePillSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes activePillSpring {
    0%   { opacity: 0; width: 0; transform: translate(-50%, 8px); }
    100% { opacity: 1; width: 24px; transform: translate(-50%, 0); }
}

/* Dropdowns settle in (the real nx-dd-in) and items nudge on hover. */
.app-window .app-wsmenu:not([hidden]),
.app-window .app-tenant-menu:not([hidden]),
.app-window .app-user-pop:not([hidden]) { animation: nxDdIn 0.18s var(--ease) both; }
@keyframes nxDdIn { 0% { opacity: 0; transform: translateY(-6px) scale(0.98); } 100% { opacity: 1; transform: none; } }
.app-window .app-wsitem { transition: background 0.14s var(--ease), color 0.14s var(--ease), padding-left 0.16s var(--ease); }
.app-window .app-wsitem:hover { padding-left: 15px; }

/* Primary buttons get the soft sheen sweep on hover (the real .btn-primary::after). */
.app-window .app-login-btn,
.app-window .app-btn.primary,
.app-window .peek-chip.blue,
.app-window .app-post-btn { position: relative; overflow: hidden; }
.app-window .app-login-btn::after,
.app-window .app-btn.primary::after,
.app-window .peek-chip.blue::after,
.app-window .app-post-btn::after {
    content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
    transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transition: left 0.55s var(--ease); pointer-events: none;
}
.app-window .app-login-btn:hover::after,
.app-window .app-btn.primary:hover::after,
.app-window .peek-chip.blue:hover::after,
.app-window .app-post-btn:hover::after { left: 140%; }

/* Micro: close (×) spins a quarter-turn on hover; status chips pop on row hover. */
.app-window .app-rw-wb { transition: transform 0.2s var(--ease), background 0.14s var(--ease); }
.app-window .app-rw-wb:hover { transform: rotate(90deg); }
.app-window .app-trow:hover .status-chip,
.app-window .row-item:hover .status-chip { transform: scale(1.06); transition: transform 0.16s var(--ease); }

/* "Post voucher" action in the journals panel (a real, clickable post). */
.app-jfoot { display: flex; align-items: center; gap: 8px; }
.app-jfoot-note { color: var(--slate); }
.app-post-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 0;
    font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--blue); padding: 7px 13px;
    border-radius: var(--radius-pill); box-shadow: 0 6px 14px -8px rgba(32, 107, 196, 0.6);
    transition: background 0.16s var(--ease), transform 0.14s var(--ease), box-shadow 0.16s var(--ease);
}
.app-post-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(32, 107, 196, 0.7); }
.app-post-btn:active { transform: translateY(0); }
.app-post-btn.green { background: var(--green); box-shadow: 0 6px 14px -8px rgba(47, 179, 68, 0.6); }
.app-post-btn.fx-busy { opacity: 0.85; }

/* ---------- hero window: top navbar + horizontal menu (layout-boxed) ------ */
.app-topbar { gap: 10px; }
.app-brand span { letter-spacing: -0.01em; }
.app-company {
    display: inline-flex; align-items: center; gap: 6px; cursor: default;
    font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
    background: var(--wash); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 5px 10px; white-space: nowrap;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.app-company:hover { border-color: var(--blue-tint-2); }
.app-company svg { color: var(--slate-light); }
.app-company-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 3px rgba(47, 179, 68, 0.16);
}
.app-topbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.app-menubar {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    padding: 7px 12px; background: var(--white); border-bottom: 1px solid var(--line-soft);
    /* lifted above .app-main so the menu's dropdowns (which the wrap lets overflow
       downward) paint over the content below rather than behind it. */
    position: relative; z-index: 4;
}
/* Single-row module menu with chevron arrows — the real admin nav scroller. The
   menu pans on a transform; the wrap CLIPS it horizontally (so it never spills
   past the window) but keeps overflow-y visible so the dropdowns still open. */
.wsnav-wrap { flex: 1 1 auto; min-width: 0; overflow-x: clip; overflow-y: visible; }
.wsnav-wrap .ns-chev { width: 30px; }
.wsnav-wrap .ns-chev.prev { background: linear-gradient(90deg, #fff 62%, rgba(255,255,255,0)); }
.wsnav-wrap .ns-chev.next { background: linear-gradient(270deg, #fff 62%, rgba(255,255,255,0)); }
.app-menu { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; transition: transform 260ms var(--ease); will-change: transform; }
.app-menu-item {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 11px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.8rem; font-weight: 600; color: var(--slate);
    transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.app-menu-item svg { flex-shrink: 0; color: var(--slate-light); transition: color 140ms var(--ease); }
.app-menu-item:hover { background: var(--blue-tint); color: var(--blue); }
.app-menu-item:hover svg { color: var(--blue); }
.app-menu-item[aria-selected="true"] {
    background: transparent; color: var(--ink);
    box-shadow: none;
}
.app-menu-item[aria-selected="true"] svg { color: var(--ink-soft); }
.app-menu-extra { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.app-menu-ghost {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 11px; border-radius: var(--radius-sm);
    font-size: 0.8rem; font-weight: 600; color: var(--slate-light);
}
.app-menu-ghost svg { color: var(--slate-light); opacity: 0.8; }
.app-menu-ghost.ai { color: #7C5CF6; }
.app-menu-ghost.ai svg { color: #7C5CF6; opacity: 1; }
.app-gear { margin-left: auto; color: var(--slate-light); display: inline-flex; align-items: center; }

/* boxed dashboard body (grey frame + white cards), fixed height so switching
   tabs never re-flows the headline beside it */
.app-window .app-main { height: 424px; background: var(--wash); box-shadow: inset 0 1px 0 var(--line-soft); }
.app-window .metric-tile { border-radius: 14px; }
.app-window .panel-card { border-radius: 14px; }
.app-window .metric-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blue-tint), inset 0 2px 0 var(--blue); }

/* ---------- CTA loading micro-interaction (pre-register submit) ----------- */
.btn.is-loading, .btn.is-done { pointer-events: none; }
.btn-primary.is-loading, .btn-primary.is-done { animation: none; }
.btn-primary.is-done { background: var(--green); box-shadow: none; }
.btn-white.is-done { color: var(--green); }
.btn-check { display: inline-flex; align-items: center; justify-content: center; }
.btn-check svg { display: block; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-spinner {
    width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid currentColor; border-top-color: transparent; opacity: 0.9;
    animation: btnSpin 0.62s linear infinite;
}

/* ==========================================================================
   Mobile band, a faithful mock of the native CRGNexus.StaffApp (MAUI).
   The phone floats when idle and tilts to the pointer (shared modules), and
   its screen uses the same product palette as the desktop mocks above.
   ========================================================================== */
.mobile-section {
    padding: 86px 0; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--white) 0%, var(--wash) 48%, var(--white) 100%);
}
.mobile-grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 56px; align-items: center; }
.mobile-copy .eyebrow { margin-bottom: 16px; }
.mobile-copy h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); line-height: 1.18; }
.mobile-copy .section-body { margin-top: 16px; }
.mobile-copy .check-list { margin: 24px 0 30px; }
.mobile-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mobile-note { font-size: 0.82rem; color: var(--slate); }

.mobile-visual { display: flex; justify-content: center; }
.phone-wrap { perspective: 1500px; }
.phone { position: relative; animation: phoneFloat 7.5s var(--ease) infinite; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* gem-coloured glow beneath the phone, echoing the desktop peek */
.phone::before {
    content: ''; position: absolute; inset: 10% 2% -8% 2%; z-index: -1; border-radius: 60px;
    background:
        radial-gradient(46% 56% at 30% 30%, rgba(32,107,196,0.55) 0%, transparent 70%),
        radial-gradient(44% 52% at 74% 40%, rgba(139,92,246,0.45) 0%, transparent 70%),
        radial-gradient(50% 50% at 54% 82%, rgba(34,211,238,0.40) 0%, transparent 72%);
    filter: blur(34px); animation: gemPulse 9s var(--ease) infinite;
}
.phone-frame {
    position: relative; width: 296px; padding: 12px; background: #0E1B33;
    border-radius: 44px; box-shadow: var(--shadow-panel), 0 0 0 2px rgba(14,27,51,0.6) inset;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 220ms var(--ease);
    will-change: transform;
}
.phone-notch {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 120px; height: 22px; background: #0E1B33; border-radius: 0 0 16px 16px;
}
.phone-screen {
    position: relative; overflow: hidden; height: 588px; border-radius: 34px;
    background: #f3f5fa; display: flex; flex-direction: column;   /* StaffApp PageBackground */
}
/* StaffApp Dashboard hero = a floating rounded gradient CARD (RoundRectangle 18,
   padding 18,16, primary→deep gradient, soft primary shadow), not a full-bleed bar. */
.phone-hero {
    margin: 12px 14px 2px; padding: 18px 16px; border-radius: 18px;
    background: linear-gradient(135deg, #206bc4 0%, #174e91 100%);
    color: #fff; box-shadow: 0 8px 18px -6px rgba(32,107,196,0.45);
}
.phone-co { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #cfe2f7; }
.phone-hero h4 { color: #fff; font-size: 1.12rem; margin-top: 5px; }
.phone-date { display: block; font-size: 0.68rem; color: #9ec3ea; margin-top: 3px; }

.phone-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.phone-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone-kpi {
    background: var(--white); border-radius: 16px; padding: 13px 12px;   /* KpiCard: r16, pad 14,12 */
    box-shadow: 0 4px 12px -4px rgba(14,27,51,0.12);
}
.phone-chip {
    width: 34px; height: 34px; border-radius: 11px; font-size: 17px;   /* IconChip: 42×42 r12, scaled */
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wash-deep);
}
.phone-chip.green { background: #e6f4ea; }
.phone-chip.amber { background: #fdf2df; }
.phone-chip.blue  { background: var(--blue-tint); }
.phone-chip.purple { background: #f3e8f8; }
.phone-kpi .l { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-top: 9px; }
.phone-kpi .v { display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.phone-kpi .v.green { color: var(--green); }
.phone-kpi .v.amber { color: var(--amber); }
.phone-kpi .v.blue { color: var(--blue); }
.phone-kpi .v.purple { color: #ae3ec9; }

.phone-section-title { font-size: 0.72rem; font-weight: 700; color: var(--ink); margin: 4px 2px 0; }
.phone-leave { background: var(--white); border-radius: 14px; padding: 11px 12px; box-shadow: 0 3px 10px -6px rgba(14,27,51,0.16); }
.phone-leave-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.phone-leave-top strong { font-size: 0.78rem; color: var(--ink); }
.phone-leave-top span { font-size: 0.66rem; color: var(--slate); }
.phone-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--wash-deep); overflow: hidden; }
.phone-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--green); }
.phone-bar-fill.amber { background: var(--amber); }

.phone-tabbar {
    display: flex; justify-content: space-around; align-items: center;
    padding: 9px 6px 14px; background: var(--white); border-top: 1px solid var(--line);
}
.phone-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.54rem; font-weight: 600; color: var(--slate-light); }
.phone-tab svg { color: var(--slate-light); }
.phone-tab.active { color: var(--blue); }
.phone-tab.active svg { color: var(--blue); }

/* ---------- mobile band: responsive ---------- */
@media (max-width: 960px) {
    .mobile-grid { grid-template-columns: 1fr; gap: 40px; }
    .mobile-copy { text-align: center; }
    .mobile-copy .check-list { text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
    .mobile-ctas { justify-content: center; }
}
@media (max-width: 720px) {
    .app-menu-extra { display: none; } /* keep the mock's menu tidy on phones */
    .app-gear { display: none; }
}

/* ==========================================================================
   Global backdrop, a slow-drifting aurora mesh + a masked hairline grid,
   fixed behind everything so the whole site has depth as you scroll. The big
   white sections go transparent to let it read through; cards stay opaque so
   copy is always crisp. Reduced motion freezes the drift.
   ========================================================================== */
html { background: #FAFBFE; }
body { background: transparent; }
.site-bg { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; }
.site-bg-aurora {
    /* Anchored to the CRG navy logo, and kept minimal (lower opacity) per the
       "gradient maintained but at minimum" brief — a calm monochrome navy wash. */
    position: absolute; inset: -25%; opacity: 0.32; will-change: transform;
    background:
        radial-gradient(38% 40% at 18% 22%, rgba(17,74,126,0.24), transparent 70%),
        radial-gradient(34% 38% at 82% 14%, rgba(3,45,78,0.18), transparent 70%),
        radial-gradient(40% 44% at 70% 82%, rgba(47,111,174,0.16), transparent 72%),
        radial-gradient(36% 40% at 30% 88%, rgba(17,74,126,0.14), transparent 72%);
    filter: blur(40px); animation: auroraDrift 26s ease-in-out infinite;
}
@keyframes auroraDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2%, -2%, 0) scale(1.06); }
}
.site-bg-grid {
    position: absolute; inset: 0; opacity: 0.5;
    background-image:
        linear-gradient(rgba(14,27,51,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,27,51,0.035) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000, transparent 78%);
}
/* let the aurora read through the roomy sections; cards keep their own bg */
.trusted-by, .features, .testimonials, .cta-banner { background: transparent; }

/* ==========================================================================
   Peek workspace, reuse the hero window's top-nav + horizontal menu chrome,
   just a touch smaller for the peek's fixed canvas.
   ========================================================================== */
.peek-card .app-avatar { background: linear-gradient(135deg, #4b90d9, #206bc4); }
.peek-top .app-topbar-actions { gap: 8px; }
.peek-card .app-menubar.peek-menubar { padding: 6px 10px; }
.peek-card .app-menu-item, .peek-card .app-menu-ghost { font-size: 0.74rem; padding: 6px 9px; }
.peek-card .peek-main { height: calc(var(--peek-h) - 87px); }

/* ==========================================================================
   Feature cards, each gets a small product "showcase", and "Learn more"
   flips a details overlay ON TOP of the card (absolute) instead of growing
   it, so the card never changes size and the grid never reflows.
   ========================================================================== */
.feature-card { min-height: 356px; }
.feature-showcase { display: block; margin-top: 4px; }
.fx {
    border: 1px solid var(--line); border-radius: 12px; background: var(--wash);
    padding: 10px; display: flex; flex-direction: column; gap: 6px;
    font-size: 0.72rem; color: var(--ink-soft);
}
.fx b { color: var(--ink); }
.fx-badge, .fx-chip {
    align-self: flex-start; font-size: 0.62rem; font-weight: 700;
    padding: 3px 8px; border-radius: var(--radius-pill);
}
.fx-badge.green { background: var(--green-tint); color: var(--green); }
.fx-badge.blue  { background: var(--blue-tint); color: var(--blue-deep); }
.fx-badge.amber { background: var(--amber-tint); color: var(--amber); }
.fx-chip { background: var(--wash-deep); color: var(--ink-soft); }
.fx-chip.blue { background: var(--blue-tint); color: var(--blue-deep); }
/* chat */
.fx-chat .fx-bubble { padding: 6px 9px; border-radius: 10px; max-width: 92%; line-height: 1.35; }
.fx-bubble.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 3px; }
.fx-bubble.ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.fx-bubble.ai i { font-style: normal; font-weight: 800; color: var(--blue); margin-right: 4px; }
.fx-chips { flex-direction: row; }
/* reconcile */
.fx-match { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-col { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.fx-col em { display: block; font-style: normal; color: var(--slate); font-size: 0.64rem; }
.fx-link { color: var(--blue); font-size: 1.1rem; font-weight: 700; }
/* report doc */
.fx-doc .fx-row { flex-direction: row; justify-content: space-between; align-items: baseline; }
.fx-doc .fx-row.total { border-top: 1px solid var(--line); padding-top: 5px; margin-top: 1px; font-weight: 700; color: var(--ink); }
/* tenants */
.fx-tenant { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.fx-tenant em { display: block; font-style: normal; color: var(--slate); font-size: 0.62rem; }
.fx-tenant.ghost { opacity: 0.5; }
/* approval flow */
.fx-flow { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-node { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.6rem; }
.fx-node.done { background: var(--green); color: #fff; }
.fx-arrow { color: var(--slate-light); }
/* packs */
.fx-packs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.fx-pack { font-size: 0.64rem; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); color: var(--slate); }
.fx-pack.on { background: var(--blue-tint); border-color: var(--blue-tint-2); color: var(--blue-deep); }

/* the details overlay, covers the card face, no layout impact */
.feature-detail {
    position: absolute; inset: 0; z-index: 4; border: 0; border-radius: inherit;
    background: var(--white); padding: 26px 24px; margin: 0;
    display: flex; flex-direction: column; gap: 12px; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
}
.feature-card[aria-expanded="true"] .feature-detail {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.feature-detail-title { font-size: 1.02rem; color: var(--ink); }
.feature-detail ul { display: flex; flex-direction: column; gap: 9px; }
.feature-detail li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); }
.feature-detail-close { margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; }
.feature-detail-close svg { transform: rotate(180deg); }

/* ==========================================================================
   Punchier dashboard KPIs (hero window), read as real KPI cards so the
   numbers are the first thing that lands.
   ========================================================================== */
.app-window .metric-tile { position: relative; padding: 12px 13px 12px 15px; background: linear-gradient(180deg, #fff, #fbfdff); }
.app-window .metric-tile::after { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--blue); opacity: 0.5; }
.app-window .metric-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6rem; font-weight: 700; color: var(--slate); }
.app-window .metric-value { font-size: 1.32rem; }
.app-window .metric-delta { align-self: flex-start; margin-top: 1px; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 0.64rem; }
.app-window .metric-delta.up { background: var(--green-tint); }
.app-window .metric-delta.down { background: var(--red-tint); }

/* ==========================================================================
   Interactive phone, bottom tab bar switches full pages; grab to rotate.
   ========================================================================== */
.phone-wrap[data-rotate] { cursor: grab; }
.phone-wrap.is-grabbing { cursor: grabbing; }
.phone-wrap.is-grabbing .phone-frame { transition: none; }

.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 7px 18px 2px; font-size: 0.62rem; font-weight: 700; color: var(--ink); }
.phone-status-ic { display: inline-flex; align-items: center; gap: 3px; }
.phone-status-ic i { width: 3px; height: 8px; border-radius: 1px; background: var(--ink); opacity: 0.55; }
.phone-status-ic i:nth-child(2) { height: 10px; }
.phone-status-ic i:nth-child(3) { height: 6px; }
.phone-status-ic b { width: 16px; height: 9px; border: 1px solid var(--ink); border-radius: 2px; opacity: 0.55; }

.phone-tabpanels { position: relative; flex: 1; overflow: hidden; }
.phone-view { height: 100%; display: flex; flex-direction: column; }
.phone-view[hidden] { display: none; }

.phone-pagehead { padding: 12px 16px 6px; }
.phone-pagehead h4 { font-size: 1rem; }
.phone-pagehead span { display: block; font-size: 0.66rem; color: var(--slate); margin-top: 2px; }

.phone-card { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 11px 12px; box-shadow: 0 3px 10px -4px rgba(14,27,51,0.10); }   /* CardItem: r14, pad 14, soft shadow */
.phone-card-mid { flex: 1; min-width: 0; }
.phone-card-mid b { display: block; font-size: 0.78rem; color: var(--ink); }
.phone-card-mid em { font-style: normal; font-size: 0.66rem; color: var(--slate); }
.phone-card-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.phone-card-end b { font-size: 0.8rem; color: var(--ink); }
.phone-badge { font-size: 0.56rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); }
.phone-badge.green { background: #e6f4ea; color: var(--green); }
.phone-badge.amber { background: #fdf2df; color: var(--amber); }
.phone-badge.blue  { background: var(--blue-tint); color: var(--blue-deep); }
.phone-fab { align-self: center; margin-top: 2px; font-size: 0.66rem; font-weight: 700; color: var(--blue); background: var(--blue-tint); padding: 7px 15px; border-radius: var(--radius-pill); }

.phone-chartcard { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 3px 10px -6px rgba(14,27,51,0.16); }
.phone-chartcard-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.phone-chartcard-head strong { font-size: 0.74rem; color: var(--ink); }
.phone-chartcard-head span { font-size: 0.62rem; color: var(--slate); }
.phone-chartcard .sparkline { height: 48px; }

.phone-tab { border: 0; background: none; cursor: pointer; padding: 2px 4px; }
.phone-tab[aria-selected="true"] { color: var(--blue); }
.phone-tab[aria-selected="true"] svg { color: var(--blue); }

.mobile-hint { margin-top: 14px; font-size: 0.78rem; color: var(--slate); display: inline-flex; align-items: center; gap: 5px; }
.mobile-hint svg { color: var(--blue); }

/* ==========================================================================
   Pricing, plan icons, a glass shine sweep (idle on the featured plan),
   for a slicker, less templated feel.
   ========================================================================== */
.price-icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--blue-tint); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.price-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.price-shine::before {
    content: ''; position: absolute; top: -60%; left: 0; width: 24%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-160%) rotate(18deg);
}
.price-card:hover .price-shine::before { animation: sheen 950ms var(--ease); }
.price-card.featured .price-shine::before { animation: sheen 6s var(--ease) infinite; }

@media (max-width: 720px) {
    .feature-card { min-height: 0; }
}

/* ==========================================================================
   Interactive tenant switcher (multi-tenancy, live in the mock)
   ========================================================================== */
.app-company-wrap { position: relative; }
.app-tenant-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 194px;
    padding: 6px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column; gap: 2px;
}
.app-tenant-menu[hidden] { display: none; }
.app-tenant-item {
    display: flex; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
    padding: 7px 9px; border-radius: 8px; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft);
}
.app-tenant-item > span:not(.app-company-dot) { display: flex; flex-direction: column; }
.app-tenant-item .app-company-dot { margin-top: 4px; }
.app-tenant-item em { font-style: normal; font-weight: 500; font-size: 0.63rem; color: var(--slate); }
.app-tenant-item:hover { background: var(--wash); }
.app-tenant-item[aria-current="true"] { background: var(--blue-tint); color: var(--blue-deep); }

/* peek + hero dashboards scroll internally so nothing is cut off */
/* flex column so a wrapped (2-row) menu never clips the content below it */
.peek-card { display: flex; flex-direction: column; }
.peek-card .peek-top, .peek-card .peek-menubar { flex: 0 0 auto; }
.peek-card .peek-main { flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; }
.peek-card .peek-main::-webkit-scrollbar { width: 6px; }
.peek-card .peek-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
button.peek-chip { cursor: pointer; font: inherit; }
.peek-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ==========================================================================
   Phone: scrollable pages + in-phone bottom-sheet forms
   ========================================================================== */
.phone-body { overflow-y: auto; }
.phone-body::-webkit-scrollbar { width: 0; height: 0; }
button.phone-fab { border: 0; cursor: pointer; }
/* brand logo (crg-logo.png), replaces the inline SVG mark */
.brand-mark img { width: 30px; height: 30px; display: block; border-radius: 8px; object-fit: contain; }
.footer-brand .brand-mark img { width: 28px; height: 28px; }
.app-brand .app-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; display: inline-block; flex-shrink: 0; }
.peek-brand .app-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; display: inline-block; flex-shrink: 0; vertical-align: -3px; }

.phone-tabbar { gap: 0; padding-left: 4px; padding-right: 4px; }
.phone-tab { flex: 1; min-width: 0; }
.phone-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.phone-sheet-backdrop {
    position: absolute; inset: 0; z-index: 15; background: rgba(14,27,51,0.35);
    opacity: 0; transition: opacity 240ms var(--ease);
}
.phone-sheet-backdrop.is-open { opacity: 1; }
.phone-sheet-backdrop[hidden] { display: none; }
.phone-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 16;
    background: #fff; border-radius: 22px 22px 0 0; padding: 14px 16px 18px;
    box-shadow: 0 -12px 30px -12px rgba(14,27,51,0.4);
    transform: translateY(100%); transition: transform 260ms var(--ease);
}
.phone-sheet.is-open { transform: translateY(0); }
.phone-sheet[hidden] { display: none; }
.phone-sheet-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--wash-deep); margin: 0 auto 10px; }
.phone-sheet h5 { font-size: 0.9rem; margin-bottom: 10px; }
.phone-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.phone-field > span { font-size: 0.63rem; font-weight: 600; color: var(--slate); }
.phone-field input, .phone-field select {
    font: inherit; font-size: 0.76rem; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--wash); color: var(--ink); outline: none;
}
.phone-field input:focus, .phone-field select:focus { border-color: var(--blue); background: #fff; }
.phone-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-submit {
    width: 100%; margin-top: 4px; padding: 11px; border-radius: 12px;   /* PrimaryAction: r12, tall */
    background: var(--blue); color: #fff; font-weight: 700; font-size: 0.78rem; cursor: pointer;
    box-shadow: 0 5px 14px -4px rgba(32,107,196,0.45);
    transition: background 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.phone-submit:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(32,107,196,0.5); }
.phone-submit:active { transform: translateY(0); }

/* ==========================================================================
   Modal forms (Sign in · Pre-register · Contact sales)
   ========================================================================== */
.modal.modal-sm { max-width: 440px; }
.sign-in { background: none; border: 0; cursor: pointer; }
.linklike { font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; padding: 0; background: none; border: 0; }
.linklike:hover { text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
/* the explicit display:flex above beats the [hidden] attribute, so give it a real
   hide rule — otherwise the form stays visible behind the success "you're on the list" view */
.auth-form[hidden] { display: none; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.auth-field input, .auth-field select, .auth-field textarea {
    font: inherit; font-size: 0.92rem; padding: 11px 13px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--wash); color: var(--ink); outline: none; resize: vertical;
    transition: border-color 140ms var(--ease), background 140ms var(--ease), box-shadow 140ms var(--ease);
}
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus {
    border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px var(--blue-tint);
}
.auth-form .auth-submit { margin-top: 4px; width: 100%; }
.auth-fine { font-size: 0.78rem; color: var(--slate-light); text-align: center; }
.auth-alt { margin-top: 14px; font-size: 0.84rem; color: var(--slate); }
.auth-msg { margin-top: 12px; padding: 10px 12px; background: var(--amber-tint); color: var(--amber); border-radius: 10px; font-size: 0.84rem; font-weight: 500; }
.auth-msg[hidden] { display: none; }
.auth-plan { display: inline-block; margin-bottom: 14px; font-size: 0.8rem; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid var(--blue-tint-2); padding: 6px 12px; border-radius: var(--radius-pill); }
.auth-plan[hidden] { display: none; }
.auth-success { text-align: center; padding: 8px 0 4px; }
.auth-success[hidden] { display: none; }
.auth-success-logo { width: 38px; height: 38px; object-fit: contain; margin-bottom: 4px; }
.auth-success-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green-tint); color: var(--green); margin-bottom: 12px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent); }
.auth-success h4 { font-size: 1.15rem; margin-bottom: 6px; }
.auth-success p { color: var(--slate); font-size: 0.9rem; margin-bottom: 16px; }

/* Entrance animation when the success view is revealed (form -> done). Plays as the
   element flips from display:none (hidden) to shown; reduced-motion safe below. */
.auth-success:not([hidden]) { animation: authSuccessIn .5s cubic-bezier(.16,1,.3,1) both; }
.auth-success:not([hidden]) .auth-success-logo { animation: authSuccessIn .5s cubic-bezier(.16,1,.3,1) both; }
.auth-success:not([hidden]) .auth-success-ic { animation: authSuccessPop .55s cubic-bezier(.34,1.56,.64,1) both; }
.auth-success:not([hidden]) .auth-success-ic svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: authSuccessDraw .45s .2s ease forwards; }
@keyframes authSuccessIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes authSuccessPop { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
@keyframes authSuccessDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .auth-success:not([hidden]),
    .auth-success:not([hidden]) .auth-success-logo,
    .auth-success:not([hidden]) .auth-success-ic { animation: none; }
    .auth-success:not([hidden]) .auth-success-ic svg path { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Pricing, idle-animated background orbs (CSS-only, distinct from parallax)
   ========================================================================== */
.p-orb {
    position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
    filter: blur(46px); opacity: 0.5; will-change: transform;
    animation: pOrbFloat 18s ease-in-out infinite;
}
.p-orb.blue   { background: radial-gradient(circle at 40% 35%, rgba(32,107,196,0.60), transparent 70%); }
.p-orb.violet { background: radial-gradient(circle at 40% 35%, rgba(139,92,246,0.50), transparent 70%); }
.p-orb.cyan   { background: radial-gradient(circle at 40% 35%, rgba(34,211,238,0.50), transparent 70%); }
@keyframes pOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -24px, 0) scale(1.08); }
}

/* ==========================================================================
   App entry flow, the mock apps reproduce the REAL sign-in journey:
   Keycloak-style login → multi-tenant company picker → workspace. Screens are
   swapped by site.js (appFlow); only one [data-screen] is visible at a time.
   ========================================================================== */
[data-screen][hidden], [data-auth-panel][hidden], .app-user-pop[hidden] { display: none !important; }

/* hero window screens share a stable height so swapping never jumps the layout */
.app-window .app-flow { position: relative; }
.app-window .app-screen { display: flex; flex-direction: column; }
.app-window .app-screen[data-screen="login"],
.app-window .app-screen[data-screen="picker"] { min-height: 532px; }

/* ---- login (Keycloak-style) ---- */
.app-login { align-items: center; justify-content: center; background: var(--wash); padding: 26px; }
.app-login-inner {
    width: 100%; max-width: 320px; background: var(--white); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow-card); padding: 26px 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.app-login-logo {
    width: 46px; height: 46px; border-radius: 13px; background: var(--blue-tint);
    display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 4px;
}
.app-login-logo img { width: 26px; height: 26px; object-fit: contain; }
.app-login-inner h4 { font-size: 1.02rem; text-align: center; }
.app-login-sub { font-size: 0.74rem; color: var(--slate); text-align: center; margin-bottom: 6px; }
.app-field { display: flex; flex-direction: column; gap: 4px; }
.app-field > span { font-size: 0.68rem; font-weight: 600; color: var(--slate); }
.app-field input {
    font: inherit; font-size: 0.82rem; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--wash); color: var(--ink); outline: none; pointer-events: none;
}
.app-login-btn {
    margin-top: 6px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; box-shadow: 0 8px 18px -10px rgba(32,107,196,0.8); transition: background 140ms var(--ease);
}
.app-login-btn:hover { background: var(--blue-hover); }
.app-login-or { display: flex; align-items: center; gap: 10px; color: var(--slate-light); font-size: 0.7rem; }
.app-login-or::before, .app-login-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.app-sso-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--white);
    color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.app-sso-btn:hover { border-color: var(--blue); color: var(--blue); }
.app-sso-btn svg { color: var(--blue); }
.app-login-note { font-size: 0.66rem; color: var(--slate-light); text-align: center; margin-top: 2px; }

/* ---- company picker (multi-tenancy) ---- */
.app-topbar-slim { justify-content: space-between; }
.app-picker-body { flex: 1; padding: 16px 18px 18px; background: var(--wash); overflow-y: auto; }
.app-picker-head h4 { font-size: 0.98rem; }
.app-picker-head p { font-size: 0.76rem; color: var(--slate); margin: 3px 0 14px; }
.app-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-company-card {
    display: flex; align-items: flex-start; gap: 11px; text-align: left; cursor: pointer;
    background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 13px;
    transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.app-company-card:hover { border-color: var(--blue-tint-2); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.app-cc-avatar {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; font-size: 0.82rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; color: var(--blue-deep); background: var(--blue-tint);
}
.app-cc-avatar.tone-green  { background: var(--green-tint); color: var(--green); }
.app-cc-avatar.tone-purple { background: #f3e8f8; color: #ae3ec9; }
.app-cc-avatar.tone-amber  { background: var(--amber-tint); color: var(--amber); }
.app-cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-cc-name { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.app-cc-schema { font-size: 0.66rem; color: var(--slate); }
.app-cc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.app-cc-badges .status-chip { font-size: 0.58rem; padding: 2px 7px; }
.app-cc-go { color: var(--slate-light); align-self: center; }

/* ---- account menu (switch company / sign out) ---- */
.app-usermenu { position: relative; }
.app-avatar-btn { cursor: pointer; border: 0; }
.app-user-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 186px;
    padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column; gap: 2px;
}
.app-user-id { display: flex; flex-direction: column; padding: 7px 9px 9px; font-size: 0.74rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.app-user-id em { font-style: normal; font-weight: 500; font-size: 0.63rem; color: var(--slate); margin-top: 1px; }
.app-user-item { display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; padding: 8px 9px; border-radius: 8px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
.app-user-item:hover { background: var(--wash); color: var(--blue); }
.app-user-item svg { color: var(--slate-light); }
.app-user-item:hover svg { color: var(--blue); }

/* AI Chat menu tab reads in the assistant's violet */
.app-menu-item.ai { color: #7C5CF6; }
.app-menu-item.ai svg { color: #7C5CF6; }
.app-menu-item.ai[aria-selected="true"], .app-menu-item.ai.is-active { background: #f2ecfd; color: #6b46e0; box-shadow: inset 0 -2px 0 0 #7C5CF6; }
.app-menu-item.ai.is-active svg { color: #6b46e0; }

/* ---- grouped dropdown nav (the real admin menu) ---- */
.app-menu-group { position: relative; display: inline-flex; }
.app-menu-trigger { gap: 5px; }
.app-menu-trigger > svg:last-child { color: var(--slate-light); margin-left: -1px; }
.app-menu-item.is-active {
    background: transparent; color: var(--ink);
    box-shadow: none;
}
.app-menu-item.is-active svg { color: var(--ink-soft); }
.app-menu-trigger[aria-expanded="true"] { background: var(--wash); color: var(--ink); }
.app-wsmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; min-width: 196px;
    padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 1px;
}
.app-wsmenu[hidden] { display: none; }
.app-wsmenu-end { left: auto; right: 0; }
.app-wsitem {
    text-align: left; cursor: pointer; padding: 8px 11px; border-radius: 8px;
    font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}
.app-wsitem:hover { background: var(--blue-tint); color: var(--blue-deep); }
.app-wsmenu-head { padding: 8px 11px 3px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-light); }
.app-wsmenu-head:not(:first-child) { margin-top: 3px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.app-wsmenu-badge { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 999px; background: var(--amber-tint); color: var(--amber); font-size: 0.6rem; font-weight: 800; vertical-align: middle; }

/* ---- account button (navbar, right) ---- */
.app-userbtn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 4px 8px 4px 4px; border-radius: var(--radius-pill);
    transition: background 140ms var(--ease);
}
.app-userbtn:hover { background: var(--wash); }
.app-userbtn svg { color: var(--slate-light); }
.app-userbtn-id { display: none; flex-direction: column; line-height: 1.15; text-align: left; }
.app-userbtn-id strong { font-size: 0.72rem; color: var(--ink); font-weight: 700; }
.app-userbtn-id em { font-style: normal; font-size: 0.62rem; color: var(--slate); }
@media (min-width: 600px) { .app-userbtn-id { display: flex; } }

/* ---- page header (title + toolbar), the real Tabler page-header ---- */
.app-pagehead {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.app-pretitle { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 2px; }
.app-pagehead-t h4 { font-size: 1.08rem; }
.app-pagehead-t p { font-size: 0.76rem; color: var(--slate); margin-top: 3px; }
.app-pagehead-actions { display: flex; gap: 7px; flex-shrink: 0; }
.app-btn {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600; padding: 6px 11px; border-radius: var(--radius-sm);
}
.app-btn.ghost { border: 1px solid var(--line); color: var(--ink-soft); background: #fff; }
.app-btn.primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-xs); }
.app-btn svg { flex-shrink: 0; }
@media (max-width: 560px) { .app-pagehead-actions { display: none; } }

/* ---- hero "learn more about the product" link ---- */
.hero-learn { margin-top: 18px; }
.hero-learn a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.9rem; font-weight: 600; color: var(--blue);
}
.hero-learn a svg { color: var(--blue); }
.hero-learn a:hover { color: var(--blue-hover); }
.hero-learn a:hover .chev { transform: translateX(3px); }
.hero-learn .chev { transition: transform 160ms var(--ease); }

/* ---- faithful data table (module list pages) ---- */
.app-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.app-trow {
    display: grid; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-top: 1px solid var(--line-soft);
    font-size: 0.76rem; color: var(--ink-soft); background: #fff;
}
.app-trow:first-child { border-top: 0; }
button.app-trow { cursor: pointer; transition: background 140ms var(--ease); }
.app-thead {
    background: var(--wash); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); cursor: default;
}
button.app-trow:hover { background: var(--wash); }
.app-trow[aria-pressed="true"] { background: var(--blue-tint); }
.app-trow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-trow .num { text-align: right; font-variant-numeric: tabular-nums; overflow: visible; }
.app-tc-strong { font-weight: 700; color: var(--ink); }
.app-tdetail { margin-top: 10px; font-size: 0.72rem; color: var(--slate); }
.app-tfoot { margin-top: 10px; font-size: 0.72rem; color: var(--slate); display: flex; align-items: center; gap: 8px; }

/* ---- interactive feature showcases ---- */
.fx [data-fx-act] { cursor: pointer; transition: filter 120ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease); }
.fx [data-fx-act]:hover { filter: brightness(0.97); }
.fx-badge[data-fx-act] { box-shadow: inset 0 0 0 1px rgba(32,107,196,0.25); }
.fx-tenant[data-fx-act] { border: 1px solid var(--line); }
.fx-tenant.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); opacity: 1; }
.fx-pack[data-fx-act]:hover { border-color: var(--blue-tint-2); }
.fx-busy { opacity: 0.7; }

/* ---- static KPI summary cards (non-dashboard pages) ---- */
.kpi-row { display: grid; gap: 10px; margin-bottom: 14px; }
.kpi-card {
    position: relative; background: linear-gradient(180deg, #fff, #fbfdff);
    border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px 12px 15px;
    display: flex; flex-direction: column; gap: 3px;
}
.kpi-card::after { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--blue); opacity: 0.5; }
.kpi-card-l { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6rem; font-weight: 700; color: var(--slate); }
.kpi-card-v { font-size: 1.32rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.kpi-card-d { align-self: flex-start; font-size: 0.64rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); }
.kpi-card-d.up { color: var(--green); background: var(--green-tint); }
.kpi-card-d.down { color: var(--red); background: var(--red-tint); }

/* ---- Home quick-access / report shortcut buttons ---- */
.app-quicklinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.app-quick {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    text-align: center; cursor: pointer; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: 14px 8px; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
    transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.app-quick svg { color: var(--blue); }
.app-quick:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); color: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.app-quicklinks-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-quicklinks-sm .app-quick { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 10px 12px; }

/* ---- journal entry grid (double-entry) ---- */
.app-jgrid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.app-jrow {
    display: grid; grid-template-columns: 1.3fr 1.5fr minmax(72px, auto) minmax(72px, auto);
    gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line-soft);
    font-size: 0.76rem; color: var(--ink-soft);
}
.app-jrow:first-child { border-top: 0; }
.app-jrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-jhead { background: var(--wash); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.app-jrow .num { text-align: right; font-variant-numeric: tabular-nums; overflow: visible; }
.app-jtot { background: var(--wash); font-weight: 700; color: var(--ink); }

@media (max-width: 560px) {
    .app-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .app-window .app-screen[data-screen="login"],
    .app-window .app-screen[data-screen="picker"] { min-height: 0; }
    .app-picker-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Phone, sign-in (biometric gate + password) and company picker screens.
   ========================================================================== */
.phone-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.phone-flow > [data-screen] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.phone-auth { overflow-y: auto; padding-bottom: 18px; }
.phone-login-hero {
    background: linear-gradient(135deg, #206bc4 0%, #174e91 100%); color: #fff;
    padding: 26px 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-radius: 0 0 26px 26px;
}
.phone-login-logo {
    width: 64px; height: 64px; border-radius: 18px; background: #fff; padding: 11px;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.4);
}
.phone-login-logo img { width: 100%; height: 100%; object-fit: contain; }
.phone-login-hero strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.phone-login-hero span { font-size: 0.78rem; color: #cfe2f7; }

.phone-gate, .phone-cred { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px 22px 8px; text-align: center; }
.phone-cred { align-items: stretch; justify-content: center; }
.phone-fingerprint {
    position: relative; width: 84px; height: 84px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
    background: var(--blue-tint); color: var(--blue); border: 0;
}
.phone-fp-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); opacity: 0.25; }
.phone-fingerprint.is-scanning { animation: fpPulse 1s var(--ease); }
.phone-fingerprint.is-scanning .phone-fp-ring { animation: fpRing 1s var(--ease); }
@keyframes fpPulse { 0%,100% { background: var(--blue-tint); color: var(--blue); } 45% { background: var(--blue); color: #fff; } }
@keyframes fpRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.45); opacity: 0; } }
.phone-gate h5 { font-size: 1.15rem; }
.phone-gate-email { font-size: 0.76rem; color: var(--slate); }
.phone-gate-note { font-size: 0.72rem; color: var(--slate-light); max-width: 22ch; }
.phone-gate .phone-submit, .phone-cred .phone-submit { width: 100%; max-width: 220px; margin-top: 8px; }
.phone-cred .phone-submit { max-width: none; }
.phone-ghost-btn { font-size: 0.72rem; font-weight: 700; color: var(--blue); background: none; border: 0; cursor: pointer; padding: 6px; }
.phone-cred-row { display: flex; align-items: center; gap: 11px; font-size: 0.78rem; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; text-align: left; }
.phone-cred-row .phone-chip { width: 32px; height: 32px; flex-shrink: 0; }

.phone-picker { overflow: hidden; }
.phone-pick { width: 100%; border: 1px solid var(--line); cursor: pointer; text-align: left; }
.phone-cc-avatar {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; font-size: 0.82rem; font-weight: 800; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4b90d9, #206bc4);
}
.phone-cc-avatar.green  { background: linear-gradient(135deg, #46c95f, #2fb344); }
.phone-cc-avatar.purple { background: linear-gradient(135deg, #c56fe0, #ae3ec9); }
.phone-chevron { font-size: 1.4rem; color: var(--slate-light); line-height: 1; }
.phone-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ==========================================================================
   "What to expect" cards, honest capability promises reusing the testimonial
   card shell (and its idle glow), minus quotes / names / star ratings.
   ========================================================================== */
.testimonial-card { display: flex; flex-direction: column; align-items: flex-start; }
.expect-tag {
    display: inline-block; margin: 14px 0 10px;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--blue-deep); background: var(--blue-tint);
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.expect-head { font-size: 1.08rem; margin-bottom: 8px; }
.expect-body { color: var(--slate); font-size: 0.92rem; line-height: 1.6; }
.testimonial-card .feature-icon { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.testimonial-card:hover .feature-icon { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(17,74,126,0.55); }

/* ==========================================================================
   Per-module "signature" content (faithful to each real module page)
   ========================================================================== */
.app-cardrow, .app-prodrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.app-acct { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.app-acct-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.app-acct-top .status-chip { font-size: 0.56rem; padding: 2px 6px; }
.app-acct-bal { font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.app-acct-sub { font-size: 0.62rem; color: var(--slate); }

.app-par { display: flex; flex-direction: column; gap: 8px; }
.app-par-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 10px; font-size: 0.72rem; color: var(--ink-soft); }
.app-par-track { height: 8px; border-radius: var(--radius-pill); background: var(--wash-deep); overflow: hidden; }
.app-par-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--blue); }
.app-par-fill.green { background: var(--green); }
.app-par-fill.amber { background: var(--amber); }
.app-par-fill.red { background: var(--red); }
.app-par-row .num { font-variant-numeric: tabular-nums; font-weight: 600; }

.app-tree { font-size: 0.74rem; }
.app-tree-1 { font-weight: 700; color: var(--ink); padding: 5px 2px; }
.app-tree-2 { font-weight: 600; color: var(--blue-deep); padding: 4px 2px 4px 16px; }
.app-tree-3 { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-soft); padding: 4px 2px 4px 32px; border-bottom: 1px solid var(--line-soft); }
.app-tree-3 .num { font-variant-numeric: tabular-nums; }

.app-prod { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.app-prod-img { width: 40px; height: 40px; border-radius: 9px; background: var(--wash); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.app-prod-price { font-weight: 800; color: var(--ink); }
.app-prod .status-chip { font-size: 0.56rem; padding: 2px 6px; }

.app-steps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.app-step { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--slate); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--wash); }
.app-step svg { color: var(--green); }
.app-step.done { color: var(--green); background: var(--green-tint); }
.app-step.done svg { color: var(--green); }
.app-step.active { color: #fff; background: var(--blue); }
.app-step-sep { color: var(--slate-light); }

.app-packs { display: flex; flex-wrap: wrap; gap: 7px; }
.app-pack { font-size: 0.68rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); color: var(--slate); }
.app-pack.on { background: var(--blue-tint); border-color: var(--blue-tint-2); color: var(--blue-deep); }

@media (max-width: 560px) {
    .app-cardrow, .app-prodrow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Report viewer, a floating "PDF" window inside the app (minimize / close),
   with a taskbar for minimized reports. The document itself uses the real
   report PDF palette (navy #003366), not the app's cobalt.
   ========================================================================== */
/* Absolute (not fixed) so it sits in the hero/app's space and scrolls AWAY with
   the page, the effect of a new tab opened over the app, not a sticky overlay. */
.app-report-win {
    position: absolute; top: 132px; left: calc(50% - 285px); width: 570px; height: 600px; z-index: 150;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 50px 100px -28px rgba(14,27,51,0.6), 0 0 0 1px rgba(14,27,51,0.04);
    display: flex; flex-direction: column; overflow: hidden; will-change: transform;
}
.app-report-win[hidden] { display: none; }
@media (max-width: 980px) {
    .app-report-win { left: 50%; margin-left: -46vw; width: 92vw; top: 96px; height: 560px; }
}
.app-report-win.is-open { animation: rwIn 220ms var(--ease); }
@keyframes rwIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; } }
.app-rw-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wash); border-bottom: 1px solid var(--line); cursor: grab; }
.app-rw-bar:active { cursor: grabbing; }
.app-rw-dots { display: inline-flex; gap: 5px; }
.app-rw-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d8dee8; display: inline-block; }
.app-rw-dots i:nth-child(1) { background: #ec6a5e; }
.app-rw-dots i:nth-child(2) { background: #f3bf4f; }
.app-rw-dots i:nth-child(3) { background: #61c554; }
.app-rw-title { font-size: 0.76rem; font-weight: 700; color: var(--ink); flex: 1; text-align: center; }
.app-rw-winbtns { display: inline-flex; gap: 4px; }
.app-rw-wb { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--slate); cursor: pointer; }
.app-rw-wb:hover { background: var(--wash-deep); color: var(--ink); }
.app-rw-wb.danger:hover { background: var(--red-tint); color: var(--red); }
.app-rw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.app-rw-file { font-size: 0.7rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.app-rw-tools { display: inline-flex; gap: 6px; }
.app-rw-tool { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.app-rw-tool:hover { border-color: var(--blue); color: var(--blue); }
.app-rw-tool.danger:hover { border-color: var(--red); color: var(--red); }
.app-rw-body { flex: 1; min-height: 0; overflow-y: auto; background: #e9edf3; padding: 16px; }
.app-rw-loading { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--slate); font-size: 0.8rem; font-weight: 600; }
.app-rw-loading[hidden] { display: none; }
.app-rw-doc[hidden] { display: none; }
.app-rw-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--blue); border-top-color: transparent; animation: btnSpin 0.7s linear infinite; }

/* the "printed" report document (navy theme, matches the real PDF) */
.rpt { background: #fff; max-width: 560px; margin: 0 auto; padding: 24px 26px; box-shadow: 0 2px 12px -4px rgba(0,0,0,0.25); color: #333; font-size: 0.72rem; }
.rpt-head { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #003366; padding-bottom: 12px; margin-bottom: 14px; }
.rpt-logo { width: 44px; height: 44px; border-radius: 8px; background: #003366; color: #fff; font-weight: 800; font-size: 0.82rem; display: inline-flex; align-items: center; justify-content: center; }
.rpt-co { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.rpt-co-name { font-size: 1rem; font-weight: 800; color: #003366; text-transform: uppercase; letter-spacing: 0.02em; }
.rpt-title { font-size: 0.82rem; font-weight: 700; color: #555; }
.rpt-date { font-size: 0.64rem; color: #888; font-style: italic; }
.rpt-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.rpt-table td, .rpt-table th { padding: 5px 8px; }
.rpt-colh th { background: #003366; color: #fff; text-align: left; text-transform: uppercase; font-size: 0.62rem; font-weight: 700; }
.rpt-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-sech td { background: #e6f0ff; color: #003366; font-weight: 800; text-transform: uppercase; font-size: 0.64rem; border-top: 1px solid #cdddf3; }
.rpt-line td { border-bottom: 1px solid #eee; }
.rpt-line td:first-child { padding-left: 18px; }
.rpt-sub td { font-weight: 700; color: #000; background: #f5f5f5; border-top: 1px solid #ddd; }
.rpt-sub td:first-child { padding-left: 14px; }
.rpt-grand td { background: #003366; color: #fff; font-weight: 800; text-transform: uppercase; font-size: 0.68rem; }
.rpt-foot { margin-top: 8px; border-top: 1px solid #ccc; padding-top: 8px; font-size: 0.58rem; color: #777; text-align: center; }

/* minimized-report taskbar (pinned to the bottom of the page) */
.app-taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 361; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; background: rgba(255,255,255,0.94); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(14,27,51,0.5); backdrop-filter: blur(8px); }
.app-taskbar[hidden] { display: none; }
.app-task-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.app-task-chip:hover { border-color: var(--blue-tint-2); }
.app-task-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: inline-block; }
.app-task-x { color: var(--slate-light); font-size: 0.92rem; line-height: 1; }
.app-task-x:hover { color: var(--red); }

/* ---- in-app record view mode (click a row) ---- */
.app-rec { position: absolute; inset: 0; z-index: 34; display: flex; align-items: center; justify-content: center; padding: 18px; }
.app-rec[hidden] { display: none; }
.app-rec-backdrop { position: absolute; inset: 0; background: rgba(14,27,51,0.42); }
.app-rec-card { position: relative; z-index: 1; width: 100%; max-width: 390px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-panel); overflow: hidden; animation: rwIn 200ms var(--ease); }
.app-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.app-rec-pre { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 2px; }
.app-rec-head h5 { font-size: 0.95rem; }
.app-rec-fields { padding: 6px 16px; }
.app-rec-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.78rem; }
.app-rec-row:last-child { border-bottom: 0; }
.app-rec-k { color: var(--slate); }
.app-rec-v { color: var(--ink); font-weight: 600; text-align: right; }
.app-rec-detail { padding: 2px 16px 12px; font-size: 0.74rem; color: var(--slate); line-height: 1.5; }
.app-rec-detail[hidden] { display: none; }
.app-rec-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line-soft); background: var(--wash); }

/* ==========================================================================
   Product page, feature walkthrough (web) + device switcher (mobile/tablet)
   ========================================================================== */
.wk-section { padding: 60px 0 100px; }
.wk-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 44px; align-items: start; }
.wk-reverse { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }

/* left: the live app stage (sticky so it stays put while you scan features) */
.wk-stage { position: sticky; top: 92px; perspective: 1600px; }
.wk-app { height: 560px; box-shadow: var(--shadow-panel), 0 22px 60px -24px rgba(17,74,126,0.34); }
.wk-view { height: 100%; display: flex; flex-direction: column; }
.wk-view[hidden] { display: none; }
.wk-view .app-main { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wk-view.app-login { align-items: center; justify-content: center; background: var(--wash); }

/* right: the feature accordion */
.wk-rail { display: flex; flex-direction: column; gap: 10px; }
.wk-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.wk-item.is-active { border-color: var(--blue); box-shadow: var(--shadow-pop); }
.wk-item-head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; cursor: pointer; text-align: left; }
.wk-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--blue-tint); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; transition: background 180ms var(--ease), color 180ms var(--ease); }
.wk-item.is-active .wk-ic { background: var(--blue); color: #fff; }
.wk-tag { flex: 1; font-weight: 700; font-size: 1rem; color: var(--ink); }
.wk-chev { color: var(--slate-light); transition: transform 200ms var(--ease); }
.wk-item.is-active .wk-chev { transform: rotate(180deg); color: var(--blue); }
.wk-desc { padding: 0 20px 18px 69px; }
.wk-desc[hidden] { display: none; }
.wk-desc h3 { font-size: 1.04rem; margin-bottom: 8px; }
.wk-desc p { color: var(--slate); font-size: 0.92rem; line-height: 1.6; }
.wk-desc ul { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.wk-desc li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); }
.wk-desc li .check-dot { margin-top: 2px; }

/* mobile / tablet device stage */
.wk-devstage { position: relative; height: 620px; display: flex; align-items: center; justify-content: center; perspective: 1600px; }
.wk-frame { position: absolute; cursor: pointer; transition: transform 380ms var(--ease), opacity 380ms var(--ease), filter 380ms var(--ease); }
.wk-frame:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

/* tablet (iPad) */
.wk-frame.tablet { padding: 14px; background: #0E1B33; border-radius: 30px; box-shadow: var(--shadow-panel), 0 0 0 2px rgba(14,27,51,0.6) inset; }
.wk-tablet-screen { width: 430px; height: 552px; border-radius: 20px; background: var(--wash); overflow: hidden; display: flex; flex-direction: column; }
.wk-tablet-screen .phone-hero { padding: 26px 22px 20px; }
.wk-tablet-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.wk-tablet-body .phone-kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wk-tablet-body .phone-chartcard .sparkline { height: 90px; }

/* phone screens inside the walkthrough */
.wk-frame.phone .phone-screen { height: 560px; }
.wk-mview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wk-mview[hidden] { display: none; }
.wk-mview .phone-body { overflow-y: auto; }
.wk-mview .phone-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px 22px; text-align: center; }

/* front / back placement, swapped by [data-active] */
.wk-devstage[data-active="phone"] .wk-frame.phone  { transform: translateX(92px) scale(1); z-index: 3; }
.wk-devstage[data-active="phone"] .wk-frame.tablet { transform: translateX(-118px) scale(0.82); z-index: 2; opacity: 0.9; filter: brightness(0.95) saturate(0.9); }
.wk-devstage[data-active="tablet"] .wk-frame.tablet { transform: translateX(-10px) scale(1); z-index: 3; }
.wk-devstage[data-active="tablet"] .wk-frame.phone  { transform: translateX(188px) scale(0.78); z-index: 2; opacity: 0.82; filter: brightness(0.95) saturate(0.9); }

/* device toggle pills */
.wk-devtoggle { display: inline-flex; gap: 4px; margin-top: 6px; padding: 4px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-pill); align-self: flex-start; }
.wk-devbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--slate); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); }
.wk-devbtn svg { color: currentColor; }
.wk-devbtn[aria-pressed="true"] { background: #fff; color: var(--blue); box-shadow: var(--shadow-xs); }

/* Snap the INTERACTIVE STAGE (not the section title) to the viewport centre, so
   the whole mock app settles fully in view and is never cut off at the fold.
   The old rule snapped each section's top (its heading) under the header, which
   pushed the ~660px app window past the bottom edge. Centre-aligning the stage
   itself keeps the whole mock on screen. Proximity + centre-align, desktop +
   non-reduced-motion only; reuses the html `scroll-snap-type: y proximity`. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .wk-section { scroll-snap-align: none; }
    .wk-stage, .wk-devstage { scroll-snap-align: center; scroll-snap-stop: normal; scroll-margin-top: 92px; }
}

@media (max-width: 980px) {
    .wk-grid, .wk-reverse { grid-template-columns: 1fr; gap: 28px; }
    .wk-stage { position: static; }
    .wk-devstage { height: 560px; }
    /* Product "Mobile & tablet": ONE device at a time with the Mobile/Tablet
       toggle on top (relocated there by site.js productDeviceToggle). The other
       device is fully hidden — nothing overlaps, and the iPad renders in full. */
    .wk-mobile-section .wk-devstage {
        order: -1; display: flex; flex-direction: column; align-items: center;
        height: auto; gap: 18px; perspective: none;
    }
    .wk-mobile-section .wk-devtoggle { align-self: center; margin-top: 0; }
    .wk-mobile-section .wk-frame {
        position: static; transform: none !important; opacity: 1 !important; filter: none !important; cursor: default;
    }
    .wk-devstage[data-active="phone"]  .wk-frame.tablet { display: none; }
    .wk-devstage[data-active="tablet"] .wk-frame.phone  { display: none; }
    /* the landscape iPad fills the content column with EQUAL left/right margins
       (was vw-sized, which overflowed asymmetrically) */
    .wk-mobile-section .wk-frame.tablet { width: 100%; max-width: 460px; box-sizing: border-box; }
    /* FIXED tablet height so switching screens never resizes it; content scrolls
       both ways. `min-height:0` on the flex body is what lets it shrink and
       scroll instead of forcing the screen to grow. */
    .wk-mobile-section .wk-tablet-screen { width: 100%; height: 340px; max-height: 340px; }
    .wk-mobile-section .wk-tablet-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
    .wk-app { height: 500px; }
    .wk-desc { padding-left: 20px; }
    .wk-tablet-screen { width: 300px; }
    .wk-devstage[data-active="phone"] .wk-frame.phone { transform: translateX(40px) scale(0.92); }
    .wk-devstage[data-active="phone"] .wk-frame.tablet { transform: translateX(-70px) scale(0.7); }
    .wk-devstage[data-active="tablet"] .wk-frame.tablet { transform: translateX(0) scale(0.86); }
    .wk-devstage[data-active="tablet"] .wk-frame.phone { transform: translateX(110px) scale(0.64); }
}

/* ==========================================================================
   Product page v2, interactive app + LIVE description panel, landscape iPad
   ========================================================================== */
.wk-stage { position: relative; top: auto; }

.wk-descpanel { position: sticky; top: 92px; align-self: start; }
.wk-descpanel-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 600; color: var(--blue); margin-bottom: 18px; }
.wk-descpanel-hint svg { color: var(--blue); }
.wk-desc-item { animation: rwIn 260ms var(--ease); }
.wk-desc-item[hidden] { display: none; }
.wk-desc-item .wk-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-tint); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.wk-desc-item .wk-tag { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 8px; }
.wk-desc-item h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 12px; }
.wk-desc-item p { color: var(--slate); font-size: 1rem; line-height: 1.65; }
.wk-desc-item ul { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.wk-desc-item li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.wk-desc-item li .check-dot { margin-top: 3px; }

/* landscape iPad */
.wk-tablet-screen { width: 600px; height: 412px; border-radius: 16px; background: var(--wash); overflow: hidden; display: flex; flex-direction: column; }
.wk-tablet-topbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.wk-tablet-topbar .app-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.wk-tablet-topbar .app-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.wk-tablet-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.wk-tablet-body .phone-chartcard .sparkline { height: 120px; }

/* Stacking — the ACTIVE device sits dead-centre (translateX 0) and prominent;
   the other peeks behind on a side, rotated + dimmed, as a clear "click to bring
   me forward" cue. The phone and the tablet are treated SYMMETRICALLY, so
   whichever is parked behind reads and behaves the same. Clicking a peeking
   device snaps it to the centre (works both ways — see deviceSwitch in site.js). */
.wk-devstage[data-active="phone"]  .wk-frame.phone  { transform: translateX(0) scale(1) rotate(0deg); z-index: 3; opacity: 1; filter: none; }
.wk-devstage[data-active="phone"]  .wk-frame.tablet { transform: translateX(-188px) translateY(-22px) scale(0.82) rotate(-5deg); z-index: 2; opacity: 0.8; filter: brightness(0.95); }
.wk-devstage[data-active="tablet"] .wk-frame.tablet { transform: translateX(0) scale(1) rotate(0deg); z-index: 3; opacity: 1; filter: none; }
.wk-devstage[data-active="tablet"] .wk-frame.phone  { transform: translateX(190px) translateY(26px) scale(0.8) rotate(5deg); z-index: 2; opacity: 0.78; filter: brightness(0.95); }
/* hovering the parked device lifts, straightens & brightens it — IDENTICAL cue
   for the phone and the tablet, so the two behave the same on hover. */
.wk-devstage[data-active="phone"]  .wk-frame.tablet:hover { opacity: 1; filter: none; transform: translateX(-192px) translateY(-30px) scale(0.87) rotate(-2deg); }
.wk-devstage[data-active="tablet"] .wk-frame.phone:hover  { opacity: 1; filter: none; transform: translateX(194px) translateY(20px) scale(0.85) rotate(2deg); }

/* The phone reads as a live 3-D device. When it is the FRONT (centred) device it
   gets a subtle idle float on the INNER .phone-frame (the outer placement
   transform above is left untouched). When it is parked BEHIND, it is a clean
   rotated card driven purely by the outer transform — exactly like the tablet —
   so both parked devices behave the same, tilted, and straighten on hover. All
   flattened by the global prefers-reduced-motion rule. */
.wk-frame.phone { perspective: 1100px; }
.wk-phone .phone-frame { transform-style: preserve-3d; will-change: transform; }
.wk-devstage[data-active="phone"]  .wk-phone .phone-frame { animation: wkPhoneIdle 7s ease-in-out infinite; }
@keyframes wkPhoneIdle {
    0%, 100% { transform: translateY(0) rotateY(-3deg); }
    50%      { transform: translateY(-7px) rotateY(-6deg); }
}

/* phone biometric lock → app */
.wk-phone .wk-mapp { display: none; }
.wk-phone .wk-mlock { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wk-phone.is-unlocked .wk-mlock { display: none; }
.wk-phone.is-unlocked .wk-mapp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wk-phone .wk-mapp .phone-tabpanels { flex: 1; min-height: 0; }
.wk-phone .wk-mapp .phone-view { height: 100%; }
.wk-phone .phone-fingerprint { cursor: pointer; border: 0; }

@media (max-width: 560px) {
    .wk-tablet-screen { width: 360px; height: 260px; }
    .wk-devstage[data-active="phone"]  .wk-frame.phone  { transform: translateX(0) scale(0.9); }
    .wk-devstage[data-active="phone"]  .wk-frame.tablet { transform: translateX(-56px) translateY(-84px) scale(0.58) rotate(-5deg); }
    .wk-devstage[data-active="tablet"] .wk-frame.tablet { transform: translateX(0) scale(0.62); }
    .wk-devstage[data-active="tablet"] .wk-frame.phone  { transform: translateX(74px) translateY(50px) scale(0.56) rotate(5deg); }
}

/* ==========================================================================
   Fixed-size app window, constant height across login / picker / workspace,
   Y-scroll inside, nothing overflows on X (so the window never resizes as you
   move between screens). Applies to the hero + product shared _AppWindow.
   ========================================================================== */
.app-window { height: 600px; display: flex; flex-direction: column; }
.app-window .app-flow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.app-window .app-screen { flex: 1 1 auto; min-height: 0; }
.app-window .app-screen[data-screen="login"],
.app-window .app-screen[data-screen="picker"] { min-height: 0; }
.app-window .app-login { flex: 1 1 auto; overflow-y: auto; }
.app-window .app-picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.app-window .app-main { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wk-stage .app-window { box-shadow: var(--shadow-panel), 0 22px 60px -24px rgba(17,74,126,0.34); }

@media (max-width: 560px) {
    .app-window { height: 540px; }
}

/* ==========================================================================
   Report viewer now lives INSIDE the app container (hero-visual / wk-stage),
   so it opens within the web-app's bounds and scrolls with the page.
   ========================================================================== */
.app-report-win { position: absolute; inset: 10px; width: auto; height: auto; margin: 0; z-index: 30; }
.app-taskbar { position: absolute; z-index: 31; }

/* ==========================================================================
   Nav-bar polish, hover feedback + smooth dropdown, tidier spacing
   ========================================================================== */
.app-menubar { padding-top: 6px; padding-bottom: 6px; }
.app-menu { gap: 1px; }
.app-wsmenu { animation: rwIn 150ms var(--ease); }
.app-menu-item { transition: background 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease); }

/* ==========================================================================
   Mobile ↔ tablet: synced screens, interactive iPad nav, biometric lock
   ========================================================================== */
.phone-mviews { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.phone-mviews > [data-mscreen] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
[data-mscreen][hidden] { display: none !important; }
.phone-tab { cursor: pointer; }
.phone-tab.is-active { color: var(--blue); }
.phone-tab.is-active svg { color: var(--blue); }
.wk-pbio { align-items: stretch; }

/* iPad landscape chrome */
.wk-tablet-nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.wk-tnav { font-size: 0.72rem; font-weight: 600; color: var(--slate); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.wk-tnav:hover { background: var(--blue-tint); color: var(--blue); }
.wk-tnav.is-active { background: var(--blue-tint); color: var(--blue-deep); box-shadow: inset 0 -2px 0 0 var(--blue); }
.wk-tablet-body > [data-mscreen] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wk-tbio { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.wk-tbio h5 { font-size: 1.05rem; }
.wk-tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* hide the device nav while the biometric lock is showing */
[data-msync].is-locked .phone-tabbar,
[data-msync].is-locked .wk-tablet-nav { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   Nav dropdown, no dead gap between trigger and menu (so hover can reach the
   sub-items), and a tighter menu bar so it needs fewer rows.
   ========================================================================== */
.app-wsmenu { top: 100%; }
.app-wsmenu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.app-menu-item { padding: 6px 9px; font-size: 0.78rem; gap: 6px; }
.app-menu-trigger { gap: 4px; }
.app-menu-trigger > svg:last-child { margin-left: -2px; }

/* ==========================================================================
   Device switcher, only the FRONT device is interactive; the one behind is
   disabled (its controls don't respond), but clicking it brings it forward.
   ========================================================================== */
.wk-devstage[data-active="phone"]  .wk-frame.tablet *,
.wk-devstage[data-active="tablet"] .wk-frame.phone * { pointer-events: none; }
.wk-devstage .wk-frame { cursor: pointer; }
.wk-devstage[data-active="phone"]  .wk-frame.phone,
.wk-devstage[data-active="tablet"] .wk-frame.tablet { cursor: default; }

/* ==========================================================================
   Company picker, switch user, add a company (with a proper back button)
   ========================================================================== */
.app-picker-user { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.app-picker-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--slate); padding: 5px 9px; border-radius: var(--radius-sm); cursor: pointer; }
.app-picker-link:hover { background: var(--wash); color: var(--blue); }
.app-picker-link svg { color: currentColor; }
.app-company-add { border-style: dashed; align-items: center; }
.app-cc-add { background: var(--blue-tint); color: var(--blue); }
.app-back { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm); margin-right: auto; }
.app-back:hover { background: var(--wash); color: var(--blue); }
.app-back svg { transform: rotate(180deg); color: var(--slate-light); }
.app-back:hover svg { color: var(--blue); }
.app-addform { padding: 2px 2px 8px; display: flex; flex-direction: column; gap: 11px; max-width: 440px; }
.app-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-addform-actions { display: flex; gap: 10px; margin-top: 6px; }
.app-addform-actions .app-sso-btn, .app-addform-actions .app-login-btn { width: auto; flex: 1; }

/* ==========================================================================
   Loaders: first-start splash + a general top progress bar, and block
   skeletons over the real content sections (not just the hero app mock).
   ========================================================================== */

/* first-start splash (shown once per session; skipped via html.splash-done) */
.site-preloader {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--wash) 62%, var(--wash-deep) 100%);
    transition: opacity .5s var(--ease), visibility 0s linear .5s;
    animation: splashFail 0s linear 5s forwards; /* no-JS safety: auto-hide */
}
html.splash-done .site-preloader { display: none; }
.site-preloader.is-hiding { opacity: 0; visibility: hidden; }
@keyframes splashFail { to { opacity: 0; visibility: hidden; } }
.site-preloader-logo {
    width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center;
    background: #fff; box-shadow: var(--shadow-lift); animation: splashPulse 1.5s var(--ease) infinite;
}
.site-preloader-logo img { width: 46px; height: 46px; }
.site-preloader-brand { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); }
.site-preloader-bar { width: 190px; height: 4px; border-radius: var(--radius-pill); background: var(--wash-deep); overflow: hidden; }
.site-preloader-bar > span { display: block; height: 100%; width: 42%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--blue), #7c9cff); animation: splashBar 1.1s var(--ease) infinite; }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* general loading bar (every navigation / page load) */
.nx-topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2500; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.nx-topbar.is-active { opacity: 1; }
.nx-topbar-fill { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--blue), #7c9cff); box-shadow: 0 0 10px rgba(17, 74, 126, 0.6); transition: width .25s var(--ease); }

/* block skeletons over real content sections */
.trusted-by, .testimonials, .mobile-section, .features { position: relative; }
.block-skeleton {
    position: absolute; inset: 0; z-index: 40; background: var(--white);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 44px 22px;
    opacity: 1; visibility: visible; transition: opacity .42s var(--ease), visibility 0s linear .42s;
}
.block-skeleton.sk-done { opacity: 0; visibility: hidden; }
.block-skeleton.sk-top { inset: 0 0 auto 0; height: min(660px, 100%); justify-content: flex-start; padding-top: 60px; }
.block-skeleton .sk-card, .block-skeleton .sk-pill, .block-skeleton .sk-phone {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--wash-deep) 25%, var(--line-soft) 37%, var(--wash-deep) 63%);
    background-size: 200% 100%; animation: skShimmer 1.4s linear infinite;
}
.block-skeleton .sk-bar.sk-40 { width: 220px; }
.block-skeleton .sk-bar.sk-70 { width: 340px; }
.sk-center { align-self: center; }
.sk-dim { opacity: 0.6; }
.sk-cards { display: flex; gap: 18px; width: min(1080px, 94%); }
.block-skeleton .sk-card { flex: 1; height: 176px; }
.block-skeleton.sk-top .sk-card { height: 300px; }
.sk-pills { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.block-skeleton .sk-pill { width: 118px; height: 22px; border-radius: var(--radius-pill); }
.sk-mob { display: flex; gap: 40px; align-items: center; justify-content: center; width: min(980px, 94%); }
.sk-mob-col { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.block-skeleton .sk-phone { width: 228px; height: 300px; border-radius: 28px; flex: none; }
@media (max-width: 720px) {
    .sk-cards { flex-direction: column; } .block-skeleton .sk-card { height: 120px; }
    .sk-mob { flex-direction: column; gap: 22px; } .block-skeleton .sk-phone { width: 180px; height: 230px; }
}

/* feature-screen interactivity affordances */
.fsc-tenant[data-fx-act], .fsc-packs .app-pack[data-fx-act], .fsc-perm i[data-fx-act] { cursor: pointer; }
.fsc-tenant[data-fx-act] { transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.fsc-tenant[data-fx-act]:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(23, 44, 92, 0.4); }
.fsc-packs .app-pack[data-fx-act] { transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.fsc-perm i[data-fx-act]:hover { outline: 2px solid var(--blue-tint-2); outline-offset: 1px; }
.fsc-recon-do.amber { background: var(--amber); box-shadow: 0 6px 14px -8px rgba(217, 119, 6, 0.6); }
.fsc-recon-do.green, .fsc-report-btn.green { background: var(--green); box-shadow: 0 6px 14px -8px rgba(22, 163, 74, 0.6); }

/* ==========================================================================
   GSAP motion layer: pre-hide the hero / page-hero intro content so the
   JS timeline can reveal it with no flash. html.js-anim is set very early by
   an inline head script (only when motion is allowed) and cleared by a
   failsafe timeout, so if scripts/CDN stall the content still appears.
   ========================================================================== */
html.js-anim .hero .hero-copy > *,
html.js-anim .hero .hero-visual,
html.js-anim .page-hero .wrap > * {
    opacity: 0;
    will-change: transform, opacity;
}
/* Once GSAP has run, or under reduced motion / no-JS, nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
    html.js-anim .hero .hero-copy > *,
    html.js-anim .hero .hero-visual,
    html.js-anim .page-hero .wrap > * { opacity: 1; will-change: auto; }
}

/* ==========================================================================
   Split-text (GSAP word cascade), personalized record viewer, and a broad
   set of hover micro-interactions across the site.
   ========================================================================== */

/* words produced by splitWords() — inline-block so they can be transformed */
.w  { display: inline-block; }
.wi { display: inline-block; will-change: transform, opacity; }

/* record viewer: a description written for the specific record */
.app-rec-lead { display: block; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.app-rec-why  { display: block; color: var(--slate); line-height: 1.5; }

/* ---- hover micro-interactions ------------------------------------------- */
.btn { transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .btn-arrow { transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); }
.btn-quiet:hover { color: var(--blue); }
.btn-white:hover { box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.45); }

.logo-row li { transition: transform .2s var(--ease), color .2s var(--ease); }
.logo-row li:hover { transform: translateY(-3px); color: var(--ink); }

.fnav-ic { transition: transform .2s var(--ease); }
.fnav-chip { transition: transform .2s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease); }
.fnav-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--blue-tint-2); }
.fnav-chip:hover .fnav-ic { transform: translateY(-1px) scale(1.1); }

.stat-tile, .kpi-card { transition: transform .2s var(--ease), box-shadow .22s var(--ease); }
.stat-tile:hover, .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.testimonial-card .feature-icon { transition: transform .22s var(--ease); }
.testimonial-card { transition: transform .22s var(--ease), box-shadow .24s var(--ease), border-color .22s var(--ease); }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--blue-tint-2); }
.testimonial-card:hover .feature-icon { transform: translateY(-2px) scale(1.06); }

.solution-row .feature-icon { transition: transform .22s var(--ease); }
.solution-row { transition: transform .2s var(--ease); }
.solution-row:hover { transform: translateX(4px); }
.solution-row:hover .feature-icon { transform: scale(1.08) rotate(-3deg); }

.site-footer a { display: inline-block; transition: color .18s var(--ease), transform .18s var(--ease); }
.site-footer a:hover { color: var(--blue); transform: translateX(3px); }
.footer-social a:hover { transform: translateY(-3px); color: var(--blue); }

/* mock workspace rows invite the (now personalized) record viewer */
.app-table .app-trow:not(.app-thead) { cursor: pointer; transition: background .15s var(--ease), transform .15s var(--ease); }
.app-table .app-trow:not(.app-thead):hover { background: var(--blue-tint); transform: translateX(2px); }

/* keep all these hovers still under reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .logo-row li:hover, .fnav-chip:hover, .stat-tile:hover, .kpi-card:hover,
    .testimonial-card:hover, .solution-row:hover, .site-footer a:hover, .footer-social a:hover,
    .app-table .app-trow:not(.app-thead):hover { transform: none; }
}

/* split-text: block-level word units (e.g. the typewriter line) stay on their
   own reserved line so the heading height never jitters as text cycles.
   width/flex-basis 100% + !important force a hard line break no matter how the
   split wrappers end up nested, so the rotating word can never sit inline next
   to "…Accounting for". */
.w-block, .wi-block { display: block !important; width: 100%; flex-basis: 100%; }

/* ==========================================================================
   THE APP SUITE — one live window that morphs between the four real apps:
   Admin web app + Storefront + Staff Portal + Client Portal. A segmented
   switcher (GSAP/anime crossfade in site.js `appSuite`) swaps the surface.
   Shared by the hero and the /product walkthrough.
   ========================================================================== */
.app-suite { display: flex; flex-direction: column; gap: 12px; }
.app-suite-switch {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    background: rgba(255,255,255,0.72); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 5px; box-shadow: var(--shadow-card); z-index: 3;
}
.app-suite-ind {
    position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: 0;
    border-radius: var(--radius-pill); background: #fff;
    box-shadow: 0 6px 16px -8px rgba(17,74,126,0.45), 0 0 0 1px rgba(17,74,126,0.12);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), width 0.5s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 0; pointer-events: none;
}
.app-suite-btn {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 8px;
    justify-content: center; padding: 8px 10px; border-radius: var(--radius-pill);
    cursor: pointer; color: var(--slate); background: none; border: 0; text-align: left;
    transition: color 160ms var(--ease), transform 160ms var(--ease);
}
.app-suite-btn:hover { color: var(--blue); }
.app-suite-btn:hover .app-suite-ic { transform: scale(1.12) rotate(-5deg); }
.app-suite-ic { display: inline-flex; color: var(--slate-light); transition: color 160ms var(--ease), transform 260ms cubic-bezier(0.34,1.56,0.64,1); }
.app-suite-tx { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.app-suite-tx b { font-size: 0.8rem; font-weight: 700; }
.app-suite-tx em { font-style: normal; font-size: 0.62rem; color: var(--slate-light); }
.app-suite-btn.is-active { color: var(--blue); }
.app-suite-btn.is-active .app-suite-ic { color: var(--blue); }
.app-suite-btn.is-active .app-suite-tx em { color: var(--blue); opacity: 0.7; }

/* The WHOLE suite — the app chooser (switcher) AND the window — tilts toward the
   pointer as one rigid card, the same 3-D feel the hero window has. The tilt
   scene ([data-tilt-scene] on .hero-visual / .wk-stage) supplies the perspective;
   the JS `tilt` module sets --rx/--ry on this [data-tilt] element. */
.app-suite[data-tilt] {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 240ms var(--ease);
    will-change: transform;
}
/* Fixed-height stage: every surface fills it, so switching apps never jumps.
   All four windows become flex columns whose scroll region fills the space.
   Reset the tilt vars here so the windows (which have their own
   `transform: rotateX(var(--rx))` rule) don't ALSO rotate and double the tilt —
   the suite already rotates them as part of its own transform. */
.app-suite-stage { position: relative; height: 600px; --rx: 0deg; --ry: 0deg; }
.app-suite-surface { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.app-suite-surface.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.app-suite .app-window { height: 100%; display: flex; flex-direction: column; }
.app-suite .app-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-suite .app-screen:not([hidden]) { flex: 1; min-height: 0; }
.app-suite [data-surface="admin"] .app-main { flex: 1; height: auto; min-height: 0; }
.store-win .store-scroll, .portal-win .port-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.store-win .store-scroll::-webkit-scrollbar,
.portal-win .port-scroll::-webkit-scrollbar { width: 7px; }
.store-win .store-scroll::-webkit-scrollbar-thumb,
.portal-win .port-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
@media (max-width: 560px) { .app-suite-stage { height: 560px; } }

@media (max-width: 560px) {
    .app-suite-tx em { display: none; }
    .app-suite-tx b { font-size: 0.72rem; }
    .app-suite-btn { padding: 7px 6px; gap: 5px; }
}

/* ---- shared in-app AI chat (Storefront / Staff / Client) ---- */
.app-chat { position: absolute; right: 14px; bottom: 14px; z-index: 20; }
.app-chat-fab {
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: var(--blue); box-shadow: 0 10px 24px -8px rgba(32,107,196,0.6);
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.app-chat-fab:hover { transform: translateY(-2px) scale(1.05); }
.app-chat-panel {
    position: absolute; right: 0; bottom: 56px; width: 288px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 24px 50px -18px rgba(14,27,51,0.4); padding: 12px; overflow: hidden;
    animation: nxDdIn 0.2s var(--ease) both;
}
.app-chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.82rem; }
.app-chat-head b { flex: 1; color: var(--ink); }
.app-chat-panel .peek-chat { gap: 9px; }

/* ==========================================================================
   STOREFRONT mock (CRGNexus.Storefront) — its own indigo store brand.
   ========================================================================== */
.store-win { --blue: #4f46e5; --blue-hover: #4338ca; --blue-deep: #3730a3; --blue-tint: #eef2ff; --blue-tint-2: #c7d2fe; }
.store-win .app-flow, .store-win .store-screen { display: flex; flex-direction: column; height: 100%; }
.store-topbanner { background: var(--blue); color: #fff; font-size: 0.66rem; font-weight: 600; text-align: center; padding: 5px 12px; letter-spacing: 0.01em; }
.store-header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.store-brand { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.store-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.store-search { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 0.74rem; color: var(--slate-light); }
.store-search input { border: 0; background: none; outline: none; width: 100%; font: inherit; color: var(--ink-soft); }
.store-search.sm { flex: 0 1 180px; padding: 5px 10px; font-size: 0.7rem; }
.store-cart-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 7px 13px; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.store-cart-badge { background: #fff; color: var(--blue); font-size: 0.62rem; font-weight: 800; border-radius: var(--radius-pill); padding: 0 6px; min-width: 16px; text-align: center; }
.store-catnav { display: flex; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); background: #fff; overflow-x: auto; }
.store-cat { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; color: var(--slate); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; transition: all 140ms var(--ease); }
.store-cat:hover { color: var(--blue); border-color: var(--blue-tint-2); }
.store-cat.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.store-scroll { padding: 14px; background: var(--wash); }
.store-ad { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; overflow: hidden; margin-bottom: 14px; }
.store-ad-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.store-ad-kicker { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.store-ad-copy strong { font-size: 1.02rem; }
.store-ad-sub { font-size: 0.72rem; opacity: 0.88; }
.store-ad-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; margin-top: 4px; }
.store-ad-art { opacity: 0.9; }
.store-ad-dots { position: absolute; bottom: 8px; right: 14px; display: inline-flex; gap: 4px; }
.store-ad-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.store-ad-dots i.on { width: 14px; border-radius: 3px; background: #fff; }
.store-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.store-sec-head .muted { font-size: 0.68rem; font-weight: 500; color: var(--slate); }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.store-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease); }
.store-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -16px rgba(14,27,51,0.22); }
.store-thumb { position: relative; aspect-ratio: 1/1; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); }
.store-thumb.tone-a { background: linear-gradient(135deg,#6366f1,#4338ca); }
.store-thumb.tone-b { background: linear-gradient(135deg,#f59e0b,#d97706); }
.store-thumb.tone-c { background: linear-gradient(135deg,#10b981,#059669); }
.store-thumb.tone-d { background: linear-gradient(135deg,#f43f5e,#be123c); }
.store-thumb.tone-e { background: linear-gradient(135deg,#0ea5e9,#0369a1); }
.store-thumb.tone-f { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.store-hot { position: absolute; top: 6px; left: 6px; background: #d63939; color: #fff; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.05em; padding: 2px 6px; border-radius: var(--radius-pill); }
.store-card-body { display: flex; flex-direction: column; gap: 3px; }
.store-card-name { font-size: 0.74rem; font-weight: 600; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-card-price { font-size: 0.92rem; font-weight: 800; color: var(--blue); }
.store-card-meta { display: flex; align-items: center; gap: 5px; font-size: 0.66rem; color: var(--slate); }
.store-stars { display: inline-flex; align-items: center; gap: 2px; color: #f59f00; font-weight: 700; }
.store-stars.big svg, .store-stars svg { color: #f59f00; }
.store-card-stock { font-size: 0.64rem; color: var(--green); font-weight: 600; }
.store-card-stock.low { color: #b45309; }
.store-add { margin-top: 3px; text-align: center; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 6px; border-radius: var(--radius-sm); }
.store-back { display: inline-flex; align-items: center; gap: 2px; font-size: 0.72rem; font-weight: 600; color: var(--slate); background: none; border: 0; cursor: pointer; }
.store-back svg { transform: rotate(180deg); }
.store-crumb { font-size: 0.68rem; color: var(--slate); margin-bottom: 12px; }
.store-crumb span { margin: 0 5px; color: var(--slate-light); }
.store-crumb b { color: var(--ink); }
.store-pdp { display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin-bottom: 16px; }
.store-pdp-img { aspect-ratio: 1/1; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); }
.store-pdp-info { display: flex; flex-direction: column; gap: 6px; }
.store-pdp-cat { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--slate-light); }
.store-pdp-info h4 { font-size: 1.02rem; color: var(--ink); }
.store-pdp-price { font-size: 1.3rem; font-weight: 800; color: var(--blue); }
.store-pdp-desc { font-size: 0.74rem; color: var(--slate); line-height: 1.5; }
.store-badge { align-self: flex-start; font-size: 0.64rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); }
.store-badge.in { background: var(--green-tint); color: var(--green); }
.store-pdp-buy { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.store-qty { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; }
.store-qty button { border: 0; background: none; cursor: pointer; color: var(--slate); font-size: 0.9rem; font-weight: 700; }
.store-btn { border: 0; cursor: pointer; font-size: 0.74rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); }
.store-btn.primary { background: var(--blue); color: #fff; }
.store-btn.ghost { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.store-btn.block { width: 100%; margin-top: 8px; padding: 10px; }
.store-reviews { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.store-rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.76rem; color: var(--slate); }
.store-rev { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.store-rev b { font-size: 0.78rem; color: var(--ink); }
.store-rev em { font-style: normal; font-size: 0.66rem; color: var(--slate-light); }
.store-rev p { font-size: 0.72rem; color: var(--slate); }
.store-cart-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.store-cart-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 11px; }
.store-cart-th { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); }
.store-cart-mid b { display: block; font-size: 0.76rem; color: var(--ink); }
.store-cart-mid em { font-style: normal; font-size: 0.66rem; color: var(--slate); }
.store-cart-qty { font-size: 0.72rem; color: var(--slate); }
.store-cart-lt { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.store-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.store-summary.compact { margin-top: 12px; }
.store-summary h5 { font-size: 0.82rem; color: var(--ink); margin-bottom: 10px; }
.store-sum-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.76rem; color: var(--ink-soft); padding: 4px 0; }
.store-sum-row.muted { color: var(--slate); font-size: 0.7rem; }
.store-sum-row.total { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 8px; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.store-checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.store-co-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px; margin-bottom: 12px; }
.store-co-card h5 { font-size: 0.8rem; color: var(--ink); margin-bottom: 10px; }
.store-co-card .app-field { margin-bottom: 8px; }
.store-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 22px; }
.store-done-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.store-done h4 { font-size: 1.1rem; color: var(--ink); }
.store-done p { font-size: 0.76rem; color: var(--slate); max-width: 300px; line-height: 1.5; }
.store-done .store-summary { width: 100%; max-width: 300px; }

/* ==========================================================================
   STAFF / CLIENT PORTAL mock — Tabler-blue self-service web apps.
   ========================================================================== */
.portal-win .app-flow, .portal-win .portal-screen { display: flex; flex-direction: column; height: 100%; }
.port-navbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.port-kicker { font-style: normal; font-weight: 700; color: var(--blue); }
.port-nav-actions { display: flex; align-items: center; gap: 10px; }
.port-role { font-size: 0.62rem; font-weight: 700; color: var(--blue); background: var(--blue-tint); padding: 3px 9px; border-radius: var(--radius-pill); }
.port-picker { padding: 22px 18px; background: var(--wash); flex: 1; }
.port-picker h4 { font-size: 1.02rem; color: var(--ink); }
.port-picker p { margin: 3px 0 14px; }
.port-picker .app-company-card { margin-bottom: 10px; }
.port-scroll { padding: 16px 18px; background: var(--wash); }
.port-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.port-head h4 { font-size: 1.04rem; color: var(--ink); }
.app-avatar.lg { width: 40px; height: 40px; font-size: 0.86rem; border-radius: 12px; }
.app-avatar.sm, .app-cc-avatar.sm { width: 28px; height: 28px; font-size: 0.66rem; border-radius: 9px; }
.port-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.port-kpis .kpi-card { border-top: 3px solid var(--blue); }
.kpi-card.accent-green { border-top-color: var(--green); }
.kpi-card.accent-amber { border-top-color: var(--amber); }
.kpi-card.accent-blue  { border-top-color: var(--blue); }
.kpi-card.accent-purple { border-top-color: #ae3ec9; }
.port-kpis .kpi-card::after { display: none; }
.kpi-card-d { display: block; font-size: 0.62rem; color: var(--slate); margin-top: 3px; }
.port-tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.port-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; color: var(--slate); background: none; border: 0; padding: 8px 11px; cursor: pointer; white-space: nowrap; transition: color 140ms var(--ease); }
.port-tab:hover { color: var(--blue); }
.port-tab.is-active { color: var(--blue); }
.port-tab-badge { background: #d63939; color: #fff; font-size: 0.56rem; font-weight: 800; border-radius: var(--radius-pill); padding: 0 5px; min-width: 14px; text-align: center; }
.port-tab-ind { position: absolute; bottom: -1px; left: 0; height: 2.5px; width: 0; background: var(--blue); border-radius: 3px 3px 0 0; transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1), width 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.port-panel[hidden] { display: none; }
.port-panel { animation: nxDdIn 0.24s var(--ease) both; }
.port-note { font-size: 0.72rem; color: var(--slate); background: var(--blue-tint); border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 10px; }
.port-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.app-btn.sm { padding: 6px 11px; font-size: 0.7rem; }
.port-task { display: grid; grid-template-columns: 4px 28px 1fr auto auto; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px 10px 0; margin-bottom: 8px; overflow: hidden; }
.port-task-accent { align-self: stretch; width: 4px; border-radius: 0 3px 3px 0; }
.port-task-accent.kb { background: var(--blue); }
.port-task-accent.kg { background: var(--green); }
.port-task-mid { min-width: 0; }
.port-task-mid b { display: block; font-size: 0.76rem; color: var(--ink); }
.port-task-mid em { font-style: normal; font-size: 0.66rem; color: var(--slate); }
.port-task-amt { font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.port-task-btns { display: inline-flex; gap: 6px; }

/* ==========================================================================
   MOBILE — exact copy of the native StaffApp (Slate-Indigo palette, 8 tabs
   incl. Approvals, solid line-icon chips, gradient hero). Hover/motion kept.
   ========================================================================== */
.phone-screen {
    --blue: #3a4ca8; --blue-hover: #33448f; --blue-deep: #262e68;
    --blue-tint: #e7e9f8; --blue-tint-2: #cfd4f2;
    background: #eceff5;               /* StaffApp PageBgLight */
}
.phone-hero { background: linear-gradient(135deg, #3a4ca8 0%, #262e68 100%); box-shadow: 0 8px 18px -6px rgba(58,76,168,0.45); }
.phone-co { color: #cfd4f2; }
.phone-date { color: #a7b0e6; }
/* IconChip: solid accent background, white line-icon glyph (Tabler ic_*_w) */
.phone-chip { background: #3a4ca8; color: #fff; }
.phone-chip svg { color: #fff; }
.phone-chip.blue   { background: #206bc4; }   /* KindBlue — advances/wallet */
.phone-chip.green  { background: #2fb344; }   /* KindGreen — leaves */
.phone-chip.amber  { background: #f59f00; }   /* KindOrange — pending/liquidation */
.phone-chip.purple { background: #ae3ec9; }   /* KindPurple — reimbursements */
.phone-chip.teal   { background: #0ca678; }   /* KindTeal — purchase requests */
.phone-chip.indigo { background: #3a4ca8; }   /* Primary */
.phone-badge.teal  { background: #e3f5ef; color: #0ca678; }
.phone-badge.purple { background: #f6e9fb; color: #ae3ec9; }
.phone-badge.cyan  { background: #e3f4f7; color: #17a2b8; }
.phone-kpi .v.blue { color: var(--blue); }    /* Primary indigo (Open advances) */
.phone-fab { background: var(--blue); color: #fff; }   /* filled primary FAB (real app PillButton) */
.phone-fab:hover { filter: brightness(1.06); }
/* 8 tabs fit the 296px frame — labels never wrap/overflow */
.phone-tabbar { padding: 8px 2px 13px; gap: 0; }
.phone-tab { flex: 1 1 0; min-width: 0; font-size: 0.46rem; gap: 2px; padding: 2px 1px; }
.phone-tab svg { width: 15px; height: 15px; }
.phone-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Approvals (supervisor) — card + two-button decision row, per the real app */
.phone-approve { background: #fff; border-radius: 14px; box-shadow: 0 3px 10px -4px rgba(14,27,51,0.10); padding: 6px 6px 10px; }
.phone-card.no-shadow { box-shadow: none; padding: 8px 6px; }
.phone-approve-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 6px; }
.phone-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 0.68rem; font-weight: 700; padding: 8px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; }
.phone-btn.approve { background: #2fb344; color: #fff; box-shadow: 0 5px 12px -5px rgba(47,179,68,0.5); }
.phone-btn.decline { background: #fff; color: #d63939; border-color: #f2c7c7; }
.phone-approve-hint { text-align: center; font-size: 0.62rem; color: var(--slate-light); margin-top: 2px; }
/* landscape iPad + product-page phone share the same indigo repalette + chips */
.wk-tablet-screen {
    --blue: #3a4ca8; --blue-hover: #33448f; --blue-deep: #262e68;
    --blue-tint: #e7e9f8; --blue-tint-2: #cfd4f2;
}

/* ==========================================================================
   NAV SCROLLER — chevron-panned horizontal navs (storefront categories, portal
   tabs) so they never overflow the window x-axis (mirrors the admin nav scroller).
   ========================================================================== */
.ns-wrap { position: relative; }
.ns-track { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.ns-track::-webkit-scrollbar { height: 0; display: none; }
.ns-chev {
    position: absolute; top: 0; bottom: 0; z-index: 5; width: 34px;
    display: none; align-items: center; justify-content: center;
    border: 0; cursor: pointer; color: var(--slate); padding: 0;
    transition: color 140ms var(--ease);
}
.ns-chev:hover { color: var(--blue); }
.ns-chev.prev { left: 0; justify-content: flex-start; padding-left: 3px; }
.ns-chev.next { right: 0; justify-content: flex-end; padding-right: 3px; }
.ns-chev.prev svg { transform: rotate(180deg); }
.ns-wrap.ns-can-prev .ns-chev.prev { display: flex; }
.ns-wrap.ns-can-next .ns-chev.next { display: flex; }
/* storefront category strip */
.store-catwrap { border-bottom: 1px solid var(--line-soft); background: #fff; }
.store-catwrap .store-catnav { border-bottom: 0; }
.store-catwrap .ns-chev.prev { background: linear-gradient(90deg, #fff 55%, rgba(255,255,255,0)); }
.store-catwrap .ns-chev.next { background: linear-gradient(270deg, #fff 55%, rgba(255,255,255,0)); }
/* portal tab strip */
.port-tabwrap { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.port-tabwrap .port-tabs { margin-bottom: 0; border-bottom: 0; }
.port-tabwrap .ns-chev.prev { background: linear-gradient(90deg, var(--wash) 58%, rgba(245,247,251,0)); }
.port-tabwrap .ns-chev.next { background: linear-gradient(270deg, var(--wash) 58%, rgba(245,247,251,0)); }

/* ==========================================================================
   COMPANION HOVER EFFECTS — richer on-hover feedback across the mock apps
   (the admin card-lift/accent-bar already applies via .app-window scoped rules).
   ========================================================================== */
.store-thumb svg, .store-pdp-img svg { transition: transform 0.3s var(--ease); }
.store-card:hover .store-thumb svg { transform: scale(1.14) rotate(-3deg); }
.store-card:hover .store-add { filter: brightness(1.06); }
.store-add { transition: filter 0.16s var(--ease); }
.store-cart-btn { transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease); }
.store-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(79,70,229,0.55); }
.store-btn { transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s var(--ease); }
.store-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(79,70,229,0.5); }
.store-btn.ghost:hover { border-color: var(--blue-tint-2); color: var(--blue); }
.store-qty button { transition: color 0.14s var(--ease), transform 0.14s var(--ease); }
.store-qty button:hover { color: var(--blue); transform: scale(1.2); }
.store-rev:hover b { color: var(--blue); transition: color 0.16s var(--ease); }
.port-task { transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease); }
.port-task:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(14,27,51,0.22); }
.app-btn { transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease); }
.app-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(32,107,196,0.5); }
.app-btn.ghost:hover { border-color: var(--blue-tint-2); color: var(--blue); }
.port-role { transition: transform 0.16s var(--ease); }
.port-head .app-avatar.lg { transition: transform 0.24s var(--ease); }
.port-head:hover .app-avatar.lg { transform: scale(1.06) rotate(-3deg); }

/* ==========================================================================
   React Bits — vanilla ports (progressive-enhancement layer)
   Framework-free recreations of reactbits.dev effects, applied across the
   whole marketing site by auto-tagging existing elements (see site.js
   `reactBits`). Purely presentational; all motion is neutralised by the global
   prefers-reduced-motion rule (§ top of file). NOT applied to the in-product
   mock surfaces (.app-window/.app-suite/.fscreen/.phone-screen) so those keep
   reading as the real apps.
   ========================================================================== */

/* ---- GradientText: animated gradient fill on accent words in real headings -- */
.rb-gradient {
    background: linear-gradient(90deg, var(--blue) 0%, #7c3aed 28%, #0891b2 52%, #7c3aed 76%, var(--blue) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: rbGradient 7s linear infinite;
}
@keyframes rbGradient { to { background-position: 220% 0; } }

/* ---- ShinyText: an animated gradient sweeps the eyebrow TEXT (site.js wraps
   the text in a .rb-shiny span; the pill background stays on the parent). A
   single element with background-clip:text — no duplicated layer, so no ghost. */
.rb-shiny {
    background: linear-gradient(110deg, var(--blue-deep) 0%, var(--blue-deep) 42%, #6aa6e0 50%, var(--blue-deep) 58%, var(--blue-deep) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: rbShine 5s linear infinite;
}
@keyframes rbShine { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .rb-shiny { animation: none; -webkit-text-fill-color: var(--blue-deep); color: var(--blue-deep); } }

/* ---- StarBorder: an animated gradient ring around primary CTAs ---- */
@property --rb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rb-star { position: relative; isolation: isolate; }
.rb-star::before {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
    background: conic-gradient(from var(--rb-a),
        rgba(17, 74, 126, 0) 0deg, #2f6fae 60deg, #114a7e 120deg,
        #0d3c68 180deg, rgba(17, 74, 126, 0) 240deg, rgba(17, 74, 126, 0) 360deg);
    animation: rbStar 4.4s linear infinite;
}
@keyframes rbStar { to { --rb-a: 360deg; } }
/* Fallback for engines without @property: a static soft ring (no jump). */
@supports not (background: conic-gradient(from var(--rb-a), red, blue)) {
    .rb-star::before { background: linear-gradient(120deg, #2f6fae, #114a7e, #0d3c68); animation: none; }
}

/* ---- SpotlightCard: a subtle radial highlight follows the cursor ---- */
.rb-spotlight { position: relative; }
.rb-spotlight::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    background: radial-gradient(220px circle at var(--rb-x, 50%) var(--rb-y, 50%), rgba(17, 74, 126, 0.10), transparent 60%);
    opacity: 0; transition: opacity 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .rb-spotlight:hover::after { opacity: 1; }
}

/* ---- ClickSpark: a small burst of sparks at the pointer on click ---- */
.rb-spark {
    position: fixed; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: radial-gradient(circle, #7ea8cf 0%, var(--blue) 70%); pointer-events: none; z-index: 9998;
    opacity: 0.95; will-change: transform, opacity;
    transition: transform 0.6s var(--ease), opacity 0.6s linear;
}

/* ==========================================================================
   Global mobile hardening — the whole site laid out cleanly on phones
   ========================================================================== */
/* Kill any horizontal scroll from decorative/parallax layers or the wide mock
   windows. `clip` (not `hidden`) so it never turns <body> into a scroll
   container — top-level sticky (header + features fallback) keeps working. */
body { overflow-x: clip; }

@media (max-width: 900px) {
    /* the big interactive mock windows must never exceed the viewport width */
    .hero-visual, .app-suite, .app-suite-stage { max-width: 100%; }
    .app-suite .app-window { max-width: 100%; overflow: hidden; }
    /* wide internal mock bars scroll instead of overflowing the page */
    .app-menubar, .app-wsmenu, .tab-strip, .store-catnav, .port-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 560px) {
    /* comfortable tap targets on the real site controls */
    .btn { padding: 12px 22px; }
    .btn-sm { padding: 10px 18px; }
    .btn-lg { padding: 14px 24px; }
    /* the hero CTAs stack full-width and are easy to hit */
    .hero-ctas { flex-wrap: wrap; }
    .hero-ctas .btn-primary { width: 100%; justify-content: center; }
    /* don't let the click-spark sit under fixed chrome awkwardly on tiny screens */
    .rb-spark { width: 5px; height: 5px; }
}

/* ==========================================================================
   React Bits — on-LOAD entrance + on-EXIT transitions (see site.js
   `rbTransitions`). Keep the `.rb-leaving` rule AFTER `.rb-ready` so the exit
   wins on the page being left. Reduced motion shows everything immediately.
   ========================================================================== */
html.rb-enter #main-content { opacity: 0; transform: translateY(16px); filter: blur(5px); }
html.rb-ready #main-content {
    opacity: 1; transform: none; filter: none;
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), filter 0.6s var(--ease);
}
html.rb-leaving #main-content {
    opacity: 0; transform: translateY(-12px); filter: blur(4px);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), filter 0.24s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
    html.rb-enter #main-content, html.rb-leaving #main-content { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* A smooth frosted dropdown OVERLAY (site.js mobileNav). position:absolute so
   opening it never pushes/reflows the page; ~90% opacity (frosted). It fades +
   slides in on open and out on close, with a gentle per-item stagger. */
.mobile-nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 40px -24px rgba(14, 27, 51, 0.5);
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.26s var(--ease), transform 0.28s var(--ease);
}
.mobile-nav.rb-anim { opacity: 1; transform: none; }
.mobile-nav.rb-closing { opacity: 0; transform: translateY(-10px); }
/* gentle per-item stagger as the panel opens */
.mobile-nav li { opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.34s var(--ease); }
.mobile-nav.rb-anim li { opacity: 1; transform: none; }
.mobile-nav.rb-anim li:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav.rb-anim li:nth-child(2) { transition-delay: 0.10s; }
.mobile-nav.rb-anim li:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav.rb-anim li:nth-child(4) { transition-delay: 0.20s; }
.mobile-nav.rb-anim li:nth-child(5) { transition-delay: 0.25s; }
.mobile-nav.rb-anim li:nth-child(6) { transition-delay: 0.30s; }
.mobile-nav.rb-anim li:nth-child(n+7) { transition-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
    .mobile-nav, .mobile-nav.rb-closing { opacity: 1; transform: none; transition: none; }
    .mobile-nav li { opacity: 1; transform: none; transition: none; }
}

/* Stacked feature screens carry a distinct mobile parallax on .fscreen. Their
   reveal rule (see the `.fstory.is-stacked … .fscreen` block above) transitions
   ONLY opacity — transform is intentionally left un-transitioned so the parallax
   drift tracks the scroll instead of lagging. (No extra rule needed here.) */

/* ==========================================================================
   AI Chat widget (site-wide) + "Get in touch" band + /contact page
   Motion is reactbits-style, vanilla: the panel springs out of the launcher
   and shrinks back into it ("on out"), bubbles blur-rise in, replies reveal
   word by word, the launcher leans toward the pointer. All of it is flattened
   under prefers-reduced-motion (block at the end).
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.live-dot {
    position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: nxLive 2.2s ease-out infinite;
}
@keyframes nxLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }

/* ---- launcher ---------------------------------------------------------- */
.nx-ai { position: fixed; right: 22px; bottom: 22px; z-index: 290; font-size: 0.92rem; }
.nx-ai-launcher {
    --mx: 0px; --my: 0px;
    position: relative; width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: radial-gradient(circle at 30% 25%, #2f6fae, var(--blue) 55%, var(--blue-deep));
    box-shadow: 0 14px 30px -10px rgba(3,45,78,.65), inset 0 1px 0 rgba(255,255,255,.25);
    transform: translate(var(--mx), var(--my)) scale(1);
    transition: transform 380ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms var(--ease), opacity 380ms var(--ease);
}
.nx-ai:not(.is-ready) .nx-ai-launcher { opacity: 0; transform: translateY(24px) scale(.4); }
.nx-ai-launcher:hover { transform: translate(var(--mx), var(--my)) scale(1.07); box-shadow: 0 18px 38px -10px rgba(3,45,78,.75), inset 0 1px 0 rgba(255,255,255,.3); }
.nx-ai-launcher:active { transform: translate(var(--mx), var(--my)) scale(.94); }
.nx-ai-launcher-ic { position: absolute; display: grid; place-items: center; transition: transform 360ms cubic-bezier(.34,1.56,.64,1), opacity 220ms var(--ease); }
.nx-ai-launcher:hover .is-open-ic { transform: rotate(90deg); }
.nx-ai-launcher .is-close-ic { opacity: 0; transform: rotate(-90deg) scale(.5); }
.nx-ai.is-open .nx-ai-launcher .is-open-ic { opacity: 0; transform: rotate(90deg) scale(.5); }
.nx-ai.is-open .nx-ai-launcher .is-close-ic { opacity: 1; transform: none; }
.nx-ai-launcher-ring {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(17,74,126,.45);
    animation: nxAiRing 3.6s ease-out infinite; pointer-events: none;
}
.nx-ai.is-open .nx-ai-launcher-ring { animation: none; opacity: 0; }
@keyframes nxAiRing { 0%, 55% { transform: scale(1); opacity: 0; } 60% { opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.nx-ai-launcher-tip {
    position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap; pointer-events: none;
    background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 8px 12px; border-radius: 10px;
    box-shadow: var(--shadow-pop); opacity: 0; transform: translate(8px, -50%) scale(.96);
    transition: opacity 200ms var(--ease), transform 260ms cubic-bezier(.34,1.56,.64,1);
}
.nx-ai-launcher-tip::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: var(--ink); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.nx-ai-launcher:hover .nx-ai-launcher-tip, .nx-ai.show-hint .nx-ai-launcher-tip { opacity: 1; transform: translate(0, -50%) scale(1); }
.nx-ai.is-open .nx-ai-launcher-tip { opacity: 0 !important; }

/* ---- panel: springs out of the launcher, shrinks back on close ---------- */
.nx-ai-panel {
    position: absolute; right: 0; bottom: 76px; width: 384px; height: min(600px, calc(100vh - 120px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(14,27,51,.45), 0 12px 24px -12px rgba(14,27,51,.18);
    transform-origin: calc(100% - 30px) calc(100% + 40px);
    opacity: 0; transform: translateY(14px) scale(.86); filter: blur(6px);
    transition: opacity 260ms ease-in, transform 280ms cubic-bezier(.4,0,.8,.4), filter 260ms ease-in;
}
.nx-ai-panel[hidden] { display: none; }
.nx-ai.is-open .nx-ai-panel {
    opacity: 1; transform: none; filter: none;
    transition: opacity 320ms var(--ease), transform 520ms cubic-bezier(.16,1.18,.3,1), filter 320ms var(--ease);
}

.nx-ai-head {
    display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; color: #fff;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
}
.nx-ai-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.nx-ai-avatar img { width: 24px; height: 24px; object-fit: contain; }
.nx-ai-avatar .live-dot { position: absolute; right: -2px; bottom: -2px; border: 2px solid var(--blue-deep); width: 11px; height: 11px; }
.nx-ai-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nx-ai-titles b { color: #fff; font-size: 0.98rem; }
.nx-ai-titles em { font-style: normal; font-size: 0.76rem; color: rgba(255,255,255,.72); }
.nx-ai-icon-btn {
    flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
    color: rgba(255,255,255,.85); transition: background 160ms var(--ease), transform 300ms cubic-bezier(.34,1.56,.64,1), color 160ms;
}
.nx-ai-icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.nx-ai-icon-btn[data-ai-close]:hover { transform: rotate(90deg); }
.nx-ai-icon-btn[data-ai-reset]:hover { transform: rotate(-120deg); }

.nx-ai-log {
    flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
    background: linear-gradient(180deg, var(--wash) 0%, var(--white) 100%); scroll-behavior: smooth; overscroll-behavior: contain;
}
.nx-ai-msg { display: flex; flex-direction: column; max-width: 88%; animation: nxAiIn 420ms cubic-bezier(.16,1,.3,1) both; }
.nx-ai-msg.no-anim { animation: none; }
.nx-ai-msg.from-user { align-self: flex-end; align-items: flex-end; animation-name: nxAiInRight; }
.nx-ai-msg.from-user.no-anim { animation: none; }
.nx-ai-msg.from-bot { align-self: flex-start; }
@keyframes nxAiIn { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nxAiInRight { from { opacity: 0; transform: translate(12px, 6px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.nx-ai-bubble { padding: 10px 13px; border-radius: 16px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.from-bot .nx-ai-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }
.from-user .nx-ai-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 8px 18px -10px rgba(17,74,126,.6); }
.is-error .nx-ai-bubble { background: var(--amber-tint); border-color: #f6d9a8; color: #7c4a03; }
.nx-ai-bubble p + p, .nx-ai-bubble p + ul, .nx-ai-bubble ul + p { margin-top: 7px; }
.nx-ai-bubble ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.nx-ai-bubble b { color: var(--ink); font-weight: 650; }
.from-user .nx-ai-bubble b { color: #fff; }
.nx-ai-bubble a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.nx-ai-w { opacity: 0; filter: blur(4px); transition: opacity 280ms var(--ease), filter 280ms var(--ease); }
.nx-ai-w.is-in { opacity: 1; filter: none; }

.nx-ai-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.nx-ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-light); animation: nxAiDot 1.1s ease-in-out infinite; }
.nx-ai-typing i:nth-child(2) { animation-delay: .15s; }
.nx-ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nxAiDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.nx-ai-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nx-ai-action {
    display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
    font-size: 0.8rem; font-weight: 600; color: var(--blue); background: var(--blue-tint); border: 1px solid var(--blue-tint-2);
    animation: nxAiChip 420ms cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 70ms);
    transition: background 160ms var(--ease), color 160ms var(--ease), transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 160ms;
}
.nx-ai-action:hover { background: var(--blue); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(17,74,126,.6); }
@keyframes nxAiChip { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }

/* suggestion / prompt chips (widget + contact page) */
.nx-ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.nx-ai-suggest[hidden] { display: none; }
.ai-prompt {
    padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer; text-align: left;
    font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
    transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease), transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 160ms;
}
.ai-prompt:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(17,74,126,.5); }
.nx-ai.is-open .nx-ai-suggest .ai-prompt { animation: nxAiChip 460ms cubic-bezier(.34,1.56,.64,1) both; }
.nx-ai.is-open .nx-ai-suggest .ai-prompt:nth-child(1) { animation-delay: 180ms; }
.nx-ai.is-open .nx-ai-suggest .ai-prompt:nth-child(2) { animation-delay: 240ms; }
.nx-ai.is-open .nx-ai-suggest .ai-prompt:nth-child(3) { animation-delay: 300ms; }
.nx-ai.is-open .nx-ai-suggest .ai-prompt:nth-child(4) { animation-delay: 360ms; }

.nx-ai-compose {
    display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px;
    border: 1px solid var(--line); border-radius: 16px; background: var(--wash);
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms;
}
.nx-ai-compose:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px var(--blue-tint); }
.nx-ai-compose textarea {
    flex: 1; resize: none; border: 0; outline: none; background: transparent; font: inherit; font-size: 0.9rem;
    color: var(--ink); padding: 8px 0; max-height: 120px; line-height: 1.4;
}
.nx-ai-send {
    flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
    color: #fff; background: var(--blue); transition: background 160ms var(--ease), transform 260ms cubic-bezier(.34,1.56,.64,1), opacity 160ms;
}
.nx-ai-send:hover { background: var(--blue-hover); transform: translate(2px, -2px) rotate(-8deg); }
.nx-ai-send:disabled { opacity: .5; cursor: default; transform: none; }
.nx-ai-fine { padding: 8px 14px 12px; font-size: 0.7rem; color: var(--slate-light); text-align: center; }
.nx-ai-fine a { color: var(--slate); text-decoration: underline; }

@media (max-width: 560px) {
    .nx-ai { right: 14px; bottom: 14px; }
    .nx-ai-launcher { width: 54px; height: 54px; }
    .nx-ai-launcher-tip { display: none; }
    .nx-ai-panel { position: fixed; left: 10px; right: 10px; bottom: 80px; width: auto; height: calc(100dvh - 100px); border-radius: 20px; transform-origin: calc(100% - 30px) 100%; }
}

/* ---- "Get in touch" band (above the footer on every page but /contact) --- */
.contact-band { position: relative; padding: 64px 0 86px; }
.contact-band .section-head { margin-bottom: 34px; }
.contact-band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cb-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 100%; text-align: left; cursor: pointer; padding: 26px; border-radius: var(--radius-lg);
    background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card);
    transition: opacity 620ms var(--ease), transform 300ms cubic-bezier(.34,1.56,.64,1), border-color 180ms var(--ease), box-shadow 220ms var(--ease);
}
.cb-card.reveal.is-visible:hover { transform: translateY(-5px); }
.cb-card:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); }
.cb-card b { color: var(--ink); font-size: 1.08rem; }
.cb-card > span:not(.cb-ic):not(.cb-more) { color: var(--slate); font-size: 0.92rem; line-height: 1.5; }
.cb-ic {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px;
    color: var(--blue); background: var(--blue-tint); transition: transform 360ms cubic-bezier(.34,1.56,.64,1);
}
.cb-card:hover .cb-ic { transform: rotate(-8deg) scale(1.1); }
.cb-more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--blue); }
.cb-card:hover .cb-more .chev { transform: translateX(4px); }
.cb-ai { color: #fff; border-color: transparent; background: linear-gradient(140deg, #1a5a94 0%, var(--blue) 45%, var(--blue-deep) 100%); }
.cb-ai::before {
    content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(22,184,198,.45), transparent 65%); animation: nxOrb 9s ease-in-out infinite;
}
.cb-ai > * { position: relative; }
.cb-ai b { color: #fff; }
.cb-ai > span:not(.cb-ic):not(.cb-more) { color: rgba(255,255,255,.78); }
.cb-ai .cb-ic { color: #fff; background: rgba(255,255,255,.14); }
.cb-ai .cb-more { color: #fff; }
.cb-ai:hover { border-color: transparent; box-shadow: 0 26px 50px -22px rgba(3,45,78,.75); }
.cb-ai:hover .cb-ic { transform: rotate(90deg) scale(1.1); }
@keyframes nxOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 24px) scale(1.15); } }

/* ---- /contact page ------------------------------------------------------ */
.btn-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 0 rgba(94,234,212,.6); animation: nxLive 2s ease-out infinite; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 28px; align-items: start; }
.contact-card {
    position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl);
    padding: 32px; box-shadow: var(--shadow-panel); scroll-margin-top: 96px;
}
.contact-card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.contact-card-head h2 { font-size: 1.35rem; }
.contact-card-head p { color: var(--slate); font-size: 0.9rem; margin-top: 2px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form[hidden] { display: none; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-topics legend { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; padding: 0; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip { position: relative; cursor: pointer; }
.topic-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topic-chip span {
    display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.84rem; font-weight: 600;
    color: var(--ink-soft); background: var(--wash); border: 1px solid var(--line);
    transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms, transform 260ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms;
}
.topic-chip:hover span { border-color: var(--blue-tint-2); color: var(--blue); transform: translateY(-2px); }
.topic-chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(17,74,126,.7); animation: nxChipPick 380ms cubic-bezier(.34,1.56,.64,1); }
.topic-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
@keyframes nxChipPick { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.char-count { align-self: flex-end; font-style: normal; font-size: 0.72rem; color: var(--slate-light); }
.contact-error { padding: 10px 12px; border-radius: 10px; background: var(--red-tint); color: var(--red); font-size: 0.85rem; font-weight: 500; }
.contact-error[hidden] { display: none; }
.contact-submit { width: 100%; }
.contact-submit .btn-arrow { transition: transform 260ms cubic-bezier(.34,1.56,.64,1); }
.contact-submit:hover .btn-arrow { transform: translate(3px, -3px) rotate(-10deg); }
.contact-success { padding: 26px 0 10px; }
.contact-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-ai-card {
    position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius-xl); color: rgba(255,255,255,.8);
    background: linear-gradient(150deg, #1a5a94 0%, var(--blue) 40%, var(--blue-deep) 100%);
    box-shadow: 0 30px 60px -30px rgba(3,45,78,.8);
}
.contact-ai-card > *:not(.contact-ai-orb) { position: relative; z-index: 1; }
.contact-ai-orb {
    position: absolute; width: 240px; height: 240px; right: -80px; top: -100px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(22,184,198,.5), transparent 65%); animation: nxOrb 10s ease-in-out infinite;
}
.contact-ai-orb.two { right: auto; left: -110px; top: auto; bottom: -130px; background: radial-gradient(circle, rgba(94,140,255,.35), transparent 65%); animation-duration: 13s; animation-direction: reverse; }
.contact-ai-badge {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14);
}
.contact-ai-card h3 { color: #fff; font-size: 1.35rem; margin: 14px 0 8px; }
.contact-ai-card p { font-size: 0.92rem; line-height: 1.55; }
.contact-ai-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 18px; }
.contact-ai-card .ai-prompt { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.contact-ai-card .ai-prompt:hover { background: #fff; color: var(--blue-deep); border-color: #fff; }
.contact-channel {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; cursor: default;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    transition: opacity 620ms var(--ease), transform 280ms cubic-bezier(.34,1.56,.64,1), border-color 180ms, box-shadow 200ms;
}
a.contact-channel, button.contact-channel { cursor: pointer; }
a.contact-channel:hover, button.contact-channel:hover { border-color: var(--blue-tint-2); box-shadow: var(--shadow-pop); }
a.contact-channel.reveal.is-visible:hover, button.contact-channel.reveal.is-visible:hover { transform: translateY(-3px); }
.contact-channel > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.contact-channel b { color: var(--ink); font-size: 0.95rem; }
.contact-channel em { font-style: normal; color: var(--slate); font-size: 0.84rem; }
.contact-channel .chev { color: var(--slate-light); }
.contact-channel:hover .chev { transform: translateX(3px); color: var(--blue); }

@media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-band-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .contact-card { padding: 22px 18px; }
    .contact-row { grid-template-columns: 1fr; }
    .contact-ai-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-ai-launcher, .nx-ai-panel, .nx-ai.is-open .nx-ai-panel, .nx-ai-launcher-ic, .nx-ai-w { transition: none !important; }
    .nx-ai-panel { filter: none; }
    .nx-ai-launcher-ring, .live-dot, .btn-ai-dot, .cb-ai::before, .contact-ai-orb { animation: none !important; }
    .nx-ai-msg, .nx-ai-action, .nx-ai.is-open .nx-ai-suggest .ai-prompt, .topic-chip input:checked + span { animation: none !important; }
    .nx-ai-w { opacity: 1; filter: none; }
}