@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

body.phase2-surface {
    --paper: #f7f1e6;
    --paper-strong: #efe4d1;
    --surface: #fffaf2;
    --surface-strong: #f4ebdd;
    --ink: #15231d;
    --ink-soft: #57635e;
    --line: rgba(21, 35, 29, 0.12);
    --line-strong: rgba(21, 35, 29, 0.22);
    --brand: #b85c38;
    --brand-deep: #8f4527;
    --accent: #2f6a63;
    --accent-deep: #214b46;
    --highlight: #e2bc73;
    --shadow-soft: 0 12px 40px rgba(59, 40, 18, 0.08);
    --shadow-lift: 0 22px 60px rgba(59, 40, 18, 0.12);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --max-shell: 1240px;
    background:
        radial-gradient(circle at top left, rgba(226, 188, 115, 0.22), transparent 26rem),
        radial-gradient(circle at top right, rgba(47, 106, 99, 0.14), transparent 24rem),
        linear-gradient(180deg, #fbf6ee 0%, #f6efe2 100%);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
}

body.phase2-surface[data-theme="dark"] {
    --paper: #13211c;
    --paper-strong: #1a2d27;
    --surface: #1c2f29;
    --surface-strong: #223a33;
    --ink: #f6efe3;
    --ink-soft: #cad0c8;
    --line: rgba(246, 239, 227, 0.14);
    --line-strong: rgba(246, 239, 227, 0.24);
    --brand: #df855e;
    --brand-deep: #f0b190;
    --accent: #87c5b5;
    --accent-deep: #b9e1d7;
    --highlight: #d9b36a;
    background:
        radial-gradient(circle at top left, rgba(184, 92, 56, 0.18), transparent 28rem),
        radial-gradient(circle at top right, rgba(135, 197, 181, 0.13), transparent 22rem),
        linear-gradient(180deg, #162721 0%, #101b17 100%);
    color: var(--ink);
}

body.phase2-surface,
body.phase2-surface .page-header,
body.phase2-surface .hero,
body.phase2-surface .calculator-card,
body.phase2-surface .panel,
body.phase2-surface .info-section,
body.phase2-surface .discovery-panel {
    box-sizing: border-box;
}

body.phase2-surface h1,
body.phase2-surface h2,
body.phase2-surface h3,
body.phase2-surface .section-title,
body.phase2-surface .category-title,
body.phase2-surface .page-header h1,
body.phase2-surface .hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
}

body.phase2-surface p,
body.phase2-surface li,
body.phase2-surface label,
body.phase2-surface span,
body.phase2-surface small {
    color: var(--ink-soft);
}

body.phase2-surface nav {
    position: sticky;
    top: 0;
    z-index: 80;
    backdrop-filter: blur(18px);
    background: rgba(247, 241, 230, 0.82);
    border-bottom: 1px solid var(--line);
}

body.phase2-surface[data-theme="dark"] nav {
    background: rgba(19, 33, 28, 0.88);
}

body.phase2-surface .nav-container {
    max-width: var(--max-shell);
    margin: 0 auto;
    padding: 0.95rem 1rem;
}

body.phase2-surface .logo,
body.phase2-surface .nav-link,
body.phase2-surface .dropdown a {
    color: var(--ink);
}

body.phase2-surface .nav-link {
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.phase2-surface .dropdown {
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.96);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

body.phase2-surface[data-theme="dark"] .dropdown {
    background: rgba(28, 47, 41, 0.98);
}

body.phase2-home .hero {
    max-width: var(--max-shell);
    margin: 2rem auto 0;
    padding: 2.25rem;
    border-radius: 36px;
    background:
        linear-gradient(140deg, rgba(24, 39, 33, 0.96), rgba(47, 106, 99, 0.92) 62%, rgba(184, 92, 56, 0.88)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 18rem);
    background-size: cover;
    animation: none;
    box-shadow: var(--shadow-lift);
}

body.phase2-home {
    background:
        radial-gradient(circle at top left, rgba(226, 188, 115, 0.22), transparent 24rem),
        radial-gradient(circle at top right, rgba(47, 106, 99, 0.1), transparent 28rem),
        linear-gradient(180deg, #fbf6ee 0%, #f4ecde 100%) !important;
}

body.phase2-home .hero::before {
    display: none;
}

body.phase2-home .hero-content {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1.6rem;
    align-items: stretch;
}

body.phase2-home .hero-copy,
body.phase2-home .hero-stage {
    position: relative;
    z-index: 1;
}

body.phase2-home .hero h1,
body.phase2-home .hero p,
body.phase2-home .hero strong,
body.phase2-home .hero span,
body.phase2-home .hero li {
    color: #fff9f0;
}

body.phase2-home .hero h1 {
    font-size: clamp(3rem, 5vw, 5.1rem);
    line-height: 0.96;
    max-width: 10ch;
    margin-bottom: 1rem;
}

body.phase2-home .hero-subtitle {
    max-width: 42rem;
    margin: 0 0 1.5rem;
    font-size: 1.16rem;
    line-height: 1.8;
    opacity: 0.9;
}

body.phase2-home .hero-badge-row,
body.phase2-home .hero-micro-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body.phase2-home .hero-badge,
body.phase2-home .hero-metric {
    border: 1px solid rgba(255, 249, 240, 0.14);
    background: rgba(255, 249, 240, 0.08);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
}

body.phase2-home .hero-search {
    max-width: 100%;
    margin: 1.5rem 0 1.25rem;
}

body.phase2-home .search-wrapper {
    border-radius: 24px;
    background: rgba(255, 250, 242, 0.96);
    box-shadow: none;
    border: 1px solid rgba(255, 249, 240, 0.2);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    padding: 0.55rem;
}

body.phase2-home .search-wrapper input {
    color: #15231d;
    padding: 1rem 1.1rem;
    font-size: 1rem;
    border-radius: 18px;
}

body.phase2-home .search-wrapper button {
    position: static;
    transform: none;
    border-radius: 18px;
    background: var(--brand);
    padding: 0.95rem 1.4rem;
    font-size: 0.98rem;
    min-width: 9rem;
}

body.phase2-home .search-wrapper button:hover {
    transform: none;
    background: var(--brand-deep);
}

body.phase2-home .hero-stage {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 1rem;
}

body.phase2-home .hero-stage-card,
body.phase2-home .hero-stage-flow,
body.phase2-home .hero-stage-featured {
    background: rgba(255, 250, 242, 0.1);
    border: 1px solid rgba(255, 250, 242, 0.16);
    border-radius: 24px;
    padding: 1.2rem;
    backdrop-filter: blur(12px);
}

body.phase2-home .hero-stage-card strong,
body.phase2-home .hero-stage-featured strong,
body.phase2-home .hero-stage-flow strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

body.phase2-home .hero-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

body.phase2-home .hero-stage-grid .mini-card {
    background: rgba(255, 250, 242, 0.86);
    color: #15231d;
    border-radius: 18px;
    padding: 1rem;
    min-height: 7rem;
}

body.phase2-home .hero-stage-grid .mini-card strong,
body.phase2-home .hero-stage-grid .mini-card span {
    color: #15231d;
}

body.phase2-home .hero-stage-flow ol {
    margin: 0.85rem 0 0;
    padding-left: 1.2rem;
}

body.phase2-home .hero-stage-featured ul {
    display: grid;
    gap: 0.6rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}

body.phase2-home .hero-stage-featured a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    background: rgba(255, 250, 242, 0.86);
    border-radius: 16px;
    color: #15231d;
    font-weight: 700;
    text-decoration: none;
}

body.phase2-home .stats-section,
body.phase2-home .features-section,
body.phase2-home .container,
body.phase2-home .cta-section {
    background: transparent;
}

body.phase2-home .stats-section {
    margin-top: 0;
    padding: 1.5rem 1rem 0;
}

body.phase2-home .stats-container {
    max-width: var(--max-shell);
    gap: 1rem;
}

body.phase2-home .stat-item {
    text-align: left;
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.92);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}

body.phase2-home .stat-number {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ink);
    font-family: 'Fraunces', serif;
    font-size: 2.6rem;
}

