/* ══════════════════════════════════════════════════════════════════════
   CFX Suite — marketing design system

   Loaded after style.css. style.css still powers the admin, partner and
   marketplace surfaces; everything here governs the public site and
   deliberately overrides the old navbar and button styles.

   The look is a dark neutral canvas with one saturated accent per app.
   Pages set --app-from / --app-to inline and every accented element picks
   them up, so a tool page themes itself from the catalog with no per-app CSS.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* Canvas — near-black neutrals, no blue cast, so app accents stay clean. */
    --ink:        #08080a;
    --ink-1:      #0d0d10;
    --ink-2:      #131318;
    --ink-3:      #1b1b22;
    --ink-4:      #24242d;

    --line:       rgba(255, 255, 255, 0.085);
    --line-2:     rgba(255, 255, 255, 0.16);

    --txt:        #f4f4f7;
    --txt-2:      #a6a6b2;
    --txt-3:      #6f6f7c;

    /* Suite mark — used where nothing app-specific applies. */
    --brand-from: #4c8dff;
    --brand-to:   #b721ff;

    /* Default accent; every app page overrides these two inline. */
    --app-from:   var(--brand-from);
    --app-to:     var(--brand-to);

    --ok:         #35c977;
    --warn:       #f0a92c;
    --bad:        #f2545b;

    --r-sm:  8px;
    --r:     14px;
    --r-lg:  22px;
    --r-xl:  30px;

    --nav-h: 64px;
    --wrap:  1240px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Test deployment banner ───────────────────────────────────────── */
/*
   Shown only when TEST_MODE is on. It sits above the fixed nav and pushes the
   whole page down, so it can't be scrolled past or mistaken for a dismissible
   notice — that's the point.
*/
.test-banner {
    position: fixed; inset: 0 0 auto 0; z-index: 300;
    height: 36px; display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    background: repeating-linear-gradient(-45deg, #f0a92c 0 14px, #d4901c 14px 28px);
    color: #1a1200; font-size: 12.5px; font-weight: 600;
}
.test-banner strong { font-weight: 800; letter-spacing: 0.08em; font-size: 11.5px; }
.test-banner span   { opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-banner code   { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.test-banner a      { margin-left: auto; color: #1a1200; text-decoration: underline; white-space: nowrap; }

/* Everything fixed or full-height shifts down by the banner's height. */
body.is-test .suite-nav { top: 36px; }
body.is-test .hero      { padding-top: calc(var(--nav-h) + 36px + 108px); }
body.is-test .dash-head { padding-top: calc(var(--nav-h) + 36px + 52px); }
body.is-test { padding-top: 36px; }
@media (max-width: 860px) {
    .test-banner span { display: none; }
}

/* ── Base ─────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body.suite {
    background: var(--ink);
    color: var(--txt);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11' 1, 'ss01' 1;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
}

body.suite ::selection { background: color-mix(in srgb, var(--app-from) 40%, transparent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; }

.suite section { position: relative; }

/* Vertical rhythm. Sections are large by default; --tight trims them. */
.sec      { padding: 120px 0; }
.sec-sm   { padding: 76px 0; }
.sec-line { border-top: 1px solid var(--line); }

/* ── Type ─────────────────────────────────────────────────────────── */

.suite h1, .suite h2, .suite h3, .suite h4 {
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.08;
    color: var(--txt);
}

.d1 { font-size: clamp(2.9rem, 6.4vw, 5.1rem); font-weight: 800; letter-spacing: -0.04em; }
.d2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; }
.d3 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); font-weight: 700; }

.kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--txt-2);
}
.kicker::before {
    content: ''; width: 22px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--app-from), var(--app-to));
}

.lead      { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--txt-2); line-height: 1.65; }
.muted     { color: var(--txt-2); }
.muted-sm  { color: var(--txt-3); font-size: 13px; }

