/* ═══ LifeTree, embedded ═════════════════════════════════════════════
   Replaces the phone demo inside #lifetree. Everything here is scoped to
   .ltx so it can't reach the rest of the page.
   ════════════════════════════════════════════════════════════════════ */
#lifetree .ltx{
  --ltx-ink:var(--ink,#111B21);
  --ltx-ink2:var(--ink-2,#54656F);
  --ltx-green:var(--green,#25D366);
  --ltx-green-ink:var(--green-ink,#0F7A50);
  --ltx-glass:rgba(255,255,255,.6);
  --ltx-rim:rgba(255,255,255,.88);
  --ltx-lift:0 12px 32px -18px rgba(17,27,33,.26),0 0 0 1px rgba(17,27,33,.04);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,4vw,72px);
  max-width:1180px;
  margin:clamp(28px,4vw,56px) auto var(--space-12,48px);
  font-family:var(--font-body,Archivo,system-ui,sans-serif);
  color:var(--ltx-ink);
}
#lifetree .ltx *,#lifetree .ltx *::before,#lifetree .ltx *::after{box-sizing:border-box}
#lifetree .ltx button{font:inherit;color:inherit;margin:0;-webkit-tap-highlight-color:transparent}
#lifetree .ltx :focus-visible{outline:var(--focus-w,2px) solid var(--ltx-green-ink);outline-offset:var(--focus-offset,3px)}
.ltx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the tree ───────────────────────────────────────────────────────── */
.ltx-stage{position:relative;justify-self:center;width:100%;max-width:600px;padding:56px 0 8px}
.ltx-tree{position:relative;width:100%;aspect-ratio:780/730;cursor:pointer}
.ltx-sway{position:absolute;inset:0;transform-origin:50% 92%}
.ltx-grown .ltx-sway{animation:ltx-sway 9s ease-in-out infinite}
@keyframes ltx-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(.5deg)}75%{transform:rotate(-.5deg)}}
.ltx-layer,.ltx-leaf{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none;max-width:none}
.ltx-layer{left:0;top:0;width:100%;height:100%}
.ltx-leaf{will-change:transform,opacity}
.ltx-frame{position:absolute;pointer-events:none}
.ltx-sbox{position:absolute;visibility:hidden}
.ltx-sprout-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ltx-sprout-svg path{transform-box:view-box}
.ltx-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ltx-links line{stroke:rgba(15,122,80,.45);stroke-width:1.25;stroke-dasharray:3 4;transition:opacity .4s}
.ltx-links line.on{stroke:var(--ltx-green);stroke-dasharray:none;stroke-width:1.5}

/* a branch tip you can open */
.ltx-node{position:absolute;z-index:3;width:36px;height:36px;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.ltx-node::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(37,211,102,.6),0 4px 10px -2px rgba(17,27,33,.25);transition:background .25s,box-shadow .25s,transform .25s}
.ltx-node:hover::before{transform:scale(1.2)}
.ltx-node.on::before{background:var(--ltx-green);box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 6px rgba(37,211,102,.35)}
.ltx-node.on::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--ltx-green);animation:ltx-ping 1.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ltx-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* the count beside each branch */
.ltx-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;min-height:52px;padding:5px 12px 5px 6px;border-radius:14px;
  background:var(--ltx-glass);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--ltx-rim);box-shadow:var(--ltx-lift);
  cursor:pointer;text-align:left;white-space:nowrap;outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .25s,opacity .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ltx-chip img{width:38px;height:38px;object-fit:contain;flex-shrink:0;pointer-events:none}
