/* ==========================================================================
   INSIGHTS — layout that only the INSIGHTS™ page uses. Loads after
   components.css. Anything here that a third page ends up needing should
   move to components.css rather than being copied.

   Everything visual comes from the global system: .hero backdrop, .accordion,
   .offer-card, .check-list, .card, .section-sub, .cta-block--photo. The rules
   below are arrangement only — no new colours, type sizes or spacing values
   outside the tokens.
   ========================================================================== */

/* ==========================================================================
   1. HERO — the home hero backdrop, centred instead of two-column.
   ========================================================================== */

.ins-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.ins-hero__inner h1 { max-width: 16ch; }

/* The H2 is a lede, not a second title — dropped to H3 size and muted so the
   bolded half carries the emphasis instead of the whole sentence shouting. */
.ins-hero__lead {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--text-muted);
  max-width: 30ch;
}
.ins-hero__lead strong {
  color: var(--charcoal);
  font-weight: var(--fw-semibold);
}

.ins-hero__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--burgundy);
  max-width: 42ch;
  margin-top: var(--sp-1);
}

/* ==========================================================================
   2. DIAGRAM BAND
   The background is sampled from insights-circle.jpg's own margin (#FDFAF5)
   so the artwork sits on the page with no visible plate edge behind it. It
   is a hair off the .insights-band tone on Home, and deliberately so — this
   value belongs to the image, not to the palette.
   ========================================================================== */

.ins-diagram { background: #FDFAF5; }

.ins-diagram__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.ins-diagram__img {
  width: min(100%, 540px);
  height: auto;
}

.ins-diagram__inner h3 { max-width: 30ch; }

.ins-diagram .btn-row { margin-top: var(--sp-2); }

/* ---- Short-line copy ----------------------------------------------------
   Several blocks of this page are written as one thought per line. The line
   breaks are the copy, so they are real paragraphs on a tight gap rather
   than <br>, and the default p + p margin is cancelled. */

.ins-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--text-muted);
  max-width: 62ch;
}
.ins-lines p { margin: 0; }
.ins-lines p + p { margin-top: 0; }
.ins-lines strong { color: var(--charcoal); }

/* A held beat between stanzas. */
.ins-lines .ins-break { margin-top: var(--sp-3); }

/* ==========================================================================
   3. WHY INSIGHTS™ EXISTS — two editorial columns, equal height.
   The portrait is the flexible element in the left column: it absorbs
   whatever height the right column sets, so both columns finish level
   without hard-coding an image height.
   ========================================================================== */

.ins-why__head { text-align: center; }
.ins-why__head h2 { max-width: 24ch; margin-inline: auto; }

.ins-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  align-items: stretch;
  margin-top: var(--sp-6);
}
@media (max-width: 899px) {
  .ins-why__grid { grid-template-columns: minmax(0, 1fr); }
}

.ins-why__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* flex-basis:0 is the whole trick. On `auto` the portrait's own aspect ratio
   sets the column height and the RIGHT column ends up with the dead space
   under its last line. At 0 the frame claims none of the height for itself,
   so the taller column decides the row and the portrait stretches into
   whatever is left — both columns finish level at every width. The image is
   positioned rather than flowed so it fills that frame exactly. */
.ins-why__media {
  position: relative;
  flex: 1 1 0;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
}
.ins-why__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed low in the source photo on purpose: at this crop the top of her
     head sits just under the frame edge and the laptop and hand gesture both
     stay in shot. Raising this number cuts the laptop; lowering it crops her
     head. */
  object-position: center 62%;
}

.ins-why__col p { color: var(--text-muted); }
.ins-why__col strong { color: var(--charcoal); }

/* The two quoted questions the section pivots on. */
.ins-why__turn {
  font-size: var(--fs-body-lg);
  color: var(--charcoal);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--burgundy);
}

/* ==========================================================================
   4. THE 7 STEPS — the shared accordion over a photo, centred and given a
   reading width.

   The photo is bright end to end, so the overlay is doing real work here, not
   decoration: it is the only reason the copy clears contrast. Same approach
   as .cta-block--photo. Never lighten it below ~0.85 — at 0.90 the brightest
   part of the picture still resolves to a near-charcoal ground, which puts
   the cream text somewhere around 13:1.
   ========================================================================== */

.ins-steps-band {
  position: relative;
  background-color: var(--charcoal);
  background-image: url("../assets/steps-bg.jpg");
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

.ins-steps-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(29, 2, 7, 0.90) 0%,
    rgba(29, 2, 7, 0.86) 45%,
    rgba(29, 2, 7, 0.92) 100%);
}

/* Lifts the content above the ::before overlay. */
.ins-steps-band > .container { position: relative; z-index: 1; }

/* The accordion hard-codes charcoal and burgundy for its own text, so .on-dark
   alone cannot recolour it — these are the pieces that have to be named. Body
   copy takes the full-strength tone rather than the muted one: over a photo
   the dimmed grey loses too much of its edge. */
.ins-steps .accordion__head { color: var(--text-on-dark); }
.ins-steps .accordion__head:hover { color: var(--cream); }
.ins-steps .accordion__chev { stroke: var(--taupe); }
.ins-steps .accordion__body { color: var(--text-on-dark); }
.ins-steps .section-sub { color: var(--cream); }
.ins-steps .ins-step__body strong { color: var(--white); }
.ins-steps .ins-outcome { color: var(--text-on-dark); }

.ins-steps__head { text-align: center; }
.ins-steps__head h2 { max-width: 22ch; margin-inline: auto; }

.ins-steps {
  max-width: 880px;
  margin-inline: auto;
  margin-top: var(--sp-6);
}

/* Number sits ahead of the step name in the collapsed row, in taupe so the
   name still reads as the label. */