body.phase2-home .features-section,
body.phase2-home .container {
    max-width: var(--max-shell);
    margin: 0 auto;
    padding: 4rem 1rem 0;
}

body.phase2-home .section-header {
    text-align: left;
    max-width: 44rem;
    margin-bottom: 2rem;
}

body.phase2-home .section-title {
    font-size: clamp(2.15rem, 3vw, 3.6rem);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body.phase2-home .features-grid {
    gap: 1rem;
}

body.phase2-home .feature-card {
    background: rgba(255, 250, 242, 0.9);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: none;
    transform: none;
}

body.phase2-home .feature-card:hover {
    box-shadow: var(--shadow-soft);
    border-color: var(--line-strong);
}

body.phase2-home .feature-icon {
    animation: none;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(47, 106, 99, 0.1);
}

body.phase2-home .category-section {
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--line);
    margin-bottom: 0;
}

body.phase2-home .category-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

body.phase2-home .category-title {
    font-size: 2rem;
}

body.phase2-home .view-all-btn,
body.phase2-home .cta-button,
body.phase2-surface .discovery-pill,
body.phase2-surface .calculator-card a {
    border-radius: 999px;
    padding: 0.82rem 1.2rem;
    background: var(--brand);
    color: #fff7ef;
    font-weight: 700;
    text-decoration: none;
    border: none;
    box-shadow: none;
}

