/* ============================================================
   PROGRAMS STYLESHEET — creators.html + affiliates.html only.

   Kept out of css/styles.css deliberately. Those two pages carry
   several one-off patterns (platform badges, a gradient accent,
   a hero blob) that nothing else on the site uses, and this session
   hit three separate specificity/scoping bugs today from adding
   page-specific rules into the shared file (an unscoped
   place-items:stretch replace that hit .icon-list-badge everywhere,
   .about-cta colliding with a new .story-cta, .icon-list needing to
   be unscoped from the accordion). A dedicated file for a dedicated
   pair of pages means nothing here can touch index.html's cascade.

   Loaded AFTER css/styles.css, so every existing token
   (--color-accent, --space-*, --radius-*, --ease-out-soft, etc.) is
   already in scope — this file only adds what those two pages need
   on top of it, and reuses .eyebrow/.btn/.section/.section--band/
   .icon-list/.ritual-steps/.ritual-step/.product-accordion as-is.
   ============================================================ */

:root{
  /* Instagram's story-ring gradient — five official stops, unchanged
     since 2016: yellow -> orange -> magenta -> purple -> blue. This is
     the one deliberate accent color on either page; everything else on
     both pages stays inside the site's own ember/near-black system so a
     creator lands on an AfterSmoke page, not an Instagram one. */
  --gradient-instagram: linear-gradient(45deg,
    #FEDA77 0%, #F58529 28%, #DD2A7B 55%, #8134AF 75%, #515BD4 100%);

  /* Platform brand colors, current as of their own guidelines — used
     only on the small badge chips in the platform grid, nowhere else. */
  --color-tiktok-black:#000000;
  --color-youtube-red:#FF0000;
  --color-x-black:#000000;
}

/* ---------- Shared hero shape ---------- */
.program-hero{
  position:relative;
  overflow:hidden;
  overflow-x:clip;
  text-align:center;
}
/* Soft, blurred, low-opacity — atmosphere, not a rainbow banner. Same
   posture as the hero's existing ember-specks/charcoal-overlay: a hint of
   color behind the copy, never competing with it. */
.program-hero::before{
  content:'';
  position:absolute;
  top:-30%; left:50%;
  /* Never wider than the section itself. A vw value above 100 is the one
     way a decorative element can push the layout viewport wider than the
     screen and make a phone zoom the whole site out — the exact failure
     this project hit once already with an over-wide proof strip. */
  width:min(900px, 100%);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  background:var(--gradient-instagram);
  filter:blur(90px);
  opacity:0.22;
  pointer-events:none;
  z-index:0;
}
.program-hero-inner{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
}
.program-hero .eyebrow{display:block; margin-bottom:var(--space-4);}
.program-hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.program-hero .program-sub{
  margin-top:var(--space-5);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--text-on-dark-75);
  max-width:56ch;
  margin-inline:auto;
}
/* Stacked claim list in the hero column, replacing the single-line
   .proof-strip. Each row is icon + label; the list is centred as a block but
   the rows themselves are left-aligned to each other, so the icons form one
   column instead of ragging in and out with the text length. */
.program-points{
  list-style:none;
  margin:var(--space-8) auto 0;
  padding:0;
  width:fit-content;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  text-align:left;
}
.program-points li{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  font-size:clamp(0.82rem, 2.6vw, 0.95rem);
  color:var(--text-on-dark-70);
  /* min-width:0 so a long label wraps inside the row rather than widening
     the flex line past the hero column. */
  min-width:0;
}
.program-points li strong{color:var(--color-text); font-weight:600;}
.program-point-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:var(--radius-full);
  border:1px solid var(--accent-alpha-40);
  background:var(--accent-alpha-12);
  color:var(--color-accent);
}
.program-point-icon svg{width:17px; height:17px;}
.program-hero .btn{margin-top:var(--space-8);}
.program-cta-note{
  margin-top:var(--space-3);
  font-size:0.82rem;
  color:var(--text-on-dark-55);
}

/* Gradient text — one accent word per hero, not a whole sentence, same
   restraint as the ember .accent spans elsewhere on the site. */
.gradient-text{
  background:var(--gradient-instagram);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Section headings (non-hero) ---------- */
.program-section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto var(--space-12);
}
.program-section-head .eyebrow{display:block; margin-bottom:var(--space-4);}
.program-section-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  text-wrap:balance;
}
.program-section-head p{
  margin-top:var(--space-4);
  font-size:0.98rem;
  line-height:1.65;
  color:var(--text-on-dark-60);
}

/* ---------- Benefits grid ----------
   Reuses .icon-list's structural rules (list, badge, li layout) and only
   changes the axis: 1 column on phones, 2 from 701px. (0,2,0) so it beats
   the unscoped .icon-list{display:flex} regardless of file order — same
   fix the ritual-benefits row on index.html needed. */
