/* 3star88official.app - the long-scroll reading landing. Hand-written, never regenerated.
   Deep forest green page, mint as the lead accent, gold only on money. Serif headings over a
   sans body, generous measure, and a numbered index that stays with the reader.

   How this sheet is written:
     - The gaps and insets, the line heights, the letter-spacings, the font weights and the
       shadows used more than once are named once in :root as --q-* and called by name
       everywhere else;
     - box properties are written in logical names (block-start, inline-end) so a modifier
       resets the one edge it means to;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - an animation names all eight of its parts. */

:root {
  --bg: #0c1f16;
  --bg2: #102a1e;
  --card: #143626;
  --card2: #1a4230;
  --sink: #0a1a12;
  --line: #1f4a36;
  --line2: #2d6349;
  --mint: #4ef0a8;
  --mint2: #22c884;
  --mint3: #0d4a32;
  --gold: #e8c56a;
  --gold2: #bb9634;
  --ink: #eaf5ee;
  --mid: #b9d2c5;
  --mute: #89a899;
  --dim: #6b8a7b;
  --rad: 16px;
  --bar: 60px;
  --wrap: 1180px;
  --measure: 720px;
  --sans: "Inter",-apple-system,"Segoe UI",Arial,"Noto Sans SC",sans-serif;
  --serif: "Georgia","Songti SC","Times New Roman",serif;

  /* named values used more than once */
  --q-sp1: 2px;
  --q-sp2: 3px;
  --q-sp3: 4px;
  --q-sp4: 5px;
  --q-sp5: 6px;
  --q-sp6: 7px;
  --q-sp7: 8px;
  --q-sp8: 9px;
  --q-sp9: 10px;
  --q-sp10: 11px;
  --q-sp11: 12px;
  --q-sp12: 14px;
  --q-sp13: 15px;
  --q-sp14: 16px;
  --q-sp15: 17px;
  --q-sp16: 18px;
  --q-sp17: 20px;
  --q-sp18: 22px;
  --q-sp19: 24px;
  --q-sp20: 26px;
  --q-sp21: 28px;
  --q-sp22: 30px;
  --q-sp23: 34px;
  --q-sp24: 36px;
  --q-sp25: 40px;
  --q-sp26: 46px;
  --q-sp27: 62px;
  --q-tr1: .14em;
  --q-wt1: 700;
  --q-wt2: 600;
  --q-wt3: 800;
}
*{box-sizing: border-box; margin-block: 0; margin-inline: 0; padding-block: 0; padding-inline: 0;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth;}
body{background: var(--bg); color: var(--ink); font-style: normal; font-variant: normal; font-weight: 400; font-stretch: normal; font-size: 1rem; line-height: 1.72; font-family: var(--sans); padding-block-end: var(--q-sp11);}
a{color: var(--mint); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
img{display: block; max-width: 100%; height: auto; min-width: 0;}
h1,h2,h3,h4{font-family: var(--serif); font-weight: var(--q-wt1); line-height: 1.24; letter-spacing: -.005em;}
table{border-collapse: collapse; width: 100%;}
.w{max-width: var(--wrap); margin-block: 0; margin-inline: auto; padding-block: 0; padding-inline: var(--q-sp17);}

/* ---------------------------------------------------------------- buttons */
.t8-btn{display: inline-flex; align-items: center; justify-content: center; row-gap: var(--q-sp7); column-gap: var(--q-sp7); min-height: 2.875rem; padding-block: 0; padding-inline: var(--q-sp18); border-width: 0.09375rem; border-style: solid; border-color: var(--line2); border-radius: 62.4375rem; background: transparent; color: var(--ink); font-family: var(--sans); font-weight: var(--q-wt1); font-size: 0.90625rem; cursor: pointer; transition-property: background, border-color, color; transition-duration: .15s, .15s, .15s; transition-timing-function: ease, ease, ease; transition-delay: 0s, 0s, 0s;}
.t8-btn.a{background: var(--mint); border-color: var(--mint); color: #06281a;}
.t8-btn.a:hover{background: var(--mint2); border-color: var(--mint2);}
.t8-btn.o:hover{border-color: var(--mint); color: var(--mint);}
.t8-btn.r{background: var(--gold); border-color: var(--gold); color: #2b2105;}
.t8-btn.lg{min-height: 3.375rem; font-size: 1rem; padding-block: 0; padding-inline: var(--q-sp22);}

/* ---------------------------------------------------------------- header */
.t8-head{position: sticky; inset-block-start: 0; z-index: 40; background: rgba(10,26,18,.96); border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line); backdrop-filter: blur(0.625rem);}
.t8-head .w{display: flex; align-items: center; row-gap: var(--q-sp14); column-gap: var(--q-sp14); padding-block-start: var(--q-sp11); padding-block-end: var(--q-sp11);}
.t8-logo{display: flex; align-items: center; row-gap: var(--q-sp9); column-gap: var(--q-sp9); min-width: 0;}
.t8-logo svg{width: 2rem; height: 2rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.t8-logo .wm{display: flex; flex-direction: column; line-height: 1.08; min-width: 0;}
.t8-logo .wm b{font-family: var(--serif); font-size: 1.4375rem; color: var(--gold); white-space: nowrap;}
.t8-logo .wm small{font-size: 0.5625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mint); white-space: nowrap;}
.t8-pills{display: flex; row-gap: var(--q-sp3); column-gap: var(--q-sp3); margin-inline-start: auto; min-width: 0; overflow-x: auto;}
.t8-pills a{flex-grow: 0; flex-shrink: 0; flex-basis: auto; padding-block: var(--q-sp7); padding-inline: var(--q-sp12); border-radius: 62.4375rem; font-size: 0.84375rem; font-weight: var(--q-wt2); color: var(--mid);}
.t8-pills a:hover{background: var(--card); color: var(--mint);}
.t8-lang{display: flex; row-gap: var(--q-sp1); column-gap: var(--q-sp1); flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 62.4375rem; padding-block: var(--q-sp2); padding-inline: var(--q-sp2);}
.t8-lang a{padding-block: var(--q-sp4); padding-inline: var(--q-sp9); border-radius: 62.4375rem; font-size: 0.75rem; font-weight: var(--q-wt1); color: var(--mute);}
.t8-lang a.on{background: var(--mint3); color: var(--mint);}
.t8-burger{display: none; width: 2.5rem; height: 2.5rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 0.75rem; background: transparent; color: var(--ink); font-size: 1.0625rem; cursor: pointer; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.t8-drawer{display: none; border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); padding-block-start: var(--q-sp9); padding-inline-end: var(--q-sp17); padding-block-end: var(--q-sp12); padding-inline-start: var(--q-sp17);}
.t8-open .t8-drawer{display: flex; flex-wrap: wrap; row-gap: var(--q-sp6); column-gap: var(--q-sp6);}
.t8-drawer a{padding-block: var(--q-sp7); padding-inline: var(--q-sp12); border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 62.4375rem; font-size: 0.8125rem; font-weight: var(--q-wt2); color: var(--mid);}

/* ---------------------------------------------------------------- hero */
.t8-hero{background: radial-gradient(120% 90% at 78% 0%,#16402d 0%,var(--bg) 62%); border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line);}
.t8-hero .w{display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); row-gap: var(--q-sp25); column-gap: var(--q-sp25); align-items: center; padding-block-start: var(--q-sp26); padding-block-end: var(--q-sp26);}
.t8-hero.big .w{padding-block-start: var(--q-sp27); padding-block-end: var(--q-sp27);}
.t8-hero .bd{min-width: 0;}
.t8-hero .eb{display: inline-block; padding-block: var(--q-sp4); padding-inline: var(--q-sp12); border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 62.4375rem; font-size: 0.6875rem; font-weight: var(--q-wt3); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-block-end: var(--q-sp14);}
.t8-hero h1{font-size: 2.5rem; margin-block-end: var(--q-sp14);}
.t8-hero.big h1{font-size: 2.9375rem;}
.t8-hero .lead{font-size: 1.0625rem; color: var(--mid); margin-block-end: var(--q-sp19); max-width: var(--measure);}
.t8-hero .act{display: flex; flex-wrap: wrap; row-gap: var(--q-sp10); column-gap: var(--q-sp10); margin-block-end: var(--q-sp17);}
.t8-hero .chips{display: flex; flex-wrap: wrap; row-gap: var(--q-sp8); column-gap: var(--q-sp8);}
.t8-hero .chips span{display: inline-flex; align-items: center; row-gap: var(--q-sp6); column-gap: var(--q-sp6); min-width: 0; padding-block: var(--q-sp6); padding-inline: var(--q-sp12); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 62.4375rem; font-size: 0.78125rem; color: var(--mid);}
.t8-hero .chips i{font-style: normal; color: var(--mint);}
.t8-hero>.w>img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad); border-width: 0.0625rem; border-style: solid; border-color: var(--line2);}

/* ---------------------------------------------------------------- sections */
.t8-sec{padding-block: var(--q-sp25); padding-inline: 0;}
.t8-sec.pad{padding-block: 3.25rem; padding-inline: 0;}
.t8-sec .sh{max-width: var(--measure); margin-block-end: var(--q-sp20);}
.t8-sec .sh h2{font-size: 1.75rem; margin-block-end: var(--q-sp8);}
.t8-sec .sh p{color: var(--mute); font-size: 0.96875rem;}
.note{font-size: 0.8125rem; color: var(--dim); margin-block-start: var(--q-sp11);}

/* offer strip */
.t8-offers{background: var(--sink); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line); padding-block: var(--q-sp23); padding-inline: 0;}
.t8-offers .hd{max-width: var(--measure); margin-block-end: var(--q-sp18);}
.t8-offers .hd h2{font-size: 1.5625rem;}
.t8-offers .gr{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--q-sp12); column-gap: var(--q-sp12);}
.t8-offers .of{padding-block: var(--q-sp16); padding-inline: var(--q-sp16); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-inline-start-width: 0.1875rem; border-inline-start-style: solid; border-inline-start-color: var(--gold); border-radius: var(--rad); min-width: 0;}
.t8-offers .of b{display: block; font-family: var(--serif); font-size: 1.875rem; color: var(--gold); line-height: 1.1;}
.t8-offers .of em{display: block; font-style: normal; font-size: 0.875rem; color: var(--ink); margin-block-start: var(--q-sp5); margin-inline-end: 0; margin-block-end: var(--q-sp4); margin-inline-start: 0;}
.t8-offers .of small{display: block; font-size: 0.78125rem; color: var(--mute);}

