/* ==========================================================================
   IMAGINATRIX PRODUCTS (imaginatrix.app) — additions on top of the shared
   design system (imaginatrix.css).

   Same brand DNA as imaginatrix.in — identical tokens, accent, fonts and
   motion vocabulary — but its own dialect: where .in is a spacious agency
   showcase, .app is a product storefront. Denser rhythm, software-console
   surfaces, real product UI on screen, and commercial furniture (plan
   toggle, sticky CTA, comparison matrix).

   Everything .app-only is scoped to `body.site-app` so imaginatrix.css can
   still be pulled straight from .in without conflicts.

   Accent discipline: cyan/teal stays the brand. Violet (--violet) is a
   FUNCTIONAL accent only — plan badges, savings, annual/lifetime signals.
   Never use it for general UI chrome.
   ========================================================================== */

/* ==========================================================================
   P0 · App theme layer — tokens
   ========================================================================== */
body.site-app {
    /* commerce accent (see discipline note above) */
    --violet: #7c5cff;
    --violet-soft: #a894ff;
    --violet-deep: #5a3fd6;
    --violet-line: rgba(124, 92, 255, .30);
    --violet-glass: rgba(124, 92, 255, .08);
    --grad-violet: linear-gradient(120deg, #5a3fd6 0%, #7c5cff 55%, #a894ff 100%);
    --glow-violet: 0 0 22px rgba(124, 92, 255, .35), 0 0 56px rgba(124, 92, 255, .12);

    /* product-console surfaces */
    --panel: #081514;
    --panel-2: #0b1e1c;
    --grid-line: rgba(30, 255, 255, .055);
}

/* ---------- Density: a storefront reads tighter than a showcase ---------- */
body.site-app .ix-section { padding: 92px 0; }
body.site-app .ix-section-tight { padding: 58px 0; }
body.site-app .sec-title { font-size: clamp(28px, 3.7vw, 45px); margin-bottom: 18px; }
body.site-app .sec-lead { font-size: 16.5px; }
body.site-app .sec-tag { font-size: 11.5px; margin-bottom: 18px; }
body.site-app .ix-card { padding: 30px 26px; }
body.site-app .ix-card h3 { font-size: 19.5px; margin-bottom: 11px; }
body.site-app .ix-card p { font-size: 14.5px; }
body.site-app .ix-card .card-icon { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 20px; }
body.site-app .ix-card .card-icon svg { width: 24px; height: 24px; }
body.site-app .grid { gap: 22px; }

@media (max-width: 860px) {
    body.site-app .ix-section { padding: 70px 0; }
    body.site-app .ix-section-tight { padding: 48px 0; }
}

/* between the wide nav and the burger the demo CTA runs out of room and wraps */
@media (min-width: 861px) and (max-width: 1000px) {
    body.site-app .ix-nav-cta .btn { padding: 12px 20px; font-size: 14px; white-space: nowrap; }
}

/* ---------- Hairline grid: the surface signature of the .app dialect ------ */
.app-grid-bg {
    position: relative;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px;
}

/* corner brackets — HUD framing for panels */
.app-brackets::before, .app-brackets::after {
    content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
    border: 0 solid var(--cyan); opacity: .55;
}
.app-brackets::before { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.app-brackets::after { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ---------- Violet commerce signals ---------- */
.save-flag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--violet-soft);
    background: var(--violet-glass); border: 1px solid var(--violet-line);
    white-space: nowrap;
}
.save-flag.solid {
    background: var(--grad-violet); border-color: transparent;
    color: #0b0620; font-weight: 600; box-shadow: var(--glow-violet);
}

/* ---------- Parent-brand ribbon (links back to imaginatrix.in) ---------- */
.brand-ribbon {
    display: flex; flex-direction: column; gap: 4px;
    width: fit-content; max-width: 340px; margin: 0 0 6px;
}
.brand-ribbon-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
    transition: color .3s ease;
}
.brand-ribbon-label::before { content: "// "; color: var(--teal); }
.brand-ribbon-name {
    display: inline-flex; align-items: baseline; gap: 7px;
    font-family: var(--font-display); font-size: 14.5px; font-weight: 500;
    line-height: 1.35; color: var(--cyan-soft);
    transition: color .3s ease;
}
.brand-ribbon-name svg {
    width: 11px; height: 11px; flex: none; align-self: center;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s var(--ease);
}
.brand-ribbon:hover .brand-ribbon-name { color: var(--cyan); }
.brand-ribbon:hover .brand-ribbon-label { color: var(--text-soft); }
.brand-ribbon:hover .brand-ribbon-name svg { transform: translate(2px, -2px); }

