/* Design system matched to /landing-ai-labor-os/: cream page, one deep green accent,
   white bordered cards, bold headings */
:root {
    --bg: #F5F4EF;
    --card: #ffffff;
    --fg: #14201A;
    --primary: #0A5A40;
    --primary-fg: #ffffff;
    --secondary: #ECEAE2;
    --muted-fg: #4F5F56;
    --border: rgba(20, 32, 26, 0.14);

    --elevation: 0 0 0 1px rgba(20, 32, 26, 0.14);
    --elevation-hover: 0 0 0 1px rgba(20, 32, 26, 0.28);

    --red: #dc2626;
    --accent: #0A5A40;
    --accent-soft: #D7F0E4;
    --accent-strong: #0A5A40;

    /* Looped Thai for body copy, loopless Noto for H1/H2 only */
    --font-sans: 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
    --font-head: 'Noto Sans Thai', system-ui, sans-serif;
    --font-mono: var(--font-sans);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--fg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2 {
    font-family: var(--font-head);
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

h2 {
    font-size: clamp(2.05rem, 4.5vw, 3.35rem);
    line-height: 1.22;
    margin-bottom: 1rem;
    color: var(--fg);
}

p { color: var(--muted-fg); }

.text-highlight { color: var(--accent); }

.text-gray { color: var(--muted-fg); }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-center { text-align: center; }

.eyebrow {
    display: block;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
}

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

section { padding: 100px 0; }

/* Alternate white / gray bands so each section reads as its own block.
   Full-bleed without extra markup: the shadow paints the gutters, clip-path trims it vertically */
main > section:nth-of-type(even) {
    background: var(--secondary);
    box-shadow: 0 0 0 100vmax var(--secondary);
    clip-path: inset(0 -100vmax);
}

/* same-tone pieces would vanish on those bands: flip them to white */
main > section:nth-of-type(even) .compare-col.is-old {
    background: var(--card);
}

.mt-2 { margin-top: 0.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-auto { margin-top: auto; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(245, 244, 239, 0.96);
    border-bottom: 1px solid var(--border);
    padding: 0 max(20px, calc((100% - 1160px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}

.logo {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
    text-decoration: none;
}

.site-nav {
    display: flex;
    gap: 24px;
}

.site-nav a {
    font-size: 0.875rem;
    color: var(--muted-fg);
    text-decoration: none;
    transition: color 0.15s;
}

.site-nav a:hover { color: var(--fg); }

.site-header .btn {
    font-size: 0.875rem;
    padding: 10px 18px;
}

/* Grids */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
}

.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Cards */
.card {
    background: var(--card);
    box-shadow: var(--elevation);
    padding: 32px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover { box-shadow: var(--elevation-hover); }

.glass-card { background: var(--secondary); }

.divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 26px;
    font-weight: 700;
    font-size: 1.0625rem;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
}

.btn-primary:hover { background: #084A34; }

.btn-secondary,
.btn-outline {
    background: transparent;
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.btn-secondary:hover,
.btn-outline:hover { background: var(--primary); color: var(--primary-fg); }

.btn-glow:hover { transform: translateY(-2px); }

/* Badges */
.badge-sm {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.badge-gray {
    background: var(--border);
    color: var(--muted-fg);
}

.badge-primary {
    background: var(--primary);
    color: var(--primary-fg);
}

/* Section 1: Hero (centered text, visual below) */
.hero {
    padding-top: 80px;
    padding-bottom: 120px;
    text-align: center;
}

.hero-visual {
    max-width: 720px;
    margin: 64px auto 0;
}

.main-headline {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.22;
    margin-bottom: 24px;
    color: var(--fg);
}

.sub-headline {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--fg);
    max-width: 680px;
    margin: 0 auto 40px;
}

.sub-headline strong { font-weight: 600; }

/* Hero mockups */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.mockup-container {
    position: relative;
    width: 100%;
}

.mockup-window {
    background: var(--card);
    box-shadow: var(--elevation-hover);
    overflow: hidden;
}

.mockup-header {
    background: var(--secondary);
    padding: 12px 16px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot { background: #d4d4d4; }

.mockup-body {
    padding: 48px 24px 72px;
    background: var(--secondary);
}

.sales-dashboard {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.stat-card {
    background: var(--card);
    box-shadow: var(--elevation);
    padding: 20px;
    text-align: left;
    flex: 1;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-fg);
    margin-bottom: 8px;
}

.stat-card:first-child .stat-value { color: var(--accent-strong); }

.stat-value {
    font-size: 1.35rem;
    font-weight: 600;
}

.mockup-phone {
    position: absolute;
    right: -20px;
    bottom: -90px;
    width: 280px;
    background: var(--card);
    box-shadow: var(--elevation-hover);
    padding: 12px;
    animation: float 6s ease-in-out infinite;
}

.notification {
    background: var(--secondary);
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.notification .icon { font-size: 1.5rem; }

.notification .text {
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
}

.notification .text span {
    color: var(--muted-fg);
    font-size: 0.75rem;
}

/* Section headers */
.section-header { margin-bottom: 56px; }

.section-header p { font-size: 1.125rem; }

/* Section 2: Problems */
/* open cards with a top rule instead of boxes */
.card.problem-card,
.card.problem-card:hover {
    padding: 24px 0 0;
    background: none;
    box-shadow: none;
    border-top: 2px solid rgba(20, 32, 26, 0.28);
    border-radius: 0;
    text-align: left;
}

/* 4 problems: 2x2 instead of 3 + orphan */
.problems .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 32px 64px; }

@media (max-width: 600px) {
    .problems .grid-3 { grid-template-columns: 1fr; }
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 15px;
    flex-shrink: 0;
}

.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    50% { opacity: 0.3; }
}

.problem-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

/* Section 2.5: The two sides of the course (attention + automated sales) */
.sides {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
}

.side {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.side-num {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-strong);
}

.side > .ph {
    font-size: 2rem;
    margin-bottom: 12px;
}

.side h3 {
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    margin-bottom: 8px;
}

.side > p { margin-bottom: 20px; }

.side-tag {
    margin-top: auto;
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.8rem;
    background: var(--secondary);
    color: var(--fg);
}

.side-plus {
    align-self: center;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--muted-fg);
}

@media (max-width: 900px) {
    .sides { grid-template-columns: 1fr; }

    .side-plus { justify-self: center; }
}

/* Course AI assistant vs generic AI (reuses the compare-col styles below) */
.ai-compare { margin-top: 56px; }

.ai-compare-title {
    margin-bottom: 20px;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    text-align: center;
}

.ai-compare .how-compare { margin-top: 0; }

.compare-col.is-old .feature-list .ph { color: var(--red); }

/* Section 2.6: How selling through a sales page works */
.how-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
}

.how-step {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--card);
    box-shadow: var(--elevation);
    text-align: left;
}

/* Green = works on its own, no effort from the seller */
.how-step.is-auto { background: var(--primary); }

.how-label {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--accent-strong);
}

.how-step.is-auto .how-label { color: #BDE9D3; }

.how-icons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1.9rem;
    color: var(--fg);
}

.how-step.is-auto .how-icons { color: #BDE9D3; }

.how-step h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.how-step.is-auto h3 { color: #fff; }

.how-step p {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.how-step.is-auto p { color: rgba(255, 255, 255, 0.82); }

.how-step .how-note {
    padding: 10px 12px;
    font-size: 0.85rem;
    background: var(--secondary);
    color: var(--muted-fg);
}

.how-tag {
    margin-top: auto;
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.8rem;
    background: var(--secondary);
    color: var(--fg);
}

.how-step.is-auto .how-tag {
    background: #fff;
    color: var(--primary);
}

.how-arrow {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--muted-fg);
}

.how-arrow .ph {
    font-size: 1.6rem;
    color: var(--fg);
}

.how-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-strong);
    font-weight: 600;
    text-align: center;
}

.how-result .ph {
    flex-shrink: 0;
    font-size: 1.9rem;
    color: var(--accent-strong);
}

/* Old way (chat) vs new way (sales page + automation) */
.how-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
}

.compare-col {
    padding: 28px;
    background: var(--secondary);
    text-align: left;
}

.compare-col.is-new {
    background: var(--card);
    box-shadow: 0 0 0 1px var(--accent-strong), var(--elevation-hover);
}

.compare-col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.compare-steps {
    list-style: none;
    display: grid;
    gap: 10px;
    counter-reset: step;
}

.compare-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
}

.compare-steps li::before {
    counter-increment: step;
    content: counter(step);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--border);
}

.compare-col.is-new .compare-steps li::before {
    background: var(--accent-strong);
    color: #fff;
}

.compare-note {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

.compare-col.is-old .compare-note strong { color: var(--red); }

.compare-col.is-new .compare-note strong { color: var(--accent-strong); }

@media (max-width: 900px) {
    .how-flow { grid-template-columns: 1fr; }

    .how-arrow {
        flex-direction: row;
        justify-self: center;
        gap: 8px;
    }

    .how-arrow .ph { transform: rotate(90deg); }

    .how-compare { grid-template-columns: 1fr; }
}

/* Section 3: Fit */
.glass-banner {
    background: var(--card);
    box-shadow: var(--elevation);
    padding: 72px 40px;
}


/* "เหมาะกับใคร" sits inside a padded panel, so it reads smaller than the other
   section headings at the same px. Scale it up to match how they feel. */
.glass-banner h2 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }

.glass-banner p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.125rem;
}

