@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --text: #f2f1ee;
  --muted: #a7a7ae;
  --red: #ef625a;
  --button-bg: #f55e50;
  --button-hover: #ff7768;
  --button-border: #ff9285;
  --line: #ffffff16;
  --display: 'Space Grotesk', sans-serif;
  --body: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.7 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: #a63f39; color: white; }
img { max-width: 100%; }
.page-width { width: min(1152px, calc(100% - 96px)); margin-inline: auto; }
.landing { min-height: 100svh; position: relative; isolation: isolate; padding-top: 24px; }
.header { min-height: 60px; padding: 7px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 10px; background: #0b0c0ecc; }
.brand { display: flex; align-items: center; gap: 14px; font: 700 28px var(--display); letter-spacing: -1px; }
.brand-logo { position: relative; display: block; flex-shrink: 0; width: 35.36px; height: 28.73px; }
.brand .brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; animation: brand-logo-reveal 2.8s ease-out 1s both; }
.brand-logo-laser { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 2px #ef625acc); animation: brand-logo-glow 2.8s linear 1s both; }
.brand-logo-outline path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: brand-logo-trace 1.85s cubic-bezier(.35,0,.65,1) 1.2s both; }
.brand-logo-beam path { stroke-dasharray: .045 .955; stroke-dashoffset: .045; animation: brand-logo-beam 1.85s cubic-bezier(.35,0,.65,1) 1.2s both; }
.brand-logo-beam { animation: brand-logo-beam-fade 2.8s linear 1s both; }
@keyframes brand-logo-trace { to { stroke-dashoffset: 0; } }
@keyframes brand-logo-beam { to { stroke-dashoffset: -.955; } }
@keyframes brand-logo-beam-fade { 0%,7% { opacity: 0; } 10%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes brand-logo-glow { 0%,5% { opacity: 0; } 10%,73% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brand-logo-reveal { 0%,73% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
.brand-light { font-weight: 400; }
.pro { display: inline-block; margin-left: 10px; padding: 4px 6px; border: 1px solid #ef625a55; border-radius: 4px; color: var(--red); font: 600 11px var(--body); letter-spacing: 1px; vertical-align: middle; }
.availability, .eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.6; }
.availability { color: #c3b6b5; }
.eyebrow { color: var(--red); }
.status-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px #ef625a66; }
.hero-copy { text-align: center; padding: 38px 0 28px; }
.hero-copy > .eyebrow { justify-content: center; }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(60px, 6vw, 88px); font-weight: 700; line-height: 1.03; letter-spacing: -4.5px; margin: 22px 0; }
h1 span, h2 span { color: var(--red); }
.hero-description { color: #bcb8c0; font-size: 17px; line-height: 1.65; margin: 0 auto 26px; max-width: 760px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid var(--button-border); border-radius: 6px; background: var(--button-bg); padding: 14px 24px; font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; box-shadow: 0 0 0 4px #f55e5013, 0 8px 32px #f55e5016; transition: background .2s, transform .2s; }
.primary-button svg { width: 25px; height: 22px; }
.primary-button > span { font-size: 24px; line-height: 1; margin-left: 12px; }
.primary-button:hover { background: var(--button-hover); transform: translateY(-2px); }
.primary-button:focus-visible { outline: 3px solid white; outline-offset: 6px; }
.button-note { color: #949098; font-size: 13px; margin: 15px 0 0; }
.button-note span { color: var(--red); margin: 0 8px; }
.product-preview { position: relative; margin-top: 20px; margin-bottom: 0; }
.product-preview > img, .chart-slider { display: block; width: 100%; height: auto; border: 1px solid #ef625a66; border-radius: 12px; box-shadow: 0 24px 64px #0006; }
figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 14px 3px; color: #9c9297; font-size: 11px; letter-spacing: 1.1px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 0 58px; text-align: center; border-bottom: 0; }
.metrics > div + div { border-left: 0; }
.metrics strong { font: 500 45px var(--display); letter-spacing: -2px; }
.metrics strong span { font-size: 21px; letter-spacing: -.5px; }
.metrics p { color: var(--muted); font-size: 15px; margin: 9px 0 0; }
.beta-section { display: grid; grid-template-columns: minmax(0, 1fr) 452px; align-items: center; gap: clamp(40px, 8vw, 120px); padding-top: 110px; padding-bottom: 110px; }
h2 { font-size: clamp(42px, 4vw, 58px); font-weight: 700; line-height: 1.12; letter-spacing: -2.4px; margin: 20px 0 28px; }
.beta-copy > p { color: var(--muted); font-size: 19px; margin: 0 0 22px; }
.beta-copy > .lead { font-size: 23px; color: #ded9dc; line-height: 1.5; }
.beta-features { padding: 8px 0 20px; margin: 0; list-style: none; }
.beta-features li { display: flex; align-items: baseline; gap: 13px; font-size: 17px; margin: 14px 0; color: #d5ced1; }
.beta-features li::before { content: '↗'; color: var(--red); }
.activation-note { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 16px; }
.activation-note p { margin: 10px 0 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.activation-note strong { font-weight: 600; color: #ddd7da; }
.checkout { width: 100%; min-width: 0; border: 1px solid #ef625a32; border-radius: 14px; padding: 22px 20px 18px; background: linear-gradient(145deg, #201619, #111114 40%); box-shadow: 0 24px 80px #0003; }
.checkout-heading { padding: 0 4px 20px; }
.checkout-heading .eyebrow { font-size: 11px; }
.checkout h3 { display: flex; justify-content: space-between; align-items: center; font-size: 33px; letter-spacing: -1px; line-height: 1.2; font-weight: 700; margin: 10px 0; }
.checkout h3 span { color: var(--red); font-size: 27px; }
.checkout-heading p { font-size: 16px; color: var(--muted); margin: 0; }
.payment-frame { width: 100%; height: 696px; margin-inline: auto; overflow: hidden; border-radius: 8px; background: #101014; }
.payment-frame iframe { display: block; width: 100%; height: 696px; border: 0; transform-origin: top left; color-scheme: light; }
.checkout-note { margin: 16px 0 0; text-align: center; color: #a59aa2; font-size: 12px; line-height: 1.7; }
.payment-instruction { display: flex; gap: 10px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #ef625a40; color: #d5ced1; font-size: 15px; line-height: 1.7; }
.instruction-asterisk { color: var(--red); font-size: 25px; line-height: 1.3; }
.payment-instruction strong { color: var(--text); font-weight: 600; }
.activation-note .payment-instruction { margin: 0; padding: 0; border: 0; color: #d5ced1; }
.engine { border-top: 0; }
.section-intro { padding: 96px 0 80px; text-align: center; max-width: 780px; margin: auto; }
.section-intro > .eyebrow { justify-content: center; }
.section-intro h2 { margin-bottom: 24px; }
.section-intro p { color: var(--muted); font-size: 20px; line-height: 1.7; max-width: 660px; margin: auto; }
.editorial-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 80px; border-top: 1px solid var(--line); padding: 66px 0; }
.editorial-heading h3 { font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -1.3px; margin: 18px 0 0; }
.editorial-copy { min-width: 0; }
.editorial-copy p, .editorial-copy li { color: #b2adb5; font-size: 20px; line-height: 1.8; }
.editorial-copy p { margin: 0 0 22px; }
.editorial-copy > :last-child { margin-bottom: 0; }
.editorial-copy h4 { font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.4px; margin: 34px 0 14px; }
.editorial-copy h4:first-child { margin-top: 0; }
.editorial-copy ul, .editorial-copy ol { padding-left: 24px; margin: 18px 0 28px; }
.editorial-copy li { padding-left: 6px; margin: 10px 0; }
.editorial-copy li::marker { color: var(--red); }
.editorial-copy strong { color: #e2dcdf; font-weight: 600; }
.fib-levels { margin-top: 40px; max-width: 310px; }
.fib-levels > span { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #ef625a55; color: #dca08a; padding: 9px 0; font: 14px/1.7 monospace; }
.fib-levels i { font: normal 10px var(--body); letter-spacing: 1px; color: var(--red); }
.alert-example { padding: 18px 0 18px 22px; border-left: 2px solid var(--red); margin: 26px 0; background: linear-gradient(90deg, #ef625a08, transparent); }
.alert-example > span { display: block; color: var(--red); font-size: 10px; letter-spacing: 1.6px; margin-bottom: 9px; }
.alert-example code { font-size: 15px; line-height: 1.7; color: #e2d7da; overflow-wrap: anywhere; }
.risk-section { padding: 65px 0 80px; border-top: 1px solid var(--line); max-width: 940px; margin: auto; }
.risk-section h3 { font-size: 36px; line-height: 1.25; font-weight: 700; letter-spacing: -1px; margin: 16px 0 24px; }
.risk-section p { font-size: 17px; line-height: 1.85; color: var(--muted); margin: 0 0 20px; }
footer { border-top: 1px solid var(--line); padding: 30px 0 36px; color: #969098; font-size: 13px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: #ddd7da; font: 500 21px var(--display); letter-spacing: -.6px; }
.footer-brand img { object-fit: contain; }
.footer-identity { min-width:0; }
.footer-credit { margin:8px 0 0; font-size:12px; line-height:1.65; }
.footer-credit a { color:#b9a6b4; text-decoration:none; }
.footer-credit a:hover,.footer-credit a:focus-visible { color:var(--red); text-decoration:underline; text-underline-offset:4px; }
.footer-brand small { font: 10px var(--body); letter-spacing: 1px; color: var(--red); margin-left: 6px; }
footer > p { font-size: 12px; margin: 20px 0 0; }
.footer-links { display:flex; gap:12px 24px; flex-wrap:wrap; margin-top:20px; font-size:13px; }
.footer-links a { color:#b9a6b4; text-decoration:none; }
.footer-links a:hover { color:var(--red); text-decoration:underline; text-underline-offset:4px; }
@media (min-width: 1500px) { .hero-copy { padding-top: 48px; } }
@media (max-width: 1100px) {
  .page-width { width: calc(100% - 64px); }
  .beta-section { grid-template-columns: minmax(0, 1fr) 422px; gap: 38px; }
  .checkout { padding-inline: 14px; }
  .editorial-row { gap: 45px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
  .editorial-heading h3 { font-size: 31px; }
  .metrics strong { font-size: 38px; }
  .metrics strong span { font-size: 19px; }
}
@media (max-width: 850px) {
  .landing { min-height: auto; }
  .hero-copy { padding-top: 34px; }
  h1 { font-size: 68px; letter-spacing: -3.5px; }
  .beta-section { grid-template-columns: minmax(0, 1fr); gap: 42px; padding-block: 75px; }
  .beta-copy { max-width: 620px; }
  .checkout { max-width: 452px; padding-inline: 20px; margin-inline: auto; }
  .editorial-row { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 45px 0; }
  .editorial-heading h3 { font-size: 34px; }
  .editorial-heading h3 br { display: none; }
  .fib-levels { display: none; }
  .section-intro { padding: 68px 0; }
  .metrics { padding: 0 0 38px; }
  .metrics strong { font-size: 34px; }
  .metrics strong span { display: block; font-size: 17px; letter-spacing: 0; margin-top: 3px; }
  .metrics p { font-size: 13px; }
  figcaption { font-size: 9px; letter-spacing: .6px; }
}
@media (max-width: 600px) {
  .page-width { width: calc(100% - 40px); }
  .landing { padding-top: 16px; }
  .header { min-height: 54px; padding: 7px 16px; gap: 14px; flex-wrap: wrap; }
  .brand { font-size: 23px; gap: 10px; }
  .brand-logo { width: 30.94px; height: 25.415px; }
  .pro { font-size: 9px; margin-left: 7px; }
  .availability { font-size: 10px; letter-spacing: 1px; }
  .hero-copy { padding: 28px 0 20px; }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 1px; }
  h1 { font-size: clamp(43px, 10.7vw, 62px); letter-spacing: -2.4px; line-height: 1.08; margin: 20px 0; }
  .hero-description { font-size: 15px; line-height: 1.65; margin-bottom: 25px; }
  .desktop-break { display: none; }
  .primary-button { font-size: 16px; gap: 10px; padding: 14px 16px; }
  .primary-button > span { margin-left: 5px; }
  .button-note { font-size: 12px; }
  .product-preview { margin-top: 15px; }
  .product-preview > img, .chart-slider { border-radius: 7px; }
  figcaption { font-size: 9px; line-height: 1.7; padding-block: 12px; }
  figcaption span:last-child { display: none; }
  .metrics { gap: 5px; padding-block: 0 28px; }
  .metrics strong { font-size: clamp(16px, 4.5vw, 30px); letter-spacing: -1px; }
  .metrics strong span { font-size: 13px; margin-top: 6px; }
  .metrics p { font-size: 11px; line-height: 1.5; padding: 0 5px; }
  .beta-section { padding-block: 58px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.2px; }
  h2 { font-size: 40px; letter-spacing: -1.8px; }
  .beta-copy > .lead { font-size: 21px; }
  .beta-copy > p { font-size: 18px; }
  .beta-features li { font-size: 16px; }
  .checkout { padding: 20px 14px 16px; }
  .checkout h3 { font-size: 30px; }
  .checkout-note { font-size: 12px; }
  .section-intro { padding-block: 55px; }
  .section-intro p { font-size: 19px; }
  .editorial-heading h3 { font-size: 31px; }
  .editorial-copy p, .editorial-copy li { font-size: 19px; line-height: 1.8; }
  .editorial-copy h4 { font-size: 22px; }
  .alert-example { padding-left: 16px; }
  .alert-example code { font-size: 14px; }
  .risk-section { padding-block: 45px; }
  .risk-section h3 { font-size: 31px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 360px) {
  .header { padding-inline: 12px; }
  .brand { font-size: 21px; }
  .brand-logo { width: 28.73px; height: 23.205px; }
  .primary-button { font-size: 14px; }
  .primary-button svg { width: 21px; }
  h2 { font-size: 35px; }
  .checkout h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .primary-button { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .brand .brand-logo img { animation: none; opacity: 1; transform: none; }
  .brand-logo-laser, .brand-logo-outline path, .brand-logo-beam, .brand-logo-beam path { animation: none; }
  .brand-logo-laser { display: none; }
}

/* Compact hero typography matches the HiddenTrades wordmark. */
#hero-title { font-size: clamp(42px, 4.5vw, 66px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; margin: 0 0 10px; }

/* Diagonal light sweep for the TradingView call to action. */
.tradingview-button, .tradingview-button:link, .tradingview-button:visited, .tradingview-button:hover, .tradingview-button:focus, .tradingview-button:active { color: #fff; }
.tradingview-button { position: relative; isolation: isolate; overflow: hidden; }
.tradingview-button > span { position: relative; z-index: 1; }
.tradingview-button .tradingview-button-label { font-size: inherit; line-height: inherit; margin-left: 0; }
.tradingview-button::before { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; z-index: 0; pointer-events: none; background: linear-gradient(45deg, transparent 0%, transparent calc(50% - 25px), rgba(255,255,255,.25) 50%, transparent calc(50% + 25px), transparent 100%); opacity: .45; transform-origin: center; animation: tradingview-shimmer 2.5s linear infinite; }
@keyframes tradingview-shimmer { from { transform: translate(-50%, -50%); } to { transform: translate(50%, 50%); } }
@media (prefers-reduced-motion: reduce) {
  .tradingview-button::before { animation: none; display: none; }
  .tradingview-button:hover { transform: none; }
}

/* Let the lower half of the orange headline disappear into the page. */
#hero-title > span { display: inline-block; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 90%); mask-image: linear-gradient(to bottom, #000 40%, transparent 90%); }
@media (forced-colors: active) { #hero-title > span { -webkit-mask-image: none; mask-image: none; } }

/* A compact copy of the hero CTA fits inside the existing header. */
.header-tradingview-button { flex-shrink: 0; padding: 6px 12px; gap: 8px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.header-tradingview-button > span[aria-hidden] { font-size: 18px; line-height: 1; margin-left: 4px; }
@media (max-width: 600px) {
  .header { row-gap: 6px; }
  .header-tradingview-button { margin-left: auto; padding: 3px 10px; font-size: 12px; line-height: 16px; }
  .header-tradingview-button > span[aria-hidden] { font-size: 16px; }
}

/* One stable chart frame; images blend without arrows or pagination dots. */
.chart-slider { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.chart-slider > .chart-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.chart-slider > .chart-slide.is-active { opacity: 1; z-index: 1; }
.chart-slider:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .chart-slider > .chart-slide { transition: none; } }

.tradingview-button .access-button-arrow { display: block; width: 22px; height: 22px; }

/* Halve the text-to-arrow spacing in the main access button. */
.hero-copy .primary-button { gap: 7px; }
.hero-copy .primary-button > span[aria-hidden] { margin-left: 6px; }
@media (max-width: 600px) {
  .hero-copy .primary-button { gap: 5px; }
  .hero-copy .primary-button > span[aria-hidden] { margin-left: 2.5px; }
}

/* The access button straddles the chart frame; its lower third sits inside. */
.hero-copy { padding-bottom: 0; }
.hero-copy .primary-button { display: flex; position: relative; z-index: 2; width: max-content; padding-block: 10px; margin: 0 auto calc((1.7em + 22px) / -3); }
.product-preview { margin-top: 0; }
.chart-slider { -webkit-mask-image: linear-gradient(to bottom, #000 28%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.55) 77%, rgba(0,0,0,.3) 88%, rgba(0,0,0,.08) 96%, transparent 100%); mask-image: linear-gradient(to bottom, #000 28%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.55) 77%, rgba(0,0,0,.3) 88%, rgba(0,0,0,.08) 96%, transparent 100%); }
@media (forced-colors: active) { .chart-slider { -webkit-mask-image: none; mask-image: none; } }

.hero-copy .primary-button { padding-inline: 33.6px; }
@media (max-width: 600px) { .hero-copy .primary-button { padding-inline: 22.4px; } }


/* Keep the header link quieter than the main access call to action. */
.header-tradingview-button, .header-tradingview-button:hover, .header-tradingview-button:focus, .header-tradingview-button:active { background: transparent; border-color: var(--button-border); box-shadow: none; font-weight: 500; }
.header-tradingview-button { transition: border-color .2s; }
.header-tradingview-button:hover { border-color: var(--button-hover); transform: none; }
.header-tradingview-button::before { display: none; animation: none; }

.header-tradingview-button > span[aria-hidden] { color: var(--button-bg); }

/* Restore the warm halo above the chart, without any glow underneath it. */
.product-preview::before { content: ''; position: absolute; z-index: -1; left: -3%; right: -3%; top: -154px; height: 154px; background: radial-gradient(ellipse at 50% 100%, #d4422d2e 0%, #b42f251a 45%, transparent 75%); pointer-events: none; }

/* Two-line feature copy stays readable in the existing four-column row. */
.metrics-copy strong { display: block; font-size: 26px; line-height: 1.3; letter-spacing: -.6px; }
@media (max-width: 850px) { .metrics-copy strong { min-height: 2.6em; font-size: 22px; } }
@media (max-width: 600px) {
  .metrics-copy strong { font-size: 14px; letter-spacing: -.3px; }
  .metrics-copy p { padding-inline: 0; font-size: 10px; }
}

/* HT Pro feature overview. */
.engine .section-intro { padding:44px 0 42px; }
.engine .section-intro h2 { margin-bottom:0; }
.engine-title-clarity { display:inline-block; color:var(--red); -webkit-mask-image:none; mask-image:none; }
@supports (background-clip:text) or (-webkit-background-clip:text) { .engine-title-clarity { background:linear-gradient(to bottom,var(--red) 0%,var(--red) 30%,#ff947c 62%,#ffc29a 88%,#ffc29a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } }
.engine-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.engine-feature-card { min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid #ef625a2a; border-radius:20px; background:linear-gradient(145deg,#171216 0%,#0d0d10 70%); box-shadow:inset 0 1px 0 #ffffff04; }
.engine-feature-heading { display:flex; align-items:center; gap:16px; }
.engine-feature-icon { flex:0 0 50px; width:50px; height:50px; display:grid; place-items:center; color:var(--red); border:1px solid #ef625a35; border-radius:11px; background:#ef625a08; }
.engine-feature-icon svg { width:26px; height:26px; }
.engine-feature-heading h3 { margin:0; color:#f4eff2; font-family:var(--display); font-size:25px; font-weight:700; line-height:1.25; letter-spacing:-.65px; }
.engine-feature-card > p { color:#b6aab2; font-size:16px; line-height:1.75; margin:18px 0 24px; }
.engine-feature-preview { margin-top:auto; overflow:hidden; border:1px solid #ffffff0c; border-radius:12px; aspect-ratio:16 / 9; background:#090a0d; }
.engine-feature-preview img { width:100%; height:100%; display:block; object-fit:contain; }
.engine-features + .editorial-row { border-top:0; padding-top:72px; }
@media(max-width:850px) { .engine-feature-card { padding:22px; } .engine-feature-heading { gap:12px; } .engine-feature-icon { flex-basis:44px; width:44px; height:44px; } .engine-feature-heading h3 { font-size:21px; } .engine-feature-card > p { font-size:15px; } }
@media(max-width:700px) { .engine-features { grid-template-columns:minmax(0,1fr); gap:20px; } .engine .section-intro { padding:29px 0 32px; } .engine-feature-card { padding:22px; border-radius:17px; } .engine-feature-heading h3 { font-size:22px; } .engine-feature-card > p { margin-top:16px; } .engine-features + .editorial-row { padding-top:52px; } }
@media(max-width:360px) { .engine-feature-card { padding:18px; } .engine-feature-heading { gap:10px; } .engine-feature-heading h3 { font-size:20px; } }
@media(forced-colors:active) { .engine-title-clarity { background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; -webkit-mask-image:none; mask-image:none; } .engine-feature-card,.engine-feature-icon { border-color:CanvasText; } }

/* Header navigation with a compact mobile disclosure menu. */
.header { position:relative; z-index:10; }
.header-nav { display:flex; align-items:center; gap:24px; margin-left:auto; }
.header .header-account-link { margin-left:0; font-size:13px; font-weight:500; text-decoration:none; color:#d0c3cb; }
.header-guide-link { color:#d0c3cb; font:500 13px/1.4 var(--body); text-decoration:none; white-space:nowrap; }
.header-guide-link:hover,.header .header-account-link:hover { color:#fff; text-decoration:none; }
.header-nav a:focus-visible { outline:2px solid var(--red); outline-offset:5px; border-radius:4px; }
.header-menu-toggle { display:none; }
@media(max-width:850px) {
  .header { flex-wrap:wrap; gap:12px; }
  .header .brand { white-space:nowrap; }
  .header-nav { width:100%; margin-left:0; justify-content:flex-start; flex-wrap:wrap; gap:14px; padding:10px 0 4px; }
  .header[data-menu-ready] { flex-wrap:nowrap; }
  .header[data-menu-ready] .header-nav { display:none; position:absolute; left:-1px; right:-1px; top:calc(100% + 9px); width:auto; margin:0; padding:10px; flex-direction:column; align-items:stretch; gap:4px; border:1px solid #ef625a35; border-radius:11px; background:linear-gradient(145deg,#1b1418,#101013); box-shadow:0 16px 36px #0006; }
  .header[data-menu-open="true"] .header-nav { display:flex; animation:header-menu-reveal .16s ease-out; }
  .header[data-menu-ready] .header-menu-toggle { display:grid; place-items:center; position:relative; margin-left:auto; flex:0 0 40px; width:40px; height:40px; padding:0; color:#f7c0af; border:1px solid #ef625a50; border-radius:8px; background:#ef625a08; cursor:pointer; }
  .header-menu-toggle:hover { border-color:#ff9285; background:#ef625a12; }
  .header-menu-toggle:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
  .header-menu-toggle span { position:absolute; width:18px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .18s ease,width .18s ease; }
  .header-menu-toggle span:first-child { transform:translateY(-4px); }
  .header-menu-toggle span:last-child { width:12px; transform:translate(3px,4px); }
  .header-menu-toggle[aria-expanded="true"] span:first-child { transform:rotate(45deg); }
  .header-menu-toggle[aria-expanded="true"] span:last-child { width:18px; transform:rotate(-45deg); }
  .header[data-menu-ready] .header-nav > a { display:flex; align-items:center; min-height:44px; margin:0; padding:11px 14px; border-radius:6px; font-size:14px; line-height:1.4; }
  .header[data-menu-ready] .header-nav > a:not(.header-tradingview-button):hover { background:#ef625a0b; }
  .header[data-menu-ready] .header-tradingview-button { margin-top:4px; justify-content:space-between; padding:10px 14px; }
  .header[data-menu-ready] .header-tradingview-button > span[aria-hidden] { margin-left:8px; }
}
@keyframes header-menu-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .header[data-menu-ready] { padding-inline:12px; } }
@media(max-width:360px) { .header[data-menu-ready] { gap:8px; padding-inline:10px; } .header[data-menu-ready] .brand { font-size:20px; gap:8px; } }
@media(prefers-reduced-motion:reduce) { .header[data-menu-open="true"] .header-nav { animation:none; } .header-menu-toggle span { transition:none; } }
@media(forced-colors:active) { .header-menu-toggle,.header-nav { border-color:CanvasText; } .header-menu-toggle span { background:ButtonText; } }

.header[data-menu-ready] { container-type:inline-size; }
@container(max-width:300px) { .header .brand { font-size:20px; gap:8px; } .header .brand-logo { width:28.73px; height:23.205px; } }