@font-face {
  font-family: "CoolveticaLocal";
  src: local("Arial");
  font-display: swap;
}

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

:root {
  --bg: #05050a;
  --bg2: #0b0b12;
  --fg: #f7f4e8;
  --muted: #a9a1ad;
  --glass: rgba(255, 250, 230, 0.055);
  --glass-strong: rgba(255, 250, 230, 0.105);
  --warm: #ffd47a;
  --warm-soft: rgba(255, 212, 122, 0.34);
  --cool: #94e8ff;
  --rose: #ff8fcf;
  --red: #ff4d6d;
  --border: rgba(255, 244, 210, 0.16);
  --border-hover: rgba(255, 236, 170, 0.58);
  --shadow: 0 24px 70px rgba(0,0,0,.45);
}

html { scroll-behavior: smooth; }
body {
  font-family: "CoolveticaLocal", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 212, 122, 0.12), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(148, 232, 255, 0.10), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255, 143, 207, 0.08), transparent 34%),
    linear-gradient(180deg, #080810 0%, #030305 55%, #09070a 100%);
  color: var(--fg);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  opacity: .45;
  background:
    radial-gradient(circle at 11% 72%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 38%, rgba(255,255,255,0.13) 0 1.5px, transparent 3px),
    radial-gradient(circle at 67% 64%, rgba(255,255,255,0.15) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 30%, rgba(255,255,255,0.11) 0 1px, transparent 2px);
  background-size: 280px 280px, 360px 360px, 420px 420px, 310px 310px;
}
body::after {
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}

.content {
  position: relative;
  z-index: 2;
  padding: 104px clamp(18px, 4vw, 52px) 118px;
  max-width: 1380px;
  margin: 0 auto;
}

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: 66px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(19, 3, 6, .86), rgba(0, 0, 0, .54));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.36), 0 0 40px rgba(255,24,51,.08);
  backdrop-filter: blur(16px) saturate(1.2);
}

.logo { font-size: 18px; letter-spacing: .04em; text-shadow: 0 0 16px rgba(255,77,109,.45); font-weight: 900; }
.header-nav { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 3vw, 34px); }
.header-nav a, .header-nav button {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: lowercase;
  transition: color .2s ease, text-shadow .2s ease;
  background: none;
  border: 0;
  cursor: pointer;
}
.header-nav a:hover, .header-nav button:hover { color: var(--fg); text-shadow: 0 0 18px var(--warm-soft); }

.side-dock {
  position: fixed;
  z-index: 21;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(10,10,16,.54);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow);
}
.dock-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.055);
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.dock-link:hover, .dock-link.active { transform: translateY(-2px); border-color: var(--border-hover); background: rgba(255,255,255,.1); }
.dock-icon { width: 22px; height: 22px; object-fit: contain; }

