/* ===========================================================================
   HOMEPAGE v2 — SECTIONS 1 + 2 (Brees, 9/15). Preview only.
   Animation + graphics from Brees' Claude Design "Homepage v3.dc.html";
   Section 2 keeps the CURRENT homepage format (graphic left, copy right).
   Tokens only: no hex, no ramped fills, no blur, no infinite animation.
   Contrast (computed): white on indigo 8.1:1 · lime on indigo 5.4:1 ·
   oat-75 on indigo 4.8:1 (all small UI text in the AI card) · ink-muted on
   white 5.5:1 · indigo on white 8.1:1 · petal-deep on white 3.47:1 (h2 only).
   =========================================================================== */

.ai { --ai-ground: var(--white); position: relative; background-color: var(--ai-ground); }

/* ---- GROUND VARIANTS (Brees 9/15 round 2: "I like the example hero I gave you and how the lines in the background
   weren't very dominant. I'm okay with this whole section here ending up being blue but I'd like to see a couple
   variations.") The ground runs through BOTH blocks of the pinned pane. ----
   .ai            white + the brand pattern disc (first pass)
   .ai--mockup    the comp: warm white (#FFFDF9 -> oat 22% into white), the line pattern full-bleed at 760px, faded
                  out behind the copy. ⚠️ The fade is a MASK ramp — the comp's white overlay ramp, rebuilt. brand-devices
                  says no ramped fills and verify.js would fail this in assets/css; it lives in _preview on purpose
                  until Brees picks. /blue shows the no-ramp alternative.
   .ai--blue      sky-soft ground, the same pattern even and faint (no ramp; the copy's knock-out keeps lines off
                  the words). sky-soft, not sky: the products section right below is --sky, and the same colour
                  would erase its top-left corner.
   Contrast on sky-soft: ink 12.3:1 · ink-muted 5.3:1 · petal-deep 3.1:1 (h2, large text only). */
/* ⏹ .ai--mockup RETIRED 9/15 (Brees: "retire the mock up"). Its last state was a white ground + a --sky-soft panel
   with one big top-left corner; he liked the blue but not the shape, and preferred the white version's circle. */
.ai--blue { --ai-ground: var(--sky-soft); }
.ai__field {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/brand/line-pattern.png");
  background-repeat: repeat;
  background-size: 760px;
  pointer-events: none;
}
.ai--blue .ai__field { display: block; }
.ai--blue .ai__pattern { display: none; }
.ai--blue .ai__field { opacity: 0.3; }

/* Track + corner pad-out, same mechanics as .sh on the live homepage
   (home-sections.css): the products section pulls up over the padding. */
.page-home .ai:not(.is-static) {
  box-sizing: border-box;
  height: calc(200vh + var(--corner));
  padding-bottom: var(--corner);
}

.ai__pane {
  position: sticky;
  top: var(--hdr-h-min);
  height: calc(100vh - var(--hdr-h-min));
  /* svh after vh (9/17 responsive pass): the pin runs from 900px up, which includes iPad landscape, where 100vh is
     the toolbar-hidden height and the bottom of the pane sat under Safari's toolbar. svh == vh on desktop. */
  height: calc(100svh - var(--hdr-h-min));
  overflow: clip;
  isolation: isolate;
  background-color: var(--ai-ground);
}

/* ------------------------------------------------------------ copy layers */
.ai__layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center start;
  padding: 0 max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  pointer-events: none;
}
.ai__layer--two { z-index: 4; opacity: 0; place-items: center end; }
.ai__inner { max-width: min(560px, 46vw); }
/* The journey line runs in from off-screen left BEHIND the hero copy (the comp hid it under a white ramp; ramps are
   off-brand). A solid white backing with a 32px white spread knocks the line out around the words only. */
.ai:not(.is-static) .ai__layer--one .ai__inner { background-color: var(--ai-ground); box-shadow: 0 0 0 16px var(--ai-ground); }
/* 🔁 Not on the patterned grounds: there the knock-out read as a blank rectangle cut out of the pattern (measured in
   the blue frame, 9/15). The stage is held right of the copy (home-v2.js measure), so the line's drops stay clear of
   the words; only the off-screen lead-in runs left of it, above the copy. */
