/* ==========================================================================
   PORSHAGREEN — landing page
   Single stylesheet for the custom homepage sections. Everything is
   namespaced so it cannot collide with Bootstrap, styles.css or the
   platform's own reels stylesheet:

     --pg-*   design tokens
     .pg-*    shared: layout, type, buttons
     .pgr-*   section 2, reels
     .pgc-*   section 3, featured creators

   Fonts: Anton (display), Inter (UI/body), JetBrains Mono (labels)
   loaded in resources/views/index/home.blade.php.

   Markup: resources/views/index/home.blade.php
           resources/views/includes/reel-card.blade.php
           resources/views/includes/creator-card.blade.php
   ========================================================================== */

/* ==========================================================================
   1. TOKENS, BASE, SHARED COMPONENTS + SECTION 1 (HERO)
   ========================================================================== */

:root{
  --pg-wine:#A80F22;
  --pg-wine-hi:#E01B36;
  --pg-wine-deep:#5C0512;
  --pg-ink:#080506;
  --pg-ink-2:#120A0C;
  --pg-ink-3:#1A1012;
  --pg-ivory:#FFF6F0;
  --pg-smoke:#B3A0A3;
  --pg-smoke-2:#7E6A6D;
  --pg-line:rgba(255,246,240,0.16);
  --pg-nav-h:0px;            /* navbar overlays the hero on the homepage */

  /* The platform navbar is position:fixed and ~100px tall. The pinned reels
     head must clear it or the section title sits underneath. Keep in step
     with the navbar if its height changes. */
  --pgr-nav-h:100px;

  /* Hero framing.
     The source frame is 2:3 (1664x2496) and the hero box is landscape, so
     object-fit:cover matches the WIDTH and crops the height — horizontal
     overflow is zero and object-position's X value has no effect at desktop
     sizes. Moving the subject sideways therefore needs a zoom (to create
     overflow) plus a translate. Tune these two together: the shift must stay
     under half the overflow the zoom creates, or an empty edge appears:
         max shift = (zoom - 1) / (2 * zoom)
     e.g. zoom 1.16 allows up to 6.9%; zoom 1.30 allows up to 11.5%.
     Want her further right? Raise the zoom first, then the shift. */
  --pg-hero-zoom:1.16;
  --pg-hero-shift:6.4%;      /* positive moves her right, clearing the headline */
  --pg-hero-y:12%;           /* vertical crop: lower value shows more headroom */
}

/* --------------------------------------------------------------------------
   scope
   -------------------------------------------------------------------------- */
/* styles.css declares `h1..h6 { font-weight: 800 !important }`. Anton ships a
   single weight (400), so at 800 the browser synthesises a faux-bold and the
   letterforms thicken and blur — the display type stops matching the design.
   Reassert 400 with the same weapon, scoped to this page's sections only. */
.pg-hero h1, .pg-hero h2, .pg-hero h3,
.pgr-reels h1, .pgr-reels h2, .pgr-reels h3,
.pgc-sec h1, .pgc-sec h2, .pgc-sec h3,
.pgf h1, .pgf h2, .pgf h3{
  font-weight:400!important;
}
.pg-hero,
.pg-hero *{box-sizing:border-box;}
.pg-hero [hidden]{display:none!important;}



.pg-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:var(--pg-nav-h);
  padding-bottom:clamp(84px,11vh,124px);   /* clears the ticker */
  margin:0;
  overflow:hidden;
  isolation:isolate;
  background:var(--pg-ink);
  color:var(--pg-ivory);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Bootstrap Reboot sets body{line-height:1.5}; the reference design has no
     body line-height, so it resolves to `normal` (font-metric derived).
     Without this, every descendant that doesn't declare its own line-height
     inherits 1.5 instead — measured across 14 elements (mono labels, badges,
     button text), each computing to exactly 1.5x its font-size and sitting
     visibly taller than the design. Restores the reference's inheritance. */
  line-height:normal;
}
.pg-hero img{max-width:100%;display:block;}
.pg-hero a{color:inherit;text-decoration:none;}
.pg-hero ::selection{background:var(--pg-wine);color:var(--pg-ivory);}

/* --------------------------------------------------------------------------
   media skeleton
   A GPU sweep over the ink fill while the file is in flight, then a decode()
   reveal. Opacity is forced only while .is-loading so play/hover rules keep
   control after the image is in. ::before is free on every slot we use.
   -------------------------------------------------------------------------- */
.pg-skel{position:relative;background:var(--pg-ink-2);}
.pg-skel .pg-media{transition:opacity .55s ease;}
.pg-skel.is-loading .pg-media{opacity:0;}
.pg-skel::before{
  content:"";
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(224,27,54,0.14) 42%,
    rgba(255,246,240,0.16) 50%,
    rgba(224,27,54,0.14) 58%,
    transparent 80%
  );
  transform:translateX(-120%);
  opacity:0;
  transition:opacity .4s ease;
}
.pg-skel.is-loading::before{
  opacity:1;
  animation:pgSkel 1.35s cubic-bezier(.4,0,.2,1) infinite;
}
.pg-skel.is-ready::before{opacity:0;animation:none;}
@keyframes pgSkel{
  100%{transform:translateX(120%);}
}
@media (prefers-reduced-motion:reduce){
  .pg-skel.is-loading::before{animation:none;opacity:.55;transform:none;
    background:rgba(224,27,54,0.12);}
}

.pg-wrap{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 clamp(20px,4.5vw,60px);
}
.pg-mono{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.66rem;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   photograph + grade
   -------------------------------------------------------------------------- */
.pg-hero-photo{position:absolute;inset:0;z-index:1;overflow:hidden;}
.pg-hero-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% var(--pg-hero-y);
  transform:scale(var(--pg-hero-zoom)) translateX(var(--pg-hero-shift));
  transform-origin:center center;
  animation:pgDrift 30s ease-in-out infinite alternate;
  filter:saturate(1.22) contrast(1.16) brightness(1.03);
}
@keyframes pgDrift{
  from{transform:scale(var(--pg-hero-zoom)) translateX(var(--pg-hero-shift));}
  to{transform:scale(calc(var(--pg-hero-zoom) * 1.04)) translateX(calc(var(--pg-hero-shift) + 0.6%)) translateY(-0.6%);}
}

/* brand colour pushed through the photograph */
.pg-grade-mult{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,rgba(168,15,34,0.62) 0%,rgba(168,15,34,0.14) 46%,rgba(92,5,18,0.34) 100%);
  mix-blend-mode:multiply;
}
.pg-grade-screen{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 54% 50% at 72% 38%,rgba(224,27,54,0.26) 0%,rgba(224,27,54,0) 70%);
  mix-blend-mode:screen;
}
/* readability scrim, heaviest where the type sits */
.pg-scrim{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(to right,rgba(8,5,6,0.93) 0%,rgba(8,5,6,0.68) 28%,rgba(8,5,6,0.06) 58%,rgba(8,5,6,0.20) 100%),
    linear-gradient(to top,var(--pg-ink) 2%,rgba(8,5,6,0.62) 26%,rgba(8,5,6,0) 58%),
    linear-gradient(to bottom,rgba(8,5,6,0.86) 0%,rgba(8,5,6,0) 22%);
}
.pg-vignette{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse 78% 72% at 66% 46%,rgba(8,5,6,0) 42%,rgba(8,5,6,0.58) 100%);
}
.pg-grain{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  opacity:0.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* outlined surname, right-anchored in the sky */
.pg-ghost{
  position:absolute;z-index:5;
  right:clamp(20px,4.5vw,60px);
  top:calc(var(--pg-nav-h) + 2vh);
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(5rem,17vw,15rem);
  line-height:0.72;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  color:transparent;
  -webkit-text-stroke:3px rgba(255,246,240,0.34);
  text-align:right;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  margin:0;
}

/* --------------------------------------------------------------------------
   copy
   -------------------------------------------------------------------------- */
.pg-copy{position:relative;z-index:8;max-width:min(52rem,60vw);}

.pg-kicker{
  display:inline-flex;align-items:center;gap:0.8rem;
  background:var(--pg-wine);
  color:var(--pg-ivory);
  padding:0.62rem 1.15rem;
  margin-bottom:1.6rem;
  box-shadow:6px 6px 0 0 rgba(92,5,18,0.75);
}
.pg-kicker .pg-dot{width:7px;height:7px;background:var(--pg-ivory);}

.pg-hero h1,
.pg-hero .pg-title{
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(3rem,9.2vw,8.6rem);
  line-height:0.8;
  letter-spacing:-0.005em;
  margin:0 0 1.7rem;
  text-shadow:0 20px 60px rgba(8,5,6,0.9);
  color:var(--pg-ivory);
}
.pg-hero .pg-l1{display:block;}
.pg-hero .pg-l2{display:block;color:var(--pg-wine-hi);}

.pg-lede{
  font-size:clamp(1rem,1.15vw,1.16rem);
  font-weight:500;
  line-height:1.6;
  color:var(--pg-smoke);
  max-width:40ch;
  margin:0 0 2.4rem;
}
.pg-lede strong{color:var(--pg-ivory);font-weight:800;}

.pg-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.6rem;}

/* Hard-edged buttons — shared component, deliberately NOT scoped to
   .pg-hero: sections 2-4 reuse it. Namespaced, so no Bootstrap clash. */
