/* =====================================================
   Mad Banana Media Approved Coliving - Glassmorphic Design
   Brand Font: Space Grotesk
   Brand Color: Yellow #f7b40d
   ===================================================== */

/* =====================================================
   RESET & BASE STYLES
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brand Colors */
    --brand-yellow: #f7b40d;
    --brand-yellow-light: #ffc944;
    --brand-yellow-dark: #e6a00b;
    
    /* Text Colors */
    --text-dark: #1c1f26;
    --text-light: #23262e;
    --text-white: #ffffff;
    
    /* Background Colors */
    --bg-light: #f8f4ed;
    --bg-gradient-start: #f8f4ed;
    --bg-gradient-end: #fff9f0;
    
    /* Glass Effect */
    --glass-bg: rgba(28, 31, 38, 0.6);
    --glass-border: rgba(247, 180, 13, 0.3);
    --glass-shadow: rgba(0, 0, 0, 0.2);
    
    /* Fonts */
    --font-primary: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-dark);
    background: linear-gradient(135deg, #f8f4ed 0%, #fff9f0 20%, #f7b40d 40%, #ffc944 60%, #fff9f0 80%, #f8f4ed 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =====================================================
   GLASSMORPHIC CARDS
   ===================================================== */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow);
    padding: 40px;
    transition: all 0.3s ease;
    color: var(--text-white);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Light card override — problem cards and solution cards */
.agitation-card.glass-card,
.aida-section.glass-card {
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(247, 180, 13, 0.35);
}

