/* ==========================================================================
   54c.click mobile interface stylesheet
   All classes use the shellec3e7- prefix. Canvas: 320-430px phone layout.
   Palette: #F4A460 sand | #4DB6AC teal | #FAF0E6 linen | #2C3E50 ink
            #F5DEB3 wheat accents. Dark ink = surface, light = text.
   Feel: rounded display type over compact body text, near-square corners,
   mixed big/small game tiles, conclusion-first copy, color-only motion.
   ========================================================================== */

:root {
  --shellec3e7-ink: #2C3E50;
  --shellec3e7-inkDeep: #22303f;
  --shellec3e7-inkLine: #1a2632;
  --shellec3e7-linen: #FAF0E6;
  --shellec3e7-wheat: #F5DEB3;
  --shellec3e7-sand: #F4A460;
  --shellec3e7-sandDeep: #d98a45;
  --shellec3e7-teal: #4DB6AC;
  --shellec3e7-tealDeep: #2f948a;
  --shellec3e7-hair: rgba(250, 240, 230, 0.14);
  --shellec3e7-hairSoft: rgba(250, 240, 230, 0.08);
  --shellec3e7-radius: 4px;
  --shellec3e7-radiusBig: 6px;
  --shellec3e7-fontShow: "Arial Rounded MT Bold", ui-rounded, "Segoe UI", "Nunito", system-ui, sans-serif;
  --shellec3e7-fontBody: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --shellec3e7-topH: 60px;
  --shellec3e7-tabH: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: #1a2531;
  color: var(--shellec3e7-linen);
  font-family: var(--shellec3e7-fontBody);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

body.shellec3e7-noScroll { overflow: hidden; }

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

a { color: var(--shellec3e7-teal); text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--shellec3e7-teal);
  outline-offset: 2px;
}

/* Phone canvas: stays centered on wide screens */
.shellec3e7-shell {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--shellec3e7-ink);
  box-shadow: 0 0 0 1px var(--shellec3e7-inkLine), 0 0 34px rgba(0, 0, 0, 0.45);
  overflow-x: hidden;
}

/* ==========================================================================
   Top action strip (minimal brand + compact CTA pair)
   ========================================================================== */
.shellec3e7-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--shellec3e7-topH);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, #31445a 0%, var(--shellec3e7-ink) 100%);
  border-bottom: 2px solid var(--shellec3e7-teal);
}

.shellec3e7-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.shellec3e7-brandLogo {
  width: 34px;
  height: 34px;
  border-radius: var(--shellec3e7-radius);
  border: 1px solid var(--shellec3e7-hair);
  object-fit: cover;
  background: var(--shellec3e7-inkDeep);
  flex: none;
}

.shellec3e7-brandName {
  font-family: var(--shellec3e7-fontShow);
  font-size: 21px;
  font-weight: 700;
  color: var(--shellec3e7-sand);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.shellec3e7-topActions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Compact dual-button CTA group */
.shellec3e7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: var(--shellec3e7-radius);
  font-family: var(--shellec3e7-fontBody);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-btn:active { transform: scale(0.95); }

.shellec3e7-btnRegister {
  background: var(--shellec3e7-sand);
  color: #46280c;
}

.shellec3e7-btnRegister:hover,
.shellec3e7-btnRegister:focus-visible {
  background: var(--shellec3e7-wheat);
}

.shellec3e7-btnLogin {
  background: var(--shellec3e7-teal);
  color: #08272a;
}

.shellec3e7-btnLogin:hover,
.shellec3e7-btnLogin:focus-visible {
  background: #6ecfc5;
}

.shellec3e7-menuBtn {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shellec3e7-inkDeep);
  border: 1px solid var(--shellec3e7-hair);
  border-radius: var(--shellec3e7-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.shellec3e7-menuBtn:active { transform: scale(0.95); }

.shellec3e7-menuBtn svg { display: block; }

/* ==========================================================================
   Slide-up route panel
   ========================================================================== */
.shellec3e7-menuBackdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 19, 27, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.shellec3e7-menuBackdrop.shellec3e7-menuOpen { opacity: 1; visibility: visible; pointer-events: auto; }
.shellec3e7-menuBackdrop { pointer-events: none; }

.shellec3e7-menuPanel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 430px;
  max-height: 74vh;
  overflow-y: auto;
  z-index: 80;
  background: var(--shellec3e7-inkDeep);
  border-top: 2px solid var(--shellec3e7-sand);
  border-radius: 10px 10px 0 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.26s ease;
}

.shellec3e7-menuPanel.shellec3e7-menuOpen { transform: translate(-50%, 0); }

.shellec3e7-menuHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shellec3e7-menuTitle {
  font-family: var(--shellec3e7-fontShow);
  font-size: 15px;
  color: var(--shellec3e7-wheat);
}

.shellec3e7-menuClose {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--shellec3e7-hair);
  border-radius: var(--shellec3e7-radius);
  color: var(--shellec3e7-linen);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.shellec3e7-menuClose:active { transform: scale(0.95); }

.shellec3e7-menuGroup {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shellec3e7-teal);
}

