/* ============================================================================
   Narrative Geometry — design system
   Scope: everything is prefixed .ng- and the body carries .ng-body, so this
   file can sit alongside your existing site.css without fighting it.
   ========================================================================= */

.ng-body {
    /* ---- palette -------------------------------------------------------- */
    --ng-navy: #0f3557;
    --ng-navy-deep: #0a2740;
    --ng-navy-line: #1c4a70;
    --ng-wine: #7c2b4a;
    --ng-wine-deep: #5e1f37;
    --ng-wine-tint: #f3e8ec;
    --ng-gold: #d9a441;
    --ng-gold-lit: #f0cd84;
    --ng-canvas: #eceef2;
    --ng-paper: #fbf9f3;
    --ng-paper-warm: #f2ecdf;
    --ng-ink: #1b232e;
    --ng-ink-soft: #5d6774;
    --ng-ink-faint: #8b93a0;
    --ng-rule: #e2dccc;
    --ng-rule-cool: #dfe3e9;

    /* ---- type ----------------------------------------------------------- */
    --ng-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
    --ng-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ng-mono: 'JetBrains Mono', 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; 

    /* ---- geometry ------------------------------------------------------- */
    --ng-r: 10px;
    --ng-r-sm: 6px;
    --ng-shell: 1180px;

    background: var(--ng-canvas);
    color: var(--ng-ink);
    font-family: var(--ng-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.ng-body h1,
.ng-body h2,
.ng-body h3,
.ng-body .ng-display {
    font-family: var(--ng-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.12;
    color: var(--ng-ink);
}

.ng-shell {
    width: 100%;
    max-width: var(--ng-shell);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---- utility label: the small mono caps used all over the studio -------- */
.ng-label {
    font-family: var(--ng-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ng-ink-faint);
}

.ng-rule {
    height: 1px;
    background: var(--ng-rule);
    border: 0;
    margin: 0;
}

/* ============================================================================
   NAVBAR
   ========================================================================= */

.ng-nav {
    background: var(--ng-navy);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(217,164,65,.28);
    min-height: 66px;
    padding-block: 0;
}

    .ng-nav .container-fluid {
        max-width: 1440px;
        gap: 8px;
    }

.ng-brand {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    text-decoration: none;
    padding-block: .55rem;
}

    .ng-brand:hover {
        text-decoration: none;
    }

.ng-brand__glyph {
    width: 22px;
    height: 22px;
    color: var(--ng-gold-lit);
    fill: currentColor;
    flex: 0 0 auto;
    align-self: center;
}

.ng-brand__mark {
    font-family: var(--ng-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
}

    /* "Narrative" upright, "Geometry" italic — the lockup, not two words. */
    .ng-brand__mark em {
        font-style: italic;
        font-weight: 600;
        color: rgba(255,255,255,.72);
        margin-left: .22em;
    }

@media (max-width: 400px) {
    .ng-brand__mark {
        font-size: 1.2rem;
    }

    .ng-brand__beta {
        display: none;
    }
}

.ng-brand__beta {
    font-family: var(--ng-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ng-gold-lit);
    border: 1px solid rgba(240,205,132,.45);
    border-radius: 3px;
    padding: .18rem .4rem .14rem;
    line-height: 1;
    white-space: nowrap;
}

.ng-nav .ng-navlink {
    font-family: var(--ng-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    background: transparent;
    border: 0;
    border-radius: var(--ng-r-sm);
    padding: .5rem .7rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: color .14s ease, background .14s ease;
    text-decoration: none;
}

    .ng-nav .ng-navlink:hover,
    .ng-nav .ng-navlink:focus-visible,
    .ng-nav .ng-navlink.show {
        color: #fff;
        background: rgba(255,255,255,.09);
    }

    .ng-nav .ng-navlink i {
        font-size: .82rem;
        opacity: .75;
    }

    .ng-nav .ng-navlink.dropdown-toggle::after {
        margin-left: .15rem;
        opacity: .5;
    }

.ng-navbar-toggler {
    border-color: rgba(255,255,255,.22);
}

/* ---- dropdown menus ---------------------------------------------------- */
.ng-menu {
    min-width: 296px;
    padding: .45rem;
    background: var(--ng-paper);
    border: 1px solid var(--ng-rule);
    border-radius: var(--ng-r);
    box-shadow: 0 18px 44px -18px rgba(11,39,64,.42);
    z-index: 1100;
}

    .ng-menu .dropdown-header {
        font-family: var(--ng-mono);
        font-size: .62rem;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--ng-ink-faint);
        padding: .55rem .55rem .3rem;
    }

    .ng-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .1rem;
        font-size: .875rem;
        color: var(--ng-ink);
        border-radius: var(--ng-r-sm);
        padding: .45rem .55rem;
        white-space: normal;
    }

        .ng-menu .dropdown-item:hover,
        .ng-menu .dropdown-item:focus {
            background: var(--ng-wine-tint);
            color: var(--ng-wine-deep);
        }

        .ng-menu .dropdown-item i {
            color: var(--ng-ink-faint);
        }

        .ng-menu .dropdown-item:hover i {
            color: var(--ng-wine);
        }

    .ng-menu .dropdown-divider {
        border-top-color: var(--ng-rule);
        margin: .35rem .3rem;
    }

/* cascading submenus */
.ng-cascade {
    position: relative;
}

    .ng-cascade > .ng-cascade-toggle::after {
        display: none;
    }

.ng-cascade-toggle {
    cursor: pointer;
}

.ng-cascade-caret {
    margin-left: auto;
    font-size: .65rem;
    opacity: .45;
    transition: transform .15s ease, opacity .15s ease;
}

.ng-cascade.show > .ng-cascade-toggle .ng-cascade-caret {
    transform: translateX(2px);
    opacity: 1;
}

.ng-submenu {
    margin-left: .3rem !important;
    margin-top: -.35rem !important;
}

@media (min-width: 992px) {
    .ng-cascade > .dropdown-menu.ng-submenu {
        top: 0 !important;
        left: 100% !important;
        transform: none !important;
    }
}

/* ---- list-style menus (My Books / My Albums) --------------------------- */
.ng-menu-list {
    width: min(540px, 92vw);
}

.ng-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .55rem .35rem;
}

.ng-list-count {
    font-family: var(--ng-mono);
    font-size: .68rem;
    color: var(--ng-ink-faint);
}

.ng-list-search {
    font-family: var(--ng-body);
    font-size: .85rem;
    background: #fff;
    border: 1px solid var(--ng-rule);
    border-radius: var(--ng-r-sm);
    padding: .4rem .6rem;
    width: 100%;
}

    .ng-list-search:focus {
        outline: 2px solid rgba(124,43,74,.35);
        outline-offset: 1px;
        border-color: var(--ng-wine);
    }

.ng-list-scroll {
    max-height: 340px;
    overflow-y: auto;
    padding: .1rem 0;
    scrollbar-width: thin;
}

    .ng-list-scroll::-webkit-scrollbar {
        width: 7px;
    }

    .ng-list-scroll::-webkit-scrollbar-thumb {
        background: rgba(27,35,46,.2);
        border-radius: 4px;
    }

.ng-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .28rem .55rem;
    border-radius: var(--ng-r-sm);
}

    .ng-list-row:hover {
        background: var(--ng-wine-tint);
    }

.ng-list-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ng-ink);
    text-decoration: none;
    min-width: 0;
}

    .ng-list-title:hover {
        color: var(--ng-wine-deep);
    }