/* entry modal */
.t8-pop[hidden]{display: none;}
.t8-pop{position: fixed; inset-block: 0; inset-inline: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding-block: var(--q-sp14); padding-inline: var(--q-sp14); background: rgba(5,16,11,.84);}
.t8-pop .bx{position: relative; width: min(26.875rem,100%); max-height: 92vh; overflow-y: auto; background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 1.25rem;}
.t8-pop .bx>img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1.25rem 1.25rem 0 0;}
.t8-pop .x{position: absolute; inset-block-start: 0.625rem; inset-inline-end: 0.625rem; width: 2rem; height: 2rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 50%; background: rgba(5,16,11,.8); color: var(--ink); font-size: 1.0625rem; cursor: pointer;}
.t8-pop .bd{padding-block: var(--q-sp17); padding-inline: var(--q-sp17);}
.t8-pop .bd b{display: block; font-family: var(--serif); font-size: 1.4375rem; color: var(--gold); margin-block-end: var(--q-sp8);}
.t8-pop .bd p{font-size: 0.90625rem; color: var(--mid); margin-block-end: var(--q-sp12);}
.t8-pop ul{list-style-type: none; list-style-position: outside; list-style-image: none; margin-block-end: var(--q-sp14);}
.t8-pop li{position: relative; padding-inline-start: var(--q-sp17); font-size: 0.84375rem; color: var(--mid); margin-block-end: var(--q-sp6);}
.t8-pop li::before{content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--mint);}
/* `.t8-pop .bd b` is (0,2,1) and this was (0,1,2), so the headline rule won and every
   list number rendered as a 23px gold serif BLOCK, about 70px per row. A rule that has to
   switch another one off must out-specify it. */