.shellec3e7-menuRoutes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.shellec3e7-menuRoutes a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  background: rgba(250, 240, 230, 0.05);
  border: 1px solid var(--shellec3e7-hairSoft);
  border-radius: var(--shellec3e7-radius);
  color: var(--shellec3e7-linen);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-menuRoutes a:hover,
.shellec3e7-menuRoutes a:focus-visible {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
}

.shellec3e7-menuRoutes a:active { transform: scale(0.97); }

.shellec3e7-menuRoutes .shellec3e7-menuNote {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--shellec3e7-teal);
}

.shellec3e7-menuRoutes a:hover .shellec3e7-menuNote,
.shellec3e7-menuRoutes a:focus-visible .shellec3e7-menuNote {
  color: #1d5a54;
}

.shellec3e7-menuCta {
  margin-top: 10px;
  width: 100%;
  min-height: 48px;
}

/* ==========================================================================
   Main column
   ========================================================================== */
.shellec3e7-main {
  padding: calc(var(--shellec3e7-topH) + 12px) 12px calc(var(--shellec3e7-tabH) + 30px + env(safe-area-inset-bottom, 0px));
}

section { scroll-margin-top: calc(var(--shellec3e7-topH) + 8px); }

.shellec3e7-sec { margin-top: 22px; }

/* Hero -------------------------------------------------------------------- */
.shellec3e7-hero { margin-top: 2px; }

.shellec3e7-heroKicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border: 1px solid var(--shellec3e7-teal);
  border-radius: var(--shellec3e7-radius);
  color: var(--shellec3e7-teal);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shellec3e7-h1 {
  font-family: var(--shellec3e7-fontShow);
  font-size: 24px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--shellec3e7-linen);
  margin-bottom: 8px;
}

.shellec3e7-h1 b { color: var(--shellec3e7-sand); font-weight: 700; }

.shellec3e7-heroLead {
  font-size: 13.5px;
  color: rgba(250, 240, 230, 0.86);
  margin-bottom: 12px;
}

/* Carousel ---------------------------------------------------------------- */
.shellec3e7-caro {
  position: relative;
  overflow: hidden;
  border-radius: var(--shellec3e7-radiusBig);
  border: 1px solid var(--shellec3e7-hair);
  background: var(--shellec3e7-inkDeep);
}

.shellec3e7-caroTrack {
  display: flex;
  transition: transform 0.34s ease;
}

.shellec3e7-caroItem {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: block;
  cursor: pointer;
}

.shellec3e7-caroItem img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.shellec3e7-caroCap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(180deg, rgba(26, 38, 50, 0) 0%, rgba(26, 38, 50, 0.92) 78%);
  font-size: 12px;
  font-weight: 600;
  color: var(--shellec3e7-wheat);
  pointer-events: none;
}

.shellec3e7-caroCap small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(250, 240, 230, 0.82);
}

.shellec3e7-caroDots {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 5px;
  z-index: 5;
}

.shellec3e7-caroDots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--shellec3e7-linen);
  border-radius: 2px;
  background: rgba(250, 240, 230, 0.25);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.shellec3e7-caroDots button.shellec3e7-dotActive {
  background: var(--shellec3e7-sand);
  border-color: var(--shellec3e7-sand);
}