body.phase2-home .view-all-btn:hover,
body.phase2-home .cta-button:hover,
body.phase2-surface .discovery-pill:hover,
body.phase2-surface .calculator-card a:hover {
    background: var(--brand-deep);
    transform: none;
}

body.phase2-home .calculator-grid,
body.phase2-hub .calculators-grid,
body.phase2-directory .calculators-grid {
    gap: 1rem;
}

body.phase2-home .calculator-card,
body.phase2-hub .calculator-card,
body.phase2-directory .calculator-item,
body.phase2-directory .calculator-list-item {
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.92);
    box-shadow: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.phase2-home .calculator-card:hover,
body.phase2-hub .calculator-card:hover,
body.phase2-directory .calculator-item:hover,
body.phase2-directory .calculator-list-item:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-soft);
}

body.phase2-home .calculator-card h3,
body.phase2-hub .calculator-card h3,
body.phase2-directory .calculator-item h3,
body.phase2-directory .calculator-list-item h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.28rem;
}

body.phase2-home .card-icon,
body.phase2-directory .calculator-item .icon,
body.phase2-directory .calculator-list-item .icon {
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(47, 106, 99, 0.1);
    margin-bottom: 0.9rem;
    font-size: 1.55rem;
}

body.phase2-home .cta-section {
    max-width: var(--max-shell);
    margin: 4rem auto 0;
    padding: 0 1rem 4rem;
}

body.phase2-home .cta-content {
    border-radius: 32px;
    background: linear-gradient(140deg, rgba(24, 39, 33, 0.96), rgba(184, 92, 56, 0.88));
    padding: 2.5rem;
    text-align: left;
}

body.phase2-home .cta-title,
body.phase2-home .cta-description {
    color: #fff8ef;
}

body.phase2-home .cta-button {
    display: inline-flex;
    margin-top: 1.25rem;
    background: #fff7ef;
    color: var(--brand-deep);
}

body.phase2-home .cta-button:hover {
    background: #f3e4d5;
}

body.phase2-hub .category-page,
body.phase2-directory .directory-page,
body.phase2-calculator .calculator-container {
    max-width: var(--max-shell);
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.phase2-hub .page-header,
body.phase2-directory .page-header {
    padding: 2.6rem;
    border-radius: 32px;
    margin-bottom: 1.75rem;
    text-align: left;
    background:
        linear-gradient(145deg, rgba(24, 39, 33, 0.98), rgba(47, 106, 99, 0.9) 58%, rgba(184, 92, 56, 0.84)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 16rem);
    box-shadow: var(--shadow-lift);
}

body.phase2-hub .page-header h1,
body.phase2-directory .page-header h1,
body.phase2-hub .page-header p,
body.phase2-directory .page-header p {
    color: #fff9f0;
}

body.phase2-hub .topic-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 1.5rem;
}

body.phase2-hub .topic-rail a {
    padding: 0.75rem 1rem;
    background: rgba(255, 250, 242, 0.84);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
}

body.phase2-hub .topic-rail a:hover {
    border-color: var(--line-strong);
}

body.phase2-surface .discovery-shell,
body.phase2-directory .search-filter-section,
body.phase2-directory .stats-bar {
    border-radius: 28px;
    background: rgba(255, 250, 242, 0.88);
    border: 1px solid var(--line);
    box-shadow: none;
}

body.phase2-surface .discovery-panel,
body.phase2-directory .calculator-item,
body.phase2-directory .calculator-list-item {
    background: rgba(255, 250, 242, 0.86);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: none;
}