.ng-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ng-r-sm);
    color: var(--ng-ink-soft);
    border: 1px solid transparent;
    font-size: .78rem;
    text-decoration: none;
    transition: all .12s ease;
}

    .ng-icon-btn:hover {
        color: var(--ng-wine-deep);
        background: #fff;
        border-color: var(--ng-rule);
    }

.ng-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem .2rem 0;
}

/* ============================================================================
   TOKEN PILL
   ========================================================================= */

.ng-token {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    padding: .34rem .8rem .34rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    transition: border-color .15s ease, background .15s ease;
}

    .ng-token:hover {
        background: rgba(255,255,255,.13);
        border-color: rgba(240,205,132,.5);
    }

.ng-token__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .68rem;
    color: var(--ng-navy-deep);
    background: linear-gradient(160deg, var(--ng-gold-lit), var(--ng-gold));
}

.ng-token__value {
    font-family: var(--ng-mono);
    font-size: .82rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: .01em;
    line-height: 1;
}

.ng-token__unit {
    font-family: var(--ng-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    line-height: 1;
}

.ng-token--low .ng-token__icon {
    background: linear-gradient(160deg, #f0b3ae, #c25b52);
    color: #fff;
}

.ng-token--low {
    border-color: rgba(194,91,82,.5);
}

.ng-token--mid .ng-token__icon {
    background: linear-gradient(160deg, #e6e8ec, #b9bfc9);
}

/* ============================================================================
   ACCOUNT / LOGIN
   ========================================================================= */

.ng-account {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem .6rem .28rem .3rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

    .ng-account:hover,
    .ng-account.show {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.16);
        color: #fff;
    }

    .ng-account::after {
        display: none;
    }

.ng-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ng-wine);
    color: #fff;
    font-family: var(--ng-display);
    font-size: .95rem;
    line-height: 1;
    padding-top: 2px;
}

.ng-account__name {
    font-family: var(--ng-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ng-account-menu {
    min-width: 244px;
}

.ng-account-menu__head {
    padding: .5rem .55rem .55rem;
    border-bottom: 1px solid var(--ng-rule);
    margin-bottom: .35rem;
}

.ng-account-menu__email {
    font-family: var(--ng-mono);
    font-size: .72rem;
    color: var(--ng-ink-soft);
    word-break: break-all;
}

/* ============================================================================
   BUTTONS
   ========================================================================= */

.ng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--ng-body);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    padding: .68rem 1.15rem;
    border-radius: var(--ng-r-sm);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

    .ng-btn:active {
        transform: translateY(1px);
    }

.ng-btn--wine {
    background: var(--ng-wine);
    color: #fff;
}

    .ng-btn--wine:hover {
        background: var(--ng-wine-deep);
        color: #fff;
    }

.ng-btn--ghost {
    background: transparent;
    color: var(--ng-ink);
    border-color: var(--ng-rule);
}

    .ng-btn--ghost:hover {
        background: #fff;
        border-color: var(--ng-ink-faint);
        color: var(--ng-ink);
    }

.ng-btn--onnavy {
    background: transparent;
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.24);
}

    .ng-btn--onnavy:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

.ng-btn--sm {
    font-size: .8rem;
    padding: .48rem .8rem;
}

/* ============================================================================
   PAGE FURNITURE — panels, cards, chips
   ========================================================================= */

.ng-main {
    padding-block: 22px 0;
}

.ng-panel {
    background: var(--ng-paper);
    border: 1px solid var(--ng-rule);
    border-radius: var(--ng-r);
    padding: 26px 28px;
}

.ng-panel--warm {
    background: var(--ng-paper-warm);
}

.ng-panel--navy {
    background: var(--ng-navy);
    border-color: var(--ng-navy-deep);
    color: rgba(255,255,255,.82);
}

    .ng-panel--navy h2,
    .ng-panel--navy h3,
    .ng-panel--navy h4 {
        color: #fff;
    }

.ng-card {
    background: #fff;
    border: 1px solid var(--ng-rule);
    border-radius: var(--ng-r);
    padding: 20px 22px;
}

.ng-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--ng-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--ng-ink-soft);
    background: #fff;
    border: 1px solid var(--ng-rule);
    border-radius: 999px;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.ng-chip--wine {
    color: var(--ng-wine-deep);
    border-color: rgba(124,43,74,.3);
    background: var(--ng-wine-tint);
}

