/* ETEA Premium Stage R3 — approved artwork, genuine responsive composition
   Presentation only; no election/API/worker/security changes. */
:root{--r3-bg:#021322;--r3-panel:#072c43;--r3-mint:#73fac2;--r3-line:rgba(99,224,232,.32)}
html,body{width:100%;max-width:100%;overflow-x:clip}
body{margin:0;min-height:100svh;color:#f2faff;background:
 radial-gradient(ellipse 55% 55% at 50% 48%,rgba(16,93,118,.16),transparent 80%),
 radial-gradient(ellipse 70% 110% at 45% -10%,rgba(0,165,176,.13),transparent 75%),
 #021322;text-align:center}
.etea-experience{position:relative;isolation:isolate;overflow:visible;margin:0 auto;width:min(100%,1420px);min-height:100svh;background:
 radial-gradient(circle at 25% 42%,rgba(16,103,143,.2),transparent 42%),
 radial-gradient(circle at 89% 70%,rgba(16,178,129,.075),transparent 46%),
 linear-gradient(145deg,#05243a,#031a2d 52%,#04182a);
 border-inline:1px solid rgba(72,161,184,.12);box-shadow:0 0 100px rgba(0,0,0,.16)}
.etea-experience::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.44;background:repeating-linear-gradient(90deg,transparent 0,transparent 159px,rgba(56,176,187,.04) 160px);mask-image:linear-gradient(to bottom,transparent,#000 21%,#000 74%,transparent)}
.hero{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;min-height:0!important;isolation:auto!important}
.hero::before,.hero::after{display:none!important}
.hero>.nav{max-width:none;width:100%;margin:0!important;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:13px clamp(18px,3vw,45px)!important;border-bottom:1px solid rgba(95,222,224,.19);background:linear-gradient(90deg,rgba(2,23,40,.83),rgba(6,42,61,.76));z-index:5;position:relative}
.nav .brand{flex-wrap:nowrap;text-align:left;gap:11px}.nav .logo{width:47px;height:47px;border-radius:13px;font-size:12px}
.nav .brand strong{font-size:20px;letter-spacing:.02em}.nav .brand small{font-size:9px;letter-spacing:.06em;line-height:1.25}
.nav .ghost{border-radius:12px;padding:10px 16px;font-size:12px;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(233,255,255,.07)}
.hero-story>.hero-showcase{position:relative;width:100%;min-width:0;max-width:none;margin:0!important;line-height:0;filter:none;transform:none!important;padding:0}
.hero-showcase::before,.hero-showcase::after{display:none!important}
.hero-showcase>.hero-visual{width:100%;display:block;height:auto;max-height:none;aspect-ratio:1.93;object-fit:contain;border-radius:16px;border:1px solid rgba(101,226,231,.36);box-shadow:0 17px 55px rgba(0,6,18,.58),0 0 46px rgba(15,151,177,.14)}
.hero-story>.hero-copy{min-width:0;margin:0!important;padding:0!important;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;max-width:none;text-align:center}
.hero-copy h1{font-size:clamp(39px,4.2vw,62px)!important;line-height:1.04!important;letter-spacing:-.045em!important;margin:0!important;font-weight:950}
.hero-copy h1 em{font-style:normal;color:#73fac2;text-shadow:0 0 32px rgba(70,246,172,.19)}
.hero-copy p{font-size:clamp(13px,1.3vw,17px)!important;color:#c4dfe9;margin:0!important;line-height:1.45}
.hero-copy #heroStatus{max-width:95%;width:max-content;letter-spacing:.055em;font-size:10px;padding:6px 14px;border-radius:30px;border:1px solid rgba(84,223,167,.37);background:rgba(6,69,69,.49);box-shadow:none}
main#mainContent{position:relative;z-index:2;max-width:none;width:100%;margin:0!important;padding:0!important;min-width:0}
main#mainContent>.card{width:100%;max-width:none;margin:0!important;padding:0;background:linear-gradient(145deg,rgba(12,65,91,.79),rgba(3,29,50,.9));border:1px solid rgba(103,224,233,.36);border-radius:25px;box-shadow:0 24px 70px rgba(0,6,18,.37),inset 0 1px 0 rgba(190,247,242,.11);color:#f3fbff}
#memberCard,#ballotCard{display:flex;flex-direction:column;justify-content:center;gap:19px;align-items:stretch}
#memberCard>.phase-rail,#ballotCard>.phase-rail{width:100%;max-width:100%;margin:0!important;padding:0;gap:7px}
#memberCard>.topline,#ballotCard>.topline{display:block;text-align:center;padding:0;margin:0;width:100%}
#memberCard>.topline>div,#ballotCard>.topline>div{width:100%}
#memberCard .step,#ballotCard .step{font-size:10px;letter-spacing:.21em;text-transform:uppercase;color:#8df9cb;margin-bottom:10px}
#memberCard h2,#ballotCard h2{font-size:clamp(30px,2.8vw,39px)!important;line-height:1.12;margin:0!important;letter-spacing:-.04em;font-weight:900}
#memberCard>.topline p,#ballotCard>.topline p{margin:8px auto 0!important;font-size:13px;line-height:1.4;max-width:380px;color:#9fc8d8}
#memberCard>.grid,#ballotCard>.grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:100%;width:100%;margin:0}
#memberCard .field,#ballotCard .field{width:100%;min-width:0;min-height:60px;border-radius:13px;padding:13px 19px;font-size:15px;color:#f4fdff;text-align:left;background:rgba(1,23,42,.69);border:1px solid rgba(72,183,223,.61);box-shadow:inset 0 0 20px rgba(0,6,18,.16)}
#memberCard .field::placeholder,#ballotCard .field::placeholder{text-align:left;color:#9bc4d7}
#memberCard .field:focus,#ballotCard .field:focus{outline:2px solid rgba(104,249,202,.7);outline-offset:2px}
#memberCard>.list,#ballotCard>.list{max-width:100%;width:100%;margin:0!important;border-radius:12px}
#memberCard>.roster-context{display:none!important}
#memberCard>.directory-notice,#memberCard>#identity{margin:0!important;max-width:100%;width:100%}
#memberCard>.p11-identity-guidance{display:none!important}
#ballotCard>.chips,#ballotCard>.btnrow{margin:0!important;justify-content:center}
#memberCard .phase-rail li,#ballotCard .phase-rail li{min-height:34px;border-radius:28px;padding:6px 8px;font-size:10px;letter-spacing:0;background:rgba(1,21,39,.46)}
#memberCard .phase-rail li span,#ballotCard .phase-rail li span{width:18px;height:18px}
#reviewCard,#doneCard{padding:28px!important;max-width:660px!important;margin-inline:auto!important}
#memberCard>.count{display:none}
main#mainContent>.foot{display:none!important}
/* One coherent hero gallery: artwork and headline always move as one unit. */
.hero-story{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;width:100%}
.hero-story>.hero-showcase{width:100%;max-width:740px;margin:0!important}
.hero-story>.hero-copy{width:100%;max-width:680px;margin:0!important;min-height:0;gap:10px}
/* Desktop: balanced immersive application stage, no vast gap between logo and headline. */
@media(min-width:1100px){
 .etea-experience{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:76px minmax(620px,1fr);min-height:max(770px,100svh);padding-bottom:0}
 .etea-experience>.hero{display:contents}
 .hero>.nav{grid-column:1/-1;grid-row:1;min-height:76px}
 .hero>.hero-story{grid-column:1;grid-row:2;width:100%;align-self:stretch;justify-self:stretch;gap:clamp(16px,3vh,28px);padding:25px 25px 35px clamp(20px,2.3vw,45px)}
 .hero-story>.hero-showcase{width:100%;max-width:710px}
 .hero-story>.hero-visual{aspect-ratio:1.93;object-fit:contain}
 .hero-story>.hero-copy{width:100%;max-width:660px;gap:10px}
 .hero-copy h1{font-size:clamp(45px,3.9vw,62px)!important}
 main#mainContent{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px clamp(28px,3.5vw,68px) 35px 0!important;z-index:3}
 #memberCard,#ballotCard{width:100%;max-width:570px;min-height:550px;padding:clamp(28px,3vw,47px)!important;gap:22px}
 #memberCard>.phase-rail,#ballotCard>.phase-rail{margin-bottom:6px!important}
 #memberCard>.grid,#ballotCard>.grid{gap:15px}
 #memberCard>.topline p,#ballotCard>.topline p{font-size:14px}
 .etea-experience:after{content:"";position:absolute;left:52%;top:120px;bottom:48px;width:1px;background:linear-gradient(transparent,rgba(80,227,212,.2) 30%,rgba(80,227,212,.12) 70%,transparent);pointer-events:none}
}
/* Tablet: gallery and identification flow move naturally; no squeezed side-by-side form. */
@media(min-width:660px) and (max-width:1099px){
 .etea-experience{padding-bottom:28px}
 .hero{display:flex;flex-direction:column;align-items:center!important}
 .hero>.nav{padding:13px 26px!important}
 .hero>.hero-story{padding:22px 24px 0;gap:15px}
 .hero-story>.hero-showcase{width:100%;max-width:710px}
 .hero-story>.hero-copy{width:100%;max-width:660px}
 .hero-copy h1{font-size:clamp(38px,5.4vw,52px)!important}
 main#mainContent{width:min(calc(100% - 60px),660px);margin:23px auto 0!important}
 #memberCard,#ballotCard{min-height:0;padding:30px clamp(26px,5vw,45px)!important;gap:16px}
 #memberCard h2,#ballotCard h2{font-size:34px!important}
 #memberCard>.grid,#ballotCard>.grid{max-width:530px;margin:0 auto}
}
/* Phone: no empty gallery sections, precise visual hierarchy. */
@media(max-width:659px){
 .etea-experience{width:100%;min-height:100svh}
 .hero{display:flex;flex-direction:column;align-items:center}
 .hero>.nav{padding:10px 14px!important;gap:8px;min-height:62px}
 .nav .brand{gap:7px}.nav .logo{width:38px;height:38px;border-radius:11px;font-size:10px}
 .nav .brand strong{font-size:14px}.nav .brand small{font-size:7px;letter-spacing:0}
 .nav .ghost{font-size:10px;padding:9px 10px;white-space:nowrap}
 .hero>.hero-story{padding:10px 11px 0;gap:12px}
 .hero-story>.hero-showcase{width:100%;max-width:500px}
 .hero-showcase>.hero-visual{border-radius:12px}
 .hero-story>.hero-copy{padding:0 5px!important;gap:6px;max-width:100%}
 .hero-copy h1{font-size:clamp(35px,10vw,47px)!important}
 .hero-copy p{font-size:13px!important}
 .hero-copy #heroStatus{font-size:9px;padding:5px 11px}
 main#mainContent{width:calc(100% - 22px);margin:14px auto 26px!important}
 main#mainContent>.card{border-radius:20px}
 #memberCard,#ballotCard{padding:21px 18px 24px!important;min-height:0;gap:14px}
 #memberCard h2,#ballotCard h2{font-size:28px!important}
 #memberCard>.topline p,#ballotCard>.topline p{font-size:12px;margin:5px auto 0!important}
 #memberCard .field,#ballotCard .field{min-height:55px;font-size:16px!important}
 #memberCard>.phase-rail,#ballotCard>.phase-rail{max-width:390px;margin-inline:auto!important}
 #memberCard .phase-rail li,#ballotCard .phase-rail li{font-size:9px;min-height:29px}
}
/* Preserve full-width administrator command center on sign-in and after authentication. */
body:has(#adminCard:not(.hidden)) .etea-experience{display:block!important;min-height:100svh}
body:has(#adminCard:not(.hidden)) .etea-experience>.hero{display:flex!important;flex-direction:column}
body:has(#adminCard:not(.hidden)) .hero-story>.hero-showcase,body:has(#adminCard:not(.hidden)) .hero-story>.hero-copy{display:none!important}
body:has(#adminCard:not(.hidden)) main#mainContent{display:block!important;width:min(calc(100% - 36px),1180px);padding:24px 0 38px!important;margin:0 auto!important}
body:has(#adminCard:not(.hidden)) main#mainContent>#adminCard{max-width:none!important;width:100%;margin:0 auto!important;padding:25px!important}
@media(prefers-reduced-motion:reduce){.hero-copy,.hero-showcase,.hero-visual{animation:none!important;transition:none!important}}
/* Clear member-entry copy: single headline and two controls; the progress rail supplies context. */
#memberCard>.topline .step,#memberCard>.topline p{display:none!important}
@media(min-width:1100px){#memberCard{min-height:510px!important;gap:27px}}

/* R3 TOP HERO CORRECTION — user-approved hierarchy: logo artwork is the single centered top hero.
   Desktop, tablet, phone: hero image -> headline -> interactive console. Never side by side. */
.etea-experience{display:block!important;max-width:1420px;min-height:100svh!important; padding:0 0 22px!important;}
.etea-experience::after{display:none!important}
.etea-experience>.hero{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;position:relative!important}
.hero>.nav{width:100%!important;flex:0 0 auto!important}
.hero>.hero-story{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;align-self:auto!important;padding:15px 12px 0!important;margin:0!important}
.hero-story>.hero-showcase{width:min(94%,850px)!important;max-width:850px!important;margin:0 auto!important;justify-self:center!important}
.hero-story>.hero-showcase>.hero-visual{width:100%!important;height:auto!important;aspect-ratio:1.93!important;object-fit:contain!important;border-radius:16px;}
.hero-story>.hero-copy{width:100%!important;max-width:780px!important;padding:0 12px!important;margin:0 auto!important;min-height:0!important;gap:6px!important;align-self:center!important}
.hero-copy h1{font-size:clamp(38px,4.3vw,59px)!important;line-height:1.03!important}
.hero-copy p{font-size:clamp(13px,1.5vw,16px)!important}
main#mainContent{position:relative!important;display:block!important;grid-column:auto!important;grid-row:auto!important;width:min(calc(100% - 44px),900px)!important;max-width:900px!important;padding:0!important;margin:17px auto 20px!important;}
main#mainContent>.card{margin:0 auto 18px!important;width:100%!important;max-width:100%!important}
#memberCard,#ballotCard{min-height:0!important;max-width:none!important;padding:21px 35px 23px!important;gap:13px!important}
#memberCard>.phase-rail,#ballotCard>.phase-rail{width:min(100%,480px)!important;margin:0 auto!important;}
#memberCard>.topline,#ballotCard>.topline{margin:0!important}
#memberCard h2,#ballotCard h2{font-size:clamp(27px,2.9vw,34px)!important}
#memberCard>.grid,#ballotCard>.grid{width:100%!important;max-width:720px!important;margin:0 auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
#memberCard .field,#ballotCard .field{min-height:53px!important;font-size:15px!important;padding:11px 15px!important}
#memberCard>.list,#ballotCard>.list{max-width:720px!important;margin:0 auto!important}
#ballotCard>.chips,#ballotCard>.btnrow{max-width:720px;margin-inline:auto!important}
/* Gallery scales to the *height* of the user's desktop, rather than using empty space to fill the window. */
@media(min-width:1100px){
  .hero-story>.hero-showcase{width:min(94%,940px,calc((100svh - 505px)*1.93))!important;max-width:940px!important}
  .hero>.hero-story{gap:10px!important;padding-top:14px!important}
  .hero-copy h1{font-size:clamp(44px,4.3vw,61px)!important}
  main#mainContent{margin-top:18px!important}
}
/* Tablet: retain an independent large hero over a proportional full-width voting console. */
@media(min-width:660px) and (max-width:1099px){
  .hero-story>.hero-showcase{width:min(92%,690px)!important;max-width:690px!important}
  .hero>.hero-story{padding-top:18px!important;gap:12px!important}
  .hero-copy h1{font-size:clamp(40px,5vw,52px)!important}
  main#mainContent{width:min(calc(100% - 42px),720px)!important;margin:20px auto 24px!important}
  #memberCard,#ballotCard{padding:24px 28px!important;gap:14px!important}
  #memberCard>.grid,#ballotCard>.grid{max-width:580px!important;grid-template-columns:1fr!important}
  #memberCard .field,#ballotCard .field{min-height:53px!important}
}
/* Phone: dominant standalone hero, headline directly below, form beneath both. */
@media(max-width:659px){
  .hero>.hero-story{padding:10px 10px 0!important;gap:10px!important}
  .hero-story>.hero-showcase{width:100%!important;max-width:500px!important}
  .hero-story>.hero-copy{padding:0 7px!important;gap:6px!important}
  .hero-copy h1{font-size:clamp(35px,10vw,45px)!important}
  main#mainContent{width:calc(100% - 22px)!important;margin:14px auto 25px!important}
  #memberCard,#ballotCard{padding:19px 18px 21px!important;gap:13px!important}
  #memberCard>.grid,#ballotCard>.grid{grid-template-columns:1fr!important;gap:11px!important}
  #memberCard h2,#ballotCard h2{font-size:27px!important}
  #memberCard .field,#ballotCard .field{min-height:53px!important;font-size:16px!important}
}
/* Admin retains its established full-width dashboard and bypasses public hero gallery. */
body:has(#adminCard:not(.hidden)) .hero>.hero-story{display:none!important}
body:has(#adminCard:not(.hidden)) main#mainContent{width:min(calc(100% - 36px),1180px)!important;max-width:1180px!important;margin:22px auto!important}
/* Remove legacy 500px absolute background overlay that extended document scroll height. */
main#mainContent::before{display:none!important;content:none!important}