/* ---------- Category label on product cards ---------- */
.card-cat {
    display: inline-block; margin-bottom: 12px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cyan-soft);
}
.card-cat::before { content: "// "; color: var(--teal); }

/* whole-card product tiles keep the arrow pinned to the base */
.prod-card { display: flex; flex-direction: column; }
.prod-card p { flex: 1; }

/* ---------- Trust / value strip ---------- */
.trust-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--glass);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}
.trust-cell { padding: 26px 28px; border-left: 1px solid var(--line); }
.trust-cell:first-child { border-left: none; }
.trust-cell b {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text);
    margin-bottom: 6px;
}
.trust-cell b svg {
    width: 18px; height: 18px; flex: 0 0 18px;
    stroke: var(--cyan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(30,255,255,.5));
}
.trust-cell small { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); line-height: 1.6; display: block; }
@media (max-width: 860px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } .trust-cell:nth-child(-n+2) { border-top: none; } .trust-cell:nth-child(odd) { border-left: none; } .trust-cell:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; } .trust-cell { border-left: none; border-top: 1px solid var(--line); } .trust-cell:first-child { border-top: none; } }

/* ---------- Deployment / model split (subscription vs licence) ---------- */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 860px) { .model-grid { grid-template-columns: 1fr; } }
.model-card { position: relative; }
.model-card .price-list { margin-top: 18px; }
.model-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 14px;
}

/* ---------- Comparison table (pricing page) ---------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--bg-1); }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: rgba(6,16,15,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cyan-soft); font-weight: 500;
    border-bottom: 1px solid var(--line-strong);
}
.compare-table tbody th {
    font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text);
    white-space: nowrap;
}
.compare-table tbody th small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 3px; }
.compare-table td { font-size: 14px; color: var(--text-soft); }
.compare-table td .p { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cyan); }
.compare-table td .u { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); display: block; margin-top: 2px; }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: rgba(30,255,255,.03); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.tick { color: var(--cyan); }
.dash { color: var(--muted); opacity: .5; }
/* reuse the shared .price-amount (so the INR/USD/EUR switcher converts it too),
   but scaled down to sit inside a table cell */
.compare-table .price-amount { font-size: 18px; line-height: 1.1; }
.compare-table .price-amount.is-custom { font-size: 15px; padding-top: 0; }
.compare-table .u { margin-top: 4px; }

/* ---------- Legal hub (table of contents cards) ---------- */
.legal-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .legal-hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .legal-hub { grid-template-columns: 1fr; } }
.legal-hub a {
    display: block; padding: 22px 24px; border-radius: var(--radius-sm);
    background: var(--glass); border: 1px solid var(--line); color: inherit;
    transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.legal-hub a:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 20px rgba(30,255,255,.08); }
.legal-hub .lh-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--teal); }
.legal-hub h4 { font-family: var(--font-display); font-size: 16.5px; color: var(--text); margin: 8px 0 6px; }
.legal-hub p { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- "Who it's for" pill grid ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .who-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }

