/* The Atlas website. Layered on the product's own atlas.css (copied verbatim at build): its tokens, type faces, Enamel buttons,
   cards, marks, chips, keycaps and lockup. This file adds page layout only, and uses only the product's tokens.
   Paper and ink. Colour only with meaning: Grow teal, Save amber, working plum. No green, no glow, no gradients. */

html,body{height:auto}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body.site{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.site main{flex:1 0 auto;outline:none}
.site :where(img){max-width:100%;height:auto}
.site a{text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-4)}
@media (hover:hover){.site a:hover{text-decoration-color:currentColor}}
.site a.btn{text-decoration:none}
.site :where(p){margin:0}
.site :where(h1,h2,h3){margin:0;font-weight:400}
.btn.lg{height:44px;padding:0 20px;font-size:.9375rem;border-radius:11px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--paper-2);text-decoration:none}
.skip:focus{top:12px}

/* type: Share Tech for display only, Exo 2 for reading, Share Tech Mono for labels and keys */
.display{font-family:var(--display);font-weight:400;font-size:clamp(2.25rem,1.2rem + 3.6vw,4rem);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.display.sm{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);line-height:1.06}
.h2{font-family:var(--display);font-size:clamp(1.55rem,1.1rem + 1.5vw,2.25rem);line-height:1.1;text-wrap:balance}
.h2s{font-family:var(--display);font-size:1.5rem;line-height:1.15}
.h3{font-family:var(--display);font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem);line-height:1.12;text-wrap:balance}
.lede{font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.55;color:var(--ink-2);max-width:40em}
.sechead{display:block;margin-bottom:22px}

/* frame */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:780px}
.wrap.wide{max-width:1440px}
@media (max-width:760px){.wrap{padding:0 16px}}
section{padding:72px 0}
@media (max-width:760px){section{padding:48px 0}}
.band{background:var(--paper-2);box-shadow:inset 0 1px 0 var(--hair-2),inset 0 -1px 0 var(--hair-2)}

/* the masthead */
.masthead{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 1px 0 var(--hair-2)}
.mastin{display:flex;align-items:center;gap:20px;height:64px}
.brandlink{display:inline-flex;align-items:center;text-decoration:none;padding:6px 0;margin-right:auto;border-radius:8px}
.topnav{display:flex;gap:4px}
.topnav a{padding:8px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-size:.9375rem}
@media (hover:hover){.topnav a:hover{background:var(--btn-tint-h);color:var(--ink)}}
.topnav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.smenu{display:none;position:relative}
.smenu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--ink)}
.smenu summary::-webkit-details-marker{display:none}
.smenu[open] summary{background:var(--paper-3)}
.smenupanel{position:absolute;right:0;top:52px;min-width:220px;display:flex;flex-direction:column;padding:8px;border-radius:14px;background:var(--paper-2);box-shadow:var(--pop)}
.smenupanel a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:9px;text-decoration:none;color:var(--ink-2)}
.smenupanel a[aria-current="page"]{color:var(--ink);background:var(--paper-3)}
@media (max-width:860px){.topnav{display:none}.smenu{display:block}.mastin{gap:10px}}
@media (max-width:420px){.topcta{padding:0 12px}.topcta .i{display:none}}

/* hero */
.hero{padding:64px 0 72px}
.heroin{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:56px;align-items:center}
.herotx{display:flex;flex-direction:column;gap:22px}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow canvas{width:30px;height:30px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.ctas.center{justify-content:center}
.heronote{display:flex;align-items:center;gap:8px}
.herofig{margin:0}
.herofig figcaption{margin-top:10px}
@media (max-width:1000px){.heroin{grid-template-columns:1fr;gap:40px}.hero{padding:40px 0 56px}}

/* a product frame: a screenshot of the real app, on paper, with the sheet's edge */
.frame{margin:0}
.shot{display:block;width:100%;height:auto;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--hair),0 24px 60px -30px rgba(22,21,15,.35)}
.shot-missing{aspect-ratio:16/10;display:grid;place-items:center;color:var(--ink-3)}

/* three doors */
.doors .h2{max-width:22em}
.doorgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.door{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-2)}
.door p{color:var(--ink-2)}
.doorhead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.landline{display:flex;gap:10px;align-items:flex-start;margin-top:22px;color:var(--ink-2);max-width:48em}
.landline .i{margin-top:3px}
@media (max-width:860px){.doorgrid{grid-template-columns:1fr}}

/* the moments */
.aha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:40px 0}
.aha+.aha{border-top:1px solid var(--hair-2)}
.aha.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.aha.flip .ahatx{order:2}
.ahatx{display:flex;flex-direction:column;gap:14px}
.ahatx>p:not(.cap):not(.ahalinks){color:var(--ink-2);font-size:1.0625rem}
.ahanum{font-family:var(--mono);font-size:max(10px,.75rem);letter-spacing:.14em;color:var(--ink-3)}
.cap{display:flex;gap:8px;align-items:flex-start;font-size:.8125rem;color:var(--ink-3)}
.cap .i{margin-top:3px}
.ahalinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.plink{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;min-height:32px}
.ahafig{margin:0}
@media (max-width:900px){.aha,.aha.flip{grid-template-columns:1fr;gap:24px;padding:32px 0}.aha.flip .ahatx{order:0}}
.kc{vertical-align:1px}

