/* ==================================================
   TITAN CAPITAL - HOMEPAGE SECTIONS
   ================================================== */

/* ---------- Hero ---------- */
/* The hero is a light grey band (--color-surface-hero): neither the charcoal
   slab it used to be nor bare page surface. The band is a neutral grey rather
   than a palette hue, 1.16:1 off the page below it, so it sets the hero apart
   without competing with the charcoal that matters - the sticky header above it
   and the action cards inside it. Because the band is light, the hero's own text
   is the light-surface set: `.hero h1` primary (12.97:1 on the band) and
   `.hero__copy` muted (6.23:1). Everything inside `.hero-card` keeps its
   light-on-dark set, because the cards are self-contained dark surfaces - as are
   the `.btn--light` / `.btn--outline-light` buttons they hold - and
   `.hero__aside-link` is only ever used inside a card. `position: relative` /
   `overflow: hidden` stay so the decorative overlay below is clipped to the
   band. */
.hero {
  position: relative;
  background: var(--color-surface-hero);
  color: var(--color-text);
  overflow: hidden;
}
/* Hero top padding: 24px on phones ramping to a flat 40px from ~1150px upward.
   (The 0.9rem / 14.4px floor used earlier read as too tight directly under the
   sticky 72px header; the original v1 hero sat at 110px.) The H1's own
   line-height (1.15) adds ~3px of visual leading on top of this value. */
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.5rem, 0.73rem + 2.45vw, 2.5rem) clamp(1.5rem, 1.2rem + 1vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
/* The section directly after the hero keeps the global --section-pad on its
   bottom edge, but its top padding is reduced: otherwise the hero's bottom
   padding (up to 2rem) stacks with --section-pad (up to 3.125rem) and opens an
   ~82px dead band between the hero cards and the next section head. The grey
   band already marks the boundary (1.16:1 against the page), so this reduction
   is about rhythm rather than separation. */
.hero + .section {
  padding-top: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
}
.hero h1 {
  font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-primary);
}
.hero__copy {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: 0;
}
.hero__aside-link {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.hero__aside-link:hover { color: var(--color-white); }


/* Fine grid + line overlay for hero (decorative). The line is the charcoal
   primary at 0.05 alpha, which over the grey band composites to a barely-darker
   grey - a 1.10:1 step, a whisper of a grid rather than a pattern. The Cool
   Silver the overlay used on the charcoal band does not survive the move to a
   light surface (0.06 silver over the band is 1.04:1, effectively invisible),
   so the grid is drawn charcoal-on-light instead. It is the hero's only
   ornament besides the cards, and the "fine lines / subtle grid geometry" the
   hero direction asks for. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 35, 41, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 35, 41, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* Hero top block: headline stacked above the lead copy at every width.
   (Previously a 1.2fr / 1fr row on desktop, which put the lead copy beside
   the H1 and bottom-aligned the two together; the copy now sits under the
   headline, matching the layout that was already in place below 60rem.) */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* ---------- Hero action panel ---------- */
.hero__panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
/* Hero action cards: charcoal surfaces on the hero's grey band. The surface sits
   well above the band it rests on (#252A31 over #E8E9E9, 11.87:1), so the cards
   read as solid panels and the fill alone carries the separation - against the
   charcoal band this replaced, the fill step was only 1.09:1 and the work had to
   be done by the hairline and the shadow. The edge is a low-opacity Cool Silver
   hairline, not the opaque Titanium border the cards carried, and the 3px Cool
   Silver left bar is gone - it encoded no state or category, and together with
   the solid border it was what made the panel look like outlined areas. With the
   fill doing the separating, the shadow is decorative and stays light: two
   low-alpha neutral layers, no drop-shadow drama. Hover stays restrained: 2px of
   lift, a slightly stronger hairline, a slightly stronger shadow, no colour
   change. No accent colour, gradient or glow - #16A34A / #DC2626 remain reserved
   for BUY/LONG and SELL/SHORT states. */
.hero-card {
  background: var(--color-primary-raised, #252A31);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-md);
  /* The 3px left border used to take 2px more of the inner box than the 1px
     hairline does, so padding-left carries a +2px compensation: the content
     measure, the text's left edge and the button widths are pixel-identical to
     the previous card, and no paragraph re-breaks. */
  padding: var(--space-5) var(--space-5) var(--space-4) calc(var(--space-5) + 2px);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.hero-card:hover {
  border-color: rgba(148, 163, 184, 0.34);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.hero-card__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-silver);
  display: block;
  margin-bottom: 0.5rem;
}
.hero-card h3 {
  color: var(--color-white);
  font-size: var(--text-lg);
  margin-bottom: 0.85rem;
}
.hero-card p {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-sm);
  margin-bottom: 0.9rem;
  flex: 1 1 auto;
}
.hero-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}
.hero-card__contacts {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.hero-card__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-on-dark);
}
.hero-card__contact:last-child { border-bottom: 0; }
.hero-card__contact > span:first-child { word-break: break-word; }
.hero-card__actions { display: flex; gap: 0.375rem; flex-shrink: 0; }
.hero-card__actions a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.hero-card__actions a:hover {
  border-color: rgba(248, 250, 252, 0.7);
  color: var(--color-white);
  background: rgba(148, 163, 184, 0.2);
}
.hero-card__actions svg { width: 17px; height: 17px; }
.hero-card a:focus-visible { outline: 2px solid var(--color-silver); outline-offset: 2px; }