body.phase2-surface .discovery-search input,
body.phase2-directory .search-box input,
body.phase2-calculator .form-group input,
body.phase2-calculator .form-group select,
body.phase2-calculator .input-group input,
body.phase2-calculator .input-group select {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 251, 244, 0.92);
    color: var(--ink);
}

body.phase2-hub .subcategory-section {
    padding: 1.6rem;
    margin-bottom: 1.5rem;
    border-radius: 28px;
    background: rgba(255, 250, 242, 0.86);
    border: 1px solid var(--line);
}

body.phase2-hub .subcategory-header {
    border-left: 0;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

body.phase2-hub .subcategory-header h2 {
    font-size: 1.8rem;
}

body.phase2-calculator .calculator-container > h1,
body.phase2-calculator .calculator-container header h1 {
    font-size: clamp(2.4rem, 4vw, 4rem);
    margin-bottom: 0.5rem;
}

body.phase2-calculator main.calculator-container > h1,
body.phase2-calculator main.calculator-container > .subtitle {
    color: #fff7ef !important;
}

body.phase2-calculator main.calculator-container > .subtitle {
    opacity: 0.88;
}

body.phase2-calculator .subtitle,
body.phase2-calculator .calculator-container header p {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--ink-soft);
}

body.phase2-calculator .calculator-grid {
    gap: 1.25rem;
}

body.phase2-calculator .calculator-section,
body.phase2-calculator .results-section,
body.phase2-calculator .input-section,
body.phase2-calculator .chart-container,
body.phase2-calculator .info-section,
body.phase2-calculator .result-card {
    border-radius: 24px;
    background: rgba(255, 250, 242, 0.9);
    border: 1px solid var(--line);
    box-shadow: none;
    color: var(--ink);
}

body.phase2-calculator .results-section,
body.phase2-calculator .result-card {
    background:
        linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(239, 228, 209, 0.9));
}

body.phase2-calculator .calculate-btn {
    border-radius: 18px;
    background: var(--brand);
    color: #fff8ef;
}

body.phase2-calculator .calculate-btn:hover {
    background: var(--brand-deep);
}

body.phase2-calculator .result-value,
body.phase2-calculator .result-card .value,
body.phase2-calculator .result-card span {
    color: var(--ink);
    font-family: 'Fraunces', serif;
}

body.phase2-calculator .faq-question {
    background: rgba(255, 251, 244, 0.94);
    border-radius: 18px;
}

body.phase2-calculator .faq-question h3 {
    color: var(--ink);
}

body.phase2-surface .modern-footer {
    margin-top: 3rem;
    background: #14211c;
    color: #f5ebdc;
}

body.phase2-surface .footer-wave {
    display: none;
}

body.phase2-surface .footer-content-wrapper {
    max-width: var(--max-shell);
    margin: 0 auto;
    padding: 3rem 1rem;
}

body.phase2-surface .footer-logo h3,
body.phase2-surface .footer-column h4,
body.phase2-surface .footer-description,
body.phase2-surface .footer-links a,
body.phase2-surface .copyright,
body.phase2-surface .developer-credit {
    color: #f5ebdc;
}

body.phase2-surface .footer-links a {
    text-decoration: none;
    opacity: 0.86;
}

body.phase2-surface .footer-links a:hover {
    opacity: 1;
}

body.phase2-surface .footer-divider {
    border-color: rgba(245, 235, 220, 0.16);
}

@media (max-width: 1024px) {
    body.phase2-home .hero-content,
    body.phase2-calculator .calculator-grid {
        grid-template-columns: 1fr;
    }

    body.phase2-home .hero-stage {
        order: -1;
    }

    body.phase2-home .category-header,
    body.phase2-hub .subcategory-header {
        grid-template-columns: 1fr;
        display: grid;
        align-items: start;
    }
}

@media (max-width: 768px) {
    body.phase2-home .hero,
    body.phase2-hub .page-header,
    body.phase2-directory .page-header,
    body.phase2-home .cta-content {
        padding: 1.5rem;
        border-radius: 26px;
    }

    body.phase2-home .search-wrapper {
        grid-template-columns: 1fr;
    }

    body.phase2-home .search-wrapper button {
        width: 100%;
    }

    body.phase2-home .hero-stage-grid,
    body.phase2-home .features-grid,
    body.phase2-home .calculator-grid,
    body.phase2-hub .calculators-grid,
    body.phase2-directory .calculators-grid {
        grid-template-columns: 1fr;
    }

    body.phase2-directory .stats-bar {
        align-items: flex-start;
    }
}

