.household-tree { --tree-bark:#98705b; --tree-bark-highlight:#b78d72; --tree-bark-mark:#51362d; --tree-touch:0deg; min-width:0; }
.tree-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.tree-heading h2 { font-size:1.35rem;margin:0; }
.tree-heading .range-select { width:auto;max-width:190px;flex-shrink:0; }
.tree-heading h2 { min-width:0; }
@media(max-width:420px) { .tree-heading { gap:8px; }.tree-heading .range-select { max-width:155px;padding:8px 10px;font-size:.85rem; } }
.tree-help { color:var(--text-soft);font-size:.85rem;line-height:1.6;margin:12px 0; }
.tree-scene { width:100%;max-width:560px;margin:-4px auto 0;touch-action:pan-y; }
.tree-scene svg { display:block;width:100%;height:auto;overflow:visible; }
.tree-lean,.tree-response,.tree-tap,.tree-wind { transform-origin:240px 422px; }
.tree-lean { transform:none; }
.tree-response { transform:rotate(var(--tree-touch));transition:transform 1.8s ease-out; }
.tree-wind { animation:tree-wind 12s ease-in-out infinite alternate; }
.tree-branch { animation:tree-bough 10s ease-in-out infinite alternate; }
.tree-leaf { transform-box:fill-box;transform-origin:50% 90%;animation:tree-flutter 8s ease-in-out infinite alternate; }
.tree-leaf-presence,.tree-petal-presence { transition:opacity 3.4s ease-in-out; }
.tree-falling { animation:tree-fall var(--fall-duration) linear var(--fall-delay) infinite;opacity:0; }
.tree-petal-turn { animation:tree-petal-turn var(--fall-duration) ease-in-out var(--fall-delay) infinite; }
.tree-petal-flutter { animation:tree-petal-flutter var(--flutter-duration) ease-in-out var(--flutter-delay) infinite alternate; }
@keyframes tree-wind { from{transform:rotate(-.35deg)}to{transform:rotate(.45deg)} }
@keyframes tree-bough { from{transform:rotate(-.5deg)}to{transform:rotate(.6deg)} }
@keyframes tree-flutter { from{transform:rotate(-3deg)}to{transform:rotate(4deg)} }
@keyframes tree-fall {
  0% { transform:translate(var(--fall-x0),var(--fall-y0));opacity:0; }
  12% { opacity:var(--fall-opacity); }
  25% { transform:translate(var(--fall-x1),var(--fall-y1)); }
  50% { transform:translate(var(--fall-x2),var(--fall-y2)); }
  75% { transform:translate(var(--fall-x3),var(--fall-y3));opacity:var(--fall-opacity); }
  100% { transform:translate(var(--fall-x4),var(--fall-y4));opacity:0; }
}
@keyframes tree-petal-turn {
  0% { transform:rotate(var(--fall-angle0)); }
  35% { transform:rotate(var(--fall-angle1)); }
  70% { transform:rotate(var(--fall-angle2)); }
  100% { transform:rotate(var(--fall-angle3)); }
}
@keyframes tree-petal-flutter {
  from { transform:translateX(calc(var(--flutter-sway) * -1)) scaleX(.65); }
  to { transform:translateX(var(--flutter-sway)) scaleX(1); }
}
.household-tree[data-paused="true"] .tree-wind,.household-tree[data-paused="true"] .tree-branch,.household-tree[data-paused="true"] .tree-leaf,.household-tree[data-paused="true"] .tree-falling,.household-tree[data-paused="true"] .tree-petal-turn,.household-tree[data-paused="true"] .tree-petal-flutter { animation-play-state:paused; }
.tree-visual { position:relative; }
.tree-members { display:flex;justify-content:space-between;align-items:start;gap:16px;padding:0 5%;margin:14px 0 6px;text-align:center; }
.tree-members > div { width:min(46%,220px);min-width:0; }
.tree-members .person-avatar { width:clamp(56px,8vw,68px);height:clamp(56px,8vw,68px);flex-basis:clamp(56px,8vw,68px); }
.tree-members .person-identity strong { font-size:.85rem; }
.tree-person { width:100%;padding:6px;border-radius:16px; }
.tree-person[aria-expanded="true"] { background:color-mix(in srgb,var(--pink) 12%,transparent); }
.tree-person .person-identity { justify-content:center;gap:10px;max-width:100%; }
.tree-person .person-identity strong { white-space:normal;overflow-wrap:anywhere;line-height:1.3;min-width:0;text-align:start; }
@media(max-width:360px) { .tree-members { padding:0;gap:8px; }.tree-person { padding:4px; }.tree-person .person-identity { gap:6px; } }
.tree-members select { max-width:100%;font-size:.8rem;background:var(--surface);color:var(--text-soft);border:1px solid var(--border);border-radius:10px;padding:4px 8px;margin-top:5px; }
 .tree-key { display:flex;justify-content:center;align-items:start;gap:12px;margin:4px 0 16px;color:var(--text-soft);font-size:.8rem;min-width:0; }
.tree-key span { display:flex;align-items:center;justify-content:center;gap:6px; }
.tree-key > button,.tree-key-balance { flex:1;min-width:0; }
.tree-key strong { display:block;color:var(--text);font-size:clamp(.9rem,3.5vw,1.15rem);overflow-wrap:anywhere;line-height:1.4; }
.tree-key-balance { display:grid;gap:4px;text-align:center;padding:4px 6px 4px 12px;min-height:44px;border-inline-start:1px solid var(--border); }
.tree-key-balance > span { color:var(--pink);font-weight:700; }
.tree-scene { cursor:pointer; }
.tree-scene:focus-visible { outline:2px solid var(--pink);outline-offset:2px;border-radius:16px; }
.tree-young,.tree-seed { display:none; }.household-tree[data-stage="sapling"] .tree-mature,.household-tree[data-stage="seed"] .tree-mature { display:none; }.household-tree[data-stage="sapling"] .tree-young,.household-tree[data-stage="seed"] .tree-seed { display:block; }
@media(prefers-reduced-motion:reduce) { .household-tree * { animation:none!important;transition:none!important; }.tree-falling { display:none; }.tree-response { transform:none; } }

/* Same layout and symbols as the app, scaled to the landing-page preview. */
.household-tree {--text-soft:var(--soft);padding:20px;border-radius:26px;border:1px solid var(--border);}
.tree-heading h2 {font-size:21px;}
.tree-period {display:flex;align-items:center;gap:6px;max-width:55%;background:var(--pink-soft);border-radius:24px;padding:8px 10px;color:var(--pink);}
.tree-period svg {width:18px;height:18px;flex-shrink:0;}
.tree-period select {border:0;padding:0;background:transparent;color:inherit;font-size:13px;font-weight:700;width:100%;min-width:0;}
.tree-balance-toggle {display:block;margin:16px auto 6px;padding:0;max-width:100%;border:0;background:transparent;border-radius:20px;}
.tree-balance {display:flex;flex-direction:column;gap:4px;padding:12px 26px;border-radius:20px;background:color-mix(in srgb,var(--pink) 9%,transparent);}
.tree-balance > span {color:var(--pink);font-weight:700;font-size:13px;}
.tree-balance strong {font-size:clamp(26px,8vw,38px);line-height:1.2;white-space:nowrap;color:var(--text);}
.tree-members {padding:0;margin:12px 0 0;gap:10px;}
.tree-members .person-avatar {width:44px;height:44px;flex-basis:44px;background:var(--muted);border:2px solid var(--pink-soft);}
.tree-person {border:0;background:transparent;color:var(--text);}
.tree-members .person-identity {display:flex;align-items:center;}
.tree-scene {margin:0 auto;}
.tree-key {margin:4px 0 0;gap:10px;font-size:12px;}
.tree-key > div {flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.tree-key span {flex-wrap:wrap;line-height:1.4;}
.tree-money-symbol {width:14px;height:22px;flex-shrink:0;}
.tree-key strong {font-size:14px;}
.tree-scene svg {max-height:330px;}
.tree-balance-toggle:focus-visible,.tree-person:focus-visible {outline:2px solid var(--pink);outline-offset:3px;}
@media(max-width:360px){.household-tree {padding:14px;}.tree-heading h2 {font-size:18px;}.tree-period {padding:7px 8px;}.tree-members .person-avatar {width:38px;height:38px;flex-basis:38px;}.tree-person .person-identity {gap:5px;}}
.tree-scene svg,.tree-money-symbol {stroke:none;}
.tree-key > div > span {text-align:center;}
/* Hero overview: one balance, a calm illustration and a small static key. */
[data-cut="hero"] .household-tree {border:0;background:transparent;border-radius:0;padding:16px 20px 10px;box-shadow:none;}
.tree-balance-summary {margin:0 0 14px;text-align:center;}
.tree-balance-summary .tree-balance {padding:0;background:transparent;border-radius:0;gap:3px;}
.tree-balance-summary .tree-balance > span {color:var(--soft);font-size:12px;}
.tree-balance-summary .tree-balance strong {font-size:32px;}
.tree-members {margin:0 0 4px;}
.tree-members .person-avatar {width:30px;height:30px;flex-basis:30px;border:0;}
.tree-members .person-identity strong {font-size:12px;font-weight:600;}
.tree-person {display:block;padding:0;}
.tree-scene svg {max-height:260px;}
.tree-key {gap:22px;margin:5px 0 0;font-size:11px;align-items:center;}
.tree-key > span {flex:0 1 auto;}
.tree-money-symbol {width:11px;height:18px;}

.preview-settled-petal {transition:transform .12s linear;}
@media(prefers-reduced-motion:reduce){.preview-settled-petal {transition:none;}}

/* The renderer interpolates leaf presence; avoid a second delayed CSS fade. */
.tree-leaf-presence {transition:none;}