/* Navigation: a Product menu with a live preview, a header that stays when you scroll,
   and a full-screen sheet on phones. The resting bar in the hero is the locked design. */
.nav-product{display:inline-flex;align-items:center;gap:4px;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
.nav-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:rotate 200ms cubic-bezier(.23,1,.32,1)}
.nav-product[aria-expanded=true] .nav-chev{rotate:180deg}
.navbar .nav-product:hover{text-decoration:underline;text-underline-offset:5px}

/* The stuck header: a compact bar at the top once the hero bar has scrolled away. */
.float-nav{position:fixed;left:0;right:0;top:0;z-index:80;background:transparent;color:var(--sky-ink,#153f70);box-shadow:none;opacity:0;translate:0 -8px;pointer-events:none;transition:opacity 180ms cubic-bezier(.23,1,.32,1),translate 220ms cubic-bezier(.23,1,.32,1),box-shadow 200ms}
.float-nav.is-stuck{opacity:1;translate:0 0;pointer-events:auto}
.float-nav.is-stuck .navbar{padding-top:0;min-height:68px}
/* Only the stuck header has a background. Safari on iPhone colours the status bar from a fixed bar at
   the top, so a hidden white bar tinted it light over the blue hero; now the status bar shows the sky
   at the top of the page and white once the header is stuck. */
.float-nav.is-stuck{background:#fff;box-shadow:0 1px 0 #e4e6ea}
.float-nav .nav-signup{background:var(--sky-ink,#153f70);color:#fff}
.float-nav .menu-button{color:var(--sky-ink,#153f70)}
.float-nav .menu-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}

/* The menu is a floating panel that drops from Product. The header stays as it is.
   Its right edge lines up with Sign up. */
.nav-scrim{display:none}
.product-menu{position:fixed;z-index:79;transform-origin:70% 0;background:#fff;color:#1d1f23;border-radius:20px;box-shadow:0 0 0 1px #0d2c4d14,0 24px 60px #031b4438,0 6px 16px #031b441f;opacity:0;translate:0 -6px;scale:.985;transition:opacity 180ms cubic-bezier(.23,1,.32,1),translate 240ms cubic-bezier(.23,1,.32,1),scale 240ms cubic-bezier(.23,1,.32,1)}
.product-menu.on{opacity:1;translate:0 0;scale:1}
.pm-inner{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;padding:16px}
.pm-label{margin:12px 0 8px 16px;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6e75}
.pm-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pm-row{position:relative;display:grid;grid-template-columns:1fr 20px;align-items:center;column-gap:12px;padding:13px 16px;border-radius:12px;color:inherit;text-decoration:none;outline:none;transition:background-color 160ms}
.pm-row.on{background:#f3f5f9}
.pm-row:focus-visible{box-shadow:0 0 0 2px #1f5eff}
.pm-name{display:flex;align-items:center;gap:8px;font-size:17px;line-height:23px;color:#1d1f23}
.pm-desc{grid-column:1;font-size:13px;line-height:19px;color:#62656b}
.pm-arrow{grid-column:2;grid-row:1 / span 2;width:16px;height:16px;fill:none;stroke:#62656b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;translate:-4px 0;transition:opacity 160ms,translate 200ms cubic-bezier(.23,1,.32,1)}
.pm-row.on .pm-arrow{opacity:1;translate:0 0}
.pm-pill{font-size:11px;line-height:14px;padding:2px 7px;border-radius:99px;background:#eef2fb;color:#1f4fd1}
.pm-pill.soon{background:none;color:#62656b;box-shadow:inset 0 0 0 1px #cfd3da}
.pm-list li{opacity:0;translate:0 6px;transition:opacity 220ms,translate 260ms cubic-bezier(.23,1,.32,1)}
.product-menu.on .pm-list li{opacity:1;translate:0 0;transition-delay:calc(40ms + var(--i,0) * 30ms)}

/* The preview: one product view at a time on the printed sky. */
.pm-stage{position:relative;overflow:hidden;min-height:420px;border-radius:14px;background:linear-gradient(170deg,var(--sky-top) 0%,var(--sky-middle) 62%,var(--sky-low) 100%);isolation:isolate}
.pm-cloud{position:absolute;right:-180px;bottom:-200px;width:900px;max-width:none;height:auto;z-index:-1;opacity:.95}
.pv{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;pointer-events:none;transition:opacity 160ms}
.pv.on{opacity:1}
.pv-card{width:min(500px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:14px;background:#fff;color:#2f3136;box-shadow:0 30px 60px #031b4440;font-size:14px;line-height:20px}
.pv-card>*{opacity:0;translate:0 6px;filter:blur(3px);transition:opacity 220ms,translate 260ms cubic-bezier(.23,1,.32,1),filter 260ms}
.pv.on .pv-card>*{opacity:1;translate:0 0;filter:none;transition-delay:calc(60ms + var(--k,0) * 50ms)}
.pv-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding-bottom:12px;border-bottom:1px solid #eceae6}
.pv-head strong{font-size:16px;color:#1d1f23}.pv-head small{color:#6b6e75;font-size:12px}
.pv-count{margin-left:auto;font-size:12px;padding:2px 9px;border-radius:99px;background:#fff0d7;color:#8c4e0b}
.pv-tabs{display:flex;gap:18px;font-size:13px;color:#6b6e75;border-bottom:1px solid #eceae6;padding-bottom:8px}.pv-tabs .on{color:#1d1f23;box-shadow:0 9px 0 -7px #1d1f23}
.pv-row{display:grid;grid-template-columns:1fr auto 110px;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid #f0eee9}
.pv-row span{color:#4a4d54}.pv-row b{font-weight:500;color:#1d1f23;white-space:nowrap}.pv-row b.prop{color:#8c4e0b}
.pv-row em{justify-self:end;font-style:normal;font-size:12px;padding:3px 8px;border-radius:7px;background:#edf2ff;color:#1f4fd1;white-space:nowrap}
.pv-open{padding:9px 12px;border-radius:10px;background:#fff0d7;color:#8c4e0b}
.pv-rec{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#f5f6f8}.pv-rec i{width:8px;height:8px;border-radius:50%;background:#d9503a}.pv-rec b{color:#1d1f23}.pv-rec small{color:#6b6e75}
.pv-line{font-size:15px;line-height:22px;color:#1d1f23}.pv-line small{display:block;font-size:12px;line-height:16px;color:#6b6e75}.pv-line small.you{color:#1f4fd1}
.pv-quote{padding:10px 12px;border-radius:10px;background:#f4f6fb;color:#1d1f23}.pv-quote small{display:block;font-size:12px;color:#6b6e75}
.pv-letter{font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:21px;color:#2b2a27}
.pv-letter p{margin:0}.pv-title{font-size:18px;line-height:24px;color:#1d1c1a}
.pv-lh{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #eceae6;font-family:Geist,'Geist Fallback',sans-serif;font-size:11px;color:#6b6e75}.pv-lh span:first-child{color:#1d1c1a;font-weight:600}
.pv-advice{padding:8px 11px;border-radius:6px;background:#fff0d7;color:#5b3608}
.pv-q{align-self:flex-end;max-width:82%;margin:0;padding:9px 13px;border-radius:13px 13px 4px 13px;background:#1f5eff;color:#fff}
.pv-a p{margin:0}.pv-src{display:flex;gap:6px;margin-top:8px}.pv-src span{font-size:12px;padding:3px 8px;border-radius:7px;background:#f2f3f5;color:#4a4d54}

/* Phones: a full-screen sheet. Product opens in place; Close is always in reach. */
.menu-sheet{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--sky-top);color:#fff;opacity:0;translate:0 -12px;transition:opacity 220ms cubic-bezier(.23,1,.32,1),translate 260ms cubic-bezier(.23,1,.32,1)}
.menu-sheet.on{opacity:1;translate:0 0}
.ms-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px}
.ms-head .wordmark{flex:none;min-width:0;font-size:26px;color:#fff}
.ms-close{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#ffffff1a;color:#fff}
.ms-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ms-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 24px 32px;display:flex;flex-direction:column;gap:28px}
.ms-list{list-style:none;margin:0;padding:0}
.ms-list>li{border-bottom:1px solid #ffffff26}
.ms-item{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;background:none;color:#fff;font:inherit;font-size:20px;text-decoration:none;text-align:left}
.ms-item .nav-chev{width:20px;height:20px}
.ms-product[aria-expanded=true] .nav-chev{rotate:180deg}
.ms-sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms cubic-bezier(.23,1,.32,1)}
.ms-sub-wrap>div{min-height:0;overflow:hidden}
.ms-product[aria-expanded=true]+.ms-sub-wrap{grid-template-rows:1fr}
.ms-subs{list-style:none;margin:0 0 14px;padding:6px;border-radius:14px;background:#fff}
.ms-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 12px;border-radius:10px;color:#1d1f23;font-size:16px;text-decoration:none}
.ms-sub:active{background:#f3f5f9}
.ms-actions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:auto}
.ms-actions a{display:grid;place-items:center;min-height:48px;border-radius:10px;font-size:16px;text-decoration:none}
.ms-login{color:#fff;box-shadow:inset 0 0 0 1px #ffffff66}.ms-signup{background:var(--sky-pill,#f7efd8);color:var(--sky-ink,#153f70)}
html.sheet-open,html.sheet-open body{overflow:hidden}

@media(prefers-reduced-motion:reduce){.float-nav,.nav-scrim,.product-menu,.pm-list li,.pv,.pv-card>*,.menu-sheet,.ms-sub-wrap,.nav-chev,.pm-arrow{transition:none!important}}
.reduced .float-nav,.reduced .nav-scrim,.reduced .product-menu,.reduced .pm-list li,.reduced .pv,.reduced .pv-card>*,.reduced .menu-sheet,.reduced .ms-sub-wrap{transition:none!important}

/* Header studies, side by side for review: ?nav=island, ?nav=split, ?nav=sky, or ?nav=bar for
   the white bar. The choice is remembered across pages. Only the stuck header changes; the
   resting bar in the hero stays the locked design. */
[data-nav=island] .float-nav{left:16px;right:16px;top:12px;max-width:1120px;margin:0 auto;border-radius:99px;background:color-mix(in oklab,var(--sky-paper) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px #ffffff8c,0 10px 30px #031b441f,0 1px 2px #031b4414}
[data-nav=island] .float-nav.is-stuck{background:color-mix(in oklab,var(--sky-paper) 74%,transparent)}
[data-nav=island] .float-nav.is-stuck .navbar{min-height:60px;padding:0 8px 0 26px;gap:28px}
[data-nav=island] .float-nav .wordmark{flex:none;min-width:0}
[data-nav=island] .float-nav .nav-links{margin:0 auto}
[data-nav=island] .float-nav .nav-actions{margin-left:0;gap:24px}
[data-nav=island] .float-nav .nav-signup{border-radius:99px;padding:12px 22px}

[data-nav=split] .float-nav,[data-nav=split] .float-nav.is-stuck{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;pointer-events:none}
[data-nav=split] .float-nav.is-stuck .navbar{min-height:0;padding:12px 16px 0;gap:0;max-width:none}
[data-nav=split] .float-nav .wordmark,[data-nav=split] .float-nav .nav-links,[data-nav=split] .float-nav .nav-actions,[data-nav=split] .float-nav .menu-button{pointer-events:auto;height:52px;background:color-mix(in oklab,var(--sky-paper) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 24px #031b441a,0 0 0 1px #15396214}
[data-nav=split] .float-nav .wordmark{flex:none;min-width:0;display:flex;align-items:center;padding:0 20px;border-radius:14px 0 0 14px}
[data-nav=split] .float-nav .nav-links{padding:0 22px 0 8px;border-radius:0 14px 14px 0;clip-path:inset(-30px -30px -30px 0)}
[data-nav=split] .float-nav .nav-actions{margin-left:auto;padding:0 6px 0 20px;border-radius:14px}
[data-nav=split] .float-nav .nav-signup{padding:10px 18px}
[data-nav=split] .float-nav .menu-button{margin-left:auto;width:52px;border-radius:14px;display:grid;place-items:center}

[data-nav=sky] .float-nav,[data-nav=sky] .float-nav.is-stuck{background:color-mix(in oklab,var(--sky-top) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);color:#fff;box-shadow:0 1px 0 #ffffff1f,0 12px 30px #031b4426}
[data-nav=sky] .float-nav .nav-signup{background:var(--sky-pill);color:var(--sky-ink)}
[data-nav=sky] .float-nav .menu-button{color:#fff}
@media(max-width:760px){
 [data-nav=island] .float-nav{left:10px;right:10px;top:10px}
 [data-nav=island] .float-nav.is-stuck .navbar{padding:0 6px 0 20px}
 [data-nav=island] .float-nav .menu-button{margin-left:auto}
 [data-nav=split] .float-nav .wordmark{border-radius:14px}
}

/* The Chunkbase mark beside the wordmark. Its outline is black, so it sits on a small white tile,
   like an app icon: it reads on the blue hero and on the white sticky header alike. */
.wordmark{display:inline-flex;align-items:center;gap:10px}
.wm-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #1539621a,0 1px 2px #0d2c4d1f}
.wm-mark img{display:block;width:22px;height:23px}
@media (max-width:520px){.wm-mark{width:30px;height:30px;border-radius:8px}.wm-mark img{width:19px;height:20px}}