/* Advisor Profiles — single hand-rolled stylesheet.
   Light, warm base with mystic violet accents; no framework, no fonts to load. */

:root {
  --bg:          #faf8f4;
  --surface:     #ffffff;
  --ink:         #2b2437;
  --ink-soft:    #6f6880;
  --border:      #e7e1d6;
  --accent:      #5b3fb8;
  --accent-deep: #46309c;
  --accent-soft: #efeafb;
  --gold:        #c99215;
  --online:      #1e9e63;
  --online-soft: #e2f5eb;
  --danger:      #b3372b;
  --danger-soft: #fbeae7;
  --footer-bg:   #262038;
  --footer-text: #cfc9dd;
  --radius:      12px;
  --shadow:      0 1px 2px rgba(43, 36, 55, .05), 0 8px 24px rgba(43, 36, 55, .06);
  --font-body:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

/* height:auto is the load-bearing half of a responsive image: without it, an
   image whose width is constrained (width:100%, a max-width, a flex/grid track)
   keeps the pixel height from its HTML height attribute and renders squished.
   Rules that want a fixed box set their own height/aspect-ratio + object-fit
   below and win on specificity. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-soft); font-weight: normal; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; }

/* ---------------------------------------------------------------- Header */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
.site-nav .nav-cta {
  background: var(--accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
}
.site-nav .nav-cta:hover { background: var(--accent-deep); color: #fff; }
.site-nav .nav-muted { color: var(--ink-soft); font-size: .92rem; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.2rem;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink);
}

/* ---------------------------------------------------------------- Search */

.site-search { display: inline-flex; align-items: stretch; }
.site-search input {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  padding: 7px 14px;
  border-radius: 999px 0 0 999px;
  outline: none;
  min-width: 0;
}
.site-search input::placeholder { color: var(--ink-soft); }
.site-search input:focus { border-color: var(--accent); }
.site-search button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--bg);
  color: var(--ink-soft);
  padding: 0 12px;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
}
.site-search button:hover { color: var(--accent); border-color: var(--accent); }
.site-search-header input { width: 132px; transition: width .18s ease; }
.site-search-header input:focus { width: 188px; }
.site-search-page { display: flex; max-width: 540px; margin-top: 18px; }
.site-search-page input { flex: 1 1 auto; padding: 11px 16px; font-size: 1rem; }
.site-search-page button { padding: 0 18px; }

