/* ============================================================
   Keel marketing — canonical type scale + responsive grid fixes
   Loaded AFTER each page's inline <style> (just before keel-amanda.css),
   so equal-specificity rules win by source order and impose one
   consistent, fluid scale across every page. Selectors mirror the
   inline ones (h1.hero-h / h2.sec-h) so they override, not lose.
   Headings = Hanken (var(--sans)) 600; serif stays scoped to captions.
   ============================================================ */

/* --- Display + headings: fixed-px desktop sizes -> fluid clamp ---
   Upleveled to a bigger, Lattice-grade scale (2026-06) for confident,
   effortless readability. Headlines + body both step up a notch. --- */
h1.hero-h, .hero-h{
  font-size:clamp(40px,6.7vw,68px);
  font-weight:600; letter-spacing:-.023em; line-height:1.0;
}
h2.sec-h, .sec-h{
  font-size:clamp(33px,4.8vw,50px);
  font-weight:600; letter-spacing:-.021em; line-height:1.04;
}
.close-h{
  font-size:clamp(37px,5.4vw,58px);
  font-weight:600; letter-spacing:-.023em; line-height:1.03;
}
.oc-h{
  font-size:clamp(33px,4.2vw,47px);
  font-weight:600; letter-spacing:-.021em; line-height:1.04;
}

/* --- Leads / subheads: bigger + airier body copy (the readability win) --- */
.hero-sub{ font-size:clamp(19px,1.75vw,23px); line-height:1.55; }
.sec-sub{ font-size:clamp(18px,1.6vw,22px); line-height:1.58; }

/* --- Stat values: one size each, tabular --- */
.oc-v{
  font-size:clamp(40px,5vw,54px);
  font-weight:600; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.sv{
  font-size:clamp(24px,2.4vw,29px);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}

/* --- Eyebrow: standardize the accent color (pages that set an inline
       style="color:..." on dark panels keep their override) --- */
.eyebrow{ color:var(--accent); }

/* ============================================================
   Device-frame system — one browser chrome + one phone bezel
   across every product mockup, sitewide. Window radius (18px) +
   traffic-light dots (11px) were already uniform; this aligns the
   chrome bar, URL pill, and phone bezel that drifted page to page.
   (display: left to each page so intentionally-hidden chromes stay
   hidden; width/padding left to layout.)
   ============================================================ */
.chrome, .dchrome{ height:42px; background:#F3F1EC; border-bottom:1px solid var(--hair); align-items:center; gap:7px; padding:0 15px; }
.cdot{ width:11px; height:11px; border-radius:50%; flex:none; }
.curl, .durl{ height:24px; border-radius:7px; font-size:11.5px; gap:7px; padding:0 11px; background:#fff; border:1px solid var(--hair); color:var(--muted); align-items:center; }
.phone{ background:#0E1116; border-radius:44px; box-shadow:0 44px 100px -30px rgba(46,40,120,.5), 0 14px 34px -14px rgba(16,19,28,.42); }

/* ============================================================
   #10 — Ink-wash page transitions (cross-document View Transitions).
   Progressive enhancement: supporting browsers bloom the new page in
   over a faint accent-tinted backdrop (tints to the destination's
   --accent); everyone else just navigates. Excluded under reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition{ background: color-mix(in srgb, var(--accent,#4F46E5) 9%, #FBFAF7); }
  ::view-transition-old(root){ animation: kInkOut .34s var(--ease, ease) both; }
  ::view-transition-new(root){ animation: kInkIn .55s var(--ease, ease) both; }
  @keyframes kInkOut{ to{ opacity:0 } }
  @keyframes kInkIn{ from{ opacity:0; clip-path: circle(0% at 50% 40%) } to{ opacity:1; clip-path: circle(140% at 50% 40%) } }
}

/* ============================================================
   Tour CTA — interactive "Try it yourself" affordance.
   /tour is a live, click-through sandbox (not a video), so the icon
   is a cursor (set in markup) and a green "live" pulse dot signals a
   running thing. We override the per-page .btn-tour .playc (which
   still owns size/shadow): add positioning + kill the old play-glyph
   nudge. Pulse is excluded under reduced-motion.
   ============================================================ */
.btn-tour .playc{ position:relative; overflow:visible; }
.btn-tour .playc svg{ margin-left:0; }
@media (prefers-reduced-motion:no-preference){
  /* the cursor "touches water" — a soft indigo ring ripples out of the
     circle on a slow loop, like a drop on the surface. (Replaces the old
     notification-style green dot.) */
  .btn-tour .playc::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    border:1.5px solid var(--indigo,#4F46E5); pointer-events:none;
    animation:kTourRipple 3s ease-out infinite;
  }
  @keyframes kTourRipple{
    0%{ transform:scale(1); opacity:.55; }
    70%{ transform:scale(1.62); opacity:0; }
    100%{ transform:scale(1.62); opacity:0; }
  }
}

/* ============================================================
   Suite-mosaic arrows: a rare, gentle rightward "tug" — one arrow
   at a time, random card, random cadence (JS in keel-amanda.js) —
   whispers "these cards are tappable." Excluded under reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .srich .arr.nudge{ animation:kArrNudge .72s ease; }
  @keyframes kArrNudge{
    0%,100%{ transform:translateX(0); }
    28%{ transform:translateX(3px); }
    52%{ transform:translateX(0); }
    76%{ transform:translateX(2px); }
  }
}

/* ============================================================
   Mobile no-blowout guard. The Amanda / spotlight / calculator
   sections collapse to one column on phones, but a plain `1fr`
   column still grows to its widest child (the Amanda activity feed
   has non-wrapping content), pushing past the viewport and breaking
   left-right scroll. minmax(0,1fr) lets the column shrink; min-width:0
   + max-width on the children keeps cards inside the screen.
   ============================================================ */
@media (max-width:760px){
  .amanda,.spot,.calc{ grid-template-columns:minmax(0,1fr); }
  .amanda>*,.spot>*,.calc>*{ min-width:0; max-width:100%; }
  .amanda .lead,.spot .lead,.calc .lead{ max-width:100%; }
  .amanda .feed{ max-width:100%; overflow:hidden; }
}

/* ============================================================
   Responsive grid fixes (the tablet "dead zone" + phone tier)
   ============================================================ */

/* Tablet / small-laptop: multi-col marketing grids -> 2-up
   (was holding 3/4-up until 680px). */
@media (max-width:1024px){
  .oc-stats, .bt-grid{ grid-template-columns:repeat(2,1fr); }
  /* audience-template grids (brokers / meet-amanda / preview) */
  .odo, .mosaic{ grid-template-columns:repeat(2,1fr); }
}

/* Phone tier: collapse the last 2-up grids + tighten the dark footer */
@media (max-width:430px){
  .dstats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .bigfoot .wrap{ padding:0 20px; }
}