.ltx-chip span{display:flex;flex-direction:column;min-width:0}
.ltx-chip b{font:500 21px/1.05 var(--font-display,Figtree,system-ui,sans-serif);letter-spacing:-.03em;color:var(--ltx-ink);font-variant-numeric:tabular-nums}
.ltx-chip small{font-size:12px;line-height:14px;color:var(--ltx-ink2)}
.ltx-chip.big img{width:48px;height:48px}
.ltx-chip.big b{font-size:28px}
.ltx-chip:hover{background:rgba(255,255,255,.78)}
.ltx-chip.on{outline-color:var(--ltx-green)}
.ltx-bob{animation:ltx-bob var(--bob,5.4s) ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes ltx-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.ltx-node.hide,.ltx-chip.hide{opacity:0;transform:scale(.6);pointer-events:none}
.ltx-links line.hide{opacity:0}

/* under the tree: the four stages it grows through, and where it is now */
.ltx-grow{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.ltx-steps{position:relative;width:min(100%,430px)}
.ltx-track{position:absolute;left:12.5%;right:12.5%;top:10px;height:3px;border-radius:3px;background:rgba(17,27,33,.09)}
.ltx-track i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#9BD86A,var(--ltx-green));transform-origin:0 50%;transform:scaleX(0)}
.ltx-levels{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#lifetree .ltx .ltx-lv{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 0 2px;border:0;border-radius:10px;background:none;cursor:pointer;
  color:var(--ltx-ink2);font-size:12.5px;font-weight:500;letter-spacing:.01em;transition:color .25s}
.ltx-lv i{position:relative;display:block;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(17,27,33,.14),0 3px 8px -4px rgba(17,27,33,.3);
  transition:background .3s,box-shadow .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.ltx-lv i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(17,27,33,.16);transition:background .3s,inset .3s}
.ltx-lv:hover i{transform:scale(1.12)}
.ltx-lv:hover{color:var(--ltx-ink)}
.ltx-lv.past i{background:#E2F7E9;box-shadow:0 0 0 1.5px #A7DDC1}
.ltx-lv.past i::after{background:var(--ltx-green)}
.ltx-lv.on{color:var(--ltx-ink);font-weight:600}
.ltx-lv.on i{background:var(--ltx-green);box-shadow:0 0 0 4px rgba(37,211,102,.18),0 4px 12px -4px rgba(15,122,80,.6);transform:scale(1.08)}
.ltx-lv.on i::after{inset:7.5px;background:#fff}
.ltx-cap{margin:0;min-height:21px;font-size:14.5px;line-height:21px;color:var(--ltx-ink2);text-align:center}
.ltx-cap b{font-weight:600;color:var(--ltx-ink);font-variant-numeric:tabular-nums}
.ltx-replay{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:34px;margin-top:-4px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ltx-ink2);font-size:13px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s,background .2s}
.ltx-grown .ltx-replay{opacity:1;visibility:visible;transition:opacity .4s,background .2s}
.ltx-replay:hover{background:rgba(255,255,255,.6);color:var(--ltx-ink)}
.ltx-replay svg{width:15px;height:15px}

/* ── the book ───────────────────────────────────────────────────────── */
.ltx-book{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.ltx-head{text-align:center;min-height:76px}
.ltx-head h3{margin:0;font:600 30px/1.1 var(--font-display,Figtree,system-ui,sans-serif);letter-spacing:-.02em;color:var(--ltx-ink)}
.ltx-head p{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--ltx-ink2)}
.ltx-pills{display:none}

.ltx-deck{--w:400px;--h:480px;position:relative;width:min(100%,var(--w));height:var(--h);margin:34px 0 30px;outline:none;border-radius:28px}
.ltx-deck:focus-visible{outline:var(--focus-w,2px) solid var(--ltx-green-ink);outline-offset:24px}
.ltx-pad{position:absolute;inset:0}
.ltx-sheet{position:absolute;height:100%;border-radius:28px;background:color-mix(in srgb,var(--cB,#fff) 62%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 32px -18px rgba(17,27,33,.22),0 -6px 16px -9px rgba(17,27,33,.18),0 0 0 1px rgba(17,27,33,.04);pointer-events:none}
.ltx-sheet.s1{left:24px;right:24px;top:-16px}.ltx-sheet.s2{left:12px;right:12px;top:-8px;background:color-mix(in srgb,var(--cB,#fff) 80%,transparent)}
.ltx-sheet.s3{left:24px;right:24px;top:16px}.ltx-sheet.s4{left:12px;right:12px;top:8px;background:color-mix(in srgb,var(--cB,#fff) 80%,transparent)}
.ltx-sheet{transition:background-color .45s}

.ltx-card{position:absolute;inset:0;border-radius:28px;padding:22px;border:1px solid rgba(255,255,255,.9);
  background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 62%),linear-gradient(168deg,var(--cA,#fff) 0%,var(--cB,#fff) 100%);
  box-shadow:0 12px 32px -18px rgba(17,27,33,.22),0 -6px 16px -9px rgba(17,27,33,.16),0 0 0 1px rgba(17,27,33,.04);overflow:hidden}
.ltx-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.ltx-date{display:flex;align-items:center;gap:5px;font:400 11.5px/16px var(--font-mono,"JetBrains Mono",ui-monospace,monospace);color:color-mix(in srgb,var(--ci,#111B21) 62%,#8696A0);white-space:nowrap}
.ltx-date svg,.ltx-foot svg{width:12px;height:12px;flex-shrink:0}
.ltx-tag{display:flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--l);color:var(--k);font-size:12px;font-weight:500;white-space:nowrap}
.ltx-body{position:absolute;inset:0;padding:56px 26px 52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none}
.ltx-ico{width:104px;height:104px;color:var(--ic,var(--l));flex-shrink:0}
.ltx-ico svg{display:block;width:100%;height:100%;stroke-opacity:.9;overflow:visible}
/* the line itself: Fraunces, a soft, bookish serif that reads like a page in a keepsake */
.ltx-title{margin:0;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:560;font-size:36px;line-height:1.14;letter-spacing:-.012em;
  font-optical-sizing:auto;font-variation-settings:"SOFT" 100;color:var(--ci,var(--ltx-ink));text-align:center;text-wrap:balance}
.ltx-title.has-lines{font-size:30px;line-height:1.12}
.ltx-lines{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-8px}
.ltx-line{font-size:15px;line-height:1.4;text-align:center;color:color-mix(in srgb,var(--ci,#111B21) 72%,#8696A0)}
.ltx-foot{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;color:color-mix(in srgb,var(--ci,#111B21) 70%,#8696A0)}
.ltx-foot svg{color:var(--k,var(--ltx-green-ink))}

/* the fold: shadow on the page underneath, the curled-over back of the page, and its sheen */
.ltx-shade{position:absolute;inset:0;border-radius:28px;overflow:hidden;pointer-events:none;z-index:3}
.ltx-axis{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.ltx-axis i{position:absolute;left:-1600px;width:3200px}
.ltx-flap{position:absolute;inset:0;pointer-events:none;z-index:5;filter:drop-shadow(0 8px 14px rgba(17,27,33,.2)) drop-shadow(0 1px 2px rgba(17,27,33,.12))}
.ltx-flap-in{position:absolute;inset:0;transform-origin:0 0}
.ltx-back{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,var(--cB,#E4E9EC) 0%,var(--cD,#CDD5DA) 100%);border:1px solid rgba(17,27,33,.06)}
.ltx-back .ltx-card{background:none;border:0;box-shadow:none;opacity:.09;filter:blur(.4px)}
.ltx-hit{position:absolute;inset:0;z-index:6;cursor:grab;touch-action:pan-y;border-radius:28px}
.ltx-hit:active{cursor:grabbing}
.ltx-grip{position:absolute;left:0;right:0;bottom:0;height:42%;touch-action:none}
.ltx-leaves{position:absolute;left:-90px;top:-260px;width:calc(100% + 180px);height:calc(100% + 300px);pointer-events:none;z-index:8}
.ltx-hand{position:absolute;left:0;top:0;width:32px;height:32px;z-index:9;pointer-events:none;overflow:visible;transform-origin:16px 16px;filter:drop-shadow(0 4px 6px rgba(17,27,33,.25));opacity:0}
.ltx-tap{position:absolute;left:0;top:0;z-index:9;pointer-events:none;border:2px solid var(--ltx-green);border-radius:50%;opacity:0}
.ltx-pop{animation:ltx-pop .8s cubic-bezier(.34,1.56,.64,1)}
@keyframes ltx-pop{0%{transform:scale(1)}25%{transform:scale(1.22) rotate(-8deg)}55%{transform:scale(.94) rotate(5deg)}100%{transform:scale(1) rotate(0)}}

/* the card icons move a little, like they did in the app */
@media (prefers-reduced-motion:no-preference){
  .ltxa-laugh{animation:ltxa-bob 3.2s ease-in-out infinite;transform-origin:50% 60%}
  .ltxa-eye{transform-box:fill-box;transform-origin:center;animation:ltxa-blink 4.2s infinite}
  .ltxa-steam{animation:ltxa-steam 2.4s ease-in-out infinite}.ltxa-steam.s2{animation-delay:.4s}.ltxa-steam.s3{animation-delay:.8s}
  .ltxa-car{animation:ltxa-drive 1.6s ease-in-out infinite}
  .ltxa-book{animation:ltxa-read 3.6s ease-in-out infinite;transform-origin:50% 90%}
  .ltxa-bob{animation:ltxa-float 3.4s ease-in-out infinite}
  .ltxa-flame{transform-box:fill-box;transform-origin:center;animation:ltxa-flick 1.2s ease-in-out infinite}.ltxa-flame.f2{animation-delay:.3s}.ltxa-flame.f3{animation-delay:.6s}
  .ltxa-ring{animation:ltxa-ring 2.8s ease-in-out infinite;transform-origin:50% 50%}
  .ltxa-pin{animation:ltxa-drop 2.6s ease-in-out infinite}
  .ltxa-wiggle{animation:ltxa-wig 3s ease-in-out infinite;transform-origin:50% 80%}
  .ltxa-walk{animation:ltxa-walk 1.8s ease-in-out infinite}
}
@keyframes ltxa-bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-5deg)}75%{transform:translateY(-1px) rotate(4deg)}}
@keyframes ltxa-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes ltxa-steam{0%{transform:translateY(1.5px);opacity:0}30%{opacity:1}100%{transform:translateY(-2.5px);opacity:0}}
@keyframes ltxa-drive{0%,100%{transform:translate(-4px,0)}25%{transform:translate(0,-2px)}50%{transform:translate(4px,0)}75%{transform:translate(0,-2px)}}
@keyframes ltxa-read{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ltxa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ltxa-flick{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.6px) scale(1.6)}}
@keyframes ltxa-ring{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(-12deg)}68%{transform:rotate(10deg)}72%{transform:rotate(-8deg)}76%{transform:rotate(6deg)}80%{transform:rotate(0)}}
@keyframes ltxa-drop{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}55%{transform:translateY(0)}62%{transform:translateY(-2px)}70%{transform:translateY(0)}}
@keyframes ltxa-wig{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-2deg)}}
@keyframes ltxa-walk{0%,100%{transform:translate(-3px,0)}25%{transform:translate(0,-3px)}50%{transform:translate(3px,0)}75%{transform:translate(0,-3px)}}

/* controls under the book */
.ltx-ctrl{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 14px}
.ltx-nav{display:flex;align-items:center;gap:10px}
.ltx-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--ltx-rim);background:var(--ltx-glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--ltx-lift);cursor:pointer;color:var(--ltx-ink);transition:background .2s,transform .2s}
.ltx-arrow:hover{background:rgba(255,255,255,.85)}
.ltx-arrow:active{transform:scale(.94)}
.ltx-arrow svg{width:20px;height:20px}
.ltx-dots{display:flex;align-items:center;gap:6px;padding:0 4px}
.ltx-dots i{display:block;width:8px;height:8px;border-radius:999px;background:#C3CCD1;transition:width .35s cubic-bezier(.22,1,.36,1),background .25s}
.ltx-dots i.on{width:22px;background:var(--ltx-green)}
.ltx-surprise{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 15px;border-radius:999px;border:1px solid #A7DDC1;
  background:linear-gradient(180deg,rgba(238,251,243,.95) 0%,rgba(214,243,226,.95) 100%);color:var(--ltx-green-ink);font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(15,122,80,.5),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .2s,box-shadow .2s}
.ltx-surprise:hover{transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(15,122,80,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.ltx-surprise svg{width:17px;height:17px}
.ltx-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;min-height:20px;font-size:13.5px;color:var(--ltx-ink2);transition:opacity .5s}
.ltx-hint svg{width:16px;height:16px;flex-shrink:0;color:var(--ltx-green-ink)}
.ltx-hint.gone{opacity:0}

/* ── smaller screens: tree on top, then the book ─────────────────────── */
@media (max-width:900px){
  #lifetree .ltx{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .ltx-stage{max-width:440px;padding:44px 8px 4px}
  .ltx-chip{min-height:44px;padding:4px 10px 4px 4px;gap:4px}
  .ltx-chip img,.ltx-chip.big img{width:30px;height:30px}
  .ltx-chip b,.ltx-chip.big b{font-size:18px}
  .ltx-chip small{font-size:11px;line-height:12px}
  .ltx-head{min-height:0;margin-top:22px}
  .ltx-head h3{font-size:26px}
  .ltx-head p{font-size:15px}
  .ltx-pills{display:flex;gap:6px;margin:16px -16px 0;padding:2px 16px;max-width:calc(100% + 32px);overflow-x:auto;scrollbar-width:none}
  .ltx-pills::-webkit-scrollbar{display:none}
  .ltx-pill{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--ltx-rim);background:var(--ltx-glass);color:var(--ltx-ink2);font-size:14px;font-weight:500;cursor:pointer}
  .ltx-pill i{width:8px;height:8px;border-radius:50%;background:var(--k)}
  .ltx-pill[aria-pressed="true"]{background:#E2F7E9;border-color:#A7DDC1;color:var(--ltx-green-ink)}
  .ltx-deck{--w:400px;--h:460px;margin:30px 0 26px}
  .ltx-title{font-size:31px}
  .ltx-title.has-lines{font-size:26px}
  .ltx-line{font-size:14px}
  .ltx-ico{width:88px;height:88px}
  .ltx-grow{margin-top:10px;gap:8px}
  .ltx-cap{font-size:13.5px}
}
@media (max-width:480px){
  .ltx-deck{--w:358px;--h:440px}
}
@media (max-width:420px){
  .ltx-chip small{display:none}
  .ltx-deck{--h:420px}
  .ltx-title{font-size:28px}
  #lifetree .ltx .ltx-lv{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .ltx-grown .ltx-sway,.ltx-bob,.ltx-node.on::after{animation:none}
}