/* ==========================================================================
   Hub Portal — public buyer-facing design system
   Brand tokens (--hub-primary, --hub-primary-dark, --hub-primary-soft,
   --hub-accent, --hub-surface-dark, --hub-surface-dark-raised,
   --hub-surface-dark-border) are injected inline by the Blade layout.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */

@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------- */

:root {
    /* Neutrals */
    --hub-ink: #0f172a;
    --hub-ink-soft: #334155;
    --hub-muted: #64748b;
    --hub-faint: #94a3b8;
    --hub-bg: #f8fafc;
    --hub-card: #ffffff;
    --hub-border: #e2e8f0;
    --hub-border-strong: #cbd5e1;

    /* Semantic */
    --hub-success: #059669;
    --hub-success-strong: #047857;
    --hub-success-soft: #ecfdf5;
    --hub-success-border: #a7f3d0;
    --hub-warning: #b45309;
    --hub-warning-soft: #fffbeb;
    --hub-warning-border: #fde68a;
    --hub-danger: #b91c1c;
    --hub-danger-soft: #fef2f2;
    --hub-danger-border: #fecaca;

    /* Type scale */
    --hub-text-xs: 12px;
    --hub-text-sm: 13px;
    --hub-text-base: 15px;
    --hub-text-md: 16px;
    --hub-text-lg: 18px;
    --hub-text-xl: 22px;
    --hub-text-2xl: 28px;
    --hub-text-3xl: 36px;
    --hub-text-4xl: 44px;

    /* Spacing (base 4) */
    --hub-s1: 4px;
    --hub-s2: 8px;
    --hub-s3: 12px;
    --hub-s4: 16px;
    --hub-s5: 20px;
    --hub-s6: 24px;
    --hub-s8: 32px;
    --hub-s10: 40px;
    --hub-s12: 48px;
    --hub-s16: 64px;

    /* Radii */
    --hub-r-sm: 8px;
    --hub-r-md: 12px;
    --hub-r-lg: 16px;
    --hub-r-full: 999px;

    /* Layered shadows */
    --hub-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --hub-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
    --hub-shadow-md: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .08);
    --hub-shadow-lg: 0 4px 8px rgba(15, 23, 42, .06), 0 20px 48px rgba(15, 23, 42, .16);

    --hub-ease: cubic-bezier(.4, 0, .2, 1);
    --hub-font: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Base ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--hub-font);
    font-size: var(--hub-text-base);
    color: var(--hub-ink);
    background: var(--hub-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--hub-primary-dark); }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: var(--hub-text-2xl); font-weight: 750; margin: 0 0 var(--hub-s2); }
h2 { font-size: var(--hub-text-xl); font-weight: 700; margin: 0 0 var(--hub-s3); }
h3 { font-size: var(--hub-text-md); font-weight: 650; margin: 0 0 var(--hub-s2); }

/* .hub-container { max-width: 1120px; margin: 0 auto; padding: 0 var(--hub-s6); } */
/* .hub-main { padding: var(--hub-s8) 0 var(--hub-s16); } */

.hub-muted { color: var(--hub-muted); }
.hub-small { font-size: var(--hub-text-sm); }

.hub-overline {
    display: block;
    font-size: var(--hub-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hub-muted);
    margin-bottom: var(--hub-s2);
}

.hub-section-title { margin: 0 0 var(--hub-s4); }

.hub-icon {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.16em;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hub-icon--lg { width: 1.4em; height: 1.4em; }

/* --- Topbar (app shell) ------------------------------------------------------ */

.hub-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--hub-surface-dark);
    color: #fff;
    border-bottom: 1px solid var(--hub-surface-dark-border);
}

.hub-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--hub-s5);
    min-height: 64px;
    padding: var(--hub-s3);
    flex-wrap: wrap;
}

.hub-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--hub-s3);
    font-weight: 750;
    font-size: var(--hub-text-lg);
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.hub-topbar__brand img { height: 32px; width: auto; display: block; }

.hub-topbar__context { min-width: 0; }
.hub-topbar__title { font-weight: 650; font-size: var(--hub-text-sm); color: #fff; }
.hub-topbar__subtitle {
    font-size: var(--hub-text-xs);
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--hub-s2);
    margin-left: auto;
    flex-wrap: wrap;
}

.hub-topbar__logout {
    display: contents;
}

/* --- Identity strip ----------------------------------------------------------- */

.hub-identitybar {
    background: var(--hub-card);
    border-bottom: 1px solid var(--hub-border);
}

.hub-identity {
    display: flex;
    align-items: center;
    gap: var(--hub-s3);
    flex-wrap: wrap;
    padding: var(--hub-s3) ;
    font-size: var(--hub-text-sm);
    color: var(--hub-muted);
}
.hub-identity strong { color: var(--hub-ink); font-weight: 650; }
.hub-identity__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--hub-r-full);
    background: var(--hub-primary-soft);
    border: 1px solid var(--hub-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hub-identity__avatar img { width: 18px; height: 18px; border-radius: 3px; }
.hub-identity__avatar span { font-size: 12px; font-weight: 700; color: var(--hub-primary-dark); }
.hub-identity__sep { color: var(--hub-border-strong); }

/* --- Tabs + stepper row --------------------------------------------------------- */

/* The nav stacks: tab strip, then the checkout summary rows. They must never
   share a flex row or the progress/CTA get squeezed against the tabs. */
.hub-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--hub-s3);
    margin-bottom: var(--hub-s6);
}

.hub-tabs {
    display: flex;
    gap: var(--hub-s1);
    overflow-x: auto;
    align-items: center;
    border-bottom: 1px solid var(--hub-border);
    scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }

.hub-tabs__divider {
    width: 1px;
    align-self: stretch;
    min-height: 1.5rem;
    margin: 0 var(--hub-s2);
    background: var(--hub-border);
    flex-shrink: 0;
}

.hub-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--hub-s3) var(--hub-s4);
    text-decoration: none;
    color: var(--hub-muted);
    font-weight: 600;
    font-size: var(--hub-text-base);
    white-space: nowrap;
    transition: color .15s var(--hub-ease);
}
.hub-tab::after {
    content: '';
    position: absolute;
    left: var(--hub-s4);
    right: var(--hub-s4);
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--hub-primary);
    transform: scaleX(0);
    transition: transform .2s var(--hub-ease);
}
.hub-tab:hover { color: var(--hub-ink); }
.hub-tab.is-active { color: var(--hub-primary-dark); }
.hub-tab.is-active::after { transform: scaleX(1); }
.hub-tab.is-locked { color: var(--hub-faint); }
.hub-tab.is-locked .hub-icon { width: .9em; height: .9em; }

