/* A small reflection tucked against the room; the illustration never shifts. */
.arrival-art{isolation:isolate;--moment-light:255,203,119}
.hero-support{text-wrap:pretty}
.moment-caption{display:grid;place-items:start center;position:relative;min-height:126px;margin-top:-6px;text-align:center;z-index:4}
.hero-room{position:relative}
.meet-nook{position:absolute;left:75%;top:45%;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:12px;background:transparent;border:0;border-radius:50%;color:#93642d;opacity:.75;transition:opacity .2s;cursor:pointer}
.meet-nook>.sketch{width:20px;height:20px}
.meet-nook:hover,.meet-nook:focus-visible{opacity:1}
[data-theme=evening] .meet-nook{color:#f2c881}
.meet-nook[aria-expanded=true]{visibility:hidden;pointer-events:none}
.hello-note{position:absolute;bottom:8px;width:min(350px,calc(100% - 28px));padding:19px 22px 15px;border:1px solid var(--line-soft);border-radius:20px;background:var(--surface-raised);box-shadow:0 10px 28px #2523310b;color:var(--ink);animation:moment-arrive .25s ease-out}
.hello-eyebrow{font:400 10px/1.5 var(--sans);color:var(--muted);margin:0 14px 10px}
.hello-question{font:400 16px/1.5 var(--sans);letter-spacing:-.02em;max-width:30ch;margin-inline:auto}
.hello-question:focus{outline:none}
.hello-close{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:36px;height:36px;padding:10px;border-radius:50%;background:transparent;color:var(--muted)}
.hello-close:hover{background:var(--surface-soft)}
.moment-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:12px}
.moment-choices:empty{display:none}
.moment-choices button{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-soft);font:400 12px/1.4 var(--sans);transition:border-color .15s,background .15s}
.moment-choices button:hover{border-color:var(--muted);background:var(--surface-raised)}
.moment-again{min-height:36px;margin-top:10px;padding:7px;background:transparent;color:var(--muted);font:400 11px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px}
.moment-again:hover{color:var(--ink)}
.moment-lamp{position:absolute;z-index:3;pointer-events:none;left:35%;top:27.5%;width:36%;height:46%;opacity:0;background:radial-gradient(ellipse at 50% 10%,rgba(var(--moment-light),.65) 0%,rgba(var(--moment-light),.27) 17%,rgba(var(--moment-light),.1) 40%,transparent 70%);mix-blend-mode:soft-light;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent);transition:opacity .6s ease,background .6s ease}
.moment-lamp:before{content:'';position:absolute;left:44%;top:7%;width:9%;height:4%;border-radius:50%;background:rgba(var(--moment-light),.8);box-shadow:0 0 9px 4px rgba(var(--moment-light),.5);filter:blur(1px)}
.arrival-art.is-meeting .moment-lamp{opacity:1}
.arrival-art[data-moment-style=connection]{--moment-light:248,174,154}
.arrival-art[data-moment-style=work]{--moment-light:165,200,246}
.arrival-art[data-moment-style=perspective]{--moment-light:200,180,246}
[data-theme=evening] .moment-lamp{mix-blend-mode:screen;opacity:0}
[data-theme=evening] .arrival-art.is-meeting .moment-lamp{opacity:.6}
.hero-room .room picture,.hero-room .evening-layer{-webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 50%,#000 0 72%,transparent 100%);mask-image:radial-gradient(ellipse 52% 60% at 50% 50%,#000 0 72%,transparent 100%)}
@keyframes moment-arrive{from{opacity:0}to{opacity:1}}
@media(min-width:1101px){.arrival{grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:20px}.arrival h1{font-size:78px;line-height:.99;letter-spacing:-.038em}.arrival-art{width:108%;max-width:none;margin-left:-2%;margin-right:-6%}.hero-support{max-width:36ch}}
@media(max-width:767px){.arrival-art{width:105%;max-width:none;margin:29px -2.5% 0}.moment-caption{min-height:132px;margin-top:-6px}.hello-note{padding:18px 18px 13px}.hello-question{font-size:15px}.meet-nook{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hello-note{animation:none}.moment-lamp,.meet-nook{transition:none}}

:root:not([data-theme=evening]){--ink:#2e2c33;--muted:#69656d;--rule:#ddd9df}

@media(max-width:359px){.call-stage:before{inset:0 0 -8%}}

/* The first product beat has its own scale; later chapters can speak quietly. */
@media(min-width:1101px){.call-beat .chapter-copy h2{font-size:65px;letter-spacing:-.035em}.call-beat .chapter-copy>p{font-size:18px;line-height:1.7}.call-beat .chapter-copy{padding-bottom:55px}}

/* Begin each incoming call cleanly, without a faded view of the previous note. */
.call-stage.is-running[data-phase=ring] :is(.daily-screen,.ring-screen){transition:none}

/* App interfaces use the readable sans face; editorial headings keep the title face. */
.device-screen,.memory-story,.history-demo,.hello-note{--serif:var(--sans)}
.device-screen .app-title-row h3,.history-demo .app-title-row h3{font:500 25px/1.2 var(--sans);letter-spacing:-.035em}
.device-screen .entry-date strong{font:500 26px/1 var(--sans)}
.device-screen .voice-line{font:400 17px/1.4 var(--sans);letter-spacing:-.02em}
.device-screen .daily-reflection p{font:400 18px/1.4 var(--sans);letter-spacing:-.015em}
.memory-origin .spoken-detail>p{font:400 22px/1.4 var(--sans);letter-spacing:-.025em}
.memory-origin .named-memory h3{font:500 19px/1.35 var(--sans);letter-spacing:-.02em}
.memory-story .follow-question p{font:400 22px/1.4 var(--sans);letter-spacing:-.025em}
.week-observation h3{font:500 21px/1.35 var(--sans);letter-spacing:-.025em}
.sketch{width:20px;height:20px;flex-shrink:0}
.site-header .header-light .switch-plate{width:52px;flex-basis:52px}
.site-header .switch-rocker{left:10px}
.daily-lines p{padding-left:18px}
.daily-lines .sketch{position:absolute;width:14px;height:14px;left:-2px;top:5px;color:var(--ui-muted)}
.memory-check .sketch{width:20px;height:20px}
.plan li{display:flex;align-items:flex-start;gap:12px}
.plan li .sketch{width:17px;height:17px;margin-top:4px;color:var(--chart-highlight)}
.rhythm-marks>span .sketch{width:23px;height:23px}
.hello-close{display:grid;place-items:center}
.hello-close .sketch{width:17px;height:17px}
@media(max-width:767px){.memory-origin .spoken-detail>p,.memory-story .follow-question p{font-size:20px}.week-observation h3{font-size:21px}}

/* Two call excerpts: the people carry the story; remembering stays implicit. */
.memory-conversation{gap:28px;align-items:start;text-align:left}
.memory-call{width:100%;min-width:0;padding:24px;border:1px solid var(--line-soft);border-radius:22px;background:var(--surface-raised)}
.memory-call-date{font:400 12px/1.5 var(--sans);color:var(--muted);margin-bottom:22px}
.memory-turn{max-width:92%;font:400 18px/1.5 var(--sans);letter-spacing:-.015em}
.memory-turn+.memory-turn{margin-top:24px}
.memory-speaker{display:flex;align-items:center;gap:8px;font:400 11px/1.4 var(--sans);letter-spacing:0;color:var(--muted);margin-bottom:8px}
.memory-speaker>.flat-nook,.person-avatar{width:27px;height:27px;flex-shrink:0}
.person-avatar{display:grid;place-items:center;border-radius:50%;background:var(--surface-soft);color:var(--muted);border:1px solid var(--line-soft)}
.person-avatar .sketch{width:19px;height:19px}
.from-you{margin-left:auto}
.from-you .memory-speaker{justify-content:flex-end}
.from-you>p{padding:13px 16px;background:var(--surface-soft);border-radius:16px 3px 16px 16px}
.from-nook>p{padding-left:35px}
@media(max-width:767px){.memory-conversation{gap:20px}.memory-call{padding:22px}.memory-turn{font-size:17px;max-width:94%}}
@media(max-width:359px){.memory-call{padding:18px}.memory-turn{max-width:100%;font-size:16px}.from-you>p{padding:12px 14px}}

/* A pair of small follow-ups makes the sample chat explorable. */
.history-demo .history-question{min-height:88px;display:flex;align-items:center}
.history-demo .history-answer{min-height:132px}
.chat-reset{cursor:pointer;min-height:36px}
.chat-suggestions{margin-top:20px}
.chat-suggestions>p{font:400 10px/1.5 var(--sans);color:var(--muted);margin-bottom:8px}
.chat-suggestions>div{display:flex;flex-wrap:wrap;gap:7px}
.chat-suggestions button{padding:9px 12px;min-height:40px;border:1px solid var(--line-soft);border-radius:18px;background:var(--surface-raised);font:400 12px/1.4 var(--sans);color:var(--ink);transition:border-color .15s,background .15s}
.chat-suggestions button:hover,.chat-suggestions button[aria-pressed=true]{border-color:var(--muted);background:var(--surface-soft)}
@media(max-width:767px){.history-demo .history-question{min-height:80px}.history-demo .history-answer{min-height:157px}.chat-suggestions button{font-size:11px;padding-inline:10px}}
@media(max-width:359px){.history-demo .history-answer{min-height:190px}.chat-suggestions button{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.chat-suggestions button{transition:none}}

.hello-question.is-result{font:500 21px/1.3 var(--sans);letter-spacing:-.025em}
.moment-description{margin:10px auto 0;max-width:32ch;font:400 13px/1.55 var(--sans);color:var(--muted)}

.chart-measure{font:400 12px/1.5 var(--sans);color:var(--muted);margin-bottom:16px}
.chart-axis-labels text{font:14px var(--sans);fill:var(--muted)}
.sleep-observation .chart-key{max-width:none}
.sleep-observation .chart-insight{white-space:normal;font-size:15px}

.sleep-observation .chart-key+.chart-key{margin-top:6px}
.chart-key i.other-morning{background:var(--chart-point)}

/* Concrete example values make each weekly chart readable without guessing. */
.sleep-target{fill:none;stroke:var(--chart-highlight);stroke-width:1;stroke-dasharray:4 5;opacity:.55}
.sleep-values text{font:500 14px var(--sans);fill:var(--ink);text-anchor:middle}
.sleep-observation .chart-key i.goal-line-key{width:18px;height:0;border-radius:0;background:none;border-top:1px dashed var(--chart-highlight)}
.walking-measure{margin-top:24px;margin-bottom:0}
.walking-progress{display:flex;justify-content:space-between;gap:8px;margin-top:20px;padding-block:8px 3px}
.walking-day{display:flex;flex:1;align-items:center;flex-direction:column;gap:17px}
.walk-count{font:400 12px/1 var(--sans);color:var(--muted)}
.walk-dots{display:flex;flex-direction:column;gap:12px}
.walk-dots i{width:13px;height:13px;border:1px solid var(--line-soft);border-radius:50%;background:transparent}
.walk-dots i.completed{background:var(--chart-highlight);border-color:var(--chart-highlight)}
.walking-day small{font:400 12px/1 var(--sans);color:var(--muted)}
.movement-observation .chart-key{max-width:none}
@media(max-width:767px){.walking-measure{margin-top:20px}.walking-progress{gap:5px}.walking-day small,.walk-count{font-size:11px}}

.call-beat .chapter-copy>.call-focus-options{font:400 14px/1.7 var(--sans);color:var(--muted);margin-top:22px;max-width:42ch}
@media(max-width:767px){.call-beat .chapter-copy>p{max-width:38ch}.call-beat .chapter-copy>.call-focus-options{margin-top:16px}}

/* Match the conversation sections: explanation left, example right. */
.memory-beat .memory-conversation{display:flex;flex-direction:column;gap:20px;padding:0;min-height:0;width:100%}
.memory-beat .chapter-copy>p,.ask-beat .chapter-copy>p{font:400 16px/1.7 var(--sans);color:var(--muted);max-width:34ch;margin-top:20px}
@media(min-width:768px){
 .memory-beat{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:40px;align-items:center}
 .memory-beat .chapter-copy{margin:0;padding:0;grid-column:1;grid-row:1}
 .memory-beat .memory-conversation{grid-column:2;grid-row:1}
 .memory-beat .chapter-copy h2{font-size:42px;max-width:330px}
 .memory-call{padding:24px}
}
@media(max-width:767px){
 .memory-beat .chapter-copy>p,.ask-beat .chapter-copy>p{margin-top:16px}
}

/* Lead with the takeaway, then align the two plots and their keys. */
.week-observation{display:grid;grid-template-rows:auto auto 190px auto;align-content:start}
.week-observation .chart-insight{margin:8px 0 0;max-width:none;white-space:normal;font:400 15px/1.6 var(--sans)}
.week-observation .insight-chart,.week-observation .walking-progress{height:170px;margin:20px 0 0;padding:0}
.week-observation .insight-chart svg{height:100%;width:100%}
.week-observation .walking-day{justify-content:space-between;gap:0;padding:8px 0 6px}
.week-observation .walk-dots{gap:17px}
.week-observation .chart-key{margin-top:14px;max-width:none}
@media(min-width:768px){.week-observation{grid-template-rows:auto 60px 190px auto}}

.first-call-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:15px 24px;border:1px solid #242329;border-radius:999px;background:#242329;color:#fffdf8;font:500 16px/1.4 var(--sans);text-decoration:none;box-shadow:none;transition:background-color .22s ease,border-color .22s ease,color .22s ease}
.first-call-cta:hover{background:#38363d}
.first-call-cta .sketch{width:20px;height:20px}
.arrival .download-block>span{font:400 12px/1.5 var(--sans);color:var(--muted)}

/* A shared week: time spent and the small starts behind it. */
.project-bars,.project-starts{height:170px;margin-top:20px}
.project-bars{display:flex;gap:12px;justify-content:space-between}
.project-day{display:flex;flex:1;min-width:0;flex-direction:column;gap:12px;text-align:center}
.project-bar-space{height:140px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line-soft);padding-bottom:1px}
.project-bar{position:relative;width:min(100%,30px);height:calc(var(--minutes)*5px);border-radius:7px 7px 2px 2px;background:var(--chart-highlight)}
.project-bar.empty{height:2px;background:var(--line-soft)}
.project-bar b{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);font:400 12px/1 var(--sans);color:var(--muted)}
.project-day small{font:400 12px/1 var(--sans);color:var(--muted)}
.project-starts{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.project-starts>div{display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-raised)}
.project-starts span{font:400 12px/1.4 var(--sans);color:var(--muted);width:24px;flex-shrink:0}
.project-starts p{font:400 14px/1.4 var(--sans);color:var(--ink)}
.week-observation.project-time,.week-observation.project-pattern{grid-template-rows:auto auto 190px auto}
@media(max-width:767px){.week-observation.project-time,.week-observation.project-pattern{grid-template-rows:auto auto 190px auto}.project-bars{gap:8px}}

/* One heading scale across the three conversation sections. */
.call-beat .chapter-copy h2,.memory-beat .chapter-copy h2,.ask-beat .chapter-copy h2{font-size:42px;line-height:1.12;letter-spacing:-.022em}
@media(max-width:767px){.call-beat .chapter-copy h2,.memory-beat .chapter-copy h2,.ask-beat .chapter-copy h2{font-size:36px;line-height:1.13}}

.header-download .first-call-cta{min-height:44px;padding:11px 18px;font-size:14px;gap:12px}

.history-demo .history-question{min-height:var(--chat-question-height,88px)}
.history-demo .history-answer{min-height:var(--chat-answer-height,132px);align-content:start}
.history-demo{transform:none;transition:background .85s,color .85s,border-color .85s,box-shadow .85s,opacity .7s}

/* Give call controls a comfortable inset from the phone bezel. */
.device-screen .voice-screen{padding-bottom:42px}
.device-screen .voice-line{margin-top:14px}
.device-screen .voice-line{transition:opacity .28s ease,transform .28s ease}
.voice-wave,.voice-actions{flex-shrink:0}

/* Keep editorial copy outside the weekly UI, like the other sections. */
.week-beat>.weekly-intro{margin-bottom:30px}
.week-beat .week-editorial{border:1px solid var(--line-soft);border-radius:24px}
.week-beat .week-observations{margin-top:0}
.weekly-intro .chapter-copy h2{font-size:42px;line-height:1.12;letter-spacing:-.022em;max-width:none}
@media(max-width:767px){.week-beat>.weekly-intro{margin-bottom:24px}.weekly-intro .chapter-copy h2{font-size:36px;line-height:1.13}.week-beat .week-editorial{border-radius:22px}}
@media(min-width:768px){
 .week-beat .week-observations{grid-template-rows:auto auto 190px auto;row-gap:0}
 .week-beat .week-observation{grid-row:span 4;grid-template-rows:subgrid}
}

[data-theme=evening] .first-call-cta{background:#fffdf8;border-color:#fffdf8;color:#242329}
[data-theme=evening] .first-call-cta:hover{background:#e9e7ed;border-color:#e9e7ed}

/* Shared page edges for every section, including wide desktop layouts. */
.wrap.wrap{width:min(1120px,calc(100% - 96px));max-width:1120px;margin-inline:auto;padding-inline:0}
@media(min-width:768px){.arrival{min-height:calc(100svh - 112px)}}
@media(max-width:1100px){.wrap.wrap{width:calc(100% - 64px)}}
@media(max-width:767px){.wrap.wrap{width:calc(100% - 40px)}}
@media(max-width:359px){.wrap.wrap{width:calc(100% - 32px)}}
.room-epilogue{padding-inline:0}
.site-header .header-light .switch-label{left:0;min-width:0;max-width:1px;width:1px;clip-path:inset(50%)}

/* On desktop the room switch lives with the actions, leaving the wordmark clear. */
@media(min-width:1101px){
 .site-header nav{margin-left:auto}
 .site-header .header-light{order:4;margin:0 0 0 -8px}
}

/* The selected date matches the Thursday 13 entry shown beneath it. */
.daily-screen .app-week>span:nth-child(4) b{background:var(--ink);border-color:var(--ink);color:var(--inverse)}
.daily-screen .app-week>span:nth-child(5) b,.daily-screen .app-week>span:nth-child(6) b{background:transparent;border-color:var(--line-soft);color:var(--ink)}

.project-bar:is(button){padding:0;overflow:visible;cursor:pointer;isolation:isolate}
.project-bar:is(button):after{content:'';position:absolute;inset:-8px;min-width:44px;left:50%;transform:translateX(-50%)}
.project-bar.is-highlighted{background:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--chart-highlight) 20%,transparent)}
.project-starts>div.is-highlighted{border-color:var(--chart-highlight);background:color-mix(in srgb,var(--chart-highlight) 16%,var(--surface-raised));box-shadow:inset 3px 0 0 var(--chart-highlight)}

/* Desktop opens inside Nook's full room; tablet and phone keep the compact hero. */
@media(min-width:1101px){
 .arrival.wrap{width:min(1320px,calc(100% - 96px));max-width:1320px}
 .arrival{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;min-height:calc(100svh - 112px);padding:24px 0 28px}
 .arrival-copy{text-align:center}
 .arrival h1{font-size:clamp(64px,5.25vw,80px);line-height:.99;letter-spacing:-.038em;white-space:nowrap}
 .arrival h1 br{display:none}
 .arrival .hero-support{max-width:72ch;margin:18px auto 0;font-size:19px}
 .arrival .download-block{align-items:center;margin-top:16px}
 .arrival-art{width:min(1200px,100%,calc(192svh - 700px));max-width:none;align-self:center;flex:none;margin:8px auto 0}
 .hero-room .room{aspect-ratio:1672/941}
 .hero-room .room picture,.hero-room .evening-layer{-webkit-mask-image:none;mask-image:none}
 .hero-room .room picture,.hero-room .room picture img,.hero-room .evening-layer img{width:100%;height:100%}
 .hero-room .room picture img,.hero-room .evening-layer img{object-fit:contain}
 [data-theme=evening] .hero-room .evening-layer{mix-blend-mode:normal}
}
.project-bar:focus-visible{outline:2px solid var(--ink);outline-offset:5px}

.call-beat .chapter-copy>p{font:400 16px/1.7 var(--sans);color:var(--muted)}






/* Pricing as two distinct cards within the shared page grid. */
.pricing{padding-block:32px}
.pricing .plans{gap:24px;border:0;align-items:stretch}
.pricing .plan{padding:32px;border:1px solid var(--line-soft);border-radius:24px;background:var(--surface-raised);box-shadow:0 8px 24px #24232904;display:flex;flex-direction:column}
.pricing .plan.premium{background:linear-gradient(145deg,var(--surface-soft),var(--surface) 72%);border-color:var(--line-soft);box-shadow:0 24px 46px -33px var(--surface-shadow),inset 0 1px 0 var(--surface-shine)}
.pricing .plan .meta{font-weight:500}
.pricing .plan-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:44px;margin-top:28px;padding:10px 18px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font:500 14px/1.4 var(--sans);text-decoration:none;transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.pricing .plan-cta:hover{background:var(--surface-soft);transform:translateY(-2px)}
.pricing .plan-cta.premium-cta{background:var(--ink);color:var(--inverse)}
.pricing .plan-cta.premium-cta:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper));border-color:color-mix(in srgb,var(--ink) 86%,var(--paper))}
@media(max-width:767px){.pricing{padding-block:20px}.pricing .plans{grid-template-columns:1fr;gap:16px}.pricing .plan{padding:26px;border-radius:22px}.pricing .plan h3 span{display:inline;margin-left:8px}}