/* =========================================================
   Scrollyy.in, phase 1 template
   Dark is the default theme. [data-theme="light"] flips it.
   Swap every .ph block for real media.
   ========================================================= */

:root{
  /* ---- DARK (default) ---- */
  --paper:#0B0B0C;        /* page background */
  --surface:#151517;      /* cards */
  --surface-2:#101012;    /* tinted section background */
  --ink:#F4F4F1;          /* primary text */
  --ink-2:#B0B0AA;        /* body text */
  --ink-3:#82827B;        /* muted text */
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.34);

  --accent:#E8B004;       /* the dot in the logo */
  --accent-deep:#F0C441;

  --band-bg:#17181B;      /* process / cta / footer bands */
  --band-fg:#FFFFFF;
  --band-line:rgba(255,255,255,.12);
  --band-ink-2:rgba(255,255,255,.60);

  --solid-bg:#F4F4F1;     /* primary button */
  --solid-fg:#0B0B0C;

  --nav-bg:rgba(19,19,21,.78);
  --nav-bg-stuck:rgba(19,19,21,.94);
  --phone:#1E1E21;
  --hero-glow:rgba(232,176,4,.10);
  --logo-grey:#6F6F69;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --shadow-md:0 2px 4px rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.5);

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-pill:999px;

  --wrap:1180px;
  --nav-h:74px;
}

[data-theme="light"]{
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F5F1;
  --ink:#0A0A0A;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --line:#E6E6E3;
  --line-strong:#0A0A0A;

  --accent:#E8B004;
  --accent-deep:#C6960A;

  --band-bg:#0A0A0A;
  --band-fg:#FFFFFF;
  --band-line:rgba(255,255,255,.16);
  --band-ink-2:rgba(255,255,255,.62);

  --solid-bg:#0A0A0A;
  --solid-fg:#FFFFFF;

  --nav-bg:rgba(255,255,255,.82);
  --nav-bg-stuck:rgba(255,255,255,.95);
  --phone:#111111;
  --hero-glow:#FBF7EA;
  --logo-grey:#8E8D85;

  --shadow-sm:0 1px 2px rgba(10,10,10,.05), 0 8px 24px rgba(10,10,10,.06);
  --shadow-md:0 2px 4px rgba(10,10,10,.06), 0 18px 50px rgba(10,10,10,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;line-height:1.05;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- placeholder blocks ---------- */
.ph{
  position:relative;
  background:var(--c,#111);
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,0) 45%,rgba(0,0,0,.16));
  pointer-events:none;
}
.ph__tag{
  position:relative;z-index:2;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.86);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.24);
  padding:5px 10px;border-radius:var(--r-pill);
  backdrop-filter:blur(2px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:15px 28px;font-size:17px}
