/* QuantMind's accent is violet, not the cyan the shared stylesheet
   defaults to. Overriding the token here retints everything that reads
   from it — nav pills, focus rings, links, portal status, card edges,
   button hovers — without touching css/style.css, which the company site
   and the other product also load. */
:root {
  --accent: #a76bff;
  --accent-rgb: 167, 107, 255;

  /* The name in the header reads --grad-company. Pinned to its original
     violet-to-cyan here so a colour change in css/style.css for another
     product never reaches QuantMind pages. */
  --grad-company: linear-gradient(120deg, #a76bff, #4fd8ff);

  /* With --accent already violet, the shared cyan-to-violet gradient
     collapses to a flat lavender with near-black text — pale, and lower
     contrast than it looks. QuantMind gets a real gradient with depth in
     it, deep violet into the brand tone, and white ink. */
  /* Primary buttons. With --accent already violet, the shared
     cyan-to-violet gradient collapsed to a flat lavender with near-black
     ink — pale, and lower contrast than it looked.

     Two dark tones instead, the second leaning toward black. The dark end
     deliberately stops at #1d0f3a rather than true black: the card behind
     it is around #0e0f14, and going further merges that edge into the
     card so the pill loses its shape. */
  --grad: var(--grad-quantmind);
  --btn-ink: #ffffff;
}

/* QuantMind subsite — supplementary styles.
   Extends the shared Quant Intelligence design system (../../css/style.css).
   Does not redefine anything already provided there. Violet-only accent. */

/* ---------- Nav: back-to-parent + solid-violet brand mark ---------- */

.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}

.nav-back:hover { color: var(--text-dim); }

@media (max-width: 640px) {
  .nav-back span.nav-back-label { display: none; }
}

/* ---------- Section tag / eyebrow accent override ---------- */

.section-tag { color: var(--violet); }

.hero-eyebrow .dot {
  background: var(--violet);
  box-shadow: 0 0 8px var(--violet);
}

/* ---------- Feature grids ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  padding: 38px 34px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--violet);
}

.feature-icon svg { width: 20px; height: 20px; }

.feature-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.feature-card h4 { font-size: 1.05rem; margin-bottom: 8px; color: var(--violet); }
.feature-card p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Numbered step cards (onboarding) ---------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-card {
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: var(--surface);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(167, 107, 255, 0.4);
  color: var(--violet);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  margin-bottom: 16px;
}

.step-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step-card p { font-size: 0.9rem; margin: 0; }


@media (max-width: 860px) {
  .step-grid { grid-template-columns: 1fr; }
}

/* ---------- Simple content sections (non-hero) ---------- */

.quantmind-section {
  max-width: 760px;
  margin: 0 auto;
  /* Horizontal only. Using the `padding` shorthand here wiped out the
     vertical padding these inherit as <section> elements, which left
     stacked sections flush against each other and the last one sitting
     directly on the footer's top border. */
  padding-left: 28px;
  padding-right: 28px;
  text-align: center;
}

.quantmind-section.wide { max-width: var(--maxw); }

.quantmind-section p.lede {
  font-size: 1.02rem;
  margin: 0 auto 48px;
  max-width: 620px;
}

/* ---------- Risk notice callout ---------- */

.risk-note {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--violet);
  background: var(--surface);
  text-align: left;
}

.risk-note.wide { max-width: 100%; }

/* Stacked notes were touching — 0px between them, so two cards read as
   one long box with a rule through it. */
.risk-note + .risk-note { margin-top: 30px; }

/* And a wider break where the notes start, so the explanatory cards read
   as commentary on the panel above rather than as part of it. */
.portal-panel + .risk-note { margin-top: 52px; }

/* The card title. Scoped to a direct child so emphasis inside a
   paragraph stays inline — unscoped, every <strong> in the body became a
   block and split its own sentence across two lines, leaving the
   continuation starting in lower case. */
.risk-note > strong {
  display: block;
  color: var(--text);
  margin-bottom: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.risk-note p strong,
.risk-note td strong {
  display: inline;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  margin: 0;
}

.risk-note p, .risk-note span { margin: 0; font-size: 0.92rem; color: var(--text-dim); }
.risk-note p + p { margin-top: 10px; }

/* ---------- Forms (signup / login) ---------- */

.form-panel {
  /* One width for every form on the site. Sign-up needed the wider box
     for the consent document, and a sign-in card half its size beside it
     read as two different products. */
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 40px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: var(--bg-elevated);
}

.form-field { margin-bottom: 20px; text-align: left; }

.form-field label {
  display: block;
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.form-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease);
}

.form-field input:focus {
  outline: none;
  border-color: var(--violet);
}

.form-panel .btn { width: 100%; justify-content: center; margin-top: 6px; }

.form-note {
  font-size: 0.86rem;
  color: var(--text-faint);
  margin-bottom: 24px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
}

.form-note a { color: var(--violet); border-bottom: 1px solid rgba(167, 107, 255, 0.4); }

.form-success {
  display: none;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(167, 107, 255, 0.35);
  background: var(--violet-soft);
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
}

.form-success a { color: var(--violet); }

.form-success.show { display: block; }

.form-footnote {
  text-align: center;
  font-size: 0.88rem;
  /* --text-dim, not --text-faint. The faint token is for hints beside a
     field; these two lines carry a risk warning and the way back to
     sign-in, and both were too dark to read comfortably. */
  color: var(--text-dim);
  margin-top: 24px;
}

