/* ZTIME MODULE 4
   1. Brand tokens and base styles
   2. Shared navigation, hero, cards, and footer
   3. Existing player, tracker, community, profiles, and About
   4. Module 4 banner and editorial grids
   5. Consolidated responsive and accessibility rules
*/

:root{
  --bg:#050607;
  --panel:#0d0f11;
  --panel2:#121417;
  --red:#f22534;
  --red2:#ff3b49;
  --text:#f5f5f5;
  --muted:#b6b8bc;
  --line:#2b2e33;
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 Arial,Helvetica,sans-serif;
}
a{color:inherit}
button,a{font:inherit}
button{cursor:pointer}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.75rem 1rem;z-index:1000}
.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.siteHeader,header{
  min-height:86px;
  padding:0 max(1.25rem,calc((100% - var(--max))/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  background:#060708f5;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.brand,.logo{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  flex:none;
}
.brand img,.logo img{width:62px;height:62px;object-fit:cover;border-radius:14px}
.brandText{display:grid;line-height:1}
.brandText b{font-size:2rem;letter-spacing:.05em;font-style:italic}
.brandText em{color:var(--red);font-style:italic}
.brandText small{font-size:.62rem;letter-spacing:.24em;margin-top:.35rem;color:#ddd}
.logo span{font-weight:900;letter-spacing:.06em;font-size:1.4rem}
.logo span strong{color:var(--red)}
.mainNav,nav{display:flex;align-items:center;gap:2rem}
.mainNav a,nav a{
  color:#eee;
  text-decoration:none;
  font-weight:700;
  padding:2rem 0 1.65rem;
  border-bottom:3px solid transparent;
}
.mainNav a:hover,.mainNav a.active,nav a:hover,nav a.active{color:#fff;border-bottom-color:var(--red)}
header>button{
  border:1px solid #6a2a31;
  border-radius:5px;
  padding:.7rem 1rem;
  color:#fff;
  background:#211316;
}

/* Homepage hero */
.homeHero{
  max-width:var(--max);
  margin:auto;
  min-height:620px;
  display:grid;
  grid-template-columns:.95fr 1.25fr;
  border-bottom:1px solid var(--line);
}
.heroCopy{
  padding:4.25rem 3rem 3.5rem 1.25rem;
  background:
    radial-gradient(circle at 20% 25%,rgba(242,37,52,.08),transparent 32%),
    linear-gradient(90deg,#050607 0%,#070809 90%,transparent 100%);
  position:relative;
  z-index:2;
}
.heroKicker{letter-spacing:.32em;font-weight:800;margin:0 0 .7rem;color:#e8e8ea}
.heroCopy h1{
  font-size:clamp(5rem,10vw,8.6rem);
  line-height:.75;
  margin:.15rem 0 .65rem;
  letter-spacing:-.065em;
  font-weight:950;
}
.heroCopy h1 span{color:var(--red)}
.heroTagline{color:var(--red2);letter-spacing:.22em;font-size:1.45rem;margin:.5rem 0 1.2rem}
.heroIntro{max-width:620px;font-size:1.08rem;color:#ededee;margin:0 0 .65rem}
.creator{font-size:1.05rem;margin:.7rem 0}
.creator strong{color:var(--red2)}
.accentLine{width:66px;height:3px;background:var(--red);margin:1.2rem 0}
.welcomeCopy{max-width:620px;font-style:italic;font-size:1.05rem;color:#d0d1d4}
.heroButton{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  padding:1rem 1.4rem;
  background:var(--red);
  border:1px solid var(--red);
  border-radius:5px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.04em;
}
.heroButton:hover{background:#ff3343}
.heroVisual{min-height:620px;overflow:hidden;position:relative;background:#13090b}
.heroVisual::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,#050607 0%,transparent 24%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.25) 100%);
  pointer-events:none;
}
.heroVisual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.95) contrast(1.08) brightness(.85)}

/* Homepage quick-access cards */
.featureStrip{
  max-width:var(--max);
  margin:0 auto;
  padding:1.6rem 1.25rem 1.9rem;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.7rem;
  background:#08090a;
}
.featureCard{
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.35rem .75rem 1rem;
  border:1px solid #33363a;
  background:linear-gradient(180deg,#0e1012,#090a0b);
  border-radius:7px;
}
.featureIcon{
  height:64px;
  display:grid;
  place-items:center;
  color:var(--red2);
  font-size:2.4rem;
  font-weight:900;
}
.featureCard h3{font-size:1rem;letter-spacing:.05em;margin:.45rem 0}
.featureCard p{color:#d1d2d4;margin:.25rem 0 1rem;font-size:.92rem;min-height:3em}
.featureCard a{
  width:100%;
  margin-top:auto;
  border:1px solid var(--red);
  color:var(--red2);
  padding:.65rem .5rem;
  border-radius:4px;
  font-size:.75rem;
  font-weight:900;
  text-decoration:none;
}
.featureCard a:hover{background:var(--red);color:#fff}

/* Footer */
.siteFooter,footer{
  max-width:var(--max);
  margin:auto;
  padding:1.6rem 1.25rem 2.2rem;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.5rem;
  align-items:center;
  color:var(--muted);
}
.footerBrand{justify-self:start}
.footerQuote{text-align:center}
.footerQuote p{font-style:italic;color:#ddd}
.footerQuote span{display:block;width:70px;height:2px;background:var(--red);margin:.7rem auto}
.footerLinks{text-align:right}
.footerLinks span{color:var(--red);font-size:1.2rem}

/* Shared inner-page layout */
main:not(:has(.homeHero)){max-width:var(--max);margin:auto}
section{padding:4rem 1.25rem}
.sectionTitle{margin-bottom:1.8rem}
.sectionTitle p,.eyebrow{margin:0 0 .5rem;color:#ff6670;font-size:.76rem;font-weight:800;letter-spacing:.16em}
.sectionTitle h1,.sectionTitle h2{font-size:clamp(2.3rem,4vw,4rem);line-height:1;margin:0}
.pageHero{text-align:center;padding-top:4rem}
.pageHero .logoBig{width:min(240px,65vw);border-radius:28px}
.construction{max-width:800px;margin:0 auto;text-align:center}
.construction h1{font-size:clamp(3rem,7vw,6rem);margin:.3rem 0}
.construction p{color:var(--muted);font-size:1.05rem}

.player{display:grid;grid-template-columns:220px 1fr 300px;gap:2rem;align-items:center;background:linear-gradient(135deg,#201217,#0d0c0e);border:1px solid var(--line);border-radius:18px;padding:1.8rem}
.cover{aspect-ratio:1;display:grid;place-content:center;border-radius:12px;font-size:8rem;font-weight:900;font-style:italic;background:radial-gradient(circle,#ed3038,transparent 55%),#260c11}
.now h3{font-size:2rem;margin:.2rem 0}
.now p{color:var(--muted)}
.timeline{height:5px;background:#4c3036;margin:1rem 0}
.timeline i{display:block;width:35%;height:100%;background:var(--red)}
.controls{display:flex;gap:.6rem}
.controls button{width:46px;height:46px;border-radius:50%;border:1px solid #61414a;background:transparent;color:#fff}
.controls #play{background:var(--red);border:0}
.queue{display:grid;gap:.45rem}
.queue button{display:flex;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid #4c2930;border-radius:6px;background:#28171c;color:#fff}
.queue button.active{border-color:var(--red)}
.queue span,.queue small{color:var(--muted)}

.twoCol{display:grid;grid-template-columns:.8fr 1.2fr;gap:1.1rem}
form,.list,.forum{padding:1.4rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
form{display:grid;gap:1rem}
label{display:grid;gap:.35rem;color:#d9ccce;font-size:.9rem;font-weight:700}
input,select,textarea{width:100%;padding:.78rem;background:#09090b;color:#fff;border:1px solid #5b353d;border-radius:5px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.primary{background:var(--red)!important;border:1px solid var(--red)!important;border-radius:5px;padding:.75rem 1rem;color:#fff;text-decoration:none;font-weight:800}
form>p{min-height:1.2em;color:#ff8187;margin:0}
.listHead{display:flex;align-items:center;justify-content:space-between}
.listHead h3,form h3{margin:0}
.listHead span{color:var(--muted);font-size:.85rem}
ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.55rem}
li{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;background:#1c1418;border-left:3px solid var(--red);padding:.8rem}
li p{margin:0;font-weight:700}
li small{color:var(--muted)}
li button{border:0;background:transparent;color:#ff8b90}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stats article{min-height:145px;padding:1.3rem;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#1b1316,#0e0d0f);display:flex;flex-direction:column;justify-content:flex-end}
.stats span,.stats small{color:var(--muted)}
.stats b{font-size:1.65rem;margin:.3rem 0}
.stats article div{height:5px;background:#443036}
.stats article div i{display:block;width:60%;height:100%;background:var(--red)}

.community{grid-template-columns:1.2fr .8fr}
.forum{display:grid;gap:.7rem}
.forum article{display:grid;grid-template-columns:46px 1fr;gap:1rem;background:#1c1418;padding:.9rem;border-radius:8px}
.forum article>b{width:46px;height:46px;border-radius:50%;display:grid;place-content:center;background:#68151e}
.forum h3{margin:.15rem 0;font-size:1rem}
.forum p{color:var(--muted);margin:0}
.forum small{color:#ff6d73}
.community textarea{min-height:90px;resize:vertical}
.note{color:var(--muted);font-size:.82rem}
dialog{max-width:430px;width:calc(100% - 2rem);padding:0;background:#121014;color:#fff;border:1px solid #63333c;border-radius:14px}
dialog::backdrop{background:#000c}
dialog form{position:relative;padding:2rem;border:0}
.close{position:absolute;right:.8rem;top:.5rem;border:0;background:none;color:#fff;font-size:1.8rem}






/* ZTime profile login, logout, and profile switching */
.profileControls{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex:none;
}
.loginButton,.logoutButton,.activeProfileButton,.profileLoginButton{
  border:1px solid #6a2a31;
  border-radius:6px;
  color:#fff;
  background:#211316;
  font-weight:800;
}
.loginButton,.logoutButton{padding:.68rem .9rem}
.loginButton:hover,.logoutButton:hover,.profileLoginButton:hover{background:#3a171d}
.activeProfileButton{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.42rem .7rem .42rem .42rem;
}
.profileAvatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:.76rem;
  font-weight:900;
}
.profileName{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profileDialog{
  width:min(620px,calc(100% - 2rem));
  max-width:620px;
  border:1px solid #5a252c;
  border-radius:14px;
  padding:0;
  color:var(--text);
  background:#0c0d0f;
}
.profileDialog::backdrop{background:rgba(0,0,0,.78)}
.profileDialogInner{padding:2rem;position:relative}
.profileDialogInner h2{font-size:2rem;margin:.2rem 0 .65rem}
.profileDialogInner h3{margin:.25rem 0 .85rem}
.profileDialogClose{
  position:absolute;
  top:.65rem;
  right:.85rem;
  border:0;
  background:transparent;
  color:#fff;
  font-size:2rem;
}
.profileNote{color:var(--muted);margin:0 0 1.4rem}
.savedProfilesSection{margin-top:1rem}
#savedProfiles{display:grid;gap:.65rem}
.savedProfileRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem;
  border:1px solid #33363a;
  border-radius:8px;
  background:#121417;
}
.savedProfileIdentity{display:flex;align-items:center;gap:.7rem}
.savedProfileIdentity div{display:grid}
.savedProfileIdentity small{color:var(--muted)}
.profileLoginButton{padding:.6rem .8rem}
.profileLoginButton:disabled{opacity:.5;cursor:default}
.emptyProfiles{color:var(--muted);padding:.8rem;border:1px dashed #3c3f43;border-radius:8px}
.profileDivider{display:flex;align-items:center;gap:1rem;margin:1.4rem 0;color:#777}
.profileDivider::before,.profileDivider::after{content:"";height:1px;background:#31343a;flex:1}
.createProfileForm{padding:0;border:0;background:transparent}
.createProfileForm p{min-height:1.2em;color:#ff8187}

/* Personal About page */
.aboutPage{max-width:var(--max);margin:auto}
.aboutHero{
  min-height:430px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  align-items:center;
  gap:3rem;
  padding:4.5rem 1.25rem 3.5rem;
  background:
    radial-gradient(circle at 80% 45%,rgba(242,37,52,.16),transparent 24%),
    linear-gradient(135deg,#090a0b,#050607);
  border-bottom:1px solid var(--line);
}
.aboutHeroCopy h1{
  font-size:clamp(3.6rem,7vw,6.8rem);
  line-height:.9;
  letter-spacing:-.055em;
  margin:.3rem 0 1.2rem;
}
.aboutHeroCopy h1 span{color:var(--red)}
.aboutLead{max-width:760px;font-size:1.2rem;color:#ddd}
.aboutLogoWrap{display:grid;place-items:center}
.aboutLogoWrap img{
  width:min(330px,80vw);
  border-radius:28px;
  box-shadow:0 35px 90px rgba(0,0,0,.65),0 0 80px rgba(242,37,52,.12);
}
.aboutStory{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:2rem 1.25rem 3rem;
}
.aboutStory article{
  padding:1.6rem;
  border:1px solid #303338;
  border-radius:10px;
  background:linear-gradient(180deg,#101214,#090a0b);
}
.aboutStory h2{font-size:1.7rem;margin:.25rem 0 1rem}
.aboutStory p{color:#d0d1d4}
.aboutStory strong{color:#fff}
.ztimeCallout{
  margin:0 1.25rem 4rem;
  padding:3.5rem 1.5rem;
  text-align:center;
  border:1px solid #66232c;
  border-radius:14px;
  background:
    radial-gradient(circle at center,rgba(242,37,52,.18),transparent 55%),
    #0b0c0e;
}
.ztimeCallout p{letter-spacing:.3em;font-weight:900;color:#eee}
.ztimeCallout h2{
  margin:.25rem 0 .8rem;
  font-size:clamp(2.7rem,6vw,6rem);
  line-height:1;
}
.ztimeCallout h2 span{color:var(--red)}
.ztimeCallout small{color:var(--muted);font-size:1rem}
.footerLinks strong{color:var(--red);font-size:1.2rem}





/* ===== MODULE 3: SHARED PAGE CONTENT & CSS INTERACTIONS ===== */
.moduleHero{max-width:var(--max);margin:auto;padding:5rem 1.25rem 3.5rem;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 20%,rgba(242,37,52,.12),transparent 25%)}
.moduleHero h1{font-size:clamp(3.5rem,8vw,7rem);line-height:.9;margin:.35rem 0 1.2rem;letter-spacing:-.05em}
.moduleHero h1 span{color:var(--red)}
.moduleHero>p:last-child{max-width:760px;color:#d5d6d8;font-size:1.12rem}
.moduleSection{max-width:var(--max);margin:auto;padding:3rem 1.25rem}
.compactSection{padding-top:1.25rem}
.sectionHeading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.sectionHeading h2{font-size:clamp(2rem,4vw,3.4rem);margin:.2rem 0}
.contentCards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.threeCards{grid-template-columns:repeat(3,1fr)}
.contentCard{min-height:230px;padding:1.45rem;display:flex;flex-direction:column;border:1px solid #303338;border-radius:10px;background:linear-gradient(160deg,#121417,#090a0b);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.contentCard:hover{transform:translateY(-6px);border-color:var(--red);box-shadow:0 14px 35px rgba(0,0,0,.3)}
.cardIcon{color:var(--red2);font-size:2rem;min-height:52px;display:flex;align-items:center}
.contentCard h3{font-size:1.3rem;margin:.4rem 0}
.contentCard p{color:#c9cbce;margin:.3rem 0 1rem}
.contentCard small{margin-top:auto;color:#ff6d76;font-weight:800;letter-spacing:.1em}
.outlineButton{margin-top:auto;padding:.65rem .8rem;border:1px solid var(--red);border-radius:5px;background:transparent;color:#ff626d;font-weight:800}
.outlineButton:hover{background:var(--red);color:#fff}
.futurePanel{margin-top:1.25rem;padding:1.5rem;display:grid;grid-template-columns:.75fr 1.25fr;gap:2rem;align-items:center;border-left:4px solid var(--red);background:#101214}
.futurePanel h2{margin:.15rem 0;font-size:1.8rem}
.futurePanel>p{color:#c9cbce;margin:0}
.demoAction{transition:transform .2s ease,background .2s ease}
.demoAction:hover{transform:translateY(-2px)}


/* MODULE 4: Graphic-led hero. Preserve the entire 800 × 600 artwork at every size. */
img { max-width:100%; }
.homeHero { padding:0; align-items:center; grid-template-columns:1fr 1.12fr; }
.heroVisual { margin:0; min-height:0; background:#090a0b; }
.heroVisual img { height:auto; aspect-ratio:4 / 3; object-fit:contain; filter:none; }
.heroVisual::after { display:none; }
.heroVisual figcaption { padding:1rem; color:var(--muted); text-align:center; font-size:.75rem; letter-spacing:.16em; border-top:1px solid var(--line); }
.heroCopy { padding:3rem 1.5rem; }
.heroCopy h1 { font-size:clamp(4.5rem,8vw,7.5rem); }
.heroTagline { font-size:clamp(.9rem,1.7vw,1.4rem); }
.pageIntro h1 { font-size:clamp(2.4rem,5vw,5rem); line-height:1.05; margin:.5rem 0 1rem; letter-spacing:-.04em; }
.pageIntro h1 span { color:var(--red); }
.pageIntro { padding-bottom:1rem; }
.pageIntro > p:last-child { max-width:760px; color:var(--muted); }
.cover img { width:100%; height:auto; display:block; border-radius:12px; }

/* Three-column editorial grid: numbered guidance complements the Module 3 cards. */
.learningSection { border-top:1px solid var(--line); }
.guideGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.guideCard { padding:1.6rem; border:1px solid var(--line); border-top:3px solid var(--red); border-radius:8px; background:linear-gradient(140deg,#181114,#0d0f11); }
.stepNumber { color:#ff6670; font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.guideCard h3 { font-size:1.3rem; margin:.6rem 0; }
.guideCard p,.editorialNote p { color:#c9cbce; margin:.5rem 0 0; }
.editorialNote { margin-top:1.2rem; padding:1.6rem; background:var(--panel2); border-left:3px solid var(--red); }
.editorialNote h3 { margin:0; }
.sectionNote { color:var(--muted); max-width:85ch; margin:1.4rem 0 0; }
.textLink { display:inline-block; margin-top:1rem; color:#ff8187; font-weight:700; }

/* Resilience: long profile names, narrow grids, keyboard focus, and touch targets. */
.siteHeader { flex-wrap:wrap; gap:.6rem 1.2rem; padding-top:.7rem; padding-bottom:.7rem; }
.mainNav { flex-wrap:wrap; gap:.3rem 1.15rem; }
.mainNav a { padding:.65rem 0; }
.profileControls { margin-left:auto; }
main { overflow-wrap:anywhere; }
.player > *, .twoCol > *, .guideGrid > *, .savedProfileIdentity > * { min-width:0; }
.savedProfileIdentity { min-width:0; overflow-wrap:anywhere; }
.profileAvatar { flex-shrink:0; }
.savedProfilesSection { padding:1rem 0; }
.profileDialog { max-height:90dvh; overflow-y:auto; }
.profileDialogClose { min-width:44px; min-height:44px; }
button { min-height:44px; }
a:focus-visible,button:focus-visible { outline:3px solid #ffb0b5; outline-offset:4px; }
.primary,.heroButton { background:#c91c2b!important; border-color:#c91c2b!important; }
.featureCard a:hover { background:#c91c2b; }

/* RESPONSIVE LAYOUT: Module 3 rules retained together; Module 4 refinements follow. */
@media(max-width:1120px){
  .mainNav,nav{gap:1rem}
  .mainNav a,nav a{font-size:.9rem}
  .featureStrip{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:850px){
  .siteHeader,header{align-items:flex-start;flex-direction:column;padding-top:.8rem;padding-bottom:.6rem;position:static}
  .mainNav,nav{width:100%;overflow-x:auto;gap:1.2rem}
  .mainNav a,nav a{white-space:nowrap;padding:.8rem 0}
  header>button{display:none}
  .homeHero{grid-template-columns:1fr}
  .heroCopy{padding:3rem 1.25rem}
  .heroVisual{min-height:360px}
  .featureStrip{grid-template-columns:repeat(2,1fr)}
  .siteFooter,footer{grid-template-columns:1fr;text-align:center}
  .footerBrand{justify-self:center}
  .footerLinks{text-align:center}
  .player{grid-template-columns:180px 1fr}
  .queue{grid-column:1/-1}
  .twoCol,.community{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .brandText b{font-size:1.55rem}
  .brand img,.logo img{width:52px;height:52px}
  .heroCopy h1{font-size:5rem}
  .heroTagline{font-size:1rem}
  .featureStrip{grid-template-columns:1fr}
  .player{grid-template-columns:1fr}
  .fields,.stats{grid-template-columns:1fr}
}
@media(max-width:1120px){
  .siteHeader,header{gap:1rem}
  .profileName{display:none}
  .logoutButton{padding:.6rem}
}
@media(max-width:850px){
  .profileControls{width:100%;justify-content:flex-end}
  .aboutHero{grid-template-columns:1fr;text-align:center}
  .aboutLead{margin-left:auto;margin-right:auto}
  .aboutStory{grid-template-columns:1fr}
}
@media(max-width:540px){
  .profileControls{justify-content:space-between}
  .activeProfileButton,.logoutButton,.loginButton{font-size:.85rem}
  .savedProfileRow{align-items:flex-start;flex-direction:column}
  .profileLoginButton{width:100%}
}
@media(max-width:900px){.contentCards,.threeCards{grid-template-columns:repeat(2,1fr)}
.futurePanel{grid-template-columns:1fr;gap:.5rem}}
@media(max-width:560px){.contentCards,.threeCards{grid-template-columns:1fr}
.sectionHeading{align-items:flex-start;flex-direction:column}}

/* Compact desktop/tablet: separate navigation row prevents header collisions. */
@media (max-width:1250px) {
  .siteHeader { position:static; display:grid; grid-template-columns:1fr auto; }
  .mainNav { grid-column:1 / -1; grid-row:2; justify-content:space-between; width:100%; overflow:visible; }
  .profileControls { width:auto; }
  .featureStrip { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Tablet: stack hero without cropping, allow roomy two-column card layouts. */
@media (max-width:900px) {
  .homeHero { grid-template-columns:1fr; }
  .heroVisual { width:min(100%,800px); min-height:0; justify-self:center; }
  .heroCopy { padding:2.5rem 1.25rem; }
  .guideGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guideCard:last-child { grid-column:1 / -1; }
  .aboutHero { grid-template-columns:1fr; }
  .aboutStory { grid-template-columns:1fr; }
  .player { grid-template-columns:180px minmax(0,1fr); }
  .queue { grid-column:1 / -1; }
}
/* Phone: every navigation link remains visible; controls and footer wrap naturally. */
@media (max-width:600px) {
  section,.moduleSection { padding:2rem 1rem; }
  .siteHeader { padding:1rem; gap:1rem; }
  .brandText small { font-size:.5rem; letter-spacing:.12em; }
  .brandText b { font-size:1.45rem; }
  .brand img { width:44px; height:44px; }
  .brand { gap:.5rem; }
  .mainNav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.2rem .5rem; }
  .mainNav a { font-size:.78rem; text-align:center; padding:.65rem 0; }
  .profileControls { flex-wrap:wrap; justify-content:flex-end; max-width:110px; gap:.35rem; }
  .profileName { display:none; }
  .heroCopy h1 { font-size:clamp(4rem,20vw,6rem); }
  .heroVisual figcaption { font-size:.65rem; }
  .moduleHero h1,.aboutHeroCopy h1 { font-size:clamp(2.5rem,10vw,4rem); }
  .guideGrid,.contentCards,.threeCards,.stats,.twoCol,.community,.player { grid-template-columns:minmax(0,1fr); }
  .cover { max-width:220px; width:100%; justify-self:center; }
  .featureStrip { grid-template-columns:repeat(2,minmax(0,1fr)); padding:1rem; }
  .featureCard { min-height:240px; }
  .featureCard a { font-size:.68rem; }
  .guideCard:last-child { grid-column:auto; }
  .futurePanel { grid-template-columns:1fr; gap:.5rem; }
  .siteFooter,footer { grid-template-columns:1fr; text-align:center; }
  footer .brand { justify-self:center; }
  .footerLinks { text-align:center; }
  .profileDialogInner { padding:2.8rem 1rem 1rem; }
  .profileDialogInner h2 { font-size:1.5rem; }
  .savedProfileRow { flex-direction:column; align-items:stretch; }
  .forum article { grid-template-columns:1fr; }
  .listHead { flex-wrap:wrap; gap:.5rem; }
}
/* Respect motion preferences without removing keyboard or hover affordances. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .contentCard:hover,.demoAction:hover { transform:none; }
}

/* Statistic labels are semantic headings without changing the dashboard scale. */
.stats h3 { font-size:1rem; font-weight:400; color:var(--muted); margin:0; }

/* Module 5: shared interactive cards inherit the existing ZTime brand. */
.module5Card { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:12px; padding:clamp(1rem,3vw,2rem); }
.module5Card h2 { font-size:clamp(1.5rem,4vw,2.3rem); }
.module5Card > p { max-width:70ch; }
.timerDisplay { font-size:clamp(3rem,10vw,5rem); font-weight:800; font-variant-numeric:tabular-nums; margin:1rem 0; overflow-wrap:anywhere; }
.module5Card.isRunning .timerDisplay { color:var(--red2); }
.module5Controls { display:flex; flex-wrap:wrap; gap:.75rem; }
.module5Controls button { min-height:44px; padding:.75rem 1.25rem; }
.module5Controls button:disabled { opacity:.5; cursor:default; }
.module5Controls button:focus-visible { outline:3px solid var(--text); outline-offset:4px; }
.motivationMessage { font-size:clamp(1.25rem,3vw,1.75rem); font-weight:700; min-height:3.5em; padding:1rem 0; }
/* Module 5: full-width controls remain comfortable on small phones. */
@media (max-width:600px) {
  .module5Controls { flex-direction:column; }
  .module5Controls button { width:100%; }
}

/* Module 5 secondary controls match the dark card and red primary action. */
.module5Controls button:not(.primary) { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:6px; font:inherit; cursor:pointer; }
.module5Controls button:not(.primary):disabled { cursor:default; }

/* Module 5 enhanced: responsive inputs and native, accessible visual progress. */
.module5Card select, .module5Card input { display:block; width:100%; max-width:24rem; padding:.8rem; margin:.5rem 0 1rem; color:#fff; background:#171717; border:1px solid #777; border-radius:8px; font:inherit; }
.module5Card label {display:block; margin-top:1rem;}
#weeklyProgress {display:block; width:100%; height:1.5rem; margin-top:1.5rem; accent-color:#e32736;}
#weeklyProgress::-webkit-progress-bar {background:#292929; border-radius:8px;}
#weeklyProgress::-webkit-progress-value {background:#e32736; border-radius:8px;}
#weeklyProgress::-moz-progress-bar {background:#e32736;}
#playlistRecommendations {margin-top:1.5rem; border-left:4px solid #e32736; padding-left:1rem;}
@media (max-width:600px) { .module5Card .module5Controls {flex-wrap:wrap;} .module5Card .module5Controls button {flex:1 1 9rem;} }

/* Local Radio: black/red station cards, clear keyboard focus, fluid grid. */
.stationGrid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem;}
.stationCard {min-width:0; overflow:hidden; background:#171717; border:1px solid #444; border-radius:14px; display:flex; flex-direction:column;}
.stationDial {padding:1.5rem; font-size:3.2rem; font-weight:900; background:linear-gradient(135deg,#65121c,#181818); color:#fff; letter-spacing:-.04em;}
.stationDial span {font-size:.85rem; letter-spacing:.12em; margin-left:.6rem;}
.stationBody {padding:1.5rem; display:flex; flex-direction:column; flex:1;}
.stationBody h3 {font-size:1.5rem; margin:.4rem 0;}
.stationGenre {font-size:.8rem; text-transform:uppercase; color:#ff8992; letter-spacing:.12em; font-weight:700;}
.stationFrequency,.radioNote {color:#c6c6c6;}
.radioListen {display:inline-flex; align-items:center; justify-content:center; gap:1rem; padding:.85rem 1.15rem; min-height:44px; background:#bc1726; color:white; border-radius:7px; text-decoration:none; font-weight:700; margin-top:auto;}
.radioListen:hover {background:#df2334;}
.radioListen[hidden] {display:none;}
.stationHome {color:#ddd; margin-top:1rem; font-size:.9rem;}
.stationSelected {border-color:#ff6876; box-shadow:0 0 0 2px #ff6876;}
.localNow {display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(1rem,3vw,2rem); border:1px solid #555; border-left:5px solid #e32736; background:#181818; border-radius:12px;}
.localNow h3 {font-size:clamp(1.6rem,4vw,2.4rem); margin:.8rem 0;}
.localNowActions {display:flex; flex-direction:column; gap:1rem; flex-shrink:0;}
.localNowActions a {text-align:center;}
.radioListen:focus-visible,.stationHome:focus-visible {outline:3px solid #fff; outline-offset:5px;}
/* Tablet and phone layouts prevent card and selected-player overflow. */
@media(max-width:1000px) {.stationGrid {grid-template-columns:repeat(2,minmax(0,1fr));}.localNow {align-items:flex-start;flex-direction:column;}.localNowActions {flex-direction:row;flex-wrap:wrap;flex-shrink:1;}}
@media(max-width:600px) {.stationGrid {grid-template-columns:1fr;}.localNowActions {width:100%;flex-direction:column;}.stationDial {font-size:2.8rem;}}

/* Official radio embeds: large enough for provider privacy and playback controls. */
.localPlaybackControls {display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin:1.5rem 0;}
.localPlaybackControls select {max-width:100%;padding:.8rem;color:#fff;background:#171717;border:1px solid #777;border-radius:7px;font:inherit;}
.localPlaybackControls button {color:#fff;background:#171717;padding:.8rem;min-height:44px;cursor:pointer;}
.localNowActions button {border:0;font:inherit;cursor:pointer;}
.localPlayerHost {border:1px solid #555;border-radius:12px;overflow:hidden;background:#161616;}
.localPlayerHost iframe {display:block;width:100%;height:480px;border:0;}
.localPlayerHost[hidden],.localPlaybackControls button[hidden] {display:none;}
@media(max-width:600px) {.localPlaybackControls {align-items:stretch;flex-direction:column;}.localPlayerHost iframe {height:560px;}}

/* Match the provider's intended layout without modifying cross-origin content. */
.localPlayerHost iframe.radioFrame-iheart {height:200px;}
.localPlayerHost iframe.radioFrame-audacy {height:760px;}
@media(max-width:600px) {
  .localPlayerHost iframe.radioFrame-iheart {height:220px;}
  .localPlayerHost iframe.radioFrame-audacy {height:780px;}
}

/* Nationwide station library and accessible add-station form. */
.radioInput{display:block;width:100%;box-sizing:border-box;max-width:700px;background:#181818;color:#fff;border:1px solid #777;border-radius:6px;padding:14px;margin:8px 0 18px;font:inherit}.radioAdd{margin-top:32px;padding:24px;border:1px solid #533;border-radius:12px;background:#131313}.radioAdd form{max-width:700px}.radioInput:focus{outline:2px solid #ff3030;outline-offset:2px}#nationalStationResults .guideCard{min-width:0}#nationalStationResults h3{overflow-wrap:anywhere}

/* Text credit identifies the official iHeart playback provider. */
.radioProviderCredit{color:#ddd;font-size:.95rem;letter-spacing:.02em}.radioProviderCredit a{color:#ff5959;font-weight:700}

/* Module 6: accessible registration and server response. */
.mainNav{flex-wrap:wrap;gap:1rem}
.joinMain{max-width:1000px;margin:auto;padding:3rem 1.25rem}
.joinIntro h1{font-size:clamp(2.5rem,7vw,4.5rem);margin:.5rem 0}
.joinIntro h1 span{color:var(--red)}
.joinIntro{max-width:780px;margin-bottom:2rem}
.joinForm,.joinResult{padding:clamp(1rem,4vw,2.5rem);background:var(--panel);border:1px solid var(--line);border-radius:16px}
.joinForm fieldset{min-width:0;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--line);border-radius:10px}
.joinForm legend{font-weight:bold;padding:0 .5rem}
.joinGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.joinForm label{display:block;font-weight:bold}
.joinForm input:not([type=checkbox]),.joinForm select,.joinForm textarea{display:block;width:100%;margin:.5rem 0;padding:.8rem;background:#08090b;color:var(--text);border:1px solid #727780;border-radius:6px;font:inherit}
.joinForm textarea{resize:vertical}
.joinForm small{display:block;font-weight:normal;color:var(--muted)}
.joinForm .goalChoice{display:flex;gap:.65rem;align-items:center;font-weight:normal}
.goalChoice input{width:1.25rem;height:1.25rem;accent-color:var(--red);flex:none}
.joinForm button{margin-top:1.5rem}
.joinReset{background:transparent;color:white;border:1px solid #727780;border-radius:6px;padding:.9rem;margin-left:1rem}
.joinResult h1{font-size:clamp(1.8rem,5vw,3rem);overflow-wrap:anywhere}
.joinResult li{margin:.6rem 0}
.joinForm :focus-visible,.joinResult a:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:640px){.joinGrid{grid-template-columns:1fr}.joinForm fieldset{padding:.8rem}.joinReset{margin-left:0;display:block}}