/* Commercial-step tabs carry the journey progress (numbered / checked dot). */
.hub-tab__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--hub-text-xs);
    background: var(--hub-bg);
    color: var(--hub-muted);
    border: 1px solid var(--hub-border);
    flex-shrink: 0;
}
.hub-tab__dot .hub-icon { width: 13px; height: 13px; }
.hub-tab.is-current .hub-tab__dot { background: var(--hub-primary); border-color: var(--hub-primary); color: #fff; }
.hub-tab.is-done .hub-tab__dot { background: var(--hub-success); border-color: var(--hub-success); color: #fff; }
.hub-tab.is-locked .hub-tab__dot { opacity: .6; }
.hub-tab.is-blocked .hub-tab__dot { background: var(--hub-warning, #d97706); border-color: var(--hub-warning, #d97706); color: #fff; }

.hub-checkout-banner { margin: 0; }
.hub-checkout-banner--block {
    padding: var(--hub-s3) var(--hub-s4);
    background: var(--hub-warning-soft);
    color: var(--hub-warning);
    border: 1px solid var(--hub-warning-border);
    border-radius: var(--hub-r-sm);
    font-size: var(--hub-text-sm);
    font-weight: 500;
}

/* Stepper as connected pills */

.hub-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding-bottom: var(--hub-s2);
    flex-wrap: wrap;
}

.hub-step {
    display: inline-flex;
    align-items: center;
    gap: var(--hub-s2);
    border: 1px solid var(--hub-border);
    background: var(--hub-card);
    border-radius: var(--hub-r-full);
    padding: 5px 14px 5px 6px;
    font-size: var(--hub-text-sm);
    font-weight: 600;
    color: var(--hub-muted);
}

.hub-step__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--hub-text-xs);
    background: var(--hub-bg);
    color: var(--hub-muted);
    border: 1px solid var(--hub-border);
    flex-shrink: 0;
}

.hub-step.is-done { border-color: var(--hub-success-border); color: var(--hub-success-strong); background: var(--hub-success-soft); }
.hub-step.is-done .hub-step__dot { background: var(--hub-success); border-color: var(--hub-success); color: #fff; }

.hub-step.is-current { border-color: var(--hub-primary); color: var(--hub-primary-dark); box-shadow: 0 0 0 3px var(--hub-primary-soft); }
.hub-step.is-current .hub-step__dot { background: var(--hub-primary); border-color: var(--hub-primary); color: #fff; }

.hub-step__connector {
    width: 18px;
    height: 1px;
    background: var(--hub-border-strong);
    flex-shrink: 0;
}

/* --- Cards ---------------------------------------------------------------------- */

.hub-card {
    background: var(--hub-card);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-lg);
    padding: var(--hub-s6);
    box-shadow: var(--hub-shadow-sm);
}

.hub-card--elevated { box-shadow: var(--hub-shadow-md); }

.hub-card--hover { transition: box-shadow .2s var(--hub-ease), transform .2s var(--hub-ease), border-color .2s var(--hub-ease); }
.hub-card--hover:hover { box-shadow: var(--hub-shadow-md); transform: translateY(-2px); border-color: var(--hub-border-strong); }

.hub-card--dark {
    background: var(--hub-surface-dark);
    border-color: var(--hub-surface-dark-border);
    color: #e2e8f0;
}
.hub-card--dark h2, .hub-card--dark h3, .hub-card--dark strong { color: #f8fafc; }

.hub-card--highlight { border-color: var(--hub-primary); box-shadow: 0 0 0 3px var(--hub-primary-soft), var(--hub-shadow-sm); }

.hub-card--success { border-color: var(--hub-success-border); background: var(--hub-success-soft); }

.hub-card--soft { background: var(--hub-bg); box-shadow: none; }

.hub-stack > * + * { margin-top: var(--hub-s4); }
.hub-section { margin-bottom: var(--hub-s6); margin: var(--hub-s6); }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--hub-s4); }

/* --- Buttons ---------------------------------------------------------------------- */

.hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hub-s2);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--hub-text-base);
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s var(--hub-ease), border-color .15s var(--hub-ease), box-shadow .15s var(--hub-ease), transform .1s var(--hub-ease), color .15s var(--hub-ease);
}
.hub-btn:active { transform: scale(.98); }
.hub-btn:focus-visible { outline: 2px solid var(--hub-primary); outline-offset: 2px; }

.hub-btn--primary { background: var(--hub-primary); color: #fff; box-shadow: var(--hub-shadow-xs); }
.hub-btn--primary:hover { background: var(--hub-primary-dark); color: #fff; box-shadow: var(--hub-shadow-sm); }

.hub-btn--secondary { background: var(--hub-primary-soft); color: var(--hub-primary-dark); }
.hub-btn--secondary:hover { background: var(--hub-accent); color: var(--hub-primary-dark); }

.hub-btn--outline { background: var(--hub-card); color: var(--hub-ink-soft); border-color: var(--hub-border); }
.hub-btn--outline:hover { border-color: var(--hub-border-strong); color: var(--hub-ink); background: var(--hub-bg); }

.hub-btn--ghost { background: transparent; color: var(--hub-muted); }
.hub-btn--ghost:hover { background: var(--hub-bg); color: var(--hub-ink); }

.hub-btn--success { background: var(--hub-success); color: #fff; box-shadow: var(--hub-shadow-xs); }
.hub-btn--success:hover { background: var(--hub-success-strong); color: #fff; }

/* On dark surfaces */
.hub-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .12); }
.hub-btn--light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.hub-btn--block { width: 100%; }
.hub-btn--sm { padding: 6px 12px; font-size: var(--hub-text-sm); border-radius: var(--hub-r-sm); }
.hub-btn--lg { padding: 13px 24px; font-size: var(--hub-text-md); border-radius: var(--hub-r-md); }

.hub-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.hub-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: hub-spin .7s linear infinite;
}
.hub-btn--outline.is-loading::after,
.hub-btn--secondary.is-loading::after,
.hub-btn--ghost.is-loading::after { border-color: rgba(15, 23, 42, .2); border-top-color: var(--hub-ink); }

@keyframes hub-spin { to { transform: rotate(360deg); } }

/* --- Badges --------------------------------------------------------------------------- */

.hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--hub-r-full);
    padding: 3px 10px;
    font-size: var(--hub-text-xs);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}

.hub-badge--brand { background: var(--hub-primary); color: #fff; }
.hub-badge--soft { background: var(--hub-primary-soft); color: var(--hub-primary-dark); }
.hub-badge--success { background: var(--hub-success-soft); color: var(--hub-success-strong); border: 1px solid var(--hub-success-border); }
.hub-badge--warning { background: var(--hub-warning-soft); color: var(--hub-warning); border: 1px solid var(--hub-warning-border); }
.hub-badge--outline { background: var(--hub-card); color: var(--hub-muted); border: 1px solid var(--hub-border); }
.hub-badge--dark { background: rgba(255, 255, 255, .14); color: #fff; }

/* --- Fields ------------------------------------------------------------------------------ */

.hub-field { margin-bottom: var(--hub-s4); }

.hub-field label {
    display: block;
    font-weight: 650;
    font-size: var(--hub-text-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hub-ink-soft);
    margin-bottom: 6px;
}
.hub-field label .hub-optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--hub-faint); }

.hub-field input,
.hub-field select,
.hub-field textarea {
    width: 100%;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--hub-text-base);
    color: var(--hub-ink);
    background: var(--hub-card);
    transition: border-color .15s var(--hub-ease), box-shadow .15s var(--hub-ease);
    appearance: none;
}

.hub-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}

.hub-field input::placeholder,
.hub-field textarea::placeholder { color: var(--hub-faint); }

.hub-field input:hover,
.hub-field select:hover,
.hub-field textarea:hover { border-color: var(--hub-border-strong); }

.hub-field input:focus,
.hub-field select:focus,
.hub-field textarea:focus {
    outline: none;
    border-color: var(--hub-primary);
    box-shadow: 0 0 0 3px var(--hub-primary-soft);
}

.hub-field .hub-hint { color: var(--hub-muted); font-size: var(--hub-text-sm); margin-top: 5px; }
.hub-field .hub-error { color: var(--hub-danger); font-size: var(--hub-text-sm); margin-top: 5px; font-weight: 500; }
.hub-error { color: var(--hub-danger); font-size: var(--hub-text-sm); font-weight: 500; }

.hub-checkbox {
    display: flex;
    gap: var(--hub-s3);
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--hub-text-base);
}
.hub-checkbox input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--hub-primary);
    flex-shrink: 0;
}

/* --- Alerts / toasts --------------------------------------------------------------------------- */