.ins-step__num {
  color: var(--taupe);
  font-weight: var(--fw-extrabold);
  margin-right: var(--sp-1);
}
.accordion__head:hover .ins-step__num { color: var(--burgundy); }

/* Over the photo the number goes gold — taupe on charcoal is too quiet, and
   the burgundy hover tone disappears entirely. */
.ins-steps .ins-step__num { color: var(--gold); }
.ins-steps .accordion__head:hover .ins-step__num { color: var(--cream); }

.ins-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--measure);
}
.ins-step__body > p + p { margin-top: 0; }
.ins-step__body strong { color: var(--charcoal); }

/* .section-sub carries the subheading style; inside a panel it does not need
   the standing-clear margin it gets under a section heading. */
.ins-step__body .section-sub { margin-top: 0; }

/* The closing "What comes out" line of every step. */
.ins-outcome {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--gold);
  color: var(--charcoal);
}

/* ==========================================================================
   5. WHY THIS WORKS DIFFERENTLY — five cards in a three-column grid.
   The orphan row is centred rather than left-aligned: six columns, each card
   spanning two, with the last pair offset by one. Below 1024px the shared
   .grid rules collapse it to a single column and this never applies.
   ========================================================================== */

.ins-diff__head { text-align: center; }
.ins-diff__head h2 { max-width: 26ch; margin-inline: auto; }
/* Promoted from .section-sub to a real h3, so it carries its own top margin
   rather than the one .section-sub used to supply. */
.ins-diff__head h3 { max-width: 40ch; margin-inline: auto; margin-top: var(--sp-4); }

.ins-diff { margin-top: var(--sp-6); }

@media (min-width: 1024px) {
  .ins-diff { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ins-diff > * { grid-column: span 2; }
  .ins-diff > :nth-child(4) { grid-column: 2 / span 2; }
  .ins-diff > :nth-child(5) { grid-column: 4 / span 2; }
}

.ins-diff .card h3 { font-size: var(--fs-h4); }

/* ==========================================================================
   6. INSTALLING INSIGHTS™ — two offer cards, both permanently open.
   These are option cards, not a pricing ladder, so the header is a plain
   <div> rather than a toggle button and there is no chevron. Everything
   else is the shared .offer-card.
   ========================================================================== */

.ins-install__head { text-align: center; }
.ins-install__head h2 { max-width: 24ch; margin-inline: auto; }

/* Both cards run to the same height on desktop. .offer-layout aligns to start
   for the pricing ladder on Home, where a short collapsed card should not
   inherit a tall neighbour's height; here there are only two, both permanently
   open, so the shorter one stretches and parks its button on the baseline. */
.ins-install {
  margin-top: var(--sp-6);
  align-items: stretch;
}
.ins-install .offer-card { height: 100%; }
.ins-install .offer-card__panel { flex: 1 1 auto; }
.ins-install .offer-card__panel-inner,
.ins-install .offer-card__body { height: 100%; }
.ins-install .offer-card__body > .btn:last-child,
.ins-install .offer-card__body > .btn-row:last-child { margin-top: auto; }

.offer-card--static .offer-card__head {
  cursor: default;
  padding-right: var(--sp-4);
}
.offer-card--static:hover { box-shadow: none; }
.offer-card--static.offer-card--signature:hover { border-color: var(--burgundy); }
.offer-card--static:not(.offer-card--signature):hover { border-color: var(--line); }

.ins-install .offer-card__name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.ins-install .offer-card__body { gap: var(--sp-3); }
.ins-install .offer-card__body > p + p { margin-top: 0; }
.ins-install .offer-card__body p { color: var(--text-muted); }
.ins-install .offer-card__body strong { color: var(--charcoal); }

/* Offer name + price for the sprint card, sitting inside the body rather
   than the header because the header carries the option framing instead. */
.ins-offer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.ins-offer-line__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--charcoal);
}

/* Two buttons in this card, so the single-button stretch rule is undone. */
.ins-install .btn-row .btn { margin-top: 0; align-self: flex-start; }

/* ==========================================================================
   7. HOW IT WORKS — the same accordion, narrower.
   ========================================================================== */

.ins-how__head { text-align: center; }
.ins-how__head h2 { max-width: 22ch; margin-inline: auto; }

.ins-how {
  max-width: 780px;
  margin-inline: auto;
  margin-top: var(--sp-6);
}
.ins-how .accordion__body { max-width: var(--measure); }

/* ==========================================================================
   8. SEE INSIGHTS™ IN PRACTICE — three ads in one centred column.
   ========================================================================== */

.ins-practice__head { text-align: center; }
.ins-practice__head h2 { max-width: 24ch; margin-inline: auto; }

/* Three across on desktop, one column on phones. Tops align and the bottoms
   share one 900x1117 ratio, so equal-width columns give them equal heights
   with no cropping and no forced height. */
.ins-practice__stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-4);
  margin-inline: auto;
  margin-top: var(--sp-6);
}
@media (max-width: 899px) {
  .ins-practice__stack {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 460px);
  }
}
.ins-practice__stack img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--cream);
}

.ins-practice__body {
  max-width: 62ch;
  margin-inline: auto;
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}
.ins-practice__body strong { color: var(--charcoal); }
.ins-practice .btn-row { margin-top: var(--sp-5); }

/* ==========================================================================
   9. FOOTER CTA — the shared photo block; the copy runs a little wider than
   the default because both lines are set in bold.
   ========================================================================== */

.ins-cta .cta-block__title { max-width: 24ch; }
.ins-cta .cta-block__copy { max-width: 60ch; font-weight: var(--fw-medium); }

/* The closing copy is one thought set as two lines, so the second drops the
   paragraph margin and rides on the flex gap alone. */
.ins-cta .cta-block__copy + .cta-block__copy { margin-top: 0; }