/* ==========================================================================
   COOL TRADING JOURNAL — LANDING PAGE STYLES
   Split from landing-shell.html. Images live in /assets/landing/img/,
   video in /assets/landing/video/. Tuning values baked in from the shell.
   ========================================================================== */

:root {
    /* Brand tokens */
    --ctj-gold: #DAA520;
    --ctj-gold-hover: #F0C040;
    --ctj-gold-dim: rgba(218, 165, 32, 0.3);
    --ctj-black: #000000;
    --ctj-cream: #FFFFF0;
    --ctj-text-secondary: rgba(255, 255, 240, 0.7);
    --ctj-text-muted: rgba(255, 255, 240, 0.45);
    --font-serif: 'Libre Baskerville', Georgia, serif;
    --font-sans: 'DM Sans', -apple-system, sans-serif;

    /* Hero legibility, still being tuned */
    --glass-blur: 0px;
    --video-scale: 1;
    --video-pos-x: 50%;          /* pan across the source */
    --glass-tint: 0.72;
    --video-dim: 0.45;
    --video-blur: 0px;   /* sharp by default, matches the mockup; tune from the panel */

    /* Section 2 card tilt strength; 0deg disables the effect */
    --tilt-max: 12deg;

    /* Vertical rhythm between sections */
    --section-pad: 100px;
}

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

body {
    background: var(--ctj-black);
    color: var(--ctj-cream);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   NAV — two items, matching the restraint we liked in the reference
   ========================================================================== */
.nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    height: 80px;
    padding: 14px 34px 0;   /* a little air above the logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-serif);
    font-size: 1.85rem;     /* 2.3 brought down ~20% */
    font-weight: 700;
    letter-spacing: -1px;
    text-decoration: none;
}
.nav__logo img {
    height: 54px;           /* 68 brought down ~20% */
    width: auto;
    border-radius: 8px;
    flex-shrink: 0;
}
/* Shimmer, ported from the old page: gold sweep across the wordmark */
.nav__logo span {
    background: linear-gradient(90deg, #FFFFF0 0%, #DAA520 50%, #FFFFF0 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5.5s ease infinite;
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.nav__right { display: flex; align-items: center; gap: 26px; }
.nav__cta {
    padding: 10px 22px;
    background: var(--ctj-gold);
    color: #0a0a0a;
    border-radius: 6px;
    font-size: .8rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease;
}
.nav__cta:hover { background: #F0C040; }
.nav__link {
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,240,.6);
    text-decoration: none;
}
.nav__link:hover { color: var(--ctj-cream); }

/* ---- Hamburger + mobile dropdown, adapted from the old page ---- */
.nav__toggle {
    display: none;
    flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; padding: 9px;
    background: none; border: none; cursor: pointer;
}
.nav__toggle span {
    display: block; width: 100%; height: 2px;
    border-radius: 2px; background: var(--ctj-cream);
    transition: transform .25s ease, opacity .2s ease;
}
/* Bars morph into an X when the menu is open */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown panel, sits below the nav bar, hidden until opened */
.mobile-menu {
    display: none;
    position: fixed; top: 72px; left: 0; right: 0;
    z-index: 99;
    flex-direction: column;
    padding: 12px 24px 24px;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ctj-gold-dim);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__link {
    font-size: 1rem; color: var(--ctj-text-secondary);
    text-decoration: none;
    padding: 14px 4px;
    border-bottom: 1px solid #1a1a1a;
    transition: color .2s ease;
}
.mobile-menu__link:hover { color: var(--ctj-cream); }
.mobile-menu__cta { justify-content: center; margin-top: 16px; padding: 14px 0; }

/* Collapse the inline links into the hamburger on small screens.
   Nav goes fixed so the menu is reachable from anywhere on the page. */
@media (max-width: 860px) {
    .nav__right { display: none; }
    .nav__toggle { display: flex; }
    .nav {
        position: fixed;
        height: 72px;
        padding: 10px 18px 0;
        background: rgba(0, 0, 0, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid #1a1a1a;
    }
    /* Logo scales down to fit the shorter bar */
    .nav__logo { font-size: 1.4rem; gap: 10px; }
    .nav__logo img { height: 40px; }
}
/* Safety: never show the dropdown on desktop, even if a stale class lingers */
@media (min-width: 861px) {
    .mobile-menu { display: none !important; }
}

/* ==========================================================================
   SECTION 1 — HERO (the only real section in pass one)
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;      /* fallback for older browsers */
    min-height: 100svh;     /* mobile: excludes the retracting URL bar, no layout jump */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 24px;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;   /* default per testing; toggle to cover from the panel */
    object-position: var(--video-pos-x) center;
    transform: scale(var(--video-scale));
    filter: blur(var(--video-blur));
    z-index: 0;
}

/* Shown only when the video files are missing */
.hero__fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(218,165,32,.18) 0%, transparent 55%),
        linear-gradient(140deg, #0b0b0b 0%, #16130c 50%, #070707 100%);
    display: none;
    align-items: center; justify-content: center;
    font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,240,.25);
}

.hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0, 0, 0, var(--video-dim));
    pointer-events: none;
}

/* Containment panel */
.hero__panel {
    position: relative; z-index: 2;
    max-width: 680px; width: 100%;
    padding: 56px 48px 44px;
    text-align: center;
    border-radius: 20px;
    background: rgba(10, 10, 10, var(--glass-tint));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(218, 165, 32, 0.14);
}


.hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

/* Gold italic emphasis. Toggling .is-stacked drops it to its own line. */
.hero__headline em {
    font-style: italic;
    font-weight: 400;
    color: var(--ctj-gold);
}
.hero__headline.is-stacked em {
    display: block;
    margin-top: 8px;
}

.hero__sub {
    margin: 30px auto 0;
    max-width: 460px;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ctj-text-secondary);
}

.hero__rule {
    width: 180px; height: 1px;
    margin: 30px auto;
    background: linear-gradient(90deg, transparent, var(--ctj-gold-dim), transparent);
}

.hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
    font-family: var(--font-sans);
    font-size: .92rem; font-weight: 600;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .25s cubic-bezier(.4,0,.2,1);
}
.btn--solid { background: var(--ctj-gold); color: #000; }
.btn--solid:hover { background: var(--ctj-gold-hover); transform: translateY(-1px); }

.btn:focus-visible { outline: 2px solid var(--ctj-gold); outline-offset: 3px; }

.hero__micro { margin-top: 20px; font-size: .78rem; color: rgba(255, 255, 240, 0.68); }

.hero__arrow {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%); z-index: 2;
    color: rgba(255,255,240,.4); font-size: 1.1rem;
    animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

/* ==========================================================================
   SECTION 2 — AI STUDY SPOTLIGHT
   Carried from the old landing.css. Click a card to swap chart + exchange.
   ========================================================================== */
.spot {
    padding: var(--section-pad) 24px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(218,165,32,.15) 0%, transparent 55%),
        #050505;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}
.spot__inner { max-width: 1320px; margin: 0 auto; }   /* wider than standard, the rail layout earns it */

.spot__head { text-align: center; max-width: 760px; margin: 0 auto 84px; }
.spot__eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 16px;
}
.spot__headline {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.2vw, 2.9rem);   /* bumped: this section is the product's face */
    font-weight: 700; line-height: 1.22;
    letter-spacing: -.01em; color: var(--ctj-cream);
}
.spot__headline em { font-style: italic; color: var(--ctj-gold); }

/* Swapping chart. Dashed frame shows through until the images are added. */
.spot__chart {
    width: 100%; aspect-ratio: 2 / 1;   /* taller: the chart is the star of the stage */
    margin-top: 20px;                   /* sits under the exchange in the stage */
    border: 1px solid var(--ctj-gold-dim);
    border-radius: 14px;
    background-color: rgba(255,255,255,.02);
    background-size: cover; background-position: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    transition: opacity .18s ease;
}
.spot__chart--levels { background-image: url("/assets/landing/img/ai-study-levels.png"); }
.spot__chart--entry  { background-image: url("/assets/landing/img/ai-study-entry.png"); }
.spot__chart--exits  { background-image: url("/assets/landing/img/ai-study-exits.png"); }

/* Exchange: user question right, mentor answer left. Leads the stage column. */
.spot__qa { display: flex; flex-direction: column; margin-top: 0; transition: opacity .18s ease; }
.spot__q-label {
    align-self: flex-end;
    font-size: .68rem; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ctj-cream);
    background: #111; border: 1px solid #1a1a1a;
    border-radius: 5px; padding: 3px 9px; margin-bottom: 7px;
}
.spot__q {
    align-self: flex-end; max-width: 78%;
    background: #111; border: 1px solid #1a1a1a;
    border-radius: 12px 12px 2px 12px;
    padding: 10px 14px; color: var(--ctj-cream); font-size: .93rem;
}
.spot__a {
    align-self: flex-start; max-width: 90%; margin-top: 12px;
    background: rgba(218,165,32,.1);
    border: 1px solid var(--ctj-gold-dim);
    border-radius: 12px 12px 12px 2px;
    padding: 14px 18px;
}
.spot__a-label {
    display: block; font-size: .7rem; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 7px;
}
.spot__a-text {
    font-family: var(--font-serif);
    font-size: 1rem; line-height: 1.65; color: var(--ctj-cream);
}
.is-swapping { opacity: 0; }

/* Rail layout: cards left, exchange + chart right, everything in one view */
.spot__body {
    display: grid; grid-template-columns: 290px 1fr;
    gap: 36px; align-items: stretch;    /* rail matches stage height */
}
.spot__stage { min-width: 0; }          /* lets the chart shrink inside the grid */

/* Selectable cards, stacked vertically, sharing the full column height */
.spot__points {
    display: grid; grid-template-columns: 1fr;
    grid-auto-rows: 1fr;                /* three equal rows, no dead space below */
    gap: 14px; margin-top: 0;
}
.spot-point {
    position: relative;                  /* anchors the spotlight layer */
    display: flex; flex-direction: column;
    justify-content: center;             /* content centers in the stretched card */
    text-align: left; background: #111;
    border: 1px solid #1a1a1a; border-radius: 12px;
    padding: 18px 18px 20px; cursor: pointer;
    font-family: inherit; color: inherit;
    transition: border-color .2s ease, background .2s ease,
                box-shadow .2s ease, transform .18s ease-out;  /* .18s = smooth track + springback */
}
/* Hover: gold glow ring, REM5's indigo rings translated to our palette.
   The 3D tilt itself is applied by JS as an inline transform. */
