/* ==========================================================================
   smart-intake-flow.css - the 9/14 story redesign of the Smart Intake page.
   Loaded LAST, after section-corners.css. Page-scoped to .page-si throughout.

   Brees approved every part of this in the preview pages under
   _preview/ (full pick: _preview/smart-intake-v1-y/). Those files keep the
   whole exploration and every rejected option; this sheet is what ships.

     1. Section 2 curve: charcoal behind the cream arch, not white.
     2. Sections 2 + 3 merged ("Version 1"): the 80% bridge line becomes a
        lead-in, the four points become a zig-zag timeline drawn by
        intake-line.js.
     3. Section 3 (option I + T): the table on white, column names visible,
        no fills; Alie's closing sentence is the table's seventh row.
     4. Where Spotlight shines (option Y): the title lets go WITH the last
        card; crossing beams on the blue ground.

   Every word on the page is still Alie's. Contrast is noted beside each pair.
   ========================================================================== */


/* ==========================================================================
   1. SECTION 2 - THE CURVE
   Brees, 9/14: "where the curve is, there should be no white there. It should
   be the same dark color from section 1 going into section 2." The cream is a
   ::before with a 500px top-left radius; what shows behind that curve is the
   section's own background, which spotlight.css sets white. Charcoal there
   makes the hero's ground run on into the curve. The cream still covers the
   whole section below the curve.

   🔴 NOT BY MAKING THE WHOLE SECTION CHARCOAL. That was the preview's fix, and
   on the real page contrast-run read every word of the statement as charcoal
   on charcoal (1:1): a checker walks up to the nearest background-color and
   cannot see the cream ::before. So the section's own ground stays CREAM - the
   colour the text really sits on - and the charcoal is a 500px square painted
   UNDER the cream band, at the top-left only, where the curve reveals it.
   `isolation: isolate` keeps the square's z-index -1 inside the section: above
   its ground, below the cream band (z-index 0) and the content. 500px covers
   the largest step of the radius ladder in spotlight.css (40 -> 500px).
   ========================================================================== */
.page-si .si-setup {
  background-color: var(--sl-cream);
  isolation: isolate;
}
.page-si .si-setup::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 500px;
  height: 500px;
  background-color: var(--sl-charcoal);
  pointer-events: none;
}


/* ==========================================================================
   2. THE MERGED SECTION - LEAD-IN, LINE AND TIMELINE
   ========================================================================== */

/* The bridge line: bigger than the paragraph, smaller than the h2, because it
   is the next sentence of the story ("And the best part..."), not a title. */