.icon-list.program-benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  max-width:1000px;
  margin:0 auto;
}
@media(min-width:701px){
  .icon-list.program-benefits{grid-template-columns:repeat(2,1fr); gap:var(--space-10) var(--space-12);}
}
/* .icon-list's own type is tuned for the narrow accordion column; at this
   width it read small, so title/body take .ritual-step's scale instead —
   same fix applied to .why-list on index.html. */
.icon-list.program-benefits .icon-list-title{
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:var(--space-2);
}
.icon-list.program-benefits li > span:last-child{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-on-dark-60);
}
/* Solid ember discs, not the accordion's hairline outline — this row
   carries more visual weight than a panel list. */
.icon-list.program-benefits .icon-list-badge{
  width:var(--space-12); height:var(--space-12);
  background:var(--color-accent);
  border-color:transparent;
}
.icon-list.program-benefits .icon-list-badge svg{
  width:var(--space-6); height:var(--space-6);
  stroke:var(--color-near-black-500);
  stroke-width:2;
}

/* ---------- Platform grid (creators.html only) ---------- */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-8);
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
@media(min-width:701px){ .platform-grid{grid-template-columns:repeat(4,1fr);} }
.platform-card{display:flex; flex-direction:column; align-items:center; gap:var(--space-3);}
.platform-badge{
  display:grid;
  place-items:center;
  width:64px; height:64px;
  border-radius:var(--radius-2xl);
  color:var(--color-white);
}
.platform-badge svg{width:34px; height:34px;}
.platform-badge--instagram{background:var(--gradient-instagram);}
.platform-badge--tiktok{background:var(--color-tiktok-black);}
.platform-badge--youtube{background:var(--color-youtube-red);}
/* Pure black on a near-black (#151515) page background needs its own edge
   to read as a badge instead of a hole in the layout. */
.platform-badge--x{background:var(--color-x-black); border:1px solid var(--border-on-dark-25);}
.platform-card-name{font-family:var(--font-display); font-weight:700; font-size:0.98rem;}
.platform-card-note{font-size:0.82rem; color:var(--text-on-dark-55);}

/* ---------- Tag cloud (creators.html "no niche" section) ---------- */
.creator-tag-cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3);
  max-width:760px;
  margin:var(--space-8) auto 0;
}
.creator-tag{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0.02em;
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full);
  border:1px solid var(--accent-alpha-40);
  background:var(--accent-alpha-12);
  color:var(--text-on-dark-85);
}

/* ---------- Final CTA band ---------- */
.program-final-cta{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.program-final-cta .eyebrow{display:block; margin-bottom:var(--space-4);}
.program-final-cta h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  text-wrap:balance;
}
.program-final-cta p{
  margin-top:var(--space-4);
  font-size:1rem;
  color:var(--text-on-dark-70);
}
.program-final-cta .btn{margin-top:var(--space-8);}

@media(prefers-reduced-motion:reduce){
  .program-hero::before{display:none;}
}

/* ============================================================
   INSTAGRAM ACCENTS
   Scoped under .program-page (on <main>) so none of this can reach
   a page that hasn't opted in, even if this file is ever linked
   somewhere else — several of these hook shared component classes
   (.section--band, .step-num) that index.html also uses.
   ============================================================ */

/* A gradient hairline across the top of each band, instead of the flat
   8%-white rule those sections normally carry. */
.program-page .section--band{position:relative; border-top-color:transparent;}
.program-page .section--band::before{
  content:'';
  position:absolute;
  top:-1px; left:0; right:0;
  height:2px;
  background:var(--gradient-instagram);
  opacity:0.8;
}

/* Short rule under the hero headline — the gradient reads as a deliberate
   mark rather than decoration when it sits on the type's axis. */
.program-hero h1::after{
  content:'';
  display:block;
  width:96px; height:3px;
  margin:var(--space-5) auto 0;
  border-radius:var(--radius-full);
  background:var(--gradient-instagram);
}

/* Step numerals in the gradient rather than the ember outline. The base
   rule strokes them in ember with a transparent fill, so both of those
   have to be unwound before background-clip can take. */
.program-page .ritual-step .step-num{
  -webkit-text-stroke:0;
  background:var(--gradient-instagram);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Pills stay on the brand's own ember, not the Instagram gradient — the
   gradient is the page's accent, and spending it on ten small pills at once
   diluted it and pulled the section away from the site's palette. Ember
   border, ember-tinted fill: the same language as every other chip on the
   site. */
.program-page .creator-tag{
  border:1px solid var(--accent-alpha-40);
  background:var(--accent-alpha-12);
  color:var(--text-on-dark-85);
  transition:border-color var(--dur-micro) ease, background var(--dur-micro) ease;
}
@media (hover:hover){
  .program-page .creator-tag:hover{
    border-color:var(--accent-alpha-70);
    background:var(--accent-alpha-22);
  }
}

/* The story ring itself, around each platform badge. Masked so only the
   ring paints and the badge's own brand fill stays untouched — a solid
   gradient disc behind would just tint the logo. */
.program-page .platform-badge{position:relative;}
.program-page .platform-badge::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:calc(var(--radius-2xl) + 6px);
  padding:2px;
  background:var(--gradient-instagram);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}