.form-footnote a { color: var(--violet); border-bottom: 1px solid var(--violet); }
.form-footnote a:hover { color: var(--violet); border-color: var(--violet); }

/* ---------- Before-you-install gate ---------- */

/* The dialog is a positioned wrapper and nothing more. Everything inside is
   the Expert Advisor card from the download page, unchanged: same
   .feature-card, same .feature-icon, same mark, same 420px. The sibling
   product keeps its own copy in its own stylesheet and the two never share a
   rule, so neither can move the other's. */
.install-gate {
  border: 0;
  background: transparent;
  color: var(--text);
  /* 8px of breathing room inside the dialog's own clip box. The card lifts
     4px on hover and a <dialog> clips its content, which took the top edge
     and its rounded corners off. Padding gives the lift somewhere to go
     WITHOUT turning clipping off, so a short window still scrolls instead of
     pushing the top of the card above the viewport where it cannot be
     reached. box-sizing is border-box globally, so max-width and width both
     carry the 16px back to leave the card at exactly 420px, the width it had
     inside .feature-grid.is-single. */
  padding: 8px;
  max-width: 436px;
  width: calc(100% - 24px);
}

.install-gate::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}

/* The card sat in .quantmind-section, which centres its text. */
.install-gate .feature-card { text-align: center; }

/* button.btn in the shared sheet sets `font: inherit`, a shorthand, which
   wipes .btn's own font-size and weight. The card's button was an <a>, so it
   kept them. These put a <button> back to what the card rendered. */
.install-gate .btn {
  font-size: 0.95rem;
  font-weight: 500;
}

.install-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .install-gate-actions { flex-direction: column; }
}

/* Opening a modal moves focus to its first focusable element, which was
   Continue, so every visitor met the browser's own focus ring around it —
   mouse users included. The card takes the focus instead: the dialog is
   still announced and Escape still works, and no ring lands on a button
   nobody has tabbed to. Keyboard focus stays visible on the buttons
   themselves, the same split the nav uses at style.css:1776. */
.install-gate .feature-card:focus { outline: none; }
.install-gate .btn:focus { outline: none; }
.install-gate .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* .feature-card's background is a near-transparent white gradient
   (0.05 → 0.015). On the page that sat over the opaque --bg; in a dialog it
   sits over a dimmed, blurred view of the page, so the page read straight
   through it. The card's own gradient is untouched and still translucent —
   what sits under it is --bg at 72%, so the page behind is softened rather
   than removed. That one alpha is the dial: lower is more see-through. */
.install-gate .feature-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 10, 0.38);
  /* The ::backdrop already dims the page 62%, so tint alone stacked on top
     of that read as solid. Blurring what is behind the card instead lets it
     stay genuinely see-through while the text keeps a calm ground: the page
     is visible through it as shape and colour rather than as detail. */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* A lone card (the backtest card on pricing) takes the width of one card
   in a two-card row on the home page, so it matches them. */
.feature-grid.is-single > .feature-card { max-width: 538px; }

/* Product header: the logo, then the product name beside it, large and in
   the gradient, centred on the logo. */
.nav .nav-brand { font-size: 1.75rem; line-height: 1.1; }
@media (max-width: 360px) { .nav .nav-brand { font-size: 1.45rem; } }
.nav-mark-link { display: flex; flex: none; }
.nav-brand-group:has(> .nav-mark-link) { display: flex; align-items: center; gap: 14px; }
.nav-mark-link .nav-mark { height: 76px; }
@media (max-width: 860px) { .nav-mark-link .nav-mark { height: 64px; } }

/* Blog posts: the shared back link (style.css), spaced above the post date. */
.qm-back-to-blog { margin-bottom: 22px; }

/* Phones: the same faint stroke on the product name, so it reads as thick as
   the company name. */
@media (max-width: 860px) { .nav-brand-group > .nav-brand > .notranslate { -webkit-text-stroke: 1px rgba(140, 150, 255, 0.85); } }

/* ---------- Candle Q (QuantMind's own logo) ----------
   Top bar: the candle Q stands in for the Q of the name, so it reads
   [Q]uantMind. At 1.1em the ring meets the cap height and the tail drops
   below the baseline like a real Q's. The Q runs violet to cyan, so the
   rest of the name runs cyan to violet: cyan sits next to cyan. */

.nav .nav-brand.qm-brand { display: inline-block; white-space: nowrap; }
.nav .nav-brand .qm-q {
  display: inline;
  height: 1.1em;
  width: auto;
  vertical-align: -0.088em;
  margin-right: 0.01em;
}
.nav .nav-brand.qm-brand > .notranslate { background: linear-gradient(120deg, #4fd8ff, #a76bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Homepage hero: the text sits low, so the download button lands at the same
   height as Alden's (top at 80vh - 50px, from alden.css: bottom padding 20vh,
   a 50px button). The 39px is the note under QuantMind's buttons plus the gap
   (89px from the button's top to the content's end) minus Alden's 50px. Phones
   keep the centred layout: the text fills most of the screen there anyway. */
@media (min-width: 701px) {
  .hero.qm-home-hero {
    justify-content: flex-end;
    flex-direction: column;
    padding-bottom: calc(20vh - 39px);
  }
}