.hub-alert {
    padding: var(--hub-s3) var(--hub-s4);
    margin-bottom: var(--hub-s5);
    font-weight: 500;
    font-size: var(--hub-text-base);
}
.hub-alert--success { background: var(--hub-success-soft); color: var(--hub-success-strong); border: 1px solid var(--hub-success-border); }
.hub-alert--error { background: var(--hub-danger-soft); color: var(--hub-danger); border: 1px solid var(--hub-danger-border); }
.hub-alert--warning { background: var(--hub-warning-soft); color: var(--hub-warning); border: 1px solid var(--hub-warning-border); }

.hub-landing__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--hub-s3);
    border-radius: var(--hub-radius, 8px);
}
.hub-landing__notice .hub-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.hub-toasts {
    position: fixed;
    top: var(--hub-s5);
    right: var(--hub-s5);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--hub-s2);
    max-width: min(400px, calc(100vw - 40px));
}

.hub-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--hub-s3);
    background: var(--hub-surface-dark);
    color: #f1f5f9;
    border: 1px solid var(--hub-surface-dark-border);
    border-radius: var(--hub-r-md);
    padding: var(--hub-s3) var(--hub-s4);
    font-size: var(--hub-text-sm);
    font-weight: 500;
    box-shadow: var(--hub-shadow-lg);
    animation: hub-toast-in .25s var(--hub-ease);
}
.hub-toast .hub-icon { margin-top: 2px; }
.hub-toast--success .hub-icon { color: #34d399; }
.hub-toast--error .hub-icon { color: #f87171; }
.hub-toast__close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.hub-toast__close:hover { color: #fff; }
.hub-toast.is-leaving { animation: hub-toast-out .2s var(--hub-ease) forwards; }

@keyframes hub-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes hub-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* --- Modals ------------------------------------------------------------------------------------- */

.hub-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hub-s5);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--hub-ease), visibility .18s;
}
.hub-modal.is-open { opacity: 1; visibility: visible; }

.hub-modal__box {
    background: var(--hub-card);
    border-radius: var(--hub-r-lg);
    padding: var(--hub-s6);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--hub-shadow-lg);
    transform: translateY(10px) scale(.98);
    transition: transform .18s var(--hub-ease);
}
.hub-modal__box--share { max-width: 640px; }
.hub-modal.is-open .hub-modal__box { transform: translateY(0) scale(1); }

.hub-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hub-s3);
    margin-bottom: var(--hub-s2);
}
.hub-modal__close {
    background: none;
    border: none;
    color: var(--hub-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--hub-r-sm);
    line-height: 1;
}
.hub-modal__close:hover { color: var(--hub-ink); background: var(--hub-bg); }

.hub-share-section { margin-bottom: var(--hub-s5); }
.hub-share-section + .hub-share-section {
    padding-top: var(--hub-s5);
    border-top: 1px solid var(--hub-border);
}
.hub-share-section__hint { margin: 0 0 var(--hub-s4); }

.hub-share-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hub-s3);
    align-items: stretch;
}
.hub-share-link-row__input {
    flex: 1 1 220px;
    min-width: 0;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    padding: 10px 12px;
    font: inherit;
    font-size: var(--hub-text-sm);
    color: var(--hub-ink-soft);
    background: var(--hub-bg);
}
.hub-share-link-row__input:focus {
    outline: none;
    border-color: var(--hub-primary);
    box-shadow: 0 0 0 3px var(--hub-primary-soft);
}

.hub-share-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 var(--hub-s4);
    padding: 0;
    border: none;
    background: none;
    color: var(--hub-primary);
    font: inherit;
    font-size: var(--hub-text-sm);
    font-weight: 650;
    cursor: pointer;
}
.hub-share-add:hover { color: var(--hub-primary-dark); }

.hub-share-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--hub-s3);
    margin-top: var(--hub-s4);
}

.hub-share-pitch {
    margin-bottom: 0;
    padding: var(--hub-s5);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    background: var(--hub-bg);
}
.hub-share-pitch__title {
    display: flex;
    align-items: center;
    gap: var(--hub-s2);
    margin: 0 0 var(--hub-s2);
    font-size: var(--hub-text-base);
    font-weight: 700;
    color: var(--hub-ink);
}
.hub-share-pitch__actions { margin-top: var(--hub-s4); }

.hub-actions { display: flex; flex-wrap: wrap; gap: var(--hub-s3); margin-top: var(--hub-s5); }
.hub-proposal__actions { display: flex; flex-wrap: wrap; gap: var(--hub-s3); margin-top: var(--hub-s5); }

/* --- Payment stage ---------------------------------------------------------------- */

.hub-payment-steps {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hub-payment-steps__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md, 12px);
    background: var(--hub-bg, #f8fafc);
}
.hub-payment-steps__item.is-current {
    border-color: color-mix(in srgb, var(--hub-primary) 35%, var(--hub-border));
    background: color-mix(in srgb, var(--hub-primary) 6%, var(--hub-card, #fff));
}
.hub-payment-steps__num {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hub-text-sm);
    font-weight: 700;
    color: var(--hub-primary-dark, #1d4ed8);
    background: var(--hub-primary-soft, #dbeafe);
}
.hub-payment-steps__title {
    font-weight: 700;
    color: var(--hub-ink);
    margin-bottom: 2px;
}
.hub-payment-steps__desc {
    color: var(--hub-muted);
    font-size: var(--hub-text-sm);
    margin-bottom: 10px;
}
.hub-payment-instructions {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: var(--hub-r-sm, 10px);
    background: var(--hub-card, #fff);
    border: 1px solid var(--hub-border);
}

/* --- Landing (unlock / discovery) ------------------------------------------------------------------ */

.hub-shell--landing {
    background: var(--hub-surface-dark);
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image:
        radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--hub-primary) 22%, transparent), transparent 70%),
        radial-gradient(700px 420px at -10% 110%, color-mix(in srgb, var(--hub-primary) 12%, transparent), transparent 70%);
}

.hub-shell--landing .hub-main {
    flex: 1;
    display: grid;
    align-items: center;
    padding: 0;
}
.hub-shell--landing .hub-main > .hub-container { width: 100%; }
.hub-shell--landing a { color: var(--hub-accent); }

.hub-landing-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hub-s3);
    padding: var(--hub-s5) 0 0;
}

.hub-landing {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px);
    gap: var(--hub-s16);
    align-items: center;
    padding: var(--hub-s10);
}

.hub-landing__brand {
    display: flex;
    align-items: center;
    gap: var(--hub-s3);
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: var(--hub-s8);
}
.hub-landing__brand img { height: 40px; width: auto; display: block; }

.hub-landing__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--hub-r-full);
    padding: 5px 14px;
    font-size: var(--hub-text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: var(--hub-s5);
}

.hub-landing__headline {
    font-size: var(--hub-text-3xl);
    font-weight: 780;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 var(--hub-s4);
}
.hub-landing__accent { color: var(--hub-accent); }

.hub-landing__sub {
    color: rgba(226, 232, 240, .78);
    font-size: var(--hub-text-md);
    max-width: 520px;
    margin: 0 0 var(--hub-s8);
}