.hero {
  min-height: 72vh;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(24px, 6vw, 80px);
}
.hero-title, .page-title {
  font-size: clamp(54px, 9.5vw, 128px);
  line-height: .83;
  letter-spacing: -.075em;
  text-transform: lowercase;
  text-shadow: 0 0 18px rgba(255, 77, 109, .22), 0 0 40px rgba(255, 212, 122, .12);
}
.page-title { font-size: clamp(46px, 8vw, 96px); margin-bottom: 16px; }
.hero-subtitle, .page-subtitle {
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  max-width: 760px;
}
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .02em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.hero-btn:hover, .btn:hover { transform: translateY(-2px); border-color: var(--border-hover); background: rgba(255,255,255,.11); }
.hero-btn-primary, .btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--red), var(--warm)); color: #080810; }
.btn.danger { background: rgba(255,77,109,.16); border-color: rgba(255,77,109,.45); color: #ffd7de; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }

.live-panel, .glass-card, .video-card, .admin-card, .form-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border-radius: 26px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.live-panel { overflow: hidden; }
.panel-topbar {
  height: 44px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: .08em;
}
.panel-body { padding: 20px; display: grid; gap: 14px; }
.pulse-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.09);
}
.pulse-card span { color: var(--muted); display: block; text-transform: lowercase; margin-bottom: 6px; }
.pulse-card strong { font-size: 28px; letter-spacing: -.04em; }

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
  margin: 20px 0 42px;
}
.section-title {
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: -.055em;
  margin-bottom: 18px;
  text-transform: lowercase;
}
.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.video-card { overflow: hidden; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.video-card:hover { transform: translateY(-6px); border-color: var(--border-hover); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: radial-gradient(circle at 25% 20%, rgba(255,77,109,.65), transparent 32%), linear-gradient(135deg, #161622, #08080d);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 54px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.video-info { padding: 16px; }
.video-info h3 { font-size: 22px; margin-bottom: 8px; letter-spacing: -.035em; }
.video-info p { color: var(--muted); line-height: 1.45; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
  text-transform: lowercase;
}

input, textarea, select {
  width: 100%;
  color: var(--fg);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--border-hover); }
textarea { min-height: 120px; resize: vertical; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 900; }
.form-stack { display: grid; gap: 14px; }
.form-card { padding: 22px; }

.message {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
}
.message.show { display: block; }
.message.error { color: #ffd7de; background: rgba(255,77,109,.13); }
.message.success { color: #d6fff9; background: rgba(148,232,255,.11); }

.player-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.player-topbar {
  height: 64px;
  padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.58);
}
.video-player-wrap { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.video-player-card { min-width: 0; }
video { width: 100%; max-height: 70vh; background: #000; border-radius: 20px; border: 1px solid var(--border); }
.watch-info, .comments-panel { padding: 18px; }
.comment {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  color: var(--warm);
  font-weight: 900;
  flex: 0 0 auto;
}

.admin-layout {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap: 22px;
}
.admin-sidebar {
  position: sticky;
  top: 86px;
  align-self: start;
  padding: 14px;
}
.admin-sidebar a {
  display: flex;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--muted);
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  color: var(--fg);
  background: rgba(255,255,255,.08);
}
.admin-card { padding: 20px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 13px; text-transform: lowercase; }

.search-row { display: flex; gap: 12px; margin: 20px 0; }
.search-row input { max-width: 460px; }

.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.hidden { display: none !important; }

@media (max-width: 960px) {
  .side-dock { display: none; }
  .hero, .grid.three, .grid.two, .video-player-wrap, .admin-layout { grid-template-columns: 1fr; }
  .content { padding-top: 92px; }
  .header-nav { gap: 14px; }
  .admin-sidebar { position: static; }
}

@media (max-width: 620px) {
  .topbar { height: auto; min-height: 66px; flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .header-nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .content { padding-top: 118px; }
}


/* Mobile layout only activates when app.js detects a phone and adds html.is-mobile.
   Desktop/tablet layout is untouched. */
html.is-mobile,
html.is-mobile body {
  overflow-x: hidden;
}

html.is-mobile .content {
  max-width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 100px;
}

html.is-mobile .hero {
  grid-template-columns: 1fr;
  gap: 22px;
  min-height: auto;
}

html.is-mobile .hero-title,
html.is-mobile .page-title {
  font-size: clamp(42px, 16vw, 70px);
  line-height: .9;
  word-break: break-word;
}

html.is-mobile .hero-subtitle,
html.is-mobile .page-subtitle {
  font-size: 16px;
  line-height: 1.5;
}

html.is-mobile .grid,
html.is-mobile .grid.two,
html.is-mobile .grid.three,
html.is-mobile .video-grid,
html.is-mobile .admin-layout,
html.is-mobile .video-player-wrap {
  grid-template-columns: 1fr !important;
}

html.is-mobile .hero-actions,
html.is-mobile .actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

html.is-mobile .hero-btn,
html.is-mobile .btn {
  width: 100%;
  min-height: 46px;
}

html.is-mobile .topbar {
  min-height: 64px;
  height: auto;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

html.is-mobile .header-nav {
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

html.is-mobile .header-nav a,
html.is-mobile .header-nav button {
  white-space: nowrap;
  flex: 0 0 auto;
}

html.is-mobile .side-dock {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 12px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 24px);
  display: flex;
  grid-auto-flow: column;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
}

html.is-mobile .dock-link {
  width: 42px;
  height: 42px;
}

html.is-mobile .admin-sidebar {
  position: static;
  display: flex;
  overflow-x: auto;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

html.is-mobile .admin-sidebar a {
  white-space: nowrap;
  flex: 0 0 auto;
}

html.is-mobile .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html.is-mobile table {
  min-width: 620px;
}

html.is-mobile input,
html.is-mobile textarea,
html.is-mobile select {
  font-size: 16px;
  min-height: 46px;
}

html.is-mobile video {
  max-height: 58vh;
}

html.is-mobile .footer {
  padding-bottom: 86px;
}

/* 2026 polish pass: cleaner theme, stronger organization, clearer mobile nav */
:root {
  --bg: #070813;
  --bg2: #111327;
  --fg: #fff8ea;
  --muted: #c8bed0;
  --glass: rgba(255, 255, 255, 0.072);
  --glass-strong: rgba(255, 255, 255, 0.13);
  --warm: #ffd36f;
  --cool: #7be7ff;
  --rose: #ff89c8;
  --red: #ff5b74;
  --violet: #a78bfa;
  --mint: #81f7c5;
  --border: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 211, 111, 0.68);
  --shadow: 0 28px 80px rgba(0,0,0,.48);
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(255, 91, 116, 0.18), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(123, 231, 255, 0.14), transparent 28%),
    radial-gradient(circle at 50% 98%, rgba(167, 139, 250, 0.13), transparent 34%),
    linear-gradient(180deg, #090a18 0%, #050611 54%, #0d0a14 100%);
}

body::before { opacity: .24; }
body::after { opacity: .55; }
#particles-js { opacity: .25; }

.content { max-width: 1240px; }
.topbar { background: linear-gradient(180deg, rgba(10,12,28,.86), rgba(5,6,15,.62)); }
.logo { letter-spacing: .01em; }
.header-nav a, .header-nav button { font-size: 13px; }

.side-dock {
  width: 76px;
  border-radius: 28px;
  background: rgba(8, 10, 24, .68);
}
.dock-link {
  width: 54px;
  height: 52px;
  border-radius: 18px;
  gap: 3px;
  display: flex;
  flex-direction: column;
}
.dock-link span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1;
  text-transform: lowercase;
}
.dock-link.active span, .dock-link:hover span { color: var(--fg); }
.dock-icon { width: 20px; height: 20px; }

.hero { min-height: 68vh; }
.hero-title, .page-title { letter-spacing: -.065em; }
.hero-subtitle, .page-subtitle { color: #ddd3dc; }
.hero-btn, .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hero-btn-primary, .btn.primary { background: linear-gradient(135deg, var(--warm), var(--rose)); color: #110915; }

.section-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.032));
  border-radius: 30px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  padding: clamp(18px, 3vw, 28px);
  margin-top: 28px;
}
.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.section-title { margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--warm);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-link {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 13px;
  white-space: nowrap;
}
.section-link:hover { color: var(--fg); border-color: var(--border-hover); }

.hero-feature-panel { padding-bottom: 14px; }
.featured-video-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
}
.featured-thumb, .featured-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 64px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,211,111,.38), transparent 34%),
    linear-gradient(135deg, rgba(123,231,255,.2), rgba(255,137,200,.12));
  border: 1px solid rgba(255,255,255,.12);
}
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.featured-copy h2 { font-size: clamp(26px, 4vw, 42px); letter-spacing: -.05em; }
.featured-copy p { margin: 8px 0 16px; color: var(--muted); line-height: 1.55; }
.quick-links-panel { grid-template-columns: repeat(3, 1fr); padding-top: 0; }
.pulse-card strong { font-size: clamp(18px, 2.2vw, 26px); }
.accent-video { border-color: rgba(123,231,255,.28); }
.accent-update { border-color: rgba(255,211,111,.32); }
.accent-blooper { border-color: rgba(255,137,200,.30); }

