/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --shadow-light: rgba(0, 0, 0, 0.03);
    --shadow-medium: rgba(0, 0, 0, 0.05);
    --shadow-dark: rgba(0, 0, 0, 0.08);
    --shadow-studio: rgba(0, 0, 0, 0.02);
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    --border-radius-sm: 12px;
    --border-radius-md: 24px;
    --border-radius-lg: 32px;
    --dots-offset: 3rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--white);
    /* Responsive background - mobile gets 800w, larger screens get bigger */
    background-image: -webkit-image-set(
        url('../images/background-800w.webp') 1x
    );
    background-image: image-set(
        url('../images/background-800w.webp') 1x
    );
    background-size: 250% auto;      /* zoomed out relative to viewport */
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--black);
    line-height: 1.6;
    width: 100%;
    max-width: 428px;  /* base iPhone size - will scale via media queries */
    margin: 0 auto;                   /* center on larger screens */
    padding-left: var(--spacing-sm);  /* padding from browser edges at all sizes */
    padding-right: var(--spacing-sm);  /* padding from browser edges at all sizes */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.125rem;              /* increased base font size */
}

p {
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Scale body width with viewport to match content-card */
@media (min-width: 500px) {
    body {
        max-width: 500px;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (min-width: 600px) {
    body {
        background-image: -webkit-image-set(
            url('../images/background-1200w.webp') 1x
        );
        background-image: image-set(
            url('../images/background-1200w.webp') 1x
        );
    }
}

@media (min-width: 1000px) {
    body {
        background-image: -webkit-image-set(
            url('../images/background-1600w.webp') 1x
        );
        background-image: image-set(
            url('../images/background-1600w.webp') 1x
        );
    }
}

@media (min-width: 600px) {
    body {
        max-width: 700px;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (min-width: 700px) {
    body {
        max-width: 800px;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

@media (min-width: 800px) {
    body {
        max-width: 900px;
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}

/* Adjust background position for larger screens to keep notebook more visible */
@media (min-width: 420px) {
    body {
        background-position: top -20px center;  /* move background higher up */
    }
}

/* Fix background position at 472px width - stops moving beyond this size */
@media (min-width: 1500px) {
    body {
        background-position: top -80px center;  /* fixed position - no more movement */
        background-size: 100% auto;  /* maintain consistent size */
    }
}

/* Hero Section - Only contains hero image */
.hero-section {
    background: transparent !important;      /* must be transparent */
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: none !important;             /* no shadow - fully transparent */
    opacity: 1;                              /* ensure full opacity */
    height: 350px;
}

/* Counteract body's inset shadow by overlaying a subtle bright layer */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.03);   /* very subtle white overlay to counteract dark shadow */
    pointer-events: none;
    z-index: -1;
}

/* Product Identifier */
.product-identifier {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 10;
}

.identifier-circle {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background: var(--white);
    background-image: url('../images/Logo photo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--shadow-medium);
    box-shadow: 0 2px 8px var(--shadow-light);
}

/* Hero Image */
.hero-image-container {
    width: 100%;
    max-width: 320px;
    margin: var(--spacing-md) 0 0;
    position: relative;
    z-index: 1;
    background: transparent;      /* must be transparent */
    overflow: visible;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;             /* no shadow “frame” */
    filter: none;
    position: static;
    background: transparent;      /* must be transparent */
    mix-blend-mode: normal;
    opacity: 0;                   /* visually hide image but keep space on main page */
}

/* On policy/thank-you pages we want the hero image visible */
body.policy-page .hero-image,
body.thank-you-page .hero-image {
    opacity: 1;
}

.hero-image-container::after {
    display: none;                /* no decorative overlay */
}

/* Hero Title Section */
.hero-title-section {
    text-align: center;
    margin: 0 auto 0;
    width: 100%;
    max-width: 300px;
    text-shadow: 0 1px 2px var(--shadow-studio);
}

.main-title {
    font-family: 'Huninn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.02em;
}

.tagline {
    font-family: 'Huninn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 22px;
    color: var(--black);
    opacity: 1;
    font-weight: normal;
    box-sizing: content-box;
}

/* Stock Message */
.stock-message {
    text-align: center;
    margin: 0 auto var(--spacing-md);
    width: 100%;
    max-width: 300px;
}

.stock-message p {
    color: #FF0000;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 var(--spacing-xs);
    line-height: 1.4;
}

.stock-countdown {
    margin-top: var(--spacing-xs);
    font-size: 1.25rem;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #FF0000;
    text-align: center;
    display: block;
}

.stock-countdown-timer {
    font-weight: 700;
    font-size: 1.5rem;
    color: #FF0000;
    letter-spacing: 0.05em;
}

/* Intro Text */
.intro-text {
    text-align: center;
    margin-top: 0;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0;
    width: 100%;
    max-width: 300px;
    text-shadow: 0 1px 2px var(--shadow-studio);
}

.intro-text p {
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 23px;  /* fixed size - no scaling */
    line-height: 1.6;
    font-weight: 400;
    align-items: center;
    justify-content: center;
}

.intro-text .handwritten-text {
    font-family: 'Playpen Sans Hebrew', 'Huninn', 'Brush Script MT', 'Lucida Handwriting', cursive, serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    margin-top: var(--spacing-md);
    text-align: center;
    color: var(--black);
    opacity: 0.9;
}

/* Illustration Placeholders */
.illustration-placeholder {
    width: 100%;
    max-width: 300px;
    height: 200px;
    background: var(--white);
    border: 1px dashed var(--shadow-medium);
    border-radius: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 1px 3px var(--shadow-studio),
        0 2px 6px var(--shadow-light);
}

.placeholder-content {
    color: var(--black);
    opacity: 0.4;
    font-size: 1rem;
    text-align: center;
}

.hand-writing-illustration {
    margin-bottom: var(--spacing-md);
    position: relative;
    overflow: hidden;
    padding: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}

.hand-writing-illustration .video-container {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #000;
    outline: none;
}

.hand-writing-illustration .video-poster {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    opacity: 1;
}

.hand-writing-illustration .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.hand-writing-illustration .video-container:focus-visible {
    outline: 3px solid rgba(0, 0, 0, 0.35);
    outline-offset: 4px;
}

.hand-writing-illustration iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    display: block;
}

.open-notebook-illustration {
    margin-top: 30px;
    margin-bottom: 5px;
    height: 200px;
    min-height: 200px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.open-notebook-illustration .notebook-image {
    width: 279px;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

/* CTA Buttons */
.cta-container {
    width: 100%;
    margin: 0 auto 0;
    margin-bottom: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cta-button {
    flex: 0 1 auto;
    max-width: 240px;
    margin-top: 20px;
    padding: var(--spacing-xs) var(--spacing-lg);
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-dark);
}

.cta-button:active {
    transform: translateY(0);
}

.cta-price-text {
    color: #FF0000;
    font-size: 0.75rem;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: bold;
    text-align: center;
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    line-height: 1.4;
}

.cta-price-text .cta-countdown-timer {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-right: 2px;
}

.cta-countdown {
    margin-top: 4px;
    font-size: 1rem;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #FF0000;
    text-align: center;
    display: block; /* Always visible, JavaScript will hide if needed */
}

.cta-countdown-label {
    margin-left: 4px;
    font-size: 18px;
    color: #FF0000 !important;
}

.cta-countdown-timer {
    font-weight: 700;
    font-size: 20px;
    color: #FF0000 !important;
}

/* Narrative Text */
.narrative-text {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 24px;
    width: 100%;
    max-width: 300px;
    text-shadow: 0 1px 2px var(--shadow-studio);
}

.narrative-text p {
    margin: 8px auto var(--spacing-xs);
    width: 100%;
    max-width: 280px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
}

.narrative-text p:last-child {
    margin-bottom: 0;
}

.narrative-text.light-text p {
    font-weight: 400;
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* Second narrative-text.light-text after carousel-section */
.carousel-section + .narrative-text.light-text {
    margin-top: 24px;
}

/* Easy and Time Section */
.writing-structure-block .narrative-text.light-text p {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Product Description */
.product-description {
    text-align: center;
    margin: var(--spacing-sm) auto var(--spacing-xs);
    width: 100%;
    max-width: 300px;
    text-shadow: 0 1px 2px var(--shadow-studio);
}

.product-description p {
    margin: 0 auto;
    width: 100%;
    font-size: 1.25rem;
    line-height: 1.7;
    font-weight: 400;
}

/* Product Benefits Block - Container with bright grey background */
.product-benefits-block {
    background-color: #f5f5f5; /* bright grey - same as writing-structure-block */
    border-radius: 0; /* Remove border radius for edge-to-edge */
    padding: var(--spacing-md) var(--spacing-md);
    margin: var(--spacing-md) calc(var(--spacing-md) * -1); /* Negative margins to extend edge-to-edge */
    width: calc(100% + var(--spacing-md) * 2); /* Extend beyond content-card padding */
    max-width: none; /* Remove max-width constraint */
}

.product-benefits-block .product-description {
    margin-bottom: var(--spacing-sm);
}

/* Features List */
.features-list {
    margin: 5px auto;
    width: 100%;
    max-width: 300px;
}

.features-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.features-list-items li {
    font-family: 'Playpen Sans Hebrew', 'Huninn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    position: relative;
    text-align: right;
    background-color: var(--white);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 1px 3px var(--shadow-studio);
}

.features-list-items li strong {
    font-weight: 700;
}

.features-list-items li > strong:first-child {
    display: block; /* Block so it's on its own line */
    text-align: right;
    text-decoration: underline;
    font-size: 1.25em;
    margin-bottom: 8px;
    position: relative;
    padding-right: 20px; /* Space for checkmark */
}

.features-list-items li::before {
    content: '✓';
    position: absolute;
    right: var(--spacing-md); /* Position at the right edge (RTL) */
    top: var(--spacing-sm);
    color: var(--black);
    font-weight: bold;
    font-size: 1.25em; /* Match the strong element's font size */
    line-height: 1.25em; /* Match the strong element's line height */
}

.features-list-items li:last-child {
    margin-bottom: 0;
}

/* Writing Structure Block - Container with bright grey background */
.writing-structure-block {
    background-color: #f5f5f5; /* bright grey */
    border-radius: 0; /* Remove border radius for edge-to-edge */
    padding: var(--spacing-md) var(--spacing-md);
    margin: var(--spacing-md) calc(var(--spacing-md) * -1); /* Negative margins to extend edge-to-edge */
    width: calc(100% + var(--spacing-md) * 2); /* Extend beyond content-card padding */
    max-width: none; /* Remove max-width constraint */
}

.writing-structure-block .product-description {
    margin-bottom: var(--spacing-sm);
}

.writing-structure-block .narrative-text {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

/* Writing Structure List - Title-style bullet items */
.writing-structure-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xs) auto var(--spacing-sm);
    text-align: right;
    max-width: 280px;
}

.writing-structure-list li {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    text-align: right;
    padding: var(--spacing-sm) var(--spacing-sm);
    position: relative;
    background-color: var(--white);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 1px 3px var(--shadow-studio);
}

.writing-structure-list li strong {
    display: block;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--black);
    line-height: 1.3;
}

.writing-structure-list li span {
    display: block;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
}

.writing-structure-list li::before {
    display: none; /* Remove bullet point for white box design */
}

.writing-structure-list li:last-child {
    margin-bottom: 0;
}

/* Benefits List - Simple bullet list with checkmarks */
.benefits-list-items {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) auto var(--spacing-md);
    text-align: right;
    max-width: 280px;
}

.benefits-list-items li {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: var(--spacing-xs);
    text-align: right;
    padding-right: 30px;
    position: relative;
}

.benefits-list-items li::before {
    content: '✓';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
}

.benefits-list-items li:last-child {
    margin-bottom: 0;
}

/* Content Card - Card-like design covering whole page */
.content-card {
    background: var(--white);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    margin: -20px auto 0;
    margin-left: var(--spacing-sm);  /* padding from browser edges */
    margin-right: var(--spacing-sm);  /* padding from browser edges */
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xxl);
    box-shadow: 
        0 -2px 8px rgba(0, 0, 0, 0.08),
        0 -4px 16px rgba(0, 0, 0, 0.06),
        0 -8px 32px rgba(0, 0, 0, 0.05),
        0 -16px 64px rgba(0, 0, 0, 0.04),
        0 -24px 96px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* ensure card can stack above hero image */
    z-index: 5;         /* higher than .hero-image-container (z-index: 1) */
    width: calc(100% - var(--spacing-sm) * 2);  /* account for margins */
    max-width: calc(428px - var(--spacing-sm) * 2);  /* base iPhone size minus margins */
}

/* Scale content-card width with viewport with consistent edge padding */
@media (min-width: 500px) {
    .content-card {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
        width: calc(100% - var(--spacing-md) * 2);
        max-width: calc(500px - var(--spacing-md) * 2);
    }
}

@media (min-width: 600px) {
    .content-card {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
        width: calc(100% - var(--spacing-md) * 2);
        max-width: calc(700px - var(--spacing-md) * 2);
    }
}

@media (min-width: 700px) {
    .content-card {
        margin-left: var(--spacing-lg);
        margin-right: var(--spacing-lg);
        width: calc(100% - var(--spacing-lg) * 2);
        max-width: calc(800px - var(--spacing-lg) * 2);
    }
}

@media (min-width: 800px) {
    .content-card {
        margin-left: var(--spacing-xl);
        margin-right: var(--spacing-xl);
        width: calc(100% - var(--spacing-xl) * 2);
        max-width: calc(900px - var(--spacing-xl) * 2);
    }
}

@media ((min-width: 620px) and (min-height: 968px)) or ((min-width: 645px) and (min-height: 730px)) {
    .content-card {
        margin-top: -150px;
    }
}

/* On very wide desktop screens, pull the card up a bit more so the hero area isn't blank */
@media (min-width: 1024px) {
    .content-card {
        margin-top: -180px;
    }
}

/* On medium desktop / large tablet widths, pull the card up a bit to reduce blank hero gap */
@media (min-width: 800px) and (max-width: 1023.98px) {
    .content-card {
        margin-top: -150px;
    }
}

/* Scale all content elements proportionally with content-card */
@media (min-width: 500px) {
    .hero-image-container {
        max-width: 374px;
    }
    .identifier-circle {
        width: 67px;
        height: 67px;
    }
    .hero-title-section,
    .intro-text,
    .illustration-placeholder,
    .cta-container,
    .narrative-text,
    .product-description,
    .engagement-text,
    .features-list,
    .footer-section,
    .stock-message {
        max-width: 350px;
    }
    .slogan-section {
        max-width: 467px;
    }
    .intro-text p,
    .narrative-text p,
    .product-description p,
    .engagement-text .engagement-paragraph {
        max-width: 327px !important;
    }
    .cta-button {
        max-width: 220px;
    }
    .engagement-text {
        max-width: 467px;
    }
    .stock-message p {
        font-size: 1.75rem;
    }
    .content-card > p:has(+ .social-proof-carousel-section) {
        max-width: 350px;
    }
    .writing-structure-list {
        max-width: 327px;
    }
    .benefits-list-items {
        max-width: 327px;
    }
}

@media (min-width: 600px) {
    .hero-image-container {
        max-width: 524px;
    }

    .hero-title-section,
    .intro-text,
    .illustration-placeholder,
    .cta-container,
    .narrative-text,
    .product-description,
    .features-list,
    .footer-section,
    .stock-message {
        max-width: 491px;
    }
    .engagement-text {
        max-width: 655px;
    }
    .slogan-section {
        max-width: 655px;
    }
    .intro-text p,
    .narrative-text p,
    .product-description p,
    .engagement-text .engagement-paragraph {
        max-width: 458px !important;
    }
    .cta-button {
        max-width: 320px;
    }
    .stock-message p {
        font-size: 21px;
    }
    .content-card > p:has(+ .social-proof-carousel-section) {
        max-width: 491px;
    }
    .writing-structure-list {
        max-width: 458px;
    }
    .benefits-list-items {
        max-width: 458px;
    }
}

@media (min-width: 700px) {
    .hero-image-container {
        max-width: 598px;
    }
    .hero-title-section,
    .intro-text,
    .illustration-placeholder,
    .cta-container,
    .narrative-text,
    .product-description,
    .features-list,
    .footer-section,
    .stock-message {
        max-width: 561px;
    }
    .engagement-text {
        max-width: 748px;
    }
    .slogan-section {
        max-width: 748px;
    }
    .intro-text p,
    .narrative-text p,
    .product-description p,
    .engagement-text .engagement-paragraph {
        max-width: 524px !important;
    }
    .cta-button {
        max-width: 366px;
    }
    .stock-message p {
        font-size: 2.25rem;
    }
    .content-card > p:has(+ .social-proof-carousel-section) {
        max-width: 561px;
    }
    .writing-structure-list {
        max-width: 524px;
    }
    .benefits-list-items {
        max-width: 524px;
    }
}

@media (min-width: 800px) {
    .hero-image-container {
        max-width: 673px;
    }
    .hero-title-section,
    .intro-text,
    .illustration-placeholder,
    .cta-container,
    .narrative-text,
    .product-description,
    .features-list,
    .footer-section,
    .stock-message {
        max-width: 631px;
    }
    .engagement-text {
        max-width: 842px;
    }
    .slogan-section {
        max-width: 842px;
    }
    .intro-text p,
    .narrative-text p,
    .product-description p,
    .engagement-text .engagement-paragraph {
        max-width: 589px !important;
    }
    .cta-button {
        max-width: 412px;
    }
    .stock-message p {
        font-size: 2.5rem;
    }
    .content-card > p:has(+ .social-proof-carousel-section) {
        max-width: 631px;
    }
    .writing-structure-list {
        max-width: 589px;
    }
    .benefits-list-items {
        max-width: 589px;
    }
}

.content-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05), transparent);
}

/* Engagement Text */
.engagement-text {
    margin: 0 auto var(--spacing-xl);
    width: 100%;
    max-width: 400px;
    text-align: center;
    text-shadow: 0 1px 2px var(--shadow-studio);
}

.engagement-paragraph {
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 0px;
    text-align: center;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.engagement-paragraph:last-child {
    margin-bottom: 0;
}

/* Add spacing between paragraphs inside engagement-text containers */
.engagement-text .engagement-paragraph:not(:last-child) {
    margin-bottom: var(--spacing-sm);
}

.underline {
    text-decoration: underline;
    margin-top: 0px;
    margin-bottom: 0px;
}

.engagement-paragraph .underline {
    text-decoration: underline;
}

.engagement-paragraph.bold {
    font-weight: bold;
}

/* Carousel Section */
.carousel-section {
    margin: 0 auto 0;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 500px) {
    .carousel-section {
        max-width: 350px;
    }
    
    .carousel-image {
        max-height: 400px;
    }
}

@media (min-width: 600px) {
    .carousel-section {
        max-width: 400px;
    }
    
    .carousel-image {
        max-height: 420px;
    }
}

@media (min-width: 700px) {
    .carousel-section {
        max-width: 420px;
    }
    
    .carousel-image {
        max-height: 440px;
    }
}

@media (min-width: 800px) {
    .carousel-section {
        max-width: 450px;
    }
    
    .carousel-image {
        max-height: 460px;
    }
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    position: relative;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x; /* Only allow horizontal panning for carousel */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease-out;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel-image-placeholder {
    width: 100%;
    height: 240px;
    background: var(--white);
    border: 1px dashed var(--shadow-medium);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 1px 3px var(--shadow-studio),
        0 2px 6px var(--shadow-light);
}

.carousel-video {
    width: 100%;
    height: 56.25vw;
    min-height: 240px;
    max-height: 550px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-sm);
    box-shadow: 
        0 1px 3px var(--shadow-studio),
        0 2px 6px var(--shadow-light);
    display: block;
}

.carousel-image {
    width: 100%;
    height: 56.25vw;
    min-height: 240px;
    max-height: 550px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-sm);
    box-shadow: 
        0 1px 3px var(--shadow-studio),
        0 2px 6px var(--shadow-light);
    display: block;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--spacing-md);
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px; /* Small padding for touch target */
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    box-sizing: content-box;
}

.carousel-dot.active {
    background: var(--black);
    width: 20px;
    border-radius: 10px;
}

/* Slogan Section */
.slogan-section {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

.slogan-title {
    font-family: 'Huninn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px var(--shadow-studio);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

/* Footer Section */
.footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 auto 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--shadow-light);
    box-shadow: 0 -1px 2px var(--shadow-studio);
    width: 100%;
    max-width: 300px;
}

.copyright {
    font-size: 0.875rem;
    color: var(--black);
    opacity: 0.5;
    text-align: center;
    margin: 0;
    width: 100%;
}

.footer-links {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xs);
    width: 100%;
}

.footer-links a {
    font-size: 0.875rem;
    color: var(--black);
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--shadow-medium);
    border-radius: var(--border-radius-sm);
    background: var(--white);
}