.page-si .si-setup__copy .si-lead {
  margin: 40px 0 0;
  /* 🔁 ALTIVO — Brees, 9/15. It is a sentence, not an h1/h2 (the 9/10 type
     rule), so the page's body face. */
  font-family: var(--sl-font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  /* charcoal on cream: 13.06:1 */
  color: var(--sl-charcoal);
  text-wrap: balance;
}

/* ---- the line (drawn by intake-line.js) ---------------------------------- */
.page-si .mt-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.page-si .mt__rail,
.page-si .mt__spur {
  fill: none;
  stroke: var(--sl-charcoal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-js="on"] .page-si [data-mt-spur] {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.45s ease;
}
html[data-js="on"] .page-si [data-mt-spur].is-drawn { stroke-dashoffset: 0; }

/* ---- the four points: zig-zag ---------------------------------------------- */
.page-si .mt { position: relative; z-index: 1; }
/* 🔁 ROOM UNDER THE FOURTH BOX — Brees, 9/15: "The fourth box is very close to
   the next section." Added as the list's own bottom margin, NOT as section
   padding: .si-setup's padding-bottom belongs to section-corners.css's pad-out,
   and corner-check asserts that delta is exactly one corner. */
.page-si .mt__items {
  list-style: none;
  margin: 160px 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.page-si .mt__item {
  box-sizing: border-box;
  width: calc((100% - 128px) / 2);
  background: var(--white);
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-si .mt__item:nth-child(odd)  { align-self: flex-start; }
.page-si .mt__item:nth-child(even) { align-self: flex-end; }
.page-si .mt__item + .mt__item     { margin-top: -80px; }

/* gold numerals on charcoal: 9.32:1 */
.page-si .mt__num {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sl-charcoal);
  color: var(--sl-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sl-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-si .mt__label {
  margin: 0;
  font-family: var(--sl-font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--sl-charcoal);
}
/* 80% charcoal on white: above 9:1 */
.page-si .mt__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--sl-charcoal) 80%, var(--white));
}

/* ---- reveal: same timing tokens as the sibling pages' .seo-seq ------------- */
html[data-js="on"] .page-si .mt-seq {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-reveal) var(--ease-out),
              transform var(--d-reveal) var(--ease-out);
}
html[data-js="on"] .page-si .mt-seq.is-in {
  opacity: 1;
  transform: none;
}

/* ---- below the line's minimum width: one column, no line ------------------- */
@media (max-width: 1023px) {
  .page-si .mt__items { margin-top: 64px; gap: 20px; }
  .page-si .mt__item,
  .page-si .mt__item:nth-child(odd),
  .page-si .mt__item:nth-child(even) { width: 100%; align-self: stretch; }
  .page-si .mt__item + .mt__item { margin-top: 0; }
}
@media (max-width: 599px) {
  .page-si .mt__item { padding: 24px; }
  .page-si .si-setup__copy .si-lead { font-size: 26px; margin-top: 32px; }
}


/* ==========================================================================
   3. SECTION 3 - THE TABLE ON WHITE (option I) WITH ITS PAYOFF ROW (option T)
   Brees, 9/14: cream here "makes half of the homepage yellow"; grey read
   "grayed out"; charcoal cards were "harsh". So: white ground, the column
   names Alie already wrote shown as a header row, hairlines, no fills.
   ========================================================================== */

/* ⚠️ NO padding-bottom HERE. The coda band that used to pay section 4's corner
   is gone, so the section is back in section-corners.css's pad-out group,
   which owns the payment. Setting it in this sheet (which loads last) broke
   corner-check: the toggle-off delta measured 168px against one 80px corner. */
.page-si .si-compare {
  background-color: var(--white);
}
.page-si .si-compare .si-compare__lead { color: color-mix(in srgb, var(--sl-charcoal) 75%, var(--white)); }

@media (min-width: 900px) {
  .page-si .si-compare .si-cmp thead {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .page-si .si-compare .si-cmp thead tr {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--sl-charcoal);
  }
  .page-si .si-compare .si-cmp__col {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--sl-font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-charcoal);
  }
  .page-si .si-compare .si-cmp__row {
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: baseline;
    padding-block: 28px;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sl-charcoal) 14%, var(--white));
  }
}

/* The standard form: plain muted text, sentence case as Alie wrote it.
   72% charcoal on white: 6.42:1 */
.page-si .si-compare .si-cmp__other {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--sl-charcoal) 72%, var(--white));
}

/* Spotlight's question: no fill, the larger type carries the weight. */
.page-si .si-compare .si-cmp__ours,
.page-si .si-compare .si-cmp .si-cmp__row:last-child .si-cmp__ours {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.page-si .si-compare .si-cmp__q { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.page-si .si-compare .si-cmp__note { color: color-mix(in srgb, var(--sl-charcoal) 72%, var(--white)); }

@media (max-width: 899px) {
  .page-si .si-compare .si-cmp .si-cmp__row {
    gap: 6px;
    padding-block: 20px;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sl-charcoal) 14%, var(--white));
  }
  .page-si .si-compare .si-cmp .si-cmp__ours { padding: 0; }
}

/* ---- the payoff row: Alie's closing sentence as the table's seventh row -----
   Brees, 9/14, after a band, a callout and a line under the table all read
   "like an afterthought": the sentence is part of the table. Same two
   columns; the cat and dog in a small gold arch where the labels are; the
   sentence where the questions are; the row on a light gold tint. */
.page-si .si-compare .si-cmp__payoff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--r-card);
  /* charcoal on this tint: above 13:1 */
  background-color: color-mix(in srgb, var(--sl-gold) 16%, var(--white));
}
.page-si .si-compare .si-cmp__payoff > td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}
@media (min-width: 900px) {
  /* the tint bleeds 32px past the table, so the columns inside it land EXACTLY
     on the table's columns: the sentence starts where the questions start */
  .page-si .si-compare .si-cmp__payoff {
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    margin-inline: -32px;
    padding: 28px 32px;
  }
}

/* charcoal on white 16.30:1; on the payoff tint above 13:1 */
.page-si .si-compare .si-compare__close {
  order: 0;
  flex: none;
  margin: 0;
  max-width: 36ch;
  color: var(--sl-charcoal);
  font-family: var(--sl-font-head);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: pretty;
}