.agitation-card.glass-card:hover,
.aida-section.glass-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.glass-card-cta {
    background: rgba(28, 31, 38, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(247, 180, 13, 0.3);
    box-shadow: 0 8px 32px rgba(247, 180, 13, 0.2);
    padding: 60px 40px;
    color: var(--text-white);
}

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

header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 0;
    border-bottom: 1px solid rgba(247, 180, 13, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-img {
    height: 50px;
    width: auto;
    max-height: 50px;
    object-fit: contain;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

.header-cta {
    background: var(--brand-yellow);
    color: var(--text-dark);
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(247, 180, 13, 0.3);
}

.header-cta:hover {
    background: var(--brand-yellow-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 180, 13, 0.4);
}

/* =====================================================
   HERO SECTION
   ===================================================== */

.hero {
    padding: 100px 0 80px;
    position: relative;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 56px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 25px;
    line-height: 1.2;
    font-family: var(--font-primary);
    /* Stops a single word stranding on its own line when a headline is long
       enough to wrap. Balances each <br>-separated segment rather than hard
       coding a break, which would only look right at one screen width. */
    text-wrap: balance;
}

/* Two claims in one headline. The gap is copy, not decoration: it holds the
   reader on the setup for a beat before the turn lands. Scales with the font
   size, so it stays proportional at every breakpoint. */
.hero h1 .headline-line {
    display: block;
}

.hero h1 .headline-turn {
    margin-top: 0.34em;
}

.hero h1 .highlight {
    color: var(--brand-yellow);
    position: relative;
}

/* A .key underline in the hero has to scale with the headline. The global 4px
   reads as a hairline at this size, so thickness and offset are set in em. */
.hero h1 .key {
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.14em;
}

/* Rotating headline word. The track holds five items: the four words, plus a
   repeat of the first, so the loop back to the start is invisible. It slides up
   in 20% steps. The mask is one line tall, so only one word is ever visible.

   Timing over a 12s cycle: seat, season and racing career hold for 2s each,
   then "future." holds for 4.4s so the escalation lands before it resets.
   Percentages are seconds/12: 2s = 16.7%, 0.4s transitions = 3.3%. */
.word-rotator {
    display: block;
    height: 1.2em;
    overflow: hidden;
}

.word-rotator-track {
    display: block;
    animation: word-roll 12s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

.word-rotator-track span {
    display: block;
    height: 1.2em;
    line-height: 1.2;
}

@keyframes word-roll {
    0%,   16.7% { transform: translateY(0); }      /* seat           2.0s */
    20%,  36.7% { transform: translateY(-20%); }   /* season         2.0s */
    40%,  56.7% { transform: translateY(-40%); }   /* racing career  2.0s */
    60%,  96.7% { transform: translateY(-60%); }   /* future.        4.4s */
    100%        { transform: translateY(-80%); }   /* back to seat        */
}

/* Respect a reduced-motion preference: hold on the first word. */
@media (prefers-reduced-motion: reduce) {
    .word-rotator-track {
        animation: none;
    }
}

.hero .subtitle {
    font-size: 24px;
    color: var(--text-white);
    margin-bottom: 22px;
    font-weight: 500;
    font-family: var(--font-primary);
    opacity: 0.95;
    /* Even out the wrap so a single word never drops onto a line of its own. */
    text-wrap: balance;
}

/* The last subtitle line carries the gap down to the CTA button. Pages with a
   single subtitle paragraph are unaffected. */
.hero .subtitle:last-of-type {
    margin-bottom: 35px;
}

/* =====================================================
   PROBLEM SECTION
   ===================================================== */

.problem {
    padding: 80px 0;
}

.problem-statement {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.problem-statement h2 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 700;
    font-family: var(--font-primary);
}

.agitation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.agitation-card {
    padding: 35px;
    text-align: center;
}

.card-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
}

.agitation-card h3 {
    color: var(--text-dark);
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: var(--font-primary);
}

.agitation-card p {
    color: var(--text-dark);
    font-size: 17px;
    line-height: 1.7;
    font-family: var(--font-primary);
    opacity: 0.85;
}

/* =====================================================
   SOCIAL PROOF SECTION (between problem and solution)
   ===================================================== */

.social-proof-section {
    padding: 0 0 70px;
}

.social-proof-inline {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(247, 180, 13, 0.35);
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.social-proof-inline h4 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    /* Roomier than the page default: the underlines need clearance under the
       first line so the bar does not crowd the line beneath it. */
    line-height: 1.55;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-family: var(--font-primary);
}

/* =====================================================
   SOLUTION SECTION
   ===================================================== */

/* Standalone summary card, sitting between the case studies and the CTA.
   Gaps here are the sum of two sections' padding: the testimonial section
   contributes 70px above, the CTA section 80px below. These values even both
   sides out to 100px. Change either neighbour and these need revisiting. */
.summary-section {
    padding: 30px 0 20px;
}

.summary-section .aida-section {
    margin-bottom: 0;
}

.solution {
    padding: 80px 0;
}

.solution-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.solution-intro h2 {
    font-size: 48px;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 700;
    font-family: var(--font-primary);
}

/* Product shot between the solution intro and the AIDA cards. The PNG is a
   square with generous transparent padding, so the negative margins pull the
   surrounding copy back in rather than leaving a gap the image is not filling. */
.solution-mockup {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 8px auto -48px;
}

.solution-intro .intro-text {
    font-size: 28px;
    color: var(--text-dark);
    line-height: 1.7;
    font-weight: 500;
    font-family: var(--font-primary);
}

.aida-section {
    max-width: 900px;
    margin: 0 auto 30px;
}

/* Compounding chart, embedded in the Desire card. Restyled from the dark
   standalone in visuals/compounding-chart.html for a light surface: the
   rebuild line goes grey, and the owned line uses the darker brand yellow,
   which holds its contrast where #f7b40d does not. */
.aida-chart {
    margin: 38px 0 0;
    padding-top: 32px;
    border-top: 1px solid rgba(28, 31, 38, 0.12);
}

.aida-chart-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 6px;
}

.aida-chart-title .owned { color: #c98a06; }
.aida-chart-title .rebuild { color: #6f7480; }
.aida-chart-title .vs { color: #9aa0ab; font-weight: 500; }

.aida-chart-sub {
    font-size: 15px;
    font-weight: 500;
    color: #6f7480;
    text-align: center;
    margin-bottom: 22px;
}

.aida-chart svg { width: 100%; height: auto; display: block; }
.aida-chart .axis-line { stroke: rgba(28, 31, 38, 0.25); stroke-width: 1; }
.aida-chart .grid-line { stroke: rgba(28, 31, 38, 0.08); stroke-width: 1; }
.aida-chart .line-rebuild { fill: none; stroke: #8a8f9a; stroke-width: 2.5; stroke-linejoin: round; }
.aida-chart .line-owned { fill: none; stroke: #e6a00b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.aida-chart .axis-text { fill: #6f7480; font-size: 14px; font-weight: 500; font-family: var(--font-primary); }

/* Centred icon above each solution-card heading. Breaks up four dense text
   cards and gives the eye a landing between them. */
.aida-icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
}

.aida-section h3 {
    text-align: center;
    color: var(--text-dark);
    font-size: 26px;
    letter-spacing: -0.3px;
    margin-bottom: 18px;
    font-weight: 700;
    line-height: 1.3;
    font-family: var(--font-primary);
}

/* Thick brand-yellow underline under the keyword(s) in an AIDA heading.
   skip-ink: none keeps the bar solid through descenders (p, g, y). */
.key {
    text-decoration: underline;
    text-decoration-color: var(--brand-yellow);
    text-decoration-thickness: 4px;
    text-underline-offset: 5px;
    text-decoration-skip-ink: none;
}

.aida-section .content .key,
.cta-subhead .key {
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

.aida-section .content {
    color: var(--text-dark);
    font-size: 20px;
    line-height: 1.8;
    font-family: var(--font-primary);
}

.aida-section .content strong {
    color: var(--brand-yellow-dark);
    font-weight: 600;
}

/* =====================================================
   SHARE SECTION
   Secondary action, deliberately below the primary CTA so the
   reader who can book books first. Quieter than .cta-button by
   design: an outline button, not a second yellow one.
   ===================================================== */

.share-section {
    padding: 0 0 80px;
}

.share-block {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.share-block h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-primary);
    letter-spacing: -0.4px;
}

.share-block p {
    margin: 8px 0 26px;
    font-size: 19px;
    font-weight: 500;
    color: var(--text-dark);
    opacity: 0.72;
    font-family: var(--font-primary);
}

.share-button {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 12px;
    border: 2px solid var(--brand-yellow-dark);
    background: transparent;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    font-family: var(--font-primary);
    letter-spacing: -0.2px;
    transition: all 0.3s ease;
}

.share-button:hover {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(247, 180, 13, 0.35);
}

/* =====================================================
   CTA SECTION
   ===================================================== */

.cta-section {
    padding: 80px 0;
}

.cta-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cta-content h2 {
    font-size: 42px;
    margin-bottom: 40px;
    font-weight: 700;
    color: var(--text-white);
    font-family: var(--font-primary);
}

.cta-subhead {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-white);
    opacity: 0.9;
    margin: -26px 0 38px;
    font-family: var(--font-primary);
}

.cta-leadin {
    max-width: 700px;
    margin: 0 auto 16px;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white);
    opacity: 0.9;
    font-family: var(--font-primary);
}

.cta-framing {
    max-width: 700px;
    margin: 0 auto 22px;
    text-align: left;
    font-size: 19px;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-primary);
}

.cta-reassure {
    margin-top: 18px;
    font-size: 17px;
    color: var(--text-white);
    opacity: 0.85;
    font-family: var(--font-primary);
}

.cta-benefits {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: left;
}

.cta-benefit {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    font-size: 18px;
    color: var(--text-white);
    font-family: var(--font-primary);
}

.cta-benefit-icon {
    width: 22px;
    height: 22px;
    margin-right: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.cta-benefit strong {
    color: var(--brand-yellow);
    font-weight: 600;
}

/* Light variant of the benefit list, for the recap band in the solution
   section. Same markup as the CTA block, dark text on a light card. */
.benefits-light .cta-benefits {
    margin: 0;
    max-width: none;
}

.benefits-light .cta-benefit {
    color: var(--text-dark);
}

.benefits-light .cta-benefit:last-child {
    margin-bottom: 0;
}

.social-proof {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
    border-radius: 16px;
    margin: 40px auto;
    max-width: 700px;
    border: 1px solid rgba(247, 180, 13, 0.3);
}

.social-proof h4 {
    font-size: 19px;
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-primary);
}

.coliving-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: center;
    margin-top: 20px;
}

.logo-placeholder {
    background: rgba(247, 180, 13, 0.2);
    border: 2px dashed var(--brand-yellow);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--brand-yellow);
    font-family: var(--font-primary);
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
    margin-top: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(247, 180, 13, 0.4);
    border-radius: 14px;
    padding: 30px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}

.stat-number {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
    font-family: var(--font-primary);
}

.stat-number::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--brand-yellow);
}