/* Category chips ----------------------------------------------------------- */
.shellec3e7-chips {
  display: flex;
  gap: 7px;
  margin: 14px 0 2px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.shellec3e7-chips::-webkit-scrollbar { display: none; }

.shellec3e7-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--shellec3e7-hair);
  border-radius: var(--shellec3e7-radius);
  background: rgba(250, 240, 230, 0.05);
  color: var(--shellec3e7-linen);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-chip i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.shellec3e7-chip:hover,
.shellec3e7-chip:focus-visible {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
}

.shellec3e7-chip:active { transform: scale(0.96); }

/* Section head ------------------------------------------------------------ */
.shellec3e7-secHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  border-left: 3px solid var(--shellec3e7-sand);
  padding-left: 9px;
}

.shellec3e7-h2 {
  font-family: var(--shellec3e7-fontShow);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--shellec3e7-linen);
}

.shellec3e7-secCount {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--shellec3e7-teal);
  border: 1px solid var(--shellec3e7-hair);
  border-radius: 3px;
  padding: 2px 6px;
}

.shellec3e7-secIntro {
  font-size: 13px;
  color: rgba(250, 240, 230, 0.84);
  margin-bottom: 10px;
}

.shellec3e7-secIntro a { font-weight: 700; color: var(--shellec3e7-teal); border-bottom: 1px dotted var(--shellec3e7-teal); }

/* ==========================================================================
   Game grids: mixed big + small tiles, 4 stable tracks
   ========================================================================== */
.shellec3e7-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 7px;
}

.shellec3e7-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 5px 4px 6px;
  background: rgba(250, 240, 230, 0.045);
  border: 1px solid var(--shellec3e7-hairSoft);
  border-radius: var(--shellec3e7-radius);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.shellec3e7-tile:hover,
.shellec3e7-tile:focus-visible {
  border-color: var(--shellec3e7-sand);
  background: rgba(244, 164, 96, 0.1);
}

.shellec3e7-tile:active { transform: scale(0.95); }

.shellec3e7-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  background: var(--shellec3e7-inkLine);
}

.shellec3e7-tile span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  color: rgba(250, 240, 230, 0.92);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Big tile: spans two tracks for the leading titles */
.shellec3e7-tileBig {
  grid-column: span 2;
  padding: 7px 6px 8px;
  background: rgba(77, 182, 172, 0.08);
  border-color: rgba(77, 182, 172, 0.35);
}

.shellec3e7-tileBig span {
  font-size: 12.5px;
  -webkit-line-clamp: 2;
  color: var(--shellec3e7-wheat);
}

/* Related-route strip under each grid */
.shellec3e7-strip {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.shellec3e7-strip a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 7px 9px;
  border: 1px dashed rgba(244, 164, 96, 0.55);
  border-radius: var(--shellec3e7-radius);
  background: rgba(244, 164, 96, 0.06);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--shellec3e7-wheat);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-strip a small {
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(250, 240, 230, 0.7);
}

.shellec3e7-strip a:hover,
.shellec3e7-strip a:focus-visible {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
}

.shellec3e7-strip a:hover small,
.shellec3e7-strip a:focus-visible small { color: #56411f; }

.shellec3e7-strip a:active { transform: scale(0.97); }

/* ==========================================================================
   Info modules (app / payments / comparison / requirements)
   ========================================================================== */
.shellec3e7-module {
  margin-top: 12px;
  padding: 12px 11px;
  background: rgba(250, 240, 230, 0.04);
  border: 1px solid var(--shellec3e7-hairSoft);
  border-radius: var(--shellec3e7-radiusBig);
}

.shellec3e7-moduleLead {
  font-size: 13px;
  color: rgba(250, 240, 230, 0.9);
  margin-bottom: 10px;
}

.shellec3e7-module p { margin-bottom: 8px; font-size: 13px; color: rgba(250, 240, 230, 0.84); }

.shellec3e7-module p:last-child { margin-bottom: 0; }

.shellec3e7-module a {
  color: var(--shellec3e7-teal);
  font-weight: 700;
  border-bottom: 1px dotted var(--shellec3e7-teal);
}

/* App module: step rail */
.shellec3e7-steps {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}

.shellec3e7-step {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 9px;
  background: rgba(34, 48, 63, 0.7);
  border: 1px solid var(--shellec3e7-hairSoft);
  border-radius: var(--shellec3e7-radius);
}

.shellec3e7-stepNum {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--shellec3e7-teal);
  color: #08272a;
  font-size: 12px;
  font-weight: 800;
}

