/* ── TradeMind v12 concept: APPLE BASE, ARCHIVO HEADLINES ─────────────────
   The live skin. Identical to v11 in every way except one: the headline face
   is Archivo (a neutral editorial grotesque) rather than SF Pro, so TradeMind
   keeps its own voice while the body copy, spacing, surfaces and motion go
   Apple.

   v11.css is scoped to `html.v11, html.v12`, so importing it here applies
   the whole Apple base, and the rules below override only the type.
   @import must stay first in the file. */
@import url('/v11.css?v=2026072451');

html.v12{
  /* the brand face: Archivo, a neutral editorial grotesque, everywhere a
     headline lives. Replaces Unbounded, whose rounded geometry read as a
     generic AI-startup logo. */
  --font-head:'Archivo','Inter',system-ui,sans-serif;
  /* body/UI stays SF Pro, inherited from v11 via --font-body */
}

/* Archivo is a normal-width grotesque, so unlike Unbounded it takes the same
   tight tracking as SF Pro, and it carries a heavier weight without looking
   inflated - that is what gives the titles their editorial confidence. */
html.v12 h1,
html.v12 h2,
html.v12 h3,
html.v12 .hero h1,
html.v12 .verdict-headline,
html.v12 .mkt-panel-title,
html.v12 .mkt-chart-name{
  font-family:var(--font-head);
  letter-spacing:-.02em;
  font-weight:700;
}

/* the wordmark: Archivo at a masthead weight with a hair of positive tracking,
   so TRADEMIND reads as a set-in-metal product name, not a logotype. */
html.v12 .tm-wordmark{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.04em;
  font-size:16px;
}

/* The headline block above pins every heading to 700, but the hero title is the
   most important line on the site and carries font-weight:800 in its own markup.
   Match that, with the tight tracking Archivo takes at display size. The hero
   column width and headline size are set later, in the two-column block below. */
html.v12 .hero h1{font-weight:800;letter-spacing:-.03em}

/* The opening screen is one balanced composition: hero fills the viewport and
   its content sits on the vertical center (nudged up slightly - optical center),
   so a fresh load shows Sage + title + CTA and nothing half-cut below.
   min-height must be re-asserted here: the v11 base sets it to auto. */
/* Full-screen hero: fills the viewport so the next section barely peeks at the
   bottom as a scroll hint. The "- Npx" leaves that peek (nav+ticker+peek gap). */
html.v12 .hero{align-items:center;min-height:calc(100svh - 108px)}
html.v12 body.ticker-on .hero,
html.v12 .ticker-visible .hero{min-height:calc(100svh - 142px)}
html.v12 .hero-inner{padding-top:0;padding-bottom:0}

/* Primary action buttons wear the brand's Archivo display face, not SF Pro,
   so "Analyze", "Analyze My Trade", "Load into analyzer" read branded. */
html.v12 .btn-primary,
html.v12 .btn-load,
html.v12 #sage-chat-send,
html.v12 .ideas-refresh{
  font-family:var(--font-head);
  letter-spacing:-.01em;
  font-weight:600;
}

/* ══ PHONE: spend the palette ══════════════════════════════════════════════
   The segmented tabs above resolve to a neutral grey chip on a neutral grey
   bar. On a phone that control is the whole navigation of Analyze, Community,
   My League and Research, so those screens read as a grey wireframe and the
   purple-to-cyan barely appeared outside the hero. These rules live after the
   v11 @import so they win, and they are phone-only: at desktop density the
   quieter treatment still works. */
@media(max-width:700px){
  html.v12 .inner-tab-bar{
    background:rgba(155,114,232,.09);
    border-color:rgba(155,114,232,.20);
  }
  html.v12 .inner-tab{color:var(--muted2)}
  html.v12 .inner-tab.active{
    background:rgba(155,114,232,.26);
    color:var(--accent-bright);
    font-weight:600;
    box-shadow:0 0 0 1px rgba(155,114,232,.38) inset,0 2px 10px -4px rgba(155,114,232,.6);
  }

  /* Refresh spans the full width on a phone, so leaving it grey put the
     largest shape on the Community screen in the dullest colour. */
  html.v12 .comm-head .btn-sm{
    background:rgba(155,114,232,.15);
    border-color:rgba(155,114,232,.34);
    color:var(--accent-bright);
  }

  /* Sage's four claims: the 5px dot was the only colour in the block */
  html.v12 .sage-cap{
    background:rgba(155,114,232,.08);
    border-color:rgba(155,114,232,.26);
  }
  html.v12 .sage-cap b{color:var(--accent-bright)}

  /* every field in the app focused to a grey outline, so the one element the
     user is actually touching gave back the least signal. .tm-input is listed
     explicitly because the rule above that kills its ring is a class deeper
     than a bare `input`, and would otherwise still win. */
  html.v12 .tm-input:focus,
  html.v12 input:focus,
  html.v12 textarea:focus,
  html.v12 select:focus{
    outline:none;
    border-color:var(--accent-bright);
    box-shadow:0 0 0 3px rgba(155,114,232,.22);
  }
}

/* ══ HERO v12: let the two-column composition through ══════════════════════
   styles.css now lays the hero out as copy-left / product-right, but four
   rules earlier in this file (and in v11) are scoped to html.v12 and beat it:
   the 720px column, the headline clamp, the full-viewport min-height and the
   zeroed padding. Re-state them for the new composition. */
html.v12 .hero-inner{max-width:1240px;padding:32px 40px 40px}

/* Two lines in a ~500px column, so the face can be larger than it was at
   three centred lines while taking less vertical space. */
html.v12 .hero-inner h1{font-size:clamp(30px,3.6vw,46px);line-height:1.02}

/* The hero used to be pinned to the full viewport and its content centred,
   which manufactured ~75px of empty background above the badge and ~120px
   below the proof line at 1280x800. It now sizes to its content: the fold
   still fills, and the section underneath peeks as a scroll hint instead of
   sitting behind a screen of black. */
html.v12 .hero,
html.v12 body.ticker-on .hero,
html.v12 .ticker-visible .hero{min-height:0;align-items:center}

@media(max-width:1000px){
  html.v12 .hero-inner{max-width:640px;padding:20px 22px 32px}
  html.v12 .hero-inner h1{font-size:clamp(30px,7.6vw,42px)}
}
@media(max-width:640px){
  /* The !important pair in styles.css targets html.v12 directly, so match it. */
  html.v12 .hero-inner{padding-top:16px!important;padding-bottom:28px!important}
}