.hub-landing__steps {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-landing__step { display: flex; gap: var(--hub-s4); }

.hub-landing__stepnum {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    display: grid;
    place-items: center;
    font-size: var(--hub-text-sm);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.hub-landing__steptitle { font-weight: 650; color: #f8fafc; margin-bottom: 2px; }
.hub-landing__stepdesc { color: rgba(226, 232, 240, .66); font-size: var(--hub-text-sm); }

.hub-landing__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hub-s2) var(--hub-s5);
    margin-top: var(--hub-s10);
    padding-top: var(--hub-s6);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(226, 232, 240, .6);
    font-size: var(--hub-text-sm);
}
.hub-landing__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hub-landing__trust .hub-icon { color: var(--hub-accent); }

.hub-landing__panel { display: flex; flex-direction: column; gap: var(--hub-s3); }

.hub-landing__secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(226, 232, 240, .66);
    font-size: var(--hub-text-sm);
    font-weight: 600;
}

.hub-landing__card {
    background: var(--hub-card);
    color: var(--hub-ink);
    border-radius: var(--hub-r-lg);
    box-shadow: var(--hub-shadow-lg);
    overflow: hidden;
}

.hub-landing__cardbody { padding: var(--hub-s6); }

.hub-landing__cardhead {
    padding: var(--hub-s6) var(--hub-s6) var(--hub-s4);
    border-bottom: 1px solid var(--hub-border);
}
.hub-landing__cardhead h1 { font-size: var(--hub-text-xl); margin-bottom: var(--hub-s1); }
.hub-landing__cardhead p { margin: 0; color: var(--hub-muted); font-size: var(--hub-text-sm); }

.hub-landing__cardfoot {
    padding: var(--hub-s4) var(--hub-s6);
    background: var(--hub-bg);
    border-top: 1px solid var(--hub-border);
    text-align: center;
    font-size: var(--hub-text-sm);
    color: var(--hub-muted);
}

.hub-landing__privacy {
    margin: var(--hub-s4) 0 0;
    font-size: var(--hub-text-xs);
    color: var(--hub-faint);
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.hub-landing__privacy .hub-icon { margin-top: 2px; }

/* --- Diagnostic (AI) card --------------------------------------------------------------------------- */

.hub-diagnostic { position: relative; overflow: hidden; }
.hub-diagnostic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 200px at 90% -30%, color-mix(in srgb, var(--hub-primary) 28%, transparent), transparent 70%);
    pointer-events: none;
}
.hub-diagnostic > * { position: relative; }

.hub-diagnostic--brief { padding: var(--hub-s4) var(--hub-s5); }

.hub-diagnostic__head { display: flex; align-items: center; gap: var(--hub-s3); margin-bottom: var(--hub-s2); flex-wrap: wrap; }
.hub-diagnostic__title {
    font-size: var(--hub-text-base);
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-diagnostic__points {
    display: flex;
    gap: var(--hub-s4);
    margin: 0 0 var(--hub-s3);
    padding: 0;
    list-style: none;
}
.hub-diagnostic__points li {
    flex: 1;
    min-width: 0;
    color: #cbd5e1;
    font-size: var(--hub-text-sm);
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}
.hub-diagnostic__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hub-accent);
}

.hub-diagnostic__why {
    color: #e2e8f0;
    font-size: var(--hub-text-sm);
    margin: 0 0 var(--hub-s2);
}
.hub-diagnostic__next {
    color: #94a3b8;
    font-size: var(--hub-text-xs);
    margin: 0;
}

.hub-diagnostic__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hub-s5); margin-top: var(--hub-s2); }

.hub-diagnostic__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 650;
    font-size: var(--hub-text-sm);
    color: #f8fafc;
    margin-bottom: var(--hub-s2);
}
.hub-diagnostic__label .hub-icon { color: var(--hub-accent); }

.hub-diagnostic ul { margin: 0; padding-left: 18px; color: #cbd5e1; font-size: var(--hub-text-sm); }
.hub-diagnostic ul li + li { margin-top: 4px; }
.hub-diagnostic p { color: #cbd5e1; font-size: var(--hub-text-sm); margin: 0; }
.hub-diagnostic__welcome { color: #cbd5e1; margin: 0 0 var(--hub-s4); }

/* Skeleton shimmer */

.hub-skeleton { display: flex; flex-direction: column; gap: var(--hub-s3); }
.hub-skeleton__line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--hub-border) 25%, #f1f5f9 45%, var(--hub-border) 65%);
    background-size: 200% 100%;
    animation: hub-shimmer 1.4s ease infinite;
}
.hub-card--dark .hub-skeleton__line {
    background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.08) 65%);
    background-size: 200% 100%;
}
.hub-skeleton__line--w60 { width: 60%; }
.hub-skeleton__line--w40 { width: 40%; }
.hub-skeleton__line--w80 { width: 80%; }

@keyframes hub-shimmer { to { background-position: -200% 0; } }

/* --- Presentation library (sidebar + panel) ----------------------------------------------------------- */

.hub-presentation {
    position: relative;
    overflow: hidden;
}

.hub-presentation::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    top: -150px;
    right: -100px;
    border-radius: 50%;
    background: var(--hub-primary-soft);
    opacity: .65;
    pointer-events: none;
}

.hub-presentation__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hub-s4);
    padding-bottom: var(--hub-s6);
    margin-bottom: var(--hub-s6);
    border-bottom: 1px solid var(--hub-border);
}

.hub-presentation__header-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: var(--hub-primary-dark);
    background: linear-gradient(145deg, var(--hub-primary-soft), var(--hub-card));
    border: 1px solid color-mix(in srgb, var(--hub-primary) 18%, var(--hub-border));
    border-radius: 15px;
    box-shadow: var(--hub-shadow-sm);
}

.hub-presentation__heading {
    flex: 1;
    min-width: 0;
}

.hub-presentation__heading .hub-overline { color: var(--hub-primary-dark); margin-bottom: var(--hub-s1); }
.hub-presentation__heading h2 { margin: 0; font-size: var(--hub-text-xl); }
.hub-presentation__heading p { max-width: 680px; margin: var(--hub-s1) 0 0; color: var(--hub-muted); font-size: var(--hub-text-sm); }

.hub-presentation__summary {
    display: flex;
    align-items: stretch;
    gap: var(--hub-s3);
    flex: 0 0 auto;
    padding: var(--hub-s3) var(--hub-s4);
    color: var(--hub-muted);
    background: color-mix(in srgb, var(--hub-bg) 78%, var(--hub-card));
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    font-size: var(--hub-text-xs);
}

.hub-presentation__summary > span:not(.hub-presentation__summary-divider) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 54px;
}

.hub-presentation__summary strong {
    color: var(--hub-ink);
    font-size: var(--hub-text-md);
    line-height: 1.2;
}

.hub-presentation__summary-divider { width: 1px; background: var(--hub-border); }

.hub-materials {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--hub-s6);
    align-items: start;
}

.hub-materials__sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    padding: var(--hub-s3);
    background: linear-gradient(160deg, color-mix(in srgb, var(--hub-bg) 72%, var(--hub-card)), var(--hub-card));
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-lg);
    box-shadow: var(--hub-shadow-xs);
}

.hub-materials__navhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3);
    padding: var(--hub-s2) var(--hub-s2) var(--hub-s3);
}

.hub-materials__navlabel {
    display: block;
    color: var(--hub-ink);
    font-size: var(--hub-text-sm);
    font-weight: 720;
}

.hub-materials__navhint {
    display: block;
    margin-top: 1px;
    color: var(--hub-faint);
    font-size: var(--hub-text-xs);
}

.hub-materials__navtotal {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    color: var(--hub-primary-dark);
    background: var(--hub-primary-soft);
    border-radius: var(--hub-r-full);
    font-size: var(--hub-text-xs);
    font-weight: 750;
}

.hub-materials__nav {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s1);
}

.hub-materials__navitem {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--hub-s3);
    padding: 10px;
    color: var(--hub-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s var(--hub-ease), border-color .18s var(--hub-ease), color .18s var(--hub-ease), box-shadow .18s var(--hub-ease), transform .18s var(--hub-ease);
}