.pg-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:0.6em;
  font-family:"Inter",sans-serif;
  font-size:0.78rem;font-weight:900;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:1.25rem 2.4rem;
  border:2px solid transparent;
  border-radius:0;
  cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.pg-btn-wine{
  background:var(--pg-wine);color:var(--pg-ivory);border-color:var(--pg-wine);
}
.pg-btn-wine:hover,
.pg-btn-wine:focus{
  background:var(--pg-wine-hi);border-color:var(--pg-wine-hi);color:var(--pg-ivory);
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 0 var(--pg-wine-deep);
}
.pg-btn-ghost{
  background:transparent;color:var(--pg-ivory);border-color:var(--pg-line);
}
.pg-btn-ghost:hover,
.pg-btn-ghost:focus{
  border-color:var(--pg-ivory);color:var(--pg-ivory);
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 0 rgba(255,246,240,0.18);
}

/* work categories — no counts, nothing that can go stale */
.pg-tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(0.9rem,2vw,1.6rem);}
.pg-tags span{
  display:inline-flex;align-items:baseline;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(1.15rem,1.9vw,1.75rem);
  text-transform:uppercase;letter-spacing:0.01em;
  color:var(--pg-ivory);line-height:1;
}
.pg-tags span + span::before{
  content:"/";
  margin-right:clamp(0.9rem,2vw,1.6rem);
  color:var(--pg-wine-hi);
}

/* --------------------------------------------------------------------------
   official stamp
   -------------------------------------------------------------------------- */
.pg-stamp{
  position:absolute;z-index:8;
  right:clamp(18px,4vw,52px);
  bottom:calc(clamp(84px,11vh,124px) + 22px);
  display:inline-flex;align-items:stretch;
  border:2px solid var(--pg-ivory);
  background:rgba(8,5,6,0.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:6px 6px 0 0 rgba(8,5,6,0.55);
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease;
}
.pg-stamp:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--pg-wine);}
.pg-stamp .pg-mark-cell{
  display:flex;align-items:center;justify-content:center;
  background:var(--pg-wine);color:var(--pg-ivory);
  padding:0 0.78rem;
  font-family:"Anton",Impact,sans-serif;font-size:1.25rem;line-height:1;
}
.pg-stamp .pg-word-cell{
  display:flex;flex-direction:column;justify-content:center;
  padding:0.55rem 1.05rem 0.58rem;
  border-left:2px solid var(--pg-ivory);
}
.pg-stamp .pg-word-cell b{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:1.12rem;line-height:1;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--pg-ivory);
}
.pg-stamp .pg-word-cell i{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:0.58rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--pg-wine-hi);margin-top:2px;
}

/* --------------------------------------------------------------------------
   ticker
   -------------------------------------------------------------------------- */
.pg-ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  background:var(--pg-wine);
  overflow:hidden;
  padding:0.7rem 0;
  border-top:3px solid var(--pg-ivory);
}
.pg-ticker-track{display:flex;width:max-content;animation:pgMarquee 120s linear infinite;}
/* 8 groups x ~1030px = ~8240px track; 50% = ~4120px over 120s = ~34px/s,
   the same speed as the original 2-group/30s version. */
.pg-ticker:hover .pg-ticker-track{animation-play-state:paused;}
.pg-ticker-group{display:flex;flex:none;}
.pg-ticker span{
  display:inline-flex;align-items:center;
  padding:0 1.5rem;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(1.15rem,2.1vw,1.75rem);
  text-transform:uppercase;letter-spacing:0.01em;
  color:var(--pg-ivory);line-height:1.2;
}
.pg-ticker span::after{
  content:"\002A";margin-left:1.5rem;
  color:rgba(255,246,240,0.55);font-size:0.8em;
}
@keyframes pgMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --------------------------------------------------------------------------
   entrance
   -------------------------------------------------------------------------- */
.pg-rise{opacity:0;transform:translateY(30px);animation:pgRise .95s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes pgRise{to{opacity:1;transform:none;}}
.pg-d1{animation-delay:.05s}
.pg-d2{animation-delay:.17s}
.pg-d3{animation-delay:.30s}
.pg-d4{animation-delay:.43s}
.pg-d5{animation-delay:.56s}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .pg-copy{max-width:none;}
  .pg-ghost{font-size:20vw;-webkit-text-stroke-width:2px;}
}
@media (max-width:900px){
  .pg-hero{padding-bottom:clamp(76px,10vh,104px);}
  .pg-hero-photo img{
    /* narrow box: cover now crops horizontally, so X works normally again */
    --pg-hero-zoom:1.04;
    --pg-hero-shift:0%;
    object-position:62% 16%;
  }
  .pg-scrim{
    background:
      linear-gradient(to top,var(--pg-ink) 4%,rgba(8,5,6,0.80) 30%,rgba(8,5,6,0.12) 66%),
      linear-gradient(to bottom,rgba(8,5,6,0.88) 0%,rgba(8,5,6,0) 24%);
  }
  .pg-hero h1,.pg-hero .pg-title{font-size:clamp(3.2rem,15vw,6rem);}
  .pg-lede{max-width:none;}
  .pg-actions .pg-btn{flex:1 1 auto;}
  .pg-ghost{font-size:26vw;top:calc(var(--pg-nav-h) + 1vh);-webkit-text-stroke-width:2px;}
}
@media (max-width:560px){
  .pg-stamp{display:none;}          /* would cover the CTAs at this width */
  .pg-kicker{font-size:0.58rem;letter-spacing:0.2em;box-shadow:4px 4px 0 0 rgba(92,5,18,0.75);}
  .pg-lede{font-size:0.95rem;}
  .pg-tags{gap:0.5rem;}
  .pg-tags span{font-size:0.92rem;}
  .pg-tags span + span::before{margin-right:0.5rem;}
  .pg-ticker span{font-size:1.05rem;padding:0 1rem;}
  .pg-btn{padding:1.05rem 1.6rem;font-size:0.72rem;}
}

/* the mobile hero loop. Never painted on desktop, and JS only ever attaches
   a source below the breakpoint, so this costs a wide viewport nothing. */
.pg-hero-video{display:none;}

/* ==========================================================================
   HERO ON A PHONE (<=620px) — the photograph becomes a loop

   Everything the desktop hero says in type — the kicker, the lede, the
   category list — is saying it over the top of the one thing that actually
   sells the page. On a phone there is no room to do both, so the frame is
   given back to the picture and the copy is cut to what a hero needs: who
   this is, and the two ways in.

   The loop is a 720x1280 / 800KB encode, not one of the 9-13MB reels. It is
   attached by JS only below this breakpoint, and skipped entirely under
   Save-Data or prefers-reduced-motion, where the poster stands in.
   ========================================================================== */
@media (max-width:620px){

  .pg-hero{
    min-height:100svh;
    display:flex;align-items:flex-end;
    padding-bottom:clamp(74px,10vh,96px);   /* clears the ticker */
  }

  /* --- the loop, sitting on the still --- */
  .pg-hero-video{
    display:block;
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 22%;   /* face in the upper third */
    filter:saturate(1.18) contrast(1.12);
    opacity:0;transition:opacity .8s ease;   /* cross-fades up from the still */
    pointer-events:none;
  }
  .pg-hero-video.pg-hero-video-on{opacity:1;}
  .pg-hero-photo img{
    --pg-hero-zoom:1.04;
    --pg-hero-shift:0%;
    object-position:58% 16%;
    animation:none;                          /* the loop is the movement now */
  }

  /* --- grade: one job, keep the type off the picture --- */
  /* A type PLATE, not a wash. The copy sits on ground that is essentially
     solid ink and only then ramps out — over a sunset that is all warm
     mid-tones, a gradient that is still half-transparent behind the
     letterforms is what makes type read as dirty rather than as placed. */
  .pg-scrim{
    background:
      linear-gradient(to top,
        var(--pg-ink) 0%,
        var(--pg-ink) 17%,
        rgba(8,5,6,0.90) 30%,
        rgba(8,5,6,0.52) 46%,
        rgba(8,5,6,0.12) 64%,
        rgba(8,5,6,0) 78%),
      linear-gradient(to bottom,rgba(8,5,6,0.70) 0%,rgba(8,5,6,0) 20%);
  }
  .pg-vignette{
    background:radial-gradient(ellipse 86% 78% at 54% 40%,rgba(8,5,6,0) 48%,rgba(8,5,6,0.52) 100%);
  }
  .pg-grade-mult{opacity:0.72;}
  .pg-grain{opacity:0.10;}

  /* --- the copy: a label, a name, two ways in --- */
  .pg-lede,
  .pg-tags,
  .pg-ghost,
  .pg-stamp{display:none;}

  .pg-copy{max-width:none;}

  /* The wine pill was a block of flat colour sitting on top of moving
     footage — it read as a sticker. The label keeps its job and loses the
     chrome: a wine dot for the accent, the rest set quietly in mono. */
  .pg-kicker{
    display:inline-flex;
    background:none;box-shadow:none;padding:0;
    margin-bottom:1rem;gap:0.65rem;
    color:var(--pg-smoke);
    font-size:0.56rem;letter-spacing:0.28em;
  }
  .pg-kicker .pg-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--pg-wine-hi);
    align-self:center;
    box-shadow:0 0 0 4px rgba(224,27,54,0.18);
  }

  /* Both lines ivory. Wine type over a sunset is two warm hues competing at
     the same value — it goes muddy exactly where the headline should be at
     its hardest. The accent moves to the dot and the button, where it has
     flat ground to sit on. */
  .pg-hero h1,.pg-hero .pg-title{
    font-size:clamp(2.9rem,14.5vw,4.2rem);
    line-height:0.84;
    letter-spacing:-0.012em;
    margin:0 0 1.6rem;
    /* tight and dark, not a wide blur: a soft glow behind Anton at this size
       fogs the counters and is what makes it look cheap over video */
    text-shadow:0 2px 16px rgba(8,5,6,0.72);
  }
  .pg-hero .pg-l2{color:var(--pg-ivory);}

  .pg-actions{display:grid;gap:0.55rem;margin-bottom:0;}
  .pg-actions .pg-btn{
    width:100%;
    padding:1.08rem 1.2rem;
    font-size:0.7rem;letter-spacing:0.16em;
  }
  .pg-actions .pg-btn-ghost{
    border-color:rgba(255,246,240,0.5);
    background:rgba(8,5,6,0.3);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  /* :hover sticks after a tap on touch and reads as a stuck button */
  .pg-actions .pg-btn:hover,
  .pg-actions .pg-btn:focus{transform:none;box-shadow:none;}

  .pg-ticker{padding:0.58rem 0;border-top-width:2px;}
  .pg-ticker span{font-size:1.02rem;padding:0 1rem;}
}

