/* ==========================================================================
   RAILSDESK — page layer.
   Built on the Modernist design system (assets/ds/styles.css). Every colour,
   font, space and radius comes from a token; nothing is hard-coded that the
   system already carries. Modernist rules apply throughout: zero radius,
   2px rules between major sections, flush-left type, accent used sparingly.
   ========================================================================== */

:root {
  /* The one pair the system does not carry: market direction. Red is already
     spoken for by the accent, so "up" gets its own green and "down" borrows
     from the accent ramp — light step on ink, deep step on the ground. */
  --color-up: #3ea06a;
  --color-down-on-dark: var(--color-accent-400);
  --color-down-on-light: var(--color-accent-700);

  --rule: 2px solid var(--color-text);
  --hairline: 1px solid var(--color-divider);
  --gutter: 48px;
  --header-h: 68px;
}

body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

.u-num { font-variant-numeric: tabular-nums; }
.is-up { color: var(--color-up); }
.is-down { color: var(--color-down-on-light); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page { min-height: 100vh; }

/* Section furniture ------------------------------------------------------ */

.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-accent-700);
  margin: 0 0 var(--space-3);
}
.section-title {
  font-family: var(--font-heading); font-weight: 900; font-size: 40px;
  line-height: 1; letter-spacing: -0.03em; margin: 0;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); padding: 44px var(--gutter) 20px;
}
.section-head__note {
  font-size: 12px; color: var(--color-neutral-700);
  text-align: right; max-width: 40ch; line-height: 1.5;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg); border-bottom: var(--rule);
  display: flex; align-items: stretch; height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6); border-right: var(--rule);
  color: var(--color-text);
}
.brand:hover { color: var(--color-text); }
.brand__mark { width: 26px; height: 26px; flex: none; background: var(--color-accent); }
.brand__name {
  font-family: var(--font-heading); font-weight: 900; font-size: 20px;
  letter-spacing: -0.02em; text-transform: uppercase;
}

.main-nav { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow: hidden; }
.main-nav__link {
  display: flex; align-items: center; padding: 0 20px;
  border-right: var(--hairline);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: var(--color-text);
}
.main-nav__link:hover { background: var(--color-accent-100); color: var(--color-text); }

