/* Home, Features and 404 pages. Layered on styles.css. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.d{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.c-dev{background:var(--c-dev)}.c-design{background:var(--c-design)}.c-meet{background:var(--c-meet)}.c-write{background:var(--c-write)}.c-read{background:var(--c-read)}.c-comm{background:var(--c-comm)}.c-research{background:var(--c-research)}.c-acc{background:var(--accent)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:48px}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:40px}}
.hero-copy{min-width:0}
.eb-dot{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.eb-dot .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.hero h1{margin-bottom:24px;text-wrap:balance}
.hero .lead{margin:0 0 32px;max-width:31em}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.free{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink55);line-height:1.4}
.free span:first-child{color:var(--ink);font-weight:500}

/* A macOS window drawn in HTML: the Daily screen with its standup */
.hero-visual{position:relative;min-width:0;padding:8px 0 56px}
.js .hero-visual{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .hero-visual.shown{opacity:1;transform:none}
.win{background:var(--window);border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -30px var(--shadow),0 0 0 1px var(--line);overflow:hidden;font-size:12px;line-height:1.35}
.win-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--window-bar);border-bottom:1px solid var(--line)}
.win-bar i{width:11px;height:11px;border-radius:50%;display:block;background:#FF5F57}
.win-bar i:nth-child(2){background:#FEBC2E}
.win-bar i:nth-child(3){background:#28C840}
.win-bar span{margin-left:10px;font-weight:600;color:var(--ink70)}
.win-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.win-side{background:var(--sidebar);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px;color:var(--ink70)}
.win-side .it{padding:5px 8px;border-radius:7px}
.win-side .it.on{background:color-mix(in oklab,var(--accent) 16%,transparent);color:var(--ink);font-weight:600}
.win-side .cap{margin:12px 8px 4px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink55)}
.win-side .cat{display:flex;align-items:center;gap:7px;padding:3px 8px}
.win-side .cat .d{width:7px;height:7px}
.win-side .cat em{margin-left:auto;white-space:nowrap;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink55)}
.win-main{padding:16px 18px 18px;min-width:0}
.win-main h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.win-main .sub{margin:2px 0 14px;color:var(--ink55)}
.lanes{border:1px solid var(--line);border-radius:12px;padding:12px 12px 8px;background:var(--surface)}
.lanes-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.lanes-h strong{font-size:13px}
.lanes-h span{font-size:10px;color:var(--ink55)}
.lanes svg{display:block;width:100%;height:auto;overflow:visible}
.lanes text{font-family:var(--sans);font-size:9px;fill:var(--ink55)}
.lanes .lbl{font-size:10px;font-weight:600;fill:var(--ink)}
.lanes .tm{font-family:var(--mono);font-size:8.5px}
.js .lanes .bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.js .hero-visual.shown .lanes .bar{transform:none}
.win-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.win-stats div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.win-stats span{display:block;font-size:10px;color:var(--ink55)}
.win-stats strong{font-size:15px;letter-spacing:-.01em}

.standup{position:absolute;right:-12px;bottom:0;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 30px 60px -24px var(--shadow);font-size:12.5px;line-height:1.45;transform:rotate(1.5deg)}
.js .standup{opacity:0;transform:translateY(18px) rotate(1.5deg);transition:opacity .7s ease .6s,transform .7s cubic-bezier(.2,.7,.2,1) .6s}
.js .hero-visual.shown .standup{opacity:1;transform:rotate(1.5deg)}
.su-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink55)}
.su-h b{font-family:var(--sans);font-size:10.5px;letter-spacing:0;font-weight:600;color:var(--accent-text);background:color-mix(in oklab,var(--accent) 12%,transparent);padding:2px 8px;border-radius:999px}
.su-p{display:flex;justify-content:space-between;font-weight:600;margin:8px 0 2px}
.su-p span{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink55)}
.su-l{display:flex;gap:7px;color:var(--ink70)}
.su-l .icon{width:14px;height:14px;margin-top:2px;color:var(--green);stroke-width:2.4}
.su-l .bul{width:14px;flex:none;text-align:center;color:var(--ink35)}
@media (max-width:640px){
  .win-body{grid-template-columns:minmax(0,1fr)}
  .win-side{display:none}
  .win-main{padding:12px}
  .standup{position:relative;right:auto;bottom:auto;width:auto;margin:-24px 12px 0}
  .hero-visual{padding-bottom:8px}
}