@media (prefers-reduced-motion:reduce){
  .pg-rise{animation:none;opacity:1;transform:none;}
  .pg-hero-photo img,.pg-ticker-track{animation:none;}
  .pg-hero-video{display:none!important;}
  .pg-skel.is-loading .pg-media,.pg-btn,.pg-stamp{transition:none;}
}


/* ==========================================================================
   2. SECTION 2 — REELS
   ========================================================================== */

/* ============================================================
   SECTION 2 — REELS  (pinned; vertical scroll drives the strip
   sideways, and whichever reel reaches centre plays)
   ============================================================ */
.pgr-reels{
  position:relative;
  /* The glow below is absolutely positioned against THIS element, not against
     .pgr-pin, so the pin's overflow:hidden never clipped it — at 170vw wide it
     pushed the document's horizontal scroll out and showed as a white gutter
     down the right of every section. Clipped here, where it actually belongs.
     `clip` rather than `hidden`: hidden would make this a scroll container and
     break the sticky pin on desktop. */
  overflow-x:clip;
  background:var(--pg-ink);
  /* the site body is light with dark text, so the section must state its own */
  color:var(--pg-ivory);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* height is set by JS to (viewport + horizontal travel) */
  /* Bootstrap Reboot sets body{line-height:1.5}; the reference design has no
     body line-height, so it resolves to `normal` (font-metric derived).
     Without this, every descendant that doesn't declare its own line-height
     inherits 1.5 instead — measured across 14 elements (mono labels, badges,
     button text), each computing to exactly 1.5x its font-size and sitting
     visibly taller than the design. Restores the reference's inheritance. */
  line-height:normal;
}
.pgr-pin{
  position:sticky;top:0;
  height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.4vh,30px);
  overflow:hidden;
  isolation:isolate;
}
.pgr-pin::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(130vw,1600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,15,34,0.26) 0%,rgba(168,15,34,0) 62%);
  pointer-events:none;
}

/* --- head stays put while the strip moves --- */
.pgr-head{position:relative;z-index:3;flex:none;padding-top:calc(var(--pgr-nav-h,100px) + clamp(8px,2vh,24px));}
.pgr-head .pgr-inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}
.pgr-eyebrow{
  display:inline-flex;align-items:center;gap:0.75rem;
  color:var(--pg-wine-hi);margin-bottom:0.9rem;
}
.pgr-eyebrow::before{content:"";width:28px;height:2px;background:var(--pg-wine);}
.pgr-reels h2{color:var(--pg-ivory);}
.pgr-head h2{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:0.82;letter-spacing:-0.008em;margin:0;
}
.pgr-head h2 em{font-style:normal;color:var(--pg-wine-hi);}
.pgr-note{font-size:0.92rem;line-height:1.6;color:var(--pg-smoke);max-width:30ch;margin:0 0 0.3rem;}

/* --- the moving strip --- */
.pgr-strip-wrap{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;min-height:0;}
.pgr-strip{
  display:flex;align-items:center;
  gap:var(--pgr-gap,22px);
  will-change:transform;
  transform:translate3d(0,0,0);
}
/* edge fades */
.pgr-strip-wrap::before,.pgr-strip-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(20px,7vw,120px);
  z-index:6;pointer-events:none;
}
.pgr-strip-wrap::before{left:0;background:linear-gradient(to right,var(--pg-ink),rgba(8,5,6,0));}
.pgr-strip-wrap::after{right:0;background:linear-gradient(to left,var(--pg-ink),rgba(8,5,6,0));}

/* --- reel card --- */
.pgr-reel{
  position:relative;flex:0 0 auto;
  width:clamp(230px,23vw,310px);
  aspect-ratio:9/16;
  max-height:min(56vh,600px);
  overflow:hidden;
  background:var(--pg-ink-2);
  transform:scale(0.86);
  opacity:0.42;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .5s ease,box-shadow .5s ease;
}
.pgr-reel.pgr-active{
  transform:scale(1);
  opacity:1;
  box-shadow:0 46px 100px -34px rgba(168,15,34,0.72);
}
.pgr-reel video,.pgr-reel .pgr-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(1.16) contrast(1.1);
}
.pgr-reel video{z-index:1;opacity:0;transition:opacity .35s ease;}
.pgr-reel .pgr-poster{z-index:2;transition:opacity .45s ease;}
.pgr-reel.pgr-playing video{opacity:1;z-index:2;}
.pgr-reel.pgr-playing .pgr-poster{opacity:0;pointer-events:none;}
.pgr-reel::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border:2px solid transparent;transition:border-color .45s ease;
}
.pgr-reel.pgr-active::after{border-color:var(--pg-wine);}

.pgr-reel .pgr-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,5,6,0.9) 0%,rgba(8,5,6,0.2) 34%,rgba(8,5,6,0) 58%),
    linear-gradient(to bottom,rgba(8,5,6,0.6) 0%,rgba(8,5,6,0) 26%);
}
.pgr-no{
  position:absolute;left:12px;top:11px;z-index:6;
  font-family:"JetBrains Mono",monospace;
  font-size:0.6rem;font-weight:700;letter-spacing:0.18em;color:var(--pg-ivory);
}
.pgr-sound{
  position:absolute;right:10px;top:9px;z-index:7;
  width:36px;height:36px;
  background:rgba(8,5,6,0.6);border:1px solid rgba(247,241,232,0.28);
  color:var(--pg-ivory);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:background .2s ease,border-color .2s ease,opacity .3s ease;
}
.pgr-reel.pgr-active .pgr-sound{opacity:1;}
.pgr-sound:hover{background:var(--pg-wine);border-color:var(--pg-wine);}
.pgr-info{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:1rem 1.05rem 1.15rem;}
.pgr-info b{
  display:block;font-family:"Anton",sans-serif;font-weight:400;
  font-size:1.2rem;text-transform:uppercase;color:var(--pg-ivory);margin-bottom:0.28rem;
}
.pgr-info span{
  font-family:"JetBrains Mono",monospace;font-size:0.55rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--pg-wine-hi);
}
.pgr-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;height:3px;background:rgba(247,241,232,0.16);}
.pgr-bar i{display:block;height:100%;width:0;background:var(--pg-wine-hi);transition:width .12s linear;}
.pgr-play{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.pgr-play span{
  width:60px;height:60px;border:2px solid var(--pg-ivory);background:rgba(8,5,6,0.45);
  display:flex;align-items:center;justify-content:center;
}
.pgr-reel.pgr-active.pgr-paused.pgr-ready:not(.pgr-loading) .pgr-play{opacity:1;}
.pgr-wait{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .25s ease;
}
.pgr-wait i{
  width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(247,241,232,0.22);
  border-top-color:var(--pg-ivory);
  animation:pgr-spin .7s linear infinite;
}
.pgr-reel.pgr-active.pgr-loading .pgr-wait{opacity:1;}
@keyframes pgr-spin{to{transform:rotate(360deg);}}

/* --- scroll progress + counter, pinned under the strip --- */
.pgr-foot{
  position:relative;z-index:3;flex:none;
  display:flex;align-items:center;gap:1.2rem;
  padding-bottom:clamp(16px,4vh,40px);
}
.pgr-foot .pgr-count{
  font-family:"JetBrains Mono",monospace;font-size:0.62rem;font-weight:700;
  letter-spacing:0.2em;color:var(--pg-ivory);flex:none;
}
.pgr-foot .pgr-count i{font-style:normal;color:var(--pg-wine-hi);}
.pgr-track{position:relative;flex:1 1 auto;height:2px;background:var(--pg-line);}
.pgr-track i{
  position:absolute;left:0;top:0;height:100%;width:0;background:var(--pg-wine-hi);
  transition:width .15s linear;
}
.pgr-foot .pgr-hint{
  font-family:"JetBrains Mono",monospace;font-size:0.55rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--pg-smoke-2);flex:none;
}

/* media-type badge */
.pgr-kind{
  position:absolute;right:10px;bottom:auto;top:11px;z-index:6;
  display:inline-flex;align-items:center;gap:0.32rem;
  padding:0.24rem 0.44rem;
  background:rgba(8,5,6,0.62);
  border:1px solid rgba(247,241,232,0.22);
  font-family:"JetBrains Mono",monospace;
  font-size:0.48rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--pg-ivory);
}
.pgr-kind.pgr-kind-v{background:var(--pg-wine);border-color:var(--pg-wine);}
.pgr-reel.pgr-active .pgr-kind{opacity:0;transition:opacity .3s ease;}   /* sound button takes this corner */
.pgr-reel:not([data-kind="v"]).pgr-active .pgr-kind{opacity:1;}

