/* ===========================================================================
   smart-intake.css — page rules for /products/smart-intake/

   SCOPE: linked by ONE page, after base-v3.css, direction-d-v3.css,
   variant-d-v3.css and product-devices.css. It adds only what those do not
   already provide.

   🔴 WHAT IS SHARED AND WHAT IS THIS PAGE'S OWN. The brief was "make it look
   like part of the other pages", and the pattern those pages actually follow is
   not one hero repeated — it is one SHAPE with a different artefact per page.
   Call Insights shows the callback email deck, SEO a search bar and results
   card, Websites the render wall. So the chrome, the grid, the stat row and the
   step device are shared, and the artefact is built here and only here.

   ⏹ BORROWED, NOT REBUILT
     .hero .hero__grid .hero__copy .hero__headline .hero__sub
     .section .section--indigo .container .btn .btn--primary
     .pattern-circle           the brand's line-pattern disc
     .gads-stats/.gads-stat*   product-devices.css (shared stat row)
     .gtrack .gstep*           product-devices.css (shared step device)
     .faq* .final-cta* .reveal sitewide
   ⚠️ The `.gads-` prefix on the two shared groups is a misnomer since the 9/2
   extraction — the rules are shared, the name is history.

   TOKENS ONLY. verify.js fails a stray hex, a gradient, a blur, an infinite
   animation, or the override keyword outside the reduced-motion block.
   =========================================================================== */


/* ==========================================================================
   1. HERO — a split, copy against this page's artefact

   ⏹ THE FIRST BUILD USED THE GOOGLE ADS CENTRED HERO AND IT WAS WRONG. That is
   the one hero on the site with no artefact, so copying it made this the second
   page that shows nothing of the product. Brees: "All the heroes are unique but
   along the same pattern. This one should also be unique."
   ========================================================================== */

.si-hero {
  /* 🔴 THE HERO FILLS THE VIEWPORT, for the reason the Google Ads sheet
     records: without it a slice of the next section shows under the fold at
     desktop, and the WIDEST viewport leaked the MOST. svh not vh, and keyed off
     --hdr-h rather than a literal, because the header shrinks on scroll. */
  min-height: calc(100svh - var(--hdr-h));
  display: grid;
  align-content: center;
  /* Bleed shapes MUST clip, and `clip` not `hidden`: hidden makes a scroll
     container and kills position:sticky anywhere below it. */
  overflow-x: clip;
}

@media (min-width: 900px) {
  /* Copy slightly wider than the stage: the headline is three lines and the
     artefact reads at its own size without competing with it. */
  .si-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: var(--s-6);
    align-items: center;
  }
}

/* The shared stat row centres itself and wraps for the Google Ads hero, which
   has the full page width. In a split hero the copy column is ~620px at 1440
   and the middle figure is the long one, so wrapping orphaned $299 onto a
   second line on its own. A three-track grid keeps the row a row: the middle
   label wraps inside its own column instead of pushing a sibling out.
   ⚠️ Grid, not a tighter gap — narrowing the gap only moves the width at which
   it breaks. */
.si-stats {
  justify-content: flex-start;
  margin-top: var(--s-5);
}

.si-stats .gads-stat { text-align: left; }


@media (min-width: 900px) {
  .si-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

@media (max-width: 899px) {
  /* Stacked, the copy centres like every other hero at this width, so the
     figures follow it rather than hanging off the left. */
  .si-stats { justify-content: center; }
  .si-stats .gads-stat { text-align: center; }
}


/* ==========================================================================
   2. THE ARTEFACT — the intake, as the pet owner and the practice see it

   Three parts in the product's own order: the texted link, one adaptive
   question, and the summary that lands in the chart. Flat fills and tokens
   only — brand-devices.md: "Flat fills throughout. No blur, no gradient, no
   texture."

   📌 INVENTED UI COPY IS ALLOWED IN AN aria-hidden MOCK; INVENTED PROSE IS NOT.
   seo-content.css records the same licence for its address bar. The one line
   that reads as real product copy IS real product copy — Alie's verbatim
   question from the comparison table. Everything else is abstract bars.
   ========================================================================== */

.si-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}

/* The brand disc sits behind the card stack and is allowed to run past it. */
.si-stage__disc {
  position: absolute;
  z-index: 0;
  width: clamp(240px, 28vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  right: -8%;
  top: -6%;
}

.si-art {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-2);
  width: 100%;
  /* 🔴 min-width: 0 ON THE CHAIN. The SEO page records this at length: a grid
     item defaults to min-width:auto and refuses to shrink below its content, so
     one nowrap string inside sets a floor for the whole figure and the art runs
     off the screen while the document reports no overflow. */
  min-width: 0;
  max-width: 26rem;
  margin: 0;
}