/* Privacy strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:18px;padding-bottom:18px;font-family:var(--mono);font-size:13px;color:var(--ink70)}
.strip span{display:flex;align-items:center;gap:8px}
.strip .icon{width:18px;height:18px;color:var(--accent)}

/* Feature cards */
.sec{padding-top:96px;padding-bottom:40px}
.h-max{max-width:13em;text-wrap:balance}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:16px}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0}
@media (max-width:480px){.fcard{padding:24px}}
.fc-tag{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink55)}
.fcard h3{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.fcard p:not(.fc-tag){margin:0;color:var(--ink70);max-width:30em}
.vis{margin-top:auto;background:var(--surface-alt);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.split-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px}
.split-bar span{display:block}
.f50{flex:50}.f25{flex:25}.f11{flex:11}.f8{flex:8}.f6{flex:6}
.rows{display:grid;grid-template-columns:1fr auto auto;gap:10px 18px;align-items:center}
.rows .nm{display:flex;align-items:center;gap:8px;min-width:0}
.rows .pc{font-family:var(--mono);font-size:12px;color:var(--ink55)}
.engine{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.engine .icon{color:var(--accent)}
.engine div{flex:1;min-width:0;display:flex;flex-direction:column}
.engine small{color:var(--ink55);font-size:12.5px}
.engine .where{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--green);white-space:nowrap}
.engine .where.out{color:var(--amber)}
.timer{display:flex;align-items:center;gap:18px}
.ring{width:84px;height:84px;flex:none}
.ring circle{fill:none;stroke-width:7}
.ring .track{stroke:var(--chip)}
.ring .val{stroke:var(--accent);stroke-linecap:round}
.ring text{font-family:var(--mono);font-size:15px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.timer p{margin:0;font-size:14px;color:var(--ink70)}
.timer strong{display:block;color:var(--ink);font-size:16px}
.toast{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 14px 30px -22px var(--shadow)}
.toast img{width:28px;height:28px;border-radius:7px}
.toast div{display:flex;flex-direction:column;font-size:13px;line-height:1.4;min-width:0}
.toast small{color:var(--ink55)}
.su-mini .su-l{font-size:14px}
.su-mini .copy{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.su-mini .copy .icon{width:14px;height:14px}

/* Screenshot strip */
.shots-wrap{margin-top:40px;position:relative}
.shots{list-style:none;margin:0;padding:4px 2px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.shots li{flex:none;scroll-snap-align:start;width:min(560px,82vw)}
.shots img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.shots figcaption{margin-top:8px;font-size:13px;color:var(--ink55)}

/* Privacy band */
.pband{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line);margin-top:56px}
.pband .wrap{padding-top:104px;padding-bottom:104px}
.pband .band-eb{color:var(--band-muted);margin-bottom:20px}
.pband h2{margin-bottom:56px;max-width:10em}
.pband h2 em{color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px 48px}
.pgrid>div{border-top:3px double var(--band-line);padding-top:20px}
.pgrid .icon{width:26px;height:26px;color:var(--accent)}
.pgrid p{margin:14px 0 0;font-size:17px;line-height:1.6}
.pgrid p.mut{color:var(--band-muted)}
.plink{display:inline-flex;align-items:center;gap:4px;margin-top:48px;font-weight:500}
.plink .icon{width:18px;height:18px}
@media (max-width:640px){.pband .wrap{padding-top:64px;padding-bottom:64px}.sec{padding-top:64px}}

/* What you can do */
.can-h{margin-bottom:40px}
.can{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));column-gap:40px;border-top:3px double var(--ink15)}
.can li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.can .n{font-family:var(--mono);font-size:12px;color:var(--accent-text);padding-top:3px;flex:none;width:22px}

/* FAQ and closing call to action */
.faq-sec{padding-bottom:40px}
.faq-sec h2{margin-bottom:32px}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:96px;padding-bottom:112px}
.cta img{width:88px;height:88px;border-radius:20px}
.cta h2{max-width:11em}
.cta p{margin:0;color:var(--ink70);font-size:18px;max-width:30em}

/* Features page */
.fsec{padding-top:56px;padding-bottom:16px}
.fsec + .fsec{border-top:1px solid var(--line)}
.fsec-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 64px}
@media (max-width:860px){.fsec-grid{grid-template-columns:minmax(0,1fr)}}
.fsec h2{margin:0 0 12px}
.fsec .intro{margin:0;color:var(--ink70)}
.fsec figure{margin:24px 0 0}
.fsec figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.flist{list-style:none;margin:0;padding:0;border-top:3px double var(--ink15)}
.flist li{padding:16px 0;border-bottom:1px solid var(--line)}
.flist strong{display:block;font-weight:600;margin-bottom:2px}
.flist span{color:var(--ink70)}

/* 404 */
.nf{padding-top:96px;padding-bottom:120px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.nf p{margin:0;color:var(--ink70);font-size:18px}
.nf .links{display:flex;flex-wrap:wrap;gap:8px}