.t8-pop .bd ul li b{display: inline; font-family: var(--sans); font-size: 0.875rem; font-weight: var(--q-wt1); color: var(--gold); margin-inline-end: var(--q-sp5);}
.t8-pop .later{display: block; width: 100%; margin-block-start: var(--q-sp9); padding-block: var(--q-sp8); padding-inline: var(--q-sp8); border-width: 0; border-style: none; border-color: currentcolor; background: transparent; color: var(--mute); font-size: 0.8125rem; cursor: pointer;}

/* A modal whose CTA is below the fold converts nothing. At 375x667 the 4:3 picture alone ate
   257px, so the button sat 137px past the bottom edge and was reachable only by scrolling
   INSIDE the card. Budget the phone layout so the button is on screen. */
@media(max-width:760px){
  .t8-pop{padding-block: var(--q-sp11); padding-inline: var(--q-sp11); align-items: flex-start;}
  .t8-pop .bx{max-height: none; margin-block-start: var(--q-sp9);}
  .t8-pop .bx>img{aspect-ratio: 16/9;}
  .t8-pop .bd{padding-block-start: var(--q-sp12); padding-inline-end: var(--q-sp14); padding-block-end: var(--q-sp14); padding-inline-start: var(--q-sp14);}
  .t8-pop .bd b{font-size: 1.1875rem; line-height: 1.2; margin-block-end: var(--q-sp6);}
  .t8-pop .bd p{font-size: 0.84375rem; line-height: 1.5; margin-block-end: var(--q-sp9);}
  .t8-pop ul{margin-block-end: var(--q-sp11);}
  .t8-pop li{margin-block-end: var(--q-sp4); font-size: 0.8125rem;}
  .t8-pop .t8-btn.lg{min-height: 3rem; font-size: 0.9375rem;}
  .t8-pop .later{margin-block-start: var(--q-sp3); padding-block: var(--q-sp6); padding-inline: var(--q-sp6);}
}
@media(max-width:400px){
  /* the two strongest offers stay; the other two are on the promotions page anyway */
  .t8-pop .bd ul li:nth-child(n+3){display: none;}
}

