/* =====================================================
   HOME v3: corporate navy (home preview + free-tier page)
   Loaded only where ewi_home_v3_active() is true
   (includes/theme/home-v3.php). Colours come from the --navy-*
   palette in core/base.v2.css. Values follow the approved
   mockup "Home page corporate navy". Every text colour below
   is at least 4.5:1 on the background it sits on.
   ===================================================== */


/* ── Tokens. Also re-points the site tokens the header and footer read, so
   they pick up the navy palette. Dark only: the light-mode class is
   overridden here and the theme toggle is hidden. ── */
body.ewi-v3,
body.ewi-v3.light-mode {
    --v3-bg: var(--navy-bg);
    --v3-alt: var(--navy-alt);
    --v3-card: var(--navy-card);
    --v3-foot: var(--navy-foot);
    --v3-rule: var(--navy-rule);
    --v3-line: var(--navy-line);
    --v3-edge: var(--navy-edge);
    --v3-head: var(--navy-head);
    --v3-text: var(--navy-text);
    --v3-soft: var(--navy-soft);
    --v3-body: var(--navy-body);
    --v3-meta: var(--navy-meta);
    --v3-link: var(--navy-link);
    --v3-link-hover: var(--navy-link-hover);
    --v3-accent: var(--navy-accent);
    --v3-accent-hover: var(--navy-accent-hover);
    --v3-on-accent: var(--navy-on-accent);
    --v3-up: var(--navy-up);
    --v3-down: var(--navy-down);
    --v3-sans: var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
    --v3-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);

    --bg: var(--v3-bg);
    --bg-alt: var(--v3-foot);
    --bg-card: var(--v3-card);
    --bg-hover: var(--v3-rule);
    --text: var(--v3-text);
    --text-muted: var(--v3-body);
    --text-faint: var(--v3-meta);
    --accent: var(--v3-accent);
    --accent-hover: var(--v3-accent-hover);
    --border: var(--v3-rule);
    --header-bg: var(--v3-bg);
    --header-border: var(--v3-rule);
    --nav-hover-bg: rgba(77, 163, 255, 0.08);
    --dropdown-bg: var(--v3-card);
    --dropdown-border: var(--v3-line);
    --dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);

    background: var(--v3-bg);
    color: var(--v3-text);
    font-family: var(--v3-sans);
}

body.ewi-v3 .theme-toggle { display: none; }

/* ── Header (existing markup, restyled) ── */
body.ewi-v3 .site-header {
    background: var(--v3-bg);
    border-bottom: 1px solid var(--v3-rule);
    height: 72px;
}
body.ewi-v3 .site-header .ewi-logo--light { display: none !important; }
body.ewi-v3 .site-header .ewi-logo--dark  { display: block !important; }
body.ewi-v3 .nav-links li a { color: var(--v3-soft); font-weight: 500; }
body.ewi-v3 .nav-links li a:hover { color: var(--v3-head); }
body.ewi-v3 .ewi-header-login,
body.ewi-v3 .ewi-header-cta {
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
}
body.ewi-v3 .ewi-header-login { color: var(--v3-soft); }
body.ewi-v3 .ewi-header-cta { background: var(--v3-accent); color: var(--v3-on-accent); padding: 0 18px; }
body.ewi-v3 .ewi-header-cta:hover { background: var(--v3-accent-hover); color: var(--v3-on-accent); transform: none; }
body.ewi-v3 .nav-toggle { min-width: 44px; min-height: 44px; }

/* ── Footer (existing markup, restyled) ── */
body.ewi-v3 .site-footer {
    background: var(--v3-foot);
    border-top: 1px solid var(--v3-rule);
    color: var(--v3-body);
    font-size: 14px;
}
body.ewi-v3 .footer-nav-heading,
body.ewi-v3 .footer-logo span { color: var(--v3-head); font-weight: 600; }
body.ewi-v3 .footer-tagline,
body.ewi-v3 .footer-desc,
body.ewi-v3 .footer-copyright { color: var(--v3-body); }
body.ewi-v3 .site-footer a { color: var(--v3-body); }
body.ewi-v3 .site-footer a:hover { color: var(--v3-head); }
body.ewi-v3 .footer-divider { background: var(--v3-rule); }
body.ewi-v3 .footer-risk {
    font-size: 13px;
    line-height: 1.65;
    color: var(--v3-body);
    opacity: 1;
    max-width: none;
}

/* ── Shared ── */
.v3 .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.v3 { font-family: var(--v3-sans); color: var(--v3-text); }
.v3 a { color: var(--v3-link); text-decoration: none; }
.v3 a:hover { color: var(--v3-link-hover); }
.v3 h1, .v3 h2, .v3 h3 { font-family: var(--v3-sans); }
.v3-num { font-family: var(--v3-mono); font-variant-numeric: tabular-nums; }
.v3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 6px;
    font: 600 15px/1.2 var(--v3-sans);
    border: 1px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    transition: background-color .15s, border-color .15s, color .15s;
}
.v3 .v3-btn--primary,
.v3-btn--primary { background: var(--v3-accent); color: var(--v3-on-accent); }
.v3 .v3-btn--primary:hover,
.v3-btn--primary:hover { background: var(--v3-accent-hover); color: var(--v3-on-accent); }
.v3 .v3-btn--ghost,
.v3-btn--ghost { background: transparent; border-color: var(--v3-edge); color: var(--v3-text); }
.v3 .v3-btn--ghost:hover,
.v3-btn--ghost:hover { border-color: var(--v3-accent); color: var(--v3-text); }
.v3-btn--block { width: 100%; }
.v3-btn[disabled] { opacity: .6; cursor: default; }

