/* ─────────────────────────────────────────────────────────────
   The Heart Space — the one space inside the visitor.
   Artery-interior background + vignette + warm tint + a whole-space
   heartbeat pulse (25bpm lub-dub). Warm cream/gold type, slow easing.
   Navigation = five words drifting like blood; Action branches into a
   living tree. Almost all CSS.
   ───────────────────────────────────────────────────────────── */

.heart-space {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-organic);
  overflow: hidden;
}
.heart-space.is-open { opacity: 1; pointer-events: auto; }

/* ── The held container: artery + vignette + tint, all beating ── */
.hs-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/backgrounds/ai/Heart%20Space/Heart%20space%20background.png') center/cover no-repeat;
}
.hs-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 62% 42%,
              rgba(0,0,0,0) 30%,
              rgba(40,4,6,0.45) 68%,
              rgba(12,2,3,0.88) 100%);
}
.hs-tint {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at 62% 42%,
              rgba(255,120,80,0.10) 0%,
              rgba(150,20,24,0.18) 60%,
              rgba(60,6,10,0.28) 100%);
  mix-blend-mode: multiply;
}
/* The whole space beats — a warm bloom rises and falls on a 25bpm lub-dub */
.hs-beat {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(ellipse at 62% 42%, rgba(255,150,90,0.16) 0%, rgba(255,150,90,0) 60%);
  opacity: 0;
  animation: hs-heartbeat 2.4s ease-in-out infinite;   /* 25bpm */
  pointer-events: none;
}
@keyframes hs-heartbeat {
  0%   { opacity: 0; }
  8%   { opacity: 0.5; }
  14%  { opacity: 0.32; }
  20%  { opacity: 0.16; }
  26%  { opacity: 0.5; }
  36%  { opacity: 0.22; }
  46%, 100% { opacity: 0; }
}

.hs-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 760px;
  text-align: center;
}

/* ── Exit + watch-again ─────────────────────────────────────── */
.hs-exit {
  position: absolute;
  top: 22px; right: 26px;
  z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  font: 0.85rem var(--font-display); font-style: italic;
  color: rgba(236,231,216,0.6);
  background: none; border: 0; cursor: pointer;
  transition: color .4s var(--ease-organic);
}
.hs-exit:hover { color: var(--cream); }
.hs-exit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0%, rgba(201,169,97,0) 70%); }

.hs-again {
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 8;
  font: 0.8rem var(--font-display); font-style: italic;
  color: rgba(236,231,216,0.4);
  background: none; border: 0; cursor: pointer;
  transition: color .4s var(--ease-organic);
}
.hs-again:hover { color: rgba(236,231,216,0.8); }

/* ── Panels (welcome / coming-soon / action) — slow fade ────── */
.hs-panel { display: none; animation: hs-fade 1.4s var(--ease-organic); }
.hs-panel.is-active { display: block; }
@keyframes hs-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.hs-panel h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  color: var(--cream); margin-bottom: 20px;
}
.hs-panel p {
  font-size: 1.04rem; line-height: 1.8;
  max-width: 540px; margin: 0 auto 16px;
  color: rgba(236,231,216,0.86);
}
.hs-panel .hs-line { margin: 0 auto 10px; }