.spot-point:hover {
    border-color: var(--ctj-gold);
    background: rgba(218,165,32,.06);
    box-shadow:
        0 0 0 2px rgba(218,165,32,.4),
        0 0 34px rgba(218,165,32,.18);
}
/* Cursor-following spotlight, position fed by JS via --spot-x / --spot-y */
.spot-point::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(300px at var(--spot-x, 50%) var(--spot-y, 50%),
                rgba(218,165,32,.09), transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
}
.spot-point:hover::after { opacity: 1; }
.spot-point--active { border-color: var(--ctj-gold); background: rgba(218,165,32,.1); }
.spot-point:focus-visible { outline: 2px solid var(--ctj-gold); outline-offset: 2px; }
/* Icon chip inside each card */
.spot-point__icon {
    display: flex; width: 34px; height: 34px;
    border-radius: 9px; background: rgba(218,165,32,.1);
    border: 1px solid var(--ctj-gold-dim);
    align-items: center; justify-content: center; margin-bottom: 12px;
    transition: background .2s ease, border-color .2s ease;
}
.spot-point__icon svg {
    width: 18px; height: 18px; stroke: var(--ctj-gold);
    fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Hover: card physically reacts so it reads as pressable, REM5-style */
.spot-point:hover .spot-point__icon {
    background: rgba(218,165,32,.22);
    border-color: var(--ctj-gold);
}
.spot-point__title { display: block; font-weight: 700; font-size: 1.12rem; line-height: 1.35; margin-bottom: 6px; }
.spot-point__text { display: block; color: var(--ctj-text-secondary); font-size: 1rem; line-height: 1.55; }

.spot__cta { text-align: center; margin-top: 34px; }


/* ==========================================================================
   CANDLESTICK CLICK EFFECT — ported verbatim from home.css
   ========================================================================== */
.click-candle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 6px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: candleFloat 0.8s ease-out forwards;
}
.candle-wick {
    width: 1px;
    height: 5px;
    background-color: currentColor;
}
.candle-body {
    width: 6px;
    height: 10px;
    border-radius: 1px;
    box-shadow: 0 0 6px currentColor;
}
.click-candle.green { color: #00C853; }
.click-candle.green .candle-body { background-color: #00C853; }
.click-candle.red { color: #FF5252; }
.click-candle.red .candle-body { background-color: #FF5252; }

@keyframes candleFloat {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.6); }
}

/* ==========================================================================
   SECTION 4 — HOW IT WORKS + WHY NOT CHATGPT
   Interface-first. Header built, clips / context panel / prompt block follow.
   ========================================================================== */
.how {
    padding: var(--section-pad) 24px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
}
.how__inner { max-width: 1320px; margin: 0 auto; }   /* wider, matching section 2's rail layout */

.how__head { text-align: center; max-width: 820px; margin: 0 auto; }

.how__headline {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700; line-height: 1.2;
    letter-spacing: -.015em; color: var(--ctj-cream);
}
.how__headline em { font-style: italic; color: var(--ctj-gold); }

/* Supporting line under the section headline. Sized up from a caption to a
   real subheadline since it carries the "how is this different" answer. */
.how__frame {
    margin-top: 22px;
    font-size: 1.2rem; line-height: 1.55;
    color: rgba(255, 255, 240, 0.88);
}
.how__frame em { font-style: italic; color: var(--ctj-gold); }

/* ---- Rail layout: sticky labels left, content blocks right ---- */
.how__grid {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 48px; margin-top: 70px;
}
.how__rail { position: sticky; top: 120px; align-self: start; }
.how__rail-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-serif);
    font-size: 1.45rem; font-weight: 700; line-height: 1.3;
    color: #3a3a3a;
    padding: 18px 0;
    border-bottom: 1px solid transparent;
    transition: color .3s ease, border-color .3s ease;
}
.how__rail-item.is-active {
    color: var(--ctj-cream);
    border-bottom-color: var(--ctj-gold);
}

.how__block { margin-bottom: 90px; }
.how__block:last-child { margin-bottom: 0; }

/* Per-block label, mobile stand-in for the rail. Hidden on desktop. */
.how__block-label {
    display: none;
    font-size: .78rem; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 12px;
}
.how__block-text {
    font-size: 1.22rem; font-weight: 500;
    line-height: 1.55;
    color: var(--ctj-cream);            /* headline role, not caption gray */
    margin-bottom: 22px; max-width: 640px;
}

/* ---- Interface clips: sharp, cursor visible, autoplay on scroll ---- */
.how__clip-frame {
    position: relative;
    aspect-ratio: 16 / 9;               /* holds layout before video loads */
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0a;
}
.how__clip-video {
    width: 100%; height: 100%;
    object-fit: cover;                  /* clips are exported 16:9, no letterbox needed */
    display: block;
}
/* Shown only while the clip file is missing, so the layout still reads */
.how__clip-fallback {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    color: #444; font-size: .85rem; letter-spacing: 1px;
}
.how__clip-frame.is-missing .how__clip-fallback { display: flex; }
.how__clip-frame.is-missing .how__clip-video { display: none; }

/* ---- Context panel: interface screenshot, fills the content column ---- */
.how__context-frame {
    position: relative;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0a;
}
.how__context-img { display: block; width: 100%; height: auto; }
/* Shown only while the screenshot is missing, so the layout still reads */
.how__context-fallback {
    display: none;
    align-items: center; justify-content: center;
    min-height: 280px;
    color: #444; font-size: .85rem; letter-spacing: 1px;
}
.how__context-frame.is-missing .how__context-fallback { display: flex; }
.how__context-frame.is-missing .how__context-img { display: none; }

/* ---- Credibility statement, pure text, centered coda ---- */
.how__block--credo { text-align: center; padding: 30px 0 10px; }
.how__block--credo .how__block-label { text-align: left; }   /* mobile label stays consistent */
.how__prompt-text {
    font-family: var(--font-serif);
    font-size: 1.75rem; line-height: 1.55;   /* ~50% up, reads as a true closing statement */
    color: var(--ctj-cream);
    max-width: 820px;                        /* wider measure to fit the bigger type */
    margin: 0 auto;                     /* centers within the content column */
}
.how__prompt-text em { font-style: italic; color: var(--ctj-gold); }

/* ---- Follow-along socials under the credo. Neutral ivory at rest so they
       never compete with the CTA; gold only on hover/focus. ---- */