/* Choose your path: A (has a product) vs B (starting from zero) */
.paths {
    max-width: 880px;
    margin: 36px auto 0;
    text-align: left;
}

.paths-title {
    margin-bottom: 16px;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    text-align: center;
}

.paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.path {
    padding: 24px;
    background: var(--card);
    box-shadow: var(--elevation);
}

.path-label {
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-strong);
}

.path h4 {
    margin-bottom: 12px;
    font-size: 1.15rem;
}

.path-rows > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.path-rows dt {
    font-size: 0.85rem;
    color: var(--muted-fg);
}

.path-rows dd {
    font-size: 0.95rem;
    color: var(--fg);
}

@media (max-width: 700px) {
    .paths-grid { grid-template-columns: 1fr; }

    .path { padding: 20px 16px; }

    /* Label above value: two columns are too cramped inside the banner */
    .path-rows > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Section 5: Credit */
.why {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.why-block h3 {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin-bottom: 12px;
}

.why-block p + p { margin-top: 12px; }

.why-block strong { color: var(--fg); }

.why-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-fg);
    margin-bottom: 12px;
}

/* Belief chain: concentric rings (cold -> customer) flanked by the beliefs each ring needs */
.belief {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 320px) 1fr;
    gap: 20px;
    align-items: center;
    margin: 24px 0 20px;
}

