/* Aria homepage. The page scrolls normally over one sky (site.js + sky-gl.js); journey.js runs one day across it, from
   morning at the hero to the next dawn at the download. Sections: the hero (the page as a Mac screen, the notch at its
   top edge), the tour (a MacBook display in the clouds whose notch plays each part of Aria), sunset, the index of
   everything at night, privacy under the aurora, questions, and the download at first light.
   Type: statements are centred and large (hero, sunset, privacy, download); reference is set flush left (index,
   questions). Brand: the glacier sky, Geist, the black notch, the orb. No new accent colours. */

:root { --spring: cubic-bezier(.2, .9, .1, 1); --out: cubic-bezier(.16, 1, .3, 1); --night-glass: rgba(8, 20, 52, .72); --night-line: rgba(178, 200, 240, .22);
  --wrap: 1180px; --shade: 0 0 2px rgba(28, 58, 140, .4), 0 1px 3px rgba(28, 58, 140, .25), 0 2px 28px rgba(28, 58, 140, .5); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- hero */
/* The word, one line under it, the two ways in, the fine print. The word focuses (site.css), then the line rises word
   by word, then everything else arrives with the nav. Scrolling lifts and fades it (site.css); nothing blurs. */
.home-j .hero-in { padding-top: 3vh; }
.hero-line { margin-top: clamp(22px, 4vh, 44px); max-width: 22em; font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.032em; line-height: 1.16; color: #fff; text-shadow: var(--shade); text-wrap: balance; }
.hero-line .hl-1, .hero-line .hl-2 { display: block; }
.hero-line .hl-2 { font-weight: 400; }
.hero-line .w { display: inline-block; }
.js .hero-line .w { opacity: 0; transform: translateY(.38em); }
.hero.lit-line .hero-line .w { opacity: 1; transform: none; transition: opacity 900ms var(--out), transform 1000ms var(--out); transition-delay: calc(var(--i) * 48ms); }
.home-j .hero-cta { margin-top: clamp(28px, 4.4vh, 44px); }
.hero .pill { height: 46px; padding: 0 24px; font-size: 15px; }
.hero .pill-ghost { background: rgba(34, 66, 150, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .pill-ghost:hover { background: rgba(34, 66, 150, .38); }
.hero-fine { margin-top: 18px; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: #fff; text-shadow: var(--shade); }
.js .hero-fine { opacity: 0; transform: translateY(10px); }
.lit2 .hero-fine { opacity: 1; transform: none; transition: opacity 900ms var(--out) 140ms, transform 900ms var(--out) 140ms; }

/* The notch at the top of the page, between the wordmark and the links, as it sits between the menus on a Mac. It is
   there from the first frame (it is hardware); when the sky has come in it wakes: the orb on one side, the agents on
   the other. journey.js shows it only where the nav leaves it room, so it never sits under a link. */
.hero-notch { position: absolute; top: 0; left: 50%; z-index: 3; display: none; align-items: center; width: 156px; height: 32px; padding: 0 13px 0 11px; transform: translateX(-50%);
  opacity: calc(1 - var(--hp, 0) * 7); transition: width 900ms var(--spring); pointer-events: none; }
.hero-notch.fits { display: flex; }
.hn-bg { position: absolute; inset: 0; z-index: -1; background: #000; border-radius: 0 0 14px 14px; }
.hn-bg::before, .hn-bg::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.hn-bg::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); }
.hn-bg::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); }
.hn-orb { width: 18px; height: 18px; flex: none; opacity: 0; transform: scale(.5); transition: opacity 600ms var(--out) 300ms, transform 900ms var(--spring) 300ms; }
.hn-st { margin-left: auto; font-size: 11px; letter-spacing: .02em; color: var(--run); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 600ms var(--out) 420ms, transform 800ms var(--out) 420ms; }
.hn-st b { font-weight: 500; color: var(--ui-text); }
.hero-notch.awake { width: 196px; }
.hero-notch.awake .hn-orb, .hero-notch.awake .hn-st { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the sky's clock: the hour the page is showing you */
.sky-clock { position: fixed; left: var(--gutter); bottom: 22px; z-index: 30; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px 0 10px; border-radius: 99px;
  font: 500 12px/1 var(--mono); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(10, 24, 60, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 700ms var(--out), transform 700ms var(--out); }
.sky-clock.on { opacity: 1; transform: none; }
.sky-clock i { position: relative; width: 10px; height: 10px; border-radius: 50%; overflow: hidden; background: #F4F8FF; box-shadow: 0 0 8px 1px rgba(244, 248, 255, .7); transition: box-shadow 600ms; }
.sky-clock i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1A2E59; transform: translate(10px, -3px) scale(.9); transition: transform 700ms var(--out); }
.sky-clock.moon i::after { transform: translate(3.5px, -1.5px) scale(.88); }
.sky-clock.moon i { box-shadow: 0 0 8px 1px rgba(178, 200, 240, .55); }
@media (max-width: 760px) { .sky-clock { display: none; } }

/* ---------------------------------------------------------------- the notch: the demo panel that hangs from the bezel */
.notch { --nw: 190px; --nh: 32px; position: absolute; top: 0; left: 50%; z-index: 5; width: var(--nw); height: var(--nh);
  transform: translateX(-50%); color: var(--ui-text); transition: width 760ms var(--spring), height 760ms var(--spring); }
.notch-bg { position: absolute; inset: 0; background: #000; border-radius: 0 0 30px 30px; box-shadow: 0 40px 90px -30px rgba(4, 12, 40, .7), 0 0 0 1px rgba(255, 255, 255, .06); }
.notch-bg::before, .notch-bg::after { content: ""; position: absolute; top: 0; width: 16px; height: 16px; }
.notch-bg::before { left: -16px; background: radial-gradient(circle at 0 100%, transparent 15.5px, #000 16px); }
.notch-bg::after { right: -16px; background: radial-gradient(circle at 100% 100%, transparent 15.5px, #000 16px); }
.notch-head { position: relative; height: 54px; padding: 0 24px; display: flex; align-items: center; gap: 12px; opacity: var(--open, 0); transition: opacity 300ms; }
.n-orb { width: 26px; height: 26px; }
.n-title { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.n-status { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--run); white-space: nowrap; }
.notch[data-tone=wait] .n-status { color: var(--wait); }
.notch[data-tone=glacier] .n-status { color: var(--glacier-500); }
.notch.closed .notch-head, .notch.closed .nv { opacity: 0 !important; }

.nv { position: absolute; left: 0; right: 0; top: 54px; padding: 0 24px 24px; opacity: 0; transform: translateY(-8px) scale(.985); pointer-events: none; contain: layout paint;
  transition: opacity 360ms var(--out), transform 520ms var(--out); }
.nv.on { opacity: 1; transform: none; }
.nv:not(.on):not(.leaving) { content-visibility: hidden; }
.nb { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 99px; background: var(--ui-pill-2); color: var(--ui-text); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 300ms, color 300ms, transform 300ms var(--spring); }
.nb-ok { background: var(--ui-text); color: #000; }
.nb-no { color: var(--coral); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--glacier-500); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai { width: 30px; height: 30px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; flex: none; background: #fff; }
.ai img { width: 100%; height: 100%; object-fit: cover; }
.ai-dark { background: #1C1D21; } .ai-dark img { width: 62%; height: 62%; object-fit: contain; filter: invert(1); }

/* Agents */
.ag-rows { display: grid; gap: 2px; }
.ag-rows li { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--out), transform 600ms var(--out), background 400ms, box-shadow 400ms; transition-delay: calc(var(--i) * 70ms); }
.nv-agents.on .ag-rows li { opacity: 1; transform: none; }
.ag-rows .ai { grid-row: 1 / 3; }
.ag-rows b { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-rows em { grid-column: 2; font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.ag-rows i { grid-row: 1 / 3; grid-column: 3; font-style: normal; font-size: 12px; color: var(--ui-grey); }
.st-run { color: var(--run); } .st-obs { color: var(--ui-grey); }
.notch[data-step="1"] .ag-ask, .notch[data-step="2"] .ag-ask { background: rgba(240, 180, 85, .08); box-shadow: inset 3px 0 0 var(--wait); }
.notch[data-step="1"] .ag-ask em, .notch[data-step="2"] .ag-ask em { color: var(--wait); }
.ag-approve, .ag-replay { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: #111216; box-shadow: inset 0 0 0 1px var(--ui-hair); }
.notch[data-step="1"] .ag-approve, .notch[data-step="2"] .ag-approve { display: block; animation: rise 520ms var(--out) both; }
.notch[data-step="3"] .ag-replay { display: block; animation: rise 520ms var(--out) both; }
.notch[data-step="3"] .ag-rows li:not(.ag-ask) { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(-10px); } }
.ag-approve > p:first-child, .ag-replay > p:first-child { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-grey); }
.ag-approve code { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ui-text); }
.ag-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ag-steer { display: none; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ui-field); box-shadow: inset 0 0 0 1px rgba(143, 178, 245, .35); }
.ag-steer > span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--glacier-500); }
.ag-steer p { margin-top: 4px; font-size: 14.5px; min-height: 1.4em; }
.notch[data-step="2"] .ag-steer { display: block; animation: rise 420ms var(--out) both; }
.notch[data-step="2"] .ag-approve .ag-btns { display: none; }
.ag-sent { display: none; margin-top: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--run); }
.notch.sent .ag-sent { display: block; animation: rise 400ms var(--out) both; }
.notch.sent .ag-steer .caret { display: none; }
.rp-track { position: relative; height: 26px; margin-top: 14px; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; border-radius: 1px; background: #26272C; }
.rp-fill { position: absolute; left: 0; top: 12px; height: 2px; width: calc(var(--sp, 0) * 100%); background: var(--glacier-500); border-radius: 1px; }
.rp-track b { position: absolute; top: 8px; left: calc(var(--x) * 100%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #55575E; transition: background 200ms, transform 300ms var(--spring); }
.rp-track b.lit { background: var(--glacier-500); transform: scale(1.2); } .rp-track b.w.lit { background: var(--wait); } .rp-track b.c.lit { background: var(--run); }
.rp-head { position: absolute; top: 0; left: calc(var(--sp, 0) * 100%); width: 2px; height: 26px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 0 12px rgba(255, 255, 255, .7); }
.rp-log { margin-top: 12px; display: grid; gap: 6px; font-size: 12px; color: var(--ui-dim); counter-reset: rp; }
.rp-log li { transition: color 200ms; }
.rp-log li.lit { color: var(--ui-text); }
.rp-log li.lit::before { content: "→ "; color: var(--glacier-500); }

/* Ask */
.ak-said { font-size: 19px; line-height: 1.45; letter-spacing: -.015em; min-height: 2.9em; }
.ak-cards { display: grid; gap: 7px; margin-top: 14px; }
.ak-cards > div { padding: 10px 14px; border-radius: 13px; background: var(--ui-pill); opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--out), transform 500ms var(--out); transition-delay: calc(var(--i) * 90ms); }
.ak-cards span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wait); }
.ak-cards p { margin-top: 3px; font-size: 13.5px; color: var(--ui-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notch[data-step="1"] .ak-cards > div, .notch[data-step="2"] .ak-cards > div { opacity: 1; transform: none; }
.ak-btns { display: none; gap: 8px; margin-top: 12px; }
.notch[data-step="1"] .ak-btns, .notch[data-step="2"] .ak-btns { display: flex; }
.notch[data-step="2"] .ak-btns .nb-ok { transform: scale(.92); background: var(--run); }
.ak-done { display: none; margin-top: 8px; gap: 7px; }
.notch[data-step="3"] .ak-done { display: grid; animation: rise 500ms var(--out) both; }
.notch[data-step="3"] .ak-cards, .notch[data-step="3"] .ak-btns { display: none; }
.ak-done p { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.ak-done p.mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--run); }
.ak-done b { color: var(--run); font-weight: 500; }
.ak-undo .nb { margin-left: auto; height: 28px; font-size: 12px; }
.notch.undone .ak-undo { color: var(--ui-grey); text-decoration: line-through; }
.notch.undone .ak-undo .nb { display: none; }

/* Laps */
.lp-src { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-src span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--ui-pill); font-size: 13px; opacity: 0; transform: scale(.8); transition: opacity 400ms var(--out), transform 500ms var(--spring); }
.lp-src span:nth-child(2) { transition-delay: 60ms; } .lp-src span:nth-child(3) { transition-delay: 120ms; } .lp-src span:nth-child(4) { transition-delay: 180ms; } .lp-src span:nth-child(5) { transition-delay: 240ms; } .lp-src span:nth-child(6) { transition-delay: 300ms; }
.nv-laps.on .lp-src span { opacity: 1; transform: none; }
.lp-src img { width: 16px; height: 16px; border-radius: 4px; }
.notch:not([data-step="0"]) .lp-src { display: none; }
.lp-card { display: none; padding: 14px 16px; margin-top: 4px; border-radius: 16px; background: #0c0d10; box-shadow: inset 0 0 0 1px var(--ui-hair); }
.notch[data-step="1"] .lp-card, .notch[data-step="2"] .lp-card, .notch[data-step="3"] .lp-card { display: block; }
.lp-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ui-grey); }
.lp-head span:first-child { color: var(--ui-text); }
.lp-lanes { display: grid; gap: 11px; margin-top: 14px; }
.lp-lanes p { position: relative; display: flex; align-items: center; gap: 12px; }
.lp-lanes .ai { width: 22px; height: 22px; border-radius: 5px; }
.lp-lanes i { position: relative; flex: 1; height: 8px; border-radius: 4px; background: #1C1D21; overflow: hidden; }
.lp-lanes i::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); border-radius: 4px; background: var(--glacier-900);
  transform-origin: 0 0; transform: scaleX(var(--lane, 0)); }
.lp-lanes i.ok::after { background: var(--run); }
.lp-lanes b { position: absolute; top: -4px; left: calc(34px + var(--x) * (100% - 34px)); width: 2px; height: 16px; border-radius: 1px; background: var(--wait); opacity: var(--marks, 0); }
.lp-stats { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.notch[data-step="2"] .lp-stats, .notch[data-step="3"] .lp-stats { display: grid; animation: rise 500ms var(--out) both; }
.lp-stats p { display: grid; gap: 2px; }
.lp-stats b { font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--ui-text); font-family: var(--sans); }
.lp-stats span { font-size: 11px; color: var(--ui-grey); }
.lp-stats em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--glacier-500); }
.lp-share { display: none; margin-top: 12px; gap: 14px; align-items: center; justify-content: space-between; font-size: 12px; }
.notch[data-step="3"] .lp-share { display: flex; animation: rise 500ms var(--out) both; }
.notch[data-step="3"] .lp-stats { display: none; }
.lp-mask { display: grid; gap: 8px; color: var(--ui-grey); min-width: 0; }
.lp-mask p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mask s { text-decoration: none; color: var(--coral); border-radius: 3px; background: linear-gradient(90deg, #26272C 0 0) no-repeat left / calc(var(--mask, 0) * 100%) 100%; transition: color 300ms; }
.notch.masked .lp-mask s { color: transparent; }
.lp-levels { display: grid; gap: 6px; flex: none; }
.lp-levels span { padding: 6px 12px; border-radius: 99px; background: var(--ui-pill); color: var(--ui-grey); font-size: 11.5px; }
.lp-levels .on { background: var(--ui-text); color: #000; }

/* Rooms */
.rm-top { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ui-grey); }
.rm-orb { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 30% 25%, rgba(127, 212, 154, .5), #3FB8A8); box-shadow: 0 0 14px rgba(63, 184, 168, .6);
  animation: breathe calc(2.6s - var(--energy, 0) * 1.6s) ease-in-out infinite alternate; will-change: transform; }
@keyframes breathe { to { transform: scale(1.25); opacity: .85; } }
.rm-who { margin-left: auto; display: flex; }
.rm-who i { width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-style: normal; background: #26272C; color: var(--ui-text); box-shadow: 0 0 0 2px #000;
  opacity: 0; transform: scale(.4); transition: opacity 300ms, transform 400ms var(--spring); transition-delay: calc(var(--i) * 80ms); }
.notch:not([data-step="0"]) .rm-who i { opacity: 1; transform: none; }
.rm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rm-tiles p { position: relative; padding: 12px; border-radius: 14px; background: var(--ui-pill); font-size: 14px; display: grid; gap: 5px;
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity 500ms var(--out), transform 600ms var(--spring), box-shadow 400ms; transition-delay: calc(var(--i) * 100ms); }
.nv-rooms.on .rm-tiles p { opacity: 1; transform: none; }
.rm-tiles span { font-size: 11px; color: var(--ui-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tiles em { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.rm-tiles u { text-decoration: none; font-size: 11px; color: var(--glacier-500); opacity: 0; transition: opacity 300ms; }
.notch:not([data-step="0"]) .rm-tiles u { opacity: 1; }
.notch:not([data-step="0"]) .t-run { box-shadow: inset 0 0 0 1px rgba(143, 178, 245, .5); }
.t-run em { color: var(--run); } .t-wait em { color: var(--wait); } .t-done em { color: var(--glacier-500); }
.notch[data-step="3"] .t-wait { box-shadow: inset 0 0 0 1px rgba(255, 122, 107, .6); }
.notch[data-step="3"] .t-wait em { color: var(--coral); }
.rm-bubbles { position: relative; margin-top: 12px; min-height: 84px; }
.rm-bubbles p { position: absolute; inset: 0 auto auto 0; max-width: 92%; padding: 11px 14px; border-radius: 14px; background: #111216; box-shadow: inset 0 0 0 1px var(--ui-hair); font-size: 14px; display: grid; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--out), transform 500ms var(--out); }
.rm-bubbles span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--glacier-500); }
.rm-bubbles em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--run); }
.notch[data-step="2"] .rm-b1, .notch[data-step="3"] .rm-b2 { opacity: 1; transform: none; }

/* Aria in the room */
.cd-goal { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ui-text); }
.cd-tasks { display: grid; gap: 6px; margin-top: 12px; }
.cd-tasks li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; background: var(--ui-pill); font-size: 13.5px;
  opacity: 0; transform: translateX(-10px); transition: opacity 400ms var(--out), transform 500ms var(--out), box-shadow 400ms; transition-delay: calc(var(--i) * 110ms); }
.nv-conduct.on .cd-tasks li { opacity: 1; transform: none; }
.cd-tasks em { font-style: normal; color: var(--ui-grey); white-space: nowrap; font-size: 12.5px; }
.cd-tasks .gate em { color: var(--wait); }
.notch[data-step="2"] .cd-tasks .gate { box-shadow: inset 0 0 0 1px var(--wait); }
.cd-thread { display: none; gap: 7px; margin-top: 12px; }
.notch[data-step="1"] .cd-thread { display: grid; animation: rise 500ms var(--out) both; }
.cd-thread p { max-width: 86%; padding: 9px 12px; border-radius: 12px; background: var(--ui-pill); font-size: 13.5px; }
.cd-thread p.me { justify-self: end; background: #26272C; }
.cd-thread span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--glacier-500); margin-bottom: 2px; }
.cd-stop { margin-top: 14px; text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); opacity: .5; transition: opacity 300ms; }
.notch[data-step="3"] .cd-stop { opacity: 1; }
.notch[data-step="3"] .cd-tasks li:not(.gate) em { color: var(--coral); }

/* Teams */
.nv-team { display: grid; gap: 10px; }
.tm-card { display: none; padding: 14px 16px; border-radius: 16px; background: #111216; box-shadow: inset 0 0 0 1px var(--ui-hair); }
.tm-card p { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-grey); }
.tm-card b { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; }
.tm-card > span { display: block; margin-top: 3px; font-size: 13px; color: var(--ui-grey); }
.tm-card code { display: block; margin-top: 8px; font-size: 13.5px; }
.tm-card em { display: none; margin-top: 10px; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--run); }
.notch.ok .tm-3 em { display: block; } .notch.ok .tm-3 .ag-btns { display: none; }
.tm-1 { box-shadow: inset 3px 0 0 var(--wait), inset 0 0 0 1px var(--ui-hair); }
.notch[data-step="0"] .tm-1, .notch[data-step="1"] .tm-2, .notch[data-step="2"] .tm-3, .notch[data-step="3"] .tm-3 { display: block; animation: rise 500ms var(--out) both; }
.tm-pool { display: none; align-items: center; gap: 12px; font-size: 12px; color: var(--ui-grey); }
.notch[data-step="3"] .tm-pool { display: flex; animation: rise 500ms var(--out) both; }
.tm-pool i { flex: 1; height: 6px; border-radius: 3px; background: #26272C; overflow: hidden; }
.tm-pool b { display: block; height: 100%; width: calc(var(--sp, 0) * 76%); background: linear-gradient(90deg, var(--glacier-900), var(--glacier-500)); }

/* Community */
.cm-cal { display: grid; grid-template-columns: repeat(26, 1fr); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; aspect-ratio: 26 / 7; }
.cm-cal i { border-radius: 2px; background: #1C1D21; transition: background 250ms; }
.cm-cal i.l1 { background: #2a3f6a; } .cm-cal i.l2 { background: var(--glacier-900); } .cm-cal i.l3 { background: var(--glacier-500); }
.cm-streak { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-grey); }
.cm-streak b { color: var(--ui-text); font-weight: 500; }
.cm-feed { display: none; gap: 7px; margin-top: 12px; }
.notch[data-step="1"] .cm-feed, .notch[data-step="3"] .cm-feed { display: grid; animation: rise 500ms var(--out) both; }
.cm-feed p { max-width: 86%; padding: 10px 13px; border-radius: 12px; background: var(--ui-pill); font-size: 14px; }
.cm-feed p.me { justify-self: end; background: #26272C; }
.cm-feed span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--glacier-500); margin-bottom: 2px; }
.cm-clubs { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.notch[data-step="2"] .cm-clubs { display: flex; animation: rise 500ms var(--out) both; }
.cm-clubs span { padding: 8px 14px; border-radius: 99px; background: var(--ui-pill); font-size: 14px; }
.cm-clubs span:nth-child(3) { background: var(--ui-text); color: #000; }

/* The demo shows one thing at a time: while a session asks for approval, the other sessions step aside, and while the
   room talks to Aria the plan steps aside. That keeps the tallest moment of every chapter inside the stage. */
.notch[data-step="1"] .ag-rows li:not(.ag-ask), .notch[data-step="2"] .ag-rows li:not(.ag-ask) { display: none; }
.notch[data-step="1"] .cd-tasks { display: none; }
.notch[data-step="1"] .cd-thread { margin-top: 14px; }

/* ---------------------------------------------------------------- the tour */
/* One MacBook display floating in the sky. Its screen is a window onto the same sky (the clouds part around it), the
   notch is cut into the top of the bezel and the menu bar runs either side of it, as on the real thing. The chapter and
   its four steps sit on the lower part of the screen, where the wallpaper deepens enough for small type to read over
   the brightest cloud. The chapters are listed under the display, next to the words they change. */
.home-j main > .product { color: #fff; }
.tour { max-width: var(--wrap); margin: clamp(44px, 7vh, 72px) auto 0; }

/* the bezel is a border, not a fill: the screen inside it has to stay clear to the sky */
.mac { --stage: 440px; position: relative; border: 9px solid #000; border-radius: 31px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 80px 140px -60px rgba(8, 20, 52, .8), 0 30px 60px -36px rgba(8, 20, 52, .55); }
.home-j .mac[data-rv] { transform: translateY(48px); }
.home-j .mac[data-rv].in { transform: none; transition-duration: 1200ms; }
.scr { position: relative; isolation: isolate; display: grid; grid-template-rows: var(--stage) auto; border-radius: 22px; overflow: hidden; background: rgba(12, 30, 80, .1); }
/* the wallpaper deepens toward the bottom of the screen, under the words */
.scr::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 20, 52, 0) 42%, rgba(8, 20, 52, .4) 56%, rgba(8, 20, 52, .74) 70%, rgba(8, 20, 52, .88) 86%, rgba(8, 20, 52, .9)); }
.scr .notch { z-index: 3; }

/* the menu bar: the frontmost app's menus on the left, status and the sky's own hour on the right */
.mbar { position: absolute; inset: 0 0 auto; z-index: 1; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 18px;
  font-size: 13px; letter-spacing: -.005em; color: #fff; background: rgba(255, 255, 255, .17); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1); text-shadow: 0 1px 2px rgba(20, 40, 110, .35); }
.mbar-l, .mbar-r { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.mbar-l b { font-weight: 600; }
.mbar-r { gap: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mbar svg { width: 17px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; overflow: visible; }
.mbar svg + svg { width: 23px; }
.mbar svg .f { fill: #fff; stroke: none; }

/* the words on the screen: one chapter at a time, all seven stacked in one cell so the screen never changes height */
.tour-copy { grid-row: 2; position: relative; display: grid; padding: 0 clamp(28px, 3.2vw, 44px) clamp(26px, 3vw, 38px); color: #fff; }
.chap { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s 300ms; }
.chap.on { opacity: 1; visibility: visible; transition: opacity 500ms; }
.chap:not(.on):not(.leaving) { content-visibility: hidden; }
.chap h3 { max-width: 24em; font-size: clamp(26px, 2.5vw, 38px); font-weight: 500; letter-spacing: -.042em; line-height: 1.06; text-wrap: balance; }
.chap h3 .w { display: inline-block; }
.chap.on h3 .w { animation: wordIn 800ms var(--out) both; animation-delay: calc(var(--wi) * 45ms); }
@keyframes wordIn { from { opacity: 0; transform: translateY(.4em); } }

/* the four steps are the four moments the notch plays: a line fills over each one while it plays */
.steps-l { margin: 26px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); }
.steps-l li { position: relative; padding-top: 16px; }
.steps-l li::before, .steps-l li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; }
.steps-l li::before { background: rgba(255, 255, 255, .2); }
.steps-l li::after { background: #fff; transform-origin: 0 0; transform: scaleX(0); }
.steps-l li.on::after { transform: scaleX(var(--sp, 0)); }
.steps-l li.done::after { transform: scaleX(1); opacity: .45; }
.steps-l button { display: grid; align-content: start; gap: 6px; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.steps-l b { font-size: 15.5px; font-weight: 500; letter-spacing: -.016em; line-height: 1.3; color: rgba(255, 255, 255, .64); transition: color 300ms; }
.steps-l span { font-size: 14px; line-height: 1.48; color: rgba(232, 240, 255, .56); transition: color 300ms; }
.steps-l li.on b, .steps-l button:hover b { color: #fff; }
.steps-l li.on span { color: rgba(232, 240, 255, .9); }
.ch-note { margin-top: 20px; font-size: 13px; line-height: 1.5; color: rgba(232, 240, 255, .66); }

/* the chapters, under the display */
.tour-bar { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; }
/* solid tinted glass, no backdrop blur: a blur over the live sky is re-rendered on every sky frame */
.tour-tabs, .tour-play { background: rgba(10, 24, 60, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 30px -12px rgba(8, 20, 52, .5); }
.tour-tabs { display: flex; gap: 2px; min-width: 0; padding: 5px; border-radius: 99px; overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { flex: none; height: 38px; padding: 0 17px; border: 0; border-radius: 99px; background: none; color: rgba(255, 255, 255, .8); font: 500 14px/1 var(--sans); letter-spacing: -.01em; cursor: pointer;
  transition: background var(--quick), color var(--quick); }
.tour-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.tour-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.tour-tabs button:focus-visible, .tour-play:focus-visible, .steps-l button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour-play { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; transition: background var(--quick); }
.tour-play:hover { background: rgba(10, 24, 60, .82); }
/* laptop-height screens: the display and its chapters fit under the floating nav in one view */
@media (min-width: 761px) and (max-height: 960px) {
  .mac { --stage: 424px; }
  .tour-copy { padding-bottom: 22px; }
  .chap h3 { font-size: clamp(24px, 2.2vw, 32px); }
  .steps-l { margin-top: 18px; }
  .ch-note { margin-top: 14px; }
  .tour-bar { margin-top: 14px; }
}
.tour-play svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; }
.tour .i-play, .tour.paused .i-pause { display: none; }
.tour.paused .i-play { display: block; }

/* ---------------------------------------------------------------- sunset: one line, the sun going down beneath it */
.home-j main > .dusk { min-height: 118vh; min-height: 118svh; padding-top: clamp(150px, 28vh, 300px); color: #fff; text-align: center; }
.dusk-h { max-width: 15em; margin: 0 auto; font-size: clamp(46px, 6.6vw, 118px); font-weight: 500; letter-spacing: -.056em; line-height: .97; text-wrap: balance; }
.dusk-h span { display: block; }
.dusk-h span:last-child { color: #B2C8F0; }
.dusk-sub { max-width: 30em; margin: clamp(24px, 3.6vh, 36px) auto 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: rgba(232, 240, 255, .88); text-wrap: balance; }

/* ---------------------------------------------------------------- the index: every feature, under the moon */
/* Reference, so it is set flush left like a book's index: the count large on the left, the key on the right, eight
   short columns under a hairline each. The moon rises in the space the heading leaves on the right. */
.home-j main > .index { color: #fff; }
.stars-h { max-width: var(--wrap); margin: 0 auto; }
.stars-h h2 { font-size: clamp(48px, 6.6vw, 112px); font-weight: 500; letter-spacing: -.058em; line-height: .92; }
.stars-sub { max-width: 27em; margin-top: clamp(20px, 3vh, 30px); font-size: 17px; line-height: 1.5; color: rgba(232, 240, 255, .8); text-wrap: pretty; }
.stars-sub em, .index-grid em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--glacier-300); }
.index-grid { max-width: var(--wrap); margin: clamp(64px, 10vh, 112px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(52px, 8vh, 80px) clamp(24px, 3vw, 44px); }
.ix h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .55);
  font-size: 19px; font-weight: 500; letter-spacing: -.022em; }
.ix h3 span { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: rgba(232, 240, 255, .55); font-variant-numeric: tabular-nums; }
.ix ul { margin: 16px 0 0; padding: 0; list-style: none; }
.ix li { padding: 6px 0; font-size: 15px; line-height: 1.42; color: rgba(232, 240, 255, .8); }
.ix em { margin-left: 8px; }

/* ---------------------------------------------------------------- privacy: one line down the middle */
/* Your Mac on the left of the line, your team on the right. Each side reads toward the line, and the rows face each
   other across it (subgrid), so the page itself draws the boundary the sentence promises. */
.vow { position: relative; color: #fff; text-align: center; }
.home-j main > .vow { padding-top: clamp(120px, 20vh, 220px); }
.vow-h { max-width: 15em; margin: 0 auto; font-size: clamp(42px, 6vw, 108px); font-weight: 500; letter-spacing: -.056em; line-height: .96; text-wrap: balance; }
.vow-h span { display: block; }
.vow-h span:last-child { color: #B2C8F0; }
.vow-split { position: relative; max-width: 1040px; margin: clamp(48px, 7vh, 80px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto repeat(4, auto); column-gap: clamp(64px, 9vw, 128px); }
.vow-split::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; margin-left: -.5px; background: rgba(178, 200, 240, .5); }
.vow-split::after { content: ""; position: absolute; left: 50%; top: -6px; width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(178, 200, 240, .6); }
.vow-side { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; }
.vow-side h3 { padding-bottom: 14px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.vow-side ul { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
.vow-side li { padding: 10px 0; font-size: 17px; line-height: 1.45; letter-spacing: -.012em; color: rgba(232, 240, 255, .88); text-wrap: balance; text-shadow: 0 0 14px rgba(5, 8, 20, .9), 0 0 4px rgba(5, 8, 20, .8); }
.vow-side h3, .vow-h { text-shadow: 0 0 18px rgba(5, 8, 20, .6); }
.vow-mine { text-align: right; }
.vow-team { text-align: left; }
.vow-more { margin-top: clamp(40px, 6vh, 60px); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* night glass under the outline button: the aurora's hem can pass right behind it */
.vow-more a { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 99px; color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; background: var(--night-glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); transition: background 200ms; }
.vow-more a:hover { background: rgba(26, 46, 89, .9); }
.vow-more a:last-child { background: #fff; color: var(--ink); box-shadow: none; }
.vow-more a:last-child:hover { background: var(--glacier-100); }

/* ---------------------------------------------------------------- questions: the heading on the left, answers on the right */
.home-j main > .faqsec { padding-top: clamp(130px, 22vh, 240px); color: #fff; }
.faq-in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faq-head h2 { font-size: clamp(40px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.faq-head p { margin-top: 20px; font-size: 16px; color: rgba(232, 240, 255, .74); }
.faq-head a { color: #fff; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.faq-head a:hover { text-decoration-color: #fff; }
.home-j .faq { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; }
.home-j .faq details { border-top: 1px solid rgba(178, 200, 240, .22); }
.home-j .faq details:first-child { border-top: 1px solid rgba(255, 255, 255, .55); }
.home-j .faq details:last-child { border-bottom: 1px solid rgba(178, 200, 240, .22); }
.home-j .faq summary { padding: 22px 0; color: #fff; font-size: clamp(17px, 1.45vw, 20px); }
.home-j .faq summary::after { filter: invert(1); background-color: rgba(14, 15, 18, .12); }
.home-j .faq summary:hover::after { background-color: rgba(14, 15, 18, .24); }
.home-j .faq details p { padding: 0 52px 26px 0; color: rgba(232, 240, 255, .82); }
.home-j .faq :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- the download, at first light */
.home-j main > .join { min-height: 100vh; min-height: 100svh; padding-bottom: clamp(60px, 10vh, 120px); display: grid; place-items: center; color: #fff; }
.join-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.home-j .join-h { margin: 0; font-size: clamp(72px, 12vw, 210px); font-weight: 500; letter-spacing: -.064em; line-height: .88; text-shadow: var(--shade); }
.home-j .join-sub { max-width: 26em; margin: clamp(22px, 3.4vh, 34px) auto 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: rgba(240, 245, 255, .92); text-shadow: var(--shade); text-wrap: balance; }
.join-act { margin-top: clamp(32px, 5vh, 48px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.join .dl-btn { gap: 14px; height: 64px; padding: 0 30px 0 24px; border-radius: 99px; background: #fff; color: var(--ink); text-align: left;
  box-shadow: 0 24px 60px -18px rgba(8, 20, 52, .65), 0 0 0 1px rgba(255, 255, 255, .6); transition: transform var(--quick) var(--enter), box-shadow var(--ui) var(--enter); }
.join .dl-btn:hover { box-shadow: 0 30px 70px -18px rgba(8, 20, 52, .75), 0 0 0 1px #fff; }
.join .dl-btn svg { width: 20px; height: 20px; stroke-width: 1.7; }
.join .dl-btn b { font-size: 17px; letter-spacing: -.015em; }
.join .dl-btn small { font-size: 12.5px; opacity: .6; margin-top: 2px; }
.join .dl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.join-fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13.5px; color: rgba(240, 245, 255, .84); text-shadow: var(--shade); }
.join-fine a { color: #fff; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
.join-fine a:hover { text-decoration-color: #fff; }

/* the film */
.film-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid #ffffff50; border-radius: 22px; padding: 0; color: #fff; background: #000; box-shadow: 0 40px 100px #0009; overflow: auto; }
.film-dialog::backdrop { background: #0c1b3bc7; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.film-bar { min-height: 58px; padding: 8px 14px 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; }
.film-bar button { display: flex; gap: 12px; align-items: center; min-height: 42px; padding: 8px 14px; border: 0; border-radius: 12px; background: #ffffff16; color: #fff; font-size: 12px; cursor: pointer; }
.film-bar kbd { font-size: 11px; color: #a5acbb; }
.film-dialog .player { width: 100%; margin: 0; max-width: none; aspect-ratio: 16 / 9; border: 0; border-radius: 0; box-shadow: none; }
.film-dialog .player video { width: 100%; height: 100%; object-fit: contain; clip-path: none; }
html.film-open { overflow: hidden; }

/* ---------------------------------------------------------------- laptop, tablet and phone */
@media (max-width: 1100px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 900 the screen is too narrow for four steps side by side: they stack, and only the one playing opens */
@media (max-width: 900px) {
  .steps-l { grid-template-columns: 1fr; margin-top: 20px; }
  .steps-l li { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .steps-l li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .steps-l li::before { display: none; }
  .steps-l li::after { top: -1px; height: 1px; }
  .steps-l button { gap: 0; padding: 13px 0; }
  .steps-l span { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms var(--out), opacity 400ms, margin-top 500ms var(--out); }
  .steps-l li.on span { max-height: 7em; opacity: 1; margin-top: 5px; }
  .faq-in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* on a phone the display runs edge to edge: the top of a bigger screen, its notch in the middle */
  .tour { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .mac { --stage: 432px; border-width: 7px 0 0; border-radius: 0; box-shadow: 0 60px 100px -50px rgba(8, 20, 52, .7); }
  .scr { border-radius: 0; }
  .mbar { height: 30px; padding: 0 14px; font-size: 12px; }
  .mbar-l span, .mbar svg { display: none; }
  .tour-copy { padding: 0 var(--gutter) 26px; }
  .chap h3 { font-size: 27px; }
  .tour-bar { justify-content: flex-start; padding: 0 var(--gutter); }
  .tour-tabs button { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .tour-play { width: 46px; height: 46px; }
  .notch-head { height: 48px; padding: 0 16px; }
  .nv { top: 48px; padding: 0 14px 16px; }
  .ag-rows li { padding: 8px 6px; column-gap: 10px; }
  .ag-rows b { font-size: 13.5px; }
  .ag-rows li:nth-child(4) { display: none; }
  .ak-said { font-size: 16px; }
  .rm-tiles { grid-template-columns: 1fr 1fr; } .rm-tiles p:nth-child(3) { display: none; }
  .lp-stats { grid-template-columns: 1fr 1fr; }
  .lp-share { flex-direction: column; align-items: stretch; } .lp-levels { grid-auto-flow: column; }
  .cm-cal { grid-template-columns: repeat(18, 1fr); aspect-ratio: 18 / 7; } .cm-cal i:nth-child(n+127) { display: none; }
  .index-grid { grid-template-columns: 1fr 1fr; gap: 44px 20px; }
  .ix h3 { font-size: 17px; }
  .ix li { font-size: 14px; }
  /* privacy: your side, the line across, their side */
  .vow-split { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; text-align: left; max-width: 30em; }
  .vow-split::before { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 1px; margin: 0; position: relative; grid-row: 2; display: block; margin: 26px 0; }
  .vow-split::after { display: none; }
  .vow-side, .vow-side ul { grid-row: auto; display: block; }
  .vow-mine, .vow-team { text-align: left; }
  .vow-side li { font-size: 16px; padding: 8px 0; }
  .home-j .faq details p { padding-right: 8px; }
}
@media (max-width: 420px) {
  .hero .pill { min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .nv, .chap, .chap h3 .w, .steps-l span, .ag-rows li, .rm-tiles p, .cd-tasks li, .ak-cards > div, .hero-line .w, .hero-notch, .hn-orb, .hn-st { transition: none !important; animation: none !important; }
  .rm-orb { animation: none !important; }
}

/* smooth scrolling is done in JS (Lenis); a CSS smooth scroll on top of it fights it every frame */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* looping animations only run while their part of the page is on screen */
.caret, .rm-orb { animation-play-state: paused; }
.nv.on .caret, .nv.on .rm-orb { animation-play-state: running; }
.nv:not(.on) .caret, .nv:not(.on) .rm-orb { animation: none; }

/* reveals on the homepage rise and fade without blur: an animated blur over display-size type costs a long first frame */
.home-j [data-rv] { filter: none !important; }

/* the support link beside the questions is a full touch target, not just its words */
.faq-head a { display: inline-flex; align-items: center; min-height: 44px; }