/* clones are scenery only — never active, never interactive */
.pgr-reel.pgr-clone{pointer-events:none;}

/* prev / next */
.pgr-btns{display:flex;gap:0.5rem;flex:none;}
.pgr-nav{
  width:46px;height:46px;flex:none;
  background:transparent;border:2px solid var(--pg-line);
  color:var(--pg-ivory);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,opacity .2s ease;
}
.pgr-nav:hover{background:var(--pg-wine);border-color:var(--pg-wine);transform:translateY(-2px);}
.pgr-nav[disabled]{opacity:0.28;cursor:default;transform:none;background:transparent;border-color:var(--pg-line);}
@media (max-width:760px){ .pgr-btns{display:none;} }

/* --- chrome that only exists on mobile --------------------------------- */
.pgr-filters{display:none;}
.pgr-rail{display:none;}

/* ==========================================================================
   MOBILE (<=760px) — native scroll-snap rail + full-screen player

   Deliberately NOT the desktop mechanism. The pinned, scroll-driven strip
   depends on translating a transform against page scroll, which on touch
   means fighting momentum, rubber-banding and the URL-bar resize. Here the
   browser's own scroller does the work instead:

     - .pgr-strip becomes the scroll container (scroll-snap-type:x mandatory)
     - each card snaps to centre; the padding-inline is exactly the gutter
       needed for the first and last card to reach the centre
     - the active card is found with an IntersectionObserver watching a
       narrow band at the centre of the rail — no scroll handler, no math
     - overscroll-behavior-x:contain keeps the horizontal swipe out of the
       browser's back gesture

   The snapped card plays in place: its video source is only attached once
   the card reaches the centre, and it is torn back down when it leaves, so
   at most one of the 9-13MB reels is ever in flight.
   ========================================================================== */
@media (max-width:760px){

  .pgr-reels{height:auto!important;overflow-x:hidden;}
  .pgr-pin{
    position:static;height:auto;overflow:visible;
    padding:clamp(46px,8vh,78px) 0 clamp(26px,5vh,44px);
    gap:1.05rem;
  }
  .pgr-pin::before{top:30%;width:min(150vw,880px);}

  /* --- head --- */
  .pgr-head{padding-top:0;}
  .pgr-head .pgr-inner{display:block;}
  .pgr-head h2{font-size:clamp(2.5rem,13.5vw,3.6rem);line-height:0.86;}
  .pgr-eyebrow{margin-bottom:0.7rem;}
  .pgr-note{display:none;}

  /* --- category chips: full-bleed, snap-scrolling, no scrollbar --- */
  .pgr-filters{
    display:flex;gap:0.4rem;
    position:relative;z-index:3;flex:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:0 clamp(20px,4.5vw,60px) 0.1rem;
    scroll-padding-inline:clamp(20px,4.5vw,60px);
  }
  .pgr-filters::-webkit-scrollbar{display:none;}
  .pgr-chip{
    flex:0 0 auto;scroll-snap-align:start;
    display:inline-flex;align-items:center;gap:0.42rem;
    padding:0.52rem 0.82rem;
    background:transparent;
    border:1px solid var(--pg-line);
    border-radius:999px;
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:0.58rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
    color:var(--pg-smoke);
    cursor:pointer;
    transition:background .22s ease,border-color .22s ease,color .22s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .pgr-chip i{
    font-style:normal;font-size:0.52rem;
    color:var(--pg-smoke-2);
  }
  .pgr-chip.pgr-chip-on{
    background:var(--pg-wine);border-color:var(--pg-wine);color:var(--pg-ivory);
  }
  .pgr-chip.pgr-chip-on i{color:rgba(255,246,240,0.62);}

  /* --- the rail itself --- */
  .pgr-strip-wrap{display:block;flex:none;}
  .pgr-strip-wrap::before,.pgr-strip-wrap::after{display:none;}
  .pgr-strip{
    --pgr-card:min(76vw,320px);
    display:flex;align-items:center;
    gap:12px;
    transform:none!important;
    margin:0!important;
    padding:18px calc((100vw - var(--pgr-card)) / 2) 22px!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .pgr-strip::-webkit-scrollbar{display:none;}

  /* the lead-in clones only exist to fill the desktop edges */
  .pgr-reel.pgr-clone{display:none!important;}
  .pgr-reel[hidden]{display:none!important;}

  .pgr-reel{
    width:var(--pgr-card);max-height:none;
    scroll-snap-align:center;
    scroll-snap-stop:normal;
    border-radius:18px;
    transform:scale(0.94);
    opacity:0.62;
    transition:transform .4s cubic-bezier(.22,.7,.28,1),opacity .35s ease,box-shadow .4s ease;
    -webkit-tap-highlight-color:transparent;
    contain:layout paint;
  }
  .pgr-reel.pgr-active{
    transform:scale(1);
    opacity:1;
    box-shadow:0 22px 48px -24px rgba(168,15,34,0.75);
  }
  .pgr-reel video,.pgr-reel .pgr-poster{filter:none;}
  /* the 2px active border is a desktop cue; at this size the scale and the
     shadow already carry it, and the border fights the rounded corner */
  .pgr-reel::after{border-radius:inherit;}
  .pgr-reel.pgr-active::after{border-color:rgba(224,27,54,0.55);}

  /* card chrome, re-proportioned for the thumb */
  .pgr-no{left:14px;top:13px;font-size:0.62rem;}
  .pgr-kind{right:14px;top:13px;}
  .pgr-info{padding:1.15rem 1.05rem 1.35rem;}
  .pgr-info b{font-size:1.3rem;}

  /* 44px target, and it must sit above the rounded corner */
  .pgr-sound{
    right:11px;top:11px;
    width:44px;height:44px;border-radius:50%;
    background:rgba(8,5,6,0.5);
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    border-color:rgba(255,246,240,0.26);
    -webkit-tap-highlight-color:transparent;
  }
  .pgr-sound:active{background:var(--pg-wine);border-color:var(--pg-wine);}

  /* the tap-to-pause affordance, sized for touch */
  .pgr-play span{
    width:66px;height:66px;border-radius:50%;
    background:rgba(8,5,6,0.4);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  /* the progress bar has to clear the rounded bottom corners */
  .pgr-bar{left:10px;right:10px;bottom:8px;height:2px;border-radius:2px;overflow:hidden;}

  /* --- foot: segmented rail replaces the thin desktop track --- */
  .pgr-foot{
    padding:1.15rem clamp(20px,4.5vw,60px) 0;
    gap:0.85rem;
  }
  .pgr-foot .pgr-hint{display:none;}
  .pgr-track{display:none;}
  .pgr-rail{
    display:flex;align-items:center;gap:4px;
    flex:1 1 auto;min-width:0;
    height:22px;
  }
  .pgr-tick{
    flex:1 1 0;min-width:0;height:3px;
    padding:0;border:0;background:rgba(255,246,240,0.18);
    border-radius:2px;cursor:pointer;
    transition:background .25s ease,transform .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .pgr-tick.pgr-tick-on{background:var(--pg-wine-hi);transform:scaleY(2.2);}
  .pgr-tick.pgr-tick-seen{background:rgba(224,27,54,0.42);}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .pgr-reel{
    transform:none;opacity:0.75;transition:none;
  }
  .pgr-reel.pgr-active{transform:none;opacity:1;box-shadow:none;}
}

/* ==========================================================================
   3. SECTION 3 — FEATURED CREATORS
   ========================================================================== */

/* ============================================================
   SECTION 3 — FEATURED CREATORS
   card grid: one card per creator record
   ============================================================ */
.pgc-sec{
  position:relative;
  background:var(--pg-ink);
  /* the site body is light with dark text, so the section must state its own */
  color:var(--pg-ivory);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  /* inherited property: fixing it here covers every descendant (title, bio,
     buttons, handle) in one place. Missing this was why section-3 text read
     softer/heavier than the hero, which already declares it. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:clamp(72px,12vh,140px) 0 clamp(72px,12vh,140px);
  overflow:hidden;isolation:isolate;
  /* Bootstrap Reboot sets body{line-height:1.5}; the reference design has no
     body line-height, so it resolves to `normal` (font-metric derived).
     Without this, every descendant that doesn't declare its own line-height
     inherits 1.5 instead — measured across 14 elements (mono labels, badges,
     button text), each computing to exactly 1.5x its font-size and sitting
     visibly taller than the design. Restores the reference's inheritance. */
  line-height:normal;
}
.pgc-sec::before{
  content:"";position:absolute;z-index:0;right:-18%;bottom:-16%;
  width:min(92vw,1180px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,15,34,0.20) 0%,rgba(168,15,34,0) 66%);
  pointer-events:none;
}
.pgc-sec > .pg-wrap{position:relative;z-index:2;}

/* BUG FIX: this base rule was dropped during the three-file merge — only
   a section-4 override (.fin-head .pgc-eyebrow) survived, which depends on
   it existing. Without it the eyebrow rendered as plain white text with no
   dash and no colour, confirmed against the live page. */
.pgc-eyebrow{
  display:inline-flex;align-items:center;gap:0.75rem;
  color:var(--pg-wine-hi);margin-bottom:0.9rem;
}
.pgc-eyebrow::before{content:"";width:28px;height:2px;background:var(--pg-wine);}

.pgc-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2.5rem;flex-wrap:wrap;margin-bottom:clamp(26px,4.5vh,46px);
}
.pgc-sec h2,.pgc-sec h3{color:var(--pg-ivory);}
.pgc-sec a{text-decoration:none;}

.pgc-head h2{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.5rem,6.6vw,5.6rem);line-height:0.82;letter-spacing:-0.008em;margin:0;
}
.pgc-head h2 em{font-style:normal;color:var(--pg-wine-hi);display:block;}
.pgc-head .pgc-side{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;max-width:36ch;}
.pgc-head .pgc-side p{margin:0;font-size:0.95rem;line-height:1.65;color:var(--pg-smoke);}
.pgc-head .pgc-side p strong{color:var(--pg-ivory);font-weight:700;}

/* --- grid --- */
.pgc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(14px,1.8vw,24px);
}

