/* ==========================================================================
   Ace Super - ace-super.cfd
   Display shell for a 320-430px phone canvas, centered on wide screens.
   Class / variable prefix : shell997b4-
   Palette                 : coal #333333 base - ink #FAFAFA - amber #FFB347
   Voice                   : mono tags + soft sans body, light card radii,
                             compact icon-text buttons, slide-up routes,
                             gentle lift feedback on cards.
   ========================================================================== */

/* ------------------------------ tokens ------------------------------ */
:root{
  --shell997b4-ink:#FAFAFA;
  --shell997b4-mute:rgba(250,250,250,.66);
  --shell997b4-faint:rgba(250,250,250,.42);
  --shell997b4-amber:#FFB347;
  --shell997b4-amber-hi:#FFC873;
  --shell997b4-amber-lo:#DE9026;
  --shell997b4-amber-wash:rgba(255,179,71,.13);
  --shell997b4-amber-line:rgba(255,179,71,.42);
  --shell997b4-coal:#333333;
  --shell997b4-coal-2:#2B2B2B;
  --shell997b4-coal-3:#242424;
  --shell997b4-coal-4:#1D1D1D;
  --shell997b4-line:rgba(250,250,250,.11);
  --shell997b4-line-2:rgba(250,250,250,.22);
  --shell997b4-sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --shell997b4-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --shell997b4-rad-card:12px;
  --shell997b4-rad-chip:7px;
  --shell997b4-rad-btn:8px;
  --shell997b4-canvas:430px;
  --shell997b4-band-h:64px;
  --shell997b4-dock-h:60px;
  --shell997b4-tap:44px;
  --shell997b4-gap:14px;
  --shell997b4-ease:cubic-bezier(.22,.75,.35,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#151515;
  color:var(--shell997b4-ink);
  font-family:var(--shell997b4-sans);
  font-size:14px;
  line-height:1.64;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto;}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

a{
  color:var(--shell997b4-amber);
  text-decoration:none;
}

a:hover{text-decoration:underline;}

:focus-visible{
  outline:2px solid var(--shell997b4-amber);
  outline-offset:2px;
  border-radius:4px;
}

.shell997b4-skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--shell997b4-amber);
  color:var(--shell997b4-coal);
  font-family:var(--shell997b4-mono);
  font-size:12px;
  padding:10px 14px;
  z-index:120;
}

.shell997b4-skip:focus{
  left:12px;
  top:12px;
}

/* --------------------------- phone canvas --------------------------- */
.shell997b4-frame{
  position:relative;
  width:100%;
  max-width:var(--shell997b4-canvas);
  margin-inline:auto;
  min-height:100vh;
  background:
    radial-gradient(120% 52% at 50% -8%,rgba(255,179,71,.09),transparent 60%),
    linear-gradient(180deg,#383838 0%,var(--shell997b4-coal) 26%,#2F2F2F 100%);
  overflow-x:hidden;
}

@media (min-width:431px){
  .shell997b4-frame{
    box-shadow:0 0 0 1px rgba(250,250,250,.07),0 24px 70px rgba(0,0,0,.55);
  }
}

/* --------------------------- top action band --------------------------- */
.shell997b4-band{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--shell997b4-canvas);
  height:var(--shell997b4-band-h);
  z-index:80;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  padding-top:env(safe-area-inset-top);
  background:rgba(32,32,32,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--shell997b4-amber-line);
}

/* Brand zone: logo image + site name only. */
.shell997b4-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:var(--shell997b4-tap);
  color:var(--shell997b4-ink);
  text-decoration:none;
}

.shell997b4-brand:hover{text-decoration:none;}

.shell997b4-brandlogo{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1.5px solid var(--shell997b4-amber-line);
  background:#202020;
  object-fit:cover;
  flex:none;
}

.shell997b4-brandname{
  font-size:17px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.1;
  white-space:nowrap;
}

.shell997b4-brandname small{
  display:block;
  font-family:var(--shell997b4-mono);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:2.4px;
  color:var(--shell997b4-amber);
  margin-top:2px;
}