.search-group { margin-bottom: 40px; }
.search-group:last-child { margin-bottom: 0; }
.search-group-head {
  font-size: 1.3rem;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- Flash */

.flash { padding: 12px 0; background: var(--online-soft); color: #14603d; font-weight: 500; }
.flash-error { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------- Hero */

.hero {
  background:
    radial-gradient(1000px 400px at 80% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(700px 300px at 10% 110%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%);
  padding: 72px 0 56px;
  text-align: center;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.hero-sub { max-width: 620px; margin: 0 auto 28px; color: var(--ink-soft); font-size: 1.1rem; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-deep); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-lg { padding: 13px 28px; font-size: 1.05rem; }
.btn-small { padding: 5px 14px; font-size: .85rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------------------------------------------------------------- Chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chips-center { justify-content: center; }
.chip {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- Sections */

.section { padding: 48px 0; }
.section-alt { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: 1.6rem; }
.section-link { font-weight: 600; text-decoration: none; }
.page-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  padding: 44px 0 26px;
}
.page-head p { color: var(--ink-soft); max-width: 640px; margin-bottom: 0; }

/* ---------------------------------------------------------------- Advisor cards */

/* v54 compact grid: narrower cards yield 5 columns on a full desktop
   container and 2 on phones, with no fixed breakpoints to maintain. */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 16px;
}
.advisor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.advisor-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(43,36,55,.08), 0 14px 34px rgba(43,36,55,.10); }
.card-photo { position: relative; display: block; }
.card-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card-name {
  margin-bottom: 2px;
  font-size: 1.02rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.card-name a { color: var(--ink); text-decoration: none; }
.card-name a:hover { color: var(--accent); }
.card-rate { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.card-rate .stars { letter-spacing: 0; margin-right: 1px; }
.card-rate .reviews { color: var(--ink-soft); font-weight: 400; }
.card-tagline {
  color: var(--ink-soft);
  font-size: .86rem;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-specs { display: flex; align-items: center; gap: 4px; margin: 2px 0 10px; }
.card-specs-label { color: var(--ink-soft); font-size: .78rem; margin-right: 2px; }
.spec-emoji {
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  padding: 3px;
  border-radius: 6px;
  transition: transform .12s, background .12s;
}
.spec-emoji:hover { transform: scale(1.25); background: var(--surface-2, rgba(0,0,0,.05)); }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; margin: 8px 0 14px; }
.card-meta .reviews { color: var(--ink-soft); }
.card-meta .last-active { margin-left: auto; color: var(--ink-soft); font-weight: 600; }
.stars { color: var(--gold); letter-spacing: 1px; }
.card-cta { margin-top: auto; text-align: center; }
/* Online cards carry the tested Chat Now treatments; the base online look
   matches btn-primary so an unknown variant never renders unstyled. */
.card-cta.cta-online { background: var(--accent); border: 1px solid var(--accent); color: #fff; }

/* ------------------------------ v54 Chat Now button test (32 treatments)
   Research-designed variants, epsilon-greedy per session, tracked as
   rec_stats page='chat-cta'. Scoped to ONLINE cards only - busy/offline
   buttons keep the quiet ghost look. Keys are append-only forever. */
.card-cta.cta-online.cta-v-classic { border-radius: 10px; background: #c9a227; border-color: #c9a227; color: #241703; box-shadow: 0 2px 8px rgba(150,110,15,.28); }
.card-cta.cta-online.cta-v-pill { border-radius: 999px; background: #c9a227; border-color: #c9a227; color: #241703; }
.card-cta.cta-online.cta-v-square { border-radius: 3px; background: #b8860b; border-color: #b8860b; color: #1f1502; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
.card-cta.cta-online.cta-v-ink { border-radius: 999px; background: #221a38; border-color: #221a38; color: #fff6dc; }
.card-cta.cta-online.cta-v-burgundy { border-radius: 12px; background: #6d1f3e; border-color: #6d1f3e; color: #fff3e4; }
.card-cta.cta-online.cta-v-emerald { border-radius: 999px; background: #0f5f52; border-color: #0f5f52; color: #f3fbf7; }
.card-cta.cta-online.cta-v-soft { border-radius: 999px; background: #fff9ea; border: 1.5px solid #d4af37; color: #4a3809; box-shadow: 0 2px 6px rgba(170,130,30,.18); }
.card-cta.cta-online.cta-v-ghost { border-radius: 999px; background: transparent; border: 2px solid #a87d0b; color: #7a5e12; }
.card-cta.cta-online.cta-v-ghost:hover { background: rgba(201,162,39,.14); }
.card-cta.cta-online.cta-v-outline { border-radius: 999px; background: transparent; border: 1.5px solid #2e2149; color: #2e2149; transition: background .2s, color .2s; }
.card-cta.cta-online.cta-v-outline:hover { background: #2e2149; color: #fff6dc; }
.card-cta.cta-online.cta-v-gradient { border-radius: 12px; border: 1px solid #a87d0b; color: #241703;
  background: linear-gradient(180deg, #f0d06b 0%, #d0a62b 48%, #b8860b 52%, #c99f1f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(150,110,15,.35); }
.card-cta.cta-online.cta-v-foil { border-radius: 999px; border: 1px solid #8a6d1f; color: #241703;
  background: linear-gradient(100deg, #c9a227 0%, #f3de8e 30%, #fff6ce 50%, #f3de8e 70%, #c9a227 100%); }
.card-cta.cta-online.cta-v-glass { border-radius: 999px; background: rgba(255,250,235,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(201,162,39,.85); color: #3a2b08;
  box-shadow: 0 4px 16px rgba(160,120,30,.18), inset 0 1px 0 rgba(255,255,255,.6); }
.card-cta.cta-online.cta-v-velvet { border-radius: 14px; background: #2e2149; color: #f7eccb;
  border: 1px solid #d4af37; letter-spacing: .03em;
  box-shadow: inset 0 0 0 3px #2e2149, inset 0 0 0 4px rgba(212,175,55,.75), 0 3px 10px rgba(40,25,80,.3); }
.card-cta.cta-online.cta-v-velvet:hover { box-shadow: inset 0 0 0 3px #2e2149, inset 0 0 0 4px #f1d98a, 0 3px 10px rgba(40,25,80,.3); }
.card-cta.cta-online.cta-v-duotone { border-radius: 12px; border: 0; color: #fff7e0;
  background: linear-gradient(115deg, #2e2149 0 72%, #c9a227 72% 100%); }
.card-cta.cta-online.cta-v-offset { border-radius: 8px; background: #e8b33a; color: #241703;
  border: 2px solid #241703; box-shadow: 4px 4px 0 #241703; font-weight: 800;
  transition: transform .12s, box-shadow .12s; }
.card-cta.cta-online.cta-v-offset:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #241703; }
.card-cta.cta-online.cta-v-offset:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #241703; }
.card-cta.cta-online.cta-v-embossed { border-radius: 16px; background: #fbf2dd; color: #5c4708; border: 0;
  box-shadow: 6px 6px 12px rgba(180,150,90,.35), -6px -6px 12px rgba(255,255,255,.9), inset 0 0 0 1.5px #c9a227; }
.card-cta.cta-online.cta-v-shine { position: relative; overflow: hidden; border-radius: 999px;
  background: linear-gradient(180deg, #e8c65c, #c9a227); border-color: #c9a227; color: #241703;
  box-shadow: 0 4px 14px rgba(160,120,20,.35); }
.card-cta.cta-online.cta-v-shine::after { content: ''; position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  animation: cta-shine 6s ease-in-out infinite; }
.card-cta.cta-online.cta-v-pulse { position: relative; border-radius: 999px; background: #33235a;
  border-color: #33235a; color: #fff7e0; }
.card-cta.cta-online.cta-v-pulse::before { content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  animation: cta-pulsering 8s cubic-bezier(.3,.6,.4,1) infinite; }
.card-cta.cta-online.cta-v-breathe { border-radius: 14px;
  background: linear-gradient(180deg, #ddb542, #b8860b); border-color: #b8860b; color: #221602;
  animation: cta-breathe 4.5s ease-in-out infinite; will-change: transform; }
.card-cta.cta-online.cta-v-ripple { position: relative; border-radius: 999px; background: #c9a227;
  border-color: #c9a227; color: #241703; }
.card-cta.cta-online.cta-v-ripple::before, .card-cta.cta-online.cta-v-ripple::after { content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(180,140,25,.6); animation: cta-ripplering 3.6s ease-out infinite; }
.card-cta.cta-online.cta-v-ripple::after { animation-delay: 1.8s; }
.card-cta.cta-online.cta-v-shift { border-radius: 999px; border: 0; color: #241703;
  background: linear-gradient(115deg, #c2951b, #ebcb6b 40%, #d4af37 60%, #c2951b);
  background-size: 230% 100%; animation: cta-goldshift 7s ease-in-out infinite; }
.card-cta.cta-online.cta-v-glow { border-radius: 999px; background: #241b3f; color: #f5de9c;
  border: 1px solid #c9a227; animation: cta-glow 5s ease-in-out infinite; }
.card-cta.cta-online.cta-v-beacon { position: relative; border-radius: 999px; background: #2e2149;
  border-color: #2e2149; color: #fff7e0; padding-left: 26px; }
.card-cta.cta-online.cta-v-beacon::before { content: ''; position: absolute; left: 12px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: #3dbe7b;
  animation: cta-beacon 2.4s ease-out infinite; }
.card-cta.cta-online.cta-v-halo { position: relative; z-index: 0; border-radius: 999px;
  background: #2a1e45; border: 0; color: #fff6da; }
.card-cta.cta-online.cta-v-halo::before { content: ''; position: absolute; inset: -3px; z-index: -1;
  border-radius: 999px; background: conic-gradient(#c9a227, #f7e7ae, #8a6d1f, #c9a227);
  animation: cta-halospin 5s linear infinite; }
.card-cta.cta-online.cta-v-heartbeat { border-radius: 999px; background: #6d1f3e;
  border-color: #6d1f3e; color: #fff3e4; animation: cta-heart 6s ease-in-out infinite;
  will-change: transform; }
.card-cta.cta-online.cta-v-sparkle { position: relative; border-radius: 16px;
  background: linear-gradient(180deg, #e3be52, #c09520); border-color: #c09520; color: #241703; }
.card-cta.cta-online.cta-v-sparkle::before, .card-cta.cta-online.cta-v-sparkle::after {
  content: '\2726'; position: absolute; color: #fff6d8; pointer-events: none;
  animation: cta-twinkle 3.2s ease-in-out infinite; }
.card-cta.cta-online.cta-v-sparkle::before { top: 3px; left: 10px; font-size: 11px; }
.card-cta.cta-online.cta-v-sparkle::after { bottom: 3px; right: 12px; font-size: 9px; animation-delay: 1.6s; }
.card-cta.cta-online.cta-v-sweep { position: relative; overflow: hidden; border-radius: 12px;
  background: #d4af37; border-color: #d4af37; color: #241602; transition: box-shadow .25s; }
.card-cta.cta-online.cta-v-sweep::after { content: ''; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transition: left .55s; }
.card-cta.cta-online.cta-v-sweep:hover::after { left: 125%; }
.card-cta.cta-online.cta-v-lift { border-radius: 999px; background: #c9a227; border-color: #c9a227;
  color: #241703; box-shadow: 0 2px 6px rgba(140,100,10,.3); transition: transform .2s, box-shadow .2s; }
.card-cta.cta-online.cta-v-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(140,100,10,.35); }
.card-cta.cta-online.cta-v-magnet { border-radius: 999px; background: #8a5a0b; border-color: #8a5a0b;
  color: #fff8e6; transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s; }
.card-cta.cta-online.cta-v-magnet:hover { transform: scale(1.045); filter: brightness(1.08); }
.card-cta.cta-online.cta-v-wave { position: relative; overflow: hidden; z-index: 0; border-radius: 12px;
  background: #fffdf4; border: 2px solid #c9a227; color: #3a2b08; transition: color .3s; }
.card-cta.cta-online.cta-v-wave::before { content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 0; z-index: -1; background: linear-gradient(180deg, #e2bc4e, #c9a227);
  transition: height .35s; }
.card-cta.cta-online.cta-v-wave:hover::before { height: 100%; }
.card-cta.cta-online.cta-v-wave:hover { color: #241703; }
.card-cta.cta-online.cta-v-invert { border-radius: 999px; background: #2e2149;
  border: 2px solid #2e2149; color: #f6e7b5; transition: background .25s, color .25s, border-color .25s; }
.card-cta.cta-online.cta-v-invert:hover { background: #c9a227; border-color: #c9a227; color: #241703; }
.card-cta.cta-online.cta-v-ring { border-radius: 999px; background: #7a5e12; border-color: #7a5e12;
  color: #fff9e8; transition: box-shadow .25s, filter .15s; }
.card-cta.cta-online.cta-v-ring:hover { box-shadow: 0 0 0 5px rgba(201,162,39,.28); filter: brightness(1.06); }
@keyframes cta-shine { 0%, 70% { left: -80%; } 86%, 100% { left: 130%; } }
@keyframes cta-pulsering { 0%, 86% { box-shadow: 0 0 0 0 rgba(201,162,39,.55); }
  96% { box-shadow: 0 0 0 14px rgba(201,162,39,0); } 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); } }
@keyframes cta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes cta-ripplering { 0% { transform: scale(1); opacity: .65; }
  65%, 100% { transform: scale(1.28, 1.7); opacity: 0; } }
@keyframes cta-goldshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 0 6px rgba(212,175,55,.25); }
  50% { box-shadow: 0 0 22px rgba(212,175,55,.6); } }
@keyframes cta-beacon { 0% { box-shadow: 0 0 0 0 rgba(61,190,123,.55); }
  70% { box-shadow: 0 0 0 7px rgba(61,190,123,0); } 100% { box-shadow: 0 0 0 0 rgba(61,190,123,0); } }
@keyframes cta-halospin { to { transform: rotate(1turn); } }
@keyframes cta-heart { 0%, 86%, 100% { transform: scale(1); } 89% { transform: scale(1.055); }
  92% { transform: scale(.99); } 95% { transform: scale(1.04); } }
@keyframes cta-twinkle { 0%, 100% { opacity: 0; transform: scale(.6) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-cta.cta-online.cta-v-shine::after, .card-cta.cta-online.cta-v-sweep::after { display: none; }
  .card-cta.cta-online.cta-v-pulse::before, .card-cta.cta-online.cta-v-breathe,
  .card-cta.cta-online.cta-v-ripple::before, .card-cta.cta-online.cta-v-ripple::after,
  .card-cta.cta-online.cta-v-shift, .card-cta.cta-online.cta-v-glow,
  .card-cta.cta-online.cta-v-beacon::before, .card-cta.cta-online.cta-v-halo::before,
  .card-cta.cta-online.cta-v-heartbeat, .card-cta.cta-online.cta-v-sparkle::before,
  .card-cta.cta-online.cta-v-sparkle::after { animation: none; }
  .card-cta.cta-online.cta-v-glow { box-shadow: 0 0 14px rgba(212,175,55,.45); }
  .card-cta.cta-online.cta-v-sparkle::before, .card-cta.cta-online.cta-v-sparkle::after { opacity: .7; }
}

/* ---------------------------------------------------------------- Badges */

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  padding: 4px 12px 4px 22px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: currentColor;
}
.badge-online { background: var(--online); color: #fff; }
/* Solid bright-green dot in a crisp white ring, blinking slowly. The ring
   keeps it visible on the green pill; no blur halo (owner request). The
   blink intentionally ignores prefers-reduced-motion: a 7px dot, owner's
   explicit call, and OS-level "no animations" was hiding it entirely. */
.badge-online::before {
  background: #2eff8f;
  border: 1.5px solid #fff;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  animation: blink-online 2.2s ease-in-out infinite;
}
.badge-busy { background: #b45309; color: #fff; }
/* Solid golden dot in the same white ring, steady. */
.badge-busy::before {
  background: #ffd24a;
  border: 1.5px solid #fff;
  width: 8px;
  height: 8px;
  margin-top: -4px;
}
.badge-offline { background: rgba(43, 36, 55, .55); color: #eee; }
@keyframes blink-online {
  0%, 100% { opacity: 1; }
  50% { opacity: .15; }
}
.chip-featured {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 250, 235, .95);
  color: #8a6410;
  font-weight: 700;
}
.card-photo .chip-featured { margin: 0; }

/* ---------------------------------------------------------------- Filter bar */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.filter-bar label > span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; color: var(--ink-soft); }
.filter-check { display: flex; align-items: center; gap: 8px; font-weight: 500; padding-bottom: 8px; }
.filter-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.filter-check span { font-size: .95rem; color: var(--ink); font-weight: 500; margin: 0; }
.filter-clear { align-self: end; margin-bottom: 12px; font-size: .9rem; }

/* ---------------------------------------------------------------- Forms */

label { display: block; margin-bottom: 14px; }
label > span { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="file"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea { resize: vertical; }
select { cursor: pointer; }
.filter-bar select, .filter-bar input:not([type="checkbox"]) { width: auto; min-width: 170px; }
.filter-bar label { margin-bottom: 0; }
.filter-bar .btn { margin-bottom: 2px; }
fieldset.check-group { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px 4px; margin: 0 0 14px; }
fieldset.check-group legend { font-size: .88rem; font-weight: 600; padding: 0 6px; }
.check-group .filter-check { padding-bottom: 0; margin-bottom: 10px; }

/* ---------------------------------------------------------------- Profile page */

.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
.profile-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.profile-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.profile-facts { margin: 18px 0 0; }
.profile-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.profile-facts dt { color: var(--ink-soft); font-size: .9rem; }
.profile-facts dd { margin: 0; text-align: right; font-weight: 600; font-size: .92rem; }
.profile-tagline { color: var(--ink-soft); font-size: 1.12rem; margin-top: -8px; }
.profile-bio { max-width: 640px; }

.chat-section {
  margin-top: 28px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.chat-section h2 { margin-bottom: 8px; }
.chat-note { color: var(--ink-soft); font-size: .95rem; }
.chat-embed-placeholder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px;
  padding: 34px 20px;
  color: var(--ink-soft);
}
.chat-embed-placeholder strong { color: var(--ink); font-family: var(--font-display); }

/* ---------------------------------------------------------------- Blog */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.post-list { display: grid; gap: 24px; max-width: 760px; }
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.post-card h2, .post-card h3 { margin: 6px 0 8px; }
.post-card a { color: var(--ink); text-decoration: none; }
.post-card a:hover { color: var(--accent); }
.post-card time { color: var(--ink-soft); font-size: .85rem; }
.post-category {
  color: var(--accent-deep);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.article { max-width: 720px; }
.article-head { margin-bottom: 24px; }
.article-head time { color: var(--ink-soft); }
.article-body { font-size: 1.06rem; }
.article-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }

/* ---------------------------------------------------------------- About */

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.about-notes { max-width: 720px; }

/* ---------------------------------------------------------------- Ads, breadcrumbs, articles-by */

.ad-slot { max-width: 1120px; margin: 18px auto; padding: 0 20px; }
.ad-slot::before {
  content: "Advertisement";
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.advisor-grid .ad-slot { grid-column: 1 / -1; margin: 0; padding: 0; }

.breadcrumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 10px; }
.breadcrumbs a { text-decoration: none; }
.specialty-intro { max-width: 680px; }
.specialty-intro p { color: var(--ink-soft); }

.article-byline { color: var(--ink-soft); font-size: .9rem; }
.profile-articles { margin-top: 28px; }
.profile-articles ul { list-style: none; margin: 0; padding: 0; }
.profile-articles li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.profile-articles li time { color: var(--ink-soft); font-size: .85rem; white-space: nowrap; }

/* ---------------------------------------------------------------- Misc public */

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination a, .page-current {
  min-width: 38px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
}
.page-current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.error-page { text-align: center; padding: 40px 0 60px; }
.error-code { font-family: var(--font-display); font-size: 5rem; color: var(--accent); margin: 0; line-height: 1; }
.auth-card {
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.auth-note { color: var(--ink-soft); font-size: .93rem; }

/* ---------------------------------------------------------------- Dashboards (me + admin) */

.dash-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.dash-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 28px; align-items: start; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.panel h2 { font-size: 1.15rem; }
.status-panel { border-left: 5px solid var(--ink-soft); }
.status-panel.is-online { border-left-color: var(--online); }
.status-panel.is-offline { border-left-color: var(--border); }
.status-current strong { color: var(--online); }
.is-offline .status-current strong { color: var(--ink-soft); }
.status-note { font-size: .88rem; color: var(--ink-soft); margin-top: 12px; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
.admin-nav a {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: .93rem;
}
.admin-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-nav-logout { margin-left: auto; }
.admin-nav-logout button {
  background: none;
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: underline;
}
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 18px 0 28px; }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.stat-value { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.stat-online .stat-value { color: var(--online); }
.stat-label { color: var(--ink-soft); font-size: .88rem; }

.bar-rows { display: grid; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; font-size: .85rem; }
.bar-label { color: var(--ink-soft); white-space: nowrap; }
.bar-track { background: var(--accent-soft); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-value { text-align: right; font-weight: 600; }

.panel > .admin-table { display: block; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; margin: 14px 0 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .93rem; }
.admin-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .num { text-align: right; }
.row-muted td { opacity: .55; }
.cell-thumb img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.cell-actions { white-space: nowrap; }
.cell-actions form { display: inline-block; margin-right: 6px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.form-grid .span-2 { grid-column: span 2; }
.form-section {
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
}
.form-grid .form-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.check-row { display: flex; gap: 26px; flex-wrap: wrap; }
.status-form { display: inline-flex; gap: 6px; align-items: center; }
.status-form select { width: auto; padding: 5px 8px; font-size: .85rem; }
.current-photo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.current-photo img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }

/* ---------------------------------------------------------------- Footer */

.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 40px; }
.site-footer .brand { color: color-mix(in srgb, var(--footer-text) 30%, #fff); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 36px; padding: 44px 20px 20px; }
.footer-tagline { color: color-mix(in srgb, var(--footer-text) 80%, transparent); font-size: .95rem; }
.footer-links { display: grid; gap: 8px; align-content: start; }
.footer-links a { color: var(--footer-text); text-decoration: none; }
.footer-links a:hover { color: color-mix(in srgb, var(--footer-text) 30%, #fff); }
.footer-newsletter h3 { color: color-mix(in srgb, var(--footer-text) 30%, #fff); margin-bottom: 10px; }
.newsletter-row { display: flex; gap: 10px; }
.newsletter-row input { border: none; }
.footer-note { border-top: 1px solid color-mix(in srgb, var(--footer-text) 18%, transparent); padding-top: 16px; padding-bottom: 22px; }
.footer-note p { color: color-mix(in srgb, var(--footer-text) 65%, transparent); font-size: .82rem; margin: 0; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .profile-grid, .dash-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    gap: 14px;
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-search-header { order: -1; }
  .site-search-header input,
  .site-search-header input:focus { width: auto; flex: 1 1 auto; }
  .hero { padding: 48px 0 40px; }
  .section { padding: 34px 0; }
  .cell-thumb { display: none; }
}

/* ---------------------------------------------------------------- Theme presets (admin) */

.preset-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.preset-card {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.preset-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.preset-dots { display: inline-flex; gap: 4px; }
.preset-dots span { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }

/* ---------------------------------------------------------------- Announcement bar */

.announcement-bar { padding: 8px 0; font-size: .92rem; font-weight: 600; text-align: center; }

/* ---------------------------------------------------------------- Topics */

.topics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) { .topics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }
.topic-box {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.topic-box:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--ink); }
.topic-icon { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: 10px; color: var(--accent); }
.topic-box h2 { font-size: 1.02rem; margin-bottom: 6px; }
.topic-box p { color: var(--ink-soft); font-size: .82rem; margin: 0; }
.topic-icon-inline { color: var(--accent); }

/* ---------------------------------------------------------------- Products */

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 18px; }
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(40, 24, 8, .06), 0 8px 20px rgba(40, 24, 8, .07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(40, 24, 8, .1), 0 16px 34px rgba(40, 24, 8, .12); }
/* Fixed short landscape media (was a full square) roughly halves photo height,
   so far more of the catalogue is visible at once (store revenue pass). The
   explicit height also overrides the img tag's presentational height attribute,
   which otherwise wins over aspect-ratio. */
.product-card img { width: 100%; height: 132px; object-fit: cover; display: block; box-shadow: inset 0 -1px 0 rgba(40, 24, 8, .08); }
.product-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: .95rem; margin-bottom: 5px; line-height: 1.3; }
.product-body p {
  color: var(--ink-soft); font-size: .85rem; flex: 1; line-height: 1.45;
  /* Keep cards scannable: clamp the blurb to 3 lines so far more of the
     catalogue fits on screen (store revenue pass). Full copy lives on the
     product page. */
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
/* Never let a longer CTA wrap into a tall lopsided pill. */
.product-foot .btn { white-space: nowrap; flex: none; padding: 9px 18px; }
.product-price { font-weight: 800; font-size: 1.08rem; color: var(--accent); white-space: nowrap; }
.btn-disabled { opacity: .55; cursor: default; pointer-events: none; }
.store-note { margin-top: 28px; }

/* ---------------------------------------------------------------- Quiz */

.quiz-hero {
  background:
    radial-gradient(900px 360px at 50% -20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  padding: 40px 0 8px;
  text-align: center;
}
.as-seen-on {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.as-seen-on strong { text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.as-seen-on .social { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-deep); }
.as-seen-on svg { width: 20px; height: 20px; }
.quiz-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-top: 16px; }
.quiz-card { max-width: 760px; }
.quiz-question { border: none; margin: 0 0 26px; padding: 0; }
.quiz-question legend { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 12px; }
.quiz-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: .9rem;
  margin-right: 6px;
}
.quiz-answers { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-answer { margin: 0; cursor: pointer; }
.quiz-answer input { position: absolute; opacity: 0; }
.quiz-answer span {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .93rem;
  font-weight: 500;
  transition: border-color .12s, background .12s;
}
.quiz-answer:hover span { border-color: var(--accent); }
.quiz-answer input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.quiz-answer input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.quiz-submit { text-align: center; margin-top: 30px; }
.quiz-submit .muted { margin-top: 10px; font-size: .88rem; }
.quiz-result { text-align: center; max-width: 900px; }
.result-kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--accent-deep); margin-bottom: 4px; }
.result-blurb { max-width: 680px; margin: 0 auto 30px; font-size: 1.06rem; text-align: left; }
.quiz-result .advisor-grid { text-align: left; }
.quiz-again { margin-top: 26px; }
.quiz-cta { text-align: center; max-width: 640px; }

/* ---------------------------------------------------------------- FAQ + legal + article figures */

.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-item p { color: var(--ink-soft); padding-bottom: 12px; margin: 0; }
.legal h2 { margin-top: 30px; }
.article-body h2 { margin-top: 34px; }
.article-body h3 { margin-top: 22px; }
.article-body ul { padding-left: 22px; }
.article-body li { margin-bottom: 6px; }
.post-figure { margin: 26px 0; }
.post-figure img { width: 100%; height: auto; border-radius: var(--radius); }
.post-figure figcaption { color: var(--ink-soft); font-size: .85rem; margin-top: 8px; text-align: center; }

/* ---------------------------------------------------------------- Footer v3 (4 columns) */

.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; }
.footer-links h3 { color: color-mix(in srgb, var(--footer-text) 30%, #fff); font-size: .95rem; margin-bottom: 4px; }
.footer-about { color: color-mix(in srgb, var(--footer-text) 85%, transparent); font-size: .88rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-newsletter { grid-column: span 2; } }

/* ---------------------------------------------------------------- Custom themes UI */

.preset-pair { display: inline-flex; align-items: center; gap: 4px; }
.preset-x {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  width: 26px; height: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: .95rem;
}
.preset-x:hover { color: var(--danger); border-color: var(--danger); }
.theme-save-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.theme-save-row input { max-width: 320px; }

/* Two-up admin panels */
.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .admin-columns { grid-template-columns: 1fr; } }

/* Advisor profile mini-gallery */
.profile-gallery { display: flex; gap: 10px; margin-top: 10px; }
.profile-gallery img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.profile-gallery a:hover img { border-color: var(--accent); }

/* Admin list filter row */
.admin-filter { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.admin-filter label { display: flex; gap: 8px; align-items: center; }

/* Admin settings tabs */
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-tabs button {
  font: inherit;
  font-weight: 700;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.admin-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.settings-save {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

/* Hex input + native color swatch pair */
.hex-row { display: flex; gap: 8px; align-items: center; }
.hex-row input[type="text"] { flex: 1; }
.hex-row input[type="color"] {
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}

/* Back-to-top on long admin pages */
.admin-top-link {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.admin-top-link:hover { background: var(--accent-deep); }

/* Header logo */
.brand-logo { display: inline-block; max-height: 38px; width: auto; vertical-align: middle; }
.brand-has-logo { display: inline-flex; align-items: center; gap: 10px; }

/* Dashboard import row */
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.import-pack-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.import-pack-form input[type="file"] { font-size: .85rem; max-width: 240px; }

/* Cookie-consent banner (fixed bottom card) */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.consent-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.consent-inner p { margin: 0; font-size: .93rem; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .consent-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .consent-actions { justify-content: center; }
}

/* Follow Us social icon rows */
.social-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform .12s ease, background .12s ease;
}
.social-link:hover { transform: translateY(-2px); }
.social-link svg { display: block; }
/* Brand style: official colors on a soft chip so dark glyphs read anywhere */
.social-style-brand .social-link { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.social-style-brand .social-link:hover { background: #f3f3f3; }
/* Theme style: monochrome, inherits its surroundings */
.social-style-theme .social-link { color: var(--ink-soft); background: color-mix(in srgb, currentColor 10%, transparent); }
.social-style-theme .social-link:hover { color: var(--accent); }
.social-footer.social-style-theme .social-link { color: var(--footer-text); }
.social-footer.social-style-theme .social-link:hover { color: #ffffff; }
.social-header { margin-left: 4px; }
.social-header .social-link { width: 28px; height: 28px; }
.social-header .social-link svg { width: 15px; height: 15px; }
.footer-newsletter .social-heading { margin-top: 26px; }
@media (max-width: 960px) { .social-header { display: none; } }

/* App store badges (footer, under Follow us) */
.app-badges { display: flex; gap: 8px; margin-top: 20px; flex-wrap: nowrap; }
.app-badge { display: block; flex: 1 1 0; max-width: 106px; }
.app-badge svg { display: block; width: 100%; height: auto; border-radius: 7px; }
.app-badge:hover svg rect:first-child { fill: #1a1a1a; }

/* Advisor profile extras */
.country-flag { margin-left: 4px; font-size: 1.05em; cursor: default; }
.profile-socials { margin-top: 16px; }
.profile-socials h3 { font-size: .95rem; margin-bottom: 8px; }
.social-profile.social-style-theme .social-link { color: var(--ink-soft); }
.social-profile.social-style-theme .social-link:hover { color: var(--accent); }

/* Quiz result: keep + share row; related-articles cards are links */
.quiz-keep { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 28px 0 8px; }
.quiz-capture { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; max-width: 420px; text-align: left; }
.quiz-capture h3 { margin-bottom: 4px; }
.quiz-capture p { margin-bottom: 10px; }
a.related-card { display: block; color: inherit; text-decoration: none; }
a.related-card h3 { margin: 6px 0; }
a.related-card:hover h3 { color: var(--accent); }
a.related-card time { font-size: .85rem; color: var(--ink-soft); }

/* Country flags: self-hosted color-emoji flag glyphs (Windows has none).
   unicode-range keeps the font from downloading until a flag is on screen. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}
.country-flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }

/* Daily horoscopes */
.zodiac-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .zodiac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .zodiac-grid { grid-template-columns: repeat(2, 1fr); } }
.zodiac-box img { display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; }
.zodiac-note { text-align: center; margin-top: 28px; }
.horoscope .article-head { text-align: center; }
.zodiac-hero {
  display: block;
  width: min(320px, 70vw);
  height: auto;
  margin: 26px auto 6px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sign-switcher { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sign-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
}
.sign-chip span { color: var(--accent); }
.sign-chip:hover { border-color: var(--accent); }
.sign-chip.is-current { background: var(--accent-soft); border-color: var(--accent); }

/* In-article ad slots sit inside the article column, not the page gutter */
.article .ad-slot { max-width: none; margin: 26px 0; padding: 0; }

/* Share buttons & rows */
.h1-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.h1-row h1 { margin-bottom: 0; }
.page-head .h1-row { margin-bottom: 10px; }
/* Centered headers: the title alone defines the centering (so it lines up with the
   card columns below); the share button sits out of flow, pinned to the right edge
   and vertically centered against the full title height. */
.article-head .h1-row,
.h1-row-center { position: relative; justify-content: center; padding: 0 92px; }
.article-head .h1-row .share-wrap,
.h1-row-center .share-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .article-head .h1-row,
  .h1-row-center { padding: 0; }
  .article-head .h1-row .share-wrap,
  .h1-row-center .share-wrap { position: relative; right: auto; top: auto; transform: none; }
}
.share-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
/* Quiet by default (transparent chip, muted, reduced opacity); only lights up
   on hover so it never competes with the page. */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  opacity: .68;
  cursor: pointer;
  transition: opacity .15s, color .15s, border-color .15s;
}
.share-btn:hover { opacity: 1; color: var(--accent); border-color: var(--border); }
.share-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  white-space: nowrap;
}
.article-head .share-menu { left: auto; right: 0; }
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-row-label { font-weight: 700; font-size: .92rem; margin-right: 4px; }
.share-link {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
}
.share-link:hover { color: var(--accent); border-color: var(--accent); }
.share-copy.copied::after,
.share-link[data-share-copyopen].copied::after {
  content: 'Copied \2713';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: .72rem;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.share-link[data-share-copyopen].copied::after { content: 'Link copied \2013 paste it there'; }
.article-foot .share-row, .horoscope-share .share-row { justify-content: center; margin-top: 18px; }
.profile-share { margin-top: 16px; }
.profile-share .share-row-label { display: block; width: 100%; margin-bottom: 2px; }

/* Windowed pagination extras */
.pagination { flex-wrap: wrap; align-items: center; }
.page-gap { color: var(--ink-soft); padding: 0 2px; align-self: center; }
.page-arrow { font-weight: 700; }
.h1-row-center .share-menu { left: auto; right: 0; }

/* Custom pages */
.page-intro { max-width: 720px; color: var(--ink-soft); margin-bottom: 18px; }
.page-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 1000px) { .page-panels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .page-panels { grid-template-columns: 1fr; } }
.page-panel { text-align: left; cursor: default; }
.page-panel:hover { transform: none; border-color: var(--border); }
.page-panel h2 { font-size: 1.1rem; margin-bottom: 8px; }
.page-panel p { font-size: .92rem; color: var(--ink-soft); margin-bottom: 8px; }
.page-faq { max-width: 760px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 18px;
  list-style: none;
}
.faq-item summary::before { content: '+'; color: var(--accent); font-weight: 800; margin-right: 10px; }
.faq-item[open] summary::before { content: '–'; }
.faq-answer { padding: 0 18px 14px 18px; color: var(--ink-soft); }
.affiliate-disclosure { margin-top: 18px; font-size: .82rem; text-align: center; }
.store-group-head { margin-top: 36px; }
.store-group-head:first-child { margin-top: 0; }

/* Quiz hub */
.quiz-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 720px) { .quiz-hub-grid { grid-template-columns: 1fr; } }
.quiz-hub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.quiz-hub-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.free-badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.quiz-hub-card h2 { font-size: 1.25rem; margin: 0; }
.quiz-hub-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.quiz-hub-meta { font-size: .82rem !important; }
.quiz-hub-card .btn { margin-top: 6px; }
.quiz-hub-note { text-align: center; margin-top: 30px; }
.quiz-gate { text-align: center; max-width: 560px; }
.quiz-gate .newsletter-row { max-width: 460px; margin: 18px auto 0; }
.quiz-score { margin-top: -8px; }
.share-menu { width: max-content; }
.share-menu .share-row { flex-wrap: nowrap; }

/* ------------------------------------------------- In-depth readings (v12) */

.reading-cta { display: block; text-align: center; margin: 14px 0 4px; }
.reading-cta-note { font-size: .82rem; text-align: center; margin: 6px 0 0; }
.reading-grid { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.reading-intro p { max-width: 640px; }
.reading-type-list { margin: 26px 0; }
.reading-type {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  padding: 0;
}
.reading-type summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none;
}
.reading-type summary::-webkit-details-marker { display: none; }
.reading-type summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.reading-type[open] summary::after { content: "\2212"; }
.reading-type-price { color: var(--accent); white-space: nowrap; margin-left: auto; }
.reading-type p { padding: 0 18px 14px; margin: 0; color: var(--ink-soft); }
.reading-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.reading-form h2 { margin-bottom: 4px; }
.reading-form .form-grid { margin-top: 16px; }
.btn-large { padding: 14px 34px; font-size: 1.05rem; margin-top: 18px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.reading-fine-print { margin-top: 26px; color: var(--ink-soft); font-size: .85rem; }
.reading-fine-print p { max-width: 680px; }
.reading-advisor-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; text-align: center; position: sticky; top: 84px;
}
.reading-advisor-card img { border-radius: 50%; margin: 0 auto 12px; width: 120px; height: 120px; object-fit: cover; }
.reading-advisor-card h3 { margin-bottom: 2px; }
.reading-pay { max-width: 640px; }
.reading-summary { margin-bottom: 22px; }
.reading-pay-buttons { display: grid; gap: 12px; margin-bottom: 14px; }
.reading-pay-buttons .btn { text-align: center; }
.reading-pay-note { font-size: .88rem; }
.reading-thanks { max-width: 640px; }
.reading-thanks-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ------------------------------------------------------ Admin add-ons (v12) */

.range-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 20px; }
.range-picker a {
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .92rem;
  background: var(--surface);
}
.range-picker a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.bar-rows-scroll { max-height: 420px; overflow-y: auto; }
.order-status { font-weight: 600; font-size: .85rem; padding: 3px 10px; border-radius: 999px; }
.order-new { background: var(--accent-soft); color: var(--accent-deep); }
.order-paid { background: var(--online-soft); color: #14603d; }
.order-delivered { background: var(--border); color: var(--ink-soft); }
.readings-table details summary { cursor: pointer; color: var(--accent); }

@media (max-width: 900px) {
  .reading-grid { grid-template-columns: 1fr; }
  .reading-advisor-card { position: static; }
}

/* Trending-this-week list (homepage flywheel block) */
.trending-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 1.5rem; }
.trending-list li { padding: .55rem .75rem; border: 1px solid var(--border, #e4e0ee); border-radius: 10px; background: var(--card-bg, #fff); }
.trending-list li a { text-decoration: none; font-weight: 600; }
.trending-list li .muted { font-size: .82rem; margin-left: .4rem; }

/* Quotable key-fact callout ([fact]...[/fact] in article bodies) */
.key-fact { display: block; margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--accent, #5b3fb8); background: color-mix(in srgb, var(--accent, #5b3fb8) 6%, transparent); border-radius: 0 10px 10px 0; font-size: 1.02rem; }
.key-fact strong { color: var(--accent, #5b3fb8); }

/* Visible article freshness line */
.post-updated { font-size: .88rem; }

.admin-down-link { position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow); }
.admin-down-link { bottom: 4.4rem; }
.settings-form h2.form-section { cursor: pointer; user-select: none; }
.settings-form h2.form-section::after { content: " \2212"; color: var(--accent, #5b3fb8); font-weight: 700; }
.settings-form h2.form-section.sec-collapsed::after { content: " +"; }

/* House ads: the site promoting its own funnel in otherwise-empty ad slots,
   in one of five split-tested looks. No "Advertisement" label (first-party). */
.house-ad::before { content: none; }
.house-ad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  border-radius: var(--radius);
}
.house-ad-body { flex: 1 1 auto; min-width: 0; }
.house-ad-kicker { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 2px; }
.house-ad-headline { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.house-ad-cta {
  flex: 0 0 auto; white-space: nowrap; display: inline-block;
  border: 1px solid transparent; border-radius: 999px; padding: 10px 22px;
  font: inherit; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #fff; transition: background .15s, transform .15s;
}
.house-ad-cta:hover { background: var(--accent-deep); transform: translateY(-1px); color: #fff; }
.house-ad-glyph { width: 26px; height: 26px; display: block; }
.house-ad-badge {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
}
.article .house-ad { margin: 26px 0; }
.advisor-grid .house-ad { margin: 0; }

/* 1. Aurora Card - soft violet wash, moonlit badge (site default accent) */
.house-ad--aurora {
  align-items: center;
  background: linear-gradient(105deg, var(--surface) 55%, var(--accent-soft));
  border: 1px solid var(--border); padding: 16px 22px;
  box-shadow: 0 1px 2px rgba(43,36,55,.05), 0 10px 26px rgba(91,63,184,.06);
}
.house-ad--aurora .house-ad-badge { background: var(--accent-soft); color: var(--accent); }
.house-ad--aurora .house-ad-kicker { color: var(--gold); }

/* 2. Nightfall Banner - deep midnight sky, gold is the hero (de-purpled) */
.house-ad--nightfall {
  gap: 8px 22px; padding: 20px 26px; color: #f3ecdd; overflow: hidden;
  background:
    radial-gradient(2px 2px at 14% 32%, rgba(255,244,214,.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 26% 72%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 20%, rgba(255,244,214,.7), transparent 60%),
    radial-gradient(1px 1px at 58% 60%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 72% 38%, rgba(255,244,214,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 66%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 92% 26%, rgba(255,244,214,.7), transparent 60%),
    radial-gradient(150% 200% at 90% 130%, color-mix(in srgb, var(--gold) 46%, transparent), transparent 52%),
    linear-gradient(118deg, #221d33, #1a1626 52%, #12101b);
}
.house-ad--nightfall .house-ad-badge { color: #f4e2b0; width: auto; height: auto; }
.house-ad--nightfall .house-ad-glyph { width: 32px; height: 32px; filter: drop-shadow(0 0 10px rgba(244,213,138,.4)); }
.house-ad--nightfall .house-ad-kicker { color: var(--gold); }
.house-ad--nightfall .house-ad-headline { color: #fdf7ea; font-size: 1.3rem; }
.house-ad--nightfall .house-ad-cta { background: var(--gold); color: #2a1e05; }
.house-ad--nightfall .house-ad-cta:hover { background: #e0a92a; color: #2a1e05; }

/* 3. Split Feature - accent panel + glyph beside a cream text zone */
.house-ad--split {
  gap: 0; padding: 0; align-items: stretch; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(43,36,55,.05), 0 10px 26px rgba(43,36,55,.05);
}
.house-ad--split .house-ad-panel {
  flex: 0 0 120px; display: grid; place-items: center; color: rgba(255,255,255,.92);
  background: radial-gradient(120% 120% at 30% 20%, var(--accent), var(--accent-deep));
}
.house-ad--split .house-ad-glyph { width: 42px; height: 42px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.house-ad--split .house-ad-body { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 22px; }
.house-ad--split .house-ad-kicker { color: var(--gold); flex: 0 0 100%; margin: 0; }
.house-ad--split .house-ad-headline { flex: 1 1 auto; }
.house-ad--split .house-ad-cta { flex: 0 0 auto; align-self: center; }

/* 4. Quiet Rule - thin gold rule, a sparkle, a text link. Editorial aside. */
.house-ad--quiet {
  gap: 12px; padding: 14px 4px; border-top: 2px solid var(--gold); align-items: center;
}
.house-ad--quiet .house-ad-badge { width: auto; height: auto; color: var(--accent); }
.house-ad--quiet .house-ad-glyph { width: 18px; height: 18px; }
.house-ad--quiet .house-ad-kicker { display: inline; color: var(--gold); margin-right: 8px; }
.house-ad--quiet .house-ad-headline { display: inline; font-size: 1.02rem; }
.house-ad--quiet .house-ad-cta {
  background: none; color: var(--accent); border: 0; border-radius: 0; padding: 0;
  border-bottom: 1px solid transparent;
}
.house-ad--quiet .house-ad-cta:hover { background: none; color: var(--accent-deep); border-bottom-color: currentColor; transform: none; }

/* 5. Ticket / Offer - perforated coupon, gold tag, support line */
.house-ad--ticket {
  gap: 18px; align-items: center; padding: 18px 24px;
  background:
    radial-gradient(circle at 0 50%, transparent 9px, var(--surface) 10px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 9px, var(--surface) 10px) right / 51% 100% no-repeat;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
}
.house-ad--ticket .house-ad-tag {
  flex: 0 0 auto; align-self: flex-start; background: var(--gold); color: #3a2a05;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
  padding: 5px 11px; border-radius: 6px; box-shadow: 0 2px 6px rgba(201,146,21,.3);
}
.house-ad--ticket .house-ad-sub { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: 3px; }

@media (max-width: 560px) {
  .house-ad-headline { flex: 1 1 100%; }
  .house-ad--aurora .house-ad-cta,
  .house-ad--nightfall .house-ad-cta,
  .house-ad--ticket .house-ad-cta { width: 100%; text-align: center; }
  .house-ad--split { flex-direction: column; }
  .house-ad--split .house-ad-panel { flex-basis: 84px; }
  .house-ad--split .house-ad-cta { width: 100%; text-align: center; }
}

/* Recruit toolkit: copy-to-clipboard rows for referral links and scripts. */
.recruit-table td { vertical-align: top; }
.copy-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.copy-tag {
  flex: 0 0 auto; min-width: 68px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.copy-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; padding: 7px 9px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.copy-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.copy-block { display: block; width: 100%; line-height: 1.5; resize: vertical; white-space: pre; }
.copy-row .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .copy-row { flex-wrap: wrap; }
  .copy-tag { min-width: 0; }
}

/* Settings megapage: jump nav above the accordion of form-sections. */
.settings-jump {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin: 0 0 18px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.settings-jump a {
  font-size: .85rem; color: var(--accent); text-decoration: none;
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft);
}
.settings-jump a:hover { background: var(--accent); color: #fff; }

/* Compact admin tables (blog posts list): denser cells, and the wrapping
   .table-scroll panel scrolls sideways instead of blowing the page wide. */
.table-scroll { overflow-x: auto; }
.table-scroll .admin-table { min-width: 720px; }
.admin-table--compact { font-size: .82rem; }
.admin-table--compact th, .admin-table--compact td { padding: 7px 8px; }
.admin-table--compact td strong { font-weight: 600; }

/* Product landing pages (/r/{type}): hero + pay form side by side on desktop,
   stacked with the form directly under the promise on phones - the buyer
   sees name/email/pay without scrolling. */
.landing { padding-top: 28px; }
.landing-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.landing-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--accent); margin: 0 0 6px; }
.landing-hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 0; }
.landing-price { font-size: 1.1rem; padding: 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.landing-promise { font-size: 1.02rem; }
.landing-trust { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.landing-trust li { font-size: .85rem; color: var(--muted); }
.landing-trust li::before { content: '\2713\00a0'; color: var(--accent); }
.landing-next { font-size: .9rem; }
.landing-form { position: sticky; top: 16px; }
.landing-fields { display: grid; gap: 10px; margin-bottom: 12px; }
.landing-fields label { display: block; font-size: .88rem; }
.landing-fields input, .landing-fields select, .landing-fields textarea { width: 100%; margin-top: 4px; }
.landing-pay { width: 100%; }
.landing-fine { font-size: .78rem; margin-top: 8px; }
#payment-slot { margin: 12px 0; }
/* v54: "Readers also order" lives inside the left hero column, above the
   fold, as compact two-up tiles. */
.landing-cross { margin-top: 26px; }
.landing-cross h2 { font-size: 1.05rem; margin-bottom: 10px; }
.landing-cross-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 460px; }
.landing-cross-card { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; font-size: .88rem; }
.landing-cross-card:hover { border-color: var(--accent); }
.landing-cross-price { color: var(--accent); font-size: .82rem; }
@media (max-width: 560px) { .landing-cross-row { grid-template-columns: 1fr; } }

/* v54 one-page thank-you: the transaction panel becomes the celebration.
   Gold rays sweep out, the check draws itself, then the personalized
   what's-next content fades in below (injected as .thanks-swap). */
.landing-form-thanks { text-align: center; overflow: hidden; position: relative; }
.ty-stage { position: relative; padding: 34px 10px 30px; }
.ty-rays {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    rgba(196,154,62,0) 0deg, rgba(196,154,62,.20) 18deg, rgba(196,154,62,0) 36deg,
    rgba(196,154,62,0) 90deg, rgba(196,154,62,.16) 108deg, rgba(196,154,62,0) 126deg,
    rgba(196,154,62,0) 180deg, rgba(196,154,62,.20) 198deg, rgba(196,154,62,0) 216deg,
    rgba(196,154,62,0) 270deg, rgba(196,154,62,.16) 288deg, rgba(196,154,62,0) 306deg);
  animation: ty-spin 14s linear infinite;
  pointer-events: none;
}
.ty-check { position: relative; width: 84px; height: 84px; margin: 0 auto 12px; display: block; }
.ty-ring {
  fill: none; stroke: var(--gold, #c49a3e); stroke-width: 3;
  stroke-dasharray: 202; stroke-dashoffset: 202;
  animation: ty-draw .8s ease-out forwards;
}
.ty-tick {
  fill: none; stroke: var(--gold, #c49a3e); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: ty-draw .5s ease-out .55s forwards;
}
.ty-head {
  position: relative; font-family: var(--font-display, serif);
  font-size: 1.6rem; font-weight: 700; margin: 4px 0 6px;
  animation: ty-pop .6s cubic-bezier(.2, 1.4, .4, 1) .7s both;
}
.ty-sub { position: relative; color: var(--ink-soft); animation: ty-pop .6s ease-out 1s both; }
.thanks-swap { animation: ty-pop .8s ease-out both; }
.landing-hero-dim { opacity: .55; transition: opacity .8s; }
@keyframes ty-spin { to { transform: rotate(360deg); } }
@keyframes ty-draw { to { stroke-dashoffset: 0; } }
@keyframes ty-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ty-rays { animation: none; opacity: .3; }
  .ty-ring, .ty-tick { animation: none; stroke-dashoffset: 0; }
  .ty-head, .ty-sub, .thanks-swap { animation: none; }
}
.thanks-live .panel { margin-bottom: 18px; }
.thanks-cross-head { margin-top: 8px; }
.checkbox-label { display: flex; gap: 8px; align-items: center; font-size: .85rem; }
@media (max-width: 800px) {
  .landing-wrap { grid-template-columns: 1fr; }
  .landing-form { position: static; }
  .landing-promise { font-size: .95rem; }
}

/* ------------------------------------------------ v49 house-ad layouts (15) */
/* banner: one horizontal bar, button pinned right */
.house-ad--banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad--banner .house-ad-cta { margin-left: auto; }

/* stack: centered, headline does the work */
.house-ad--stack { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 26px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad--stack .house-ad-headline { font-size: 1.45rem; }

/* pill: a single soft line */
.house-ad--pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-radius: 999px; background: var(--accent-soft); }
.house-ad--pill .house-ad-headline { font-size: .95rem; }
.house-ad--pill .house-ad-cta { background: none; color: var(--accent); padding: 0; font-weight: 700; }
.house-ad--pill .house-ad-cta:hover { transform: none; text-decoration: underline; }
.house-ad--pill .house-ad-glyph { width: 18px; height: 18px; color: var(--accent); }

/* cardbox: a tidy sales card */
.house-ad--cardbox { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.house-ad--cardbox .house-ad-sub { display: block; font-size: .85rem; color: var(--muted); }
.house-ad--cardbox .house-ad-cta { align-self: flex-start; margin-top: 6px; }

/* glow: dark card, slow moving gradient edge */
@keyframes ha-glow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.house-ad--glow { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius);
  color: #f5efff; background: linear-gradient(#241b38, #241b38) padding-box,
  linear-gradient(120deg, #7c5cff, #d6a72e, #7c5cff) border-box;
  border: 2px solid transparent; background-size: 100% 100%, 300% 300%; animation: ha-glow 7s ease infinite; }
.house-ad--glow .house-ad-headline { color: #fff; }
.house-ad--glow .house-ad-kicker { color: #d9c67f; }
.house-ad--glow .house-ad-cta { margin-left: auto; }

/* ribbon: kicker folded into a corner ribbon */
.house-ad--ribbon { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 22px 20px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad--ribbon .house-ad-ribbon { position: absolute; top: 12px; left: -34px; transform: rotate(-35deg);
  background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 38px; }
.house-ad--ribbon .house-ad-cta { margin-left: auto; }

/* chatpop: an incoming message from a reader */
.house-ad--chatpop { display: flex; align-items: flex-end; gap: 10px; padding: 6px 0; }
.house-ad--chatpop .house-ad-bubble { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px; padding: 12px 16px; max-width: 34em; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.house-ad--chatpop .house-ad-headline { font-size: 1rem; font-family: inherit; }
.house-ad--chatpop .house-ad-sub { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* stat: the number leads */
.house-ad--stat { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad--stat .house-ad-stat { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--accent); white-space: nowrap; }
.house-ad--stat .house-ad-cta { margin-left: auto; }

/* question: a big soft ? mark */
.house-ad--question { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.house-ad--question .house-ad-q { font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--accent); line-height: 1; }
.house-ad--question .house-ad-cta { margin-left: auto; }

/* spotlight: dark, radial light on the words */
.house-ad--spotlight { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: var(--radius);
  background: radial-gradient(ellipse 60% 120% at 30% 50%, #3d3358 0%, #17121f 70%); color: #efe9fb; }
.house-ad--spotlight .house-ad-headline { color: #fff; text-shadow: 0 0 18px rgba(203,178,255,.45); }
.house-ad--spotlight .house-ad-kicker { color: #cdb97e; }
.house-ad--spotlight .house-ad-cta { margin-left: auto; }

/* note: a handwritten aside pinned to the page */
.house-ad--note { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 14px;
  background: #fdf6df; border-radius: 4px 14px 4px 14px; box-shadow: 0 3px 10px rgba(120,90,20,.15);
  transform: rotate(-.6deg); }
.house-ad--note .house-ad-headline { font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: #4a3a12; font-size: 1.1rem; }
.house-ad--note .house-ad-sub { font-size: .85rem; color: #7a6427; }
.house-ad--note .house-ad-cta { align-self: flex-end; background: #4a3a12; }
.house-ad--note .house-ad-cta:hover { background: #2f2408; }

/* orbit: a glyph slowly circling the badge */
@keyframes ha-orbit { from { transform: rotate(0deg) translateX(21px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(21px) rotate(-360deg); } }
.house-ad--orbit { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad-orbit-badge { position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.house-ad-satellite { position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px;
  animation: ha-orbit 6s linear infinite; color: var(--gold); }
.house-ad-satellite .house-ad-glyph { width: 14px; height: 14px; }
.house-ad--orbit .house-ad-cta { margin-left: auto; }

/* WILD tarot: a mini card that flips on hover (tap = follow the link) */
.house-ad--tarot { display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); perspective: 500px; }
.house-ad-card { position: relative; width: 44px; height: 66px; flex: 0 0 auto;
  transform-style: preserve-3d; transition: transform .6s; }
.house-ad--tarot:hover .house-ad-card { transform: rotateY(180deg); }
.house-ad-card-back, .house-ad-card-face { position: absolute; inset: 0; border-radius: 6px;
  display: grid; place-items: center; backface-visibility: hidden; }
.house-ad-card-back { background: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--accent-deep, #4b3aa6) 4px 8px);
  color: var(--gold); }
.house-ad-card-face { background: #fdf7ea; color: #5a4a92; border: 1px solid var(--gold); transform: rotateY(180deg); }
.house-ad--tarot .house-ad-cta { margin-left: auto; }

/* WILD ouija: planchette drifts toward the CTA */
@keyframes ha-drift { 0%, 100% { transform: translateX(0) rotate(-6deg); } 50% { transform: translateX(10px) rotate(4deg); } }
.house-ad--ouija { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius);
  background: #1d1610; color: #efe3cd; border: 1px solid #4a3a24;
  font-family: Georgia, 'Times New Roman', serif; }
.house-ad-planchette { width: 40px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  background: #caa96d; color: #241b0d; clip-path: polygon(50% 0, 100% 72%, 78% 100%, 22% 100%, 0 72%);
  animation: ha-drift 3.5s ease-in-out infinite; }
.house-ad--ouija .house-ad-headline { color: #f7ecd7; letter-spacing: .06em; }
.house-ad--ouija .house-ad-kicker { color: #caa96d; }
.house-ad--ouija .house-ad-cta { margin-left: auto; background: #caa96d; color: #241b0d; }
.house-ad--ouija .house-ad-cta:hover { background: #e0c084; color: #241b0d; }

/* WILD candle: a flame flickering behind the words */
@keyframes ha-flicker { 0%, 100% { opacity: .85; transform: scale(1); } 25% { opacity: 1; transform: scale(1.06) translateY(-1px); }
  55% { opacity: .7; transform: scale(.97); } 80% { opacity: .95; transform: scale(1.03); } }
.house-ad--candle { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 18px 20px; border-radius: var(--radius); background: #201626; color: #f4e9d8; }
.house-ad-flame { position: absolute; left: 8%; top: 50%; width: 90px; height: 90px; margin-top: -45px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,190,80,.55) 0%, rgba(255,140,40,.22) 45%, transparent 70%);
  animation: ha-flicker 2.2s ease-in-out infinite; pointer-events: none; }
.house-ad--candle .house-ad-body { position: relative; }
.house-ad--candle .house-ad-headline { color: #ffe9bd; }
.house-ad--candle .house-ad-kicker { color: #e9b45c; }
.house-ad--candle .house-ad-cta { margin-left: auto; background: #e9b45c; color: #33200a; position: relative; }
.house-ad--candle .house-ad-cta:hover { background: #f7ca7c; color: #33200a; }

@media (max-width: 640px) {
  .house-ad--banner, .house-ad--glow, .house-ad--stat, .house-ad--question,
  .house-ad--spotlight, .house-ad--orbit, .house-ad--tarot, .house-ad--ouija,
  .house-ad--candle, .house-ad--ribbon { flex-wrap: wrap; }
  .house-ad--banner .house-ad-cta, .house-ad--glow .house-ad-cta, .house-ad--stat .house-ad-cta,
  .house-ad--question .house-ad-cta, .house-ad--spotlight .house-ad-cta, .house-ad--orbit .house-ad-cta,
  .house-ad--tarot .house-ad-cta, .house-ad--ouija .house-ad-cta, .house-ad--candle .house-ad-cta,
  .house-ad--ribbon .house-ad-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* Personal strip (v50): recommendation cards + browse-trail chips. */
.for-you { padding: 20px 0 6px; }
.for-you-block { margin-bottom: 14px; }
.for-you-head { font-size: 1.05rem; margin: 0 0 10px; }
.for-you-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.for-you-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.for-you-card:hover { border-color: var(--accent); }
.for-you-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.for-you-trail { display: flex; flex-wrap: wrap; gap: 8px; }
.for-you-chip { font-size: .82rem; padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink); text-decoration: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.for-you-chip:hover { background: var(--accent); color: #fff; }

/* Store compact grid (v50): the personalized "Picked for you" rows sit tighter. */
.product-grid--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.product-grid--compact .product-card { padding: 12px; }
.product-grid--compact .product-card h3 { font-size: .95rem; }
.product-grid--compact .product-card p { font-size: .82rem; }

/* v52 wild layouts */
@keyframes ha-twinkle { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.house-ad--constellation { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 18px 20px; border-radius: var(--radius); background: #131024; color: #efeafd; }
.house-ad-stars { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle 1.5px at 12% 30%, #fff 99%, transparent),
    radial-gradient(circle 1px at 28% 70%, #cbb2ff 99%, transparent),
    radial-gradient(circle 1.5px at 46% 22%, #fff 99%, transparent),
    radial-gradient(circle 1px at 63% 64%, #ffd98a 99%, transparent),
    radial-gradient(circle 1.5px at 78% 32%, #fff 99%, transparent),
    radial-gradient(circle 1px at 90% 74%, #cbb2ff 99%, transparent);
  animation: ha-twinkle 3s ease-in-out infinite; }
.house-ad--constellation .house-ad-body { position: relative; }
.house-ad--constellation .house-ad-headline { color: #fff; }
.house-ad--constellation .house-ad-kicker { color: #cdb97e; }
.house-ad--constellation .house-ad-cta { margin-left: auto; position: relative; }

@keyframes ha-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 300% 0; } }
.house-ad--scratch { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad--scratch .house-ad-headline { background: linear-gradient(100deg, var(--ink) 40%, var(--gold) 50%, var(--ink) 60%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: ha-shimmer 3.2s linear infinite; }
.house-ad--scratch .house-ad-cta { margin-left: auto; }
@media (max-width: 640px) {
  .house-ad--constellation, .house-ad--scratch { flex-wrap: wrap; }
  .house-ad--constellation .house-ad-cta, .house-ad--scratch .house-ad-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* v52: cheap visual differentiation for look-alike product art - each card in
   a varied grid gets a different hue tilt and the odd gentle rotation. */
.store-thumb-vary .product-card:nth-child(6n+2) img { filter: hue-rotate(18deg) saturate(1.08); }
.store-thumb-vary .product-card:nth-child(6n+3) img { filter: hue-rotate(-16deg); }
.store-thumb-vary .product-card:nth-child(6n+4) img { filter: hue-rotate(38deg) saturate(.95); }
.store-thumb-vary .product-card:nth-child(6n+5) img { filter: hue-rotate(-32deg) saturate(1.1); }
.store-thumb-vary .product-card:nth-child(6n) img { filter: sepia(.18) hue-rotate(8deg); }
.store-thumb-vary .product-card:nth-child(4n+3) img { transform: rotate(-1.1deg); }
.store-thumb-vary .product-card:nth-child(5n+2) img { transform: rotate(1deg); }
.store-thumb-vary .product-card img { transition: transform .25s, filter .25s; border-radius: 8px; }
.store-thumb-vary .product-card:hover img { transform: scale(1.03) rotate(0deg); }

/* ------------------------------------------- v53 ultra-experimental layouts */
/* eclipse: dark disc gliding over a glowing corona */
@keyframes ha-eclipse { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.house-ad--eclipse { display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--radius); background: #0e0b18; color: #f2ecdf; }
.house-ad-corona { position: relative; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b0 30%, rgba(255,210,110,.35) 55%, transparent 72%);
  box-shadow: 0 0 22px rgba(255,215,130,.5); }
.house-ad-eclipse-disc { position: absolute; inset: 5px; border-radius: 50%; background: #0e0b18;
  animation: ha-eclipse 7s ease-in-out infinite; }
.house-ad--eclipse .house-ad-headline { color: #fff; }
.house-ad--eclipse .house-ad-kicker { color: #d9b96a; }
.house-ad--eclipse .house-ad-cta { margin-left: auto; background: #d9b96a; color: #241b05; }

/* portal: turning conic ring */
@keyframes ha-portal { to { transform: rotate(360deg); } }
.house-ad--portal { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border-radius: var(--radius); background: #171126; color: #efe9fb; }
.house-ad-portal { position: relative; width: 50px; height: 50px; flex: 0 0 auto; display: grid;
  place-items: center; border-radius: 50%; color: #cbb2ff; }
.house-ad-portal::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#7c5cff, #d6a72e, #43d0c4, #7c5cff);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 62%);
          mask: radial-gradient(circle, transparent 58%, #000 62%);
  animation: ha-portal 6s linear infinite; }
.house-ad--portal .house-ad-glyph { width: 22px; height: 22px; }
.house-ad--portal .house-ad-headline { color: #fff; }
.house-ad--portal .house-ad-kicker { color: #cdb97e; }
.house-ad--portal .house-ad-cta { margin-left: auto; }

/* crystalball: glass orb, mist swirling */
@keyframes ha-mist { 0%, 100% { transform: translate(-18%, 8%) scale(1); }
  50% { transform: translate(16%, -10%) scale(1.25); } }
.house-ad--crystalball { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad-orb { position: relative; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
  overflow: hidden; background: radial-gradient(circle at 32% 28%, #ffffffcc 0 12%, transparent 40%),
  radial-gradient(circle, #dcd2f5 0%, #9a86d6 100%); box-shadow: inset 0 -6px 12px rgba(60,40,120,.35); }
.house-ad-orb-mist { position: absolute; inset: -30%; border-radius: 50%; filter: blur(7px);
  background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent 70%);
  animation: ha-mist 5s ease-in-out infinite; }
.house-ad--crystalball .house-ad-cta { margin-left: auto; }

/* moonphase: shadow sweeping across the moon */
@keyframes ha-phase { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); }
  100% { transform: translateX(100%); } }
.house-ad--moonphase { display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--radius); background: #101425; color: #eef0fb; }
.house-ad-moonphase { position: relative; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  overflow: hidden; background: radial-gradient(circle at 35% 35%, #fdf6de, #cfc49a 78%); }
.house-ad-moonshadow { position: absolute; inset: 0; border-radius: 50%; background: #101425ee;
  animation: ha-phase 9s ease-in-out infinite; }
.house-ad--moonphase .house-ad-headline { color: #fff; }
.house-ad--moonphase .house-ad-kicker { color: #b9c3f0; }
.house-ad--moonphase .house-ad-cta { margin-left: auto; }

/* sigils: symbols lighting up in sequence */
@keyframes ha-sigil { 0%, 100% { opacity: .25; } 20% { opacity: 1; text-shadow: 0 0 10px currentColor; } }
.house-ad--sigils { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad-sigils { display: flex; gap: 6px; flex: 0 0 auto; color: var(--accent); font-size: 1.15rem; }
.house-ad-sigil { animation: ha-sigil 3.5s infinite; }
.house-ad-sigil:nth-child(2) { animation-delay: .7s; }
.house-ad-sigil:nth-child(3) { animation-delay: 1.4s; }
.house-ad-sigil:nth-child(4) { animation-delay: 2.1s; }
.house-ad-sigil:nth-child(5) { animation-delay: 2.8s; }
.house-ad--sigils .house-ad-cta { margin-left: auto; }

/* levitate: the whole card floats */
@keyframes ha-float { 0%, 100% { transform: translateY(0); box-shadow: 0 6px 14px rgba(40,20,90,.18); }
  50% { transform: translateY(-5px); box-shadow: 0 14px 24px rgba(40,20,90,.12); } }
.house-ad--levitate { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  animation: ha-float 4s ease-in-out infinite; }
.house-ad--levitate .house-ad-cta { margin-left: auto; }

/* smoke: incense wisps drifting up */
@keyframes ha-wisp { 0% { transform: translateY(18px) scaleX(1); opacity: 0; }
  30% { opacity: .5; } 100% { transform: translateY(-26px) scaleX(1.6); opacity: 0; } }
.house-ad--smoke { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 18px 20px; border-radius: var(--radius); background: #1a1522; color: #efe7f6; }
.house-ad-wisp { position: absolute; bottom: 0; width: 44px; height: 60px; border-radius: 50%;
  filter: blur(10px); background: rgba(203,178,255,.4); animation: ha-wisp 5s ease-in infinite; }
.house-ad-wisp-a { left: 12%; }
.house-ad-wisp-b { left: 30%; animation-delay: 2.4s; }
.house-ad--smoke .house-ad-body { position: relative; }
.house-ad--smoke .house-ad-headline { color: #fff; }
.house-ad--smoke .house-ad-kicker { color: #cbb2ff; }
.house-ad--smoke .house-ad-cta { margin-left: auto; position: relative; }

/* zodiacwheel: slowly rotating ring of glyphs */
@keyframes ha-wheel { to { transform: rotate(360deg); } }
.house-ad--zodiacwheel { position: relative; display: flex; align-items: center; gap: 14px;
  overflow: hidden; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); }
.house-ad-wheel { position: absolute; right: -34px; top: 50%; width: 108px; height: 108px;
  margin-top: -54px; display: grid; place-items: center; border: 1px dashed var(--accent-soft);
  border-radius: 50%; color: var(--accent); opacity: .5; font-size: .8rem; letter-spacing: 4px;
  text-align: center; line-height: 1.6; animation: ha-wheel 30s linear infinite; pointer-events: none; }
.house-ad--zodiacwheel .house-ad-body, .house-ad--zodiacwheel .house-ad-cta { position: relative; }
.house-ad--zodiacwheel .house-ad-cta { margin-left: auto; margin-right: 60px; }

/* heartbeat: the button has a pulse */
@keyframes ha-beat { 0%, 28%, 100% { transform: scale(1); } 8% { transform: scale(1.07); }
  18% { transform: scale(1.03); } }
.house-ad--heartbeat { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; }
.house-ad-ecg { position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
  opacity: .55; }
.house-ad--heartbeat .house-ad-body { position: relative; }
.house-ad--heartbeat .house-ad-cta { margin-left: auto; position: relative;
  animation: ha-beat 2.2s ease-in-out infinite; }

/* typewriter: headline typing itself */
@keyframes ha-type { from { width: 0; } to { width: 100%; } }
@keyframes ha-caret { 0%, 100% { border-color: transparent; } 50% { border-color: var(--accent); } }
.house-ad--typewriter { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.house-ad-type { display: block; overflow: hidden; white-space: nowrap; max-width: max-content;
  border-right: 2px solid var(--accent); animation: ha-type 2.4s steps(34) 1 both, ha-caret 1s step-end infinite; }
.house-ad--typewriter .house-ad-cta { margin-left: auto; }

/* lightning: soft distant flashes (gentle, low-contrast) */
@keyframes ha-lightning { 0%, 88%, 100% { opacity: 0; } 90% { opacity: .28; } 92% { opacity: .06; }
  94% { opacity: .2; } 96% { opacity: 0; } }
.house-ad--lightning { position: relative; display: flex; align-items: center; gap: 14px;
  overflow: hidden; padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(#171b2b, #0f1220); color: #e9edf9; }
.house-ad-flash { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 0%, #cdd8ff 0%, transparent 55%);
  animation: ha-lightning 6s infinite; pointer-events: none; }
.house-ad--lightning .house-ad-body { position: relative; }
.house-ad--lightning .house-ad-headline { color: #fff; }
.house-ad--lightning .house-ad-kicker { color: #9fb0e8; }
.house-ad--lightning .house-ad-cta { margin-left: auto; position: relative; }

/* mirror: reflected into a shimmering floor */
.house-ad--mirror { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  -webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(0,0,0,.14));
  margin-bottom: 34px; }
.house-ad--mirror .house-ad-cta { margin-left: auto; }

/* quietgold: the Quiet Rule winner, dressed in living gold */
@keyframes ha-goldrule { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.house-ad--quietgold { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-left: 3px solid transparent; border-radius: 4px; background: var(--surface);
  border-image: linear-gradient(180deg, var(--gold), #f7ca7c, var(--gold)) 1; }
.house-ad--quietgold .house-ad-glyph { width: 20px; height: 20px; color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(214,167,46,.55)); }
.house-ad--quietgold .house-ad-headline { font-size: 1rem;
  background: linear-gradient(90deg, var(--ink) 70%, var(--gold) 82%, var(--ink) 94%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  animation: ha-goldrule 6s linear infinite; }
.house-ad--quietgold .house-ad-cta { margin-left: auto; background: none; color: var(--gold);
  padding: 0; font-weight: 700; }
.house-ad--quietgold .house-ad-cta:hover { transform: none; text-decoration: underline; }

/* nightaurora: Nightfall under the northern lights */
@keyframes ha-aurora { 0%, 100% { transform: translateX(-12%) skewX(-8deg); opacity: .5; }
  50% { transform: translateX(10%) skewX(6deg); opacity: .8; } }
.house-ad--nightaurora { position: relative; display: flex; align-items: center; gap: 14px;
  overflow: hidden; padding: 18px 20px; border-radius: var(--radius); background: #0d1420; color: #f4efdf; }
.house-ad-aurora { position: absolute; inset: -40% -10%; filter: blur(22px); pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(67,208,150,.35) 40%,
    rgba(124,92,255,.3) 60%, transparent 80%);
  animation: ha-aurora 9s ease-in-out infinite; }
.house-ad--nightaurora .house-ad-badge { position: relative; color: #f4e2b0; }
.house-ad--nightaurora .house-ad-body { position: relative; }
.house-ad--nightaurora .house-ad-headline { color: #fdf7ea; }
.house-ad--nightaurora .house-ad-kicker { color: var(--gold); }
.house-ad--nightaurora .house-ad-cta { margin-left: auto; position: relative; background: var(--gold); color: #2a1e05; }

/* ticketpunch: the Ticket winner with punched edges + a wiggle */
@keyframes ha-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-.8deg); }
  60% { transform: rotate(.8deg); } }
.house-ad--ticketpunch { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 16px 26px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border);
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 100% 100% no-repeat;
          mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 100% 100% no-repeat; }
.house-ad--ticketpunch:hover { animation: ha-wiggle .5s ease-in-out; }
.house-ad--ticketpunch .house-ad-tag { background: var(--accent); color: #fff; font-size: .66rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 4px; flex: 0 0 auto; }
.house-ad--ticketpunch .house-ad-sub { display: block; font-size: .82rem; color: var(--muted); }
.house-ad--ticketpunch .house-ad-cta { margin-left: auto; }

@media (max-width: 640px) {
  .house-ad--eclipse, .house-ad--portal, .house-ad--crystalball, .house-ad--moonphase,
  .house-ad--sigils, .house-ad--levitate, .house-ad--smoke, .house-ad--zodiacwheel,
  .house-ad--heartbeat, .house-ad--typewriter, .house-ad--lightning, .house-ad--mirror,
  .house-ad--nightaurora, .house-ad--ticketpunch { flex-wrap: wrap; }
  .house-ad--eclipse .house-ad-cta, .house-ad--portal .house-ad-cta,
  .house-ad--crystalball .house-ad-cta, .house-ad--moonphase .house-ad-cta,
  .house-ad--sigils .house-ad-cta, .house-ad--levitate .house-ad-cta,
  .house-ad--smoke .house-ad-cta, .house-ad--zodiacwheel .house-ad-cta,
  .house-ad--heartbeat .house-ad-cta, .house-ad--typewriter .house-ad-cta,
  .house-ad--lightning .house-ad-cta, .house-ad--mirror .house-ad-cta,
  .house-ad--nightaurora .house-ad-cta, .house-ad--ticketpunch .house-ad-cta
    { margin-left: 0; margin-right: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .house-ad--levitate, .house-ad--heartbeat .house-ad-cta, .house-ad-type,
  .house-ad-eclipse-disc, .house-ad-moonshadow, .house-ad-flash, .house-ad-aurora,
  .house-ad-portal::before, .house-ad-orb-mist, .house-ad-wisp, .house-ad-wheel,
  .house-ad-sigil, .house-ad-satellite { animation: none; }
}

/* Recruit screen collapsible profiles (v54). */
.recruit-profile { border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; background: var(--surface); }
.recruit-profile summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  cursor: pointer; padding: 10px 14px; }
.recruit-profile-body { padding: 4px 14px 12px; }
.ha-family { border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; }
.ha-family > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; padding: 9px 14px; }
.ha-family > table { margin: 0 0 6px; }

/* ------------------------------------------- v54 deep-research ad layouts */

/* Lifted Veil: iridescent gauze shimmers, lifts once, stays lifted. */
.house-ad--veil { position: relative; overflow: hidden; padding: 14px 18px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(255,196,140,.28), transparent 60%), var(--surface); }
.house-ad-veilcloth { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(120deg, #f6d8c8, #f3e2b8 30%, #bfe3da 65%, #f6d8c8);
  background-size: 300% 100%;
  animation: ha-shimmerband 3s linear infinite, ha-veillift 1.6s cubic-bezier(.22,.61,.36,1) 1.4s 1 forwards; }
.house-ad--veil .house-ad-cta { margin-left: auto; }
@keyframes ha-shimmerband { to { background-position: 300% 0; } }
@keyframes ha-veillift { to { transform: translateY(-108%); opacity: 0; } }

/* Sealed Letter: burgundy wax seal presses itself, candle glint sweeps. */
.house-ad--waxseal { position: relative; padding: 14px 18px; background: #fdf9f1;
  border: 1px solid var(--border); }
.house-ad-wax { position: relative; flex-shrink: 0; width: 40px; height: 40px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; color: #f6dfc9;
  border-radius: 47% 53% 51% 49%;
  background: radial-gradient(circle at 35% 30%, #c8564a, #7e1f1a 70%);
  box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.3);
  animation: ha-waxpress 9s ease-in-out infinite; }
.house-ad-waxglint { position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,225,180,.55) 50%, transparent 58%);
  background-size: 250% 100%; animation: ha-waxglint 9s linear infinite; }
.house-ad--waxseal .house-ad-cta { margin-left: auto; }
@keyframes ha-waxpress { 0%, 86%, 100% { transform: scale(1); } 89% { transform: scale(1.06); }
  93% { transform: scale(.92); } }
@keyframes ha-waxglint { 0%, 88% { background-position: 250% 0; } 97%, 100% { background-position: 0 0; } }

/* Ask the Pendulum: brass chain sways damped over deep pine green. */
.house-ad--pendulum { position: relative; padding: 12px 18px; color: #f4eedd;
  background: radial-gradient(120% 130% at 30% 0%, #1d4a3a, #14352a 70%); }
.house-ad--pendulum .house-ad-kicker { color: #9fc4ae; }
.house-ad-pend { flex-shrink: 0; width: 2px; height: 44px; align-self: flex-start;
  background: linear-gradient(#e6c98a, #8a6a2a); transform-origin: top center;
  animation: ha-sway 8s cubic-bezier(.45,0,.55,1) infinite; }
.house-ad-pendbob { position: absolute; bottom: -14px; left: -8px; color: #ffd98a;
  text-shadow: 0 0 10px rgba(255,217,138,.8), 0 0 22px rgba(255,180,80,.35); }
.house-ad--pendulum .house-ad-cta { margin-left: auto; background: none;
  border: 1px solid #e6c98a; color: #ffd98a; }
@keyframes ha-sway { 0% { transform: rotate(9deg); } 25% { transform: rotate(-7deg); }
  50% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); }
  85%, 100% { transform: rotate(3deg); } }

/* Knowing Eye: peacock iris slowly turns; the lid blinks once in a while. */
.house-ad--wink { position: relative; padding: 12px 18px; background: #faf6ee;
  border: 1px solid var(--border); }
.house-ad-eyelid { position: relative; flex-shrink: 0; width: 46px; height: 28px;
  border-radius: 50% / 60%; overflow: hidden; background: #f6efe2;
  box-shadow: inset 0 0 0 1px var(--gold); }
.house-ad-iris { position: absolute; inset: -40%;
  background: conic-gradient(#0f6f6a, #35b3a5, #0d4f4b, #2a9d8f, #0f6f6a);
  animation: ha-irisspin 14s linear infinite; }
.house-ad-iris::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px;
  height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #142320;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.5); }
.house-ad-lid { position: absolute; inset: 0; background: #f2e9d8; transform: scaleY(0);
  transform-origin: top; animation: ha-blinkonce 7s linear infinite; }
.house-ad--wink .house-ad-cta { margin-left: auto; }
@keyframes ha-irisspin { to { transform: rotate(1turn); } }
@keyframes ha-blinkonce { 0%, 94.5%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); }
  97.5% { transform: scaleY(0); } }

/* Gilded Frame: rose-gold border with traveling sheen + twinkling corners. */
.house-ad--gilt { position: relative; padding: 14px 18px; border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(115deg, #9c5f4e, #f2c4ae 20%, #c98a72 40%, #9c5f4e 60%, #f2c4ae 80%, #9c5f4e) border-box;
  background-size: 100% 100%, 300% 300%; animation: ha-giltsheen 12s linear infinite; }
.house-ad-corner { position: absolute; color: #d99d84; opacity: .3; font-size: .8rem;
  animation: ha-twinkle 6s ease-in-out infinite; }
.house-ad-corner-a { top: 2px; left: 6px; }
.house-ad-corner-b { bottom: 2px; right: 6px; animation-delay: 3s; }
.house-ad--gilt .house-ad-cta { margin-left: auto; background: #c98a72; color: #fff; }
@keyframes ha-giltsheen { to { background-position: 0 0, 300% 0; } }
@keyframes ha-twinkle { 50% { opacity: 1; text-shadow: 0 0 6px rgba(242,196,174,.9); } }

/* Scarlet Thread: dashed red fate-line flows toward the button in bursts. */
.house-ad--thread { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-threadline { position: relative; flex: 1 1 60px; min-width: 40px; height: 0;
  border-top: 2px dashed #b23a2e; animation: ha-threadflow 4s linear infinite; }
.house-ad-knot { position: absolute; top: -11px; left: 50%; color: var(--gold);
  animation: ha-twinkle 4s ease-in-out infinite; }
.house-ad--thread .house-ad-cta { margin-left: 0; }
@keyframes ha-threadflow { 0%, 55% { border-image: none; }
  0% { transform: translateX(0); } 35% { transform: translateX(6px); }
  60%, 100% { transform: translateX(0); } }

/* Charm Bracelet: three gold charms sway gently on fine chains. */
.house-ad--charm { position: relative; padding: 12px 18px; background: var(--surface);
  border-top: 2px solid var(--gold); }
.house-ad-charms { display: inline-flex; gap: 12px; flex-shrink: 0; }
.house-ad-charm { display: inline-block; color: var(--gold); position: relative; padding-top: 10px;
  transform-origin: top center; animation: ha-charmsway 5s ease-in-out infinite; }
.house-ad-charm::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px;
  height: 10px; background: linear-gradient(#c9b489, #8a6a2a); }
.house-ad-charm:nth-child(2) { animation-delay: .7s; }
.house-ad-charm:nth-child(3) { animation-delay: 1.4s; }
.house-ad--charm .house-ad-cta { margin-left: auto; }
@keyframes ha-charmsway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }

/* Turning Hourglass: the glass flips over every few seconds. */
.house-ad--hourglass { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px dashed var(--gold); }
.house-ad-hg { flex-shrink: 0; font-size: 1.4rem; display: inline-block;
  animation: ha-hgflip 6s cubic-bezier(.6,-.28,.34,1.3) infinite; }
.house-ad--hourglass .house-ad-cta { margin-left: auto; }
@keyframes ha-hgflip { 0%, 72% { transform: rotate(0); } 82%, 100% { transform: rotate(180deg); } }

/* Scrying Ripple: dark water; rings ripple out from behind the CTA. */
.house-ad--ripple { position: relative; overflow: hidden; padding: 12px 18px; color: #e8f0ec;
  background: radial-gradient(140% 120% at 70% 100%, #0f2f33, #0a1d20 70%); }
.house-ad--ripple .house-ad-kicker { color: #9ec4bb; }
.house-ad-ripplewrap { position: relative; margin-left: auto; display: inline-flex;
  align-items: center; }
.house-ad-ring { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  margin: -10px 0 0 -10px; border: 1px solid rgba(158,196,187,.7); border-radius: 50%;
  pointer-events: none; animation: ha-ringout 3.2s ease-out infinite; }
.house-ad-ring-b { animation-delay: 1.6s; }
.house-ad--ripple .house-ad-cta { position: relative; background: none;
  border: 1px solid #9ec4bb; color: #d9efe8; }
@keyframes ha-ringout { from { transform: scale(.5); opacity: .9; }
  to { transform: scale(4.2); opacity: 0; } }

/* Rose Bloom: the flower glyph blooms open and settles, soft rose light. */
.house-ad--bloom { position: relative; padding: 12px 18px;
  background: radial-gradient(100% 120% at 15% 50%, rgba(233,170,170,.25), transparent 55%), var(--surface);
  border: 1px solid var(--border); }
.house-ad-rose { flex-shrink: 0; font-size: 1.5rem; color: #c25e6a; display: inline-block;
  animation: ha-bloom 7s ease-in-out infinite; }
.house-ad--bloom .house-ad-cta { margin-left: auto; background: #c25e6a; color: #fff; }
@keyframes ha-bloom { 0%, 100% { transform: scale(.8) rotate(-8deg); }
  40%, 70% { transform: scale(1.15) rotate(6deg); } }

/* Turning Key: keyhole spills warm light as the key turns. */
.house-ad--unlock { position: relative; padding: 12px 18px; color: #f2ead8;
  background: linear-gradient(120deg, #241d33, #1a1426 70%); }
.house-ad--unlock .house-ad-kicker { color: #c9b8e8; }
.house-ad-lock { position: relative; flex-shrink: 0; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; }
.house-ad-keyhole { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,120,.85) 0%, rgba(255,208,120,.12) 55%, transparent 70%);
  animation: ha-keylight 5s ease-in-out infinite; }
.house-ad-key { position: relative; display: inline-block; color: #ffd078;
  animation: ha-keyturn 5s cubic-bezier(.6,-.2,.4,1.2) infinite; }
.house-ad--unlock .house-ad-cta { margin-left: auto; background: #ffd078; color: #241d33; }
@keyframes ha-keyturn { 0%, 55% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
@keyframes ha-keylight { 0%, 55% { opacity: .25; } 75% { opacity: 1; } 100% { opacity: .4; } }

/* Gilded Marquee: chase lights running around the border, tastefully. */
.house-ad--chase { position: relative; padding: 14px 18px; background: var(--surface);
  border-radius: var(--radius);
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 14px);
  background-size: 100% 2px, 100% 100%; background-repeat: no-repeat;
  background-position: 0 0; border: 1px solid var(--border);
  animation: ha-chase 1.4s linear infinite; }
.house-ad--chase .house-ad-cta { margin-left: auto; }
@keyframes ha-chase { to { background-position: 28px 0; } }

/* Three Windows: tiny reels of glyphs spin and settle in turn. */
.house-ad--reels { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--gold); }
.house-ad-reels { display: inline-flex; gap: 4px; flex-shrink: 0; }
.house-ad-reel { width: 22px; height: 24px; overflow: hidden; border: 1px solid var(--border);
  border-radius: 4px; background: #fbf6ea; text-align: center; }
.house-ad-reel > span { display: block; height: 24px; line-height: 24px; font-size: .8rem;
  color: var(--gold); }
.house-ad-reel-a > span { animation: ha-reelspin 3.6s cubic-bezier(.2,.9,.3,1) infinite; }
.house-ad-reel-b > span { animation: ha-reelspin 3.6s cubic-bezier(.2,.9,.3,1) .25s infinite; }
.house-ad-reel-c > span { animation: ha-reelspin 3.6s cubic-bezier(.2,.9,.3,1) .5s infinite; }
.house-ad--reels .house-ad-cta { margin-left: auto; }
@keyframes ha-reelspin { 0%, 15% { transform: translateY(0); }
  45%, 90% { transform: translateY(-48px); } 100% { transform: translateY(0); } }

/* Wheel of Fortune: gold-segment wheel ticks; pointer nods at each notch. */
.house-ad--fortune { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-fwheel { position: relative; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 50%; border: 2px solid var(--gold);
  background: repeating-conic-gradient(#f3e2b8 0 30deg, #fbf6ea 30deg 60deg);
  animation: ha-wheeltick 7s steps(12) infinite; }
.house-ad-fpointer { position: absolute; top: -7px; left: 50%; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 7px solid #b23a2e; }
.house-ad--fortune .house-ad-cta { margin-left: auto; }
@keyframes ha-wheeltick { to { transform: rotate(1turn); } }

/* Rising Stars: five gold stars light up one after another. */
.house-ad--tally { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-tally { display: inline-flex; gap: 2px; flex-shrink: 0; }
.house-ad-tstar { color: var(--border); animation: ha-starlight 4.5s ease-in-out infinite; }
.house-ad--tally .house-ad-cta { margin-left: auto; }
@keyframes ha-starlight { 0%, 8% { color: var(--border); text-shadow: none; }
  18%, 78% { color: var(--gold); text-shadow: 0 0 6px rgba(214,167,46,.6); }
  92%, 100% { color: var(--border); } }

/* Ascending Lamps: little flames ignite left to right on deep charcoal. */
.house-ad--cascade { position: relative; padding: 12px 18px; color: #f2ead8;
  background: linear-gradient(180deg, #221d17, #171310); }
.house-ad--cascade .house-ad-kicker { color: #cdb894; }
.house-ad-lamps { display: inline-flex; gap: 10px; flex-shrink: 0; align-items: flex-end; }
.house-ad-lamp { width: 6px; height: 10px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 80%, #ffd98a, #d98324 75%);
  box-shadow: 0 0 8px rgba(255,190,90,.8); opacity: .15;
  animation: ha-lampglow 4.8s ease-in-out infinite; }
.house-ad--cascade .house-ad-cta { margin-left: auto; background: #d98324; color: #171310; }
@keyframes ha-lampglow { 12%, 70% { opacity: 1; } 0%, 92%, 100% { opacity: .15; } }

/* Cast Runes: stones glow one by one on slate. */
.house-ad--runes { position: relative; padding: 12px 18px; color: #e9e4d8;
  background: linear-gradient(135deg, #2b2f33, #1d2023); }
.house-ad--runes .house-ad-kicker { color: #b9c2c9; }
.house-ad-runes { display: inline-flex; gap: 8px; flex-shrink: 0; }
.house-ad-rune { width: 24px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 40% 45% 42% 46%; background: #3a4046;
  color: #cdb894; font-size: .85rem; animation: ha-runeglow 4.4s ease-in-out infinite; }
.house-ad--runes .house-ad-cta { margin-left: auto; background: none;
  border: 1px solid #cdb894; color: #e9d9ae; }
@keyframes ha-runeglow { 10%, 30% { box-shadow: 0 0 10px rgba(230,201,138,.75);
  color: #ffe9b0; } 0%, 50%, 100% { box-shadow: none; } }

/* Inkwell Isolate: ink slowly swirling in a glass well on near-black. */
.house-ad--inkwell { position: relative; padding: 12px 18px; color: #ece6f2;
  background: #14121c; }
.house-ad--inkwell .house-ad-kicker { color: #a99bc4; }
.house-ad-well { position: relative; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 50%; overflow: hidden; border: 1px solid #5d5378;
  background: #1d1930; }
.house-ad-ink { position: absolute; inset: -30%;
  background: conic-gradient(#2c2452, #4d3f86, #241d40, #3a2f66, #2c2452);
  filter: blur(4px); animation: ha-irisspin 11s linear infinite reverse; }
.house-ad--inkwell .house-ad-cta { margin-left: auto; background: #8d7ec4; color: #14121c; }

/* Gold Redaction: bars slide away and the message is revealed. */
.house-ad--redacted { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-redact { position: relative; display: inline-block; overflow: hidden; }
.house-ad-bar { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--gold), #e8c987); transform: translateX(0);
  animation: ha-unredact 6s cubic-bezier(.7,0,.2,1) infinite; }
.house-ad--redacted .house-ad-cta { margin-left: auto; }
@keyframes ha-unredact { 0%, 18% { transform: translateX(0); }
  38%, 88% { transform: translateX(103%); } 96%, 100% { transform: translateX(0); } }

/* Crescent Trail: moons brighten in sequence, walking the eye to the CTA. */
.house-ad--beckon { position: relative; padding: 12px 18px; color: #eae6f4;
  background: linear-gradient(120deg, #1c1b2e, #141322); }
.house-ad--beckon .house-ad-kicker { color: #a9a3cc; }
.house-ad-becktrail { display: inline-flex; gap: 8px; margin-left: auto; }
.house-ad-beck { color: #6f6899; animation: ha-beck 2.8s ease-in-out infinite; }
.house-ad--beckon .house-ad-cta { margin-left: 0; background: #cbb15f; color: #141322; }
@keyframes ha-beck { 20% { color: #ffe9a8; text-shadow: 0 0 8px rgba(255,233,168,.8); }
  0%, 55%, 100% { color: #6f6899; text-shadow: none; } }

/* Live Now Stub: urgency ticket with a real live pulse dot. */
.house-ad--lastcall { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 22px; background: var(--surface); border: 1px solid var(--gold);
  border-left-width: 6px; border-radius: 6px; }
.house-ad-livedot { position: absolute; left: 8px; top: 50%; width: 7px; height: 7px;
  margin-top: -4px; border-radius: 50%; background: var(--online, #2e9e5b);
  animation: ha-livedot 1.6s ease-out infinite; }
.house-ad--lastcall .house-ad-tag { background: var(--gold); color: #fff; font-size: .66rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 3px; }
.house-ad--lastcall .house-ad-cta { margin-left: auto; }
@keyframes ha-livedot { 0% { box-shadow: 0 0 0 0 rgba(46,158,91,.5); }
  100% { box-shadow: 0 0 0 10px rgba(46,158,91,0); } }

/* Skeptic Switch: a little switch flips itself on, gold thumb. */
.house-ad--toggle { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-switch { position: relative; flex-shrink: 0; width: 40px; height: 20px;
  border-radius: 10px; background: var(--border);
  animation: ha-switchbed 6s ease-in-out infinite; }
.house-ad-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  animation: ha-switchthumb 6s cubic-bezier(.5,1.4,.4,1) infinite; }
.house-ad--toggle .house-ad-cta { margin-left: auto; }
@keyframes ha-switchbed { 0%, 30% { background: var(--border); } 45%, 88% { background: var(--gold); }
  100% { background: var(--border); } }
@keyframes ha-switchthumb { 0%, 30% { transform: translateX(0); }
  45%, 88% { transform: translateX(20px); } 100% { transform: translateX(0); } }

/* Almost There Bar: gold bar fills to nearly full and holds (curiosity gap). */
.house-ad--progress { position: relative; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-prog { display: block; height: 5px; margin-top: 6px; border-radius: 3px;
  background: var(--border); overflow: hidden; max-width: 220px; }
.house-ad-progfill { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), #e8c987);
  animation: ha-progfill 5s cubic-bezier(.3,.8,.3,1) infinite; }
.house-ad--progress .house-ad-cta { margin-left: auto; }
@keyframes ha-progfill { 0% { width: 0; } 55%, 92% { width: 92%; } 100% { width: 92%; } }

/* Unfinished Sentence: the line trails into slow-breathing dots. */
.house-ad--ellipsis { position: relative; padding: 14px 18px; background: var(--surface);
  border-bottom: 2px solid var(--gold); }
.house-ad-dots { display: inline-flex; gap: 2px; margin-left: 4px; color: var(--gold);
  font-weight: 700; }
.house-ad-dots span { animation: ha-dotbreathe 2.4s ease-in-out infinite; }
.house-ad-dots span:nth-child(2) { animation-delay: .3s; }
.house-ad-dots span:nth-child(3) { animation-delay: .6s; }
.house-ad--ellipsis .house-ad-cta { margin-left: auto; }
@keyframes ha-dotbreathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Golden Vein: a living gold seam glints across the panel. */
.house-ad--veinlet { position: relative; overflow: hidden; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border); }
.house-ad-vein { position: absolute; left: -10%; right: -10%; top: 55%; height: 2px;
  pointer-events: none; transform: rotate(-4deg);
  background: linear-gradient(90deg, transparent, var(--gold) 30%, #f7e3ae 50%, var(--gold) 70%, transparent);
  background-size: 300% 100%; animation: ha-veinflow 7s linear infinite;
  filter: drop-shadow(0 0 4px rgba(214,167,46,.5)); }
.house-ad--veinlet .house-ad-cta { margin-left: auto; }
@keyframes ha-veinflow { to { background-position: 300% 0; } }

/* Moon Tide: a moonlit tide line washes gently along the lower edge. */
.house-ad--tidepool { position: relative; overflow: hidden; padding: 12px 18px;
  color: #e6ecf2; background: linear-gradient(180deg, #17202b, #101720); }
.house-ad--tidepool .house-ad-kicker { color: #9db4c9; }
.house-ad-tide { position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  pointer-events: none;
  background: radial-gradient(60% 120% at 50% 100%, rgba(157,196,224,.45), transparent 70%);
  animation: ha-tidewash 6s ease-in-out infinite; }
.house-ad--tidepool .house-ad-cta { margin-left: auto; background: #9db4c9; color: #101720; }
@keyframes ha-tidewash { 0%, 100% { transform: translateX(-12%); opacity: .5; }
  50% { transform: translateX(12%); opacity: 1; } }

/* Hearth Embers: sparks drift up, glowing and dying, on warm near-black. */
.house-ad--embers { position: relative; overflow: hidden; padding: 12px 18px;
  color: #f4e8d8; background: linear-gradient(180deg, #201612, #150e0b); }
.house-ad--embers .house-ad-kicker { color: #d8a071; }
.house-ad-emberfield { position: absolute; inset: 0; pointer-events: none; }
.house-ad-ember { position: absolute; bottom: -4px; width: 4px; height: 4px; border-radius: 50%;
  background: #ffb45e; box-shadow: 0 0 6px rgba(255,150,60,.9);
  animation: ha-emberrise 3.6s ease-in infinite; }
.house-ad--embers .house-ad-cta { margin-left: auto; background: #d98324; color: #150e0b; }
@keyframes ha-emberrise { 0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; } 100% { transform: translateY(-46px) scale(.4); opacity: 0; } }

/* Prism Edge: iridescent refraction sweeps the headline text. */
.house-ad--prism { position: relative; padding: 14px 18px; background: #fdfbf6;
  border: 1px solid var(--border); }
.house-ad-prismtext { background: linear-gradient(100deg, var(--ink) 40%, #c98a72 48%,
    #b8a44e 52%, #4e9a8e 56%, var(--ink) 64%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: ha-prismsweep 6s linear infinite; }
.house-ad--prism .house-ad-cta { margin-left: auto; }
@keyframes ha-prismsweep { to { background-position: 250% 0; } }

/* Parfum Minimal: vast whitespace, tiny type, one hairline. No motion. */
.house-ad--parfum { position: relative; padding: 22px 26px; background: #fdfbf7;
  border-top: 1px solid var(--gold); justify-content: center; text-align: center; }
.house-ad--parfum .house-ad-kicker { letter-spacing: .22em; text-transform: uppercase;
  font-size: .62rem; }
.house-ad--parfum .house-ad-headline { font-size: 1.02rem; letter-spacing: .04em; }
.house-ad--parfum .house-ad-cta { background: none; color: var(--gold); padding: 0;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }

/* The P.S. Line: quiet type with a handwritten postscript. No motion. */
.house-ad--postscript { position: relative; padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--border); display: block; }
.house-ad--postscript .house-ad-headline { display: block; }
.house-ad-ps { display: block; font-style: italic; font-family: Georgia, serif;
  color: var(--ink-soft); margin-top: 4px; font-size: .9rem; }
.house-ad--postscript .house-ad-cta { margin-top: 8px; display: inline-block; }

/* Editorial Underline: serif headline over a hand-drawn gold underline. */
.house-ad--birthyear { position: relative; padding: 14px 18px; background: var(--surface); }
.house-ad-underlined { font-family: Georgia, serif; font-size: 1.05rem;
  background: linear-gradient(transparent 82%, rgba(214,167,46,.5) 82%, rgba(214,167,46,.5) 94%, transparent 94%); }
.house-ad--birthyear .house-ad-cta { margin-left: auto; }

/* Blind Emboss: type pressed into the paper, not printed. No motion. */
.house-ad--letterpress { position: relative; padding: 16px 20px; background: #f3eee3; }
.house-ad--letterpress .house-ad-headline { color: #d6cfc0;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.18); font-weight: 700; }
.house-ad--letterpress .house-ad-kicker { color: #a89f8d; }
.house-ad--letterpress .house-ad-cta { margin-left: auto; background: none;
  border: 1px solid #a89f8d; color: #6f6754; }

/* Gold Foil Stamp: metallic foil headline with a static specular ramp. */
.house-ad--foil { position: relative; padding: 14px 18px; background: #fbf7ee;
  border: 1px solid var(--border); }
.house-ad-foiltext { font-weight: 800;
  background: linear-gradient(115deg, #8a6a2a, #e8c987 30%, #b08b3e 50%, #f2dfb0 70%, #8a6a2a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.house-ad--foil .house-ad-cta { margin-left: auto; background: var(--gold); color: #fff; }

/* Hallmark Row: three tiny assay punches beside quiet type. No motion. */
.house-ad--hallmark { position: relative; padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--border); }
.house-ad-marks { display: inline-flex; gap: 4px; flex-shrink: 0; }
.house-ad-marks span { width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--gold); border-radius: 3px;
  color: var(--gold); font-size: .7rem; background: #fbf6ea; }
.house-ad--hallmark .house-ad-cta { margin-left: auto; }

/* v54 mobile safety: every new layout wraps; CTAs go full width. */
@media (max-width: 640px) {
  .house-ad--veil, .house-ad--waxseal, .house-ad--pendulum, .house-ad--wink,
  .house-ad--gilt, .house-ad--thread, .house-ad--charm, .house-ad--hourglass,
  .house-ad--ripple, .house-ad--bloom, .house-ad--unlock, .house-ad--chase,
  .house-ad--reels, .house-ad--fortune, .house-ad--tally, .house-ad--cascade,
  .house-ad--runes, .house-ad--inkwell, .house-ad--redacted, .house-ad--beckon,
  .house-ad--lastcall, .house-ad--toggle, .house-ad--progress, .house-ad--ellipsis,
  .house-ad--veinlet, .house-ad--tidepool, .house-ad--embers, .house-ad--prism,
  .house-ad--parfum, .house-ad--birthyear, .house-ad--letterpress, .house-ad--foil,
  .house-ad--hallmark { flex-wrap: wrap; }
  .house-ad--veil .house-ad-cta, .house-ad--waxseal .house-ad-cta,
  .house-ad--pendulum .house-ad-cta, .house-ad--wink .house-ad-cta,
  .house-ad--gilt .house-ad-cta, .house-ad--thread .house-ad-cta,
  .house-ad--charm .house-ad-cta, .house-ad--hourglass .house-ad-cta,
  .house-ad--bloom .house-ad-cta, .house-ad--unlock .house-ad-cta,
  .house-ad--chase .house-ad-cta, .house-ad--reels .house-ad-cta,
  .house-ad--fortune .house-ad-cta, .house-ad--tally .house-ad-cta,
  .house-ad--cascade .house-ad-cta, .house-ad--runes .house-ad-cta,
  .house-ad--inkwell .house-ad-cta, .house-ad--redacted .house-ad-cta,
  .house-ad--beckon .house-ad-cta, .house-ad--lastcall .house-ad-cta,
  .house-ad--toggle .house-ad-cta, .house-ad--progress .house-ad-cta,
  .house-ad--ellipsis .house-ad-cta, .house-ad--veinlet .house-ad-cta,
  .house-ad--tidepool .house-ad-cta, .house-ad--embers .house-ad-cta,
  .house-ad--prism .house-ad-cta, .house-ad--birthyear .house-ad-cta,
  .house-ad--letterpress .house-ad-cta, .house-ad--foil .house-ad-cta,
  .house-ad--hallmark .house-ad-cta
    { margin-left: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .house-ad-veilcloth { display: none; }
  .house-ad-wax, .house-ad-waxglint, .house-ad-pend, .house-ad-iris, .house-ad-lid,
  .house-ad--gilt, .house-ad-corner, .house-ad-threadline, .house-ad-knot,
  .house-ad-charm, .house-ad-hg, .house-ad-ring, .house-ad-rose, .house-ad-key,
  .house-ad-keyhole, .house-ad--chase, .house-ad-reel > span, .house-ad-fwheel,
  .house-ad-tstar, .house-ad-lamp, .house-ad-rune, .house-ad-ink, .house-ad-bar,
  .house-ad-beck, .house-ad-livedot, .house-ad-switch, .house-ad-thumb,
  .house-ad-progfill, .house-ad-dots span, .house-ad-vein, .house-ad-tide,
  .house-ad-ember, .house-ad-prismtext { animation: none; }
  .house-ad-tstar { color: var(--gold); }
  .house-ad-lamp { opacity: 1; }
  .house-ad-progfill { width: 92%; }
  .house-ad-bar { transform: translateX(103%); }
  .house-ad-thumb { transform: translateX(20px); }
  .house-ad-switch { background: var(--gold); }
}