.product-preview-real{display:block;max-width:1056px;background:#fff;text-align:left;overflow:hidden;border:1px solid #dce0e6;border-radius:18px;box-shadow:0 30px 65px -25px #27344b30}.real-topbar{display:flex;align-items:center;gap:18px;padding:17px 24px;border-bottom:1px solid #e5e5e9}.real-topbar>div{flex:1}.real-topbar h2{font-family:Outfit,Inter,sans-serif;font-size:20px;font-weight:650;letter-spacing:-.025em;line-height:1.2}.real-topbar p{font-family:Inter,sans-serif;font-size:10px;color:#777b82;margin:4px 0 0}.real-menu,.real-search{display:flex;color:#34383f}.real-example{font-size:9px;color:#8b909a;border:1px solid #e8ebef;padding:4px 7px;border-radius:4px}.real-new{display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:9px;color:white;background:#0071e3;font-size:11px;font-weight:550;box-shadow:0 3px 10px #0071e31a}.real-new b{font-size:20px;line-height:1;font-weight:400}.real-body{display:grid;grid-template-columns:170px minmax(0,1fr)}.real-rail{background:#f5f5f7;border-right:1px solid #e5e5e9;padding:20px 10px 18px;display:flex;flex-direction:column;gap:3px}.real-brand{display:flex;justify-content:space-between;align-items:center;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;margin:3px 10px 20px}.real-brand>span{color:#8e929a}.real-rail>small{font-size:8px;letter-spacing:.08em;color:#8a8d95;margin:17px 10px 5px}.real-nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;color:#717680;font-size:10px;white-space:nowrap;min-height:33px}.real-nav-item svg{height:15px;width:15px;flex:none}.real-nav-active{background:white;color:#0071e3;border-radius:8px;box-shadow:0 2px 3px #00000005}.real-count{margin-left:auto;border-radius:50%;background:#eab029;color:#fff;width:14px;height:14px;line-height:14px;text-align:center;font-size:10px;font-weight:600}.real-count.red-count{background:#f35d62}.real-count-neutral{margin-left:auto;color:#85868e;font-size:10px}.real-pole-dot{width:8px;height:8px;border-radius:50%;background:#315da6;margin-left:3px;margin-right:4px}.real-content{padding:25px 30px 28px;min-width:0}.real-view-switch{display:inline-flex;padding:3px;gap:2px;background:#f5f5f7;border-radius:8px;margin-bottom:22px;font-family:Inter,sans-serif;font-size:10px;align-items:center}.real-view-switch strong{background:white;border-radius:6px;box-shadow:0 2px 3px #00000009;padding:10px;font-weight:550}.real-view-switch>span{color:#777d86;padding:10px}.real-brief{background:#202a3a;border:1px solid #303d50;border-radius:14px;padding:20px;color:#fff}.real-brief-title{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.real-brief-title h3{font-family:Outfit,Inter,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.025em;color:#fff}.real-brief-title>span{font-size:9px;color:#bbc9de}.real-brief-row{display:flex;align-items:center;gap:9px;border-radius:10px;background:#ffffff1a;padding:9px 11px;min-height:39px;margin-top:7px}.real-brief-row i{width:8px;height:8px;background:#ff8b8b;border-radius:50%;flex:none}.real-brief-row i.real-amber{background:#ffc533}.real-brief-row i.real-ice{background:#bee2f4}.real-brief-row p{flex:1;font-family:Inter,sans-serif;font-size:11px;line-height:1.45;font-weight:500;color:#fff;margin:0}.real-brief-row>span{font-size:9px;padding:5px 10px;border:1px solid #61718b;border-radius:7px;background:#34445c;color:#e0ecff}.real-add-task{margin:16px 0 12px;background:#f5f5f7;border:1px solid #eeeeef;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:center;gap:6px;color:#40444a;font-size:11px}.real-add-task>b{font-weight:400}.real-task-heading{margin-top:22px;display:flex;align-items:center;gap:8px;font-family:Inter,sans-serif;font-size:9px;color:#969aa2;margin-bottom:7px}.real-task-heading strong{background:#0071e3;color:#fff;font-size:9px;font-weight:600;border-radius:6px;padding:6px 8px}.real-task-heading i{flex:1;height:1px;background:#e5e5e9}.real-task{display:flex;align-items:center;gap:10px;border:1px solid #d2e5ed;border-radius:12px;background:#f1fafd;padding:12px;font-family:Inter,sans-serif}.real-check{height:14px;width:14px;border-radius:50%;background:#fff;border:1px solid #cadce5;flex:none}.real-task>div{flex:1;min-width:0}.real-task p{font-size:10px;line-height:1.55;margin:0 0 6px;color:#404a51}.real-project-tag{display:inline-block;font-size:9px;background:#e3f5fb;color:#298cae;border-radius:5px;padding:3px 6px}.real-late{font-size:8px;background:#fbe7e8;color:#d1686c;border-radius:5px;padding:3px 5px;white-space:nowrap;align-self:flex-start}.real-status{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #e5e5e9;background:#f5f5f7;padding:7px 13px;color:#989ca4;font-size:8px}.real-status i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#d5ac28;margin-right:4px}.real-bottom-nav{display:none}
@media(max-width:800px){.real-body{grid-template-columns:145px minmax(0,1fr)}.real-content{padding:22px}.real-brief{padding:17px}.real-brief-row p{font-size:10px}.real-brief-title h3{font-size:18px}.real-topbar{padding:15px 18px}.real-late{display:none}}
@media(max-width:600px){.product-preview-real{border-radius:16px;max-width:380px;margin-top:40px}.real-topbar{gap:12px;padding:15px}.real-menu,.real-rail,.real-new>span,.real-status,.real-example{display:none}.real-new{padding:0;justify-content:center;width:35px;height:35px;border-radius:50%;flex:none}.real-new b{font-size:25px}.real-topbar h2{font-size:21px}.real-topbar p{font-size:9px}.real-search svg{width:17px;height:17px}.real-body{display:block}.real-content{padding:17px 15px 20px}.real-view-switch{margin-bottom:18px;font-size:9px}.real-view-switch strong,.real-view-switch>span{padding:9px}.real-brief{padding:15px;border-radius:13px}.real-brief-title{gap:4px;margin-bottom:13px;align-items:flex-start;flex-direction:column}.real-brief-title h3{font-size:21px}.real-brief-title>span{font-size:8px}.real-brief-row{padding:9px 8px;gap:7px;border-radius:9px}.real-brief-row p{font-size:10px;font-weight:500;line-height:1.5}.real-brief-row>span{font-size:8px;padding:5px 7px}.real-brief-row i{width:7px;height:7px}.real-add-task{font-size:9px;padding:9px;margin:14px 0 12px}.real-task-heading{font-size:8px;gap:6px}.real-task-heading strong{font-size:8px}.real-task{padding:10px;gap:9px}.real-task p{font-size:10px}.real-project-tag{font-size:8px}.real-bottom-nav{display:flex;justify-content:space-around;border-top:1px solid #e5e5e9;padding:9px 5px;background:#fff}.real-bottom-nav>span{display:flex;align-items:center;flex-direction:column;gap:4px;color:#8b9098;flex:1}.real-bottom-nav .selected{color:#0071e3}.real-bottom-nav small{font-size:8px}.real-bottom-nav svg{width:17px;height:17px}}

.works-with{flex-wrap:wrap;max-width:960px;margin-inline:auto;row-gap:14px}.works-with span{white-space:nowrap}
.phone-example{width:320px;max-width:100%;padding:24px 16px 0;border-radius:42px;background:#fff;overflow:hidden;border:7px solid #20242b;box-shadow:0 30px 80px #18243b20;text-align:left}.phone-app-head{display:flex;align-items:center;gap:14px;margin:22px 0}.phone-app-head h3{font-size:23px;font-weight:750;flex:1;margin:0}.phone-search{font-size:25px;color:#52647b}.phone-create{display:grid;place-items:center;width:34px;height:34px;background:#0071e3;color:#fff;border-radius:50%;font-size:25px}.phone-view-tabs{display:flex;gap:16px;font-size:10px;margin:0 0 18px;background:#f5f5f7;border-radius:8px;padding:5px;width:fit-content;align-items:center}.phone-view-tabs b{padding:7px;background:white;border-radius:5px}.phone-view-tabs>span{padding-right:8px;color:#667085}.phone-brief{background:#202a3a;color:#fff;border-radius:13px;padding:14px}.phone-brief>strong{font-family:Outfit,sans-serif;font-size:17px;font-weight:700}.phone-brief>small{display:block;color:#b8c7dc;font-size:9px;margin:4px 0 14px}.phone-brief p{display:flex;align-items:center;gap:6px;padding:9px 7px;margin:6px 0;background:#ffffff14;border-radius:7px;font-size:9px;line-height:1.5;color:#fff}.phone-brief p>span{flex:1}.phone-brief i{width:5px;height:5px;border-radius:50%;background:#fb8e99;flex:none}.phone-brief p>b{font-size:8px;color:#d8e9ff;border:1px solid #53667f;border-radius:4px;padding:3px}.phone-add-task{border:1px solid #e8eaf0;border-radius:9px;color:#6c7888;font-size:10px;margin:20px 0;padding:12px}.phone-task-label{font-size:9px;letter-spacing:.06em;font-weight:600;margin:18px 0;color:#6c7888}.phone-task-label span{float:right}.phone-example .phone-task{line-height:1.6;padding-bottom:28px}.phone-example .real-bottom-nav{display:flex;position:static;margin:0 -16px;padding:12px 8px 22px;border-top:1px solid #e9edf3;background:#fff;justify-content:space-around}.phone-example .real-bottom-nav>span{display:flex;align-items:center;flex-direction:column;gap:4px;color:#748093}.phone-example .real-bottom-nav .selected{color:#0071e3}.phone-example .real-bottom-nav small{font-size:8px}

/* Spacing after the briefing and compact add buttons, matching the app. */
.real-new{width:40px;height:40px;min-width:40px;flex:none;padding:0;gap:0;justify-content:center;border-radius:12px}
.phone-create{flex:none;border-radius:11px}
@media(max-width:760px){.real-new{width:35px;height:35px;min-width:35px;border-radius:11px}.real-task-heading{margin-top:18px}}

/* Balanced circular add control in the desktop and phone previews. */
.real-new,.phone-create{display:grid;place-items:center;width:40px;height:40px;min-width:40px;flex:none;padding:0;border-radius:50%;font-family:Inter,sans-serif;font-size:26px;font-weight:700;line-height:1}
.real-new b{display:block;font-size:26px;font-weight:700;line-height:1}
@media(max-width:760px){.real-new,.phone-create{width:36px;height:36px;min-width:36px}.real-new b,.phone-create{font-size:24px}}

/* Main workspace preview: full-height navigation, calendar and daily briefing. */
.real-main-preview{display:grid;grid-template-columns:160px minmax(0,1fr);grid-template-rows:auto 1fr;max-width:1180px}
.real-main-preview>.real-rail{grid-column:1;grid-row:1/3;padding-top:22px}.real-main-preview>.real-topbar{grid-column:2;grid-row:1;padding:16px 20px;min-width:0}.real-main-preview .real-brand{font-family:Outfit,Inter,sans-serif;font-size:28px;letter-spacing:-.055em;font-weight:750;color:#20232a;margin-bottom:22px}.real-main-preview .real-brand>span{font-family:Inter,sans-serif;font-size:15px;font-weight:400;letter-spacing:0}.real-main-preview .real-assistant{background:#e8eaff;color:#4b57b5;border:1px solid #d2d7fa;border-radius:9px;margin:8px 0}.real-main-preview .real-nav-item{font-size:10px;min-height:35px}.real-main-preview .real-rail>small{margin-top:17px}.real-profile{margin-top:auto;display:flex;gap:8px;align-items:center;padding:22px 10px 0;font-size:10px}.real-profile>b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:white;border:1px solid #e4e6ec;font-size:9px;font-weight:500}.real-profile small{display:block;font-size:8px;color:#858b98;margin-top:3px}
.real-main-workspace{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-width:0}.real-main-preview .real-content{border-left:1px solid #e5e5e9;padding:20px 18px;min-width:0}.real-main-preview .real-view-switch{display:flex;margin-bottom:18px}.real-main-preview .real-view-switch>*{text-align:center;flex:1}.real-main-preview .real-brief{padding:16px 12px}.real-main-preview .real-brief-title{gap:5px}.real-main-preview .real-brief-title h3{font-size:18px}.real-main-preview .real-brief-row{padding:9px 8px;gap:7px}.real-main-preview .real-brief-row p{font-size:10px}.real-main-preview .real-brief-row>span{padding:4px 6px;font-size:8px}.real-main-preview .real-late{display:none}.real-main-preview .real-task-heading>span{font-size:8px}
.preview-calendar{padding:22px 18px 40px;min-width:0;font-family:Inter,sans-serif;color:#232631}.preview-calendar-toolbar{display:flex;align-items:center;gap:12px}.preview-calendar-toolbar>strong{font-size:15px;letter-spacing:-.025em}.preview-arrow{display:grid;place-items:center;width:27px;height:27px;border:1px solid #e4e6ec;border-radius:50%;font-size:22px;line-height:1}.preview-period{display:flex;align-items:center;gap:4px;border-radius:20px;padding:3px;background:#f5f5f7;margin:18px 0 14px;width:fit-content;font-size:10px}.preview-period>*{padding:6px 12px;font-weight:400}.preview-period>b{background:white;border-radius:18px;box-shadow:0 1px 3px #0001;font-weight:600}.preview-filters{display:flex;align-items:center;gap:12px;background:#f5f5f7;border-radius:18px;padding:4px;font-size:9px;white-space:nowrap}.preview-filters b{border-radius:18px;background:white;padding:7px 10px;font-weight:600}.preview-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:20px}.preview-week>div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;border-right:1px solid #e5e8ee}.preview-week>div:last-child{border:0}.preview-week small{font-size:8px;font-weight:500;color:#667085}.preview-week b{font-size:12px;font-weight:500;display:grid;place-items:center;width:24px;height:24px}.preview-today{background:#eaf5fc}.preview-today small{color:#0071e3}.preview-today b{background:#0071e3;color:white;border-radius:50%}.preview-projects{background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / 7 - 1px),#e5e8ee calc(100% / 7 - 1px),#e5e8ee calc(100% / 7));padding-top:12px}.preview-team{display:block;font-size:9px;letter-spacing:.07em;color:#757b86;font-weight:650;background:#fff;padding:5px 0;margin-bottom:8px}.preview-team:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#df9400;margin-right:8px}.preview-blue:before{background:#315da6}.preview-project{border-radius:14px;padding:12px 14px;margin-bottom:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px}.preview-project strong{grid-column:1;grid-row:1;font-size:12px;font-weight:650;line-height:1.45}.preview-project>span{grid-column:1;grid-row:2;font-size:10px;line-height:1.4}.preview-project>small{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:9px;line-height:1.4;white-space:nowrap;background:#ffffff80;border-radius:8px;padding:4px 6px}.preview-project:not(:has(>span))>small{grid-row:1}.preview-marketing{background:#fcf2e1;color:#3e3522}.preview-marketing>span{color:#c58717}.preview-direction{background:#e8edf7;color:#263449}.preview-direction>span{color:#426fb1}
@media(max-width:1000px) and (min-width:601px){.real-main-preview{grid-template-columns:138px minmax(0,1fr)}.real-main-workspace{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}.preview-calendar{padding:18px 12px}.real-main-preview .real-content{padding:18px 12px}.preview-filters{gap:6px;font-size:8px}.preview-filters b{padding:6px}.preview-project{gap:5px 8px;padding:11px 12px}.preview-project strong{font-size:11px}.real-main-preview .real-brief-row>span{display:none}}
@media(max-width:600px){.real-main-preview{display:block;max-width:390px}.real-main-preview>.real-rail{display:none}.real-main-preview>.real-topbar{padding:16px}.real-main-workspace{display:block}.real-main-preview .real-content{display:none}.preview-calendar{padding:20px 14px 28px}.preview-calendar-toolbar{justify-content:space-between}.preview-calendar-toolbar strong{font-size:15px}.preview-period{width:100%;justify-content:space-around}.preview-filters{font-size:9px;gap:10px}.preview-project strong{font-size:11px}.real-main-preview .real-bottom-nav{display:flex}}

.real-nav-footer{margin-top:auto;display:flex;gap:20px;padding:24px 10px 8px;font-size:10px;color:#737b8a}.real-main-preview .real-profile{margin-top:0;padding-top:14px}

.real-current-date{font-family:Inter,sans-serif;font-size:10px;color:#777b82;white-space:nowrap}@media(max-width:800px){.real-current-date{display:none}}

/* Keep reminder proportions consistent with the calendar cards. */
.real-main-preview .real-task{padding:12px 14px;gap:10px;align-items:flex-start}
.real-main-preview .real-check{margin-top:2px}
.real-main-preview .real-task p{font-size:12px;line-height:1.5;margin:0 0 6px}
.real-main-preview .real-project-tag{font-size:10px;line-height:1.4;padding:3px 6px}
@media(min-width:601px) and (max-width:1000px){.real-main-preview .real-task{padding:11px}.real-main-preview .real-task p{font-size:11px}}

/* Bring the mobile preview closer to the introduction and its content. */
@media(max-width:600px){
.hero{padding-top:24px}
.hero .eyebrow{margin-bottom:16px}
.hero-description{margin-top:20px}
.hero-actions{margin-top:22px;margin-bottom:12px;gap:14px}
.hero .product-preview-real{margin-top:62px}
.real-main-preview .preview-calendar{padding-top:14px;padding-bottom:18px}
.real-main-preview .preview-project:last-child{margin-bottom:0}
.phone-example{padding-top:16px}
.phone-example .phone-grip{margin-bottom:14px}
.phone-example .phone-app-head{margin-top:0;margin-bottom:18px}
}

/* Current app: project briefing and collapsed personal list. */
.preview-brief-context,.phone-brief p.preview-brief-context{display:block;background:none;padding:0;margin:0 0 10px;font-size:9px;font-weight:500;line-height:1.4;color:#bac6d8}
.preview-daily-todo{display:flex;align-items:center;gap:8px;border:1px solid #e8eaf0;border-radius:14px;background:#fff;padding:13px 12px;margin:16px 0;color:#242831;font-family:Inter,sans-serif;font-size:10px}
.preview-daily-todo strong{font-weight:600;white-space:nowrap}.preview-daily-todo small{margin-left:auto;font-size:8px;color:#78808b}.preview-daily-todo>span:last-child{font-size:9px;color:#78808b}.preview-daily-chevron{color:#7c8490;font-size:17px;line-height:1}
.real-view-switch,.real-view-switch>strong,.phone-view-tabs,.phone-view-tabs>b{border-radius:999px}.real-brief-row>span,.phone-brief p>b{border-radius:999px}
.phone-example{width:280px;max-width:100%;aspect-ratio:9 / 19.5;min-height:0;padding:16px 12px 0;border-width:6px;border-radius:38px;transform:rotate(2deg)}
.phone-example .phone-grip{width:60px;height:5px;flex:none;margin-bottom:18px}.phone-example .phone-app-head{gap:10px;margin:0 0 16px}.phone-example .phone-app-head h3{font-size:20px;line-height:1.2;min-width:0}.phone-example .phone-create{width:32px;height:32px;min-width:32px;font-size:24px}.phone-search{font-size:22px}
.phone-view-tabs{width:100%;gap:4px;justify-content:space-around;margin-bottom:16px}.phone-view-tabs>*{flex:1;text-align:center}.phone-view-tabs>span{padding:7px}
.phone-brief{padding:13px 11px;border-radius:16px}.phone-brief p{font-size:10px;border-radius:10px;line-height:1.45}.phone-brief p>span{min-width:0}.phone-brief p>b{flex:none;padding:4px 6px}.phone-brief p:nth-of-type(4)>i{background:#ffd04c}
.phone-example .preview-daily-todo{padding:12px 9px;gap:6px;margin:14px 0 0}.phone-example .preview-daily-todo strong{font-size:10px}.phone-example .preview-daily-todo small{font-size:7px}
.phone-task-label{margin:16px 0 10px}.phone-example .phone-task{padding:12px 10px;border:1px solid #b6dff7;border-radius:16px;background:#f2faff;align-items:flex-start;margin-bottom:20px;font-size:10px}.phone-task .check-circle{flex:none;margin-top:3px}.phone-example .real-bottom-nav{margin:auto -12px 0;padding:12px 6px 20px}
@media(max-width:600px){.phone-example{width:270px;max-width:100%;padding-top:14px}.phone-example .phone-app-head{margin-bottom:16px}}

@media(min-width:601px){.mobile-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);padding-inline:clamp(28px,5vw,72px)}.mobile-story>div{min-width:0}.mobile-story h2{font-size:clamp(36px,4.2vw,56px)}}

.phone-example{aspect-ratio:auto;min-height:610px}.phone-example>.real-bottom-nav{flex:none}.phone-example>.phone-brief,.phone-example>.phone-task,.phone-example>.preview-daily-todo{flex:none}

.phone-scene>.phone-example{width:280px;max-width:100%;min-height:0;aspect-ratio:auto}.phone-scene>.phone-example>.real-bottom-nav{margin-top:0}@media(max-width:600px){.phone-scene>.phone-example{width:260px}}

.phone-example .phone-create{display:grid;place-items:center;padding:0;line-height:0}.phone-create svg{display:block;width:20px;height:20px;flex:none}

.preview-brief-arrow{display:block;flex:none;color:#fff;margin-left:3px}.phone-brief .preview-brief-arrow{width:14px;height:14px}

/* A quieter version of the hero's data flow, anchored to the phone frame. */
.mobile-story{overflow:hidden}
.phone-scene{position:relative;isolation:isolate;width:280px;max-width:100%;margin:auto;transform:rotate(2deg);transition:transform .4s ease}
.phone-scene:hover{transform:rotate(0deg)}
.phone-scene>.phone-example{position:relative;z-index:1;width:100%;margin:0;transform:none}
.phone-streams{position:absolute;pointer-events:none;z-index:0;--phone-mask-left:0px;mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to right,transparent var(--phone-mask-left),#000 calc(var(--phone-mask-left) + 22px),#000 calc(100% - 22px),transparent);mask-composite:intersect}
@media(max-width:600px){.phone-scene{width:260px}}
@media(min-width:601px) and (max-width:900px){.phone-streams{--phone-mask-left:32px}}
@media(prefers-reduced-motion:reduce){.phone-scene{transform:none;transition:none}}
@media(forced-colors:active){.phone-streams{display:none}}
@media print{.phone-streams{display:none}}