/* Editorial white look (Nov 2026), inspired by rhodeskin.com: white space, soft stone cards with
   rounded corners, a Swiss-style grotesk for everything, a heavy lowercase grotesk for big names,
   and red used only as an accent (buttons, links, the logo apple). */
:root {
  --ink: #1d1b19;          /* headlines */
  --stone: #67645e;        /* body text, like rhode's warm gray */
  --card: #f3f1ed;         /* soft stone panels */
  --hair: rgba(29, 27, 25, .12);
  --font-serif: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-type: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-heavy: 'Archivo Black', 'Inter Tight', Arial, sans-serif;
}
body { background: #fff; color: var(--stone); font-family: var(--font-type); font-size: 17px; }
body::after { display: none; }                         /* no film grain */
h1, h2, h3, .script, h2.title { color: var(--ink); font-weight: 500; letter-spacing: -.035em; }
.label { color: var(--stone); font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.label::before { display: none; }
.btn { border-radius: 999px; letter-spacing: .04em; font-weight: 600; }

/* top bars: quiet stone pills instead of dark red bars */
.ticker { background: var(--card); color: var(--ink); margin: 10px 16px 0; border-radius: 10px; }
.head { background: #fff; color: var(--ink); border-bottom: 0; }
.head a, .head__links a { color: var(--ink); }
.head__logo { font-family: var(--font-heavy); font-weight: 400; letter-spacing: -.04em; text-transform: lowercase; color: var(--ink); }
.head__core { background: var(--red); color: #fff; border-color: var(--red); }
.quick { background: #fff; border-bottom: 1px solid var(--hair); }
.quick a { color: var(--ink); border-color: var(--hair); background: #fff; }
.quick a.is-main { background: var(--red); color: #fff; border-color: var(--red); }
.livebar { background: #fff; border-bottom: 0; }

/* hero: one rounded, inset frame like rhode's big image card */
.hero-rot { margin: 12px 16px 0; border-radius: 18px; overflow: hidden; background: var(--card); gap: 4px; }
.hero-tag { background: rgba(255,255,255,.92); color: var(--ink); }
.hero-badge, .hero-hat { box-shadow: none; }
.hero-badge { background: #fff; color: var(--red); }
.hero-badge b { font-family: var(--font-heavy); letter-spacing: -.05em; }

/* $5 block and the rest: white and stone, red as accent only */
.bigjoin { background: #fff; color: var(--ink); border-bottom: 0; }
.bigjoin__price { color: var(--red); }
.bigjoin__price b { font-family: var(--font-heavy); letter-spacing: -.06em; }
.bigjoin__h { color: var(--ink); font-weight: 500; letter-spacing: -.03em; }
.bigjoin__perks { color: var(--stone); }
.bigjoin__btn { background: var(--red); color: #fff; }
.vis { background: #fff; color: var(--ink); border-bottom: 0; }
.vis__h { font-family: var(--font-heavy); color: var(--ink); text-transform: lowercase; letter-spacing: -.04em; }
.vis__card { box-shadow: none; border-radius: 16px; }
.vis__cap b { font-family: var(--font-heavy); text-transform: lowercase; letter-spacing: -.03em; }
.vis .sst__nav button { border-color: var(--hair); color: var(--ink); }
.strap { background: var(--card); color: var(--ink); margin: 0 16px; border-radius: 16px; }
.np { background: #fff; border-color: var(--hair); color: var(--ink); }
.filmstrip { background: #fff; }
.filmstrip img { border-radius: 12px; }
.locked { background: #fff; color: var(--stone); }
.locked h2, .locked h3 { color: var(--ink); }
.sst { background: var(--card); color: var(--ink); margin: 0 16px; border-radius: 18px; border-top: 0; }
.sst h2 { color: var(--ink); }
.sst .label, .sst p { color: var(--stone); }
.sst__nav button { border-color: var(--hair); color: var(--ink); }
.sst__more { background: var(--red); color: #fff; border-color: var(--red); }
.shelf { background: #fff; }
.viral { background: #fff; color: var(--ink); }
.viral h2, .viral h3 { color: var(--ink); }
.tracks { border-top-color: var(--hair); }
.onair { background: var(--card); color: var(--ink); margin: 0 16px; border-radius: 18px; }
.live-card { border-color: var(--hair); background: #fff; }
.faq, .follow, .contact { background: #fff; color: var(--ink); border-top: 0; }
.handle { border-color: var(--hair); }
.endjoin { background: var(--red); color: #fff; margin: 0 16px 16px; border-radius: 18px; }
.endjoin h2 { color: #fff; }
.foot { background: #fff; color: var(--stone); border-top: 1px solid var(--hair); }
.foot__logo { font-family: var(--font-heavy); text-transform: lowercase; letter-spacing: -.04em; color: var(--ink); }
.hero-peek { box-shadow: 0 10px 30px rgba(0,0,0,.18); border-radius: 16px; }
.head__core, .head__core:hover { color: #fff !important; background: var(--red) !important; }
.head__links { white-space: nowrap; gap: 26px; font-size: 13px; letter-spacing: .06em; }
.np { background: #fff; border-color: var(--hair); }
.np__spot { border-left-color: var(--hair); color: var(--ink); }
.np__icon { color: #fff; }
.typer { color: var(--ink); }
.typer__caret { background: var(--red); }
input, select, textarea, .faq details, .faq summary { background: #fff !important; border-color: var(--hair) !important; color: var(--ink); }
.faq details { border-radius: 12px; }
.dot { box-shadow: none; }
.apl-dot { width: 62%; height: auto; display: block; }
.endjoin .btn { border-radius: 999px; }