/*
 * Blockstudy landing page. Every colour, size, radius and duration is a token from
 * tokens.css (generated from the app's tokens). tests/site.test.ts fails on raw values here.
 * Breakpoints match the app's layout tokens: medium 768, wide 1024.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--layout-nav) + var(--space-base)); }
body {
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-track);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
ul, ol { list-style: none; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--border-focus) solid var(--c-focus-ring); outline-offset: var(--border-focus-offset); border-radius: var(--radius-xs); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }

.visually-hidden { position: absolute; width: var(--border-hairline); height: var(--border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-base); top: calc(-1 * var(--layout-nav)); padding: var(--space-sm) var(--space-base); background: var(--c-primary); color: var(--c-primary-on); border-radius: var(--radius-pill); z-index: 3; }
.skip:focus { top: var(--space-sm); }

.wrap { max-width: calc(var(--layout-content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--c-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ── type roles ─────────────────────────────────────────── */
.t-hero { font-size: var(--type-hero-size); line-height: var(--type-hero-line); letter-spacing: var(--type-hero-track); font-weight: var(--type-hero-weight); text-wrap: balance; }
.t-section { font-size: var(--type-section-size); line-height: var(--type-section-line); letter-spacing: var(--type-section-track); font-weight: var(--type-section-weight); text-wrap: balance; }
.t-heading { font-size: var(--type-heading-size); line-height: var(--type-heading-line); letter-spacing: var(--type-heading-track); font-weight: var(--type-heading-weight); }
.t-lead { font-size: var(--type-lead-size); line-height: var(--type-lead-line); }
.t-body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.t-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-line); }
.t-tag { font-size: var(--type-tag-size); line-height: var(--type-tag-line); letter-spacing: var(--type-tag-track); font-weight: var(--type-tag-weight); }
.t-label { font-size: var(--type-label-size); line-height: var(--type-label-line); letter-spacing: var(--type-label-track); font-weight: var(--type-label-weight); text-transform: uppercase; color: var(--c-muted); }

/* ── nav ─────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 2; color: var(--c-text); background: color-mix(in srgb, var(--c-ground) 86%, transparent); backdrop-filter: saturate(1.4) blur(var(--space-base)); border-bottom: var(--border-hairline) solid var(--c-stroke-subtle); }
.nav-row { display: flex; align-items: center; gap: var(--space-xl); height: var(--layout-nav); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--c-text); font-weight: var(--type-heading-weight); font-size: var(--type-heading-size); letter-spacing: var(--type-heading-track); }
.brand:hover { text-decoration: none; }
.brand img { height: var(--space-2xl); width: auto; }
.nav-links { display: flex; gap: var(--space-xl); margin-left: auto; }
.nav-links a { color: var(--c-muted); font-size: var(--type-body-sm-size); font-weight: var(--type-tag-weight); }
.nav-links a:hover { color: var(--c-text); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.menu-button { display: none; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-pill); place-items: center; }
.menu-button .icon-close, .nav[data-open] .menu-button .icon-open { display: none; }
.nav[data-open] .menu-button .icon-close { display: inline; }
.menu-button svg { width: var(--icon-xl); height: var(--icon-xl); stroke: currentColor; stroke-width: var(--icon-stroke); fill: none; stroke-linecap: round; }
@media (max-width: 767px) {
  .nav-row { gap: var(--space-sm); }
  .menu-button { display: grid; }
  .nav-actions { margin-left: auto; }
  .nav-links { display: none; position: absolute; top: var(--layout-nav); left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-sm) var(--gutter) var(--space-base); background: var(--c-ground); border-bottom: var(--border-hairline) solid var(--c-stroke-subtle); box-shadow: var(--shadow-floating); }
  .nav-links a { padding: var(--space-md) 0; font-size: var(--type-body-size); color: var(--c-text); }
  .nav[data-open] .nav-links { display: flex; }
}

/* ── buttons ─────────────────────────────────────────────── */
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: var(--space-4xl); padding: 0 var(--space-xl); border-radius: var(--radius-pill); font-weight: var(--type-tag-weight); font-size: var(--type-body-sm-size); white-space: nowrap; transition: background var(--motion-fast) ease; }
.btn:hover { text-decoration: none; }
.btn svg { width: var(--icon-md); height: var(--icon-md); }
.btn .fill { fill: currentColor; }
.btn-primary { background: var(--c-primary); color: var(--c-primary-on); }
.btn-primary:hover { background: var(--c-primary-pressed); }
.btn-secondary { background: var(--c-raised); color: var(--c-text); }
.btn-secondary:hover { background: var(--c-card); box-shadow: inset 0 0 0 var(--border-hairline) var(--c-stroke-control); }
.btn-sm { min-height: var(--space-3xl); padding: 0 var(--space-base); }
.btn[aria-disabled="true"] { cursor: default; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: var(--type-tag-weight); }
.link-arrow::after { content: "→"; transition: transform var(--motion-fast) ease; }
.link-arrow:hover::after { transform: translateX(var(--space-xs)); }

