/*
 * FXpips — page layouts from the client's multi-page Dark Edition (dark-client-assets/pages.css),
 * adapted to this build: the shell, header and footer keep the full-bleed treatment from phase1.css,
 * so only the page-level components are taken from the client's file.
 * Load order: theme.css → theme-dark.css → phase1.css → pages.css
 */
:root{
  --page-border:#193742;
  --page-card:#08171f;
  --page-copy:#a6bbc4;
}
.eyebrow{color:#62dbae}

/* ------------------------------------------------------------------ page intro + breadcrumb */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:#7895a3;font-size:10px;margin-bottom:26px}
.breadcrumb a{color:#b6ccd5}
.breadcrumb a:hover{color:#72eab4}
.breadcrumb [aria-current="page"]{color:#83a2ae}
.page-intro{padding:31px 0 28px;border-bottom:1px solid #132c35;margin-bottom:28px}
.page-intro .eyebrow{margin-bottom:12px}
.page-intro h1{font-size:clamp(30px,3.6vw,41px);letter-spacing:-1px;line-height:1.15}
.page-intro p,.page-description{color:var(--page-copy);max-width:650px;font-size:13px;line-height:1.8;margin-top:13px}
.page-intro .btn-row{margin-top:22px}
.page-content{padding-bottom:36px}
.page-note{color:#839ea8;font-size:11px;line-height:1.8;margin-top:19px}

/* ------------------------------------------------------------------ home: market overview cards */
.home-section{margin-top:34px}
.home-section .section-heading{margin-bottom:11px}
.home-section .section-heading h2{font-size:19px;letter-spacing:-.4px}
.section-copy{color:var(--page-copy);line-height:1.75;font-size:12px;max-width:610px;margin-bottom:17px}
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.overview-card{display:block;position:relative;border:1px solid #205066;border-radius:15px;padding:23px;background:linear-gradient(130deg,#0a2130,#07151f);overflow:hidden;color:var(--ink)}
.overview-card:nth-child(2){border-color:#245340;background:linear-gradient(130deg,#082b23,#081a18)}
.overview-card:hover{transform:translateY(-3px);border-color:#47b5c4;box-shadow:0 6px 22px #00bdcb10}
.overview-card:nth-child(2):hover{border-color:#45b889}
.overview-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.overview-topline .eyebrow{margin:0;font-size:9px;letter-spacing:1.4px}
.overview-arrow{color:#62e7b0;font-size:20px;line-height:1}
.overview-icon{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;flex-shrink:0;border-radius:11px;color:#6de7e6;background:#0e3945;border:1px solid #21596a;font-size:21px}
.overview-icon .ic{width:21px;height:21px}
.overview-card:nth-child(2) .overview-icon{color:#77efba;background:#104132;border-color:#246048}
.overview-card h3{color:#f0f6f8;font-size:23px;font-weight:600;letter-spacing:-.5px;margin-bottom:9px}
.overview-card p{color:#9fb9c4;font-size:12px;line-height:1.8;max-width:360px}
.asset-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:19px}
.asset-chips span{border:1px solid #2d4b57;border-radius:6px;background:#0d252d;padding:5px 8px;color:#c5d9e0;font-size:9px}
.overview-card:nth-child(2) .asset-chips span{background:#0d2d25;border-color:#2c4e40}
.overview-link{display:flex;align-items:center;gap:9px;margin-top:20px;color:#71e6b6;font-size:11px}
.overview-link>span{font-size:16px}

/* ------------------------------------------------------------------ summary strip */
.summary-strip{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px;align-items:center;border:1px solid #244b3d;border-radius:15px;padding:24px;margin-top:28px;background:linear-gradient(115deg,#09271f,#071c1b 64%,#081b24)}
.summary-intro h2{color:#f1f7f4;font-size:19px;font-weight:600;letter-spacing:-.35px}
.summary-intro p{color:#a1bbb0;font-size:11px;line-height:1.7;margin-top:8px}
.summary-intro a{display:inline-flex;align-items:center;gap:7px;margin-top:13px;color:#76e6b3;font-size:11px}
.summary-intro a:hover{color:#b7ffda}
.summary-stat{min-width:0;border-left:1px solid #28503f;padding-left:26px}
.summary-stat strong{display:block;color:#4be6a1;font:650 34px/1.15 Arial,sans-serif;letter-spacing:-.7px}
.summary-stat:last-child strong{color:#3bd1d8}
.summary-stat span{display:block;margin-top:7px;color:#dae9e2;font-size:11px}
.summary-stat small{display:block;color:#85a599;font-size:9px;margin-top:5px;line-height:1.6}

/* ------------------------------------------------------------------ steps + CTA band */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.step-card{padding:20px;border:1px solid var(--page-border);border-radius:13px;background:#07141c}
.step-number{display:inline-flex;align-items:center;justify-content:center;min-width:29px;height:29px;padding:0 8px;border:1px solid #255644;color:#65e5ad;background:#0b2b24;border-radius:8px;margin-bottom:16px;font-size:11px}
.step-card h3{font-size:14px;margin-bottom:9px;font-weight:600;color:#e8f2f4}
.step-card p{font-size:11px;line-height:1.8;color:#94adb9}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:24px 26px;border:1px solid #225244;border-radius:15px;background:radial-gradient(ellipse at 100% 50%,#07483166,transparent 65%),#081b1c;margin:30px 0 35px}
.cta-band h2{color:#edf6f3;font-size:22px;font-weight:600;letter-spacing:-.5px}
.cta-band p{color:#9bb8b5;font-size:12px;line-height:1.7;margin-top:8px;max-width:540px}
.cta-band .button,.cta-band .btn-row{flex-shrink:0}

/* ------------------------------------------------------------------ signal pages */
.signal-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:4px 0 17px}
.signal-filters{display:flex;flex-wrap:wrap;gap:6px}
.filter-button{border:1px solid #28434d;color:#a8c0ca;background:#0a1a22;padding:8px 15px;min-height:34px;border-radius:20px;font-size:10px}
.filter-button:hover{background:#12332e;color:#c7f6e0}
.filter-button.active,.filter-button[aria-pressed="true"]{color:#84edbd;border-color:#39745a;background:#10372b}
.signal-count{color:#8da8b5;font-size:10px}
.signal-page .market-ticker{margin-bottom:18px;height:28px;padding-inline:10px;font-size:9px}
.signal-page .signal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:17px;overflow:visible;padding:0;scroll-snap-type:none}
.signal-page .signal-card{min-height:245px;padding:18px 16px 15px;border-radius:14px;scroll-snap-align:none}
.signal-page .signal-top{flex-wrap:nowrap;margin-bottom:14px;min-height:0}
.signal-page .asset-identity{width:auto;gap:8px}
.signal-page .signal-name{font-size:14px}
.signal-page .coin-icon{width:28px;height:28px;min-width:28px}
.signal-page .trade-tag{margin:0;font-size:9px;padding:4px 6px}
.signal-page .sparkline{height:98px}
.signal-page .chart-stats{font-size:10px;padding-top:9px}
.signal-page .win-rate strong{font-size:31px}
.signal-page .pips strong{font-size:12px}
.signal-page .signal-table{margin:5px 0 7px}
.signal-page .signal-table th,.signal-page .signal-table td{font-size:11px;line-height:1.9}
.signal-page .signal-status{font-size:10px;margin-top:12px;margin-bottom:14px}
.signal-page .trade-button{min-height:34px;font-size:10px}
.signal-page .section-underline{display:none}
.empty-state{text-align:center;padding:35px 20px;border:1px dashed #2c5058;border-radius:12px;color:#afc5ce;font-size:13px;line-height:1.7;background:#081920}

/* ------------------------------------------------------------------ info cards */
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.info-card{border:1px solid var(--page-border);background:var(--page-card);border-radius:13px;padding:21px}
.info-card h2,.info-card h3{color:#e8f2f4;font-size:15px;line-height:1.4;font-weight:600;margin-bottom:10px}
.info-card p,.info-card li{color:#9bb3bd;font-size:12px;line-height:1.85}
.info-card p+p{margin-top:12px}
.info-card a{color:#75e4b6}
.info-card ul{padding-left:17px;margin-bottom:0}
.info-card .eyebrow,.info-card .step-number{margin-bottom:13px;font-size:9px}

/* ------------------------------------------------------------------ performance page */
.performance-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:stretch;gap:18px}
.performance-layout .performance-panel{display:grid;grid-template-columns:minmax(0,1fr);padding:24px;gap:23px}
.performance-layout .performance-panel .section-heading{flex-wrap:wrap;gap:12px;margin-bottom:17px}
.performance-layout .performance-panel h2{font-size:17px;white-space:normal}
.performance-layout .performance-panel select{color:#c8e2d6;border:1px solid #2b5b46;background:#09271f;border-radius:5px;padding:5px 7px;max-width:110px;font-size:10px}
.performance-layout .performance-chart{min-height:185px;display:flex;align-items:center}
.performance-layout .chart-legend{font-size:9px;gap:16px;margin-top:10px}
.performance-layout .chart-legend .chart-unit{font-size:8px}
.performance-layout .performance-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;border-top:1px solid #244f3f;padding:22px 0 0}
.performance-layout .performance-stats h3{font-size:10px;white-space:normal;line-height:1.5;margin-bottom:10px}
.performance-layout .performance-stats strong{font-size:34px}
.performance-layout .stat-trend,.performance-layout .stat-note{font-size:9px;line-height:1.7}
.results-notes{background:#08171f;padding:23px 20px;border:1px solid var(--page-border);border-radius:13px}
.results-notes h2,.results-notes h3{font-size:16px;line-height:1.4;margin-bottom:13px;color:#e8f2f4}
.results-notes p,.results-notes li{color:#9fb7c0;font-size:11px;line-height:1.9}
.results-notes p+p{margin-top:15px}
.results-notes ul{margin:12px 0 0;padding-left:17px}
.results-notes li+li{margin-top:12px}
.results-notes a{display:inline-block;color:#74e6b5;font-size:11px;margin-top:18px}
.monthly-results{margin-top:28px}
.monthly-results h2{font-size:19px;margin-bottom:15px}
.sample-label{display:inline-flex;padding:5px 8px;border:1px solid #2a5144;border-radius:5px;color:#93bda9;background:#0b2921;font-size:9px}
.monthly-results .table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--page-border);border-radius:12px;background:#07151d}
.results-table{width:100%;border-collapse:collapse;text-align:left;font-size:11px;line-height:1.6;font-variant-numeric:tabular-nums}
.results-table th{padding:14px 18px;background:#0c222b;color:#bbd2da;font-size:10px;font-weight:500;white-space:nowrap}
.results-table td{padding:13px 18px;border-top:1px solid #17313b;color:#a9c1cc;white-space:nowrap}
.results-table td:first-child{color:#e0ebee}
.results-table .positive{color:#62dfa8}
.results-table .negative{color:#e97b83}
.results-table td.table-empty,.data-table td.table-empty{padding:18px 10px;text-align:center;color:#8ca1ad}
.performance-chart .chart-empty{margin:auto;padding:24px 0;color:#8ca1ad;font-size:12px}
.results-table tfoot th,.results-table tfoot td{background:#0a1d25;color:#dceaef;border-top:1px solid #24505c;font-weight:600}
.results-table tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ FAQ accordion */
.faq-list{border:1px solid var(--page-border);border-radius:12px;overflow:hidden;margin-top:16px}
.faq-list details{background:#07171f}
.faq-list details+details{border-top:1px solid var(--page-border)}
.faq-list summary{position:relative;cursor:pointer;color:#dcebf0;font-size:12px;line-height:1.7;padding:16px 43px 16px 19px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:19px;top:15px;font-size:19px;color:#65dfac}
.faq-list details[open] summary::after{content:"−"}
.faq-list summary:hover{background:#0b242a}
.faq-list summary:focus-visible{outline:2px solid #5af2bb;outline-offset:-3px}
.faq-list p{color:#a3bac4;font-size:12px;line-height:1.85;padding:0 19px 19px;max-width:770px}
.faq-list a{color:#75e4b6}

/* ------------------------------------------------------------------ contact page */
.contact-layout{display:grid;grid-template-columns:.9fr 1.2fr;align-items:start;gap:25px}
.contact-aside{padding:7px 14px 10px 0}
.contact-aside h2{color:#eef6f8;font-size:23px;line-height:1.3;letter-spacing:-.5px;margin-bottom:13px}
.contact-aside p{color:#9fb7c2;font-size:12px;line-height:1.9}
.contact-aside p+p{margin-top:17px}
.contact-aside .info-card{margin-top:22px}
.contact-aside .info-card h3{font-size:13px}
.contact-form-panel{background:#081b22;border:1px solid #245045;border-radius:15px;padding:27px}
.contact-form-panel h2{font-size:19px;font-weight:600;margin-bottom:19px;color:#eef6f8}
.contact-form-panel .lead-form{gap:16px}
.contact-form-panel .form-field input,.contact-form-panel .form-field select{min-height:44px}
.contact-form-panel .form-field textarea{min-height:120px;line-height:1.7}

/* ------------------------------------------------------------------ responsive */
@media(max-width:1100px){
  .performance-layout{grid-template-columns:minmax(0,1fr) 205px}
  .performance-layout .performance-panel{padding:20px}
  .performance-layout .performance-chart{min-height:160px}
  .summary-strip{gap:18px}
  .summary-stat{padding-left:18px}
  .summary-stat strong{font-size:30px}
}
@media(max-width:990px){
  .signal-page .signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .page-intro{padding-top:28px;margin-bottom:23px}
  .page-intro h1{font-size:33px}
  .overview-grid{gap:14px}
  .overview-card{padding:20px}
  .overview-card h3{font-size:21px}
  .summary-strip{grid-template-columns:1fr 1fr;gap:22px}
  .summary-intro{grid-column:1/-1}
  .summary-stat{padding:0;border:0}
  .summary-stat:last-child{border-left:1px solid #28503f;padding-left:22px}
  .steps-grid{gap:11px}
  .step-card{padding:17px 14px}
  .info-grid{grid-template-columns:1fr;gap:13px}
  .info-card{padding:20px}
  .performance-layout{grid-template-columns:1fr}
  .performance-layout .performance-chart{min-height:180px}
  .results-notes{padding:22px}
  .contact-layout{grid-template-columns:1fr;gap:20px}
  .contact-aside{padding:0}
}
@media(max-width:540px){
  .page-intro{padding:25px 0 23px;margin-bottom:22px}
  .breadcrumb{font-size:9px;margin-bottom:22px}
  .page-intro h1{font-size:clamp(29px,7.7vw,35px)}
  .page-intro p,.page-description{font-size:12px;margin-top:12px}
  .page-content{padding-bottom:28px}
  .home-section{margin-top:25px}
  .home-section .section-heading h2{font-size:18px}
  .section-copy{font-size:11px}
  .overview-grid,.steps-grid{grid-template-columns:1fr;gap:13px}
  .overview-card{padding:21px}
  .overview-card p{max-width:none}
  .summary-strip{padding:21px;margin-top:22px;gap:21px 15px}
  .summary-stat:last-child{padding-left:17px}
  .summary-stat strong{font-size:28px}
  .cta-band{flex-direction:column;align-items:flex-start;gap:18px;padding:23px 21px;margin:24px 0 28px}
  .cta-band h2{font-size:22px}
  .signal-page .signal-grid{grid-template-columns:minmax(0,1fr);gap:15px}
  .signal-page .signal-card{min-height:254px;padding:21px}
  .signal-page .signal-name{font-size:15px}
  .signal-page .sparkline{height:111px}
  .performance-layout .performance-panel{padding:20px 17px}
  .performance-layout .performance-stats{gap:18px;padding-top:20px}
  .performance-layout .performance-stats strong{font-size:31px}
  .results-table th,.results-table td{padding:12px 13px}
  .faq-list summary{font-size:12px;padding-left:17px}
  .faq-list p{padding-inline:17px;font-size:11px}
  .contact-form-panel{padding:22px 19px}
  .contact-aside h2{font-size:22px}
}

/* Closed trades + verified card row under the monthly breakdown. */
.trades-row{margin-top:15px}
.trades-row .trades-panel{margin-top:0}
/* A 640px minimum ran the eight columns off the side of any panel narrower than that — on
   phones, and beside the verified card up to ~1240px — hiding the result behind a scroll.
   The table may shrink now, and in a narrow panel entry and exit give way (and R on a
   phone, where a "Break even" chip needs the room), so pips and the outcome stay in view.
   Sized by the panel, not the screen. */
.trades-panel{container-type:inline-size}
.trades-panel .data-table{min-width:0}
@container(max-width:560px){
  .trades-panel .data-table th,.trades-panel .data-table td{padding-inline:5px}
  .trades-panel .data-table th{white-space:normal}
  .trades-panel .data-table :is(th,td):is(:nth-child(4),:nth-child(5)){display:none}
}
@container(max-width:400px){
  .trades-panel .data-table th,.trades-panel .data-table td{padding-inline:4px}
  .trades-panel .data-table th{letter-spacing:.2px}
  .trades-panel .data-table :is(th,td):nth-child(7){display:none}
}

/* ------------------------------------------------------------------ insights
   Six identical text cards made every outlook look the same. Each call now wears its bias
   (--tone) — on its card, on the "Where we stand" board and on the newest outlook, which
   opens up to show its drivers and its levels as a ladder. The tone colours are theme
   tokens, so the light theme follows without its own rules. */
.tone-bullish{--tone:var(--p-green)}
.tone-bearish{--tone:var(--p-red)}
.tone-neutral{--tone:#5cc2dd}
.bias-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.2px;color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent);border:1px solid color-mix(in srgb,var(--tone) 34%,transparent);white-space:nowrap}
.bias-badge>span{font-size:8px}
.coin-icon.is-plain{border:1px solid var(--p-border-2);background:var(--p-surface-3);color:var(--p-strong);font-size:8px;letter-spacing:0}
.feature-pair .coin-icon.is-plain{font-size:10px}

/* The intro: what is inside (each count opens its tab), and the newest outlook */
.insights-stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:560px;padding:0;margin:22px 0 0}
.insights-stats a{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 13px;border-radius:12px;border:1px solid var(--p-border);background:var(--p-surface-2);transition:transform .2s,border-color .2s}
.insights-stats a:hover{transform:translateY(-2px);border-color:var(--p-border-hot)}
.insights-stats strong{font:700 24px/1 Arial,sans-serif;color:var(--p-strong);letter-spacing:-.5px}
.insights-stats span{font-size:10.5px;line-height:1.35;color:var(--p-text-2)}
.insights-latest{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--p-green-line);background:var(--p-green-bg);color:var(--p-strong);font-size:11.5px;transition:border-color .2s}
.insights-latest:hover{border-color:var(--p-border-hot)}
.insights-latest b{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--p-green)}
.insights-latest-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insights-latest .live-dot{flex:none;margin:0}
.insights-latest .ic{flex:none;width:13px;height:13px}

/* Where we stand: the latest call on each market */
.bias-board{margin-top:26px}
.bias-board-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px}
.bias-board-head h2{font:700 19px Arial,sans-serif;letter-spacing:-.3px;color:var(--p-strong)}
.bias-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.bias-tile{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon pair" "call call" "when when";align-items:center;gap:7px 9px;padding:14px 14px 12px 16px;border-radius:14px;border:1px solid var(--p-border);background:var(--p-card);color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.bias-tile::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tone)}
.bias-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tone) 20%,transparent),transparent 62%)}
.bias-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tone) 55%,var(--p-border));box-shadow:0 10px 24px color-mix(in srgb,var(--tone) 14%,transparent)}
.bias-tile .coin-icon{grid-area:icon}
.bias-pair{grid-area:pair;font:700 14px Arial,sans-serif;letter-spacing:.2px;color:var(--p-strong)}
.bias-call{grid-area:call;display:flex;align-items:center;gap:6px;font:700 16px Arial,sans-serif;color:var(--tone)}
.bias-call>span{font-size:11px}
.bias-when{grid-area:when;font-size:10px;color:var(--p-soft)}

/* The newest outlook, opened up */
#insights-tabs-root{scroll-margin-top:96px}
#outlook-grid .outlook-feature{grid-column:1/-1}
.outlook-feature{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start;padding:26px;border-radius:18px;border:1px solid color-mix(in srgb,var(--tone) 38%,var(--p-border));background:var(--p-feature)}
.outlook-feature::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--tone),transparent 75%)}
.outlook-feature::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--tone) 14%,transparent),transparent 55%)}
.chip-latest{display:inline-flex;align-items:center;gap:6px;color:var(--p-green)}
.chip-latest .live-dot{margin:0}
.feature-pair{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:16px}
.feature-pair .coin-icon{width:30px;height:30px;min-width:30px;font-size:17px}
.feature-pair strong{font:700 18px Arial,sans-serif;letter-spacing:.2px;color:var(--p-strong)}
.feature-pair time{font-size:11px;color:var(--p-soft)}
.outlook-feature h2{font:700 27px/1.2 Arial,sans-serif;letter-spacing:-.6px;margin:12px 0 10px}
.outlook-feature h2 a{color:var(--p-strong);transition:color .2s}
.outlook-feature h2 a:hover{color:var(--tone)}
.feature-copy>p{max-width:640px;font-size:13px;line-height:1.75;color:var(--p-text)}
.feature-drivers{margin:18px 0 20px}
.feature-drivers h3,.feature-levels h3{margin-bottom:9px;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--p-soft)}
.feature-drivers ul{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.feature-drivers li{position:relative;padding-left:19px;font-size:12px;line-height:1.6;color:var(--p-text)}
.feature-drivers li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 22%,transparent)}
.feature-levels{padding:18px;border-radius:14px;border:1px solid var(--p-border);background:var(--p-surface-2)}
.level-ladder{display:grid;gap:6px;list-style:none;padding:0;margin:0 0 12px}
.rung{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;border:1px solid transparent;font-size:11px}
.rung span{min-width:22px;font-weight:700;letter-spacing:.5px}
.rung strong{margin-left:auto;font:700 15px Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--p-strong)}
.rung.is-res{color:var(--p-red);background:color-mix(in srgb,var(--p-red) 10%,transparent);border-color:color-mix(in srgb,var(--p-red) 26%,transparent)}
.rung.is-sup{color:var(--p-green);background:color-mix(in srgb,var(--p-green) 10%,transparent);border-color:color-mix(in srgb,var(--p-green) 26%,transparent)}
.rung.is-zone{justify-content:center;padding:6px;border:1px dashed var(--p-border-2);color:var(--p-soft);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--p-soft) 9%,transparent) 6px 12px)}
.case{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--p-surface-3);font-size:11.5px;line-height:1.6;color:var(--p-text)}
.case b{display:block;margin-bottom:3px;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase}
.case.is-bull b{color:var(--p-green)}
.case.is-bear b{color:var(--p-red)}

/* Outlook cards (the hub, the home page and "more outlooks") */
.outlook-card{position:relative;overflow:hidden}
.outlook-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--tone)}
a.outlook-card:hover{border-color:color-mix(in srgb,var(--tone) 55%,var(--p-border));box-shadow:0 10px 26px color-mix(in srgb,var(--tone) 12%,transparent)}
.outlook-card-top{display:flex;align-items:center;gap:8px;margin-top:2px}
.outlook-pair{font:700 13px Arial,sans-serif;letter-spacing:.3px;color:var(--p-strong)}
.outlook-card-top .bias-badge{margin-left:auto}
.outlook-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.outlook-levels{display:flex;flex-wrap:wrap;gap:6px}
.lvl{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;background:var(--p-surface-3);font-size:11px;font-variant-numeric:tabular-nums;color:var(--p-text)}
.lvl b{font-size:9.5px}
.lvl.is-res b{color:var(--p-red)}
.lvl.is-sup b{color:var(--p-green)}
.outlook-card .post-foot{margin-top:auto}
.outlook-card .post-foot>span:first-child{display:inline-flex;align-items:center;gap:5px}
.outlook-card .post-foot .ic{width:12px;height:12px}

/* Guide cards: how demanding each one is, at a glance */
.guide-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.guide-level{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--p-strong)}
.level-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.level-bars i{width:4px;border-radius:1px;background:var(--p-border-2)}
.level-bars i:nth-child(1){height:5px}
.level-bars i:nth-child(2){height:8px}
.level-bars i:nth-child(3){height:12px}
.level-beginner .level-bars i:nth-child(1),.level-intermediate .level-bars i:nth-child(-n+2),.level-advanced .level-bars i{background:var(--p-green)}
.guide-card .post-foot{margin-top:auto}

/* Glossary: a term of the day, then a few more */
.term-spotlight{display:grid;justify-items:start;gap:8px;margin-bottom:12px;padding:22px 24px;border-radius:16px;border:1px solid var(--p-green-line);background:var(--p-feature);color:inherit;transition:transform .2s,border-color .2s}
.term-spotlight:hover{transform:translateY(-2px);border-color:var(--p-border-hot)}
.term-spotlight .eyebrow{margin:0}
.term-spotlight strong{font:700 28px/1.1 Arial,sans-serif;letter-spacing:-.6px;color:var(--p-strong)}
.term-spotlight-def{max-width:760px;font-size:13px;line-height:1.7;color:var(--p-text)}
.term-spotlight .go{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--p-green)}
.term-spotlight .go .ic{width:13px;height:13px}
.glossary-panel .term{padding:12px 14px;border-radius:12px;border:1px solid var(--p-border);background:var(--p-surface-2)}
.glossary-panel .btn-row{margin-top:16px}

/* Downloads and the closing call to action */
.download-card{transition:transform .2s,border-color .2s}
.download-card:hover{transform:translateY(-3px);border-color:var(--p-border-hot)}
#insights-list>.article-cta{margin-top:26px}

@media(max-width:990px){
  .outlook-feature{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:540px){
  .insights-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bias-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bias-tile{padding:12px 12px 11px 14px}
  .outlook-feature{padding:18px;border-radius:16px}
  .outlook-feature h2{font-size:21px}
  .term-spotlight{padding:18px}
  .term-spotlight strong{font-size:23px}
}

/* ------------------------------------------------------------------ contact
   The page now says what to expect before asking for anything (three promises, then what
   happens after you write), takes the topic as cards, and only shows the direct channels the
   admin has filled in. Theme tokens throughout, so the light theme follows on its own. */
.contact-promises{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:22px 0 0}
.contact-promises li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:12px;border:1px solid var(--p-border);background:var(--p-surface-2)}
.contact-promises .ic{flex:none;width:32px;height:32px;padding:7px;border-radius:9px;background:var(--p-green-bg);color:var(--p-green)}
.contact-promises strong{display:block;font-size:12.5px;color:var(--p-strong)}
.contact-promises div span{display:block;font-size:10.5px;color:var(--p-text-2)}

.contact-steps{display:grid;list-style:none;padding:0;margin:20px 0 24px}
.contact-steps li{position:relative;display:flex;gap:14px;padding-bottom:18px}
.contact-steps li:last-child{padding-bottom:0}
.contact-steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;border-radius:1px;background:linear-gradient(var(--p-green-line),transparent)}
.contact-step-no{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gradient);color:var(--p-on-accent);font:700 13px Arial,sans-serif;box-shadow:0 0 16px color-mix(in srgb,var(--p-green) 24%,transparent)}
.contact-steps strong{display:block;margin-top:5px;font-size:13px;color:var(--p-strong)}
.contact-steps div span{display:block;font-size:11.5px;line-height:1.6;color:var(--p-text-2)}
.contact-side-title{margin:2px 0 0;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--p-soft)}
.channel-go{margin-left:auto;font-size:13px;color:var(--p-green)}

.contact-form-panel{position:relative;overflow:hidden}
.contact-form-panel::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gradient)}
.topic-picker{min-width:0;border:0;padding:0;margin:0}
.topic-picker legend{padding:0;margin-bottom:10px;font-size:12px;font-weight:600;color:var(--p-strong)}
.topic-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.topic{position:relative;display:block;cursor:pointer}
.topic input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.topic-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;height:100%;padding:12px 11px;border-radius:12px;border:1px solid var(--p-border-2);background:var(--p-surface-2);transition:transform .2s,border-color .2s,background .2s}
.topic-card .ic{width:22px;height:22px;margin-bottom:5px;color:var(--p-text-2);transition:color .2s}
.topic-card strong{font-size:12px;color:var(--p-strong)}
.topic-card small{font-size:10px;line-height:1.4;color:var(--p-soft)}
.topic:hover .topic-card{transform:translateY(-2px);border-color:var(--p-border-hot)}
.topic input:checked+.topic-card{border-color:var(--p-green);background:color-mix(in srgb,var(--p-green) 10%,var(--p-surface-2));box-shadow:inset 0 0 0 1px var(--p-green)}
.topic input:checked+.topic-card .ic{color:var(--p-green)}
.topic input:focus-visible+.topic-card{outline:2px solid var(--p-green);outline-offset:2px}
.topic input:disabled,.topic input:disabled+.topic-card{cursor:default}
.lead-form.is-done .topic:hover .topic-card{transform:none}
/* "optional" sits at the end of its label's line instead of taking a grid row of its own,
   which pushed that field below its neighbour (every lead form). */
.form-field{position:relative}
.form-field>.optional{position:absolute;top:1px;right:0;margin:0}
.char-count{display:block;margin-top:5px;text-align:right;font-size:10px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--p-soft)}
.char-count.is-near{color:var(--p-red)}
.contact-form-panel .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.form-promise{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--p-text-2)}
.form-promise .ic{width:14px;height:14px;color:var(--p-green)}

.contact-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.contact-shortcut{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:18px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s}
.contact-shortcut:hover{transform:translateY(-3px);border-color:var(--p-border-hot)}
.contact-shortcut>.ic{width:34px;height:34px;padding:8px;margin-bottom:4px;border-radius:10px;background:var(--p-green-bg);color:var(--p-green)}
.contact-shortcut strong{font:700 14px/1.3 Arial,sans-serif;color:var(--p-strong)}
.contact-shortcut>span{font-size:11.5px;line-height:1.6;color:var(--p-text-2)}
.contact-shortcut em{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:6px;font-size:11.5px;font-style:normal;font-weight:600;color:var(--p-green)}
.contact-shortcut em .ic{width:13px;height:13px}

@media(max-width:990px){
  .topic-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
  .contact-promises li{flex:1 1 100%}
  .topic-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-options .topic:last-child{grid-column:1/-1}
  .contact-shortcuts{grid-template-columns:minmax(0,1fr)}
}