.belief-rings svg {
    display: block;
    width: 100%;
    height: auto;
}

.belief-card {
    background: var(--secondary);
    padding: 20px;
}

.belief-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.belief-card p { font-size: 0.9rem; }

.belief-card ul {
    list-style: none;
    display: grid;
    gap: 6px;
    margin: 8px 0 12px;
    color: var(--fg);
    font-weight: 500;
}

@media (max-width: 900px) {
    .belief { grid-template-columns: 1fr; }

    .belief-rings {
        order: -1;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

.why-note {
    background: var(--secondary);
    padding: 16px;
    font-size: 0.95rem;
}

.how .why { margin-top: 56px; }

.instructor-name {
    margin-top: 16px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--fg);
}

.instructor-role { font-size: 0.95rem; }

.credit-list { list-style: none; }

.credit-list > li {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.credit-list p { margin-top: 8px; }

.sub-list {
    margin-top: 12px;
    padding-left: 20px;
    color: var(--muted-fg);
}

.sub-list li { margin-bottom: 8px; }

.credit-proof { padding: 0; }

.proof-header {
    background: var(--secondary);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-fg);
}

.proof-body { padding: 32px 20px; }

.proof-body img {
    width: 100%;
    box-shadow: var(--elevation);
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--elevation-hover);
}

/* Section 5.5: Reviews (real screenshots from students and clients) */
.reviews-group {
    margin: 40px 0 16px;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
}