/* --------------------------------------------------------------------------
   The card itself: includes.listing-creators (the platform's own partial,
   left unmodified). Its classes — .card-updates, .card-cover, .card-avatar,
   .card-title, .list-inline, .card-text, .btn-outline-primary — are shared
   with the explore/blog/shop/notifications pages, so EVERY rule below is
   scoped under .pgc-grid and must never appear unscoped in this file.
   -------------------------------------------------------------------------- */
.pgc-grid{
  --bs-card-cap-bg:transparent;
}
.pgc-grid .card-updates{
  background:var(--pg-ink-2)!important;
  border:1px solid rgba(247,241,232,0.09)!important;
  border-radius:0!important;      /* the site's Bootstrap card default is rounded */
  overflow:hidden;
  transition:border-color .3s ease,transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.pgc-grid .card-updates:hover{
  border-color:var(--pg-wine)!important;
  transform:translateY(-5px);
  box-shadow:0 32px 64px -28px rgba(168,15,34,0.6);
}
.pgc-grid .card-cover{
  position:relative;
  /* Fixed, not aspect-ratio: .card-avatar below is this element's SIBLING,
     not its child, so the avatar's absolute position can only be pinned
     reliably against a known cover height — an aspect-ratio height depends
     on the card's own width, which varies across the grid's auto-fill
     columns and breakpoints. */
  height:180px!important;
  border-radius:0!important;      /* styles.css sets 0.25rem on the top corners */
}
.pgc-grid .card-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,10,12,0.92) 0%,rgba(18,10,12,0.1) 58%,rgba(18,10,12,0) 100%);
}

/* --- avatar ---
   styles.css centers this absolutely (left:50%; margin-left:-45px; top:80px)
   for a generic profile-card layout. Re-anchored bottom-left here to match
   the reference design's floating avatar. Confirmed via computed style
   before this fix: left 153px / top 80px (centered), not bottom-left. */
.pgc-grid .card-avatar{
  position:absolute!important;
  left:16px!important;
  right:auto!important;
  /* Bug found and fixed: .card-avatar is a SIBLING of .card-cover, not
     nested inside it — both are direct children of .card-updates. So
     `bottom:-26px` resolves against the whole card's bottom edge (it landed
     down by the buttons, confirmed by measuring top:331px on a card whose
     cover ends at 180px). top is set explicitly instead, anchored to the
     fixed 180px cover height above: 180 - (62/2) = 149px, so the avatar
     straddles the cover/body seam the way it's meant to. */
  top:149px!important;
  bottom:auto!important;
  margin-left:0!important;
  width:62px!important;
  height:62px!important;
  border:2px solid var(--pg-ink-2)!important;
  background:var(--pg-ink-3)!important;
  border-radius:0!important;      /* square, matching the page's hard-edged language */
  overflow:hidden;
  transition:border-color .3s ease;
}
.pgc-grid .card-updates:hover .card-avatar{border-color:var(--pg-wine)!important;}

/* the avatar photo itself carries its own white ring + circle + forced
   width:auto in styles.css (.img-user-small) — none of it scoped, all of it
   fighting the container above. Neutralised so the photo simply fills it. */
.pgc-grid .card-avatar .img-user-small{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  border-radius:0!important;
  border:0!important;
  margin:0!important;
}

.pgc-grid .card-avatar .live-span{
  background:var(--pg-wine)!important;
  font-family:"JetBrains Mono",monospace;
  letter-spacing:0.14em;text-transform:uppercase;
}
.pgc-grid .card-body{
  background:transparent;
  /* avatar bottom edge = 149+62 = 211px; cover ends at 180px; so 31px of the
     avatar overlaps into this box. 3.2rem (51px) clears it with a ~20px gap
     before the title. */
  padding:3.2rem 1rem 1.1rem;
}
.pgc-grid .card-title{
  font-family:"Anton",sans-serif;font-weight:400!important;
  font-size:1.28rem;line-height:1;text-transform:uppercase;letter-spacing:0.01em;
  color:var(--pg-ivory);margin-bottom:0.4rem;
}
.pgc-grid .card-title a{color:inherit;text-decoration:none;}
/* Bootstrap's <small> scales to 0.875em of the Anton title (~17.9px) and the
   icon font follows — noticeably larger than the reference's 13px mark and
   sitting high against the cap-height. Pinned to a fixed size + baseline. */
.pgc-grid .verified,
.pgc-grid .text-featured{
  color:var(--pg-wine-hi)!important;
  font-size:0.85rem!important;
  vertical-align:0.05em;
}
/* the reference design has no icon-count row (image/video/audio totals) —
   hidden rather than restyled, since it has no equivalent to match against */
