/* CoatFlow liquid layer 2.0 (2026-09-01). Loaded by every marketing page AFTER
   its inline foundation, as progressive enhancement: the pour behind the hero,
   glass that refracts it, a cursor-following sheen, tiles that morph, flow
   lines through the system, and morphic page transitions. Every rule here is
   additive; a page with this file blocked still reads as the foundation
   intended. Motion is off under prefers-reduced-motion. */

:root{
  --ember:#FF5A1F;      /* the pour's hot body        */
  --amber:#FFB454;      /* where the pour catches light */
  --pearl:#E9E4DA;      /* metallic pearl highlight   */
  --cobalt:#3B6CFF;     /* one cool vein, used sparingly */
  --coral:#FF3B6B;      /* warmth at the edges         */
  --glass-line:rgba(255,255,255,0.14);
  --glass-line-hi:rgba(255,255,255,0.26);
}

/* ── Morphic page transitions ─────────────────────────────────────────────
   Cross-document view transitions (Chrome 126+, Safari 18.2+). The chrome is
   named so it carries across pages instead of re-painting; the rest of the
   page cross-fades. Browsers without support simply navigate. */
@view-transition{navigation:auto}
.nav{view-transition-name:cf-nav}
.brand{view-transition-name:cf-brand}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(cf-nav),::view-transition-new(cf-nav){animation:none}

/* ── Vibrant ambient: the orbs take the pour palette ──────────────────── */
.orbs i:first-child{background:radial-gradient(circle at 50% 50%,rgba(255,90,31,0.17),rgba(255,180,84,0.06) 44%,transparent 64%)}
.orbs i:last-child{background:radial-gradient(circle at 50% 50%,rgba(59,108,255,0.12),rgba(255,59,107,0.04) 50%,transparent 62%)}
.orbs::after{content:"";position:absolute;inset:0;background:radial-gradient(70vmax 38vmax at 72% 8%,rgba(255,59,107,0.07),transparent 60%)}

/* ── Glass 2.0 ─────────────────────────────────────────────────────────── */
.glass{--mx:50%;--my:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.065),rgba(255,255,255,0.02)),rgba(16,16,20,0.58);
  border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 30px 70px -40px rgba(0,0,0,0.85);
  /* Carries the foundation's reveal properties too (opacity, filter): a later
     sheet's transition list replaces, not extends, so without them a glass
     card with [data-reveal] would snap in instead of fading. */
  transition:border-color .35s,box-shadow .5s,transform .65s cubic-bezier(.22,1,.36,1),opacity .65s cubic-bezier(.22,1,.36,1),filter .65s cubic-bezier(.22,1,.36,1)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,0.11),rgba(255,180,84,0.05) 30%,transparent 46%);
  opacity:0;transition:opacity .4s}
.glass:hover{border-color:var(--glass-line-hi)}
.glass:hover::after{opacity:1}

/* ── Liquid display: a glass console with a live bar ──────────────────── */
.display{position:relative;--mx:50%;--my:40%;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015)),rgba(11,11,15,0.66);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 40px 90px -46px rgba(0,0,0,0.9),0 0 0 1px rgba(0,0,0,0.35)}
.display::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35) 25%,var(--amber) 50%,rgba(255,255,255,0.35) 75%,transparent)}
.display::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(640px circle at var(--mx) var(--my),rgba(255,255,255,0.09),transparent 44%);opacity:0;transition:opacity .4s}
.display:hover::after{opacity:1}
.display-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.display-bar::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);animation:cf-pulse 2.4s ease-out infinite}
.display-bar b{color:var(--ink);font-weight:600}
.display-body{padding:clamp(16px,2.4vw,26px)}
@supports not (backdrop-filter:blur(1px)){.display{background:var(--panel)}}

/* ── Morph tiles ───────────────────────────────────────────────────────── */
.morph{transition:border-radius .9s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.22,1,.36,1),box-shadow .55s,border-color .35s,opacity .65s cubic-bezier(.22,1,.36,1),filter .65s cubic-bezier(.22,1,.36,1);will-change:transform}
.morph:hover,.morph:focus-within{border-radius:30px 14px 30px 14px;transform:translateY(-5px);
  box-shadow:0 34px 70px -34px rgba(255,90,31,0.5),inset 0 1px 0 rgba(255,255,255,0.14)}

/* A living blob: the same path, breathing. Chrome/Safari/Firefox animate d. */
.blob{display:block;width:100%;height:auto}
.blob path{fill:url(#cf-blob-fill);animation:cf-blob 16s ease-in-out infinite}
@keyframes cf-blob{
  0%,100%{d:path("M60,8 C84,6 108,26 112,52 C116,80 100,110 72,114 C44,118 14,100 8,70 C2,42 28,10 60,8 Z")}
  50%{d:path("M56,6 C88,2 118,30 114,60 C110,90 90,116 60,116 C30,116 6,92 6,60 C6,30 26,10 56,6 Z")}
}

/* ── Flow lines through the system ────────────────────────────────────── */
.flow path{fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:3 11;opacity:.8;animation:cf-flow 2.4s linear infinite}
.flow path.cool{stroke:var(--cobalt)}
@keyframes cf-flow{to{stroke-dashoffset:-56}}

/* ── The pour (canvas inserted by liquid.js into [data-pour]) ──────────── */
.pour-host{position:relative;isolation:isolate}
.pour{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%)}
.pour-ready .pour{opacity:.92}
/* No WebGL, or reduced motion without a frame: a still pour in CSS. */
.pour-fallback::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(55vmax 40vmax at 18% 22%,rgba(255,90,31,0.42),transparent 62%),
    radial-gradient(48vmax 34vmax at 78% 12%,rgba(255,180,84,0.22),transparent 60%),
    radial-gradient(40vmax 30vmax at 62% 70%,rgba(59,108,255,0.16),transparent 60%),
    radial-gradient(60vmax 44vmax at 40% 88%,rgba(255,59,107,0.10),transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%)}