.v3-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v3-link);
}
.v3-h2 {
    margin: 0 0 14px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--v3-head);
}
.v3-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--v3-body); }

.v3-card {
    background: var(--v3-card);
    border: 1px solid var(--v3-line);
    border-radius: 10px;
}
a.v3-card { display: block; color: var(--v3-text); transition: border-color .15s; }
.v3 a.v3-card:hover { border-color: var(--v3-edge); color: var(--v3-text); }

.v3-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.v3-pill--bull    { background: rgba(63,191,143,.12); color: var(--v3-up); }
.v3-pill--bear    { background: rgba(242,119,127,.12); color: var(--v3-down); }
.v3-pill--neutral { background: rgba(163,175,194,.12); color: var(--v3-soft); }
.v3-pill--accent  { background: rgba(77,163,255,.14); color: var(--v3-link); }

.v3-section { padding: 88px 0; }
.v3-section--alt {
    background: var(--v3-alt);
    border-top: 1px solid var(--v3-rule);
    border-bottom: 1px solid var(--v3-rule);
}
.v3-section-head { max-width: 640px; margin-bottom: 44px; }
.v3-section-head--row {
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.v3-section-head--row > div { max-width: 640px; }
.v3-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.v3-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    font-size: 15px;
}
.v3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.v3-icon { display: block; color: var(--v3-link); }

/* ── Hero ── */
.v3-hero { padding: 88px 0 72px; border-bottom: 1px solid var(--v3-rule); }
.v3-hero__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.v3-hero__copy { flex: 1 1 460px; min-width: 0; }
.v3-hero__aside { flex: 1 1 440px; min-width: 0; }
.v3-h1 {
    margin: 0 0 22px;
    font-size: 54px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--v3-head);
}
.v3-hero__lead { font-size: 19px; max-width: 540px; }
.v3-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.v3-hero__note { margin: 22px 0 0; font-size: 14px; color: var(--v3-meta); }

.v3-proof { padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.v3-proof__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-proof__title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 20px; font-weight: 600; color: var(--v3-head); }
.v3-proof__tf { font-size: 13px; font-weight: 400; color: var(--v3-meta); }
.v3-proof__chart { margin: 18px 0 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--v3-line); background: var(--v3-bg); }
.v3-proof__chart img { display: block; width: 100%; height: auto; }
.v3-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--v3-line);
    border: 1px solid var(--v3-line);
    border-radius: 8px;
    overflow: hidden;
}
.v3-level { background: var(--v3-card); padding: 12px; margin: 0; }
.v3-level dt { font-size: 12px; color: var(--v3-meta); }
.v3-level dd { margin: 4px 0 0; font-size: 15px; color: var(--v3-text); }
.v3-level dd.is-up   { color: var(--v3-up); }
.v3-level dd.is-down { color: var(--v3-down); }
.v3-proof__summary { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--v3-body); }
.v3-proof__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--v3-meta); }

/* ── Trust strip ── */
.v3-trust { background: var(--v3-alt); border-bottom: 1px solid var(--v3-rule); }
.v3-trust__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px 32px;
    margin: 0 auto;
    padding-top: 22px;
    padding-bottom: 22px;
    list-style: none;
    font-size: 14px;
    color: var(--v3-body);
}
.v3-trust__list li { display: flex; align-items: center; gap: 10px; }

/* ── Latest analysis cards ── */
.v3-acard { display: flex !important; flex-direction: column; gap: 14px; padding: 22px; }
.v3-acard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v3-acard__asset { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; color: var(--v3-text); }
.v3-acard__tf { font-size: 13px; font-weight: 400; color: var(--v3-meta); }
.v3-acard__summary { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v3-body); flex: 1; }
.v3-acard__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--v3-line);
    font-size: 13px;
    color: var(--v3-meta);
}
.v3-acard__plan { color: var(--v3-link); font-weight: 600; }

/* ── Pillars ── */
.v3-pillar { padding: 28px; }
.v3-pillar h3 { margin: 18px 0 10px; font-size: 20px; font-weight: 600; color: var(--v3-head); }
.v3-pillar p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--v3-body); }
.v3-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--v3-soft); }
.v3-list li { position: relative; padding-left: 16px; }
.v3-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v3-accent);
}

/* ── How it works ── */
.v3-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}
.v3-steps li { border-top: 2px solid var(--v3-edge); padding-top: 22px; }
.v3-steps li:first-child { border-top-color: var(--v3-accent); }
.v3-steps__n { font-size: 14px; color: var(--v3-link); }
.v3-steps h3 { margin: 10px 0 8px; font-size: 19px; font-weight: 600; color: var(--v3-head); }
.v3-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v3-body); }