/* ---------- Compliance / badge line under legal hero ---------- */
.reg-line {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
.reg-line span {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
    padding: 7px 14px; border-radius: 999px;
    color: var(--cyan-soft); border: 1px solid var(--line-strong); background: rgba(30,255,255,.04);
}

/* ==========================================================================
   P1 · Product console — the app frame + the UI mock inside it

   The frame reuses the shared .svc-console chrome vocabulary; the mock is a
   self-contained kit rendered by views/partials/app-ui.php. Everything inside
   .app-ui is sized in `em` off a single --ui-base knob, so one font-size per
   placement scales the whole dashboard proportionally — no media queries,
   no container-query dependency, crisp at every DPI.
   ========================================================================== */
.app-console {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(150deg, rgba(30,255,255,.38), rgba(30,255,255,.06) 45%, rgba(20,125,108,.32)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(30,255,255,.07);
}
.app-console-bar {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(30,255,255,.035);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}
.app-console-bar .dots { display: flex; gap: 5px; flex: none; }
.app-console-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(30,255,255,.15); }
.app-console-bar .dots i:first-child { background: var(--teal); }
.app-console-bar .dots i:nth-child(2) { background: var(--cyan); box-shadow: 0 0 8px rgba(30,255,255,.6); }
.app-console-bar .path {
    flex: 1; min-width: 0; color: var(--cyan-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-console-bar .live { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.app-console-bar .live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
    animation: dot-pulse 2s ease-in-out infinite;
}
/* products with a public demo turn the status chip into the way in */
.app-console-bar .live.is-demo { color: var(--cyan-soft); }
a.live.is-demo {
    padding: 4px 10px 4px 9px; margin: -4px -4px -4px 0; border-radius: 999px;
    border: 1px solid var(--line-strong); background: rgba(30,255,255,.05);
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}
a.live.is-demo:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(30,255,255,.1); }
a.live.is-demo svg {
    width: 10px; height: 10px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s var(--ease);
}
a.live.is-demo:hover svg { transform: translate(1.5px, -1.5px); }

/* tile foot marker (the tile itself is the link, so this stays plain text) */
.demo-flag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cyan-soft);
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: rgba(30,255,255,.05);
}
.demo-flag::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
    background: var(--cyan); box-shadow: 0 0 7px var(--cyan);
    animation: dot-pulse 2s ease-in-out infinite;
}
/* status strip under the chrome — the "this is running software" tell */
.app-console-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    border-top: 1px solid var(--line);
    background: rgba(6,16,15,.6);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.app-console-meta span { padding: 9px 14px; border-left: 1px solid var(--line); flex: 1 1 auto; white-space: nowrap; }
.app-console-meta span:first-child { border-left: none; }
.app-console-meta b { color: var(--cyan-soft); font-weight: 500; }

/* ---------- the mock itself ---------- */
.app-ui {
    --ui-base: 9px;
    font-size: var(--ui-base);
    font-family: var(--font-body);
    display: grid; grid-template-columns: 14em 1fr;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 4.6em 4.6em,
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 4.6em 4.6em,
        radial-gradient(120% 90% at 78% 0%, rgba(30,255,255,.06), transparent 60%),
        var(--panel);
    position: relative; overflow: hidden;
    user-select: none;
}
/* sweeping scanline, matching the shared console idiom */
.app-ui::after {
    content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 22%;
    z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(30,255,255,.07) 50%, transparent);
    animation: console-scan 6s linear infinite;
    /* js/app.js parks the sweep while the console is off-screen */
    animation-play-state: var(--ui-anim, running);
}

/* sidebar */
.ui-side {
    padding: 1.6em 1.2em; border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(13,42,40,.5), rgba(13,42,40,.15));
    display: flex; flex-direction: column; gap: .45em;
}
.ui-brand {
    display: flex; align-items: center; gap: .7em;
    font-family: var(--font-display); font-size: 1.2em; font-weight: 700;
    color: var(--text); letter-spacing: -.01em; margin-bottom: 1.5em;
    white-space: nowrap;
}
.ui-brand::before {
    content: ""; width: 1.5em; height: 1.5em; border-radius: .45em; flex: none;
    background: var(--grad); box-shadow: 0 0 .9em rgba(30,255,255,.45);
}
.ui-nav {
    display: flex; align-items: center; gap: .8em;
    padding: .68em .85em; border-radius: .6em;
    font-size: 1.16em; color: var(--muted); letter-spacing: .005em;
}
.ui-nav::before {
    content: ""; width: .7em; height: .7em; border-radius: 50% .2em 50% .2em; flex: none;
    background: currentColor; opacity: .4;
}
.ui-nav.on {
    color: var(--cyan); background: rgba(30,255,255,.09);
    box-shadow: inset 2px 0 0 var(--cyan);
}
.ui-nav.on::before { background: var(--cyan); opacity: 1; box-shadow: 0 0 .6em var(--cyan); }
.ui-side-foot {
    margin-top: auto; padding-top: 1.2em; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: .95em; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}