/* section header with the lettered badge used in Character Studio */
.ng-sechead {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .35rem;
}

.ng-sechead__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ng-wine);
    color: #fff;
    font-family: var(--ng-mono);
    font-size: .72rem;
    font-weight: 500;
    flex: 0 0 auto;
}

.ng-sechead__title {
    font-family: var(--ng-display);
    font-size: 1.45rem;
    margin: 0;
}

.ng-lede {
    color: var(--ng-ink-soft);
    font-size: 1rem;
    max-width: 62ch;
}

/* ============================================================================
   SECTION RAIL (sticky anchor tabs)
   ========================================================================= */

.ng-rail {
    position: sticky;
    top: 0;
    z-index: 40;
    /*background: rgba(236,238,242,.92); OG*/
    --ng-tint: .06; /* tweak live: .00 = off, .06 = current, .12 = stronger */
    background: rgba(123,45,67,var(--ng-tint));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ng-rule-cool);
}

.ng-rail__inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .ng-rail__inner::-webkit-scrollbar {
        display: none;
    }

.ng-rail__link {
    font-family: var(--ng-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ng-ink-faint);
    text-decoration: none;
    padding: .85rem .8rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

    .ng-rail__link:hover {
        color: var(--ng-ink);
    }

    .ng-rail__link.is-active {
        color: var(--ng-wine);
        border-bottom-color: var(--ng-wine);
    }

/* ============================================================================
   HERO + SPEC LINE (the signature element)
   ========================================================================= */

.ng-hero {
    padding: 74px 0 54px;
}

.ng-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.6rem;
}

    .ng-hero__eyebrow::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ng-rule);
    }

.ng-hero__title {
    font-size: clamp(2.6rem, 6vw, 4.35rem);
    margin: 0 0 1.15rem;
    max-width: 17ch;
}

    .ng-hero__title em {
        font-style: italic;
        color: var(--ng-wine);
    }

.ng-hero__lede {
    font-size: 1.12rem;
    color: var(--ng-ink-soft);
    max-width: 58ch;
    margin-bottom: 2rem;
}

/* spec line: KEY value  KEY value — lifted from the character dossier */
.ng-spec {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 2rem;
    padding: 1.05rem 0;
    border-top: 1px solid var(--ng-rule);
    border-bottom: 1px solid var(--ng-rule);
    margin-bottom: 2rem;
}

.ng-spec__item {
    display: flex;
    align-items: baseline;
    gap: .55rem;
}

.ng-spec__k {
    font-family: var(--ng-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ng-ink-faint);
}

.ng-spec__v {
    font-size: .95rem;
    font-weight: 500;
    color: var(--ng-ink);
}

.ng-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

/* ============================================================================
   SECTION LAYOUT
   ========================================================================= */

.ng-section {
    padding-block: 62px;
    border-top: 1px solid var(--ng-rule-cool);
}

.ng-section--flush {
    border-top: 0;
}

.ng-section__head {
    max-width: 64ch;
    margin-bottom: 34px;
}

.ng-section__title {
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    margin: .5rem 0 .8rem;
}

.ng-grid {
    display: grid;
    gap: 26px;
}

.ng-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ng-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ng-grid--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
}

.ng-grid--sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 900px) {
    .ng-grid--2,
    .ng-grid--3,
    .ng-grid--split,
    .ng-grid--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- numbered capability rows ------------------------------------------ */
.ng-steps {
    display: grid;
    gap: 2px;
}

.ng-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--ng-rule);
}

    .ng-step:last-child {
        border-bottom: 1px solid var(--ng-rule);
    }

.ng-step__n {
    font-family: var(--ng-mono);
    font-size: .72rem;
    color: var(--ng-wine);
    padding-top: .28rem;
}

.ng-step__t {
    font-family: var(--ng-body);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .2rem;
}

.ng-step__d {
    font-size: .92rem;
    color: var(--ng-ink-soft);
    margin: 0;
}

/* ---- CSS comparison bars ----------------------------------------------- */
.ng-bars {
    display: grid;
    gap: 1.05rem;
}

.ng-bar__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .4rem;
}

.ng-bar__name {
    font-size: .88rem;
    font-weight: 500;
}

.ng-bar__num {
    font-family: var(--ng-mono);
    font-size: .72rem;
    color: var(--ng-ink-faint);
}

.ng-bar__track {
    position: relative;
    height: 8px;
    background: var(--ng-paper-warm);
    border-radius: 999px;
    overflow: hidden;
}

.ng-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--ng-wine);
    width: 0;
    transition: width .9s cubic-bezier(.22,.61,.36,1);
}

.ng-bar__fill--base {
    background: var(--ng-rule);
}

.ng-bar__row + .ng-bar__row {
    margin-top: .3rem;
}

