/* ============================================================
   CTC BRAND FOUNDATION
   ============================================================ */

:root {
    --font-heading: 'Arvo', serif;
    --font-body: europa, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --delft-blue: #223759;
    --paynes-gray: #566573;
    --dark-navy: #1c2541;
    --cta-pink: #B80077;
    --calm-teal: #306373;
    --cream: #FDFBF7;
    --light-gray: #e9eef5;
    --body-text: #3a3a3a;
    --gold: #fdbd0d;
    --teal-bright: #49afc1;
    --stm-coral: #E8745E;
    --stm-coral-dark: #C25746;
}

/* ============================================================
   STICKY BIRTHDAY BANNER (bottom)
   ============================================================ */
.stm-birthday-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--stm-coral) 0%, var(--stm-coral-dark) 100%);
    padding: 14px 48px 14px 16px;
    text-align: center;
    color: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.stm-birthday-banner-link {
    display: block;
    color: #fff;
    text-decoration: none;
}
.stm-birthday-banner-link:hover {
    background: linear-gradient(90deg, var(--stm-coral-dark) 0%, var(--stm-coral-dark) 100%);
}
.stm-birthday-banner.is-hidden,
.stm-birthday-banner.is-dismissed {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.stm-birthday-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stm-birthday-close:hover {
    background: rgba(255,255,255,0.32);
}
.stm-birthday-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 960px !important;
    padding: 0 16px !important;
}
.stm-birthday-text {
    font-size: 1.1rem !important;
    letter-spacing: 0.3px;
    color: #fff !important;
    font-family: var(--font-body) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.stm-birthday-text strong {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
#stm-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background: rgba(0,0,0,0.22);
    padding: 1px 8px;
    border-radius: 3px;
    margin-left: 2px;
}
.stm-birthday-cta {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-left: 4px;
}

/* Ensure page content can scroll past the fixed banner */
body { padding-bottom: 80px; }
@media (max-width: 720px) {
    body { padding-bottom: 92px; }
    .stm-birthday-text { font-size: 0.95rem !important; }
    .stm-birthday-price { font-size: 1.05rem; padding: 1px 8px; }
    .stm-birthday-emoji { font-size: 1.2rem; }
    .stm-birthday-cta { font-size: 0.78rem; padding: 3px 10px; }
    .stm-birthday-savings { font-size: 0.72rem; padding: 1px 8px; }
    .stm-birthday-banner { padding: 10px 12px; }
    .stm-birthday-banner .container { gap: 8px; }
}

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

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-body) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--body-text);
    background-color: var(--cream);
}

p, blockquote, cite, .info-list li, .icon-list li, .bonus-box {
    font-family: 'Arvo', serif !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgb(0, 0, 0);
}

li {
    font-family: europa, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6,
.section h1, .section h2, .section h3, .section h4 {
    font-family: 'Arvo', serif !important;
    color: rgb(58, 58, 58) !important;
    margin-bottom: 1rem;
    line-height: 1.25;
}
h1, .section h1 { font-size: 32px !important; }
h2, .section h2 { font-size: 28px !important; }
h3, .section h3 { font-size: 22px !important; }
h4, .section h4 { font-size: 19px !important; }

p { margin-bottom: 1rem; }
img { max-width: 100%; height: auto; display: block; border-radius: 10px; }
a { color: var(--cta-pink); }

/* Layout */
.container, .section .container { max-width: 1100px !important; margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0; }
.section-spacious { padding: 60px 0; }
.col.narrow { max-width: 800px; margin: 0 auto; text-align: left; }
.align-center { text-align: center; }
.align-center .container { text-align: center; }

/* Grid */
.grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: stretch; }
.grid > .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.col-35 { flex: 0 0 calc(35% - 15px); }
.col-40 { flex: 0 0 calc(40% - 18px); }
.col-50 { flex: 0 0 calc(50% - 15px); }
.col-60 { flex: 0 0 calc(60% - 12px); }
.col-65 { flex: 0 0 calc(65% - 15px); }
.col-v-center { justify-content: center; align-self: center; }

@media (max-width: 768px) {
    h1, .section h1, .section-hero h1 { font-size: 26px !important; }
    h2, .section h2 { font-size: 23px !important; }
    h3, .section h3 { font-size: 20px !important; }
    .hero-subtitle { font-size: 1rem; }
    .grid > .col, [class*="col-"] { flex: 0 0 100%; }
    .section { padding: 36px 0; }
    .section-spacious { padding: 44px 0; }
    .btn { font-size: 18px !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.section-hero { padding: 44px 0 64px; }
.section-hero h1 { color: var(--delft-blue); margin-bottom: 0.5rem; font-size: 36px !important; }
.hero-proof {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(34, 55, 89, 0.18);
}
.hero-proof p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px;
    color: var(--delft-blue);
}
.hero-proof .btn-wrap { margin: 0; }
@media (max-width: 768px) {
    .hero-proof { margin-top: 40px; padding-top: 24px; }
    .hero-proof p { font-size: 16px !important; margin-bottom: 22px; }
}
.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--delft-blue);
    margin-bottom: 28px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn,
