/* ==================================================
   ECOMNIGHTHQ — 1-TO-1 COACHING PAGE
   ================================================== */

:root {
    --font-display: 'Clash Display', sans-serif;
    --font-body: 'Satoshi', sans-serif;
    --font-mono: 'Inter Tight', monospace;
    --nav-height: 80px;
    --ticker-height: 34px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-theme="dark"] {
    --bg-void: #000000;
    --bg-surface: rgba(8,8,12,0.85);
    --bg-glass: rgba(12,12,16,0.5);
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0BC;
    --text-muted: #6B6B78;
    --accent: #4D7CFF;
    --accent-dim: rgba(77,124,255,0.15);
    --accent-glow: rgba(77,124,255,0.4);
    --border-subtle: rgba(255,255,255,0.06);
    --border-glass: rgba(255,255,255,0.1);
    --border-hover: rgba(255,255,255,0.15);
    --green: #34D399;
    --green-dim: rgba(52,211,153,0.1);
    --ticker-bg: rgba(5,5,8,0.95);
    --nav-scrolled-bg: rgba(5,5,8,0.85);
    --mobile-menu-bg: rgba(0,0,0,0.95);
    --btn-primary-bg: #FFFFFF;
    --btn-primary-color: #000000;
    --btn-ghost-bg: rgba(255,255,255,0.03);
    --btn-ghost-border: rgba(255,255,255,0.1);
    --btn-ghost-hover-bg: rgba(255,255,255,0.06);
    --logo-svg-color: #FFFFFF;
    --card-bg: rgba(255,255,255,0.02);
    --form-bg: rgba(255,255,255,0.03);
    --form-border: rgba(255,255,255,0.1);
    --form-focus: rgba(77,124,255,0.4);
    --select-bg: rgba(10,10,14,0.9);
}

[data-theme="light"] {
    --bg-void: #F8F9FC;
    --bg-surface: rgba(255,255,255,0.9);
    --bg-glass: rgba(255,255,255,0.7);
    --text-primary: #0F1419;
    --text-secondary: #536471;
    --text-muted: #8899A6;
    --accent: #2563EB;
    --accent-dim: rgba(37,99,235,0.1);
    --accent-glow: rgba(37,99,235,0.3);
    --border-subtle: rgba(0,0,0,0.06);
    --border-glass: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.15);
    --green: #059669;
    --green-dim: rgba(5,150,105,0.08);
    --ticker-bg: rgba(255,255,255,0.98);
    --nav-scrolled-bg: rgba(255,255,255,0.9);
    --mobile-menu-bg: rgba(255,255,255,0.98);
    --btn-primary-bg: #0F1419;
    --btn-primary-color: #FFFFFF;
    --btn-ghost-bg: rgba(0,0,0,0.03);
    --btn-ghost-border: rgba(0,0,0,0.1);
    --btn-ghost-hover-bg: rgba(0,0,0,0.06);
    --logo-svg-color: #0F1419;
    --card-bg: rgba(0,0,0,0.02);
    --form-bg: rgba(0,0,0,0.03);
    --form-border: rgba(0,0,0,0.12);
    --form-focus: rgba(37,99,235,0.4);
    --select-bg: rgba(255,255,255,0.95);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg-void); color: var(--text-primary); overflow-x: hidden; line-height:1.6; cursor:none; transition: background 0.4s, color 0.4s; }
a { text-decoration:none; color:inherit; cursor:none; }
button { border:none; background:none; cursor:none; font-family:inherit; color:inherit; }
@media (max-width: 1024px) { body, a, button { cursor: auto; } }

