/* ============================================================================
   idealai.ai — SITE-GLASS OVERRIDE SHEET  ·  "The Deep"
   ---------------------------------------------------------------------------
   Loads LAST (after styles.css, demo.css, scroll.css, glass.css). This is the
   documented site-specific override layer for joining the glass estate (design
   doc §C1): the canonical glass.css / glass.js are used VERBATIM (synced via
   sync_glass.py); everything site-specific lives HERE and never edits a copy.

   It does three jobs:
     1. Restore the handful of design tokens where canonical glass.css collides
        destructively with the site's styles.css (--glow is a COLOR here but a
        shadow-string in glass.css; --blue is aqua here; radii/ink differ).
     2. Grade the living-water shader to the site's dark "night water → dawn",
        drop the old particle canvas, and float the site's cards as glass.
     3. Add the site-only pieces: skin token-blocks, the Droplet, living-Chloe
        glass, and the depth→dawn scroll veils.
   Self-contained / CSP-safe: no external fonts, scripts, images or fetches.
   ============================================================================ */

/* ── 1 · TOKEN COLLISION REPAIR ──────────────────────────────────────────────
   glass.css redefines these in :root and [data-theme]. Re-assert the site's
   semantics here (site-glass loads after glass.css, so later-wins restores them,
   and the theme-scoped block out-orders glass.css's own [data-theme="dark"]). */
:root{
  --blue:#00d2ff;                 /* aqua-led — NOT glass.css's #188bf6 */
  --blue-2:#5ee4ff;
  --glow:rgba(0,210,255,.30);     /* a COLOR here (glass.css makes it a shadow) */
  --r-lg:22px; --r-xl:32px;       /* site radii (glass.css uses 20/28) */
}
[data-theme="dark"]{
  --ink:#ffffff; --ink-2:#aeb7c4; --muted:#727d8d;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
}
/* Keep the glass numerals carving off the site's white-on-dark headings — the
   site never opts elements into .liquid/.etch, so body.etched is inert here. */

/* ── 2 · LIVING WATER as the site backdrop ──────────────────────────────────
   The WebGL fbm water shader (glass.js) replaces the flat black bg AND the O(n²)
   hero particle canvas. It sits at z-2 behind all in-flow content; transparent
   section backgrounds and translucent glass cards let it shimmer through. */
html{background:#04060c}
.gz-body{background:transparent!important}
#water{position:fixed!important;inset:0;z-index:-2!important;opacity:1}
/* Retire the old always-on hero particle field (design B1.3 / A1). */
#heroCanvas{display:none!important}
/* the site's fixed radial wash sat at z-3; keep it faint below the water */
body::before{opacity:.35}
/* Hide the floating Personalize gear — the Droplet is the entry point now. */
#gz-settings-btn{display:none!important}

/* Night-water default deepens the top of the page so the hero reads as "3 a.m.
   at the surface". A fixed veil, compositor-only (no per-frame paint). */
.deep-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,14,.62) 0%,rgba(3,9,18,.30) 34%,rgba(2,6,14,.10) 60%,rgba(2,6,14,.0) 100%)}
/* Dawn glow that rises from the bottom — the payoff at the end of the scroll.
   Opacity is scroll-driven where supported (buttery, GPU-only), static otherwise. */
.dawn-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(120% 60% at 50% 118%,rgba(255,214,150,.30),transparent 60%),
    radial-gradient(90% 50% at 50% 112%,rgba(120,220,235,.22),transparent 62%)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .dawn-veil{animation:dawnRise linear both;animation-timeline:scroll(root);animation-range:60% 100%}
    @keyframes dawnRise{from{opacity:0}to{opacity:1}}
  }
}
/* No scroll-timeline support (older Safari) → gentle steady presence, no jank. */
@supports not (animation-timeline: scroll()){ .dawn-veil{opacity:.5} }
@media (prefers-reduced-motion:reduce){ .dawn-veil{opacity:.5} }

/* soften the hero vignette so it fades to water, not to solid black */
.hero::after{background:radial-gradient(70% 60% at 50% 40%,transparent 34%,rgba(4,6,12,.72) 82%)!important}

/* ── 3 · GLASS-OVER-WATER card material ─────────────────────────────────────
   Re-skin the site's existing cards as translucent glass so the living water
   shimmers behind them. Text stays light (the whole site is authored dark), so
   panels stay dark-tinted for AA legibility — the skins recolor the WATER + mood,
   not the type. backdrop-blur + curve/rim/edge come from glass.css's dark tokens. */