.how__social {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 12px 26px;
    margin: 34px auto 0;
}
.how__social-label {
    font-family: var(--font-sans);
    font-size: 0.76rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ctj-text-muted);
}
.how__social-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-size: 1rem;
    color: var(--ctj-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
/* Icons carry real brand fills on the paths, so they stay constant; only the
   handle text shifts to gold on hover. */
.how__social-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.how__social-link:hover,
.how__social-link:focus-visible { color: var(--ctj-gold); }

/* ---- Mobile: rail hides, blocks get their own labels ---- */
@media (max-width: 860px) {
    .how__grid { grid-template-columns: 1fr; gap: 0; margin-top: 50px; }
    .how__rail { display: none; }
    .how__block { margin-bottom: 60px; }
    .how__block-label { display: block; }

    /* Section 2: rail collapses, cards stack above the exchange + chart */
    .spot__body { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   SECTION 4.5 — THE LOOP
   Desktop: four steps hung on a thin gold rule, nodes marking each.
   Mobile: 2x2 grid, gold numerals carry the order instead of the rule.
   ========================================================================== */
.loop {
    padding: var(--section-pad) 24px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
}
.loop__inner { max-width: 1020px; margin: 0 auto; }

.loop__head { text-align: center; margin-bottom: 54px; }
.loop__eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 18px;
}
.loop__headline {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700; line-height: 1.2;
    letter-spacing: -.015em; color: var(--ctj-cream);
}
.loop__headline em { font-style: italic; font-weight: 400; color: var(--ctj-gold); }

/* Steps sit under a hairline rule; each node pulls up onto it */
.loop__steps {
    position: relative;
    padding-top: 18px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 18px; text-align: center;
}
.loop__steps::before {
    content: ""; position: absolute; top: 5px; left: 11%; right: 11%;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        var(--ctj-gold-dim) 12%, var(--ctj-gold-dim) 88%, transparent);
}
.loop__step { position: relative; }
.loop__step::before {           /* the node on the rule */
    content: ""; display: block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ctj-gold);
    margin: -21px auto 16px;
}
/* Final step is the handoff to the mentor, so it carries a little more weight */
.loop__step--last::before {
    width: 9px; height: 9px;
    box-shadow: 0 0 0 4px rgba(218,165,32,.16);
    margin: -22px auto 16px;
}
.loop__step--last .loop__title { color: var(--ctj-gold); }

.loop__num { display: none; }   /* numerals are the mobile ordering device */
.loop__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.12rem; color: var(--ctj-cream);
    margin-bottom: 6px; line-height: 1.3;
}
.loop__text {
    display: block;
    font-size: .82rem; line-height: 1.5;
    color: rgba(255,255,240,.52);
}

/* Mobile: rule gives way to a numbered 2x2 grid, order still explicit */
@media (max-width: 768px) {
    .loop__head { margin-bottom: 34px; }
    .loop__steps {
        grid-template-columns: 1fr 1fr;
        gap: 26px 18px; padding-top: 0; text-align: left;
    }
    .loop__steps::before { display: none; }
    .loop__step::before { display: none; }
    .loop__num {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.25rem; line-height: 1;
        color: var(--ctj-gold); margin-bottom: 8px;
    }
    .loop__title { font-size: 1rem; }
}

/* ==========================================================================
   SECTION 5 — EVERYTHING ELSE INCLUDED
   Tile mosaic + spotlight. All six features visible, click to feature one.
   ========================================================================== */
.else {
    padding: var(--section-pad) 24px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
}
.else__inner { max-width: 1320px; margin: 0 auto; }

.else__head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.else__eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 22px;
}
.else__headline {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700; line-height: 1.2;
    letter-spacing: -.015em; color: var(--ctj-cream);
}
.else__headline em { font-style: italic; color: var(--ctj-gold); }

/* Feature imagery: else-*.png cropped to 1.85:1, in /assets/landing/img/ */
.else__col--scanner    { background-image: url("/assets/landing/img/else-scanner.png"); }
.else__col--journal    { background-image: url("/assets/landing/img/else-journal.png"); }
.else__col--library    { background-image: url("/assets/landing/img/else-library.png"); }
.else__col--study      { background-image: url("/assets/landing/img/else-study.png"); }
.else__col--newsletter { background-image: url("/assets/landing/img/else-newsletter.png"); }
.else__col--share      { background-image: url("/assets/landing/img/else-share.png"); }

/* Filmstrip: the open column expands in place, siblings compress to slivers */
.else__strip { display: flex; gap: 12px; height: 500px; }
.else__col {
    position: relative; flex: 1; min-width: 0;
    border: 1px solid #1e1e1e; border-radius: 12px; overflow: hidden;
    cursor: pointer; padding: 0;
    background-size: cover; background-position: center;
    background-color: #0d0d0d;
    transition: flex .5s cubic-bezier(.4,0,.2,1), border-color .3s ease;
}
.else__col::before {                     /* dim layer, lifts on the open column */
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.62);
    transition: background .35s ease;
}
.else__col:hover::before { background: rgba(0,0,0,.45); }
.else__col.is-open { flex: 5.6; border-color: var(--ctj-gold-dim); }
.else__col.is-open::before {
    background: linear-gradient(to top, rgba(0,0,0,.85) 18%, rgba(0,0,0,.12));
}
/* Collapsed state: rotated label centered in the sliver */
.else__col-label {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    font-size: .78rem; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; color: var(--ctj-cream);
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
    transition: opacity .25s ease;
}
.else__col.is-open .else__col-label { opacity: 0; }
/* Open state: number, title, description fade up over the image */
.else__col-content {
    position: absolute; left: 24px; right: 24px; bottom: 20px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s ease .15s, transform .35s ease .15s;
    text-align: left;
}
.else__col.is-open .else__col-content { opacity: 1; transform: none; }
.else__col-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem; font-weight: 700; color: var(--ctj-gold);
}
.else__col-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.35rem; font-weight: 700;
    color: var(--ctj-cream); margin: 2px 0 6px;
}

/* Caption bar: the open feature's explanation lives under the imagery */
.else__caption {
    margin: 18px auto 0;
    max-width: 700px; min-height: 3.1em;   /* holds height so the strip doesn't jump */
    text-align: center;
    font-size: 1.02rem; line-height: 1.55;
    color: var(--ctj-text-secondary);
    transition: opacity .2s ease;
}