/* main column */
.ui-main { padding: 1.5em 1.6em 1.7em; display: flex; flex-direction: column; gap: 1.2em; min-width: 0; }
.ui-top { display: flex; align-items: center; gap: 1em; }
.ui-title { font-family: var(--font-display); font-size: 1.7em; font-weight: 700; color: var(--text); letter-spacing: -.015em; }
.ui-crumb { font-family: var(--font-mono); font-size: 1em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ui-chip {
    margin-left: auto; flex: none;
    font-family: var(--font-mono); font-size: .98em; letter-spacing: .08em;
    padding: .45em .9em; border-radius: 999px;
    color: var(--cyan-soft); border: 1px solid var(--line-strong); background: rgba(30,255,255,.05);
}

/* KPI tiles */
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.ui-kpi {
    padding: 1em 1.1em; border-radius: .8em;
    border: 1px solid var(--line); background: var(--panel-2);
}
.ui-kpi b {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 2em; line-height: 1.1; color: var(--text); letter-spacing: -.02em;
}
.ui-kpi small {
    display: block; margin-top: .5em;
    font-family: var(--font-mono); font-size: .95em; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
}
.ui-kpi i {
    display: inline-block; margin-top: .6em; font-style: normal;
    font-family: var(--font-mono); font-size: .95em; letter-spacing: .04em;
    color: var(--cyan);
}
.ui-kpi i.down { color: var(--muted); }

/* chart panel */
.ui-panel {
    border: 1px solid var(--line); border-radius: .8em;
    background: var(--panel-2); padding: 1.1em 1.2em;
}
.ui-panel-head {
    display: flex; align-items: baseline; gap: .8em; margin-bottom: .9em;
    font-family: var(--font-mono); font-size: 1em; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.ui-panel-head b { color: var(--text-soft); font-weight: 500; }
.ui-panel-head span { margin-left: auto; color: var(--cyan-soft); }
.ui-chart-wrap { position: relative; }
.ui-chart { display: block; width: 100%; height: 8.4em; }
/* without the table, the chart panel grows to meet the taller sidebar
   instead of leaving a dead band at the foot of the console */
.app-ui.is-compact .ui-main > .ui-panel:last-child { flex: 1; display: flex; flex-direction: column; }
.app-ui.is-compact .ui-main > .ui-panel:last-child .ui-chart-wrap { flex: 1; min-height: 8.4em; }
.app-ui.is-compact .ui-main > .ui-panel:last-child .ui-chart { height: 100%; }
/* .area is filled by a per-instance gradient set inline in the partial —
   a CSS `fill` here would override that presentation attribute and break it */
.ui-chart .line { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(30,255,255,.55)); }
.ui-chart .base { stroke: var(--line); stroke-width: 1; }
.ui-chart-tip {
    position: absolute; right: 0; width: .62em; height: .62em; border-radius: 50%;
    transform: translate(50%, -50%);
    background: var(--cyan); box-shadow: 0 0 .7em var(--cyan);
}

/* data table */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th {
    text-align: left; padding: 0 .9em .7em 0;
    font-family: var(--font-mono); font-size: .95em; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.ui-table td {
    padding: .72em .9em .72em 0; font-size: 1.12em; color: var(--text-soft);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ui-table tr:last-child td { border-bottom: none; padding-bottom: 0; }
.ui-table td:first-child { font-family: var(--font-mono); font-size: 1em; color: var(--cyan-soft); }
.ui-table td:last-child, .ui-table th:last-child { text-align: right; padding-right: 0; }
.ui-tag {
    display: inline-block; padding: .28em .75em; border-radius: 999px;
    font-family: var(--font-mono); font-size: .9em; letter-spacing: .06em;
    color: var(--cyan); background: rgba(30,255,255,.09); border: 1px solid var(--line-strong);
}
/* an "attention" state inside the mock is not a commerce signal, so it stays
   neutral — violet is reserved for plans and savings */
.ui-tag.warn { color: var(--text-soft); background: rgba(184,214,209,.07); border-style: dashed; border-color: rgba(184,214,209,.28); }

/* placement scales */
.app-console.is-hero .app-ui { --ui-base: 9.5px; }
.app-console.is-panel .app-ui { --ui-base: 9px; }
@media (max-width: 1240px) { .app-console .app-ui { --ui-base: 8px; } }
@media (max-width: 1100px) { .app-console .app-ui { --ui-base: 9.5px; } }
@media (max-width: 760px) {
    .app-console .app-ui { --ui-base: 8px; grid-template-columns: 1fr; }
    .app-ui .ui-side { display: none; }
    .app-ui .ui-kpis { grid-template-columns: repeat(2, 1fr); }
    .app-ui .ui-kpi:nth-child(3) { display: none; }
    .app-console-meta span:nth-child(n+3) { display: none; }
}
@media (max-width: 420px) {
    .app-console .app-ui { --ui-base: 7px; }
    .ui-table th:nth-child(2), .ui-table td:nth-child(2) { display: none; }
}

/* ==========================================================================
   P1 · App hero — copy left, running product right
   ========================================================================== */
.app-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 52px; align-items: center;
}
body.site-app .ix-hero .ix-hero-content { max-width: none; width: 100%; }
body.site-app .hero-title { font-size: clamp(36px, 4.6vw, 62px); margin-bottom: 22px; }
body.site-app .hero-sub { font-size: clamp(15.5px, 1.1vw, 17px); margin-bottom: 32px; max-width: 540px; }
body.site-app .hero-actions { margin-bottom: 34px; align-items: center; }
body.site-app .hero-actions .link-arrow { margin-left: 6px; }
body.site-app .hero-badge { margin-bottom: 24px; }
/* the rings stay, dialled back so they read as atmosphere behind the console */
body.site-app .ix-hero .hero-rings { right: -420px; opacity: .32; }
/* sub-page heroes get to the goods faster than on the agency site */
body.site-app .ix-hero-page { min-height: 0; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 44px; }

.app-hero-console { position: relative; }
.app-hero-console .app-console { animation: ui-float 8s ease-in-out infinite; }
@keyframes ui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* trust line under the hero actions */
.hero-assure {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 34px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.hero-assure span { display: inline-flex; align-items: center; gap: 7px; }
.hero-assure span::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
    background: var(--cyan); box-shadow: 0 0 7px var(--cyan);
}

body.site-app .hero-stats { max-width: none; margin-top: 44px; }

@media (max-width: 1100px) {
    .app-hero-grid { grid-template-columns: 1fr; gap: 42px; }
    body.site-app .ix-hero { min-height: 0; padding-bottom: 60px; }
    body.site-app .ix-hero .hero-rings { display: none; }
    .app-hero-console .app-console { animation: none; }
}

/* ==========================================================================
   P1 · Sticky conversion bar
   ========================================================================== */
.app-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
    border-top: 1px solid var(--line-strong);
    background: rgba(6,16,15,.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -14px 40px rgba(0,0,0,.5);
    transform: translateY(110%);
    transition: transform .45s var(--ease);
}
.app-cta-bar.show { transform: translateY(0); }
.app-cta-inner { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.app-cta-copy { min-width: 0; }
.app-cta-copy b { display: block; font-family: var(--font-display); font-size: 15.5px; color: var(--text); }
.app-cta-copy span {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.app-cta-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.app-cta-close {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line); color: var(--muted);
    cursor: pointer; transition: color .3s ease, border-color .3s ease;
}
.app-cta-close:hover { color: var(--cyan); border-color: var(--line-strong); }
.app-cta-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
/* lift the floating bubbles clear of the bar */
body.cta-bar-open .wa-float, body.cta-bar-open .to-top { bottom: 98px; }

@media (max-width: 760px) {
    .app-cta-copy span { display: none; }
    .app-cta-copy b { font-size: 14px; line-height: 1.35; }
    .app-cta-inner { gap: 12px; }
    .app-cta-actions .btn-ghost { display: none; }
    .app-cta-actions .btn { white-space: nowrap; padding: 10px 16px; font-size: 13px; gap: 7px; }
    body.cta-bar-open .wa-float, body.cta-bar-open .to-top { bottom: 88px; }
}
@media (max-width: 420px) {
    .app-cta-copy b { font-size: 13px; }
    .app-cta-actions .btn svg { display: none; }
}

/* ==========================================================================
   P2 · Product switcher (reuses the shared [data-tabs] JS + .svc-tab markup)
   ========================================================================== */
.prod-switch { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 1100px) { .prod-switch { grid-template-columns: 1fr; gap: 26px; } }

.prod-switch .svc-tab .cat {
    display: block; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    font-weight: 400; margin-top: 3px; transition: color .3s ease;
}
.prod-switch .svc-tab.active .cat { color: var(--cyan-soft); }
.prod-switch .svc-tab { align-items: flex-start; }
.prod-switch .svc-tab .num { padding-top: 4px; }

.prod-panel-body { padding: 26px 2px 0; }
.prod-panel-body .sec-lead { max-width: none; font-size: 15.5px; }
.prod-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.prod-panel-head h3 { font-size: 24px; }
.prod-panel-head .from {
    margin-left: auto; font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: .08em; color: var(--muted);
}
.prod-panel-head .from b { color: var(--cyan); font-weight: 500; }
.prod-outcomes { display: grid; gap: 10px; margin: 20px 0 22px; }
.prod-outcomes li {
    position: relative; padding-left: 24px; font-size: 14.5px; color: var(--muted);
    line-height: 1.65;
}
.prod-outcomes li b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.prod-outcomes li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 8px; height: 8px; border-radius: 50% 2px 50% 2px;
    background: var(--cyan); box-shadow: 0 0 8px rgba(30,255,255,.45);
}
.prod-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 860px) {
    .prod-switch .svc-tab .cat { display: none; }
}

/* ==========================================================================
   P2 · Proof strip — numbers, not adjectives
   ========================================================================== */
.proof-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--glass); overflow: hidden;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.proof-cell { padding: 26px 24px; border-left: 1px solid var(--line); }
.proof-cell:first-child { border-left: none; }
.proof-cell b {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 30px; line-height: 1.1; color: var(--text);
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.proof-cell small {
    display: block; margin-top: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.proof-cell p { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) {
    .proof-strip { grid-template-columns: repeat(2, 1fr); }
    .proof-cell:nth-child(odd) { border-left: none; }
    .proof-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
    .proof-strip { grid-template-columns: 1fr; }
    .proof-cell { border-left: none; border-top: 1px solid var(--line); }
    .proof-cell:first-child { border-top: none; }
}

/* ==========================================================================
   P5 · Product tiles — the storefront grid on /products
   Each tile leads with the product's own console, so the lineup is scanned
   by what the software looks like, not by icon.
   ========================================================================== */
.prod-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 900px) { .prod-tiles { grid-template-columns: 1fr; } }

body.site-app .ix-card.prod-tile { padding: 0; overflow: hidden; display: block; }
.prod-tile .prod-tile-ui { border-bottom: 1px solid var(--line); }
/* the tile supplies the frame, so the console drops its own chrome */
.prod-tile .app-console {
    border: none; border-radius: 0; box-shadow: none; background: var(--panel);
}
.prod-tile .app-ui { --ui-base: 8px; }
.prod-tile .prod-tile-body { padding: 24px 26px 26px; }
.prod-tile .prod-tile-body h3 { font-size: 20px; margin-bottom: 9px; }
.prod-tile .prod-tile-body p { font-size: 14.5px; color: var(--muted); }
.prod-tile-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.prod-tile-foot .from {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted);
}
.prod-tile-foot .from b { color: var(--cyan); font-weight: 500; }
.prod-tile-foot .card-more { margin-top: 0; margin-left: auto; }