.glassify,
.tile,.ocard,.card,.cap .panel,.scenario,.field-detail,
.faq details,.lead-form,.pick-panel,.pick-tab,.spost,.review-card,.snap-cell,
.livecall .lc-card,.calc-inputs,.calc-out{
  background:var(--glass, rgba(14,20,34,.52))!important;
  backdrop-filter:blur(var(--blur,13px)) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter:blur(var(--blur,13px)) saturate(150%) brightness(1.04);
  border:1px solid var(--glass-border,rgba(255,255,255,.12))!important;
  /* DEPTH: a SUBTLE ambient drop shadow lifts the card off the water (soft, wide,
     negative-spread so it stays gentle — not a heavy slab), plus the canonical
     glass inner-top gloss (glass.css .glass recipe) the site cards were missing. */
  box-shadow:0 20px 46px -20px rgba(1,4,10,.72),var(--e3),var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top,rgba(255,255,255,.05))!important;
}
/* hover lifts a touch higher (needs !important to beat the base box-shadow above) */
.tile:hover,.ocard:hover{box-shadow:0 30px 62px -22px rgba(1,4,10,.82),var(--e3),var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top,rgba(255,255,255,.05))!important}
/* the flagship / good / accent cards keep an aqua wash ON TOP of the glass */
.tile.lead-tile{background:linear-gradient(150deg,rgba(0,210,255,.22),var(--glass,rgba(14,20,34,.5)) 60%)!important}
.cap .panel.good{box-shadow:var(--e3),0 0 60px rgba(0,210,255,.14),var(--edge),var(--curve),var(--rim)!important}
.scenario{background:linear-gradient(150deg,rgba(0,210,255,.14),var(--glass,rgba(14,20,34,.5)) 60%)!important}
.ctaband{background:linear-gradient(140deg,rgba(0,210,255,.18),var(--glass,rgba(14,20,34,.55)))!important;
  backdrop-filter:blur(var(--blur,13px)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur,13px)) saturate(150%);
  border:1px solid rgba(0,210,255,.30)!important;box-shadow:var(--e4),var(--edge),var(--curve),var(--rim)!important}
/* ── DESKTOP MOUSE = LIGHT SOURCE  ·  MOBILE = DEVICE TILT ───────────────────
   The canonical glass.js already drives --lx/--ly/--l-angle from pointermove on
   desktop (and from device-tilt on mobile), rAF-lerped and reduced-motion-gated.
   Here we give the site's glass cards the SAME moving specular streak the team-app
   .glass uses (glass.css .glass::before recipe): a sharp white glint that slides
   along the TOP + RIGHT rims as the light source (cursor / tilt) moves — so the
   whole page's glass catches one coherent light. Pure CSS gradients keyed to the
   vars: no per-card JS, no layout, transform/opacity/var only. (::after here — the
   demo card's ::before is already the connect hairline in demo.css.) */