/* never / away */
.pairin{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card.pad{padding:26px}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .i{margin-top:3px;color:var(--ink-2)}
.ticks.plain{margin-top:12px}
@media (max-width:860px){.pairin{grid-template-columns:1fr}}

/* clips */
.sectop{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:44em}
.clipgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:24px}
@media (max-width:1000px){.clipgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.clipgrid{grid-template-columns:1fr}}
.clip{margin:0;display:flex;flex-direction:column;gap:10px}
.clip.wide{margin-bottom:32px}
.clipbox{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--paper-3);box-shadow:0 0 0 1px var(--hair)}
.clip.wide .clipbox{aspect-ratio:16/9}
.clipbox video,.clipbox>img,.clipbox .clipshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:0;box-shadow:none}
.clip.soon .clipbox>img,.clip.soon .clipshot{filter:saturate(.85);opacity:.9}
.clipknot{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3)}
.clipsoon{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--paper-2);box-shadow:0 0 0 1px var(--hair)}
.clipsoon .lbl{color:var(--ink-2)}
.clip figcaption{display:flex;flex-direction:column;gap:2px}
.clip figcaption span{font-size:.875rem;color:var(--ink-2)}

/* google data */
.gin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;max-width:880px}
.gin p{margin-top:10px;color:var(--ink-2)}
@media (max-width:560px){.gin{grid-template-columns:1fr}}

/* closer */
.closein{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.closein canvas{width:64px;height:64px}

/* page heads */
.pagehead{padding:56px 0 24px}
.pagehead .wrap{display:flex;flex-direction:column;gap:14px}

/* demo page */
.demohead{padding:48px 0 20px}
.demohead .wrap{display:flex;flex-direction:column;gap:14px}
.demolabel{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-2);max-width:52em}
.demolabel .i{margin-top:3px;color:var(--ink)}
.demobody{padding:12px 0 64px}
.starts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.start{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2);text-decoration:none;color:var(--ink-2);min-height:44px}
.start>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.start b{color:var(--ink);font-weight:600;font-size:.875rem}
.start span span{font-size:.75rem;line-height:1.4}
.start .i{margin-top:2px;flex:none}
@media (hover:hover){.start:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}}
.start[aria-current="true"]{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
@media (max-width:1200px){.starts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.starts{grid-template-columns:1fr 1fr}.start span span{display:none}}
.moreStarts{margin:12px 0 16px}
.stage{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--hair),0 24px 60px -30px rgba(22,21,15,.35)}
.stagebar{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 8px 4px 14px;background:var(--paper-2);border-bottom:1px solid var(--hair-2)}
.stagenow{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage iframe{display:block;width:100%;height:min(860px,calc(100vh - 150px));min-height:560px;border:0;background:var(--paper)}
@media (max-width:760px){.stage iframe{height:calc(100svh - 120px);min-height:520px}.stagebar .lbl{display:none}}
.demofoot{margin-top:12px;max-width:60em}

/* install */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:20px;border-radius:var(--r2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.steps li p{margin-top:6px;color:var(--ink-2)}
.stepn{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--paper-3);font-family:var(--display);font-size:1.25rem}
.term{margin-top:12px;border-radius:10px;background:var(--ink);color:var(--paper-2);padding:12px 14px;overflow-x:auto}
.term code{font-family:var(--mono);font-size:max(10px,.8125rem);white-space:nowrap}
.term .t-faint{color:#B7B3A9}
.termdots{display:flex;gap:6px;margin-bottom:10px}.termdots i{width:9px;height:9px;border-radius:50%;background:rgba(251,250,246,.28)}
.need{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:640px){.need{grid-template-columns:1fr}}

/* support */
.contact .row{grid-template-columns:auto minmax(0,1fr);align-items:start}
.contact .tt{display:flex;flex-direction:column;gap:4px;min-width:0}
.contact .tt>span{color:var(--ink-2);overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip}
.ticks+p{margin-top:18px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;border-radius:var(--r2);overflow:hidden;background:var(--hair-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.facts div{background:var(--paper);padding:14px 16px}
.facts dt{font-family:var(--mono);font-size:max(10px,.6875rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:4px 0 0;overflow-wrap:anywhere}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

/* legal pages */
.legal .pagehead{padding-bottom:8px}
.prose{max-width:720px}
.prose h2{font-family:var(--display);font-size:1.5rem;line-height:1.2;margin:40px 0 12px;scroll-margin-top:84px}
.prose h3{font-family:var(--read);font-weight:600;font-size:1.0625rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:1rem;line-height:1.65}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;margin:10px 0}
.prose li+li{margin-top:6px}
.prose b,.prose strong{color:var(--ink)}
.prose .callout{margin:18px 0;padding:16px 18px;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair)}
.prose .callout p{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9375rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair-2);color:var(--ink-2)}
.prose th{font-family:var(--mono);font-weight:400;font-size:max(10px,.6875rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prose td:first-child{color:var(--ink);font-weight:500;width:34%;min-width:8.5em} /* wraps: a long first cell must not push the other columns out of view */
.toc{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.toc a{font-size:.875rem;color:var(--ink-2)}
.updated{font-family:var(--mono);font-size:max(10px,.75rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* footer */
.foot{margin-top:auto;padding:48px 0 28px;background:var(--paper-2);box-shadow:inset 0 1px 0 var(--hair-2)}
.footin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px}
.footbrand{display:flex;flex-direction:column;gap:10px;max-width:28em}
.footnav{display:flex;gap:48px}
.footnav div{display:flex;flex-direction:column;gap:6px}
.footnav a{color:var(--ink-2);text-decoration:none;font-size:.9375rem;min-height:28px;display:inline-flex;align-items:center}
@media (hover:hover){.footnav a:hover{color:var(--ink);text-decoration:underline}}
.footlegal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:32px;padding-top:18px}
.footlegal::before{content:"";position:absolute;top:0;left:32px;right:32px;height:1px;background:var(--hair-2)}
@media (max-width:760px){.footlegal::before{left:16px;right:16px}}
.site picture{display:block}
@media (max-width:760px){.footin{grid-template-columns:1fr}.footnav{gap:32px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.masthead,.smenu,.skip,.stage,.starts{display:none!important}}