@media (max-width: 480px) {
    .prod-tile .prod-tile-body { padding: 20px 20px 22px; }
    .prod-tile-foot .card-more { margin-left: 0; }
}

/* ==========================================================================
   P4 · Pricing — billing-period toggle and the violet commerce signals
   ========================================================================== */
.pricing-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; margin-top: 26px;
}
.sec-center .pricing-controls .cur-switch { margin-top: 0; }

.plan-toggle {
    display: inline-flex; gap: 4px; padding: 5px;
    border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--glass);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.plan-toggle button {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px; border-radius: 999px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
    color: var(--muted);
    transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}
.plan-toggle button:hover { color: var(--cyan-soft); }
.plan-toggle button.active {
    background: var(--grad); color: #03110f; font-weight: 600;
    box-shadow: 0 0 16px rgba(30,255,255,.35);
}
/* on the active (cyan) pill the violet flag flips to dark-on-light for contrast */
.plan-toggle button.active .save-flag {
    color: #0b0620; background: rgba(11,6,32,.16); border-color: rgba(11,6,32,.28);
}

/* annual column / card — the one place violet leads */
.compare-table th.is-annual { color: var(--violet-soft); border-bottom-color: var(--violet-line); }
.compare-table td.is-annual { background: rgba(124,92,255,.05); }
.compare-table tbody tr:hover td.is-annual { background: rgba(124,92,255,.09); }
/* .price-amount is gradient-clipped text, so the accent is swapped on the
   gradient itself rather than on `color`. Must be background-IMAGE: the
   shorthand would reset background-clip and paint a solid violet block. */
