/* ==========================================================================
   Outta City Music — stylesheet
   Dark & cinematic, on the client's brand palette: ink #211D1E, paper
   #FFF8F3, red #EF4130 (brand identity sheet, 28 Aug).
   Every colour IS a token in :root — change it there, not here. Nothing in
   this file below :root carries a raw colour value; if you add one, add a
   token instead, or the next palette change will leave ghosts behind.

   The amber build that preceded this sheet is kept below the :root block,
   commented out. Swapping the two blocks reverts the whole site.
   ========================================================================== */
:root{
  /* --- ground: brand ink #211D1E ---------------------------------------- */
  --bg:#211D1E;
  --surface:#2B2627;
  --surface-2:#363031;
  --footer-bg:#1A1617;
  --bg-rgb:33 29 30;

  /* --- hairlines ------------------------------------------------------- */
  --line:#443D3E;
  --line-soft:#2A2526;
  --line-strong:#514749;   /* ghost-button border */
  --line-hover:#5E5456;    /* tier card hover     */

  /* --- type: brand paper #FFF8F3, five steps, all AA on the ink -------- */
  --text:#FFF8F3;
  --text-2:#E5DBD6;
  --text-3:#CABFBA;
  --muted:#AEA29D;
  --dim:#918681;
  --text-rgb:255 248 243;

  /* --- accent: brand red ------------------------------------------------
     Two tokens, and the split is deliberate. The brand red is a CMYK spec
     (0/90/90/0) converted to hex, so it is tuned for ink on paper, not for
     small type on a dark screen: #EF4130 measures 4.34:1 on the ink, just
     under the 4.5 the brief requires. So the exact brand red does the jobs
     where it is not small text — fills, marks, rules, the big numerals —
     and --accent-text is the same hue lifted far enough to carry a caption.
     Do not collapse these back into one. */
  --accent:#EF4130;        /* brand red, exact — fills, marks, large numerals */
  --accent-text:#F2604F;   /* small text on the ink: 5.21:1 */
  --accent-hi:#F2604F;     /* hover */
  --accent-deep:#C92E1B;   /* quiet borders */
  --on-accent:#151213;     /* type ON the red: 4.85:1 */

  /* --- image placeholders ---------------------------------------------- */
  /* Tinted charcoal, not rainbow. Raise the saturations to bring the
     per-release hues back. These vanish as real photography lands.       */
  --ph-sat-a:7%;   --ph-lum-a:20%;
  --ph-sat-b:8%;   --ph-lum-b:12%;
  --ph-base-a:#2A2526;
  --ph-base-b:#211D1E;

  /* --- type: the brand faces, with the stand-ins behind them -----------
     Prohibition and Akhbar are the brand sheet's faces. Both are commercial
     and neither is a Google Font, so until licensed files are dropped into
     assets/fonts/ the browser falls through to Anton and Barlow — which is
     what the brief picked as the closest free matches, and what the site has
     been running on. Nothing breaks either way. Barlow Condensed has no brand
     equivalent: the sheet names no condensed face, so the metadata keeps it. */
  --font-display:"Prohibition","Anton",Impact,"Arial Narrow",sans-serif;
  --font-body:"Akhbar","Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-meta:"Barlow Condensed",sans-serif;

  --maxw:1220px;
  --pad:clamp(1.15rem,4vw,2.75rem);
  --grain:none;
}

/* The amber build that preceded the brand sheet — warm charcoal ground,
   sodium amber accent. Swap this block in wholesale to go back to it.
   Note --accent-text did not exist then; amber cleared 4.5 on its own.
:root{
  --bg:#191512; --surface:#221D18; --surface-2:#2B241D; --footer-bg:#131010;
  --bg-rgb:25 21 18;
  --line:#3A322A; --line-soft:#241F1A; --line-strong:#463D33; --line-hover:#544A3E;
  --text:#E8E2D4; --text-2:#CFC8B8; --text-3:#B4AD9C; --muted:#A29B8A; --dim:#8A8474;
  --text-rgb:232 226 212;
  --accent:#FF9E1B; --accent-text:#FF9E1B; --accent-hi:#FFAF44;
  --accent-deep:#C4700C; --on-accent:#191512;
  --ph-base-a:#221E19; --ph-base-b:#191512;
}
*/