/* stat strip */
.t8-stats{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--q-sp12); column-gap: var(--q-sp12); margin-block: var(--q-sp22); margin-inline: 0;}
.t8-stats>div{padding-block: var(--q-sp17); padding-inline: var(--q-sp17); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad); text-align: center; min-width: 0;}
.t8-stats b{display: block; font-family: var(--serif); font-size: 1.875rem; color: var(--mint);}
.t8-stats span{display: block; font-size: 0.78125rem; color: var(--mute); margin-block-start: var(--q-sp4);}

/* the numbered index - the signature of this shell */
.t8-index{margin-block: var(--q-sp22); margin-inline: 0; padding-block: var(--q-sp17); padding-inline: var(--q-sp17); background: var(--sink); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad);}
.t8-index>b{display: block; font-family: var(--sans); font-size: 0.71875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mint); margin-block-end: var(--q-sp12);}
.t8-index>div{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--q-sp8); column-gap: var(--q-sp17);}
.t8-index a{display: flex; align-items: baseline; row-gap: var(--q-sp9); column-gap: var(--q-sp9); font-size: 0.875rem; color: var(--mid); min-width: 0;}
.t8-index a:hover{color: var(--mint);}
.t8-index a.on{color: var(--mint);}
.t8-index em{flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-style: normal; font-family: var(--serif); font-size: 0.8125rem; color: var(--gold2); width: 1.25rem;}