.pgc-grid .list-inline{display:none;}
.pgc-grid .card-text,
.pgc-grid .text-muted{
  color:var(--pg-smoke)!important;
  font-size:0.86rem;line-height:1.55;
}
.pgc-grid .btn-outline-primary{
  /* shared base, matches .cc-actions .cc-btn in the reference design exactly */
  border:2px solid var(--pg-wine)!important;
  border-radius:0!important;
  font-family:"Inter",sans-serif!important;
  font-size:0.66rem!important;
  font-weight:900!important;letter-spacing:0.16em!important;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
/* secondary action ("go to page") — outline/ghost, matches .cc-btn.ghost */
.pgc-grid .btn-outline-primary:not(.active){
  background:transparent!important;
  border-color:var(--pg-line)!important;
  color:var(--pg-ivory)!important;
}
.pgc-grid .btn-outline-primary:not(.active):hover{
  border-color:var(--pg-ivory)!important;
  background:var(--pg-ivory)!important;
  color:var(--pg-wine)!important;
}
/* primary action (price / free / subscribe) — solid crimson fill, matches .cc-btn */
.pgc-grid .btn-outline-primary.active{
  background:var(--pg-wine)!important;
  color:var(--pg-ivory)!important;
}
.pgc-grid .btn-outline-primary.active:hover{
  background:var(--pg-wine-hi)!important;
  border-color:var(--pg-wine-hi)!important;
}

/* --- the way out of the section --- */
.pgc-more{
  display:flex;justify-content:center;
  margin-top:clamp(30px,5vh,54px);
}

/* ==========================================================================
   CREATOR CARDS ON A PHONE (<=620px) — one profile, then the next

   The desktop card is a cover strip with a body underneath: a photograph,
   then a separate block of chrome that repeats what the photograph already
   said. Shrunk to a phone that inverts — the chrome keeps its fixed costs
   (title, two buttons, padding) while the picture is what gets squeezed, so
   a card about a person ends up mostly not being about the person.

   Here the card becomes a poster. The cover fills the whole frame, the
   identity is set ON it in the gradient that is already there, and one card
   holds the screen at a time. The reader meets one creator, decides, and
   swipes — which is how a roster is actually read on a phone.

   The rail is the reels mechanism again on purpose: centre snap, native
   momentum, the next card peeking so there is never a question that more
   exists. Two different scroll behaviours on one page is the thing that
   makes a page feel improvised.
   ========================================================================== */
@media (max-width:620px){

  .pgc-grid{
    display:flex;
    grid-template-columns:none;
    --pgc-card:min(84vw,330px);
    gap:12px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* full-bleed, with exactly the gutter that lets the first and last card
       reach the centre of the viewport */
    margin:0 calc(-1 * clamp(20px,4.5vw,60px));
    padding:2px calc((100vw - var(--pgc-card)) / 2) 4px;
  }
  .pgc-grid::-webkit-scrollbar{display:none;}

  /* --- the card is now a frame, not a stack --- */
  .pgc-grid > .card-updates{
    flex:0 0 auto;
    width:var(--pgc-card);
    height:auto!important;            /* .h-100 would resolve against the rail */
    aspect-ratio:4/5;
    scroll-snap-align:center;scroll-snap-stop:always;
    position:relative;
    border-radius:20px!important;
    border:0!important;
    box-shadow:0 24px 50px -26px rgba(0,0,0,0.9)!important;
    background:var(--pg-ink-3)!important;
  }
  .pgc-grid .card-updates:hover{transform:none;box-shadow:0 24px 50px -26px rgba(0,0,0,0.9)!important;}

  .pgc-grid .card-cover{
    position:absolute!important;inset:0;
    height:100%!important;
    border-radius:inherit!important;
  }
  /* the type sits in here, so it has to be a plate at the foot and clear
     air at the head */
  .pgc-grid .card-cover::after{
    border-radius:inherit;
    background:linear-gradient(to top,
      rgba(8,5,6,0.97) 0%,
      rgba(8,5,6,0.88) 22%,
      rgba(8,5,6,0.42) 44%,
      rgba(8,5,6,0.05) 66%,
      rgba(8,5,6,0.30) 100%);
  }

  /* --- avatar to the head of the frame: it is the identity anchor, and it
         is also where the LIVE flag belongs --- */
  .pgc-grid .card-avatar{
    left:13px!important;
    top:13px!important;
    width:50px!important;height:50px!important;
    border-radius:14px!important;
    border:2px solid rgba(255,246,240,0.9)!important;
    box-shadow:0 6px 18px -6px rgba(0,0,0,0.9);
    z-index:4!important;
  }
  .pgc-grid .card-avatar .img-user-small{border-radius:0!important;}
  .pgc-grid .card-avatar .live-span{
    font-size:0.44rem!important;padding:2px 5px!important;
    border-radius:4px!important;
  }

  /* --- everything else is one overlay at the foot --- */
  .pgc-grid .card-body{
    position:absolute;z-index:3;
    inset:auto 0 0 0;
    display:flex;flex-direction:column;
    padding:0 14px 14px!important;
    text-align:left!important;
    background:none;
  }
  .pgc-grid .card-title{
    order:1;margin:0 0 0.25rem!important;padding:0!important;
    font-size:1.62rem;line-height:1;
    color:var(--pg-ivory);
    /* a long display name clips rather than pushing the buttons off frame */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-shadow:0 2px 12px rgba(8,5,6,0.7);
  }
  .pgc-grid .verified,.pgc-grid .text-featured{font-size:0.8rem!important;}

  /* at this width the truncated line is long enough to mean something, so
     it comes back as the card's one line of voice */
  .pgc-grid .card-text{
    display:block;order:2;
    margin:0 0 0.85rem!important;padding:0!important;
    font-size:0.78rem;line-height:1.4;
    color:rgba(255,246,240,0.72)!important;
  }

  /* the price is the decision; the profile link is the way of not deciding */
  .pgc-grid .card-body .btn-outline-primary.active{
    order:3;
    display:flex;width:100%;margin:0!important;
    padding:0.85rem 0.6rem!important;
    font-size:0.66rem!important;letter-spacing:0.14em!important;
    border-radius:10px!important;border-width:0!important;
  }
  .pgc-grid .card-body .btn-outline-primary:not(.active){
    order:4;
    display:block;width:100%;
    margin:0.5rem 0 0!important;padding:0!important;
    border:0!important;background:none!important;
    font-size:0.6rem!important;letter-spacing:0.16em!important;
    color:rgba(255,246,240,0.72)!important;
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(255,246,240,0.3);
  }
  .pgc-grid .card-body .btn-outline-primary:hover,
  .pgc-grid .card-body .btn-outline-primary:focus{transform:none;box-shadow:none;}

  /* full width at the foot, and the rule sits above it rather than behind:
     a centred pill on a hairline needs side margin to read, and there is
     none at this width */
  .pgc-more{
    display:block;
    margin-top:1.3rem;padding-top:1.3rem;
    border-top:1px solid var(--pg-line);
  }
  .pgc-more .pg-btn{
    display:flex;width:100%;
    padding:1rem 1.2rem;font-size:0.7rem;letter-spacing:0.14em;
  }
  .pgc-more .pg-btn:hover,
  .pgc-more .pg-btn:focus{transform:none;box-shadow:none;}
}

@media (prefers-reduced-motion:reduce){
  .pgc-grid .card-updates,.pgc-grid .card-cover{transition:none;}
}


/* ------------------------------------------------------------
   SECTION 3 — empty state
   no other creators on the platform yet, so the owner's own
   profile carries the section instead of an empty grid
   ------------------------------------------------------------ */
.pgc-solo{
  display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);
  align-items:stretch;
  border:1px solid rgba(247,241,232,0.10);
  background:var(--pg-ink-2);
  overflow:hidden;
}
.pgc-solo-media{position:relative;min-height:clamp(340px,52vh,560px);overflow:hidden;background:var(--pg-ink-3);}
.pgc-solo-media img{
  width:100%;height:100%;object-fit:cover;object-position:52% 22%;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
  filter:saturate(1.14) contrast(1.08);
}
.pgc-solo:hover .pgc-solo-media img{transform:scale(1.07);}
.pgc-solo-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(18,10,12,0) 55%,rgba(18,10,12,0.85) 100%),
             linear-gradient(to top,rgba(18,10,12,0.6) 0%,rgba(18,10,12,0) 40%);
}
.pgc-solo-flag{
  position:absolute;z-index:3;left:14px;top:14px;
  display:inline-flex;align-items:center;gap:0.36rem;
  padding:0.34rem 0.56rem;
  background:var(--pg-wine);border:1px solid var(--pg-wine);
  font-family:"JetBrains Mono",monospace;
  font-size:0.5rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--pg-ivory);
}

.pgc-solo-body{
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,3vw,2.6rem);
  gap:0.9rem;
}
.pgc-solo-id{display:flex;align-items:center;gap:0.9rem;}
.pgc-solo-avatar{
  width:64px;height:64px;flex:none;overflow:hidden;
  border:2px solid var(--pg-wine);background:var(--pg-ink-3);
}
.pgc-solo-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.pgc-solo-name{
  display:flex;align-items:center;gap:0.4rem;
  font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem);
  text-transform:uppercase;color:var(--pg-ivory);margin:0;line-height:1;
}
.pgc-solo-handle{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:0.6rem;font-weight:700;letter-spacing:0.16em;color:var(--pg-smoke-2);
  margin-top:0.4rem;
}
.pgc-solo-bio{margin:0;font-size:0.95rem;line-height:1.7;color:var(--pg-smoke);max-width:44ch;}
.pgc-solo-bio strong{color:var(--pg-ivory);font-weight:700;}
.pgc-solo-tags{display:flex;flex-wrap:wrap;gap:0.36rem;}
.pgc-solo-tags span{
  padding:0.3rem 0.58rem;
  border:1px solid rgba(247,241,232,0.16);
  font-family:"JetBrains Mono",monospace;
  font-size:0.52rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--pg-smoke);
}
.pgc-solo-actions{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.4rem;}

