@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500;1,600&display=swap');

:root { --ink:#173b35; --ink-soft:#55706a; --cream:#f5f2eb; --paper:#fcfbf7; --line:#dfe4dc; --coral:#f06f63; --pink:#f7dcd2; --mint:#dcece4; --yellow:#f8e9bd; --lilac:#e6dded; --lime:#d2ed67; --shadow:0 22px 55px rgba(23,59,53,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--cream); color:var(--ink); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1440px; margin:0 auto; overflow:hidden; background:var(--cream); }
.topbar { height:90px; padding:0 clamp(24px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,59,53,.09); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:20px; letter-spacing:-.04em; }
.brand strong { font-weight:700; }.brand small { font-size:20px; color:var(--coral); font-weight:600; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:var(--ink); background:var(--lime); border-radius:50%; font-size:17px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.install-button { border:0; padding:11px 16px; border-radius:100px; background:var(--ink); color:white; font-size:13px; font-weight:600; }.install-button span { color:var(--lime); font-size:17px; vertical-align:-1px; }.family-button { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:100px; padding:7px 11px 7px 7px; background:var(--paper); color:var(--ink); font-size:11px; font-weight:700; }.family-button-dot { display:grid; place-items:center; width:23px;height:23px;border-radius:50%;background:var(--lime);font-size:12px; }.icon-button,.avatar { border:0; }.icon-button { width:38px;height:38px;border-radius:50%; background:transparent; color:var(--ink); font-size:20px; }.avatar { display:grid; place-items:center; width:38px;height:38px; border-radius:50%; color:var(--ink); font-size:13px; font-weight:700; }.avatar-lime{background:var(--lime)}.avatar-coral{background:var(--coral);color:#fff}.avatar-blue{background:#a9cee0}.avatar-yellow{background:#f2ca67}.avatar-lilac{background:var(--lilac)}
.page-wrap { padding:0 clamp(24px,5vw,72px) 80px; }
.hero-grid { display:grid; grid-template-columns:1fr 330px; align-items:center; gap:60px; padding:90px 0 86px; }.hero-copy { max-width:700px; }.eyebrow { margin:0 0 16px; color:var(--coral); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.14em; font-weight:500; }.pulse-dot { display:inline-block; width:7px;height:7px; margin-right:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px rgba(240,111,99,.12); }.hero-copy h1 { margin:0; font-size:clamp(48px,7vw,91px); line-height:.98; letter-spacing:-.07em; font-weight:600; }.hero-copy h1 em { color:var(--coral); font-family:'Playfair Display',serif; font-weight:500; letter-spacing:-.075em; }.hero-text { max-width:420px; margin:30px 0 28px; color:var(--ink-soft); font-size:16px; line-height:1.55; }.family-presence { display:flex; align-items:center; gap:13px; color:var(--ink-soft); font-size:13px; }.family-presence strong { color:var(--ink); }.presence-stack { display:flex; padding-left:8px; }.presence-stack .avatar { width:27px;height:27px; margin-left:-8px; border:2px solid var(--cream); font-size:10px; }.day-card { min-height:305px; padding:26px; background:var(--ink); color:white; border-radius:23px; box-shadow:var(--shadow); transform:rotate(2deg); }.day-card-top { display:flex; justify-content:space-between; color:var(--lime); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.14em; }.weather { color:#fff; letter-spacing:0; font-family:'DM Sans',sans-serif; }.date-number { margin-top:42px; color:var(--lime); font-size:112px; line-height:.72; letter-spacing:-.09em; }.date-label { margin-top:21px; font-family:'Playfair Display',serif; font-size:21px; }.day-note { display:flex; align-items:flex-start; gap:11px; margin-top:36px; padding-top:15px; border-top:1px solid rgba(255,255,255,.16); color:#c5d0cb; font-size:11px; line-height:1.45; }.day-note strong { color:#fff; font-weight:500; }.note-icon { display:grid;place-items:center; flex:none; width:25px;height:25px; background:var(--coral);color:white;border-radius:50%;font-size:12px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:27px; }.section-heading h2,.pulse-card h2,.moment-card h2 { margin:0; font-size:31px; letter-spacing:-.055em; line-height:1.05; }.signal-count { color:var(--ink-soft); font-size:12px; }.signal-count-heart { color:var(--coral); font-size:17px; vertical-align:-2px; margin-right:5px; }.recipient-row { display:flex; align-items:center; gap:8px; margin-bottom:18px; overflow-x:auto; scrollbar-width:none; }.recipient-row::-webkit-scrollbar{display:none}.recipient-label { margin-right:4px; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.recipient-chip { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid var(--line); background:rgba(252,251,247,.6); padding:6px 11px 6px 6px; border-radius:100px; color:var(--ink-soft); font-size:12px; }.recipient-chip.active { border-color:var(--ink); color:var(--ink); background:var(--paper); }.mini-avatar { display:grid; place-items:center; width:23px;height:23px;border-radius:50%; font-size:10px;font-weight:700; }.remote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.remote-card { padding:21px; border-radius:17px; }.connect-card{background:var(--pink)}.status-card{background:var(--mint)}.family-card{background:var(--yellow)}.card-label { display:flex; align-items:center; gap:8px; margin-bottom:17px; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.13em; }.label-icon { display:grid;place-items:center;width:22px;height:22px;color:var(--ink);background:rgba(255,255,255,.48);border-radius:50%;font-family:'DM Sans',sans-serif;font-size:13px; }.signal-list { display:grid; gap:7px; }.signal-button { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; width:100%; padding:11px 10px; border:1px solid transparent; border-radius:9px; color:var(--ink); text-align:left; transition:transform .15s,background .15s,border-color .15s; }.signal-button:hover,.signal-button:focus-visible { transform:translateX(3px); background:rgba(255,255,255,.5); border-color:rgba(23,59,53,.1); outline:0; }.signal-pink{background:rgba(255,255,255,.32)}.signal-mint{background:rgba(255,255,255,.46)}.signal-yellow{background:rgba(255,255,255,.38)}.signal-emoji { display:grid; place-items:center; width:27px;height:27px;border-radius:50%; background:rgba(255,255,255,.55); font-size:14px; }.signal-button > span:nth-child(2) { font-size:13px; font-weight:600; }.arrow { color:var(--ink-soft); font-size:16px; }.custom-ping { width:100%; margin-top:14px; padding:14px 16px; border:1px dashed #b9c6b7; border-radius:12px; background:transparent; color:var(--ink-soft); text-align:left; font-size:13px; }.custom-ping span { margin-right:8px; font-size:20px; vertical-align:-2px; }.custom-ping small { float:right; margin-top:4px; color:#8aa097; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.family-dialog { position:fixed; z-index:25; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,calc(100% - 32px)); padding:28px; border:0; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 0 0 100vmax rgba(23,59,53,.38),0 25px 70px rgba(23,59,53,.25); }.family-dialog[hidden],.custom-dialog[hidden]{display:none}.family-dialog h2 { margin:0; font-size:32px; letter-spacing:-.06em; }.family-dialog p:not(.eyebrow):not(.dialog-status) { color:var(--ink-soft); font-size:13px; line-height:1.5; }.family-dialog label { display:block; margin:17px 0 7px; color:var(--ink-soft); font-size:12px; }.family-dialog input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); outline:0; }.family-dialog input:focus { border-color:var(--ink); }.family-dialog form .primary-button { margin-top:19px; }.family-dialog-tabs { display:flex; gap:5px; margin-bottom:28px; padding:4px; border-radius:10px; background:var(--cream); }.dialog-tab { flex:1; padding:9px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft); font-size:11px; }.dialog-tab.active { background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(23,59,53,.08); font-weight:700; }.dialog-status { min-height:16px; margin:12px 0 0; color:var(--coral); font-size:11px; }
.lower-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:14px; margin-top:76px; }.pulse-card { padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:20px; }.pulse-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }.pulse-time { color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; }.pulse-intro { max-width:440px; margin:18px 0 24px; color:var(--ink-soft); font-size:14px; line-height:1.5; }.mood-row { display:flex; gap:10px; }.mood-button { display:flex; align-items:center; gap:9px; padding:8px 13px 8px 8px; background:var(--cream); border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); }.mood-button:hover,.mood-button.selected { border-color:var(--ink); color:var(--ink); background:var(--lime); }.mood-button span { font-size:23px; line-height:1; }.mood-button small { font-size:11px; }.pulse-progress { display:flex; align-items:center; gap:14px; margin-top:27px; }.progress-track { flex:1; height:5px; border-radius:5px; background:#e4e9e1; overflow:hidden; }.progress-track span { display:block; width:75%; height:100%; background:var(--coral); border-radius:5px; transition:width .3s; }.pulse-progress > span { white-space:nowrap; color:var(--ink-soft); font-size:11px; }.privacy-note { margin:23px 0 0; color:#8aa097; font-family:'DM Mono',monospace; font-size:10px; }.privacy-note span { color:var(--coral); margin-right:5px; }.moment-card { position:relative; padding:30px; min-height:275px; background:var(--ink); color:white; border-radius:20px; overflow:hidden; }.moment-card:after { content:''; position:absolute; right:-34px; bottom:-52px; width:170px;height:170px; border:1px solid rgba(210,237,103,.4); border-radius:50%; box-shadow:0 0 0 19px rgba(210,237,103,.07),0 0 0 39px rgba(210,237,103,.04); }.moment-top { display:flex; justify-content:space-between; }.moment-card .eyebrow { color:var(--lime); }.moment-star { color:var(--coral); font-size:25px; }.moment-quote { margin-top:25px; color:var(--coral); font-family:'Playfair Display',serif; font-size:51px; line-height:.5; }.moment-card blockquote { position:relative; z-index:1; margin:13px 0 27px; font-family:'Playfair Display',serif; font-size:23px; line-height:1.23; font-style:italic; }.quote-author { position:relative; z-index:2; display:flex; align-items:center; gap:9px; color:#b7c5bf; font-size:11px; }.quote-author .avatar { width:25px;height:25px;font-size:10px; }.quote-heart { margin-left:auto; color:var(--coral); font-size:18px; }
.recent-section { margin-top:76px; }.section-heading.compact { align-items:center; }.text-button { border:0; background:transparent; color:var(--ink-soft); font-size:12px; }.text-button span { color:var(--coral); font-size:16px; margin-left:4px; }.recent-list { border-top:1px solid var(--line); }.recent-item { display:flex; align-items:center; gap:13px; padding:15px 4px; border-bottom:1px solid var(--line); }.recent-icon { display:grid;place-items:center;width:35px;height:35px;border-radius:11px;font-size:15px; }.icon-coral{background:var(--pink);color:var(--coral)}.icon-blue{background:var(--mint);color:#5b9b99}.icon-yellow{background:var(--yellow);color:#b98c18}.recent-item strong,.recent-item small { display:block; }.recent-item strong { font-size:13px; font-weight:600; }.recent-item small { margin-top:3px; color:#8aa097; font-size:11px; }.recent-action { margin-left:auto; padding-right:9px; color:var(--coral); font-size:18px; }.recent-action.muted { color:#8aa097; font-size:15px; }.footer { display:flex; justify-content:space-between; align-items:center; padding:24px clamp(24px,5vw,72px); border-top:1px solid rgba(23,59,53,.09); color:#8aa097; font-size:11px; }.footer span:first-child { color:var(--ink); font-weight:700; }.footer a { color:var(--ink); text-decoration:none; }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:13px 18px; border-radius:100px; background:var(--ink); color:#fff; box-shadow:0 10px 25px rgba(23,59,53,.2); font-size:13px; transition:all .25s; }.toast.show { transform:translate(-50%,0); opacity:1; }.custom-dialog { position:fixed; z-index:25; top:50%; left:50%; transform:translate(-50%,-50%); width:min(420px,calc(100% - 32px)); padding:30px; border:0; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 0 0 100vmax rgba(23,59,53,.38),0 25px 70px rgba(23,59,53,.25); }.dialog-close { position:absolute; top:13px; right:17px; border:0; background:transparent; color:var(--ink-soft); font-size:24px; }.custom-dialog h2 { margin:0; font-size:30px; letter-spacing:-.06em; }.custom-dialog p:not(.eyebrow) { color:var(--ink-soft); font-size:13px; line-height:1.5; }.custom-dialog label { display:block; margin:22px 0 7px; color:var(--ink-soft); font-size:12px; }.custom-dialog input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); outline:0; }.custom-dialog input:focus { border-color:var(--ink); }.primary-button { width:100%; margin-top:12px; padding:13px; border:0; border-radius:10px; background:var(--ink); color:white; font-weight:600; }.primary-button span { float:right; color:var(--lime); }
@media (max-width:760px) { .topbar { height:72px; padding:0 20px; }.brand,.brand small { font-size:18px; }.brand-mark{width:28px;height:28px}.topbar-actions{gap:4px}.install-button{padding:9px 11px;font-size:11px}.family-button{padding-right:7px}.family-button-label{display:none}.family-button #familyButtonLabel{display:none}.icon-button{width:34px}.avatar{width:34px;height:34px}.page-wrap{padding:0 20px 55px}.hero-grid{grid-template-columns:1fr;gap:35px;padding:58px 0 64px}.hero-copy h1{font-size:clamp(51px,15vw,76px)}.hero-text{margin:23px 0}.day-card{min-height:250px;transform:rotate(1deg);padding:23px}.date-number{margin-top:30px;font-size:92px}.day-note{margin-top:30px}.family-connect{margin-bottom:56px;padding:20px}.family-connect > div:not(.family-push-status),#familyLiveView{display:block}.family-connect-actions,.family-live-actions{margin-top:18px;flex-wrap:wrap}.section-heading{display:block}.section-heading h2{font-size:27px}.signal-count{display:block;margin-top:14px}.remote-grid{grid-template-columns:1fr;gap:10px}.remote-card{padding:17px}.signal-list{grid-template-columns:repeat(3,1fr);gap:6px}.signal-button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:86px;gap:5px;padding:10px}.signal-button > span:nth-child(2){font-size:11px;line-height:1.15}.signal-button .arrow{display:none}.signal-emoji{width:25px;height:25px}.custom-ping small{display:none}.lower-grid{grid-template-columns:1fr;margin-top:56px}.pulse-card,.moment-card{padding:23px}.pulse-header{display:block}.pulse-time{display:block;margin-top:12px}.mood-row{justify-content:space-between;gap:5px}.mood-button{flex:1;justify-content:center;padding:8px 5px}.mood-button small{font-size:10px}.pulse-progress{display:block}.progress-track{margin-bottom:10px}.pulse-progress > span{font-size:10px}.recent-section{margin-top:56px}.footer{display:grid;gap:10px;padding:22px 20px}.footer span:nth-child(2){order:3}.footer a{justify-self:start} }
@media (max-width:390px){.install-button{display:none!important}.family-button{display:none}.hero-copy h1{font-size:50px}.signal-list{grid-template-columns:1fr}.signal-button{flex-direction:row;align-items:center;min-height:auto}.signal-button .arrow{display:block;margin-left:auto}.mood-button span{font-size:20px}.mood-button small{display:none}.day-card{min-height:225px}.date-number{font-size:80px}}