/* Welcome video placeholder */
.hs-video {
  width: 100%; max-width: 520px; aspect-ratio: 16/9;
  margin: 0 auto 26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,150,90,0.18) 0%, rgba(0,0,0,0) 60%),
    rgba(20,4,6,0.55);
  border: 1px solid rgba(201,169,97,0.28); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: rgba(236,231,216,0.6); font: italic 1rem var(--font-display);
}
.hs-video .play-mark {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid rgba(201,169,97,0.5);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.hs-video .play-mark::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid rgba(201,169,97,0.75);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.hs-love { font-style: italic; color: var(--gold-light); font-size: 1.2rem; margin: 8px auto 24px; }

/* Shared button */
.hs-btn {
  display: inline-block;
  font: 1rem var(--font-display); letter-spacing: 0.04em;
  padding: 13px 32px; border-radius: 999px;
  border: 1px solid rgba(201,169,97,0.55);
  background: rgba(201,169,97,0.08); color: var(--gold-light);
  cursor: pointer; margin: 8px; text-decoration: none;
  transition: background .4s var(--ease-organic), color .4s var(--ease-organic), border-color .4s;
}
.hs-btn:hover { background: rgba(201,169,97,0.2); color: var(--white); border-color: var(--gold); }

/* ── The artery — drifting words ────────────────────────────── */
.hs-artery {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  padding: 18px 0;
}
.hs-artery-track {
  display: flex; gap: clamp(40px, 8vw, 110px); width: max-content;
  animation: artery-flow 48s linear infinite;
}
.hs-artery:hover .hs-artery-track,
.hs-artery.is-stilled .hs-artery-track { animation-play-state: paused; }
@keyframes artery-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hs-word {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: 0.03em;
  color: var(--cream); opacity: 0.8; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: opacity .7s var(--ease-organic), color .5s var(--ease-organic), text-shadow .5s;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hs-word:hover { color: var(--gold-light); opacity: 1; }
.hs-artery.is-stilled .hs-word { opacity: 0.18; }
.hs-artery.is-stilled .hs-word.is-active { opacity: 1; color: var(--gold-light); }

.hs-artery-hint { margin-top: 14px; font: italic 0.82rem var(--font-display); color: rgba(236,231,216,0.4); }

/* ── The branching tree (Action) ────────────────────────────── */
.hs-tree { position: relative; width: min(92vw, 680px); height: min(64vh, 460px); margin: 8px auto 0; }
.hs-tree svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-tree svg path {
  fill: none; stroke: url(#hs-branch-grad); stroke-width: 1.4; stroke-linecap: round;
  opacity: 0; stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: hs-branch-grow 1.5s var(--ease-organic) forwards;
}
@keyframes hs-branch-grow { to { opacity: 0.7; stroke-dashoffset: 0; } }

.hs-branch {
  position: absolute; transform: translate(-50%, -50%);
  text-align: center; text-decoration: none; color: var(--cream);
  font-family: var(--font-display);
  opacity: 0; animation: hs-fade 1s var(--ease-organic) forwards; animation-delay: .5s;
  width: max-content; max-width: 30%;
}
.hs-branch .b-title {
  display: block; font-size: clamp(1rem, 1.7vw, 1.28rem);
  color: var(--gold-light); letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7); transition: color .3s var(--ease-organic);
}
.hs-branch .b-sub {
  display: block; font-family: var(--font-body); font-style: italic;
  font-size: 0.72rem; color: rgba(236,231,216,0.6); margin-top: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.hs-branch:hover .b-title { color: var(--white); }
.hs-branch:hover .b-sub { color: rgba(236,231,216,0.85); }

/* Dormant trunk */
.hs-trunk {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  text-align: center; font-family: var(--font-display);
  color: rgba(236,231,216,0.5); cursor: not-allowed;
  opacity: 0; animation: hs-fade 1s var(--ease-organic) forwards; animation-delay: .2s;
}
.hs-trunk .t-title { display: block; font-size: 0.95rem; letter-spacing: 0.06em; color: rgba(216,190,126,0.7); }
.hs-trunk .t-sub { display: block; font-family: var(--font-body); font-style: italic; font-size: 0.68rem; margin-top: 3px; opacity: 0.7; }

.hs-action-lead {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--cream); margin-bottom: 6px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

/* ── Threshold: a black veil for the zoom-through-black entry ── */
#threshold-veil {
  position: fixed; inset: 0; z-index: 99;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity .6s ease-in;
}
#threshold-veil.is-on { opacity: 1; }

/* The scene zooms into the heart on the way in */
.scene.is-entering {
  animation: scene-zoom-heart 1.1s var(--ease-organic) forwards;
  transform-origin: 50% 47%;   /* the heart */
}
@keyframes scene-zoom-heart {
  to { transform: scale(3.4); opacity: 0; filter: blur(6px); }
}

/* ── Reduced motion: no beat, no flow, no zoom — gentle + still ─ */
@media (prefers-reduced-motion: reduce) {
  .hs-beat { animation: none; opacity: 0.12; }
  .hs-artery-track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; }
  .hs-tree svg path { animation: none; opacity: 0.7; stroke-dashoffset: 0; }
  .hs-branch, .hs-trunk { animation: none; opacity: 1; }
  .scene.is-entering { animation: none; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hs-tree { height: min(70vh, 520px); }
  .hs-branch { max-width: 40%; }
  .hs-word { font-size: clamp(1.4rem, 7vw, 2rem); }
}

/* ═══════════════════════════════════════════════════════════════
   FOUR PILLARS — the new Heart Space dashboard
   Replaces the welcome+artery+branching-tree flow with a
   structured action surface. Auth-aware: data-auth-in / data-auth-out
   targets are toggled by heart-space.js based on localStorage flag
   set by URL ?auth=in / out or by visiting identity.html.
   ═══════════════════════════════════════════════════════════════ */

.heart-space--pillars {
  display: block;
  padding: 0;
  overflow: hidden;
  /* Same transition-skip as before — keeps opacity from getting stuck. */
  transition: none;
}

/* ── Open centre — title + intro blurb ─────────────────────── */
.hs-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 50vw);
  text-align: center;
  z-index: 5;
  pointer-events: none;   /* clicks pass through to the pillars behind */
}
.hs-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(216, 190, 126, 0.78);
  margin: 0 0 8px;
}
.hs-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  color: var(--cream);
  margin: 0 0 14px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6);
  line-height: 1.18;
}
.hs-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(236, 231, 216, 0.78);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* ── Compact dashboard dropdown — top-right corner ────────── */
.hs-dashboard {
  position: absolute;
  top: 20px; right: 24px;
  z-index: 11;
}
.hs-dash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(7, 20, 14, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.36);
  border-radius: 999px;
  font: italic 0.88rem var(--font-display);
  color: var(--gold-light);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .25s var(--ease-organic), border-color .25s;
}
.hs-dash-toggle:hover { background: rgba(7, 20, 14, 0.75); border-color: var(--gold); }
.hs-dash-chev {
  font-size: 0.72rem;
  transition: transform .25s var(--ease-organic);
}
.hs-dash-toggle[aria-expanded="true"] .hs-dash-chev { transform: rotate(180deg); }