/* Desktop type block: the headline holds a two-line measure so it reads as a
   poster (PMEX COMMODITY / BROKERAGE) instead of one ~687px single-line slab,
   and the lead copy is pulled in with it (~473 / 535px lines with Inter) so the
   two stacked strings no longer both run the full container width.
   Verified with webfonts loaded at 1280 / 1440 / 1920: H1 2 lines, copy 2 lines,
   no orphan. Without webfonts (fallback metrics) both break the same way.
   Below 60rem nothing changes: the H1 is already short enough to wrap on its
   own and the copy keeps its 52ch base measure. */
@media (min-width: 60rem) {
  .hero h1 {
    max-width: 40rem;
    /* balance keeps the break on the word gap instead of stranding BROKERAGE */
    text-wrap: balance;
  }
  .hero__copy { max-width: 50ch; }
}

@media (max-width: 60rem) {
  .hero__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* third card spans the row rather than sitting beside an empty cell */
  .hero-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 42rem) {
  .hero__panel { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Positioning ---------- */
.positioning__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.positioning__lead { font-size: var(--text-xl); line-height: 1.5; color: var(--color-primary); font-weight: 500; max-width: 34ch; }
.positioning__grid > div > p + p { margin-top: var(--space-4); }

.points-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--border-hair);
}
.points-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 0.9rem 0;
  border-bottom: var(--border-hair);
  font-weight: 500;
  color: var(--color-primary);
}
.points-list .pt-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-silver);
  min-width: 2rem;
}

@media (max-width: 56rem) { .positioning__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Markets ---------- */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 56rem) { .markets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .markets-grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process { background: var(--color-white); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.process__step {
  position: relative;
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-strong);
}
.process__step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 2.75rem;
  height: 2px;
  background: var(--color-primary);
}
.process__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-silver);
  display: block;
  margin-bottom: 0.6rem;
}
.process__step h3 { font-size: var(--text-base); margin-bottom: 0.5rem; }
.process__step p { font-size: var(--text-sm); }

@media (max-width: 64rem) {
  .process__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .process__steps { grid-template-columns: 1fr; gap: 0; }
  .process__step { border-top: none; border-left: 2px solid var(--color-border-strong); padding: 0 0 var(--space-6) var(--space-5); }
  .process__step::before { top: 0; left: -4px; width: 2px; height: 1.5rem; }
}