.grad-text {
    background: linear-gradient(100deg, var(--app-from), var(--app-to));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ── App tile — the suite's visual signature ──────────────────────── */
/*
   A rounded square carrying a two-letter monogram, the way every desktop
   creative suite marks its apps. Rendered in CSS rather than as an image so
   it stays crisp at every size and themes itself from the catalog accents.
*/
.tile {
    --tile: 56px;
    position: relative; flex: none;
    width: var(--tile); height: var(--tile);
    border-radius: calc(var(--tile) * 0.235);
    background: linear-gradient(145deg, var(--app-from), var(--app-to));
    display: grid; place-items: center;
    font-weight: 800; letter-spacing: -0.03em;
    font-size: calc(var(--tile) * 0.36);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
/* Diagonal sheen — reads as depth without an image. */
.tile::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 46%);
    pointer-events: none;
}
.tile-xs { --tile: 30px; }
.tile-sm { --tile: 40px; }
.tile-lg { --tile: 76px; }
.tile-xl { --tile: 104px; }

/* Glow behind a large tile, tinted by the app accent. */
.tile-glow { position: relative; display: inline-flex; }
.tile-glow::before {
    content: ''; position: absolute; inset: -34%;
    background: radial-gradient(circle, color-mix(in srgb, var(--app-from) 42%, transparent) 0%, transparent 68%);
    filter: blur(26px); z-index: 0; pointer-events: none;
}
.tile-glow > .tile { position: relative; z-index: 1; }

/* ── Buttons ──────────────────────────────────────────────────────── */

.suite .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 620; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform 0.18s var(--ease), background 0.2s, border-color 0.2s, opacity 0.2s;
}
.suite .btn:active { transform: translateY(1px); }

.suite .btn-primary {
    background: linear-gradient(100deg, var(--app-from), var(--app-to));
    color: #fff; border: none;
}
.suite .btn-primary:hover { opacity: 0.9; }

.suite .btn-light { background: var(--txt); color: var(--ink); }
.suite .btn-light:hover { background: #fff; }

.suite .btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--txt); border-color: var(--line-2); }
.suite .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }

.suite .btn-sm  { padding: 9px 17px; font-size: 13.5px; }
.suite .btn-lg  { padding: 16px 32px; font-size: 15.5px; }
.suite .btn-block { display: flex; width: 100%; }
.suite .btn[disabled], .suite .btn.is-disabled {
    opacity: 0.42; pointer-events: none;
}

/* ── Navigation ───────────────────────────────────────────────────── */

.suite-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 200;
    height: var(--nav-h);
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--line);
}
.suite-nav-inner {
    max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 32px;
    display: flex; align-items: center; gap: 8px;
}

.nav-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 16.5px; font-weight: 750; letter-spacing: -0.025em;
    color: var(--txt); text-decoration: none; margin-right: 12px;
}
.nav-brand .mark {
    width: 22px; height: 22px; border-radius: 6.5px;
    background: linear-gradient(145deg, var(--brand-from), var(--brand-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nav-brand em { font-style: normal; color: var(--txt-3); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a, .nav-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 9px; border: none; background: none;
    font-family: inherit; font-size: 14px; font-weight: 550;
    color: var(--txt-2); text-decoration: none; cursor: pointer;
    transition: color 0.16s, background 0.16s;
}
.nav-links > a:hover, .nav-trigger:hover,
.nav-links > a.is-active { color: var(--txt); background: rgba(255, 255, 255, 0.06); }
.nav-trigger svg { transition: transform 0.22s var(--ease); }
.nav-has-mega.open .nav-trigger { color: var(--txt); background: rgba(255, 255, 255, 0.06); }
.nav-has-mega.open .nav-trigger svg { transform: rotate(180deg); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-avatar { width: 26px; height: 26px; border-radius: 50%; }

/* Apps mega-menu */
.nav-has-mega { position: relative; }
.mega {
    position: absolute; top: calc(100% + 12px); left: -20px;
    width: min(760px, calc(100vw - 40px));
    background: var(--ink-1);
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    box-shadow: 0 32px 80px -18px rgba(0, 0, 0, 0.85);
    padding: 14px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav-has-mega.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-item {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 13px; border-radius: var(--r); text-decoration: none;
    transition: background 0.16s;
}
.mega-item:hover { background: rgba(255, 255, 255, 0.055); }
.mega-item strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--txt); letter-spacing: -0.015em; }
.mega-item span   { display: block; font-size: 12.5px; color: var(--txt-3); line-height: 1.45; margin-top: 2px; }

.mega-foot {
    margin-top: 10px; padding: 15px 17px; border-radius: var(--r);
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--brand-from) 17%, transparent),
        color-mix(in srgb, var(--brand-to) 17%, transparent));
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    text-decoration: none;
}
.mega-foot strong { font-size: 14.5px; font-weight: 680; color: var(--txt); }
.mega-foot span   { font-size: 12.5px; color: var(--txt-2); }