/* category cards */
.t8-cats{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--q-sp16); column-gap: var(--q-sp16);}
.t8-cats .cc{display: block; background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad); overflow-x: hidden; overflow-y: hidden; min-width: 0;}
.t8-cats .cc:hover{border-color: var(--mint2);}
.t8-cats .cc img{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.t8-cats .bd{padding-block: var(--q-sp15); padding-inline: var(--q-sp15);}
.t8-cats .bd b{display: block; font-family: var(--serif); font-size: 1.1875rem; margin-block-end: var(--q-sp6);}
.t8-cats .bd p{font-size: 0.875rem; color: var(--mute); line-height: 1.6;}

/* studio chips */
.t8-studios{display: flex; flex-wrap: wrap; row-gap: var(--q-sp10); column-gap: var(--q-sp10);}
.t8-studios .st{display: flex; align-items: center; row-gap: var(--q-sp9); column-gap: var(--q-sp9); min-width: 0; padding-block: var(--q-sp10); padding-inline: var(--q-sp14); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 62.4375rem;}
.t8-studios .st img{max-height: 1.375rem; width: auto; min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto;}
.t8-studios .st em{font-style: normal; font-size: 0.8125rem; color: var(--mid); white-space: nowrap;}

/* alternating splits */
.sp{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--q-sp24); column-gap: var(--q-sp24); align-items: center; padding-block: var(--q-sp23); padding-inline: 0; border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line);}
.sp:last-child{border-block-end-width: 0; border-block-end-style: none; border-block-end-color: currentcolor;}
.sp img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad); border-width: 0.0625rem; border-style: solid; border-color: var(--line);}
.sp.alt img{order: 2;}
.sp .bd h3{font-size: 1.5rem; margin-block-end: var(--q-sp11);}
.sp .bd p{color: var(--mid); font-size: 0.96875rem;}

/* timing rail */
.t8-rail{max-width: var(--measure);}
.t8-rail .rw{position: relative; display: grid; grid-template-columns: 1.375rem minmax(0,1fr); row-gap: var(--q-sp16); column-gap: var(--q-sp16); padding-block-start: 0; padding-inline-end: 0; padding-block-end: var(--q-sp20); padding-inline-start: 0;}
.t8-rail .rw:last-child{padding-block-end: 0;}
.t8-rail .rw::before{content: ""; position: absolute; inset-inline-start: 0.625rem; inset-block-start: 1.25rem; inset-block-end: 0; width: 0.0625rem; background: var(--line2);}
.t8-rail .rw:last-child::before{display: none;}
.t8-rail .dot{position: relative; width: 1.375rem; height: 1.375rem; border-width: 0.125rem; border-style: solid; border-color: var(--mint); border-radius: 50%;}
.t8-rail .dot::after{content: ""; position: absolute; inset-block: 0.3125rem; inset-inline: 0.3125rem; border-radius: 50%; background: var(--mint);}
.t8-rail .bd{min-width: 0;}
.t8-rail .bd b{font-size: 0.96875rem;}
.t8-rail .bd em{display: inline-block; margin-inline-start: var(--q-sp8); padding-block: var(--q-sp1); padding-inline: var(--q-sp9); border-radius: 62.4375rem; background: var(--mint3); color: var(--mint); font-style: normal; font-size: 0.71875rem; font-weight: var(--q-wt1);}
.t8-rail .bd p{font-size: 0.875rem; color: var(--mute); margin-block-start: var(--q-sp4);}

/* member cards */
.t8-members{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--q-sp14); column-gap: var(--q-sp14);}
.t8-members .mb{padding-block: var(--q-sp17); padding-inline: var(--q-sp17); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad); min-width: 0;}
.t8-members .hd{display: grid; grid-template-columns: 2.5rem minmax(0,1fr); row-gap: var(--q-sp11); column-gap: var(--q-sp11); align-items: center; margin-block-end: var(--q-sp10);}
.t8-members .av{display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mint3); font-size: 1.25rem;}
.t8-members .hd b{display: block; font-family: var(--sans); font-size: 0.90625rem;}
.t8-members .hd small{display: block; font-size: 0.75rem; color: var(--dim);}
.t8-members .rt{color: var(--gold); font-size: 0.78125rem; letter-spacing: var(--q-tr1); margin-block-end: var(--q-sp8);}
.t8-members .mb p{font-size: 0.875rem; color: var(--mute); line-height: 1.65;}