.stat-label {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-light);
    font-family: var(--font-primary);
}

.testimonial-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-primary);
}

.testimonial-role {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
    opacity: 0.8;
    margin-top: 2px;
    font-family: var(--font-primary);
}

.section-subheading {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-light);
    opacity: 0.8;
    margin-top: -18px;
    margin-bottom: 30px;
    font-family: var(--font-primary);
}

.section-closer {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    /* Two separate claims on two lines. They need air between them to read as
       two beats rather than one wrapped sentence. */
    line-height: 1.55;
    color: var(--text-dark);
    margin-top: 44px;
    font-family: var(--font-primary);
}

.case-study-avatar {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 16px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-yellow);
    background: rgba(247, 180, 13, 0.15);
}

.case-study-situation {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-light);
    opacity: 0.85;
    font-family: var(--font-primary);
}

.case-study-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.case-study-list li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-light);
    font-family: var(--font-primary);
}

.case-study-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-yellow);
}

.case-study-list li strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* =====================================================
   CASE STUDIES - HORIZONTAL ROW LAYOUT (VERSION B)
   Full-width rows on desktop, stacking to cards on tablet and mobile.
   ===================================================== */

.social-proof-inline.is-wide {
    max-width: 1140px;
}

.case-study-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

.case-study-row {
    display: grid;
    grid-template-columns: 200px 1fr 270px;
    gap: 30px;
    align-items: center;
    text-align: left;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(247, 180, 13, 0.5);
    border-radius: 14px;
    padding: 28px 30px;
}