.ai--blue .ai__layer--one .ai__inner { background-color: transparent; box-shadow: none; }

.ai__h1 { margin: 0; font-size: min(clamp(2.25rem, 4.6vw, 4.25rem), 8.5vh); line-height: 1.04; }
/* 🔁 9/18 (responsive list #3): SHORT LAPTOPS. At 1536x700 (a 1080p screen at Windows' 125%) the copy block measured
   482px against 523px visible under the header, so centring left the H1 20px under it. The copy cannot fit with more
   air at 8.5vh (5 lines × 59.5px), so on ≤760px-tall screens only the headline's HEIGHT cap tightens to 7.5vh.
   Everything at 761px tall and up — 1366x768, 1440x900 and taller — is untouched. */
@media (min-width: 900px) and (max-height: 760px) {
  .ai__h1 { font-size: min(clamp(2.25rem, 4.6vw, 4.25rem), 7.5vh); }
}
/* 🔁 LIGHT PINK TEXT, NO BAND — Brees 9/15: "remove the pink line under different. Change it so the text is the
   light pink." 🔴 KNOWN WCAG FAILURE, BREES' CALL: --petal on white measures 1.70:1 — under the 3:1 large-text
   minimum (the reason the live homepage uses the band). Flagged to him with the passing alternative, --petal-deep
   (3.47:1, the "Be Different." colour). Do not ship past a preview without his explicit sign-off on the number. */
/* 🔁 9/17, Brees: "remove the pink from the word and instead let's do a green underline like we've done on other pages."
   Same device as Pricing's "Free" rows (.pr-free) and Google Ads' statement: a flat LIME band under the word via a
   hard inset shadow (verify.js bans gradients), ink text on it. The petal-on-white 1.70:1 failure above goes away:
   ink on white 13.3, ink on lime 8.95. clone keeps the band on both halves if the word ever wraps. */
.ai__em {
  color: inherit;
  box-shadow: inset 0 -0.3em 0 var(--lime);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ai__sub { margin: var(--s-3) 0 0; max-width: 46ch; }
.ai__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; pointer-events: auto; }
.ai .btn--line { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ai .btn--line:hover { background-color: var(--ink); color: var(--oat); }

.ai__h2 { margin: 0; font-size: min(clamp(1.75rem, 3.4vw, 3rem), 7vh); line-height: 1.08; }
/* 🔁 NO COLOUR — Brees 9/16 (later): "Don't have them be different. Remove the pink." Both halves of the heading
   are ink. (Was --petal, 1.70:1 on white — a known WCAG failure that goes away with this.) The span stays so the
   copy gates keep matching the markup. */
.ai__turn { color: inherit; }
.ai__p { margin: 18px 0 0; color: var(--ink-muted); }
.ai__p--close { color: var(--ink); font-weight: 500; }
.ai__quote { margin: 26px 0 0; }
.ai__quote blockquote { margin: 0; }
.ai__quote p { margin: 0; color: var(--ink); font-style: italic; }
.ai__quote figcaption { margin-top: 6px; color: var(--ink-muted); font-size: var(--fs-small); }

/* -------------------------------------------------------- pattern + stage */
.ai__pattern {
  /* 🔁 SOFTENED — Brees 9/15: "I do like the home-v2 but feel the blue pattern so small is very busy", then "Still
     feel like the blue circle is very strong. I like the mock up blue". The mockup panel's look = --sky-soft with the
     760px tile showing at roughly a third. .pattern-circle paints the tile at full strength on the same element, and
     opacity would fade the blue with it, so the tile moves to ::before at 0.35 and the disc keeps a flat --sky-soft.
     Page-local: .pattern-circle elsewhere is unchanged. */
  background-image: none;
  overflow: hidden;
  z-index: 0;
  width: min(62vw, 880px);
  aspect-ratio: 1;
  right: max(-16vw, -240px);
  top: 50%;
  translate: 0 -50%;
}

.ai__pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("../img/brand/line-pattern.png");
  background-repeat: repeat;
  background-size: 760px;
  opacity: 0.35;
}