.shell997b4-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.shell997b4-login{
  min-height:38px;
  padding:0 14px;
  border-radius:var(--shell997b4-rad-btn);
  border:1px solid var(--shell997b4-line-2);
  font-size:13px;
  font-weight:600;
  color:var(--shell997b4-ink);
  background:rgba(250,250,250,.05);
  transition:border-color .18s var(--shell997b4-ease),transform .18s var(--shell997b4-ease);
}

.shell997b4-register{
  min-height:38px;
  padding:0 15px;
  border-radius:var(--shell997b4-rad-btn);
  background:linear-gradient(180deg,var(--shell997b4-amber-hi),var(--shell997b4-amber-lo));
  color:var(--shell997b4-coal);
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(255,179,71,.28);
  transition:transform .18s var(--shell997b4-ease),box-shadow .18s var(--shell997b4-ease);
}

.shell997b4-login:active{
  transform:translateY(1px);
  border-color:var(--shell997b4-amber);
}

.shell997b4-register:active{
  transform:translateY(1px);
  box-shadow:0 2px 8px rgba(255,179,71,.22);
}

.shell997b4-menubtn{
  width:var(--shell997b4-tap);
  height:var(--shell997b4-tap);
  border-radius:var(--shell997b4-rad-btn);
  border:1px solid var(--shell997b4-line-2);
  display:grid;
  place-items:center;
  color:var(--shell997b4-ink);
  background:rgba(250,250,250,.05);
  transition:border-color .18s var(--shell997b4-ease),background .18s var(--shell997b4-ease);
}

.shell997b4-menubtn:active{
  background:var(--shell997b4-amber-wash);
  border-color:var(--shell997b4-amber);
}

.shell997b4-menubtn svg{width:21px;height:21px;}

/* ------------------------------ stage ------------------------------ */
.shell997b4-stage{
  padding:calc(var(--shell997b4-band-h) + env(safe-area-inset-top) + 14px) 14px calc(var(--shell997b4-dock-h) + env(safe-area-inset-bottom) + 44px);
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ------------------------------- hero ------------------------------- */
.shell997b4-hero{
  border:1px solid var(--shell997b4-line);
  border-radius:var(--shell997b4-rad-card);
  background:
    radial-gradient(90% 70% at 85% 0%,rgba(255,179,71,.16),transparent 62%),
    linear-gradient(165deg,#3A3A3A,#2A2A2A);
  padding:20px 16px 18px;
}

.shell997b4-kick{
  font-family:var(--shell997b4-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--shell997b4-amber);
  display:flex;
  align-items:center;
  gap:8px;
}

.shell997b4-kick::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--shell997b4-amber);
  flex:none;
}

.shell997b4-hero h1{
  margin:10px 0 12px;
  font-size:clamp(23px,6.2vw,29px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.2px;
}

.shell997b4-herolead{
  color:var(--shell997b4-mute);
  font-size:14px;
}

.shell997b4-herolead strong{color:var(--shell997b4-ink);font-weight:700;}

.shell997b4-heroline{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--shell997b4-mono);
  font-size:10.5px;
  letter-spacing:1.6px;
  color:var(--shell997b4-faint);
  text-transform:uppercase;
}

.shell997b4-heroline b{color:var(--shell997b4-amber);font-weight:600;}