.hub-materials__navitem:hover {
    color: var(--hub-ink);
    background: var(--hub-card);
    border-color: var(--hub-border);
    transform: translateX(2px);
}

.hub-materials__navitem:focus-visible { outline: 2px solid var(--hub-primary); outline-offset: 2px; }

.hub-materials__navitem.is-active {
    color: var(--hub-primary-dark);
    background: var(--hub-card);
    border-color: color-mix(in srgb, var(--hub-primary) 28%, var(--hub-border));
    box-shadow: var(--hub-shadow-sm);
}

.hub-materials__navicon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--hub-faint);
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    transition: color .18s var(--hub-ease), background .18s var(--hub-ease), border-color .18s var(--hub-ease);
}

.hub-materials__navitem.is-active .hub-materials__navicon {
    color: var(--hub-primary-dark);
    background: var(--hub-primary-soft);
    border-color: color-mix(in srgb, var(--hub-primary) 22%, var(--hub-border));
}

.hub-materials__navcopy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.hub-materials__navtitle {
    overflow: hidden;
    color: inherit;
    font-size: var(--hub-text-sm);
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-materials__navcount { color: var(--hub-faint); font-size: var(--hub-text-xs); font-weight: 500; }

.hub-materials__navarrow {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s var(--hub-ease), transform .18s var(--hub-ease);
}

.hub-materials__navitem.is-active .hub-materials__navarrow {
    opacity: 1;
    transform: translateX(0);
}

.hub-materials__panel {
    min-width: 0;
    min-height: 420px;
    padding: var(--hub-s6);
    background: color-mix(in srgb, var(--hub-card) 92%, var(--hub-bg));
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-lg);
    box-shadow: var(--hub-shadow-xs);
}

.hub-materials__panel[hidden] { display: none; }
.hub-materials__panel:focus-visible { outline: 2px solid var(--hub-primary); outline-offset: 3px; }

.hub-materials__panelhead {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hub-s4);
    min-height: 48px;
    padding-bottom: var(--hub-s5);
    margin-bottom: var(--hub-s5);
    border-bottom: 1px solid var(--hub-border);
}

.hub-materials__panelheading {
    display: flex;
    align-items: center;
    gap: var(--hub-s3);
    min-width: 0;
}

.hub-materials__panelheading .hub-overline { margin-bottom: 1px; color: var(--hub-faint); }
.hub-materials__panelheading h3 { margin: 0; color: var(--hub-ink); font-size: var(--hub-text-lg); }

.hub-materials__panelicon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--hub-primary-dark);
    background: var(--hub-primary-soft);
    border-radius: 12px;
}

.hub-materials__paneldesc {
    flex: 1;
    margin: 0;
    color: var(--hub-muted);
    font-size: var(--hub-text-sm);
}

.hub-materials__panelcount {
    margin-left: auto;
    padding: 5px 9px;
    color: var(--hub-muted);
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-full);
    font-size: var(--hub-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.hub-materials__grid { margin-top: var(--hub-s4); }

/* Segmented control (demo switcher) */

.hub-seg {
    display: flex;
    gap: var(--hub-s1);
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-full);
    padding: 4px;
    margin-bottom: var(--hub-s4);
    overflow-x: auto;
}
.hub-seg__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    background: transparent;
    border-radius: var(--hub-r-full);
    padding: 8px 16px;
    font-family: inherit;
    font-size: var(--hub-text-sm);
    font-weight: 650;
    color: var(--hub-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--hub-ease), color .15s var(--hub-ease), box-shadow .15s var(--hub-ease);
}
.hub-seg__btn.is-active { background: var(--hub-primary); color: #fff; box-shadow: var(--hub-shadow-xs); }

/* Player */

.hub-player {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--hub-r-md);
    overflow: hidden;
    background: var(--hub-surface-dark);
    border: 1px solid var(--hub-surface-dark-border);
    box-shadow: var(--hub-shadow-md);
}
.hub-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hub-player[hidden] { display: none; }

/* Material cards */

.hub-material {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.hub-material__visual {
    position: relative;
    height: 154px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--hub-primary-soft), var(--hub-bg));
    border-bottom: 1px solid var(--hub-border);
}

.hub-material__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--hub-ease);
}

.hub-material:hover .hub-material__thumb { transform: scale(1.025); }

.hub-material__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--hub-primary-dark);
    background:
        linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--hub-primary) 7%, transparent) 48% 52%, transparent 52%),
        linear-gradient(145deg, var(--hub-primary-soft), color-mix(in srgb, var(--hub-bg) 82%, var(--hub-card)));
}

.hub-material__placeholder::before {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    background: color-mix(in srgb, var(--hub-card) 74%, transparent);
    border: 1px solid color-mix(in srgb, var(--hub-primary) 16%, var(--hub-border));
    border-radius: 22px;
    box-shadow: var(--hub-shadow-sm);
    transform: rotate(8deg);
}

.hub-material__placeholder .hub-icon { position: relative; z-index: 1; transform: rotate(8deg); }

.hub-material__placeholder-orbit {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid color-mix(in srgb, var(--hub-primary) 12%, transparent);
    border-radius: 50%;
}

.hub-material__format {
    position: absolute;
    top: var(--hub-s3);
    left: var(--hub-s3);
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 5px 9px;
    color: var(--hub-ink-soft);
    background: color-mix(in srgb, var(--hub-card) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--hub-card) 70%, var(--hub-border));
    border-radius: var(--hub-r-full);
    box-shadow: var(--hub-shadow-xs);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.hub-material__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--hub-s4);
}

.hub-material h3 { margin: 0; font-size: var(--hub-text-md); }
.hub-material p { margin: 0; }
.hub-material__body { flex: 1; width: 100%; margin-top: var(--hub-s2); }

.hub-material__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--hub-s3);
    padding-top: var(--hub-s3);
    margin-top: var(--hub-s4);
    color: var(--hub-primary-dark);
    border-top: 1px solid var(--hub-border);
    font-size: var(--hub-text-sm);
    font-weight: 680;
    text-decoration: none;
}

.hub-material__link-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background: var(--hub-primary-soft);
    border-radius: var(--hub-r-full);
    transition: color .18s var(--hub-ease), background .18s var(--hub-ease), transform .18s var(--hub-ease);
}

.hub-material__link:hover .hub-material__link-icon {
    color: #fff;
    background: var(--hub-primary);
    transform: translateX(2px);
}

.hub-material--embed { padding: var(--hub-s4); gap: var(--hub-s3); }

/* Callout & banner */

.hub-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s4);
    flex-wrap: wrap;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    padding: var(--hub-s4) var(--hub-s5);
    background: var(--hub-bg);
    margin-top: var(--hub-s4);
}
.hub-callout__title { font-weight: 650; margin-bottom: 2px; }
.hub-callout__desc { color: var(--hub-muted); font-size: var(--hub-text-sm); }

.hub-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s4);
    flex-wrap: wrap;
    background: var(--hub-card);
    border: 1px solid var(--hub-border);
    border-left: 3px solid var(--hub-primary);
    border-radius: var(--hub-r-lg);
    padding: var(--hub-s5) var(--hub-s6);
    box-shadow: var(--hub-shadow-sm);
}
.hub-banner__title { font-weight: 700; font-size: var(--hub-text-md); margin-bottom: 2px; }
.hub-banner__desc { color: var(--hub-muted); font-size: var(--hub-text-sm); margin: 0; }

/* Benefits strip */

.hub-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hub-s6); }