.whats-new-section { margin-top: 8px; }
.whats-new-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.whats-new-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  line-height: 1.35;
}
.whats-new-list a:hover { color: var(--fg); border-color: var(--border-hover); transform: translateY(-2px); }
.pin-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; background: var(--warm); box-shadow: 0 0 22px currentColor; }
.pin-dot.video { color: var(--cool); background: var(--cool); }
.pin-dot.update { color: var(--warm); background: var(--warm); }
.pin-dot.blooper { color: var(--rose); background: var(--rose); }

.video-card { border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)); }
.video-thumb { background: radial-gradient(circle at 25% 20%, rgba(123,231,255,.42), transparent 32%), linear-gradient(135deg, #191b34, #080a16); }
.video-info h3 { font-size: 23px; }
.tag-update { background: rgba(255,211,111,.1); border-color: rgba(255,211,111,.22); color: #ffe7a8; }
.update-card { position: relative; overflow: hidden; }
.update-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--warm), var(--rose));
}
.update-icon {
  float: right;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,211,111,.11);
  color: var(--warm);
}

.library-tools { margin-top: 26px; }
.search-row { margin: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.filter-pill {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.055);
  cursor: pointer;
}
.filter-pill:hover, .filter-pill.active { color: var(--fg); border-color: var(--border-hover); background: rgba(255,255,255,.11); }
.soft-copy { color: var(--muted); line-height: 1.7; margin-top: 12px; }
.about-card h2 { font-size: clamp(28px, 5vw, 54px); letter-spacing: -.055em; }
.profile-shell { max-width: 780px; margin: 0 auto; }