.footer-links a:hover {
    opacity: 0.7;
}

/* Mobile Optimizations */
@media (max-width: 428px) {
    .hero-section {
        padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-lg);
        min-height: auto;
    }

    .main-title {
        font-size: 3rem;
    }

    .content-card {
        margin: -20px auto 0;
        padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xl);
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        width: 100%;
    }

    .hero-image-container {
        max-width: 280px;
        margin: var(--spacing-lg) 0 var(--spacing-md);
    }

    .product-identifier {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
    }

    /* Prevent horizontal swipe: match "edge-to-edge" negative margins to mobile padding */
    .product-benefits-block,
    .writing-structure-block {
        margin-left: calc(var(--spacing-sm) * -1);
        margin-right: calc(var(--spacing-sm) * -1);
        width: calc(100% + var(--spacing-sm) * 2);
    }

}

/* On mobile, avoid background-attachment: fixed to prevent flicker and re-painting */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
        background-size: 200% auto;
    }
}

@media (max-width: 375px) {
    .main-title {
        font-size: 2.5rem;
    }

    .tagline {
        font-size: 1.25rem;
    }

    .slogan-title {
        font-size: 2rem;
    }

    .hero-image-container {
        max-width: 260px;
    }

    .cta-button {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-md);
    }
}