.review-stories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.client-review {
    margin: 0;
}

.client-review figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--muted-fg);
}

.client-review figcaption strong {
    color: var(--fg);
}

/* wide email screenshots: one per row at natural size, so small text stays readable */
.reviews-more {
    margin-top: 24px;
    text-align: center;
}

.reviews-more a {
    color: var(--fg);
    font-weight: 500;
    text-underline-offset: 4px;
}

.reviews-more a:hover { color: var(--accent-strong); }

.reviews-grid.reviews-shots {
    grid-template-columns: 1fr;
    justify-items: center;
}

.reviews-grid.reviews-shots img {
    width: auto;
    max-width: 100%;
}

.reviews-cards + .reviews-grid,
.review-stories + .reviews-cards {
    margin-top: 16px;
}

.review-story {
    padding: 24px;
    background: var(--card);
    box-shadow: var(--elevation);
}

.review-story-text strong {
    display: block;
    font-size: 0.85rem;
    color: var(--accent-strong);
}

.review-story-text h4 {
    margin: 6px 0 8px;
    font-size: 1.15rem;
    line-height: 1.45;
    text-wrap: balance;
}

.review-story-text p {
    margin-bottom: 16px;
    color: var(--muted-fg);
    line-height: 1.7;
}

.review-story img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--border);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

.reviews-grid img {
    display: block;
    width: 100%;
    background: var(--card);
    box-shadow: var(--elevation);
}

.reviews-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.review-card {
    padding: 20px;
    background: var(--card);
    box-shadow: var(--elevation);
}

.review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.review-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 1.2rem;
    background: var(--secondary);
    color: var(--muted-fg);
}

.review-who {
    flex: 1;
    min-width: 0;
}

.review-who strong {
    display: block;
    font-size: 0.95rem;
}

.review-who span {
    display: block;
    font-size: 0.8rem;
    color: var(--muted-fg);
}

.review-stars {
    flex-basis: 100%;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--accent-strong);
}

.review-card blockquote {
    /* reset UA/preview blockquote styles (VS Code preview paints a dark box) */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--fg);
}

/* Section 6: FAQ */
.faq {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-container {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

.accordion-item { border-bottom: 1px solid var(--border); }

.accordion-header {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--fg);
    padding: 24px 0;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-family: inherit;
}

.accordion-header .icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent);
    transition: transform 0.3s ease;
}

/* Native <details>/<summary>: works without JS */
.accordion-header {
    list-style: none;
    user-select: none;
}

.accordion-header::-webkit-details-marker { display: none; }

.accordion-item[open] .icon { transform: rotate(45deg); }

.accordion-item .content-inner p + p { margin-top: 8px; }

.accordion-item .content-inner {
    padding: 0 0 24px;
    color: var(--muted-fg);
}

/* Countdown (large version sits on the green bonus box) */
.countdown {
    max-width: 520px;
    margin: 32px auto 0;
    text-align: center;
}

.countdown-label {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
}

/* Hidden until script.js starts ticking, so no fake "07:00:00:00" shows without JS */
.countdown-units {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.countdown-units > div {
    display: flex;
    flex-direction: column;
    padding: 14px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
}

.countdown-units span {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.countdown-units small {
    margin-top: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.countdown-date {
    margin-top: 16px;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: #fafafa;
}

.countdown-ended {
    display: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fafafa;
}

/* Without JS the big timer shows only its date line, so drop the "หมดเขตใน" label */
.countdown:not(.countdown--compact):not(.is-live) .countdown-label { display: none; }

.countdown.is-live .countdown-units { display: grid; }

.countdown--compact.is-live .countdown-units { display: flex; }

.countdown--compact .countdown-date {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-fg);
}

.countdown--compact.is-live .countdown-date { display: none; }

.countdown.is-ended .countdown-label,
.countdown.is-ended .countdown-units { display: none; }

.countdown.is-ended .countdown-ended { display: block; }

/* Compact one-line version under the hero CTA (white background) */
.countdown--compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-top: 16px;
}

.countdown--compact .countdown-label {
    margin: 0;
    letter-spacing: 0.1em;
    color: var(--muted-fg);
}

.countdown--compact .countdown-units { gap: 8px; }

.countdown--compact .countdown-units > div {
    flex-direction: row;
    align-items: baseline;
    gap: 3px;
    padding: 0;
    background: none;
    box-shadow: none;
}

.countdown--compact .countdown-units span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-strong);
}

