:root {
  --canvas: #f6f3ed;
  --paper: #fffdf8;
  --ink: #191a18;
  --muted: #706d66;
  --line: rgba(25, 26, 24, .14);
  --orange: #ff694b;
  --purple: #e8e2ff;
  --shell: 1180px;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.shell { width: min(var(--shell), calc(100% - 56px)); margin-inline: auto; }
.site-header { min-height: 84px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 142px; height: 43px; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; gap: 26px; margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 750; }
.desktop-nav a:hover, .text-link:hover { color: var(--orange); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.language-picker { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.language-picker select { max-width: 118px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 750; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: 15px 20px; cursor: pointer; font-size: 13px; font-weight: 850; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(25, 26, 24, .14); }
.button-dark { color: #fff; background: var(--ink); }.button-dark:hover { background: var(--orange); }.button-light { color: var(--ink); background: var(--paper); }.button-small { padding: 11px 15px; font-size: 12px; }
.hero { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 72px; padding: 78px 0 80px; }
.hero-copy { max-width: 500px; }
.eyebrow { margin: 0 0 16px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { color: var(--ink); letter-spacing: -.07em; } h1, h2 { line-height: .95; }
h1 { max-width: 500px; margin-bottom: 24px; font-size: clamp(54px, 6.5vw, 88px); }
h2 { margin-bottom: 18px; font-size: clamp(40px, 5vw, 66px); }
h3 { margin-bottom: 8px; font-size: 22px; }
.hero-lede, .section-intro > p:last-child, .calendar-band p, .early-access p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.hero-lede { max-width: 460px; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin: 32px 0 27px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 850; }.text-link b { font-size: 18px; font-weight: 400; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 650; }.proof-dots { display: inline-flex; }.proof-dots i { width: 23px; height: 23px; margin-right: -6px; border: 2px solid var(--canvas); border-radius: 50%; background: var(--orange); }.proof-dots i:nth-child(2) { background: #8e7ddd; }.proof-dots i:nth-child(3) { background: #acd69d; }
.dashboard-preview { min-width: 0; overflow: hidden; border: 1px solid rgba(25, 26, 24, .18); border-radius: 14px; background: #20211f; box-shadow: 16px 18px 0 rgba(25, 26, 24, .09); }
.preview-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 15px; color: rgba(255, 253, 248, .74); font-size: 10px; }.preview-bar strong { color: var(--paper); font-size: 11px; }.preview-bar > span:last-child { margin-left: auto; color: rgba(255, 253, 248, .42); text-transform: uppercase; letter-spacing: .12em; }.preview-dots { display: flex; gap: 5px; }.preview-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff694b; }.preview-dots i:nth-child(2) { background: #f4c861; }.preview-dots i:nth-child(3) { background: #9bd193; }
.dashboard-preview iframe { display: block; width: 100%; height: 535px; border: 0; background: #f1f4fb; }
.quiet-proof { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.quiet-proof > div { display: flex; gap: clamp(18px, 4vw, 48px); color: var(--ink); }
.simple-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 145px 0 135px; }.section-intro { max-width: 545px; }.section-intro > p:last-child { max-width: 450px; }
.feature-list { border-top: 1px solid var(--line); }.feature-list article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }.feature-list article > span { color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .1em; }.feature-list p { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.calendar-band { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 105px 0 125px; border-top: 1px solid var(--line); }.calendar-band > div:first-child { max-width: 530px; }.calendar-band p { max-width: 470px; }.calendar-lines { display: grid; gap: 0; border-top: 1px solid var(--line); }.calendar-lines > div { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 19px 0; border-bottom: 1px solid var(--line); }.calendar-lines b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--purple); font-size: 16px; }.calendar-lines > div:nth-child(2) b { background: #ffd89a; }.calendar-lines span { font-size: 14px; font-weight: 800; }.calendar-lines i { color: var(--muted); font-size: 11px; font-style: normal; }
.privacy-line { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; padding: 110px 0 125px; border-top: 1px solid var(--line); }.privacy-line h2 { max-width: 520px; }.privacy-line > p { max-width: 470px; margin-top: 42px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.early-access { display: grid; grid-template-columns: 1fr 285px; gap: 80px; align-items: center; padding: 66px 70px; border-radius: 16px; color: #fff; background: var(--ink); }.early-access .eyebrow, .early-access p, .waitlist-privacy { color: rgba(255, 255, 255, .58); }.early-access h2 { max-width: 500px; color: #fff; }.early-access > div:first-child > p { max-width: 530px; }.waitlist-form { display: flex; gap: 9px; margin: 27px 0 11px; }.waitlist-form input { min-width: 0; flex: 1; padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; outline: 0; color: var(--ink); background: #fff; }.waitlist-form input:focus { box-shadow: 0 0 0 3px rgba(255, 105, 75, .35); }.waitlist-form button { white-space: nowrap; }.waitlist-privacy, .waitlist-message { display: block; font-size: 11px; line-height: 1.45; }.waitlist-message { min-height: 15px; margin-top: 8px; color: #b9e1a7; }.access-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; text-align: center; }.logo-symbol { width: 48px; height: 48px; margin-bottom: 7px; border-radius: 12px; object-fit: cover; object-position: left center; }.access-label { margin-top: 12px; color: rgba(255, 255, 255, .55); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.access-card code { margin-bottom: 12px; color: #e8e2ff; font-size: 12px; }.access-card small { min-height: 15px; color: #b9e1a7; font-size: 10px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 58px 0 30px; color: var(--muted); font-size: 11px; }.site-footer .brand-logo { width: 122px; height: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 960px) { .desktop-nav { display: none; }.header-actions { margin-left: auto; }.hero { grid-template-columns: 1fr; gap: 48px; padding-top: 62px; }.hero-copy { max-width: 650px; }.dashboard-preview iframe { height: 600px; }.simple-section, .calendar-band, .privacy-line { gap: 45px; }.early-access { padding: 52px 42px; } }
@media (max-width: 680px) { .shell { width: min(100% - 34px, var(--shell)); }.site-header { min-height: 72px; }.brand-logo { width: 119px; height: 37px; }.language-picker { display: none; }.header-actions .button-small { padding: 9px 12px; }.hero { padding: 55px 0 60px; }.hero h1 { font-size: 57px; }.hero-lede { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }.dashboard-preview iframe { height: 510px; }.preview-bar > span:last-child { display: none; }.quiet-proof { align-items: flex-start; flex-direction: column; gap: 14px; }.quiet-proof > div { flex-wrap: wrap; gap: 11px 20px; line-height: 1.4; }.simple-section, .calendar-band, .privacy-line, .early-access { display: flex; flex-direction: column; align-items: stretch; }.simple-section { padding: 92px 0; }.calendar-band, .privacy-line { padding: 88px 0; }.privacy-line > p { margin-top: 0; }.early-access { gap: 30px; padding: 42px 25px; }.waitlist-form { align-items: stretch; flex-direction: column; }.waitlist-form .button { width: 100%; }.site-footer { align-items: flex-start; flex-wrap: wrap; padding-top: 45px; }.site-footer > span:nth-child(2) { order: 3; width: 100%; } }

.product-flow{display:grid;grid-template-columns:.7fr 1.3fr;align-items:start;gap:70px;padding:28px 0 62px;border-bottom:1px solid var(--line)}.flow-heading h2{max-width:420px;margin-bottom:0;font-size:clamp(30px,3vw,44px)}.flow-steps{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;gap:13px}.flow-step{display:grid;gap:8px;min-height:145px;padding:19px;border:1px solid var(--line);border-radius:13px;background:rgba(255,253,248,.44);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.flow-step:hover,.flow-step-active{transform:translateY(-3px);background:var(--paper);box-shadow:0 12px 24px rgba(25,26,24,.08)}.flow-step>span{color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.13em}.flow-step strong{font-size:15px;letter-spacing:-.04em}.flow-step small{color:var(--muted);font-size:12px;line-height:1.45}.flow-arrow{color:var(--orange);font-size:19px;text-align:center}.modes-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start;padding:125px 0 135px;border-top:1px solid var(--line)}.modes-copy{max-width:520px}.modes-copy h2{margin-bottom:18px}.modes-copy>p:last-child{max-width:450px;color:var(--muted);font-size:16px;line-height:1.55}.modes-list{border-top:1px solid var(--line)}.mode-row{display:grid;grid-template-columns:42px 1fr 25px;align-items:center;gap:15px;padding:19px 0;border-bottom:1px solid var(--line);transition:padding .18s ease}.mode-row:hover{padding-left:8px}.mode-row-board{background:linear-gradient(90deg,transparent,#fffdf8)}.mode-row-mirror{background:linear-gradient(90deg,transparent,#e8e2ff)}.mode-row-display{background:linear-gradient(90deg,transparent,#e9f3ee)}.mode-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--paper);font-size:18px}.mode-row-mirror .mode-symbol{background:#fff}.mode-row-display .mode-symbol{background:#fff}.mode-row span:nth-child(2){display:grid;gap:5px}.mode-row strong{font-size:15px;letter-spacing:-.04em}.mode-row small{max-width:370px;color:var(--muted);font-size:12px;line-height:1.45}.mode-row>b{color:var(--muted);font-size:18px;font-weight:400;text-align:right}
@media (max-width: 960px){.product-flow,.modes-section{gap:45px}.product-flow{grid-template-columns:1fr;padding-top:20px}.flow-heading h2{max-width:600px}.modes-section{grid-template-columns:1fr}.modes-copy{max-width:650px}}
@media (max-width: 680px){.product-flow{padding:25px 0 52px}.flow-steps{grid-template-columns:1fr;gap:9px}.flow-arrow{display:none}.flow-step{min-height:auto}.modes-section{gap:40px;padding:88px 0}.mode-row{grid-template-columns:36px 1fr 20px}.mode-symbol{width:31px;height:31px;font-size:16px}}

/* A more memorable first impression: center the promise, let the family details float around it, then reveal the real dashboard below. */
.hero{position:relative;display:grid;min-height:680px;place-items:center;overflow:hidden;padding:92px 0 74px;background:radial-gradient(circle at 50% 46%,rgba(214,224,255,.92) 0,rgba(232,226,255,.58) 31%,rgba(246,243,237,0) 72%)}.hero-copy{position:relative;z-index:2;max-width:820px;text-align:center}.hero h1{max-width:820px;margin:0 auto 25px;font-size:clamp(58px,8vw,102px);line-height:.91}.hero-lede{max-width:650px;margin-inline:auto}.hero-actions{justify-content:center}.hero-proof{justify-content:center}.scroll-cue{display:inline-flex;align-items:center;gap:9px;margin-top:52px;color:var(--muted);font-size:12px;font-weight:750}.scroll-cue span:first-child{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;font-size:16px;font-weight:400}.hero-orbit{position:absolute;inset:0;z-index:1;pointer-events:none}.orbit-card{position:absolute;display:flex;align-items:center;gap:10px;min-width:177px;padding:12px 14px;border:1px solid rgba(255,255,255,.95);border-radius:12px;background:rgba(255,253,248,.76);box-shadow:0 16px 34px rgba(75,76,104,.12);text-align:left;transform:rotate(-6deg)}.orbit-card>span:last-child{display:grid;gap:3px}.orbit-card b{font-size:12px;letter-spacing:-.03em}.orbit-card small{color:var(--muted);font-size:10px}.orbit-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-size:16px}.orbit-icon-blue{background:#dce8ff;color:#5e83d4}.orbit-icon-orange{background:#ffe2bf;color:#d77741}.orbit-icon-purple{background:#e8e2ff;color:#8068c6}.orbit-icon-mint{background:#dff3ea;color:#479c80}.orbit-card-left{top:25%;left:3%;}.orbit-card-right{top:24%;right:3%;transform:rotate(7deg)}.orbit-card-bottom-left{bottom:16%;left:13%;transform:rotate(5deg)}.orbit-card-bottom-right{right:12%;bottom:15%;transform:rotate(-5deg)}.quiet-proof{position:relative;z-index:3;background:var(--canvas)}.dashboard-stage{padding:108px 0 125px}.dashboard-stage-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:28px}.dashboard-stage-heading h2{max-width:670px;margin-bottom:0;font-size:clamp(38px,5vw,68px)}.dashboard-stage-heading p:last-child{max-width:560px;margin:17px 0 0;color:var(--muted);font-size:16px;line-height:1.55}.dashboard-stage-heading .text-link{flex:0 0 auto;margin-bottom:8px}.dashboard-stage .dashboard-preview{box-shadow:18px 20px 0 rgba(25,26,24,.11)}.dashboard-stage .dashboard-preview iframe{height:650px}
@media (max-width:960px){.hero{min-height:650px}.orbit-card-left{left:0}.orbit-card-right{right:0}.dashboard-stage-heading{align-items:flex-start;flex-direction:column;gap:24px}.dashboard-stage-heading .text-link{margin-bottom:0}}
@media (max-width:680px){.hero{min-height:650px;padding:68px 0 55px;background:radial-gradient(circle at 50% 45%,rgba(214,224,255,.94) 0,rgba(232,226,255,.55) 40%,rgba(246,243,237,0) 78%)}.hero h1{font-size:clamp(54px,15vw,76px)}.hero-lede{font-size:15px}.scroll-cue{margin-top:35px}.orbit-card{min-width:145px;padding:9px 10px}.orbit-card b{font-size:10px}.orbit-card small{font-size:9px}.orbit-icon{width:25px;height:25px;font-size:13px}.orbit-card-left{top:7%;left:0}.orbit-card-right{top:7%;right:0}.orbit-card-bottom-left{bottom:5%;left:0}.orbit-card-bottom-right{right:0;bottom:5%}.dashboard-stage{padding:82px 0 90px}.dashboard-stage-heading h2{font-size:47px}.dashboard-stage .dashboard-preview iframe{height:510px}}
.hero{grid-template-columns:1fr}

/* Astra simplicity pass: one promise, one action, then the real product. */
.brand-logo { width: 172px; height: 52px; object-fit: cover; object-position: center; }
.hero {
  min-height: 520px;
  padding: 78px 0 60px;
  background: radial-gradient(circle at 50% 44%, rgba(232, 226, 255, .62) 0, rgba(246, 243, 237, 0) 68%);
}
.hero h1 {
  max-width: 760px;
  font-size: clamp(54px, 6.5vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
}
.hero-lede { max-width: 590px; }
.hero-actions { justify-content: center; align-items: center; margin-top: 30px; }
.hero-secondary { border: 1px solid rgba(25, 26, 24, .14); }
.hero-highlights { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-highlight { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .88); border-radius: 9px; background: rgba(255, 253, 248, .56); font-size: 11px; }
.hero-highlight b { color: var(--muted); font-weight: 600; }
.hero-highlight strong { font-weight: 850; }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; color: var(--muted); font-size: 12px; }
.scroll-cue span:first-child { font-size: 20px; line-height: 1; }
.dashboard-stage { padding: 64px 0 110px; }
.dashboard-stage-heading { margin-bottom: 22px; }
.dashboard-stage-heading { display: block; }
.dashboard-stage-heading > div { max-width: 760px; }
.dashboard-stage .dashboard-preview iframe { height: 620px; }

@media (max-width: 680px) {
  .brand-logo { width: 145px; height: 44px; }
  .hero { min-height: 500px; padding: 60px 0 48px; }
  .hero h1 { font-size: clamp(48px, 13vw, 66px); line-height: .98; }
  .hero-actions { align-items: center; flex-direction: column; gap: 14px; }
  .hero-highlights { display: grid; grid-template-columns: 1fr; width: min(100%, 330px); margin-inline: auto; }
  .hero-highlight { justify-content: space-between; }
  .scroll-cue { margin-top: 23px; }
  .dashboard-stage { padding: 66px 0 82px; }
  .dashboard-stage .dashboard-preview iframe { height: 510px; }
}