a.btn,
.btn-wrap a.btn,
.btn-center a.btn {
    display: inline-block !important;
    padding: 10px 40px !important;
    background: rgb(74, 168, 110) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 15px !important;
    font-weight: 700 !important;
    font-family: 'Arvo', serif !important;
    font-size: 22px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: all 0.3s ease;
}
.btn:hover { background: rgb(60, 140, 90); transform: translateY(-2px); }
.btn-wrap { margin: 40px 0 10px 0; }
.btn-center { text-align: center; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}
.video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.video-caption { font-size: 0.9rem; color: var(--body-text); }

/* ============================================================
   LISTS
   ============================================================ */
.icon-list { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.icon-list.arrow-list li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.5;
}
.icon-list.arrow-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--delft-blue);
    font-weight: bold;
    font-size: 1.2em;
}

.info-list { list-style: none; padding: 0; margin: 20px 0; }
.info-list li {
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
}
.info-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border: 2px solid #15899f;
    border-radius: 50%;
    color: #15899f;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================
   FEATURE CARDS (What You'll Get)
   ============================================================ */
.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.feature-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    font-size: 22px;
    color: #ffffff;
    background: var(--delft-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-content { flex: 1; }
.feature-content h4 {
    color: rgb(58, 58, 58);
    margin-bottom: 8px;
    font-size: 19px !important;
}
.feature-content p { margin-bottom: 0; font-size: 17px !important; line-height: 1.6 !important; font-family: europa, sans-serif !important; color: var(--paynes-gray); }

@media (max-width: 768px) {
    .feature-card { flex-direction: column; }
}

/* ============================================================
   TESTIMONIALS - Colored Bubbles
   ============================================================ */
.testimonial-highlight { border-radius: 0; }

.testimonial-grid { gap: 40px; }

.testimonial-bubble {
    padding: 30px;
    border-radius: 10px;
    color: white;
    position: relative;
    margin-bottom: 10px;
}
.testimonial-bubble h4 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-style: italic;
}
.testimonial-bubble p {
    font-size: 17px !important;
    line-height: 1.55 !important;
    font-style: italic;
    font-family: europa, sans-serif !important;
    margin-bottom: 0;
}

.bubble-author {
    font-weight: 700;
    font-style: italic;
    color: var(--body-text);
    padding: 10px 0 30px 10px;
    font-size: 0.95rem;
}

.bubble-gold { background-color: #e8a600; }
.bubble-teal { background-color: #49afc1; }
.bubble-magenta { background-color: #c6007e; }
.bubble-yellow { background-color: #e8a600; }

/* Speech bubble tail */
.testimonial-bubble::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.bubble-gold::after { border-top: 15px solid #e8a600; }
.bubble-teal::after { border-top: 15px solid #49afc1; }
.bubble-magenta::after { border-top: 15px solid #c6007e; }
.bubble-yellow::after { border-top: 15px solid #e8a600; }

/* Testimonial header */
.section-testimonial-header { padding: 40px 0; }

/* ============================================================
   BONUSES
   ============================================================ */
.bonus-box {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.bonus-box h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}
.bonus-mockup {
    max-width: 350px;
    margin: 0 auto 20px;
}
.bonus-box ul {
    list-style: disc;
    padding-left: 25px;
    margin: 15px 0;
}
.bonus-box ul li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ============================================================
   VALUE STACK / PRICING
   ============================================================ */
.value-stack h2 { margin-bottom: 30px; }
.value-stack,
.value-stack p,
.value-stack li,
.value-stack strong,
.value-stack h2,
.value-stack h3,
.value-stack h4 { color: #ffffff !important; }
.value-stack strong { color: #ffd24c !important; }
.pricing-display {
    margin: 40px 0;
    text-align: center;
}
.total-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #ccc;
}
.your-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: white;
    margin-top: 20px;
}
.price-crossed {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #999;
}
.price-final {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: white;
    margin-top: 10px;
}
.price-normally {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    color: rgba(255,255,255,0.75) !important;
    margin: 4px 0 18px !important;
}
.price-normally s {
    color: rgba(255,255,255,0.6);
    margin-left: 4px;
}
.value-stack .price-normally { color: rgba(255,255,255,0.75) !important; }

.price-savings {
    display: block;
    margin: 18px auto 0 !important;
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
    font-weight: 700;
    font-size: 1.05rem !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
}
.value-stack .price-savings { color: #ffffff !important; }

/* ============================================================
   LIGHT BLUE SECTION
   ============================================================ */
.section-light-blue { background-color: #f0f6fa; }

/* Tighten the gap between "Here's a Peek..." headline and the cards section below */
.peek-headline {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}
.section-peek-cards { padding-top: 24px !important; }
@media (max-width: 768px) {
    .section-peek-cards { padding-top: 16px !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.section-footer { padding: 30px 0; }
.section-footer p { font-size: 0.85rem; color: var(--paynes-gray); margin: 0; }