/* Mobile: filmstrip becomes the vertical band accordion, REM5-style */
@media (max-width: 860px) {
    /* Shared caption retires — the text now lives inside each open band */
    .else__caption { display: none; }
    .else__strip { flex-direction: column; height: auto; }
    .else__col { height: 60px; flex: none; transition: height .45s cubic-bezier(.4,0,.2,1), border-color .3s ease; }
    .else__col.is-open { height: 390px; flex: none; }   /* 320 image + 70 caption bar */

    /* Description bar: solid strip under the image, text pulled from data-desc.
       ::before is the dim layer, so ::after is free for this. */
    .else__col.is-open::after {
        content: attr(data-desc);
        position: absolute; left: 0; right: 0; bottom: 0;
        height: 70px;
        display: flex; align-items: center;
        padding: 0 18px;
        background: #0d0d0d;
        border-top: 1px solid var(--ctj-gold-dim);
        color: var(--ctj-text-secondary);
        font-size: .85rem; line-height: 1.45; text-align: left;
    }

    /* Image dimming stops where the caption bar starts */
    .else__col.is-open::before { bottom: 70px; }

    /* Number + title sit above the bar instead of at the band's bottom edge */
    .else__col.is-open .else__col-content { bottom: 84px; }

    .else__col-label {
        transform: none; left: 18px; top: 50%;
        transform: translateY(-50%);
    }
}

/* ==========================================================================
   SECTION 7 — PRICING
   Four tiers. Desk wears the old page's parchment treatment; the rest are
   dark cards with gold borders. Grouped feature lists, gold checks.
   ========================================================================== */
/* Pricing cards: assets/landing/pricing.css (shared with the partners' co-branded page). */

/* ==========================================================================
   SECTION 9 — FOOTER, carried from the old page.
   Old CSS vars substituted: dark-surface #0a0a0a, muted rgba cream 45%,
   gold-hover #F0C040, dark-border #1a1a1a.
   ========================================================================== */
