:root {
    --portal-ink: #07111f;
    --portal-ink-2: #0b1727;
    --portal-panel: #101f33;
    --portal-panel-2: #142741;
    --portal-text: #eef6ff;
    --portal-muted: #95a7bd;
    --portal-line: rgba(148, 163, 184, .22);
    --portal-blue: #2f7dff;
    --portal-cyan: #2dd4bf;
    --portal-green: #35d979;
    --portal-gold: #f6c85f;
    --portal-red: #ef4444;
    --portal-light: #f5f8fc;
    --portal-light-2: #eaf1f8;
    --portal-dark-text: #102033;
    --portal-dark-muted: #607086;
    --portal-radius: 8px;
    --portal-shadow: 0 22px 70px rgba(7, 17, 31, .18);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.portal-page {
    margin: 0;
    color: var(--portal-dark-text);
    background: var(--portal-light);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    letter-spacing: 0;
}

.portal-page a {
    color: inherit;
    text-decoration: none;
}

.portal-page button,
.portal-page a,
.portal-page input {
    -webkit-tap-highlight-color: transparent;
}

.portal-shell {
    min-height: 100vh;
    overflow-x: hidden;
}

.portal-topbar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(7, 17, 31, .74);
    backdrop-filter: blur(18px);
}

.portal-nav {
    width: min(1180px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.portal-brand span {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .24);
}

.portal-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.portal-links {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(238, 246, 255, .78);
    font-size: 14px;
    flex: 1;
}

.portal-links a {
    transition: color .2s ease;
}

.portal-links a:hover {
    color: #fff;
}

.portal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-menu {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--portal-radius);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
}

.portal-menu span,
.portal-menu span::before,
.portal-menu span::after {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    content: "";
}

.portal-menu span::before {
    transform: translateY(-6px);
}

.portal-menu span::after {
    transform: translateY(4px);
}

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--portal-radius);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.portal-btn:hover {
    transform: translateY(-1px);
}

.portal-btn.primary {
    color: #06111e;
    background: linear-gradient(135deg, var(--portal-cyan), var(--portal-green));
    box-shadow: 0 14px 30px rgba(45, 212, 191, .24);
}

.portal-btn.blue {
    color: #fff;
    background: linear-gradient(135deg, #2f7dff, #155de6);
    box-shadow: 0 14px 30px rgba(47, 125, 255, .22);
}

.portal-btn.ghost {
    color: #eef6ff;
    border-color: rgba(238, 246, 255, .2);
    background: rgba(255, 255, 255, .07);
}

.portal-btn.light {
    color: #102033;
    border-color: #dbe6f2;
    background: #fff;
}

.portal-btn.full {
    width: 100%;
}

.portal-hero {
    position: relative;
    min-height: 760px;
    padding: 156px 0 72px;
    overflow: hidden;
    color: var(--portal-text);
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .86), rgba(7, 17, 31, .98)),
        radial-gradient(circle at 72% 20%, rgba(47, 125, 255, .28), transparent 36%),
        var(--portal-ink);
}

.portal-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 90%);
    content: "";
}

.portal-hero-inner,
.portal-section-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.portal-hero-copy {
    width: min(640px, 100%);
    position: relative;
    z-index: 4;
}

.portal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(45, 212, 191, .28);
    border-radius: 999px;
    color: #a8fff2;
    background: rgba(45, 212, 191, .08);
    font-size: 13px;
    font-weight: 800;
}

.portal-eyebrow::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-green);
    box-shadow: 0 0 16px rgba(53, 217, 121, .8);
    content: "";
}

.portal-hero h1 {
    margin: 22px 0 18px;
    color: #fff;
    font-size: clamp(44px, 5.2vw, 68px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: 0;
}

.portal-hero h1 span {
    color: #a8fff2;
}

.portal-hero p {
    width: min(620px, 100%);
    margin: 0;
    color: rgba(238, 246, 255, .75);
    font-size: 18px;
    line-height: 1.78;
}

.portal-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.portal-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(570px, 100%);
    margin-top: 42px;
}

.portal-hero-stat {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--portal-radius);
    padding: 14px 16px;
    background: rgba(255, 255, 255, .06);
}

.portal-hero-stat strong {
    display: block;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    font-family: "Arial", sans-serif;
}

.portal-hero-stat span {
    display: block;
    margin-top: 6px;
    color: rgba(238, 246, 255, .58);
    font-size: 13px;
}

.portal-visual {
    position: absolute;
    z-index: 1;
    top: 118px;
    right: max(-300px, calc((100vw - 1180px) / 2 - 230px));
    width: min(700px, 52vw);
    min-width: 520px;
    opacity: .94;
}

.portal-dashboard {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--portal-radius);
    background: linear-gradient(180deg, rgba(15, 32, 52, .94), rgba(9, 20, 35, .96));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
    overflow: hidden;
}

.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.dash-top strong {
    color: #fff;
    font-size: 15px;
}

.dash-pill {
    padding: 6px 10px;
    border-radius: 999px;
    color: #a8fff2;
    background: rgba(45, 212, 191, .1);
    font-size: 12px;
    font-weight: 800;
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
}

.dash-card {
    min-height: 118px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--portal-radius);
    padding: 14px;
    background: rgba(255, 255, 255, .055);
}

.dash-card.wide {
    grid-column: span 2;
}

.dash-card small {
    display: block;
    color: rgba(238, 246, 255, .56);
    font-size: 12px;
}

.dash-card strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.dash-card em {
    display: inline-block;
    margin-top: 8px;
    color: var(--portal-green);
    font-size: 12px;
    font-style: normal;
}

.dash-bars {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 104px;
    margin-top: 14px;
}

.dash-bars i {
    flex: 1;
    min-width: 14px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #2dd4bf, #2f7dff);
}

.dash-line {
    width: 100%;
    height: 122px;
    margin-top: 14px;
}

.dash-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.dash-flow span {
    min-height: 58px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--portal-radius);
    padding: 10px;
    color: rgba(238, 246, 255, .76);
    background: rgba(8, 18, 31, .62);
    font-size: 12px;
}

.dash-flow b {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 15px;
}

.portal-next-hint {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: rgba(238, 246, 255, .62);
    font-size: 12px;
}

.portal-section {
    padding: 86px 0;
    background: var(--portal-light);
}

.portal-section.alt {
    background: #fff;
}

.portal-section.dark {
    color: var(--portal-text);
    background: var(--portal-ink-2);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.section-kicker {
    margin: 0 0 10px;
    color: var(--portal-blue);
    font-size: 13px;
    font-weight: 900;
}

.section-title {
    margin: 0;
    color: var(--portal-dark-text);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.16;
    font-weight: 900;
}

.dark .section-title {
    color: #fff;
}

.section-desc {
    width: min(470px, 100%);
    margin: 0;
    color: var(--portal-dark-muted);
    font-size: 15px;
    line-height: 1.8;
}

.dark .section-desc {
    color: rgba(238, 246, 255, .66);
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.value-card,
.feature-card,
.price-card,
.quote-card,
.faq-item,
.center-panel,
.order-panel {
    border: 1px solid #dfe8f2;
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 17, 31, .05);
}

.value-card {
    min-height: 168px;
    padding: 20px;
}

.card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: var(--portal-radius);
    color: #06303a;
    background: linear-gradient(135deg, rgba(45, 212, 191, .95), rgba(53, 217, 121, .95));
}

.card-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.value-card h3,
.feature-card h3,
.price-card h3,
.quote-card h3 {
    margin: 0;
    color: var(--portal-dark-text);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
}

.value-card p,
.feature-card p,
.quote-card p {
    margin: 10px 0 0;
    color: var(--portal-dark-muted);
    font-size: 14px;
    line-height: 1.72;
}

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

.feature-card {
    min-height: 214px;
    padding: 24px;
}

.feature-card .meta {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 18px;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f64;
    background: #dcfbf5;
    font-size: 12px;
    font-weight: 900;
}

.process-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.process-step {
    position: relative;
    min-height: 188px;
    border: 1px solid rgba(238, 246, 255, .14);
    border-radius: var(--portal-radius);
    padding: 22px;
    background: rgba(255, 255, 255, .055);
}

.process-step strong {
    display: block;
    color: rgba(168, 255, 242, .95);
    font-size: 26px;
    font-family: Arial, sans-serif;
}

.process-step h3 {
    margin: 18px 0 10px;
    color: #fff;
    font-size: 18px;
}

.process-step p {
    margin: 0;
    color: rgba(238, 246, 255, .62);
    font-size: 14px;
    line-height: 1.7;
}

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

.pricing-period-switch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 720px;
    margin: -8px auto 22px;
    padding: 8px;
    border: 1px solid rgba(119, 105, 218, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 34px rgba(72, 63, 150, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.pricing-period-switch button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    color: #66708b;
    background: transparent;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pricing-period-switch button span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    opacity: .7;
}

.pricing-period-switch button:hover {
    color: #5f58f4;
    background: rgba(95, 88, 244, .08);
    transform: translateY(-1px);
}

.pricing-period-switch button.active {
    color: #fff;
    background: linear-gradient(135deg, #7a5bf6, #5f58f4);
    box-shadow: 0 12px 26px rgba(95, 88, 244, .26);
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 24px;
}

.price-card.popular {
    border-color: rgba(47, 125, 255, .45);
    box-shadow: 0 20px 60px rgba(47, 125, 255, .13);
}

.price-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #4b3500;
    background: var(--portal-gold);
    font-size: 12px;
    font-weight: 900;
}

.price-desc {
    min-height: 48px;
    margin: 10px 0 22px;
    color: var(--portal-dark-muted);
    line-height: 1.7;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e6eef6;
}

.price-main strong {
    color: var(--portal-dark-text);
    font-size: 46px;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.price-main span {
    color: var(--portal-dark-muted);
    font-size: 14px;
}

.plan-meta {
    display: grid;
    gap: 8px;
    margin: 20px 0;
}

.plan-meta span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: var(--portal-radius);
    background: #f4f8fc;
    color: var(--portal-dark-muted);
    font-size: 13px;
}

.plan-meta b {
    color: var(--portal-dark-text);
}

.rights-list {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.rights-list li {
    position: relative;
    padding-left: 22px;
    color: #2b3c51;
    font-size: 14px;
    line-height: 1.6;
}

.rights-list li::before {
    position: absolute;
    left: 0;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-cyan);
    content: "";
}

.price-card .portal-btn {
    margin-top: auto;
}

.portal-invite-page .pricing-period-switch {
    display: none;
}

.portal-invite-page .price-main span {
    color: #526071;
}

.portal-invite-page .price-card .rights-list li::before {
    background: linear-gradient(135deg, #22c55e, #3b82f6);
}

.portal-empty-card {
    grid-column: 1 / -1;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-style: dashed;
    background: rgba(255,255,255,.72);
}

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

.quote-card {
    padding: 24px;
}

.quote-card p {
    min-height: 96px;
    margin-top: 0;
}

.quote-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.quote-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #06111e;
    background: linear-gradient(135deg, var(--portal-cyan), var(--portal-green));
    font-weight: 900;
}

.quote-person strong {
    display: block;
    font-size: 14px;
}

.quote-person span {
    display: block;
    margin-top: 3px;
    color: var(--portal-dark-muted);
    font-size: 12px;
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    overflow: hidden;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 62px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: var(--portal-dark-text);
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.faq-q::after {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #ccd8e6;
    color: var(--portal-blue);
    line-height: 20px;
    text-align: center;
    content: "+";
}

.faq-item.open .faq-q::after {
    content: "-";
}

.faq-a {
    display: none;
    padding: 0 20px 20px;
    color: var(--portal-dark-muted);
    line-height: 1.75;
}

.faq-item.open .faq-a {
    display: block;
}

.portal-footer {
    padding: 44px 0;
    color: rgba(238, 246, 255, .68);
    background: #06101c;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, .7fr);
    gap: 28px;
}

.footer-grid h3,
.footer-grid h4 {
    margin: 0 0 14px;
    color: #fff;
}

.footer-grid p,
.footer-grid a {
    display: block;
    margin: 0 0 10px;
    color: rgba(238, 246, 255, .62);
    font-size: 14px;
    line-height: 1.7;
}

.portal-auth-modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 10, 20, .66);
}

.portal-auth-modal.show {
    display: flex;
}

.auth-card {
    width: min(430px, 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}

.auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid #e7eef6;
}

.auth-head h3 {
    margin: 0;
    color: var(--portal-dark-text);
    font-size: 22px;
    font-weight: 900;
}

.auth-close {
    width: 38px;
    height: 38px;
    border: 1px solid #dbe6f2;
    border-radius: var(--portal-radius);
    background: #fff;
    color: #66758a;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 24px 0;
}

.auth-tab {
    min-height: 42px;
    border: 1px solid #dbe6f2;
    border-radius: var(--portal-radius);
    background: #f7fafd;
    color: #607086;
    font-weight: 900;
    cursor: pointer;
}

.auth-tab.active {
    border-color: rgba(47, 125, 255, .45);
    color: #0f4fca;
    background: #eaf2ff;
}

.auth-form {
    display: none;
    padding: 20px 24px 24px;
}

.auth-form.active {
    display: block;
}

.form-row {
    margin-bottom: 14px;
}

.form-row label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.form-row input {
    width: 100%;
    height: 46px;
    border: 1px solid #d8e4f0;
    border-radius: var(--portal-radius);
    padding: 0 13px;
    color: var(--portal-dark-text);
    background: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-row input:focus {
    border-color: var(--portal-blue);
    box-shadow: 0 0 0 4px rgba(47, 125, 255, .1);
}

.auth-tip {
    margin: 12px 0 0;
    color: #6b7c90;
    font-size: 13px;
    line-height: 1.6;
}

.portal-toast {
    position: fixed;
    z-index: 120;
    right: 20px;
    bottom: 20px;
    max-width: min(360px, calc(100% - 40px));
    padding: 13px 16px;
    border-radius: var(--portal-radius);
    color: #fff;
    background: rgba(7, 17, 31, .95);
    box-shadow: 0 12px 34px rgba(7, 17, 31, .24);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.portal-toast.show {
    opacity: 1;
    transform: translateY(0);
}

body.portal-modal-open {
    overflow: hidden;
}

.portal-page-simple {
    min-height: 100vh;
    padding: 110px 20px 48px;
    background: linear-gradient(180deg, #07111f 0, #0b1727 420px, #f5f8fc 421px);
}

.simple-card {
    width: min(1040px, 100%);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}

.simple-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0e223a, #102f4e);
}

.simple-head h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}

.simple-head p {
    margin: 8px 0 0;
    color: rgba(238, 246, 255, .68);
}

.center-grid,
.order-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    padding: 18px;
}

.center-panel,
.order-panel {
    padding: 22px;
    box-shadow: none;
}

.center-panel h2,
.order-panel h2 {
    margin: 0 0 16px;
    color: var(--portal-dark-text);
    font-size: 22px;
    font-weight: 900;
}

.member-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.member-status span {
    min-height: 84px;
    padding: 14px;
    border-radius: var(--portal-radius);
    background: #f4f8fc;
    color: var(--portal-dark-muted);
    font-size: 13px;
}

.member-status b {
    display: block;
    margin-top: 8px;
    color: var(--portal-dark-text);
    font-size: 16px;
}

.demo-canvas {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    padding: 18px;
}

.demo-board {
    min-height: 360px;
    border: 1px solid #dfe8f2;
    border-radius: var(--portal-radius);
    padding: 20px;
    background: #fff;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.demo-metric {
    padding: 14px;
    border-radius: var(--portal-radius);
    background: #f4f8fc;
}

.demo-metric span {
    color: var(--portal-dark-muted);
    font-size: 12px;
}

.demo-metric strong {
    display: block;
    margin-top: 6px;
    color: var(--portal-dark-text);
    font-size: 24px;
    font-family: Arial, sans-serif;
}

.demo-chart {
    width: 100%;
    height: 230px;
}

.demo-table {
    width: 100%;
    border-collapse: collapse;
}

.demo-table th,
.demo-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #e6eef6;
    text-align: left;
    white-space: nowrap;
}

.demo-table th {
    color: var(--portal-dark-muted);
    font-size: 12px;
}

.demo-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px;
    border-radius: var(--portal-radius);
    background: #fff8e5;
    color: #755414;
}

.order-summary {
    display: grid;
    gap: 10px;
}

.order-summary span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e6eef6;
    color: var(--portal-dark-muted);
}

.order-summary b {
    color: var(--portal-dark-text);
}

.pay-methods {
    display: grid;
    gap: 10px;
}

.pay-method {
    padding: 14px;
    border: 1px solid #dfe8f2;
    border-radius: var(--portal-radius);
    background: #f8fbfe;
}

.pay-method strong {
    display: block;
    color: var(--portal-dark-text);
}

.pay-method span {
    display: block;
    margin-top: 4px;
    color: var(--portal-dark-muted);
    font-size: 13px;
}

.pay-wait {
    margin-top: 16px;
    padding: 14px;
    border-radius: var(--portal-radius);
    color: #755414;
    background: #fff8e5;
    line-height: 1.7;
}

.portal-pay-modal {
    position: fixed !important;
    inset: 0;
    z-index: 3000;
    display: none !important;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(76px, 10vh, 118px) 22px 28px;
    overflow-y: auto;
    box-sizing: border-box;
    background: rgba(10, 15, 28, .62);
    backdrop-filter: blur(12px);
}

.portal-pay-modal.show {
    display: flex !important;
}

.portal-pay-card {
    position: relative;
    width: min(680px, 100%);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 34px 110px rgba(12, 18, 36, .34);
    padding: 40px;
    overflow: hidden;
    animation: portalPayIn .18s ease-out both;
}

.portal-pay-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, #705cf6, #1677ff, #22c55e);
}

@keyframes portalPayIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portal-pay-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #f0f3f8;
    color: #667085;
    font-size: 24px;
    cursor: pointer;
    transition: .18s ease;
}

.portal-pay-close:hover {
    color: #111827;
    background: #e6ebf4;
}

.portal-pay-head {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-right: 48px;
}

.portal-pay-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #1677ff, #22c55e);
    box-shadow: 0 14px 30px rgba(22, 119, 255, .24);
}

.portal-pay-head h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.18;
    color: var(--portal-dark-text);
}

.portal-pay-head p {
    margin: 6px 0 0;
    color: var(--portal-dark-muted);
    font-size: 15px;
    line-height: 1.5;
}

.portal-pay-order {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px 18px;
    margin: 24px 0 20px;
    padding: 18px 20px;
    border: 1px solid #e5ecf5;
    border-radius: 16px;
    background: #f8fafc;
}

.portal-pay-order span {
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.portal-pay-order strong {
    color: #111827;
    font-size: 17px;
    text-align: right;
}

.portal-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.portal-pay-option {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 84px;
    padding: 14px 16px;
    border: 1px solid #dfe7f3;
    border-radius: 18px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(22, 30, 55, .04);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.portal-pay-option:hover {
    transform: translateY(-2px);
    border-color: #c8d7ec;
    box-shadow: 0 14px 30px rgba(22, 30, 55, .08);
}

.portal-pay-option.active {
    transform: translateY(-2px);
    border-color: #22c55e;
    background: #f6fef9;
    box-shadow: 0 14px 34px rgba(34, 197, 94, .13);
}

.portal-pay-option.is-alipay.active {
    border-color: #1677ff;
    background: #f5f9ff;
    box-shadow: 0 14px 34px rgba(22, 119, 255, .13);
}

.portal-pay-option.active::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    transform: translateY(-50%);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .1);
}

.portal-pay-option.is-alipay.active::after {
    background: #1677ff;
    box-shadow: 0 0 0 5px rgba(22, 119, 255, .1);
}

.portal-pay-option span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 48px;
    padding: 8px;
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.portal-pay-option span:not(.pay-brand-icon) {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #22c55e;
    box-shadow: 0 10px 20px rgba(34, 197, 94, .18);
}

.portal-pay-option.is-alipay span:not(.pay-brand-icon) {
    background: #1677ff;
    box-shadow: 0 10px 20px rgba(22, 119, 255, .18);
}

.portal-pay-option.is-alipay span.pay-brand-icon {
    border-color: rgba(22, 119, 255, .22);
    box-shadow: 0 10px 22px rgba(22, 119, 255, .1);
}

.portal-pay-option.is-wechat span.pay-brand-icon {
    border-color: rgba(34, 197, 94, .22);
    box-shadow: 0 10px 22px rgba(34, 197, 94, .1);
}

.portal-pay-option span.pay-brand-icon {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .09);
}

.portal-pay-option.is-alipay span.pay-brand-icon {
    border-color: rgba(22, 119, 255, .24);
    box-shadow: 0 10px 22px rgba(22, 119, 255, .12);
}

.portal-pay-option.is-wechat span.pay-brand-icon {
    border-color: rgba(34, 197, 94, .22);
    box-shadow: 0 10px 22px rgba(34, 197, 94, .12);
}

.portal-pay-option span.pay-brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 13px;
}