/* ---------------------------------------------------------------- prose pages */
.t8-prose{max-width: var(--measure); margin-block: 0; margin-inline: auto; padding-block-start: var(--q-sp22); padding-inline-end: var(--q-sp17); padding-block-end: var(--q-sp25); padding-inline-start: var(--q-sp17);}
.t8-prose h1{font-size: 2.25rem; margin-block-end: var(--q-sp12);}
.t8-prose h2{font-size: 1.5rem; margin-block-start: var(--q-sp23); margin-inline-end: 0; margin-block-end: var(--q-sp10); margin-inline-start: 0; color: var(--gold);}
.t8-prose p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp13); margin-inline-start: 0; color: var(--mid);}
.t8-prose .lead{font-size: 1.09375rem; color: var(--ink);}
.t8-prose a{border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: rgba(78,240,168,.32);}
.t8-prose ul{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp13); margin-inline-start: var(--q-sp17); color: var(--mid);}
.t8-prose .act{display: flex; flex-wrap: wrap; row-gap: var(--q-sp10); column-gap: var(--q-sp10); margin-block: var(--q-sp18); margin-inline: 0;}
.t8-prose .t8-index{margin-block: var(--q-sp20); margin-inline: 0;}

.t8-kpis{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--q-sp11); column-gap: var(--q-sp11); margin-block: var(--q-sp18); margin-inline: 0;}
.t8-kpis>div{padding-block: var(--q-sp14); padding-inline: var(--q-sp14); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad); min-width: 0;}
.t8-kpis b{display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--mint);}
.t8-kpis span{display: block; font-size: 0.75rem; color: var(--mute); margin-block-start: var(--q-sp3);}

.t8-steps{list-style-type: none; list-style-position: outside; list-style-image: none; counter-reset: fgs; margin-block-start: var(--q-sp17); margin-inline-end: 0; margin-block-end: var(--q-sp19); margin-inline-start: 0;}
.t8-steps li{position: relative; counter-increment: fgs; padding-block-start: 0; padding-inline-end: 0; padding-block-end: var(--q-sp14); padding-inline-start: 3rem; font-size: 0.9375rem; color: var(--mid);}
.t8-steps li::before{content: counter(fgs); position: absolute; inset-inline-start: 0; inset-block-start: -0.125rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-width: 0.09375rem; border-style: solid; border-color: var(--mint); border-radius: 50%; color: var(--mint); font-family: var(--serif); font-size: 0.9375rem;}

.t8-tw{overflow-x: auto; border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--rad); margin-block: var(--q-sp17); margin-inline: 0;}
.t8-tbl{font-size: 0.875rem; min-width: 28.75rem;}
.t8-tbl th{padding-block: var(--q-sp11); padding-inline: var(--q-sp13); text-align: left; background: var(--sink); color: var(--mint); font-family: var(--sans); font-size: 0.75rem; font-weight: var(--q-wt1); letter-spacing: .07em; text-transform: uppercase;}
.t8-tbl td{padding-block: var(--q-sp11); padding-inline: var(--q-sp13); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); color: var(--mid);}

.t8-faq{margin-block: var(--q-sp20); margin-inline: 0;}
.t8-faq details{border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line);}
.t8-faq summary{padding-block-start: var(--q-sp14); padding-inline-end: var(--q-sp22); padding-block-end: var(--q-sp14); padding-inline-start: 0; cursor: pointer; font-family: var(--serif); font-weight: var(--q-wt1); font-size: 1.0625rem; list-style-type: none; list-style-position: outside; list-style-image: none; position: relative;}
.t8-faq summary::-webkit-details-marker{display: none;}
.t8-faq summary::after{content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: 0.9375rem; color: var(--mint); font-family: var(--sans); font-size: 1.1875rem;}
.t8-faq details[open] summary::after{content: "\2212";}
.t8-faq p{padding-block-start: 0; padding-inline-end: 0; padding-block-end: var(--q-sp14); padding-inline-start: 0; margin-block: 0; margin-inline: 0; font-size: 0.90625rem; color: var(--mute);}