@media (max-width: 960px) {
  .side-dock { display: none; }
  .quick-links-panel, .whats-new-list { grid-template-columns: 1fr; }
  .section-heading-row { align-items: start; flex-direction: column; }
}

html.is-mobile .side-dock {
  display: flex;
  padding: 8px;
  border-radius: 24px;
}
html.is-mobile .dock-link {
  width: 58px;
  height: 48px;
  border-radius: 16px;
}
html.is-mobile .dock-link span { display: block; font-size: 10px; }
html.is-mobile .section-card { border-radius: 24px; padding: 16px; }
html.is-mobile .whats-new-list, html.is-mobile .quick-links-panel { grid-template-columns: 1fr; }
html.is-mobile .section-link { width: 100%; text-align: center; }


/* Exodus theme/layout merge from forum_website_exodus_theme */
@font-face{font-family:RobotoLocal;src:url('/assets/fonts/Roboto-Medium.ttf');font-display:swap}
:root{
  --bg:#070b18;--bg2:#0b1022;--panel:#101631;--panel2:#171d3e;--fg:#eef4ff;--muted:#96a1c1;
  --glass:rgba(16,22,49,.82);--glass-strong:rgba(23,29,62,.92);--warm:#72e7ff;--warm-soft:rgba(36,184,255,.28);
  --cool:#36e0ff;--rose:#8b5cff;--red:#6046ff;--violet:#6046ff;--mint:#35e0ff;
  --border:rgba(116,139,255,.18);--border-hover:rgba(114,231,255,.48);
  --shadow:0 18px 45px rgba(0,0,0,.28);--glow:0 0 28px rgba(36,184,255,.28),0 0 54px rgba(96,70,255,.18)
}
body{
  font-family:RobotoLocal,Arial,sans-serif;
  background:radial-gradient(circle at 10% 0%,rgba(36,184,255,.18),transparent 34%),radial-gradient(circle at 80% 12%,rgba(96,70,255,.20),transparent 32%),linear-gradient(180deg,#070b18 0%,#0b1022 50%,#080b16 100%);
  color:var(--fg)
}
body::before{opacity:.18;background:radial-gradient(circle at 12% 75%,rgba(54,224,255,.24) 0 1px,transparent 2px),radial-gradient(circle at 68% 48%,rgba(116,139,255,.18) 0 1px,transparent 2px);background-size:310px 310px,420px 420px}
body::after{opacity:.22;background:linear-gradient(rgba(116,139,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(116,139,255,.04) 1px,transparent 1px);background-size:64px 64px}
.content{padding-top:104px;max-width:1280px}.topbar{height:68px;background:rgba(8,12,28,.82);backdrop-filter:blur(18px);display:flex;align-items:center;gap:18px;padding:0 24px;position:fixed;top:0;z-index:30;border-bottom:1px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.logo{display:none}.brand{display:flex;align-items:center;gap:12px;font-size:22px;letter-spacing:.02em;font-weight:900}.brand img{height:38px;border-radius:10px;box-shadow:var(--glow)}
.icon-btn{width:38px;height:38px;border:1px solid var(--border);background:rgba(255,255,255,.04);border-radius:12px;display:grid;gap:5px;align-content:center;justify-content:center;cursor:pointer;flex:0 0 auto}.icon-btn span{display:block;width:18px;height:3px;background:linear-gradient(90deg,var(--cool),var(--violet));border-radius:4px}
.search{margin-left:8px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(36,184,255,.12),rgba(96,70,255,.12));color:#fff;border-radius:999px;padding:10px 18px;display:flex;align-items:center;gap:9px;font-weight:800}.search img{width:16px;filter:brightness(0) invert(1)}
.header-nav{gap:20px}.header-nav a,.header-nav button{color:#dbe5ff}.header-nav a:hover,.header-nav button:hover{color:#fff;text-shadow:0 0 18px rgba(54,224,255,.5)}
.drawer{position:fixed;left:-280px;top:0;width:280px;height:100vh;background:#070a16;color:#fff;z-index:60;padding:24px;transition:.25s ease;border-right:1px solid var(--border);box-shadow:18px 0 50px rgba(0,0,0,.45);overflow:auto}.drawer.open{left:0}.drawer-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:18px}.drawer-brand img{height:42px;border-radius:12px;box-shadow:var(--glow)}.profile{display:flex;align-items:center;gap:12px;margin:18px 0 32px}.profile span{display:block;color:var(--muted);font-size:13px}.drawer-link{display:flex;align-items:center;gap:14px;color:#dbe5ff;text-decoration:none;padding:14px;border-radius:14px;margin:6px 0;border:1px solid transparent;width:100%;background:transparent;font:inherit;text-align:left;cursor:pointer}.drawer-link.active,.drawer-link:hover{background:linear-gradient(135deg,rgba(36,184,255,.16),rgba(96,70,255,.16));border-color:var(--border)}.drawer-link img{width:22px;filter:brightness(0) invert(1)}.drawer-button{margin-top:20px}
.side-dock{display:none!important}.hero{background:linear-gradient(135deg,rgba(7,11,24,.72),rgba(20,26,59,.68)),radial-gradient(circle at 55% 45%,rgba(36,224,255,.25),transparent 28%);padding:76px clamp(24px,6vw,72px);border:1px solid var(--border);border-radius:34px;min-height:58vh;grid-template-columns:minmax(0,1fr) 380px;box-shadow:var(--shadow);overflow:hidden}.hero-title,.page-title{text-shadow:0 0 26px rgba(36,184,255,.35);letter-spacing:-.05em}.hero-subtitle,.page-subtitle{color:#cbd5ff}.eyebrow{color:#72e7ff}.hero-btn-primary,.btn.primary,.composer button,.tabs .active{background:linear-gradient(135deg,#24b8ff,#6046ff);color:#fff;box-shadow:var(--glow)}
.live-panel,.glass-card,.video-card,.admin-card,.form-card,.section-card,.card,.post{background:linear-gradient(180deg,rgba(20,27,62,.92),rgba(12,17,39,.94));border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.hero-feature-panel{border-radius:34px;box-shadow:0 30px 90px rgba(0,0,0,.45),var(--glow);background:linear-gradient(180deg,#121939,#0c1127);border-color:rgba(114,231,255,.28)}.panel-topbar{border-color:var(--border);color:var(--muted)}.pulse-card,.whats-new-list a{background:rgba(255,255,255,.045);border:1px solid var(--border);box-shadow:0 10px 28px rgba(0,0,0,.18)}.pulse-card strong,.featured-copy h2,.section-title{color:#fff}.featured-placeholder,.featured-thumb{background:radial-gradient(circle at 20% 20%,rgba(54,224,255,.35),transparent 34%),linear-gradient(135deg,rgba(36,184,255,.2),rgba(96,70,255,.18));border-color:var(--border)}
.video-card{cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.video-card:hover{transform:translateY(-4px);border-color:var(--border-hover);box-shadow:var(--shadow),var(--glow)}.video-thumb{background:radial-gradient(circle at 25% 20%,rgba(54,224,255,.35),transparent 32%),linear-gradient(135deg,#141b3e,#0c1127)}.tag,.filter-pill,.section-link,.hero-btn,.btn{border-color:var(--border);background:rgba(255,255,255,.05);color:#dce6ff}.tag-update{color:#72e7ff;background:rgba(36,184,255,.08);border-color:rgba(54,224,255,.24)}input,textarea,select{background:#090e20;border-color:var(--border);color:#fff}input::placeholder,textarea::placeholder{color:#7d89ac}input:focus,textarea:focus,select:focus{border-color:var(--border-hover);box-shadow:0 0 0 3px rgba(36,184,255,.10)}
.admin-sidebar a:hover,.admin-sidebar a.active,.filter-pill:hover,.filter-pill.active{background:linear-gradient(135deg,rgba(36,184,255,.16),rgba(96,70,255,.16));border-color:var(--border-hover);color:#fff}.player-topbar{background:rgba(8,12,28,.82);border-color:var(--border)}video{border-color:var(--border);box-shadow:var(--shadow)}.footer{border-color:var(--border)}
@media(max-width:980px){.hero{grid-template-columns:1fr}.header-nav{display:none}.search{margin-left:auto}.content{padding-top:92px}}
@media(max-width:620px){.topbar{height:68px;min-height:68px;flex-wrap:nowrap}.brand strong{font-size:18px}.brand img{height:34px}.search{font-size:0;padding:11px}.hero{padding:34px 20px;border-radius:26px}.content{padding-top:92px}.drawer{width:min(280px,86vw)}}

/* FamCentral repair pass: preserve original quick side icons, fix drawer avatar, and prevent hero clipping. */
.side-dock{
  display:flex!important;
  position:fixed;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:35;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 8px;
}
.dock-link img,.dock-icon{filter:none;}
.drawer .profile .avatar,.drawer .profile img.avatar{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px;
  border-radius:50%;
  object-fit:cover;
}
.drawer-link img[src$="about.svg"]{filter:none;color:#dbe5ff;}
.hero{
  overflow:visible;
  gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(320px,380px);
}
.hero-feature-panel{min-width:0;max-width:100%;overflow:hidden;}
.featured-video-card{min-width:0;}
.quick-links-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:hidden;}
.pulse-card{min-width:0;overflow:hidden;}
.pulse-card strong{font-size:clamp(17px,1.65vw,24px);line-height:1.05;overflow-wrap:anywhere;}
.pulse-card span{font-size:13px;}
@media(max-width:980px){.side-dock{display:none!important}.hero{grid-template-columns:1fr;overflow:hidden}.hero-feature-panel{overflow:hidden}}
html.is-mobile .side-dock{display:none!important;}


/* Login sidebar repair: keep quick icons visible, make mobile dock work, and fix drawer profile image. */
.side-dock{display:flex!important;visibility:visible!important;opacity:1!important;}
html.is-mobile .side-dock{display:flex!important;left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);flex-direction:row;width:auto;max-width:calc(100vw - 24px);}
.dock-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.drawer .profile img.avatar{display:block!important;object-fit:cover!important;}
.drawer-link img{object-fit:contain;}
.drawer-link img[src$="about.svg"]{filter:brightness(0) invert(1)!important;}
@media(max-width:980px){.side-dock{display:flex!important;}.hero{grid-template-columns:1fr;}}


/* Featured panel + sidebar icon polish */
.hero{grid-template-columns:minmax(0,1fr) minmax(420px,460px);}
.hero-feature-panel{overflow:visible;}
.quick-links-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 18px 20px;}
.pulse-card{padding:16px 12px;min-height:92px;display:flex;flex-direction:column;justify-content:center;}
.pulse-card strong{font-size:clamp(15px,1.15vw,20px);line-height:1;white-space:nowrap;overflow:visible;word-break:normal;overflow-wrap:normal;}
.pulse-card span{font-size:12px;white-space:nowrap;}
.dock-link img,.dock-icon{width:22px;height:22px;object-fit:contain;filter:none!important;}
@media(max-width:1180px){.hero{grid-template-columns:1fr;}.hero-feature-panel{max-width:460px;width:100%;justify-self:center;}}
@media(max-width:520px){.quick-links-panel{grid-template-columns:1fr;}.pulse-card strong{font-size:22px;}.hero-feature-panel{overflow:hidden;}}


/* Sidebar centering + logged-out profile cleanup */
.side-dock{align-items:center!important;justify-items:center!important;}
.dock-link{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;padding:0!important;text-align:center!important;}
.dock-link img,.dock-icon{display:block!important;margin:0 auto!important;flex:0 0 auto!important;}
.drawer .profile:empty{display:none!important;}

/* Custom FamCentral uploaded logo + sidebar icon pass */
.brand img,
.drawer-brand img{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#0d1428!important;
}
.drawer-link img{
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}
.drawer-link img.nav-logo-icon{
  border-radius:50%!important;
  object-fit:cover!important;
}
.side-dock{
  width:74px!important;
  padding:12px 9px!important;
}
.dock-link{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  overflow:hidden!important;
}
.dock-link img.dock-icon{
  width:27px!important;
  height:27px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}
.dock-link img.dock-logo-icon{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
html.is-mobile .side-dock{
  width:auto!important;
}

/* Final sidebar alignment pass: equal rounded-square tiles and non-circular FamCentral logo */
.side-dock{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:76px!important;
  padding:12px 10px!important;
  box-sizing:border-box!important;
}
.dock-link{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border-radius:17px!important;
  line-height:1!important;
  overflow:hidden!important;
}
.dock-link span{display:none!important;}
.dock-link img,
.dock-link svg,
.dock-icon{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  transform:none!important;
}
.dock-link img.dock-logo-icon{
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  padding:0!important;
  border-radius:12px!important;
  object-fit:cover!important;
  object-position:center!important;
  clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.dock-link.active{
  border-radius:17px!important;
}
.brand img,
.drawer-brand img,
.drawer-link img.nav-logo-icon{
  border-radius:12px!important;
  object-fit:cover!important;
  clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.drawer-link img{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  display:inline-block!important;
  vertical-align:middle!important;
}
html.is-mobile .side-dock{
  flex-direction:row!important;
  width:auto!important;
  gap:10px!important;
}


/* Hard fix: sidebar logo is a rounded square, not a circle; exact icon alignment/sizing */
.side-dock{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:76px!important;
  padding:12px 10px!important;
  box-sizing:border-box!important;
}
.side-dock .dock-link{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:17px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.side-dock .dock-link span{display:none!important;}
.side-dock .dock-link .dock-icon{
  display:block!important;
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  transform:none!important;
  filter:none!important;
}
.side-dock .dock-link .dock-icon.dock-logo-icon{
  width:36px!important;
  height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.side-dock .dock-link[title="Videos"] .dock-icon{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  object-fit:contain!important;
}
.brand img,.drawer-brand img,.drawer-link img.nav-logo-icon{
  border-radius:10px!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  object-fit:contain!important;
  background:#05070d!important;
}

/* Final requested fix: FamCentral logo is a rounded-square tile everywhere, not a circular icon; admin uses supplied shield. */
.brand img,
.drawer-brand img,
.drawer-link img.nav-logo-icon,
.side-dock .dock-link .dock-icon.dock-logo-icon{
  border-radius:12px!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#070a16!important;
  box-sizing:border-box!important;
  aspect-ratio:1 / 1!important;
}
.drawer-link img.nav-logo-icon{
  width:30px!important;
  height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  padding:2px!important;
  border:1px solid rgba(114,231,255,.25)!important;
  box-shadow:0 0 12px rgba(36,184,255,.12)!important;
  filter:none!important;
}
.side-dock .dock-link .dock-icon.dock-logo-icon{
  width:40px!important;
  height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  padding:0!important;
  border:0!important;
}
.side-dock .dock-link[title="Videos"] .dock-icon,
.drawer-link img[src$="videos-custom.png"]{
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}
.drawer-link img[src$="admin-custom.png"],
.side-dock .dock-link[title="Admin"] .dock-icon{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:contain!important;
  filter:none!important;
}
.side-dock .dock-link{
  align-items:center!important;
  justify-content:center!important;
}


/* User requested: remove weird blue/circular logo corners; keep logo as clean rounded square everywhere. */
.brand img,
.drawer-brand img,
.drawer-link img.nav-logo-icon,
.side-dock .dock-link .dock-icon.dock-logo-icon{
  border-radius:8px!important;
  background:#05070d!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  box-shadow:none!important;
}
.drawer-link img.nav-logo-icon{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  padding:0!important;
  border:0!important;
}
.drawer-brand img, .brand img{
  width:38px!important;
  height:38px!important;
  padding:0!important;
}
.side-dock .dock-link .dock-icon.dock-logo-icon{
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:0!important;
}
.side-dock .dock-link, .drawer-link{
  align-items:center!important;
}
.drawer-link img[src$="admin-custom.png"],
.side-dock .dock-link[title="Admin"] .dock-icon{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* User requested: keep homepage brand capitalization and restore custom home icon sizing. */
.hero-title { text-transform: none !important; }
.side-dock .dock-logo-link .dock-logo-icon,
.drawer-link .nav-logo-icon {
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Final correction: the compact side panel Home item is the uploaded transparent house icon, not the FamCentral logo. */
.side-dock .dock-home-link,
.side-dock .dock-home-link.active,
.side-dock .dock-home-link:hover{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.side-dock .dock-home-link .dock-home-icon{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  filter:none!important;
}
.drawer-link .nav-home-icon{
  width:22px!important;
  height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border-radius:0!important;
  filter:none!important;
}
/* Keep the actual FamCentral logo rounded only where it is a brand/logo, not on the Home nav icon. */
.brand img,
.drawer-brand img{
  border-radius:8px!important;
  background:#05070d!important;
  object-fit:contain!important;
  object-position:center!important;
}


/* Fix homepage title overlapping featured panel */
.hero-copy{
  min-width:0;
}
.hero-title{
  font-size: clamp(54px, 8vw, 110px);
  max-width:100%;
}

.featured-placeholder img{width:96px;height:96px;object-fit:contain;display:block;}
.featured-placeholder{display:flex;align-items:center;justify-content:center;}



/* Comment replies */
.reply-banner {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
}

.reply-banner span,
.mention-blue {
  color: #3da9ff;
  font-weight: 900;
}

.reply-cancel,
.comment-reply-btn {
  border: 0;
  background: transparent;
  color: #3da9ff;
  cursor: pointer;
  font-weight: 900;
  text-transform: lowercase;
}

.reply-cancel {
  margin-left: 8px;
}

.comment-content {
  min-width: 0;
}

.comment-reply {
  margin-left: calc(min(var(--reply-depth, 1), 6) * 18px);
  padding-left: 14px;
  border-left: 2px solid rgba(61,169,255,.35);
}

.comment-reply-btn {
  margin-top: 6px;
  padding: 0;
}

html.is-mobile .comment-reply {
  margin-left: calc(min(var(--reply-depth, 1), 4) * 10px);
  padding-left: 10px;
}



/* Playlists */
.playlist-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.playlist-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}
.playlist-admin-video {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}



/* Update pictures and update comments */
.update-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}

.update-detail-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}


/* Final portrait image fix for update cards and update detail pages.
   This overrides the newer design's landscape/card crop rules. */
.update-card img,
.update-card .update-image,
.update-detail img,
.update-detail-image,
#updateMount .update-detail-image,
#updateMount .update-detail img,
#latestUpdates .update-card img,
#updatesList .update-card img {
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(0, 0, 0, .28) !important;
  display: block !important;
}

#latestUpdates .update-card img,
#updatesList .update-card img,
.update-card .update-image {
  max-height: 420px !important;
}

#updateMount .update-detail-image,
.update-detail-image {
  max-height: 80vh !important;
}


body.is-logged-in #homeLoginSignupBtn { display: none !important; }


/* Center homepage hero buttons when login/signup is hidden */
body.is-logged-in .hero-actions,
body.is-logged-in .hero-buttons,
body.is-logged-in .home-actions {
  justify-content: center !important;
  display: flex !important;
  width: 100%;
}

body.is-logged-in .hero-actions > *,
body.is-logged-in .hero-buttons > *,
body.is-logged-in .home-actions > * {
  flex: 0 0 auto;
}