/* the recruiting note lives inside the panel, so the empty state still sells the platform */
.pgc-solo-join{
  margin-top:auto;padding-top:1.3rem;
  border-top:2px solid var(--pg-line);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.pgc-solo-join p{margin:0;font-size:0.86rem;line-height:1.6;color:var(--pg-smoke);max-width:30ch;}
.pgc-solo-join p b{color:var(--pg-ivory);}
.pgc-solo-join em{font-style:normal;color:var(--pg-wine-hi);font-weight:700;}

@media (max-width:820px){
  .pgc-solo{grid-template-columns:1fr;}
  .pgc-solo-media{min-height:clamp(280px,46vh,420px);}
  .pgc-solo-media::after{
    background:linear-gradient(to top,rgba(18,10,12,0.9) 0%,rgba(18,10,12,0) 46%);
  }
  .pgc-solo-actions .pg-btn{flex:1 1 auto;}
}

/* ==========================================================================
   FOUNDING-CREATOR CARD ON A PHONE (<=620px)

   The stacked version of this card ran to roughly 900px — a full portrait
   image, then a separate identity row, bio, tags, two stacked full-size
   buttons and a recruiting block with a third. On a phone that is three
   thumb-flicks of one card, and the reader loses the person before they
   reach the subscribe button.

   The fix is compositional, not a squeeze:

     1. The identity (avatar, name, handle) stops being its own band and
        rides up onto the bottom of the photo, where the gradient already
        exists to carry it. That band was pure overhead — about 110px of
        height for information the photo is already introducing.
     2. The photo becomes a crop, not a portrait. It is establishing who
        this is, not being looked at in full.
     3. One primary action. "Subscribe" is the decision; "View profile" is
        a way of not deciding, so it drops to a quiet text link.
     4. The recruiting note becomes a single tappable row. Its full block
        duplicates section 4 ("Two ways in") two screens further down, so
        on a phone it only needs to be a pointer, not a pitch.

   Roughly 900px -> 540px, with the subscribe button now above the fold on
   a 390x844 device.
   ========================================================================== */
@media (max-width:620px){

  .pgc-sec{padding:clamp(56px,9vh,90px) 0;}

  /* --- section head --- */
  .pgc-head{display:block;margin-bottom:1.35rem;}
  .pgc-head h2{font-size:clamp(2.4rem,12.5vw,3.4rem);line-height:0.86;}
  .pgc-head .pgc-side{max-width:none;margin-top:1rem;gap:0.9rem;}
  .pgc-head .pgc-side p{font-size:0.88rem;line-height:1.6;}

  /* --- the card --- */
  .pgc-solo{border-radius:18px;}

  /* 1 + 2. the photo is a crop that the identity sits on top of, so the
     gradient has to be near-solid across the overlap depth */
  .pgc-solo-media{min-height:clamp(226px,32vh,310px);}
  .pgc-solo-media img{object-position:52% 18%;}
  .pgc-solo-media::after{
    background:linear-gradient(to top,
      rgba(18,10,12,0.99) 0%,
      rgba(18,10,12,0.94) 14%,
      rgba(18,10,12,0.45) 34%,
      rgba(18,10,12,0) 62%);
  }
  .pgc-solo-flag{left:12px;top:12px;}

  .pgc-solo-body{
    position:relative;z-index:2;
    margin-top:-72px;                 /* the overlap: identity onto the photo */
    padding:0 1.15rem 1.3rem;
    gap:0.8rem;
  }

  .pgc-solo-id{gap:0.75rem;}
  .pgc-solo-avatar{
    width:58px;height:58px;border-radius:50%;
    box-shadow:0 6px 18px -6px rgba(0,0,0,0.8);
  }
  .pgc-solo-name{
    font-size:1.72rem;
    text-shadow:0 2px 14px rgba(8,5,6,0.75);   /* legible over any crop */
  }
  .pgc-solo-handle{margin-top:0.3rem;font-size:0.55rem;}

  .pgc-solo-bio{font-size:0.9rem;line-height:1.62;max-width:none;}

  /* tags bleed to the card edge and scroll rather than wrapping to a
     second row that pushes the button down */
  .pgc-solo-tags{
    flex-wrap:nowrap;overflow-x:auto;
    margin:0 -1.15rem;padding:0 1.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .pgc-solo-tags::-webkit-scrollbar{display:none;}
  .pgc-solo-tags span{flex:0 0 auto;}

  /* 3. one decision, one button */
  .pgc-solo-actions{display:block;margin-top:0.15rem;}
  .pgc-solo-actions .pg-btn{
    display:flex;width:100%;
    padding:1rem 1.2rem;font-size:0.72rem;letter-spacing:0.14em;
  }
  .pgc-solo-actions .pg-btn-ghost{
    background:none;border:0;padding:0.75rem 0 0.2rem;
    color:var(--pg-smoke);
    font-size:0.62rem;letter-spacing:0.18em;
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(255,246,240,0.28);
  }
  /* the hover lift is a pointer affordance and only reads as a glitch on
     a touch screen, where :hover sticks after the tap */
  .pgc-solo-actions .pg-btn:hover,
  .pgc-solo-actions .pg-btn:focus{transform:none;box-shadow:none;}

  /* 4. the recruiting note collapses to one tappable row */
  .pgc-solo-join{
    margin-top:0.35rem;padding-top:1rem;
    border-top:1px solid var(--pg-line);
    flex-wrap:nowrap;align-items:center;gap:0.85rem;
  }
  .pgc-solo-join p{
    flex:1 1 auto;min-width:0;max-width:none;
    font-size:0.72rem;line-height:1.5;
  }
  .pgc-solo-join .pg-btn{
    flex:none;
    padding:0.62rem 0.85rem;
    font-size:0.52rem;letter-spacing:0.14em;
    border-radius:999px;
  }
  .pgc-solo-join .pg-btn:hover,
  .pgc-solo-join .pg-btn:focus{transform:none;box-shadow:none;}
}



/* ============================================================
   SECTION 4 — TWO WAYS IN  (fans subscribe / creators join)
   ============================================================ */
.finale{
  position:relative;background:var(--pg-ink);
  /* BUG FIX: every other section (.pg-hero, .pgr-reels, .pgc-sec) declares
     its own color+font on the section root; this one never did. Since color
     is inherited and the page body is light-themed with black text, any
     element in here without its OWN explicit color (like .fin-head h2, which
     only colours its <em>) fell through to black. Confirmed on the live
     page: .fin-head h2 computed color was rgb(0,0,0). */
  color:var(--pg-ivory);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:clamp(72px,12vh,140px) 0 clamp(80px,13vh,150px);
  overflow:hidden;isolation:isolate;
  /* Bootstrap Reboot sets body{line-height:1.5}; the reference design has no
     body line-height, so it resolves to `normal` (font-metric derived).
     Without this, every descendant that doesn't declare its own line-height
     inherits 1.5 instead — measured across 14 elements (mono labels, badges,
     button text), each computing to exactly 1.5x its font-size and sitting
     visibly taller than the design. Restores the reference's inheritance. */
  line-height:normal;
}
.finale::before{
  content:"";position:absolute;z-index:0;left:50%;top:-12%;transform:translateX(-50%);
  width:min(120vw,1500px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,15,34,0.24) 0%,rgba(168,15,34,0) 62%);
  pointer-events:none;
}
.finale > .pg-wrap{position:relative;z-index:2;}

.fin-head{text-align:center;margin-bottom:clamp(30px,5vh,54px);}
.fin-head .pgc-eyebrow{justify-content:center;}
.fin-head h2{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,6rem);line-height:0.82;letter-spacing:-0.008em;margin:0;
}
.fin-head h2 em{font-style:normal;color:var(--pg-wine-hi);}

.fin-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);align-items:stretch;
}

.fin-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.5rem,3vw,2.6rem);
  overflow:hidden;
  border:1px solid rgba(247,241,232,0.10);
  transition:border-color .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.fin-card:hover{transform:translateY(-4px);border-color:var(--pg-wine);}
.fin-card > *{position:relative;z-index:2;}

.fin-kind{
  display:inline-flex;align-items:center;gap:0.45rem;
  align-self:flex-start;
  padding:0.36rem 0.6rem;margin-bottom:1.4rem;
  border:1px solid rgba(247,241,232,0.28);
  font-family:"JetBrains Mono",monospace;
  font-size:0.5rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--pg-ivory);
}
.fin-card h3{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:0.9;letter-spacing:-0.005em;
  color:var(--pg-ivory);margin:0 0 0.9rem;
}
.fin-card h3 em{font-style:normal;color:var(--pg-wine-hi);}
.fin-lead{margin:0 0 1.4rem;font-size:0.96rem;line-height:1.7;color:var(--pg-smoke);max-width:40ch;}
.fin-lead strong{color:var(--pg-ivory);font-weight:700;}

.fin-list{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:0.7rem;}
.fin-list li{
  display:flex;align-items:flex-start;gap:0.65rem;
  font-size:0.9rem;line-height:1.5;color:var(--pg-ivory);
}
.fin-list svg{flex:none;margin-top:2px;}
.fin-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:0.6rem;}
.fin-actions .pg-btn{text-decoration:none;}

/* --- fans panel: photograph behind --- */
.fin-fan{background:var(--pg-ink-2);}
.fin-fan .bg{position:absolute;inset:0;z-index:0;}
.fin-fan .bg img{
  width:100%;height:100%;object-fit:cover;object-position:74% 18%;
  transform:scale(1.03);transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
  filter:saturate(1.12) contrast(1.06);
}
.fin-fan:hover .bg img{transform:scale(1.08);}
.fin-fan .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,5,6,0.92) 14%,rgba(8,5,6,0.45) 62%,rgba(8,5,6,0.08) 100%),
             linear-gradient(to right,rgba(8,5,6,0.90) 0%,rgba(8,5,6,0.52) 46%,rgba(8,5,6,0) 92%);
}

/* --- creators panel: the split --- */
.fin-creator{
  background:linear-gradient(150deg,rgba(92,5,18,0.55) 0%,rgba(18,10,12,0.9) 58%);
}
.split{margin:0 0 1.5rem;}
.split-nums{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:0.6rem;}
.split-nums b{
  font-family:"Anton",sans-serif;font-weight:400;line-height:0.85;
  font-size:clamp(3rem,7vw,5.2rem);color:var(--pg-wine-hi);
}
.split-nums b small{font-size:0.42em;}
.split-nums span{
  font-family:"JetBrains Mono",monospace;
  font-size:0.55rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--pg-smoke-2);text-align:right;line-height:1.7;
}
.split-nums span i{font-style:normal;display:block;color:var(--pg-ivory);font-size:1.5em;letter-spacing:0.06em;}
.split-bar{display:flex;height:12px;border:1px solid rgba(247,241,232,0.2);overflow:hidden;}
.split-bar .you{flex:0 0 80%;background:var(--pg-wine-hi);}
.split-bar .us{flex:1 1 auto;background:rgba(247,241,232,0.16);}
.split-key{
  display:flex;justify-content:space-between;margin-top:0.5rem;
  font-family:"JetBrains Mono",monospace;
  font-size:0.5rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--pg-smoke-2);
}
.split-key b{color:var(--pg-wine-hi);}

/* --- steps --- */
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(20px,3.4vh,34px);
  padding-top:clamp(20px,3.4vh,34px);
  border-top:2px solid var(--pg-line);
}
.step{display:flex;flex-direction:column;gap:0.45rem;}
.step b{
  font-family:"JetBrains Mono",monospace;
  font-size:0.55rem;font-weight:700;letter-spacing:0.2em;color:var(--pg-wine-hi);
}
.step strong{
  font-family:"Anton",sans-serif;font-weight:400;
  font-size:1.15rem;text-transform:uppercase;color:var(--pg-ivory);line-height:1.05;
}
.step span{font-size:0.85rem;line-height:1.55;color:var(--pg-smoke);}

@media (max-width:860px){
  .fin-grid{grid-template-columns:1fr;}
  .fin-fan .bg img{object-position:60% 18%;}
  .fin-actions .pg-btn{flex:1 1 auto;}
}

/* the segmented control is a mobile device only */
.fin-tabs{display:none;}

/* ==========================================================================
   TWO WAYS IN, ON A PHONE (<=700px)

   Stacked, this section ran about 1700px: two ~570px panels plus a 300px
   step strip, four full-size buttons, and the two panels roughly 600px
   apart. The length is the symptom. The actual failure is that the section
   asks the reader to pick a side and then never shows both sides at once —
   by the time the creator panel arrives the fan panel is two screens gone,
   so there is nothing to pick between.

   So the choice becomes the interface:

     1. A segmented control holds the binary. Both options are visible and
        comparable at all times; one panel is open at a time. The section's
        own headline ("Pick your side") is now literally what the control
        does, and the height halves as a side effect rather than as a squeeze.
     2. The "For fans" / "For creators" badge inside each panel is deleted —
        the tab above it already says that, and repeating it costs 44px.
     3. Apply / verify / publish is the CREATOR path. Under both panels it
        was mis-filed; here it only appears while the creators tab is open,
        and reads as a numbered rail rather than three stacked blocks.
     4. The second button on each panel ("See a preview", "See the roster")
        points back UP the page the reader has just come down. That is not a
        call to action, so it stops being a button and becomes a quiet link.

   ~1700px -> ~700px, and the reader is never more than one screen from a
   decision.
   ========================================================================== */
