/* ===========================
   LAYOUT & ELEMENTS
   =========================== */

   /* ===========================
   HEADER COMPONENT
   =========================== */

/* 1. Mobile Base Styles (Default) */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes brand to left, burger to right */
    padding: 0px 24px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 999; 
    background-color: var(--white);
}

.header__brand {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between logo and text */
}

.header__title {
    font-family: var(--font-accent-1); /* Borel */
    font-size: 24px;
    font-weight: 400;
    color: var(--gray-900);
    padding-top: 16px; /* Small nudge to visually align script font with the logo */
}

/* Hide desktop elements on mobile */
.header__navigation,
.download__btn {
    display: none; 
}

/* .download__btn-img {
    filter: brightness(0) invert(1);
} */

.header__burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px; /* Increases the clickable area for thumbs */
}

.header.is-open .header__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 100%; /* Pushes it exactly below the header */
    left: 0;
    right: 0;
    background-color: var(--white);
    padding: 32px 24px;
    gap: 32px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Make the links larger and easier to tap on mobile */
.header.is-open .header__link {
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    padding: 8px 0;
}

/* ===========================
   HERO SECTION (MOBILE FIRST)
   =========================== */

/* 1. Base Layout (Mobile) */
.plan-hero {
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    gap: 40px; 
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden; 
}

/* THE MAGIC TRICK: "Unwraps" the text container */
.plan-hero__text-content {
    display: contents; 
}

/* Explicit Mobile Order */
.plan-hero__header   { order: 1; }

.plan-hero__actions  { 
    order: 2; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

/* The reliable anchor point */
.plan-hero__visual {
    order: 3;
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    /* Buffer to prevent the arrow and text from crashing into features */
    padding-bottom: 140px; 
}

.plan-hero__features { 
    order: 4; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

/* --- Visuals & Mockup --- */

/* Responsive Background Blob */
.plan-hero__bg-graphic,
.plan-hero__visual picture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    max-width: 500px;
    z-index: -1;
}

.plan-hero__mockup {
    /*width: clamp(200px, calc(120px + 32vw), 248px);*/
    width: 100%;
    max-width: 260px;
    z-index: 1;
}

/* Bulletproof Mobile Caption */
.plan-hero__visual-caption {
    font-family: var(--font-accent-2); /* Kalam */
    font-size: clamp(14px, calc(4px + 4vw), 18px);
    position: absolute;
    width: max-content;
    margin: 0;
    z-index: 2;
    
    /* Forces text exactly below the phone on mobile */
    bottom: clamp(-20px, calc(300px + -80vw), 60px);
    right: clamp(15px, calc(-136.243px + 50.414vw), 380px); 
    /* Nudges it up/down to align perfectly with the arrow */
    margin-top: 16px; 
}


/* --- Typography & Text Content --- */

.plan-hero__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.plan-hero__subtitle {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
    color: var(--purple-600);
    background-color: var(--purple-150);
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}

.plan-hero__title {
    font-family: var(--font-base);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.plan-hero__description {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-900);
}

/* --- Buttons --- */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 12px 24px;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.btn:active {
    transform: scale(0.98);
}

.btn--google-play {
    background-color: var(--purple-550);
    color: var(--white);
}

.btn--google-play:hover {
    background-color: var(--purple-600);
}

.btn__text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn__text-small {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
}

.btn__text-large {
    font-family: var(--font-base);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.btn--learn-more {
    background-color: var(--white);
    color: var(--purple-550);
    border: 2px solid var(--purple-250);
}

.btn--learn-more:hover {
    background-color: var(--purple-150);
}

.btn__text-default {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 700;
}

/* --- Features List --- */

.feature-item {
    display: flex;
    align-items: center;
    background-color: var(--purple-100); 
    padding: 16px;
    border-radius: 16px;
    gap: 16px;
}

.feature-item__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-item__title {
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 700;
}

.feature-item__description {
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--gray-500);
}

/* ===========================
   FEATURE HIGHLIGHT SECTION
   =========================== */

/* 1. Base Layout (Mobile First) */
.feature-highlight {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    gap: 64px;
    /* max-width: 1440px; */
    margin: 0 auto;
    overflow: hidden;
    background-color: var(--purple-100);
}

/* --- Typography & Text Content --- */
.feature-highlight__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.feature-highlight__subtitle {
    font-family: var(--font-base, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.feature-highlight__title {
    font-family: var(--font-base, sans-serif);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900);
    letter-spacing: -1px;
    margin: 0;
}

.feature-highlight__description {
    font-family: var(--font-base, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-900);
    margin: 0 0 16px 0; /* Extra space before the checklist */
}

/* --- Checklist --- */
.feature-highlight__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.check-item {
    display: flex;
    align-items: center; /* Centers the icon perfectly if text wraps to two lines */
    gap: 16px;
}

.check-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.check-item__text {
    font-family: var(--font-base, sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
}

/* --- Visuals & Mockup --- */
.feature-highlight__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    max-width: 724px;
    margin: 0 auto;
}

.feature-highlight__bg-graphic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%; /* Allows the blob to bleed comfortably outside the phone */
    max-width: 460px;
    z-index: 0;
}

.feature-highlight__mockup {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.12)); /* Matches the soft app shadow */
}

