:root {
        --background: #fbf9fb;
        --surface: #ffffff;
        --surface-low: #f6f3f5;
        --surface-mid: #f0edef;
        --surface-high: #eae7e9;
        --ink: #1b1b1d;
        --ink-soft: #45464d;
        --outline: #c6c6cd;
        --outline-soft: rgba(198, 198, 205, 0.65);
        --navy: #131b2e;
        --teal: #0ac7a2;
        --teal-soft: #e7fbf6;
        --violet: #4648d4;
        --violet-bright: #6063ee;
        --success: #0ac7a2;
        --warning: #f59e0b;
        --shadow: 0 24px 60px rgba(19, 27, 46, 0.12);
        --max-width: 1180px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif;
        color: var(--ink);
        background: var(--background);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      img {
        display: block;
        max-width: 100%;
      }

      .container {
        width: min(var(--max-width), calc(100% - 2rem));
        margin: 0 auto;
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(198, 198, 205, 0.55);
        background: rgba(252, 248, 250, 0.92);
        backdrop-filter: blur(18px);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        min-height: 76px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        font-weight: 800;
      }

      .brand-mark {
        display: grid;
        place-items: center;
        width: 4.35rem;
        border-radius: 14px;
        overflow: hidden;
      }

      .brand-mark img {
        display: block;
        width: 100%;
        object-fit: cover;
      }

      .brand-copy {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }

      .brand-copy strong {
        font-size: 1.05rem;
      }

      .brand-copy span {
        color: var(--ink-soft);
        font-size: 0.8rem;
        font-weight: 650;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 1.15rem;
        color: var(--ink-soft);
        font-size: 0.94rem;
        font-weight: 700;
      }

      .nav-links a:hover,
      .nav-links a:focus-visible {
        color: var(--ink);
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        min-height: 52px;
        padding: 0.9rem 1.25rem;
        border: 1px solid #000000;
        border-radius: 8px;
        background: var(--navy);
        color: #ffffff;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
      }

      .button:hover,
      .button:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(19, 27, 46, 0.16);
      }

      .button.secondary {
        border-color: var(--outline);
        background: var(--surface);
        color: var(--ink);
      }

      .hero {
        position: relative;
        padding: 0;
        overflow: hidden;
        border-bottom: 1px solid var(--outline-soft);
        background: var(--teal-soft);
      }

      .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.82fr);
        gap: clamp(2rem, 5vw, 4.25rem);
        align-items: center;
        min-height: min(760px, calc(100svh - 76px));
        padding: clamp(3.2rem, 6vw, 5.5rem) 0;
      }

      .hero-copy {
        max-width: 600px;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--violet);
        font-size: 0.86rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 0.62rem;
        height: 0.62rem;
        border-radius: 50%;
        background: currentColor;
      }

      .hero h1 {
        margin: 0.9rem 0 1.05rem;
        max-width: 11ch;
        font-size: clamp(3.35rem, 6.6vw, 5.1rem);
        line-height: 0.95;
        letter-spacing: -0.035em;
      }

      .hero-copy p {
        margin: 0;
        max-width: 46ch;
        color: var(--ink-soft);
        font-size: clamp(1rem, 1.25vw, 1.12rem);
        line-height: 1.65;
      }

      .hero-copy strong {
        color: var(--ink);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.8rem;
        margin-top: 1.55rem;
      }

      .hero-text-link {
        display: inline-flex;
        color: var(--ink-soft);
        font-size: 0.92rem;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 0.22em;
      }

      .hero-text-link:hover,
      .hero-text-link:focus-visible {
        color: var(--ink);
      }

      .hero-loop {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.55rem;
        max-width: 520px;
        margin-top: 1.6rem;
      }

      .hero-loop span {
        padding: 0.48rem 0.65rem;
        border: 1px solid rgba(19, 27, 46, 0.1);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.56);
        color: var(--ink-soft);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .hero-visual {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 420px;
        padding: clamp(1rem, 3vw, 2rem);
      }

      .hero-visual::before {
        content: "";
        position: absolute;
        inset: 12% 0 8% 18%;
        border-radius: 8px;
        background: var(--violet);
        opacity: 0.9;
      }

      .hero-visual::after {
        content: "";
        position: absolute;
        top: 18%;
        right: 8%;
        width: 46%;
        height: 56%;
        border: 2px solid var(--navy);
        transform: translate(1rem, -1rem);
      }

      .lesson-preview {
        position: relative;
        z-index: 1;
        width: min(100%, 380px);
        padding: clamp(1.2rem, 3vw, 1.7rem);
        border: 2px solid #000000;
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 24px 70px rgba(19, 27, 46, 0.2);
      }

      .preview-topline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: var(--ink-soft);
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .preview-topline strong {
        color: var(--violet);
      }

      .preview-title {
        margin: 1.1rem 0 0.65rem;
        font-size: clamp(2rem, 4vw, 3.1rem);
        line-height: 0.98;
        letter-spacing: -0.05em;
        font-weight: 850;
      }

      .lesson-preview p {
        margin: 0;
        color: var(--ink-soft);
        line-height: 1.6;
      }

      .preview-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.55rem;
        margin-top: 1.25rem;
      }

      .preview-actions span {
        padding: 0.65rem 0.55rem;
        border-radius: 6px;
        background: var(--navy);
        color: #ffffff;
        font-size: 0.82rem;
        font-weight: 850;
        text-align: center;
      }

      .preview-review {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: center;
        margin-top: 1rem;
        padding: 0.9rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: var(--surface-low);
      }

      .preview-review strong {
        display: block;
        margin-top: 0.25rem;
        font-size: 1rem;
      }

      .review-count {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 8px;
        background: var(--success);
        color: #ffffff;
        font-weight: 850;
      }

      .phone-stack {
        position: relative;
        min-height: 590px;
      }

      .phone {
        position: absolute;
        width: min(100%, 330px);
        border: 10px solid #000000;
        border-radius: 46px;
        background: var(--background);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .phone.primary {
        right: 0;
        top: 0;
        z-index: 2;
      }

      .phone.secondary-phone {
        left: 0;
        bottom: 0;
        z-index: 1;
        transform: translateX(-1.4rem) scale(0.78);
        opacity: 0.98;
      }

      .status-hole {
        width: 24px;
        height: 24px;
        margin: 18px auto 0;
        border-radius: 50%;
        background: #000000;
      }

      .phone-screen {
        padding: 2rem 1.15rem 1.3rem;
      }

      .phone h3,
      .phone h4,
      .phone p {
        margin: 0;
      }

      .phone-title {
        font-size: 1.95rem;
        line-height: 1.1;
        letter-spacing: -0.05em;
      }

      .phone-subtitle {
        margin-top: 0.55rem;
        color: var(--ink-soft);
        font-size: 1rem;
        line-height: 1.45;
      }

      .navy-card {
        margin-top: 1.4rem;
        padding: 1.25rem;
        border: 2px solid #000000;
        border-radius: 8px;
        background: var(--navy);
        color: #ffffff;
      }

      .navy-card .label,
      .question-card .label {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        color: rgba(255, 255, 255, 0.95);
        font-size: 0.82rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .navy-card h4 {
        font-size: 2rem;
        line-height: 1.1;
        letter-spacing: -0.06em;
      }

      .navy-card p {
        margin-top: 0.85rem;
        color: rgba(255, 255, 255, 0.78);
        font-size: 1rem;
        line-height: 1.5;
      }

      .card-action {
        margin-top: 1.35rem;
        padding: 0.8rem 1rem;
        border-radius: 8px;
        background: #ffffff;
        color: var(--navy);
        text-align: center;
        font-weight: 800;
      }

      .learning-state {
        margin-top: 1.2rem;
        padding: 1rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.54);
      }

      .card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 0.85rem;
      }

      .small-label {
        color: var(--ink-soft);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .linkish {
        color: var(--violet);
        font-weight: 800;
      }

      .state-panel {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 1rem;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        background: var(--surface-mid);
      }

      .score-ring {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 8px;
        background: var(--success);
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 850;
        letter-spacing: -0.06em;
      }

      .state-panel strong {
        display: block;
        font-size: 1.1rem;
        letter-spacing: -0.04em;
      }

      .state-panel span {
        display: block;
        margin-top: 0.2rem;
        color: var(--success);
        font-weight: 750;
      }

      .phone-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.45rem;
        margin: 1.4rem -0.25rem -0.3rem;
        padding-top: 0.9rem;
        border-top: 1px solid var(--outline-soft);
        color: var(--ink-soft);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: center;
      }

      .phone-tabs .active {
        color: var(--violet);
      }

      .paths-hero {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 1rem;
        align-items: center;
        padding: 1rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: var(--surface-low);
      }

      .book-icon,
      .plus-icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 8px;
        background: var(--violet-bright);
        color: #ffffff;
        font-size: 1.7rem;
        font-weight: 800;
      }

      .book-icon {
        font-size: 1.2rem;
      }

      .paths-list {
        display: grid;
        gap: 0.8rem;
        margin-top: 1.2rem;
      }

      .path-item,
      .create-path {
        padding: 1rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: #ffffff;
      }

      .path-item.review {
        border-color: var(--violet-bright);
        background: rgba(96, 99, 238, 0.06);
      }

      .path-item.strong {
        border-color: var(--success);
        background: rgba(16, 185, 129, 0.06);
      }

      .path-item strong {
        display: block;
        font-size: 1.35rem;
        letter-spacing: -0.04em;
      }

      .path-item span {
        display: inline-flex;
        margin: 0.65rem 0.35rem 0 0;
        padding: 0.3rem 0.55rem;
        border-radius: 6px;
        background: var(--surface-mid);
        font-size: 0.85rem;
        font-weight: 800;
      }

      .create-path {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 0.9rem;
        align-items: center;
        border-style: dashed;
        border-color: var(--violet-bright);
        background: transparent;
        color: var(--violet);
      }

      .create-path .plus-icon {
        width: 44px;
        height: 44px;
      }

      .product-section {
        padding: clamp(4.5rem, 8vw, 7rem) 0 0;
      }

      .post-eyebrow {
        display: block;
        margin-bottom: 1.4rem;
        color: var(--violet);
        font-size: 0.86rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .feature-panel,
      .faq-panel {
        padding: clamp(2.2rem, 6vw, 5.4rem);
        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 28px 80px rgba(70, 72, 212, 0.08);
      }

      .feature-intro {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.85fr);
        gap: clamp(2rem, 6vw, 6rem);
        align-items: start;
        margin-bottom: clamp(3rem, 7vw, 5rem);
      }

      .feature-intro h2,
      .center-heading h2,
      .final-cta h2 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(2.4rem, 5.2vw, 4.3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
      }

      .feature-intro p,
      .center-heading p,
      .final-cta p {
        margin: 0;
        color: #526074;
        font-size: 1.08rem;
        line-height: 1.75;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.6rem, 5vw, 5rem);
      }

      .feature-item h3 {
        margin: 1.6rem 0 0.7rem;
        font-size: clamp(1.35rem, 2vw, 1.75rem);
        line-height: 1.15;
        letter-spacing: -0.03em;
      }

      .feature-item p {
        margin: 0;
        color: #526074;
        line-height: 1.65;
      }

      .line-icon {
        position: relative;
        width: 52px;
        height: 52px;
      }

      .line-icon::before,
      .line-icon::after {
        content: "";
        position: absolute;
        border: 3px solid var(--violet);
      }

      .icon-step::before {
        inset: 12px 5px 9px;
        border-radius: 7px;
      }

      .icon-step::after {
        top: 5px;
        right: 0;
        width: 22px;
        height: 18px;
        border-width: 0 3px 3px 0;
        transform: rotate(-45deg);
      }

      .icon-check::before {
        inset: 8px 9px;
        border-radius: 5px 5px 2px 2px;
        border-top-width: 9px;
      }

      .icon-check::after {
        left: 18px;
        top: 17px;
        width: 13px;
        height: 22px;
        border-width: 0 3px 3px 0;
        transform: rotate(42deg);
      }

      .icon-shield::before {
        inset: 4px 10px 3px;
        border-radius: 24px 24px 18px 18px;
        transform: perspective(80px) rotateX(-8deg);
      }

      .icon-shield::after {
        top: 9px;
        left: 25px;
        height: 34px;
        border-width: 0 0 0 3px;
      }

      .why-section {
        padding-top: clamp(4.5rem, 8vw, 7rem);
      }

      .center-heading {
        max-width: 650px;
        margin: 0 auto clamp(2.6rem, 5vw, 4rem);
        text-align: center;
      }

      .center-heading .post-eyebrow {
        margin-bottom: 0.7rem;
      }

      .center-heading p {
        max-width: 560px;
        margin: 1.1rem auto 0;
      }

      .why-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
      }

      .why-card {
        min-height: 270px;
        padding: clamp(2rem, 4vw, 3.2rem);
        border-radius: 22px;
        background: var(--teal-soft);
        margin-bottom: 64px;
      }

      .stat-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .stat-card strong {
        color: var(--teal);
        font-size: clamp(5rem, 10vw, 8.2rem);
        line-height: 0.82;
        letter-spacing: -0.08em;
      }

      .stat-card p,
      .loop-card-new h3,
      .wide-card h3 {
        margin: 0;
        color: var(--navy);
        font-size: clamp(1.55rem, 3vw, 2.2rem);
        line-height: 1.24;
        letter-spacing: -0.04em;
      }

      .loop-card-new {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .mini-flow {
        --flow-gap: clamp(0.9rem, 3vw, 1.8rem);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--flow-gap);
        margin-top: 2rem;
      }

      .mini-flow span {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 86px;
        height: 86px;
        border-radius: 18px;
        background: var(--teal);
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 850;
      }

      .mini-flow span:nth-child(2) {
        background: #ffffff;
        color: var(--navy);
        box-shadow: inset 0 0 0 1px #d7e2e5;
      }

      .mini-flow span + span::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: var(--flow-gap);
        height: 1px;
        background: #b6c7d0;
        transform: translateY(-50%);
      }

      .wide-card {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
        min-height: 330px;
        overflow: hidden;
      }

      .wide-card p {
        margin: 1.2rem 0 0;
        max-width: 360px;
        color: #526074;
        line-height: 1.7;
      }

      .chart-card {
        min-height: 300px;
        padding: clamp(1.5rem, 4vw, 2.2rem);
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 22px 70px rgba(70, 72, 212, 0.08);
      }

      .chart-card span {
        color: #526074;
        font-size: 0.86rem;
      }

      .chart-card strong {
        display: block;
        margin-top: 0.35rem;
        color: var(--navy);
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        letter-spacing: -0.05em;
      }

      .chart-line {
        position: relative;
        height: 130px;
        margin: 1.5rem 0 1.2rem;
        border-bottom: 1px solid #dbe4e7;
        background: linear-gradient(180deg, rgba(10, 199, 162, 0.22), rgba(10, 199, 162, 0));
        clip-path: polygon(0 78%, 18% 54%, 38% 42%, 58% 32%, 74% 25%, 88% 10%, 100% 0, 100% 100%, 0 100%);
      }

      .chart-line::before {
        content: "";
        position: absolute;
        inset: 0;
        border-top: 3px solid var(--violet);
        transform: skewY(-12deg) translateY(74px);
        transform-origin: left;
      }

      .chart-labels {
        display: flex;
        justify-content: space-between;
        color: #526074;
      }

      .mission-section {
        padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
        background: #ffffff;
      }

      .metric-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
      }

      .metric strong {
        display: block;
        color: var(--navy);
        font-size: clamp(3.2rem, 7vw, 5rem);
        line-height: 1;
        letter-spacing: -0.06em;
      }

      .metric span {
        display: block;
        margin-top: 1rem;
        color: var(--navy);
        font-size: 1.05rem;
      }

      .faq-panel {
        box-shadow: none;
        background: var(--teal-soft);
      }

      .faq-list-new {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
      }

      .faq-list-new details {
        border-radius: 16px;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px #e2ecef;
      }

      .faq-list-new summary {
        cursor: pointer;
        padding: 1.2rem 1.3rem;
        color: var(--navy);
        font-weight: 850;
      }

      .faq-list-new p {
        margin: 0;
        padding: 0 1.3rem 1.3rem;
        color: #526074;
        line-height: 1.65;
      }

      .final-cta-section {
        padding: clamp(4rem, 8vw, 7rem) 0 0;
      }

      .final-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: center;
        padding: clamp(2.2rem, 6vw, 4.6rem);
        border-radius: 22px;
        background: var(--navy);
        color: #ffffff;
      }

      .final-cta .post-eyebrow {
        color: var(--teal);
      }

      .final-cta h2 {
        max-width: 620px;
        color: #ffffff;
      }

      .final-cta p {
        max-width: 520px;
        margin-top: 1.5rem;
        color: rgba(255, 255, 255, 0.72);
      }

      .final-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 1rem;
      }

      .final-actions .button {
        border-color: transparent;
        background: var(--teal);
      }

      .button.ghost {
        border-color: rgba(255, 255, 255, 0.22);
        background: transparent;
        color: #ffffff;
      }

      .section {
        padding: clamp(4rem, 7vw, 6.5rem) 0;
      }

      .section-heading {
        max-width: 760px;
        margin-bottom: 2rem;
      }

      .section-heading h2 {
        margin: 0.7rem 0 0.8rem;
        font-size: clamp(2.3rem, 5vw, 4.1rem);
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      .section-heading p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 1.08rem;
        line-height: 1.72;
      }

      .direct-answer-section {
        padding: clamp(2rem, 5vw, 3.5rem) 0;
        border-bottom: 1px solid var(--outline-soft);
      }

      .direct-answer {
        display: grid;
        grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
        gap: clamp(1.2rem, 4vw, 2.4rem);
        align-items: start;
        padding: clamp(1.4rem, 4vw, 2.2rem);
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.66);
      }

      .direct-answer h2 {
        margin: 0;
        font-size: clamp(1.8rem, 4vw, 3rem);
        line-height: 1;
      }

      .direct-answer p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 1.08rem;
        line-height: 1.72;
      }

      .direct-answer p + p {
        margin-top: 0.75rem;
      }

      .direct-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
      }

      .direct-points li {
        padding: 0.75rem;
        border: 1px solid var(--outline-soft);
        border-radius: 8px;
        background: var(--surface-low);
        color: var(--ink);
        font-weight: 800;
        line-height: 1.35;
      }

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

      .screen-card,
      .quote-panel {
        border: 1px solid var(--outline);
        background: rgba(255, 255, 255, 0.55);
        border-radius: 8px;
      }

      .screen-card {
        overflow: hidden;
      }

      .screen-visual {
        min-height: 360px;
        padding: 1rem;
        background: var(--background);
      }

      .question-card {
        padding: 1rem;
        border: 2px solid #000000;
        border-radius: 8px;
        background: var(--navy);
        color: #ffffff;
      }

      .progress-line {
        height: 0.45rem;
        margin-bottom: 1.2rem;
        border-radius: 999px;
        background: #ffffff;
        overflow: hidden;
      }

      .progress-line span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #000000;
      }

      .answer-list {
        display: grid;
        gap: 0.7rem;
        margin-top: 1rem;
      }

      .answer {
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.85rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: var(--background);
        color: var(--ink);
        line-height: 1.35;
      }

      .answer span:first-child {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: var(--surface-low);
        color: var(--ink-soft);
        font-weight: 800;
      }

      .path-mini h3 {
        margin: 0;
        font-size: 1.7rem;
        letter-spacing: -0.05em;
      }

      .stat-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        margin: 1rem 0;
        overflow: hidden;
        border: 1px solid var(--outline);
        border-radius: 8px;
      }

      .stat-box div {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.45);
        text-align: center;
      }

      .stat-box strong {
        display: block;
        color: var(--violet);
        font-size: 1.6rem;
      }

      .timeline {
        display: grid;
        gap: 0.75rem;
      }

      .timeline-item {
        padding: 0.95rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: #ffffff;
      }

      .timeline-item.active {
        border-color: #000000;
        background: var(--navy);
        color: #ffffff;
      }

      .timeline-item strong {
        display: block;
        font-size: 1.05rem;
        line-height: 1.3;
      }

      .timeline-item span {
        display: block;
        margin-top: 0.4rem;
        color: var(--ink-soft);
      }

      .timeline-item.active span {
        color: rgba(255, 255, 255, 0.78);
      }

      .screen-caption {
        padding: 1rem 1.1rem 1.2rem;
        border-top: 1px solid var(--outline-soft);
      }

      .screen-caption h3 {
        margin: 0 0 0.35rem;
        font-size: 1.15rem;
        letter-spacing: -0.04em;
      }

      .screen-caption p {
        margin: 0;
        color: var(--ink-soft);
        line-height: 1.6;
      }

      .related-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
      }

      .related-card {
        display: flex;
        min-height: 100%;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.62);
      }

      .related-card h3 {
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.2;
        letter-spacing: -0.04em;
      }

      .related-card p {
        margin: 0.55rem 0 0;
        color: var(--ink-soft);
        line-height: 1.6;
      }

      .related-card span {
        color: var(--violet);
        font-weight: 850;
      }

      .quote-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
        gap: 1.2rem;
        align-items: center;
        padding: clamp(1.5rem, 4vw, 2.3rem);
        background: var(--navy);
        color: #ffffff;
      }

      .quote-panel h2 {
        margin: 0;
        font-size: clamp(2.3rem, 5vw, 4.2rem);
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      .quote-panel p {
        margin: 1rem 0 0;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.72;
      }

      .decision-list {
        display: grid;
        gap: 0.85rem;
      }

      .decision-list article {
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
      }

      .decision-list strong {
        display: block;
        margin-bottom: 0.25rem;
      }

      .decision-list ul {
        display: grid;
        gap: 0.55rem;
        margin: 0.8rem 0 0;
        padding: 0;
        list-style: none;
      }

      .decision-list li {
        position: relative;
        padding-left: 1rem;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.45;
      }

      .decision-list li::before {
        content: "";
        position: absolute;
        top: 0.62em;
        left: 0;
        width: 0.38rem;
        height: 0.38rem;
        border-radius: 50%;
        background: currentColor;
      }

      .contrast-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
        gap: clamp(1.4rem, 4vw, 2.6rem);
        align-items: center;
        padding: clamp(1.5rem, 4vw, 2.5rem);
        border: 2px solid #000000;
        border-radius: 8px;
        background: var(--navy);
        color: #ffffff;
      }

      .contrast-panel h2 {
        margin: 0.7rem 0 0.9rem;
        font-size: clamp(2.3rem, 5vw, 4.2rem);
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      .contrast-panel p {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.72;
      }

      .contrast-grid {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
      }

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

      .contrast-row + .contrast-row {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
      }

      .contrast-cell {
        min-height: 74px;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.06);
        line-height: 1.45;
      }

      .contrast-cell + .contrast-cell {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
      }

      .contrast-head .contrast-cell {
        min-height: auto;
        background: rgba(255, 255, 255, 0.13);
        font-size: 0.82rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .contrast-row:not(.contrast-head) .contrast-cell:first-child {
        color: rgba(255, 255, 255, 0.68);
      }

      .contrast-row:not(.contrast-head) .contrast-cell:last-child {
        color: #ffffff;
        font-weight: 750;
      }

      .app-loop {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }

      .loop-card {
        overflow: hidden;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.55);
      }

      .loop-visual {
        min-height: 230px;
        padding: 1rem;
        background: var(--background);
      }

      .loop-mini {
        height: 100%;
        padding: 1rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: #ffffff;
      }

      .loop-mini.dark {
        border: 2px solid #000000;
        background: var(--navy);
        color: #ffffff;
      }

      .loop-mini strong {
        display: block;
        font-size: 1.1rem;
        line-height: 1.25;
        letter-spacing: -0.04em;
      }

      .loop-mini span {
        display: block;
        margin-top: 0.55rem;
        color: var(--ink-soft);
        line-height: 1.45;
      }

      .loop-mini.dark span {
        color: rgba(255, 255, 255, 0.76);
      }

      .mini-stack {
        display: grid;
        gap: 0.55rem;
        margin-top: 1rem;
      }

      .mini-pill {
        padding: 0.55rem 0.7rem;
        border-radius: 6px;
        background: var(--surface-mid);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .loop-mini.dark .mini-pill {
        background: rgba(255, 255, 255, 0.12);
      }

      .steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        counter-reset: steps;
      }

      .step {
        position: relative;
        padding: 1.35rem;
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.55);
      }

      .step::before {
        counter-increment: steps;
        content: counter(steps);
        display: grid;
        place-items: center;
        width: 2.65rem;
        height: 2.65rem;
        margin-bottom: 1rem;
        border-radius: 8px;
        background: var(--violet-bright);
        color: #ffffff;
        font-weight: 850;
      }

      .step h3 {
        margin: 0 0 0.55rem;
        font-size: 1.25rem;
        line-height: 1.15;
        letter-spacing: -0.04em;
      }

      .step p {
        margin: 0;
        color: var(--ink-soft);
        line-height: 1.65;
      }

      .faq-list {
        display: grid;
        gap: 0.8rem;
      }

      .faq-list details {
        border: 1px solid var(--outline);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.62);
      }

      .faq-list summary {
        cursor: pointer;
        padding: 1rem 1.15rem;
        font-weight: 850;
      }

      .faq-list details[open] summary {
        border-bottom: 1px solid var(--outline-soft);
      }

      .faq-list p {
        margin: 0;
        padding: 1rem 1.15rem 1.15rem;
        color: var(--ink-soft);
        line-height: 1.65;
      }

      .cta {
        padding: clamp(3rem, 7vw, 5rem) 0;
        border-top: 1px solid var(--outline-soft);
      }

      .cta-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1.5rem;
        align-items: end;
        padding: clamp(1.7rem, 4vw, 2.5rem);
        border: 2px solid #000000;
        border-radius: 8px;
        background: var(--navy);
        color: #ffffff;
      }

      .cta-panel h2 {
        margin: 0 0 0.75rem;
        max-width: 13ch;
        font-size: clamp(2.3rem, 5vw, 4.1rem);
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      .cta-panel p {
        margin: 0;
        max-width: 58ch;
        color: rgba(255, 255, 255, 0.76);
        line-height: 1.72;
      }

      .cta-panel .button {
        background: #ffffff;
        color: var(--ink);
      }

      .cta-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.8rem;
      }

      .site-footer {
        padding: clamp(4rem, 7vw, 5.5rem) 0 2rem;
        background: var(--teal-soft);
        color: #526074;
        margin-top: 64px;
      }

      .site-footer .container {
        display: grid;
        grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1fr);
        align-items: start;
        justify-content: space-between;
        gap: clamp(2rem, 8vw, 8rem);
        font-size: 0.92rem;
      }

      .footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--navy);
        font-size: 1.5rem;
        font-weight: 850;
      }

      .footer-brand img {
        width: 3.8rem;
      }

      .footer-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 5vw, 4rem);
      }

      .footer-links div {
        display: grid;
        gap: 0.85rem;
      }

      .footer-links strong {
        margin-bottom: 0.3rem;
        color: var(--navy);
        font-size: 1rem;
      }

      .footer-links a:hover,
      .footer-links a:focus-visible {
        color: var(--navy);
      }

      .footer-bottom {
        margin-top: clamp(3rem, 6vw, 4.5rem);
        padding-top: 1.7rem;
        border-top: 1px solid #d7e2e5;
        text-align: center;
      }

      @media (max-width: 1040px) {
        .hero-grid,
        .feature-intro,
        .wide-card,
        .final-cta,
        .contrast-panel,
        .quote-panel,
        .cta-panel {
          grid-template-columns: 1fr;
        }

        .hero-copy {
          max-width: 760px;
        }

        .hero h1 {
          max-width: 11ch;
          font-size: clamp(3.2rem, 8vw, 5.2rem);
        }

        .cta-actions {
          justify-content: flex-start;
        }

        .hero-visual {
          min-height: 360px;
          justify-items: start;
        }

        .final-actions {
          justify-content: flex-start;
        }

        .screen-grid,
        .related-grid,
        .app-loop,
        .steps {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .direct-answer {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 760px) {
        .nav {
          min-height: 64px;
        }

        .brand-copy,
        .nav-links a:not(.button) {
          display: none;
        }

        .brand-mark {
          width: 3.9rem;
        }

        .nav-links {
          gap: 0;
        }

        .button {
          min-height: 44px;
          padding: 0.72rem 0.95rem;
          font-size: 0.9rem;
        }

        .hero {
          min-height: auto;
        }

        .hero-grid {
          min-height: auto;
          padding: 2.2rem 0 2.8rem;
        }

        .hero h1 {
          max-width: 11ch;
          font-size: clamp(2.6rem, 11vw, 3.55rem);
          line-height: 1;
          letter-spacing: -0.035em;
        }

        .hero-copy p {
          font-size: 1rem;
          line-height: 1.6;
        }

        .hero-actions {
          max-width: 340px;
          margin-top: 1.25rem;
        }

        .hero-actions .button {
          width: 100%;
        }

        .trust-line {
          font-size: 0.9rem;
          line-height: 1.45;
        }

        .hero-loop {
          margin-top: 1rem;
        }

        .hero-loop span {
          font-size: 0.78rem;
        }

        .hero-visual {
          display: none;
        }

        .product-section,
        .why-section,
        .final-cta-section {
          padding-top: 3rem;
        }

        .feature-panel,
        .faq-panel,
        .final-cta {
          border-radius: 18px;
          padding: 1.35rem;
        }

        .feature-intro {
          grid-template-columns: 1fr;
          gap: 1.2rem;
          margin-bottom: 2rem;
        }

        .feature-intro h2,
        .center-heading h2,
        .final-cta h2 {
          font-size: clamp(2rem, 10vw, 3rem);
        }

        .feature-grid,
        .why-grid,
        .faq-list-new,
        .metric-row,
        .final-cta,
        .footer-links {
          grid-template-columns: 1fr;
        }

        .why-card {
          min-height: auto;
          padding: 1.35rem;
        }

        .stat-card {
          gap: 3rem;
        }

        .mini-flow {
          justify-content: flex-start;
          overflow-x: auto;
          padding-bottom: 0.2rem;
        }

        .chart-card {
          min-height: 240px;
        }

        .metric-row {
          gap: 2rem;
        }

        .final-actions,
        .final-actions .button {
          width: 100%;
        }

        .final-actions .button {
          justify-content: center;
        }

        .screen-grid,
        .related-grid,
        .app-loop,
        .direct-points,
        .steps {
          grid-template-columns: 1fr;
        }

        .phone-stack {
          display: none;
        }

        .site-footer .container {
          grid-template-columns: 1fr;
          gap: 2rem;
        }

        .footer-links {
          gap: 1.5rem;
        }

        .cta-actions {
          width: 100%;
        }

        .cta-actions .button {
          width: 100%;
        }
      }