.countdown--compact .countdown-units small {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-fg);
}

.countdown--compact .countdown-ended {
    font-size: 0.9rem;
    color: var(--fg);
}

/* Money-back guarantee: own section after pricing, with the instructor's face */
.guarantee {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
    padding: 40px;
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent);
}

.guarantee-photo {
    position: relative;
    width: 160px;
}

.guarantee-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--elevation-hover);
}

.guarantee-photo .ph {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-strong);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.guarantee .why-label { color: var(--accent-strong); }

.guarantee h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 12px;
}

.guarantee p + p { margin-top: 10px; }

.guarantee .guarantee-terms {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .guarantee {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding: 28px 20px;
        text-align: center;
    }

    .guarantee-photo { width: 120px; }
}

/* Value stack */
.value-stack {
    max-width: 760px;
    margin: 0 auto 72px;
    padding: 32px;
    background: var(--card);
    box-shadow: 0 0 0 1px var(--accent);
}

.value-stack h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--fg);
    margin-bottom: 16px;
}

.stack-list { list-style: none; }

.stack-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--fg);
}

.stack-list li > span:first-child {
    display: flex;
    gap: 10px;
}

.stack-list .ph {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: var(--accent);
}

.stack-value {
    font-family: var(--font-mono);
    white-space: nowrap;
    color: var(--muted-fg);
}

.stack-list .stack-group {
    padding: 24px 0 4px;
    border-bottom: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--muted-fg);
}

.stack-list .stack-group:first-child { padding-top: 4px; }

.stack-total,
.stack-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.stack-total {
    margin-top: 24px;
    color: var(--muted-fg);
}

.stack-total s {
    font-family: var(--font-mono);
    font-size: 1.25rem;
}

.stack-price {
    margin-top: 8px;
    color: var(--fg);
    font-weight: 500;
}

.stack-price strong {
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: -0.02em;
    color: var(--accent);
}

.btn-accent {
    display: block;
    margin-top: 24px;
    text-align: center;
    background: var(--accent-strong);
    color: #fff;
}

.btn-accent:hover { background: #084A34; }

@media (max-width: 600px) {
    .value-stack { padding: 24px 16px; }

    .stack-list li { font-size: 0.9rem; }
}

.value-anchor {
    max-width: 680px;
    margin: 32px auto 0;
    padding: 24px 28px;
    background: var(--secondary);
    box-shadow: var(--elevation);
    display: grid;
    gap: 12px;
}

.value-anchor p { font-size: 1rem; }

.value-anchor strong { color: var(--fg); }

.preorder-note {
    max-width: 680px;
    margin: 16px auto 0;
    padding: 12px 20px;
    font-size: 0.95rem;
    color: var(--fg);
    border: 1px dashed var(--muted-fg);
}

.pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.package-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.package-price {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.preorder-badge { align-self: flex-start; }

.regular-price {
    font-size: 0.85rem;
    color: var(--muted-fg);
    margin-bottom: 12px;
}

.package-desc {
    font-size: 0.9rem;
    min-height: 42px;
}

.feature-list {
    list-style: none;
    margin-bottom: 32px;
    font-size: 0.9rem;
}

.feature-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--muted-fg);
}

.feature-list .ph {
    flex-shrink: 0;
    margin-top: 0.2em;
    font-size: 1rem;
    color: var(--accent);
}

.feature-list li strong { color: var(--fg); }

.pricing-card .btn { text-align: center; }

.pricing-card.popular {
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent);
    z-index: 2;
}

.pricing-card.popular .btn-primary { background: var(--accent-strong); }

.pricing-card.popular .btn-primary:hover { background: #084A34; }

.popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-strong);
    color: var(--primary-fg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px;
}