.hs-dash-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(7, 20, 14, 0.92);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: hs-cards-in 0.25s var(--ease-organic);
}
.hs-dash-panel[hidden] { display: none; }
.hs-dash-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(13, 31, 23, 0.5);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 8px;
  text-decoration: none;
  color: var(--cream);
  transition: background .25s var(--ease-organic), border-color .25s;
}
.hs-dash-card:hover { background: rgba(25, 54, 42, 0.6); border-color: var(--gold); }
.hs-dash-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--gold-light);
}
.hs-dash-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(236, 231, 216, 0.6);
  line-height: 1.4;
}
.hs-dash-sub em { color: var(--gold-light); font-style: italic; }
.hs-dash-card--soon {
  cursor: default;
  border-style: dashed;
  opacity: 0.75;
}
.hs-dash-card--soon:hover { background: rgba(13, 31, 23, 0.5); border-color: rgba(201, 169, 97, 0.18); }

/* ── Edge-anchored sides: 2 pillars each, left + right ─────
   Each side hugs the screen edge. Clicking a pillar header
   expands its cards inline below; only one open at a time. */
.hs-side {
  position: absolute;
  top: 64px;
  bottom: 70px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 8;
  overflow-y: auto;
  scrollbar-width: thin;
}
.hs-side--left  { left: 24px; }
.hs-side--right { right: 24px; }
.hs-side::-webkit-scrollbar { width: 4px; }
.hs-side::-webkit-scrollbar-thumb { background: rgba(201, 169, 97, 0.3); border-radius: 2px; }

.hs-pillar {
  flex: 0 0 auto;
  background: rgba(7, 20, 14, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: hidden;
  transition: background .3s var(--ease-organic), border-color .3s;
}
.hs-pillar.is-open {
  background: rgba(7, 20, 14, 0.78);
  border-color: rgba(201, 169, 97, 0.5);
}

.hs-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-align: left;
  text-transform: uppercase;
}
.hs-pillar-head::after {
  content: "+";
  font-size: 1.1rem;
  color: var(--gold-light);
  opacity: 0.65;
  transition: transform .25s var(--ease-organic), opacity .25s;
}
.hs-pillar.is-open .hs-pillar-head::after {
  content: "−";
  opacity: 1;
}
.hs-pillar-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
.hs-pillar-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.45rem;
  color: var(--cream);
  margin: 0;
}
.hs-pillar-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(236, 231, 216, 0.62);
  margin: 0;
  flex: 1 1 100%;
}

/* ── Action cards inside each pillar — collapsed by default ── */
.hs-cards {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.hs-pillar.is-open .hs-cards {
  display: flex;
  padding: 4px 10px 12px;
  animation: hs-cards-in 0.28s var(--ease-organic);
}
@keyframes hs-cards-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(13, 31, 23, 0.5);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 8px;
  text-decoration: none;
  color: var(--cream);
  transition: background .25s var(--ease-organic), border-color .25s;
}
.hs-card:hover {
  background: rgba(25, 54, 42, 0.65);
  border-color: var(--gold);
}
.hs-card-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}
.hs-card-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.74rem;
  color: rgba(236, 231, 216, 0.62);
  line-height: 1.35;
}