.shellec3e7-step b { display: block; font-size: 12.5px; color: var(--shellec3e7-wheat); }

.shellec3e7-step p { margin: 1px 0 0; font-size: 12px; }

/* Payment module: channel rows */
.shellec3e7-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.shellec3e7-channel {
  padding: 9px 10px;
  border: 1px solid var(--shellec3e7-hairSoft);
  border-left: 3px solid var(--shellec3e7-teal);
  border-radius: var(--shellec3e7-radius);
  background: rgba(34, 48, 63, 0.7);
}

.shellec3e7-channel b {
  display: block;
  font-size: 12.5px;
  color: var(--shellec3e7-linen);
}

.shellec3e7-channel span { font-size: 11.5px; color: rgba(250, 240, 230, 0.72); }

/* Comparison module: three-track compare rows */
.shellec3e7-cmp {
  margin-top: 10px;
  border: 1px solid var(--shellec3e7-hair);
  border-radius: var(--shellec3e7-radius);
  overflow: hidden;
}

.shellec3e7-cmpRow {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
}

.shellec3e7-cmpRow > div {
  padding: 8px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  border-top: 1px solid var(--shellec3e7-hairSoft);
  border-left: 1px solid var(--shellec3e7-hairSoft);
  overflow-wrap: break-word;
}

.shellec3e7-cmpRow > div:first-child { border-left: none; }

.shellec3e7-cmpHead > div {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
  font-weight: 800;
  font-size: 11.5px;
  border-top: none;
}

.shellec3e7-cmpKey {
  font-weight: 700;
  color: var(--shellec3e7-wheat);
  background: rgba(245, 222, 179, 0.07);
}

/* Requirements module: checklist */
.shellec3e7-reqList {
  list-style: none;
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.shellec3e7-reqList li {
  position: relative;
  padding: 9px 10px 9px 30px;
  border: 1px solid var(--shellec3e7-hairSoft);
  border-radius: var(--shellec3e7-radius);
  background: rgba(34, 48, 63, 0.7);
  font-size: 12.5px;
  color: rgba(250, 240, 230, 0.88);
}

.shellec3e7-reqList li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--shellec3e7-sand);
}

.shellec3e7-reqList b { color: var(--shellec3e7-wheat); }

/* ==========================================================================
   Extended footer: brand > page directory > promo shortcuts > disclaimer
   ========================================================================== */
.shellec3e7-ext {
  margin-top: 26px;
  padding: 14px 12px 4px;
  border-top: 2px solid var(--shellec3e7-teal);
  background: var(--shellec3e7-inkDeep);
}

.shellec3e7-extBrand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.shellec3e7-extBrand img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--shellec3e7-radius);
  border: 1px solid var(--shellec3e7-hair);
  object-fit: cover;
}

.shellec3e7-extBrand h2 {
  font-family: var(--shellec3e7-fontShow);
  font-size: 16px;
  color: var(--shellec3e7-sand);
  margin-bottom: 3px;
}

.shellec3e7-extBrand p { font-size: 12px; color: rgba(250, 240, 230, 0.78); }

.shellec3e7-extBlockTitle {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--shellec3e7-teal);
}