/* ---- stat blocks -------------------------------------------------------- */
.ng-stat {
    padding: 18px 20px;
    border: 1px solid var(--ng-rule);
    border-radius: var(--ng-r);
    background: var(--ng-paper);
}

.ng-stat--navy {
    background: var(--ng-navy);
    border-color: var(--ng-navy);
    color: rgba(255,255,255,.7);
}

.ng-stat__v {
    font-family: var(--ng-display);
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: .45rem;
}

.ng-stat--navy .ng-stat__v {
    color: #fff;
}

.ng-stat__d {
    font-size: .85rem;
    color: var(--ng-ink-soft);
    margin: 0;
}

.ng-stat--navy .ng-stat__d {
    color: rgba(255,255,255,.68);
}

/* ---- chart frame -------------------------------------------------------- */
.ng-chart {
    position: relative;
    width: 100%;
    height: 300px;
}

.ng-chart--tall {
    height: 340px;
}

.ng-figcap {
    font-family: var(--ng-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ng-ink-faint);
    margin-top: 1rem;
}

/* ============================================================================
   PATHWAY TABS (navy band)
   ========================================================================= */

.ng-band {
    background: var(--ng-navy);
    color: rgba(255,255,255,.78);
    padding-block: 70px;
}

    .ng-band h2,
    .ng-band h3,
    .ng-band h4 {
        color: #fff;
    }

    .ng-band .ng-label {
        color: rgba(255,255,255,.45);
    }

.ng-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    margin-bottom: 38px;
}

.ng-tab {
    font-family: var(--ng-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .8rem 1rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

    .ng-tab:hover {
        color: #fff;
    }

    .ng-tab[aria-selected="true"] {
        color: var(--ng-gold-lit);
        border-bottom-color: var(--ng-gold);
    }

.ng-pathway[hidden] {
    display: none;
}

.ng-pathway__title {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin: .6rem 0 1rem;
}

.ng-pathway__body {
    color: rgba(255,255,255,.72);
    font-size: 1.02rem;
    margin-bottom: 1.6rem;
    max-width: 52ch;
}

.ng-uselist {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ng-uselist li {
        display: grid;
        grid-template-columns: 2.4rem 1fr;
        gap: .6rem;
        padding: .8rem 0;
        border-top: 1px solid rgba(255,255,255,.12);
        font-size: .95rem;
        color: rgba(255,255,255,.86);
    }

        .ng-uselist li:last-child {
            border-bottom: 1px solid rgba(255,255,255,.12);
        }

    .ng-uselist .ng-uselist__n {
        font-family: var(--ng-mono);
        font-size: .68rem;
        color: rgba(255,255,255,.42);
        padding-top: .22rem;
    }

.ng-revenue {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--ng-r);
    padding: 18px 20px;
    background: rgba(255,255,255,.04);
}

/* ============================================================================
   COMPARISON TABLE
   ========================================================================= */

.ng-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .ng-table th {
        font-family: var(--ng-mono);
        font-size: .64rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ng-ink-faint);
        text-align: left;
        padding: 0 1rem .7rem 0;
        border-bottom: 1px solid var(--ng-rule);
    }

    .ng-table td {
        padding: .95rem 1rem .95rem 0;
        border-bottom: 1px solid var(--ng-rule);
        vertical-align: top;
        color: var(--ng-ink-soft);
    }

    .ng-table td:first-child {
        color: var(--ng-ink);
        font-weight: 500;
    }

    .ng-table td:last-child {
        color: var(--ng-ink);
        font-weight: 600;
        padding-right: 0;
    }

    .ng-table th:last-child {
        color: var(--ng-wine);
        padding-right: 0;
    }

/* ============================================================================
   INCENTIVES LIST
   ========================================================================= */

.ng-defs {
    display: grid;
    gap: 0;
}

.ng-def {
    padding: 1.15rem 0;
    border-top: 1px solid var(--ng-rule);
}

    .ng-def:last-child {
        border-bottom: 1px solid var(--ng-rule);
    }

.ng-def__k {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-bottom: .3rem;
}

.ng-def__rate {
    font-family: var(--ng-mono);
    font-size: .8rem;
    color: var(--ng-wine);
}

.ng-def__t {
    font-size: 1rem;
    font-weight: 600;
}

.ng-def__d {
    font-size: .9rem;
    color: var(--ng-ink-soft);
    margin: 0;
}

/* ============================================================================
   ROADMAP
   ========================================================================= */

.ng-road {
    display: grid;
    gap: 0;
    position: relative;
}

.ng-road__item {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.7rem 0;
    border-top: 1px solid var(--ng-rule);
}

    .ng-road__item:last-child {
        border-bottom: 1px solid var(--ng-rule);
    }

@media (max-width: 720px) {
    .ng-road__item {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }
}

.ng-road__phase {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.ng-road__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ng-rule);
    flex: 0 0 auto;
    transform: translateY(-2px);
}