/* ── Academy ── */
.v3-split { display: flex; flex-wrap: wrap; gap: 48px; }
.v3-split__intro { flex: 1 1 340px; min-width: 0; }
.v3-split__main { flex: 999 1 560px; min-width: 0; }
.v3-split__intro .v3-lead + .v3-lead { margin-top: 18px; }
.v3-split__intro .v3-btn { margin-top: 26px; }
.v3-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.v3-guide { padding: 18px 20px; min-height: 44px; box-sizing: border-box; }
.v3-guide__title { display: block; font-weight: 600; font-size: 16px; color: var(--v3-text); }
.v3-guide__desc { display: block; margin-top: 4px; font-size: 14px; color: var(--v3-body); }

/* ── Pricing ── */
.v3-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
    max-width: 780px;
    margin: 0 auto;
}
.v3-plan { padding: 28px; display: flex; flex-direction: column; }
.v3-plan--featured { border-color: var(--v3-accent); }
.v3-plan__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v3-plan h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--v3-head); }
.v3-plan__price { margin: 14px 0 6px; }
.v3-plan__amount { font-size: 36px; font-weight: 500; color: var(--v3-head); }
.v3-plan__per { font-size: 15px; color: var(--v3-meta); }
.v3-plan__note { margin: 0 0 22px; font-size: 14px; color: var(--v3-meta); }
.v3-plan .v3-list { margin-bottom: 28px; font-size: 15px; gap: 10px; flex: 1; }
.v3-plan__small { margin: 10px 0 0; font-size: 13px; color: var(--v3-meta); text-align: center; }

/* ── FAQ ── */
.v3-faq { border-top: 1px solid var(--v3-line); }
.v3-faq details { border-bottom: 1px solid var(--v3-line); }
.v3-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    color: var(--v3-text);
}
.v3-faq summary::-webkit-details-marker { display: none; }
.v3-faq summary::after { content: '+'; color: var(--v3-link); font-size: 20px; line-height: 1; transition: transform .15s; }
.v3-faq details[open] summary::after { transform: rotate(45deg); }
.v3-faq details p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--v3-body); }

/* ── Final CTA ── */
.v3-cta { padding: 0 0 88px; }
.v3-cta__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 48px 40px;
    border: 1px solid var(--v3-line);
    border-radius: 12px;
    background: var(--v3-card);
}
.v3-cta__box > div { max-width: 620px; }
.v3-cta__box .v3-h2 { margin-bottom: 10px; }

/* ── Free-tier landing ── */
.v3-split__main .v3-list { margin-top: 22px; font-size: 15px; }
.v3-split__main .v3-btn { margin-top: 26px; }
.v3-cta--top { padding-top: 88px; }
.v3-signup { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 360px; max-width: 460px; }
.v3-signup__input {
    flex: 1 1 220px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--v3-meta);
    border-radius: 6px;
    background: var(--v3-bg);
    color: var(--v3-text);
    font: 400 15px/1.2 var(--v3-sans);
    box-sizing: border-box;
}
.v3-signup__input::placeholder { color: var(--v3-meta); opacity: 1; }

/* ── Focus: visible on every interactive element in v3 pages ── */
body.ewi-v3 a:focus-visible,
body.ewi-v3 button:focus-visible,
body.ewi-v3 summary:focus-visible,
body.ewi-v3 input:focus-visible {
    outline: 2px solid var(--v3-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .v3-h1 { font-size: 38px; }
    .v3-h2 { font-size: 28px; }
    .v3-hero { padding: 56px 0 48px; }
    .v3-hero__grid { gap: 40px; }
    .v3-section { padding: 64px 0; }
    .v3-cta { padding-bottom: 64px; }
    .v3-cta--top { padding-top: 64px; }
    .v3-cta__box { padding: 32px 24px; }
    .v3-wrap { padding: 0 16px; }
    body.ewi-v3 .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 520px) {
    .v3-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-hero__ctas .v3-btn { flex: 1 1 100%; }
    .v3-cta__box .v3-btn { width: 100%; }
    .v3-signup { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.ewi-v3 *,
    body.ewi-v3 *::before,
    body.ewi-v3 *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* v3 pages are dark only, but the theme still adds .light-mode for visitors
   whose device prefers light, which swapped in the dark-text logo on navy. */
body.ewi-v3 .site-header .logo .ewi-logo--light,
body.ewi-v3.light-mode .site-header .logo .ewi-logo--light { display: none !important; }
body.ewi-v3 .site-header .logo .ewi-logo--dark,
body.ewi-v3.light-mode .site-header .logo .ewi-logo--dark { display: block !important; }

/* A long bias ("Near-term Bearish, Long-term Bullish") wraps under the asset name
   on phones instead of running off the card and widening the page. */
.v3-acard__head { flex-wrap: wrap; }
@media (max-width: 600px) {
    .v3-acard__head .v3-pill { white-space: normal; max-width: 100%; }
}