/* Cursor */
.custom-cursor { pointer-events:none; position:fixed; top:0; left:0; z-index:99999; mix-blend-mode:difference; }
.cursor-dot { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
.cursor-ring { position:absolute; width:40px; height:40px; border:1.5px solid rgba(255,255,255,0.5); border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
@media (max-width:1024px) { .custom-cursor { display:none; } }

/* Background */
.bg-elements { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(to right,rgba(128,128,128,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,0.04) 1px,transparent 1px); background-size:60px 60px; }
.bg-glow { position:absolute; border-radius:50%; filter:blur(80px); }
.bg-glow-1 { top:-20%; right:-5%; width:50vw; height:50vh; background:radial-gradient(ellipse,rgba(77,124,255,0.05) 0%,transparent 70%); }
.bg-glow-2 { bottom:-20%; left:-5%; width:40vw; height:40vh; background:radial-gradient(ellipse,rgba(77,124,255,0.03) 0%,transparent 70%); }

/* Ticker */
.top-ticker { position:fixed; top:0; left:0; width:100%; height:var(--ticker-height); background:var(--ticker-bg); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; overflow:hidden; z-index:1000; font-size:0.72rem; color:var(--text-muted); }
.ticker-track { display:flex; white-space:nowrap; animation:ticker 60s linear infinite; gap:32px; padding-left:32px; }
.ticker-track span { display:flex; align-items:center; gap:6px; }
.ticker-track .dot { color:var(--accent); font-size:0.5rem; }
.ticker-track .icon-sm { color:var(--accent); width:12px; height:12px; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (max-width:768px) { .top-ticker { display:none; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:100px; font-weight:600; font-size:0.9rem; transition:all 0.4s var(--ease-out-expo); cursor:pointer; position:relative; overflow:hidden; white-space:nowrap; }
.btn-accent { background:var(--accent); color:#fff; padding:16px 36px; }
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 12px 40px var(--accent-glow); }
.btn-ghost { background:var(--btn-ghost-bg); border:1px solid var(--btn-ghost-border); color:var(--text-primary); padding:16px 36px; }
.btn-ghost:hover { background:var(--btn-ghost-hover-bg); border-color:var(--border-hover); transform:translateY(-2px); }
.btn-wa { background:#25D366; color:#fff; padding:16px 36px; }
.btn-wa:hover { background:#1ebe5a; transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,211,102,0.3); }
.btn-shine { position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); transition:left 0.5s; }
.btn:hover .btn-shine { left:100%; }
.btn-lg { padding:18px 44px; font-size:1rem; }

/* Shared */
.container { max-width:1200px; margin:0 auto; padding:0 48px; }
.ch-apply .container { max-width:700px; }
.page-main { padding-top:calc(var(--ticker-height) + var(--nav-height)); }
.section-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:100px; background:var(--accent-dim); border:1px solid rgba(77,124,255,0.2); font-size:0.72rem; font-weight:600; color:var(--accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:20px; }
.section-badge svg { width:13px; height:13px; }
.section-header { text-align:center; margin-bottom:64px; }
.section-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.15; color:var(--text-primary); margin-bottom:16px; }
.section-desc { font-size:1rem; color:var(--text-secondary); max-width:560px; margin:0 auto; line-height:1.7; }
.gradient-text { background:linear-gradient(135deg,var(--accent),#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ================================================
   HERO
   ================================================ */
.ch-hero { padding:40px 0 60px; text-align:center; }
.ch-hero-badge { margin-bottom:24px; }
.ch-hero-title { font-family:var(--font-display); font-size:clamp(2.2rem,4.5vw,4rem); font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin-bottom:20px; max-width:800px; margin-left:auto; margin-right:auto; }
/* Per-line size control (set from the admin panel — Heading / Normal / Small).
   The smaller sizes are also used for longer sub-headline sentences (not just
   short accent words), which can wrap onto 2-3 lines — margin-top + a looser
   line-height keep that wrapped text from reading as jammed directly under
   the big title-1 line above it. */
.ch-hero-title .ch-size-lg { font-size:1em; display:inline-block; }
.ch-hero-title .ch-size-md { font-size:0.68em; line-height:1.4; display:inline-block; margin-top:14px; }
.ch-hero-title .ch-size-sm { font-size:0.45em; line-height:1.45; display:inline-block; margin-top:10px; }
.ch-hero-title .ch-size-xs { font-size:0.32em; line-height:1.5; display:inline-block; margin-top:8px; }
.ch-hero-sub { font-size:1.05rem; color:var(--text-secondary); max-width:680px; margin:0 auto 48px; line-height:1.75; text-align:center; }

/* Video Box */
.ch-video-wrap { max-width:860px; margin:0 auto 48px; }
.ch-video-box {
    position:relative;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border-glass);
    background:#0a0a0e;
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.ch-video-box video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* YouTube/Vimeo facade — same full-box treatment as the <video>, showing
   the uploaded thumbnail (via inline background-image) until clicked. */
.ch-video-embed-facade {
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:#0a0a0e; cursor:pointer;
}
.ch-video-embed-facade iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ch-video-embed-facade wistia-player { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Full-box "tap anywhere for sound" overlay shown over a YouTube/Wistia
   embed while it's playing muted (browsers block unmuted autoplay on a
   fresh iframe/embed). Covers the WHOLE player — not just a small badge —
   so a click anywhere on the video unmutes it, instead of relying on each
   platform's own small native volume icon, which visitors tend to miss
   entirely. Removed from the DOM the moment it's clicked. */
.ch-video-unmute-btn {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    border:none;
    background:rgba(10,10,14,0.55);
    cursor:pointer;
}
.ch-video-unmute-btn:hover { background:rgba(10,10,14,0.68); }
.ch-video-unmute-msg {
    display:inline-block;
    padding:14px 24px;
    border-radius:999px;
    background:rgba(20,20,26,0.92);
    color:#fff;
    font-family:var(--font-mono, inherit);
    font-size:0.95rem;
    font-weight:600;
    line-height:1.4;
    box-shadow:0 4px 20px rgba(0,0,0,0.4), 0 0 0 2px rgba(77,124,255,0.55);
    animation:chUnmutePulse 1.6s ease-in-out infinite;
}
@keyframes chUnmutePulse {
    0%, 100% { box-shadow:0 4px 20px rgba(0,0,0,0.4), 0 0 0 2px rgba(77,124,255,0.55); transform:scale(1); }
    50% { box-shadow:0 4px 24px rgba(0,0,0,0.45), 0 0 0 6px rgba(77,124,255,0.2); transform:scale(1.03); }
}
html[dir="rtl"] .ch-video-unmute-msg { direction:rtl; }
@media (max-width:520px) {
    .ch-video-unmute-msg { font-size:0.82rem; padding:12px 18px; }
}

.ch-video-placeholder {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
.ch-video-placeholder.hidden { display:none; }
.ch-video-play {
    width:80px; height:80px;
    border-radius:50%;
    background:rgba(77,124,255,0.9);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s;
    border:2px solid rgba(255,255,255,0.2);
}
.ch-video-box:hover .ch-video-play { transform:scale(1.1); background:var(--accent); box-shadow:0 0 40px var(--accent-glow); }
.ch-video-play svg { width:32px; height:32px; color:#fff; margin-left:4px; }
/* Was plain muted-gray text with no background — invisible against bright/
   busy uploaded thumbnails (the exact bug reported: label rendering but
   unreadable). A dark pill behind it guarantees legibility no matter what
   image is underneath, same visual language as the unmute badge below. */
.ch-video-label {
    font-size:0.85rem;
    color:#fff;
    font-family:var(--font-mono);
    padding:6px 14px;
    border-radius:999px;
    background:rgba(10,10,14,0.65);
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ch-hero-cta { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ================================================
   STUDENT RESULTS
   ================================================ */
.ch-results { padding:100px 0; }
.ch-results-carousel { position:relative; }
.ch-results-grid {
    display:flex;
    align-items:flex-start;
    gap:20px;
    overflow-x:auto;
    /* Explicitly hidden (not left as the default "visible") — CSS's
       overflow spec quietly turns a visible overflow-y into a *computed*
       auto whenever overflow-x is anything other than visible, purely so
       the box doesn't look broken. That silently makes this row its own
       (near-zero-range) vertical scroll container too, and the moment a
       visitor's mouse wheel / touch-drag lands on it while scrolling the
       PAGE, the browser hands the vertical scroll to this element first —
       which has nowhere real to go, so the whole page scroll just stalls
       right here instead of chaining through to the page. That silent
       auto is exactly what made "can't scroll past the results section"
       happen on both desktop (wheel) and mobile (touch-drag). Pinning
       overflow-y to hidden stops the browser from ever treating this row
       as a vertical scroll target, so page scroll always passes through
       normally, on every device. */
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 4px 16px;
    margin:0 -4px;
    -ms-overflow-style:none;
    scrollbar-width:none;
    /* Force a standard left-to-right scroll axis even when the page itself
       is in Arabic (dir=rtl). Browsers disagree on what scrollLeft actually
       means inside an RTL-direction scroller (three different conventions
       exist across Chrome/Safari/Firefox/mobile Safari), which is exactly
       why the "seamless loop" below kept working on desktop Chrome but
       breaking on mobile — the math assumed one convention while the
       browser used another. Keeping this container itself always LTR means
       scrollLeft behaves identically (0 = start, increasing = forward) on
       every browser, full stop. Text direction inside each card is restored
       separately below so Arabic content still reads correctly.               */
    direction:ltr;
}
/* Visually mirror the card order for Arabic (first card nearest the right
   edge, matching natural RTL reading) — flex-direction only changes how
   children are DRAWN inside the row, it has no effect on scrollLeft's
   meaning, so this can't reintroduce the scrollLeft ambiguity the note
   above describes. The JS (script.js) picks a matching start position and
   auto-advance direction for RTL to go with this. */
html[dir="rtl"] .ch-results-grid { flex-direction: row-reverse; }
html[dir="rtl"] .ch-results-grid .ch-result-card,
html[dir="rtl"] .ch-results-grid .ch-result-video-info { direction:rtl; }
.ch-results-grid::-webkit-scrollbar { display:none; }
.ch-results-grid { cursor:grab; }
.ch-results-grid.ch-results-grid-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.ch-results-grid.ch-results-grid-dragging .ch-result-card { pointer-events:none; }
/* Both screenshot ("result") cards and video cards now share ONE layout:
   a big vertical 9:16 media box (image or video) filling the top of the
   card edge-to-edge, matching the same 9:16 ratio the About page already
   uses for its testimonial video (i.e. a vertical, phone/reel-style
   shape) — then a compact footer below with a small avatar (photo or a
   letter fallback), the name, and a short line of text. This keeps every
   card in the row the exact same size regardless of card type. */
.ch-result-card {
    scroll-snap-align:start;
    scroll-snap-stop:always;
    flex:0 0 auto;
    width:280px;
    border-radius:16px;
    border:1px solid var(--border-glass);
    background:var(--card-bg);
    padding:0;
    transition:all 0.3s var(--ease-out-expo);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
/* direction:ltr keeps prevBtn/nextBtn in a FIXED left-to-right visual
   order regardless of page language. Without this, flexbox's main-start
   edge flips with the container's direction in RTL (per spec, for
   flex-direction:row) — so in Arabic the SAME two buttons (prevBtn first
   in DOM, nextBtn second) would render swapped: prevBtn on the right,
   nextBtn on the left. Each icon's shape was already correctly left
   un-mirrored (a separate earlier fix), but that swapped POSITION still
   reads as "backwards" — a right-pointing ">" sitting on the left of a
   left-pointing "<". The scroll handlers below always move a fixed
   physical direction regardless of language, so locking the buttons'
   visual order to match is the correct, safe fix. */
.ch-results-nav { display:flex; direction:ltr; justify-content:center; gap:12px; margin-top:20px; }
.ch-results-nav-btn {
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border-glass);
    background:var(--card-bg);
    color:var(--text-primary);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:all 0.2s;
}
.ch-results-nav-btn:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.ch-results-nav-btn:disabled { opacity:0.35; cursor:default; }
.ch-results-nav-btn:disabled:hover { background:var(--card-bg); border-color:var(--border-glass); color:var(--text-primary); }
.ch-results-nav-btn svg { width:20px; height:20px; }
.ch-result-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top,var(--accent-dim),transparent 60%); opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:1; }
.ch-result-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.ch-result-card:hover::before { opacity:1; }

/* Big vertical media box — same fixed 9:16 ratio for both the screenshot
   image and the video, so every card in the row is identical in size no
   matter which type it is. */
.ch-result-media { position:relative; flex:none; width:100%; aspect-ratio:9/16; background:#05060a; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.ch-result-media span { font-size:0.78rem; color:var(--text-muted); font-family:var(--font-mono); padding:0 16px; text-align:center; }
.ch-result-media img,
.ch-result-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ch-result-media video { cursor:pointer; }

/* Compact footer shared by every card: small avatar + name + short text. */
.ch-result-info { padding:14px 18px 18px; flex:none; }
.ch-result-identity { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ch-result-avatar-sm { position:relative; width:36px; height:36px; border-radius:50%; flex-shrink:0; background:var(--accent-dim); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--accent); overflow:hidden; }
.ch-result-avatar-sm img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ch-result-name { font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--text-primary); }
.ch-result-tag { font-size:0.78rem; color:var(--text-secondary); line-height:1.5; }
.ch-result-metric { margin-top:8px; display:flex; align-items:center; gap:6px; }
.ch-result-metric-val { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--green); }
/* Made deliberately more prominent than a typical small muted label — this
   field is meant to hold the customer's actual review/quote text (for
   BOTH screenshot and video cards), not just a small metric caption, so it
   needs to read clearly rather than blend into the background. */
.ch-result-metric-label { font-size:0.85rem; color:var(--text-secondary); line-height:1.5; font-family:var(--font-body); }

/* ================================================
   STUDENT VIDEO TESTIMONIALS — rendered as extra cards inside the SAME
   results carousel (#chResultsGrid), right after the quote cards, so they
   scroll/loop together as one row instead of a separate section. They now
   share .ch-result-media / .ch-result-info with the screenshot cards above.
   ================================================ */
.ch-result-video-info .ch-result-identity { margin-bottom:0; }

/* Center play button. z-index is higher than the .ecn-vc-bar control strip
   (z-index:20, includes/video-controls.css) that video-controls.js attaches
   to every video, and isolation:isolate on .ch-result-media (above)
   guarantees this z-index is compared within that box's own stacking
   context, not fought over with anything else on the page.
   pointer-events is back to auto with its own direct click listener
   (coaching/script.js) — every OTHER control on this video (the bottom
   bar's play/±10s/stop buttons) works by listening on itself directly,
   so this button now follows the same proven pattern instead of relying
   only on the wrapper to catch the click. */
.video-play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:56px; height:56px; border-radius:50%; background:rgba(77,124,255,0.9); border:2px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; transition:all 0.3s; z-index:25; cursor:pointer; pointer-events:auto; }
.video-play-btn svg { width:22px; height:22px; color:#fff; margin-left:3px; pointer-events:none; }
.ch-result-video-wrapper:hover .video-play-btn { transform:translate(-50%, -50%) scale(1.1); background:var(--accent); box-shadow:0 0 30px var(--accent-glow); }
.video-play-btn.hidden { opacity:0; pointer-events:none; }
/* Click-to-play facade for a testimonial card whose video URL
   resolved to Wistia/YouTube/Vimeo instead of a directly-uploaded
   file — sits in place of the native <video> for that case. */
.ch-result-embed-facade { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; background-color:#05060a; }
.ch-result-embed-facade iframe, .ch-result-embed-facade wistia-player { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* The shared bottom control bar (includes/video-controls.css) only
   compacts itself (hides the "Stop" text, shrinks buttons) below a
   480px VIEWPORT width — but these result-carousel cards are a fixed
   280px wide starting at the 1024px breakpoint and up (i.e. on desktop
   laptops), which is narrower than the up-to-340px width these cards get
   on tablet/mobile. So on desktop specifically, the row's content (play +
   back + track + time + forward + "Stop" chip) is too wide for the card
   and the "Stop" label was getting clipped by this box's overflow:hidden.
   Apply the same compact treatment here regardless of viewport width. */
.ch-result-media .ecn-vc-bar { padding:6px 10px 10px; gap:4px; }
.ch-result-media .ecn-vc-btn { width:28px; height:28px; }
.ch-result-media .ecn-vc-time { font-size:10px; min-width:32px; }
.ch-result-media .ecn-vc-chip span { display:none; }
.ch-result-media .ecn-vc-chip { width:26px; height:26px; padding:0; border-radius:50%; }

/* ================================================
   PROGRAM SPECS
   ================================================ */
.ch-specs { padding:100px 0; }
.ch-specs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ch-spec-card {
    border-radius:16px;
    border:1px solid var(--border-subtle);
    background:var(--card-bg);
    padding:32px 24px;
    text-align:center;
    transition:all 0.3s;
}
.ch-spec-card:hover { border-color:var(--border-hover); transform:translateY(-4px); background:var(--bg-glass); }
.ch-spec-icon { font-size:2rem; margin-bottom:16px; }
.ch-spec-icon-svg { width:60px; height:60px; border-radius:16px; background:var(--accent-dim); border:1px solid rgba(77,124,255,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--accent); transition:all 0.3s; }
.ch-spec-card:hover .ch-spec-icon-svg { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 28px var(--accent-glow); }
.ch-spec-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.ch-spec-val { font-size:0.88rem; color:var(--text-secondary); line-height:1.5; }
.ch-spec-highlight { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--accent); display:block; margin-bottom:4px; }

/* ================================================
   CURRICULUM (ACCORDION)
   ================================================ */
.ch-curriculum { padding:100px 0; }
.ch-acc-list { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.ch-acc-item {
    border-radius:16px;
    border:1px solid var(--border-subtle);
    background:var(--card-bg);
    overflow:hidden;
    transition:border-color 0.3s;
}
.ch-acc-item.open { border-color:var(--accent); }
.ch-acc-header {
    display:flex;
    align-items:center;
    gap:16px;
    padding:24px 28px;
    cursor:pointer;
    transition:background 0.2s;
}
.ch-acc-header:hover { background:var(--btn-ghost-hover-bg); }
.ch-acc-num { font-family:var(--font-mono); font-size:0.72rem; font-weight:700; color:var(--accent); background:var(--accent-dim); border-radius:8px; padding:4px 10px; flex-shrink:0; }
.ch-acc-title { flex:1; font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--text-primary); }
.ch-acc-goal-line { font-size:0.8rem; color:var(--text-muted); margin-top:4px; }
.ch-acc-toggle { width:32px; height:32px; border-radius:50%; border:1px solid var(--border-glass); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.3s; }
.ch-acc-toggle svg { width:16px; height:16px; color:var(--text-muted); transition:transform 0.4s var(--ease-out-expo); }
.ch-acc-item.open .ch-acc-toggle { background:var(--accent); border-color:var(--accent); }
.ch-acc-item.open .ch-acc-toggle svg { transform:rotate(45deg); color:#fff; }
.ch-acc-body { max-height:0; overflow:hidden; transition:max-height 0.45s var(--ease-out-quart); }
.ch-acc-body-inner { padding:0 28px 28px; }
.ch-acc-goal { font-size:0.88rem; color:var(--text-secondary); line-height:1.7; margin-bottom:20px; padding-left:16px; border-left:2px solid var(--accent); }
.ch-acc-topics-title { font-size:0.78rem; font-weight:700; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
.ch-acc-topics { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.ch-acc-topics li { display:flex; align-items:flex-start; gap:10px; font-size:0.87rem; color:var(--text-secondary); line-height:1.5; }
.ch-acc-topics li::before { content:'→'; color:var(--accent); flex-shrink:0; font-weight:700; }
.ch-acc-outcome { display:flex; align-items:flex-start; gap:10px; font-size:0.87rem; color:var(--text-primary); background:var(--green-dim); border:1px solid rgba(52,211,153,0.15); border-radius:10px; padding:12px 16px; }
.ch-acc-outcome svg { width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:2px; }

/* ================================================
   FAQ
   ================================================ */
.ch-faq { padding:100px 0; }
.ch-faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.ch-faq-item { border-radius:14px; border:1px solid var(--border-subtle); background:var(--card-bg); overflow:hidden; transition:border-color 0.3s; }
.ch-faq-item.open { border-color:var(--border-hover); }
.ch-faq-q { display:flex; align-items:center; justify-content:space-between; padding:22px 28px; cursor:pointer; gap:16px; }
.ch-faq-q-text { font-size:0.95rem; font-weight:600; color:var(--text-primary); line-height:1.4; }
.ch-faq-icon { width:28px; height:28px; border-radius:50%; border:1px solid var(--border-glass); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.3s; }
.ch-faq-icon svg { width:14px; height:14px; color:var(--text-muted); transition:transform 0.3s; }
.ch-faq-item.open .ch-faq-icon { background:var(--accent); border-color:var(--accent); }
.ch-faq-item.open .ch-faq-icon svg { transform:rotate(45deg); color:#fff; }
.ch-faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease-out-quart); }
.ch-faq-a-inner { padding:0 28px 22px; font-size:0.88rem; color:var(--text-secondary); line-height:1.75; }

/* ================================================
   APPLICATION FORM
   ================================================ */
.ch-apply { padding:100px 0; }
.ch-apply-box {
    border-radius:24px;
    border:1px solid var(--accent);
    background:rgba(77,124,255,0.05);
    padding:40px 32px;
    position:relative;
    overflow:hidden;
    max-width:600px;
    margin:0 auto;
}
.ch-apply-box::before { content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:60%; height:200px; background:radial-gradient(ellipse,rgba(77,124,255,0.15),transparent 70%); filter:blur(40px); pointer-events:none; }
.ch-apply-header { text-align:center; margin-bottom:32px; position:relative; }
.ch-apply-urgency { display:inline-flex; align-items:center; gap:8px; background:rgba(255,80,80,0.1); border:1px solid rgba(255,80,80,0.2); color:#ff6b6b; border-radius:100px; padding:6px 16px; font-size:0.78rem; font-weight:600; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:20px; }
.ch-apply-urgency::before { content:''; width:8px; height:8px; border-radius:50%; background:#ff6b6b; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
.ch-apply-title { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:var(--text-primary); margin-bottom:10px; }
.ch-apply-desc { font-size:0.88rem; color:var(--text-secondary); max-width:540px; margin:0 auto; line-height:1.65; }

/* Form */
.ch-form { position:relative; }
.ch-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.ch-form-group { display:flex; flex-direction:column; gap:8px; }
.ch-form-group.full { grid-column:1/-1; }
.ch-form-label { font-size:0.82rem; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ch-optional-badge { font-size:0.76rem; font-weight:500; color:var(--text-muted); }
/* Custom validation state — replaces the browser's own native "Please fill
   out this field" bubble (which shows up in English regardless of the
   page's language and gives no visual weight to which field it means) with
   a clearly red-highlighted field plus a small message in whichever
   language is currently active. See coaching/script.js's 'invalid' handler. */
.ch-form-group.ch-field-invalid .ch-form-input,
.ch-form-group.ch-field-invalid .ch-form-select,
.ch-form-group.ch-field-invalid .ch-form-textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.ch-field-error-msg { color: #f87171; font-size: 0.8rem; margin-top: 4px; }
.ch-form-input,
.ch-form-select,
.ch-form-textarea {
    background:var(--form-bg);
    border:1px solid var(--form-border);
    border-radius:10px;
    padding:11px 14px;
    font-family:var(--font-body);
    font-size:0.85rem;
    color:var(--text-primary);
    transition:all 0.3s;
    outline:none;
    width:100%;
}
.ch-form-input:focus, .ch-form-select:focus, .ch-form-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--form-focus); }
.ch-form-input::placeholder, .ch-form-textarea::placeholder { color:var(--text-muted); }
.ch-form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B78' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:44px; cursor:pointer; background-color:var(--bg-void); }
.ch-form-select option { background:var(--bg-void); color:var(--text-primary); }
.ch-form-note { font-size:0.8rem; color:var(--text-muted); margin-top:4px; }
.ch-form-submit { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:24px; }
.ch-form-submit-btn { width:100%; max-width:360px; padding:14px; font-size:0.92rem; font-weight:700; background:var(--accent); color:#fff; border:none; border-radius:12px; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; gap:10px; }
.ch-form-submit-btn:hover { background:#3a6ae8; transform:translateY(-2px); box-shadow:0 12px 40px var(--accent-glow); }
.ch-form-submit-btn:disabled { opacity:0.7; cursor:wait; transform:none; }
.ch-form-privacy { font-size:0.78rem; color:var(--text-muted); text-align:center; }
.ch-form-privacy svg { width:12px; height:12px; display:inline-block; vertical-align:middle; margin-right:4px; }

/* Save-failed error banner — only shown if the application could not be
   saved to the database; WhatsApp must never open in that case. */
.ch-form-error-banner { display:flex; align-items:flex-start; gap:10px; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#f87171; border-radius:12px; padding:14px 16px; font-size:0.85rem; line-height:1.6; margin-top:20px; }
.ch-form-error-banner svg { flex-shrink:0; margin-top:1px; }

/* Success State */
.ch-form-success { display:none; text-align:center; padding:48px 24px; }
.ch-form-success.show { display:block; }
.ch-form-success-icon { width:72px; height:72px; border-radius:50%; background:var(--green-dim); border:2px solid var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.ch-form-success-icon svg { width:36px; height:36px; color:var(--green); }
.ch-form-success h3 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.ch-form-success p { font-size:0.95rem; color:var(--text-secondary); line-height:1.7; }
/* Application ID + WhatsApp continue button + auto-redirect countdown —
   the continue button stays visible/clickable even after the auto-redirect
   fires, per spec, in case wa.me didn't actually open (popup blockers etc). */
.ch-form-app-id { font-family:var(--font-mono); font-size:0.85rem; color:var(--accent); background:var(--accent-dim); display:inline-block; padding:6px 14px; border-radius:8px; margin:8px 0 20px; }
.ch-form-wa-continue-btn { max-width:320px; margin:0 auto; background:#25D366; }
.ch-form-wa-continue-btn:hover { background:#1fb655; box-shadow:0 12px 40px rgba(37,211,102,0.35); }
.ch-form-redirect-note { font-size:0.82rem; color:var(--text-muted); margin-top:14px; }
.ch-form-redirect-note #chRedirectSeconds { font-weight:700; color:var(--text-primary); }
.ch-form-popup-warning { font-size:0.82rem; color:#f5a623; background:rgba(245,166,35,0.1); border:1px solid rgba(245,166,35,0.3); border-radius:8px; padding:10px 14px; margin-top:14px; }

/* ================================================
   ONE-TIME CONSULTATION
   ================================================ */
.ch-consult { padding:100px 0 120px; scroll-margin-top: 100px; }
.ch-consult-box {
    border-radius:24px;
    border:1px solid var(--border-glass);
    background:var(--card-bg);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    overflow:hidden;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Arrival highlight when someone opens a direct link to /coaching/#consultation */
.ch-consult-box.link-highlight {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow, rgba(74,111,255,0.25));
    animation: consultPulse 1.4s ease-in-out 2;
}
@keyframes consultPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-glow, rgba(74,111,255,0.25)); }
    50% { box-shadow: 0 0 0 10px rgba(74,111,255,0.05); }
}
.ch-consult-left { padding:56px 48px; }
.ch-consult-right { padding:56px 48px; border-left:1px solid var(--border-subtle); display:flex; flex-direction:column; justify-content:center; }
.ch-consult-tag { display:inline-flex; align-items:center; gap:8px; background:var(--btn-ghost-bg); border:1px solid var(--border-glass); border-radius:100px; padding:6px 14px; font-size:0.75rem; font-weight:600; color:var(--text-muted); font-family:var(--font-mono); margin-bottom:20px; }
.ch-consult-title { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:var(--text-primary); margin-bottom:16px; line-height:1.2; }
.ch-consult-desc { font-size:0.92rem; color:var(--text-secondary); line-height:1.75; margin-bottom:28px; }
.ch-consult-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.ch-consult-features li { display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--text-secondary); }
.ch-consult-features li svg { width:16px; height:16px; color:var(--green); flex-shrink:0; }
.ch-consult-price-block { text-align:center; padding:32px; background:var(--btn-ghost-bg); border-radius:16px; border:1px solid var(--border-glass); margin-bottom:28px; }
.ch-consult-price-label { font-size:0.78rem; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
.ch-consult-price { font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--text-primary); line-height:1; }
.ch-consult-price span { font-size:1rem; color:var(--text-muted); }
.ch-consult-duration { font-size:0.85rem; color:var(--text-muted); margin-top:8px; }
.ch-consult-book-btn { display:block; width:100%; text-align:center; padding:16px; background:var(--accent); color:#fff; border-radius:12px; font-size:0.95rem; font-weight:700; transition:all 0.3s; cursor:pointer; border:none; font-family:var(--font-body); }
.ch-consult-book-btn:hover { background:#3a6ae8; transform:translateY(-2px); box-shadow:0 12px 40px var(--accent-glow); }
.ch-consult-note { font-size:0.78rem; color:var(--text-muted); text-align:center; margin-top:12px; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .ch-specs-grid { grid-template-columns:repeat(2,1fr); }
    .ch-result-card { width:85vw; max-width:340px; }
    .ch-consult-box { grid-template-columns:1fr; }
    .ch-consult-right { border-left:none; border-top:1px solid var(--border-subtle); }
    .ch-apply-box { padding:48px 32px; }
}
@media (max-width: 768px) {
    .container { padding:0 24px; }
    .page-main { padding-top:64px; }
    .ch-hero { padding:24px 0 60px; }
    .ch-results, .ch-specs, .ch-curriculum, .ch-faq, .ch-apply, .ch-consult { padding:70px 0; }
    .ch-specs-grid { grid-template-columns:repeat(2,1fr); }
    .ch-form-grid { grid-template-columns:1fr; }
    .ch-consult-left, .ch-consult-right { padding:36px 28px; }
    .ch-apply-box { padding:36px 24px; }
    .ch-acc-header { padding:18px 20px; }
    .ch-acc-body-inner { padding:0 20px 20px; }
    .ch-consult { scroll-margin-top: 80px; }
    /* iOS Safari auto-zooms the page when a focused input's font-size is
       below 16px. The form's 0.85rem (~13.6px) was under that threshold,
       so tapping any field on mobile snapped the whole page into a zoomed-
       in view. Bumping to 16px only on mobile stops the zoom while keeping
       the smaller 0.85rem sizing on desktop, where this isn't an issue. */
    .ch-form-input,
    .ch-form-select,
    .ch-form-textarea { font-size:16px; }
}
@media (max-width: 480px) {
    /* Keep the "Program Details" cards 2-per-row instead of stacking them
       one under another — stacking made the page much longer on mobile. */
    .ch-specs-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .ch-spec-card { padding:20px 14px; }
    .ch-spec-icon-svg { width:44px; height:44px; margin-bottom:10px; }
    .ch-spec-icon-svg svg { width:24px; height:24px; }
    .ch-spec-title { font-size:0.82rem; margin-bottom:4px; }
    .ch-spec-highlight { font-size:1.05rem; }
    .ch-spec-val { font-size:0.76rem; }
    .ch-hero-title { font-size:2rem; }
    .ch-consult-price { font-size:2.2rem; }
}

.price-equivalent { font-size: 15px; color: var(--text-secondary); font-weight: 600; margin-top: 4px; }

.price-currency-label { display: block; font-size: 0.32em; font-weight: 600; letter-spacing: 0.5px; color: var(--text-secondary); margin-top: 4px; }

/* Override the generic ".ch-consult-price span" rule so our price-main-value
   wrapper keeps the full big/bold price styling instead of being shrunk. */
.ch-consult-price .price-main-value { font-size: inherit; font-weight: inherit; color: inherit; }

/* ================================================
   TRUST BADGES (hero)
   ================================================ */
.ch-trust-badges { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin:0 auto 32px; max-width:720px; }
.ch-trust-badge { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; color:var(--text-secondary); background:var(--card-bg); border:1px solid var(--border-subtle); border-radius:100px; padding:7px 14px; }
.ch-trust-badge svg { width:14px; height:14px; color:var(--green); flex-shrink:0; }

/* Video title shown above the hero video box */
.ch-video-heading { text-align:center; max-width:600px; margin:0 auto 16px; }
.ch-video-heading h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.ch-video-heading p { font-size:0.88rem; color:var(--text-secondary); line-height:1.6; }

/* Video subtext — rendered BELOW the video box (not grouped with the title
   above it). .ch-video-wrap already carries margin-bottom:48px, so pull this
   up a bit and add the section's own bottom margin before the CTA button. */
.ch-video-subtext { text-align:center; max-width:600px; margin:-24px auto 32px; font-size:0.88rem; color:var(--text-secondary); line-height:1.6; }

/* ================================================
   "WHO IS THIS NOT FOR?" (specs section)
   ================================================ */
.ch-not-for { max-width:560px; margin:36px auto 0; padding:24px 28px; border-radius:16px; border:1px solid rgba(239,68,68,0.18); background:rgba(239,68,68,0.05); }
.ch-not-for h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:14px; text-align:center; }
.ch-not-for-list { display:flex; flex-direction:column; gap:10px; }
.ch-not-for-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--text-secondary); line-height:1.5; }
.ch-not-for-x { flex-shrink:0; }

/* Mini "Apply" CTA repeated after key sections */
.ch-mini-cta { display:flex; justify-content:center; margin-top:36px; }

/* ================================================
   "BY THE END OF THIS PROGRAM" checklist (curriculum)
   ================================================ */
.ch-by-end { max-width:640px; margin:40px auto 0; padding:28px 32px; border-radius:16px; border:1px solid rgba(52,211,153,0.18); background:var(--green-dim); }
.ch-by-end h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--text-primary); margin-bottom:16px; text-align:center; }
.ch-by-end-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; }
.ch-by-end-list li { display:flex; align-items:flex-start; gap:8px; font-size:0.87rem; color:var(--text-secondary); line-height:1.5; }

/* ================================================
   WHY LEARN FROM COACH ANAS
   ================================================ */
.ch-why-coach { padding:100px 0; }
/* Flex + justify-content:center (not a 5-col grid) so the row stays centered
   as a group no matter how many stats the admin has configured — a fixed
   column-count grid left a phantom empty column and pushed the cards off-
   center whenever the count wasn't exactly 5 (e.g. after removing a stat). */
.ch-why-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.ch-why-stat { flex:1 1 160px; max-width:220px; text-align:center; padding:28px 16px; border-radius:16px; border:1px solid var(--border-subtle); background:var(--card-bg); }
.ch-why-stat-value { font-family:var(--font-display); font-size:1.9rem; font-weight:700; background:linear-gradient(135deg,var(--accent),#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; }
.ch-why-stat-label { font-size:0.8rem; color:var(--text-secondary); line-height:1.4; }

/* ================================================
   APPLY: urgency counter + "Before You Apply"
   ================================================ */
.ch-apply-urgency-counter { display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:600; color:var(--text-secondary); background:var(--card-bg); border:1px solid var(--border-subtle); border-radius:100px; padding:6px 16px; margin-bottom:20px; }
.ch-urgency-sep { color:var(--text-muted); }
.ch-urgency-count { font-family:var(--font-mono); color:var(--text-primary); font-weight:700; }
.ch-before-apply { text-align:center; max-width:480px; margin:0 auto 28px; padding:16px 20px; border-radius:12px; border:1px solid var(--border-subtle); background:var(--card-bg); }
.ch-before-apply h4 { font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.ch-before-apply p { font-size:0.82rem; color:var(--text-secondary); line-height:1.5; text-align:center; }

/* Two-step application form: fade the step in on toggle (visibility handled
   via inline display none/'' in script.js, this just smooths the reveal). */
.ch-form-step { animation: chFormStepIn 0.35s ease; }
@keyframes chFormStepIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.ch-form-step-actions { margin-top:8px; }
.ch-form-step-actions .ch-form-submit-btn { width:100%; }

@media (max-width: 768px) {
    .ch-why-stat { flex:1 1 45%; }
    .ch-by-end-list { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
    .ch-trust-badges { gap:8px 10px; }
    .ch-trust-badge { font-size:0.72rem; padding:6px 11px; }
}
.ch-consult-price .price-main-value .price-currency-label { font-size: 0.32em; font-weight: 600; color: var(--text-muted); }