/* Drop licensed files into assets/fonts/ and these take over automatically.
   See assets/fonts/README.txt. While the files are absent the browser skips
   these faces silently and uses the fallbacks in the stacks above; you will
   see 404s for them in the console until the files exist. */
@font-face{
  font-family:"Prohibition";
  src:url("../fonts/prohibition-regular.woff2") format("woff2"),
      url("../fonts/prohibition-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Akhbar";
  src:url("../fonts/akhbar-light.woff2") format("woff2"),
      url("../fonts/akhbar-light.woff") format("woff");
  font-weight:300 400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Akhbar";
  src:url("../fonts/akhbar-bold.woff2") format("woff2"),
      url("../fonts/akhbar-bold.woff") format("woff");
  font-weight:600 700;font-style:normal;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- type roles ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:.86;
  text-transform:uppercase;
}
.d-xl{font-size:clamp(3.4rem,12vw,9.5rem);}
.d-l{font-size:clamp(2.4rem,6vw,4.9rem);}
.d-m{font-size:clamp(1.75rem,3.6vw,2.9rem);}
.d-s{font-size:clamp(1.12rem,1.9vw,1.4rem);}

.eyebrow{
  font-family:var(--font-meta);
  font-weight:600;
  font-size:.71rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-text);
  display:block;
}
.eyebrow.mute{color:var(--dim);}

.slate{
  font-family:var(--font-meta);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.62;color:var(--text-2);max-width:58ch;}
.body-copy{color:var(--text-3);line-height:1.75;max-width:60ch;}
.muted{color:var(--muted);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(4.5rem,10vw,8.5rem);border-top:1px solid var(--line-soft);}
.section.flush{border-top:none;}
.sec-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2.25rem,5vw,3.6rem);}
.sec-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;}
.gap-s{gap:.5rem;}.gap-m{gap:1rem;}.gap-l{gap:1.75rem;}

/* ---------- media placeholders ---------- */
.media{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 22% 12%, hsl(var(--h,205) var(--ph-sat-a) var(--ph-lum-a)) 0%, transparent 62%),
    radial-gradient(95% 105% at 84% 92%, hsl(calc(var(--h,205) + 34) var(--ph-sat-b) var(--ph-lum-b)) 0%, transparent 58%),
    linear-gradient(158deg,var(--ph-base-a) 0%,var(--ph-base-b) 100%);
  isolation:isolate;
}
.media::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.55;mix-blend-mode:overlay;pointer-events:none;
}
.media.warm{--h:28;}
.media > .ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity .55s ease;
}
.media.has-img > .ph{opacity:1;}
.media.has-img .tbc{display:none;}
.mark{display:flex;align-items:center;}
.mark img{
  width:30px;height:30px;object-fit:contain;
  /* No invert. The mark is light artwork on transparent, which is what a dark
     site needs — inverting it would flip it to a dark star on a dark ground.
     If a dark-artwork logo is ever supplied, invert it in the file, not here. */
}
.mark svg{display:none;}
.mark.fb svg{display:block;}
.mark.fb img{display:none;}
.tagline{font-family:var(--font-meta);font-weight:600;font-size:.86rem;
  letter-spacing:.06em;color:var(--accent-text);font-style:normal;}
.strapline{
  display:flex;justify-content:center;gap:1.75rem;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--line-soft);
  padding:.5rem var(--pad);
}
.strapline span{font-family:var(--font-meta);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.strapline span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--accent);display:inline-block;vertical-align:middle;margin-right:.6rem;}
.ico{width:17px;height:17px;flex:none;}
.quickbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.5rem;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:rgb(var(--bg-rgb) / .95);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.quickbar .btn{flex:1;padding-inline:.75rem;}
@media (max-width:900px){ .quickbar{display:flex;} body{padding-bottom:4.6rem;} }
.reach{
  display:flex;flex-direction:column;gap:1rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:1.6rem 1.5rem;
}
.reach .num{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);
  line-height:1;font-variant-numeric:tabular-nums;}