/* Section 8: Final CTA */
main > section.final-cta {
    background: var(--primary);
    box-shadow: 0 0 0 100vmax var(--primary);
    clip-path: inset(0 -100vmax);
}

.final-cta .glass-card,
.final-cta .glass-card:hover {
    padding: 0;
    background: none;
    box-shadow: none;
}

.final-cta h2 { color: #fff; }

.final-cta .btn-primary {
    background: #fff;
    color: var(--primary);
}

.final-cta .btn-primary:hover { background: var(--accent-soft); }

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.option-card {
    padding: 24px;
    background: var(--card);
    box-shadow: var(--elevation);
    text-align: left;
}

.option-card.old-way {
    background: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.option-card.old-way h3 { color: #fff; }

.option-card.old-way p { color: rgba(255, 255, 255, 0.78); }

.option-card.old-way .badge-gray {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.option-card h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

/* Footer */
footer {
    padding: 40px 20px;
    background: var(--primary);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
}

footer p { color: rgba(255, 255, 255, 0.75); }

footer a { color: #fff; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up, .mockup-phone { animation: none; opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .site-nav { display: none; }

    .grid-3, .grid-2, .options-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    section { padding: 64px 0; }

    .main-headline { font-size: 1.6rem; }

    .sales-dashboard { flex-direction: column; }

    .mockup-body { padding: 24px 16px; }

    .mockup-phone {
        position: static;
        width: auto;
        margin-top: 12px;
        animation: none;
    }

    .card, .glass-banner { padding: 28px 20px; }

    .btn { padding: 14px 20px; font-size: 1rem; }
}


/* Section 2.7: what you get, level by level.
   Same language as .how-step: zero radius, hairline elevation, mono labels */
.level-list { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }

.level {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 24px 32px;
    background: var(--card);
    box-shadow: var(--elevation);
    transition: box-shadow 0.3s ease;
}

.level:hover { box-shadow: var(--elevation-hover); }
.level.is-pro { background: var(--secondary); }

.level-num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.level-body h3 { font-size: 1.1rem; margin: 0 0 6px; }
.level-body p { margin: 0; color: var(--muted-fg); font-size: 0.95rem; }
.level-body p s { color: var(--muted-fg); }

.level-start,
.level-locked {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

.level-start { background: var(--accent); color: #fff; }
.level-locked { background: var(--secondary); color: var(--muted-fg); }

.level-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--muted-fg);
}

.level-pack {
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--secondary);
    color: var(--fg);
}

.level.is-pro .level-pack { background: var(--primary); color: var(--primary-fg); }

.level-note {
    margin-top: 28px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--muted-fg);
}

@media (max-width: 700px) {
    .level { grid-template-columns: 1fr; gap: 12px; padding: 22px 24px; }
    .level-meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .level-start, .level-locked { margin-left: 0; margin-top: 6px; }
    .level-body h3 { display: flex; flex-wrap: wrap; align-items: center; }
}

/* "เหมาะกับใคร": bullets carry the whole section, so they read bigger than a
   normal feature list */
#fit .feature-list li { font-size: 1.15rem; line-height: 1.65; margin-bottom: 16px; color: var(--fg); }
#fit .feature-list .ph { margin-top: 5px; }
#fit .compare-note { font-size: 1.05rem; line-height: 1.6; }
#fit .compare-col h3 { font-size: 1.3rem; }

/* Rounded corners on every boxed surface */
.card, .glass-banner, .how-step, .how-result, .compare-col, .path, .review-story, .review-card,
.level, .guarantee, .option-card, .value-stack, .mockup-window, .mockup-phone, .stat-card,
.notification, .belief-card, .why-note, .reviews-grid img, .proof-body img, .review-story img {
    border-radius: 14px;
}

.credit-proof { overflow: hidden; }

.popular-badge { border-radius: 0 14px 0 14px; }

/* Time-limited bonus inside the value stack */
.bonus {
    margin-top: 28px;
    padding: 28px 24px;
    border-radius: 14px;
    background: var(--primary);
    text-align: center;
}

.bonus-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #fff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.bonus h3 {
    margin-bottom: 8px;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    color: #fff;
}

.bonus p { color: rgba(255, 255, 255, 0.85); }

.bonus .countdown { margin-top: 20px; }

/* Message from Dew: a plain letter column */
.letter-body {
    max-width: 740px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    font-size: 1.06rem;
    line-height: 1.9;
}

.letter-body .eyebrow,
.letter-body h2 { margin-bottom: 0; }

.letter-body ol {
    display: grid;
    gap: 12px;
    padding-left: 1.4em;
    color: var(--muted-fg);
}

.letter-strong,
.letter-sign {
    color: var(--fg);
    font-weight: 700;
}

/* 10-minute bonus window shows minutes and seconds only */
.bonus .countdown-units {
    grid-template-columns: repeat(2, 1fr);
    max-width: 260px;
    margin: 0 auto;
}

/* One CTA at the end of every section */
.section-cta {
    margin-top: 48px;
    text-align: center;
}

/* checkout/ page */
.checkout .value-stack {
    margin-bottom: 24px;
    text-align: left;
}

.checkout-note {
    margin-top: 14px;
    font-size: 0.85rem;
    text-align: center;
}

/* Section 1.5: sales video right under the hero */
.vsl { padding: 64px 0; }

.vsl video {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    background: #000;
    box-shadow: var(--elevation-hover);
}

/* Chapter buttons under the sales video */
.chapters {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    max-width: 960px;
    margin: 16px auto 0;
}

.chapters button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--card);
    box-shadow: var(--elevation);
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.chapters button:hover { box-shadow: 0 0 0 1px var(--accent); }