.ng-road__item.is-current .ng-road__dot {
    background: var(--ng-wine);
    box-shadow: 0 0 0 4px var(--ng-wine-tint);
}

.ng-road__t {
    font-family: var(--ng-display);
    font-size: 1.3rem;
    margin: 0 0 .35rem;
}

.ng-road__d {
    color: var(--ng-ink-soft);
    font-size: .95rem;
    margin: 0;
    max-width: 60ch;
}

/* ============================================================================
   CLOSING CTA + FOOTER
   ========================================================================= */

.ng-close {
    background: var(--ng-paper-warm);
    border-top: 1px solid var(--ng-rule);
    padding-block: 66px;
}

.ng-close__title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    max-width: 20ch;
    margin: .6rem 0 1rem;
}

.ng-foot {
    background: var(--ng-navy-deep);
    color: rgba(255,255,255,.55);
    padding-block: 40px;
}

.ng-foot__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ng-foot__mark {
    font-family: var(--ng-display);
    font-size: 1.3rem;
    color: #fff;
}

.ng-foot__links {
    display: flex;
    gap: 1.5rem;
}

    .ng-foot__links a {
        font-family: var(--ng-mono);
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(255,255,255,.55);
        text-decoration: none;
    }

        .ng-foot__links a:hover {
            color: var(--ng-gold-lit);
        }

.ng-foot__legal {
    font-family: var(--ng-mono);
    font-size: .68rem;
    color: rgba(255,255,255,.4);
}

/* ============================================================================
   QUALITY FLOOR
   ========================================================================= */

.ng-body a:focus-visible,
.ng-body button:focus-visible,
.ng-body input:focus-visible,
.ng-body select:focus-visible {
    outline: 2px solid var(--ng-wine);
    outline-offset: 2px;
    border-radius: 3px;
}

.ng-nav a:focus-visible,
.ng-nav button:focus-visible {
    outline-color: var(--ng-gold-lit);
}

.ng-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: var(--ng-ink);
    padding: .7rem 1rem;
    z-index: 2000;
    border-radius: 0 0 var(--ng-r-sm) 0;
}

    .ng-skip:focus {
        left: 0;
    }

.ng-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}

    .ng-reveal.is-in {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    .ng-body * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .ng-reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .ng-hero {
        padding: 48px 0 36px;
    }

    .ng-section {
        padding-block: 44px;
    }

    .ng-panel {
        padding: 20px;
    }
}

/* footer wordmark uses the same lockup as the navbar */
.ng-foot__mark em {
    font-style: italic;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-left: .18em;
}

/* the "on the name" band — quiet, sits between engine and market */
.ng-name {
    background: var(--ng-paper-warm);
    border-top: 1px solid var(--ng-rule);
    border-bottom: 1px solid var(--ng-rule);
}

    .ng-name .ng-section__title {
        margin-top: .4rem;
        max-width: 14ch;
    }
/* ============================================================================
   FOOTER — expanded four-column version
   Overrides the single-row .ng-foot__row from narrative-geometry.css.
   ========================================================================= */

.ng-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 32px;
}

@media (max-width: 860px) {
    .ng-foot__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .ng-foot__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 460px) {
    .ng-foot__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ng-foot__blurb {
    font-size: .86rem;
    line-height: 1.65;
    color: rgba(255,255,255,.5);
    margin: .8rem 0 .9rem;
    max-width: 42ch;
}

.ng-foot__col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ng-foot__colTitle {
    font-family: var(--ng-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ng-gold-lit);
    margin: 0 0 .4rem;
}

.ng-foot__col a {
    font-size: .875rem;
    color: rgba(255,255,255,.62);
    text-decoration: none;
    transition: color .14s ease;
}

    .ng-foot__col a:hover {
        color: #fff;
    }

.ng-foot__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-family: var(--ng-mono);
    font-size: .66rem;
    color: rgba(255,255,255,.38);
}

