/* Vazon Family on the web. Colours, sizes and words come from the design (design/rebrand/family_web.py; Figma 776:2). Inter is
   served from here, so the page loads nothing from anywhere else. */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/Inter_400Regular.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/Inter_500Medium.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/Inter_600SemiBold.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/Inter_700Bold.ttf) format('truetype')}
:root{--bg:#FFFFFF;--grp:#F2F2F7;--muted:#EFEFF4;--seg:#E5E5EA;--segon:#FFFFFF;--tp:#0B0C0E;--ts:#5A5D63;--tm:#63666C;--brand:#0F5C4A;--tbrand:#0F5C4A;--onbrand:#FFFFFF;--danger:#B3261E;--bsub:#EBEBF0;--bdef:#E2E2E8;--bctl:#C7C7CC;--bstrong:#8E8E93;--gold:#C9A45C;--goldg:#9A7428;--togoff:#E5E5EA;--like:#2F6FB0;--inverse:#111214;--warm:#9E5E0E;--bgwarm:#FFF5E1;--tint:#EFF5F2;--live:#D64B3B;--chat:#127A5C;--chat-soft:#E3F2EB;--cal:#2D6CAB;--cal-soft:#E6EFFA;--money:#9E5E0E;--money-soft:#FCEFD8;--home:#C4503A;--home-soft:#FBE7E2;--warm-soft:#FFF4E0;--rose:#8C4FA8;--rose-soft:#F3EAF8;--chat-solid:#127A5C;--cal-solid:#2D6CAB;--money-solid:#9E5E0E;--home-solid:#C4503A;--rose-solid:#8C4FA8;color-scheme:light dark}
.num{font-feature-settings:'tnum' 1,'cv11' 1}
.navt{position:absolute;left:0;right:0;text-align:center;font:600 17px Inter;pointer-events:none}
.link{font:500 15px/20px Inter;color:var(--tbrand)}
.rows{padding:0 20px;margin-top:6px}
.row{display:flex;align-items:center;gap:14px;min-height:60px;padding:11px 0;border-bottom:1px solid var(--bsub);box-sizing:border-box}
.rows > .row:last-child,.rows > div:last-child > .row{border-bottom:0}
.rm{flex:1;min-width:0}
.rt{font:400 17px/22px Inter;color:var(--tp)}
.rt.b{font-weight:600}
.rs{font:400 15px/20px Inter;color:var(--ts);margin-top:1px}
.rr{text-align:right;flex:none}
.ra{font:500 17px/22px Inter;font-feature-settings:'tnum' 1,'cv11' 1;color:var(--tp);white-space:nowrap}
.rr .rs{font-size:13px;line-height:18px;font-feature-settings:'tnum' 1}
.rlead{flex:none;display:flex}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font:500 13px Inter;white-space:nowrap;vertical-align:1px}
.btn{display:flex;align-items:center;justify-content:center;font:600 17px Inter;white-space:nowrap;box-sizing:border-box}
.btn.l{height:52px;border-radius:14px;padding:0 22px}
.btn.m{height:44px;border-radius:12px;padding:0 18px;font-size:16px}
.btn.s{height:34px;border-radius:10px;padding:0 14px;font-size:15px}
.btn.primary{background:var(--brand);color:var(--onbrand)}
.btn.secondary{background:var(--muted);color:var(--tp)}
.tog{width:51px;height:31px;border-radius:16px;background:var(--togoff);position:relative;flex:none}
.tog i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--onbrand);box-shadow:0 2px 5px rgba(0,0,0,.18)}
.tog.on{background:var(--brand)}
.tog.on i{left:22px}
.bbar{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--bsub);padding:12px 20px 34px;display:flex;align-items:center;gap:16px}
.bl{flex:1;min-width:0}
.hi{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;box-sizing:border-box}
.hi i{width:134px;height:5px;border-radius:3px;background:var(--tp)}
.foot{display:flex;gap:8px;align-items:flex-start;padding:0 20px;font:400 13px/18px Inter;color:var(--ts)}
.sec-cal .link{color:var(--cal)}
.sec-chat .link{color:var(--chat)}
.sec-home .link{color:var(--home)}
.sec-cal .btn.primary{background:var(--cal-solid);color:#fff}
.sec-chat .btn.primary{background:var(--chat-solid);color:#fff}
.sec-home .btn.primary{background:var(--home-solid);color:#fff}
.grp{background:var(--grp);border-radius:14px;margin:0 20px;padding:0 16px}
.grp .row{min-height:52px;padding:10px 0}
.grp .row:last-child{border-bottom:0}
.radio{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--bstrong);box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center}
.radio.on{background:var(--tp);border-color:var(--tp)}
.sel{border:1.5px solid var(--bdef);border-radius:16px;padding:16px;margin:0 20px;display:flex;gap:14px;align-items:flex-start}
.sel.on{border:2px solid var(--tp);padding:15.5px}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:20px 20px 0 0;display:flex;flex-direction:column}
.grab{width:36px;height:5px;border-radius:3px;background:var(--bctl);margin:6px auto 0}
.acts{display:flex;gap:8px;margin-top:12px}
.todo{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.todo:last-child{border-bottom:0}
.circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--bstrong);box-sizing:border-box;flex:none}
.dayh{display:flex;justify-content:space-between;align-items:baseline;padding:26px 20px 0}
.dayh b{font:700 20px/26px Inter;letter-spacing:-.3px}
.dayh span{font:400 15px Inter;color:var(--ts)}
.evt{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--bsub)}
.evt:last-child{border-bottom:0}
.evt .tm{width:56px;flex:none;font:600 15px/20px Inter;font-feature-settings:'tnum' 1}
.sec-ink .link{color:var(--tp)}
.sec-ink .btn.primary{background:var(--tp);color:var(--bg)}
.field2{display:flex;align-items:center;gap:10px;min-height:54px;border-radius:16px;background:var(--grp);margin:0 20px;padding:0 14px 0 16px;font:400 18px Inter;box-sizing:border-box}
.lbl{padding:0 20px;font:600 15px Inter;color:var(--ts)}
.btn.xl{height:62px;border-radius:16px;font-size:20px}
.disc{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.sec-cal .tog.on{background:var(--cal-solid)}
.cfm{padding:8px 24px 0;text-align:center}
.cfm .ct{font:700 22px/28px Inter;letter-spacing:-.3px}
.cfm .cs{font:400 17px/23px Inter;color:var(--ts);margin-top:8px}
.sel .chT{font:600 17px/22px Inter}
.sel .chS{font:400 15px/20px Inter;color:var(--ts);margin-top:3px}
.fl{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
.sec-home .tog.on{background:var(--home-solid)}
.sec-chat .tog.on{background:var(--chat-solid)}
.wcard{margin:14px 16px 0;background:var(--grp);border-radius:20px;padding:14px 16px}
.wh{font:700 20px/26px Inter;letter-spacing:-.3px}
.wsub{font:400 15px/20px Inter;color:var(--ts)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.act{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--bdef);display:inline-flex;align-items:center;font:500 15px Inter;color:var(--tp)}
.code{font:700 34px/40px Inter;letter-spacing:6px;font-feature-settings:'tnum' 1}
.match{font:700 44px/50px Inter;letter-spacing:2px;font-feature-settings:'tnum' 1}
.err{font:500 15px/20px Inter;color:var(--danger)}
.dsk{display:flex;flex-direction:column;height:100%}
.dtabs{height:40px;background:var(--muted);display:flex;align-items:flex-end;padding:0 12px;gap:6px}
.dtab{height:32px;border-radius:10px 10px 0 0;background:var(--bg);padding:0 14px;display:flex;align-items:center;gap:8px;font:500 13px Inter;color:var(--tp);width:230px}
.dtool{height:46px;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid var(--bsub)}
.daddr{flex:1;height:34px;border-radius:17px;background:var(--grp);display:flex;align-items:center;gap:8px;padding:0 14px;font:400 14px Inter;color:var(--ts)}
.daddr b{font-weight:400;color:var(--tp)}
.dside{width:250px;flex:none;border-right:1px solid var(--bsub);padding:22px 14px}
.dnav{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:10px;font:500 15px Inter;color:var(--tp)}
.dnav.on{background:var(--grp)}
.dmain{flex:1;padding:26px 32px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
.dcard{background:var(--grp);border-radius:20px;padding:16px 18px}

@media (prefers-color-scheme:dark){
:root{--bg:#0B0B0C;--grp:#1C1C1E;--muted:#2C2C2E;--seg:#2C2C2E;--segon:#3A3A3C;--tp:#FFFFFF;--ts:#AEAEB2;--tm:#98989F;--brand:#1A7A60;--tbrand:#6FD3AE;--onbrand:#FFFFFF;--danger:#F28071;--bsub:#2C2C2E;--bdef:#38383A;--bctl:#545458;--bstrong:#7C7C80;--gold:#C9A45C;--goldg:#C9A45C;--togoff:#39393D;--like:#2F6FB0;--inverse:#2C2C2E;--warm:#F0B661;--bgwarm:#2B2414;--tint:#12261F;--live:#D64B3B;--chat:#7FD9B4;--chat-soft:#0E3A2D;--cal:#8DB8EC;--cal-soft:#14273F;--money:#F0B661;--money-soft:#3A2A12;--home:#F29A86;--home-soft:#3C1D17;--warm-soft:#2E2414;--rose:#CFA6E6;--rose-soft:#2C2034;--chat-solid:#127A5C;--cal-solid:#2D6CAB;--money-solid:#9E5E0E;--home-solid:#C4503A;--rose-solid:#8C4FA8}
.sheet{background:var(--grp)}
.sheet .grp{background:var(--muted)}
.sheet .bbar{background:var(--grp);border-top-color:var(--bdef)}
.sheet .grp .row{border-bottom-color:var(--bctl)}
.todo{border-bottom-color:rgba(255,255,255,.08)}
.sheet .sel{border-color:var(--bctl)}
.ddlg{background:var(--grp)!important;box-shadow:0 0 0 1px var(--bdef),0 20px 60px rgba(0,0,0,.5)!important}
.sheet .field2,.sheet .grp{background:var(--muted)}
}
input,textarea,button,.btn,.sheet,.bbar,.screen,.dim{box-sizing:border-box}
/* Decision 38 (WB14, WB15, PP13). The design's label has no line height, and Figma took that as 18; Chrome rounds Inter's to 19, so each label ran 1 pt tall.
   A link is a button, which sits on the baseline of a line 1 pt taller than itself. */
.lbl{line-height:18px}
button.link{vertical-align:top}
/* A choice with no second line keeps the room the design's empty one takes (PP13). */
.sel .chT:only-child{margin-bottom:3px}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tp);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.screen{position:relative;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;background:var(--bg);color:var(--tp);display:flex;flex-direction:column}
.screen.wide{max-width:none}
.screen.has-bar{padding-bottom:110px}
.noscript{padding:20px;font:400 17px/22px Inter}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
input,textarea{font:inherit;color:inherit;background:transparent;border:0;outline:0;width:100%;padding:0;margin:0}
input::placeholder,textarea::placeholder{color:var(--ts);opacity:1}
:focus-visible{outline:2px solid var(--tbrand);outline-offset:2px;border-radius:6px}
.btn{width:100%;text-align:center}
.btn.auto{width:auto}
.btn[disabled]{opacity:.5;cursor:default}
.link{text-decoration:none}
.rt.sel-row{cursor:pointer}
.bbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:5}
.dim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:11;overflow:auto;max-height:100dvh}
.sel{width:calc(100% - 40px);text-align:left;margin-left:20px;margin-right:20px}
.err:empty{display:none}
.tog{cursor:pointer}
.field2 input{font:400 18px Inter;height:54px}
.codebox{flex:1;height:58px;border-radius:14px;background:var(--grp);display:flex;align-items:center;justify-content:center;font:600 26px Inter;position:relative;min-width:0}
.codebox.bad{box-shadow:inset 0 0 0 2px var(--danger)}
.codeinput{position:absolute;inset:0;opacity:0;font-size:26px;letter-spacing:40px;width:100%;height:58px;caret-color:transparent}
.face{border-radius:50%;flex:none;background:var(--muted) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--ts);font-weight:700;overflow:hidden}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--inverse);color:#fff;font:500 15px/20px Inter;padding:10px 16px;border-radius:14px;z-index:30;max-width:calc(100% - 32px)}
.hidden{display:none!important}
@media (min-width:900px){.screen.wide{min-height:100dvh}}
.deskrow{display:flex;min-height:100dvh}
.desksign{padding:70px 0 0 80px;max-width:600px}
.deskcover{position:fixed;inset:0;background:rgba(0,0,0,.35)}
.deskdlg{position:fixed;left:50%;top:110px;margin-left:-250px;width:500px;max-width:calc(100% - 32px);background:var(--bg);border-radius:22px;padding:28px 30px 24px;box-shadow:0 20px 60px rgba(0,0,0,.25);z-index:12}
.rowlink{color:var(--tp)}
.dnav{color:var(--tp)}
.btn.xl{height:62px;border-radius:16px;font-size:20px}
@media (max-width:560px){.deskdlg{left:16px;right:16px;margin-left:0;width:auto;top:60px;padding:24px 20px}.desksign{padding:40px 20px 0}}