.card { background: var(--c-card); border-radius: var(--radius-lg); }

/* evidence states: an icon and a word, never colour alone */
.state { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--c-neutral-subtle); color: var(--c-text); width: fit-content; }
.state svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.state-checked { background: var(--c-accent-subtle); color: var(--c-accent); }
.state-unknown { background: var(--c-warning-subtle); color: var(--c-warning); }
.dir { display: inline-flex; align-items: center; gap: var(--space-xs); }
.dir svg { width: var(--icon-base); height: var(--icon-base); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.dir-up svg { color: var(--c-bullish); }
.dir-down svg { color: var(--c-bearish); }

/* ── dark band: hero + sample study ──────────────────────── */
.band { background: var(--c-ground); color: var(--c-text); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--layout-hero-preview)); gap: var(--space-4xl); align-items: center; padding-top: var(--space-4xl); padding-bottom: 0; }
.hero-copy { display: grid; gap: var(--space-xl); justify-items: start; }
.hero-copy .t-lead { max-width: var(--layout-prose); }
.pricing-truth, .store-soon { margin-top: calc(-1 * var(--space-sm)); }

.preview { background: var(--c-card); border-radius: var(--radius-xl); padding: var(--space-xl); display: grid; gap: var(--space-base); }
.preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-base); flex-wrap: wrap; }
.preview-chart { height: var(--layout-preview-chart); }
.preview-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-base); }
.preview-evidence li { display: flex; align-items: center; gap: var(--space-sm); }
.pin { display: inline-grid; place-items: center; width: var(--layout-pin); height: var(--layout-pin); flex: none; border-radius: var(--radius-pill); background: var(--c-text); color: var(--c-ground); font-size: var(--type-caption-size); font-weight: var(--type-tag-weight); font-variant-numeric: tabular-nums; }
.preview-cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.preview-cases > div { background: var(--c-raised); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.preview-note { border-left: var(--border-emphasis) solid var(--c-warning); padding-left: var(--space-md); color: var(--c-muted); }
.preview-note strong { color: var(--c-warning); font-weight: var(--type-tag-weight); }

/* ── sections ───────────────────────────────────────────── */
.section { padding-top: var(--section-gap); padding-bottom: 0; }
.band .section { padding-bottom: var(--section-gap); }
.section-head { display: grid; gap: var(--space-base); max-width: var(--layout-prose); margin-bottom: var(--space-2xl); }
.closing { margin-top: var(--space-xl); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); letter-spacing: var(--type-heading-track); max-width: var(--layout-prose); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; }
.split .section-head { margin-bottom: 0; }