.compare-table td.is-annual .price-amount { background-image: var(--grad-violet); }
.compare-table td.is-annual .p { color: var(--violet-soft); }

.price-badge.is-annual {
    background: #2a1b6b; color: #cfc2ff;
    border: 1px solid var(--violet-line);
    box-shadow: var(--glow-violet);
}
.price-card.featured.is-annual {
    background:
        linear-gradient(180deg, rgba(124,92,255,.20), transparent 45%) padding-box,
        linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
        var(--grad-violet) border-box;
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 34px rgba(124,92,255,.18);
}
.price-card.featured.is-annual .price-amount {
    background: var(--grad-violet);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.price-unit-note { display: block; margin-top: 7px; }

@media (max-width: 480px) {
    .pricing-controls { gap: 10px; }
    .plan-toggle button { padding: 8px 13px; font-size: 11px; gap: 7px; }
    .plan-toggle .save-flag { font-size: 9px; padding: 3px 7px; letter-spacing: .08em; }
}

/* ==========================================================================
   P9 · Mobile horizontal overflow
   --------------------------------------------------------------------------
   On a phone the home, pricing, about and contact pages were laying out wider
   than the screen. Chrome responds by zooming the page out (window.innerWidth
   457 against a documentElement.clientWidth of 390), and `body{overflow-x:
   hidden}` then clips the right-hand strip — which is why the nav's burger
   button was cut in half rather than merely off to the side.

   The body rule is a safety net, not a fix: it hides the symptom and makes the
   clipped content unreachable. These two rules remove the causes, so the page
   lays out at its real width and nothing needs clipping.

   Both are the same underlying mistake: a grid/flex track sized to its content
   instead of to its container.
   ========================================================================== */

/* The mobile drawer's product list used `repeat(2, auto)`, so its two columns
   were as wide as the longest product name (203px each = 411px) regardless of
   the screen. The drawer is `visibility:hidden` when closed, not `display:none`,
   so it still widened the document while the menu was shut. */
.ix-drawer-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* .svc-tabs becomes a horizontal scroller under 860px, but it never had
   anything to scroll: a `1fr` grid track carries an automatic minimum of
   `auto`, so the track itself grew to fit the tabs (437px) even though
   .prod-switch stayed 350px. minmax(0, 1fr) is what actually caps it; the
   min-width on the item is the matching half of the same fix. */
@media (max-width: 1100px) {
    .prod-switch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .svc-tabs { min-width: 0; max-width: 100%; }
}

/* The scroll-reveal entrance starts an element 44px to the right of where it
   lands. On a phone that 44px is the whole margin, so anything not yet
   revealed — everything below the fold — widens the document by exactly that
   much. Keep the animation, drop the sideways travel. */
@media (max-width: 700px) {
    [data-reveal="left"], [data-reveal="right"] { transform: translateY(36px); }
}

@media (max-width: 480px) {
    /* One column of product links reads better than two squeezed ones. */
    .ix-drawer-sub { grid-template-columns: minmax(0, 1fr); }
}