/* -- the texted link ------------------------------------------------------ */
.si-art__sms {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: 10px var(--s-3);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-muted);
  /* Softer than the card's own elevation: the bubble is the smaller thing. */
  box-shadow: 0 1px 2px rgba(47, 47, 53, 0.06);
}

.si-art__sms-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--lime);
}

.si-art__sms-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- the question card ---------------------------------------------------- */
.si-art__card {
  min-width: 0;
  padding: var(--s-3);
  background-color: var(--white);
  border-radius: var(--r-render);
  box-shadow: var(--shadow-card);
}

.si-art__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.si-art__mark {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--petal);
}

.si-art__step {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Alie's verbatim product question. Sized as the card's own headline so the
   figure reads as a form and not as a quote. */
.si-art__q {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* The answer chips are deliberately WORDLESS. Putting plausible answers in
   them would be inventing the owner's words, and the adaptive branch is the
   point rather than any particular answer. */
.si-art__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.si-art__chip {
  width: clamp(56px, 22%, 84px);
  height: 26px;
  border-radius: var(--r-pill);
  background-color: var(--sky-soft);
}

.si-art__chip--on { background-color: var(--sky); }

.si-art__lines { display: grid; gap: 7px; }

.si-art__line {
  height: 7px;
  border-radius: 2px;
  background-color: var(--ink-08);
}

.si-art__line--short { width: 62%; }

/* -- what lands in the chart ---------------------------------------------
   Offset to the right so the stack reads as three moments rather than one
   panel, and tinted so it is plainly the practice's side of the product. */
.si-art__note {
  display: grid;
  gap: 7px;
  justify-self: end;
  width: 82%;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background-color: var(--sky-soft);
  border-radius: var(--r-render);
}

.si-art__note-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 🔴 MEASURED 11.54:1, NOT THE 12.6 THIS COMMENT FIRST CLAIMED. I carried
     that figure over from seo-content.css instead of measuring this pair, which
     is the trap this project has recorded five separate times: "contrast
     figures were written before being measured — five times, all wrong."
     Measure, then write the number. Comfortably over the 4.5 body floor either
     way, which is exactly why a wrong figure could have sat here unnoticed. */
  color: var(--ink);
}

.si-art__note-line {
  height: 7px;
  border-radius: 2px;
  background-color: var(--ink-12);
}

.si-art__note-line--short { width: 54%; }


/* ==========================================================================
   3. SETUP — a split, not a centred column

   ⏹ IT WAS CENTRED AND BREES CALLED IT PLAIN. Centred is right for the Google
   Ads manifesto, which is one line and nothing else; here it left a statement
   and two paragraphs stacked down the middle of a wide section. Every other
   page's second section carries a device, so this one gets a layout and the
   brand disc instead of borrowing a treatment that was not meant for it.
   ========================================================================== */

.si-setup {
  position: relative;
  background-color: var(--sky-soft);
  /* The disc bleeds off the left edge and must be cut, not allowed to widen
     the document. `clip`, never `hidden`. */
  overflow-x: clip;
}

.si-setup__disc {
  position: absolute;
  z-index: 0;
  width: clamp(260px, 30vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  left: -12%;
  bottom: -18%;
  /* Quiet enough that the copy over it keeps its measured contrast: the body
     text sits on --sky-soft either way, and the disc only tints the ground
     where nothing is set. */
  opacity: 0.5;
}

.si-setup__inner { position: relative; z-index: 1; }

.si-setup__head {
  max-width: 24ch;
  margin: 0 0 var(--s-5);
}

.si-setup__split { display: grid; gap: var(--s-4); }

@media (min-width: 900px) {
  /* The question leads and the paragraphs answer it, so the statement takes
     the larger column and they sit against it rather than under it. */
  .si-setup__split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
}

/* -- the statement --------------------------------------------------------
   The Google Ads manifesto's entrance, at this page's measure. Kept as a port
   rather than shared because the two lines want different measures: that one
   is six short words, this is a thirteen-word question. */
.si-statement {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  font-weight: 700;
  color: var(--ink);
  /* The rotateX below needs a perspective on the PARENT to read as depth.
     📌 Without it the rotation still applies, but as a flat vertical squash. */
  perspective: 700px;
}

/* 🔴 THE FROM-STATE IS GATED ON html[data-js="on"] AND THAT IS LOAD-BEARING.
   The words sit at opacity 0 only while the script that reveals them is
   running; with JS off the line is simply visible. blur-text-gads.js adds
   `.is-in` and nothing else — every timing lives here and in the per-word
   --w-* properties in the markup, because an animation written from JS paints
   its from-state late and flashes. */
html[data-js="on"] .si-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(var(--w-scale, 0.92)) rotateX(-15deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    opacity   var(--w-dur, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--w-delay, 0s),
    transform var(--w-dur, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--w-delay, 0s);
}

html[data-js="on"] .si-statement.is-in .si-word {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

.si-setup__copy {
  display: grid;
  gap: var(--s-3);
  max-width: 54ch;
}


/* ==========================================================================
   4. HOW IT WORKS — four cards on indigo, wired by the routing line

   The device is in product-devices.css and drawn by track-gads.js. What
   belongs to this page is the two-column layout, because the gap between the
   columns IS where the spine runs.
   ========================================================================== */

.si-how {
  position: relative;
  overflow-x: clip;
}

.si-how__grid { display: grid; gap: var(--s-4); }

.si-how__head {
  max-width: 18ch;
  margin: 0;
  color: var(--oat);
}

@media (min-width: 900px) {
  /* 🔴 track-gads.js MEASURES this gap rather than carrying its own constant,
     so changing it moves the spine with it. Do not introduce a second number.
     Same ratio and gap token as the Google Ads grid, so the line reads
     identically on both pages. */
  .si-how__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
}


/* ==========================================================================
   5. COMPARISON TABLE — two columns, one of them lit

   🔴 THE FIELD IS THE ARGUMENT, NOT DECORATION. Alie's section says standard
   forms collect what the computer needs and Spotlight asks what the visit
   needs. So the Spotlight column runs as one continuous --sky-soft field from
   its header to the last row, and the other column is left on the white
   ground with nothing. The page already uses --sky-soft as a whole section
   ground, so this introduces NO new colour.

   ⏹ NO BOX. The field has no border and no shadow; the rows are separated by
   hairlines only. That is the house no-boxes rule's one stated exemption, the
   same one .plan__row and the SEO pricing rows take.

   ⚠️ border-collapse: separate IS DELIBERATE. The field needs rounded outer
   corners, and border-radius on a cell is ignored under border-collapse, so
   the hairlines are drawn as per-cell border-bottom instead.

   📌 THE REVEAL IS ON THE TABLE, NOT PER ROW. `.reveal` animates opacity AND
   transform, and a transform on a <tr> is the kind of thing that renders
   three different ways. One reveal on the table, no stagger — a stagger is
   not worth a layout that behaves differently per engine.
   ========================================================================== */

.si-compare__head { max-width: 26ch; margin: 0; }

.si-compare__lead {
  max-width: 60ch;
  margin: var(--s-3) 0 0;
  color: var(--ink-muted);
}

.si-compare__close {
  max-width: 60ch;
  margin: var(--s-4) 0 0;
}

.si-cmp {
  width: 100%;
  margin-top: var(--s-4);
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

/* The column heads earn their hierarchy from size, weight, letter-spacing and
   uppercasing rather than from washed-out contrast — the house position
   base-v3 records where it explains why there is only ONE muted tier. */
.si-cmp__col {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: bottom;
  padding: var(--s-3) 0 var(--s-2);
}

.si-cmp__other,
.si-cmp__ours {
  vertical-align: top;
  font-weight: 400;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--ink-12);
}

.si-cmp__row:last-child .si-cmp__other,
.si-cmp__row:last-child .si-cmp__ours { border-bottom: 0; }

/* 🔁 9/17, Alie (review note 987607): "Can we reverse this, so spotlight is on the left and other intake forms
   are on the right? that way they read the good stuff first, left to right." The cells were swapped in the
   MARKUP, not with CSS ordering — this is a real <table>, so DOM order is the reading order, and her reason is
   about reading order, not just optics.
   🔴 THE GUTTER HAD TO SWAP SIDES WITH IT. This column used `padding-right` to hold the gap between the two;
   now that it is the SECOND column that padding was on its outer edge, against the table's right edge, leaving
   the two columns flush against each other in the middle. */
.si-cmp__other {
  width: 34%;
  padding-left: var(--s-4);
  font-size: var(--fs-body);
  color: var(--ink-muted);
}

/* -- the lit column ------------------------------------------------------- */
.si-cmp__col--ours,
.si-cmp__ours {
  background-color: var(--sky-soft);
  padding-inline: var(--s-3);
}

.si-cmp__ours {
  font-size: var(--fs-lead);
  color: var(--ink);
}

.si-cmp__col--ours {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.si-cmp__row:last-child .si-cmp__ours {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Alie's qualifiers sit outside her quote marks, so they are set outside them
   here too: muted, smaller, on their own line under the question. Moving one
   inside the quote would be rewriting her punctuation. */
.si-cmp__note {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* The per-row column labels, for the stacked layout only. */
.si-cmp__mini { display: none; }

/* -- stacked, below 760 ---------------------------------------------------
   🔴 TWO TEXT COLUMNS DO NOT FIT A PHONE. Each row becomes the plain label
   with the lit answer beneath it.

   🔴 AND THIS IS WHY THE MARKUP CARRIES EXPLICIT role= ATTRIBUTES. display:
   block strips a native table's implicit semantics, so without them the whole
   thing degrades to unrelated blocks exactly where the visual relationship is
   also gone. The roles restore what display took.

   🔴 THE HEADER ROW IS CLIPPED, NOT display:none. It is meaningless beside a
   stacked pair, but display:none would take it out of the accessibility tree
   as well and the columns would lose their names. Clipped, it still announces.
   ------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .si-cmp,
  .si-cmp thead,
  .si-cmp tbody,
  .si-cmp tr,
  .si-cmp th,
  .si-cmp td { display: block; }

  .si-cmp thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .si-cmp__row + .si-cmp__row { margin-top: var(--s-3); }

  .si-cmp__other {
    width: auto;
    padding: 0 0 var(--s-2);
    border-bottom: 0;
  }

  .si-cmp__ours,
  .si-cmp__row:last-child .si-cmp__ours {
    padding: var(--s-3);
    border-bottom: 0;
    border-radius: 20px;
  }

  .si-cmp__mini {
    display: block;
    margin-bottom: var(--s-1);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}


/* ==========================================================================
   6. WHERE SPOTLIGHT SHINES — two scenarios, divided by a rule

   ⏹ QUIET ON PURPOSE. Three sections above this one each carry a device — the
   hero artefact, the routing line, the lit column. This one is two short prose
   blocks, and giving it a fourth device would make the page a parade. The
   distinction is carried by a vertical hairline, the same call the SEO page
   records where its two columns lost their cards.

   📌 THE TITLE IS ALIE'S SECTION LABEL, PROMOTED ON BREES' CALL (9/2, "use
   her copy verbatim"). The scenario names sit under it as h3s. The reasoning,
   and why it was asked rather than assumed, is in build-smart-intake.py.
   ========================================================================== */

/* 🔵 LIGHT BLUE ON BREES' CALL (9/2). It is --sky-soft, the SAME token the
   setup section uses and the same one behind the comparison table's lit
   column — not a new blue. The page's ground sequence is now white / sky-soft
   / indigo / white / sky-soft, which reads as one alternation rather than five
   unrelated choices.

   ⚠️ THE HAIRLINE AND THE MUTED TEXT WERE RE-MEASURED ON THIS GROUND, NOT
   ASSUMED TO CARRY OVER. base-v3 records --ink-muted at 5.05:1 on oat, and oat
   is not what this section is any more. See the sweep result in the session
   notes rather than trusting this comment's memory of a number. */
.si-shines { background-color: var(--sky-soft); }

.si-shines__title { max-width: 20ch; margin: 0 0 var(--s-5); }

.si-shines__grid { display: grid; gap: var(--s-4); }

.si-shines__panel { max-width: 46ch; }

.si-shines__head { margin: var(--s-2) 0 0; }

.si-shines__body { margin: var(--s-3) 0 0; }

/* Decorative only — every panel is fully named by its heading, so no
   information rests on the colour (1.4.1). */
.si-shines__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.si-shines__dot--well { background-color: var(--lime); }
.si-shines__dot--sick { background-color: var(--petal); }

@media (min-width: 900px) {
  .si-shines__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }

  /* The rule sits on the SECOND panel rather than between the grid tracks, so
     it stays exactly one hairline at every width and disappears with the
     column when the layout stacks. */
  .si-shines__panel + .si-shines__panel {
    padding-left: var(--s-6);
    border-left: 1px solid var(--ink-12);
  }
}

@media (max-width: 899px) {
  /* Stacked, the vertical rule has nothing to divide, so the separation
     becomes a horizontal one. */
  .si-shines__panel + .si-shines__panel {
    padding-top: var(--s-4);
    border-top: 1px solid var(--ink-12);
  }
}


/* ==========================================================================
   7. REDUCED MOTION

   🔴 EVERY ENTRANCE RESOLVES TO ITS FINISHED STATE, NOT TO NOTHING. The words
   are at opacity 0 by default under data-js, so a reduced-motion rule that only
   cancelled the transition would leave the section blank.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .si-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}