.case-study-row-person {
    text-align: center;
    padding-right: 30px;
    border-right: 4px solid rgba(247, 180, 13, 0.55);
}

.case-study-row-person .case-study-avatar {
    margin-bottom: 14px;
}

.case-study-row-body .case-study-situation {
    margin-bottom: 16px;
}

.case-study-row-body .case-study-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.case-study-row-quote {
    padding-left: 30px;
    border-left: 4px solid rgba(247, 180, 13, 0.55);
    font-size: 17px;
    line-height: 1.55;
    font-style: italic;
    color: var(--text-dark);
    font-family: var(--font-primary);
}

/* Tablet and below: rows collapse back into stacked cards. */
@media (max-width: 1023px) {
    .case-study-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .case-study-row-person {
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 4px solid rgba(247, 180, 13, 0.55);
    }

    .case-study-row-body .case-study-list {
        grid-template-columns: 1fr;
    }

    .case-study-row-quote {
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 4px solid rgba(247, 180, 13, 0.55);
    }
}


.partner-logo {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

.pricing {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 16px;
    margin: 40px auto;
    max-width: 550px;
    border: 1px solid rgba(247, 180, 13, 0.3);
}

.pricing-intro {
    margin-bottom: 20px;
}

.pricing-headline {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
    font-family: var(--font-primary);
    line-height: 1.2;
}

.pricing-subhead {
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-yellow);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.pricing-lead {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white);
    font-family: var(--font-primary);
    opacity: 0.9;
}

.pricing .price {
    font-size: 64px;
    font-weight: 700;
    color: var(--brand-yellow);
    margin-bottom: 10px;
    font-family: var(--font-primary);
}