/* ===========================
   FEATURES OVERVIEW SECTION
   =========================== */

/* 1. Base Layout (Mobile First) */
.features-overview {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- Typography & Header --- */
.features-overview__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left aligned on mobile */
    gap: 12px;
}

.features-overview__subtitle {
    font-family: var(--font-base, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.features-overview__title {
    font-family: var(--font-base, sans-serif);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900);
    letter-spacing: -1px;
    margin: 0;
}

/* --- Cards Container --- */
.features-overview__cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stacked vertically on mobile */
    gap: 16px;
}

/* --- Individual Cards --- */
.feature-card {
    display: flex;
    align-items: center;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 2px solid transparent; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03); /* Soft, elevated drop shadow */
}

/* Card Themes (Using fallback hex codes in case you don't have these exact variables yet) */
.feature-card--tasks {
    background-color: var(--purple-150);
    border-color: var(--purple-300);
}

.feature-card--assignments {
    background-color: var(--pink-150);
    border-color: var(--pink-300);
}

.feature-card--one-place {
    background-color: var(--green-150);
    border-color: var(--green-300);
}

/* --- Card Content --- */
.feature-card__icon {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.feature-card__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-card__title {
    font-family: var(--font-base, sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.feature-card__description {
    font-family: var(--font-base, sans-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.4;
    margin: 0;
}

/* ===========================
   CIRCULAR RATIONALE SECTION
   =========================== */

/* 1. Base Layout (Mobile First) */
.circular-rationale {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    /* Prevent any absolute items from creating horizontal scroll on mobile */
    overflow-x: hidden; 
}

/* --- Typography & Header --- */
.circular-rationale__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.circular-rationale__subtitle {
    font-family: var(--font-base, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.circular-rationale__title {
    font-family: var(--font-base, sans-serif);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900);
    letter-spacing: -1px;
    margin: 0;
}

.circular-rationale__description {
    font-family: var(--font-base, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-900);
    margin: 0;
}

/* --- Checklist (Reuses styles from previous sections) --- */
.circular-rationale__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Visuals & Clock --- */
.circular-rationale__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* The anchor point for the callout text */
    width: 100%;
}

.circular-rationale__clock-img {
    width: 100%;
    max-width: 340px; /* Scaled for mobile */
    height: auto;
}

/* Hide the callout text entirely on mobile per the design */
.circular-rationale__callouts {
    display: none;
}

/* ===========================
   ADDITIONAL FEATURES SECTION
   =========================== */

.additional-features {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* 1. Base Grid */
.additional-features__grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 2. Cards Setup */
.additional-features .feature-card {
    display: block; 
    position: relative;
    padding: 0px clamp(18px, calc(-16.364px + 10.909vw), 24px);
    border-radius: 24px;
    min-height: 205px; 
    max-width: 340px;
    overflow: hidden; /* Cleanly crops images at the card edge */
    box-shadow: none; 
}

/* Applying specific backgrounds and subtle borders */
.feature-card--light-dark { 
    background-color: var(--purple-150); 
    border: 2px solid var(--purple-300); 
}

.feature-card__title-highlight, 
.feature-card__description-highlight {
    /* background-color: var(--purple-150); */
    max-width: clamp(60px, calc(-231.429px + 97.143vw), 128px);
}

.feature-card--recurring { 
    background-color: var(--green-150); 
    border: 2px solid var(--green-300); 
}
.feature-card--themes { 
    background-color: var(--pink-150); 
    border: 2px solid var(--pink-300); 
}

/* 3. Text & Content Layer */
.additional-features .feature-card__content {
    position: relative;
    z-index: 2; /* Keeps text above images */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    
    /* STRICT LIMIT: Forces text to stay on the left so it never hits the phones */
    max-width: 50%; 
}

.additional-features .feature-card__icon {
    margin-bottom: 24px;
    object-fit: contain;
}

/* Adjusted to your requested 16px/14px sizing */
.additional-features .feature-card__title {
    font-family: var(--font-base, sans-serif);
    font-size: clamp(12px, calc(-18px + 10vw), 16px); 
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.additional-features .feature-card__description {
    font-family: var(--font-base, sans-serif);
    font-size: clamp(10px, calc(-20px + 10vw), 14px); 
    font-weight: 500;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
}

.feature-card__swatches {
    /* Forces swatches perfectly to the bottom-left corner */
    margin-top: auto; 
    padding-top: 24px;
    height: 24px;
    object-fit: contain;
}

/* 4. Mockups Layer */
.additional-features .feature-card__mockup {
    position: absolute;
    bottom: 0;
    z-index: 1;
    object-fit: contain;
    transform-origin: bottom right;
}

.feature-card__mockup-highlight {
    top: 0px;
}

/* Default Mobile Positioning */
.feature-card--light-dark .feature-card__mockup { width: 170px; right: -10px; }
.feature-card--recurring .feature-card__mockup  { width: 140px; right: -10px; }
.feature-card--themes .feature-card__mockup     { width: 120px; right: 0; }

/* ===========================
   HISTORY TRACKING SECTION
   =========================== */

/* 1. Base Layout (Mobile First) */
.history-tracking {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    gap: 64px;
    margin: 0 auto;
    overflow: hidden;
    background-color: var(--purple-100);
}

/* --- Typography & Text Content --- */
.history-tracking__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.history-tracking__subtitle {
    font-family: var(--font-base, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.history-tracking__title {
    font-family: var(--font-base, sans-serif);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900);
    letter-spacing: -1px;
    margin: 0;
}

.history-tracking__description {
    font-family: var(--font-base, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-900);
    margin: 0 0 16px 0;
}

/* --- Features Checklist --- */
.history-tracking__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.check-feature {
    display: flex;
    align-items: flex-start; /* Aligns the icon to the top of the text block */
    gap: 16px;
}

.check-feature__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.check-feature__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.check-feature__title {
    font-family: var(--font-base, sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.2;
}

.check-feature__description {
    font-family: var(--font-base, sans-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
}

/* --- Visuals & Mockups --- */
.history-tracking__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/* Background blob */
.history-tracking__bg,
.history-tracking__visual picture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    z-index: 0;
}

.history-tracking__phone {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.12)); /* Matches app shadow */
}

/* Mobile specifically shows Calendar, hides History */
.history-tracking__phone--calendar {
    width: 100%;
    max-width: 260px;
    height: auto;
}

.history-tracking__phone--history {
    display: none; /* Hides the second phone completely on mobile */
}

/* ===========================
   TARGET AUDIENCE SECTION
   =========================== */

/* 1. Base Layout (Mobile First) */
.target-audience {
    display: flex;
    flex-direction: column;
    padding: 60px 24px;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- Header --- */
.target-audience__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.target-audience__subtitle {
    font-family: var(--font-base, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600, #966AB5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.target-audience__title {
    font-family: var(--font-base, sans-serif);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900, #111827);
    letter-spacing: -1px;
    margin: 0;
}

/* --- Cards Container --- */
.target-audience__cards {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Individual Cards Base --- */
.audience-card {
    position: relative;
    display: flex;
    align-items: center; /* Centers the text block vertically */
    padding: 32px 24px;
    border-radius: 24px;
    min-height: 200px;
    max-width: 350px;
    overflow: hidden; /* This cleanly crops the characters at the bottom corners */
    border: 2px solid transparent; 
}

/* Card Themes */
.audience-card--students {
    background-color: var(--purple-150, #FAF8FD);
    border-color: var(--purple-300, #F1E8FB);
}

.audience-card--professionals {
    background-color: var(--pink-150, #FDF8FA);
    border-color: var(--pink-300, #FDE3EB);
}

.audience-card--goal-setters {
    background-color: var(--green-150, #F6FCF8);
    border-color: var(--green-300, #E6F4EE);
}

/* --- Text Layer --- */
.audience-card__text {
    position: relative;
    z-index: 2; /* Keeps text above the illustrations */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Limit the width so text never crashes into the characters */
    max-width: 55%; 
}

.audience-card__title {
    font-family: var(--font-base, sans-serif);
    font-size: clamp(16px, calc(10px + 2vw), 18px);
    font-weight: 800;
    color: var(--gray-900, #111827);
    margin: 0;
}

.audience-card__description {
    font-family: var(--font-base, sans-serif);
    font-size: clamp(12px, calc(6px + 2vw), 14px);
    font-weight: 500;
    color: var(--gray-900, #111827);
    margin: 0;
    line-height: 1.4;
}

.audience-card__description-highlight {
    padding-left: clamp(0px, calc(120px + -30vw), 30px);
}

/* --- Illustrations Layer --- */
.audience-card__image {
    position: absolute;
    bottom: 0;
    z-index: 1;
    object-fit: contain;
}

/* Mobile: Alternating Layouts */
.audience-card--students .audience-card__image {
    right: 0;
    width: 140px;
}

.audience-card--professionals .audience-card__image {
    left: 0;
    width: 145px;
}
.audience-card--professionals .audience-card__text {
    /* Magic trick: pushes the text fully to the right to clear the image */
    margin-left: auto; 
}

.audience-card--goal-setters .audience-card__image {
    right: 0;
    width: 135px;
}

/* ===========================
   FAQ SECTION
   =========================== */
.faq {
    padding: 80px 24px;
    max-width: 800px;
    margin: 0 auto;
}

.faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.faq__subtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-600, #966AB5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.faq__title {
    font-size: 40px;
    font-weight: 800;
    color: var(--gray-900, #111827);
}

.faq__list {
    list-style: none;
    padding: 0;
}

.faq-item {
    border-bottom: 1px solid #E5E7EB;
}

.faq-item__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-item__question {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin: 0;
}

.faq-item__icon {
    transition: transform 0.3s ease;
}

/* Accordion Logic */
.faq-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item__inner {
    padding-bottom: 24px;
    color: #4B5563;
    line-height: 1.6;
}

/* State: Open */
[aria-expanded="true"] + .faq-item__content {
    max-height: 200px; /* Adjust based on content length */
}

[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
}

/* ===========================
   CTA BANNER SECTION
   =========================== */
.cta-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--purple-250); /* Reusing your theme color */
    padding: 48px 24px;
    gap: 32px;
    position: relative;
    overflow: hidden;
    margin: 40px 0 0 0;
}

.cta-banner__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--gray-900, #111827);
    margin-bottom: 8px;
}

.cta-banner__subtitle {
    font-size: 18px;
    color: var(--gray-900, #111827);
    margin: 0;
}

/* Graphic positioning */
.cta-banner__graphic--clock {
    position: absolute;
    bottom: 50px; /* Adjust to "sink" slightly into the bottom edge */
    left: clamp(0px, calc(-148.837px + 46.512vw), 200px);
    z-index: 1;    /* Keeps it behind the button/text */
    width: 192px;
    /* filter: drop-shadow(-7px 14px 6px rgba(193, 166, 217, 0.7)); */
}

/* Position the Stars */
.cta-banner__graphic--stars {
    position: absolute;
    top: 200px;
    right: clamp(20px, calc(-128.837px + 46.512vw), 220px);
    z-index: 1;
    width: 123px;
}

/* Adjust Content/Button z-index so they sit ON TOP of the graphics */
.cta-banner__content,
.cta-banner__btn {
    position: relative;
    z-index: 2; /* Ensures text and buttons remain clickable */
}

.cta-banner__content {
    padding-bottom: 80px;
}

@media (min-width: 372px) {
    .cta-banner__graphic--stars {
        top: 160px;
    }
}

/* TABLETS */
@media (min-width: 525px) {

.plan-hero {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        /* The gap: 40px from mobile is still doing the heavy lifting here */
    }

    .plan-hero__header {
        width: 100%;
    }

    .plan-hero__actions { 
        width: 100%;
        flex-direction: row; 
        margin-top: 12px; 
        /* Removed margin-bottom so it doesn't double-up with the 40px gap */
    }

    .plan-hero__features {
        /* 50% minus half of the 40px gap */
        width: calc(50% - 60px);
        margin: 0;
        order: 3; /* Forces it left */
        /* padding-top: 80px; */
    }

    .plan-hero__visual {
        /* 50% minus half of the 40px gap */
        width: calc(50% - 20px);
        order: 4; /* Forces it right */
        padding-bottom: 140px; 
    }

    .plan-hero__visual-caption {
        bottom: clamp(0px, calc(299.219px + -39.063vw), 50px);
        right: clamp(0px, calc(-163.134px + 27.65vw), 120px); 
    }

    .features-overview__cards {
        width: clamp(477px, calc(-48px + 100vw), 576px);
        margin: 0 auto;
    }
}

@media (min-width: 590px) {
    .cta-banner__graphic--stars {
        top: 120px;
    }
}

@media (min-width: 750px) {

    .circular-rationale {
        gap: 80px;
    }
    /* --- Desktop Callouts Positioning --- */
    .circular-rationale__callouts {
        display: block; /* Turn them back on */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allows clicks to pass through to the SVG */
    }

    .callout {
        position: absolute;
        display: flex;
        flex-direction: column;
        white-space: nowrap; /* Prevents the text from wrapping onto two lines */
    }

    .callout__title {
        font-family: var(--font-base, sans-serif);
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.2;
    }

    .callout__text {
        font-family: var(--font-base, sans-serif);
        font-size: 14px;
        font-weight: 400;
        color: var(--gray-900);
        line-height: 1.4;
    }

     .callout--personal {
        /* top: -40px;
        left: 120px; */
        /* top: -40px;
        left: 200px; */
        top: -40px;
        left: clamp(120px, calc(-263.212px + 51.095vw), 260px);
    }

    .callout--focus {
        /* bottom: 40px;
        left: 100px; */
        /* bottom: 40px;
        left: 220px; */
        bottom: 40px;
        left: clamp(100px, calc(-228.467px + 43.796vw), 220px);
    }

    .callout--sleep {
        /* top: -30px;
        right: 100px; */
        /* top: -30px;
        right: 240px; */
        top: -30px;
        right: clamp(100px, calc(-283.212px + 51.095vw), 240px);
    }

    .callout--learning {
        /* bottom: 90px;
        right: 70px; */
        /* bottom: 90px;
        right: 200px; */
        bottom: 90px;
        right: clamp(70px, calc(-285.839px + 47.445vw), 200px);
    }

    .callout--meetings {
        /* bottom: -20px;
        right: 130px; */
        /* bottom: -20px;
        right: 260px; */
        bottom: -20px;
        right: clamp(130px, calc(-225.839px + 47.445vw), 260px);
    }

    .additional-features__grid {
        flex-direction: row; 
        flex-wrap: wrap; /* FORCES the cards to wrap to a new line */
        justify-content: center; /* Centers the leftover 3rd card on the bottom row */
    }

    .additional-features .feature-card {
        /* Force cards to be 50% width minus half of the 24px gap */
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

      /* Desktop Visual Layout */
    .history-tracking__visual {
        flex: 1;
        flex-direction: row; /* Places phones side-by-side */
        gap: 32px; /* Space between the two phones */
    }

    /* Expand the background to cover both phones */
    .history-tracking__bg,
    .history-tracking__visual picture {
        max-width: 800px;
        width: 110%;
    }

    /* Reveal the second phone and size them evenly */
    .history-tracking__phone--calendar {
        width: 45%;
        max-width: 280px;
    }

    .history-tracking__phone--history {
        display: block; /* Turns the second phone back on! */
        width: 45%;
        max-width: 280px;
    }

/* The container handles the wrapping and alignment */
    .target-audience__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    /* The individual cards handle the width */
    .audience-card {
        flex: 0 0 calc(50% - 12px); /* 50% width minus half the 24px gap */
        max-width: 371px;
    }

    /* Graphic positioning */
    .cta-banner__graphic--clock {
        bottom: 50px; /* Adjust to "sink" slightly into the bottom edge */
        left: clamp(200px, calc(-73.723px + 36.496vw), 300px);
    }

    /* Position the Stars */
    .cta-banner__graphic--stars {
        top: 120px;
        right: clamp(220px, calc(-163.212px + 51.095vw), 360px);
    }

}

/* DESKTOP */
@media (min-width: 1024px) {
    
    .header {
        padding: 0px clamp(48px, calc(-679.385px + 50.513vw), 3200px);
    }

    /* Hide mobile burger menu */
    .header__burger-btn {
        display: none;
    }

    /* Reveal and style navigation */
    .header__navigation {
        display: flex;
        align-items: center;
        gap: 40px; /* Space between links */
        box-shadow: none;
    }

    .header__link {
        font-family: var(--font-base); /* Inter */
        font-weight: 700; /* Bold */
        font-size: 14px;  /* Updated from 16px */
        color: var(--gray-900);
        transition: color 0.2s ease;
    }

    .header__link:hover {
        color: var(--purple-550);
    }

    /* Reveal and style download button */
    .download__btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: var(--purple-550);
        color: var(--white);
        padding: 6px 16px;
        border-radius: 100px; /* Creates the perfect pill shape */
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

    .download__btn:hover {
        background-color: var(--purple-600);
    }

    .download__btn:active {
        transform: scale(0.98); /* Satisfying click effect */
    }

    .download__btn__description {
        font-family: var(--font-base); /* Inter */
        font-weight: 700; /* Bold */
        font-size: 14px;  /* Updated from 16px */
        color: var(--white);
    }

   .plan-hero {
        flex-wrap: nowrap; /* Turn off tablet wrapping */
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        padding: 80px 48px;
        gap: 0; /* Turn off the mobile gap */
    }

    /* Turn the wrapper back into a solid "Left Column" */
    .plan-hero__text-content {
        display: flex; 
        flex-direction: column;
        flex: 1; 
        max-width: 600px; 
    }

    /* Reset tablet widths & order for the left column items */
    .plan-hero__header { 
        order: 0; 
        width: auto; 
    }
    
    .plan-hero__actions { 
        order: 0; 
        width: auto;
        flex-direction: row; 
        margin-top: 48px; 
        margin-bottom: 40px; 
    }
    
    .plan-hero__features { 
        order: 0; 
        width: auto;
        padding-right: 0; /* Reset tablet padding */
        display: flex; 
        flex-direction: row; 
        gap: 32px;
        padding-top: 0px;
    }

    /* Reset tablet constraints for the right column visual */
    .plan-hero__visual {
        order: 0;
        width: auto;
        flex: 1;
        padding-bottom: 0; 
    }
    
    /* Desktop Typography Overrides */
    .plan-hero__title { font-size: 70px; }
    .btn__text-small { font-size: 13px; }
    .btn__text-large { font-size: 24px; }
    .btn__text-default { font-size: 15px; }

    /* Layout Tweaks */
    .btn {
        padding: 12px 32px; /* Wider buttons on desktop */
    }

    .feature-item {
        background-color: transparent; /* Removes the card background on desktop */
        padding: 0;
    }

    /* Desktop Visual Sizing */
    .plan-hero__bg-graphic,
    .plan-hero__visual picture {
        max-width: 700px; 
    }

    .plan-hero__mockup {
        max-width: 320px;
    }

    /* Desktop Caption Coordinates */
    .plan-hero__visual-caption {
        /* CRITICAL: Overrides the mobile 'top: 100%' rule */
        top: auto; 
        margin-top: 0; 
        
        /* Your exact desktop placement relative to the visual container */
        right: clamp(-60px, calc(-247.419px + 19.767vw), 40px); 
        bottom: 40%; 
    }

    .feature-highlight {
        /* THE MAGIC TRICK: Reverses the HTML order so the image is on the left */
        flex-direction: row-reverse; 
        align-items: center;
        justify-content: center;
        padding: 100px 48px;
        gap: 80px;
    }

    /* Constrain the text container so it doesn't stretch too wide */
    .feature-highlight__content {
        flex: 1;
        max-width: 540px; 
        padding-right: 40px; /* Gives breathing room on ultra-wide screens */
    }

    /* Allow the visual to take up the remaining left-side space */
    .feature-highlight__visual {
        flex: 1;
        margin: 0;
    }

    /* Scale up typography for desktop */
    .feature-highlight__title { 
        font-size: 56px; 
    }
    
    .feature-highlight__description { 
        font-size: 20px; 
    }
    
    .check-item__text { 
        font-size: 18px; 
    }

    /* Scale up visuals */
    .feature-highlight__mockup {
        max-width: 320px;
    }

    .feature-highlight__bg-graphic {
        max-width: 600px;
        /* Optional: nudges the background blob slightly to the right to match your design */
        left: 50%; 
    }

    .features-overview {
        padding: 100px 48px;
        gap: 64px;
    }

    /* Center the header text block */
    .features-overview__header {
        align-items: center; 
        text-align: center;
    }

    .features-overview__title {
        font-size: 56px; /* Matches scaling from previous section */
    }

    /* Swap cards to side-by-side */
    .features-overview__cards {
        flex-direction: row; 
        justify-content: center;
        gap: 24px;
        width: 100%;
    }

    .feature-card {
        flex: 1; /* Forces all three cards to be the exact same width */
        max-width: 400px; /* Prevents them from stretching infinitely on ultra-wide screens */
        padding: 32px 24px; /* Slightly more vertical breathing room on desktop */
    }

    /* Magic CSS Grid: No HTML changes required! */
    .circular-rationale {
        display: grid;
        /* Left column gets a max width of ~420px, right column fills the rest */
        grid-template-columns: minmax(320px, 420px) 1fr;
        grid-template-rows: auto auto; /* Two rows for Header and Checklist */
        align-content: center;
        padding: 100px 48px;
        gap: 0 80px; /* 0 vertical gap (managed by padding), 80px horizontal gap */
        overflow-x: visible; /* Allow callouts to bleed slightly if needed */
    }

    /* Assign elements to the grid */
    .circular-rationale__header {
        grid-column: 1;
        grid-row: 1;
        align-self: flex-end; /* Pushes text down toward the checklist */
        padding-bottom: 48px; /* Creates the space between the text and checklist */
    }

    .circular-rationale__benefits {
        grid-column: 1;
        grid-row: 2;
        align-self: flex-start; /* Keeps checklist pinned near the header */
    }

    .circular-rationale__visual {
        grid-column: 2;
        /* Tell the visual to span BOTH the header and benefits rows */
        grid-row: 1 / span 2; 
        justify-self: center;
        align-self: center;
    }

    /* Desktop Typography Scale */
    .circular-rationale__title { font-size: 56px; }

    /* Scale up the graphic wrapper */
    .circular-rationale__clock-img {
        max-width: 450px; 
    }

    /* --- Desktop Callouts Positioning --- */
    .circular-rationale__callouts {
        display: block; /* Turn them back on */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allows clicks to pass through to the SVG */
    }

    .callout {
        position: absolute;
        display: flex;
        flex-direction: column;
        white-space: nowrap; /* Prevents the text from wrapping onto two lines */
    }

    .callout__title {
        font-family: var(--font-base, sans-serif);
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.2;
    }

    .callout__text {
        font-family: var(--font-base, sans-serif);
        font-size: 14px;
        font-weight: 400;
        color: var(--gray-900);
        line-height: 1.4;
    }

    /* Coordinate Mapping
       Note: These percentages are relative to the bounding box of your SVG. 
       If your SVG includes the connecting lines inside the file itself, you may 
       need to nudge these percentages slightly so the text sits perfectly at the dots.
    */
    .callout--personal {
        /* top: -40px;
        left: -60px;  */
        /* top: -40px;
        left: 80px;  */
        top: -40px;
        left: clamp(-60px, calc(-404.615px + 33.654vw), 80px);
    }

    .callout--focus {
        /* bottom: 40px;
        left: -40px; */
        /* bottom: 40px;
        left: 120px; */
        bottom: 40px;
        left: clamp(-40px, calc(-433.846px + 38.462vw), 120px);
    }

    .callout--sleep {
        /* top: -40px;
        right: -30px; */
        /* top: -30px;
        right: 120px; */
        top: clamp(-40px, calc(-64.615px + 2.404vw), -30px);
        right: clamp(-30px, calc(-399.231px + 36.058vw), 120px);
    }

    .callout--learning {
        /* bottom: 90px;
        right: -40px; */
        /* bottom: 100px;
        right: 90px; */
        bottom: clamp(90px, calc(65.385px + 2.404vw), 100px);
        right: clamp(-40px, calc(-360px + 31.25vw), 90px);
    }

    .callout--meetings {
        /* bottom: -20px;
        right: -20px; */
        /* bottom: -20px;
        right: 180px; */
        bottom: -20px;
        right: clamp(-20px, calc(-512.308px + 48.077vw), 180px);
    }

   .additional-features {
        padding: 100px 48px;
    }

    .additional-features__grid {
        flex-direction: row; 
        align-items: stretch; /* Makes all 3 cards equal height */
        margin: 0;
    }

    /* REORDERING: Swaps Themes and Recurring to match the target design */
    .feature-card--light-dark { order: 1; }
    .feature-card--themes     { order: 2; }
    .feature-card--recurring  { order: 3; }

    /* Desktop Card Geometry */
    .additional-features .feature-card {
        flex: 1; 
        min-height: 240px; 
        padding: 0px 32px;
        max-width: 100%;
    }

    /* Tighten text limit to 45% on desktop to guarantee zero overlap */
    .additional-features .feature-card__content {
        max-width: 45%;
    }

    /* --- Desktop Mockup Adjustments --- */
    
    .feature-card--light-dark .feature-card__mockup {
        width: 55%; 
        max-width: 195px; /* Bound to HTML original width */
        right: 0; /* Snaps firmly to the right edge */
    }

    .feature-card--themes .feature-card__mockup {
        width: 45%;
        max-width: 133px;
        right: 16px; /* Gentle 16px inset off the right border */
    }

    .feature-card__title-highlight, 
    .feature-card__description-highlight {
        max-width: 100%;
    }

    .feature-card--recurring .feature-card__mockup {
        width: 55%;
        max-width: 160px;
        right: 0; 
    }

    .history-tracking {
        /* Reverses HTML so the image block moves to the left */
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        padding: 100px 48px;
        gap: 80px;
    }

    .history-tracking__content {
        flex: 1;
        max-width: 500px;
    }

    /* Scale up typography */
    .history-tracking__title { font-size: 56px; }
    .history-tracking__description { font-size: 20px; }
    .check-feature__title { font-size: 18px; }
    .check-feature__description { font-size: 16px; }

    /* Desktop Visual Layout */
    .history-tracking__visual {
        flex: 1;
        flex-direction: row; /* Places phones side-by-side */
        gap: 32px; /* Space between the two phones */
        max-width: 750px;
    }

    /* Expand the background to cover both phones */
    .history-tracking__bg,
    .history-tracking__visual picture {
        max-width: 800px;
        width: 110%;
    }

    /* Reveal the second phone and size them evenly */
    .history-tracking__phone--calendar {
        width: 45%;
        max-width: 280px;
    }

    .history-tracking__phone--history {
        display: block; /* Turns the second phone back on! */
        width: 45%;
        max-width: 280px;
    }

    .target-audience {
        padding: 100px 48px;
        gap: 64px;
    }

    /* Center Header */
    .target-audience__header {
        align-items: center;
        text-align: center;
    }

    .target-audience__title {
        font-size: 56px;
    }

    /* Side-by-Side Cards */
    .target-audience__cards {
        flex-direction: row;
        align-items: stretch;
        gap: 24px;
        max-width: 100%;
    }

    .audience-card {
        flex: 1; /* Divides into 3 equal columns */
        padding: 40px 24px;
        min-height: 200px; 
    }

    /* Scale up fonts slightly for desktop readability */
    .audience-card__title { font-size: clamp(16px, calc(6.154px + 0.962vw), 20px); }
    .audience-card__description { font-size: clamp(12px, calc(4.615px + 0.721vw), 15px); }

    /* RESET: On Desktop, ALL images move to the left */
    .audience-card__image {
        left: 0 !important;
        right: auto !important;
    }

    /* Fine-tune desktop image sizing */
    .audience-card--students .audience-card__image { width: 150px; }
    .audience-card--professionals .audience-card__image { width: 160px; }
    .audience-card--goal-setters .audience-card__image { width: 145px; }

    /* RESET: On Desktop, ALL text moves to the right */
    .audience-card__text {
        margin-left: clamp(120px, calc(-8px + 12.5vw), 172px) !important;
        max-width: 55% !important; /* Ensures text stays in the right half */
    }

    .audience-card__description-highlight {
        padding-left: clamp(0px, calc(69.231px + -4.808vw), 20px);
    }

    .target-audience__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* Forces 3-in-a-row */
        justify-content: center;
        gap: 24px;
    }

    .audience-card {
        /* Distribute 3 cards evenly */
        flex: 1;
        max-width: none;
    }

       .cta-banner {
        flex-direction: row;
        padding: 0 clamp(48px, calc(-679.385px + 50.513vw), 3200px); /* Removes left padding so clock can align left */
        gap: 0; /* We manage spacing per-element below */
    }

    /* 1. CLOCK (Moved to Far Left) */
    .cta-banner__graphic--clock {
        order: 1;
        margin-left: -10px; /* Adjust this to sink it into the left edge if desired */
        flex-shrink: 0;
        top: 0;
        left: clamp(120px, calc(-76.923px + 19.231vw), 200px);
    }

    /* 2. TEXT (Dead Center) */
    .cta-banner__content {
        order: 2;
        flex: 1; /* CRITICAL: Forces text container to fill all empty space */
        text-align: center; /* Centers the text within that empty space */
        padding: 40px 24px;
        margin-left: 193px;
    }

    /* 3. STARS (Right Side) */
    .cta-banner__graphic--stars {
        order: 3;
        margin-right: 32px; /* Space between the stars and the button */
        flex-shrink: 0;
        top: clamp(20px, calc(54.615px + -2.404vw), 30px);
        /* right: 320px; */
        right: clamp(270px, calc(196.154px + 7.212vw), 300px);
    }

    /* 4. BUTTON (Far Right) */
    .cta-banner__btn {
        order: 4;
        flex-shrink: 0;
    }

   
}

@media (min-width: 1440px) {
    .cta-banner__graphic--clock {
        top: 0;
        left: clamp(220px, calc(-490.769px + 49.359vw), 3300px);
    }

    /* 3. STARS (Right Side) */
    .cta-banner__graphic--stars {
        top: 20px;
        right: clamp(320px, calc(-402.308px + 50.16vw), 3450px);
    }
}

@media (prefers-color-scheme: dark) {
    .cta-banner {
        background-color: var(--purple-250);
    }

    .cta-banner__graphic--clock-background {
        display: none;
    }
}