/* ── Life: a breathing primary button, a pour-in reveal ───────────────── */
.breathe{animation:cf-breathe 5.5s ease-in-out infinite}
@keyframes cf-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}50%{box-shadow:0 0 44px -6px rgba(255,90,31,0.6)}}
@keyframes cf-pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,0.55)}70%{box-shadow:0 0 0 12px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
/* .pour-in is a WRAPPER with one child (the console). The clip must sit on the
   child, never on the element the reveal script observes: Chromium's
   IntersectionObserver honours the target's own clip-path, so a circle(0%)
   target never intersects and never reveals (measured 2026-09-01). */
/* As a grid or flex item the wrapper must not size to its child's intrinsic
   width (a scrolling board inside would widen the page instead of scrolling). */
.pour-in{min-width:0;max-width:100%}
html.js [data-reveal].pour-in:not(.in){opacity:1;transform:none;filter:none}
html.js [data-reveal].pour-in:not(.in) > *{clip-path:circle(0% at 50% 55%)}
[data-reveal].pour-in > *{transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}
[data-reveal].pour-in.in > *{clip-path:circle(160% at 50% 55%)}

@media (prefers-reduced-motion:reduce){
  .display-bar::before,.blob path,.flow path,.breathe{animation:none}
  .morph,.glass,.display,.pour{transition:none}
  html.js [data-reveal].pour-in:not(.in) > *{clip-path:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── Nav at tablet-landscape widths ───────────────────────────────────────
   The foundation puts the nav on one row from 900px. With six modules in the
   nav that row needs about 1120px, so between 900 and 1119px the page
   overflowed by up to 60px (measured on every page, 2026-09-01). Keep the
   two-row layout (brand + CTAs, then the scrolling link row) until 1120px. */
@media (min-width:900px) and (max-width:1119px){
  .nav{grid-template-columns:1fr auto}
  .nav > nav{grid-row:2;grid-column:1 / -1;justify-content:flex-start;overflow-x:auto}
  .nav-cta{grid-row:1;grid-column:2}
}

/* ── Products menu ─────────────────────────────────────────────────────────
   One button in the nav row, a full-width glass panel under the header. The
   panel is positioned against .nav (sticky, so positioned), NOT against
   .menu: the nav row scrolls horizontally on small screens, and an
   absolutely positioned child of that scroller would be clipped by it. A
   descendant whose containing block is an ancestor of the scroller escapes
   the clip. Hover opens it where hover exists; click, Enter and Space toggle
   it everywhere (liquid.js); Escape and outside clicks close it. */
.menu{position:static}
.menu-btn{appearance:none;background:none;border:0;padding:4px 0;margin:0;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--mute);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .18s}
.menu-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.menu-btn:hover,.menu-btn:focus-visible,.menu.open .menu-btn{color:var(--ink)}
.menu.open .menu-btn::after{transform:translateY(1px) rotate(225deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;z-index:70;display:grid;grid-template-columns:1fr;gap:6px;padding:14px var(--pad) 18px;
  background:rgba(10,10,10,0.96);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid var(--glass-line-hi);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.menu.open .menu-panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
@media (hover:hover){.menu:hover .menu-panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}}
.nav > nav .menu-panel a{display:grid;gap:3px;padding:12px 14px;border-radius:12px;border:1px solid transparent;text-transform:none;letter-spacing:0;white-space:normal;font-size:14px;color:var(--ink);transition:background .18s,border-color .18s}
.nav > nav .menu-panel a strong{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
.nav > nav .menu-panel a span{color:var(--mute);font-size:13.5px;line-height:1.4}
.nav > nav .menu-panel a:hover,.nav > nav .menu-panel a:focus-visible{background:rgba(255,255,255,.05);border-color:var(--glass-line);color:var(--ink)}
@media (min-width:700px){.menu-panel{grid-template-columns:repeat(3,1fr);gap:8px}}
@media (min-width:1120px){.menu-panel{grid-template-columns:repeat(6,1fr)}}
@media (prefers-reduced-motion:reduce){.menu-panel,.menu-btn::after{transition:none}}

/* ── Hero highlight ────────────────────────────────────────────────────────
   An inline background paints the font's content box, which for Barlow
   Condensed is 1.2em (ascent 1.0, descent .2). Over the foundation's .96em
   line pitch that box bled into the lines above and below. At a 1.06em
   pitch with .03em/.05em padding the box bottom (baseline + .25em) clears
   the next line's cap tops (baseline + .36em) and its top (baseline minus
   1.03em) clears the previous baseline (minus 1.06em), so nothing overlaps
   white type; consecutive highlighted lines still merge into one shape. */
.hero h1{line-height:1.06}
.hero h1 .mark{display:inline;line-height:inherit;padding:.03em .16em .05em;margin:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}