.pricing .price-year {
    font-size: 32px;
    font-weight: 600;
}

.pricing .price-detail {
    font-size: 19px;
    color: var(--text-white);
    margin-bottom: 35px;
    font-family: var(--font-primary);
    font-weight: 500;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: var(--brand-yellow);
    color: var(--text-dark);
    padding: 20px 60px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 22px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(247, 180, 13, 0.4);
    font-family: var(--font-primary);
    letter-spacing: -0.2px;
}

.cta-button:hover {
    background: var(--brand-yellow-dark);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(247, 180, 13, 0.5);
}

.form-timing {
    margin-top: 20px;
    font-size: 16px;
    color: var(--text-white);
    font-family: var(--font-primary);
    opacity: 0.9;
}

.form-timing em {
    font-style: italic;
}

.cta-testimonial {
    max-width: 640px;
    margin: 0 auto 35px;
    padding: 22px 26px;
    border-left: 3px solid var(--brand-yellow);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 12px 12px 0;
    text-align: left;
}

.cta-testimonial p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-white);
    font-family: var(--font-primary);
}

.cta-testimonial .testimonial-name {
    margin-top: 12px;
    color: var(--brand-yellow);
    font-size: 15px;
}

/* The base .testimonial-role is dark, for the light case-study rows. The CTA
   panel is dark, so it needs the light treatment. */
.cta-testimonial .testimonial-role {
    color: var(--text-white);
    font-size: 14px;
    opacity: 0.7;
}

.questions-text {
    margin-top: 35px;
    font-size: 17px;
    color: var(--text-white);
    font-family: var(--font-primary);
    opacity: 0.9;
}

.footer-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}

.footer-link:hover {
    opacity: 1;
}