.chapters span {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Top-of-page offer card + single testimonial (white card, centred) */
.offer-card {
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 32px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--elevation-hover);
    text-align: center;
    display: grid;
    gap: 14px;
}

.offer-card img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.offer-card h2 {
    margin: 8px 0 0;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.offer-card strong,
.offer-card blockquote { color: var(--fg); }

.offer-card blockquote {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 700;
    line-height: 1.5;
}

.offer-card figcaption {
    font-size: 0.95rem;
    color: var(--muted-fg);
}

.offer-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fg);
}

.offer-btn {
    justify-self: center;
    margin-top: 8px;
    font-size: 1.2rem;
}

.offer-btn small {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
}

/* "Read this first" letter: black box, white text */
.stop-letter {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 32px;
    border-radius: 14px;
    background: #0a0a0a;
    text-align: center;
    display: grid;
    gap: 16px;
}

.stop-letter h2,
.stop-letter strong,
.stop-letter .letter-sign { color: #fff; }

.stop-letter p { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 600px) {
    .offer-card { padding: 28px 20px; }

    .stop-letter { padding: 32px 20px; }
}

/* tall chat screenshot: show the top, like the review stories further down */
.proof img {
    max-height: 420px;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--border);
}

/* Checkout popup (native <dialog>), opened by every CTA */
.checkout-dialog {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 40px 28px 28px;
    border: 0;
    border-radius: 14px;
    background: var(--card);
    color: var(--fg);
    text-align: center;
    overflow-y: auto;
}

.checkout-dialog::backdrop { background: rgba(20, 32, 26, 0.7); }

.checkout-dialog h2 { font-size: clamp(1.5rem, 4vw, 2rem); }

.checkout-dialog h2 span { display: block; }

.checkout-dialog > img {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 4px auto 20px;
    border-radius: 14px;
}

.checkout-list {
    list-style: none;
    display: grid;
    gap: 14px;
    text-align: left;
    font-size: 0.95rem;
    color: var(--muted-fg);
}

.checkout-list li {
    display: flex;
    gap: 10px;
}

.checkout-list .ph {
    flex-shrink: 0;
    margin-top: 0.15em;
    font-size: 1.3rem;
    color: var(--accent);
}

.checkout-list strong { color: var(--fg); }

.checkout-list span { color: var(--accent); }

.checkout-dialog .bonus { margin-top: 20px; }