/* Mobile nav */
.nav-burger {
    display: none; width: 40px; height: 40px; margin-left: auto;
    background: none; border: none; cursor: pointer;
    flex-direction: column; justify-content: center; gap: 5px; padding: 9px;
}
.nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--txt);
    transition: transform 0.24s var(--ease), opacity 0.18s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
    position: relative; padding: calc(var(--nav-h) + 108px) 0 96px;
    overflow: hidden;
}
.hero-aura {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 55% at 18% 0%,  color-mix(in srgb, var(--app-from) 24%, transparent) 0%, transparent 62%),
        radial-gradient(52% 50% at 88% 12%, color-mix(in srgb, var(--app-to)   20%, transparent) 0%, transparent 60%);
}
/* Faint grid, the way technical product sites ground a dark hero. */
.hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 78%);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── Screenshot slots ─────────────────────────────────────────────── */
/*
   Every slot renders a labelled placeholder until a real file exists at the
   path the catalog names, so the layout is final before the art arrives.
*/
.shot {
    position: relative; width: 100%; border-radius: var(--r-lg);
    border: 1px solid var(--line-2); overflow: hidden;
    background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.shot img { display: block; width: 100%; height: auto; }

.shot-empty {
    aspect-ratio: 16 / 10;
    display: grid; place-content: center; justify-items: center; gap: 12px;
    text-align: center; padding: 30px;
    background:
        radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--app-from) 11%, transparent), transparent 70%),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.017) 0 12px,
            transparent 12px 24px),
        var(--ink-1);
}
.shot-empty .shot-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
    color: var(--txt-3);
}
.shot-empty b   { display: block; font-size: 13.5px; font-weight: 620; color: var(--txt-2); letter-spacing: -0.01em; }
.shot-empty code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px; color: var(--txt-3);
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
    padding: 3px 8px; border-radius: 6px;
}

/* Fake window chrome — makes an app screenshot read as an app. */
.shot-chrome { padding-top: 34px; }
.shot-chrome::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 34px; z-index: 2;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
}
.shot-chrome::after {
    content: ''; position: absolute; top: 13px; left: 15px; z-index: 3;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-4);
    box-shadow: 15px 0 0 var(--ink-4), 30px 0 0 var(--ink-4);
}

/* ── Cards & grids ────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    background: var(--ink-1); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 26px;
    transition: border-color 0.2s, background 0.2s, transform 0.24s var(--ease);
}
.card:hover { border-color: var(--line-2); }

/* Feature card — small tinted rule above the title. */
.feat h4 { font-size: 15.5px; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.015em; }
.feat p  { font-size: 14px; color: var(--txt-2); line-height: 1.62; }
.feat::before {
    content: ''; display: block; width: 26px; height: 3px; border-radius: 3px; margin-bottom: 16px;
    background: linear-gradient(90deg, var(--app-from), var(--app-to));
}

/* App card on the landing page — the whole tile is the link. */
.app-card {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    padding: 26px; border-radius: var(--r-lg);
    background: var(--ink-1); border: 1px solid var(--line);
    text-decoration: none; overflow: hidden; isolation: isolate;
    transition: transform 0.3s var(--ease), border-color 0.25s;
}
.app-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: radial-gradient(90% 70% at 12% 0%, color-mix(in srgb, var(--app-from) 20%, transparent), transparent 68%);
    transition: opacity 0.32s var(--ease);
}
.app-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--app-from) 42%, var(--line)); }
.app-card:hover::before { opacity: 1; }