/* ── Lock state — auth-gated cards while logged out ───────── */
body:not(.heart-auth-in) .hs-card[data-gate="auth"] {
  opacity: 0.78;
  border-color: rgba(201, 169, 97, 0.16);
  background: rgba(13, 31, 23, 0.4);
}
body:not(.heart-auth-in) .hs-card[data-gate="auth"] .hs-card-title {
  color: rgba(216, 190, 126, 0.72);
}
.hs-card-lock {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.7rem;
  filter: grayscale(0.4);
  opacity: 0.6;
}
body.heart-auth-in .hs-card-lock { display: none; }

/* ── Coming-soon cards (Presence + dashboard placeholders) ── */
.hs-card--soon {
  cursor: default;
  border-style: dashed;
  border-color: rgba(201, 169, 97, 0.22);
  opacity: 0.75;
}
.hs-card--soon:hover {
  background: rgba(13, 31, 23, 0.5);
  border-color: rgba(201, 169, 97, 0.22);
  transform: none;
}
.hs-card-flag {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 999px;
  font: italic 0.64rem var(--font-display);
  color: rgba(216, 190, 126, 0.78);
  letter-spacing: 0.04em;
}

/* ── "Begin here" door card — the one CTA that's always open ── */
.hs-card--door {
  background:
    linear-gradient(135deg, rgba(216, 190, 126, 0.18) 0%, rgba(7, 20, 14, 0.6) 100%);
  border-color: rgba(216, 190, 126, 0.48);
  box-shadow: 0 0 26px rgba(201, 169, 97, 0.22);
}
.hs-card--door .hs-card-title { color: var(--cream); }
.hs-card-flag--door {
  background: rgba(216, 190, 126, 0.22);
  border-color: rgba(216, 190, 126, 0.55);
  color: var(--cream);
}
body.heart-auth-in .hs-card--door { display: none; }

/* ── Bottom CTA — small, centred near the bottom edge ────── */
.hs-bottom-cta {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.hs-btn--compact {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  padding: 8px 18px;
  background: rgba(216, 190, 126, 0.14);
  border: 1px solid rgba(216, 190, 126, 0.5);
  color: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(201, 169, 97, 0.18);
  transition: background .25s var(--ease-organic);
}
.hs-btn--compact:hover { background: rgba(216, 190, 126, 0.26); }
body.heart-auth-in .hs-bottom-cta { display: none; }

/* ── Gate prompt — modal that lands when a 🔒 card is tapped ── */
.hs-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 20, 14, 0.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: hs-fade 0.5s var(--ease-organic);
}
.hs-gate[hidden] { display: none; }
.hs-gate-inner {
  max-width: 460px;
  width: 100%;
  padding: 28px 30px 24px;
  background: rgba(13, 31, 23, 0.94);
  border: 1px solid rgba(201, 169, 97, 0.42);
  border-radius: 16px;
  text-align: center;
}
.hs-gate-msg {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--cream);
  margin: 0 0 8px;
}
.hs-gate-target {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(216, 190, 126, 0.78);
  margin: 0 0 22px;
}
.hs-gate-target:empty { display: none; }
.hs-gate-cta {
  display: inline-block;
  padding: 12px 28px;
  background: rgba(216, 190, 126, 0.18);
  border: 1px solid rgba(216, 190, 126, 0.6);
  border-radius: 999px;
  font: 1rem var(--font-display);
  color: var(--cream);
  text-decoration: none;
  margin-right: 8px;
  transition: background .25s var(--ease-organic);
}
.hs-gate-cta:hover { background: rgba(216, 190, 126, 0.32); }
.hs-gate-dismiss {
  display: inline-block;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid rgba(236, 231, 216, 0.18);
  border-radius: 999px;
  font: italic 0.9rem var(--font-display);
  color: rgba(236, 231, 216, 0.6);
  cursor: pointer;
  transition: color .25s var(--ease-organic);
}
.hs-gate-dismiss:hover { color: var(--cream); }

/* ── auth-state visibility helpers ─────────────────────────── */
[data-auth-in]  { display: none; }
[data-auth-out] { display: block; }
body.heart-auth-in [data-auth-in]  { display: block; }
body.heart-auth-in [data-auth-out] { display: none; }
.hs-dashboard[data-auth-in] { display: none; }
body.heart-auth-in .hs-dashboard[data-auth-in] { display: block; }

/* The accordion is already single-column so no responsive override
   needed. Narrow desktop just naturally fits. */