/* ── sample study ───────────────────────────────────────── */
.study { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-evidence-column); gap: var(--space-base); align-items: start; }
.study-chart { background: var(--c-card); border-radius: var(--radius-xl); padding: var(--space-xl); min-width: 0; }
.study-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-base); flex-wrap: wrap; margin-bottom: var(--space-base); }
.legend { display: flex; gap: var(--space-base); flex-wrap: wrap; color: var(--c-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend svg { width: var(--chart-level-key); height: var(--space-xs); overflow: visible; }
.sample-chart { height: var(--layout-sample-chart); }
.rsi-label { margin-top: var(--space-sm); }
.rsi-chart { height: var(--layout-rsi-panel); }
.focus-line { margin-top: var(--space-base); min-height: var(--type-body-sm-line); color: var(--c-muted); }
.focus-line strong { color: var(--c-text); font-weight: var(--type-tag-weight); }

.evidence { display: grid; gap: var(--space-sm); }
.evidence-item { display: grid; gap: var(--space-sm); width: 100%; padding: var(--space-base) var(--space-lg); border-radius: var(--radius-lg); background: var(--c-card); transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.evidence-item:hover { background: var(--c-raised); }
.evidence-item[aria-expanded="true"] { background: var(--c-raised); box-shadow: inset 0 0 0 var(--border-control) var(--c-stroke-control); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.evidence-claim { font-size: var(--type-body-size); line-height: var(--type-body-line); }
.evidence-detail { background: var(--c-raised); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0 var(--space-lg) var(--space-base); box-shadow: inset var(--border-control) 0 0 var(--c-stroke-control), inset calc(-1 * var(--border-control)) 0 0 var(--c-stroke-control), inset 0 calc(-1 * var(--border-control)) 0 var(--c-stroke-control); }
.evidence-detail dl { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--border-hairline) solid var(--c-stroke-subtle); }
.evidence-detail dt { color: var(--c-muted); font-size: var(--type-caption-size); line-height: var(--type-caption-line); }

/* chart marks (drawn by site.js at screen scale) */
.candle-up { fill: var(--c-bullish); stroke: var(--c-bullish); }
.candle-down { fill: var(--c-bearish); stroke: var(--c-bearish); }
.wick { stroke-width: var(--stroke-thin); }
.lvl-resistance, .lvl-support, .lvl-invalidation { stroke: var(--c-muted); stroke-width: var(--stroke-medium); fill: none; }
.lvl-resistance { stroke-dasharray: var(--dash-boundary); }
.lvl-support { stroke-dasharray: var(--dash-support); }
.lvl-invalidation { stroke-dasharray: var(--dash-invalidation); }
.axis-label { fill: var(--c-muted); font-size: var(--type-caption-size); font-family: var(--font); font-variant-numeric: tabular-nums; }
.gridline { stroke: var(--c-stroke-subtle); stroke-width: var(--stroke-thin); }
.rsi-line { fill: none; stroke: var(--c-accent); stroke-width: var(--stroke-medium); }
.chart-pin circle { fill: var(--c-text); }
.chart-pin text { fill: var(--c-ground); font-size: var(--type-caption-size); font-weight: var(--type-tag-weight); font-family: var(--font); text-anchor: middle; dominant-baseline: central; }
.mark { opacity: 0; transition: opacity var(--motion-base) ease; }
.mark.on { opacity: 1; }
.halo { fill: none; stroke: var(--c-accent); stroke-width: var(--stroke-thick); }
.halo-fill { fill: var(--c-accent-subtle); opacity: var(--opacity-wash); }
.trend { stroke: var(--c-accent); stroke-width: var(--stroke-thick); fill: none; }
.zone .zone-unknown { fill: transparent; transition: fill var(--motion-base) ease; }
.zone.on .zone-unknown { fill: var(--c-warning-subtle); }
.zone-unknown { stroke: var(--c-warning-stroke); stroke-width: var(--stroke-thin); stroke-dasharray: var(--dash-compare); }
.zone-label { fill: var(--c-warning); font-size: var(--type-caption-size); font-family: var(--font); font-weight: var(--type-tag-weight); }
.rsi-dot { fill: var(--c-accent); }
.dimmed .candles { opacity: var(--opacity-dimmed); transition: opacity var(--motion-base) ease; }

/* ── scenarios ──────────────────────────────────────────── */
.case-switch { display: none; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }
.case { padding: var(--space-xl); display: grid; gap: var(--space-base); align-content: start; }
.case dl { display: grid; gap: var(--space-base); }
.case dd { margin-top: var(--space-xs); }
.in-sample { padding-top: var(--space-base); border-top: var(--border-hairline) solid var(--c-stroke-subtle); color: var(--c-muted); }
.in-sample strong { color: var(--c-text); font-weight: var(--type-tag-weight); }
.in-sample:empty { display: none; }

/* ── how it works ───────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-base); }
.step { padding: var(--space-xl); display: grid; gap: var(--space-sm); align-content: start; }
.step-art { height: calc(var(--space-4xl) * 2); border-radius: var(--radius-md); background: var(--c-ground); margin-bottom: var(--space-base); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.step-art > svg { width: 70%; height: var(--space-4xl); overflow: visible; }
.step-art polyline { fill: none; stroke-width: var(--stroke-thick); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-shot { width: 70%; height: calc(var(--space-4xl) + var(--space-base)); border: var(--border-control) dashed var(--c-stroke-control); border-radius: var(--radius-sm); display: block; padding: var(--space-sm); }
.art-shot svg { width: 100%; height: 100%; overflow: visible; }
.art-shot polyline, .art-read { stroke: var(--c-text); }
.art-series { stroke: var(--c-accent); stroke-dasharray: var(--dash-compare); }
.art-tick { position: absolute; right: var(--space-md); top: var(--space-md); width: var(--layout-pin); height: var(--layout-pin); border-radius: var(--radius-pill); background: var(--c-accent); display: grid; place-items: center; }
.art-tick svg { width: var(--icon-sm); height: var(--icon-sm); stroke: var(--c-accent-on); stroke-width: var(--icon-stroke); fill: none; }
.art-study { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: var(--space-xs); padding: var(--space-base); place-items: stretch; }
.art-study span { height: var(--space-sm); border-radius: var(--radius-pill); background: var(--c-raised); grid-column: 1 / -1; }
.art-study span:nth-child(2) { width: 70%; }
.art-study .half { grid-column: auto; height: var(--space-xl); border-radius: var(--radius-sm); }
.art-study .up { box-shadow: inset 0 var(--border-emphasis) 0 var(--c-bullish); }
.art-study .down { box-shadow: inset 0 var(--border-emphasis) 0 var(--c-bearish); }

/* ── can't tell ─────────────────────────────────────────── */
.limits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-base); }
.limits li { padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; }

/* ── pricing ────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); max-width: calc(var(--layout-prose) * 1.4); }
.plan { padding: var(--space-xl); display: grid; gap: var(--space-base); align-content: start; justify-items: start; }
.plan ul { display: grid; gap: var(--space-xs); }
.plan ul li::before { content: "✓"; color: var(--c-accent); margin-right: var(--space-sm); font-weight: var(--type-tag-weight); }
.plan-price .pending { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-weight); letter-spacing: 0; color: var(--c-muted); }
.pricing-truth-lg { margin-top: var(--space-2xl); }
.facts { display: grid; gap: var(--space-xs); margin-top: var(--space-base); max-width: var(--layout-prose); }
.facts li::before { content: "·"; margin-right: var(--space-sm); }

/* ── boundaries + privacy ───────────────────────────────── */
.wont { display: grid; gap: 0; }
.wont li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-base) 0; border-bottom: var(--border-hairline) solid var(--c-stroke-subtle); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); letter-spacing: var(--type-heading-track); }
.wont li:first-child { border-top: var(--border-hairline) solid var(--c-stroke-subtle); }
.wont svg { width: var(--icon-lg); height: var(--icon-lg); stroke: var(--c-muted); stroke-width: var(--icon-stroke); fill: none; stroke-linecap: round; flex: none; }
.facts-card { padding: var(--space-xl); display: grid; gap: var(--space-lg); }
.facts-card li { display: grid; gap: var(--space-xs); }
.facts-card li + li { padding-top: var(--space-lg); border-top: var(--border-hairline) solid var(--c-stroke-subtle); }