/* Page directory: horizontal chip wrap, every route once */
.shellec3e7-directory {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shellec3e7-directory a {
  padding: 6px 9px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shellec3e7-hair);
  border-radius: var(--shellec3e7-radius);
  background: rgba(250, 240, 230, 0.05);
  color: var(--shellec3e7-linen);
  font-size: 11.5px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-directory a:hover,
.shellec3e7-directory a:focus-visible {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
}

/* Promo shortcuts: five descriptive horizontal entries */
.shellec3e7-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shellec3e7-shortcut {
  flex: 1 1 45%;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 9px;
  border: none;
  border-radius: var(--shellec3e7-radius);
  font-family: var(--shellec3e7-fontBody);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-shortcut:active { transform: scale(0.96); }

.shellec3e7-shortcutA { background: var(--shellec3e7-sand); color: #46280c; }
.shellec3e7-shortcutA:hover, .shellec3e7-shortcutA:focus-visible { background: var(--shellec3e7-wheat); }
.shellec3e7-shortcutB { background: var(--shellec3e7-teal); color: #08272a; }
.shellec3e7-shortcutB:hover, .shellec3e7-shortcutB:focus-visible { background: #6ecfc5; }
.shellec3e7-shortcutC { background: transparent; border: 1px solid var(--shellec3e7-sand); color: var(--shellec3e7-wheat); }
.shellec3e7-shortcutC:hover, .shellec3e7-shortcutC:focus-visible { background: rgba(244, 164, 96, 0.14); }
.shellec3e7-shortcutD { background: rgba(250, 240, 230, 0.08); border: 1px solid var(--shellec3e7-hair); color: var(--shellec3e7-linen); }
.shellec3e7-shortcutD:hover, .shellec3e7-shortcutD:focus-visible { background: rgba(250, 240, 230, 0.16); }
.shellec3e7-shortcutE { background: var(--shellec3e7-wheat); color: #3c2c10; flex-basis: 100%; }
.shellec3e7-shortcutE:hover, .shellec3e7-shortcutE:focus-visible { background: #fff0d4; }

/* Disclaimer: conditional note */
.shellec3e7-disclaimer {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed rgba(244, 164, 96, 0.5);
  border-radius: var(--shellec3e7-radius);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(250, 240, 230, 0.68);
}

.shellec3e7-disclaimer b { color: var(--shellec3e7-sand); }

/* ==========================================================================
   Common footer (copyright only) + bottom nav rail
   ========================================================================== */
.shellec3e7-copy {
  padding: 12px 12px calc(10px + var(--shellec3e7-tabH) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  color: rgba(250, 240, 230, 0.55);
  background: var(--shellec3e7-inkDeep);
  border-top: 1px solid var(--shellec3e7-hairSoft);
}

.shellec3e7-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 65;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--shellec3e7-tabH) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, #33465c 0%, #22303f 100%);
  border-top: 2px solid var(--shellec3e7-sand);
}

.shellec3e7-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: rgba(250, 240, 230, 0.82);
  font-family: var(--shellec3e7-fontBody);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shellec3e7-tab svg { display: block; }

.shellec3e7-tab:active { transform: scale(0.93); }

/* Active role: contrast inversion */
.shellec3e7-tabActive {
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
}

.shellec3e7-tabActive .shellec3e7-ic2 { stroke: var(--shellec3e7-ink); fill: var(--shellec3e7-sand); }

.shellec3e7-tabPromo {
  color: var(--shellec3e7-wheat);
}

/* FAQ disclosure rows keep answers readable without duplicating page shells */
.shellec3e7-faqList details {
  border-top: 1px solid var(--shellec3e7-hairSoft);
  padding: 10px 0;
}
.shellec3e7-faqList details:first-child { border-top: none; padding-top: 0; }
.shellec3e7-faqList summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--shellec3e7-wheat);
  font-size: 13px;
  font-weight: 800;
  list-style-position: inside;
}
.shellec3e7-faqList details p { margin: 6px 0 0; }

/* ==========================================================================
   Small helpers and motion preferences
   ========================================================================== */
.shellec3e7-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--shellec3e7-wheat);
  color: var(--shellec3e7-ink);
  padding: 8px 12px;
  z-index: 100;
}

.shellec3e7-skip:focus { left: 8px; top: 8px; }

@media (min-width: 375px) {
  .shellec3e7-h1 { font-size: 26px; }
  .shellec3e7-tile span { font-size: 11.5px; }
  .shellec3e7-grid { gap: 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shellec3e7-caroTrack,
  .shellec3e7-menuPanel,
  .shellec3e7-menuBackdrop { transition: none; }
  .shellec3e7-btn:active,
  .shellec3e7-tile:active,
  .shellec3e7-tab:active,
  .shellec3e7-menuBtn:active,
  .shellec3e7-shortcut:active,
  .shellec3e7-strip a:active,
  .shellec3e7-chip:active,
  .shellec3e7-menuRoutes a:active { transform: none; }
}