body.phase2-surface .brand-mark {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    place-items: center;
    color: var(--brand);
}

body.phase2-surface .brand-mark svg,
body.phase2-home .topic-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.phase2-home .home-shell {
    padding: 0 1rem 4rem;
}

body.phase2-home .editorial-section {
    max-width: var(--max-shell);
    margin: 0 auto;
}

body.phase2-home .hero {
    padding: 2rem 1.8rem;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(226, 188, 115, 0.16), transparent 20rem),
        linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(247, 241, 230, 0.98));
    box-shadow: 0 24px 80px rgba(59, 40, 18, 0.08);
    border: 1px solid rgba(21, 35, 29, 0.06);
}

body.phase2-home .hero-copy,
body.phase2-home .hero-art {
    position: relative;
    z-index: 1;
}

body.phase2-home .hero h1,
body.phase2-home .hero p,
body.phase2-home .hero strong {
    color: var(--ink);
}

body.phase2-home .hero h1 {
    line-height: 0.94;
}

body.phase2-home .hero h1 span {
    color: var(--brand);
    font-style: italic;
    font-weight: 500;
}

body.phase2-home .hero-subtitle {
    max-width: 30rem;
    font-size: 1.03rem;
}

body.phase2-home .search-wrapper {
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(59, 40, 18, 0.08);
    border: 1px solid rgba(21, 35, 29, 0.1);
    gap: 0;
    padding: 0;
    overflow: hidden;
}

body.phase2-home .search-wrapper input {
    padding: 1rem 1.15rem;
    border-radius: 0;
}

body.phase2-home .search-wrapper button {
    border-radius: 0;
    background: linear-gradient(180deg, #e87522, #c94d14);
    padding: 0.95rem 1.65rem;
    min-width: 7.5rem;
}

body.phase2-home .hero-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    font-size: 0.9rem;
}

body.phase2-home .hero-popular span {
    color: var(--ink);
    font-weight: 700;
}

body.phase2-home .hero-popular a {
    color: var(--ink-soft);
    text-decoration: none;
}

body.phase2-home .hero-popular a:hover {
    color: var(--brand);
}

body.phase2-home .hero-art {
    min-height: 27rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.phase2-home .hero-banner-image {
    position: relative;
    z-index: 2;
    width: min(31rem, 100%);
    height: auto;
    filter: drop-shadow(0 26px 44px rgba(27, 35, 33, 0.16));
}

body.phase2-home .hero-orb {
    position: absolute;
    border-radius: 999px;
    z-index: 1;
}

body.phase2-home .hero-orb-primary {
    width: 15rem;
    height: 15rem;
    background: radial-gradient(circle at 35% 35%, #ef8e34, #cf5b1f);
    top: 0.9rem;
    left: 3.2rem;
}

body.phase2-home .hero-orb-secondary {
    width: 10rem;
    height: 10rem;
    background: #0f4c4b;
    left: 0.3rem;
    bottom: 2.3rem;
}

body.phase2-home .trust-seal {
    position: absolute;
    top: 2.2rem;
    right: 0.8rem;
    z-index: 3;
    width: 6.9rem;
    height: 6.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    color: var(--ink);
    background: rgba(255, 250, 242, 0.98);
    border: 1px dashed rgba(184, 92, 56, 0.5);
    box-shadow: 0 16px 34px rgba(59, 40, 18, 0.1);
}

body.phase2-home .trust-seal span,
body.phase2-home .trust-seal strong {
    display: block;
    font-size: 0.72rem;
    line-height: 1.25;
}

body.phase2-home .trust-seal strong {
    margin-top: 0.15rem;
    font-size: 0.76rem;
}

body.phase2-home .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

body.phase2-home .section-heading-row h2 {
    font-size: clamp(1.95rem, 3vw, 2.6rem);
    margin-bottom: 0.25rem;
}

body.phase2-home .section-heading-row p {
    margin: 0;
}

body.phase2-home .section-link,
body.phase2-home .journey-link {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

body.phase2-home .section-link::after,
body.phase2-home .journey-link::after {
    content: "→";
    margin-left: 0.4rem;
}

body.phase2-home .category-browser,
body.phase2-home .featured-section {
    padding-top: 2.5rem;
}

body.phase2-home .topic-card-grid,
body.phase2-home .featured-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

body.phase2-home .topic-card,
body.phase2-home .featured-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 13.5rem;
    padding: 1.25rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.92);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.phase2-home .topic-card:hover,
body.phase2-home .featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(184, 92, 56, 0.24);
}

body.phase2-home .topic-icon,
body.phase2-home .featured-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    color: var(--brand);
    border-radius: 14px;
    border: 1px solid rgba(184, 92, 56, 0.16);
    background: rgba(232, 117, 34, 0.06);
}

