:root {
  --night: #07192b;
  --night-2: #0b2940;
  --panel: #0f3048;
  --cream: #fff8e8;
  --ink: #163047;
  --gold: #f4c45d;
  --gold-deep: #aa741c;
  --aqua: #74d7cf;
  --rose: #ef9a89;
  --muted: #a9bdc9;
  --line: rgba(151, 218, 211, .2);
  font-family: "Segoe UI", Arial, sans-serif;
  color: white;
  background: var(--night);
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--cream); }
a, button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:is(a,button,textarea):focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; border-radius: 8px; color: var(--night); background: var(--aqua); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.topbar { min-height: 82px; display: grid; grid-template-columns: minmax(260px,1fr) auto minmax(120px,1fr); align-items: center; gap: 24px; padding: 10px clamp(18px,4vw,64px); border-bottom: 1px solid rgba(244,196,93,.22); background: rgba(5,21,37,.97); box-shadow: 0 14px 38px rgba(0,0,0,.3); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.brand b,.brand small { display: block; }.brand b { font-family: Georgia,serif; font-size: .9rem; letter-spacing: .09em; }.brand small { margin-top: 3px; color: #b9ccd6; font-size: .68rem; }
.topbar nav { display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.topbar nav a { padding: 9px 14px; border-radius: 999px; color: #bed0da; text-decoration: none; font-size: .73rem; font-weight: 800; }
.topbar nav a.active { color: #082035; background: linear-gradient(135deg,#a7eee4,#62cfc7); box-shadow: 0 6px 18px rgba(87,203,194,.18); }
.home-link { justify-self: end; color: var(--gold); text-decoration: none; font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { margin: 0 0 9px; color: var(--gold-deep); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.welcome { min-height: 650px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(400px,.95fr); align-items: center; gap: clamp(25px,5vw,80px); padding: clamp(55px,8vw,110px) max(clamp(22px,7vw,112px), calc((100vw - 1500px)/2)); color: white; background: radial-gradient(circle at 85% 35%,rgba(116,215,207,.14),transparent 24rem),radial-gradient(circle at 10% 10%,rgba(244,196,93,.1),transparent 25rem),linear-gradient(145deg,#071829,#0a263b 67%,#0b3143); }
.welcome-copy h1 { max-width: 13ch; margin: 0; font-family: Georgia,serif; font-size: clamp(2.8rem,5.4vw,5.6rem); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.welcome-copy > p:not(.eyebrow) { max-width: 61ch; margin: 24px 0; color: #cedde4; font-size: 1.05rem; line-height: 1.7; }
.primary-button,.secondary-button,.gold-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 999px; font-weight: 900; cursor: pointer; text-decoration: none; }
.primary-button { border: 0; color: #082033; background: linear-gradient(135deg,#a7eee4,#62cfc7); box-shadow: 0 12px 28px rgba(66,183,175,.2); }
.secondary-button { border: 1px solid var(--line); color: white; background: rgba(255,255,255,.04); }
.secondary-button:disabled { opacity: .4; cursor: default; }
.gold-button { border: 0; color: #1c2430; background: linear-gradient(135deg,#ffe6a0,#f2bd4f); }
.welcome-note { max-width: 590px; display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 23px; border-top: 1px solid var(--line); }
.welcome-note > span { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(244,196,93,.46); border-radius: 50%; color: var(--gold); font-size: 1.4rem; }
.welcome-note p { margin: 0; color: #b9ced7; font-size: .86rem; line-height: 1.55; }.welcome-note b { color: white; }
.welcome-art { min-height: 430px; position: relative; display: grid; place-items: center; }
.welcome-art img { width: min(430px,92%); max-height: 455px; position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 26px 28px rgba(0,0,0,.35)); }
.welcome-art img.family-group-art { width:min(590px,112%);max-height:500px; }
.glow { width: 270px; height: 270px; position: absolute; border-radius: 50%; background: radial-gradient(circle,rgba(244,196,93,.26),rgba(116,215,207,.08) 45%,transparent 72%); filter: blur(9px); }
.orbit { position: absolute; border: 1px solid rgba(116,215,207,.24); border-radius: 50%; }.orbit-one { width: 360px;height:360px; }.orbit-two { width: 470px;height:470px;border-color:rgba(244,196,93,.13); }
.welcome-art > p { width: min(330px,82%); position: absolute; z-index: 3; right: -18px; bottom: 4px; margin: 0; padding: 18px 20px; border: 1px solid rgba(244,196,93,.28); border-radius: 16px; color: #e4eff2; background: rgba(6,25,42,.88); box-shadow: 0 18px 35px rgba(0,0,0,.22); }
.welcome-art > p b,.welcome-art > p span { display:block; }.welcome-art > p b { color: var(--gold); font-family: Georgia,serif; }.welcome-art > p span { margin-top:5px;font-size:.84rem; }
.family-characters { padding:clamp(58px,7vw,90px) max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2)); color:var(--ink); background:linear-gradient(135deg,#fff8e8,#f0dfb8); }
.family-characters-heading { max-width:850px;margin:0 auto 30px;text-align:center; }.family-characters-heading h2 { margin:0;font:500 clamp(2.2rem,4vw,4.1rem)/1.04 Georgia,serif; }.family-characters-heading>p:last-child { max-width:62ch;margin:17px auto 0;color:#667986;line-height:1.6; }
.family-character-grid { max-width:1200px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:auto; }
.family-character-grid article { min-height:190px;display:flex;align-items:flex-start;gap:18px;padding:27px 25px;overflow:hidden;border:1px solid rgba(170,116,28,.24);border-radius:20px;background:rgba(255,255,255,.72);box-shadow:0 18px 40px rgba(79,55,18,.08); }
.family-character-grid .family-character-mark { flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(170,116,28,.34);border-radius:50%;color:#946313;background:#fff2ce;font:700 .82rem Georgia,serif;letter-spacing:0; }
.family-character-grid article>div { padding:0; }
.family-character-grid article>div>span { color:#99681a;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }.family-character-grid h3 { margin:4px 0 8px;color:var(--night);font:700 1.7rem Georgia,serif; }.family-character-grid p { margin:0;color:#5e707b;font-size:.88rem;line-height:1.55; }
.conversation-section { padding: clamp(65px,8vw,105px) max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2)); color: var(--ink); background: #fffaf0; }
.section-heading { display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:40px;margin-bottom:28px; }.section-heading h2,.daily-grid h2,.family-path h2,.next-zones h2 { margin:0;font-family:Georgia,serif;font-size:clamp(2.1rem,3.7vw,3.8rem);font-weight:500;line-height:1.05; }.section-heading > p { margin:0;color:#667986;line-height:1.65; }
.situation-picker { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px; }
.situation { min-height:116px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 12px;padding:16px;border:1px solid #dce2df;border-radius:15px;color:var(--ink);text-align:left;background:white;cursor:pointer;transition:transform .18s,border-color .18s,background .18s; }
.situation:hover { transform:translateY(-2px);border-color:#7ccdc5; }.situation.active { border-color:#399e96;background:#edf9f6;box-shadow:0 10px 25px rgba(35,116,107,.09); }
.situation > span { grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#9b6b1d;background:#fff4d8;font-family:Georgia,serif;font-size:1.25rem; }.situation b { align-self:end; }.situation small { align-self:start;color:#6e7d86;line-height:1.35; }
.conversation-card { min-height:520px;display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.55fr);overflow:hidden;border:1px solid rgba(87,147,148,.25);border-radius:24px;background:var(--night);box-shadow:0 26px 70px rgba(20,52,62,.17); }
.step-map { padding:38px;border-right:1px solid var(--line);background:radial-gradient(circle at 20% 0,rgba(244,196,93,.12),transparent 18rem),#0b263b; }.step-map > p { margin:0 0 18px;color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase; }.step-map ol { display:grid;gap:7px;margin:0;padding:0;list-style:none; }.step-map li { display:grid;grid-template-columns:31px 1fr;align-items:center;gap:11px;padding:9px;border-radius:10px;color:#8fa8b6;font-size:.84rem;font-weight:700; }.step-map li span { width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;font-size:.72rem; }.step-map li.active { color:white;background:rgba(116,215,207,.1); }.step-map li.active span { border-color:var(--aqua);color:#082033;background:var(--aqua); }.step-map li.done { color:#b9d7d2; }.step-map li.done span { color:var(--aqua);border-color:rgba(116,215,207,.45); }
.step-principle { display:flex;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line); }.step-principle > span { color:var(--gold); }.step-principle p { margin:0;color:#9cb3bf;font-family:Georgia,serif;font-size:.91rem;line-height:1.5; }
.prompt-panel { min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,70px);background:radial-gradient(circle at 88% 12%,rgba(116,215,207,.12),transparent 18rem),linear-gradient(145deg,#0e3149,#081d30); }
.prompt-meta { display:flex;justify-content:space-between;gap:16px;color:#8fabba;font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase; }.prompt-meta span:last-child { color:var(--gold); }
.prompt-kicker { margin:42px 0 10px;color:var(--aqua);font-size:.75rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; }.prompt-panel h3 { max-width:24ch;margin:0;font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.7rem);font-weight:500;line-height:1.09; }.prompt-panel > p:not(.prompt-kicker) { max-width:63ch;margin:18px 0 27px;color:#b8ccd5;line-height:1.65; }
.prompt-panel label,.agreement-card label { color:#c4d5dc;font-size:.76rem;font-weight:800; }.prompt-panel label span { color:#7f9aa7;font-weight:500; }
textarea { width:100%;resize:vertical;padding:14px 15px;border:1px solid rgba(148,205,209,.22);border-radius:12px;color:white;background:rgba(2,14,26,.45);line-height:1.5; }.prompt-actions { display:flex;justify-content:space-between;gap:12px;margin-top:20px; }
.daily-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:clamp(65px,8vw,105px) max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2));color:white;background:linear-gradient(155deg,#07192a,#0a293e); }
.ritual-card,.agreement-card { padding:clamp(27px,4vw,48px);border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035); }.daily-grid .eyebrow { color:var(--gold); }.daily-grid h2 { max-width:14ch;font-size:clamp(2rem,3.2vw,3.15rem); }
.ritual-card ol { display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none; }.ritual-card li { display:grid;grid-template-columns:62px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line); }.ritual-card li > span { color:var(--aqua);font-size:.67rem;font-weight:900;letter-spacing:.08em; }.ritual-card b { font-family:Georgia,serif;font-size:1.05rem; }.ritual-card p { margin:4px 0 0;color:#a9bec9;font-size:.86rem;line-height:1.5; }
.agreement-card > p:not(.eyebrow) { color:#aec2cc;line-height:1.6; }.agreement-card form { margin-top:27px; }.agreement-card textarea { margin-top:8px; }.agreement-card form > div { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:12px; }.agreement-card form span { color:#7895a4;font-size:.72rem; }.saved-agreement { display:flex;align-items:flex-start;gap:13px;margin-top:22px;padding:17px;border:1px solid rgba(116,215,207,.32);border-radius:14px;background:rgba(116,215,207,.07); }.saved-agreement > span { width:29px;height:29px;display:grid;place-items:center;border-radius:50%;color:#092235;background:var(--aqua);font-weight:900; }.saved-agreement small { color:var(--aqua);font-weight:900;text-transform:uppercase;letter-spacing:.08em; }.saved-agreement p { margin:5px 0 0;color:white;line-height:1.5; }
.family-path { padding:clamp(60px,7vw,95px) max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2));color:var(--ink);background:#f2ead7; }.family-path > div { max-width:780px; }.family-path ol { display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:35px 0 0;padding:0;list-style:none; }.family-path li { min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 10px;border:1px solid #d8ccb4;border-radius:16px;text-align:center;background:#fffaf0; }.family-path li span { width:43px;height:43px;display:grid;place-items:center;margin-bottom:12px;border:1px solid #d6aa50;border-radius:50%;color:#a36d13;font-family:Georgia,serif;font-size:1.25rem; }.family-path li b { font-family:Georgia,serif; }.family-path li small { margin-top:7px;color:#6f7c81;font-size:.7rem;line-height:1.35; }
.next-zones { display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;padding:clamp(65px,8vw,105px) max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2));color:var(--ink);background:white; }.next-zones > div { padding-right:25px; }.next-zones > div > p:last-child { color:#6c7e88;line-height:1.6; }.zone-card { min-height:280px;display:flex;flex-direction:column;padding:28px;border:1px solid #dbe3e4;border-radius:21px;color:white;text-decoration:none;box-shadow:0 18px 45px rgba(13,43,61,.12);transition:transform .18s; }.zone-card:hover { transform:translateY(-4px); }.zone-card.kids { background:radial-gradient(circle at 80% 10%,rgba(255,217,106,.24),transparent 12rem),linear-gradient(145deg,#123a52,#0b263c); }.zone-card.youth { background:radial-gradient(circle at 80% 10%,rgba(85,220,255,.25),transparent 12rem),linear-gradient(145deg,#102e57,#07172f); }.zone-card > span { width:49px;height:49px;display:grid;place-items:center;margin-bottom:auto;border:1px solid rgba(255,255,255,.24);border-radius:50%;color:var(--gold);font-size:1.35rem; }.zone-card small { color:#99dcd8;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }.zone-card b { margin-top:8px;font-family:Georgia,serif;font-size:1.45rem;line-height:1.2; }.zone-card em { margin-top:20px;color:var(--gold);font-size:.78rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.05em; }
footer { display:flex;justify-content:space-between;gap:25px;padding:31px max(clamp(20px,6vw,92px),calc((100vw - 1500px)/2));color:#8fa7b4;background:#040e1a;font-size:.74rem; } footer p { margin:0; }footer b,footer span { display:block; }footer b { color:var(--gold);font-family:Georgia,serif;letter-spacing:.08em; }footer span { margin-top:6px; }footer a { color:#c9e5e4;text-decoration:none;font-weight:800; }
.conversation-step { display:flex;flex:1;flex-direction:column;justify-content:center; }.conversation-step>p:not(.prompt-kicker){max-width:63ch;margin:18px 0 27px;color:#b8ccd5;line-height:1.65}.conversation-complete h3{max-width:22ch}.conversation-complete>p:not(.prompt-kicker){color:#b8ccd5;line-height:1.6}.conversation-complete ol{display:grid;gap:8px;margin:24px 0;padding:0;list-style:none}.conversation-complete li{padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035)}.conversation-complete li b{color:var(--aqua);font-size:.8rem}.conversation-complete li p{margin:5px 0 0;color:#d4e2e7;line-height:1.45}.summary-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}.action-status{min-height:20px;margin:10px 0 0;color:var(--gold);font-size:.78rem}.conversation-history{display:grid;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:25px;margin-top:22px;padding:26px;border:1px solid #d9e3df;border-radius:18px;background:white}.conversation-history h3{margin:0;font-family:Georgia,serif;font-size:1.7rem}.history-list{display:grid;gap:8px}.history-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid #dbe3e1;border-radius:11px}.history-list article b,.history-list article small{display:block}.history-list article small{margin-top:4px;color:#6a7d87}.history-list article>div:last-child{display:flex;gap:7px}.history-list button,.saved-agreement-actions button{min-height:38px;padding:7px 11px;border:1px solid #b9ceca;border-radius:999px;color:#1b594f;background:white;font-weight:800;cursor:pointer}.history-list button:last-child,.saved-agreement-actions button:last-child{color:#8b352d}.saved-agreement>div{flex:1}.saved-agreement-actions{display:flex;gap:8px;margin-top:12px}.saved-agreement-actions button{min-height:34px;padding:5px 10px;color:#bceee7;background:transparent;border-color:rgba(116,215,207,.35)}footer nav{display:flex;flex-wrap:wrap;gap:14px}
.backup-note{margin:12px 0;color:#63757d;font-size:.78rem;line-height:1.5}.backup-actions{display:flex;flex-wrap:wrap;gap:8px}.backup-actions :is(button,label){min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid #b9ceca;border-radius:999px;color:#1b594f;background:white;font-size:.75rem;font-weight:900;cursor:pointer}.backup-actions input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.backup-actions label:focus-within{outline:3px solid #3b8378;outline-offset:2px}
small,.eyebrow,.prompt-meta,.prompt-panel label,.agreement-card label,.step-map>p,.action-status,footer{font-size:.75rem!important}
@media (max-width:1050px) { .topbar { grid-template-columns:1fr auto; }.topbar nav { grid-row:2;grid-column:1/3;justify-self:center; }.welcome { grid-template-columns:1fr .75fr; }.situation-picker { grid-template-columns:1fr 1fr; }.family-path ol { grid-template-columns:repeat(4,1fr); }.next-zones { grid-template-columns:1fr 1fr; }.next-zones > div { grid-column:1/3; } }
@media (max-width:760px) { .topbar { gap:10px;padding-inline:14px; }.brand small { display:none; }.brand b { font-size:.72rem; }.home-link { font-size:.68rem; }.topbar nav { width:100%;overflow-x:auto;justify-content:flex-start;border-radius:12px; }.welcome { min-height:0;grid-template-columns:1fr;padding-block:65px 35px; }.welcome-art { min-height:370px; }.welcome-art > p { right:0; }.family-character-grid { grid-template-columns:1fr; }.family-character-grid article { min-height:0;align-items:center; }.section-heading,.conversation-card,.daily-grid { grid-template-columns:1fr; }.section-heading { align-items:start;gap:16px; }.step-map { border-right:0;border-bottom:1px solid var(--line); }.step-map ol { grid-template-columns:repeat(5,1fr); }.step-map li { display:flex;flex-direction:column;gap:6px;text-align:center;font-size:.67rem; }.step-principle { display:none; }.prompt-panel { min-height:490px; }.family-path ol { grid-template-columns:repeat(2,1fr); }.next-zones { grid-template-columns:1fr; }.next-zones > div { grid-column:auto; }.zone-card { min-height:230px; }footer { flex-direction:column; } }
@media (max-width:760px){.conversation-history{grid-template-columns:1fr}.history-list article{align-items:flex-start;flex-direction:column}.history-list article>div:last-child{width:100%}.history-list button{flex:1}.summary-actions>*{width:100%}.backup-actions :is(button,label){flex:1}}
@media (max-width:460px) { .topbar nav a { padding:8px 11px;font-size:.68rem; }.brand img { width:38px;height:38px; }.welcome-copy h1 { font-size:2.7rem; }.family-characters { padding-inline:14px; }.family-character-grid article { gap:15px;padding:20px 18px; }.family-character-grid .family-character-mark { flex-basis:36px;width:36px;height:36px; }.family-character-grid h3 { font-size:1.4rem; }.situation-picker { grid-template-columns:1fr; }.conversation-section,.daily-grid,.family-path,.next-zones { padding-inline:14px; }.conversation-card { border-radius:17px; }.step-map { padding:24px 16px; }.step-map li { padding:4px 1px; }.step-map li span { width:27px;height:27px; }.prompt-panel { padding:30px 18px; }.prompt-actions { flex-direction:column-reverse; }.prompt-actions button { width:100%; }.family-path ol { grid-template-columns:1fr 1fr;gap:7px; }.family-path li { min-height:145px; }.welcome-art .orbit-one { width:min(360px,calc(100vw - 28px));height:min(360px,calc(100vw - 28px)); }.welcome-art .orbit-two { width:min(340px,calc(100vw - 28px));height:min(340px,calc(100vw - 28px)); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.zone-card,.situation { transition:none; } }
@media print{.topbar,.welcome,.section-heading,.situation-picker,.step-map,.daily-grid,.family-path,.next-zones,footer,.conversation-history,.summary-actions,.action-status{display:none!important}body,.conversation-section,.conversation-card,.prompt-panel{color:#111;background:white!important;box-shadow:none;border:0}.conversation-section{padding:0}.conversation-card{display:block;min-height:0}.conversation-step{display:none!important}.conversation-complete{display:block!important}.conversation-complete h3,.conversation-complete p,.conversation-complete li p{color:#111!important}.conversation-complete li{border-color:#bbb;break-inside:avoid}}
.brand b,.topbar nav a,.home-link,.step-map li,.step-map li span,.ritual-card li>span,#agreement-count{font-size:.75rem!important}
.topbar nav a,.home-link{min-height:44px;display:inline-flex;align-items:center}.history-list button,.saved-agreement-actions button{min-height:44px}.brand{min-height:44px}
footer a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}


/* Keep the family caption below the figures at every width. */
.welcome-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.welcome-art img.family-group-art { width: min(590px, 100%); max-height: none; }
.welcome-art > p { position: relative; right: auto; bottom: auto; width: min(360px, 100%); margin: 0; text-align: center; }
.welcome-art .glow, .welcome-art .orbit { left: 50%; top: 40%; transform: translate(-50%, -50%); }
.welcome-art .orbit-one { width: min(360px, 100%); height: auto; aspect-ratio: 1; }
.welcome-art .orbit-two { width: min(470px, 100%); height: auto; aspect-ratio: 1; }

/* The flame shimmer uses each illustration itself, avoiding detached light shapes. */
@keyframes family-flame-flicker {
  0%, 100% { opacity: .16; filter: brightness(1.05) saturate(1.04); }
  34% { opacity: .42; filter: brightness(1.38) saturate(1.14); }
  67% { opacity: .25; filter: brightness(1.18) saturate(1.08); }
}
.family-group-stage { position: relative; display: block; width: min(590px, 100%); aspect-ratio: 1373 / 1145; line-height: 0; }
.welcome-art .family-group-stage > img.family-group-art { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.family-group-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('/assets/home/trio-oro-unificado-v3.png') center / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 10% 14% at 28% 15%, #000 35%, transparent 88%), radial-gradient(ellipse 11% 15% at 55% 12%, #000 35%, transparent 88%), radial-gradient(ellipse 9% 11% at 83% 39%, #000 35%, transparent 88%);
  mask-image: radial-gradient(ellipse 10% 14% at 28% 15%, #000 35%, transparent 88%), radial-gradient(ellipse 11% 15% at 55% 12%, #000 35%, transparent 88%), radial-gradient(ellipse 9% 11% at 83% 39%, #000 35%, transparent 88%);
  mix-blend-mode: screen;
  animation: family-flame-flicker 1.7s ease-in-out infinite;
}