/* Touch optimization */
@media (hover: none) and (pointer: coarse) {
    .cta-button {
        min-height: 44px; /* Apple's minimum touch target */
    }

    .carousel-dot {
        width: 6px;
        height: 6px;
        padding: 4px; /* Small padding */
    }

    .carousel-dot.active {
        width: 20px;
    }
}

/* Prevent text selection on buttons during touch */
.cta-button,
.carousel-dot {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .product-identifier {
    left: auto;
    right: var(--spacing-md);
}

[dir="rtl"] .carousel-track {
    direction: ltr; /* Carousel should work left-to-right regardless of RTL */
}

/* Policy Page Styles */
.policy-section {
    margin: var(--spacing-xl) auto;
    width: 100%;
    max-width: 400px;
}

.policy-heading {
    font-family: 'Huninn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: var(--spacing-md);
    text-align: center;
    text-shadow: 0 1px 2px var(--shadow-studio);
    letter-spacing: -0.02em;
}

/* Scale policy sections with viewport */
@media (min-width: 500px) {
    .policy-section {
        max-width: 350px;
    }
}

@media (min-width: 600px) {
    .policy-section {
        max-width: 491px;
    }
}

@media (min-width: 700px) {
    .policy-section {
        max-width: 561px;
    }
}

@media (min-width: 800px) {
    .policy-section {
        max-width: 631px;
    }
}

/* Safe area insets for iPhone X and newer */
@supports (padding: max(0px)) {
    .hero-section {
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
        padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    }

    .content-card {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-xxl), env(safe-area-inset-bottom));
    }
}