.t8-band{margin-block-start: var(--q-sp22); margin-inline-end: 0; margin-block-end: var(--q-sp9); margin-inline-start: 0; padding-block: var(--q-sp21); padding-inline: var(--q-sp21); text-align: center; background: linear-gradient(140deg,var(--card2),var(--card)); border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: var(--rad);}
.t8-band b{display: block; font-family: var(--serif); font-size: 1.4375rem; color: var(--gold); margin-block-end: var(--q-sp13);}

/* ---------------------------------------------------------------- footer */
.t8-foot{background: var(--sink); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); margin-block-start: var(--q-sp22);}
.t8-foot .w{padding-block-start: var(--q-sp23); padding-block-end: var(--q-sp18);}
.t8-foot .top{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; row-gap: var(--q-sp21); column-gap: var(--q-sp21);}
.t8-foot .ab{min-width: 0;}
.t8-foot .ab p{font-size: 0.84375rem; color: var(--mute); line-height: 1.7;}
.t8-foot .top>div{min-width: 0;}
.t8-foot h4{font-family: var(--sans); font-size: 0.71875rem; letter-spacing: var(--q-tr1); text-transform: uppercase; color: var(--mint); margin-block-end: var(--q-sp10);}
.t8-foot a{display: block; font-size: 0.84375rem; color: var(--mute); padding-block: var(--q-sp2); padding-inline: 0;}
.t8-foot a:hover{color: var(--mint);}
.t8-foot .pay,.t8-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--q-sp8); column-gap: var(--q-sp8); margin-block-start: var(--q-sp17);}
.t8-foot .pay span,.t8-foot .trust span{display: flex; align-items: center; justify-content: center; min-width: 0; height: 2.125rem; padding-block: var(--q-sp5); padding-inline: var(--q-sp10); background: var(--card); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 0.5rem;}
.t8-foot .pay img{max-height: 1.3125rem; width: auto; min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto;}
.t8-foot .trust img{max-height: 1.25rem; width: auto; min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; opacity: .85;}
.t8-foot .legal{margin-block-start: var(--q-sp18); padding-block-start: var(--q-sp14); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line);}
.t8-foot .legal p{font-size: 0.78125rem; color: var(--dim); margin-block-end: var(--q-sp6);}
.t8-foot .legal small{font-size: 0.75rem; color: var(--dim);}
.t8-foot .age{display: inline-flex; align-items: center; justify-content: center; width: 1.6875rem; height: 1.6875rem; border-width: 0.09375rem; border-style: solid; border-color: var(--gold2); border-radius: 50%; color: var(--gold); font-size: 0.625rem; font-weight: var(--q-wt3); margin-inline-end: var(--q-sp8);}