/* ---------- Accounts ---------- */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.accounts-grid .card { padding: var(--space-7) var(--space-6); }
.account-card__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.account-card__list li { display: flex; gap: 0.6rem; align-items: baseline; }
.account-card__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--color-silver);
  border-radius: 1px;
  transform: translateY(-1px);
}
.account-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }

@media (max-width: 48rem) { .accounts-grid { grid-template-columns: 1fr; } }

/* ---------- Why Titan ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.why-item {
  border-top: var(--border-hair);
  padding-top: var(--space-5);
}
.why-item .process__num { margin-bottom: 0.75rem; }
.why-item h3 { font-size: var(--text-md); margin-bottom: 0.6rem; }
.why-item p { font-size: var(--text-sm); }

@media (max-width: 64rem) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Technology ---------- */
.tech { background: var(--color-white); }
.tech__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.tech__visual {
  position: relative;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--color-light);
  overflow: hidden;
}
.tech__visual svg { width: 100%; height: auto; }
.tech__caption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0.75rem 1rem;
  border-top: var(--border-hair);
}

.tech__list { list-style: none; padding: 0; display: grid; gap: 0; border-top: var(--border-hair); }
.tech__list li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
  padding: 1.1rem 0;
  border-bottom: var(--border-hair);
}
.tech__list h3 { font-size: var(--text-base); font-weight: 600; }
.tech__list p { font-size: var(--text-sm); }

.tech-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border-strong);
}
.tech-roles h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.6rem;
}
.tech-roles p { font-size: var(--text-sm); }

@media (max-width: 56rem) {
  .tech__grid { grid-template-columns: 1fr; }
  .tech__list li { grid-template-columns: 1fr; gap: 0.35rem; }
  .tech-roles { grid-template-columns: 1fr; }
}

/* ---------- Education / Perspective ---------- */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.edu-item {
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.edu-item h3 { font-size: var(--text-base); }
.edu-item p { font-size: var(--text-sm); }
.edu-item--more {
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  border-style: dashed;
}

.edu-more { margin-top: var(--space-6); display: flex; }

@media (max-width: 64rem) { .edu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .edu-grid { grid-template-columns: 1fr; } }

/* ---------- Perspective ---------- */
.perspective__empty {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-white);
}
.perspective__empty p { max-width: 52ch; }

/* ---------- Talk to Titan Capital(form) ---------- */
.talk { background: var(--color-primary); color: var(--color-text-on-dark); }
.talk__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-8);
  align-items: start;
}
.talk__grid h2 { color: var(--color-white); font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.talk__grid > div > p { color: var(--color-text-on-dark-muted); margin-bottom: var(--space-6); }
.talk .field label { color: var(--color-text-on-dark); }
.talk .field input, .talk .field select, .talk .field textarea {
  background: var(--color-white);
  border-color: var(--color-secondary);
}
.talk .form-note { color: var(--color-silver); }
.talk .form-status {
  background: var(--color-primary-deep, #181B20);
  border-color: var(--color-secondary);
  border-left-color: var(--color-silver);
  color: var(--color-text-on-dark-muted);
}
@media (max-width: 56rem) { .talk__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Contact & Client Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.service-card {
  border: var(--border-hair); border-radius: var(--radius-md);
  background: var(--color-white); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4); position: relative;
}
.service-card h3 { font-size: var(--text-md); font-weight: 600; color: var(--color-slate); }
.service-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

.service-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--color-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-card__icon svg { width: 18px; height: 18px; color: var(--color-slate); }

.service-card__channels { display: grid; gap: var(--space-2); }
.service-card__channel { display: flex; gap: var(--space-2); }

.service-card__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: var(--border-hair); border-radius: var(--radius-sm);
  color: var(--color-slate); text-decoration: none; transition: all 0.15s ease;
}
.service-card__action svg { width: 16px; height: 16px; flex-shrink: 0; }
.service-card__action:hover {
  border-color: var(--color-emerald); color: var(--color-emerald); background: var(--color-emerald-low);
}

.service-card__email {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--color-light);
}
.service-card__email-link {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-slate); text-decoration: none; transition: all 0.15s ease;
}
.service-card__email-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.service-card__email-link:hover { color: var(--color-emerald); }
.service-card__email-text { color: var(--color-slate); }