.orsplit{display:flex;align-items:center;gap:1rem;color:var(--dim);}
.orsplit::before,.orsplit::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.orsplit span{font-family:var(--font-meta);font-weight:600;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;}
.tbc{
  position:absolute;left:.7rem;bottom:.6rem;z-index:2;
  font-family:var(--font-meta);font-weight:600;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(var(--text-rgb) / .34);
  border:1px solid rgb(var(--text-rgb) / .14);
  padding:.15rem .45rem;border-radius:2px;
  background:rgb(var(--bg-rgb) / .45);backdrop-filter:blur(3px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-meta);font-weight:700;
  font-size:.95rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.82rem 1.65rem;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hi);}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text);}
.btn-sm{padding:.6rem 1.15rem;font-size:.82rem;}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;}

/* ---------- nav ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgb(var(--bg-rgb) / .86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:.75rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;}
.brand svg{width:30px;height:30px;flex:none;}
.brand-name{
  font-family:var(--font-display);font-size:1.02rem;letter-spacing:.02em;
  text-transform:uppercase;line-height:1;
}
.brand-sub{
  font-family:var(--font-meta);font-weight:600;
  font-size:.6rem;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;
}
.nav-links{display:flex;gap:1.4rem;align-items:center;}
.nav-links .btn{display:none;}
.nav-links a{
  font-family:var(--font-meta);font-weight:600;
  font-size:.86rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:.3rem 0;position:relative;transition:color .16s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:2px;background:var(--accent);
}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:.45rem .6rem;cursor:pointer;}
.burger span{display:block;width:17px;height:2px;background:var(--text);margin:3px 0;}

@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1.25rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.75rem 0;border-bottom:1px solid var(--line-soft);font-size:1rem;}
  .nav-links a.active::after{display:none;}
  .nav .btn{display:none;}
  .nav-links .btn{display:inline-flex;margin-top:.9rem;}
  .burger{display:block;}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;--h:212;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  /* Two layers. The vertical one is the cinematic wash; the diagonal one keeps
     the lower-left text column dark whatever the advert looks like. Without it
     a light artwork — like a pale grey cover — swallows the catalogue number
     and the artist credit. The upper right stays clear, which is where
     assets/img/README.txt tells you to put the focal point. */
  background:
    linear-gradient(100deg,rgb(var(--bg-rgb) / .82) 0%,rgb(var(--bg-rgb) / .45) 30%,rgb(var(--bg-rgb) / 0) 58%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .55) 0%,rgb(var(--bg-rgb) / .15) 38%,rgb(var(--bg-rgb) / .92) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(2.5rem,6vw,4.5rem);}
.hero .d-xl{margin:.6rem 0 .1rem;}
/* The fixed Message/Call bar covers the bottom ~73px of the viewport, and the
   hero is taller than the gap left between it and the header — so without this
   the hero's primary CTA sits underneath the bar, invisible and unclickable on
   the device class this audience actually uses. This has to sit AFTER the
   .hero-inner padding shorthand above: same specificity, so source order wins,
   and an identical rule placed earlier in the file silently does nothing. */
@media (max-width:900px){
  .hero-inner{padding-bottom:calc(clamp(2.5rem,6vw,4.5rem) + 5.7rem);}
}
.hero-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.tag-live{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-meta);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);
  padding:.2rem .55rem;border-radius:2px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--on-accent);animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- release grid ---------- */
.grid{display:grid;gap:clamp(1.15rem,2.6vw,2rem);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){.g-4{grid-template-columns:repeat(2,1fr);}.g-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.g-4,.g-3,.g-2{grid-template-columns:1fr;}}