/* ═══ Narrative Geometry — unified studio sub-header ═══ */
.ng-subhead {
    --ng-wine: #7b2d43;
    --ng-wine-dk: #5f2234;
    --ng-gold: #d9a441;
    --ng-ink: #26313f;
    --ng-muted: #8b8073;
    --ng-line: #e7dfd0;
    --ng-card: #fdfbf6;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--ng-card);
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 18px;
    overflow: hidden;
}
    /* branded top accent — wine → gold hairline */
    .ng-subhead::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg,var(--ng-wine) 0%,var(--ng-wine) 55%,var(--ng-gold) 100%);
    }

.ng-subhead-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.ng-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ng-wine);
}

.ng-title {
    font-family: Georgia,"Cormorant Garamond","Times New Roman",serif;
    font-size: 22px;
    line-height: 1.1;
    color: var(--ng-ink);
    font-weight: 600;
}

.ng-subhead-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

/* workflow rail — segmented "control panel" feel; active step = you-are-here */
.ng-workflow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(123,45,67,.06);
    border: 1px solid var(--ng-line);
    border-radius: 11px;
    padding: 4px;
}

.ng-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ng-wine);
    background: transparent;
    border: 1px solid transparent;
    transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}

    .ng-pill:hover {
        background: #fff;
        box-shadow: 0 1px 4px rgba(95,34,52,.12);
        transform: translateY(-1px)
    }

.ng-pill-on, .ng-pill-on:hover {
    background: var(--ng-wine);
    color: #fff;
    box-shadow: 0 2px 8px rgba(95,34,52,.28);
    transform: none;
}

/* switcher select */
.ng-switcher {
    max-width: 280px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ng-ink);
    background: #fff;
    border: 1px solid var(--ng-line);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

    .ng-switcher:hover {
        border-color: var(--ng-wine)
    }

    .ng-switcher:focus {
        outline: none;
        border-color: var(--ng-wine);
        box-shadow: 0 0 0 3px rgba(123,45,67,.14)
    }

/* copy-link button (spotlight) */
.ng-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--ng-wine);
    background: #fff;
    border: 1px solid var(--ng-wine);
    transition: background .12s, color .12s, transform .12s;
}

    .ng-copy:hover {
        background: var(--ng-wine);
        color: #fff;
        transform: translateY(-1px)
    }

    .ng-copy.copied {
        background: var(--ng-gold);
        border-color: var(--ng-gold);
        color: #3a2a00
    }

.ng-copy-ico {
    font-size: 14px;
    line-height: 1
}

/* public (spotlight) variant — accent reversed to read as outward/shareable */
.ng-subhead-public::before {
    background: linear-gradient(90deg,var(--ng-gold) 0%,var(--ng-wine) 100%);
}

@media (max-width:720px) {
    .ng-subhead {
        align-items: flex-start;
        flex-direction: column
    }

    .ng-title {
        font-size: 19px
    }

    .ng-workflowl {
        overflow-x: auto;
        max-width: 100%
    }
}
/* Part two*/
/* optional secondary line under the title (used by the Visualizer) */
.ng-note {
    font-size: 12px;
    color: var(--ng-muted);
    margin-top: 1px;
}

/* inline label for a select sitting in the nav (Visualizer "Load persona") */
.ng-attr-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ng-muted);
    margin-right: 2px;
    align-self: center;
}

/* ── click spinner overlay ── (colors hardcoded: this sits outside .ng-subhead) */
.ng-navwait {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(240,236,224,.55);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity .15s ease;
}

    .ng-navwait.on {
        display: flex;
        opacity: 1;
    }

    .ng-navwait .ng-spin {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 3px solid rgba(123,45,67,.2);
        border-top-color: #7b2d43;
        animation: ngspin .7s linear infinite;
    }

@keyframes ngspin {
    to {
        transform: rotate(360deg);
    }
}