/* xhs-home: warm pink / cream / peach showcase */
:root{
  --xh-rose:#f7c9de;
  --xh-peach:#ffd7c2;
  --xh-cream:#fff6ee;
  --xh-blush:#ffe4ec;
  --xh-ink:#4a3340;
  --xh-muted:#8a6b78;
  --xh-white:#fffaf7;
  --xh-line:#f0d5df;
  --xh-accent:#e889b0;
  --xh-accent-deep:#c45f8a;
  --xh-shadow:0 18px 50px rgba(196,95,138,.12);
  --xh-shadow-hover:0 22px 60px rgba(196,95,138,.2);
  --xh-radius:28px;
}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe1ec 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #ffe8d4 0%, transparent 50%),
    linear-gradient(180deg, var(--xh-cream), #fff9f5 40%, #fff6fb);
  color:var(--xh-ink);
}
.site-header{
  backdrop-filter: blur(10px);
  background:rgba(255,250,247,.72);
  border-bottom:1px solid rgba(240,213,223,.65);
  border-radius:0 0 24px 24px;
  position:sticky; top:0; z-index:20;
}
.brand-icon{
  background:linear-gradient(135deg,#f2a0c0,#ffc7a8);
  box-shadow:0 8px 20px rgba(232,137,176,.35);
}
.nav-code{
  border-color:var(--xh-line);
  background:var(--xh-white);
  border-radius:999px;
}
.site-footer{border-color:var(--xh-line); color:var(--xh-muted)}

.xh-hero{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:stretch;
  padding:18px 0 8px;
  margin-bottom:10px;
}
.xh-hero-glow{
  position:absolute; inset:-40px -20px auto;
  height:220px;
  background:radial-gradient(circle at 30% 40%, rgba(255,180,210,.45), transparent 60%),
             radial-gradient(circle at 70% 30%, rgba(255,210,170,.4), transparent 55%);
  filter:blur(8px); pointer-events:none; z-index:0;
}
.xh-hero-copy,.xh-hero-panel{position:relative; z-index:1}
.xh-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.04em; font-weight:700;
  color:var(--xh-accent-deep); background:rgba(255,255,255,.7);
  border:1px solid var(--xh-line); border-radius:999px; padding:6px 12px; margin-bottom:14px;
}
.xh-hero-copy h1{
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.18; letter-spacing:-.03em;
  color:#3f2a35;
}
.xh-hero-copy h1 span{
  display:block; margin-top:8px;
  font-size:clamp(1.15rem,2.6vw,1.55rem); font-weight:600;
  background:linear-gradient(90deg,#d66b98,#e89a6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.xh-sub{margin-top:16px; color:var(--xh-muted); font-size:1.05rem; max-width:34rem}
.xh-hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.xh-hero-meta span{
  font-size:.82rem; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--xh-line); color:#6d4a58;
}
.xh-jump{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.xh-jump a{
  text-decoration:none; font-size:.86rem; font-weight:600; color:#6a4052;
  background:linear-gradient(180deg,#fff,#ffe9f1); border:1px solid var(--xh-line);
  padding:10px 14px; border-radius:999px; box-shadow:0 6px 16px rgba(232,137,176,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.xh-jump a:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(232,137,176,.2); text-decoration:none}

.xh-hero-panel{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:var(--xh-radius)!important;
  box-shadow:var(--xh-shadow)!important;
  backdrop-filter:blur(12px);
  padding:26px!important;
}
.xh-progress{margin-top:16px; color:var(--xh-muted); font-size:.9rem}
.xh-progress strong{color:var(--xh-accent-deep)}

.xh-section{margin:42px 0 8px}
.xh-section-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-end; margin-bottom:18px}
.xh-section-title{display:flex; gap:14px; align-items:flex-start}
.xh-emoji{font-size:1.8rem; line-height:1; filter:drop-shadow(0 6px 10px rgba(232,137,176,.25))}
.xh-kicker{font-size:.75rem; font-weight:700; letter-spacing:.08em; color:var(--xh-accent-deep); text-transform:uppercase}
.xh-section-head h2{font-size:1.55rem; margin-top:4px; color:#402e37}
.xh-blurb{color:var(--xh-muted); margin-top:6px; max-width:28rem}
.xh-count{
  font-size:.8rem; color:var(--xh-muted); background:#fff; border:1px solid var(--xh-line);
  border-radius:999px; padding:8px 12px; white-space:nowrap
}
.xh-section.tone-light .xh-kicker{color:#c46b3d}

.xh-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.xh-card{
  border-radius:var(--xh-radius);
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--xh-shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.xh-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--xh-shadow-hover);
}
.xh-card-link{display:block; color:inherit; text-decoration:none; height:100%}
.xh-card-link:hover{text-decoration:none}
.xh-cover{
  height:118px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  position:relative; overflow:hidden;
}
.xh-blob{
  position:absolute; right:-20px; top:-30px; width:160px; height:160px; border-radius:50%;
  background:rgba(255,255,255,.35); filter:blur(2px);
  animation:xhfloat 6s ease-in-out infinite;
}
.xh-glyph{
  position:absolute; left:22px; bottom:18px;
  width:52px; height:52px; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  font-size:1.35rem; box-shadow:0 10px 24px rgba(90,40,60,.12);
}
@keyframes xhfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(10px)}
}
@media (prefers-reduced-motion:reduce){
  .xh-blob,.xh-card{animation:none; transition:none}
}
.xh-card-body{padding:18px 20px 20px}
.xh-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.xh-pill{
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px;
  background:#fff0f5; color:#b85a84; border:1px solid #f5d0de;
}
.xh-pill.soft{background:#fff7ef; color:#a56b4a; border-color:#f0dcc8; font-weight:600}
.xh-card h3{font-size:1.18rem; line-height:1.4; margin:0 0 6px; color:#3d2a33}
.xh-hook{font-size:.95rem; font-weight:650; color:#c45f8a; margin:0 0 8px}
.xh-intro{font-size:.9rem; color:var(--xh-muted); margin:0 0 14px; min-height:2.8em}
.xh-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.88rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#e889b0,#f0a07a);
  padding:10px 14px; border-radius:999px;
  box-shadow:0 10px 22px rgba(232,137,176,.28);
}
.xh-card:hover .xh-cta{filter:brightness(1.05)}
.xh-note{
  margin:36px 0 10px; padding:18px 20px; border-radius:20px;
  background:rgba(255,255,255,.7); border:1px solid var(--xh-line);
  color:var(--xh-muted); font-size:.9rem; line-height:1.7;
}

/* quiz / shared soft restyle */
.button{border-radius:14px}
.button.purple, .button{background:linear-gradient(135deg,#4a3340,#6d4458)}
.button:hover{filter:brightness(1.05)}
.card{border-radius:22px; box-shadow:0 12px 30px rgba(196,95,138,.08)}
.entry-card{border-top:4px solid #e889b0}
.progress-track span{background:linear-gradient(90deg,#e889b0,#f0a07a)}
.option[aria-checked=true]{border-color:#e889b0; background:#fff0f5; box-shadow:0 0 0 1px #e889b0}

@media(max-width:860px){
  .xh-hero{grid-template-columns:1fr; gap:18px}
  .xh-grid{grid-template-columns:1fr}
  .xh-cover{height:100px}
  .xh-section-head{flex-direction:column; align-items:flex-start}
  .xh-hero-copy h1{font-size:2rem}
  .site-header{border-radius:0}
}