.release{display:flex;flex-direction:column;gap:.7rem;cursor:pointer;}
.release .media{aspect-ratio:1;border-radius:2px;}
.release .art-title{
  position:absolute;inset:auto .85rem .85rem .85rem;z-index:2;
  font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(1.05rem,2.4vw,1.5rem);color:rgb(var(--text-rgb) / .94);
}
.release .art-artist{
  position:absolute;inset:auto .8rem .75rem .8rem;z-index:2;
  font-family:var(--font-meta);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--text-rgb) / .6);
}
.release .cat{
  position:absolute;top:.7rem;left:.8rem;z-index:2;
  /* release artwork can be any brightness — a pale cover swallows a bare
     catalogue number, so give it its own ground rather than hoping */
  background:rgb(var(--bg-rgb) / .55);backdrop-filter:blur(3px);
  padding:.1rem .4rem;border-radius:2px;
}
/* The title overlay exists for the designed placeholder, which has no artwork
   to name itself. Real sleeves almost always carry their own typography, and
   the card repeats the title underneath anyway — so once an image loads this
   is the third copy, set over the second. Drop it. */
.release .media.has-img .art-title{display:none;}
.release-info{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;}
.release-name{font-weight:600;font-size:1rem;line-height:1.3;}
.listen{
  font-family:var(--font-meta);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap;
}
.release .media{transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.release:hover .media{transform:scale(1.015);}

/* horizontal scroll strip on mobile */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.15rem,2.6vw,2rem);}
@media (max-width:780px){
  .strip{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.75rem;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);
  }
  .strip > *{flex:0 0 62%;scroll-snap-align:start;}
}

/* ---------- artist cards ---------- */
.artist{display:flex;flex-direction:column;gap:.65rem;cursor:pointer;}
.artist .media{aspect-ratio:3/4;border-radius:2px;}
.artist .media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 45%,rgb(var(--bg-rgb) / .8) 100%);
}
.artist-cap{
  position:absolute;left:.85rem;right:.85rem;bottom:.85rem;z-index:2;
  display:flex;flex-direction:column;gap:.2rem;
}
.artist-name{
  font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(1rem,1.9vw,1.28rem);
}
.artist-role{
  font-family:var(--font-meta);font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
}
.artist:hover .media{filter:brightness(1.12);}
.artist .media{transition:filter .3s ease;}

/* ---------- proof bar ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
@media (max-width:900px){.band-copy{max-width:100%;}}
@media (max-width:760px){.proof{grid-template-columns:repeat(2,1fr);gap:2rem 1.25rem;}}
.stat-n{
  font-family:var(--font-display);font-size:clamp(2.4rem,5.5vw,3.6rem);
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
}
.stat-l{font-family:var(--font-meta);font-weight:600;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;}

/* ---------- studio band ---------- */
.band{position:relative;--h:200;min-height:clamp(340px,52vw,540px);display:flex;align-items:center;}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .94) 0%,rgb(var(--bg-rgb) / .62) 55%,rgb(var(--bg-rgb) / .3) 100%);}
.band-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--pad);width:100%;}
.band-copy{max-width:min(52ch,46vw);display:flex;flex-direction:column;gap:1.1rem;}
/* Artist bands are fed the same 3:4 portrait the roster card uses, and the
   band is roughly 2.7:1 — so a centred crop keeps the middle horizontal strip
   and cuts the head off. Faces sit in the upper third of a portrait, so pull
   the crop up. Not applied to the studio band, where centred is right. */
.band.portrait > .ph{object-position:50% 24%;}

/* The studio band inverts — beige ground, charcoal type, charcoal accent.
   The room is the warm, material part of the brand, so this is the one place
   the site goes light and it is deliberate rather than decorative. Sage
   cannot carry type on beige (1.57:1, against a 4.5 minimum), so charcoal
   takes the accent role here and sage keeps it everywhere else. Overriding
   tokens on the section is enough — everything below :root reads them. */