.service-card__cta {
  margin-top: auto; padding: var(--space-3); text-align: center;
}

.service-card__contact {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-light); border-radius: var(--radius-sm); margin-bottom: var(--space-4);
}
.service-card__info-item {
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text);
}
.service-card__info-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-emerald); }

.service-card__process { margin-bottom: var(--space-3); }
.process-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
}
.process-step__number {
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-slate);
  color: var(--color-white); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600; flex-shrink: 0;
}
.process-step__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.process-note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-4); }

.service-card__cta {
  display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-white); background: var(--color-emerald); text-decoration: none; transition: all 0.15s ease;
}
.service-card__cta:hover {
  background: var(--color-emerald-dark); color: var(--color-white); transform: translateY(-1px);
}

@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }
@media (max-width: 48rem) { .service-card__action { width: 44px; height: 44px; } }
@media (max-width: 40rem) { .service-card__email { flex-wrap: wrap; }
  .service-card__email-link { width: 100%; justify-content: center; } }

/* ---------- Contact pathways ---------- */
.pathways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pathway {
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pathway h3 { font-size: var(--text-md); }
.pathway p { font-size: var(--text-sm); }
.pathway .link-arrow { margin-top: auto; }

@media (max-width: 56rem) { .pathways { grid-template-columns: 1fr; } }
/* ---------- Contact pathways ---------- */
.pathway__phone-group { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); font-weight: 500; }
.pathway__phone-group a { color: var(--color-primary); }
.pathway__phone-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.pathway__phone-header svg { flex-shrink: 0; }
.pathway__phone-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.pathway__phone-row { display: flex; align-items: center; gap: var(--space-2); }
.pathway__phone-number { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; transition: color 0.15s ease; }
.pathway__phone-number:hover { color: var(--color-primary); }
.pathway__phone-actions { display: flex; gap: var(--space-1); }
.pathway__phone-action { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.15s ease; }
.pathway__phone-action svg { width: 14px; height: 14px; }
.pathway__phone-action--call { background: var(--color-emerald); color: #fff; }
.pathway__phone-action--call:hover { background: var(--color-emerald-dark); }
.pathway__phone-action--whatsapp { background: #25D3B0; color: #fff; }
.pathway__phone-action--whatsapp:hover { background: #1ebe8d; }
.pathway__email { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.pathway__email svg { flex-shrink: 0; width: 16px; height: 16px; }
.pathway__email-link { color: var(--color-text-muted); text-decoration: none; transition: color 0.15s ease; }
.pathway__email-link:hover { color: var(--color-primary); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap 0.15s ease;
}
.link-arrow:hover { gap: var(--space-2); }

/* ---------- Market Headlines ---------- */
/* Reduce gap between the heading/intro and the widget frame */
.market-news .section-head {
  margin-bottom: var(--space-4);
}

.market-news__frame {
  background: var(--color-primary);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 480px; /* matched to TV_NEWS_CONFIG height to prevent layout shift */
}

.market-news__frame .tradingview-widget-container,
.market-news__frame .tradingview-widget-container__widget {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
}

/* Attribution line inside the dark panel - TradingView terms require visible attribution */
.tradingview-widget-copyright {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
}

.tradingview-widget-copyright a {
  color: var(--color-silver);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tradingview-widget-copyright a:hover {
  text-decoration: underline;
}

.market-news__actions {
  margin-top: var(--space-6);
  text-align: center;
}

.market-news__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-6);
  max-width: none;
}

.market-news__disclaimer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.market-news__disclaimer a:hover {
  text-decoration: underline;
}

/* Mobile (<640px): widget stacks to one column; keep at least 3 stories visible */
@media (max-width: 640px) {
  .market-news__frame {
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-news__frame,
  .market-news__actions,
  .market-news__disclaimer {
    transition: none !important;
    animation: none !important;
  }
}