.landing-page {
    --landing-ink: #172d2b;
    --landing-muted: #58706b;
    --landing-green: #123b38;
    --landing-green-light: #18514c;
    --landing-border: #d9e6e1;
    background: #f7faf8;
    color: var(--landing-ink);
    font-size: 1rem;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid #e2ebe7;
    background: rgb(255 255 255 / 96%);
    backdrop-filter: blur(12px);
}

.landing-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    color: var(--landing-ink);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

.landing-brand img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.landing-links, .landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.landing-links a, .landing-login, .landing-footer a {
    color: #29443f;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.landing-links a:hover, .landing-login:hover, .landing-footer a:hover {
    color: #087f70;
}

.landing-nav-cta, .landing-whatsapp-cta {
    gap: 0.6rem;
    text-decoration: none;
}

.landing-nav-cta img, .landing-whatsapp-cta img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}

.landing-hero {
    overflow: hidden;
    background: #103a36;
    color: #ffffff;
}

.landing-hero-inner {
    display: grid;
    max-width: 80rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vh, 5rem) clamp(1rem, 4vw, 3rem) 3rem;
    gap: 2.5rem;
}

.landing-hero-copy {
    max-width: 54rem;
    animation: landing-rise 520ms ease-out both;
}

.landing-kicker, .landing-eyebrow {
    margin: 0 0 0.75rem;
    color: #76d8be;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: #ffffff;
    font-size: 4.75rem;
    font-weight: 700;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.landing-lede {
    max-width: 42rem;
    margin: 1.25rem 0 0;
    color: #d5eae4;
    font-size: 1.125rem;
    line-height: 1.55;
}

.landing-demo-banner {
    max-width: 42rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(165, 237, 213, 0.5);
    border-left: 4px solid #a5edd5;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e8f8f3;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.75rem;
}

.landing-hero .btn-primary, .landing-pricing-band .btn-primary, .landing-contact .btn-primary {
    border-color: #a5edd5;
    background: #b7f0da;
    color: #103a36;
}

.landing-hero .btn-primary:hover, .landing-pricing-band .btn-primary:hover, .landing-contact .btn-primary:hover {
    border-color: #d0f7e8;
    background: #d0f7e8;
    color: #103a36;
}

.landing-secondary-cta {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.landing-secondary-cta:hover { color: #a5edd5; }

.landing-hero-note {
    margin: 1.25rem 0 0;
    color: #c7ddd7;
    font-size: 0.8125rem;
}

.landing-hero-note a {
    color: #ffffff;
    font-weight: 600;
    text-underline-offset: 3px;
}

.landing-preview-wrap {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    animation: landing-rise 650ms 100ms ease-out both;
}

.landing-preview-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #d9eee8;
    font-size: 0.8125rem;
    font-weight: 600;
}

.landing-preview-caption .material-symbols-rounded { color: #9ee3cd; }

.landing-preview-live {
    margin-left: auto;
    color: #b9d6ce;
    font-size: 0.75rem;
    font-weight: 500;
}

.landing-preview {
    overflow: hidden;
    border: 1px solid #dce8e3;
    border-radius: 0.625rem;
    background: #ffffff;
    color: #203632;
    box-shadow: 0 20px 48px rgb(4 28 25 / 20%);
}

.preview-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5ece8;
}

.preview-topline > div { display: grid; gap: 0.2rem; }
.preview-school { color: #668078; font-size: 0.625rem; font-weight: 700; }
.preview-topline strong { font-size: 1.0625rem; }
.preview-term { color: #526d66; font-size: 0.6875rem; font-weight: 700; }

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5ece8;
}

.preview-metric {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    padding: 0.875rem;
    border: 1px solid #e0e9e5;
    border-radius: 0.5rem;
    background: #fbfdfc;
}

.preview-metric > span { color: #526d66; font-size: 0.75rem; font-weight: 600; }
.preview-metric strong { color: #173b35; font-size: clamp(0.9375rem, 2vw, 1.375rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.preview-metric-positive { border-color: #c4e9d7; background: #f1faf5; }
.preview-metric-positive strong { color: #176a46; }

.preview-ledger-head {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.5rem;
    color: #263f39;
    font-size: 0.8125rem;
}

.preview-ledger-head span { color: #6b817b; font-size: 0.75rem; }

.preview-payment-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #edf1ef;
}

.preview-payment-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: #e7f4ee;
    color: #176a46;
}

.preview-student { display: grid; min-width: 0; gap: 0.2rem; }
.preview-student strong { overflow: hidden; color: #253d37; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-student small { color: #62766f; font-size: 0.6875rem; }
.preview-amount { color: #176a46; font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-charge { color: #354d47; }
.preview-paid, .preview-posted { padding: 0.25rem 0.5rem; border-radius: 999px; background: #eaf6ee; color: #176a46; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.preview-posted { background: #edf3f1; color: #49635b; }

.preview-footline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5ece8;
    background: #f8fbf9;
    color: #58716a;
    font-size: 0.6875rem;
}

.preview-footline span { display: inline-flex; align-items: center; gap: 0.35rem; }
.preview-footline .material-symbols-rounded { font-size: 1rem; }

.landing-proof-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e0e9e5;
    background: #ffffff;
}

.landing-proof-strip > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #31564c;
    font-size: 0.8125rem;
    font-weight: 600;
}

.landing-proof-strip .material-symbols-rounded { color: #14725f; }

.landing-section {
    max-width: 78rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
}

.landing-section-heading { max-width: 43rem; margin-bottom: 2rem; }
.landing-section-heading h2, .landing-pricing-copy h2, .landing-contact h2, .landing-privacy h2 {
    margin: 0;
    color: #173b35;
    font-size: 3rem;
    line-height: 1.12;
    font-weight: 700;
}

.landing-section-heading > p:last-child, .landing-pricing-copy > p:last-child, .landing-contact p:not(.landing-eyebrow), .landing-privacy-copy > p {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: #526b64;
    font-size: 1rem;
    line-height: 1.6;
}

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

.landing-feature {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid #dce7e2;
    border-top: 3px solid #267a69;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, #ffffff 0%, #f3faf6 100%);
}

.landing-feature-green { border-top-color: #23835d; background: linear-gradient(145deg, #ffffff 0%, #f1faf3 100%); }
.landing-feature-blue { border-top-color: #3f7f91; background: linear-gradient(145deg, #ffffff 0%, #f1f8fa 100%); }
.landing-feature-lime { border-top-color: #6c8538; background: linear-gradient(145deg, #ffffff 0%, #f8faef 100%); }
.landing-feature-amber { border-top-color: #c08124; background: linear-gradient(145deg, #ffffff 0%, #fff8ed 100%); }
.landing-feature-coral { border-top-color: #ad5f4e; background: linear-gradient(145deg, #ffffff 0%, #fff5f1 100%); }
.landing-feature > .material-symbols-rounded { color: #176b5a; font-size: 1.75rem; }
.landing-feature h3 { margin: 0.9rem 0 0; color: #203d36; font-size: 1rem; font-weight: 700; }
.landing-feature p { margin: 0.5rem 0 0; color: #586f68; font-size: 0.875rem; line-height: 1.55; }

.landing-role-band {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2rem;
    padding: clamp(3rem, 7vw, 5rem) max(1rem, calc((100vw - 72rem) / 2));
    background: linear-gradient(110deg, #e7f3ed 0%, #f3f6e9 55%, #e8f1f4 100%);
}

.landing-role-band .landing-section-heading { margin: 0; }
.landing-role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.landing-role-list article { display: flex; min-width: 0; gap: 0.75rem; padding: 1rem; border: 1px solid #d3e3dc; border-radius: 0.5rem; background: rgb(255 255 255 / 84%); }
.landing-role-list article > .material-symbols-rounded { color: #176b5a; font-size: 1.5rem; }
.landing-role-list h3 { margin: 0; color: #203d36; font-size: 0.9375rem; font-weight: 700; }
.landing-role-list p { margin: 0.375rem 0 0; color: #586f68; font-size: 0.8125rem; line-height: 1.5; }

.landing-onboarding { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; }
.landing-steps { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.landing-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid #dce7e2; }
.landing-steps li > span { color: #13806d; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.landing-steps h3 { margin: 0; color: #203d36; font-size: 1rem; font-weight: 700; }
.landing-steps p { margin: 0.35rem 0 0; color: #586f68; font-size: 0.875rem; line-height: 1.55; }

.landing-pricing-band {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: center;
    gap: 2rem;
    padding: clamp(3rem, 7vw, 5rem) max(1rem, calc((100vw - 72rem) / 2));
    background: linear-gradient(110deg, #e9f4ef 0%, #f6f8f2 50%, #e7f3f4 100%);
}

.landing-pricing-copy .landing-eyebrow { color: #287260; }
.landing-price-panel { display: grid; gap: 0.85rem; padding: 1.5rem; border: 1px solid #cbded5; border-radius: 0.625rem; background: linear-gradient(145deg, #ffffff 0%, #eef8f2 100%); }
.landing-price-label { color: #546d65; font-size: 0.8125rem; font-weight: 600; }
.landing-price-panel > strong { color: #173b35; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.landing-price-panel > strong small { font-size: 0.9375rem; font-weight: 500; }
.landing-price-note { color: #526b64; font-size: 0.8125rem; line-height: 1.5; }
.landing-price-panel .landing-login { justify-self: center; }

.landing-privacy { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
.landing-privacy-mark { display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 0.5rem; background: #e4f3ea; color: #176b5a; }
.landing-privacy-mark .material-symbols-rounded { font-size: 1.75rem; }
.landing-privacy-copy h2 { font-size: 2.5rem; }
.landing-privacy-copy blockquote { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid #1f8a70; color: #23463d; font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.landing-quote-source { margin-top: 0.75rem !important; color: #536c65 !important; font-size: 0.8125rem !important; }
.landing-quote-source a { color: #116f61; font-weight: 700; text-underline-offset: 3px; }
.landing-privacy-note { margin-top: 0.75rem !important; color: #687d76 !important; font-size: 0.75rem !important; }

.landing-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
    background: #123b38;
    color: #ffffff;
}

.landing-contact > div:first-child { max-width: 40rem; }
.landing-contact .landing-eyebrow { color: #8bdfc6; }
.landing-contact h2 { color: #ffffff; }
.landing-contact p:not(.landing-eyebrow) { color: #d0e4de; }
.landing-contact-actions { display: grid; justify-items: start; gap: 0.5rem; }
.landing-contact-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; color: #ffffff; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.landing-contact-link:hover { color: #a5edd5; }

.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1rem, 4vw, 3rem); background: #f0f5f2; }
.landing-footer > span { color: #60766f; font-size: 0.8125rem; }

@keyframes landing-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 850px) {
    .landing-links { gap: 0.75rem; }
    .landing-role-band, .landing-onboarding { grid-template-columns: 1fr; }
    .landing-hero h1 { font-size: 3.5rem; }
    .landing-section-heading h2, .landing-pricing-copy h2, .landing-contact h2 { font-size: 2.25rem; }
    .landing-privacy-copy h2 { font-size: 2rem; }
}

@media (max-width: 640px) {
    .landing-nav { min-height: 3.75rem; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .landing-brand { gap: 0.4rem; font-size: 1rem; }
    .landing-brand img { width: 2rem; height: 2rem; }
    .landing-links { display: none; }
    .landing-nav-actions { gap: 0.625rem; }
    .landing-nav-actions .landing-login { font-size: 0.8125rem; }
    .landing-nav-cta { min-height: 2.75rem; padding: 0.5rem 0.65rem; font-size: 0.8125rem; }
    .landing-nav-cta img { width: 1.125rem; height: 1.125rem; }
    .landing-hero-inner { gap: 1.75rem; padding-top: 2.5rem; }
    .landing-hero h1 { font-size: 2.5rem; }
    .landing-section-heading h2, .landing-pricing-copy h2, .landing-contact h2 { font-size: 1.875rem; }
    .landing-privacy-copy h2 { font-size: 1.75rem; }
    .landing-lede { font-size: 1rem; }
    .preview-metrics { gap: 0.375rem; padding: 0.75rem; }
    .preview-metric { gap: 0.25rem; padding: 0.625rem 0.5rem; }
    .preview-metric > span { font-size: 0.6875rem; }
    .preview-metric strong { font-size: 0.875rem; }
    .preview-topline, .preview-ledger-head, .preview-payment-row { padding-right: 0.75rem; padding-left: 0.75rem; }
    .preview-payment-row { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.5rem; }
    .preview-payment-icon { width: 2rem; height: 2rem; }
    .preview-paid, .preview-posted { display: none; }
    .preview-footline { padding-right: 0.75rem; padding-left: 0.75rem; }
    .landing-proof-strip { justify-content: flex-start; gap: 0.5rem 1rem; }
    .landing-proof-strip > span { font-size: 0.75rem; }
    .landing-feature-grid, .landing-role-list { grid-template-columns: 1fr; }
    .landing-pricing-band { grid-template-columns: 1fr; gap: 1.5rem; }
    .landing-price-panel { padding: 1.25rem; }
    .landing-privacy { grid-template-columns: 1fr; }
    .landing-contact { align-items: flex-start; flex-direction: column; }
    .landing-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero-copy, .landing-preview-wrap { animation: none; }
}