.btn--dark{background:var(--solid-bg);color:var(--solid-fg);box-shadow:var(--shadow-sm)}
.btn--dark:hover{opacity:.9}
.btn--accent{background:var(--accent);color:#0A0A0A;box-shadow:var(--shadow-sm)}
.btn--accent:hover{background:#F3BE1C}
.btn--ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn--ghost:hover{border-color:var(--line-strong)}
.btn__arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ---------- theme toggle ---------- */
.themetog{
  width:40px;height:40px;flex:none;
  border-radius:var(--r-pill);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);
  background:var(--surface);
  transition:border-color .18s ease, transform .18s ease;
}
.themetog:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.themetog__moon{display:none}
[data-theme="light"] .themetog__sun{display:none}
[data-theme="light"] .themetog__moon{display:block}

/* ---------- ticker ---------- */
.ticker{background:#000;color:#fff;height:38px;display:flex;align-items:center;overflow:hidden}
.ticker__rail{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite}
.ticker__item{display:flex;align-items:center;font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- announcement ---------- */
.announce{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--accent);color:#0A0A0A;
  height:42px;font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:background .2s ease;
}
.announce:hover{background:#F3BE1C}
.announce__text{text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.announce__cta{text-decoration:underline;text-underline-offset:3px}

/* ---------- nav ---------- */
.nav{position:sticky;top:12px;z-index:60;padding:14px 24px 0}
.nav__pill{
  max-width:var(--wrap);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;gap:20px;
  padding:0 12px 0 26px;
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, background .25s ease;
}
.nav.is-stuck .nav__pill{box-shadow:var(--shadow-md);background:var(--nav-bg-stuck)}

.brand{display:inline-flex;align-items:baseline;font-size:22px;font-weight:700;letter-spacing:-.045em}
.brand__dot{color:var(--accent)}
.brand--lg{font-size:28px}

.nav__links{display:flex;gap:26px;margin-inline:auto;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav__links a{position:relative;padding:6px 0;transition:color .18s ease}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--ink);
  transition:right .22s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}

.nav__actions{display:flex;align-items:center;gap:10px}
.nav__burger{display:none;width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;background:var(--surface)}
.nav__burger span{width:16px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 24px 0;overflow:hidden;
  background:radial-gradient(1200px 520px at 50% -10%, var(--hero-glow) 0%, rgba(255,255,255,0) 70%);}
.hero__inner{max-width:900px;margin-inline:auto;text-align:center;position:relative;z-index:2}

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase;margin-bottom:20px}
.eyebrow--light{color:rgba(255,255,255,.55)}

.hero__title{font-size:clamp(38px,7vw,76px);letter-spacing:-.045em;margin-bottom:24px}
.hero__sub{max-width:660px;margin:0 auto 34px;font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* arc + floating platform marks */
.hero__arc{position:absolute;inset:0;max-width:1240px;margin-inline:auto;pointer-events:none;color:var(--line)}
.hero__arcline{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
/* the thread crawls along the arc instead of sitting still */
.hero__arcline path{
  stroke-dasharray:6 12;
  stroke-linecap:round;
  animation:thread .5s linear infinite;
}
@keyframes thread{to{stroke-dashoffset:-18}}
.orb{
  position:absolute;width:60px;height:60px;border-radius:19px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  animation:bob 6s ease-in-out infinite;
}
.orb svg{display:block}
.orb--1{left:2%;top:36%;animation-delay:0s}
.orb--2{left:11%;top:62%;animation-delay:.7s}
.orb--3{left:31%;top:80%;animation-delay:1.4s}
.orb--4{right:31%;top:82%;animation-delay:2.1s}
.orb--5{right:10%;top:60%;animation-delay:2.8s}
.orb--6{right:2%;top:34%;animation-delay:3.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* the TikTok mark is solid black, needs flipping in dark */
.orb--3 svg path{fill:var(--ink)}

/* phones: one reel per creator.
   Desktop fans all six out. Below 1000px it becomes a swipeable snap strip,
   which keeps every phone at a readable size instead of shrinking six of them
   into a row that fits nowhere. */
.phones{
  --pw:clamp(150px,14.2vw,186px);
  display:flex;justify-content:center;align-items:flex-end;
  margin-top:56px;perspective:1400px;
}
.phone{
  position:relative;flex:none;
  width:var(--pw);
  margin-inline:calc(var(--pw) * -0.1);
  border-radius:30px;border:1px solid var(--line);
  background:var(--phone);padding:8px;
  box-shadow:var(--shadow-md);
}
.phone::before{
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:34%;height:15px;background:#000;border-radius:var(--r-pill);z-index:3;
}
.phone__screen{
  aspect-ratio:9/19.2;border-radius:23px;
  position:relative;overflow:hidden;
  background:var(--surface-2);
  /* promotes the screen to its own layer so the rounded clip is honoured
     despite the rotation on .phone */
  transform:translateZ(0);
}
.phone__name{
  position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#fff;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.22);
  padding:5px 11px;border-radius:var(--r-pill);
  backdrop-filter:blur(3px);white-space:nowrap;
}

/* the fan */
.phone:nth-child(1){transform:rotate(-13deg) translateY(58px);z-index:1}
.phone:nth-child(2){transform:rotate(-7.5deg) translateY(26px);z-index:2}
.phone:nth-child(3){transform:rotate(-2.5deg) translateY(4px);z-index:3}
.phone:nth-child(4){transform:rotate(2.5deg) translateY(4px);z-index:3}
.phone:nth-child(5){transform:rotate(7.5deg) translateY(26px);z-index:2}
.phone:nth-child(6){transform:rotate(13deg) translateY(58px);z-index:1}

/* ---------- logo strip ---------- */
.logos{padding:56px 0 8px;text-align:center}
.logos__label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.logos__rail{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* margin-right, not gap. With gap the track is one gap short of two equal
   halves, so the -50% loop lands off by half a gap and visibly jumps. */
.logos__track{display:flex;width:max-content;animation:slide 68s linear infinite}
.logos__item{
  font-size:19px;font-weight:800;letter-spacing:.02em;color:var(--logo-grey);white-space:nowrap;
  margin-right:64px;
  transition:color .2s ease;
}
.logos__item:hover{color:var(--ink)}

/* ---------- stats ---------- */
.stats{padding:52px 0 12px}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{border:1px solid var(--line);border-radius:var(--r-md);padding:26px 22px;background:var(--surface-2)}
.stat__num{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat__label{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ---------- section shell ---------- */
.section{padding:96px 0}
.section--tint{background:var(--surface-2);border-block:1px solid var(--line)}
.section--dark{background:var(--band-bg);color:var(--band-fg);border-block:1px solid var(--band-line)}
.section--dark .sec-sub{color:var(--band-ink-2)}

.sec-head{max-width:680px;margin-bottom:52px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-title{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.04em}
.sec-sub{margin-top:18px;font-size:17px;color:var(--ink-2);line-height:1.6}

/* ---------- creator cards ---------- */
.creators{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.creator{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.creator:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.creator__photo{
  aspect-ratio:4/5;
  /* height:auto or the img height attribute beats aspect-ratio and object-fit
     crops into the face. Same trap as .profile__photo. */
  width:100%;height:auto;object-fit:cover;display:block;
}
.creator__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.creator__name{font-size:23px}
.creator__views{margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.creator__views b{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}

.creator__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.creator__go span{transition:transform .18s ease}
.creator:hover .creator__go span{transform:translateX(3px)}

/* ---------- creator profile page ---------- */
.crumb{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:34px;
  font-size:14px;font-weight:600;color:var(--ink-3);transition:color .18s ease;
}
.crumb:hover{color:var(--ink)}

.profile{padding-top:56px}
.profile__grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:52px;align-items:start}
.profile__photo{
  aspect-ratio:4/5;border-radius:var(--r-lg);position:sticky;top:120px;
  width:100%;object-fit:cover;display:block;
  /* height:auto matters. The img carries height="1000", and that attribute
     wins over aspect-ratio, which would make the box 420x1000 and let
     object-fit crop straight into the subject's face. */
  height:auto;
}
.profile__info{display:flex;flex-direction:column;align-items:flex-start}
.profile__name{font-size:clamp(38px,5.6vw,62px);letter-spacing:-.045em}
.profile__note{margin-top:18px;font-size:15.5px;color:var(--ink-2);line-height:1.6;max-width:46ch}
.profile__views{margin-top:26px;font-size:15px;color:var(--ink-3)}
.profile__views b{font-size:34px;font-weight:700;letter-spacing:-.04em;color:var(--ink);display:block;line-height:1.1;margin-bottom:4px}
.profile__cta{margin-top:34px}

/* video grid on the profile pages: posters only until someone clicks */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reel{
  display:block;padding:0;border:0;width:100%;
  border-radius:var(--r-md);overflow:hidden;position:relative;
  aspect-ratio:9/16;background:var(--surface-2);
  cursor:pointer;transition:transform .22s ease;
}
.reel:hover{transform:translateY(-4px)}
.reel__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:inherit;
}
.reel__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:#0A0A0A;
  display:grid;place-items:center;font-size:16px;padding-left:3px;
  box-shadow:var(--shadow-sm);transition:transform .2s ease;
}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.12)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;place-items:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
}
.lightbox.is-open{display:grid}
.lightbox__video{
  max-width:min(440px,92vw);
  max-height:88vh;
  width:auto;height:auto;
  aspect-ratio:9/16;
  border-radius:var(--r-lg);
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__close{
  position:absolute;top:20px;right:20px;
  width:44px;height:44px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:20px;line-height:1;
  display:grid;place-items:center;
  transition:background .18s ease;
}
.lightbox__close:hover{background:rgba(255,255,255,.22)}

.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brandgrid__item{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  min-height:96px;display:grid;place-items:center;
  font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--logo-grey);
  transition:color .2s ease, border-color .2s ease;
}
.brandgrid__item:hover{color:var(--ink);border-color:var(--line-strong)}

.pager-wrap{border-top:1px solid var(--line);padding:28px 0 72px}
.pager{display:flex;justify-content:space-between;gap:20px}
.pager__link{display:flex;flex-direction:column;gap:5px;padding:18px 0;transition:opacity .18s ease}
.pager__link--next{text-align:right}
.pager__link:hover{opacity:.6}
.pager__dir{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pager__name{font-size:24px;font-weight:700;letter-spacing:-.03em}

/* ---------- reel wall ---------- */
/* Full bleed, slow, always moving. No margin between tiles, so half the track
   is exactly one set and the -50% loop stays seamless. Do not add a hover
   pause here, it is meant to run continuously. */
.reelwall{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.reelwall__track{
  display:flex;width:max-content;
  animation:slide 180s linear infinite;
}
/* stops compositing while the section is off screen */
.reelwall.is-paused .reelwall__track{animation-play-state:paused}

.reelwall__item{
  flex:none;
  width:clamp(240px,26vw,400px);
  aspect-ratio:9/16;
  position:relative;overflow:hidden;
  background:var(--surface-2);
}

/* ---------- autoplay tiles, shared by the wall and the hero phones ---------- */
/* The poster is the thing that actually paints. The video fades over it once
   it has real frames, so a tile never flashes black while buffering. */
.tile__poster,
.tile__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* A rotated ancestor stops the browser clipping a composited video to the
     parent's overflow:hidden, so the corners come back square. Carrying the
     radius on the media itself is what actually rounds it. */
  border-radius:inherit;
}
/* The video must never be invisible. Chrome treats a silent, video-only
   element that is not actually being painted as background media and pauses it
   to save power, which aborts play() and means the tile never starts. So the
   video sits at full opacity underneath and the POSTER is what fades away. */
.tile__video{z-index:1}
.tile__poster{z-index:2;transition:opacity .35s ease}
.is-playing .tile__poster{opacity:0}

/* ---------- what you get ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--surface);
  transition:border-color .22s ease, transform .22s ease;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card__no{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent-deep)}
.card h3{font-size:20px;margin:14px 0 10px}
.card p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------- how it runs ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:22px}
.step{border-top:1px solid var(--band-line);padding-top:22px}
.step__day{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.step h3{font-size:19px;margin:12px 0 10px}
.step p{font-size:14.5px;color:var(--band-ink-2);line-height:1.6}

/* ---------- comparison table ---------- */
.compare{
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.compare__table{border-collapse:collapse;width:100%;min-width:800px;font-size:15.5px}
.compare__table th,.compare__table td{
  padding:17px 20px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td{border-bottom:0}
.compare__table thead th{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:22px;padding-bottom:16px;
}
.compare__table tbody th{font-weight:600;color:var(--ink-3);font-size:14px;letter-spacing:.01em}
.compare__table td{color:var(--ink-2)}

/* the row labels and our own column stay put while the rest scrolls sideways */
.compare__table thead th:first-child,
.compare__table tbody th{
  position:sticky;left:0;z-index:3;
  width:156px;min-width:156px;
  background:var(--surface);
}
.compare__table .is-us{
  position:sticky;left:156px;z-index:2;
  min-width:190px;
  color:var(--ink);font-weight:700;
  background:linear-gradient(rgba(232,176,4,.09),rgba(232,176,4,.09)),var(--surface);
  border-left:1px solid rgba(232,176,4,.35);
  border-right:1px solid rgba(232,176,4,.35);
}
.compare__table thead .is-us{
  color:var(--accent);font-size:13px;letter-spacing:.08em;
  border-top:1px solid rgba(232,176,4,.35);
}
.compare__table tbody tr:last-child .is-us{border-bottom:1px solid rgba(232,176,4,.35)}

.compare__note{margin-top:14px;font-size:13px;color:var(--ink-3)}
@media (min-width:860px){.compare__note{display:none}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- faq ---------- */
.faq-wrap{max-width:860px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:22px 0;
  font-size:19px;font-weight:600;letter-spacing:-.02em;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";font-size:24px;font-weight:400;color:var(--ink-3);flex:none;transition:transform .2s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__body{padding:0 0 22px;max-width:640px}
.faq__body p{font-size:16px;color:var(--ink-2);line-height:1.6}

/* ---------- cta ---------- */
.cta{background:var(--band-bg);color:var(--band-fg);padding:96px 0;border-top:1px solid var(--band-line);
  background-image:radial-gradient(700px 320px at 50% 0%,rgba(232,176,4,.16),transparent 70%)}
.cta__inner{max-width:760px;margin-inline:auto;text-align:center}
.cta__title{font-size:clamp(32px,5vw,56px);letter-spacing:-.04em;margin-bottom:18px}
.cta__sub{color:var(--band-ink-2);font-size:17px;max-width:560px;margin:0 auto 34px}
.cta__form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cta__form input{
  flex:1 1 200px;min-width:0;
  padding:15px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  font-size:15px;transition:border-color .18s ease,background .18s ease;
}
.cta__form input::placeholder{color:rgba(255,255,255,.42)}
.cta__form input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
.cta__form .btn{flex:0 0 auto}
.cta__note{margin-top:16px;font-size:14px;color:var(--accent);min-height:20px}

/* ---------- footer ---------- */
.foot{background:var(--band-bg);color:var(--band-fg);padding:64px 0 26px;border-top:1px solid var(--band-line)}
.foot__brand p{margin-top:14px;max-width:300px;font-size:14.5px;color:var(--band-ink-2);line-height:1.6}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.foot__col{display:flex;flex-direction:column;gap:11px}
.foot__col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:4px}
.foot__col a{font-size:15px;color:rgba(255,255,255,.78);transition:color .18s ease}
.foot__col a:hover{color:var(--accent)}
.foot__bar{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--band-line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13.5px;color:rgba(255,255,255,.45);
}
.foot__legal{display:flex;gap:18px}
.foot__legal a:hover{color:#fff}

/* ---------- reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Under 1000px the fan does not fit, so the six phones become a 3 by 2 grid:
   three across, three on the next line. No horizontal swiping. */
@media (max-width:1000px){
  .phones{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    align-items:start;
    margin-top:44px;
    perspective:none;
  }
  .phones .phone{
    width:100%;
    margin-inline:0;
    transform:none;
    padding:6px;
    border-radius:22px;
  }
  .phones .phone::before{width:30%;height:10px;top:9px}
  .phones .phone__screen{border-radius:17px}
  .phones .phone__name{
    font-size:9px;letter-spacing:.04em;padding:3px 7px;bottom:8px;
  }
}

@media (max-width:1000px){
  .phones{
    --pw:clamp(150px,38vw,190px);
    justify-content:flex-start;align-items:stretch;
    gap:14px;
    margin-top:44px;
    padding:10px 24px 26px;
    margin-inline:-24px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    perspective:none;
  }
  .phones::-webkit-scrollbar{display:none}
  .phones .phone{
    margin-inline:0;
    transform:none;
    scroll-snap-align:center;
  }
}

@media (max-width:1000px){
  .creators,.work,.cards{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .brandgrid{grid-template-columns:repeat(3,1fr)}
  .reels{grid-template-columns:repeat(3,1fr)}
  .orb{width:50px;height:50px}
  .profile__grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:34px}
}

@media (max-width:860px){
  .nav__links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);padding:8px;margin:0;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 14px;border-radius:var(--r-sm);font-size:16px}
  .nav__links a::after{display:none}
  .nav__links a:hover{background:var(--surface-2)}
  .nav__pill{position:relative;justify-content:space-between;padding-right:10px}
  .nav__actions .btn--ghost{display:none}
  .nav__burger{display:flex}
  .profile__grid{grid-template-columns:1fr;gap:30px}
  .profile__photo{position:static;max-width:420px}
}

@media (max-width:700px){
  .section{padding:68px 0}
  .hero{padding-top:48px}
  .creators,.work,.cards{grid-template-columns:1fr}
  .brandgrid{grid-template-columns:repeat(2,1fr)}
  .reels{grid-template-columns:repeat(2,1fr);gap:12px}
  .phone__name{font-size:10px;padding:4px 9px;bottom:10px}
  .orb--2,.orb--5{display:none}
  .orb{width:42px;height:42px}
  .cta__form{flex-direction:column}
  .cta__form .btn{justify-content:center}
  .announce__text{font-size:10.5px;letter-spacing:.06em}
  .foot__grid{grid-template-columns:1fr;gap:28px}
  .pager__name{font-size:19px}
  .profile__summary{font-size:17px}
}

@media (max-width:520px){
  .phones{gap:8px}
  .phones .phone{padding:4px;border-radius:16px}
  .phones .phone::before{height:7px;top:6px}
  .phones .phone__screen{border-radius:12px}
  .phones .phone__name{font-size:7.5px;letter-spacing:0;padding:2px 5px;bottom:5px}

  /* keep the nav pill on one line */
  .nav{padding:12px 14px 0}
  .nav__pill{height:64px;padding:0 8px 0 18px;gap:8px}
  .brand{font-size:19px}
  .nav__actions{gap:7px}
  .nav__actions .btn--dark{padding:10px 14px;font-size:14px}
  .nav__actions .btn__arrow{display:none}
  .themetog{width:36px;height:36px}
  .nav__burger{width:36px;height:36px}

  /* the floating platform marks landed on top of the hero copy */
  .hero__arc{display:none}
  .hero{padding-inline:16px}
  .wrap{padding-inline:16px}

  .announce{gap:8px}
  .announce__text{display:none}
  .btn--lg{padding:14px 22px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}