/* ============================================================
   THEME: Curator Now 2026 — dark navy / lime / purple redesign.
   Loads AFTER activaire-ds.css + the per-page <style>. Swappable —
   mirrors the pattern in theme-activaire.css, targeting the same
   av-* component classes with new on-brand values.

   Source: design_handoff_curator_now_site/README.md design tokens.
     Canvas   #0A0818 near-black navy      Panels #0E0C22 / #13102A
     Primary accent — lime #D2FA3D solid; gradient linear-gradient(180deg,#E4FF70,#C3EC2B)
     Purple (brand) #5F00BA               Purple (UI accent) #9B6BE0
     Purple (grape, headline accent) #B375F0 / #9B51E1 / #7A3CC9
     Type Tondo (self-hosted)             Buttons: lime pill, 999px radius
     Cards: dark panel, hairline border, 12-18px radius
   ============================================================ */

/* ---- Fonts: self-hosted Tondo, replaces Typekit dependency ---- */
@font-face{font-family:'Tondo';src:url('fonts/Tondo_Rg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Tondo';src:url('fonts/Tondo_Bd.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap}

/* ---- Shared keyframes: referenced by inline `animation:` styles across every
   converted page (equalizer bars, live-pulse dots, marquee strips, typing
   cursor, curator-card float) but never defined per-page since the design
   export's own <style> block (which held these) gets stripped during
   conversion. Defining them once here, globally, fixes all of them at once. ---- */
@keyframes cn-eq1{0%,100%{height:30%}50%{height:95%}}
@keyframes cn-eq2{0%,100%{height:80%}40%{height:25%}}
@keyframes cn-eq3{0%,100%{height:50%}60%{height:100%}}
@keyframes cn-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes cn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cn-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cn-arc{0%{stroke-dashoffset:340}100%{stroke-dashoffset:0}}
@keyframes cn-badge{0%{opacity:0;transform:scale(0.86)}100%{opacity:1;transform:scale(1)}}
@keyframes cn-caret{0%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes cn-cursor-float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
@keyframes cn-fb-cursor{0%{left:330px;top:288px;transform:rotate(-14deg) scale(1)}30%{left:96px;top:168px;transform:rotate(-14deg) scale(1)}35%{left:96px;top:168px;transform:rotate(-14deg) scale(0.8)}45%{left:96px;top:168px;transform:rotate(-14deg) scale(1)}80%{left:96px;top:168px;transform:rotate(-14deg) scale(1)}100%{left:330px;top:288px;transform:rotate(-14deg) scale(1)}}
@keyframes cn-fb-glow{0%,30%,100%{box-shadow:0 0 0 0 rgba(139,92,214,0);transform:scale(1)}35%{box-shadow:0 0 0 6px rgba(139,92,214,0.35);transform:scale(1.015)}50%{box-shadow:0 0 0 14px rgba(139,92,214,0);transform:scale(1)}}
@keyframes cn-fb-ripple{0%,30%,60%,100%{transform:translate(-50%,-50%) scale(0);opacity:0}35%{transform:translate(-50%,-50%) scale(1);opacity:0.85}50%{transform:translate(-50%,-50%) scale(9);opacity:0}}
@keyframes cn-fb-tap{0%,32%,60%,100%{opacity:0;transform:translateY(-50%) scale(0.85)}38%,55%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes cn-fill{from{width:0}to{width:100%}}
@keyframes cn-flow{from{stroke-dashoffset:36}to{stroke-dashoffset:0}}
@keyframes cn-gauge{0%{transform:rotate(-90deg)}100%{transform:rotate(40deg)}}
@keyframes cn-ping{0%{transform:scale(0.5);opacity:0.9}100%{transform:scale(2.6);opacity:0}}
@keyframes cn-prog{0%{width:14%}100%{width:63%}}
@keyframes cn-sched-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.6}}
@keyframes cn-stepin{from{opacity:0.25;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes cn-sticker-1{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-7px)}}
@keyframes cn-sticker-2{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes cn-sticker-3{0%,100%{transform:rotate(15deg) translateY(0)}50%{transform:rotate(15deg) translateY(-8px)}}
@keyframes cn-window-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cn-glow-pulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(0.92)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}

:root{
  /* raw palette */
  --cn-bg:#0A0818; --cn-bg-panel:#0E0C22; --cn-bg-panel-2:#13102A;
  --cn-lime:#D2FA3D; --cn-lime-grad:linear-gradient(180deg,#E4FF70,#C3EC2B);
  --cn-purple:#5F00BA; --cn-purple-light:#9B6BE0; --cn-purple-grape:#B375F0;
  --cn-ink-on-light:#1A1106;
  --cn-body-60:rgba(255,255,255,.6); --cn-body-50:rgba(255,255,255,.5); --cn-meta-40:rgba(255,255,255,.4);
  --cn-hairline:rgba(255,255,255,.1);
  /* category accents (section/badge color-coding, not brand-critical) */
  --cn-blue:#93C5FD; --cn-cyan:#4DD6FC; --cn-pink:#FF70C4; --cn-coral:#FF8C69;
  --cn-teal:#3BABA1; --cn-teal-lt:#5FD3C8; --cn-mint:#7EE7A3; --cn-yellow:#FFE93D;

  /* remap av-* tokens so component internals land on-brand */
  --av-font:'Tondo','tondo',system-ui,sans-serif !important;
  --av-navy:var(--cn-bg) !important;
  --av-purple:var(--cn-purple) !important;
  --av-teal:var(--cn-lime) !important;   --av-teal-300:var(--cn-lime) !important;
  --av-tint:var(--cn-bg-panel) !important;
  --av-ink:#fff !important;              --av-ink-60:var(--cn-body-60) !important;
  --av-white-70:var(--cn-body-60) !important; --av-white-55:var(--cn-body-50) !important;
  --av-amber:var(--cn-lime) !important;  --av-orange:var(--cn-purple-grape) !important;
  --av-blue:var(--cn-blue) !important;   --av-grape:var(--cn-purple-grape) !important;
  --av-r-btn:999px !important; --av-r-card:18px !important; --av-r-lg:20px !important;
  --av-shadow:0 16px 34px rgba(0,0,0,.35) !important;
  --av-shadow-sm:0 8px 20px rgba(0,0,0,.28) !important;
}

/* Dark canvas behind the whole page */
body.av{ background:var(--cn-bg) !important; }

/* ---- TYPOGRAPHY ---- */
.av h1,.av h2,.av h3{ letter-spacing:-.03em; }
.av h1 .grape,.av h2 .grape{ color:var(--cn-purple-grape) !important; }
.av-eyebrow{ font-family:ui-monospace,Menlo,monospace !important; font-size:11px !important;
  letter-spacing:.14em !important; }
.av-underline{ background-image:linear-gradient(transparent 68%,rgba(210,250,61,.35) 68%,rgba(210,250,61,.35) 92%,transparent 92%) !important; }

/* ---- SECTION BANDS ---- */
.av-section--tint{ color:#fff !important; }
.av-section--tint h1,.av-section--tint h2,.av-section--tint h3{ color:#fff !important; }
.av-section--purple{ background:var(--cn-purple) !important; }
.av-section--navy{ background:var(--cn-bg) !important; }

/* ---- CARDS: dark panel, hairline border ---- */
.av-card{ background:var(--cn-bg-panel) !important; color:#fff !important;
  border:1px solid var(--cn-hairline) !important; box-shadow:var(--av-shadow) !important; }
.av-card__title{ color:#fff !important; }
.av-card__body{ color:var(--cn-body-60) !important; }

/* ---- BUTTONS: lime pill primary ---- */
.av-btn.av-btn--primary{ background:var(--cn-lime-grad) !important; color:#0E0C22 !important;
  font-weight:700 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 20px rgba(210,250,61,.3) !important; }
.av-btn.av-btn--primary:hover{ background:#fff !important; filter:none !important; }
.av-btn.av-btn--ghost{ border:1px solid rgba(255,255,255,.25) !important; background:rgba(255,255,255,.04) !important; color:#fff !important; }
.av-btn.av-btn--ghost:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; }
.av-btn.av-btn--white{ background:#fff !important; color:var(--cn-ink-on-light) !important; }

/* ---- CHIPS ---- */
.av-chip{ border-color:rgba(255,255,255,.28) !important; color:#fff !important; }
.av-chip--on{ background:var(--cn-lime) !important; border-color:var(--cn-lime) !important; color:#0E0C22 !important; font-weight:700 !important; }
.av-section--tint .av-chip{ border-color:rgba(255,255,255,.28) !important; color:#fff !important; }

/* ---- FAQ ACCORDION ---- */
.av-acc{ border-top-color:var(--cn-hairline) !important; }
.av-acc details{ border-bottom-color:var(--cn-hairline) !important; }
.av-acc summary{ color:#fff !important; }
.av-acc summary::after{ color:var(--cn-lime) !important; }
.av-acc .ans{ color:var(--cn-body-60) !important; }

.av-faq-caps details{ background:var(--cn-bg-panel) !important; border:1px solid var(--cn-hairline) !important; box-shadow:none !important; }
.av-faq-caps summary{ color:#fff !important; }
.av-faq-caps summary::after{ background:var(--cn-lime) !important; color:#0E0C22 !important; }
.av-faq-caps .ans{ color:var(--cn-body-60) !important; }

/* ---- LOGO STRIP ---- */
.av-logos img{ filter:brightness(0) invert(1) !important; opacity:.6 !important; }

/* ---- FOOTER ---- */
.av-footer__contact{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:44px 0; border-bottom:1px solid var(--cn-hairline); }
.av-footer__contact-h{ font-weight:800; font-size:24px; letter-spacing:-.025em; margin-bottom:4px; color:#fff; }
.av-footer__contact-sub{ font-size:14.5px; color:var(--cn-body-60); }
.av-footer__contact-btns{ display:flex; gap:10px; }
.av-footer__contact-btns a{ display:inline-flex !important; margin-bottom:0 !important; }
.av-footer{ background:var(--cn-bg) !important; border-top:1px solid var(--cn-hairline); padding-top:0 !important; }
/* sitemap grid: match design spacing (44px top / 40px bottom) so columns aren't smashed against the contact-band divider */
.av-footer__grid{ padding-top:44px !important; padding-bottom:40px !important; }
.av-footer h4{ color:var(--cn-purple-light) !important; }
.av-footer h5{ color:var(--cn-purple-light) !important; }
/* sitemap columns stack their links; each link is inline-block so the hover
   highlight hugs the text (matches design footer link treatment) */
.av-footer__col{ display:flex; flex-direction:column; align-items:flex-start; }
.av-footer__grid a{ display:inline-block !important; color:var(--cn-body-60) !important;
  padding:4px 7px !important; margin:0 -7px 2px !important; border-radius:7px !important;
  line-height:1.4; transition:background .2s,color .2s !important; }
.av-footer__grid a:hover{ color:#fff !important; background:rgba(255,255,255,.06) !important; }
.av-footer__tagline{ color:var(--cn-meta-40) !important; }
.av-footer__copy,.av-footer__legal a{ color:var(--cn-meta-40) !important; }

/* ---- FLOATING PILL NAV (new — design's nav is a centered capsule, not a full-width bar) ---- */
.cn-nav-float{ position:sticky; top:16px; z-index:70; display:flex; justify-content:center; padding:0 16px; }
/* overflow must stay visible so the hover dropdown megamenus aren't clipped (matches design) */
.cn-nav-pill{ display:flex; align-items:center; gap:6px; background:rgba(9,10,26,.97);
  border:1px solid var(--cn-hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.5);
  border-radius:999px; padding:8px 10px 8px 20px; max-width:100%; overflow:visible;
  transition:background .25s ease,box-shadow .25s ease; }
.cn-nav-pill.cn-nav-scrolled{ background:rgba(30,28,58,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 40px rgba(0,0,0,.6); }
.cn-nav-pill img{ height:18px; display:block; margin-right:14px; flex:0 0 auto; }
.cn-nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.cn-nav-links > li{ position:relative; }
.cn-nav-links a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 13px; border-radius:999px; display:block; white-space:nowrap; transition:background .2s,color .2s; }
.cn-nav-links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.cn-nav-links a.cn-nav-cta{ background:var(--cn-lime-grad); color:#0E0C22; font-weight:700; margin-left:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 10px rgba(210,250,61,.25); }
.cn-nav-links a.cn-nav-cta:hover{ background:#fff; }
/* The dropdown is hover-only, so the path from the link down to the menu has
   to stay inside the hovered element the whole way. padding-bottom bridges
   that gap. It used to be 14px while the menu sat at calc(100% + 4px),
   leaving a 4px dead zone the cursor crossed on the way down: :hover was
   lost and the menu vanished before it could be clicked. The bridge now
   covers the full distance (18px) and the menu sits flush at 100%, so the
   visual spacing is unchanged (link to menu is still 18px) with no gap. */
.cn-dgroup{ position:relative; padding-bottom:18px; margin-bottom:-18px; }
.cn-dropdown{ display:none; position:absolute; top:100%; left:0; min-width:180px;
  background:var(--cn-bg-panel); border:1px solid var(--cn-hairline); border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.6); padding:8px; grid-template-columns:1fr; gap:1px; z-index:80; }
.cn-dropdown.cn-dropdown--2col{ grid-template-columns:1fr 1fr; width:220px; }
.cn-dgroup:hover .cn-dropdown{ display:grid; }
.cn-dropdown a{ color:rgba(255,255,255,.75); font-size:13px; padding:8px 10px; border-radius:8px; }
.cn-dropdown a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.cn-nav-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.cn-nav-burger span{ display:block; width:20px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }
@media(max-width:900px){
  .cn-nav-links{ display:none; }
  .cn-nav-pill{ width:100%; justify-content:space-between; }
  .cn-nav-burger{ display:block; }
  .cn-nav-pill.cn-nav-open .cn-nav-links{ display:flex; flex-direction:column; align-items:stretch;
    position:fixed; top:76px; left:16px; right:16px; background:var(--cn-bg-panel); border:1px solid var(--cn-hairline);
    border-radius:20px; padding:12px; gap:2px; }
  .cn-nav-pill.cn-nav-open .cn-dropdown{ display:block; position:static; box-shadow:none; border:0; background:transparent; padding:0 0 0 12px; }
  .cn-nav-pill.cn-nav-open .cn-dropdown.cn-dropdown--2col{ grid-template-columns:1fr; width:auto; }
}

/* ---- SECRET SAUCE LOOP DIAGRAM ----------------------------------
   Coded rather than generated: the path has to line up with the three
   step columns, hold exact brand colours, stay crisp at any size, and
   keep the step copy as real indexable text. Pulses are SVG
   animateMotion along the same path the ribbon draws.               */
.cn-loop{ position:relative; max-width:1060px; margin:0 auto; }
.cn-loop svg{ display:block; width:100%; height:auto; overflow:visible; }
.cn-loop-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:4px; }
.cn-loop-step h3{ font-size:15px; font-weight:800; margin:0 0 10px; letter-spacing:-.01em; }
.cn-loop-step h3 span{ font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.14em; margin-right:8px; }
.cn-loop-step p{ font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.6); margin:0; }
@media (max-width:760px){ .cn-loop-steps{ grid-template-columns:1fr; gap:20px; } }
/* Motion is decorative; drop the travelling pulses when asked to. */
@media (prefers-reduced-motion: reduce){ .cn-pulse{ display:none; } }

/* ---- TESTIMONIALS CAROUSEL (<av-testimonials>) ------------------- */
.av-tm{ position:relative; display:flex; align-items:center; gap:8px; }
.av-tm-track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:0; padding:2px; margin:-2px; flex:1; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none; }
.av-tm-track::-webkit-scrollbar{ display:none; }
.av-tm-track:focus-visible{ outline:2px solid var(--cn-lime); outline-offset:2px; border-radius:14px; }
.av-tm-card{ flex:0 0 calc((100% - 24px) / 3); min-width:0; scroll-snap-align:start; margin:0;
  border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:22px;
  background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:14px; }
.av-tm-q{ margin:0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.8); }
.av-tm-by{ display:flex; align-items:center; gap:10px; margin-top:auto;
  font-size:12px; color:rgba(255,255,255,.55); }
.av-tm-by b{ color:#fff; font-weight:700; }
.av-tm-badge{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:11px; flex-shrink:0; }
.av-tm-nav{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#fff;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, opacity .2s; }
.av-tm-nav:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.av-tm-nav:disabled{ opacity:.3; cursor:default; }
@media (max-width:1024px){ .av-tm-card{ flex-basis:calc((100% - 12px) / 2); } }
@media (max-width:720px){
  .av-tm-card{ flex-basis:100%; }
  .av-tm-nav{ display:none; }
  .av-tm-track{ scroll-snap-type:x mandatory; }
}

/* ---- PHOTO PLACEHOLDER (replaces design's image-slot widgets) ---- */
.cn-photo{ position:relative; overflow:hidden; background:
  linear-gradient(135deg,rgba(210,250,61,.14),rgba(179,117,240,.14)),
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px);
  border:1px solid var(--cn-hairline); display:flex; align-items:center; justify-content:center; }
.cn-photo::after{ content:attr(data-photo-label); font-family:ui-monospace,Menlo,monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); text-align:center; padding:0 16px; }

/* ---- RANGE SLIDER (used by the zone calculator; had no styling at all, fell back to raw OS control) ---- */
.cn-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:rgba(255,255,255,.12); outline:none; cursor:pointer; margin:0; }
.cn-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#D2FA3D; box-shadow:0 0 0 4px rgba(210,250,61,.18), 0 2px 6px rgba(0,0,0,.4); cursor:pointer;
  border:2px solid #0E0C22; }
.cn-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#D2FA3D;
  box-shadow:0 0 0 4px rgba(210,250,61,.18), 0 2px 6px rgba(0,0,0,.4); cursor:pointer; border:2px solid #0E0C22; }
.cn-range::-moz-range-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.12); }
.cn-range:focus-visible{ box-shadow:0 0 0 3px rgba(210,250,61,.35); }

/* ==== RESPONSIVE ====================================================================
   The design bundle was authored on a fixed 1180px desktop canvas with layout expressed
   as inline styles (no classes), so responsiveness is driven here by matching those
   inline-style patterns. Scope is `.av` (present on <body> of every page, homepage
   included) so a single layer covers all ~48 pages. Everything is inside media queries,
   so the desktop rendering is never touched. ------------------------------------------ */

/* Neutralize the fixed 1180px min-width canvas (homepage uses #cn-home-root, subpages
   use #cn-page — this covers both). */
@media(max-width:1180px){
  .av [style*="min-width: 1180px"]{ min-width:0 !important; }
  .av-wrap{ max-width:100%; }
}

/* Tablet: thin dense 3/4/6-column grids to 2-up, and stop absolute/negative-offset
   decorative art (floating badge cards, glow blobs) from forcing a horizontal scrollbar. */
@media(max-width:1024px){
  html{ overflow-x:hidden; }
  body.av{ overflow-x:hidden; }
  /* Decorative radial-glow blobs use `inset: -40px` to bleed past their parent; on a
     phone that bleed pushes past the viewport edge and creates a horizontal scrollbar.
     Pull them flush to their parent — still a glow, just not an overflow source. */
  .av [style*="inset: -"]{ inset:0 !important; }
  .av [style*="grid-template-columns: repeat(3, 1fr)"],
  .av [style*="grid-template-columns: repeat(4, 1fr)"],
  .av [style*="grid-template-columns: repeat(6, 1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* Phone: stack every multi-column layout, tighten the 48px section gutters, make the
   oversized display type fluid, wrap button rows, and tame the floating quick-nav. */
@media(max-width:640px){
  /* 1 — stack all grids (heroes, card decks, stat rows, feature splits, the homepage
         app-mockup panels). Single-column grids are unaffected. */
  .av [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    height:auto !important;
  }
  /* 2 — 48px side gutters are too wide on a phone; keep each section's vertical rhythm
         (top/bottom come from the inline shorthand; we override only the sides). */
  .av [style*="padding:"][style*="px 48px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  /* 3 — fluid display type. Targets real <h1>/<h2> AND the many div-based "headings"
         (e.g. big pricing numbers) the design expresses as sized <div>s. */
  .av [style*="font-size: 64px"],
  .av [style*="font-size: 62px"],
  .av [style*="font-size: 58px"],
  .av [style*="font-size: 56px"]{ font-size:clamp(2rem,9vw,3.3rem) !important; line-height:1.05 !important; }
  .av [style*="font-size: 54px"],
  .av [style*="font-size: 52px"],
  .av [style*="font-size: 50px"]{ font-size:clamp(1.9rem,8.5vw,3rem) !important; line-height:1.06 !important; }
  .av [style*="font-size: 46px"],
  .av [style*="font-size: 44px"]{ font-size:clamp(1.7rem,7.5vw,2.6rem) !important; line-height:1.08 !important; }
  .av [style*="font-size: 40px"],
  .av [style*="font-size: 38px"],
  .av [style*="font-size: 36px"]{ font-size:clamp(1.5rem,6.5vw,2.15rem) !important; line-height:1.12 !important; }
  .av [style*="font-size: 34px"]{ font-size:clamp(1.35rem,5.5vw,1.9rem) !important; }
  .av h1{ font-size:clamp(2rem,8.5vw,2.9rem) !important; }
  .av h2{ font-size:clamp(1.55rem,6.5vw,2.2rem) !important; }
  /* 4 — CTA / chip rows wrap instead of overflowing the viewport. */
  .av [style*="display: flex"][style*="gap: 12px"],
  .av [style*="display: flex"][style*="gap: 14px"],
  .av [style*="display: flex"][style*="gap: 16px"]{ flex-wrap:wrap; }
  /* 5 — floating section quick-nav: cap width and let the pills scroll horizontally. */
  .av [style*="bottom: 22px"]{ max-width:94vw; }
  .av [style*="bottom: 22px"] > nav{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Wide comparison / pricing tables: scroll horizontally rather than crushing columns. */
@media(max-width:768px){
  .av div:has(> table){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .av table{ min-width:560px; }
}

/* ── <av-viz>: per-vertical figure in the Receipts slot ──────────────────
   Chrome matches the gauge card it replaces, so the slot keeps its spacing
   and the label reuses the same badge treatment as the old FOCUS chip. */
/* min-width:0 is load-bearing: the scrolling strips are far wider than the
   card, and without it they inflate the grid track that holds them. */
.cn-viz{
  display:block; position:relative; height:260px; margin:0 0 14px;
  width:100%; min-width:0; max-width:100%;
  border-radius:14px; overflow:hidden;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.09);
}
.cn-viz canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cn-viz-label{
  position:absolute; top:14px; right:16px; text-align:right; line-height:1.3;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:6px 12px; pointer-events:none;
}
.cn-viz-mode{
  font-family:ui-monospace,Menlo,monospace; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cn-lime);
  transition:color .6s ease, opacity .35s ease;
}
.cn-viz-sub{
  font-family:ui-monospace,Menlo,monospace; font-size:10px;
  color:rgba(255,255,255,.5); transition:opacity .35s ease;
}
.cn-viz-cue{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-family:ui-monospace,Menlo,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45); pointer-events:none;
}
@media(max-width:768px){ .cn-viz{ height:220px; } }

/* Two-track figures: bars, restaurants, retail. Generic on one line,
   brand-fit on the other, scrolling at speeds that make the point. */
.cn-viz .cn-trk{
  display:flex; align-items:center; position:relative;
  height:50%; overflow:hidden;
}
.cn-viz .cn-trk + .cn-trk{ border-top:1px solid rgba(255,255,255,.07); }
.cn-trk-label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  z-index:2; line-height:1; white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.cn-trk-label span{
  display:block; margin-top:5px; font-size:9px; font-weight:400;
  letter-spacing:.06em; text-transform:none; color:rgba(255,255,255,.42);
}
/* Absolutely positioned so the strip's real width never reaches the grid
   track that holds the card. In flow it inflates the column to ~1600px. */
.cn-trk-items{
  position:absolute; left:0; top:0; bottom:0;
  display:flex; align-items:center; gap:16px;
  padding-left:132px; will-change:transform;
}
.cn-trk-item{ flex-shrink:0; display:flex; align-items:center; }
.cn-trk.fast .cn-trk-items{ animation:cn-trk-scroll 14s linear infinite; }
.cn-trk.slow .cn-trk-items{ animation:cn-trk-scroll 30s linear infinite; }
/* Mask the strip behind the track label. Without this the glasses and
   receipts scroll straight through the text. */
.cn-trk::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:152px; z-index:1;
  pointer-events:none;
  background:linear-gradient(to right, rgba(6,5,16,.97) 0%, rgba(6,5,16,.97) 66%, transparent 100%);
}
/* Fade the strip out under the stat chip so items don't collide with it. */
.cn-trk::after{
  content:''; position:absolute; inset:0; left:120px; z-index:1;
  pointer-events:none;
  background:linear-gradient(to right, transparent 0%, transparent 62%, rgba(6,5,16,.97) 92%);
}
.cn-trk-stat{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  z-index:3; text-align:right; line-height:1.3; pointer-events:none;
  background:rgba(6,5,16,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:6px 10px;
}
.cn-trk-stat-num{
  font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.5);
}
.cn-trk.lit .cn-trk-stat-num{ color:var(--cn-lime); }
.cn-trk-stat-label{
  font-family:ui-monospace,Menlo,monospace; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
@keyframes cn-trk-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Narrow cards leave little runway between the label and the stat chip, so
   both masks bite earlier and the items pack tighter. */
@media(max-width:768px){
  .cn-trk-items{ padding-left:120px; gap:12px; }
  .cn-trk::before{ width:128px; }
  .cn-trk::after{
    background:linear-gradient(to right, transparent 0%, transparent 30%, rgba(6,5,16,.97) 62%);
  }
  .cn-trk-label,.cn-star-label{ font-size:9px; }
  .cn-star-label{ width:88px; }
}

/* Salons: star ratings filling in. */
.cn-star-row{
  display:flex; align-items:center; height:50%;
  padding:0 14px; position:relative;
}
.cn-star-row + .cn-star-row{ border-top:1px solid rgba(255,255,255,.07); }
.cn-star-label{
  flex-shrink:0; width:104px; line-height:1.2;
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.cn-star-label span{
  display:block; margin-top:5px; font-size:9px; font-weight:400;
  letter-spacing:.06em; text-transform:none; color:rgba(255,255,255,.42);
}
.cn-stars{ flex:1; display:flex; align-items:center; gap:6px; padding:0 12px; }
.cn-star{
  width:16px; height:16px; flex-shrink:0; opacity:.16;
  fill:rgba(255,255,255,.85);
  transition:opacity .45s ease, transform .45s ease, filter .45s ease;
}
.cn-star.lit{ opacity:1; transform:scale(1.06); }
.cn-star-row.brand-fit .cn-star{ fill:var(--cn-lime); }
.cn-star-row.brand-fit .cn-star.lit{ filter:drop-shadow(0 0 5px rgba(210,250,61,.5)); }
.cn-star-stat{
  flex-shrink:0; min-width:58px; text-align:right; line-height:1.3;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:6px 10px;
}
.cn-star-num{
  font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.5);
}
.cn-star-row.brand-fit .cn-star-num{ color:var(--cn-lime); }
.cn-star-lbl{
  font-family:ui-monospace,Menlo,monospace; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4);
}

/* Boutiques: three reels. */
.cn-viz.cn-slot{ display:flex; gap:10px; padding:14px; }
.cn-slot::before{
  content:''; position:absolute; left:14px; right:14px; top:50%;
  height:1px; background:rgba(255,255,255,.14);
  transform:translateY(-50%); z-index:4; pointer-events:none;
}
.cn-slot-col{
  flex:1; position:relative; overflow:hidden;
  border-radius:9px; background:rgba(0,0,0,.2);
}
.cn-slot-col::before,.cn-slot-col::after{
  content:''; position:absolute; left:0; right:0; height:38%;
  z-index:2; pointer-events:none;
}
.cn-slot-col::before{ top:0;    background:linear-gradient(to bottom, rgba(10,8,24,.95), transparent); }
.cn-slot-col::after { bottom:0; background:linear-gradient(to top,    rgba(10,8,24,.95), transparent); }
.cn-slot-reel{ display:flex; flex-direction:column; align-items:center; will-change:transform; }
.cn-slot-reel.r1{ animation:cn-slot-spin 2.4s linear infinite; }
.cn-slot-reel.r2{ animation:cn-slot-spin 3.1s linear infinite; }
.cn-slot-reel.r3{ animation:cn-slot-spin 1.9s linear infinite; }
.cn-slot-cell{
  width:100%; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.cn-slot-cell svg{ width:26px; height:26px; }
.cn-slot-cell.receipt{ color:var(--cn-coral); }
.cn-slot-cell.bag    { color:var(--cn-lime); }
.cn-slot-cell.card   { color:var(--cn-purple-light); }
.cn-slot-stat{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  z-index:5; text-align:right; line-height:1.3; pointer-events:none;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:6px 10px;
}
.cn-slot-num{
  font-family:ui-monospace,Menlo,monospace; font-size:13px;
  font-weight:700; color:var(--cn-lime);
}
.cn-slot-lbl{
  font-family:ui-monospace,Menlo,monospace; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
@keyframes cn-slot-spin{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

@media(prefers-reduced-motion:reduce){
  .cn-trk-items,.cn-slot-reel{ animation:none !important; }
  .cn-star{ transition:none !important; }
}

/* ── Offices: unmanaged noise → scored room ──────────────────────────────
   An 11s loop. Six ambient-noise chips drift and blur out, a lime soundwave
   and now-playing label rise in their place, then it reverses. Ported from
   the pre-redesign offices page (.noise-viz), retinted from teal to lime. */
.cn-noise-viz{
  position:relative; height:260px; margin:0 0 14px;
  border-radius:14px; overflow:hidden;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.09);
}
.cn-noise-layer,.cn-music-layer{ position:absolute; inset:0; }
.cn-noise-layer{ animation:cn-noise-cycle 11s ease-in-out infinite; }
.cn-noise-chip{
  position:absolute; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  font-size:.72rem; color:rgba(255,255,255,.72); white-space:nowrap;
  animation:cn-noise-drift 6s ease-in-out infinite;
}
.cn-noise-chip svg{
  width:14px; height:14px; flex-shrink:0; fill:none;
  stroke:rgba(255,255,255,.55); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
/* The widget sits in a ~500px column, not a full-width band, so the chips
   scatter across three tiers with each tier's pair on opposite sides. Two
   chips can only ever collide if they share a tier, and they never do. */
.cn-noise-chip:nth-child(1){ top:7%;     left:5%;   animation-delay:0s; }
.cn-noise-chip:nth-child(2){ top:3%;     right:7%;  animation-delay:-.5s; }
.cn-noise-chip:nth-child(3){ top:36%;    left:13%;  animation-delay:-1s; }
.cn-noise-chip:nth-child(4){ top:40%;    right:6%;  animation-delay:-1.5s; }
.cn-noise-chip:nth-child(5){ bottom:7%;  left:6%;   animation-delay:-2s; }
.cn-noise-chip:nth-child(6){ bottom:13%; right:11%; animation-delay:-2.5s; }
.cn-music-layer{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; pointer-events:none; opacity:0;
  animation:cn-music-cycle 11s ease-in-out infinite;
}
.cn-music-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:ui-monospace,Menlo,monospace; font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.cn-music-label::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--cn-lime); box-shadow:0 0 12px var(--cn-lime);
  animation:cn-music-pulse 1.6s ease-in-out infinite;
}
.cn-music-track{
  color:rgba(255,255,255,.95); font-weight:600;
  letter-spacing:.03em; text-transform:none; margin-left:2px;
}
.cn-soundwave{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.cn-soundwave span{
  display:block; width:4px; border-radius:2px; background:var(--cn-lime);
  transform-origin:center bottom;
  animation:cn-sw-bar 1.4s ease-in-out infinite;
}
.cn-soundwave span:nth-child(1) { height:18px; animation-delay:0s; }
.cn-soundwave span:nth-child(2) { height:28px; animation-delay:.08s; }
.cn-soundwave span:nth-child(3) { height:14px; animation-delay:.16s; }
.cn-soundwave span:nth-child(4) { height:42px; animation-delay:.24s; }
.cn-soundwave span:nth-child(5) { height:24px; animation-delay:.32s; }
.cn-soundwave span:nth-child(6) { height:52px; animation-delay:.40s; }
.cn-soundwave span:nth-child(7) { height:30px; animation-delay:.48s; }
.cn-soundwave span:nth-child(8) { height:38px; animation-delay:.56s; }
.cn-soundwave span:nth-child(9) { height:22px; animation-delay:.64s; }
.cn-soundwave span:nth-child(10){ height:46px; animation-delay:.72s; }
.cn-soundwave span:nth-child(11){ height:16px; animation-delay:.80s; }
.cn-soundwave span:nth-child(12){ height:34px; animation-delay:.88s; }
.cn-soundwave span:nth-child(13){ height:28px; animation-delay:.96s; }
.cn-soundwave span:nth-child(14){ height:50px; animation-delay:1.04s; }
.cn-soundwave span:nth-child(15){ height:20px; animation-delay:1.12s; }
.cn-soundwave span:nth-child(16){ height:36px; animation-delay:1.20s; }
.cn-soundwave span:nth-child(17){ height:26px; animation-delay:.16s; }
.cn-soundwave span:nth-child(18){ height:42px; animation-delay:.24s; }
.cn-soundwave span:nth-child(19){ height:18px; animation-delay:.32s; }
.cn-soundwave span:nth-child(20){ height:30px; animation-delay:.40s; }
@keyframes cn-noise-cycle{
  0%,42%  { opacity:1;   filter:blur(0); }
  52%,92% { opacity:.15; filter:blur(8px); }
  100%    { opacity:1;   filter:blur(0); }
}
@keyframes cn-music-cycle{
  0%,42%  { opacity:0; transform:translateY(8px); }
  52%,92% { opacity:1; transform:translateY(0); }
  100%    { opacity:0; transform:translateY(8px); }
}
@keyframes cn-sw-bar{
  0%,100%{ transform:scaleY(.35); opacity:.6; }
  50%    { transform:scaleY(1);   opacity:1; }
}
@keyframes cn-music-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(.85); }
}
@keyframes cn-noise-drift{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
/* Narrow panels can't hold the scattered desktop layout, so the chips stack
   into six rows alternating left and right. Alternating sides means the drift
   animation can never push two chips into each other. */
@media(max-width:768px){
  .cn-noise-viz{ height:250px; }
  .cn-noise-chip{ font-size:.68rem; padding:6px 10px; }
  .cn-noise-chip:nth-child(1){ top:10px;  left:8px;   right:auto; bottom:auto; }
  .cn-noise-chip:nth-child(2){ top:47px;  right:10px; left:auto;  bottom:auto; }
  .cn-noise-chip:nth-child(3){ top:84px;  left:14px;  right:auto; bottom:auto; }
  .cn-noise-chip:nth-child(4){ top:121px; right:12px; left:auto;  bottom:auto; }
  .cn-noise-chip:nth-child(5){ top:158px; left:8px;   right:auto; bottom:auto; }
  .cn-noise-chip:nth-child(6){ top:196px; right:14px; left:auto;  bottom:auto; }
  .cn-soundwave span:nth-child(n+15){ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .cn-noise-layer,.cn-music-layer,.cn-noise-chip,
  .cn-soundwave span,.cn-music-label::before{ animation:none !important; }
  .cn-noise-layer{ opacity:.15; filter:blur(8px); }
  .cn-music-layer{ opacity:1; transform:none; }
}