.hub-benefit { display: flex; gap: var(--hub-s3); }
.hub-benefit__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--hub-r-md);
    background: var(--hub-primary-soft);
    color: var(--hub-primary-dark);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.hub-benefit__title { font-weight: 650; margin-bottom: 2px; }
.hub-benefit__desc { color: var(--hub-muted); font-size: var(--hub-text-sm); }

/* --- Proposal -------------------------------------------------------------------------------------------- */

.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hub-s4); margin-bottom: var(--hub-s4); }

.hub-stat {
    background: var(--hub-card);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    padding: var(--hub-s4) var(--hub-s5);
    box-shadow: var(--hub-shadow-xs);
}
.hub-stat__label {
    font-size: var(--hub-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hub-faint);
    margin-bottom: var(--hub-s1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hub-stat__value { font-size: var(--hub-text-sm); color: var(--hub-ink-soft); font-weight: 500; }

.hub-proposal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--hub-s4);
    align-items: start;
}
.hub-proposal-grid__side { display: flex; flex-direction: column; gap: var(--hub-s4); }

.hub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hub-s2); margin: var(--hub-s2) 0 var(--hub-s1); }
.hub-price__value {
    font-size: var(--hub-text-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--hub-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hub-price__period { color: var(--hub-muted); font-weight: 600; }
.hub-price__meta { color: var(--hub-muted); font-size: var(--hub-text-sm); margin: var(--hub-s1) 0 0; }

.hub-badge-status { background: var(--hub-primary-soft); color: var(--hub-primary-dark); }

.hub-incl {
    list-style: none;
    padding: 0;
    margin: var(--hub-s3) 0 0;
    display: grid;
    gap: var(--hub-s2);
}
.hub-incl li {
    display: flex;
    gap: var(--hub-s2);
    align-items: flex-start;
    color: var(--hub-ink-soft);
    font-size: var(--hub-text-sm);
}
.hub-incl li .hub-icon { color: var(--hub-success); margin-top: 3px; }

.hub-next-step { border-color: var(--hub-primary); box-shadow: 0 0 0 3px var(--hub-primary-soft), var(--hub-shadow-sm); }
.hub-next-step__hint { color: var(--hub-primary-dark); font-weight: 650; font-size: var(--hub-text-sm); margin: 0 0 2px; }

.hub-accept-card { border-color: var(--hub-success-border); background: var(--hub-success-soft); }
.hub-accept-card h3 { color: var(--hub-success-strong); }

.hub-negotiate {
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    background: var(--hub-card);
}
.hub-negotiate summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--hub-s2);
    padding: var(--hub-s4) var(--hub-s5);
    cursor: pointer;
    font-weight: 650;
    font-size: var(--hub-text-sm);
    color: var(--hub-ink-soft);
}
.hub-negotiate summary::-webkit-details-marker { display: none; }
.hub-negotiate summary .hub-icon { transition: transform .2s var(--hub-ease); margin-left: auto; }
.hub-negotiate[open] summary .hub-icon { transform: rotate(180deg); }
.hub-negotiate__body { padding: 0 var(--hub-s5) var(--hub-s5); }

.hub-pitch__box {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    padding: var(--hub-s4);
    font-family: inherit;
    font-size: var(--hub-text-sm);
    line-height: 1.6;
    color: var(--hub-ink-soft);
    background: var(--hub-bg);
}
.hub-pitch__box:focus { outline: none; border-color: var(--hub-primary); box-shadow: 0 0 0 3px var(--hub-primary-soft); }

/* --- Contract timeline -------------------------------------------------------------------------------------- */

.hub-timeline { display: flex; flex-direction: column; gap: 0; margin: var(--hub-s4) 0; }

.hub-timeline__item { display: flex; gap: var(--hub-s3); position: relative; padding-bottom: var(--hub-s5); }
.hub-timeline__item:last-child { padding-bottom: 0; }
.hub-timeline__item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 2px;
    width: 2px;
    background: var(--hub-border);
}
.hub-timeline__item:last-child::before { display: none; }

.hub-timeline__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    color: var(--hub-faint);
    flex-shrink: 0;
    z-index: 1;
}
.hub-timeline__item.is-done .hub-timeline__dot { background: var(--hub-success); border-color: var(--hub-success); color: #fff; }
.hub-timeline__item.is-current .hub-timeline__dot { background: var(--hub-primary); border-color: var(--hub-primary); color: #fff; }
.hub-timeline__item.is-done::before { background: var(--hub-success-border); }

.hub-timeline__title { font-weight: 650; font-size: var(--hub-text-sm); }
.hub-timeline__desc { color: var(--hub-muted); font-size: var(--hub-text-sm); }

/* --- Onboarding plan ------------------------------------------------------------------------------------------ */

.hub-progress {
    height: 8px;
    border-radius: var(--hub-r-full);
    background: var(--hub-border);
    overflow: hidden;
    margin: var(--hub-s3) 0 var(--hub-s5);
}
.hub-progress__fill {
    height: 100%;
    border-radius: var(--hub-r-full);
    background: linear-gradient(90deg, var(--hub-success), #34d399);
    transition: width .5s var(--hub-ease);
}

.hub-plan-phase {
    font-size: var(--hub-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hub-faint);
    margin: var(--hub-s4) 0 var(--hub-s2);
}

.hub-plan-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3);
    padding: var(--hub-s3) 0;
    border-top: 1px solid var(--hub-border);
}
.hub-plan-step__main { display: flex; align-items: center; gap: var(--hub-s3); min-width: 0; }
.hub-plan-step__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--hub-bg);
    border: 1px solid var(--hub-border-strong);
    color: transparent;
}
.hub-plan-step.is-done .hub-plan-step__check { background: var(--hub-success); border-color: var(--hub-success); color: #fff; }
.hub-plan-step__title { font-weight: 600; }
.hub-plan-step.is-done .hub-plan-step__title { text-decoration: line-through; color: var(--hub-muted); font-weight: 500; }
.hub-plan-step__meta { color: var(--hub-muted); font-size: var(--hub-text-xs); font-weight: 500; }
.hub-plan-step.is-blocked .hub-plan-step__check { background: var(--hub-danger); border-color: var(--hub-danger); color: #fff; }
.hub-plan-step.is-blocked .hub-plan-step__meta { color: var(--hub-danger); }
.hub-plan-step--stacked { align-items: flex-start; flex-wrap: wrap; }

.hub-approval-form { flex: 1 1 260px; min-width: 0; }
.hub-approval-form .hub-field { margin-bottom: var(--hub-s2); }

/* --- Order form (accepted proposal snapshot) ------------------------------------------------------------------- */

.hub-order-form { margin: var(--hub-s4) 0; }
.hub-order-form__number { margin: 0 0 var(--hub-s2); }
.hub-order-form__valid { margin: var(--hub-s2) 0 0; }

.hub-order-form__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hub-text-sm);
}
.hub-order-form__table th,
.hub-order-form__table td {
    text-align: left;
    padding: var(--hub-s3) var(--hub-s2);
    border-bottom: 1px solid var(--hub-border);
    vertical-align: top;
}
.hub-order-form__table thead th {
    font-size: var(--hub-text-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hub-faint);
    font-weight: 700;
}
.hub-order-form__table td:last-child,
.hub-order-form__table th:last-child { text-align: right; white-space: nowrap; }
.hub-order-form__table tbody td { color: var(--hub-ink); }
.hub-order-form__table tfoot th {
    border-bottom: 0;
    border-top: 2px solid var(--hub-border-strong, var(--hub-border));
    font-size: var(--hub-text-base);
    font-weight: 700;
}

/* --- Champion kit ---------------------------------------------------------------------------------------------- */