/* Social Proof Carousel Title */
.content-card > p:has(+ .social-proof-carousel-section) {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: var(--spacing-sm) auto;
    margin-bottom: -24px;
    width: 100%;
    max-width: 438px;
}

/* Social Proof Carousel - Apple/Lemonade Inspired Design */
.social-proof-carousel-section {
    width: 100%;
    max-width: 340px; /* slightly wider on phone so side images peek in more */
    margin: 0 auto 0px;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-md);
    position: relative;
    overflow-x: hidden; /* prevent horizontal scrollbar from ::before background */
}

.social-proof-intro {
    text-align: center;
    margin-bottom: calc(var(--dots-offset) * -0.3);
    padding: 0 var(--spacing-sm);
    width: 100%;
    max-width: 292px;
    margin-left: auto;
    margin-right: auto;
}

.social-proof-intro p {
    font-size: 1.25rem;
    text-align: center;
    max-width: 300px;
    width: 292px;
    color: var(--black);
    opacity: 0.9;
    line-height: 1.5;
    margin: 0 auto;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.social-proof-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: calc(var(--dots-offset) * 0.1);
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
    flex-direction: row-reverse;
}

.social-proof-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-tap-highlight-color: transparent;
    display: block;
    flex-shrink: 0;
}

.social-proof-dot.active {
    width: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
}

