/* Ian's website review (doc "Monstro Website Review - Ian 7Nov"), applied Nov 8 with Augustin's answers.
   Loaded last on every page, so it wins over styles.css and Connor's cl-*.css at the same specificity.
   The Leadership flip cards and the Home leadership strip on phones are in people.css. */

/* ---- Home: Watch Monstro think. The intro runs under the title across the full width, with more room before the moments;
   the disclaimer sits under the walkthrough in small grey print, and the claim is centered below it. */
.cl-wt-head { display: block; }
.cl-wt-sub { max-width: 68rem; margin-top: 16px; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.cl-picker { margin-top: 44px; }
.cl-wt-note { margin-top: 28px; font-size: .8125rem; line-height: 1.5; color: var(--cream-muted); }
.cl-wt-close {
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 0;
  max-width: 40ch;
  text-align: center;
  text-wrap: balance;
  position: relative;
}
.cl-wt-close::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; margin-left: -24px; background: var(--accent-night); }

/* ---- Home: Guidance, not insights. The two column headings outrank the rows under them. */
@media (min-width: 768px) {
  .vs-table thead .vs-left, .vs-table thead .vs-right {
    font: var(--w-heading) clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.3 var(--font-heading);
    letter-spacing: -.005em;
  }
  .vs-table thead .vs-left { color: var(--ink); }
}

/* ---- Home: the 62% / 19% trust stat on its own white band, set apart from the tinted sections around it,
   and the line that follows it wider, so "today" stays on the first line. */
.trust { background: var(--paper); }
/* The friction cards' tinted band had no room below the cards (it used to run on into the tinted trust band); now it ends
   two thirds of a band below them before the white starts (Ian, Nov 8) */
.friction { padding-bottom: calc(var(--band) * .67); }
.trust .wrap.trust-grid { padding-block: var(--band); }
.statement-trust p { max-width: 36ch; }
/* "Built by leaders who understand banking, wealth management, and AI." on two lines (phones still need more) */
.statement-lead h2 { max-width: 38ch; }

/* ---- How it works: "The customer's data", its last line set apart (it is about protection, not a source). */
.group-list li.group-note { font-style: italic; color: var(--muted); }

/* ---- How it works: the two channel cards' titles start at the same height, then their text. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .pillars { grid-template-rows: minmax(305px, 1fr) auto auto; }  /* the empty top row keeps the cards at their 520px */
    .pillar { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; align-content: end; }
    .pillar h3 { grid-row: 2; align-self: start; }
    .pillar p { grid-row: 3; align-self: start; }
  }
}

/* ---- How it works: Monstro in Action. The delivery line is labeled and sits under the title; "What Monstro noticed" is
   step 1 of the same numbered sequence as the With Monstro box; one text size throughout, the navy box included. */
.ex-panel { counter-reset: exstep; }
.ex-intro .ex-channel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; color: var(--text); font-weight: 500; }
.ex-intro .ex-changed { margin-top: 22px; }
.ex-channel-k { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 599.98px) {  /* phones, where the tabs are hidden: the line of business above the title (site.js) */
  .ex-intro .ex-lob { display: block; font: 600 .75rem/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
}
.ex7-section .ex-changed .ex-label,
.ex7-section .ex7-body .ex-col .ex-label { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 600; }
.ex7-section .ex-changed .ex-label::before,
.ex7-section .ex7-body .ex-col .ex-label::before {
  counter-increment: exstep;
  content: counter(exstep);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font: 600 .75rem/1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.ex-changed .ex-moment { font-size: var(--t-body); line-height: 1.6; color: var(--text); margin-top: 10px; }
.ex7 { margin-top: 32px; }
.ex-with { margin-bottom: 28px; }
.ex-col { gap: 12px; }
/* three columns side by side: labels on one row, so the texts start level even when a label wraps */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    .ex7-body { grid-template-rows: auto auto 1fr; }
    .ex7-body .ex-col { grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px; }
    .ex7-section .ex7-body .ex-col .ex-label { align-items: flex-start; }
  }
}
.ex7-section .ex7-gain { align-items: baseline; gap: 6px 40px; }
.ex7-section .ex7-gain .ex-label { font: 600 var(--t-body-sm)/1.5 var(--font-text); letter-spacing: 0; color: var(--cream-muted); }
.ex7-gain p { font: 400 var(--t-body)/1.6 var(--font-text); letter-spacing: 0; color: var(--cream); }
.ex7-gain p + .ex-label { margin-top: 14px; }
@media (min-width: 600px) {
  .ex7-section .ex7-gain { row-gap: 14px; }
  .ex7-gain p + .ex-label { margin-top: 0; }
}

/* ---- Why now: a thin white gap between the four eras (the page's white shows through), and "Today" in white like the
   others while "Tomorrow with Monstro" takes the highlight, in light blue. */
.era + .era { margin-top: 6px; }
.era-now .era-when { color: var(--cream); }
.era-next .era-when { color: #9fc3f2; }
@media (max-width: 767.98px) { .era + .era { margin-top: 4px; } }

/* ---- For your team: the title on one line (phones still need two), each role's photo aligned to the top of its text,
   and "Each measured against a control group" under "What you can measure", with both lists still starting level. */
.cl-team-hero h1 { max-width: none; }
.cl-role-top { align-items: start; }
.cl-col-h { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.cl-col-h p { font-size: .9375rem; line-height: 1.45; color: var(--cl-body); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 860px) {
    .cl-spec { grid-template-rows: auto 1fr; }
    .cl-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ---- Company: Steve's founder story, now three paragraphs */
.about-story .about-split > .story-text.story-paras { display: grid; gap: 1em; padding-top: 6px; font-family: var(--font-text); font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
@media (min-width: 900px) { .about-story .about-split > .story-text.story-paras { max-width: 36rem; } }