/* Animated page-title scenes, heading icon badges and card pictures across the site (loaded after guide-art.css). */
.page-title{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;column-gap:30px}
.page-title>*{grid-column:1}
.page-title>.eyebrow{justify-self:start}
.pi{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.ga-gem .pi{width:100%;height:100%}
.page-title .page-art{grid-column:2;grid-row:1/span 4;height:200px;margin:0;border-radius:20px;box-shadow:inset 0 0 0 1px #ffffff80}
.page-title::after{display:none}
.page-title .page-art .ga-pet{height:130px;margin-bottom:12px}
.page-title .page-art.ga-swap .ga-pet{height:104px}
.page-title .page-art .ga-shield,.page-title .page-art.ga-lock .ga-prop{width:92px;height:104px}

/* Heading icon badges */
.h-icon{display:inline-grid;place-items:center;width:34px;height:34px;margin:0 10px 0 0;border-radius:11px;vertical-align:-9px;flex:none;animation:hicon-bob 3.2s ease-in-out infinite;box-shadow:inset 0 -2px 0 #0000000d}
.h-icon .pi{width:20px;height:20px}
.h-icon.tone-purple{background:#ebe6ff;color:#6c55f5}
.h-icon.tone-blue{background:#e1f1ff;color:#2b8ef0}
.h-icon.tone-green{background:#e1f8e8;color:#28b457}
.h-icon.tone-pink{background:#ffe0ee;color:#e8479a}
.h-icon.tone-gold{background:#fff0bf;color:#e39c00}
.h-icon.tone-red{background:#ffe5e8;color:#e8475f}
h2 .h-icon{width:38px;height:38px;border-radius:12px;vertical-align:-10px}
h2 .h-icon .pi{width:22px;height:22px}
summary .h-icon{width:30px;height:30px;border-radius:9px;vertical-align:-8px}
summary .h-icon .pi{width:17px;height:17px}
.faq-list summary{display:flex;align-items:center;gap:4px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';margin-left:auto;font:700 20px/1 var(--font-heading);color:#6c55f5;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
@keyframes hicon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Link cards (Browse values) */
.link-card{display:flex;align-items:center;gap:12px}
.link-card .h-icon{margin:0;background:#fff;color:#6c55f5}

/* Pet detail portrait: sparkle frame */
.detail-art{position:relative;display:block}
.detail-art .ga-star{position:absolute;z-index:1;color:#ffc21a;text-shadow:0 2px 0 #e59a00;font-style:normal;line-height:1;animation:ga-twinkle 1.8s ease-in-out infinite;pointer-events:none}
.detail-art .ga-star.s1{left:8%;top:12%;font-size:26px}.detail-art .ga-star.s2{right:10%;top:20%;font-size:18px;animation-delay:.6s}.detail-art .ga-star.s3{right:16%;bottom:14%;font-size:22px;animation-delay:1.2s}
.detail-art .ga-gem{position:absolute;z-index:1;left:12%;bottom:16%;width:24px;height:24px;color:#9446f7;animation:ga-bob 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 2px #4b3ad455)}

@media(max-width:860px){.page-title{grid-template-columns:minmax(0,1fr) 240px}.page-title .page-art{height:170px}.page-title .page-art .ga-pet{height:110px}}
@media(max-width:720px){
  .page-title{grid-template-columns:1fr;row-gap:14px}
  .page-title .page-art{grid-column:1;grid-row:1;height:150px}
  .page-title .page-art .ga-pet{height:100px}
  .h-icon{width:30px;height:30px;margin-right:8px}h2 .h-icon{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){.h-icon,.detail-art *,.ga-prop,.ga-hand{animation:none!important}}

/* ---------- Per-page hero variants (same theme, different look) ---------- */
.page-title.hero-flip{grid-template-columns:300px minmax(0,1fr)}
.page-title.hero-flip>*{grid-column:2}
.page-title.hero-flip .page-art{grid-column:1}
.page-title.hero-center{grid-template-columns:1fr;text-align:center;row-gap:10px}
.page-title.hero-center>*{grid-column:1}
.page-title.hero-center>.eyebrow{justify-self:center}
.page-title.hero-center .page-art{grid-column:1;grid-row:1;width:min(100%,560px);height:160px;margin:0 auto 6px}
.page-title.hero-center p{margin-left:auto;margin-right:auto}
/* About: village photo */
.page-title.hero-village{background:#a9dcff url('../images/backgrounds/classic-village.webp') center 8%/cover no-repeat;border-color:#fff}
.page-title.hero-village::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffffe6 0%,#ffffffc4 50%,#ffffff55 80%,#ffffff22 100%);pointer-events:none}
.page-title.hero-village>*{position:relative}
/* Contact: warm sunset, art on the left */
.page-title.hero-sunset{background:linear-gradient(135deg,#fff3e0,#ffe1c4 55%,#ffd8ea);border-color:#ffe6cc}
/* FAQ: lilac, centred */
.page-title.hero-lilac{background:linear-gradient(160deg,#efe9ff,#dcd2ff 55%,#d6ecff);border-color:#e6dcff}
/* Methodology: white with a purple dot grid */
.page-title.hero-clean{background:radial-gradient(#d9d0ff 1.3px,transparent 1.4px) 0 0/18px 18px,#fff;border-color:#e3dcff}
/* Privacy: dusk, white text */
.page-title.hero-dusk{background:linear-gradient(135deg,#1d1856,#3a2c8a 55%,#5b3be0);border-color:#5b3be0}
.page-title.hero-dusk h1,.page-title.hero-dusk p{color:#fff}
.page-title.hero-dusk .eyebrow{background:#ffffff26;color:#fff}
/* Disclaimer: white card with a purple accent stripe */
.page-title.hero-stripe{background:linear-gradient(90deg,#f4f0ff,#fff 40%);border-left:10px solid #6c55f5}
/* Rising & Falling: green-to-pink split */
.page-title.hero-chart{background:linear-gradient(90deg,#e3f8ea,#f7fbff 50%,#ffe6ee);border-color:#e6eef8}
/* Value updates: soft gold, art on the left */
.page-title.hero-gold{background:linear-gradient(135deg,#fff7d9,#ffeaa8 60%,#ffdbe7);border-color:#ffe9b0}
/* 404: night sky with stars, white text */
.page-title.hero-night{background:radial-gradient(circle at 18% 30%,#ffffff55 1.5px,transparent 2px),radial-gradient(circle at 62% 20%,#ffffff66 1.5px,transparent 2px),radial-gradient(circle at 40% 75%,#ffffff44 1.2px,transparent 1.8px),radial-gradient(circle at 80% 65%,#ffffff55 1.5px,transparent 2px),linear-gradient(160deg,#141a4f,#2a2273 60%,#3d2f8f);border-color:#3d2f8f}
.page-title.hero-night h1,.page-title.hero-night p{color:#fff}
.page-title.hero-night .eyebrow{background:#ffffff26;color:#fff}
@media(max-width:720px){
  .page-title.hero-flip{grid-template-columns:1fr}
  .page-title.hero-flip>*{grid-column:1}
  .page-title.hero-flip .page-art{grid-row:1}
  .page-title.hero-center .page-art{height:150px}
  .page-title.hero-stripe{border-left-width:6px}
}

/* HTML sitemap page */
.sitemap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:26px}
.sitemap-group{grid-column:span 3}
.sitemap-group{padding:20px 22px}
.sitemap-group h2{margin:0 0 12px;font-size:19px}
.sitemap-group ul{margin:0;padding:0;list-style:none;columns:1}
.sitemap-group li{margin:0 0 8px}
.sitemap-group a{font-weight:700;color:#5a36e0}
.sitemap-group:nth-child(3) ul,.sitemap-group:nth-child(4) ul{columns:2;column-gap:18px}
.sitemap-group:nth-child(3){grid-column:span 6}.sitemap-group:nth-child(4){grid-column:span 4}.sitemap-group:nth-child(5){grid-column:span 2}
.sitemap-group:nth-child(3) ul{columns:4}
.sitemap-note{margin-top:22px;text-align:center}
@media(max-width:900px){.sitemap-grid{grid-template-columns:1fr 1fr}.sitemap-group{grid-column:span 1}.sitemap-group:nth-child(3),.sitemap-group:nth-child(4){grid-column:span 2}.sitemap-group:nth-child(5){grid-column:span 2}.sitemap-group:nth-child(3) ul{columns:2}}
@media(max-width:600px){.sitemap-grid{grid-template-columns:1fr}.sitemap-group,.sitemap-group:nth-child(3),.sitemap-group:nth-child(4),.sitemap-group:nth-child(5){grid-column:auto}.sitemap-group:nth-child(3) ul,.sitemap-group:nth-child(4) ul{columns:1}}