/* Angela's home hub — "Bento Grid + 3D Icons" (mockup 10). Self-hosted font, no external requests. */
@font-face{font-family:"DM Sans";font-weight:100 1000;font-style:normal;font-display:swap;src:url(/fonts/dm-sans.woff2) format("woff2")}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#eeebe6}
body{min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;background:#eeebe6;font-family:"DM Sans","Outfit",ui-sans-serif,system-ui,-apple-system,sans-serif;color:#17151c;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg.icon{display:block;overflow:visible}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(23,21,28,.09) 1.2px,transparent 1.4px);background-size:26px 26px}
.bg .gl{position:absolute;inset:0;background:radial-gradient(900px 500px at 85% -10%,rgba(255,255,255,.9),transparent 70%),radial-gradient(700px 500px at 0% 110%,rgba(255,231,212,.7),transparent 70%)}
.wrap{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:1560px;margin:0 auto;padding:max(40px,env(safe-area-inset-top)) max(40px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(40px,env(safe-area-inset-left))}
.hd{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex:none}
.logo{display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#2a2733,#0d0c12);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 10px 18px -8px rgba(0,0,0,.5)}
h1{white-space:nowrap;font-weight:800;font-size:clamp(34px,3.4vw,50px);letter-spacing:-.04em;line-height:1}
.who{margin-left:auto;font-weight:600;font-size:15px;letter-spacing:-.01em;color:rgba(23,21,28,.62);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 18px -12px rgba(40,30,20,.4);padding:9px 16px;border-radius:999px}
/* bento: one big tile (slot 1) + two stacked tiles (slots 2-3) that fill the rest of the screen. Sizes belong to the SLOT, so a reorder re-sizes the cards. */
.grid{position:relative;flex:1;min-height:720px;display:grid;grid-template-columns:7fr 5fr;grid-template-rows:minmax(250px,1fr) minmax(250px,1fr) minmax(200px,.62fr);gap:20px}
.grid>.card:nth-child(1){grid-row:1/3}
.grid>.card:nth-child(4){grid-column:1/-1}
.card{container-type:size;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:clamp(32px,3.4vw,48px);padding:clamp(28px,3.2vw,48px);
 box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 28px 46px -28px rgba(40,30,20,.5);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover,.card:focus-visible{transform:translateY(-6px) scale(1.01);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 38px 56px -26px rgba(40,30,20,.55);outline:none}
.card:focus-visible{box-shadow:0 0 0 4px #17151c,0 1px 0 rgba(255,255,255,.85) inset}
.card:active{transform:scale(.985)}
.card:before{content:"";position:absolute;right:-12%;top:-22%;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.78),transparent 68%);pointer-events:none}
.card:after{content:"";position:absolute;left:-14%;bottom:-30%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.38),transparent 70%);pointer-events:none}
.ico{position:absolute;z-index:1;right:7%;top:50%;width:min(68cqw,72cqh);aspect-ratio:1;transform:translateY(-60%)}
.ico:after{content:"";position:absolute;left:14%;right:14%;bottom:-3%;height:7%;border-radius:50%;background:rgba(40,25,10,.28);filter:blur(10px);z-index:-1}
.ico svg{width:100%;height:100%;filter:drop-shadow(0 .9cqh 1cqh rgba(40,25,10,.22)) drop-shadow(0 3cqh 3cqh rgba(40,25,10,.12))}
.a,.b,.c{stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-linejoin:round}
.k{stroke:rgba(255,255,255,.9);stroke-width:2.2}
.l{fill:none;stroke:var(--ln);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.c2,.c3{stroke:var(--ac)}
.txt{position:relative;z-index:2}
.txt b{display:block;font-weight:800;font-size:clamp(34px,min(9.5cqw,10cqh),84px);letter-spacing:-.04em;line-height:1}
.txt i{display:block;font-style:normal;font-weight:500;font-size:clamp(15px,min(3.2cqw,3.6cqh),22px);color:rgba(23,21,28,.55);margin-top:.55em;letter-spacing:-.01em}
.go{position:absolute;z-index:2;right:clamp(22px,2.6vw,40px);bottom:clamp(22px,2.6vw,40px);width:clamp(46px,4.2vw,62px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#17151c;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:0 12px 22px -12px rgba(40,30,20,.5);transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.go svg{width:42%;height:42%}
.card:hover .go,.card:focus-visible .go{transform:translate(2px,-2px) rotate(0);background:#17151c;color:#fff}
@media(prefers-reduced-motion:no-preference){
 .card{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.1s + var(--i) * .12s)}
 .ico svg{animation:bob 7s ease-in-out infinite alternate}
 .c-finance .ico svg{animation-delay:-3s}
 .c-calendar .ico svg{animation-delay:-5s}
 .hd{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
}
@media(min-width:701px){.grid>.card:nth-child(n+2) .ico{right:19%;width:min(54cqw,62cqh);transform:translateY(-56%)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2.2%)}}

/* iPhone / small screens: three stacked tiles filling the screen */
@media(max-width:700px){
 .wrap{padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .hd{gap:12px;margin-bottom:18px}.logo{width:40px;height:40px;border-radius:13px;font-size:22px}h1{font-size:29px;white-space:nowrap}
 .who{font-size:12.5px;padding:7px 12px;white-space:nowrap}
 .grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(200px,auto);gap:14px;min-height:0}.grid>.card:nth-child(1){grid-row:auto}.grid>.card:nth-child(4){grid-column:auto}.card.grp{min-height:300px}
 .card{border-radius:36px;padding:26px}
 .ico{right:5%;width:min(66cqw,64cqh);transform:translateY(-64%)}
 .txt b{font-size:clamp(34px,min(12cqw,13cqh),48px)}.txt i{font-size:15.5px}
 .go{width:50px;right:22px;bottom:22px}
}
/* short landscape phones */
@media(max-height:520px) and (min-width:701px){.grid{min-height:420px}.ico{transform:translateY(-55%)}}

/* sign-in */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;z-index:2}
.login form{width:min(100%,380px);padding:34px 30px 30px;border-radius:36px;background:#ffe7d4;box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 28px 46px -28px rgba(40,30,20,.5);position:relative;overflow:hidden}
.login form:before{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),transparent 68%);pointer-events:none}
.login .logo{margin-bottom:18px;position:relative}
.login h1{font-size:34px;margin-bottom:6px;position:relative}.login p.sub{font-weight:500;color:rgba(23,21,28,.55);margin-bottom:22px;position:relative}
.login label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.login input{position:relative;width:100%;height:56px;padding:0 20px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.8);color:#17151c;font:600 17px "DM Sans",sans-serif;border-radius:18px;-webkit-appearance:none;appearance:none}
.login input::placeholder{color:rgba(23,21,28,.38);font-weight:500}
.login input:focus{outline:none;box-shadow:0 0 0 3px #17151c}
.login button{position:relative;width:100%;height:56px;margin-top:12px;border:0;border-radius:18px;background:linear-gradient(145deg,#2a2733,#0d0c12);color:#fff;font:700 17px "DM Sans",sans-serif;cursor:pointer;box-shadow:0 14px 24px -14px rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent}
.login button:active{transform:scale(.985)}
.login .err{position:relative;margin-top:16px;color:#a3121f;font-weight:600;font-size:15px}

/* ---- drag to reorder (desktop mouse, iPhone long-press / Edit order) ---- */
.foot{flex:none;display:flex;justify-content:flex-end;margin-top:16px}
.editbtn{appearance:none;-webkit-appearance:none;font:600 14px "DM Sans",sans-serif;letter-spacing:-.01em;color:rgba(23,21,28,.7);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px -12px rgba(40,30,20,.4);padding:10px 18px;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:40px}
.editbtn:hover,.editbtn:focus-visible{color:#17151c;background:#fff;outline:none;box-shadow:0 0 0 3px #17151c}
.editing .editbtn{background:#17151c;border-color:#17151c;color:#fff}
.card{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.card *,.card svg,.card img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.grip{display:none;align-items:center;justify-content:center;position:absolute;z-index:4;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.88);border:1px solid #fff;box-shadow:0 10px 20px -10px rgba(40,30,20,.55);touch-action:none;cursor:grab}
.grip i{display:block;width:18px;height:12px;background:radial-gradient(circle,#17151c 1.6px,transparent 2px) 0 0/9px 6px;opacity:.75}
.editing .grip{display:flex}.editing .go{display:none}
.settled .card{animation:none}
.dl>.it{transition:transform .26s cubic-bezier(.2,.8,.2,1);will-change:transform;transform-origin:0 0}
body.dragging .card:hover{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 28px 46px -28px rgba(40,30,20,.5)}
.grid>.it.held{background:rgba(23,21,28,.045)!important;border:2px dashed rgba(23,21,28,.28);box-shadow:none!important}
.grid>.it.held>*{visibility:hidden}.grid>.it.held:before,.grid>.it.held:after{display:none}
body.dragging .grid>.it:not(.held){pointer-events:none}
.gw{position:fixed;z-index:1000;margin:0;pointer-events:none;filter:drop-shadow(0 26px 30px rgba(40,25,10,.38)) drop-shadow(0 6px 10px rgba(40,25,10,.2));will-change:transform;transform-origin:50% 50%}
.gw.settle{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.gw .card.ghost{width:100%;height:100%;margin:0;cursor:grabbing;animation:none;transition:none;transform:none}
body.dragging{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.toast{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:60;background:#17151c;color:#fff;font:600 14px "DM Sans",sans-serif;padding:10px 18px;border-radius:999px;box-shadow:0 14px 26px -14px rgba(0,0,0,.6);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.dl>.it,.gw.settle,.toast{transition:none!important}}

/* ---- 4 cards: slot 1 big, slots 2-3 stacked, slot 4 a wide bar ---- */
@media(min-width:701px) and (max-width:1000px){
 .wrap{padding:max(30px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left))}
 .grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(280px,1.1fr) minmax(250px,1fr) minmax(200px,.7fr);gap:16px;min-height:820px}
 .grid>.card:nth-child(1){grid-row:auto;grid-column:1/-1}
 .grid>.card:nth-child(n+2) .ico{right:12%}
}
/* ---- Family group card: header + three sub-links (Family, Kaya, Zack). Container = inline size only, so the card grows to fit its content. ---- */
.card.grp{container-type:inline-size;justify-content:space-between;gap:18px;min-height:0}
.grid>.card.grp:nth-child(n) .ico{position:absolute;right:6%;top:7%;width:min(30cqw,230px);transform:none}
.card.grp .txt{padding-right:0;max-width:62%}
.card.grp .txt b{font-size:clamp(34px,9cqw,76px)}
.card.grp .txt i{font-size:clamp(15px,3cqw,22px)}
.subs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:auto}
.sub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:12px 6px 13px;border-radius:24px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.95);
 box-shadow:0 10px 20px -14px rgba(40,30,20,.55);font-weight:800;font-size:clamp(14px,2.3cqw,19px);letter-spacing:-.02em;color:#17151c;text-align:center;-webkit-user-drag:none;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.sub:hover,.sub:focus-visible{background:#fff;transform:translateY(-3px);box-shadow:0 14px 24px -14px rgba(40,30,20,.6);outline:none}
.sub:focus-visible{box-shadow:0 0 0 3px #17151c}
.sub:active{transform:scale(.97)}
.si{display:block}.si svg{display:block;width:clamp(36px,7cqw,58px);height:auto;aspect-ratio:1;filter:drop-shadow(0 4px 5px rgba(40,25,10,.22))}
.sl{display:block;max-width:100%;overflow-wrap:anywhere}
.editing .sub{pointer-events:none;opacity:.6}
@container (max-width:560px){
 .grid>.card.grp:nth-child(n) .ico{right:22px;top:20px;width:clamp(56px,17cqw,84px)}
 .card.grp .txt b{font-size:clamp(30px,10cqw,44px)}
 .card.grp .txt i{font-size:15px}
 .card.grp .txt{max-width:calc(100% - 100px)}
 .subs{gap:8px}.sub{padding:10px 4px 11px;border-radius:20px}
}