/* Subtle background differentiation for the section */
.social-proof-carousel-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.01);
    border-radius: var(--border-radius-md);
    z-index: -1;
}

.social-proof-carousel-container {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: auto;
    perspective: 1500px;
    -webkit-perspective: 1500px;
    overflow: visible;
    touch-action: pan-x;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.social-proof-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.social-proof-carousel-track.dragging {
    transition: none;
}

.social-proof-slide {
    position: absolute;
    width: auto;
    max-width: 260px;
    height: auto;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-proof-image {
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 370px;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background: var(--white);
}

/* Center image (active) - data-index="0" - Hero treatment */
.social-proof-slide[data-index="0"] {
    transform: translate(-50%, -50%) translateZ(0px) scale(1);
    -webkit-transform: translate(-50%, -50%) translateZ(0px) scale(1);
    opacity: 1;
    z-index: 10;
    filter: brightness(1);
}

.social-proof-slide[data-index="0"] .social-proof-image {
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 8px 40px rgba(0, 0, 0, 0.06),
        0 16px 60px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Images to the right (behind, peeking from right) - More subtle */
.social-proof-slide[data-index="1"] {
    transform: translate(-35%, -50%) translateZ(-80px) scale(0.88);
    -webkit-transform: translate(-35%, -50%) translateZ(-80px) scale(0.88);
    opacity: 0.5;
    z-index: 9;
    filter: brightness(0.95) blur(0.5px);
}

.social-proof-slide[data-index="1"] .social-proof-image {
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.social-proof-slide[data-index="2"] {
    transform: translate(-20%, -50%) translateZ(-120px) scale(0.82);
    -webkit-transform: translate(-20%, -50%) translateZ(-120px) scale(0.82);
    opacity: 0.35;
    z-index: 8;
    filter: brightness(0.9) blur(1px);
}

.social-proof-slide[data-index="2"] .social-proof-image {
    box-shadow: 
        0 1px 8px rgba(0, 0, 0, 0.05),
        0 2px 16px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.social-proof-slide[data-index="3"] {
    transform: translate(-5%, -50%) translateZ(-160px) scale(0.76);
    -webkit-transform: translate(-5%, -50%) translateZ(-160px) scale(0.76);
    opacity: 0.2;
    z-index: 7;
    filter: brightness(0.85) blur(1.5px);
    pointer-events: none;
}

/* Images to the left (behind, peeking from left) - More subtle */
.social-proof-slide[data-index="6"] {
    transform: translate(-65%, -50%) translateZ(-80px) scale(0.88);
    -webkit-transform: translate(-65%, -50%) translateZ(-80px) scale(0.88);
    opacity: 0.5;
    z-index: 9;
    filter: brightness(0.95) blur(0.5px);
}

.social-proof-slide[data-index="6"] .social-proof-image {
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.social-proof-slide[data-index="5"] {
    transform: translate(-80%, -50%) translateZ(-120px) scale(0.82);
    -webkit-transform: translate(-80%, -50%) translateZ(-120px) scale(0.82);
    opacity: 0.35;
    z-index: 8;
    filter: brightness(0.9) blur(1px);
}

.social-proof-slide[data-index="5"] .social-proof-image {
    box-shadow: 
        0 1px 8px rgba(0, 0, 0, 0.05),
        0 2px 16px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.social-proof-slide[data-index="4"] {
    transform: translate(-95%, -50%) translateZ(-160px) scale(0.76);
    -webkit-transform: translate(-95%, -50%) translateZ(-160px) scale(0.76);
    opacity: 0.2;
    z-index: 7;
    filter: brightness(0.85) blur(1.5px);
    pointer-events: none;
}

/* Additional slides for 9 total - positioned further back */
.social-proof-slide[data-index="7"] {
    transform: translate(-50%, -50%) translateZ(-240px) scale(0.7);
    -webkit-transform: translate(-50%, -50%) translateZ(-240px) scale(0.7);
    opacity: 0.15;
    z-index: 6;
    filter: brightness(0.8) blur(2px);
    pointer-events: none;
}

.social-proof-slide[data-index="8"] {
    transform: translate(-50%, -50%) translateZ(-280px) scale(0.65);
    -webkit-transform: translate(-50%, -50%) translateZ(-280px) scale(0.65);
    opacity: 0.1;
    z-index: 5;
    filter: brightness(0.75) blur(2.5px);
    pointer-events: none;
}

/* Responsive adjustments */
@media (min-width: 500px) {
    .social-proof-carousel-section {
        max-width: 380px;
    }
    
    .social-proof-carousel-section::before {
        max-width: calc(380px + var(--spacing-md));
    }
    
    .social-proof-intro p {
        font-size: 1.375rem;
    }
    
    .social-proof-carousel-container {
        min-height: 460px;
    }
    
    .social-proof-slide {
        max-width: 330px;
    }
    
    .social-proof-image {
        max-width: 330px;
        max-height: 440px;
    }
}

@media (min-width: 600px) {
    .social-proof-carousel-section {
        max-width: 420px;
    }
    
    .social-proof-carousel-section::before {
        max-width: calc(420px + var(--spacing-md));
    }
    
    .social-proof-intro p {
        font-size: 1.375rem;
    }
    
    .social-proof-carousel-container {
        min-height: 450px;
    }
    
    .social-proof-slide {
        max-width: 350px;
    }
    
    .social-proof-image {
        max-width: 350px;
        max-height: 420px;
    }
}

@media (min-width: 700px) {
    .social-proof-carousel-section {
        max-width: 450px;
    }
    
    .social-proof-carousel-section::before {
        max-width: calc(450px + var(--spacing-md));
    }
    
    .social-proof-intro p {
        font-size: 1.5rem;
    }
    
    .social-proof-carousel-container {
        min-height: 470px;
    }
    
    .social-proof-slide {
        max-width: 370px;
    }
    
    .social-proof-image {
        max-width: 370px;
        max-height: 440px;
    }
}

@media (min-width: 800px) {
    .social-proof-carousel-section {
        max-width: 480px;
    }
    
    .social-proof-carousel-section::before {
        max-width: calc(480px + var(--spacing-md));
    }
    
    .social-proof-intro p {
        font-size: 1.625rem;
    }
    
    .social-proof-carousel-container {
        min-height: 490px;
    }
    
    .social-proof-slide {
        max-width: 390px;
    }
    
    .social-proof-image {
        max-width: 390px;
        max-height: 460px;
    }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
    .social-proof-carousel-container {
        touch-action: pan-x;
    }
    
    .social-proof-slide {
        cursor: grab;
    }
    
    .social-proof-slide:active {
        cursor: grabbing;
    }
}