@media (max-width:700px){

  .finale{padding:clamp(56px,9vh,90px) 0 clamp(60px,10vh,100px);}
  .fin-head{margin-bottom:1.15rem;}
  .fin-head h2{font-size:clamp(2.4rem,12.5vw,3.4rem);line-height:0.86;}

  /* --- 1. the segmented control --- */
  .fin-tabs{
    position:relative;
    display:grid;grid-template-columns:repeat(2,1fr);
    margin-bottom:1rem;
    padding:4px;
    border:1px solid var(--pg-line);
    border-radius:999px;
    background:rgba(18,10,12,0.6);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    isolation:isolate;
  }
  /* the indicator slides rather than the fill jumping between buttons, so
     the control reads as one object with a position, not two lit states */
  .fin-tabs::before{
    content:"";position:absolute;z-index:-1;
    top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
    background:var(--pg-wine);
    border-radius:999px;
    transition:transform .34s cubic-bezier(.22,.7,.28,1);
  }
  .finale[data-side="creators"] .fin-tabs::before{transform:translateX(100%);}
  .fin-tab{
    appearance:none;background:none;border:0;
    padding:0.82rem 0.5rem;
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:0.58rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--pg-smoke);cursor:pointer;
    transition:color .28s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .fin-tab[aria-selected="true"]{color:var(--pg-ivory);}

  /* --- panels: one at a time --- */
  .fin-grid{gap:0;}
  .fin-card[hidden]{display:none;}
  .fin-card{
    border-radius:18px;
    padding:1.35rem 1.2rem 1.5rem;
    animation:finIn .38s cubic-bezier(.22,.7,.28,1) both;
  }
  .fin-card:hover{transform:none;border-color:rgba(247,241,232,0.10);}

  /* 2. the tab already said this */
  .fin-kind{display:none;}

  .fin-card h3{font-size:2.05rem;line-height:0.92;margin-bottom:0.7rem;}
  .fin-lead{font-size:0.9rem;line-height:1.62;margin-bottom:1.1rem;max-width:none;}
  .fin-list{margin-bottom:1.25rem;gap:0.55rem;}
  .fin-list li{font-size:0.86rem;line-height:1.45;}

  /* the fan panel's photo needs to carry text at this width, not just sit
     behind it */
  .fin-fan .bg img{object-position:66% 14%;}
  .fin-fan .bg::after{
    background:linear-gradient(to top,rgba(8,5,6,0.95) 30%,rgba(8,5,6,0.72) 70%,rgba(8,5,6,0.35) 100%);
  }

  .split{margin-bottom:1.15rem;}
  .split-nums b{font-size:3.2rem;}

  /* --- 4. one button, one link --- */
  .fin-actions{display:block;}
  .fin-actions .pg-btn{
    display:flex;width:100%;
    padding:1rem 1.2rem;font-size:0.72rem;letter-spacing:0.14em;
  }
  .fin-actions .pg-btn-ghost{
    background:none;border:0;padding:0.72rem 0 0.1rem;
    color:var(--pg-smoke);
    font-size:0.62rem;letter-spacing:0.18em;
    text-decoration:none;
  }
  /* :hover sticks after a tap on touch and reads as a stuck button */
  .fin-actions .pg-btn:hover,
  .fin-actions .pg-btn:focus{transform:none;box-shadow:none;}

  /* --- 3. the creator path, as a numbered rail --- */
  .steps[hidden]{display:none;}
  .steps{
    grid-template-columns:1fr;
    gap:0;
    margin-top:1.15rem;padding-top:1.15rem;
    border-top:1px solid var(--pg-line);
    animation:finIn .38s cubic-bezier(.22,.7,.28,1) both;
  }
  .step{
    position:relative;
    display:grid;grid-template-columns:auto 1fr;
    column-gap:0.85rem;row-gap:0.12rem;
    padding:0 0 0.95rem 0;
  }
  .step:last-child{padding-bottom:0;}
  /* the rail: a hairline down the numbers, closed off at the last step */
  .step::before{
    content:"";position:absolute;z-index:0;
    left:11px;top:22px;bottom:0;width:1px;
    background:var(--pg-line);
  }
  .step:last-child::before{display:none;}
  .step b{
    position:relative;z-index:1;grid-row:1 / span 2;
    width:23px;height:23px;flex:none;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--pg-wine);border-radius:50%;
    background:var(--pg-ink);
    font-size:0.5rem;letter-spacing:0;
  }
  .step strong{font-size:1.02rem;align-self:center;}
  .step span{font-size:0.82rem;line-height:1.5;padding-top:0.15rem;}
}

@keyframes finIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media (max-width:560px){
  .split-nums b{font-size:3.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .fin-card,.steps{animation:none!important;}
  .fin-tabs::before{transition:none;}
}
@media (prefers-reduced-motion:reduce){
  .fin-card,.fin-fan .bg img{transition:none;}
}


/* ==========================================================================
   HOMEPAGE FOOTER — scoped to .pgf so other pages keep the platform footer
   ========================================================================== */
.pgf{
  position:relative;
  background:var(--pg-ink);
  color:var(--pg-ivory);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;isolation:isolate;
  padding:clamp(56px,8vh,96px) 0 0;
  margin:0;
}
.pgf,.pgf *{box-sizing:border-box;}
.pgf::before{
  content:"";position:absolute;z-index:0;left:-12%;bottom:-40%;
  width:min(80vw,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,15,34,0.22) 0%,rgba(168,15,34,0) 66%);
  pointer-events:none;
}
.pgf > .pg-wrap{position:relative;z-index:2;}
.pgf a{color:inherit;text-decoration:none;}
.pgf ul{list-style:none;margin:0;padding:0;}
.pgf p{margin:0;}

.pgf-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
  gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(36px,5vh,56px);
  align-items:start;
}

.pgf-wordmark{
  display:inline-block;
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  font-size:clamp(1.6rem,3vw,2.2rem);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1;
  color:var(--pg-ivory);
}
.pgf-wordmark span{color:var(--pg-wine-hi);}
.pgf-brand p{
  margin:1rem 0 1.4rem;
  font-size:0.92rem;line-height:1.65;
  color:var(--pg-smoke);
  max-width:32ch;
}

.pgf-social{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 1.2rem;}
.pgf-social a{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--pg-line);
  color:var(--pg-ivory);
  border-radius:0;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.pgf-social a:hover{
  background:var(--pg-wine);border-color:var(--pg-wine);color:var(--pg-ivory);
  transform:translateY(-2px);
}

.pgf #installContainer{margin-top:0.4rem;}
.pgf #butInstall{
  font-family:"Inter",sans-serif!important;
  border-radius:0;
}

.pgf-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,36px);
}
.pgf-col h6{
  display:inline-flex;align-items:center;gap:0.65rem;
  font-family:"JetBrains Mono",ui-monospace,monospace!important;
  font-size:0.55rem;font-weight:700!important;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--pg-wine-hi);
  margin:0 0 1.1rem;
}
.pgf-col h6::before{content:"";width:18px;height:2px;background:var(--pg-wine);flex:none;}
.pgf-col ul{display:flex;flex-direction:column;gap:0.55rem;}
.pgf-col a{
  font-size:0.88rem;font-weight:500;
  color:var(--pg-smoke);
  letter-spacing:0.01em;
  transition:color .18s ease;
}
.pgf-col a:hover{color:var(--pg-ivory);}

.pgf-lang{margin-top:0.5rem;}
.pgf-lang-btn{
  display:inline-flex;align-items:center;
  padding:0.55rem 0.85rem;
  border:2px solid var(--pg-line)!important;
  border-radius:0!important;
  font-family:"JetBrains Mono",monospace;
  font-size:0.55rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pg-ivory)!important;
  background:transparent!important;
}
.pgf-lang-btn:hover,.pgf-lang-btn:focus{
  border-color:var(--pg-ivory)!important;color:var(--pg-ivory)!important;
}
.pgf .dropdown-menu{
  background:var(--pg-ink-2);
  border:1px solid rgba(247,241,232,0.12);
  border-radius:0;
  padding:0.4rem 0;
  margin-top:0.4rem;
}
.pgf .dropdown-item{
  color:var(--pg-smoke);
  font-family:"Inter",sans-serif;
  font-size:0.82rem;
  padding:0.45rem 1rem;
}
.pgf .dropdown-item:hover{background:rgba(168,15,34,0.28);color:var(--pg-ivory);}
.pgf .dropdown-item.active{background:var(--pg-wine);color:var(--pg-ivory);}

.pgf-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:1.35rem 0 1.6rem;
  border-top:2px solid var(--pg-line);
  font-family:"JetBrains Mono",monospace;
  font-size:0.52rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--pg-smoke-2);
}

@media (max-width:860px){
  .pgf-top{grid-template-columns:1fr;gap:2.2rem;}
  .pgf-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .pgf-cols{grid-template-columns:1fr;gap:1.6rem;}
  .pgf-bar{padding-bottom:2rem;}
}
@media (prefers-reduced-motion:reduce){
  .pgf-social a{transition:none;}
}