.shell997b4-ctarow{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.shell997b4-cta{
  min-height:var(--shell997b4-tap);
  border-radius:var(--shell997b4-rad-btn);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .18s var(--shell997b4-ease),box-shadow .18s var(--shell997b4-ease),border-color .18s var(--shell997b4-ease);
}

.shell997b4-cta svg{width:16px;height:16px;flex:none;}

.shell997b4-cta-solid{
  background:linear-gradient(180deg,var(--shell997b4-amber-hi),var(--shell997b4-amber-lo));
  color:var(--shell997b4-coal);
  box-shadow:0 6px 18px rgba(255,179,71,.3);
}

.shell997b4-cta-ghost{
  border:1px solid var(--shell997b4-amber-line);
  color:var(--shell997b4-amber);
  background:var(--shell997b4-amber-wash);
}

.shell997b4-cta:active{
  transform:translateY(1px) scale(.99);
}

/* ----------------------------- meter chips ----------------------------- */
.shell997b4-meter{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.shell997b4-metercell{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 12px;
  border-radius:var(--shell997b4-rad-card);
  border:1px solid var(--shell997b4-line);
  background:var(--shell997b4-coal-2);
}

.shell997b4-metercell b{
  font-family:var(--shell997b4-mono);
  font-size:17px;
  font-weight:700;
  color:var(--shell997b4-amber);
  letter-spacing:.5px;
}

.shell997b4-metercell span{
  font-size:11px;
  color:var(--shell997b4-mute);
  line-height:1.35;
}

/* ------------------------------ film reel ------------------------------ */
.shell997b4-filmwrap{
  position:relative;
}

.shell997b4-film{
  border-radius:var(--shell997b4-rad-card);
  overflow:hidden;
  border:1px solid var(--shell997b4-line);
  background:var(--shell997b4-coal-3);
  display:flex;
  scroll-snap-type:x mandatory;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.shell997b4-film::-webkit-scrollbar{display:none;}

.shell997b4-slide{
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:center;
  position:relative;
}

.shell997b4-slide button{
  display:block;
  width:100%;
}

.shell997b4-slide img{
  width:100%;
  aspect-ratio:10/4;
  object-fit:cover;
}

.shell997b4-slidetip{
  position:absolute;
  left:10px;
  bottom:10px;
  font-family:var(--shell997b4-mono);
  font-size:9.5px;
  letter-spacing:1.8px;
  font-weight:600;
  color:var(--shell997b4-coal);
  background:var(--shell997b4-amber);
  border-radius:5px;
  padding:4px 8px;
  pointer-events:none;
}

.shell997b4-filmfoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:9px;
  padding:0 2px;
}

.shell997b4-filmnote{
  font-family:var(--shell997b4-mono);
  font-size:9.5px;
  letter-spacing:1.6px;
  color:var(--shell997b4-faint);
  text-transform:uppercase;
}

.shell997b4-dots{
  display:flex;
  gap:14px;
}

.shell997b4-dot{
  width:var(--shell997b4-tap);
  height:26px;
  display:grid;
  place-items:center;
}

.shell997b4-dot i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--shell997b4-line-2);
  transition:width .2s var(--shell997b4-ease),background .2s var(--shell997b4-ease);
}

.shell997b4-dot span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.shell997b4-dot-on i{
  width:22px;
  border-radius:5px;
  background:var(--shell997b4-amber);
}

/* ------------------------------- shelves ------------------------------- */
.shell997b4-shelf{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.shell997b4-shelfhead{
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--shell997b4-line-2);
}