.email-link {
    color: var(--brand-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.email-link:hover {
    color: var(--brand-yellow-light);
    text-decoration: underline;
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {
    background: rgba(28, 31, 38, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 40px 0;
    text-align: center;
    font-family: var(--font-primary);
}

footer p {
    margin: 0;
    font-size: 15px;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */

@media (max-width: 768px) {
    .share-block h3 { font-size: 22px; }
    .share-block p { font-size: 17px; }
    .share-button { padding: 14px 30px; font-size: 17px; }

    .hero h1 {
        font-size: 38px;
    }
    
    .hero .subtitle {
        font-size: 19px;
    }
    
    .problem-statement h2 {
        font-size: 32px;
    }
    
    .solution-intro h2 {
        font-size: 36px;
    }
    
    .agitation-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .glass-card {
        padding: 25px;
    }
    
    .glass-card-cta {
        padding: 40px 25px;
    }
    
    .aida-section {
        padding: 25px;
    }
    
    .aida-section .content {
        font-size: 18px;
    }
    
    .cta-content h2 {
        font-size: 32px;
    }
    
    .pricing .price {
        font-size: 52px;
    }
    
    .pricing .price-year {
        font-size: 26px;
    }
    
    .cta-button {
        padding: 18px 40px;
        font-size: 18px;
    }
    
    .header-cta {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .logo-img {
        height: 40px;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .hero {
        padding: 60px 0 50px;
    }
    
    .problem,
    .solution,
    .cta-section {
        padding: 60px 0;
    }
    
    /* Logo grid: 2x2 on tablet/mobile */
    .coliving-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .proof-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stacked on mobile, so there is nothing to align across. Drop subgrid and
       let each card flow on its own. */
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 32px;
    }
    
    .hero .subtitle {
        font-size: 17px;
    }
    
    .logo-img {
        height: 35px;
    }
    
    .logo-text {
        font-size: 0.875rem;
    }
    
    .cta-benefit {
        font-size: 16px;
    }
    
    /* Logo grid: Stack vertically on small screens */
    .coliving-logos {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =====================================================
   SMOOTH SCROLLING
   ===================================================== */

html {
    scroll-behavior: smooth;
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

a:focus,
button:focus {
    outline: 3px solid var(--brand-yellow);
    outline-offset: 2px;
}

/* =====================================================
   LOADING ANIMATION (Optional Enhancement)
   ===================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content,
.agitation-card,
.aida-section {
    animation: fadeInUp 0.6s ease-out;
}

/* ---------------------------------------------------------------------------
   Creator pages: additions (travel first, Sep 2026). New classes only, so the
   built pages are untouched.
   --------------------------------------------------------------------------- */

/* One line after the agitation cards that turns the page from pain to the way out. */
.problem-bridge {
    text-align: center;
    max-width: 760px;
    margin: 60px auto 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-dark);
    font-family: var(--font-primary);
    text-wrap: balance;
}

/* Stats row with two cards instead of three. */
.proof-grid.is-two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Hand-drawn marker on the solution intro: white swipe, black Sharpie ring, arrow. */
.marker-intro {
    position: relative;
}

.marker-intro h2 {
    text-wrap: balance;
}

.marker {
    position: relative;
    display: inline-block;
    isolation: isolate;
    padding: 0 0.12em;
}

.marker::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.08em;
    right: -0.08em;
    top: 0.14em;
    bottom: 0.06em;
    background: #ffffff;
    border-radius: 0.35em 0.2em 0.4em 0.18em;
    transform: rotate(-1.2deg);
}

.marker-ring {
    position: absolute;
    left: -14%;
    top: -26%;
    width: 128%;
    height: 150%;
    overflow: visible;
    pointer-events: none;
    transform: rotate(-2deg);
}

.marker-ring path,
.marker-arrow path {
    fill: none;
    stroke: var(--text-dark);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.marker-arrow {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

@media (max-width: 768px) {
    .problem-bridge {
        font-size: 22px;
        margin-top: 40px;
    }

    .proof-grid.is-two {
        grid-template-columns: 1fr;
    }
}

/* Keeps the comma on the same line as the ringed words. */
.marker-nowrap {
    white-space: nowrap;
}

/* Line break that only exists on phones, so the arrow has a clear run from "middle". */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .mobile-break {
        display: inline;
    }
}

/* Hero second line that lists what is at stake, set smaller than the claim above it. */
.hero h1 .headline-list {
    font-size: 0.62em;
    font-weight: 600;
    margin-top: 0.6em;
}

/* The list line is set smaller, so the em-based hero underline goes thin. Match the 4px used everywhere else. */
.hero h1 .headline-list .key {
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}

/* Problem card icons at 1.1x (48px to 53px). Opt-in, so the built pages keep 48px. */
.icons-lg .card-icon {
    width: 53px;
    height: 53px;
}

/* The ring on the smaller subheading line needs a little room from the word before it. */
.intro-text .marker {
    margin-left: 0.2em;
}

@media (max-width: 768px) {
    .intro-text .marker {
        margin-left: 0.45em;
    }
}

/* Mockups rendered on the 1400 canvas (extra room so the phone shadows fade out before the
   edge). Scaled up so the phones display at the same size as the 1120 ones, with the extra
   transparent padding absorbed by larger negative margins. */
.solution-mockup.is-padded {
    max-width: 700px;
    /* Scale the pull-in with the image, so phones get the same proportions as desktop. */
    margin: calc(min(700px, 100%) * -0.089) auto calc(min(700px, 100%) * -0.169);
}

/* The turn line between two glass sections. Sits on the page background, at
   solution-heading size, so the break between the sections is unmistakable. */
.closer-bridge {
    padding: 70px 0;
    text-align: center;
}

.closer-bridge p {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark);
    font-family: var(--font-primary);
    margin: 0;
    text-wrap: balance;
}

/* White swipe behind the underlined phrase, so the yellow underline pops off the
   yellow page background. Thickness scales with this larger type. */
.closer-bridge .key {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.1em;
}

/* The swipe in the bridge line has to clear the underline, which sits below the
   text baseline, so it extends further than the standard marker on all sides. */
.closer-bridge .marker::before {
    left: -5px;
    right: -5px;
    top: 2px;
    bottom: -5px;
}