.portal-pay-option span.pay-brand-icon.pay-brand-icon--alipay,
.portal-pay-option span.pay-brand-icon.pay-brand-icon--wechat {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.portal-pay-option span.pay-brand-icon.pay-brand-icon--alipay svg,
.portal-pay-option span.pay-brand-icon.pay-brand-icon--wechat svg {
    display: block;
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
}

.portal-pay-option.is-alipay.active span.pay-brand-icon--alipay svg {
    filter: drop-shadow(0 12px 22px rgba(22, 119, 255, .22));
}

.portal-pay-option.is-wechat.active span.pay-brand-icon--wechat svg {
    filter: drop-shadow(0 12px 22px rgba(34, 181, 63, .2));
}

.portal-pay-option-copy {
    min-width: 0;
    padding-right: 28px;
}

.portal-pay-option b {
    display: block;
    max-width: 100%;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-pay-option .pay-recommend-tag {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    color: #1677ff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    background: #eaf3ff;
    border: 1px solid rgba(22, 119, 255, .18);
}

.portal-pay-option em {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
    font-style: normal;
    line-height: 1.45;
}

.portal-pay-option:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.portal-pay-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 18px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
    background: linear-gradient(135deg, #1677ff 0%, #2563eb 58%, #22c55e 100%);
    box-shadow: 0 16px 34px rgba(22, 119, 255, .24);
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.portal-pay-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: translateX(-120%);
    animation: portalPaySubmitShine 2.8s ease infinite;
}

.portal-pay-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(22, 119, 255, .3);
}

.portal-pay-submit span,
.portal-pay-submit small {
    position: relative;
    z-index: 1;
}

.portal-pay-submit small {
    font-size: 13px;
    font-weight: 800;
    opacity: .78;
}

.portal-pay-submit:disabled {
    cursor: not-allowed;
    opacity: .72;
    transform: none;
    box-shadow: 0 12px 28px rgba(22, 119, 255, .16);
}

@keyframes portalPaySubmitShine {
    0%, 45% { transform: translateX(-120%); }
    75%, 100% { transform: translateX(120%); }
}

.portal-pay-result {
    margin-top: 20px;
}

.portal-pay-loading,
.portal-pay-success,
.portal-pay-error,
.portal-pay-note {
    display: block;
    padding: 16px 18px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.6;
}

.portal-pay-loading {
    color: #3b4cca;
    background: #eef2ff;
}

.portal-pay-success {
    color: #166534;
    background: #dcfce7;
}

.portal-pay-error {
    color: #991b1b;
    background: #fee2e2;
}

.portal-pay-qr {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 22px;
    border-radius: 22px;
    background: #f8fbff;
    border: 1px solid #e5ecf5;
}

.portal-pay-qr img {
    width: 240px;
    height: 240px;
    border-radius: 16px;
    background: #fff;
}

.portal-pay-qr strong {
    color: #111827;
    font-size: 18px;
}

.portal-pay-qr span,
.portal-pay-note {
    display: block;
    margin-top: 10px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #66728a;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.portal-pay-qr .portal-pay-open {
    min-width: 196px;
    height: 44px;
    line-height: 44px;
    margin-top: 4px;
    padding: 0 22px;
    border-radius: 14px;
}

.portal-pay-open {
    display: block;
    height: 54px;
    line-height: 54px;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(135deg, #705cf6, #1677ff);
}

.portal-hidden-form {
    display: none;
}

@media (max-width: 1100px) {
    .value-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .process-track,
    .pricing-grid,
    .feature-grid,
    .quote-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-visual {
        right: -260px;
        opacity: .58;
    }
}

@media (max-width: 640px) {
    .portal-pay-modal {
        align-items: center;
        padding: 14px;
    }

    .portal-pay-card {
        width: 100%;
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        padding: 22px 18px 16px;
        border-radius: 22px;
        overflow-y: auto;
    }

    .portal-pay-close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .portal-pay-head {
        gap: 12px;
        padding-right: 38px;
    }

    .portal-pay-mark {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 26px;
    }

    .portal-pay-head h3 {
        font-size: 24px;
    }

    .portal-pay-head p {
        margin-top: 5px;
        font-size: 14px;
    }

    .portal-pay-order {
        grid-template-columns: 64px 1fr;
        gap: 8px 12px;
        margin: 16px 0 12px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .portal-pay-order span,
    .portal-pay-order strong {
        font-size: 15px;
    }

    .portal-pay-methods {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .portal-pay-option {
        grid-template-columns: 58px 1fr;
        min-height: 76px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .portal-pay-option span {
        width: 52px;
        height: 46px;
        padding: 6px;
        border-radius: 14px;
        font-size: 18px;
    }

    .portal-pay-option span:not(.pay-brand-icon) {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .portal-pay-option span.pay-brand-icon,
    .portal-pay-option span.pay-brand-icon img {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .portal-pay-option span.pay-brand-icon.pay-brand-icon--alipay,
    .portal-pay-option span.pay-brand-icon.pay-brand-icon--wechat,
    .portal-pay-option span.pay-brand-icon.pay-brand-icon--alipay svg,
    .portal-pay-option span.pay-brand-icon.pay-brand-icon--wechat svg {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .portal-pay-option b {
        max-width: 100%;
        font-size: 17px;
    }

    .portal-pay-option em {
        font-size: 13px;
    }

    .portal-pay-qr img {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 780px) {
    .portal-nav {
        width: min(100% - 28px, 1180px);
        min-height: 64px;
    }

    .portal-menu {
        display: inline-grid;
        place-items: center;
    }

    .portal-links {
        position: absolute;
        top: 64px;
        left: 14px;
        right: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--portal-radius);
        background: rgba(7, 17, 31, .96);
    }

    .portal-links.open {
        display: flex;
    }

    .portal-links a {
        padding: 13px 10px;
    }

    .portal-actions .portal-btn.ghost {
        display: none;
    }

    .portal-brand {
        flex: 1;
        min-width: 0;
    }

    .portal-hero {
        min-height: 840px;
        padding: 112px 0 68px;
    }

    .portal-hero-inner,
    .portal-section-inner {
        width: min(100% - 28px, 1180px);
    }

    .portal-hero h1 {
        font-size: clamp(40px, 13vw, 58px);
    }

    .portal-hero p {
        font-size: 16px;
    }

    .portal-hero-cta .portal-btn {
        width: 100%;
    }

    .portal-hero-stats {
        grid-template-columns: 1fr;
    }

    .portal-visual {
        top: 585px;
        right: -540px;
        width: 720px;
        min-width: 720px;
        opacity: .12;
        pointer-events: none;
    }

    .portal-visual .portal-dashboard {
        box-shadow: none;
    }

    .section-head {
        display: block;
    }

    .section-desc {
        margin-top: 14px;
    }

    .portal-section {
        padding: 62px 0;
    }

    .value-grid,
    .feature-grid,
    .process-track,
    .pricing-grid,
    .quote-grid,
    .footer-grid,
    .center-grid,
    .order-grid,
    .demo-canvas {
        grid-template-columns: 1fr;
    }

    .price-card {
        min-height: auto;
    }

    .member-status,
    .demo-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .simple-head {
        display: block;
    }
}

@media (max-width: 430px) {
    .portal-actions .portal-btn.primary {
        padding: 0 12px;
        font-size: 13px;
    }

    .portal-brand {
        font-size: 15px;
    }

    .portal-brand img {
        width: 30px;
        height: 30px;
    }

    .portal-hero {
        min-height: 880px;
    }

    .portal-hero h1 {
        font-size: 38px;
    }

    .member-status,
    .demo-metrics {
        grid-template-columns: 1fr;
    }

    .demo-table-wrap {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.portal-login-page {
    min-height: 100vh;
    background: #eef1fb;
}

.portal-login-shell {
    min-height: 100vh;
    display: flex;
}

.portal-login-hero {
    position: relative;
    flex: 0 0 56%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(110% 70% at 18% 10%, rgba(255,255,255,.18), transparent 56%),
        linear-gradient(135deg, #5b54e6 0%, #7a4ff0 48%, #4f7cff 100%);
}

.portal-login-hero::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08) 0 14%, transparent 14% 100%),
        linear-gradient(300deg, rgba(255,255,255,.08) 0 10%, transparent 10% 100%);
    content: "";
    pointer-events: none;
}

.login-blob,
.login-glass {
    position: absolute;
    border-radius: 28px;
    pointer-events: none;
}

.login-blob {
    width: 360px;
    height: 360px;
    filter: blur(12px);
    opacity: .38;
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(84,200,255,.2));
}

.login-blob.b1 { left: -110px; top: -80px; }
.login-blob.b2 { right: -150px; bottom: -120px; background: linear-gradient(135deg, rgba(84,200,255,.28), rgba(255,154,214,.18)); }
.login-blob.b3 { right: 18%; top: 11%; width: 220px; height: 220px; opacity: .24; }

.login-glass {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.login-glass.g1 { width: 128px; height: 128px; left: 24%; top: 34%; transform: rotate(22deg); }
.login-glass.g2 { width: 188px; height: 188px; right: 12%; bottom: 22%; transform: rotate(-12deg); }

.portal-login-copy {
    position: relative;
    z-index: 2;
    width: min(560px, 76%);
    margin: 0 auto;
    padding: 0 6%;
}

.portal-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-size: 14px;
    font-weight: 800;
}

.portal-login-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7cffb2;
    box-shadow: 0 0 0 4px rgba(124,255,178,.25);
}

.portal-login-copy h1 {
    margin: 26px 0 18px;
    color: #fff;
    font-size: clamp(58px, 6vw, 86px);
    line-height: 1.05;
    font-weight: 900;
}

.portal-login-copy p {
    margin: 0;
    max-width: 500px;
    color: rgba(255,255,255,.86);
    font-size: 22px;
    line-height: 1.55;
    font-weight: 900;
}

.portal-login-feats {
    display: grid;
    gap: 16px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}

.portal-login-feats li {
    width: fit-content;
    min-width: 320px;
    min-height: 58px;
    padding: 0 18px 0 4px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.92);
    font-size: 18px;
    font-weight: 900;
}

.portal-login-feats span {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    background: rgba(255,255,255,.16);
}

.portal-login-feats span::before {
    width: 14px;
    height: 9px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    content: "";
}

.portal-login-panel {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 4.5vw;
}

.portal-login-card {
    position: relative;
    width: min(568px, 100%);
    border: 0;
    border-radius: 32px;
    padding: 64px 58px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(46,52,98,.14), 0 4px 14px rgba(46,52,98,.06);
}

.portal-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
}

.portal-login-brand span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, #6d5efc, #4f7cff);
    box-shadow: 0 10px 22px rgba(109,94,252,.34);
}

.portal-login-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.portal-login-brand b {
    display: block;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.18;
    font-weight: 900;
}

.portal-login-brand small {
    display: block;
    margin-top: 4px;
    color: #7c8598;
    font-size: 13px;
    font-weight: 700;
}

.portal-login-head,
.portal-login-head.auth-head {
    display: block;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.portal-login-head h2,
.portal-login-head h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 34px;
    line-height: 1.22;
    font-weight: 900;
}

.portal-login-head p {
    margin: 0;
    color: #7c8598;
    font-size: 18px;
    line-height: 1.7;
}

.portal-login-form.auth-form {
    padding: 0;
}

.portal-field,
.portal-js-field {
    display: block;
    margin-bottom: 16px;
}

.portal-field > span,
.portal-field > label,
.portal-js-field label {
    display: block;
    margin: 0 0 9px 2px;
    color: #3b4663;
    font-size: 13px;
    font-weight: 800;
}

.portal-field input,
.portal-js-field input {
    width: 100%;
    height: 70px;
    border: 1.5px solid transparent;
    border-radius: 18px;
    padding: 0 22px;
    outline: none;
    background: #f5f6fb;
    color: #0f172a;
    font-size: 18px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.portal-field input:focus,
.portal-js-field input:focus {
    border-color: #6d5efc;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(109,94,252,.12);
}

.portal-password-wrap {
    position: relative;
    display: block;
    font-style: normal;
}

.portal-password-wrap input {
    padding-right: 82px;
}

.portal-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    min-width: 48px;
    height: 34px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7c8598;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.portal-password-toggle:hover {
    color: #6d5efc;
    background: rgba(109,94,252,.08);
}

.portal-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 2px 24px;
    color: #3b4663;
    font-size: 14px;
    font-weight: 700;
}

.portal-login-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portal-login-options input {
    width: 17px;
    height: 17px;
    accent-color: #6d5efc;
}

.portal-login-options a,
.portal-login-alt a {
    color: #6d5efc;
    font-weight: 800;
}

.portal-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    margin: 6px 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(109,94,252,.18);
    border-radius: 16px;
    background: rgba(109,94,252,.06);
    color: #3b4663;
    cursor: pointer;
}

.portal-switch-row input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    accent-color: #6d5efc;
}

.portal-switch-row b,
.portal-switch-row em {
    display: block;
}

.portal-switch-row b {
    color: #121a3f;
    font-size: 15px;
    font-weight: 900;
}

.portal-switch-row em {
    margin-top: 3px;
    color: #7c8598;
    font-size: 13px;
    font-style: normal;
    line-height: 1.35;
}

.portal-substation-fields {
    display: block;
}

.portal-substation-fields.is-hidden {
    display: none;
}

.portal-login-submit,
.portal-login-submit.portal-btn {
    width: 100%;
    height: 72px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6d5efc 0%, #8b5cf6 50%, #4f7cff 100%);
    background-size: 160% 160%;
    box-shadow: 0 14px 30px rgba(99,90,240,.32);
    font-size: 20px;
    font-weight: 900;
    transition: transform .15s ease, box-shadow .2s ease, background-position .35s ease;
}

.portal-login-submit:hover,
.portal-login-submit.portal-btn:hover {
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 20px 40px rgba(99,90,240,.4);
}

.portal-login-submit:disabled,
.portal-login-submit.portal-btn:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
}

.portal-login-alt {
    margin: 20px 0 0;
    color: #7c8598;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
}

.portal-modal-card {
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 36px 34px 32px;
}

.portal-legacy-auth-card .auth-head {
    padding: 0 0 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eef1f7;
}

.portal-legacy-auth-card .auth-head h3 {
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
}

.portal-legacy-auth-card .auth-head .auth-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f5f6fb;
    color: #7c8598;
    font-size: 24px;
    line-height: 1;
}

.portal-legacy-auth-card .auth-form {
    padding: 18px 0 0;
}

.portal-legacy-auth-card .form-row input {
    height: 52px;
    border-color: transparent;
    border-radius: 15px;
    background: #f5f6fb;
}

.portal-legacy-auth-card .form-row input:focus {
    border-color: #6d5efc;
    box-shadow: 0 0 0 4px rgba(109,94,252,.12);
}

.portal-legacy-auth-card .auth-tip {
    color: #7c8598;
}

.portal-modal-close,
.auth-close.portal-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f5f6fb;
    color: #7c8598;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.portal-modal-close:hover {
    color: #6d5efc;
    background: rgba(109,94,252,.1);
}

.portal-auth-modal {
    backdrop-filter: blur(8px);
}

.portal-auth-modal-old {
    display: none !important;
}

.portal-auth-modal-pro {
    padding: 18px;
}

.portal-auth-modal-pro.show {
    display: flex;
}

.portal-auth-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 560px);
    width: min(1320px, calc(100vw - 36px));
    height: min(940px, calc(100vh - 36px));
    overflow: hidden;
    border-radius: 28px;
    background: #eef1fb;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .34);
}

.portal-auth-stage-close {
    position: absolute;
    z-index: 8;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, .08);
    color: #667085;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.portal-auth-stage-close:hover {
    color: #6d5efc;
    background: rgba(109, 94, 252, .12);
}

.portal-modal-hero {
    min-height: 0;
    height: 100%;
    flex: none;
}

.portal-modal-hero .portal-login-copy {
    width: min(560px, 80%);
}

.portal-modal-panel {
    min-height: 0;
    height: 100%;
    padding: 24px 44px;
    overflow: hidden;
}

.portal-modal-login-card {
    width: min(520px, 100%);
    max-height: 100%;
    padding: 28px 42px;
    overflow-y: auto;
    border-radius: 30px;
    box-shadow: 0 22px 68px rgba(46, 52, 98, .14);
}

.portal-modal-login-card .portal-login-brand {
    margin-bottom: 14px;
}

.portal-modal-login-card .portal-login-head {
    margin-bottom: 12px;
}

.portal-modal-login-card .portal-login-head h2,
.portal-modal-login-card .portal-login-head h3 {
    font-size: 28px;
}

.portal-modal-login-card .portal-login-head p {
    font-size: 15px;
}

.portal-modal-login-card .auth-tabs {
    padding: 0;
    margin: 0 0 12px;
}

.portal-modal-login-card .portal-field,
.portal-modal-login-card .portal-js-field {
    margin-bottom: 8px;
}

.portal-modal-login-card .portal-field > span,
.portal-modal-login-card .portal-field > label,
.portal-modal-login-card .portal-js-field label {
    margin-bottom: 5px;
}

.portal-modal-login-card .portal-field input,
.portal-modal-login-card .portal-js-field input {
    height: 46px;
    border-radius: 14px;
    font-size: 15px;
}

.portal-modal-login-card .portal-login-options {
    margin-bottom: 14px;
}

.portal-modal-login-card .portal-login-submit {
    height: 52px;
    border-radius: 15px;
    font-size: 17px;
}

.portal-modal-login-card .portal-login-alt {
    margin-top: 8px;
    font-size: 14px;
}

@media (max-width: 980px) {
    .portal-auth-stage {
        grid-template-columns: 1fr;
        height: min(860px, calc(100vh - 24px));
    }

    .portal-modal-hero {
        display: none;
    }

    .portal-modal-panel {
        padding: 18px;
    }

    .portal-modal-login-card {
        width: 100%;
        margin: 0;
    }
}

.portal-auth-modal .auth-card {
    border: 0;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(46,52,98,.18), 0 4px 14px rgba(46,52,98,.08);
}

.portal-auth-modal .auth-tabs {
    padding: 0 24px 14px;
}

.portal-auth-modal .auth-tab {
    border-color: transparent;
    border-radius: 14px;
    background: #f5f6fb;
    color: #7c8598;
}

.portal-auth-modal .auth-tab.active {
    border-color: rgba(109,94,252,.22);
    color: #5b54e6;
    background: rgba(109,94,252,.1);
}

@media (max-width: 920px) {
    .portal-login-shell {
        display: block;
    }

    .portal-login-hero {
        min-height: 300px;
    }

    .portal-login-copy {
        width: 100%;
        padding: 48px 28px;
    }

    .portal-login-copy h1 {
        margin-top: 18px;
    }

    .portal-login-feats {
        display: none;
    }

    .portal-login-panel {
        min-height: auto;
        padding: 28px 18px 48px;
    }

    .portal-login-card {
        padding: 34px 24px;
        margin-top: -46px;
        box-shadow: 0 18px 40px rgba(46,52,98,.12);
    }

    .portal-modal-card {
        margin-top: 0;
    }
}