/* sticky join bar + phone tab bar */
.t8-sticky{position: fixed; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 48; display: flex; align-items: center; row-gap: var(--q-sp12); column-gap: var(--q-sp12); padding-block: var(--q-sp11); padding-inline: var(--q-sp17); background: rgba(10,26,18,.97); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line2); backdrop-filter: blur(0.5rem);}
.t8-sticky.off{display: none;}
.t8-sticky span{flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; font-size: 0.875rem; color: var(--mid);}
.t8-sticky .t8-btn{flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-height: 2.5rem; padding-block: 0; padding-inline: var(--q-sp16); font-size: 0.84375rem;}
.t8-sticky .x{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 2rem; height: 2rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line2); border-radius: 50%; background: transparent; color: var(--mute); font-size: 1rem; cursor: pointer;}
.t8-tabs{display: none;}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1000px){
  .t8-hero .w{grid-template-columns: minmax(0,1fr); row-gap: var(--q-sp20); column-gap: var(--q-sp20);}
  .t8-hero>.w>img{order: -1; aspect-ratio: 16/9;}
  .t8-hero .bd{order: 1;}
  .t8-hero h1,.t8-hero.big h1{font-size: 2.0625rem;}
  .t8-cats{grid-template-columns: 1fr 1fr;}
  .t8-members{grid-template-columns: 1fr;}
  .t8-foot .top{grid-template-columns: 1fr 1fr;}
  .sp,.sp.alt{grid-template-columns: minmax(0,1fr); row-gap: var(--q-sp17); column-gap: var(--q-sp17);}
  .sp img,.sp.alt img{order: -1; aspect-ratio: 16/9;}
  .t8-pills{display: none;}
  .t8-burger{display: block; margin-inline-start: auto;}
  .t8-index>div{grid-template-columns: 1fr 1fr;}
}
@media(max-width:760px){
  body{padding-block-end: calc(var(--bar) + 3.75rem);}
  .t8-stats,.t8-kpis{grid-template-columns: 1fr 1fr;}
  .t8-offers .gr{grid-template-columns: 1fr 1fr;}
  .t8-offers .hd h2{font-size: 1.3125rem;}
  .t8-offers .of b{font-size: 1.5625rem;}
  .t8-stats b{font-size: 1.5625rem;}
  .t8-index>div{grid-template-columns: 1fr;}
  .t8-studios{row-gap: var(--q-sp7); column-gap: var(--q-sp7);}
  .t8-prose h1{font-size: 1.75rem;}
  .t8-prose h2{font-size: 1.3125rem;}
  .t8-sec .sh h2{font-size: 1.4375rem;}
  .t8-band{padding-block: var(--q-sp17); padding-inline: var(--q-sp17);}
  .t8-band b{font-size: 1.1875rem;}
  /* At 375 the blurb, two buttons and the dismiss control fight for 335px and the text
     collapses into a 60px column. Drop the blurb and let the actions have the width. */
  .t8-sticky{inset-block-end: var(--bar); row-gap: var(--q-sp9); column-gap: var(--q-sp9); padding-block: var(--q-sp9); padding-inline: var(--q-sp12);}
  .t8-sticky span{display: none;}
  .t8-sticky .t8-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: center; padding-block: 0; padding-inline: var(--q-sp9);}
  .t8-tabs{display: grid; position: fixed; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 50; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; background: var(--card); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line2); padding-block-start: var(--q-sp9);}
  .t8-tabs a{display: flex; flex-direction: column; align-items: center; row-gap: var(--q-sp2); column-gap: var(--q-sp2); padding-block-start: var(--q-sp4); padding-inline-end: var(--q-sp1); padding-block-end: var(--q-sp7); padding-inline-start: var(--q-sp1); font-size: 0.625rem; color: var(--mute);}
  .t8-tabs a .i{font-size: 1.125rem; line-height: 1;}
  .t8-tabs a.mid{position: relative; padding-block-start: var(--q-sp18);}
  .t8-tabs a.mid .i{position: absolute; inset-block-start: -1.625rem; inset-inline-start: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; border-radius: 50%; background: var(--mint); border-width: 0.25rem; border-style: solid; border-color: var(--card); color: #06281a; font-size: 1.5rem;}
}
@media(max-width:520px){
  .w{padding-block: 0; padding-inline: var(--q-sp13);}
  .t8-cats{grid-template-columns: 1fr;}
  .t8-offers .gr{grid-template-columns: 1fr;}
  .t8-offers .of{padding-block: var(--q-sp13); padding-inline: var(--q-sp13);}
  .t8-hero h1,.t8-hero.big h1{font-size: 1.75rem;}
  .t8-logo .wm b{font-size: 1.25rem;}
  .t8-band{padding-block: var(--q-sp15); padding-inline: var(--q-sp15);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior: auto;}
}