.landing-footer {
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    padding: 56px 0 40px;
    color: rgba(255, 255, 240, 0.45);
    font-size: 0.82rem;
    line-height: 1.7;
}
.landing-footer__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.landing-footer__row { margin-bottom: 18px; }
.landing-footer__label {
    color: var(--ctj-gold); font-weight: 700;
    letter-spacing: 0.5px; margin-right: 8px;
}
.landing-footer__text { color: rgba(255, 255, 240, 0.45); }
.landing-footer__text a {
    color: var(--ctj-gold);
    text-decoration: underline;
    text-decoration-color: rgba(218, 165, 32, 0.4);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.landing-footer__text a:hover { color: #F0C040; text-decoration-color: #F0C040; }
.landing-footer__divider {
    margin: 32px 0 24px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--ctj-gold-dim) 50%, transparent 100%);
}
.landing-footer__bottom {
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 16px;
}
.landing-footer__copyright { font-size: 0.8rem; letter-spacing: 0.3px; }
.landing-footer__links { display: flex; align-items: center; gap: 12px; }
.landing-footer__link {
    color: var(--ctj-text-secondary); font-size: 0.8rem;
    text-decoration: none; transition: color 0.2s ease;
}
.landing-footer__link:hover { color: var(--ctj-gold); }
.landing-footer__sep { color: #1a1a1a; user-select: none; }
/* ---- Socials row: sits between the gold divider and the legal bottom row. ---- */
.landing-footer__social {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 30px; margin-bottom: 26px;
}
.landing-footer__social-link {
    display: inline-flex; align-items: center; gap: 11px;
    color: var(--ctj-text-secondary); font-size: 1.02rem;
    text-decoration: none; transition: color 0.2s ease;
}
.landing-footer__social-link svg { width: 26px; height: 26px; flex-shrink: 0; }
.landing-footer__social-link:hover,
.landing-footer__social-link:focus-visible { color: var(--ctj-gold); }
@media (max-width: 768px) {
    .landing-footer { padding: 40px 0 32px; font-size: 0.78rem; }
    .landing-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   NEWSLETTER POPUP — parchment subscription slip + collapsed pill
   ========================================================================== */
.ctt-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.62);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
/* display:flex above would defeat the hidden attribute; restore it explicitly */
.ctt-overlay[hidden], .ctt-pill[hidden] { display: none; }
.ctt-slip {
    position: relative;
    width: 460px; max-width: 100%;
    background: #F0E4CC;
    border: 1px solid var(--ctj-gold);
    border-radius: 14px;
    padding: 34px 34px 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.65);
    text-align: center;
}
.ctt-slip::before {                    /* inner gold frame, parchment double border */
    content: ""; position: absolute; inset: 7px;
    border: 1px solid rgba(160,118,20,.5);
    border-radius: 9px; pointer-events: none;
}
.ctt-slip__close {
    position: absolute; top: 14px; right: 16px; z-index: 1;
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; color: #5b4d31;
}
.ctt-slip__kicker {
    font-size: .68rem; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: #7a5a10; margin-bottom: 10px;
}
.ctt-slip__masthead {
    font-family: 'UnifrakturCook', var(--font-serif);
    font-size: 2.1rem; color: #241d10; line-height: 1.1;
}
.ctt-slip__rule {
    width: 70%; margin: 12px auto 14px; height: 1px; background: #241d10;
    position: relative;
}
.ctt-slip__rule::after {
    content: ""; position: absolute; left: 0; right: 0; top: 3px;
    height: 1px; background: rgba(36,29,16,.4);
}
.ctt-slip__sub {
    font-family: var(--font-serif);
    font-size: .95rem; line-height: 1.65; color: #5b4d31;
    margin-bottom: 20px;
}
.ctt-slip__sub strong { color: #241d10; font-weight: 700; }
.ctt-slip__input {
    display: block; width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body); font-size: .95rem;
    color: #241d10; background: rgba(255,252,244,.75);
    border: 1px solid rgba(36,29,16,.4); border-radius: 999px;
    outline: none; text-align: center;
    margin-bottom: 12px;
}
.ctt-slip__input::placeholder { color: rgba(91,77,49,.7); }
.ctt-slip__cta {
    display: block; width: 100%;
    padding: 13px 0;
    background: #241d10; color: #F0E4CC;
    border: none; border-radius: 999px;
    font-family: var(--font-body); font-weight: 700; font-size: .98rem;
    letter-spacing: .3px; cursor: pointer;
    transition: background .2s ease;
}
.ctt-slip__cta:hover { background: #3a2f19; }
.ctt-slip__micro {
    margin-top: 12px;
    font-family: var(--font-serif); font-style: italic;
    font-size: .8rem; color: #5b4d31;
}

/* Collapsed pill, bottom center after dismissal */
.ctt-pill {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 9900;
    display: flex; align-items: center; gap: 12px;
    background: #F0E4CC;
    border: 1px solid var(--ctj-gold); border-radius: 999px;
    padding: 10px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
    cursor: pointer; text-align: left;
    font-family: var(--font-body);
}
.ctt-pill__title { font-family: var(--font-serif); font-weight: 700; font-size: .92rem; color: #241d10; }
.ctt-pill__sub { font-size: .78rem; color: #5b4d31; }
.ctt-pill__x { margin-left: 6px; color: #5b4d31; font-size: .95rem; }

@media (max-width: 768px) {
    .hero__panel { padding: 40px 24px 32px; }
    /* Mobile: vertical export fills the frame edge to edge */
    .hero__video { object-fit: cover; --video-scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__arrow { animation: none; }
}


/* ==========================================================================
   Mobile hero v2 — in-flow demo video replaces the background video (≤768px)
   Desktop is untouched: base rule below keeps the demo element hidden there.
   ========================================================================== */

/* Desktop: demo window hidden; background video behavior unchanged */
.hero__demo { display: none; }

@media (max-width: 768px) {
    /* Background video off on mobile — the demo window takes over */
    .hero__video { display: none; }

    /* Visible demo window: full width, wide ratio, gold frame */
    .hero__demo {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin: 18px 0 4px;
        border: 1px solid rgba(218, 165, 32, .4);
        border-radius: 10px;
        object-fit: cover;
        background: #0a0a0a;   /* holds the space while the file loads */
    }


    /* Let the hero shrink to content so the mentor section peeks above the fold */
    .hero { min-height: 0; padding: 84px 16px 24px; }
    .hero__panel { padding: 28px 18px 24px; border-color: transparent; }

    /* Bouncing arrow retires on mobile — the section peek replaces its job */
    .hero__arrow { display: none; }
}

/* Credibility line under the hero CTA — sits tighter than the micro-line above it */
.hero__credibility {
    margin-top: 6px;
    font-size: .76rem;
    line-height: 1.5;
    color: rgba(255, 255, 240, 0.72);
}


/* Gold emphasis on the credential — the differentiating half of the line */
.hero__credibility em {
    font-style: normal;   /* gold carries the emphasis; italic would fight the headline */
    color: var(--ctj-gold);
}


/* ==========================================================================
   Hero v3 — the product video moves into the layout (769px and up)
   The demo used to play blurred behind the glass panel, where it read as
   texture instead of as the app. Now it sits in its own framed window:
   beside the copy above 1040px, stacked under it on tablets. Phones are
   untouched — #heroDemo inside the panel is still their video.
   ========================================================================== */

.hero__grid { position: relative; z-index: 2; width: 100%; }

/* The video window itself. 16:9 so the 1920x1080 source lands exactly. */
.hero__vsl {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #0a0a0a;     /* holds the space while the file loads */
    border: 1px solid rgba(218, 165, 32, 0.34);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85),
                0 0 0 1px rgba(255, 255, 240, 0.04) inset;
}
.hero__vsl video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Phones: the in-panel #heroDemo is the video, so this one stays out */
@media (max-width: 768px) {
    .hero__media { display: none; }
}

/* Tablets: one centred column, video below the copy */
@media (min-width: 769px) and (max-width: 1040px) {
    .hero__media { margin-top: 34px; }
}

/* Desktop: two columns, the video taking the wider half */
@media (min-width: 1041px) {
    .hero { padding: 96px 40px 76px; }

    /* The video carries the message, so it gets the lion's share of the row.
       Tuned against the real clip: at a 1920 viewport this lands the frame at
       ~1130px, a 1.70x shrink of the 1920px source — the point where the
       mentor's writing stays readable on an ordinary 1x laptop screen. */
    .hero__grid {
        max-width: 1680px;
        display: grid;
        grid-template-columns: minmax(0, 0.80fr) minmax(0, 1.80fr);
        align-items: center;
        gap: 44px;
    }

    /* The glass card retires here: with a lit video beside it there is no
       background left to lift the copy off, and the border boxed it in. */
    .hero__panel {
        max-width: none; width: auto;
        padding: 0;
        text-align: left;
        background: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Eased down again now the copy column is ~500px, so the headline still
       holds two lines beside the wider video */
    .hero__headline { font-size: clamp(1.7rem, 2.65vw, 2.45rem); }
    .hero__headline.is-stacked em { margin-top: 6px; }
    .hero__sub { margin: 26px 0 0; }
    .hero__rule { margin: 28px 0; }
    .hero__ctas { justify-content: flex-start; }
    .hero__micro,
    .hero__credibility { text-align: left; }

    /* Background video retired — the framed VSL replaces it. To bring it
       back, flip HERO_BG_VIDEO in landing.js and drop this rule. */
    .hero__video,
    .hero__fallback,
    .hero__scrim { display: none; }
}


/* ==========================================================================
   Hero CTA hover — solid gold turns to engraved parchment
   At rest the button is solid gold, because gold marks the primary action.
   On hover it becomes the same parchment the nav CTA and the Desk pricing
   card wear, with the gold sheen sweeping across it — so the page speaks one
   vintage language instead of leaving a modern gold pill among engraved
   elements. Reuses the navSheen keyframes defined with the nav CTA above.

   Geometry never changes: .btn already carries a transparent 1px border and
   the font and padding are untouched, so nothing shifts under the cursor.
   The .btn transition (all .25s) carries the colour change.
   ========================================================================== */
.hero__ctas .btn--solid {
    position: relative;
    overflow: hidden;
}

/* The sweep runs dark, not gold. A gold sheen barely separates from the
   parchment it crosses; a shadow passing over reads as the paper tilting,
   which suits an engraved surface better than a highlight does. */
.hero__ctas .btn--solid::after {
    content: "";
    position: absolute;
    top: 0; left: -130%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.38), transparent);
    transform: skewX(-14deg);
    pointer-events: none;
    z-index: 2;
}

.hero__ctas .btn--solid:hover::after { animation: navSheen 1.1s ease-in-out; }

/* The swap itself. Specificity beats the plain .btn--solid:hover above,
   which would otherwise just lighten the gold. */
.hero__ctas .btn--solid:hover,
.hero__ctas .btn--solid:focus-visible {
    background: #F0E4CC;
    color: #241d10;
    border-color: var(--ctj-gold);
    box-shadow: inset 0 0 0 4px #F0E4CC,
                inset 0 0 0 5px rgba(160, 118, 20, 0.45),
                0 10px 26px -8px rgba(218, 165, 32, 0.4);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .hero__ctas .btn--solid:hover::after { animation: none; }
    .hero__ctas .btn--solid:hover,
    .hero__ctas .btn--solid:focus-visible { transform: none; }
}

/* ==========================================================================
   Nav CTA — parchment engraved treatment (matches the Desk pricing card)
   ========================================================================== */
.nav__cta {
    position: relative;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    background: #F0E4CC;
    color: #241d10;
    border: 1px solid var(--ctj-gold);
    box-shadow: inset 0 0 0 4px #F0E4CC, inset 0 0 0 5px rgba(160, 118, 20, .45);
}
.nav__cta:hover { background: #F7EDD9; }

/* Slow gold sheen across the parchment on hover */
.nav__cta::after {
    content: "";
    position: absolute;
    top: 0; left: -130%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(218, 165, 32, .55), transparent);
    transform: skewX(-14deg);
    pointer-events: none;
}
.nav__cta:hover::after { animation: navSheen 1.1s ease-in-out; }
@keyframes navSheen { to { left: 150%; } }

/* Mobile menu CTA — full-width parchment bar at the foot of the dropdown */
.mobile-menu__cta {
    margin: 20px -24px -24px;   /* cancels the menu's padding to go edge to edge */
    border-radius: 0;
    padding: 18px 0;
    font-family: var(--font-serif);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    background: #F0E4CC;
    color: #241d10;
    border: none;
    border-top: 1px solid var(--ctj-gold);
    box-shadow: none;
}

/* Nav links: gold underline wipes in from the left on hover */
.nav__link {
    position: relative;
    padding-bottom: 4px;   /* room for the rule to sit below the text */
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--ctj-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.nav__link:hover::after { transform: scaleX(1); }

/* ==========================================================================
   SECTION 2 — mobile accordion. Replaces the rail layout below 861px so the
   control and its content are always adjacent (rail put them a screen apart).
   ========================================================================== */
.spot__accordion { display: none; }

@media (max-width: 860px) {
    .spot__body { display: none; }
    .spot__accordion { display: block; }

    .spot-acc {
        border: 1px solid #1a1a1a;
        border-radius: 12px;
        background: #111;
        margin-bottom: 10px;
        overflow: hidden;
        transition: border-color .2s ease, background .2s ease;
    }
    .spot-acc.is-open {
        border-color: var(--ctj-gold);
        background: rgba(218, 165, 32, .07);
    }

    .spot-acc__head {
        display: flex; align-items: center; gap: 11px;
        width: 100%; padding: 14px;
        background: none; border: none; cursor: pointer;
        font-family: inherit; color: inherit; text-align: left;
    }
    /* Open header becomes a parchment band, matching the mobile menu CTA */
    .spot-acc.is-open .spot-acc__head {
        background: #F0E4CC;
        border-bottom: 1px solid var(--ctj-gold);
    }
    .spot-acc.is-open .spot-acc__title { color: #241d10; }
    .spot-acc.is-open .spot-acc__chev { color: #7a5a10; }
    .spot-acc.is-open .spot-acc__icon {
        background: rgba(160, 118, 20, .12);
        border-color: rgba(160, 118, 20, .5);
    }
    .spot-acc.is-open .spot-acc__icon svg { stroke: #7a5a10; }
    .spot-acc__icon {
        flex-shrink: 0;
        width: 32px; height: 32px;
        border-radius: 8px;
        background: rgba(218, 165, 32, .1);
        border: 1px solid var(--ctj-gold-dim);
        display: flex; align-items: center; justify-content: center;
    }
    .spot-acc__icon svg {
        width: 17px; height: 17px; stroke: var(--ctj-gold);
        fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .spot-acc__title { flex: 1; font-size: .92rem; font-weight: 700; line-height: 1.3; }
    .spot-acc__chev {
        color: var(--ctj-gold); font-size: .8rem;
        transition: transform .25s ease;
    }
    .spot-acc.is-open .spot-acc__chev { transform: rotate(180deg); }

    /* Body only renders when open — keeps the section short when collapsed */
    .spot-acc__body { display: none; padding: 16px 14px 14px; }
    .spot-acc.is-open .spot-acc__body { display: block; }

    /* Chart reuses the existing --levels/--entry/--exits background classes */
    .spot-acc__body .spot__chart { margin-top: 12px; }

    /* Mobile: make the user bubble read as a bubble — narrower, brighter, offset */
    .spot-acc__body .spot__q-label {
        background: #1c1c1c;
        border-color: #2a2a2a;
        color: rgba(255, 255, 240, .75);
    }
    .spot-acc__body .spot__q {
        max-width: 88%;
        background: #1c1c1c;
        border-color: #2f2f2f;
        border-radius: 14px 14px 3px 14px;
        padding: 11px 14px;
        font-size: .88rem;
        line-height: 1.5;
    }
    /* Gold answer bubble sits slightly inset from the other side */
    .spot-acc__body .spot__a {
        max-width: 94%;
        margin-top: 14px; 
    }
}


/* ==========================================================================
   1.5 BROKER STRIP — under the hero: who My Trades links with
   ========================================================================== */
.proof { background: #000; padding: 0 24px; }
.proof__row {
    max-width: 1320px; margin: 0 auto; padding: 22px 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px;
    border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a;
}
.proof__label { font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ctj-text-muted); }
.proof__broker { display: inline-flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 500; color: rgba(255,255,240,.85); white-space: nowrap; }
.proof__broker i {
    font-style: normal; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 6px; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: -.2px;
}
.proof__more { font-size: .82rem; color: var(--ctj-text-muted); }
.proof__or { font-size: .82rem; color: var(--ctj-text-muted); padding-left: 26px; border-left: 1px solid #2a2a2a; }

/* Phone: the label on its own line, the brokers two to a row, the rest centred under them */
@media (max-width: 768px) {
    .proof { padding: 0 20px; }
    .proof__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; justify-items: start; padding: 20px 0; }
    .proof__label, .proof__more, .proof__or { grid-column: 1 / -1; justify-self: center; text-align: center; }
    .proof__broker { font-size: .88rem; }
    .proof__or { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   4.7 MY TRADES — headline, three tab buttons, one framed picture at a time
   ========================================================================== */
.mt { padding: var(--section-pad) 24px; background: #050505; border-top: 1px solid #1a1a1a; }
.mt__inner { max-width: 1240px; margin: 0 auto; }
.mt__head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.mt__eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--ctj-gold); margin-bottom: 20px;
}
.mt__headline {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700; line-height: 1.2;
    letter-spacing: -.015em; color: var(--ctj-cream);
}
.mt__headline em { font-style: italic; font-weight: 400; color: var(--ctj-gold); }
.mt__sub { margin-top: 16px; font-size: 1.02rem; line-height: 1.6; color: var(--ctj-text-secondary); }

/* Tab buttons: a gold icon chip and a label. The chosen one gets a gold outline
   (not a gold fill: solid gold is kept for the page's one primary action). */
.mt__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.mt__tab {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--font-serif); font-size: 1rem; color: rgba(255,255,240,.75);
    background: #0c0c0c; border: 1px solid #262626; border-radius: 12px;
    padding: 10px 20px 10px 11px; cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease, color .18s ease, background .25s ease;
}
.mt__tab-ic {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    background: rgba(218,165,32,.1); color: var(--ctj-gold);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.mt__tab:hover { transform: translateY(-2px); border-color: var(--ctj-gold-dim); color: var(--ctj-cream); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.mt__tab:hover .mt__tab-ic { background: rgba(218,165,32,.22); transform: rotate(-6deg) scale(1.06); }
.mt__tab:active { transform: translateY(0) scale(.97); }
.mt__tab.is-on {
    color: var(--ctj-cream); border-color: var(--ctj-gold);
    background: linear-gradient(180deg, rgba(218,165,32,.14), rgba(218,165,32,.03));
    box-shadow: 0 0 0 1px rgba(218,165,32,.35), 0 10px 30px rgba(218,165,32,.14);
}
.mt__tab.is-on .mt__tab-ic { background: var(--ctj-gold); color: #14120E; }

.mt__body { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 18px; align-items: center; }
.mt__arrow {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--ctj-gold-dim); background: #0c0c0c; color: var(--ctj-gold);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
    transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.mt__arrow:hover { border-color: var(--ctj-gold); background: var(--ctj-gold); color: #14120E; }
.mt__arrow[data-step="1"]:hover { transform: translateX(3px); }
.mt__arrow[data-step="-1"]:hover { transform: translateX(-3px); }
.mt__arrow:active { transform: scale(.94); }

/* The stage keeps the height of the tallest picture (set by landing.js), so the
   page below never jumps when the picture changes. */
.mt__stage { position: relative; display: grid; place-items: center; min-height: 320px; }
.mt__frame {
    grid-area: 1 / 1; position: relative; overflow: hidden;
    border-radius: 12px; border: 1px solid rgba(218,165,32,.25);
    box-shadow: 0 18px 60px rgba(0,0,0,.6); background: #000;
    opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.mt__frame.is-on { opacity: 1; visibility: visible; }
.mt__frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

.mt__cap { text-align: center; max-width: 640px; margin: 26px auto 0; }
.mt__cap h3 { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.3; color: var(--ctj-cream); margin-bottom: 8px; }
.mt__cap p { font-size: .98rem; line-height: 1.6; color: var(--ctj-text-secondary); }
.mt__note { text-align: center; margin-top: 10px; font-size: .76rem; color: var(--ctj-text-muted); }
.mt__ways {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px;
    margin-top: 36px; padding-top: 26px; border-top: 1px solid #1a1a1a;
    font-size: .93rem; color: rgba(255,255,240,.82);
}
.mt__ways b { color: var(--ctj-cream); font-weight: 600; }
.mt__tag {
    display: inline-block; margin-left: 8px; font-size: .66rem; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; color: var(--ctj-gold);
    border: 1px solid var(--ctj-gold-dim); border-radius: 10px; padding: 1px 7px; vertical-align: 1px;
}

/* Phone: three buttons in one row (icon over label), no side arrows (swipe turns
   the page), and the picture runs the full width. */
@media (max-width: 768px) {
    .mt { padding-left: 16px; padding-right: 16px; }
    .mt__head { margin-bottom: 28px; }
    .mt__sub { font-size: .95rem; }
    .mt__tabs { flex-wrap: nowrap; gap: 8px; margin-bottom: 20px; }
    .mt__tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 7px; font-size: .82rem; padding: 10px 6px 9px; text-align: center; }
    .mt__body { grid-template-columns: minmax(0, 1fr); }
    .mt__stage { place-items: start center; transition: min-height .3s ease; }
    .mt__arrow { display: none; }
    .mt__cap { margin-top: 20px; }
    .mt__cap h3 { font-size: 1.2rem; }
    .mt__cap p { font-size: .93rem; }
    .mt__ways { flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-top: 28px; }
}