.app-card-name { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; color: var(--txt); }
.app-card-tag  { font-size: 13.5px; color: var(--txt-2); line-height: 1.55; }
.app-card-foot {
    margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.app-card-price { font-size: 13.5px; color: var(--txt-2); }
.app-card-price b { color: var(--txt); font-weight: 680; }
.app-card-go {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 620; color: var(--txt-2);
    transition: color 0.18s, gap 0.18s var(--ease);
}
.app-card:hover .app-card-go { color: var(--txt); gap: 10px; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stats > div { background: var(--ink-1); padding: 30px 26px; text-align: center; }
.stats b { display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.035em; }
.stats span { display: block; font-size: 13px; color: var(--txt-2); margin-top: 6px; }

/* Alternating showcase row */
.showcase { display: grid; grid-template-columns: 1fr 1.28fr; gap: 60px; align-items: center; }
.showcase + .showcase { margin-top: 100px; }
.showcase:nth-child(even) > :first-child { order: 2; }

/* ── Pricing ──────────────────────────────────────────────────────── */

/* Monthly / yearly segmented control */
.seg {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px;
}
.seg button {
    padding: 9px 20px; border-radius: 999px; border: none; background: none;
    font-family: inherit; font-size: 13.5px; font-weight: 620; color: var(--txt-2);
    cursor: pointer; transition: color 0.18s, background 0.22s var(--ease);
    display: inline-flex; align-items: center; gap: 8px;
}
.seg button.on { background: var(--txt); color: var(--ink); }
.seg .save {
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    padding: 2px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok);
}
.seg button.on .save { background: color-mix(in srgb, var(--ok) 90%, #000); color: #fff; }

.price-card {
    position: relative; display: flex; flex-direction: column;
    padding: 28px; border-radius: var(--r-lg);
    background: var(--ink-1); border: 1px solid var(--line);
    transition: border-color 0.22s, transform 0.26s var(--ease);
}
.price-card:hover { border-color: var(--line-2); transform: translateY(-3px); }

.price-card.featured {
    border-color: color-mix(in srgb, var(--app-from) 50%, var(--line));
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--app-from) 13%, transparent), transparent 66%),
        var(--ink-1);
}
.price-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 4px 13px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 720; letter-spacing: 0.07em; text-transform: uppercase; color: #fff;
    background: linear-gradient(100deg, var(--app-from), var(--app-to));
}

.price-amount { display: flex; align-items: baseline; gap: 3px; margin: 4px 0 6px; }
.price-amount .cur { font-size: 20px; font-weight: 640; color: var(--txt-2); align-self: flex-start; margin-top: 8px; }
.price-amount .num { font-size: clamp(2.5rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.price-amount .per { font-size: 14.5px; color: var(--txt-3); font-weight: 550; margin-left: 3px; }
.price-note { font-size: 12.5px; color: var(--txt-3); min-height: 19px; }
.price-note s { color: var(--txt-3); opacity: 0.75; }
.price-note .save-amt { color: var(--ok); font-weight: 620; }

.price-list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.8px; color: var(--txt-2); line-height: 1.5; }
.price-list li svg { flex: none; margin-top: 3px; color: var(--app-from); }
.price-list li.off { color: var(--txt-3); }
.price-list li.off svg { color: var(--txt-3); opacity: 0.6; }

/* App picker on the pricing page — build-your-own-bundle */
.picker-row {
    display: flex; align-items: center; gap: 16px; padding: 16px 18px;
    border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-1);
    cursor: pointer; user-select: none;
    transition: border-color 0.18s, background 0.18s;
}
.picker-row:hover { border-color: var(--line-2); }
.picker-row.on {
    border-color: color-mix(in srgb, var(--app-from) 55%, var(--line));
    background: linear-gradient(100deg, color-mix(in srgb, var(--app-from) 9%, var(--ink-1)), var(--ink-1));
}
.picker-row input { position: absolute; opacity: 0; pointer-events: none; }
.picker-check {
    flex: none; width: 21px; height: 21px; border-radius: 6px;
    border: 1.5px solid var(--line-2); display: grid; place-items: center;
    color: transparent; transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.picker-row.on .picker-check {
    background: linear-gradient(145deg, var(--app-from), var(--app-to));
    border-color: transparent; color: #fff;
}
.picker-name  { font-size: 14.5px; font-weight: 640; letter-spacing: -0.015em; }
.picker-tag   { font-size: 12.5px; color: var(--txt-3); }
.picker-price { margin-left: auto; font-size: 14px; font-weight: 650; color: var(--txt-2); white-space: nowrap; }

.cart-summary {
    position: sticky; top: calc(var(--nav-h) + 24px);
    padding: 26px; border-radius: var(--r-lg);
    background: var(--ink-1); border: 1px solid var(--line-2);
}
.cart-line { display: flex; justify-content: space-between; gap: 14px; font-size: 13.8px; color: var(--txt-2); padding: 7px 0; }
.cart-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 15px; font-weight: 650; color: var(--txt);
}
.cart-total .amt { font-size: 26px; font-weight: 800; letter-spacing: -0.035em; }
.cart-hint {
    margin-top: 12px; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
    background: color-mix(in srgb, var(--ok) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent); color: var(--ok);
}