.hub-champion-kit__links {
    list-style: none;
    margin: var(--hub-s4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hub-s2) var(--hub-s4);
}
.hub-champion-kit__links a {
    color: var(--hub-primary-dark);
    font-weight: 600;
    font-size: var(--hub-text-sm);
    text-decoration: none;
}
.hub-champion-kit__links a:hover { text-decoration: underline; }

.hub-champion-panel__list { list-style: none; margin: 0; padding: 0; }
.hub-champion-panel__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3);
    padding: var(--hub-s2) 0;
    border-top: 1px solid var(--hub-border);
}
.hub-champion-panel__item:first-child { border-top: 0; }

/* --- FAQ -------------------------------------------------------------------------------------------------------- */

.hub-faq-item {
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-md);
    margin-bottom: var(--hub-s2);
    transition: border-color .15s var(--hub-ease), box-shadow .15s var(--hub-ease);
}
.hub-faq-item:hover { border-color: var(--hub-border-strong); }
.hub-faq-item[open] { border-color: var(--hub-primary); box-shadow: 0 0 0 3px var(--hub-primary-soft); }

.hub-faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--hub-s2);
    padding: var(--hub-s3) var(--hub-s4);
}
.hub-faq-item summary::-webkit-details-marker { display: none; }
.hub-faq-item summary .hub-faq-item__chevron { margin-left: auto; color: var(--hub-faint); transition: transform .2s var(--hub-ease); }
.hub-faq-item[open] summary .hub-faq-item__chevron { transform: rotate(180deg); }
.hub-faq-item__body { padding: 0 var(--hub-s4) var(--hub-s4); color: var(--hub-muted); margin: 0; }

.hub-faq-chip {
    border: 1px solid var(--hub-border);
    background: var(--hub-card);
    color: var(--hub-muted);
    border-radius: var(--hub-r-full);
    padding: 6px 14px;
    font-family: inherit;
    font-size: var(--hub-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--hub-ease);
}
.hub-faq-chip:hover { border-color: var(--hub-border-strong); color: var(--hub-ink); }
.hub-faq-chip.is-active { background: var(--hub-primary); color: #fff; border-color: var(--hub-primary); }

.hub-faq-chips { display: flex; flex-wrap: wrap; gap: var(--hub-s2); margin-bottom: var(--hub-s4); }

.hub-faq-search { position: relative; margin-bottom: var(--hub-s3); }
.hub-faq-search .hub-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hub-faint); }
.hub-faq-search input { padding-left: 40px; }

/* --- Discovery chips ------------------------------------------------------------------------------------------------ */

.hub-chips { display: flex; flex-wrap: wrap; gap: var(--hub-s2); margin-top: var(--hub-s2); }
.hub-chip { position: relative; }
.hub-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hub-chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-full);
    font-weight: 600;
    font-size: var(--hub-text-sm);
    color: var(--hub-ink-soft);
    background: var(--hub-card);
    transition: all .15s var(--hub-ease);
    cursor: pointer;
}
.hub-chip span:hover { border-color: var(--hub-border-strong); transform: translateY(-1px); box-shadow: var(--hub-shadow-xs); }
.hub-chip input:checked + span {
    background: var(--hub-primary);
    border-color: var(--hub-primary);
    color: #fff;
    box-shadow: var(--hub-shadow-sm);
}
.hub-chip input:focus-visible + span { outline: 2px solid var(--hub-primary); outline-offset: 2px; }

/* --- Empty & locked states --------------------------------------------------------------------------------------------- */

.hub-empty { text-align: center; padding: var(--hub-s10) var(--hub-s6); }
.hub-empty__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--hub-r-lg);
    background: var(--hub-primary-soft);
    color: var(--hub-primary-dark);
    display: grid;
    place-items: center;
    margin: 0 auto var(--hub-s4);
}
.hub-empty__title { font-weight: 700; font-size: var(--hub-text-md); margin: 0 0 var(--hub-s1); }
.hub-empty__desc { color: var(--hub-muted); font-size: var(--hub-text-sm); margin: 0 auto; max-width: 380px; }
.hub-empty .hub-btn { margin-top: var(--hub-s5); }

/* --- Footer --------------------------------------------------------------------------------------------------------------- */

.hub-footer {
    background: var(--hub-card);
    border-top: 1px solid var(--hub-border);
    padding: var(--hub-s8) 0;
    margin-top: auto;
    padding: var(--hub-s6);
}

.hub-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hub-s6);
    flex-wrap: wrap;
}

.hub-footer__brand { font-weight: 700; margin-bottom: var(--hub-s1); }
.hub-footer__note { color: var(--hub-muted); font-size: var(--hub-text-sm); margin: 0; }

.hub-footer__links { display: flex; flex-direction: column; gap: var(--hub-s2); align-items: flex-start; }
.hub-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--hub-ink-soft);
    font-size: var(--hub-text-sm);
    font-weight: 600;
    text-decoration: none;
}
.hub-footer__links a:hover { color: var(--hub-primary-dark); }

.hub-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3) var(--hub-s6);
    margin-top: var(--hub-s6);
    padding-top: var(--hub-s5);
    border-top: 1px solid var(--hub-border);
}

.hub-footer__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hub-s2) var(--hub-s5);
    color: var(--hub-faint);
    font-size: var(--hub-text-xs);
    font-weight: 600;
}
.hub-footer__trust span { display: inline-flex; align-items: center; gap: 6px; }

.hub-referral {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hub-faint);
    font-size: var(--hub-text-xs);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.hub-referral__brand {
    font-weight: 600;
    letter-spacing: .02em;
}
.hub-referral:hover {
    color: var(--hub-ink-soft);
}
.hub-referral:hover .hub-referral__brand {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hub-landing-referral {
    margin-top: auto;
    padding: var(--hub-s5) 0 var(--hub-s6);
}
.hub-landing-referral .hub-container {
    display: flex;
    justify-content: flex-end;
}
.hub-referral--landing {
    color: rgba(226, 232, 240, .55);
}
.hub-referral--landing:hover {
    color: rgba(226, 232, 240, .9);
}

/* --- Floating CTA bar -------------------------------------------------------------------------------------------------------- */

.hub-fab {
    position: fixed;
    left: 50%;
    bottom: var(--hub-s5);
    transform: translate(-50%, 96px);
    z-index: 60;
    display: flex;
    gap: var(--hub-s2);
    background: var(--hub-card);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-r-full);
    padding: var(--hub-s2);
    box-shadow: var(--hub-shadow-lg);
    opacity: 0;
    transition: transform .3s var(--hub-ease), opacity .3s var(--hub-ease);
    max-width: calc(100vw - 32px);
}
.hub-fab.is-visible { transform: translate(-50%, 0); opacity: 1; }
.hub-fab .hub-btn { border-radius: var(--hub-r-full); }

/* --- Language pill --------------------------------------------------------------------------------------------------------------- */

.hub-langs {
    display: inline-flex;
    gap: 2px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--hub-r-full);
    padding: 3px;
}
.hub-langs a {
    padding: 4px 11px;
    border-radius: var(--hub-r-full);
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: var(--hub-text-xs);
    font-weight: 700;
    transition: background .15s var(--hub-ease), color .15s var(--hub-ease);
}
.hub-langs a:hover { color: #fff; }
.hub-langs a.is-active { background: #fff; color: var(--hub-surface-dark); }

/* --- Quote rows (competitor inputs) --------------------------------------------------------------------------------------------------- */

.hub-quote-row { display: flex; gap: var(--hub-s3); }
.hub-quote-row .hub-field { flex: 1; margin: 0; }

/* --- Utilities -------------------------------------------------------------------------------------------------------------------------- */

.hub-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--hub-s3); flex-wrap: wrap; }
.hub-center { text-align: center; }
.hub-mt-0 { margin-top: 0; }
.hub-mb-0 { margin-bottom: 0; }