/* timed bonus box in the popup: once the window ends the whole box disappears */
.code-offer:has(.is-ended) { display: none; }
.checkout-price s { font-size: 0.6em; font-weight: 500; opacity: 0.6; }
/* black + bright green so the timed offer is the loudest thing in the popup */
.code-offer { --neon: #23E88A; background: #000; border: 2px solid var(--neon); }
.code-offer .bonus-tag { background: var(--neon); color: #000; }
.offer-bonuses { display: grid; gap: 10px; margin: 16px 0 14px; list-style: none; text-align: left; }
.offer-bonuses li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(35, 232, 138, 0.35); border-radius: 10px; background: #0C1A13; }
.offer-bonuses .ph-gift { flex: none; font-size: 2rem; color: var(--neon); }
.offer-bonuses small { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--neon); }
.offer-bonuses strong { display: block; font-size: 1.15rem; line-height: 1.35; color: #fff; }
.offer-bonuses em { font-style: normal; color: var(--neon); }
.offer-bonuses span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.code-offer .countdown-units > div { background: #0C1A13; border: 1px solid rgba(35, 232, 138, 0.35); }
.code-offer .countdown-units span { color: var(--neon); font-weight: 700; }
.checkout-total {
    margin-top: 20px;
    font-weight: 700;
    color: var(--fg);
}

.checkout-price {
    font-size: clamp(1.9rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent);
}

.checkout-dialog .offer-btn {
    display: block;
    margin-top: 16px;
}

.dialog-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    color: var(--muted-fg);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* Price-rise countdown box (green, so the large white countdown reads on it) */
.deadline {
    margin-top: 8px;
    padding: 20px;
    border-radius: 14px;
    background: var(--primary);
    text-align: center;
}

.deadline .countdown { margin-top: 0; }

.checkout-dialog .deadline { margin-top: 20px; }

/* Closing lines under the problem cards */
.problems-close {
    max-width: 760px;
    margin: 56px auto 0;
    display: grid;
    gap: 14px;
    font-size: 1.1rem;
    text-align: center;
}

.problems-close strong {
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    line-height: 1.5;
    color: var(--fg);
}

/* Package cards on a full-bleed black band that runs to the end of the pricing section */
.packages-band {
    margin-bottom: -100px;
    padding: 80px 0 100px;
    background: #0a0a0a;
    box-shadow: 0 0 0 100vmax #0a0a0a;
    clip-path: inset(0 -100vmax);
}

.packages-band h2 { color: #fff; }

@media (max-width: 600px) {
    .packages-band {
        margin-bottom: -64px;
        padding: 56px 0 64px;
    }
}

/* Sticky top: black price-rise countdown bar + the header, pinned together while scrolling */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 40;
}

.sticky-top .site-header {
    position: static;
    background: var(--bg);
}

.topbar.countdown--compact {
    max-width: none;
    margin: 0;
    padding: 8px 12px;
    background: #0a0a0a;
    font-size: 0.9rem;
}

.topbar .countdown-label,
.topbar .countdown-units small,
.topbar .countdown-date,
.topbar .countdown-ended {
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.85);
}

.topbar .countdown-units span { color: #fff; }

html { scroll-padding-top: 140px; }

.stop-letter .avatar {
    width: 110px;
    height: 110px;
    margin: 8px auto 0;
}

/* Final CTA: lead line and closing lines on the green band */
.final-cta .final-lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
}

.final-text {
    display: grid;
    gap: 10px;
    margin-bottom: 32px;
    font-size: 1.1rem;
}

.final-text p { color: rgba(255, 255, 255, 0.85); }

.final-text strong { color: #fff; }

/* What the guarantee covers: numbered list above the refund box */
.guarantee-list {
    max-width: 860px;
    margin: 0 auto 24px;
    padding: 32px 40px;
}

.guarantee-list h3 { font-size: clamp(1.3rem, 2.8vw, 1.75rem); }

.guarantee-list .compare-steps {
    gap: 14px;
    font-size: 1.05rem;
}

@media (max-width: 600px) {
    .guarantee-list { padding: 24px 20px; }
}

/* About Me text at the top of the instructor section */
.about-me { margin-bottom: 56px; }

.about-me h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }