/* Atlas home page options h1 / h2: the REAL Atlas Home (living sky, greeting, warm line, ask box, three chips, "3 things are
   waiting") inside the app shell, recreated in HTML at the app's own size (1440 x 900, or 390 x 844 for the phone) and
   scaled to fit, so it stays crisp at any size. The sky is the app's own: palette.ts colours, the Blender sun, moon and
   clouds, the 1140 x 600 frame, the same bloom, scrim and drift. It cycles dawn, day, dusk, night; a still dusk without motion. */

@property --p-top  { syntax: "<color>"; inherits: true; initial-value: #6679bd; }
@property --p-mid  { syntax: "<color>"; inherits: true; initial-value: #cb9bb2; }
@property --p-low  { syntax: "<color>"; inherits: true; initial-value: #f2b68b; }
@property --p-glow { syntax: "<color>"; inherits: true; initial-value: #ffc28a; }
@property --hill   { syntax: "<color>"; inherits: true; initial-value: #d9d3b4; }

/* ---------- the palette for each moment (palette.ts: DAWN, DAY clear, DUSK, NIGHT) ---------- */
[data-ph] { --p-top: #6679bd; --p-mid: #cb9bb2; --p-low: #f2b68b; --p-glow: #ffc28a; --hill: #d9d3b4;
  --sky-deep: oklch(from var(--p-mid) calc(l * 0.6) calc(c * 1.35) h);
  transition: --p-top 2.6s ease-in-out, --p-mid 2.6s ease-in-out, --p-low 2.6s ease-in-out, --p-glow 2.6s ease-in-out, --hill 2.6s ease-in-out; }
[data-ph="dawn"]  { --p-top: #7aa2d6; --p-mid: #c3b3d4; --p-low: #f3c7a5; --p-glow: #ffd2a0; --hill: #d9d7b4; }
[data-ph="day"]   { --p-top: #4b93dd; --p-mid: #7cb3e8; --p-low: #bfdcf4; --p-glow: #ffe6ad; --hill: #bfdc9b; }
[data-ph="dusk"]  { --p-top: #6679bd; --p-mid: #cb9bb2; --p-low: #f2b68b; --p-glow: #ffc28a; --hill: #d9d3b4; }
[data-ph="night"] { --p-top: #15244c; --p-mid: #243a69; --p-low: #435c8a; --p-glow: #f6efd8; --hill: #4e6291; }
[data-ph].no-tr, [data-ph].no-tr * { transition: none !important; }

/* ---------- the sky ---------- */
.hsky { position: absolute; left: 0; right: 0; top: 0; height: 78%; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--p-top) 0%, var(--p-mid) 55%, var(--p-low) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%); mask-image: linear-gradient(to bottom, #000 48%, transparent 100%); }
.hsky-frame { position: absolute; left: 0; top: 0; width: 1140px; height: 600px; transform-origin: 0 0; }
.hsky-scrim { position: absolute; top: 10%; left: 50%; width: 240%; height: 480px; transform: translateX(-50%); opacity: .35; transition: opacity 2s ease;
  background: radial-gradient(closest-side, var(--sky-deep) 0%, color-mix(in srgb, var(--sky-deep) 70%, transparent) 30%, color-mix(in srgb, var(--sky-deep) 30%, transparent) 62%, transparent 100%); }
[data-ph="night"] .hsky-scrim { opacity: 0; }
.sk-sun { position: absolute; left: 0; top: 0; width: 340px; height: 340px; opacity: 1; transform: translate(calc(var(--ox) - 170px), calc(var(--oy) - 170px)); transition: transform 2.8s ease-in-out, opacity 1.8s ease; --ox: 931px; --oy: 262px; }
.sk-sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .55; background: radial-gradient(circle, color-mix(in srgb, var(--p-glow) 80%, transparent) 0%, color-mix(in srgb, var(--p-glow) 48%, transparent) 20%, color-mix(in srgb, var(--p-glow) 20%, transparent) 42%, color-mix(in srgb, var(--p-glow) 6%, transparent) 70%, transparent 100%); animation: sk-glow 11s ease-in-out infinite alternate; }
.sk-sun img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
[data-ph="dawn"] .sk-sun { --ox: 209px; --oy: 262px; }
[data-ph="day"]  .sk-sun { --ox: 570px; --oy: 100px; }
[data-ph="dusk"] .sk-sun { --ox: 931px; --oy: 262px; }
[data-ph="night"] .sk-sun { --ox: 1010px; --oy: 332px; opacity: 0; }
[data-ph].jump .sk-sun { --ox: 120px; --oy: 332px; opacity: 0; transition: none; }
.sk-moon { position: absolute; left: 870.5px; top: 83.5px; width: 69px; height: 69px; opacity: 0; transition: opacity 2s ease; }
.sk-moon::before { content: ""; position: absolute; left: -95px; top: -95px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 239, 216, .42) 0%, rgba(246, 239, 216, .2) 25%, rgba(246, 239, 216, .06) 55%, transparent 100%); animation: sk-glow 11s ease-in-out infinite alternate; }
.sk-moon img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
[data-ph="night"] .sk-moon { opacity: 1; }
.sk-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease; }
[data-ph="night"] .sk-stars { opacity: 1; }
.sk-stars i { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 8px 2px rgba(255, 255, 255, .35); animation: sk-glint 5s ease-in-out infinite; }
.sk-cl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: sk-float 60s ease-in-out infinite alternate; will-change: transform; }
.sk-cl img { position: absolute; max-width: none; opacity: 0; transition: opacity 2.4s ease; }
[data-ph="day"] .sk-cl .c-day, [data-ph="dawn"] .sk-cl .c-warm, [data-ph="dusk"] .sk-cl .c-warm, [data-ph="night"] .sk-cl .c-night { opacity: var(--co); }
@keyframes sk-float { from { transform: translate3d(calc(-16px * var(--d, 1)), 0, 0); } to { transform: translate3d(calc(16px * var(--d, 1)), 0, 0); } }
@keyframes sk-glow { from { opacity: .55; } to { opacity: .4; } }
@keyframes sk-glint { 50% { opacity: .4; } }

/* the buddy's hill (the app's soft green rise, bottom right of the sky) */
.hm-hill { position: absolute; right: -4%; bottom: 20.5%; width: 46%; height: 21%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--hill) 92%, #fff) 0%, color-mix(in srgb, var(--hill) 78%, var(--p-low)) 100%); border-radius: 100% 0 0 0 / 100% 0 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); opacity: .95; }

/* ---------- the Home panel (positions are the app's, in px, at 1440 x 900) ---------- */
.hm { position: absolute; background: var(--page); color: var(--ink); text-align: center; overflow: hidden; }
.hm .words { position: absolute; left: 0; right: 0; z-index: 3; margin: 0; color: #fff; --shade: oklch(from var(--p-mid) calc(l * 0.5) calc(c * 1.4) h);
  text-shadow: 0 0 .08em color-mix(in srgb, var(--shade) 80%, transparent), 0 0 .3em color-mix(in srgb, var(--shade) 62%, transparent), 0 0 .7em color-mix(in srgb, var(--shade) 30%, transparent); }
.is-out { opacity: 0; }
.swap { transition: opacity .26s ease; }
.hm-date { top: 216px; font-size: 14px; font-weight: 600; line-height: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.hm-date svg { width: 14px; height: 14px; }
.hm-hello { top: 247px; font-size: 46px; line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; text-shadow: 0 2px 18px color-mix(in srgb, var(--p-top) 40%, transparent); }
.hm-line { top: 306px; font-size: 20px; line-height: 26px; font-weight: 400; }
.hm-dots { position: absolute; left: 0; right: 0; top: 342px; z-index: 3; display: flex; justify-content: center; gap: 5px; }
.hm-dots i { display: block; width: 5px; height: 5px; border-radius: 3px; background: #fff; opacity: .5; transition: width .3s ease, opacity .3s ease; }
.hm-dots i.on { width: 14px; opacity: 1; }
.hm-ask { position: absolute; z-index: 3; left: 50%; top: 393px; width: 680px; height: 108px; margin-left: -340px; background: #fff; border-radius: 26px; text-align: left; box-shadow: 0 1px 2px rgba(29, 28, 26, .06), 0 10px 30px -8px rgba(29, 28, 26, .22); }
.hm-ask .ph { position: absolute; left: 20px; top: 24px; font-size: 17px; color: #6f6d68; }
.hm-ask svg { position: absolute; width: 20px; height: 20px; color: #6f6d68; }
.hm-ask .at { left: 22px; bottom: 18px; }
.hm-ask .mic { right: 74px; bottom: 18px; }
.hm-ask .send { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: #aaa8a4; color: #fff; display: grid; place-items: center; }
.hm-ask .send svg { position: static; width: 18px; height: 18px; color: #fff; }
.hm-chips { position: absolute; z-index: 3; left: 0; right: 0; top: 517px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 9px; }
.hm-chips li { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(29, 28, 26, .08), 0 3px 8px -4px rgba(29, 28, 26, .18); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.hm-chips li svg { width: 14px; height: 14px; margin-right: 8px; flex: none; }
.hm-chips li.press { transform: scale(.95); background: #f4f2ee; box-shadow: 0 0 0 1px var(--line-2); }
.hm-reply { position: absolute; z-index: 3; left: 50%; top: 562px; width: 520px; margin-left: -260px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; text-align: left; font-size: 14px; line-height: 1.45; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 28px -14px rgba(29, 28, 26, .35); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease-out); pointer-events: none; }
.hm-reply.in { opacity: 1; transform: none; }
.hm-reply b { font-weight: 600; letter-spacing: -.01em; }
.hm-reply .mk { flex: none; font-weight: 700; letter-spacing: -0.04em; font-size: 15px; }
.hm-reply .mk::after { content: "."; color: var(--sun); }
.hm-reply .u { margin-left: auto; padding-left: 12px; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); white-space: nowrap; }
.hm-wait { position: absolute; z-index: 3; left: 0; right: 0; top: 828px; margin: 0; font-size: 14px; color: var(--ink-2); display: flex; justify-content: center; align-items: center; gap: 4px; }
.hm-wait b { font-weight: 600; }
.hm-wait svg { width: 14px; height: 14px; }
.hm-bell { position: absolute; z-index: 3; right: 20px; top: 18px; width: 20px; height: 20px; color: #fff; }
.hm .mc { --mc: 112px; position: absolute; z-index: 2; left: 962px; top: 380px; }

/* ---------- the app shell (sidebar) ---------- */
.app { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; background: var(--field); font-size: 15px; line-height: 1.4; text-align: left; overflow: hidden; }
.app .hm { left: 270px; top: 9px; width: 1162px; height: 882px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(29, 28, 26, .04); }
.ap-side { position: absolute; left: 0; top: 0; width: 270px; height: 100%; color: var(--ink); }
.ap-logo { position: absolute; left: 18px; top: 18px; display: flex; align-items: baseline; gap: 6px; }
.ap-logo b { font-size: 25px; font-weight: 700; letter-spacing: -0.045em; }
.ap-logo b::after { content: "."; color: var(--sun); }
.ap-logo small { font-size: 9.5px; color: var(--ink-2); letter-spacing: -0.01em; }
.ap-col { position: absolute; left: 243px; top: 25px; width: 16px; height: 16px; color: var(--ink-2); }
.ap-search { position: absolute; left: 10px; top: 63px; width: 250px; height: 32px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; gap: 9px; color: var(--ink-2); font-size: 14px; }
.ap-search svg { width: 16px; height: 16px; }
.ap-search kbd { margin-left: auto; font: 500 11px "Inter", sans-serif; padding: 1px 6px; border-radius: 6px; background: var(--field); border: 1px solid var(--line); }
.ap-row { position: absolute; left: 10px; width: 250px; height: 35px; border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 15px; font-weight: 500; color: var(--ink); }
.ap-row svg { width: 17px; height: 17px; color: var(--ink-2); flex: none; }
.ap-row.cur { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(29, 28, 26, .05); }
.ap-row.cur svg { color: var(--ink); }
.ap-row .bd { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--sun); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ap-lab { position: absolute; left: 18px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.ap-tile { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.ap-tile svg { width: 12px; height: 12px; color: inherit; }
.ap-row.ws { padding-left: 22px; }
.ap-pin { position: absolute; left: 28px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); }
.ap-pin i { width: 7px; height: 7px; border-radius: 50%; }
.ap-rule { position: absolute; left: 10px; width: 242px; top: 810px; height: 1px; background: var(--line); }

/* ---------- the phone Home (390 x 844) ---------- */
.app-phone { width: 390px; height: 844px; background: var(--page); border-radius: 0; }
.app-phone .hm { left: 0; top: 0; width: 390px; height: 844px; border-radius: 0; box-shadow: none; transition: none; }
.app-phone .hm { transition: --p-top 2.6s ease-in-out, --p-mid 2.6s ease-in-out, --p-low 2.6s ease-in-out, --p-glow 2.6s ease-in-out, --hill 2.6s ease-in-out; }
.app-phone .hm-date { top: 183px; font-size: 14px; }
.app-phone .hm-hello { top: 214px; font-size: 38px; padding: 0 12px; }
.app-phone .hm-line { top: 266px; font-size: 18px; }
.app-phone .hm-dots { top: 296px; }
.app-phone .hm-hill { right: -10%; bottom: auto; top: 505px; width: 120%; height: 150px; border-radius: 60% 0 0 0 / 100% 0 0 0; }
.app-phone .hm .mc { --mc: 92px; left: 255px; top: 440px; }
.app-phone .hm-bell { right: 18px; top: 18px; }
.app-phone .hm-wait { top: 647px; font-size: 14.5px; }
.app-phone .hm-chips { top: 679px; gap: 6px; }
.app-phone .hm-chips li { height: 28px; padding: 0 10px; font-size: 13px; }
.app-phone .hm-chips li svg { margin-right: 6px; width: 13px; height: 13px; }
.app-phone .hm-ask { top: 726px; left: 13px; right: 13px; width: auto; margin-left: 0; height: 100px; border-radius: 24px; }
.app-phone .hm-reply { top: 580px; width: 330px; margin-left: -165px; font-size: 13px; padding: 10px 14px; }
.app-phone .hsky { height: 78%; }

/* ---------- shared page pieces ---------- */
.hero.h { overflow-x: clip; padding-top: 24px; }
.hero.h::before { display: none; }
.hero.h .lead { max-width: 41em; margin-top: 12px; font-size: 19.5px; }
.hero.h .actions { margin-top: 18px; }
.hero.h h1 { font-size: clamp(46px, 5.6vw, 80px); }
.h-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px 0 13px; margin: 0 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; line-height: 1; color: var(--ink-2); box-shadow: 0 1px 1px rgba(29, 28, 26, .03), 0 6px 16px -8px rgba(29, 28, 26, .14); }
.h-chip svg { width: 15px; height: 15px; color: var(--ink); flex: none; }
.h-chip b { color: var(--ink); font-weight: 600; }
.h-chip .cs { display: none; }
@media (prefers-reduced-motion: no-preference) { .hero.h .h-chip { animation: rise-in 400ms var(--ease-out) both; } .hero.h .h-win { animation: rise-in 400ms var(--ease-out) both; } }

/* h1: the product window */
.h1 .h-win { position: relative; width: min(1120px, 100%); margin: 22px auto 0; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 1px 1px rgba(29, 28, 26, .04), 0 12px 32px -10px rgba(29, 28, 26, .14), 0 40px 80px -40px rgba(29, 28, 26, .2); overflow: hidden; }
.h-bar { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px; background: var(--field); border-bottom: 1px solid var(--line); }
.h-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.h-view { position: relative; width: 100%; aspect-ratio: 1440 / 900; overflow: hidden; }
.h-view .app { transform: scale(.7778); }
.h-view .app-phone { display: none; }

/* h2: the whole hero is the sky */
.hero.h2 { position: relative; padding-top: 34px; min-height: calc(100svh - var(--nav-h)); color: #fff; text-align: center; }
.hero.h2 { display: flex; flex-direction: column; }
.hero.h2 > .hsky { height: 100%; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.h2 .h-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: stretch; }
.h2 .h-in .actions { flex: none; }
.h2 .h-greet { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #fff; --shade: oklch(from var(--p-mid) calc(l * 0.5) calc(c * 1.4) h); text-shadow: 0 0 .1em color-mix(in srgb, var(--shade) 80%, transparent), 0 0 .4em color-mix(in srgb, var(--shade) 60%, transparent), 0 0 .9em color-mix(in srgb, var(--shade) 30%, transparent); transition: opacity .26s ease; }
.h2 .h-greet svg { width: 15px; height: 15px; }
.h2 .h-greet.is-out { opacity: 0; }
.h2 h1 { color: #fff; text-shadow: 0 2px 22px color-mix(in srgb, var(--p-top) 45%, transparent); }
.h2 .lead { color: rgba(255, 255, 255, .94); --shade: oklch(from var(--p-mid) calc(l * 0.5) calc(c * 1.4) h); text-shadow: 0 0 .1em color-mix(in srgb, var(--shade) 80%, transparent), 0 0 .45em color-mix(in srgb, var(--shade) 55%, transparent), 0 0 1em color-mix(in srgb, var(--shade) 28%, transparent); }
.h2 .actions .quiet { color: #fff; opacity: .92; text-shadow: 0 0 .5em color-mix(in srgb, var(--p-top) 60%, transparent); }
.h2 .actions .quiet:hover { color: #fff; opacity: 1; }
.h2 .actions .btn-ink { background: #fff; color: var(--ink); box-shadow: 0 8px 22px -8px rgba(29, 28, 26, .4); }
.h2 .actions .btn-ink:hover { background: #fff7ea; }
.h2 .h-win { position: relative; width: min(1120px, 100%); margin: 34px auto 0; border-radius: 22px 22px 0 0; border: 1px solid rgba(255, 255, 255, .6); border-bottom: 0; background: rgba(250, 249, 247, .78); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 -20px 60px -24px rgba(21, 36, 76, .45), 0 0 0 1px rgba(29, 28, 26, .05); overflow: hidden; flex: 1; min-height: 300px; }
.h2 .h-view { position: absolute; inset: 0; aspect-ratio: auto; }
.h2 .h-view .appw { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.hw { position: absolute; inset: 0; text-align: left; }
.hw .ap-side { background: rgba(242, 241, 237, .85); }
.hw .wm { position: absolute; left: 270px; top: 0; width: 1170px; height: 100%; text-align: center; color: var(--ink); }
.hw .hm-line { position: absolute; left: 0; right: 0; top: 30px; z-index: 3; margin: 0; font-size: 20px; line-height: 26px; color: var(--ink-2); --shade: transparent; text-shadow: none; }
.hw .hm-dots { top: 66px; }
.hw .hm-dots i { background: var(--ink-3); }
.hw .hm-ask { top: 98px; }
.hw .hm-chips { top: 222px; }
.hw .hm-reply { top: 262px; }
.hw .hm-wait { top: 346px; }
.hw .hm-line.words { color: var(--ink-2); text-shadow: none; }

@media (max-width: 960px) {
  .h-view .app { transform: scale(.5); }
}
/* phones: the product window is a phone-sized Atlas Home */
@media (max-width: 560px) {
  .hero.h { padding-top: 22px; }
  .hero.h h1 { font-size: 40px; }
  .hero.h .lead { font-size: 16.5px; margin-top: 12px; }
  .hero.h .lead .more { display: none; }
  .hero.h .actions { margin-top: 16px; }
  .hero.h .btn { height: 44px; }
  .h-chip { font-size: 13px; height: 30px; padding: 0 12px 0 10px; margin-bottom: 12px; }
  .h-chip .cl { display: none; } .h-chip .cs { display: inline; }
  .h1 .h-win { width: 286px; margin-top: 22px; border-radius: 34px; border: 5px solid #1d1c1a; background: #1d1c1a; box-shadow: 0 1px 1px rgba(29, 28, 26, .08), 0 14px 34px -10px rgba(29, 28, 26, .35), 0 50px 80px -30px rgba(29, 28, 26, .4); }
  .h1 .h-bar { display: none; }
  .h1 .h-view { aspect-ratio: 390 / 844; border-radius: 28px; }
  .h-view .app-desk { display: none; }
  .h-view .app-phone { display: block; transform: scale(.7333); }
  /* h2 */
  .hero.h2 { padding-top: 22px; }
  .h2 .h-greet { margin-bottom: 8px; font-size: 14px; }
  .h2 .h-win { width: calc(100% - 28px); margin-top: 22px; min-height: 250px; border-radius: 22px 22px 0 0; }
  .h2 .h-view .appw { display: none; }
  .hp { position: absolute; left: 0; top: 0; width: 390px; height: 420px; transform-origin: 0 0; text-align: center; }
  .hp .hm-wait { top: 16px; font-size: 14.5px; }
  .hp .hm-chips { top: 50px; gap: 6px; }
  .hp .hm-chips li { height: 28px; padding: 0 10px; font-size: 13px; }
  .hp .hm-chips li svg { margin-right: 6px; width: 13px; height: 13px; }
  .hp .hm-ask { top: 98px; left: 13px; right: 13px; width: auto; margin-left: 0; height: 100px; border-radius: 24px; }
  .hp .hm-reply { top: 214px; width: 340px; margin-left: -170px; font-size: 13px; padding: 10px 14px; }
}
@media (min-width: 561px) { .hp { display: none; } }

/* h2: the headline sits over the sky, so the day's sun stands to the right of it */
.hero.h2[data-ph="day"] .sk-sun { --ox: 890px; --oy: 120px; }
.hero.h2 .cl3 { display: none; }
.hp { color: var(--ink); }
/* generated by build_home.py */
.y105 { top: 105px; }
.y140 { top: 140px; }
.y175 { top: 175px; }
.y210 { top: 210px; }
.y245 { top: 245px; }
.y280 { top: 280px; }
.y315 { top: 315px; }
.y364 { top: 364px; }
.y388 { top: 388px; }
.y423 { top: 423px; }
.y458 { top: 458px; }
.y493 { top: 493px; }
.y543 { top: 543px; }
.y574 { top: 574px; }
.y605 { top: 605px; }
.y636 { top: 636px; }
.y817 { top: 817px; }
.y852 { top: 852px; }
.t-docs { background: #e9eefb; color: #4a6fd0; }
.t-pages { background: #fbe9e4; color: #d1583f; }
.t-sheets { background: #e6f3ea; color: #3f8a57; }
.t-boards { background: #ece8fa; color: #6f58c9; }
.pc-4a86d9 { background: #4a86d9; }
.pc-d6538f { background: #d6538f; }
.pc-8a63c9 { background: #8a63c9; }
.st0 { left: 118.7px; top: 78.7px; width: 2.6px; height: 2.6px; animation-duration: 3.8s; animation-delay: -0.0s; }
.st1 { left: 259.0px; top: 149.0px; width: 2.0px; height: 2.0px; animation-duration: 4.7s; animation-delay: -0.7s; }
.st2 { left: 328.5px; top: 58.5px; width: 3.0px; height: 3.0px; animation-duration: 5.6s; animation-delay: -1.4s; }
.st3 { left: 469.0px; top: 39.0px; width: 2.0px; height: 2.0px; animation-duration: 6.5s; animation-delay: -2.1s; }
.st4 { left: 638.8px; top: 68.8px; width: 2.4px; height: 2.4px; animation-duration: 7.4s; animation-delay: -2.8s; }
.st5 { left: 1099.1px; top: 379.1px; width: 1.8px; height: 1.8px; animation-duration: 3.8s; animation-delay: -3.5s; }
.st6 { left: 1038.6px; top: 58.6px; width: 2.8px; height: 2.8px; animation-duration: 4.7s; animation-delay: -4.2s; }
.st7 { left: 1079.0px; top: 209.0px; width: 2.0px; height: 2.0px; animation-duration: 5.6s; animation-delay: -4.9s; }
.st8 { left: 199.1px; top: 259.1px; width: 1.8px; height: 1.8px; animation-duration: 6.5s; animation-delay: -5.6s; }
.st9 { left: 559.2px; top: 119.2px; width: 1.6px; height: 1.6px; animation-duration: 7.4s; animation-delay: -6.3s; }
.st10 { left: 979.1px; top: 289.1px; width: 1.8px; height: 1.8px; animation-duration: 3.8s; animation-delay: -7.0s; }
.st11 { left: 58.9px; top: 198.9px; width: 2.2px; height: 2.2px; animation-duration: 4.7s; animation-delay: -7.7s; }
.st12 { left: 759.0px; top: 29.0px; width: 2.0px; height: 2.0px; animation-duration: 5.6s; animation-delay: -8.4s; }
.st13 { left: 859.2px; top: 249.2px; width: 1.6px; height: 1.6px; animation-duration: 6.5s; animation-delay: -9.1s; }
.cl1 { --d: 1; --co: 0.92; animation-duration: 52s; animation-delay: 0s; animation-direction: alternate; }
.cl1 img { left: 109.16px; top: 169.48px; width: 195.16px; height: 90.52px; --co: 0.92; }
.cl2 { --d: 0.7; --co: 0.74; animation-duration: 64s; animation-delay: -21s; animation-direction: alternate-reverse; }
.cl2 img { left: 921.87px; top: 212.11px; width: 146.37px; height: 67.89px; --co: 0.74; }
.cl3 { --d: 0.45; --co: 0.64; animation-duration: 78s; animation-delay: -37s; animation-direction: alternate; }
.cl3 img { left: 514.58px; top: 100.74px; width: 97.58px; height: 45.26px; --co: 0.64; }
/* Atlas home page option h1b: h1 (the framed app window) with a new headline, a phone in front of the laptop window,
   and a "See Atlas" tour of real app screens. */
.hero.h1b { padding-top: 56px; }
.hero.h1b h1 { font-size: 80px; max-width: 17.5em; margin-inline: auto; }
.hero.h1b .lead { max-width: 46em; margin-top: 10px; }
.hero.h1b .actions { margin-top: 16px; }
.hero.h1b .h-chip { margin-bottom: 10px; }
.h-stage { position: relative; width: min(1120px, 100%); margin: 20px auto 0; }
.h1b .h-win { width: 100%; margin: 0; }
.h1b .app-desk .mc { display: none; }
.h-phone { position: absolute; z-index: 3; right: -46px; top: 250px; width: 228px; border-radius: 36px; border: 5px solid #1d1c1a; background: #1d1c1a;
  box-shadow: 0 1px 1px rgba(29, 28, 26, .1), 0 18px 40px -12px rgba(29, 28, 26, .45), 0 60px 90px -34px rgba(29, 28, 26, .45); }
.h-pview { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 30px; overflow: hidden; background: var(--page); }
.h-pview .app-phone { transform: scale(.5538); }
@media (prefers-reduced-motion: no-preference) { .hero.h1b .h-phone { animation: rise-in 1100ms var(--ease-out) 700ms both; } }

/* the tour */
.tour { padding: 120px 0 8px; text-align: center; }
.tour h2 { margin: 0; }
.tour .lead { margin: 14px auto 0; max-width: 32em; }
.tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px auto 26px; max-width: 900px; }
.tour .tab { position: relative; overflow: hidden; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 500 15px/1 "Inter", system-ui, sans-serif; letter-spacing: -0.01em; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tour .tab:hover { color: var(--ink); border-color: var(--ink-3); }
.tour .tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tour .tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .tour:not(.manual) .tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .6); transform-origin: left; animation: tour-prog 8s linear forwards; }
  .tour.a-still .tab.on::after { animation-play-state: paused; }
  .tour .pane:not([hidden]) .tour-win { animation: tour-in .6s var(--ease-out) both; }
}
@keyframes tour-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tour-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tour-panes { width: min(1120px, 100%); margin: 0 auto; }
.tour .pane { margin: 0; }
.tour-win { border-radius: 22px; background: #fff; border: 1px solid var(--line-2); overflow: hidden; text-align: left;
  box-shadow: 0 1px 1px rgba(29, 28, 26, .04), 0 12px 32px -10px rgba(29, 28, 26, .14), 0 40px 80px -40px rgba(29, 28, 26, .2); }
.tour-view { position: relative; aspect-ratio: 1440 / 900; background: var(--field); }
.tour-view img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tour figcaption { margin: 22px auto 0; max-width: 40em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.tour .tour-hint { display: none; }

@media (max-width: 1160px) { .h-phone { right: -2%; } }
@media (max-width: 960px) {
  .h-phone { width: 176px; top: 190px; border-radius: 30px; border-width: 4px; }
  .h-pview { border-radius: 26px; }
  .tour { padding-top: 96px; }
}
@media (max-width: 560px) {
  .hero.h1b h1 { font-size: 40px; }
  .h1b .h-win { display: none; }
  .h-stage { width: 100%; margin-top: 18px; }
  .h-phone { position: relative; right: auto; top: auto; width: 286px; margin: 0 auto; border-width: 5px; border-radius: 34px; }
  .h-pview { border-radius: 28px; }
  .tour { padding-top: 84px; }
  .tour .lead { margin-top: 10px; }
  .tour-tabs { display: none; }
  .tour-panes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 26px -20px 0; padding: 4px 20px 14px; width: auto; scrollbar-width: none; }
  .tour-panes::-webkit-scrollbar { display: none; }
  .tour .pane, .tour .pane[hidden] { display: block; flex: 0 0 84%; scroll-snap-align: center; }
  .tour .pane .tour-win { animation: none; border-radius: 18px; }
  .tour-view { aspect-ratio: 1170 / 900; overflow: hidden; }
  .tour-view img { inset: auto; position: absolute; width: calc(100% * 1440 / 1170); height: auto; left: calc(-100% * 270 / 1170); top: 0; }
  .tour figcaption { font-size: 15px; margin-top: 14px; padding: 0 4px; text-align: left; }
  .tour .tour-hint { display: block; margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
}
.app-phone .hm-line { font-size: 17px; padding: 0 16px; }