/* ── Misc ─────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
    font-size: 12.5px; font-weight: 570; color: var(--txt-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.cta-band {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl); padding: 68px 48px; text-align: center;
    border: 1px solid var(--line-2);
    background:
        radial-gradient(90% 130% at 50% 0%, color-mix(in srgb, var(--app-from) 22%, transparent), transparent 62%),
        radial-gradient(70% 110% at 90% 100%, color-mix(in srgb, var(--app-to) 16%, transparent), transparent 60%),
        var(--ink-1);
}

.faq details {
    border-bottom: 1px solid var(--line); padding: 20px 0;
}
.faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
    font-size: 15.5px; font-weight: 620; letter-spacing: -0.015em; color: var(--txt);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; flex: none; font-size: 21px; font-weight: 400; color: var(--txt-3); line-height: 1;
    transition: transform 0.24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; font-size: 14.2px; color: var(--txt-2); line-height: 1.66; max-width: 76ch; }

.note {
    padding: 15px 18px; border-radius: var(--r);
    background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
    font-size: 13.5px; color: var(--txt-2); line-height: 1.6;
}

/* ── Checkout & forms ─────────────────────────────────────────────── */

.co-step { padding: 26px 0; border-top: 1px solid var(--line); }
.co-step:first-of-type { border-top: none; padding-top: 0; }
.co-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-step-head h3 { font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }
.co-num {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: linear-gradient(145deg, var(--app-from), var(--app-to)); color: #fff;
}

.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.co-field label { font-size: 12.5px; font-weight: 580; color: var(--txt-2); }
.co-field input, .co-field select {
    width: 100%; padding: 12px 14px; border-radius: 10px;
    background: var(--ink-2); border: 1px solid var(--line-2); color: var(--txt);
    font-family: inherit; font-size: 14.5px;
    transition: border-color 0.18s, background 0.18s;
}
.co-field input:focus, .co-field select:focus {
    outline: none; background: var(--ink-3);
    border-color: color-mix(in srgb, var(--app-from) 60%, var(--line-2));
}
.co-field input::placeholder { color: var(--txt-3); }

.co-card {
    padding: 6px 12px; border-radius: 10px; min-height: 56px;
    background: var(--ink-2); border: 1px solid var(--line-2);
}

.co-discord {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px;
    border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-2);
}
.co-discord img { width: 38px; height: 38px; border-radius: 50%; }
.co-discord strong { display: block; font-size: 14.5px; font-weight: 640; }
.co-discord span   { display: block; font-size: 12.5px; color: var(--ok); }

.co-terms { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--txt-2); line-height: 1.55; cursor: pointer; }
.co-terms input { margin-top: 3px; accent-color: var(--app-from); width: 16px; height: 16px; flex: none; }
.co-terms a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }

.co-alert {
    padding: 13px 16px; border-radius: 10px; margin-bottom: 18px;
    font-size: 13.8px; line-height: 1.55;
}
.co-alert.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 32%, transparent); color: #ffb3b7; }
.co-alert.ok  { background: color-mix(in srgb, var(--ok)  13%, transparent); border: 1px solid color-mix(in srgb, var(--ok)  32%, transparent); color: #9ae6bd; }

/* ── Dashboard ────────────────────────────────────────────────────── */

.dash-head {
    padding: calc(var(--nav-h) + 52px) 0 36px;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(60% 100% at 15% 0%, color-mix(in srgb, var(--app-from) 12%, transparent), transparent 65%);
}

.sub-card {
    display: flex; align-items: center; gap: 18px; padding: 20px 22px;
    border-radius: var(--r-lg); background: var(--ink-1); border: 1px solid var(--line);
    transition: border-color 0.2s;
}
.sub-card:hover { border-color: var(--line-2); }
.sub-card.lapsed { opacity: 0.62; }
.sub-meta { flex: 1; min-width: 0; }
.sub-name { font-size: 15.5px; font-weight: 680; letter-spacing: -0.02em; }
.sub-sub  { font-size: 12.8px; color: var(--txt-3); margin-top: 3px; }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em;
}
.badge.ok      { background: color-mix(in srgb, var(--ok)   16%, transparent); color: var(--ok); }
.badge.warn    { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge.bad     { background: color-mix(in srgb, var(--bad)  16%, transparent); color: var(--bad); }
.badge.neutral { background: rgba(255, 255, 255, 0.07); color: var(--txt-2); }

.key-box {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-2);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px; letter-spacing: 0.05em; color: var(--txt);
    word-break: break-all;
}

/* ── Footer ───────────────────────────────────────────────────────── */

.suite-foot { border-top: 1px solid var(--line); background: var(--ink-1); padding: 64px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; }
.foot-col h5 {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--txt-3); margin-bottom: 15px;
}
.foot-col a {
    display: block; padding: 5px 0; font-size: 13.8px; color: var(--txt-2);
    text-decoration: none; transition: color 0.16s;
}
.foot-col a:hover { color: var(--txt); }
.foot-bar {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    font-size: 12.8px; color: var(--txt-3);
}

/* ── Utilities ────────────────────────────────────────────────────── */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center  { text-align: center; }
.center-x { margin-left: auto; margin-right: auto; }
.wrap-x  { flex-wrap: wrap; }
.gap-6  { gap: 6px; }  .gap-8  { gap: 8px; }  .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }
.mt-8  { margin-top: 8px; }  .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; } .mt-72 { margin-top: 72px; }
.mb-8  { margin-bottom: 8px; }  .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; } .mb-56 { margin-bottom: 56px; }
.maxw-60 { max-width: 60ch; } .maxw-70 { max-width: 70ch; }

/* Reveal on scroll — inert until the script adds .in, so a JS failure
   leaves the content visible rather than blank. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
    .suite * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase { grid-template-columns: 1fr; gap: 34px; }
    .showcase:nth-child(even) > :first-child { order: 0; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
    .wrap { padding: 0 20px; }
    .suite-nav-inner { padding: 0 20px; }
    .sec { padding: 76px 0; }
    .sec-sm { padding: 52px 0; }
    .hero { padding: calc(var(--nav-h) + 64px) 0 64px; }

    .nav-burger { display: flex; }
    .nav-links, .nav-right {
        position: fixed; left: 0; right: 0; top: var(--nav-h);
        display: none; flex-direction: column; align-items: stretch; gap: 2px;
        padding: 14px 20px; margin: 0;
        background: var(--ink-1); border-bottom: 1px solid var(--line);
    }
    .nav-links.open { display: flex; }
    .nav-right.open { display: flex; top: auto; position: static; background: none; border: none; padding: 14px 20px 20px; }
    .nav-links > a, .nav-trigger { padding: 12px 4px; font-size: 15px; }
    .nav-right .btn { justify-content: center; }

    /* The mega-menu becomes a plain expanding list on small screens. */
    .nav-has-mega { position: static; }
    .mega {
        position: static; width: 100%; opacity: 1; visibility: visible; transform: none;
        display: none; border: none; box-shadow: none; background: none; padding: 4px 0 10px;
    }
    .nav-has-mega.open .mega { display: block; }
    .mega-grid { grid-template-columns: 1fr; }
    .mega-foot { margin-top: 6px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .cta-band { padding: 48px 24px; }
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .co-row { grid-template-columns: 1fr; gap: 0; }
    .sub-card { flex-wrap: wrap; }

    /* Pricing and checkout both use an inline two-column grid that has to collapse. */
    .grid[style*="1.5fr"], .grid[style*="1.35fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .d1 { font-size: 2.4rem; }
    .card, .app-card, .price-card { padding: 22px; }
}