.band.light{
  /* colour must be set here, not just as a token: descendants inherit the
     RESOLVED colour from body, so overriding --text alone leaves any element
     without its own colour rule (the h2) sitting in beige-on-beige. */
  color:var(--text);
  --bg-rgb:232 226 212;
  --text:#1B1712;
  --text-2:#332C24;
  --text-3:#463D33;
  --muted:#574E43;
  --dim:#655B4E;
  --text-rgb:27 23 18;
  --accent:#2A231C;
  --accent-hi:#3E352B;
  --accent-deep:#8A7F6A;
  --on-accent:#EDE7DA;
  --line-strong:#A99E86;
  --line-hover:#8F8570;
  --ph-sat-a:14%; --ph-lum-a:78%;
  --ph-sat-b:16%; --ph-lum-b:88%;
  --ph-base-a:#E8E2D4;
  --ph-base-b:#DDD5C4;
}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;}
@media (max-width:900px){.tiers{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.tiers{grid-template-columns:1fr;}}
.tier{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-color .2s ease,background .2s ease;
}
.tier:hover{border-color:var(--line-hover);}
.tier.featured{border-color:var(--accent);background:var(--surface-2);}
.tier-flag{
  font-family:var(--font-meta);font-weight:700;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);
  padding:.15rem .5rem;border-radius:2px;align-self:flex-start;
}
.tier-flag.ghost{background:transparent;color:var(--accent-text);border:1px solid var(--accent-deep);}
.tier-price{font-family:var(--font-display);font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums;}
.tier-price small{font-family:var(--font-meta);font-size:.85rem;letter-spacing:.14em;color:var(--muted);display:block;margin-top:.3rem;font-weight:600;text-transform:uppercase;}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.tier li{position:relative;padding-left:1.1rem;font-size:.93rem;color:var(--text-3);line-height:1.45;}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--accent);}
.tier .btn{width:100%;}

/* ---------- testimonials ---------- */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;}
.quote p{font-size:1.02rem;line-height:1.6;color:var(--text-2);}
.quote-by{display:flex;align-items:center;gap:.75rem;}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;--h:190;}

/* ---------- email ---------- */
.signup{display:flex;gap:.6rem;flex-wrap:wrap;max-width:480px;}
.signup input{
  flex:1;min-width:200px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);padding:.82rem 1rem;border-radius:2px;font-family:inherit;font-size:.95rem;
}
.signup input::placeholder{color:var(--dim);}
.signup input:focus{border-color:var(--accent);outline:none;}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-family:var(--font-meta);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:.75rem .9rem;border-radius:2px;font-family:inherit;font-size:.95rem;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none;}
.field textarea{min-height:130px;resize:vertical;}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--footer-bg);padding-block:clamp(2.5rem,5vw,3.75rem);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-h{font-family:var(--font-meta);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin-bottom:.9rem;}
.foot-list{display:flex;flex-direction:column;gap:.5rem;}
.foot-list a,.foot-list span{color:var(--muted);font-size:.93rem;transition:color .16s ease;}
.foot-list a:hover{color:var(--accent-text);}
.foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line-soft);}
.rule-accent{width:44px;height:3px;background:var(--accent);}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.video-row{display:flex;flex-direction:column;gap:.75rem;}
.video-row .media{transition:filter .3s ease;}
.video-row:hover .media{filter:brightness(1.1);}
.video-row .media{aspect-ratio:16/9;border-radius:2px;display:flex;align-items:center;justify-content:center;}
.play{width:56px;height:56px;border-radius:50%;border:1.5px solid rgb(var(--text-rgb) / .55);display:flex;align-items:center;justify-content:center;z-index:2;background:rgb(var(--bg-rgb) / .35);}
.play::after{content:"";border-left:13px solid rgb(var(--text-rgb) / .9);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;}
.gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem 1.5rem;}
.gear div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.93rem;}
.gear span:first-child{color:var(--muted);}
.note{border-left:2px solid var(--accent-deep);padding:.35rem 0 .35rem .9rem;color:var(--muted);font-size:.9rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}


.tbc.tr{left:auto;right:.9rem;top:.9rem;bottom:auto;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:.5rem;top:.5rem;z-index:99;background:var(--accent);color:var(--on-accent);padding:.5rem .9rem;border-radius:2px;}