.ai__stack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(52%, 760px);
  pointer-events: none;
}
.ai__stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }   /* size + card positions inline, from build.py */
.ai__svg { position: absolute; inset: 0; overflow: visible; }

/* The line is a quiet neutral; the colour lives in the dots (the brand pattern's own rule). */
.ai__line {
  fill: none;
  /* ⚠️ Briefly darkened to 55% / 2.5 on a WRONG diagnosis ("it blends into the pattern"). The line was invisible
     because the SVG had 0px width (see clearInline in home-v2.js), not because of its colour. Back to 32% / 2 —
     closer to the comp's light #C9C2B2 line. Only change this against a frame where the line actually renders. */
  stroke: color-mix(in srgb, var(--ink) 32%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  /* 🔴 THE DRAW IS JS, NOT A CSS ANIMATION. The round-2 keyframes read the length from var(--len) and Chrome does not
     interpolate through var() in @keyframes — sampled 9/15: dashoffset jumped 5087 -> 4287 (held 3s) -> 0, so the
     WHOLE line popped in at ~4.9s while the tip was still on row two. No journey. home-v2.js now sets the dash and
     advances it in the same frame as the tip, so the line grows right behind the dot. With JS off or reduced motion
     nothing sets a dash, so the line simply shows complete. */
}
/* No flash of the finished line before home-v2.js arms the draw (html.ai-js is set by an inline script ahead of the
   section; .is-armed is added by home-v2.js once the dash hides the line). */
.ai-js .ai:not(.is-armed) .ai__line { opacity: 0; }
.ai__node { opacity: 0; animation: ai-fade 0.35s ease-out var(--d, 0s) both; }
.ai__node--lime { fill: var(--lime-deep); }
.ai__node--sky { fill: var(--sky-deep); }
.ai__node--marigold { fill: var(--marigold); }
.ai__node--petal { fill: var(--petal-deep); }
.ai__tip { fill: var(--marigold); opacity: 0; }

.ai .anim { animation: ai-in 0.6s ease-out var(--d, 0s) both; }
/* JS arms the intro and starts it when the renders are on screen (always, in pinned mode).
   Without JS nothing is paused, so nothing is left invisible. */
.ai.is-armed:not(.is-playing) :is(.anim, .ai__node) { animation-play-state: paused; }

@keyframes ai-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ai-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ light cards */
.ai__win {
  position: absolute;
  width: 300px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ink-10);
  border-radius: 10px;
  background-color: var(--white);
  box-shadow: 0 14px 34px rgb(47 47 53 / 0.10);
  font-family: var(--font-body);
}
.ai__search { padding: 16px 18px; }

.ai__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oat-75);
}
.ai__label--ink { margin-bottom: 11px; color: var(--ink-muted); }