/* --- Print ------------------------------------------------------------------------------------------------------------------------------- */

@media print {
    .hub-topbar,
    .hub-identitybar,
    .hub-nav,
    .hub-stepper,
    .hub-footer,
    .hub-fab,
    .hub-toasts,
    .hub-langs,
    .hub-proposal__actions,
    .hub-actions,
    .hub-negotiate,
    .hub-pitch,
    .hub-accept-card,
    .hub-next-step,
    .hub-materials,
    .hub-diagnostic,
    .hub-banner,
    .hub-benefits,
    .hub-callout { display: none !important; }

    body { background: #fff; }
    .hub-card { box-shadow: none; border-color: #cbd5e1; }
    .hub-main { padding: 0; }
}

/* --- Motion preferences ------------------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --- Responsive ------------------------------------------------------------------------------------------------------------------------------ */

@media (max-width: 1120px) {
    .hub-landing { gap: var(--hub-s10); }
}

@media (max-width: 900px) {
    .hub-landing {
        grid-template-columns: 1fr;
        gap: var(--hub-s10);
        padding: var(--hub-s8) 0;
    }
    .hub-landing__headline { font-size: var(--hub-text-2xl); }

    .hub-materials { grid-template-columns: 1fr; gap: var(--hub-s4); }
    .hub-materials__sidebar {
        position: static;
        padding: var(--hub-s2);
    }
    .hub-materials__nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 2px 2px var(--hub-s2);
        scrollbar-width: thin;
    }
    .hub-materials__navitem { min-width: 210px; }
    .hub-materials__navitem:hover { transform: translateY(-1px); }
    .hub-materials__navarrow { transform: rotate(90deg) translateX(-4px); }
    .hub-materials__navitem.is-active .hub-materials__navarrow { transform: rotate(90deg) translateX(0); }

    .hub-proposal-grid { grid-template-columns: 1fr; }

    .hub-topbar__context { display: none; }
}

@media (max-width: 640px) {
    .hub-container { padding: 0 var(--hub-s4); }
    .hub-main { padding: var(--hub-s5) 0 var(--hub-s12); }

    h1 { font-size: var(--hub-text-xl); }

    .hub-card { padding: var(--hub-s5); border-radius: var(--hub-r-md); }
    .hub-diagnostic--brief { padding: var(--hub-s4); }
    .hub-diagnostic__points { flex-direction: column; gap: var(--hub-s2); }

    .hub-landing__headline { font-size: var(--hub-text-xl); }
    .hub-landing__cardbody, .hub-landing__cardhead { padding: var(--hub-s5); }

    .hub-presentation__header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding-bottom: var(--hub-s5);
        margin-bottom: var(--hub-s5);
    }
    .hub-presentation__header-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
    .hub-presentation__summary { width: 100%; justify-content: center; }
    .hub-presentation__summary > span:not(.hub-presentation__summary-divider) { min-width: 76px; }
    .hub-materials__navhead { padding-top: var(--hub-s1); }
    .hub-materials__navitem { min-width: 190px; }
    .hub-materials__panel { min-height: 0; padding: var(--hub-s4); }
    .hub-materials__panelhead { align-items: flex-start; flex-wrap: wrap; }
    .hub-materials__paneldesc { order: 3; flex-basis: 100%; }
    .hub-materials__panelcount { align-self: center; }
    .hub-material { padding: 0; }
    .hub-material--embed { padding: var(--hub-s4); }

    .hub-price__value { font-size: var(--hub-text-3xl); }

    .hub-stepper { display: none; }

    .hub-topbar__actions .hub-btn span { display: none; }
    .hub-topbar__actions .hub-btn { padding: 8px 10px; }

    .hub-fab { width: calc(100vw - 32px); }
    .hub-fab .hub-btn { flex: 1; font-size: var(--hub-text-sm); padding: 10px 12px; }

    .hub-toasts { left: var(--hub-s4); right: var(--hub-s4); max-width: none; }
}

/* Rich content bodies + recommendations */
.hub-content-body ul,
.hub-content-body ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.hub-content-body p:last-child {
    margin-bottom: 0;
}

.hub-content-body a {
    color: var(--hub-accent, #6366f1);
    text-decoration: underline;
}

.hub-recommended-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hub-accent, #6366f1);
    margin-bottom: 0.35rem;
}

.hub-content-item.is-highlighted,
.hub-card.is-highlighted,
.hub-faq-item.is-highlighted {
    outline: 2px solid var(--hub-accent, #6366f1);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Presentation playlist (CM-3) ----------------------------------------------------------------------------------------------------------- */

.hub-playlist {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s5);
}

.hub-playlist__header {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s3);
}

.hub-playlist__progress {
    height: 6px;
    background: var(--hub-border);
    border-radius: 999px;
    overflow: hidden;
}

.hub-playlist__progress-bar {
    height: 100%;
    background: var(--hub-accent, #6366f1);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.hub-playlist__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3);
    flex-wrap: wrap;
}

.hub-playlist__counter {
    font-weight: 600;
    font-size: var(--hub-text-sm);
}

.hub-playlist__step-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hub-s2);
    font-size: var(--hub-text-sm);
    font-weight: 600;
    color: var(--hub-muted);
    margin-bottom: var(--hub-s4);
}

.hub-playlist__item-title {
    margin: 0 0 var(--hub-s3);
    font-size: var(--hub-text-lg);
}

.hub-playlist__card .hub-card {
    margin: 0;
}

.hub-playlist__cta {
    margin-top: var(--hub-s6);
}

.hub-playlist__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-s3);
    padding-top: var(--hub-s4);
    border-top: 1px solid var(--hub-border);
}

.hub-playlist__nav-btn {
    min-width: 120px;
}

@media (max-width: 640px) {
    .hub-playlist__nav {
        flex-direction: column-reverse;
    }

    .hub-playlist__nav-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Content access lock (gated / restricted materials) */
.hub-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hub-content-lock {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s3);
    margin-top: var(--hub-s3);
    padding: var(--hub-s4);
    border-radius: 12px;
    border: 1px dashed var(--hub-border);
    background: var(--hub-surface-soft, #f8fafc);
}

.hub-content-lock__icon {
    display: inline-flex;
    color: var(--hub-primary);
}

.hub-content-lock__copy strong {
    display: block;
    margin-bottom: 4px;
}

.hub-content-lock__form {
    display: flex;
    flex-direction: column;
    gap: var(--hub-s2);
}

.hub-content-lock__message {
    width: 100%;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
    background: #fff;
}

.hub-content-lock--pending {
    border-style: solid;
    border-color: #f59e0b55;
    background: #fffbeb;
}

.hub-content-lock--rejected {
    border-style: solid;
    border-color: #ef444455;
    background: #fef2f2;
}

.hub-material--locked {
    opacity: 0.98;
}

.hub-material__private-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}

.hub-material__visual {
    position: relative;
}

.hub-material__private-badge--inline {
    position: static;
    margin-bottom: 8px;
    background: rgba(79, 70, 229, 0.12);
    color: var(--hub-primary);
}

.hub-material__link--inert {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* --- Embed mode (iframe on third-party sites) ------------------------------------------------------ */

.hub-portal--embed .hub-footer,
.hub-portal--embed .hub-landing-referral,
.hub-portal--embed .hub-share-fab {
    display: none;
}

.hub-portal--embed .hub-header {
    padding-top: 8px;
    padding-bottom: 8px;
}

.hub-portal--embed .hub-main {
    padding-top: 12px;
}