@media (max-width: 430px) {
    .portal-login-copy h1 {
        font-size: 40px;
    }

    .portal-login-copy p {
        font-size: 15px;
    }

    .portal-login-card {
        border-radius: 22px;
        padding: 30px 20px;
    }

    .portal-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Homepage light hero: matches the provided lavender SaaS reference */
body.portal-page:not(.portal-login-page) {
    background:
        radial-gradient(circle at 92% 8%, rgba(132, 97, 255, .46), transparent 34%),
        radial-gradient(circle at 68% 82%, rgba(135, 104, 255, .28), transparent 38%),
        linear-gradient(135deg, #fbfcff 0%, #f4f1ff 45%, #e9e5ff 100%);
    color: #0f1738;
}

body.portal-page:not(.portal-login-page) .portal-topbar {
    border-bottom: 0;
    background: rgba(255, 255, 255, .48);
    box-shadow: none;
    backdrop-filter: blur(22px);
}

body.portal-page:not(.portal-login-page) .portal-nav {
    width: min(1920px, calc(100% - 112px));
    min-height: 108px;
    gap: 46px;
}

body.portal-page:not(.portal-login-page) .portal-brand {
    min-width: 250px;
    color: #07112f;
    font-size: 26px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .portal-brand span {
    color: #07112f;
    text-shadow: none;
}

body.portal-page:not(.portal-login-page) .portal-brand img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(107, 84, 238, .22);
}

body.portal-page:not(.portal-login-page) .portal-links {
    gap: 44px;
    color: #0f1738;
    font-size: 18px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .portal-links a:hover {
    color: #6c53ee;
}

body.portal-page:not(.portal-login-page) .portal-actions {
    gap: 24px;
}

body.portal-page:not(.portal-login-page) .portal-btn {
    min-height: 66px;
    padding: 0 36px;
    border-radius: 10px;
    font-size: 19px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .portal-btn.primary,
body.portal-page:not(.portal-login-page) .portal-btn.blue {
    color: #fff;
    background: linear-gradient(135deg, #7b61ff 0%, #6247e9 100%);
    box-shadow: 0 18px 36px rgba(98, 71, 233, .26);
}

body.portal-page:not(.portal-login-page) .portal-btn.ghost,
body.portal-page:not(.portal-login-page) .portal-btn.light {
    color: #121a3f;
    border-color: rgba(116, 93, 224, .22);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 14px 38px rgba(77, 68, 140, .08);
}

body.portal-page:not(.portal-login-page) .portal-hero {
    min-height: 100vh;
    padding: 202px 0 86px;
    color: #10183b;
    background:
        radial-gradient(circle at 92% 10%, rgba(126, 94, 255, .38), transparent 34%),
        radial-gradient(circle at 70% 82%, rgba(142, 116, 255, .28), transparent 34%),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .96), transparent 42%),
        linear-gradient(135deg, #fbfcff 0%, #f3f0ff 48%, #e8e2ff 100%);
}

body.portal-page:not(.portal-login-page) .portal-hero::before {
    inset: 0;
    background-image: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .52), transparent 46%),
        radial-gradient(circle at 56% 30%, rgba(255, 255, 255, .46), transparent 19%);
    mask-image: none;
    opacity: 1;
}

body.portal-page:not(.portal-login-page) .portal-hero::after {
    position: absolute;
    z-index: 1;
    top: 150px;
    left: 37%;
    width: 190px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 38px;
    background: rgba(255, 255, 255, .28);
    box-shadow:
        420px 270px 0 -34px rgba(255, 255, 255, .2),
        232px 584px 0 -24px rgba(255, 255, 255, .18);
    transform: rotate(-29deg);
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-hero-inner,
body.portal-page:not(.portal-login-page) .portal-section-inner {
    width: min(1890px, calc(100% - 150px));
}

body.portal-page:not(.portal-login-page) .portal-hero-copy {
    width: min(900px, 49%);
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    min-height: 48px;
    padding: 0 24px;
    border-color: rgba(125, 96, 255, .18);
    border-radius: 999px;
    color: #6d52ed;
    background: rgba(255, 255, 255, .52);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 16px 42px rgba(111, 83, 224, .08);
    font-size: 18px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .portal-eyebrow::before {
    background: #70de82;
    box-shadow: 0 0 0 7px rgba(112, 222, 130, .18);
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    margin: 38px 0 28px;
    color: #0c1434;
    font-size: clamp(58px, 4.18vw, 84px);
    line-height: 1.16;
    font-weight: 950;
    letter-spacing: 0;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #6a49f2 0%, #4777ec 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.portal-page:not(.portal-login-page) .portal-hero p {
    width: min(800px, 100%);
    color: #445182;
    font-size: 26px;
    line-height: 1.62;
    font-weight: 500;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    gap: 22px;
    margin-top: 48px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
    min-width: 166px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary::after {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: 16px;
    border-radius: 50%;
    color: #6f54ef;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    content: "›";
}

body.portal-page:not(.portal-login-page) .portal-hero-stats {
    width: min(860px, 100%);
    gap: 22px;
    margin-top: 42px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    position: relative;
    min-height: 232px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 14px;
    padding: 92px 34px 28px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 20px 60px rgba(87, 76, 146, .08);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
    position: absolute;
    top: 28px;
    left: 34px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #8b6dff, #654eea);
    box-shadow: 0 16px 32px rgba(101, 78, 234, .22);
    font-size: 24px;
    font-weight: 900;
    content: "▦";
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(2)::before {
    background: linear-gradient(135deg, #79d98c, #43b96a);
    content: "◆";
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(3)::before {
    background: linear-gradient(135deg, #8b6dff, #654eea);
    content: "✦";
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    color: #0c1434;
    font-size: 38px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat span {
    margin-top: 14px;
    color: #49537b;
    font-size: 18px;
    line-height: 1.55;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    z-index: 3;
    top: 148px;
    right: max(64px, calc((100vw - 1890px) / 2 + 8px));
    width: min(940px, 46.5vw);
    min-width: 760px;
    opacity: 1;
}

body.portal-page:not(.portal-login-page) .portal-dashboard {
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 18px;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 34px 88px rgba(96, 77, 188, .18), inset 0 1px 0 rgba(255, 255, 255, .86);
    backdrop-filter: blur(16px);
}

body.portal-page:not(.portal-login-page) .dash-top {
    height: 104px;
    padding: 0 34px;
    border-bottom: 0;
}

body.portal-page:not(.portal-login-page) .dash-top strong {
    color: #0c1434;
    font-size: 27px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .dash-pill {
    padding: 12px 18px;
    color: #596188;
    background: rgba(255, 255, 255, .52);
    font-size: 16px;
}

body.portal-page:not(.portal-login-page) .dash-grid {
    gap: 18px;
    padding: 0 30px 32px;
}

body.portal-page:not(.portal-login-page) .dash-card {
    min-height: 344px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 14px;
    padding: 30px 28px;
    background: rgba(255, 255, 255, .44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

body.portal-page:not(.portal-login-page) .dash-card.wide {
    min-height: 316px;
}

body.portal-page:not(.portal-login-page) .dash-card small {
    color: #4d5783;
    font-size: 18px;
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    margin-top: 20px;
    color: #0c1434;
    font-size: 40px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .dash-card em {
    margin-top: 14px;
    color: #18a34a;
    font-size: 18px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .dash-bars {
    height: 142px;
    gap: 14px;
    margin-top: 28px;
}

body.portal-page:not(.portal-login-page) .dash-bars i {
    min-width: 34px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #8fc7ff 0%, #6e73ff 100%);
    box-shadow: 0 10px 22px rgba(111, 98, 243, .14);
}

body.portal-page:not(.portal-login-page) .dash-flow {
    gap: 16px;
    margin-top: 28px;
}

body.portal-page:not(.portal-login-page) .dash-flow span {
    min-height: 110px;
    border-color: rgba(255, 255, 255, .78);
    border-radius: 10px;
    padding: 24px 18px;
    color: #4b557c;
    background: rgba(255, 255, 255, .48);
    font-size: 17px;
    box-shadow: 0 14px 30px rgba(84, 75, 146, .06);
}

body.portal-page:not(.portal-login-page) .dash-flow b {
    margin-bottom: 10px;
    color: #0c1434;
    font-size: 22px;
}

body.portal-page:not(.portal-login-page) .dash-line {
    height: 204px;
    margin-top: 32px;
}

body.portal-page:not(.portal-login-page) .portal-next-hint {
    bottom: 26px;
    color: #68719d;
    font-size: 16px;
    font-weight: 700;
}

body.portal-page:not(.portal-login-page) .portal-next-hint::after {
    display: block;
    width: 14px;
    height: 14px;
    margin: 12px auto 0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-section {
    background: #f7f8ff;
}

@media (max-width: 1500px) {
    body.portal-page:not(.portal-login-page) .portal-nav,
    body.portal-page:not(.portal-login-page) .portal-hero-inner,
    body.portal-page:not(.portal-login-page) .portal-section-inner {
        width: min(100% - 64px, 1400px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: min(720px, 52%);
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(52px, 5.2vw, 78px);
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        right: -80px;
        width: min(770px, 48vw);
        min-width: 660px;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-topbar {
        background: rgba(255, 255, 255, .72);
    }

    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(100% - 28px, 1180px);
        min-height: 72px;
        gap: 12px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        min-width: 0;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img {
        width: 36px;
        height: 36px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        border-color: rgba(108, 83, 238, .22);
        background: rgba(255, 255, 255, .72);
        color: #6c53ee;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        top: 72px;
        border-color: rgba(108, 83, 238, .14);
        background: rgba(255, 255, 255, .96);
        color: #182040;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: auto;
        padding: 108px 0 68px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner,
    body.portal-page:not(.portal-login-page) .portal-section-inner {
        width: min(100% - 28px, 1180px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(42px, 11vw, 66px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 17px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        width: 100%;
        min-height: 54px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        grid-template-columns: 1fr;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 152px;
        padding-top: 82px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        position: relative;
        top: auto;
        right: auto;
        width: min(100% - 28px, 760px);
        min-width: 0;
        margin: 36px auto 0;
        opacity: 1;
        pointer-events: auto;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        min-height: 220px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        min-height: 220px;
    }
}

/* Homepage reference pass: light lavender SaaS hero from the provided image */
body.portal-page:not(.portal-login-page) .portal-topbar {
    background: transparent;
    backdrop-filter: none;
}

body.portal-page:not(.portal-login-page) .portal-hero {
    overflow: hidden;
}

body.portal-page:not(.portal-login-page) .portal-hero-copy {
    width: min(940px, 49%);
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    margin: 38px 0 36px;
    font-size: clamp(58px, 3.72vw, 76px);
    line-height: 1.14;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-line {
    display: block;
    color: #0c1434;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    white-space: nowrap;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-accent {
    display: inline;
    color: transparent;
    background: linear-gradient(90deg, #714cf2 0%, #4b76ed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    white-space: nowrap;
}

body.portal-page:not(.portal-login-page) .portal-hero p {
    width: min(720px, 100%);
    font-size: 25px;
    line-height: 1.58;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    margin-top: 48px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
    min-width: 330px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stats {
    margin-top: 50px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
    position: absolute;
    top: 43px;
    left: 49px;
    width: 22px;
    height: 22px;
    background: #fff;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(2)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 20 5v6c0 5.1-3.4 9.6-8 11-4.6-1.4-8-5.9-8-11V5l8-3Zm0 4.1L8 7.6V11c0 2.8 1.6 5.6 4 7 2.4-1.4 4-4.2 4-7V7.6l-4-1.5Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 20 5v6c0 5.1-3.4 9.6-8 11-4.6-1.4-8-5.9-8-11V5l8-3Zm0 4.1L8 7.6V11c0 2.8 1.6 5.6 4 7 2.4-1.4 4-4.2 4-7V7.6l-4-1.5Z' fill='%23000'/%3E%3C/svg%3E");
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(3)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 2 4 13.2h6.8L9.7 22 20 9.8h-7L13.2 2Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 2 4 13.2h6.8L9.7 22 20 9.8h-7L13.2 2Z' fill='%23000'/%3E%3C/svg%3E");
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    letter-spacing: .2px;
}

body.portal-page:not(.portal-login-page) .dash-line path[stroke] {
    stroke-width: 5.5;
}

@media (min-width: 981px) and (max-width: 1500px) {
    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: min(760px, 52%);
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(50px, 5vw, 70px);
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 32px;
        width: min(580px, 40vw);
        min-width: 0;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 96px;
        padding: 0 26px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 24px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        gap: 14px;
        padding: 0 22px 28px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        min-height: 314px;
        padding: 26px 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        min-height: 284px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        font-size: 34px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 126px;
        gap: 10px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars i {
        min-width: 24px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        gap: 8px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 92px;
        padding: 18px 8px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 178px;
        margin-top: 26px;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-topbar {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(18px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        display: flex;
        flex-direction: column;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        order: 1;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        order: 2;
    }

    body.portal-page:not(.portal-login-page) .portal-next-hint {
        position: relative;
        order: 3;
        bottom: auto;
        margin-top: 28px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(38px, 10.4vw, 56px);
        line-height: 1.12;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-line {
        white-space: normal;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-accent {
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 43px;
    }
}

/* Figma Make replica: jUd0UBPwtGf0in6EFei83W */
body.portal-page:not(.portal-login-page) {
    background:
        radial-gradient(ellipse 80% 60% at 20% -5%, #fff 0%, #f5f1ff 35%, #ece4ff 65%, #d9ccff 100%);
    color: #111838;
    font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

body.portal-page:not(.portal-login-page) .portal-topbar {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.portal-page:not(.portal-login-page) .portal-nav {
    width: min(1888px, calc(100% - 160px));
    min-height: 96px;
    gap: 80px;
}

body.portal-page:not(.portal-login-page) .portal-brand {
    position: relative;
    min-width: 230px;
    gap: 14px;
    color: #0c1432;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -.04em;
}

body.portal-page:not(.portal-login-page) .portal-brand img {
    display: none;
}

body.portal-page:not(.portal-login-page) .portal-brand::before {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #9d84ff 0%, #7458f5 48%, #5c3de8 100%);
    box-shadow: 0 12px 24px rgba(103, 73, 238, .3);
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-brand::after {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 23px;
    height: 23px;
    background: #fff;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19V5h2v12h12v2H5Zm4-3V9h2v7H9Zm4 0V4h2v12h-2Zm4 0v-5h2v5h-2Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19V5h2v12h12v2H5Zm4-3V9h2v7H9Zm4 0V4h2v12h-2Zm4 0v-5h2v5h-2Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.portal-page:not(.portal-login-page) .portal-brand span {
    color: #0c1432;
    text-shadow: none;
}

body.portal-page:not(.portal-login-page) .portal-links {
    gap: 56px;
    color: #1f2747;
    font-size: 21px;
    font-weight: 850;
}

body.portal-page:not(.portal-login-page) .portal-links a {
    opacity: .72;
}

body.portal-page:not(.portal-login-page) .portal-actions {
    gap: 14px;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
    min-height: 52px;
    padding: 0 30px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.ghost {
    border-color: rgba(255, 255, 255, .8);
    color: #111635;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 4px 14px rgba(73, 59, 140, .08);
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
    color: #fff;
    background: linear-gradient(180deg, #7e65ff 0%, #6449ee 100%);
    box-shadow: 0 8px 22px rgba(100, 73, 238, .3);
}

body.portal-page:not(.portal-login-page) .portal-hero {
    height: auto;
    min-height: 760px;
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 95% 2%, rgba(139, 110, 255, .26), transparent 31%),
        radial-gradient(circle at 48% 86%, rgba(122, 90, 248, .16), transparent 33%),
        radial-gradient(ellipse 80% 60% at 20% -5%, #fff 0%, #f5f1ff 35%, #ece4ff 65%, #d9ccff 100%);
}

body.portal-page:not(.portal-login-page) .portal-hero::before {
    inset: 0;
    background:
        radial-gradient(circle, rgba(104, 80, 244, .36) 0 1.5px, transparent 1.6px) 0 0 / 30px 30px;
    mask-image: none;
    opacity: .12;
}

body.portal-page:not(.portal-login-page) .portal-hero::after {
    z-index: 1;
    top: 112px;
    left: 39.5%;
    width: 250px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 40px;
    background: rgba(255, 255, 255, .1);
    box-shadow:
        250px 438px 0 -70px rgba(255, 255, 255, .08),
        inset 0 1px 30px rgba(255, 255, 255, .5);
    transform: rotate(54deg);
}

body.portal-page:not(.portal-login-page) .portal-hero-inner {
    position: absolute;
    z-index: 3;
    top: 110px;
    left: max(80px, calc((100vw - 1888px) / 2));
    width: 820px;
}

body.portal-page:not(.portal-login-page) .portal-hero-copy {
    width: 820px;
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    min-height: 44px;
    padding: 0 22px;
    border-color: #dbd4ff;
    border-radius: 999px;
    color: #6d52ea;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 4px 14px rgba(111, 88, 238, .1);
    font-size: 17px;
    font-weight: 850;
    backdrop-filter: blur(20px);
}

body.portal-page:not(.portal-login-page) .portal-eyebrow::before {
    width: 11px;
    height: 11px;
    background: #3cd48a;
    box-shadow: 0 0 0 0 rgba(60, 212, 138, .35);
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    width: 800px;
    margin: 34px 0 28px;
    color: #111838;
    font-size: clamp(62px, 3.95vw, 81px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -.035em;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #7856f4 0%, #7060f5 54%, #849dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    white-space: normal;
}

body.portal-page:not(.portal-login-page) .portal-hero p {
    width: 820px;
    color: #545e92;
    font-size: 24px;
    line-height: 1.68;
    font-weight: 500;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    gap: 20px;
    margin-top: 28px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
    min-height: 70px;
    border-radius: 12px;
    padding: 0 34px;
    font-size: 22px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
    min-width: 324px;
    background: linear-gradient(180deg, #7e65ff 0%, #6249f0 100%);
    box-shadow: 0 14px 30px rgba(104, 76, 241, .33);
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary::after {
    width: 28px;
    height: 28px;
    margin-left: 12px;
    font-size: 22px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
    min-width: 158px;
    border-color: #cbc3f4;
    color: #6654dd;
    background: rgba(255, 255, 255, .22);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

body.portal-page:not(.portal-login-page) .portal-hero-stats {
    width: 804px;
    gap: 20px;
    margin-top: 24px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    min-height: 198px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    padding: 100px 26px 26px;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 14px 34px rgba(102, 88, 180, .09), inset 0 1px 0 rgba(255, 255, 255, .7);
    backdrop-filter: blur(18px);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
    top: 24px;
    left: 26px;
    width: 53px;
    height: 53px;
    border-radius: 11px;
    background: linear-gradient(135deg, #8065ff 0%, #5d3ff0 100%);
    box-shadow: 0 8px 18px rgba(103, 73, 231, .32);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(2)::before {
    background: linear-gradient(135deg, #44d496 0%, #25a869 100%);
    box-shadow: 0 8px 18px rgba(55, 185, 115, .3);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
    top: 39px;
    left: 41px;
    width: 23px;
    height: 23px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    color: #111837;
    font-size: 39px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.03em;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat span {
    margin-top: 8px;
    color: #3e4772;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 750;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    z-index: 3;
    top: 192px;
    right: max(120px, calc((100vw - 1888px) / 2 + 40px));
    width: min(964px, 47.1vw);
    min-width: 860px;
    opacity: 1;
}

body.portal-page:not(.portal-login-page) .portal-dashboard {
    height: 660px;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 22px;
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 24px 64px rgba(69, 57, 144, .16), inset 0 1px 0 rgba(255, 255, 255, .82);
    backdrop-filter: blur(24px);
}

body.portal-page:not(.portal-login-page) .dash-top {
    height: 92px;
    padding: 0 30px;
    border-bottom: 0;
}

body.portal-page:not(.portal-login-page) .dash-top strong {
    color: #111735;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -.02em;
}

body.portal-page:not(.portal-login-page) .dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    color: #6678a8;
    background: rgba(255, 255, 255, .55);
    font-size: 18px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .dash-pill::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3cd48a;
    content: "";
}

body.portal-page:not(.portal-login-page) .dash-grid {
    gap: 18px;
    grid-template-rows: 296px 1fr;
    height: calc(100% - 92px);
    padding: 0 30px 30px;
}

body.portal-page:not(.portal-login-page) .dash-card {
    min-height: 0;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 16px;
    padding: 27px 24px;
    background: rgba(255, 255, 255, .34);
    box-shadow: 0 10px 28px rgba(74, 65, 145, .07), inset 0 1px 0 rgba(255, 255, 255, .75);
}

body.portal-page:not(.portal-login-page) .dash-card.wide {
    min-height: 0;
    padding: 24px;
    background: rgba(255, 255, 255, .3);
}

body.portal-page:not(.portal-login-page) .dash-card small {
    color: #62709e;
    font-size: 22px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    margin-top: 22px;
    color: #111838;
    font-size: 48px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.03em;
}

body.portal-page:not(.portal-login-page) .dash-card em {
    margin-top: 16px;
    color: #22b546;
    font-size: 18px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .dash-bars {
    height: 88px;
    gap: 38px;
    align-items: flex-end;
    justify-content: center;
    margin-top: 28px;
}

body.portal-page:not(.portal-login-page) .dash-bars i {
    min-width: 32px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #acd4ff 0%, #8d7dff 45%, #6040ee 100%);
    box-shadow: none;
}

body.portal-page:not(.portal-login-page) .dash-flow {
    gap: 12px;
    margin-top: 26px;
}

body.portal-page:not(.portal-login-page) .dash-flow span {
    min-height: 78px;
    border: 0;
    border-radius: 10px;
    padding: 13px 10px;
    color: #505882;
    background: rgba(255, 255, 255, .58);
    font-size: 15px;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(58, 53, 118, .06);
}

body.portal-page:not(.portal-login-page) .dash-flow b {
    margin-bottom: 4px;
    color: #151a38;
    font-size: 22px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .dash-line {
    height: 132px;
    margin-top: 6px;
}

body.portal-page:not(.portal-login-page) .dash-line path[stroke] {
    stroke-width: 3.5;
}

body.portal-page:not(.portal-login-page) .portal-next-hint {
    bottom: 17px;
    color: #7c85b8;
    font-size: 17px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .portal-next-hint::after {
    width: 12px;
    height: 12px;
    margin-top: 8px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

body.portal-page:not(.portal-login-page) .portal-section {
    background: #f7f8ff;
}

@media (max-width: 1600px) and (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(100% - 64px, 1400px);
        gap: 42px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: 34px;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        left: 32px;
        width: 745px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy,
    body.portal-page:not(.portal-login-page) .portal-hero h1,
    body.portal-page:not(.portal-login-page) .portal-hero p {
        width: 745px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(60px, 5vw, 72px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 716px;
        margin-top: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        gap: 16px;
        margin-top: 22px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 60px;
        padding: 0 24px;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
        min-width: 286px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
        min-width: 134px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 190px;
        padding: 88px 22px 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
        top: 22px;
        left: 22px;
        width: 52px;
        height: 52px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 37px;
        left: 37px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 35px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 32px;
        width: min(576px, 40vw);
        min-width: 0;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 25px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        min-height: 250px;
        padding: 24px 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        min-height: 205px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        font-size: 38px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        gap: 18px;
        height: 78px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars i {
        min-width: 25px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        gap: 8px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 78px;
        padding: 12px 7px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 118px;
    }

    body.portal-page:not(.portal-login-page) .portal-next-hint {
        display: none;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-topbar {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(18px);
    }

    body.portal-page:not(.portal-login-page) .portal-nav {
        position: relative;
        width: min(100% - 28px, 1180px);
        min-height: 72px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        position: absolute;
        top: 15px;
        right: 106px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions {
        position: absolute;
        top: 14px;
        right: 0;
        gap: 0;
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        flex: 0 0 auto;
        min-width: 0;
        gap: 8px;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand span {
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        width: auto;
        min-width: 90px;
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        white-space: nowrap;
        writing-mode: horizontal-tb;
    }

    body.portal-page:not(.portal-login-page) .portal-brand::before {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand::after {
        top: 11px;
        left: 11px;
        width: 16px;
        height: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: 108px 0 68px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        width: min(100% - 28px, 760px);
        margin: 0 auto;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy,
    body.portal-page:not(.portal-login-page) .portal-hero h1,
    body.portal-page:not(.portal-login-page) .portal-hero p {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow {
        min-height: 44px;
        font-size: 17px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        margin: 32px 0 28px;
        font-size: clamp(42px, 10.8vw, 58px);
        line-height: 1.08;
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 23px;
        line-height: 1.72;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        width: 100%;
        min-height: 54px;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 100%;
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 158px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        position: relative;
        top: auto;
        right: auto;
        order: 2;
        width: min(100% - 28px, 760px);
        min-width: 0;
        margin: 36px auto 0;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 88px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 26px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-columns: 1fr;
    }

    body.portal-page:not(.portal-login-page) .dash-card,
    body.portal-page:not(.portal-login-page) .dash-card.wide {
        min-height: 220px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        grid-column: auto;
    }

    body.portal-page:not(.portal-login-page) .portal-next-hint {
        position: relative;
        order: 3;
        bottom: auto;
        margin-top: 28px;
    }
}

/* Portal hero polish: reduce card typography and fix dashboard proportions */
body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    font-size: 32px;
    letter-spacing: -.02em;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat span {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

body.portal-page:not(.portal-login-page) .dash-card small {
    font-size: 18px;
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    font-size: 40px;
}

body.portal-page:not(.portal-login-page) .dash-card em {
    font-size: 15px;
}

body.portal-page:not(.portal-login-page) .dash-flow span {
    font-size: 13px;
}

body.portal-page:not(.portal-login-page) .dash-flow b {
    font-size: 18px;
}

@media (max-width: 1600px) and (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        width: min(670px, 48vw);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy,
    body.portal-page:not(.portal-login-page) .portal-hero h1,
    body.portal-page:not(.portal-login-page) .portal-hero p {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(54px, 4.65vw, 68px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 172px;
        padding: 80px 18px 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 30px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 32px;
        width: min(680px, 47vw);
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 580px;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 78px;
        padding: 0 26px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 230px 1fr;
        height: calc(100% - 78px);
        gap: 14px;
        padding: 0 26px 26px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        padding: 22px 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-card small {
        font-size: 17px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        margin-top: 16px;
        font-size: 34px;
    }

    body.portal-page:not(.portal-login-page) .dash-card em {
        margin-top: 12px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 68px;
        gap: 18px;
        margin-top: 22px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        margin-top: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 66px;
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 116px;
        margin-top: 4px;
    }
}

/* Content sections readability pass */
body.portal-page:not(.portal-login-page) .portal-section.dark {
    color: #111838;
    background:
        radial-gradient(circle at 18% 20%, rgba(122, 91, 246, .08), transparent 34%),
        linear-gradient(180deg, #f6f7ff 0%, #f1f4fb 100%);
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-kicker {
    color: #5c72ff;
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-title {
    color: #111838;
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-desc {
    color: #58637f;
}

body.portal-page:not(.portal-login-page) .process-track {
    gap: 18px;
}

body.portal-page:not(.portal-login-page) .process-step {
    min-height: 176px;
    border: 1px solid rgba(124, 107, 230, .16);
    border-radius: 18px;
    padding: 24px 22px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 40px rgba(67, 59, 130, .06), inset 0 1px 0 rgba(255, 255, 255, .82);
}

body.portal-page:not(.portal-login-page) .process-step strong {
    color: #7359f6;
    font-size: 24px;
    font-weight: 950;
}

body.portal-page:not(.portal-login-page) .process-step h3 {
    margin: 16px 0 8px;
    color: #141b3a;
    font-size: 17px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .process-step p {
    color: #626d86;
    font-size: 13px;
    line-height: 1.65;
}

body.portal-page:not(.portal-login-page) .quote-card {
    display: flex;
    flex-direction: column;
    min-height: 232px;
    padding: 28px 30px 24px;
}

body.portal-page:not(.portal-login-page) .quote-card > p {
    flex: 1;
    min-height: 0;
    margin: 0;
    color: #526079;
    font-size: 15px;
    line-height: 1.75;
}

body.portal-page:not(.portal-login-page) .quote-person {
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(124, 107, 230, .12);
}

body.portal-page:not(.portal-login-page) .quote-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    margin-top: 0;
    color: #fff;
    background: linear-gradient(135deg, #6fdc9a 0%, #4fc57c 100%);
    box-shadow: 0 10px 24px rgba(72, 187, 120, .22);
    font-size: 16px;
    line-height: 1;
}

body.portal-page:not(.portal-login-page) .quote-person strong {
    color: #14203a;
    font-size: 15px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .quote-person > div > span {
    margin-top: 4px;
    color: #687491;
    font-size: 13px;
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .process-track,
    body.portal-page:not(.portal-login-page) .quote-grid {
        grid-template-columns: 1fr;
    }

    body.portal-page:not(.portal-login-page) .process-step,
    body.portal-page:not(.portal-login-page) .quote-card {
        min-height: auto;
    }
}

/* Portal homepage refinement pass */
body.portal-page:not(.portal-login-page) {
    --portal-refine-purple: #7056f6;
    --portal-refine-purple-2: #5f45ee;
    --portal-refine-green: #37d38a;
    --portal-refine-ink: #101836;
    --portal-refine-muted: #59637f;
    --portal-refine-border: rgba(119, 105, 218, .16);
    --portal-refine-card: rgba(255, 255, 255, .82);
    --portal-refine-shadow: 0 18px 46px rgba(70, 62, 140, .08);
    --portal-refine-shadow-hover: 0 24px 62px rgba(83, 68, 170, .16);
    overflow-x: hidden;
}

body.portal-page:not(.portal-login-page) .portal-section,
body.portal-page:not(.portal-login-page) .portal-section[id] {
    scroll-margin-top: 118px;
}

body.portal-page:not(.portal-login-page) .portal-topbar {
    background: rgba(255, 255, 255, .66);
    border-bottom: 1px solid rgba(125, 109, 220, .12);
    box-shadow: 0 16px 42px rgba(79, 69, 152, .07);
    backdrop-filter: blur(22px) saturate(1.18);
}

body.portal-page:not(.portal-login-page) .portal-links a,
body.portal-page:not(.portal-login-page) .portal-brand,
body.portal-page:not(.portal-login-page) .portal-btn,
body.portal-page:not(.portal-login-page) .auth-tab,
body.portal-page:not(.portal-login-page) .faq-q {
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .22s ease,
        transform .22s ease,
        opacity .2s ease;
}

body.portal-page:not(.portal-login-page) .portal-links a {
    position: relative;
}

body.portal-page:not(.portal-login-page) .portal-links a::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portal-refine-purple), #8ca2ff);
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .2s ease, transform .22s ease;
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-links a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

body.portal-page:not(.portal-login-page) .portal-btn:hover {
    transform: translateY(-2px);
}

body.portal-page:not(.portal-login-page) .portal-btn.primary:hover,
body.portal-page:not(.portal-login-page) .portal-btn.blue:hover {
    box-shadow: 0 18px 38px rgba(101, 75, 239, .32);
}

body.portal-page:not(.portal-login-page) .portal-btn.ghost:hover,
body.portal-page:not(.portal-login-page) .portal-btn.light:hover {
    border-color: rgba(104, 83, 230, .34);
    background: rgba(255, 255, 255, .54);
    box-shadow: 0 14px 32px rgba(82, 72, 154, .09);
}

body.portal-page:not(.portal-login-page) .portal-hero {
    padding-top: 184px;
    background:
        radial-gradient(circle at 83% 14%, rgba(144, 115, 255, .34), transparent 30%),
        radial-gradient(circle at 8% 78%, rgba(79, 205, 175, .18), transparent 28%),
        linear-gradient(135deg, #fbfaff 0%, #f2efff 48%, #e7e3ff 100%);
}

body.portal-page:not(.portal-login-page) .portal-hero-copy {
    filter: drop-shadow(0 12px 32px rgba(255, 255, 255, .34));
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    border-color: rgba(116, 93, 224, .2);
    color: #6753df;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 24px rgba(84, 72, 170, .08);
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    color: var(--portal-refine-ink);
    text-wrap: balance;
}

body.portal-page:not(.portal-login-page) .portal-hero p {
    color: #566184;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat,
body.portal-page:not(.portal-login-page) .portal-dashboard,
body.portal-page:not(.portal-login-page) .dash-card,
body.portal-page:not(.portal-login-page) .value-card,
body.portal-page:not(.portal-login-page) .feature-card,
body.portal-page:not(.portal-login-page) .process-step,
body.portal-page:not(.portal-login-page) .price-card,
body.portal-page:not(.portal-login-page) .quote-card,
body.portal-page:not(.portal-login-page) .faq-item {
    border-color: var(--portal-refine-border);
    background: var(--portal-refine-card);
    box-shadow: var(--portal-refine-shadow), inset 0 1px 0 rgba(255, 255, 255, .78);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    min-height: 156px;
    padding-top: 76px;
    backdrop-filter: blur(18px);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    font-size: 28px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat span {
    color: #4f5877;
    font-size: 13px;
}

body.portal-page:not(.portal-login-page) .portal-dashboard {
    height: 540px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 28px 76px rgba(81, 69, 153, .16), inset 0 1px 0 rgba(255, 255, 255, .82);
}

body.portal-page:not(.portal-login-page) .dash-top {
    height: 76px;
    padding: 0 26px;
}

body.portal-page:not(.portal-login-page) .dash-top strong {
    color: #111735;
    font-size: 25px;
    letter-spacing: 0;
}

body.portal-page:not(.portal-login-page) .dash-pill {
    color: #647097;
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

body.portal-page:not(.portal-login-page) .dash-grid {
    grid-template-rows: 214px 1fr;
    height: calc(100% - 76px);
    gap: 14px;
    padding: 0 26px 26px;
}

body.portal-page:not(.portal-login-page) .dash-card {
    min-height: 0;
    border-radius: 18px;
    padding: 21px 20px;
    background: rgba(255, 255, 255, .46);
}

body.portal-page:not(.portal-login-page) .dash-card.wide {
    min-height: 0;
}

body.portal-page:not(.portal-login-page) .dash-card small {
    color: #68739c;
    font-size: 15px;
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    margin-top: 14px;
    color: #111838;
    font-size: 32px;
}

body.portal-page:not(.portal-login-page) .dash-card em {
    margin-top: 10px;
    font-size: 13px;
}

body.portal-page:not(.portal-login-page) .dash-bars {
    height: 58px;
    gap: 18px;
    margin-top: 18px;
}

body.portal-page:not(.portal-login-page) .dash-bars i {
    min-width: 20px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, #b4d8ff 0%, #8d7cff 52%, #6043ee 100%);
}

body.portal-page:not(.portal-login-page) .dash-flow {
    gap: 8px;
    margin-top: 18px;
}

body.portal-page:not(.portal-login-page) .dash-flow span {
    min-height: 58px;
    padding: 10px 8px;
    color: #58627f;
    font-size: 12px;
    background: rgba(255, 255, 255, .62);
}

body.portal-page:not(.portal-login-page) .dash-flow b {
    color: #121936;
    font-size: 15px;
}

body.portal-page:not(.portal-login-page) .dash-line {
    height: 106px;
}

body.portal-page:not(.portal-login-page) .section-head {
    margin-bottom: 34px;
}

body.portal-page:not(.portal-login-page) .section-title {
    color: var(--portal-refine-ink);
    letter-spacing: 0;
    text-wrap: balance;
}

body.portal-page:not(.portal-login-page) .section-desc,
body.portal-page:not(.portal-login-page) .value-card p,
body.portal-page:not(.portal-login-page) .feature-card p,
body.portal-page:not(.portal-login-page) .process-step p,
body.portal-page:not(.portal-login-page) .quote-card > p,
body.portal-page:not(.portal-login-page) .faq-a {
    color: var(--portal-refine-muted);
}

body.portal-page:not(.portal-login-page) .value-card,
body.portal-page:not(.portal-login-page) .feature-card,
body.portal-page:not(.portal-login-page) .process-step,
body.portal-page:not(.portal-login-page) .price-card,
body.portal-page:not(.portal-login-page) .quote-card,
body.portal-page:not(.portal-login-page) .faq-item {
    position: relative;
    overflow: hidden;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

body.portal-page:not(.portal-login-page) .value-card::after,
body.portal-page:not(.portal-login-page) .feature-card::after,
body.portal-page:not(.portal-login-page) .process-step::after,
body.portal-page:not(.portal-login-page) .price-card::after,
body.portal-page:not(.portal-login-page) .quote-card::after,
body.portal-page:not(.portal-login-page) .faq-item::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(117, 91, 246, .08), transparent 42%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    content: "";
}

body.portal-page:not(.portal-login-page) .card-icon,
body.portal-page:not(.portal-login-page) .quote-avatar,
body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.portal-page:not(.portal-login-page) .value-card:hover,
    body.portal-page:not(.portal-login-page) .feature-card:hover,
    body.portal-page:not(.portal-login-page) .process-step:hover,
    body.portal-page:not(.portal-login-page) .price-card:hover,
    body.portal-page:not(.portal-login-page) .quote-card:hover,
    body.portal-page:not(.portal-login-page) .faq-item:hover {
        transform: translateY(-6px);
        border-color: rgba(112, 86, 246, .34);
        background: rgba(255, 255, 255, .94);
        box-shadow: var(--portal-refine-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    body.portal-page:not(.portal-login-page) .value-card:hover::after,
    body.portal-page:not(.portal-login-page) .feature-card:hover::after,
    body.portal-page:not(.portal-login-page) .process-step:hover::after,
    body.portal-page:not(.portal-login-page) .price-card:hover::after,
    body.portal-page:not(.portal-login-page) .quote-card:hover::after,
    body.portal-page:not(.portal-login-page) .faq-item:hover::after {
        opacity: 1;
    }

    body.portal-page:not(.portal-login-page) .value-card:hover .card-icon,
    body.portal-page:not(.portal-login-page) .quote-card:hover .quote-avatar {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 30px rgba(93, 71, 230, .2);
        filter: saturate(1.08);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat:hover::before {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 30px rgba(103, 73, 231, .24);
    }

    body.portal-page:not(.portal-login-page) .price-card:hover .portal-btn {
        transform: translateY(-1px);
    }
}

body.portal-page:not(.portal-login-page) .value-card:active,
body.portal-page:not(.portal-login-page) .feature-card:active,
body.portal-page:not(.portal-login-page) .process-step:active,
body.portal-page:not(.portal-login-page) .price-card:active,
body.portal-page:not(.portal-login-page) .quote-card:active,
body.portal-page:not(.portal-login-page) .faq-item:active {
    transform: translateY(-2px);
}

body.portal-page:not(.portal-login-page) .price-card.popular {
    border-color: rgba(112, 86, 246, .42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 249, 255, .92));
    box-shadow: 0 26px 70px rgba(94, 73, 224, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
}

body.portal-page:not(.portal-login-page) .price-badge {
    color: #443200;
    background: linear-gradient(135deg, #ffe58a, #ffc85e);
    box-shadow: 0 10px 24px rgba(246, 190, 78, .28);
}

body.portal-page:not(.portal-login-page) .plan-meta span {
    border: 1px solid rgba(119, 105, 218, .1);
    background: rgba(246, 247, 255, .82);
}

body.portal-page:not(.portal-login-page) .faq-q:hover {
    color: var(--portal-refine-purple-2);
}

body.portal-page:not(.portal-login-page) .faq-q::after {
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

body.portal-page:not(.portal-login-page) .faq-item:hover .faq-q::after {
    border-color: rgba(112, 86, 246, .4);
    background: rgba(112, 86, 246, .08);
    transform: rotate(90deg);
}

body.portal-page:not(.portal-login-page) .faq-item.open .faq-q::after {
    transform: rotate(180deg);
}

body.portal-page:not(.portal-login-page) .portal-footer {
    background:
        radial-gradient(circle at 18% 0%, rgba(112, 86, 246, .22), transparent 34%),
        #080d1c;
}

@media (max-width: 1600px) and (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-hero {
        padding-top: 176px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(50px, 4.55vw, 66px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 19px;
        line-height: 1.64;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 152px;
        padding: 74px 18px 17px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        width: min(660px, 46vw);
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-section,
    body.portal-page:not(.portal-login-page) .portal-section[id] {
        scroll-margin-top: 88px;
    }

    body.portal-page:not(.portal-login-page) .portal-topbar {
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 12px 30px rgba(75, 65, 148, .08);
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: auto;
        padding: 96px 0 40px;
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow {
        min-height: 34px;
        padding: 0 15px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        margin: 22px 0 16px;
        font-size: clamp(34px, 9.2vw, 43px);
        line-height: 1.08;
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 16px;
        line-height: 1.72;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        gap: 10px;
        margin-top: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 50px;
        border-radius: 12px;
        font-size: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 94px;
        border-radius: 14px;
        padding: 42px 8px 10px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
        top: 11px;
        left: 50%;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        transform: translateX(-50%);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 18px;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translateX(-50%);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 18px;
        text-align: center;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
        text-align: center;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        margin-top: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: auto;
        border-radius: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 62px;
        padding: 0 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-pill {
        padding: 7px 10px;
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
        gap: 10px;
        padding: 0 14px 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        min-height: 130px;
        border-radius: 14px;
        padding: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        grid-column: span 2;
        min-height: 144px;
    }

    body.portal-page:not(.portal-login-page) .dash-card small {
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        margin-top: 9px;
        font-size: 22px;
    }

    body.portal-page:not(.portal-login-page) .dash-card em {
        margin-top: 6px;
        font-size: 11px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 42px;
        gap: 7px;
        margin-top: 11px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars i {
        min-width: 8px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        gap: 5px;
        margin-top: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 48px;
        padding: 8px 5px;
        font-size: 10px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 96px;
        margin-top: 2px;
    }

    body.portal-page:not(.portal-login-page) .portal-section {
        padding: 58px 0;
    }

    body.portal-page:not(.portal-login-page) .section-head {
        gap: 14px;
        margin-bottom: 24px;
    }

    body.portal-page:not(.portal-login-page) .section-title {
        font-size: clamp(28px, 8vw, 38px);
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(100% - 24px, 1180px);
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        min-width: 84px;
        padding: 0 13px;
        font-size: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        right: 98px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        gap: 7px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 9px;
    }
}

/* Compact pricing cards on phones so package browsing is much shorter. */
@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) #pricing {
        padding-top: 46px;
        padding-bottom: 50px;
    }

    body.portal-page:not(.portal-login-page) #pricing .section-head {
        margin-bottom: 18px;
    }

    body.portal-page:not(.portal-login-page) #pricing .section-title {
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.18;
    }

    body.portal-page:not(.portal-login-page) #pricing .section-desc {
        font-size: 14px;
        line-height: 1.65;
    }

    body.portal-page:not(.portal-login-page) .pricing-grid {
        gap: 14px;
    }

    body.portal-page:not(.portal-login-page) .price-card {
        min-height: 0;
        border-radius: 18px;
        padding: 18px;
    }

    body.portal-page:not(.portal-login-page) .price-card h3 {
        max-width: calc(100% - 86px);
        font-size: 22px;
        line-height: 1.25;
    }

    body.portal-page:not(.portal-login-page) .price-badge {
        top: 18px;
        right: 18px;
        padding: 6px 9px;
        font-size: 11px;
    }

    body.portal-page:not(.portal-login-page) .price-desc {
        min-height: 0;
        margin: 8px 0 14px;
        color: #66708c;
        font-size: 14px;
        line-height: 1.45;
    }

    body.portal-page:not(.portal-login-page) .price-main {
        align-items: end;
        padding-bottom: 14px;
    }

    body.portal-page:not(.portal-login-page) .price-main strong {
        font-size: 42px;
        letter-spacing: -.04em;
    }

    body.portal-page:not(.portal-login-page) .price-main span {
        padding-bottom: 5px;
        font-size: 13px;
    }

    body.portal-page:not(.portal-login-page) .plan-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin: 14px 0;
    }

    body.portal-page:not(.portal-login-page) .plan-meta span {
        display: block;
        min-height: 64px;
        padding: 9px 7px;
        border-radius: 12px;
        color: #77809a;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
    }

    body.portal-page:not(.portal-login-page) .plan-meta b {
        display: block;
        margin-top: 7px;
        color: #141b34;
        font-size: 13px;
        line-height: 1.25;
        word-break: keep-all;
    }

    body.portal-page:not(.portal-login-page) .rights-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        margin-bottom: 16px;
    }

    body.portal-page:not(.portal-login-page) .rights-list li {
        min-width: 0;
        padding-left: 16px;
        color: #36425c;
        font-size: 13px;
        line-height: 1.35;
    }

    body.portal-page:not(.portal-login-page) .rights-list li::before {
        top: .42em;
        width: 7px;
        height: 7px;
    }

    body.portal-page:not(.portal-login-page) .rights-list li:nth-child(n+5) {
        display: none;
    }

    body.portal-page:not(.portal-login-page) .price-card .portal-btn {
        min-height: 48px;
        border-radius: 13px;
        font-size: 14px;
    }
}

body.portal-page:not(.portal-login-page) .value-card:hover,
body.portal-page:not(.portal-login-page) .feature-card:hover,
body.portal-page:not(.portal-login-page) .process-step:hover,
body.portal-page:not(.portal-login-page) .price-card:hover,
body.portal-page:not(.portal-login-page) .quote-card:hover,
body.portal-page:not(.portal-login-page) .faq-item:hover {
    transform: translateY(-6px);
    border-color: rgba(112, 86, 246, .34);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--portal-refine-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.portal-page:not(.portal-login-page) .value-card:hover::after,
body.portal-page:not(.portal-login-page) .feature-card:hover::after,
body.portal-page:not(.portal-login-page) .process-step:hover::after,
body.portal-page:not(.portal-login-page) .price-card:hover::after,
body.portal-page:not(.portal-login-page) .quote-card:hover::after,
body.portal-page:not(.portal-login-page) .faq-item:hover::after {
    opacity: 1;
}

body.portal-page:not(.portal-login-page) .value-card:hover .card-icon,
body.portal-page:not(.portal-login-page) .quote-card:hover .quote-avatar {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 30px rgba(93, 71, 230, .2);
    filter: saturate(1.08);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:hover::before {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 30px rgba(103, 73, 231, .24);
}

@media (hover: none), (pointer: coarse) {
    body.portal-page:not(.portal-login-page) .value-card:hover,
    body.portal-page:not(.portal-login-page) .feature-card:hover,
    body.portal-page:not(.portal-login-page) .process-step:hover,
    body.portal-page:not(.portal-login-page) .price-card:hover,
    body.portal-page:not(.portal-login-page) .quote-card:hover,
    body.portal-page:not(.portal-login-page) .faq-item:hover {
        transform: none;
        border-color: var(--portal-refine-border);
        background: var(--portal-refine-card);
        box-shadow: var(--portal-refine-shadow), inset 0 1px 0 rgba(255, 255, 255, .78);
    }

    body.portal-page:not(.portal-login-page) .value-card:hover::after,
    body.portal-page:not(.portal-login-page) .feature-card:hover::after,
    body.portal-page:not(.portal-login-page) .process-step:hover::after,
    body.portal-page:not(.portal-login-page) .price-card:hover::after,
    body.portal-page:not(.portal-login-page) .quote-card:hover::after,
    body.portal-page:not(.portal-login-page) .faq-item:hover::after {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-page:not(.portal-login-page) *,
    body.portal-page:not(.portal-login-page) *::before,
    body.portal-page:not(.portal-login-page) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Semantic icon refinement for hero stats and testimonials */
body.portal-page:not(.portal-login-page) .portal-hero-stat {
    padding-top: 92px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat::before,
body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
    display: none;
}

body.portal-page:not(.portal-login-page) .hero-stat-icon {
    position: absolute;
    top: 24px;
    left: 26px;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .45), transparent 28%),
        linear-gradient(135deg, #8065ff 0%, #5d43ed 100%);
    box-shadow: 0 16px 32px rgba(101, 73, 231, .25), inset 0 1px 0 rgba(255, 255, 255, .34);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
    color: #fff;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(2) .hero-stat-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 28%),
        linear-gradient(135deg, #66d88d 0%, #35b96f 100%);
    box-shadow: 0 16px 32px rgba(55, 185, 115, .22), inset 0 1px 0 rgba(255, 255, 255, .34);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:nth-child(3) .hero-stat-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .45), transparent 28%),
        linear-gradient(135deg, #7f68ff 0%, #6047ee 100%);
}

body.portal-page:not(.portal-login-page) .hero-stat-icon svg,
body.portal-page:not(.portal-login-page) .quote-avatar svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

body.portal-page:not(.portal-login-page) .quote-avatar {
    color: #fff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #76d996 0%, #56c87d 100%);
}

body.portal-page:not(.portal-login-page) .quote-card:nth-child(2) .quote-avatar {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #7b65ff 0%, #5b44ea 100%);
    box-shadow: 0 10px 24px rgba(91, 68, 234, .2);
}

body.portal-page:not(.portal-login-page) .quote-card:nth-child(3) .quote-avatar {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #5fc7ef 0%, #4777ec 100%);
    box-shadow: 0 10px 24px rgba(71, 119, 236, .2);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat:hover .hero-stat-icon,
body.portal-page:not(.portal-login-page) .quote-card:hover .quote-avatar {
    transform: translateY(-3px) scale(1.04);
    filter: saturate(1.08);
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        padding-top: 46px;
    }

    body.portal-page:not(.portal-login-page) .hero-stat-icon {
        top: 11px;
        left: 50%;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        transform: translateX(-50%);
    }

    body.portal-page:not(.portal-login-page) .hero-stat-icon svg {
        width: 17px;
        height: 17px;
        stroke-width: 2;
    }
}

/* Auth modal icon and optional email refinement */
.portal-auth-modal .auth-tab,
.portal-auth-modal .portal-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.portal-auth-modal .auth-tab-icon,
.portal-auth-modal .auth-submit-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.portal-auth-modal .auth-tab-icon {
    width: 20px;
    height: 20px;
}

.portal-auth-modal .auth-submit-icon {
    width: 22px;
    height: 22px;
}

.portal-auth-modal .auth-tab-icon svg,
.portal-auth-modal .auth-submit-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.portal-auth-modal .auth-tab .auth-tab-icon {
    color: #8a84ad;
}

.portal-auth-modal .auth-tab.active .auth-tab-icon {
    color: #6d5efc;
}

.portal-auth-modal .portal-login-submit .auth-submit-icon {
    color: rgba(255, 255, 255, .92);
}

.portal-auth-modal .portal-field span em,
.portal-auth-modal .form-row label em {
    margin-left: 6px;
    color: #9aa2b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.portal-auth-modal .portal-field-email input {
    border-color: #e2e5f3;
    background:
        linear-gradient(#f6f7fc, #f6f7fc) padding-box,
        linear-gradient(135deg, rgba(109, 94, 252, .16), rgba(72, 198, 239, .12)) border-box;
}

.portal-auth-modal .portal-field-email input:focus {
    border-color: #bfb8ff;
    box-shadow: 0 0 0 4px rgba(109, 94, 252, .1);
}

.portal-auth-modal .portal-field-email::after {
    display: block;
    margin-top: 6px;
    color: #9aa2b8;
    font-size: 12px;
    line-height: 1.45;
    content: "邮箱为必填项，可用于登录、注册验证和找回密码";
}

.portal-auth-modal .portal-register-email em {
    color: #ef5f74;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.portal-auth-modal .portal-email-optional::after {
    content: "选填，填写后可用于找回密码和接收通知";
}

.portal-auth-modal .portal-forgot-form .portal-field-email::after {
    content: "只有与账号绑定邮箱一致，才能接收验证码";
}

.portal-auth-modal .portal-code-wrap {
    display: grid;
    grid-template-columns: 1fr 122px;
    gap: 10px;
    width: 100%;
}

.portal-auth-modal .portal-code-wrap input {
    min-width: 0;
}

.portal-auth-modal .portal-code-send {
    height: 52px;
    border: 1px solid rgba(109, 94, 252, .18);
    border-radius: 14px;
    color: #6d5efc;
    background: rgba(109, 94, 252, .08);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.portal-auth-modal .portal-code-send:hover {
    border-color: rgba(109, 94, 252, .34);
    background: rgba(109, 94, 252, .14);
    transform: translateY(-1px);
}

.portal-auth-modal .portal-code-send:disabled {
    cursor: not-allowed;
    opacity: .68;
    transform: none;
}

.portal-auth-modal .portal-login-options a,
.portal-auth-modal .auth-tip a {
    color: #6d5efc;
    font-weight: 900;
}

.portal-auth-modal .portal-login-options a:hover,
.portal-auth-modal .auth-tip a:hover {
    color: #5847df;
}

.portal-auth-modal .portal-modal-login-card .portal-field {
    margin-bottom: 12px;
}

.portal-auth-modal .portal-modal-login-card .portal-login-submit {
    margin-top: 2px;
}

@media (max-height: 820px) and (min-width: 981px) {
    .portal-auth-modal .portal-modal-login-card .portal-field {
        margin-bottom: 9px;
    }

    .portal-auth-modal .portal-modal-login-card .portal-field input,
    .portal-auth-modal .portal-modal-login-card .portal-password-wrap input {
        height: 46px;
    }

    .portal-auth-modal .portal-field-email::after {
        display: none;
    }
}

@media (max-width: 430px) {
    .pricing-period-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
        padding: 7px;
    }

    .pricing-period-switch button {
        min-height: 42px;
        font-size: 13px;
    }

    .portal-auth-modal .portal-code-wrap {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .portal-auth-modal .portal-code-send {
        width: 100%;
    }
}

/* Keep the homepage dashboard animation inside the visible hero area. */
body.portal-page:not(.portal-login-page) .portal-hero {
    overflow: hidden;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    right: max(28px, calc((100vw - 1180px) / 2 + 12px));
    width: min(620px, 45vw);
    min-width: 500px;
    max-width: calc(100vw - 56px);
    overflow: visible;
}

body.portal-page:not(.portal-login-page) .portal-dashboard {
    max-width: 100%;
}

/* Restore the tighter, hand-tuned hero proportions for medium desktop widths;
   the generic overflow-safety rule above otherwise pushes the visual too far
   right and shrinks it out of proportion with the copy column. */
@media (max-width: 1600px) and (min-width: 1181px) {
    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 32px;
        width: min(680px, 47vw);
        min-width: 460px;
        max-width: calc(100vw - 64px);
    }
}

@media (max-width: 1180px) and (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 24px;
        width: min(560px, 44vw);
        min-width: 440px;
        max-width: calc(100vw - 48px);
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-visual {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 640px);
        min-width: 0;
        max-width: 100%;
        margin: 20px auto 0;
    }
}

/* ============================================================
   Homepage premium polish pass
   ============================================================ */

body.portal-page:not(.portal-login-page) {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.portal-page:not(.portal-login-page) ::selection {
    color: #1d1650;
    background: rgba(139, 109, 255, .26);
}

body.portal-page:not(.portal-login-page) a:focus-visible,
body.portal-page:not(.portal-login-page) button:focus-visible {
    outline: 3px solid rgba(112, 86, 246, .45);
    outline-offset: 2px;
    border-radius: 10px;
}

/* ---------- Topbar ---------- */
body.portal-page:not(.portal-login-page) .portal-topbar {
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body.portal-page:not(.portal-login-page) .portal-topbar.pv-scrolled {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(125, 109, 220, .18);
    box-shadow: 0 18px 46px rgba(79, 69, 152, .12);
    backdrop-filter: blur(24px) saturate(1.24);
}

/* ---------- Hero entrance choreography ---------- */
@keyframes pvFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pvFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    animation: pvFadeUp .65s cubic-bezier(.22, .9, .3, 1) .05s both;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    animation: pvFadeUp .7s cubic-bezier(.22, .9, .3, 1) .14s both;
}

body.portal-page:not(.portal-login-page) .portal-hero-copy > p {
    animation: pvFadeUp .7s cubic-bezier(.22, .9, .3, 1) .24s both;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    animation: pvFadeUp .7s cubic-bezier(.22, .9, .3, 1) .34s both;
}

body.portal-page:not(.portal-login-page) .portal-hero-stats {
    animation: pvFadeUp .7s cubic-bezier(.22, .9, .3, 1) .44s both;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    animation: pvFadeUp .9s cubic-bezier(.22, .9, .3, 1) .3s both;
}

@keyframes pvFloat {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10px);
    }
}

@media (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-dashboard {
        animation: pvFloat 6.5s ease-in-out 1.4s infinite alternate;
    }
}

@keyframes pvPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(60, 212, 138, .4);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(60, 212, 138, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(60, 212, 138, 0);
    }
}

body.portal-page:not(.portal-login-page) .portal-eyebrow::before,
body.portal-page:not(.portal-login-page) .dash-pill::before {
    animation: pvPulse 2.4s ease-out 1.2s infinite;
}

@keyframes pvHintBob {
    0%, 100% {
        translate: 0 0;
        opacity: .75;
    }
    50% {
        translate: 0 6px;
        opacity: 1;
    }
}

body.portal-page:not(.portal-login-page) .portal-next-hint {
    animation: pvHintBob 2.4s ease-in-out infinite;
}

/* ---------- Dashboard chart animations ---------- */
@keyframes pvBarGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

body.portal-page:not(.portal-login-page) .dash-bars i {
    transform-origin: bottom;
    animation: pvBarGrow .8s cubic-bezier(.22, .9, .35, 1) both;
}

body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(1) { animation-delay: .55s; }
body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(2) { animation-delay: .64s; }
body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(3) { animation-delay: .73s; }
body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(4) { animation-delay: .82s; }
body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(5) { animation-delay: .91s; }
body.portal-page:not(.portal-login-page) .dash-bars i:nth-child(6) { animation-delay: 1s; }

@keyframes pvDraw {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

body.portal-page:not(.portal-login-page) .dash-line path[stroke][pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pvDraw 1.5s ease .75s both;
}

body.portal-page:not(.portal-login-page) .dash-line path[fill^="url"] {
    animation: pvFadeIn .9s ease 1.7s both;
}

body.portal-page:not(.portal-login-page) .dash-line g[fill] {
    animation: pvFadeIn .7s ease 1.1s both;
}

body.portal-page:not(.portal-login-page) .dash-card strong,
body.portal-page:not(.portal-login-page) .portal-hero-stat strong,
body.portal-page:not(.portal-login-page) .price-main strong {
    font-variant-numeric: tabular-nums;
}

/* ---------- Section rhythm & headers ---------- */
body.portal-page:not(.portal-login-page) .portal-section {
    padding: 96px 0;
    background:
        radial-gradient(circle at 12% 8%, rgba(122, 91, 246, .05), transparent 32%),
        linear-gradient(180deg, #fbfbff 0%, #f6f7ff 100%);
}

body.portal-page:not(.portal-login-page) .portal-section.alt {
    background:
        radial-gradient(circle at 88% 12%, rgba(122, 91, 246, .06), transparent 30%),
        #fff;
}

body.portal-page:not(.portal-login-page) .section-head {
    margin-bottom: 44px;
}

body.portal-page:not(.portal-login-page) .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0 0 16px;
    padding: 0 15px;
    border: 1px solid rgba(116, 93, 224, .18);
    border-radius: 999px;
    color: #6a4ff0;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 20px rgba(84, 72, 170, .07);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

body.portal-page:not(.portal-login-page) .section-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b6dff, #5d3fe8);
    content: "";
}

body.portal-page:not(.portal-login-page) .section-title {
    letter-spacing: -.02em;
}

body.portal-page:not(.portal-login-page) .section-desc {
    font-size: 16px;
}

/* ---------- Value cards ---------- */
body.portal-page:not(.portal-login-page) .value-card {
    min-height: 196px;
    border-radius: 20px;
    padding: 26px 22px;
}

body.portal-page:not(.portal-login-page) .card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 15px;
    color: #fff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #8b6dff 0%, #5d3fe8 100%);
    box-shadow: 0 14px 28px rgba(103, 73, 231, .24), inset 0 1px 0 rgba(255, 255, 255, .32);
}

body.portal-page:not(.portal-login-page) .card-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(2) .card-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #58d68d 0%, #2eb26b 100%);
    box-shadow: 0 14px 28px rgba(52, 183, 113, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
}

body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(3) .card-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #64b5ff 0%, #3c78f0 100%);
    box-shadow: 0 14px 28px rgba(64, 124, 238, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
}

body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(4) .card-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .45), transparent 30%),
        linear-gradient(135deg, #ffc966 0%, #f59a2b 100%);
    box-shadow: 0 14px 28px rgba(243, 158, 52, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
}

body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(5) .card-icon {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #f883b8 0%, #e2508e 100%);
    box-shadow: 0 14px 28px rgba(226, 80, 142, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
}

body.portal-page:not(.portal-login-page) .value-card h3 {
    font-size: 17px;
    letter-spacing: -.01em;
}

body.portal-page:not(.portal-login-page) .value-card p {
    font-size: 13.5px;
    line-height: 1.7;
}

/* ---------- Feature cards ---------- */
body.portal-page:not(.portal-login-page) .feature-card {
    min-height: 210px;
    border-radius: 20px;
    padding: 26px 24px;
}

body.portal-page:not(.portal-login-page) .feature-card::before {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #8b6dff, #5d3fe8);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .24s ease, transform .28s ease;
    content: "";
}

body.portal-page:not(.portal-login-page) .feature-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

body.portal-page:not(.portal-login-page) .feature-card .meta {
    min-height: 28px;
    padding: 0 12px;
    color: #6a4ff0;
    background: rgba(112, 86, 246, .1);
    letter-spacing: .02em;
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(2) .meta {
    color: #1e7fd9;
    background: rgba(61, 145, 235, .12);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(3) .meta {
    color: #1d9e60;
    background: rgba(48, 190, 121, .13);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(4) .meta {
    color: #c07a12;
    background: rgba(245, 166, 49, .15);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(5) .meta {
    color: #cc3f7f;
    background: rgba(226, 80, 142, .12);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(6) .meta {
    color: #0f8f8f;
    background: rgba(32, 178, 170, .13);
}

body.portal-page:not(.portal-login-page) .feature-card h3 {
    font-size: 18px;
    letter-spacing: -.01em;
}

/* ---------- Process steps ---------- */
body.portal-page:not(.portal-login-page) .process-step {
    border-radius: 20px;
    padding: 26px 22px;
}

body.portal-page:not(.portal-login-page) .process-step strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .4), transparent 30%),
        linear-gradient(135deg, #8b6dff 0%, #5d3fe8 100%);
    box-shadow: 0 12px 24px rgba(103, 73, 231, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
    font-size: 17px;
    font-weight: 900;
    font-family: inherit;
    letter-spacing: 0;
}

body.portal-page:not(.portal-login-page) .process-step h3 {
    margin: 18px 0 8px;
    font-size: 17px;
}

body.portal-page:not(.portal-login-page) .process-step p {
    font-size: 13.5px;
    line-height: 1.68;
}

/* ---------- Pricing ---------- */
body.portal-page:not(.portal-login-page) .price-card {
    border-radius: 22px;
    padding: 30px 28px;
}

body.portal-page:not(.portal-login-page) .price-card h3 {
    font-size: 21px;
    letter-spacing: -.01em;
}

body.portal-page:not(.portal-login-page) .price-main {
    border-bottom-color: rgba(119, 105, 218, .14);
}

body.portal-page:not(.portal-login-page) .price-main strong {
    color: transparent;
    background: linear-gradient(120deg, #181d3f 20%, #5b46d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -.03em;
}

body.portal-page:not(.portal-login-page) .price-card.popular::before {
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #8b6dff, #5d3fe8 55%, #8ca2ff);
    content: "";
}

body.portal-page:not(.portal-login-page) .plan-meta span {
    border-radius: 12px;
}

body.portal-page:not(.portal-login-page) .rights-list {
    gap: 11px;
}

body.portal-page:not(.portal-login-page) .rights-list li {
    padding-left: 28px;
    color: #38415e;
}

body.portal-page:not(.portal-login-page) .rights-list li::before {
    top: .18em;
    width: 18px;
    height: 18px;
    border-radius: 7px;
    background: rgba(112, 86, 246, .12);
}

body.portal-page:not(.portal-login-page) .rights-list li::after {
    position: absolute;
    left: 4px;
    top: calc(.18em + 4px);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #7a5bf6, #5334e6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-btn.blue {
    background: linear-gradient(180deg, #7e65ff 0%, #6249f0 100%);
    box-shadow: 0 14px 30px rgba(104, 76, 241, .28);
}

body.portal-page:not(.portal-login-page) .portal-btn.blue:hover {
    box-shadow: 0 18px 38px rgba(101, 75, 239, .34);
}

body.portal-page:not(.portal-login-page) .price-card .portal-btn {
    min-height: 52px;
    border-radius: 14px;
}

/* ---------- Quotes ---------- */
body.portal-page:not(.portal-login-page) .quote-card {
    border-radius: 20px;
}

body.portal-page:not(.portal-login-page) .quote-card::before {
    position: absolute;
    top: 6px;
    right: 22px;
    color: rgba(112, 86, 246, .14);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 84px;
    line-height: 1;
    pointer-events: none;
    content: "\201C";
}

/* ---------- FAQ ---------- */
body.portal-page:not(.portal-login-page) .faq-item {
    border-radius: 18px;
}

body.portal-page:not(.portal-login-page) .faq-list {
    gap: 12px;
}

body.portal-page:not(.portal-login-page) .faq-q {
    min-height: 68px;
    padding: 0 24px;
    gap: 16px;
}

body.portal-page:not(.portal-login-page) .faq-q::after {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-color: rgba(112, 86, 246, .22);
    border-radius: 50%;
    color: #6a4ff0;
    background: rgba(112, 86, 246, .06);
    font-size: 17px;
    font-weight: 700;
    line-height: 28px;
}

body.portal-page:not(.portal-login-page) .faq-item.open {
    border-color: rgba(112, 86, 246, .34);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 54px rgba(83, 68, 170, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.portal-page:not(.portal-login-page) .faq-item.open .faq-q {
    color: #4c34d8;
}

body.portal-page:not(.portal-login-page) .faq-item.open .faq-q::after {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #8b6dff, #5d3fe8);
    box-shadow: 0 8px 18px rgba(103, 73, 231, .28);
}

@keyframes pvFaqOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.portal-page:not(.portal-login-page) .faq-item.open .faq-a {
    animation: pvFaqOpen .28s ease both;
}

body.portal-page:not(.portal-login-page) .faq-a {
    padding: 0 24px 22px;
    max-width: 860px;
}

/* ---------- Footer ---------- */
body.portal-page:not(.portal-login-page) .portal-footer {
    position: relative;
    padding: 64px 0 44px;
    background:
        radial-gradient(circle at 16% -10%, rgba(112, 86, 246, .3), transparent 38%),
        radial-gradient(circle at 88% 110%, rgba(61, 92, 236, .16), transparent 34%),
        #080d1f;
}

body.portal-page:not(.portal-login-page) .portal-footer::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 6%, rgba(139, 109, 255, .55), transparent 94%);
    content: "";
}

body.portal-page:not(.portal-login-page) .footer-grid h3 {
    font-size: 20px;
    letter-spacing: -.01em;
}

body.portal-page:not(.portal-login-page) .footer-grid h4 {
    margin-bottom: 16px;
    color: rgba(238, 246, 255, .92);
    font-size: 15px;
}

body.portal-page:not(.portal-login-page) .footer-grid a {
    width: fit-content;
    transition: color .2s ease, transform .2s ease;
}

body.portal-page:not(.portal-login-page) .footer-grid a:hover {
    color: #b9a8ff;
    transform: translateX(3px);
}

/* ---------- Scroll reveal ---------- */
body.portal-page:not(.portal-login-page) .pv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s ease var(--pvd, 0ms),
        transform .7s cubic-bezier(.22, .9, .3, 1) var(--pvd, 0ms);
    will-change: opacity, transform;
}

body.portal-page:not(.portal-login-page) .pv-reveal.pv-in {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-section {
        padding: 60px 0;
    }

    body.portal-page:not(.portal-login-page) .section-head {
        margin-bottom: 26px;
    }

    body.portal-page:not(.portal-login-page) .section-kicker {
        min-height: 28px;
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .price-card {
        padding: 22px 20px;
    }

    body.portal-page:not(.portal-login-page) .quote-card::before {
        font-size: 64px;
    }
}

/* Desktop visual scale pass: make the homepage feel about 10% lighter. */
@media (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-nav,
    body.portal-page:not(.portal-login-page) .portal-hero-inner,
    body.portal-page:not(.portal-login-page) .portal-section-inner {
        width: min(1062px, calc(100% - 72px));
    }

    body.portal-page:not(.portal-login-page) .portal-nav {
        min-height: 64px;
        gap: 24px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        min-width: 151px;
        gap: 9px;
        font-size: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: 28px;
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions {
        gap: 11px;
    }

    body.portal-page:not(.portal-login-page) .portal-btn {
        min-height: 49px;
        padding: 0 31px;
        border-radius: 13px;
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 684px;
        padding: 126px 0 50px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: min(594px, 100%);
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow {
        min-height: 35px;
        padding: 0 18px;
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        margin: 30px 0 24px;
        font-size: clamp(50px, 3.36vw, 68px);
        line-height: 1.07;
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        width: min(660px, 100%);
        font-size: 21px;
        line-height: 1.62;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        gap: 14px;
        margin-top: 27px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 61px;
        padding: 0 42px;
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
        min-width: 294px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
        min-width: 150px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: min(864px, 100%);
        gap: 27px;
        margin-top: 26px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 135px;
        padding: 68px 17px 15px;
        border-radius: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
        top: 39px;
        left: 47px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 54px;
        left: 62px;
        width: 20px;
        height: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 25px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        top: 174px;
        right: max(32px, calc((100vw - 1062px) / 2 + 6px));
        width: min(576px, 43vw);
        min-width: 450px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 486px;
        border-radius: 23px;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 68px;
        padding: 0 23px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 23px;
    }

    body.portal-page:not(.portal-login-page) .dash-pill {
        padding: 8px 14px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 193px 1fr;
        height: calc(100% - 68px);
        gap: 13px;
        padding: 0 23px 23px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        border-radius: 16px;
        padding: 19px 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-card small {
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        margin-top: 12px;
        font-size: 29px;
    }

    body.portal-page:not(.portal-login-page) .dash-card em {
        margin-top: 9px;
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 52px;
        gap: 16px;
        margin-top: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars i {
        min-width: 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        margin-top: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 75px;
        padding: 15px 12px;
        font-size: 13px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 110px;
        margin-top: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-section {
        padding: 77px 0;
    }

    body.portal-page:not(.portal-login-page) .section-title {
        font-size: clamp(27px, 3.6vw, 43px);
    }
}

/* Keep the wide-screen composition while applying the 10% desktop scale. */
@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(1888px, calc(100% - 160px));
        min-height: 86px;
        gap: 72px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        min-width: 207px;
        gap: 13px;
        font-size: 27px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand::before {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand::after {
        top: 16px;
        left: 16px;
        width: 21px;
        height: 21px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: 50px;
        font-size: 19px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions {
        gap: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
        min-height: 65px;
        padding: 0 40px;
        border-radius: 15px;
        font-size: 21px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 900px;
        padding: 0;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        top: 99px;
        left: max(72px, calc((100vw - 1699px) / 2));
        width: 738px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy,
    body.portal-page:not(.portal-login-page) .portal-hero p {
        width: 738px;
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow {
        min-height: 40px;
        padding: 0 20px;
        font-size: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow::before {
        width: 10px;
        height: 10px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        width: 720px;
        margin: 31px 0 25px;
        font-size: clamp(56px, 3.55vw, 73px);
        line-height: 1.12;
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 22px;
        line-height: 1.68;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        gap: 18px;
        margin-top: 25px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 63px;
        padding: 0 31px;
        border-radius: 11px;
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
        min-width: 292px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary::after {
        width: 25px;
        height: 25px;
        margin-left: 11px;
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
        min-width: 142px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 724px;
        gap: 18px;
        margin-top: 22px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 178px;
        padding: 90px 23px 23px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
        top: 22px;
        left: 23px;
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 35px;
        left: 37px;
        width: 21px;
        height: 21px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 35px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        top: 173px;
        right: max(108px, calc((100vw - 1699px) / 2 + 36px));
        width: min(868px, 42.4vw);
        min-width: 774px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 594px;
        border-radius: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 83px;
        padding: 0 27px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 31px;
    }

    body.portal-page:not(.portal-login-page) .dash-pill {
        padding: 11px 18px;
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 266px 1fr;
        height: calc(100% - 83px);
        gap: 16px;
        padding: 0 27px 27px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        padding: 24px 22px;
    }

    body.portal-page:not(.portal-login-page) .dash-card.wide {
        padding: 22px;
    }

    body.portal-page:not(.portal-login-page) .dash-card small {
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        margin-top: 20px;
        font-size: 43px;
    }

    body.portal-page:not(.portal-login-page) .dash-card em {
        margin-top: 14px;
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 79px;
        gap: 34px;
        margin-top: 25px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars i {
        min-width: 29px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        gap: 11px;
        margin-top: 23px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 70px;
        padding: 12px 9px;
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 119px;
        margin-top: 5px;
    }

    body.portal-page:not(.portal-login-page) .portal-next-hint {
        bottom: 15px;
        font-size: 15px;
    }
}

/* PC laptop/standard desktop fix: keep the hero controls on one row. */
@media (min-width: 981px) and (max-width: 1600px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(1400px, calc(100% - 64px));
        min-height: 82px;
        gap: 36px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: 30px;
        font-size: 17px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
        min-height: 58px;
        padding: 0 30px;
        font-size: 19px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 900px;
        overflow: hidden;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        top: 102px;
        left: max(32px, calc((100vw - 1400px) / 2 + 32px));
        width: clamp(640px, 52vw, 745px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy,
    body.portal-page:not(.portal-login-page) .portal-hero h1,
    body.portal-page:not(.portal-login-page) .portal-hero p,
    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-eyebrow {
        min-height: 38px;
        padding: 0 18px;
        font-size: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        margin: 28px 0 22px;
        font-size: clamp(50px, 4.2vw, 64px);
        line-height: 1.1;
    }

    body.portal-page:not(.portal-login-page) .portal-hero p {
        font-size: 19px;
        line-height: 1.62;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        flex-wrap: nowrap;
        gap: 14px;
        margin-top: 24px;
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 58px;
        padding: 0 24px;
        border-radius: 12px;
        font-size: 18px;
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
        flex: 0 0 292px;
        min-width: 0;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary::after {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        font-size: 19px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
        flex: 0 0 142px;
        min-width: 0;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        gap: 16px;
        margin-top: 24px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 152px;
        padding: 74px 18px 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::before {
        top: 20px;
        left: 20px;
        width: 46px;
        height: 46px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat::after {
        top: 33px;
        left: 33px;
        width: 20px;
        height: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        font-size: 29px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat span {
        font-size: 13px;
        line-height: 1.45;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        top: 170px;
        right: 28px;
        width: min(600px, 43vw);
        min-width: 430px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 520px;
    }
}

@media (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        flex-wrap: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-section-inner {
        width: min(1888px, calc(100% - 96px));
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        padding-top: 96px;
    }

    body.portal-page:not(.portal-login-page) .hero-stat-icon {
        top: 24px;
        left: 28px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body.portal-page:not(.portal-login-page) .hero-stat-icon svg {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 981px) and (max-width: 1600px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        padding-top: 88px;
    }

    body.portal-page:not(.portal-login-page) .hero-stat-icon {
        top: 20px;
        left: 20px;
        width: 46px;
        height: 46px;
    }
}

@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        padding-top: 100px;
    }
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth] {
    gap: 10px;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth]::before {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: currentColor;
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="login"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="register"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="login"]::before {
        display: none;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="register"]::before {
        width: 18px;
        height: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="register"] {
        gap: 7px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        right: 122px;
    }
}

@media (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .dash-card {
        overflow: hidden;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        align-items: stretch;
        gap: 9px;
        margin-top: 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 58px;
        padding: 9px 8px;
        font-size: 13px;
        line-height: 1.28;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        margin-bottom: 3px;
        font-size: 18px;
        line-height: 1.12;
    }
}

@media (min-width: 981px) and (max-width: 1600px) {
    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 24px;
        width: min(540px, 40vw);
        min-width: 400px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 500px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 206px 1fr;
    }
}

@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-visual {
        right: max(48px, calc((100vw - 1888px) / 2 + 18px));
        width: min(840px, 41vw);
        min-width: 760px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 278px 1fr;
    }
}

/* Registration welcome */
.portal-welcome-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, #f7fbff 0%, #f8fafc 42%, #ffffff 100%);
}

.portal-welcome-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 56px;
}

.welcome-hero {
    position: relative;
    overflow: hidden;
    padding: 44px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(239, 246, 255, .96) 52%, rgba(240, 253, 244, .92) 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
}

.welcome-hero::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: 28px;
    width: 240px;
    height: 130px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(22, 163, 74, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .8;
}

.welcome-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 6px 12px 6px 6px;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 999px;
    background: #ffffff;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
}

.welcome-status span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 26px;
    border-radius: 999px;
    background: #dcfce7;
}

.welcome-status b {
    color: #1f2937;
}

.welcome-hero h1 {
    position: relative;
    z-index: 1;
    margin: 22px 0 14px;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
}

.welcome-hero p {
    position: relative;
    z-index: 1;
    max-width: 690px;
    margin: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.85;
}

.welcome-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.welcome-next {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.welcome-step {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 238px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.welcome-step::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 64px;
    height: 1px;
    background: #e2e8f0;
}

.welcome-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 900;
}

.welcome-step:nth-child(3) span {
    background: #ecfdf5;
    color: #15803d;
}

.welcome-step:nth-child(4) span {
    background: #fff7ed;
    color: #c2410c;
}

.welcome-step h2 {
    margin: 28px 0 10px;
    color: #111827;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

.welcome-step p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.welcome-step a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-top: auto;
    border-radius: 8px;
    background: #f8fafc;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 900;
}

.welcome-step.is-primary {
    border-color: rgba(37, 99, 235, .22);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .12);
}

.welcome-step.is-primary a {
    background: #2563eb;
    color: #ffffff;
}

.welcome-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.welcome-summary div {
    min-height: 92px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.welcome-summary span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.welcome-summary b {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
}

@media (max-width: 980px) {
    .portal-welcome-shell {
        width: min(100% - 24px, 720px);
        padding-top: 18px;
    }

    .welcome-hero {
        padding: 28px 22px;
    }

    .welcome-hero::after {
        display: none;
    }

    .welcome-hero h1 {
        font-size: 32px;
    }

    .welcome-hero p {
        font-size: 15px;
        line-height: 1.75;
    }

    .welcome-actions .portal-btn {
        width: 100%;
    }

    .welcome-next,
    .welcome-summary {
        grid-template-columns: 1fr;
    }

    .welcome-step {
        min-height: 216px;
    }
}

/* Homepage hero stat cards: add a little breathing room below the CTA row. */
@media (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        margin-top: 40px;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        margin-top: 30px;
    }
}

/* Pricing overview: denser cards so visitors can compare plans at a glance. */
body.portal-page:not(.portal-login-page) #pricing {
    padding-top: 72px;
    padding-bottom: 78px;
}

body.portal-page:not(.portal-login-page) #pricing .section-head {
    margin-bottom: 22px;
}

body.portal-page:not(.portal-login-page) .pricing-period-switch {
    max-width: 620px;
    margin-bottom: 18px;
    padding: 6px;
}

body.portal-page:not(.portal-login-page) .pricing-period-switch button {
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
}

body.portal-page:not(.portal-login-page) .pricing-grid {
    gap: 18px;
}

body.portal-page:not(.portal-login-page) .price-card {
    min-height: 0;
    border-radius: 16px;
    padding: 22px 24px;
}

body.portal-page:not(.portal-login-page) .price-card h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 84px);
    min-height: 34px;
    width: max-content;
    padding: 6px 13px;
    border: 1px solid rgba(34, 197, 94, .24);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(220, 252, 231, .92));
    color: #15803d;
    font-size: 22px;
    line-height: 1.24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 10px 22px rgba(22, 163, 74, .1);
}

body.portal-page:not(.portal-login-page) .price-card h3::before {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
    content: "";
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(1) h3 {
    border-color: rgba(34, 197, 94, .24);
    background: linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(220, 252, 231, .92));
    color: #15803d;
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(1) h3::before {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(2) h3 {
    border-color: rgba(112, 86, 246, .34);
    background: linear-gradient(135deg, #735cf7, #5c45e8);
    color: #fff;
    box-shadow: 0 12px 28px rgba(104, 79, 236, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(2) h3::before {
    background: #c7f9d4;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(3) h3 {
    border-color: rgba(245, 158, 11, .26);
    background: linear-gradient(135deg, #fff7da, #ffe5a3);
    color: #8a5a00;
    box-shadow: 0 12px 26px rgba(194, 123, 18, .13), inset 0 1px 0 rgba(255, 255, 255, .78);
}

body.portal-page:not(.portal-login-page) .pricing-grid .price-card:not(.portal-empty-card):nth-of-type(3) h3::before {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .13);
}

@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .price-card h3 {
        max-width: calc(100% - 78px);
        min-height: 30px;
        padding: 5px 10px;
        font-size: 18px;
    }
}

body.portal-page:not(.portal-login-page) .price-badge {
    top: 18px;
    right: 18px;
    padding: 5px 9px;
    color: #443200;
    background: linear-gradient(135deg, #ffe58a, #ffc85e);
    box-shadow: 0 10px 24px rgba(246, 190, 78, .28);
    font-size: 12px;
}

body.portal-page:not(.portal-login-page) .price-desc {
    min-height: 0;
    margin: 8px 0 18px;
    font-size: 15px;
    line-height: 1.45;
}

body.portal-page:not(.portal-login-page) .price-main {
    padding-bottom: 14px;
}

body.portal-page:not(.portal-login-page) .price-main strong {
    font-size: 40px;
    line-height: .96;
}

body.portal-page:not(.portal-login-page) .price-main span {
    font-size: 13px;
}

body.portal-page:not(.portal-login-page) .plan-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 14px 0;
}

body.portal-page:not(.portal-login-page) .plan-meta span {
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 10px;
    gap: 8px;
    font-size: 12px;
    line-height: 1.25;
}

body.portal-page:not(.portal-login-page) .plan-meta b {
    font-size: 12px;
    white-space: nowrap;
}

body.portal-page:not(.portal-login-page) .rights-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    margin-bottom: 16px;
}

body.portal-page:not(.portal-login-page) .rights-list li {
    min-width: 0;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.32;
}

body.portal-page:not(.portal-login-page) .rights-list li::before {
    top: .08em;
    width: 15px;
    height: 15px;
    border-radius: 6px;
}

body.portal-page:not(.portal-login-page) .rights-list li::after {
    left: 3px;
    top: calc(.08em + 3px);
    width: 9px;
    height: 9px;
}

body.portal-page:not(.portal-login-page) .price-card .portal-btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 14px;
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Central template showcase */
body.portal-page:not(.portal-login-page) .portal-template-section {
    position: relative;
    overflow: hidden;
    padding-top: 78px;
    padding-bottom: 84px;
    background:
        linear-gradient(135deg, rgba(245, 249, 255, .96) 0%, rgba(255, 255, 255, 1) 44%, rgba(239, 253, 247, .92) 100%);
}

body.portal-page:not(.portal-login-page) .portal-template-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(48, 99, 255, .08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(48, 99, 255, .07) 0 1px, transparent 1px 100%);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
    content: "";
}

body.portal-page:not(.portal-login-page) .template-showcase-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: end;
    margin-bottom: 28px;
}

body.portal-page:not(.portal-login-page) .template-showcase-head .section-title {
    max-width: 760px;
}

body.portal-page:not(.portal-login-page) .template-showcase-head .section-desc {
    max-width: 780px;
    margin-top: 12px;
}

body.portal-page:not(.portal-login-page) .template-sync-panel {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 124px;
    padding: 22px;
    border: 1px solid rgba(28, 112, 255, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 22px 52px rgba(39, 76, 128, .12), inset 0 1px 0 rgba(255, 255, 255, .86);
}

body.portal-page:not(.portal-login-page) .template-sync-panel::after {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(46, 204, 113, .95), rgba(22, 119, 255, .95));
    box-shadow: 0 14px 30px rgba(31, 145, 185, .24);
    content: "";
}

body.portal-page:not(.portal-login-page) .template-sync-panel span {
    width: max-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(22, 119, 255, .1);
    color: #1660d8;
    font-size: 12px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .template-sync-panel strong {
    color: #101827;
    font-size: 30px;
    line-height: 1;
}

body.portal-page:not(.portal-login-page) .template-sync-panel small {
    color: #69758a;
    font-size: 13px;
    line-height: 1.45;
}

body.portal-page:not(.portal-login-page) .template-showcase-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.portal-page:not(.portal-login-page) .template-card {
    --template-accent: #2563eb;
    --template-soft: rgba(37, 99, 235, .1);
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(30, 41, 59, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 46px rgba(31, 45, 78, .1);
    isolation: isolate;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.portal-page:not(.portal-login-page) .template-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--template-accent);
    content: "";
}

@media (hover: hover) {
    body.portal-page:not(.portal-login-page) .template-card:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--template-accent) 28%, transparent);
        box-shadow: 0 24px 62px rgba(31, 45, 78, .15);
    }
}

body.portal-page:not(.portal-login-page) .template-card-green {
    --template-accent: #16a34a;
    --template-soft: rgba(22, 163, 74, .1);
}

body.portal-page:not(.portal-login-page) .template-card-orange {
    --template-accent: #f59e0b;
    --template-soft: rgba(245, 158, 11, .13);
}

body.portal-page:not(.portal-login-page) .template-card-purple {
    --template-accent: #7c3aed;
    --template-soft: rgba(124, 58, 237, .11);
}

body.portal-page:not(.portal-login-page) .template-card-cyan {
    --template-accent: #0891b2;
    --template-soft: rgba(8, 145, 178, .11);
}

body.portal-page:not(.portal-login-page) .template-card-red {
    --template-accent: #dc2626;
    --template-soft: rgba(220, 38, 38, .1);
}

body.portal-page:not(.portal-login-page) .template-thumb {
    position: relative;
    height: 174px;
    overflow: hidden;
    background: #eef4ff;
}

body.portal-page:not(.portal-login-page) .template-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
}

body.portal-page:not(.portal-login-page) .template-thumb::after {
    position: absolute;
    inset: auto 0 0;
    height: 58%;
    background: linear-gradient(180deg, transparent, rgba(10, 14, 24, .68));
    content: "";
}

body.portal-page:not(.portal-login-page) .template-thumb span {
    position: absolute;
    z-index: 1;
    left: 14px;
    bottom: 14px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    backdrop-filter: blur(10px);
}

body.portal-page:not(.portal-login-page) .template-card-body {
    display: grid;
    gap: 12px;
    padding: 18px;
}

body.portal-page:not(.portal-login-page) .template-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.portal-page:not(.portal-login-page) .template-card-top span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--template-soft);
    color: var(--template-accent);
    font-size: 12px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .template-card-top small {
    color: #8a94a6;
    font-size: 12px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .template-card h3 {
    margin: 0;
    color: #101827;
    font-size: 22px;
    line-height: 1.16;
}

body.portal-page:not(.portal-login-page) .template-card p {
    min-height: 42px;
    margin: 0;
    color: #687386;
    font-size: 14px;
    line-height: 1.5;
}

body.portal-page:not(.portal-login-page) .template-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.portal-page:not(.portal-login-page) .template-tags span {
    padding: 5px 8px;
    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 999px;
    background: #f8fafc;
    color: #536174;
    font-size: 12px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .template-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--template-accent), color-mix(in srgb, var(--template-accent) 78%, #111827));
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--template-accent) 24%, transparent);
}

body.portal-page:not(.portal-login-page) .template-preview-btn::after {
    content: "→";
    font-size: 16px;
    line-height: 1;
}

.portal-template-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(8, 13, 26, .68);
    backdrop-filter: blur(16px);
}

.portal-template-modal.show {
    display: flex;
}

.template-modal-card {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(245, 250, 255, .95));
    box-shadow: 0 36px 110px rgba(3, 10, 25, .36);
}

.template-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    color: #101827;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.template-real-preview {
    display: grid;
    height: min(760px, calc(100vh - 100px));
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(15, 23, 42, .18);
}

.template-preview-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.template-modal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}

.template-modal-type {
    width: max-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(22, 119, 255, .11);
    color: #165dd8;
    font-size: 13px;
    font-weight: 900;
}

.template-modal-info h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
}

.template-modal-info p {
    margin: 0;
    color: #5b6678;
    font-size: 16px;
    line-height: 1.72;
}

.template-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.template-modal-tags span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(31, 45, 78, .08);
}

.template-modal-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.template-modal-flow span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.template-modal-flow b {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 12px;
}

@media (max-width: 1080px) {
    body.portal-page:not(.portal-login-page) .template-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body.portal-page:not(.portal-login-page) .template-showcase-head {
        grid-template-columns: 1fr;
    }

    body.portal-page:not(.portal-login-page) .template-sync-panel {
        min-height: 0;
    }

    .template-modal-card {
        padding: 22px;
    }

    .template-real-preview {
        height: min(720px, calc(100vh - 92px));
    }
}

@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .portal-template-section {
        padding-top: 56px;
        padding-bottom: 62px;
    }

    body.portal-page:not(.portal-login-page) .template-showcase-grid {
        grid-template-columns: 1fr;
    }

    body.portal-page:not(.portal-login-page) .template-thumb {
        height: 152px;
    }

    body.portal-page:not(.portal-login-page) .template-card h3 {
        font-size: 20px;
    }

    body.portal-page:not(.portal-login-page) .template-card p {
        min-height: 0;
    }

    .portal-template-modal {
        align-items: flex-start;
        padding: 14px;
        overflow-y: auto;
    }

    .template-modal-card {
        max-height: none;
        padding: 18px;
        border-radius: 20px;
    }

    .template-real-preview {
        height: calc(100vh - 64px);
        border-radius: 16px;
    }
}

/* Transparent horizontal brand logo */
.portal-brand img.portal-brand-logo,
body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
    display: block;
    width: clamp(168px, 12vw, 236px);
    height: auto;
    max-height: 58px;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
}

body.portal-page:not(.portal-login-page) .portal-brand {
    flex: 0 0 auto;
    min-width: clamp(172px, 13vw, 248px);
    gap: 0;
    letter-spacing: 0;
}

body.portal-page:not(.portal-login-page) .portal-brand::before,
body.portal-page:not(.portal-login-page) .portal-brand::after {
    display: none;
    content: none;
}

@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 224px;
    }
}

@media (max-width: 780px) {
    body.portal-page:not(.portal-login-page) .portal-brand {
        flex: 0 0 auto;
        min-width: 160px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 158px;
        max-height: 48px;
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .portal-brand {
        min-width: 138px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 138px;
        max-height: 42px;
    }
}

/* Mobile navigation polish */
@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page).portal-menu-open {
        overflow-x: hidden;
    }

    body.portal-page:not(.portal-login-page) .portal-topbar {
        border-bottom: 1px solid rgba(124, 105, 230, .12);
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 12px 36px rgba(54, 48, 115, .08);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        backdrop-filter: blur(18px) saturate(1.2);
    }

    body.portal-page:not(.portal-login-page) .portal-nav {
        position: relative;
        display: flex;
        width: min(100% - 24px, 1180px);
        min-height: 74px;
        gap: 8px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand {
        order: 1;
        min-width: 0;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 150px;
        max-height: 44px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        position: static !important;
        order: 2;
        flex: 0 0 46px;
        display: inline-grid;
        place-items: center;
        width: 46px;
        height: 46px;
        margin-left: auto;
        border: 1px solid rgba(113, 92, 232, .18);
        border-radius: 14px;
        background: rgba(255, 255, 255, .78);
        color: #6c53ee;
        box-shadow: 0 10px 24px rgba(66, 56, 136, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    body.portal-page:not(.portal-login-page) .portal-menu:hover,
    body.portal-page:not(.portal-login-page) .portal-menu.is-open {
        border-color: rgba(108, 83, 238, .3);
        background: #fff;
        color: #5f45e6;
        box-shadow: 0 14px 30px rgba(95, 69, 230, .16);
        transform: translateY(-1px);
    }

    body.portal-page:not(.portal-login-page) .portal-menu span,
    body.portal-page:not(.portal-login-page) .portal-menu span::before,
    body.portal-page:not(.portal-login-page) .portal-menu span::after {
        width: 20px;
        height: 2px;
        border-radius: 999px;
        transition: transform .2s ease, opacity .2s ease;
    }

    body.portal-page:not(.portal-login-page) .portal-menu.is-open span {
        transform: rotate(45deg);
    }

    body.portal-page:not(.portal-login-page) .portal-menu.is-open span::before {
        transform: translateY(7px) rotate(90deg);
    }

    body.portal-page:not(.portal-login-page) .portal-menu.is-open span::after {
        opacity: 0;
        transform: translateY(-7px);
    }

    body.portal-page:not(.portal-login-page) .portal-actions {
        position: static !important;
        order: 3;
        flex: 0 0 auto;
        margin-left: 4px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        min-width: 96px;
        min-height: 46px;
        padding: 0 15px;
        border-radius: 14px;
        font-size: 14px;
        box-shadow: 0 12px 24px rgba(108, 83, 238, .2);
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        position: fixed !important;
        top: 82px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 80;
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        max-height: calc(100dvh - 106px);
        padding: 12px;
        overflow-y: auto;
        border: 1px solid rgba(124, 105, 230, .16);
        border-radius: 20px;
        background: #fff;
        color: #172033;
        box-shadow: 0 24px 70px rgba(36, 31, 87, .2), inset 0 1px 0 rgba(255, 255, 255, .88);
        -webkit-backdrop-filter: blur(18px) saturate(1.22);
        backdrop-filter: blur(18px) saturate(1.22);
    }

    body.portal-page:not(.portal-login-page) .portal-links.open {
        display: grid !important;
        animation: portalMobileMenuIn .18s ease both;
    }

    body.portal-page:not(.portal-login-page) .portal-links:before {
        content: "";
        position: absolute;
        top: -7px;
        right: 128px;
        width: 14px;
        height: 14px;
        border-top: 1px solid rgba(124, 105, 230, .16);
        border-left: 1px solid rgba(124, 105, 230, .16);
        background: #fff;
        transform: rotate(45deg);
    }

    body.portal-page:not(.portal-login-page) .portal-links a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid rgba(148, 163, 184, .16);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .8));
        color: #27324a;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.2;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    }

    body.portal-page:not(.portal-login-page) .portal-links a::before {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin-right: 9px;
        border-radius: 999px;
        background: linear-gradient(135deg, #7b61ff, #35d979);
        box-shadow: 0 0 0 4px rgba(123, 97, 255, .09);
    }

    body.portal-page:not(.portal-login-page) .portal-links a::after {
        display: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-links a:hover,
    body.portal-page:not(.portal-login-page) .portal-links a:active {
        border-color: rgba(108, 83, 238, .22);
        background: #fff;
        color: #5f45e6;
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(100% - 20px, 1180px);
        gap: 7px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 132px;
        max-height: 40px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        min-width: 86px;
        min-height: 44px;
        padding: 0 12px;
        font-size: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        top: 78px !important;
        left: 10px !important;
        right: 10px !important;
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-links:before {
        right: 118px;
    }

    body.portal-page:not(.portal-login-page) .portal-links a {
        min-height: 46px;
        padding: 0 10px;
        border-radius: 13px;
        font-size: 13px;
    }
}

@keyframes portalMobileMenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 2026-07-10: conversion, trust and accessibility polish */
body.portal-page:not(.portal-login-page) .portal-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 4000;
    padding: 11px 16px;
    border-radius: 8px;
    background: #15172f;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .18s ease;
}

body.portal-page:not(.portal-login-page) .portal-skip-link:focus {
    transform: translateY(0);
}

body.portal-page:not(.portal-login-page) main {
    display: block;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    gap: 12px;
}

body.portal-page:not(.portal-login-page) .portal-assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 18px;
    color: #596179;
    font-size: 13px;
    font-weight: 750;
}

body.portal-page:not(.portal-login-page) .portal-assurance span {
    position: relative;
    padding-left: 19px;
}

body.portal-page:not(.portal-login-page) .portal-assurance span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #16a35f;
    border-left: 2px solid #16a35f;
    transform: translateY(-65%) rotate(-45deg);
}

body.portal-page:not(.portal-login-page) .portal-proof-strip {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(125, 109, 220, .12);
    border-bottom: 1px solid rgba(125, 109, 220, .12);
    background: rgba(255, 255, 255, .92);
}

body.portal-page:not(.portal-login-page) .portal-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 24px;
    padding-bottom: 24px;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 0 28px;
    border-right: 1px solid rgba(125, 109, 220, .14);
}

body.portal-page:not(.portal-login-page) .portal-proof-grid > div:first-child {
    padding-left: 0;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid > div:last-child {
    padding-right: 0;
    border-right: 0;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid strong {
    color: #232544;
    font-size: 25px;
    line-height: 1.15;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid span {
    color: #70778c;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}

body.portal-page:not(.portal-login-page) .scenario-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

body.portal-page:not(.portal-login-page) .scenario-card::before {
    content: none !important;
}

body.portal-page:not(.portal-login-page) .scenario-card::after {
    opacity: 0 !important;
}

body.portal-page:not(.portal-login-page) .scenario-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    margin-bottom: 22px;
    border: 1px solid rgba(105, 80, 231, .18);
    border-radius: 6px;
    background: rgba(105, 80, 231, .08);
    color: #6550dc;
    font-size: 12px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .scenario-card h3 {
    margin: 0 0 10px;
    color: #252844;
    font-size: 21px;
    line-height: 1.35;
}

body.portal-page:not(.portal-login-page) .scenario-card > p {
    margin: 0;
    color: #6b7287;
    font-size: 15px;
    line-height: 1.8;
}

body.portal-page:not(.portal-login-page) .scenario-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
}

body.portal-page:not(.portal-login-page) .scenario-flow span {
    padding: 6px 9px;
    border: 1px solid rgba(34, 163, 95, .14);
    border-radius: 5px;
    background: rgba(34, 163, 95, .07);
    color: #24754c;
    font-size: 12px;
    font-weight: 750;
}

body.portal-page:not(.portal-login-page) a:focus-visible,
body.portal-page:not(.portal-login-page) button:focus-visible,
body.portal-page:not(.portal-login-page) input:focus-visible,
body.portal-page:not(.portal-login-page) select:focus-visible,
body.portal-page:not(.portal-login-page) textarea:focus-visible {
    outline: 3px solid rgba(101, 80, 220, .46);
    outline-offset: 3px;
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    animation-delay: .02s;
    animation-duration: .45s;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    animation-delay: .06s;
    animation-duration: .5s;
}

body.portal-page:not(.portal-login-page) .portal-hero-copy > p {
    animation-delay: .1s;
    animation-duration: .5s;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    animation-delay: .14s;
    animation-duration: .5s;
}

body.portal-page:not(.portal-login-page) .portal-assurance,
body.portal-page:not(.portal-login-page) .portal-hero-stats {
    animation: pvFadeUp .5s cubic-bezier(.22, .9, .3, 1) .18s both;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    animation-delay: .14s;
    animation-duration: .62s;
}

@media (min-width: 641px) {
    body.portal-page:not(.portal-login-page) .portal-hero {
        height: auto !important;
        min-height: calc(100vh - 72px) !important;
    }
}

@media (max-width: 780px) {
    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 0 !important;
        padding-bottom: 30px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats,
    body.portal-page:not(.portal-login-page) .portal-dashboard .dash-card.wide,
    body.portal-page:not(.portal-login-page) .portal-next-hint {
        display: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        margin-top: 24px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 22px;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    body.portal-page:not(.portal-login-page) .portal-proof-grid > div,
    body.portal-page:not(.portal-login-page) .portal-proof-grid > div:first-child,
    body.portal-page:not(.portal-login-page) .portal-proof-grid > div:last-child {
        padding: 0 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-proof-grid > div:nth-child(2n) {
        border-right: 0;
    }

    body.portal-page:not(.portal-login-page) .scenario-card {
        min-height: 230px;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        gap: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 168px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-links a {
        font-size: 13px;
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-actions {
        gap: 8px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
        min-width: 112px;
        padding-right: 16px;
        padding-left: 16px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: min(500px, calc(100vw - 540px)) !important;
        max-width: 500px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: 40px;
        line-height: 1.2;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        width: 100%;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        gap: 5px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        padding-right: 4px;
        padding-left: 4px;
        font-size: 10px;
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span b {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 0 !important;
        padding-bottom: 30px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy > p {
        margin-top: 14px;
        line-height: 1.75;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 9px !important;
        margin-top: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        width: auto !important;
        min-width: 0 !important;
        min-height: 48px;
        padding: 0 12px !important;
        font-size: 14px;
        white-space: nowrap;
    }

    body.portal-page:not(.portal-login-page) .portal-assurance {
        gap: 8px 14px;
        margin-top: 15px;
        font-size: 12px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        display: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        margin-top: 24px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard .dash-card.wide {
        display: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-next-hint {
        display: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-proof-grid strong {
        font-size: 21px;
    }

    body.portal-page:not(.portal-login-page) .portal-proof-grid span {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-page:not(.portal-login-page) .portal-assurance {
        animation: none !important;
    }
}

/* 2026-07-11: continuation pass — tighter first screen and clearer navigation state. */
body.portal-page:not(.portal-login-page) .portal-links a.is-active,
body.portal-page:not(.portal-login-page) .portal-links a[aria-current="location"] {
    color: #5f45e6;
}

body.portal-page:not(.portal-login-page) .portal-links a.is-active::after,
body.portal-page:not(.portal-login-page) .portal-links a[aria-current="location"]::after {
    opacity: 1;
    transform: scaleX(1);
}

body.portal-page:not(.portal-login-page) .portal-section[id] {
    scroll-margin-top: 104px;
}

body.portal-page:not(.portal-login-page) .dash-line {
    overflow: visible;
}

@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        min-height: 82px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
        min-height: 58px;
        padding-right: 34px;
        padding-left: 34px;
        font-size: 19px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: clamp(790px, calc(100vh - 82px), 820px) !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        margin-top: 18px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 158px;
        padding-top: 80px;
        padding-bottom: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 560px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 246px 1fr;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 66px;
        margin-top: 20px;
    }

    body.portal-page:not(.portal-login-page) .dash-line {
        height: 108px;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-section[id] {
        scroll-margin-top: 88px;
    }

    body.portal-page:not(.portal-login-page) .portal-links a.is-active,
    body.portal-page:not(.portal-login-page) .portal-links a[aria-current="location"] {
        border-color: rgba(108, 83, 238, .26);
        background: rgba(108, 83, 238, .08);
        box-shadow: inset 0 0 0 1px rgba(108, 83, 238, .05);
    }

    body.portal-page:not(.portal-login-page) .portal-links a.is-active::before,
    body.portal-page:not(.portal-login-page) .portal-links a[aria-current="location"]::before {
        background: #684ee9;
        box-shadow: 0 0 0 4px rgba(104, 78, 233, .12);
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .portal-section[id] {
        scroll-margin-top: 82px;
    }
}

/* 2026-07-11: simple three-terminal collaboration cards. */
body.portal-page:not(.portal-login-page) .portal-hero-stats {
    gap: 12px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    --terminal-color: #6754df;
    --terminal-soft: #f0edff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 158px;
    padding: 18px 20px 20px !important;
    overflow: hidden;
    border: 1px solid rgba(103, 84, 223, .13);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 248, 255, .96));
    box-shadow: 0 16px 42px rgba(54, 45, 112, .08), inset 0 3px 0 var(--terminal-color);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat-branch {
    --terminal-color: #4f7fe8;
    --terminal-soft: #edf4ff;
    border-color: rgba(79, 127, 232, .13);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat-agent {
    --terminal-color: #35a96b;
    --terminal-soft: #edf9f2;
    border-color: rgba(53, 169, 107, .14);
}

body.portal-page:not(.portal-login-page) .hero-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
    position: static !important;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid color-mix(in srgb, var(--terminal-color) 20%, transparent);
    border-radius: 13px;
    color: var(--terminal-color);
    background: var(--terminal-soft);
    box-shadow: none;
    transform: none !important;
    filter: none !important;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
}

body.portal-page:not(.portal-login-page) .hero-stat-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--terminal-color);
    background: var(--terminal-soft);
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    margin-top: 17px;
    color: #20233e;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-desc {
    margin-top: 7px;
    color: #697086;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat:hover {
        border-color: color-mix(in srgb, var(--terminal-color) 24%, transparent);
        box-shadow: 0 20px 46px rgba(54, 45, 112, .11), inset 0 3px 0 var(--terminal-color);
        transform: translateY(-2px);
    }
}

@media (min-width: 1601px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 158px;
        padding: 18px 20px 20px !important;
    }
}

@media (max-width: 1180px) and (min-width: 781px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 154px;
        padding: 15px 16px 17px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    body.portal-page:not(.portal-login-page) .hero-stat-kicker {
        display: none;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        margin-top: 14px;
        font-size: 23px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-desc {
        font-size: 11px;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        transition: none !important;
    }
}

/* ============================================================
   2026-07-12 homepage refinement layer
   A calmer scale, clearer hierarchy and more consistent surfaces.
   ============================================================ */
body.portal-page:not(.portal-login-page) {
    --home-ink: #15182f;
    --home-muted: #626a82;
    --home-primary: #6753e8;
    --home-primary-dark: #533bd5;
    --home-line: rgba(86, 75, 155, .12);
    --home-surface: rgba(255, 255, 255, .9);
    background: #f8f9fd;
    color: var(--home-ink);
}

body.portal-page:not(.portal-login-page) .portal-topbar {
    height: 76px;
    border-bottom: 1px solid rgba(93, 77, 177, .08);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 24px rgba(39, 32, 87, .035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.portal-page:not(.portal-login-page) .portal-topbar.pv-scrolled {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: rgba(93, 77, 177, .12);
    box-shadow: 0 10px 32px rgba(39, 32, 87, .08);
}

body.portal-page:not(.portal-login-page) .portal-nav {
    width: min(1840px, calc(100% - 80px));
    min-height: 76px;
    gap: clamp(28px, 3vw, 58px);
}

body.portal-page:not(.portal-login-page) .portal-brand {
    min-width: 190px;
}

body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
    width: 190px;
    max-height: 52px;
}

body.portal-page:not(.portal-login-page) .portal-links {
    justify-content: center;
    gap: clamp(24px, 2.2vw, 44px);
    font-size: 15px;
    font-weight: 760;
}

body.portal-page:not(.portal-login-page) .portal-links a {
    opacity: .78;
}

body.portal-page:not(.portal-login-page) .portal-links a:hover,
body.portal-page:not(.portal-login-page) .portal-links a.is-active {
    opacity: 1;
}

body.portal-page:not(.portal-login-page) .portal-actions {
    gap: 10px;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
    min-width: 112px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 820;
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
    min-width: 142px;
    background: linear-gradient(135deg, #755ff1 0%, #5d45df 100%);
    box-shadow: 0 9px 22px rgba(91, 66, 220, .23);
}

body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.ghost {
    border: 1px solid rgba(86, 74, 151, .1);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 5px 16px rgba(45, 37, 94, .055);
}

body.portal-page:not(.portal-login-page) .portal-hero {
    min-height: 780px !important;
    border-bottom: 1px solid rgba(92, 78, 170, .08);
    background:
        radial-gradient(circle at 82% 20%, rgba(111, 84, 232, .16), transparent 30%),
        radial-gradient(circle at 12% 86%, rgba(90, 175, 224, .1), transparent 28%),
        linear-gradient(135deg, #fbfcff 0%, #f7f5ff 53%, #eeeaff 100%);
}

body.portal-page:not(.portal-login-page) .portal-hero::before {
    background: radial-gradient(circle, rgba(96, 74, 206, .24) 0 1px, transparent 1.2px) 0 0 / 34px 34px;
    opacity: .09;
}

body.portal-page:not(.portal-login-page) .portal-hero::after {
    top: 170px;
    left: 43%;
    width: 190px;
    height: 230px;
    border-color: rgba(255, 255, 255, .5);
    border-radius: 34px;
    box-shadow: inset 0 1px 26px rgba(255, 255, 255, .42);
    opacity: .62;
}

body.portal-page:not(.portal-login-page) .portal-hero-inner {
    top: 116px;
    left: max(48px, calc((100vw - 1840px) / 2));
    width: min(760px, 44vw);
}

body.portal-page:not(.portal-login-page) .portal-hero-copy {
    width: 100%;
    max-width: 760px;
}

body.portal-page:not(.portal-login-page) .portal-eyebrow {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(103, 83, 213, .16);
    color: #6650d8;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 6px 18px rgba(72, 57, 151, .055);
    font-size: 13px;
    font-weight: 800;
}

body.portal-page:not(.portal-login-page) .portal-eyebrow::before {
    width: 8px;
    height: 8px;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 {
    width: 100%;
    max-width: 760px;
    margin: 24px 0 20px;
    color: var(--home-ink);
    font-size: clamp(48px, 3.25vw, 64px);
    line-height: 1.14;
    font-weight: 920;
    letter-spacing: -.035em;
    text-wrap: balance;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 span {
    background: linear-gradient(90deg, #684fe8 0%, #735cf0 50%, #748fe9 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.portal-page:not(.portal-login-page) .portal-hero p,
body.portal-page:not(.portal-login-page) .portal-hero-copy > p {
    width: 100%;
    max-width: 700px;
    color: #5d6680;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 520;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta {
    gap: 12px;
    margin-top: 24px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
    min-height: 54px;
    padding: 0 24px;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 850;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
    min-width: 210px;
    background: linear-gradient(135deg, #755ff1 0%, #5a42dc 100%);
    box-shadow: 0 12px 28px rgba(91, 66, 220, .25);
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary::after {
    width: 22px;
    height: 22px;
    margin-left: 10px;
    font-size: 16px;
}

body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.ghost {
    min-width: 144px;
    border-color: rgba(92, 72, 198, .22);
    color: #5e49cc;
    background: rgba(255, 255, 255, .46);
}

body.portal-page:not(.portal-login-page) .portal-assurance {
    gap: 9px 20px;
    margin-top: 16px;
    color: #687086;
    font-size: 12px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stats {
    width: min(720px, 100%);
    gap: 10px;
    margin-top: 20px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    min-height: 132px;
    padding: 14px 16px 16px !important;
    border-radius: 15px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 28px rgba(49, 41, 102, .065), inset 0 2px 0 var(--terminal-color);
    backdrop-filter: blur(12px);
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 11px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon svg {
    width: 19px;
    height: 19px;
}

body.portal-page:not(.portal-login-page) .hero-stat-kicker {
    min-height: 23px;
    padding: 0 8px;
    font-size: 9px !important;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    margin-top: 11px;
    font-size: 21px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-desc {
    margin-top: 5px;
    color: #6c7388;
    font-size: 11px;
}

body.portal-page:not(.portal-login-page) .portal-visual {
    top: 136px;
    right: max(48px, calc((100vw - 1840px) / 2));
    width: min(680px, 38vw);
    min-width: 540px;
}

body.portal-page:not(.portal-login-page) .portal-dashboard {
    height: 550px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 22px;
    background: rgba(255, 255, 255, .52);
    box-shadow: 0 24px 70px rgba(55, 43, 126, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
    backdrop-filter: blur(22px) saturate(1.08);
}

body.portal-page:not(.portal-login-page) .dash-top {
    height: 72px;
    padding: 0 24px;
}

body.portal-page:not(.portal-login-page) .dash-top strong {
    font-size: 22px;
    font-weight: 900;
}

body.portal-page:not(.portal-login-page) .dash-pill {
    gap: 7px;
    padding: 9px 14px;
    color: #67708a;
    background: rgba(255, 255, 255, .74);
    font-size: 12px;
}

body.portal-page:not(.portal-login-page) .dash-grid {
    height: calc(100% - 72px);
    grid-template-rows: 218px 1fr;
    gap: 14px;
    padding: 0 24px 24px;
}

body.portal-page:not(.portal-login-page) .dash-card {
    padding: 20px;
    border: 1px solid rgba(94, 78, 174, .12);
    border-radius: 15px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 8px 22px rgba(54, 45, 112, .045), inset 0 1px 0 #fff;
}

body.portal-page:not(.portal-login-page) .dash-card.wide {
    padding: 20px;
    background: rgba(255, 255, 255, .58);
}

body.portal-page:not(.portal-login-page) .dash-card small {
    color: #6a7390;
    font-size: 13px;
    font-weight: 780;
}

body.portal-page:not(.portal-login-page) .dash-card strong {
    margin-top: 12px;
    font-size: 32px;
}

body.portal-page:not(.portal-login-page) .dash-card em {
    margin-top: 9px;
    font-size: 12px;
}

body.portal-page:not(.portal-login-page) .dash-bars {
    height: 58px;
    gap: clamp(12px, 2vw, 24px);
    margin-top: 18px;
}

body.portal-page:not(.portal-login-page) .dash-bars i {
    min-width: 18px;
    max-width: 26px;
    border-radius: 6px 6px 2px 2px;
}

body.portal-page:not(.portal-login-page) .dash-flow {
    gap: 7px;
    margin-top: 14px;
}

body.portal-page:not(.portal-login-page) .dash-flow span {
    min-height: 60px;
    padding: 9px 7px;
    font-size: 10px;
}

body.portal-page:not(.portal-login-page) .dash-flow b {
    margin-bottom: 3px;
    font-size: 14px;
}

body.portal-page:not(.portal-login-page) .dash-line {
    height: 112px;
    margin-top: 0;
}

body.portal-page:not(.portal-login-page) .portal-next-hint {
    bottom: 14px;
    font-size: 12px;
    opacity: .7;
}

body.portal-page:not(.portal-login-page) .portal-proof-strip {
    border-color: var(--home-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 32px rgba(41, 34, 88, .035);
}

body.portal-page:not(.portal-login-page) .portal-proof-grid {
    padding-top: 21px;
    padding-bottom: 21px;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid strong {
    color: var(--home-ink);
    font-size: 22px;
}

body.portal-page:not(.portal-login-page) .portal-proof-grid span {
    color: var(--home-muted);
}

body.portal-page:not(.portal-login-page) .portal-section-inner {
    width: min(1280px, calc(100% - 48px));
}

body.portal-page:not(.portal-login-page) .portal-section {
    padding: 88px 0;
    background: #f8f9fd;
}

body.portal-page:not(.portal-login-page) .portal-section.alt {
    background: #fff;
}

body.portal-page:not(.portal-login-page) .section-head {
    margin-bottom: 38px;
}

body.portal-page:not(.portal-login-page) .section-title {
    color: var(--home-ink);
    font-size: clamp(30px, 2.6vw, 42px);
    line-height: 1.25;
}

body.portal-page:not(.portal-login-page) .section-desc {
    color: var(--home-muted);
    font-size: 15px;
    line-height: 1.8;
}

body.portal-page:not(.portal-login-page) .value-card,
body.portal-page:not(.portal-login-page) .feature-card,
body.portal-page:not(.portal-login-page) .process-step,
body.portal-page:not(.portal-login-page) .price-card,
body.portal-page:not(.portal-login-page) .quote-card,
body.portal-page:not(.portal-login-page) .faq-item {
    border: 1px solid rgba(86, 75, 155, .105);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 36px rgba(42, 35, 88, .055);
}

body.portal-page:not(.portal-login-page) .portal-section.dark {
    background:
        radial-gradient(circle at 15% 10%, rgba(110, 87, 235, .18), transparent 32%),
        radial-gradient(circle at 88% 88%, rgba(63, 106, 207, .13), transparent 30%),
        #111528;
}

body.portal-page:not(.portal-login-page) .portal-footer {
    background:
        radial-gradient(circle at 14% 0%, rgba(105, 82, 224, .2), transparent 34%),
        #0d1121;
}

@media (min-width: 981px) and (max-width: 1600px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: min(1480px, calc(100% - 48px));
        gap: clamp(16px, 2vw, 32px);
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 170px;
    }

    body.portal-page:not(.portal-login-page) .portal-links {
        gap: clamp(16px, 1.65vw, 28px);
        font-size: 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 720px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        top: 110px;
        left: 40px;
        width: min(600px, 45vw);
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(42px, 3.5vw, 54px);
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        top: 132px;
        right: 32px;
        width: min(590px, 40vw);
        min-width: 470px;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 510px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        grid-template-rows: 202px 1fr;
    }
}

@media (max-width: 1180px) and (min-width: 981px) {
    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn {
        min-width: 96px;
        padding: 0 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
        min-width: 122px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        left: 28px;
        width: calc(100vw - 550px) !important;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        right: 24px;
        width: 490px;
        min-width: 490px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: 40px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stats {
        display: none;
    }
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-topbar {
        height: 68px;
    }

    body.portal-page:not(.portal-login-page) .portal-nav {
        width: calc(100% - 28px);
        min-height: 68px;
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 158px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 96px 0 34px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-inner {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: min(680px, calc(100% - 36px)) !important;
        max-width: none !important;
        margin: 0 auto !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-copy {
        width: 100% !important;
        max-width: none !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        width: 100% !important;
        max-width: none !important;
        margin-top: 20px;
        font-size: clamp(36px, 8vw, 48px);
    }

    body.portal-page:not(.portal-login-page) .portal-hero p,
    body.portal-page:not(.portal-login-page) .portal-hero-copy > p {
        width: 100% !important;
        max-width: none !important;
        font-size: 15px;
    }

    body.portal-page:not(.portal-login-page) .portal-visual {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: min(680px, calc(100% - 28px)) !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 28px auto 0 !important;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        width: 100%;
        height: 380px;
        min-height: 0;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 62px;
        padding: 0 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        height: calc(100% - 62px);
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        padding: 0 14px 14px;
    }

    body.portal-page:not(.portal-login-page) .portal-section {
        padding: 64px 0;
    }
}

@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .portal-nav {
        width: calc(100% - 22px);
    }

    body.portal-page:not(.portal-login-page) .portal-brand img.portal-brand-logo {
        width: 145px;
    }

    body.portal-page:not(.portal-login-page) .portal-menu {
        right: 58px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-actions .portal-btn[data-portal-auth="register"] {
        width: 46px;
        min-width: 46px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero {
        padding: 86px 0 28px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.18;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn {
        min-height: 48px;
        border-radius: 12px;
        font-size: 13px;
    }

    body.portal-page:not(.portal-login-page) .portal-section-inner {
        width: min(100% - 28px, 1280px);
    }

    body.portal-page:not(.portal-login-page) .portal-section {
        padding: 52px 0;
    }

    body.portal-page:not(.portal-login-page) .portal-dashboard {
        height: 316px;
        border-radius: 18px;
    }

    body.portal-page:not(.portal-login-page) .dash-top {
        height: 56px;
        padding: 0 14px;
    }

    body.portal-page:not(.portal-login-page) .dash-top strong {
        font-size: 16px;
    }

    body.portal-page:not(.portal-login-page) .dash-pill {
        padding: 7px 10px;
        font-size: 10px;
    }

    body.portal-page:not(.portal-login-page) .dash-grid {
        height: calc(100% - 56px);
        grid-template-rows: 1fr;
        padding: 0 10px 10px;
    }

    body.portal-page:not(.portal-login-page) .dash-card {
        padding: 14px 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-card strong {
        font-size: 25px;
    }

    body.portal-page:not(.portal-login-page) .dash-bars {
        height: 45px;
        margin-top: 12px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow span {
        min-height: 50px;
        font-size: 8px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow b {
        font-size: 11px;
    }

    body.portal-page:not(.portal-login-page) .dash-flow {
        display: none;
    }

    body.portal-page:not(.portal-login-page) .section-title {
        font-size: 28px;
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .portal-hero h1 {
        font-size: 32px;
    }
}

/* ============================================================
   2026-07-26 UI polish · Layer A 视觉体系
   只追加、不修改既有行。统一前缀 body.portal-page:not(.portal-login-page)。
   Layer B（动效层）物理排在本层之后追加。
   ============================================================ */

/* ------------------------------------------------------------
   A1 · 品牌令牌梯度（基准 #6753e8）+ 硬编码紫收敛落地
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) {
    --brand-50: #f2f0fe;
    --brand-100: #e6e2fc;
    --brand-200: #cdc5f7;
    --brand-300: #ab9df1;
    --brand-400: #8878ec;
    --brand-500: #6753e8;
    --brand-600: #5741d6;
    --brand-700: #4632ad;

    --brand-grad: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);

    /* accent 只留 3 个色相，全部落在品牌紫—靛蓝区间内，禁止彩虹 */
    --rail-1: linear-gradient(90deg, var(--brand-400) 0%, var(--brand-600) 100%);
    --rail-2: linear-gradient(90deg, #8f7bf1 0%, #5468dd 100%);
    --rail-3: linear-gradient(90deg, #a494f4 0%, var(--brand-500) 100%);

    /* A4 · 两档阴影阶梯，光源统一在正上方（y 偏移恒为正） */
    --sh-1: 0 1px 2px rgba(42, 35, 88, .04), 0 10px 30px -8px rgba(42, 35, 88, .10);
    --sh-2: 0 2px 6px rgba(42, 35, 88, .06), 0 22px 52px -14px rgba(60, 46, 150, .20);
    --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, .9);

    /* A6 · 五档表面 */
    --surface-1: #f8f9fd;
    --surface-2: #ffffff;
    --surface-3: #111528;
    --surface-4: #f4f6fc;
    --surface-5: #f5f3fc;

    /* A6 · 段间两端淡出的品牌发丝线（1px，中间实、两端透明） */
    --pv-hairline: linear-gradient(90deg,
        rgba(103, 83, 232, 0) 0%,
        rgba(103, 83, 232, .16) 20%,
        rgba(103, 83, 232, .28) 50%,
        rgba(103, 83, 232, .16) 80%,
        rgba(103, 83, 232, 0) 100%);

    /* 把既有 refine 变量接到新阶梯上，卡片 hover 自动继承 --sh-2 */
    --portal-refine-shadow: var(--sh-1);
    --portal-refine-shadow-hover: var(--sh-2);
}

/* A1-落地① 顶栏主按钮（原 8869 硬编码 #755ff1/#5d45df） */
body.portal-page:not(.portal-login-page) .portal-actions .portal-btn.primary {
    background: var(--brand-grad);
    box-shadow: 0 8px 20px -6px rgba(87, 65, 214, .46);
}

/* A1-落地② Hero CTA（原 8974 硬编码 #755ff1/#5a42dc） */
body.portal-page:not(.portal-login-page) .portal-hero-cta .portal-btn.primary {
    background: var(--brand-grad);
    box-shadow: 0 12px 26px -8px rgba(87, 65, 214, .5);
}

/* A1-落地③ 套餐 CTA .portal-btn.blue（原 6073 硬编码 #7e65ff/#6249f0） */
body.portal-page:not(.portal-login-page) .portal-btn.blue {
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
    box-shadow: 0 10px 24px -8px rgba(87, 65, 214, .48);
}

body.portal-page:not(.portal-login-page) .portal-btn.primary:hover,
body.portal-page:not(.portal-login-page) .portal-btn.blue:hover {
    box-shadow: 0 16px 34px -10px rgba(87, 65, 214, .52);
}

/* A1-落地⑤ 导航激活态（原 8564 硬编码 #5f45e6） */
body.portal-page:not(.portal-login-page) .portal-links a.is-active,
body.portal-page:not(.portal-login-page) .portal-links a[aria-current="location"] {
    color: var(--brand-600);
}

/* A1-落地⑥ process 序号（原 4394 #7359f6 与 5987 硬编码渐变） */
body.portal-page:not(.portal-login-page) .process-step strong {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: 0 8px 18px -8px rgba(87, 65, 214, .55), inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* 顺带收敛的同源硬编码紫（eyebrow 文字色 #6650d8）。
   注意：.portal-eyebrow::before 是绿色在线状态点（#3cd48a + pvPulse），语义色，不动。 */
body.portal-page:not(.portal-login-page) .portal-eyebrow {
    color: var(--brand-600);
}

/* ------------------------------------------------------------
   A2 · 图标语言重做：满色糖果块 → 淡底描边图标
   颜色强度转移到卡片顶部 3px accent 导轨
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border: 1px solid var(--brand-200);
    border-radius: 14px;
    color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: none;
}

body.portal-page:not(.portal-login-page) .card-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
}

/* 关掉 5869–5895 的 5 色彩虹糖果块（含它们那层 0 14px 28px 重投影） */
body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(2) .card-icon,
body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(3) .card-icon,
body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(4) .card-icon,
body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(5) .card-icon {
    color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: none;
}

/* 3px 顶部 accent 导轨：默认完整态（无 JS / reduce 也是对的） */
body.portal-page:not(.portal-login-page) .value-card::before,
body.portal-page:not(.portal-login-page) .feature-card::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--rail-1);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
    transition:
        transform .52s cubic-bezier(.22, .9, .3, 1) .17s,
        opacity .34s ease .17s;
    pointer-events: none;
    content: "";
}

/* 仅当 JS 挂上 .pv-reveal 时才收成空态 */
body.portal-page:not(.portal-login-page) .value-card.pv-reveal::before,
body.portal-page:not(.portal-login-page) .feature-card.pv-reveal::before {
    opacity: 0;
    transform: scaleX(0);
}

/* .pv-in 期间点亮；.pv-inked 承载持久终态（portal.js 会在 900+delay 后清掉 .pv-in/.pv-reveal） */
body.portal-page:not(.portal-login-page) .value-card.pv-reveal.pv-in::before,
body.portal-page:not(.portal-login-page) .feature-card.pv-reveal.pv-in::before,
body.portal-page:not(.portal-login-page) .value-card.pv-inked::before,
body.portal-page:not(.portal-login-page) .feature-card.pv-inked::before {
    opacity: 1;
    transform: scaleX(1);
}

/* accent 只在 3 个色相间循环 */
body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(3n+2)::before,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(3n+2)::before {
    background: var(--rail-2);
}

body.portal-page:not(.portal-login-page) .value-grid .value-card:nth-child(3n+3)::before,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(3n+3)::before {
    background: var(--rail-3);
}

/* feature 卡的 meta 胶囊同样从 6 色收到 2 色 */
body.portal-page:not(.portal-login-page) .feature-card .meta {
    color: var(--brand-600);
    background: rgba(103, 83, 232, .09);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(2) .meta,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(3) .meta,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(4) .meta,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(5) .meta,
body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(6) .meta {
    color: var(--brand-600);
    background: rgba(103, 83, 232, .09);
}

body.portal-page:not(.portal-login-page) .feature-grid .feature-card:nth-child(3n+2) .meta {
    color: #4a5bc4;
    background: rgba(84, 104, 221, .1);
}

/* 图标 hover：换成轻描边高亮，不再上重投影 */
@media (hover: hover) and (pointer: fine) {
    body.portal-page:not(.portal-login-page) .value-card:hover .card-icon {
        border-color: var(--brand-400);
        color: var(--brand-700);
        background: var(--brand-100);
        box-shadow: 0 6px 16px -6px rgba(87, 65, 214, .34);
        filter: none;
    }
}

/* 5230 不在任何媒体查询内：触摸设备点一下会粘滞 :hover，
   会把刚删掉的 0 14px 30px 重投影带回来，这里按 5242 的既有约定中和掉。 */
@media (hover: none), (pointer: coarse) {
    body.portal-page:not(.portal-login-page) .value-card:hover .card-icon {
        transform: none;
        box-shadow: none;
        filter: none;
    }
}

/* ------------------------------------------------------------
   A3 · 中文字号阶梯 + 负字距修正
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .section-desc {
    font-size: 16.5px;
    line-height: 1.85;
}

body.portal-page:not(.portal-login-page) .value-card p,
body.portal-page:not(.portal-login-page) .feature-card p {
    font-size: 15px;
    line-height: 1.75;
}

body.portal-page:not(.portal-login-page) .rights-list li {
    font-size: 13px;
    line-height: 1.6;
}

body.portal-page:not(.portal-login-page) .rights-list li::before {
    top: .18em;
}

body.portal-page:not(.portal-login-page) .rights-list li::after {
    top: calc(.18em + 4px);
}

body.portal-page:not(.portal-login-page) .process-step p {
    font-size: 14px;
    line-height: 1.7;
}

/* kicker：去掉白底胶囊 + 阴影，改纯色小标签 */
body.portal-page:not(.portal-login-page) .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--brand-600);
    background: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
}

body.portal-page:not(.portal-login-page) .section-kicker::before {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-500);
}

/* 汉字无字间空隙：-.035em 会让笔画粘连；920 在多数中文字体触发合成粗体导致糊边 */
body.portal-page:not(.portal-login-page) .portal-hero h1 {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   A4 · 阴影阶梯落地 + 补回被 9210 整属性抹掉的 inset 顶高光
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .value-card,
body.portal-page:not(.portal-login-page) .feature-card,
body.portal-page:not(.portal-login-page) .process-step,
body.portal-page:not(.portal-login-page) .price-card,
body.portal-page:not(.portal-login-page) .quote-card,
body.portal-page:not(.portal-login-page) .faq-item {
    box-shadow: var(--sh-1), var(--sh-inset-top);
}

/* 仪表盘：接触影 + 形态影 + 有色超远环境影 + 双 inset 描边（零帧成本） */
body.portal-page:not(.portal-login-page) .portal-dashboard {
    box-shadow:
        0 2px 4px rgba(38, 30, 86, .05),
        0 18px 40px -12px rgba(48, 38, 110, .16),
        0 64px 108px -54px rgba(80, 62, 204, .42),
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------
   A5 · 修复 #process 深色段（线上真实缺陷）
   4372 的 .portal-section.dark .section-title 是 (0,5,1)，
   下面同为 (0,5,1) 且物理更靠后，靠源码顺序取胜。
   注意：本次不做顶部白色羽化（≤640 时白 alpha 会飙到 46%，重新压暗标题）。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-section.dark {
    position: relative;
    color: #e7ebff;
    background-color: var(--surface-3);
}

body.portal-page:not(.portal-login-page) .portal-section.dark::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(163, 150, 255, .1) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(163, 150, 255, .085) 0 1px, transparent 1px 100%);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(122% 78% at 50% 42%, #000 34%, transparent 78%);
    mask-image: radial-gradient(122% 78% at 50% 42%, #000 34%, transparent 78%);
    pointer-events: none;
    content: "";
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-title {
    color: #f2f4ff;
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-desc {
    color: rgba(226, 232, 255, .78);
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-kicker {
    color: #b6a9ff;
    background: none;
    box-shadow: none;
}

body.portal-page:not(.portal-login-page) .portal-section.dark .section-kicker::before {
    background: #8f7bf1;
}

/* 白卡贴深底 → 深色玻璃卡 */
body.portal-page:not(.portal-login-page) .portal-section.dark .process-step {
    border: 1px solid rgba(174, 162, 255, .16);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .028) 100%);
    box-shadow:
        0 18px 44px -18px rgba(4, 6, 20, .68),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

body.portal-page:not(.portal-login-page) .portal-section.dark .process-step h3 {
    color: #eef1ff;
}

body.portal-page:not(.portal-login-page) .portal-section.dark .process-step p {
    color: rgba(226, 232, 255, .72);
}

body.portal-page:not(.portal-login-page) .portal-section.dark .process-step strong {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
    box-shadow:
        0 10px 22px -10px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

@media (hover: hover) and (pointer: fine) {
    body.portal-page:not(.portal-login-page) .portal-section.dark .process-step:hover {
        border-color: rgba(174, 162, 255, .3);
        background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .045) 100%);
        box-shadow:
            0 24px 54px -18px rgba(4, 6, 20, .75),
            inset 0 1px 0 rgba(255, 255, 255, .2);
    }
}

/* ------------------------------------------------------------
   A6 · 段落节奏：五档表面 + 段间发丝线 + #pricing 顶部光锥
   （.portal-section.dark 的背景是 (0,4,1)，下面的 (0,3,1) 长写法碰不到它）
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-section {
    background-color: var(--surface-1);
    background-image: var(--pv-hairline);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 1px;
}

body.portal-page:not(.portal-login-page) .portal-section.alt {
    background-color: var(--surface-2);
    background-image: var(--pv-hairline);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 1px;
}

body.portal-page:not(.portal-login-page) .portal-section.portal-template-section {
    background-color: var(--surface-4);
    background-image:
        var(--pv-hairline),
        linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 42%);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-size: 100% 1px, 100% 100%;
}

/* #pricing 是 ID 选择器 (1,2,1)，稳压所有 .portal-section 规则 */
body.portal-page:not(.portal-login-page) #pricing {
    background-color: var(--surface-5);
    background-image:
        var(--pv-hairline),
        radial-gradient(58% 46% at 50% -4%, rgba(103, 83, 232, .15) 0%, rgba(103, 83, 232, 0) 72%);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-size: 100% 1px, 100% 100%;
}

/* ------------------------------------------------------------
   A7 · popular 卡常驻抬起：只用 margin，绝不碰 transform
   （该元素上 .pv-reveal 入场位移 / 4765 hover / 4803 active 三处在抢 transform 通道）
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .price-card.popular {
    margin-top: -12px;
    margin-bottom: 12px;
}

@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .price-card.popular {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* ------------------------------------------------------------
   A8 · hero 单焦点：3 张 stat 收成更轻的一行小胶囊
   不删元素、不改文案，只降视觉权重；去掉那 3 个看不见的 backdrop-filter
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-hero-stats {
    gap: 8px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat {
    min-height: 100px;
    padding: 13px 15px 14px !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(49, 41, 102, .05), inset 0 2px 0 var(--terminal-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon svg {
    width: 16px;
    height: 16px;
}

body.portal-page:not(.portal-login-page) .hero-stat-kicker {
    min-height: 20px;
    padding: 0 7px;
    font-size: 9px !important;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
    margin-top: 9px;
    font-size: 18px;
}

body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-desc {
    margin-top: 3px;
    font-size: 10.5px;
}

@media (hover: hover) and (pointer: fine) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat:hover {
        box-shadow: 0 8px 20px rgba(49, 41, 102, .08), inset 0 2px 0 var(--terminal-color);
    }
}

/* ------------------------------------------------------------
   A9 · 渐变裁字全页只留 1 处（.price-main strong）+ forced-colors 兜底
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .price-main strong {
    color: transparent;
    background: linear-gradient(120deg, var(--home-ink) 18%, var(--brand-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 取消 hero 标题上的裁字（2944 / 3320 / 3678 三处） */
body.portal-page:not(.portal-login-page) .portal-hero h1 span,
body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-accent {
    color: var(--brand-600);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-line {
    color: var(--home-ink);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

@media (forced-colors: active) {
    body.portal-page:not(.portal-login-page) .price-main strong,
    body.portal-page:not(.portal-login-page) .portal-hero h1 span,
    body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-accent,
    body.portal-page:not(.portal-login-page) .portal-hero h1 .headline-line {
        color: CanvasText;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: CanvasText;
    }

    body.portal-page:not(.portal-login-page) .value-card::before,
    body.portal-page:not(.portal-login-page) .feature-card::before,
    body.portal-page:not(.portal-login-page) .value-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .feature-card.pv-reveal::before {
        opacity: 1;
        transform: scaleX(1);
        background: CanvasText;
    }

    body.portal-page:not(.portal-login-page) .card-icon {
        border-color: CanvasText;
        color: CanvasText;
        background: Canvas;
    }

    body.portal-page:not(.portal-login-page) .portal-section.dark::before {
        display: none;
    }
}

/* ------------------------------------------------------------
   A10 · tabular-nums 补漏（5785 那条不含 proof-grid）
   count-up 每帧数字等宽，避免整行重排
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-proof-grid strong {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Layer A 降级：reduce 只去掉过渡与位移，不删任何内容
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.portal-page:not(.portal-login-page) .value-card::before,
    body.portal-page:not(.portal-login-page) .feature-card::before,
    body.portal-page:not(.portal-login-page) .value-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .feature-card.pv-reveal::before {
        opacity: 1;
        transform: scaleX(1);
        transition: none;
    }
}
/* ===================== Layer A 结束 ===================== */

/* ============================================================
   2026-07-26 UI polish · Layer B 滚动动效
   ============================================================ */

/* 物理排在 Layer A 之后，只追加、不修改任何既有行。
   与 portal.js 的契约（任何一方私改都会静默失效）：
     --pv-scroll     JS 写在 document.documentElement，0–1 纯数值无单位
     --pv-hero-b     JS 写在 .portal-hero，带 px，0–24px
     --pv-progress   JS 写在 .process-track，0–1，仅 ≥1101px 写入
     body.pv-past-hero                 hero 离开视口时加、回来移除（reduce 下同样工作）
     [data-pv="up"] / [data-pv="fade"] JS 运行时写在 reveal 节点上，只有这两种值
     .pv-reveal / .pv-in / --pvd       沿用现有机制，--pvd 单位 ms
     .pv-inked                         命中即加、永不移除，承载持久终态
     .process-track[data-lit]          JS 受控点亮才加；不加时 CSS 全亮兜底
     .process-step.is-lit              逐个加、永不移除
     .pv-progress-bar                  HTML 静态节点，JS 不直接触碰
   降级总纲：所有依赖 JS 的变量默认值一律取「完整态」而非「空态」，
   这一条同时覆盖 reduce / JS 报错 / 旧缓存三条路径。 */

/* ------------------------------------------------------------
   B1 · reveal 方向变体 + (0,5,1) 归位规则
   B2 · transition 只允许 transform / opacity
        （禁止混入 box-shadow：纯绘制属性、不可合成，同屏 6-9 张卡
          逐帧重绘大面积软阴影是低端安卓最典型的掉帧源）
   B3 · 入场词汇表全页只有 translateY + opacity 一种方向
        （无 3D rotateX/perspective、无左右对飞、无横向推入、无 overshoot 弹跳）
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .pv-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .58s ease var(--pvd, 0ms),
        transform .58s cubic-bezier(.22, .9, .3, 1) var(--pvd, 0ms);
    /* 不声明 will-change：约 48 个首屏之下的 reveal 节点会长期持有它，
       等于常驻 48 个合成层。opacity/transform 本就可合成，不加也不掉帧。 */
}

/* 首行 / 单列：轻位移 + 淡入 */
body.portal-page:not(.portal-login-page) [data-pv="up"].pv-reveal {
    transform: translateY(16px);
}

/* 非首行：只淡入，避免同屏多行一起上浮形成"波浪" */
body.portal-page:not(.portal-login-page) [data-pv="fade"].pv-reveal {
    transform: none;
}

/* B1 归位规则 —— 必须物理排在上面所有方向变体之后。
   6219 的 .pv-reveal.pv-in 只有 (0,4,1)，与带属性选择器的方向态同级，
   只靠源码顺序会被后写的变体压住；这里写到 (0,5,1) 才压得住。 */
body.portal-page:not(.portal-login-page) [data-pv].pv-reveal.pv-in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   B4 · 顶栏滚动进度条
   .pv-progress-bar 是 HTML 静态节点，落在 header.portal-topbar 内、
   </nav> 之后，是 topbar 的最后一个子元素。
   .portal-topbar 是 position:fixed（54 行），天然是绝对定位的包含块。
   不做右下角回到顶部 FAB（功能重复 + 中文站廉价感重灾区）。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-topbar .pv-progress-bar {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    display: block;
    height: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 2px 2px 0;
    background: var(--brand-grad);
    /* 不支持 CSS 变量的浏览器会丢掉下一行，回落到空态 ——
       进度条是纯装饰，空态（而非满格）才是它的正确降级 */
    transform: scaleX(0);
    transform: scaleX(var(--pv-scroll, 0));
    transform-origin: left center;
    pointer-events: none;
    /* 全页唯一允许常驻 will-change 的元素 */
    will-change: transform;
}

/* ------------------------------------------------------------
   B5 · process 步骤点亮
   默认态（无 JS / JS 报错 / reduce / 无 IntersectionObserver）= 全亮终态，
   只有 JS 挂上 .process-track[data-lit] 之后才允许出现暗态。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .process-step::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 22px;
    left: 22px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #a99bff 0%, var(--brand-500) 100%);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
    transition:
        transform .5s cubic-bezier(.22, .9, .3, 1),
        opacity .34s ease;
    pointer-events: none;
    content: "";
}

/* 序号芯片的暗态只用 opacity（可合成，且渐变背景无法插值） */
body.portal-page:not(.portal-login-page) .process-step strong {
    transition: opacity .42s ease;
}

/* 受控暗态：(0,6,2) / (0,6,2)，稳压 Layer A 的 (0,5,1) 深色段规则 */
body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit)::before {
    opacity: 0;
    transform: scaleX(0);
}

body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit) strong {
    opacity: .32;
}

/* 横向进度轨：必须锁进 ≥1101px。
   1774 在 ≤1100px 已把 .process-track 压成 2 列，
   981–1100px 若放行会画出一条横穿多行的错误横线。
   轨道靠 .process-track 自身 padding-top 腾空间，禁止 top 负偏移
   （负偏移会画到 .section-desc 那行字上）。移动端不做竖轨。 */
@media (min-width: 1101px) {
    body.portal-page:not(.portal-login-page) .process-track {
        position: relative;
        padding-top: 34px;
    }

    /* 底槽 */
    body.portal-page:not(.portal-login-page) .process-track::before {
        position: absolute;
        z-index: 0;
        top: 15px;
        right: 9%;
        left: 9%;
        height: 2px;
        border-radius: 2px;
        background: rgba(174, 162, 255, .16);
        pointer-events: none;
        content: "";
    }

    /* 进度：默认 scaleX(1) 完整态 —— JS 未写变量时轨道是满的，不是空的 */
    body.portal-page:not(.portal-login-page) .process-track::after {
        position: absolute;
        z-index: 1;
        top: 15px;
        right: 9%;
        left: 9%;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand-500) 0%, #a99bff 100%);
        transform: scaleX(var(--pv-progress, 1));
        transform-origin: left center;
        pointer-events: none;
        content: "";
    }
}

/* ------------------------------------------------------------
   B6 · hero 装饰矩形视差
   rotate(54deg) 一个字都不能少，且必须排在 translate3d 之后：
   3633 的最终态就是 rotate(54deg)（8893 那层没有覆盖 transform）。
   漏掉它会在 --pv-hero-b 为 0 时（reduce / JS 未加载 / 尚未滚动）
   就把那块斜置装饰矩形静态转正 —— 那不是动效 bug，是首屏静态破坏。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-hero::after {
    transform: translate3d(0, var(--pv-hero-b, 0px), 0) rotate(54deg);
}

/* ≤980：关闭视差（JS 在该断点也会 removeProperty），只保留原始 rotate */
@media (max-width: 980px) {
    body.portal-page:not(.portal-login-page) .portal-hero::after {
        transform: rotate(54deg);
    }
}

/* ------------------------------------------------------------
   B7 · 回收常驻开销（本次唯一的性能「资金来源」）
   pvFloat 在无限平移一块 680×550 的 backdrop-filter:blur(22px) 面
   （每帧重新采样并模糊背景）；pvPulse 动的是 box-shadow
   （绘制属性、不可合成、持续重绘）。这是全页现存最大的两笔常驻开销。
   注意 5703 / 5720 用的是 animation 简写，会把 animation-play-state
   一并重置为 running，所以这里必须写到 (0,4,1)/(0,4,2) 才压得住。
   ------------------------------------------------------------ */
body.portal-page.pv-past-hero:not(.portal-login-page) .portal-dashboard {
    animation-play-state: paused;
}

body.portal-page.pv-past-hero:not(.portal-login-page) .portal-eyebrow::before,
body.portal-page.pv-past-hero:not(.portal-login-page) .dash-pill::before {
    animation-play-state: paused;
}

/* ------------------------------------------------------------
   B8 · .portal-next-hint 滚动淡出
   pvHintBob 关键帧本身在动 opacity，CSS 动画优先级高于内联 style 与
   普通声明，所以必须显式 animation:none —— animation-play-state:paused
   不行（暂停仍持有动画的计算值，opacity 会卡在 .75~1 之间）。
   只动 opacity：441 行的 transform:translateX(-50%) 是水平居中用的，
   一旦被覆盖提示文字会立刻偏到右边去。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .portal-next-hint {
    transition: opacity .34s ease;
}

body.portal-page.pv-past-hero:not(.portal-login-page) .portal-next-hint {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------
   B9 · 持久终态一律挂 .pv-inked / .is-lit，绝不挂 .pv-in
   portal.js:1342 会在 duration+delay+200ms 后 remove 掉 .pv-in 与
   .pv-reveal，挂在 .pv-in 上的终态会当场回弹。
   - 卡片 accent 导轨终态：Layer A 已写 .value-card.pv-inked::before /
     .feature-card.pv-inked::before
   - process 点亮终态：由 .is-lit 承载（JS 加了永不移除）
   - hero SVG 描边（5771 pvDraw）用的是 animation-fill-mode:both，
     终态本身就持久，本层不碰它
   下面这条与默认态同值，作用是把「终态属于 .pv-inked」这条约定写死，
   防止后续有人把 .process-step::before 的默认态改成暗态时忘掉终态。
   注意它是 (0,4,2)，仍低于上面受控暗态的 (0,6,2)，
   因此 reveal 阶段提前挂上的 .pv-inked 不会抢跑点亮节奏。
   ------------------------------------------------------------ */
body.portal-page:not(.portal-login-page) .process-step.pv-inked::before {
    opacity: 1;
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   B10 · 明确不做的
   ❌ FAQ 的 grid-template-rows:0fr 展开动画 —— 保留既有 display 切换
      与 6160 行的 pvFaqOpen 淡入，本层一个字都不碰 .faq-item / .faq-a
   ❌ 回到顶部 FAB、25+ 卡片统一顶部辉光雾、hero 内新增柔光球
   ❌ 光标跟随径向高光铺到 5 类卡
   ❌ .portal-shell 内 position:sticky（49-52 的 overflow-x:hidden
      使其成为滚动容器，sticky 永不吸附），也不删那行 overflow-x
   ❌ @layer（现有 9491 行全部未分层，@layer 内声明整体排在未分层之下）
   ❌ 给 .portal-shell / body 加 transform / filter / will-change
      （会劫持 position:fixed 的包含块，连现有固定顶栏一起失效）
   ❌ 除 .pv-progress-bar 外的常驻 will-change
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4.3 · 响应式收敛（断点沿用 1100 / 980 / 640 / 430）
   ≤1100：横向进度轨天然不存在（锁在 min-width:1101）
   ≤980 ：hero 视差已在 B6 关闭；点亮与 reveal 全部保留
   ≤640 ：只保留 opacity 淡入，去掉全部位移与 scaleX
   ≤430 ：过渡再缩短一档，进度条加粗到 3px 以保证小屏可见
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="up"].pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="fade"].pv-reveal {
        transform: none;
        transition: opacity .42s ease var(--pvd, 0ms);
    }

    /* 导轨（Layer A 的卡片导轨 + Layer B 的 process 导轨）改纯淡入 */
    body.portal-page:not(.portal-login-page) .value-card::before,
    body.portal-page:not(.portal-login-page) .feature-card::before,
    body.portal-page:not(.portal-login-page) .process-step::before,
    body.portal-page:not(.portal-login-page) .value-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .feature-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .process-step.pv-inked::before,
    body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit)::before {
        transform: scaleX(1);
        transition: opacity .3s ease;
    }
}

@media (max-width: 430px) {
    body.portal-page:not(.portal-login-page) .pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="up"].pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="fade"].pv-reveal {
        transition: opacity .32s ease var(--pvd, 0ms);
    }

    body.portal-page:not(.portal-login-page) .portal-topbar .pv-progress-bar {
        height: 3px;
    }
}

/* ------------------------------------------------------------
   Layer B 降级：reduce 只去掉过渡与位移，不删任何功能。
   navSpy 的 .is-active / aria-current、顶栏 .pv-scrolled、FAQ 展开、
   顶栏滚动进度条在 reduce 下全部照常工作。
   本块必须物理排在上面所有 max-width 块之后，靠源码顺序压住它们。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    /* reveal：JS 在 reduce 下根本不挂 .pv-reveal，这里是纯保险
       （旧缓存 / 用户中途切换系统设置 / JS 半途报错） */
    body.portal-page:not(.portal-login-page) .pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="up"].pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv="fade"].pv-reveal,
    body.portal-page:not(.portal-login-page) [data-pv].pv-reveal.pv-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* 导轨与 process 点亮：直接给终态，连暗态一起中和 */
    body.portal-page:not(.portal-login-page) .value-card::before,
    body.portal-page:not(.portal-login-page) .feature-card::before,
    body.portal-page:not(.portal-login-page) .process-step::before,
    body.portal-page:not(.portal-login-page) .value-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .feature-card.pv-reveal::before,
    body.portal-page:not(.portal-login-page) .process-step.pv-inked::before,
    body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit)::before {
        opacity: 1;
        transform: scaleX(1);
        transition: none;
    }

    body.portal-page:not(.portal-login-page) .process-step strong,
    body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit) strong {
        opacity: 1;
        transition: none;
    }

    /* 横向进度轨：完整态（JS 在 reduce 下不写 --pv-progress，缺省值本就是 1） */
    body.portal-page:not(.portal-login-page) .process-track::after {
        transform: scaleX(1);
    }

    /* hero 装饰矩形：去掉视差位移，rotate(54deg) 必须留着 */
    body.portal-page:not(.portal-login-page) .portal-hero::after {
        transform: rotate(54deg);
    }

    /* 顶栏进度条：指示滚动位置是功能不是动效，继续工作，只是不带任何过渡 */
    body.portal-page:not(.portal-login-page) .portal-topbar .pv-progress-bar {
        transition: none;
    }

    /* next-hint：直接隐藏，不做淡出过渡（B7 的暂停在 reduce 下同样注册） */
    body.portal-page:not(.portal-login-page) .portal-next-hint {
        transition: none;
    }
}
/* ===================== Layer B 结束 ===================== */

/* ============================================================
   2026-07-26 UI polish · Layer C 审计修正
   针对三路审计（契约/红线/降级）提出的 medium+low 项做定点修正。
   全部为追加，不改 Layer A/B 任何既有行。
   ============================================================ */

/* --- 审计#4/#13：A3 的 .section-desc 16.5px 无 media 包裹，全断点生效。
       移动端段头会被撑高 20-30px×6 段。回落到与既有 #pricing 特例同口径。--- */
@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .section-desc {
        font-size: 15px;
        line-height: 1.75;
    }

    /* (1,3,1) 同级压 5099 的 14px/1.65，物理靠后取胜，消除段间字号错位 */
    body.portal-page:not(.portal-login-page) #pricing .section-desc {
        font-size: 15px;
        line-height: 1.75;
    }
}

/* --- 审计#3：A3 的 .rights-list 无 media 包裹，压掉了 @media(max-width:640px)
       内 5184-5196 专为移动端调过的勾选图标对齐，圆点会上移约 4.5px。--- */
@media (max-width: 640px) {
    body.portal-page:not(.portal-login-page) .rights-list li {
        line-height: 1.35;
    }

    body.portal-page:not(.portal-login-page) .rights-list li::before {
        top: .42em;
    }

    body.portal-page:not(.portal-login-page) .rights-list li::after {
        top: calc(.42em + 1px);
    }
}

/* --- 审计#18：A8 的 hero-stat 收缩无 media 包裹，压平了 8759 块
       (max-width:1180 and min-width:781) 的断点微调。
       .portal-hero-stats 实际可见区间是 ≥1181px 与 641–980px
       （9296 关掉 981-1180、8530 关掉 ≤640），
       A8「单焦点」只针对桌面宽屏，≤1180 应还原既有微调。--- */
@media (max-width: 1180px) {
    body.portal-page:not(.portal-login-page) .portal-hero-stat {
        min-height: 154px;
        padding: 15px 16px 17px !important;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat strong {
        margin-top: 14px;
        font-size: 23px;
    }

    body.portal-page:not(.portal-login-page) .portal-hero-stat .hero-stat-desc {
        margin-top: 4px;
        font-size: 11px;
        white-space: normal;
    }
}

/* --- 审计#12：.feature-card.pv-reveal::before (0,5,2) 物理靠后，压住了
       5928 的 :hover::before，入场那 0.58s 内 hover 导轨不点亮。
       补一条 (0,6,2) 稳压。--- */
body.portal-page:not(.portal-login-page) .feature-card.pv-reveal:hover::before,
body.portal-page:not(.portal-login-page) .value-card.pv-reveal:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* --- 审计#16：process 序号芯片暗态 .32 贴 #111528 深底偏暗，读不清。
       只调 opacity（渐变背景无法插值，opacity 是正确通道）。--- */
body.portal-page:not(.portal-login-page) .process-track[data-lit] .process-step:not(.is-lit) strong {
    opacity: .45;
}

/* --- 审计#9：.is-lit 此前只有否定式消费（:not(.is-lit)），没有任何正向规则。
       补一条同值正向规则把「.is-lit = 点亮终态」写死在 CSS 里，
       特异性 (0,4,2) 低于暗态 (0,6,2)，不改变任何当前行为，
       仅防止将来单方面删暗态规则导致契约静默断裂。--- */
body.portal-page:not(.portal-login-page) .process-step.is-lit::before {
    opacity: 1;
    transform: scaleX(1);
}

/* --- 审计#20：A9 的 forced-colors 兜底块物理位于 Layer A 内，
       Layer B 后来新增的渐变装饰伪元素没被覆盖，
       Windows 高对比度模式下会与底色同化而消失。--- */
@media (forced-colors: active) {
    body.portal-page:not(.portal-login-page) .process-step::before,
    body.portal-page:not(.portal-login-page) .process-track::after {
        background: CanvasText;
    }

    body.portal-page:not(.portal-login-page) .process-track::before {
        background: GrayText;
    }

    /* 纯装饰且 aria-hidden，高对比度下直接隐藏 */
    body.portal-page:not(.portal-login-page) .portal-topbar .pv-progress-bar {
        display: none;
    }
}

/* --- 审计#6：B8 的 next-hint 淡出原本挂 .pv-past-hero，
       但该类是 hero 完全离开视口才加，那时提示文字（距 hero 底边 22px）
       早已滚出屏幕上沿 —— 淡出发生在视口外，是死代码。
       改由 JS 写的 .pv-scrolled-early（y > 120）驱动，实际可见。
       .pv-past-hero 那条保留，作为兜底。--- */
body.portal-page.pv-scrolled-early:not(.portal-login-page) .portal-next-hint {
    animation: none;
    opacity: 0;
    pointer-events: none;
}
/* --- 审计#5（续）：删掉 Layer B 的 will-change 还不够，既有 6216 行的
       .pv-reveal{will-change:opacity,transform} 仍在生效 —— 实测 48 个
       首屏之下的节点常驻 will-change = 48 个常驻合成层。
       这里显式置回 auto，改由 portal.js 在真正入场那一刻内联加，
       清理时 removeProperty（pvRevealIn 里本就有这句，此前是空操作）。--- */
body.portal-page:not(.portal-login-page) .pv-reveal {
    will-change: auto;
}
/* ===================== Layer C 结束（含 #5 续） ===================== */