.livecall .lc-card,.tile,.ocard,.cap .panel,.scenario,.field-detail{position:relative;overflow:hidden}
.livecall .lc-card::after,.tile::after,.ocard::after,.cap .panel::after,.scenario::after,.field-detail::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(24% 2px at calc(50% + var(--lx,.5)*50%) 1px,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(42% 9px at calc(50% + var(--lx,.5)*50%) 1px,rgba(150,225,255,.42),rgba(150,225,255,0) 74%),
    radial-gradient(2px 24% at calc(100% - 1px) calc(50% - var(--ly,.72)*50%),rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(9px 40% at calc(100% - 1px) calc(50% - var(--ly,.72)*50%),rgba(150,225,255,.42),rgba(150,225,255,0) 74%),
    linear-gradient(var(--l-angle,217deg),rgba(255,255,255,.09),rgba(255,255,255,0) 15%)}
.livecall .lc-card>*,.tile>*,.ocard>*,.cap .panel>*,.scenario>*,.field-detail>*{position:relative;z-index:1}

/* ── ETCHED LIQUID NUMERALS + display accents ───────────────────────────────
   glass.js already puts body.etched on and injects the #etch-inner SVG filter.
   The site never opted anything in (site tokens are white-on-dark), so nothing
   was carved. Opt the big display glyphs in HERE (site-only): the KPI numerals
   get the full liquid-glass fill carved by #etch-inner (a deep dark lip top-right
   + faint light lip lower-left = real intaglio depth); the hero/section .accent
   spans get the lighter carve so they read pressed into the glass, not painted on.
   Zero runtime cost (static SVG filter); reduced-motion freezes the liquid flow. */
body.etched .stat .num,
body.etched .statband .figure{
  background:var(--liquid)!important;background-size:280% 280%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  filter:url(#etch-inner);
  animation:gz-liquidflow 7.5s ease-in-out infinite}
/* the display accents (hero + section heads) — keep their aqua gradient, add the
   carve so the highlight word looks etched into the surface */
body.etched .hero h1 .accent,
body.etched #connected h2 .accent,
body.etched #proof h2 .accent,
body.etched #area h2 .accent{filter:url(#etch-inner-sm)}
@media(prefers-reduced-motion:reduce){
  body.etched .stat .num,body.etched .statband .figure{animation:none}}
/* the console terminal + the white booking card are deliberately NOT glassed */
.phone{background:rgba(4,6,11,.82)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.booking-embed{background:#fff!important;backdrop-filter:none!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important}

/* nav becomes a rail of glass floating on the water */
.nav{background:rgba(8,12,20,.44)!important;backdrop-filter:saturate(160%) blur(16px)!important;
  -webkit-backdrop-filter:saturate(160%) blur(16px)!important;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.10))}
.nav-mobile{background:rgba(6,10,18,.92)!important;backdrop-filter:saturate(160%) blur(16px)!important}

/* LED-ify the "answering now" dot on the demo card + the live status dots */
.lc-dot,.hub .node .d{position:relative}
.lc-dot{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#10d99a 62%);
  box-shadow:0 0 5px #10d99a,0 0 11px #10d99a;display:inline-block;animation:gz-coreB 3.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.lc-dot{animation:none}}

/* ── 3.5 · THE CORE HUB — "one call, wired to all of it" ─────────────────────
   Redesign of the flagship feature: a lit glass orb (the live call) fanning out
   to FOUR glass capability nodes — answers questions · books the calendar ·
   schedules follow-ups · sends a text — with light beads flowing outward along
   each spoke. MOBILE-FIRST: orb on top, nodes in a clean 2×2 glass grid. DESKTOP
   (≥841px, where the panel is wide): nodes fan out radially around the orb with
   the connecting spokes drawn. Reuses the LED + glass material; SMIL beads are
   paused offscreen + frozen under reduced-motion by the existing inline IIFE. */
.corehub{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:15px;
  max-width:440px;margin:22px auto 8px;position:relative}
.ch-web{display:none}
/* center orb — the live call */
.ch-core{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.ch-orb{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#04212f;
  background:radial-gradient(circle at 36% 28%,#8af0ff,#22c3f2 46%,#0a8fc4 74%,#075f8f);
  box-shadow:0 0 0 7px rgba(0,210,255,.08),0 14px 34px rgba(0,150,210,.4),0 0 46px rgba(0,210,255,.4),
    inset 0 5px 12px rgba(255,255,255,.7),inset 0 -9px 20px rgba(0,44,74,.5)}
.ch-orb svg{width:38px;height:38px;filter:drop-shadow(0 1px 1px rgba(255,255,255,.5))}
.ch-orb .ch-pulse{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(120,232,255,.6);animation:chPulse 3s ease-out infinite}
.ch-core-cap{display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--body);color:var(--ink,#fff);
  letter-spacing:.01em;white-space:nowrap}
.ch-core-cap .led{width:9px;height:9px}
/* the four capability nodes — glass pills */
.ch-nodes{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%}
.ch-node{display:flex;align-items:flex-start;gap:11px;text-align:left;cursor:pointer;z-index:2;
  background:var(--glass-2,rgba(16,24,40,.5));border:1px solid var(--glass-border,rgba(255,255,255,.14));
  border-radius:15px;padding:13px 14px;color:var(--ink,#fff);font:650 13.5px/1.25 var(--body);
  box-shadow:var(--e2),var(--curve-sm),var(--rim-sm);backdrop-filter:blur(11px) saturate(150%);
  -webkit-backdrop-filter:blur(11px) saturate(150%);
  transition:transform .22s var(--spring,cubic-bezier(.34,1.4,.5,1)),border-color .2s,box-shadow .2s}
.ch-node .ch-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:rgba(0,210,255,.15);color:var(--blue-2,#5ee4ff);box-shadow:inset 0 0 0 1px rgba(0,210,255,.18)}
.ch-node .ch-ic svg{width:19px;height:19px}
.ch-node .ch-lb{display:flex;flex-direction:column;gap:3px;min-width:0}
.ch-node .ch-lb em{font:500 11px/1.35 var(--body);font-style:normal;color:var(--muted,#8a94a4)}
.ch-node:hover,.ch-node:focus-visible{transform:translateY(-3px);border-color:rgba(0,210,255,.5);
  box-shadow:var(--e3),0 0 0 1px rgba(0,210,255,.3),var(--curve-sm),var(--rim-sm);outline:none}
.ch-node.sel{border-color:#5ee4ff;background:rgba(0,210,255,.16);
  box-shadow:0 0 0 2px rgba(0,210,255,.35),0 0 26px rgba(0,210,255,.22),var(--curve-sm),var(--rim-sm)}
.ch-node.sel .ch-ic{background:rgba(0,210,255,.28);color:#eafcff}
@keyframes chPulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.85)}}
@keyframes chHalo{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.ch-orb .ch-pulse,.ch-halo{animation:none!important}}

/* DESKTOP radial fan — only where the good panel is wide enough (≥841px). */
@media(min-width:841px){
  .corehub{display:block;width:100%;aspect-ratio:560/460;max-width:520px;margin:14px auto 2px}
  .ch-web{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
  .ch-web .ch-spokes path{stroke:rgba(0,210,255,.42);stroke-width:.6;fill:none;stroke-linecap:round;
    filter:drop-shadow(0 0 .6px rgba(0,210,255,.7))}
  .ch-web .ch-flows circle{fill:#d8f4ff;filter:drop-shadow(0 0 1.4px var(--blue-2,#5ee4ff))}
  .ch-halo{transform-box:fill-box;transform-origin:center;animation:chHalo 3.4s ease-in-out infinite}
  .ch-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .ch-nodes{display:contents}
  .ch-node{position:absolute;transform:translate(-50%,-50%);width:min(44%,205px)}
  .ch-node[data-pos=tl]{left:21%;top:22%}
  .ch-node[data-pos=tr]{left:79%;top:22%}
  .ch-node[data-pos=bl]{left:21%;top:78%}
  .ch-node[data-pos=br]{left:79%;top:78%}
  .ch-node:hover,.ch-node:focus-visible{transform:translate(-50%,-50%) scale(1.045)}
}

/* ── 4 · THE DROPLET — living skin toggle (bottom-left) ──────────────────────
   A captured bead of living water: a glass lens over a swatch of the current
   skin, breathing + self-rippling, that blooms the skin sheet on tap. Ships as a
   reusable component (markup injected by skins.js) so it can go estate-wide. */
.droplet{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:2147483000;width:56px;height:56px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;
  transition:transform .3s var(--spring,cubic-bezier(.34,1.4,.5,1)),translate .18s ease-out}
.droplet:focus-visible{outline:3px solid rgba(94,228,255,.7);outline-offset:4px}
.droplet .drip{position:absolute;inset:6px;border-radius:50%;overflow:hidden;
  box-shadow:var(--e2),var(--edge),var(--curve-sm),var(--rim-sm),inset 0 6px 14px rgba(255,255,255,.06)}
/* the "living water inside" — a masked swatch of the skin's own gradient, drifting */
.droplet .drip::before{content:"";position:absolute;inset:-40%;
  background:var(--skin-bead,radial-gradient(circle at 34% 30%,#22c9ff,#0a5a8f 70%,#062038));
  background-size:220% 220%;animation:beadFlow 9s ease-in-out infinite}
/* meniscus highlight arcing across the top like light on a water bead */
.droplet .drip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(60% 30% at 42% 16%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.35),transparent 60%)}
/* self-ripple ring — one soft expanding pulse every ~14s (same family as .touch-bloom) */
.droplet .ring{position:absolute;inset:6px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(150,225,255,.6);opacity:0;animation:beadRipple 14s ease-out infinite}
/* prismatic rim on hover/focus — the only moment a rainbow appears (foreshadows hues) */
.droplet .rim{position:absolute;inset:2px;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,#ff5b5b,#ffb35c,#12d0b0,#00d2ff,#3a7bff,#a06bff,#ff7ad1,#ff5b5b);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  transition:opacity .3s}
.droplet:hover,.droplet:focus-visible{transform:scale(1.08)}
.droplet:hover .rim,.droplet:focus-visible .rim{opacity:.9;animation:beadSpin 6s linear infinite}
.droplet:active{transform:scale(.92)}
.droplet .breath{position:absolute;inset:0;animation:beadBreath 5.2s ease-in-out infinite}
@keyframes beadFlow{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
@keyframes beadBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes beadRipple{0%,88%,100%{opacity:0;transform:scale(.7)}90%{opacity:.7;transform:scale(.7)}99%{opacity:0;transform:scale(1.7)}}
@keyframes beadSpin{to{transform:rotate(360deg)}}
/* a one-time glass toast that points at the Droplet */
.skin-toast{position:fixed;left:calc(84px + env(safe-area-inset-left));bottom:34px;z-index:2147483001;max-width:230px;
  background:var(--glass,rgba(14,20,34,.7));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border,rgba(255,255,255,.16));box-shadow:var(--e3),var(--rim-sm);
  border-radius:14px;padding:12px 15px;color:var(--ink,#fff);font:600 13.5px/1.4 var(--body);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s,transform .3s;pointer-events:none}
.skin-toast.on{opacity:1;transform:none}
.skin-toast b{background:linear-gradient(100deg,#00d2ff,#5ee4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-reduced-motion:reduce){
  .droplet .drip::before,.droplet .ring,.droplet .breath,.lc-dot{animation:none!important}
  .droplet .rim{opacity:.35}   /* keep affordance without motion */
}
@media(max-width:480px){.skin-toast{display:none}}

/* ── the SKIN FAN inside the Personalize sheet (injected by skins.js) ─────── */
.skinfan{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 var(--s5,20px)}
.skinbead{flex:1 1 0;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:none;cursor:pointer;color:var(--muted);font:600 11px var(--body);padding:0}
.skinbead .b{width:44px;height:44px;border-radius:50%;position:relative;overflow:hidden;
  box-shadow:var(--e1),var(--curve-sm),var(--rim-sm);border:2px solid transparent;transition:transform .2s var(--spring),border-color .2s}
.skinbead .b::before{content:"";position:absolute;inset:0;background:var(--bead);background-size:200% 200%}
.skinbead .b::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 30% at 42% 18%,rgba(255,255,255,.8),transparent 70%)}
.skinbead[aria-pressed="true"] .b{border-color:#5ee4ff;transform:scale(1.06)}
.skinbead[aria-pressed="true"]{color:var(--ink,#fff)}
.skinbead:active .b{transform:scale(.9)}
.skin-brand{margin:2px 0 var(--s4,16px)}
.skin-brand .sb-row{display:flex;gap:9px;align-items:center}
.skin-brand input[type=text]{flex:1;min-width:0;background:var(--glass-2,rgba(16,24,40,.4));
  border:1px solid var(--glass-border,rgba(255,255,255,.14));border-radius:12px;color:var(--ink,#fff);
  font:500 14px var(--body);padding:11px 13px;outline:none}
.skin-brand input[type=text]:focus{border-color:rgba(0,210,255,.55);box-shadow:0 0 0 3px rgba(0,210,255,.14)}
.skin-brand input[type=color]{width:44px;height:44px;flex:none;border:none;background:none;border-radius:12px;cursor:pointer;padding:0}
.skin-brand .sb-note{font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.45}
.skin-closer{margin:6px 0 2px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2);line-height:1.5}
.skin-closer .sc-cta{display:inline-flex;margin-top:12px;padding:11px 18px;border-radius:100px;
  background:var(--grad,linear-gradient(112deg,#00d2ff,#188bf6));color:#fff;font:700 13px var(--body);
  text-decoration:none;box-shadow:var(--glow-shadow,0 10px 30px rgba(0,210,255,.4))}
.pz-h .pz-sub{display:block;font:500 11px var(--body);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:3px}

/* "Your brand" live tint of the demo card name + a chosen-color accent */
[data-skin="brand"] .brandname{background:linear-gradient(100deg,var(--brand-accent,#00d2ff),color-mix(in srgb,var(--brand-accent,#00d2ff) 60%,#fff));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══════════════════════════════════════════════════════════════════════════
   GRAPHIC-FORWARD TILE SYSTEM  ·  title → graphic (~60%) → hook → tap-to-expand
   (planning/website-messaging-and-tile-redesign-2026-07-10.md §3)
   Distinct namespace (.gtile / .gsheet / .g-*) so it never collides with the
   existing .tile link cards. Mobile-first; animations gated by .in-view + reduced
   motion; sheet logic in tiles.js. Uses glass.css material tokens where present.
   ═══════════════════════════════════════════════════════════════════════════ */
.gbento{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:760px){.gbento{grid-template-columns:1fr 1fr;gap:20px}
  .gtile.span2{grid-column:1/-1}}
.gtile{position:relative;border-radius:var(--r-lg,22px);overflow:hidden;text-decoration:none;
  background:var(--glass,rgba(14,20,34,.5));backdrop-filter:blur(var(--blur,16px));-webkit-backdrop-filter:blur(var(--blur,16px));
  border:1px solid var(--glass-border,var(--line-2,rgba(255,255,255,.14)));
  box-shadow:var(--e2,0 18px 40px -18px rgba(1,4,10,.7)),var(--curve),var(--rim),inset 0 8px 20px var(--inner-top,rgba(255,255,255,.05));
  transition:transform .3s var(--ease,cubic-bezier(.2,.7,.2,1)),box-shadow .3s}
.gtile:hover{transform:translateY(-4px)}
.gtile.lead-tile{background:linear-gradient(150deg,rgba(0,210,255,.20),var(--glass,rgba(14,20,34,.5)) 62%)}
.gtile-btn,a.gtile{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;color:inherit;font:inherit;padding:22px 22px 20px;min-height:230px}
a.gtile{text-decoration:none}
.gtile[data-ribbon]::before{content:attr(data-ribbon);position:absolute;top:14px;right:14px;z-index:3;
  font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#04212f;
  background:linear-gradient(112deg,#5ee4ff,#00d2ff);padding:5px 11px;border-radius:100px;
  box-shadow:0 6px 16px rgba(0,210,255,.4)}
.gtile-title{font-family:var(--disp);font-weight:600;font-size:1.28rem;letter-spacing:-.02em;line-height:1.08;color:var(--ink,#fff)}
.gtile-graphic{position:relative;flex:1 1 auto;display:grid;place-items:center;min-height:120px;margin:2px 0}
.gtile-graphic svg{width:100%;height:100%;max-height:150px;overflow:visible}
.gtile-hook{font:500 .98rem/1.4 var(--body);color:var(--ink-2,#aeb7c4);max-width:26ch}
.gtile-bead{position:absolute;right:15px;bottom:15px;width:22px;height:22px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.9),rgba(94,228,255,.5) 46%,rgba(0,210,255,.18) 72%,transparent);
  box-shadow:0 2px 8px rgba(0,210,255,.4),inset 0 0 5px rgba(255,255,255,.5)}
.gtile-bead::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#04212f;font:800 13px var(--body)}
@media(prefers-reduced-motion:no-preference){.gtile-bead{animation:gbeadBreath 4.5s ease-in-out infinite}}
@keyframes gbeadBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}

/* ── the detail sheet (bottom sheet on mobile, centred pane on desktop) ──── */
.gsheet-scrim{position:fixed;inset:0;z-index:80;background:rgba(3,7,14,.5);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.gsheet-scrim.on{opacity:1;pointer-events:auto}
/* lock the background while a sheet is open (tiles.js toggles .gsheet-on on body) */
body.gsheet-on{overflow:hidden}
.gsheet{position:fixed;z-index:81;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;overscroll-behavior:contain;
  background:var(--glass,rgba(16,24,40,.78));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--glass-border,rgba(255,255,255,.16));border-radius:26px 26px 0 0;
  box-shadow:0 -22px 60px rgba(1,4,10,.6),var(--curve),var(--rim);
  transform:translateY(100%);transition:transform .34s var(--spring,cubic-bezier(.2,.9,.25,1));outline:none}
.gsheet.on{transform:translateY(0)}
.gsheet-inner{padding:26px 24px calc(30px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto;position:relative}
.gsheet-inner::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:100px;background:rgba(255,255,255,.22)}
.gsheet-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);color:var(--ink-2);font:400 20px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.gsheet-close:hover{color:#fff;border-color:rgba(0,210,255,.5)}
.gsheet h3{font-family:var(--disp);font-weight:600;font-size:1.35rem;margin:8px 40px 12px 0;color:#fff}
.gsheet .gs-pay{font:500 1.02rem/1.55 var(--body);color:var(--ink-2);margin:0 0 18px}
.gsheet .gs-bul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:11px}
.gsheet .gs-bul li{display:flex;align-items:center;gap:11px;font:500 .96rem var(--body);color:var(--ink,#e9eef5)}
.gsheet .gs-bul svg{flex:none;width:20px;height:20px;stroke:var(--blue-2,#5ee4ff);stroke-width:1.6;fill:none}
.gsheet .gs-quote{border-left:2px solid var(--blue,#00d2ff);padding:4px 0 4px 15px;margin:0 0 20px;
  font:500 .95rem/1.5 var(--body);color:var(--ink-2);font-style:italic}
.gsheet .gs-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:100px;
  background:linear-gradient(112deg,#00d2ff,#188bf6);color:#fff;font:700 .95rem var(--body);text-decoration:none;
  box-shadow:0 10px 30px rgba(0,210,255,.36)}
.gsheet .gs-cta.ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line-2);box-shadow:none;margin-left:10px}
@media(min-width:760px){
  .gsheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);max-height:86vh;
    border-radius:24px;border:1px solid var(--glass-border,rgba(255,255,255,.16));
    transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .34s var(--spring,cubic-bezier(.2,.9,.25,1)),opacity .28s}
  .gsheet.on{transform:translate(-50%,-50%) scale(1);opacity:1}
  .gsheet-inner::before{display:none}}
@media(prefers-reduced-motion:reduce){
  .gsheet{transition:opacity .2s ease}.gsheet,.gsheet.on{transform:none}
  .gsheet{opacity:0}.gsheet.on{opacity:1}
  @media(max-width:759px){.gsheet{top:auto;bottom:0}}}

/* ═══ TILE GRAPHICS (self-contained inline SVG; transform/opacity/stroke only) ═══ */
/* Engine hub — beads flow inward to a breathing orb; reply streams back out. */
.g-engine .ge-spoke{stroke:rgba(0,210,255,.3);stroke-width:1.1;fill:none;stroke-linecap:round}
.g-engine .ge-flow{stroke:var(--blue-2,#5ee4ff);stroke-width:1.6;fill:none;stroke-linecap:round;
  stroke-dasharray:5 26;filter:drop-shadow(0 0 2px rgba(94,228,255,.7))}
.g-engine .ge-halo{fill:none;stroke:rgba(0,210,255,.28);stroke-width:1}
.g-engine .ge-orb{fill:url(#geOrb)}
.g-engine .ge-wave{stroke:#eafcff;stroke-width:1.5;fill:none;stroke-linecap:round;opacity:.92}
.g-engine .ge-node circle{fill:rgba(10,18,32,.9);stroke:rgba(0,210,255,.45);stroke-width:1}
.g-engine .ge-node path,.g-engine .ge-node line,.g-engine .ge-node polygon{stroke:var(--blue-2,#5ee4ff);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.g-engine .ge-led{fill:#37e29a}
.in-view .g-engine .ge-halo{transform-box:fill-box;transform-origin:center;animation:geHalo 4s ease-in-out infinite}
.in-view .g-engine .ge-flow{animation:geFlow 2.6s linear infinite}
.in-view .g-engine .ge-flow.f2{animation-delay:.7s;animation-duration:2.9s}
.in-view .g-engine .ge-flow.f3{animation-delay:1.3s;animation-duration:2.4s}
.in-view .g-engine .ge-flow.f4{animation-delay:.4s;animation-duration:3.1s}
.in-view .g-engine .ge-led{animation:geLed 2.2s ease-in-out infinite}
@keyframes geHalo{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:1}}
@keyframes geFlow{0%{stroke-dashoffset:31}100%{stroke-dashoffset:0}}
@keyframes geLed{0%,100%{opacity:.4}50%{opacity:1}}
/* Integration thread — one luminous thread laces through what a business runs. */
.g-thread .gt-shape{stroke:rgba(120,140,170,.4);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.g-thread .gt-line{stroke:var(--blue-2,#5ee4ff);stroke-width:1.8;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(94,228,255,.6));stroke-dasharray:260;stroke-dashoffset:260}
.g-thread .gt-knot{fill:#eafcff;opacity:0}
.in-view .g-thread .gt-line{animation:gtDraw 2.6s var(--ease,ease) forwards}
.in-view .g-thread .gt-knot{animation:gtKnot .5s ease forwards}
.in-view .g-thread .gt-knot.k2{animation-delay:.7s}
.in-view .g-thread .gt-knot.k3{animation-delay:1.3s}
.in-view .g-thread .gt-knot.k4{animation-delay:1.9s}
@keyframes gtDraw{to{stroke-dashoffset:0}}
@keyframes gtKnot{to{opacity:.95}}
/* Beacon — question ripples converge on one lit marker (the business, found). */
.g-beacon .gb-ring{fill:none;stroke:rgba(0,210,255,.4);stroke-width:1;transform-box:fill-box;transform-origin:center}
.g-beacon .gb-mark{fill:url(#geOrb)}
.g-beacon .gb-stem{stroke:var(--blue-2,#5ee4ff);stroke-width:2;stroke-linecap:round}
.in-view .g-beacon .gb-ring{animation:gbRing 3s ease-out infinite}
.in-view .g-beacon .gb-ring.r2{animation-delay:1s}
.in-view .g-beacon .gb-ring.r3{animation-delay:2s}
@keyframes gbRing{0%{transform:scale(.3);opacity:0}20%{opacity:.8}100%{transform:scale(1);opacity:0}}
/* Hand-off — a glowing thread passes from an orb into an open hand. */
.g-handoff .gh-line{stroke:var(--blue-2,#5ee4ff);stroke-width:1.8;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(94,228,255,.55))}
.g-handoff .gh-orb{fill:url(#geOrb)}
.g-handoff .gh-hand{stroke:rgba(190,205,225,.7);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.g-handoff .gh-bead{fill:#eafcff}
.in-view .g-handoff .gh-bead{animation:ghBead 3s ease-in-out infinite}
@keyframes ghBead{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(30px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .g-engine *,.g-thread *,.g-beacon *,.g-handoff *{animation:none!important}
  .g-thread .gt-line{stroke-dashoffset:0}.g-thread .gt-knot{opacity:.95}}

/* ═══ PER-TRADE / CAPABILITY ICON CHIPS (generated-page "what it does" row) ═══ */
.chiprow{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 13px;border-radius:100px;
  background:var(--glass,rgba(14,20,34,.5));backdrop-filter:blur(var(--blur,14px));-webkit-backdrop-filter:blur(var(--blur,14px));
  border:1px solid var(--glass-border,var(--line-2,rgba(255,255,255,.14)));
  box-shadow:var(--e1,0 8px 20px -10px rgba(1,4,10,.6)),var(--curve-sm),var(--rim-sm);
  font:600 .92rem var(--body);color:var(--ink,#e9eef5);text-decoration:none;transition:transform .2s var(--ease,ease),border-color .2s}
a.chip:hover{transform:translateY(-2px);border-color:rgba(0,210,255,.5)}
.chip .chip-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(0,210,255,.14)}
.chip .chip-ic svg{width:17px;height:17px;stroke:var(--blue-2,#5ee4ff);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ═══ COMMUNICATION-ENGINE CROSS-SELL BAND (appended to generated pages) ═════ */
.ce-band{margin:52px 0 8px;padding:32px 26px;border-radius:var(--r-lg,22px);position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(0,210,255,.13),var(--glass,rgba(14,20,34,.5)) 60%);
  backdrop-filter:blur(var(--blur,16px));-webkit-backdrop-filter:blur(var(--blur,16px));
  border:1px solid var(--glass-border,var(--line-2,rgba(255,255,255,.14)));
  box-shadow:var(--e2,0 18px 40px -18px rgba(1,4,10,.7)),var(--curve),var(--rim);
  display:grid;gap:22px;align-items:center}
@media(min-width:820px){.ce-band{grid-template-columns:1.15fr .85fr;padding:38px 40px}}
.ce-band .ce-bridge{font:600 .8rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2,#5ee4ff);margin:0 0 10px}
.ce-band h2{font-size:clamp(1.6rem,3.4vw,2.2rem)!important;margin:0 0 12px!important}
.ce-band p{color:var(--ink-2,#aeb7c4);margin:0 0 18px;max-width:44ch;font-size:1.02rem;line-height:1.55}
.ce-band .ce-gfx{display:grid;place-items:center;min-height:150px}
.ce-band .ce-gfx svg{width:100%;max-width:260px;overflow:visible}
.ce-band .gs-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:100px;
  background:linear-gradient(112deg,#00d2ff,#188bf6);color:#fff;font:700 .95rem var(--body);text-decoration:none;
  box-shadow:0 10px 30px rgba(0,210,255,.36)}