body.phase2-home .topic-card h3,
body.phase2-home .featured-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

body.phase2-home .topic-card p,
body.phase2-home .featured-card p {
    margin: 0;
    line-height: 1.55;
    font-size: 0.9rem;
}

body.phase2-home .topic-count {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
}

body.phase2-home .featured-icon {
    font-size: 1.15rem;
    color: var(--accent);
}

body.phase2-home .journey-band {
    margin-top: 2.8rem;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #083f45, #052f34);
    color: #ecf4ef;
    display: grid;
    grid-template-columns: minmax(220px, 1.05fr) minmax(0, 2.2fr);
}

body.phase2-home .journey-intro {
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.phase2-home .journey-intro h2,
body.phase2-home .journey-intro p,
body.phase2-home .journey-intro a,
body.phase2-home .journey-card h3,
body.phase2-home .journey-card p,
body.phase2-home .journey-card span {
    color: #ecf4ef;
}

body.phase2-home .journey-card-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.phase2-home .journey-card {
    min-height: 12.2rem;
    padding: 1.7rem 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04));
}

body.phase2-home .journey-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    margin: 0 0 0.85rem;
}

body.phase2-home .journey-card p {
    margin: 0 0 1.2rem;
    font-size: 0.9rem;
    line-height: 1.55;
    opacity: 0.9;
}

body.phase2-home .journey-card span {
    font-size: 0.82rem;
    font-weight: 700;
}

body.phase2-home .stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 2.4rem;
}

body.phase2-home .stat-chip {
    padding: 1.3rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.85);
    text-align: center;
}

body.phase2-home .stat-chip strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    color: var(--ink);
}

body.phase2-home .stat-chip span {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

body.phase2-home .home-footer {
    max-width: var(--max-shell);
    margin: 3rem auto 2rem;
    padding: 0 1rem 0;
    border-top: 0;
    position: relative;
}

body.phase2-home .home-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2rem 0 0;
    border-top: 1px solid rgba(245, 235, 220, 0.14);
}

body.phase2-home .home-footer-brand p {
    max-width: 20rem;
}

body.phase2-home .home-footer-spotlight {
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.6rem;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(232, 117, 34, 0.12), transparent 16rem),
        linear-gradient(180deg, rgba(19, 33, 28, 0.98), rgba(11, 23, 20, 0.98));
    border: 1px solid rgba(245, 235, 220, 0.1);
    box-shadow: var(--shadow-lift);
}

body.phase2-home .home-footer-kicker {
    color: rgba(245, 235, 220, 0.74);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

body.phase2-home .home-footer-spotlight-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
}

body.phase2-home .home-footer-spotlight h2,
body.phase2-home .home-footer-spotlight p {
    color: #f5ebdc;
    max-width: 40rem;
}

body.phase2-home .home-footer-spotlight h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(2rem, 3vw, 2.9rem);
}

body.phase2-home .home-footer-spotlight p {
    margin: 0;
    opacity: 0.88;
}

body.phase2-home .home-footer-cta {
    flex: 0 0 auto;
    align-self: center;
    padding: 0.95rem 1.35rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #e87522, #c94d14);
    color: #fff7ef;
    text-decoration: none;
    font-weight: 800;
}

body.phase2-home .home-footer-brand {
    padding-right: 1rem;
}

body.phase2-home .home-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

