/* ===========================================================================
   product-devices.css — devices shared by the product pages
   ---------------------------------------------------------------------------
   Extracted from google-ads.css on 9/2 so the Smart Intake page can use the
   SAME devices rather than lookalikes: the spine-and-spurs step list, and the
   hero stat row. brand-devices.md: the Infographic is
   natively "four labels ... wired together by the routing line", so a
   four-card section is the device's own shape on both pages.

   🔴 THE CLASS NAMES KEEP THEIR ORIGINAL SPELLING, INCLUDING THE .gads- PREFIX
   ON ONE OF THEM. Renaming would have meant editing shipped Google Ads markup
   for a cosmetic gain; the prefix is now a misnomer and this note is the
   apology. What matters is that there is ONE copy of these rules.

   ⚠️ LOAD ORDER: this sheet goes BEFORE the page sheet on every page that uses
   it, so a page-specific override still wins on source order.
   ⚠️ track-gads.js draws the line and MEASURES the layout gap rather than
   carrying its own constant — the grid that creates that gap stays with each
   page, because the two pages lay their columns out differently.
   =========================================================================== */

.gtrack {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gstep {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  align-items: baseline;
}

.gstep__dot {
  /* 12px and the -0.35em nudge are VCI's rendered values, measured — not
     the 14px its stylesheet declares, which a later rule overrides. */
  width: 12px;
  height: 12px;
  margin-bottom: 0;
  border-radius: 50%;
  transform: translateY(-0.35em);
}

.gstep__label,
.gstep__text { grid-column: 2; }

/* 9/10 type rule: h3 takes the BODY face. See base-v3.css .t-h3. */
.gstep__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  /* Full oat on indigo, measured 7.01. */
  color: var(--oat);
}

.gstep__text {
  margin: 0;
  /* oat at 0.75 on indigo, measured 4.77. ⚠️ NOT --ink-muted, which the white
     build used — that is an INK alpha and is 1.6 on this ground, i.e. gone. */
  color: var(--oat-75);
}

.gads-how__items {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* -- the hero stat row ---------------------------------------------------
   Three figures under a hero CTA. Google Ads and Smart Intake both carry one,
   with the same shape: a magnitude, a label, centred and wrapping. */

.gads-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gads-stat { text-align: center; }

.gads-stat__fig {
  display: block;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.gads-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--ink);
  /* 0.72 on white measures 5.46. Below ~0.65 this drops under 4.5. */
  opacity: 0.72;
}


/* -- the device's colour and its entrance --------------------------------
   🔴 MOVED HERE 9/2 AFTER SHIPPING THE DEVICE WITHOUT THEM. The first
   extraction took the geometry and left these behind in google-ads.css, so the
   Smart Intake page rendered a correctly-drawn rail and four correctly-drawn
   spurs that were all invisible: no stroke, no dot fill. The line existed in
   the DOM and measured fine — `rail d` was 142 characters and all four spurs
   reported drawn — which is exactly the kind of green measurement that hides a
   blank screen. **A device is its colour as much as its geometry.**

   The four accents run petal / lime / marigold / clay in order, and each spur
   carries the same accent as the dot it runs to, so the line and its marker
   read as one thing.

   ⚠️ The sequence reveal answers to BOTH .gads-seq and [data-track-seq]. Only
   the alias is used off the Google Ads page. */

.gstep:nth-child(1) .gstep__dot { background-color: var(--petal); }

.gstep:nth-child(2) .gstep__dot { background-color: var(--lime); }

.gstep:nth-child(3) .gstep__dot { background-color: var(--marigold); }

.gstep:nth-child(4) .gstep__dot { background-color: var(--clay); }

.gtrack__rail { stroke: var(--v3-track-on-indigo); }

html[data-js="on"] [data-g-spur] {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.45s ease;
}

html[data-js="on"] [data-g-spur].is-drawn { stroke-dashoffset: 0; }

[data-g-spur="0"] { stroke: var(--petal); }

[data-g-spur="1"] { stroke: var(--lime); }

[data-g-spur="2"] { stroke: var(--marigold); }

[data-g-spur="3"] { stroke: var(--clay); }

html[data-js="on"] .gads-seq,
html[data-js="on"] [data-track-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"] .gads-seq.is-in,
html[data-js="on"] [data-track-seq].is-in {
  opacity: 1;
  transform: none;
}

html.g-measuring .gads-seq,
html.g-measuring [data-track-seq] {
  opacity: 1;
  transform: none;
  transition: none;
}