.shell997b4-shelfno{
  font-family:var(--shell997b4-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  color:var(--shell997b4-coal);
  background:var(--shell997b4-amber);
  border-radius:5px;
  padding:3px 7px;
  margin-bottom:4px;
  white-space:nowrap;
}

.shell997b4-shelf h2{
  font-size:clamp(17.5px,4.6vw,20.5px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
}

.shell997b4-shelflead{
  color:var(--shell997b4-mute);
  font-size:13px;
}

.shell997b4-shelflead b{color:var(--shell997b4-ink);font-weight:700;}

/* Game strips: horizontal icon + name bars, two per row. */
.shell997b4-strips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.shell997b4-strip{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:62px;
  padding:8px;
  border-radius:var(--shell997b4-rad-card);
  border:1px solid var(--shell997b4-line);
  background:var(--shell997b4-coal-2);
  text-align:left;
  transition:transform .16s var(--shell997b4-ease),border-color .16s var(--shell997b4-ease),background .16s var(--shell997b4-ease);
}

.shell997b4-strip:active{
  transform:translateY(-2px);
  border-color:var(--shell997b4-amber);
  background:#313131;
}

.shell997b4-stripimg{
  width:46px;
  height:46px;
  border-radius:9px;
  object-fit:cover;
  border:1px solid rgba(250,250,250,.14);
  background:var(--shell997b4-coal-3);
  flex:none;
}

.shell997b4-stripname{
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--shell997b4-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:355px){
  .shell997b4-strip{gap:7px;padding:7px;}
  .shell997b4-stripimg{width:42px;height:42px;}
  .shell997b4-stripname{font-size:12px;}
}

/* ------------------------------ text blocks ------------------------------ */
.shell997b4-block{
  border:1px solid var(--shell997b4-line);
  border-radius:var(--shell997b4-rad-card);
  background:linear-gradient(180deg,#2E2E2E,#292929);
  padding:18px 15px 16px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.shell997b4-blockhead{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shell997b4-block h2{
  font-size:clamp(17.5px,4.7vw,21px);
  line-height:1.26;
  font-weight:800;
}

.shell997b4-verdict{
  border-left:3px solid var(--shell997b4-amber);
  padding:8px 0 8px 12px;
  color:var(--shell997b4-ink);
  font-weight:600;
  font-size:13.5px;
  background:linear-gradient(90deg,var(--shell997b4-amber-wash),transparent 78%);
  border-radius:0 8px 8px 0;
}

.shell997b4-block p{
  color:var(--shell997b4-mute);
  font-size:13.5px;
}

.shell997b4-block p strong,
.shell997b4-block li strong{color:var(--shell997b4-ink);font-weight:700;}

/* Checklist rows */
.shell997b4-checklist{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shell997b4-checklist li{
  position:relative;
  padding:9px 10px 9px 34px;
  border:1px solid var(--shell997b4-line);
  border-radius:9px;
  background:rgba(250,250,250,.025);
  color:var(--shell997b4-mute);
  font-size:13px;
  line-height:1.55;
}

.shell997b4-checklist li::before{
  content:"";
  position:absolute;
  left:11px;
  top:14px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--shell997b4-amber);
  box-shadow:0 0 0 3px var(--shell997b4-amber-wash);
}

/* Compare rows */
.shell997b4-compare{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.shell997b4-comparerow{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:9px 11px;
  border-radius:9px;
  border:1px solid var(--shell997b4-line);
  background:rgba(250,250,250,.025);
}

.shell997b4-comparekey{
  font-family:var(--shell997b4-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--shell997b4-amber);
  white-space:nowrap;
}

.shell997b4-compareval{
  font-size:13px;
  color:var(--shell997b4-mute);
  line-height:1.5;
}

/* Quotes */
.shell997b4-voices{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.shell997b4-voice{
  border:1px solid var(--shell997b4-line);
  border-left:3px solid var(--shell997b4-amber);
  border-radius:0 10px 10px 0;
  background:rgba(250,250,250,.03);
  padding:11px 12px;
}

.shell997b4-voice q{
  display:block;
  color:var(--shell997b4-ink);
  font-size:13.5px;
  line-height:1.55;
  quotes:"\201C" "\201D";
}

.shell997b4-voicewho{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--shell997b4-mono);
  font-size:10px;
  letter-spacing:1.2px;
  color:var(--shell997b4-faint);
  text-transform:uppercase;
}

.shell997b4-voicewho b{color:var(--shell997b4-amber);font-weight:700;}

/* Scenario cards */
.shell997b4-scenes{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shell997b4-scene{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:10px;
  padding:11px;
  border:1px solid var(--shell997b4-line);
  border-radius:10px;
  background:rgba(250,250,250,.025);
  transition:transform .16s var(--shell997b4-ease),border-color .16s var(--shell997b4-ease);
}

.shell997b4-scene:active{
  transform:translateY(-2px);
  border-color:var(--shell997b4-amber);
}

.shell997b4-sceneno{
  font-family:var(--shell997b4-mono);
  font-size:13px;
  font-weight:700;
  color:var(--shell997b4-coal);
  background:var(--shell997b4-amber);
  border-radius:8px;
  display:grid;
  place-items:center;
  min-height:40px;
}

.shell997b4-scene h3{
  font-size:14px;
  font-weight:700;
  margin-bottom:3px;
}

.shell997b4-scene p{
  color:var(--shell997b4-mute);
  font-size:12.5px;
  line-height:1.55;
}

/* Card entrance lift (menu slide-in pairs with card lift) */
.shell997b4-lift{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--shell997b4-ease),transform .5s var(--shell997b4-ease);
}

.shell997b4-lifted{
  opacity:1;
  transform:none;
}

/* ------------------------------ dossier ------------------------------ */
.shell997b4-dossier{
  border:1px solid var(--shell997b4-line-2);
  border-radius:var(--shell997b4-rad-card);
  background:var(--shell997b4-coal-3);
  padding:18px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.shell997b4-dossier section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.shell997b4-dossier h2{
  font-family:var(--shell997b4-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--shell997b4-amber);
  padding-bottom:7px;
  border-bottom:1px dashed var(--shell997b4-line-2);
}

/* Two-column page directory */
.shell997b4-dirgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.shell997b4-diritem{
  display:block;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--shell997b4-line);
  border-radius:9px;
  background:rgba(250,250,250,.03);
  color:var(--shell997b4-ink);
  text-decoration:none;
  font-size:12px;
  line-height:1.4;
}

.shell997b4-diritem:hover{
  text-decoration:none;
  border-color:var(--shell997b4-amber);
}

.shell997b4-diritem:active{transform:translateY(1px);}

.shell997b4-diritem b{
  display:block;
  font-weight:700;
  font-size:12.5px;
}

.shell997b4-diritem span{
  color:var(--shell997b4-faint);
  font-size:11px;
}

.shell997b4-brandnote{
  color:var(--shell997b4-mute);
  font-size:13px;
}

/* Promotion action rows */
.shell997b4-promorow{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shell997b4-promoact{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--shell997b4-tap);
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--shell997b4-amber-line);
  background:var(--shell997b4-amber-wash);
  color:var(--shell997b4-ink);
  font-size:13px;
  font-weight:600;
  text-align:left;
  transition:transform .16s var(--shell997b4-ease),background .16s var(--shell997b4-ease);
}

.shell997b4-promoact:active{
  transform:translateY(1px);
  background:rgba(255,179,71,.22);
}

.shell997b4-promoact svg{
  width:16px;
  height:16px;
  color:var(--shell997b4-amber);
  flex:none;
}

.shell997b4-promoact i{
  margin-left:auto;
  font-style:normal;
  font-family:var(--shell997b4-mono);
  font-size:10px;
  letter-spacing:1.2px;
  color:var(--shell997b4-faint);
  white-space:nowrap;
}

.shell997b4-note{
  border:1px solid var(--shell997b4-line);
  border-radius:9px;
  padding:11px 12px;
  background:rgba(250,250,250,.025);
  color:var(--shell997b4-faint);
  font-size:11.5px;
  line-height:1.6;
}

.shell997b4-note strong{
  display:block;
  color:var(--shell997b4-mute);
  font-family:var(--shell997b4-mono);
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:6px;
}

.shell997b4-agechip{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:20px;
  border-radius:4px;
  border:1px solid var(--shell997b4-line-2);
  font-family:var(--shell997b4-mono);
  font-size:10px;
  font-weight:700;
  color:var(--shell997b4-amber);
  vertical-align:-4px;
  margin-left:6px;
}

/* ------------------------------ foot bar ------------------------------ */
.shell997b4-footbar{
  text-align:center;
  padding:4px 0 2px;
}

.shell997b4-footbar p{
  font-family:var(--shell997b4-mono);
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--shell997b4-faint);
  text-transform:uppercase;
}

/* --------------------------- bottom brand dock --------------------------- */
.shell997b4-dock{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--shell997b4-canvas);
  height:calc(var(--shell997b4-dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  z-index:80;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
  background:rgba(26,26,26,.97);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:2px solid var(--shell997b4-amber);
}

.shell997b4-dockcell{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:var(--shell997b4-tap);
  color:var(--shell997b4-mute);
  text-decoration:none;
  border-radius:10px;
  transition:color .16s var(--shell997b4-ease),background .16s var(--shell997b4-ease);
}

.shell997b4-dockcell:hover{text-decoration:none;}

.shell997b4-dockcell svg{
  width:22px;
  height:22px;
  transition:transform .18s var(--shell997b4-ease);
}

.shell997b4-dockcell span{
  font-size:10px;
  font-weight:600;
  letter-spacing:.3px;
  opacity:.72;
  transition:opacity .18s var(--shell997b4-ease);
}

.shell997b4-dockcell:active svg{transform:translateY(-2px);}

/* Contrast-inversion active state for the current page. */
.shell997b4-dockcell-on{
  background:var(--shell997b4-amber);
  color:var(--shell997b4-coal);
  margin:6px 5px 0;
  border-radius:11px;
  box-shadow:0 5px 16px rgba(255,179,71,.3);
}

.shell997b4-dockcell-on span{opacity:1;color:var(--shell997b4-coal);}

/* Raised center promo hub */
.shell997b4-dockhub{
  background:none;
  color:var(--shell997b4-ink);
}

.shell997b4-dockhub i{
  width:54px;
  height:54px;
  margin-top:-26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--shell997b4-amber-hi),var(--shell997b4-amber-lo));
  color:var(--shell997b4-coal);
  border:3px solid #232323;
  box-shadow:0 8px 20px rgba(255,179,71,.38);
  transition:transform .18s var(--shell997b4-ease);
}

.shell997b4-dockhub:active i{transform:translateY(2px) scale(.97);}

.shell997b4-dockhub svg{width:24px;height:24px;}

.shell997b4-dockhub span{opacity:.9;}

/* --------------------------- slide-up route sheet --------------------------- */
.shell997b4-scrim{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(12,12,12,.62);
  opacity:0;
  pointer-events:none;
  transition:opacity .26s var(--shell997b4-ease);
}

.shell997b4-scrim-on{opacity:1;pointer-events:auto;}

.shell997b4-sheet{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translate(-50%,102%);
  width:100%;
  max-width:var(--shell997b4-canvas);
  max-height:78vh;
  z-index:95;
  display:flex;
  flex-direction:column;
  background:#262626;
  border:1px solid var(--shell997b4-line-2);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.5);
  transition:transform .32s var(--shell997b4-ease);
}

.shell997b4-sheet-on{transform:translate(-50%,0);}

.shell997b4-sheetgrip{
  padding:10px 16px 4px;
}

.shell997b4-sheetgrip i{
  display:block;
  width:44px;
  height:4px;
  border-radius:3px;
  background:var(--shell997b4-line-2);
  margin:0 auto;
}

.shell997b4-sheethead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 16px 10px;
  border-bottom:1px dashed var(--shell997b4-line-2);
}

.shell997b4-sheettitle{
  font-family:var(--shell997b4-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.2px;
  color:var(--shell997b4-amber);
  text-transform:uppercase;
}

.shell997b4-sheetclose{
  min-width:var(--shell997b4-tap);
  min-height:var(--shell997b4-tap);
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid var(--shell997b4-line-2);
  color:var(--shell997b4-ink);
}

.shell997b4-sheetclose svg{width:18px;height:18px;}

.shell997b4-sheetbody{
  overflow-y:auto;
  padding:12px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
}

.shell997b4-routegroup{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.shell997b4-routegroup > p{
  font-family:var(--shell997b4-mono);
  font-size:9.5px;
  letter-spacing:2px;
  color:var(--shell997b4-faint);
  text-transform:uppercase;
  padding-left:2px;
}

.shell997b4-route{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--shell997b4-tap);
  padding:9px 12px;
  border-radius:9px;
  border:1px solid var(--shell997b4-line);
  background:rgba(250,250,250,.03);
  color:var(--shell997b4-ink);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:border-color .16s var(--shell997b4-ease),background .16s var(--shell997b4-ease);
}

.shell997b4-route:hover{
  text-decoration:none;
  border-color:var(--shell997b4-amber);
  background:var(--shell997b4-amber-wash);
}

.shell997b4-route-on{
  border-color:var(--shell997b4-amber);
  background:var(--shell997b4-amber-wash);
}

.shell997b4-route svg{
  width:17px;
  height:17px;
  color:var(--shell997b4-amber);
  flex:none;
}

.shell997b4-sheetcta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding-top:4px;
}

/* -------------------------- help-page additions -------------------------- */
.shell997b4-faqzone,.shell997b4-faqpromos,.shell997b4-guidepromos,.shell997b4-steprail{display:flex;flex-direction:column;gap:12px;}
.shell997b4-faqmarker{display:flex;align-items:flex-end;gap:10px;padding-bottom:8px;border-bottom:1px dashed var(--shell997b4-line-2);}
.shell997b4-faqmarker span,.shell997b4-stepbadge{display:grid;place-items:center;min-width:38px;min-height:38px;border-radius:8px;background:var(--shell997b4-amber);color:var(--shell997b4-coal);font-family:var(--shell997b4-mono);font-weight:800;font-size:12px;}
.shell997b4-faqmarker h2,.shell997b4-stephead h2{font-size:clamp(17px,4.6vw,20px);line-height:1.25;font-weight:800;}
.shell997b4-answer{border:1px solid var(--shell997b4-line);border-radius:10px;background:var(--shell997b4-coal-2);overflow:hidden;}
.shell997b4-answer summary{min-height:var(--shell997b4-tap);display:flex;align-items:center;padding:10px 12px;cursor:pointer;color:var(--shell997b4-ink);font-size:13.5px;font-weight:700;list-style:none;}
.shell997b4-answer summary::-webkit-details-marker{display:none;}
.shell997b4-answer summary::after{content:"+";margin-left:auto;color:var(--shell997b4-amber);font-family:var(--shell997b4-mono);font-size:18px;}
.shell997b4-answer[open] summary{border-bottom:1px dashed var(--shell997b4-line-2);}
.shell997b4-answer[open] summary::after{content:"-";}
.shell997b4-answer>div{padding:11px 12px 13px;display:flex;flex-direction:column;gap:9px;}
.shell997b4-answer p{color:var(--shell997b4-mute);font-size:13.2px;line-height:1.62;}
.shell997b4-answer strong{color:var(--shell997b4-ink);}
.shell997b4-steprail{border:1px solid var(--shell997b4-line);border-radius:var(--shell997b4-rad-card);background:linear-gradient(145deg,#303030,#272727);padding:15px 14px 16px;}
.shell997b4-stephead{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--shell997b4-line-2);}
.shell997b4-stephead .shell997b4-kick{margin-top:2px;}
.shell997b4-stepbody{display:flex;flex-direction:column;gap:11px;}
.shell997b4-stepbody>p{color:var(--shell997b4-mute);font-size:13.5px;}
.shell997b4-branch{display:grid;grid-template-columns:minmax(90px,.42fr) 1fr;gap:10px;padding:10px 11px;border-left:3px solid var(--shell997b4-amber);border-radius:0 9px 9px 0;background:var(--shell997b4-amber-wash);}
.shell997b4-branch b{color:var(--shell997b4-amber);font-family:var(--shell997b4-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;}
.shell997b4-branch span{color:var(--shell997b4-mute);font-size:12.5px;line-height:1.5;}
.shell997b4-numberlist,.shell997b4-reviewlist{display:flex;flex-direction:column;gap:7px;counter-reset:shell997b4-list;}
.shell997b4-numberlist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--shell997b4-line);border-radius:8px;background:rgba(250,250,250,.025);color:var(--shell997b4-mute);font-size:13px;}
.shell997b4-numberlist b{display:grid;place-items:center;min-width:31px;height:27px;border-radius:5px;background:var(--shell997b4-amber);color:var(--shell997b4-coal);font-family:var(--shell997b4-mono);font-size:10px;}
.shell997b4-reviewlist{list-style:none;}
.shell997b4-reviewlist li{padding:9px 10px 9px 34px;border:1px solid var(--shell997b4-line);border-radius:9px;background:rgba(250,250,250,.025);color:var(--shell997b4-mute);font-size:13px;position:relative;}
.shell997b4-reviewlist li::before{content:"+";position:absolute;left:11px;top:9px;color:var(--shell997b4-amber);font-family:var(--shell997b4-mono);font-weight:800;}
.shell997b4-reviewlist strong,.shell997b4-reviewlist b{color:var(--shell997b4-ink);}

/* ------------------------------ motion budget ------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .shell997b4-lift{opacity:1;transform:none;}
}