@import url('/css/netlify-badge.css?v=1');
/* ============================================================
   PulseWave — Creator Network
   ============================================================ */
:root{
  --bg:#04070e; --bg-soft:#060b16; --panel:#0a1120; --panel-2:#0d1526; --promo-h:40px;
  --cyan:#35c7ff; --cyan-soft:#7fe3ff; --cyan-deep:#0e9be0; --blue:#1565e8;
  --ink:#eaf3fb; --muted:#93a9bd; --white:#fff; --on-cyan:#04121f;
  --line:rgba(120,200,255,.16); --line-soft:rgba(120,200,255,.09);
  --head:'Archivo',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(96px + var(--promo-h));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--head)}
p{margin:0}
figure{margin:0}
.container{width:min(1180px,92%);margin-inline:auto}
::selection{background:rgba(53,199,255,.35);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--on-cyan);padding:.6rem 1rem;border-radius:0 0 10px 0;z-index:100;font-weight:700}
.skip-link:focus{left:0}

/* ---------- type ---------- */
h1,.h2{font-style:italic;font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.015em}
h1{font-size:clamp(2.9rem,6.4vw,5.2rem)}
.h2{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.solid{color:#fff}
.grad{background:linear-gradient(92deg,#9fe9ff 0%,#38c6ff 45%,#0f8fe0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:800 .78rem/1.4 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--cyan-soft);margin-bottom:1.1rem}
.lede{color:var(--muted);font-size:1.06rem;max-width:46ch;text-align:center}

/* ---------- buttons ---------- */
a,button{touch-action:manipulation}
.btn{display:inline-flex;align-items:center;gap:.6rem;font:700 1rem/1 var(--body);border-radius:999px;padding:1rem 1.7rem;transition:transform .2s ease,box-shadow .2s ease,filter .2s;white-space:nowrap;cursor:pointer;border:0}
.i{width:1.1em;height:1.1em;flex:none;transition:transform .2s}
.btn:hover .i{transform:translateX(4px)}
.btn-primary{background:linear-gradient(180deg,var(--cyan-soft),var(--cyan));color:#000000!important;font-weight:900!important;text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 8px 30px rgba(28,180,242,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(28,180,242,.5);filter:brightness(1.05)}
.btn-sm{padding:.72rem 1.25rem;font-size:.93rem}
.btn-lg{padding:1.15rem 2.1rem;font-size:1.05rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.32s}
.no-js .reveal{opacity:1;transform:none}

/* ---------- header ---------- */
/* The design reference sets the bar at ~84px with a dark navy fill and a faint
   divider, and pulls its content out to ~145px gutters at 1827px wide. The
   translucent fill is always on (not just when scrolled) so hero content never
   shows through it; .scrolled still deepens it once the page moves. */
.site-header{position:fixed;inset:var(--promo-h) 0 auto;z-index:60;transition:background .3s,border .3s;background:rgba(5,9,18,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.site-header.scrolled{background:rgba(5,9,18,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.site-header .container{width:min(1540px,92%)}
.header-inner{display:flex;align-items:center;gap:2.2rem;min-height:84px}
/* SEO/game interlink bar: always in normal flow just under the fixed header +
   promo bar, never behind them. Homepage omits it entirely. */
.page-links{position:relative;z-index:5;display:flex;align-items:center;gap:.45rem;width:min(1180px,92%);margin:calc(var(--promo-h) + 92px) auto .9rem;padding:.5rem .25rem .65rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(53,199,255,.45) transparent;white-space:nowrap;-webkit-overflow-scrolling:touch}
.page-links span{position:sticky;left:0;z-index:1;padding:.25rem .8rem .25rem 0;background:var(--bg);color:var(--cyan-soft);font:800 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase}
.page-links a{flex:none;padding:.4rem .75rem;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.025);color:#adc0d1;font:650 .72rem/1.2 var(--body);transition:color .2s,border-color .2s,background .2s}
.page-links a:hover{color:#fff;border-color:var(--cyan);background:rgba(53,199,255,.09)}
.brand{display:flex;align-items:center}
.brand-logo{display:block;height:40px;width:auto;filter:drop-shadow(0 0 16px rgba(53,199,255,.18))}
.header-cta{margin-left:auto}
/* Reference header CTA: ~180x52 pill with a cyan glow. */
.header-cta.btn-sm{min-width:180px;height:52px;justify-content:center;padding:0 1.6rem;font-size:1rem;box-shadow:0 8px 26px rgba(28,180,242,.35),0 0 22px rgba(53,199,255,.35)}
/* ---------- hero ---------- */
.hero{position:relative;padding:calc(10.5rem + var(--promo-h)) 0 6.5rem;overflow:hidden;background:
 radial-gradient(900px 520px at 12% 108%,rgba(21,101,232,.34),transparent 60%),
 radial-gradient(760px 480px at 96% -10%,rgba(21,101,232,.22),transparent 60%),
 linear-gradient(180deg,#05080f 0%,#04070e 100%)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(120,200,255,.028) 0 2px,transparent 2px 140px);pointer-events:none}
/* Headline scale solved from the mockup's painted ink by
   tools/compare-hero-to-mockup.js: "THE CREATOR" ink = 8.6% of hero height and
   the brush "NETWORK" = 2.18x that. Solving both simultaneously needs a wider
   copy column than the default grid allows, hence the wider hero-grid below.

   The copy column is floored at 1030px: that is the measured painted width of
   the brush "NETWORK" at the mockup's size (tools/measure-ref-hero.py), so any
   narrower and the word breaks out of its column. The reference mockup lets the
   headline run right up to the collage, so the remaining width all goes to the
   right-hand visual — which must stay wide, since the mockup's card cluster
   spans 50%..99.9% of the hero width.

   The grid is inset asymmetrically (7.5vw left, ~1.7vw right) rather than
   centred: that puts the copy column's left edge on the mockup's 133px while
   still giving the collage all the remaining width. */
/* align-items:start rather than center: with the copy column and the collage at
   different heights, centering made every headline y-position depend on how tall
   the copy happened to be, so each copy change dragged the whole block around.
   Top-aligning fixes the copy to the hero's padding and leaves the collage's
   offset to its own margin. */
.hero-grid{width:auto;max-width:1800px;margin-left:clamp(1.5rem,7.5vw,137px);margin-right:0;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);gap:1.5rem;align-items:start;position:relative}
.hero .eyebrow{color:#8fdcff;font-size:.95rem;letter-spacing:.46em}
/* The mockup leaves ~27px between the rule and the label rather than the
   .85rem the shared eyebrow uses. */
.hero .eyebrow-rule{gap:1.55rem}
/* Archivo runs wider than the reference's display face at equal cap height, so
   the white line is tracked in and squeezed ~3.5% horizontally (painted only —
   the block still occupies its normal width) to land on the mockup's 721px. */
.hero h1 .solid{letter-spacing:-.035em;transform:scaleX(.965);transform-origin:left center}
/* Rhythm measured against the design mockup (tools/analyse-hero-mockup.py):
   "THE CREATOR" cap height ~= 8.6% of hero height, the brush "NETWORK" sits
   directly beneath it at ~2.2x that height, and the gaps below the headline
   and above the CTA are wide. These clamps reproduce that at 1827px. */
/* Padding puts the eyebrow's ink on the mockup's y=177 with the hero starting
   at the top of the document (the promo bar is fixed, not in flow). */
.hero{padding:calc(10.75rem + var(--promo-h)) 0 5.5rem}
/* Headline scale, solved from the mockup's painted ink (tools/analyse-hero-mockup.py):
   "THE CREATOR" ink = 8.6% of hero height and the brush "NETWORK" = 2.18x that.
   At 1827px wide these clamps put both words at those proportions while keeping
   the white line inside its column. */
.hero h1{line-height:.9;margin:0 0 3.34rem;font-size:clamp(2.6rem,6.1vw,6.4rem)}
.hero h1 span{display:block}
/* The white line sets the measure; the brush word is sized off it and allowed
   to run slightly wider, as in the mockup, but must not blow out the column. */
.hero h1>.solid{line-height:.98}
.hero-copy{min-width:0}
/* The mockup's hero CTA is a ~286x76 pill with ~54px of left padding and the
   arrow pushed to the right edge, set in noticeably larger type than .btn-lg. */
.hero-ctas .btn-lg{height:76px;min-width:286px;padding:0 3rem 0 3.4rem;font-size:1.4rem;justify-content:space-between}
.hero-ctas{display:flex;align-items:center;gap:1.3rem;margin-top:1.22rem;flex-wrap:wrap}
.micro{color:var(--muted);font-size:.9rem}

/* hero visual collage */
/* The mockup's collage spans 50%..99.9% of the hero width and divides into a
   central live panel flanked by three category cards (~52% / 24% / 24%).
   The visual reclaims the grid's right inset so the right-hand cards are not
   clipped against the viewport edge.

   Every photo frame in the collage is a 9:16 live-stream rectangle (asserted by
   tools/check-hero-frames.js), and the old percentages-of-both-axes geometry
   could not hold that: a frame's real ratio then depended on how wide the
   visual column happened to be — 0.79 for the panel and 0.41 for gaming at
   1827px, 0.37 for the panel at 1280px, landscape for the two side cards. So
   the cluster is sized from ONE unit instead: --fh is the collage's height,
   every frame is --h x --fh tall with its width taken from 9:16, and every
   offset a multiple of --fh. --fh follows the visual's own width at each
   breakpoint (see the media queries), so the collage scales as a rigid group
   and can never distort. The panel's overlays ride the same unit too: --fs is
   the chat/badge type (.95rem at the desktop --fh of 640px) and --av the chat
   avatar (34px there), both floored because on a phone the whole collage is
   only ~290px tall and the mockup's fixed sizes would fall out of legibility. */
.hero-visual{--fh:min(640px,calc(35.52vw - 9.21px));--fs:clamp(9.6px,calc(var(--fh)*.0238),15.2px);--av:clamp(18px,calc(var(--fh)*.0531),34px);position:relative;min-height:var(--fh);width:100%;margin-top:-8.6px;z-index:1}
.hero-visual::after{content:"";position:absolute;left:50%;top:14%;width:62%;height:80%;transform:translateX(-50%);border-radius:40px;background:radial-gradient(60% 50% at 50% 0%,rgba(45,175,255,.30),transparent 70%);filter:blur(26px);z-index:0;pointer-events:none}
.shot{position:absolute;border-radius:22px;overflow:hidden;border:1px solid rgba(130,215,255,.5);box-shadow:0 30px 70px rgba(2,10,25,.65),0 0 46px rgba(23,167,232,.18);z-index:1}
.shot img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,22,0) 55%,rgba(4,10,22,.55));pointer-events:none}
/* Every frame is a 9:16 rectangle: --h (its height as a fraction of --fh, the
   collage height) is the only size input and the width follows from it, so no
   breakpoint can knock a frame out of ratio. The seats below keep the mockup's
   arrangement — the live panel keeps its measured 4deg tilt and its ~93% of the
   collage height, the category cards keep their rotated seats down the sides —
   but re-cut so that all four read as portrait live-stream frames. */
.shot.main,.cat-card{height:calc(var(--fh)*var(--h));width:calc(var(--fh)*var(--h)*.5625)}
.shot.main{--h:.9;left:calc(50% - var(--fh)*.355);top:calc(var(--fh)*.02);transform:rotate(4deg);z-index:3;border:2.5px solid rgba(140,236,255,.95);box-shadow:0 34px 80px rgba(2,10,25,.7),0 0 24px rgba(53,199,255,.55),0 0 72px rgba(35,180,250,.45),inset 0 0 20px rgba(53,199,255,.22)}
.badges{position:absolute;top:clamp(6px,calc(var(--fh)*.0156),16px);left:clamp(6px,calc(var(--fh)*.0156),16px);right:clamp(6px,calc(var(--fh)*.0156),16px);display:flex;justify-content:space-between;align-items:center;z-index:4}
.badge{display:inline-flex;align-items:center;gap:.6em;font:800 calc(var(--fs)*.76)/1 var(--body);letter-spacing:.08em;padding:.7em 1em;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.badge.live{background:rgba(8,12,20,.55);color:#fff;border:1px solid rgba(255,255,255,.18)}
.badge.live .dot{width:.7em;height:.7em;border-radius:50%;background:#ff3b5c;box-shadow:0 0 12px #ff3b5c;animation:pulse 1.6s infinite}
.badge.views{background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.18);color:#dff3ff}
.badge.views svg{width:1em;height:1em}
@keyframes pulse{50%{opacity:.35}}
/* ---------- features ---------- */
.features{background:linear-gradient(180deg,#05090f,#04070e);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:4.6rem 0}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:0 2.2rem}
.feature:first-child{padding-left:0}
.feature:last-child{padding-right:0}
.feature+.feature{border-left:1px solid var(--line-soft)}
.feature .icon{width:46px;height:46px;color:var(--cyan);margin-bottom:1.1rem}
.feature .icon svg{width:100%;height:100%}
.feature h3{font:800 .98rem/1.35 var(--body);letter-spacing:.05em;text-transform:uppercase;color:#fff;margin-bottom:.55rem}
.feature p{color:var(--muted);font-size:.95rem}

/* ---------- creators ---------- */
.h2 span{display:block}
.creators{padding:6.5rem 0;position:relative;overflow:hidden;background:radial-gradient(700px 420px at 88% 20%,rgba(21,101,232,.16),transparent 60%)}
.creators-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3.4rem;align-items:center}
.creator-copy .lede{margin-top:1.2rem}
.creator-collage{position:relative;min-height:520px}
.ccard{position:absolute;border-radius:20px;overflow:hidden;border:1px solid rgba(130,215,255,.45);box-shadow:0 26px 60px rgba(2,10,25,.6),0 0 40px rgba(23,167,232,.14)}
.ccard img{width:100%;height:100%;object-fit:cover}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(30,120,255,.12),transparent 40%,rgba(4,10,22,.45) 95%)}
.ccard.a{left:6%;top:0;width:46%;height:56%;transform:rotate(-2deg);z-index:2}
.ccard.b{right:0;top:4%;width:42%;height:44%;transform:rotate(3deg)}
.ccard.c{left:0;bottom:0;width:40%;height:46%;transform:rotate(2deg)}
.ccard.d{right:8%;bottom:4%;width:44%;height:44%;transform:rotate(-3deg);z-index:2}
.cat-chip{position:absolute;left:10px;bottom:10px;z-index:3;padding:.3rem .62rem;border-radius:999px;background:rgba(6,12,24,.72);border:1px solid rgba(140,215,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#d9efff;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
/* ---------- CTA banner ---------- */
.site-footer{border-top:1px solid var(--line-soft);background:#04070d;padding:3.2rem 0 2rem}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);background:#04070d;padding:3.2rem 0 2rem}
.footer-grid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.6rem}
.site-footer .brand-logo{height:30px;filter:none}
.socials{display:flex;gap:1rem}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:#bcd2e4;transition:color .2s,border-color .2s,transform .2s}
.socials a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.legal{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);color:#7e93a8;font-size:.85rem}
.legal .tag{color:#61788e}

/* ---------- mobile apply bar ---------- */
.mobile-apply{display:none}

/* ---------- responsive ---------- */
/* Below ~1600px the two-column grid squeezes the copy column until the brush
   word no longer fits. Widen the copy column and ease the brush size off. */
@media (max-width:1600px){
  /* Below ~1600px a fixed 1030px copy column no longer leaves the collage enough
     room, so the columns become proportional at the same ~64/36 ratio the
     desktop rule resolves to, and the brush eases off. That column is only ~36%
     of the grid, so the collage fills more of it here than at the desktop
     breakpoint (a 9:16 cluster is near-square, and a 1.4:1 box would leave it
     small): ~86% of the column, which keeps the four frames readable down to
     the 1024px switch. */
  .hero-grid{grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);gap:1.6rem}
  .hero-visual{--fh:min(450px,calc(28.93vw - 12.2px))}
  .hero h1{font-size:clamp(2.4rem,6.6vw,5.4rem)}
}
@media (max-width:1024px){
  .hero{padding-top:calc(8.5rem + var(--promo-h))}
  .hero-grid{width:auto;margin-inline:5%;grid-template-columns:1fr;gap:4rem}
  /* Single column: the visual is centred and no longer reclaims the grid's
     desktop right inset, or it would overflow the viewport. --fh follows the
     640px cap that column settles at; the auto margins centre the capped box,
     which would otherwise sit against the column's left edge. */
  .hero-visual{--fh:min(455px,64vw);max-width:640px;width:100%;margin-inline:auto}
  .features-grid{grid-template-columns:1fr 1fr;gap:2.6rem 2rem}
  .feature{border:0;padding:0}
  .creators{padding:4.5rem 0}
  .creators-grid{grid-template-columns:1fr;gap:3rem}
  .creator-collage{min-height:440px}
}
@media (max-width:760px){
  body{padding-bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))}
  .header-inner{gap:1rem;min-height:70px}
  .page-links{width:100%;padding-left:.6rem;padding-right:.6rem;margin:calc(var(--promo-h) + 84px) 0 .9rem}
  .page-links a{padding:.4rem .65rem}
  .brand-logo{height:30px}
  .header-cta{padding:.7rem 1.1rem;font-size:.9rem}
  h1{font-size:clamp(2.3rem,10vw,3.1rem)}
  .hero{padding:calc(7.5rem + var(--promo-h)) 0 4.5rem}
  /* Phones get a slightly taller collage than the desktop box aspect would give
     — the full 90% column width — so the frames stay a usable size; the
     cluster's own 1.076-unit bounding width still leaves a margin either side. */
  .hero-visual{--fh:min(542px,74vw)}
  .hero-visual::before{font-size:15rem;opacity:.2;top:auto;bottom:-8%}
  .features{padding:3.4rem 0}
  .features-grid{grid-template-columns:1fr}
  .creators{padding:4rem 0}
  .creator-collage{min-height:380px}
  .ccard.a{left:0;width:58%}
  .ccard.b{width:48%}
  .ccard.c{width:46%}
  .ccard.d{width:50%;right:0}
  .mobile-apply{display:inline-flex;position:fixed;left:4vw;right:4vw;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:70;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(180deg,#4ad2ff,#1cb4f2);color:var(--on-cyan);font:800 1rem/1 var(--body);padding:1.05rem 1rem;border-radius:999px;box-shadow:0 14px 40px rgba(28,180,242,.45)}
  .mobile-apply:hover,.mobile-apply:active{transform:none}
  .mobile-apply:active{filter:brightness(1.06)}
  .doc a.btn{max-width:100%;white-space:normal;box-sizing:border-box}
  .doc .btn-lg{display:flex;width:100%;justify-content:center;text-align:center}
}
@media (max-width:380px){
  .header-inner{min-height:64px}
  .brand-logo{height:26px}
  .header-cta{padding:.6rem .9rem;font-size:.85rem}
  h1{font-size:clamp(2.1rem,10vw,2.7rem)}
  .hero{padding:calc(6.6rem + var(--promo-h)) 0 4rem}
  .btn-lg{padding:1rem 1.6rem;font-size:.98rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ---------- company / legal footer ---------- */
.company{margin-top:2.2rem;font-size:.85rem;color:#7e93a8;line-height:1.6;text-align:center}
.company .company-name{font:700 .78rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#b9cfdf;margin-bottom:.55rem}
.company p{margin:0 0 .35rem}
.legal-links{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap}
.legal-links a{color:#9fb6c9;transition:color .2s}
.legal-links a:hover{color:#fff}
.legal-label{font:700 .74rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#61788e;margin:0}
.legal-label--gap{margin-top:1.2rem}

/* ---------- legal document page ---------- */
.legal-main{padding:calc(9.5rem + var(--promo-h)) 0 4.5rem}
.seo-main{padding:calc(6.5rem + var(--promo-h)) 0 4.5rem}
.doc{max-width:46rem;margin:0 auto}
.doc h1{font:italic 900 clamp(2.2rem,5vw,3rem)/1.05 var(--head);margin:0 0 .4rem;color:#fff;scroll-margin-top:7rem}
.doc .updated{color:var(--muted);font-size:.9rem;margin:0 0 2.6rem}
.doc h2{font:800 1.25rem/1.25 var(--head);margin:2.4rem 0 .8rem;color:#fff}
.doc p,.doc li{color:#b6c6d6;line-height:1.75;font-size:.98rem;margin:0 0 .9rem}
.doc ul{margin:0 0 1rem;padding-left:1.15rem}
.doc li{margin:0 0 .45rem}
.doc strong{color:#e8f2fb}
.doc a{color:#7fd6ff}
.doc hr{border:0;border-top:1px solid var(--line-soft);margin:3.4rem 0}
.doc h3{font:800 1.02rem/1.35 var(--head);color:#e8f2fb;margin:1.7rem 0 .45rem}
.jump{display:flex;gap:1rem;margin:0 0 2.8rem;flex-wrap:wrap}
.jump a{font:600 .95rem/1 var(--body);color:#c3d3e2;border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;transition:color .2s,border-color .2s}
.jump a:hover{color:var(--cyan);border-color:var(--cyan)}
.jump-current{font:600 .95rem/1 var(--body);color:var(--on-cyan);background:var(--cyan);border:1px solid var(--cyan);border-radius:999px;padding:.6rem 1.15rem;display:inline-block}
@media (max-width:760px){.legal-main{padding:calc(7.5rem + var(--promo-h)) 0 3rem}.seo-main{padding:calc(6rem + var(--promo-h)) 0 3rem}}

/* ---------- Why PulseWave ---------- */
.why{padding:6.5rem 0;position:relative;overflow:hidden}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;margin-top:2.6rem}
.why-card{padding:1.7rem 1.5rem;border-radius:18px;border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));transition:transform .25s,border-color .25s}
.why-card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.why-card .emoji{font-size:1.7rem;line-height:1;display:block;margin-bottom:.85rem}
.why-card h3{font:800 1.05rem/1.3 var(--head);color:#fff;margin:0 0 .5rem}
.why-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}
/* ---------- How it works ---------- */
.how{padding:0 0 6.5rem}
.steps{list-style:none;margin:2.7rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1rem}
.step{position:relative;padding:1.5rem 1.25rem;border-radius:16px;border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.step .num{font:italic 900 1.7rem/1 var(--head);background:linear-gradient(180deg,#4ad2ff,#1cb4f2);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:.7rem}
.step h3{font:800 1rem/1.3 var(--head);color:#fff;margin:0 0 .4rem}
.step p{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0}
.step::after{content:"↓";position:absolute;right:1.05rem;top:50%;transform:translateY(-50%);color:#38546c;font-size:1.15rem}
/* ---------- Is PulseWave right for me ---------- */
.fit{padding:0 0 6.5rem}
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem;margin-top:2.6rem}
.fit-card{border-radius:18px;border:1px solid var(--line-soft);padding:1.9rem 1.6rem}
.fit-card h3{font:800 1.15rem/1.3 var(--head);color:#fff;margin:0 0 1.1rem}
.fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fit-card li{display:flex;gap:.65rem;align-items:flex-start;color:#b6c6d6;font-size:.92rem;line-height:1.5;margin:0}
.fit-card .mark{flex:none;font-weight:900;font-size:1.02rem;line-height:1.35}
.fit-yes{border-color:rgba(37,211,102,.4);background:linear-gradient(180deg,rgba(37,211,102,.08),rgba(37,211,102,0))}
.fit-yes .mark{color:#5cdd8b}
.fit-no{border-color:rgba(255,107,122,.35);background:linear-gradient(180deg,rgba(255,107,122,.07),rgba(255,107,122,0))}
.fit-no .mark{color:#ff8a97}
/* ---------- Comparison table ---------- */
.compare{padding:0 0 6.5rem}
.compare-wrap{overflow-x:auto;margin-top:2.6rem;border-radius:16px;border:1px solid var(--line-soft)}
.compare-table{width:100%;border-collapse:collapse;min-width:480px;font-size:.9rem}
.compare-table th,.compare-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.compare-table thead th{font:800 .95rem/1.3 var(--head);color:#fff;background:rgba(255,255,255,.035)}
.compare-table thead th.pulse-col{color:#4ad2ff}
.compare-table tbody td:first-child{color:#c3d3e2;font-weight:700}
.compare-table tbody td{color:#9fb0c1}
.compare-table .yes{color:#5cdd8b;font-weight:900}
.compare-table .no{color:#51637a}
.compare-table .good{color:#4ad2ff}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table .pulse-col{background:linear-gradient(180deg,rgba(28,180,242,.08),rgba(28,180,242,0))}
/* ---------- FAQ ---------- */
.faq{padding:6.5rem 0 7rem}
.faq .faq-inner{max-width:44rem;margin:2rem auto 0}
.faq details{border:1px solid var(--line-soft);border-radius:14px;margin:0 0 .75rem;background:rgba(255,255,255,.02);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font:700 1rem/1.4 var(--body);color:#e8f2fb}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:900;color:var(--cyan);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.3rem 1.15rem;margin:0;color:#b6c6d6;font-size:.92rem;line-height:1.65}
/* ---------- Promo / urgency bar ---------- */
.promo-bar{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--promo-h);background:linear-gradient(90deg,#ff4d5e,#d90a2c);color:#fff;box-shadow:0 6px 22px rgba(224,16,42,.4);animation:promoGlow 2.6s ease-in-out infinite}
.promo-inner{display:flex;align-items:center;justify-content:center;gap:.85rem;height:100%;padding:0 1rem;text-align:center}
.promo-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 .88rem/1.25 var(--body);letter-spacing:.005em}
.promo-cta{flex:none;display:inline-flex;align-items:center;background:#fff;color:#c10f22;font:900 .78rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.46rem .95rem;transition:background .2s,transform .2s}
.promo-cta:hover{background:#ffe2e5;transform:translateY(-1px)}
@media (max-width:560px){:root{--promo-h:58px}.promo-inner{flex-wrap:wrap;align-content:center;gap:.25rem .55rem;padding:.4rem .6rem}.promo-text{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip;font-size:.74rem;line-height:1.3}.promo-timer{font-size:.78rem;padding:.14rem .4rem;min-width:0}.promo-cta{font-size:.68rem;padding:.32rem .72rem}.promo-close{width:20px;height:20px;font-size:.9rem}}

html.no-promo{--promo-h:0px}
html.no-promo .promo-bar{display:none}
.promo-timer{flex:none;font:900 .95rem/1 var(--head);font-variant-numeric:tabular-nums;background:rgba(0,0,0,.22);border-radius:8px;padding:.22rem .55rem;min-width:3.4rem;text-align:center;color:#fff}
.promo-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.22);color:#fff;font-size:1rem;line-height:1;cursor:pointer;padding:0}
.promo-close:hover{background:rgba(0,0,0,.38)}
@keyframes promoGlow{0%,100%{box-shadow:0 6px 20px rgba(255,58,92,.3)}50%{box-shadow:0 8px 34px rgba(255,58,92,.55)}}
/* ---------- rating badge ---------- */
.rating-badge{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem;font:600 .9rem/1.4 var(--body);color:#93a9bd}
/* The mockup sits the star rating ~35px under the CTA, set larger than the
   site default and divided by a thin vertical rule rather than a middot. */
.hero .rating-badge{margin-top:1.9rem;font-size:1.1rem;gap:1.3rem}
.hero .rating-stars{gap:3px}
.hero .rating-stars svg{width:21px;height:21px}
.hero .rating-word{font-size:1.2rem}
.hero .rating-sep{display:inline-block;width:1px;height:1.25em;background:#425a72;color:inherit}
.rating-stars{display:inline-flex;gap:2px;color:#f5b50a;line-height:1}
.rating-stars svg{width:15px;height:15px}
.rating-word{font-weight:800;color:#fff}
.rating-sep{color:#425a72}
.rating-sub{color:#93a9bd}
.rating-badge--footer{margin-top:1.1rem;justify-content:center;font-size:.8rem;gap:.4rem}
.rating-badge--footer .rating-stars svg{width:13px;height:13px}
/* ---------- CTA band ---------- */
.cta-band{padding:4.5rem 0;text-align:center;border-top:1px solid var(--line-soft)}
.cta-band .container{display:flex;flex-direction:column;align-items:center;gap:1rem}
.cta-note{margin:0;color:var(--muted);font-size:.9rem;font-weight:600}
/* ---------- Ready to join ---------- */
.ready{padding:5rem 0;border-top:1px solid var(--line-soft)}
.ready-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.ready-copy h2{margin-bottom:1.4rem}
.ready-steps{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ready-steps li{display:flex;gap:.8rem;align-items:flex-start;color:#b6c6d6;font-size:.95rem;line-height:1.5}
.ready-steps li strong{color:#fff;font-weight:800}
.ready-steps .n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#4ad2ff,#1cb4f2);color:var(--on-cyan);font:italic 900 .85rem/1 var(--head)}
.ready-cta{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:2rem;border-radius:18px;border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.ready-cta .cta-note{margin:0}
@media (max-width:760px){.ready-inner{grid-template-columns:1fr}.ready-cta{align-items:center;text-align:center}}

/* PulseWave Blog */
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
.blog-card{display:flex;flex-direction:column;min-height:220px;padding:1.5rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));transition:transform .25s,border-color .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.blog-card .eyebrow{margin-bottom:.8rem}
.blog-card h2{font:800 1.18rem/1.25 var(--head);margin:0 0 .75rem}
.blog-card h2 a{color:#fff}
.blog-card h2 a:hover{color:var(--cyan-soft)}
.blog-card p:not(.eyebrow){color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}
.doc>.blog-grid{width:min(72rem,calc(100vw - 2rem));margin-left:50%;transform:translateX(-50%)}
.doc article>.btn,.doc article>p:last-child .btn{margin-top:2.2rem}
.doc article>p:last-child{margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid var(--line-soft)}

@media (max-width:760px){.blog-grid{grid-template-columns:1fr;gap:1rem}.blog-card{min-height:0;padding:1.25rem}.doc article>.btn,.doc article>p:last-child .btn{display:flex;width:100%;max-width:100%;white-space:normal;text-align:center}.doc article>p:last-child{margin-top:1.6rem;padding-top:1.6rem}}
.blog-card{position:relative;overflow:hidden;padding:0;border:1px solid rgba(120,200,255,.26);border-radius:18px;background:linear-gradient(150deg,rgba(17,38,64,.95),rgba(7,14,28,.98));box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 0 1px rgba(4,10,22,.6);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.blog-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(53,199,255,.12),transparent 42%);pointer-events:none}
.blog-card:hover{transform:translateY(-5px);border-color:rgba(53,199,255,.75);box-shadow:0 20px 42px rgba(0,0,0,.45),0 0 26px rgba(53,199,255,.16)}
.blog-card-content{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:1.6rem 1.5rem 1.5rem}
.blog-card h2{font:800 1.18rem/1.28 var(--head);margin:0 0 .8rem}
.blog-card h2 a{color:#fff;display:block}
.blog-card h2 a:hover,.blog-card h2 a:focus-visible{color:var(--cyan-soft)}
.blog-card p:not(.eyebrow){color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}
.blog-card .eyebrow{margin-bottom:.9rem;color:var(--cyan-soft)}
@media (max-width:760px){.blog-card-content{padding:1.25rem}.blog-card h2{font-size:1.08rem}}
/* Keep blog content clear of the fixed promo bar + header. */
.blog-page .site-header{position:fixed;background:rgba(4,7,14,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.blog-page .site-header.scrolled{background:rgba(4,7,14,.98)}
.blog-page .seo-main{padding-top:calc(8rem + var(--promo-h));padding-bottom:4.5rem}
.blog-page .doc{max-width:46rem}
@media (max-width:760px){.blog-page .seo-main{padding-top:calc(7.25rem + var(--promo-h));padding-bottom:3rem}}

/* Whole-card click target: stretches the title link across the entire card. */
.blog-card{position:relative}
.blog-card-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.blog-card:focus-within{border-color:rgba(53,199,255,.75);box-shadow:0 20px 42px rgba(0,0,0,.45),0 0 26px rgba(53,199,255,.2)}
.blog-card-link:focus-visible{outline:none}
.blog-card-link:focus-visible::after{outline:2px solid var(--cyan);outline-offset:3px}

/* ============================================================
   Hero redesign — brush headline, planet beams, live chat overlay
   ============================================================ */
:root{--brush:'Permanent Marker','Archivo',cursive}

.eyebrow-rule{display:flex;align-items:center;gap:.85rem}
.eyebrow-rule::before{content:"";width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),#7fe3ff);flex:none;box-shadow:0 0 14px rgba(53,199,255,.55)}

/* The mockup sets the lede as 4 lines: ~22px type on a ~33px leading inside a
   ~620px measure, breaking after "for" / "communities." / "love —". */
.hero .lede{text-align:left;max-width:620px;font-size:1.375rem;line-height:1.5;color:#d8e0ea}
/* The brush "NETWORK" is deliberately much larger than the white line above it
   (~2.2x its cap height) and overlaps it slightly, as in the design mockup: its
   painted ink is ~722px wide and ~130px tall at 1827px, i.e. a hair wider than
   the white line but never wider than its own column. `top` (not margin-top)
   nudges it off the line box so its cap-height lands on the reference's baseline
   grid without re-flowing the copy below it. */
.hero h1 .brush{font-family:var(--brush);font-style:normal;font-weight:900;text-transform:none;letter-spacing:.01em;line-height:.86;font-size:clamp(3.4rem,8.95vw,11rem);background:linear-gradient(96deg,#a8ecff 0%,#43cdf9 42%,#1596e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 26px rgba(31,166,235,.42));padding-right:.06em;position:relative;top:.0183em;display:inline-block;margin-top:-.22em}
/* Tapered brush swoosh under the word: blunt and thick where the stroke starts
   on the left, sagging to its lowest point just past the "N", then thinning to
   a point as it rises and stops short under the "R" — the path stops at
   x=537/760 rather than running the full width, which is what the reference does.
   The SVG stretches to the word's own box so it scales with the type instead of
   drifting away from it at other viewports.
   NOTE: an <svg> is a replaced element, so width:auto with only a height would
   be resolved from the 760:32 viewBox ratio and `right` would be ignored (the
   box is over-constrained) — the width has to be stated explicitly. */
.brush-stroke{position:absolute;left:.017em;bottom:-.245em;width:calc(100% - .077em);height:.33em;fill:#4ad4ff;filter:drop-shadow(0 3px 10px rgba(53,199,255,.55));pointer-events:none}

/* Atmospheric backdrop. The reference is built from diagonal cyan/violet light
   bands sweeping down from the top-right, angular translucent slabs behind the
   cards, and a dark rocky ridge across the lower right — not a planet disc. */
.terrain{position:absolute;left:-6%;right:-5%;bottom:-3%;height:36%;z-index:0;pointer-events:none;--rock:polygon(0% 66%,7% 58%,14% 62%,22% 50%,29% 55%,37% 43%,45% 48%,52% 35%,59% 41%,66% 28%,73% 34%,81% 21%,88% 27%,95% 15%,100% 22%,100% 100%,0% 100%);clip-path:var(--rock);background:linear-gradient(180deg,#0c1a2e 0%,#060d1a 45%,#03060d 100%)}
/* Rim light along the ridge crest: the same silhouette in cyan, with the dark
   mass painted over it a few px lower so only the top edge shows. */
.terrain::before{content:"";position:absolute;inset:0;clip-path:var(--rock);background:linear-gradient(180deg,rgba(120,225,255,.85),rgba(60,170,255,.15) 30%,rgba(60,170,255,0) 55%);filter:blur(1.5px)}
.terrain::after{content:"";position:absolute;inset:0;clip-path:var(--rock);transform:translateY(6px);background:linear-gradient(180deg,#0b1728 0%,#050b16 48%,#03060d 100%)}
.beam{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:screen}
.beam-a{top:-14%;left:38%;width:30%;height:126%;background:linear-gradient(178deg,rgba(140,235,255,.46),rgba(40,130,255,.12) 58%,transparent 88%);transform:rotate(23deg);filter:blur(26px)}
.beam-b{top:-10%;right:-6%;width:20%;height:104%;background:linear-gradient(178deg,rgba(150,95,255,.44),rgba(70,60,220,.10) 62%,transparent 90%);transform:rotate(19deg);filter:blur(30px)}
.slab{position:absolute;z-index:0;pointer-events:none;transform:skewX(-24deg);opacity:.6}
.slab-a{top:-14%;right:9%;width:170px;height:120%;background:linear-gradient(180deg,rgba(56,150,255,.5),rgba(10,20,60,0) 82%)}
.slab-b{bottom:-18%;left:4%;width:120px;height:78%;background:linear-gradient(0deg,rgba(30,90,220,.4),transparent)}
.slab-c{top:-8%;right:26%;width:96px;height:70%;background:linear-gradient(180deg,rgba(120,70,255,.42),transparent 78%)}


/* live chat overlay on the main card — in the reference the comments sit directly
   on the picture with no hard-edged panel at all, so the legibility comes from a
   soft radial pool of shade anchored bottom-left that falls to fully transparent
   well inside the box (no visible top/right/bottom edge). */
.chat{position:absolute;left:clamp(8px,calc(var(--fh)*.0156),16px);right:18%;bottom:-3%;z-index:4;display:flex;flex-direction:column;gap:1.05em;padding:.58em 2.32em .79em .95em;font-size:var(--fs);background:radial-gradient(125% 115% at 0% 62%,rgba(3,7,16,.78) 0%,rgba(3,7,16,.52) 42%,rgba(3,7,16,0) 78%);border:0;border-radius:0;box-shadow:none;pointer-events:none}
.chat-row{display:flex;align-items:flex-start;gap:.68em;margin:0;padding:0;border-radius:0;background:none;border:0;max-width:100%}
.av{width:var(--av);height:var(--av);flex:none;border-radius:50%;display:grid;place-items:center;font:800 calc(var(--av)*.45)/1 var(--body);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.av-1{background:linear-gradient(140deg,#ff6a9a,#7a3cff)}
.av-2{background:linear-gradient(140deg,#39d0ff,#1155d8)}
.av-3{background:linear-gradient(140deg,#2ee6a8,#0e8f6a)}
.chat-txt{display:block;font:500 1em/1.42 var(--body);color:#f2f8ff;min-width:0;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.chat-txt b{display:block;font:800 1em/1.42 var(--body);color:var(--cyan-soft)}
/* Hearts sit low on the right edge in the reference — three light cyan/white
   marks of drifting size rather than a vertical stack of equal dots. */
.hearts{position:absolute;right:clamp(8px,calc(var(--fh)*.017),17.6px);bottom:6%;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(14px,calc(var(--fh)*.065),41.6px);pointer-events:none}
.hearts svg{width:clamp(15px,calc(var(--fh)*.05),32px);height:clamp(15px,calc(var(--fh)*.05),32px);color:#eaf9ff;filter:drop-shadow(0 0 10px rgba(120,225,255,.85));animation:heartUp 2.6s ease-in-out infinite}
.hearts svg:nth-child(2){animation-delay:.55s;width:clamp(12px,calc(var(--fh)*.0406),26px);height:clamp(12px,calc(var(--fh)*.0406),26px);margin-right:clamp(4px,calc(var(--fh)*.011),7px);color:#a9ecff;opacity:.9}
.hearts svg:nth-child(3){animation-delay:1.1s;width:clamp(10px,calc(var(--fh)*.0328),21px);height:clamp(10px,calc(var(--fh)*.0328),21px);margin-right:clamp(1px,calc(var(--fh)*.0031),2px);color:#7fdcff;opacity:.72}
@keyframes heartUp{0%,100%{transform:translateY(0) scale(1);opacity:.55}50%{transform:translateY(-13px) scale(1.14);opacity:1}}

/* Category cards — seats taken from the reference at 1827x861. Gaming peeks out
   from behind the main panel's left edge; music and lifestyle stack down the
   right-hand side, clear of the panel. The rotations are the mockup's own edge
   angles; the sizes come from the shared 9:16 rule above. */
.cat-card{position:absolute;z-index:2;border-radius:18px;overflow:hidden;border:1px solid rgba(130,215,255,.42);box-shadow:0 20px 44px rgba(2,10,25,.6),0 0 34px rgba(23,167,232,.16)}
.cat-card img{width:100%;height:100%;object-fit:cover;opacity:.92}
/* Dark at the top so the icon and label read over any image, lighter through
   the middle, dark again at the foot. */
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,22,.74),rgba(4,10,22,.10) 46%,rgba(4,10,22,.55))}
/* Offsets are multiples of --fh measured from the visual's midline, which is
   where the cluster is centred. Gaming is meant to sit behind the panel (its
   z-index stays below .shot.main's 3), but it now overlaps it by only ~37% of
   its own width, so two thirds of the frame — and its label — stay visible
   instead of the old 2%-wide sliver. */
.cat-gaming{--h:.42;left:calc(50% - var(--fh)*.5386);top:calc(var(--fh)*.3);transform:rotate(-4deg)}
.cat-music{--h:.44;left:calc(50% + var(--fh)*.2612);top:calc(var(--fh)*.02);transform:rotate(8deg)}
.cat-life{--h:.4;left:calc(50% + var(--fh)*.2995);top:calc(var(--fh)*.55);transform:rotate(-4deg);z-index:1}
.cat-ico{position:absolute;top:clamp(6px,calc(var(--fh)*.0133),8.5px);left:clamp(6px,calc(var(--fh)*.0141),9px);z-index:3;width:clamp(14px,calc(var(--fh)*.0406),26px);height:clamp(14px,calc(var(--fh)*.0406),26px);color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.75))}
.cat-name{position:absolute;left:clamp(6px,calc(var(--fh)*.0148),9.5px);top:clamp(14px,calc(var(--fh)*.0725),46.4px);z-index:3;font:800 clamp(8.5px,calc(var(--fh)*.0205),13.1px)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85)}



/* The collage geometry is rigid now — every seat and size is a multiple of --fh
   — so there is nothing left to re-seat per breakpoint: --fh alone resizes the
   whole cluster, and the overlays follow it through --fs/--av. Only the small
   touches below stay. */
@media (max-width:720px){
  .cat-card{border-radius:14px}
  .chat-row:nth-child(3){display:none}
  .slab{width:64px}
}
@media (prefers-reduced-motion:reduce){
  .hearts svg{animation:none}
  .badge.live .dot{animation:none}
}

/* ============================================================
   Meet Our Network Management (/meet-our-team.html)
   Reuses the site tokens, .eyebrow / .h2 / .solid / .grad / .lede /
   .why-card / .cta-band language. Page-specific pieces only.
   ============================================================ */

/* Screen-reader-only text (visually hidden, still announced). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- hero ---- */
/* The team hero must paint its own background edge-to-edge: relying on the body
   colour left the top corners showing the page behind it, and the old circular
   ::before (border-radius:50%) read as a rounded-corner cut-out. Background is
   set on the section itself, and the glow is now a full-bleed ::before with no
   shape of its own. Mirrors the treatment on the homepage .hero. */
.team-hero{padding:calc(7rem + var(--promo-h)) 0 3.5rem;text-align:center;position:relative;overflow:hidden;background:
 radial-gradient(900px 520px at 12% 108%,rgba(21,101,232,.30),transparent 60%),
 radial-gradient(820px 500px at 88% -12%,rgba(21,101,232,.24),transparent 62%),
 linear-gradient(180deg,#05080f 0%,#04070e 100%)}
.team-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 78% at 50% 0%,rgba(90,225,255,.17),transparent 62%);z-index:0;pointer-events:none}
.team-hero .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.team-hero .eyebrow{align-self:center}
.team-hero h1{margin:0 0 1.4rem;max-width:18ch}
.team-hero h1 .solid,.team-hero h1 .grad{display:block}
.team-hero .lede{max-width:58ch}
.team-hero-note{max-width:58ch;margin-top:1.1rem;color:#7e93a8;font-size:.95rem;line-height:1.65}



/* ---- team profiles ---- */
.team-section{padding:2.5rem 0}
.team-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(1.6rem,3.5vw,2.75rem);border-radius:26px;border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:0 24px 60px rgba(2,10,25,.45)}
/* Nai mirrors Jamie so the eye zig-zags down the page. */
.team-section.flip .team-photo{order:2}

.team-photo{margin:0;display:flex;justify-content:center}
.team-photo img{width:clamp(190px,26vw,300px);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:3px solid rgba(53,199,255,.5);box-shadow:0 0 0 8px rgba(53,199,255,.07),0 0 46px rgba(28,180,242,.3);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.team-card:hover .team-photo img{transform:translateY(-5px) scale(1.02);border-color:var(--cyan);box-shadow:0 0 0 8px rgba(53,199,255,.1),0 0 64px rgba(28,180,242,.45)}

.team-body{min-width:0}
.team-role{margin:0 0 .5rem;font:800 .74rem/1.5 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-soft)}
.team-name{font:italic 900 clamp(1.9rem,3.6vw,2.7rem)/1.05 var(--head);text-transform:uppercase;letter-spacing:-.015em;color:#fff;margin:0 0 1.1rem}

/* ---- TikTok button: same pill + cyan glow language as .btn-primary ---- */
.tt-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.7rem 1.25rem .7rem .95rem;border-radius:999px;border:1px solid rgba(53,199,255,.42);background:rgba(53,199,255,.09);color:var(--cyan-soft);font:700 .92rem/1 var(--body);transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.tt-btn:hover{background:rgba(53,199,255,.17);border-color:var(--cyan);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,180,242,.25)}
.tt-btn .tt-ico{width:1.15em;height:1.15em;flex:none}
.tt-btn .tt-label b{color:#fff;font-weight:800}


/* ---- bio + focus list ---- */
.team-bio p{color:#b6c6d6;font-size:.98rem;line-height:1.72;margin:0 0 1rem}
.team-bio p:last-child{margin-bottom:0}

.team-focus{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.team-focus h3{font:800 .78rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-soft);margin:0 0 .9rem}
.team-focus ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem}
.team-focus li{position:relative;padding-left:1.6rem;color:#c3d3e1;font-size:.92rem;line-height:1.5}
.team-focus li::before{content:"";position:absolute;left:.25rem;top:.52em;width:7px;height:7px;border-radius:50%;background:linear-gradient(180deg,var(--cyan-soft),var(--cyan-deep));box-shadow:0 0 10px rgba(53,199,255,.65)}

/* ---- "Built Around Creators" + closing CTA ---- */
.lede--below{margin-top:1.1rem}
.team-cta{gap:1.35rem}
.team-cta .h2{margin-bottom:.2rem}
.team-cta .cta-note{max-width:56ch;margin-inline:auto}
.team-cta .btn{margin-top:.4rem}

/* ---- responsive: stack to a single column, keep faces large ---- */
@media (max-width:900px){
  .team-card{grid-template-columns:1fr;gap:1.9rem;text-align:center;padding:1.9rem 1.4rem}
  .team-section.flip .team-photo{order:0}
  .team-focus ul{grid-template-columns:1fr;text-align:left;max-width:26rem;margin-inline:auto}
  .team-focus h3{text-align:center}
}
@media (max-width:760px){
  .team-hero{padding:calc(5.5rem + var(--promo-h)) 0 2.5rem}
  .team-hero h1{max-width:none}
  .team-section{padding:1.6rem 0}
  .team-card{border-radius:20px}
  .team-photo img{width:clamp(160px,44vw,220px)}
  .team-bio p{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .team-card:hover .team-photo img,.tt-btn:hover{transform:none}
}