/* the small gold arch with both pets standing on its floor.
   The pet art is white: it only reads on a coloured ground. */
.page-si .si-compare .si-compare__art {
  --aw: 220px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: var(--aw);
  height: 140px;
  padding: 0 14px 14px;
  border-radius: 110px 110px 18px 18px;
  background-color: var(--sl-gold);
}
/* never upscaled: native widths are 221 (cat) and 283 (dog) */
.page-si .si-compare .si-compare__art .si-compare__pet {
  position: static;
  flex: none;
  align-self: flex-end;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.page-si .si-compare .si-compare__art .si-compare__pet--cat { width: 70px; }
.page-si .si-compare .si-compare__art .si-compare__pet--dog { width: 92px; }


/* ==========================================================================
   4. WHERE SPOTLIGHT SHINES
   ========================================================================== */

/* ---- the title lets go WITH the cards ---------------------------------------
   Brees, 9/14: "the minute you start scrolling away from that section, the
   'Where Spotlight Shines' should scroll with the cards." Measured before: the
   title held 250-260px of scroll after the last card started moving - the
   9/11 50% dial in spotlight.css. 100% of the formula over-trimmed on this page
   by a consistent 60-70px, so it is corrected as a constant. Measured after:
   title and last card let go on the SAME pixel at 1440x900, 1536x864 and
   1861x846, and move identically after. This reverses the 9/11 dial. */
.page-si .si-shines__pin { --si-pin-trim: calc(var(--si-pin-trim-calc) - 64px); }

/* ---- the crossing beams (option Y) -------------------------------------------
   Two soft light shafts from the top corners of the window cross behind the
   cards. White at 10% on the blue. Not spotlight-beam.webp: the Spotlight
   Effect section owns that cone.
   background-attachment: fixed ON ALL THREE LAYERS, and that is the point: the
   pinned title is an opaque blue band (cards slide behind it), and so is its
   ::before strip. Fixed attachment positions the beams against the VIEWPORT,
   so section, band and strip paint the same pixels and the band disappears
   into the pattern instead of reading as a flat blue bar. SVG, not a gradient. */
.page-si .si-shines,
.page-si .si-shines__title,
.page-si .si-shines__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='white' fill-opacity='0.10'%3E%3Cpolygon points='-40,0 300,0 980,1000 560,1000'/%3E%3Cpolygon points='1640,0 1300,0 620,1000 1040,1000'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: 0 0;
}

/* 🔴 RESPONSIVE PASS 9/17 — iOS DOES NOT DO `background-attachment: fixed`.
   Every iOS browser is WebKit, and iOS WebKit silently treats `fixed` as
   `scroll`. So each of the three layers above sized the 1600x1000 SVG to ITS
   OWN box (`100% 100%`): the section's beams stretched down a very tall
   section, and the HEADLINE got a second, squashed pair of beams of its own —
   a rectangle of light cut into the blue around "Where Spotlight Shines".
   Desktop Safari and every desktop engine honour `fixed`, so no sweep sees it.
   1. Below 960 the title is not pinned and has no band of its own (spotlight.css
      only paints --sl-blue on it from 960 up), so it needs no beams at all —
      the section's show through it. That is true in every engine, not just iOS.
   2. On iOS (the `-webkit-touch-callout` test matches iOS/iPadOS WebKit only),
      the band that DOES pin on an iPad is left as flat blue rather than a
      mismatched second pattern, and the section's beams scroll with it. */
@media (max-width: 959px) {
  .page-si .si-shines__title,
  .page-si .si-shines__title::before { background-image: none; }
}
@supports (-webkit-touch-callout: none) {
  .page-si .si-shines { background-attachment: scroll; }
  .page-si .si-shines__title,
  .page-si .si-shines__title::before { background-image: none; }
}


/* ==========================================================================
   REDUCED MOTION - finished state, never a faster animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .page-si .mt-seq { opacity: 1; transform: none; transition: none; }
  html[data-js="on"] .page-si [data-mt-spur] { stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   MEASURING PROTOCOL - MUST STAY BELOW THE REDUCED-MOTION BLOCK.
   intake-line.js adds html.mt-measuring while it reads positions, so boxes
   are measured where they LAND rather than 14px low mid-reveal. verify.js
   only permits the override keyword after the reduced-motion block.
   ========================================================================== */
html.mt-measuring .page-si .mt-seq {
  transform: none !important;
  transition: none !important;
}