/* ── final CTA + footer ─────────────────────────────────── */
.final { margin-top: var(--section-gap); }
.final-inner { display: grid; gap: var(--space-xl); justify-items: center; text-align: center; padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.final-inner .t-lead { max-width: var(--layout-prose); }
.final-inner .ctas { justify-content: center; }
.footer { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); display: grid; gap: var(--space-2xl); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; }
.footer-brand { display: grid; gap: var(--space-md); max-width: var(--layout-prose); }
.footer-links { display: flex; gap: var(--space-sm) var(--space-xl); flex-wrap: wrap; align-content: start; }
.footer-links a { color: var(--c-muted); }

/* ── motion: content arrives, it doesn't perform ─────────── */
.reveal { transition: opacity var(--motion-slow) ease, transform var(--motion-slow) ease; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(var(--motion-rise)); }
.js .preview-chart .candles, .js .preview-chart .pins { transition: opacity var(--motion-slow) ease; }
.js .preview-chart:not(.in) .pins { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal:not(.in), .js .preview-chart:not(.in) .pins { opacity: 1; transform: none; }
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .preview { max-width: var(--layout-hero-preview); }
  .study { grid-template-columns: minmax(0, 1fr); }
  .limits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .hero { padding-top: var(--space-2xl); gap: var(--space-2xl); }
  .preview, .study-chart { padding: var(--space-base); }
  .preview-evidence, .preview-cases { grid-template-columns: 1fr; }
  .split, .steps, .limits, .plans { grid-template-columns: minmax(0, 1fr); }
  .split { gap: var(--space-2xl); }
  .case-switch { display: flex; gap: var(--space-xs); padding: var(--space-xs); background: var(--c-card); border-radius: var(--radius-pill); margin-bottom: var(--space-base); width: fit-content; }
  .case-switch button { min-height: var(--space-3xl); padding: 0 var(--space-base); border-radius: var(--radius-pill); font-weight: var(--type-tag-weight); font-size: var(--type-body-sm-size); color: var(--c-muted); }
  .case-switch button[aria-selected="true"] { background: var(--c-primary); color: var(--c-primary-on); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .js .case[hidden-mobile] { display: none; }
  .final-inner { justify-items: start; text-align: left; }
  .final-inner .ctas { justify-content: flex-start; }
}

/* ── document pages (privacy, terms, support) ───────────── */
.doc { display: grid; gap: var(--space-base); max-width: calc(var(--layout-prose) + 2 * var(--gutter)); padding-bottom: var(--section-gap); }
.doc h2 { margin-top: var(--space-xl); }