.ai__field-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--ink-12);
  border-radius: 99px;
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}
.ai__field-icon { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ink-muted); border-radius: 50%; }
.ai__result { margin-top: 14px; }
.ai__domain { margin-bottom: 5px; color: var(--ink-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ai__title { color: var(--indigo); font-size: 13px; font-weight: 600; line-height: 1.35; }
.ai__desc { margin-top: 6px; color: var(--ink-muted); font-size: 11px; line-height: 1.5; }

.ai__map { display: block; width: 100%; height: 112px; }
.ai__map-ground { fill: var(--oat); }
.ai__map-grid path { stroke: var(--ink-08); stroke-width: 1; }
.ai__map-road { fill: var(--oat-deep); }
.ai__map-other { fill: color-mix(in srgb, var(--ink) 40%, transparent); }
.ai__map-halo { fill: color-mix(in srgb, var(--marigold) 22%, transparent); }
.ai__map-pin { fill: var(--marigold); }
.ai__maps-body { padding: 14px 16px; }
.ai__maps-body .ai__label--ink { margin-bottom: 8px; }
.ai__maps-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ai__maps-name { color: var(--ink); font-size: 13px; font-weight: 600; }
.ai__maps-mi { flex: none; color: var(--ink-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ------------------------------------------------------------- AI card */
.ai__panel {
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--indigo);
  box-shadow: 0 20px 48px rgb(47 47 53 / 0.30);
  color: var(--white);
  font-family: var(--font-body);
}
.ai__ph { position: absolute; visibility: hidden; }
.ai__panel--ph { position: absolute; inset: 0; }

.ai__card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 300px;
  height: 196px;
  pointer-events: none;
  will-change: transform;
}
.ai__cue { position: absolute; inset: 0; }

.ai__compact {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  box-sizing: border-box;
  width: 300px;
  height: 196px;
  padding: 17px 19px;
  transform-origin: 0 0;
}
.ai__big {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  box-sizing: border-box;
  width: 520px;
  height: 400px;   /* comp 371 — Altivo sets taller than DM Sans and clipped the third source row */
  padding: 26px 28px;
  transform-origin: 0 0;
  opacity: 0;
}

.ai__row { display: flex; align-items: center; gap: 8px; }
.ai__row--split { justify-content: space-between; gap: 16px; }
.ai__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background-color: var(--sky); }
.ai__q { color: var(--oat-75); font-size: 11.5px; }
.ai__q--big { font-size: 13.5px; line-height: 1.45; }
.ai__a { color: var(--white); font-size: 13px; line-height: 1.55; }
.ai__a--big { font-size: 16px; }
.ai__name { color: var(--lime); font-weight: 600; }
.ai__sup { color: var(--lime); font-size: 11px; }
.ai__rule { height: 1px; background-color: var(--oat-14); }
.ai__sources { display: grid; gap: 8px; }
.ai__src { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: var(--oat-75); font-size: 12.5px; }
.ai__src-n { width: 10px; font-size: 11px; font-weight: 600; }
.ai__src-name { flex: 1; }
.ai__src--first {
  padding-block: 10px;
  border: 1px solid var(--lime);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--lime) 14%, var(--indigo));
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.ai__src--first .ai__src-n { color: var(--lime); }
.ai__pill {
  padding: 4px 9px;
  border: 1px solid var(--lime);
  border-radius: 99px;
  color: var(--lime);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Section 2's own copy of the big card: static mode only. */
.ai__cite-static { display: none; }

/* --------------------------------------------------------- STATIC MODE
   Under 900px and under reduced motion (JS adds .is-static): no pin, no
   flight. Copy, then the renders (compact AI card in place), then block two
   with the "Cited first" graphic above its copy. */
.ai.is-static { height: auto; }
.ai.is-static .ai__pane {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  overflow-x: clip;
  padding-top: var(--s-5);
}
.ai.is-static .ai__layer {
  position: relative;
  inset: auto;
  display: block;
  padding: 0 20px;
  text-align: center;
  pointer-events: auto;
  opacity: 1;
}
.ai.is-static .ai__inner { max-width: 640px; margin-inline: auto; }
.ai.is-static .ai__ctas { justify-content: center; }
.ai.is-static .ai__pattern,
.ai.is-static .ai__card { display: none; }
.ai.is-static .ai__stack {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 860px;
  margin-top: var(--s-5);
  overflow: hidden;
}
.ai.is-static .ai__ph { visibility: visible; }
.page-home .ai.is-static .ai__layer--two {
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--corner));
  background-color: var(--ai-ground);
}
.ai.is-static .ai__cite-static {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  height: 400px;
  margin: 0 auto var(--s-5);
  text-align: left;
}
.ai.is-static .ai__big--static { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ai .anim, .ai__node, .ai__line { animation: none; }
  .ai__node { opacity: 1; }
  .ai__line { stroke-dashoffset: 0; }
  .ai__tip { display: none; }
}