.lang-switch { display: flex; align-items: stretch; border-left: var(--hairline); }
.lang-btn {
  height: 100%; padding: 0 var(--space-4);
  border: 0; border-right: var(--hairline);
  cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  background: transparent; color: var(--color-neutral-700);
}
.lang-btn:hover { background: var(--color-accent-200); }
.lang-btn[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.lang-btn[aria-pressed="true"]:hover { background: var(--color-accent-600); }

.header-cta { display: flex; align-items: center; padding: 0 20px; border-left: var(--rule); }
.header-cta .btn { height: 40px; white-space: nowrap; }

/* Ticker ----------------------------------------------------------------- */

.ticker {
  background: var(--color-text); color: var(--color-neutral-100);
  height: 44px; display: flex; align-items: center;
  overflow: hidden; border-bottom: var(--rule);
}
.ticker__track {
  display: flex; width: max-content;
  animation: tickerRun 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 22px; border-right: 1px solid rgb(255 255 255 / 0.18);
  white-space: nowrap;
}
.ticker__sym { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; }
.ticker__price { font-size: 13px; font-variant-numeric: tabular-nums; }
.ticker__chg { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticker .is-down { color: var(--color-down-on-dark); }

@keyframes tickerRun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Hero ------------------------------------------------------------------- */

.hero {
  display: grid; grid-template-columns: 1.9fr 1fr;
  border-bottom: var(--rule);
}
.hero__main { padding: 64px var(--gutter) var(--gutter); border-right: var(--rule); }
.hero__kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero__kicker::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--color-accent);
}
.hero__title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(44px, 5.4vw, 82px); line-height: 0.96; letter-spacing: -0.035em;
  margin: 0 0 28px; max-width: 15ch; text-wrap: balance;
}
.hero__lede {
  font-size: 18px; line-height: 1.55; max-width: 56ch;
  margin: 0 0 36px; color: var(--color-neutral-800); text-wrap: pretty;
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__actions .btn { height: 52px; font-size: 15px; padding-inline: 26px; }
.hero__actions .btn-secondary { color: var(--color-text); }

.hero__stats { display: flex; flex-direction: column; }
.stat {
  flex: 1; padding: 28px var(--space-8);
  border-bottom: var(--hairline);
  display: flex; flex-direction: column; justify-content: center;
}
.stat__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: var(--space-2);
}
.stat__value {
  font-family: var(--font-heading); font-weight: 900; font-size: 40px;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stat__note { font-size: 12px; color: var(--color-neutral-700); margin-top: var(--space-2); }

/* Rankings --------------------------------------------------------------- */

.rank { border-bottom: var(--rule); }
.rank__body { padding: 0 var(--gutter) var(--gutter); }
.rank__scroller { overflow-x: auto; }
.rank-table { width: 100%; min-width: 900px; }
.rank-table th:last-child, .rank-table td:last-child { text-align: right; }
.rank-table .col-rank { width: 56px; }
.rank-table tr[data-top="true"] { background: var(--color-accent-100); }

.rank__no {
  font-family: var(--font-heading); font-weight: 900; font-size: 18px;
  color: var(--color-neutral-500);
}
tr[data-top="true"] .rank__no { color: var(--color-accent); }

.venue { display: flex; align-items: center; gap: var(--space-3); }
.venue__mark {
  width: 34px; height: 34px; flex: none;
  background: var(--color-text); color: var(--color-neutral-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 900; font-size: 14px;
}
.venue__text { display: flex; flex-direction: column; gap: 3px; }
.venue__name { font-weight: 700; font-size: 15px; }
.venue__tagline { font-size: 11px; color: var(--color-neutral-700); }

.rebate-value {
  font-family: var(--font-heading); font-weight: 900; font-size: 20px;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.rank-table .btn { height: 38px; font-size: 13px; }

/* Calculator ------------------------------------------------------------- */

.calc {
  display: grid; grid-template-columns: 1.15fr 1fr;
  border-bottom: var(--rule);
}
.calc__controls { padding: var(--gutter); border-right: var(--rule); }
.calc__lede {
  font-size: 15px; color: var(--color-neutral-800);
  margin: var(--space-3) 0 var(--space-8); max-width: 52ch; line-height: 1.55;
}
.calc__fields { display: flex; flex-direction: column; gap: 28px; }

.field-row__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.field-row__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.field-row__value {
  font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.slider { width: 100%; accent-color: var(--color-accent); height: 4px; }

.venue-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.venue-opt {
  height: 38px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer; border: 2px solid var(--color-divider);
  background: transparent; color: var(--color-text);
}
.venue-opt:hover { border-color: var(--color-accent); }
.venue-opt[aria-pressed="true"] {
  border-color: var(--color-accent); background: var(--color-accent); color: #fff;
}

.calc__result {
  background: var(--color-accent); color: #fff; padding: var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
}
.calc__result-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85;
}
.calc__result-value {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(56px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.045em;
  margin: 18px 0 6px; font-variant-numeric: tabular-nums;
}
.calc__result-unit { font-size: 15px; opacity: 0.9; }
.calc__breakdown {
  display: flex; flex-direction: column;
  margin-top: 40px; border-top: 2px solid rgb(255 255 255 / 0.35);
}
.calc__row {
  display: flex; justify-content: space-between;
  padding: 14px 0; font-size: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row > span { opacity: 0.9; }
.calc__row > strong { font-variant-numeric: tabular-nums; }
.calc__cta {
  margin-top: var(--space-8); align-self: flex-start;
  display: inline-flex; align-items: center; height: 52px; padding: 0 26px;
  background: #fff; color: var(--color-accent-700);
  font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
}
.calc__cta:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.calc__result :focus-visible { outline-color: #fff; }

/* Newsroom --------------------------------------------------------------- */

.news {
  display: grid; grid-template-columns: 1.9fr 1fr;
  border-bottom: var(--rule);
}
.news__main { border-right: var(--rule); }
.news__head { padding: 44px var(--gutter) var(--space-6); align-items: flex-end; }
.news__all {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.news-list { border-top: var(--rule); }
.news-item {
  display: grid; grid-template-columns: 86px 1fr 128px; gap: var(--space-6);
  align-items: start; padding: 26px var(--gutter);
  border-bottom: var(--hairline); color: var(--color-text);
}
.news-item:hover { background: var(--color-accent-100); color: var(--color-text); }
.news-item__no {
  font-family: var(--font-heading); font-weight: 900; font-size: 13px;
  color: var(--color-neutral-500); font-variant-numeric: tabular-nums; padding-top: var(--space-1);
}
.news-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.news-item__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  line-height: 1.22; letter-spacing: -0.015em; text-wrap: pretty;
}
.news-item__summary { font-size: 13px; color: var(--color-neutral-700); line-height: 1.5; }
.news-item__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.news-item__time { font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

.news__aside { display: flex; flex-direction: column; }
.aside-block { padding: var(--space-8); border-bottom: var(--rule); }
.aside-block--grow { flex: 1; }
.aside-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 20px;
}

.movers { display: flex; flex-direction: column; }
.mover {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: baseline; padding: var(--space-3) 0;
  border-bottom: var(--hairline);
}
.mover__sym { font-weight: 700; font-size: 14px; }
.mover__price { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-neutral-800); }
.mover__chg {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 66px; text-align: right;
}

.flashes { display: flex; flex-direction: column; gap: 18px; }
.flash { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.flash__time {
  font-size: 11px; font-weight: 700; color: var(--color-accent-700);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.flash__text { font-size: 13px; line-height: 1.5; text-wrap: pretty; }

.subscribe { padding: var(--space-8); background: var(--color-surface); }
.subscribe__title {
  font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px;
}
.subscribe__lede { font-size: 13px; color: var(--color-neutral-800); margin: 0 0 var(--space-4); line-height: 1.5; }
.subscribe__form { display: flex; gap: var(--space-2); }
.subscribe__form .input { flex: 1; }

/* Method ----------------------------------------------------------------- */

.method { border-bottom: var(--rule); }
.method__head { padding: 44px var(--gutter) var(--space-6); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--rule); }
.step {
  padding: var(--space-8); border-right: var(--hairline);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.step:last-child { border-right: 0; }
.step__no {
  font-family: var(--font-heading); font-weight: 900; font-size: 44px;
  line-height: 1; color: var(--color-accent); letter-spacing: -0.04em;
}
.step__title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.2; }
.step__body { font-size: 13px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }

/* Footer ----------------------------------------------------------------- */

.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8);
  padding: var(--gutter); border-bottom: var(--hairline);
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.site-footer__mark { width: 20px; height: 20px; flex: none; background: var(--color-accent); }
.site-footer__name {
  font-family: var(--font-heading); font-weight: 900; font-size: 16px;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.site-footer__about {
  font-size: 13px; line-height: 1.6; color: var(--color-neutral-800);
  max-width: 44ch; margin: 0;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.footer-col a { font-size: 13px; color: var(--color-neutral-800); }
.footer-col a:hover { color: var(--color-accent); }
.site-footer__bottom {
  padding: 22px var(--gutter);
  display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  font-size: 11px; color: var(--color-neutral-700); line-height: 1.6;
}
.site-footer__risk { max-width: 90ch; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .hero, .news { grid-template-columns: 1.5fr 1fr; }
  .step { padding: var(--space-6); }
}

@media (max-width: 900px) {
  .site-header { height: auto; flex-wrap: wrap; position: static; }
  .brand { width: 100%; border-right: 0; border-bottom: var(--hairline); height: var(--header-h); }
  .main-nav { order: 3; width: 100%; flex: 0 0 100%; overflow-x: auto; border-top: var(--hairline); }
  .main-nav__link { height: 52px; }
  .lang-switch { border-left: 0; height: 52px; }
  .header-cta { border-left: var(--hairline); height: 52px; margin-left: auto; }

  .hero, .calc, .news { grid-template-columns: 1fr; }
  .hero__main, .calc__controls, .news__main { border-right: 0; border-bottom: var(--rule); }
  .hero__stats { flex-direction: row; flex-wrap: wrap; }
  .stat { flex: 1 1 200px; border-right: var(--hairline); }
  .news__aside { border-top: 0; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { padding: var(--space-8); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: var(--hairline); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .section-head__note { text-align: left; }
  .hero__main { padding-top: 40px; }
  .news-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .news-item__no { display: none; }
  .news-item__meta { flex-direction: row; align-items: center; gap: var(--space-3); }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: var(--hairline); }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker { overflow-x: auto; }
}