body.phase2-home .footer-meta-chip {
    min-width: 5.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 16px;
    border: 1px solid rgba(245, 235, 220, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

body.phase2-home .footer-meta-chip strong,
body.phase2-home .footer-meta-chip span {
    display: block;
    color: #f5ebdc;
}

body.phase2-home .footer-meta-chip strong {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
}

body.phase2-home .footer-meta-chip span {
    font-size: 0.75rem;
    opacity: 0.72;
}

body.phase2-home .home-footer-social {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.15rem;
}

body.phase2-home .home-footer-social a {
    width: 2.55rem;
    height: 2.55rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #f5ebdc;
    text-decoration: none;
    border: 1px solid rgba(245, 235, 220, 0.16);
    background: rgba(255, 255, 255, 0.03);
}

body.phase2-home .home-footer-column {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

body.phase2-home .home-footer-column h4 {
    margin: 0;
    color: var(--ink);
}

body.phase2-home .home-footer-column a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.94rem;
}

body.phase2-home .home-footer-column a:hover {
    color: var(--brand);
}

body.phase2-home .home-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0 0;
    margin-top: 1.4rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.82rem;
}

body.phase2-home .home-footer-mark {
    display: grid;
    place-items: center;
    margin: 1rem auto 0;
    color: rgba(245, 235, 220, 0.46);
    font-size: 1.4rem;
}

body.phase2-home .nav-utility-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

body.phase2-home .utility-icon {
    font-size: 1rem;
}

body.phase2-home .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.phase2-hub .page-header {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: end;
    min-height: 21rem;
    padding: 2rem;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(90deg, rgba(8, 63, 69, 0.98) 0%, rgba(8, 63, 69, 0.98) 72%, rgba(8, 63, 69, 0.08) 72%),
        url("../images/design/finance-hero-illustration.svg") right center / auto 100% no-repeat;
}

body.phase2-hub .page-header h1,
body.phase2-hub .page-header p {
    position: relative;
    z-index: 1;
    color: #f6efe3;
    max-width: 34rem;
    text-align: left;
}

body.phase2-hub .page-header::after {
    content: "";
    position: absolute;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ef8e34, #cf5b1f);
    bottom: -3.5rem;
    left: 50%;
    transform: translateX(-10%);
    opacity: 0.95;
}

body.phase2-calculator .calculator-container {
    position: relative;
    padding-top: 3rem;
}

body.phase2-calculator .calculator-container::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 2rem;
    width: 23rem;
    height: 16rem;
    background: url("../images/design/calculator-house-illustration.svg") center / contain no-repeat;
    pointer-events: none;
}

body.phase2-calculator .calculator-container > h1,
body.phase2-calculator .calculator-container > .subtitle {
    text-align: left;
    max-width: 40rem;
    margin-left: 0;
    margin-right: 22rem;
    color: var(--ink) !important;
}

body.phase2-calculator .calculator-container > .subtitle {
    opacity: 1;
}

body.phase2-calculator .calculator-section,
body.phase2-calculator .results-section,
body.phase2-calculator .chart-container {
    box-shadow: var(--shadow-soft);
}

@media (max-width: 1024px) {
    body.phase2-home .hero-content,
    body.phase2-home .topic-card-grid,
    body.phase2-home .featured-grid,
    body.phase2-home .journey-card-row,
    body.phase2-home .stat-strip,
    body.phase2-home .home-footer-grid,
    body.phase2-calculator .calculator-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.phase2-home .hero-content,
    body.phase2-home .journey-band {
        grid-template-columns: 1fr;
    }

    body.phase2-home .hero-art {
        order: 2;
    }

    body.phase2-home .journey-intro {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.phase2-hub .page-header {
        background:
            linear-gradient(180deg, rgba(8, 63, 69, 0.98), rgba(8, 63, 69, 0.94)),
            url("../images/design/finance-hero-illustration.svg") center / cover no-repeat;
        min-height: 18rem;
    }

    body.phase2-calculator .calculator-container::before {
        position: relative;
        display: block;
        top: auto;
        right: auto;
        width: 100%;
        height: 13rem;
        margin-bottom: 1rem;
    }

    body.phase2-calculator .calculator-container > h1,
    body.phase2-calculator .calculator-container > .subtitle {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    body.phase2-home .topic-card-grid,
    body.phase2-home .featured-grid,
    body.phase2-home .journey-card-row,
    body.phase2-home .stat-strip,
    body.phase2-home .home-footer-grid,
    body.phase2-calculator .calculator-grid {
        grid-template-columns: 1fr;
    }

    body.phase2-home .section-heading-row,
    body.phase2-home .home-footer-bottom,
    body.phase2-home .home-footer-spotlight-row {
        flex-direction: column;
        align-items: flex-start;
    }

    body.phase2-home .hero-art {
        min-height: 20rem;
    }

    body.phase2-home .hero-orb-primary {
        left: 1rem;
        width: 11rem;
        height: 11rem;
    }

    body.phase2-home .hero-orb-secondary {
        width: 7rem;
        height: 7rem;
    }

    body.phase2-home .trust-seal {
        width: 5.6rem;
        height: 5.6rem;
    }
}