/* The page under the hero: every section its own form, no containers. Words and lines rise; pictures sit on the page. */
.lines { display: grid; margin: 18px 0 28px; }
.lines li { grid-area: 1 / 1; font: 800 clamp(36px, 4.8vw, 68px)/1.05 var(--display); letter-spacing: -0.04em; opacity: 0; transform: translateY(-14px); transition: opacity .22s, transform .3s; }
.lines li.on { opacity: 1; transform: none; transition: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.w b { display: inline-block; font-weight: inherit; }
.on > .w b, .on .w b { animation: wordup .7s calc(var(--n) * 60ms + 80ms) cubic-bezier(.2,.9,.2,1) both; }
@keyframes wordup { from { transform: translateY(112%); } }
.lines em, .pick em { position: relative; font-style: normal; white-space: nowrap; }
.lines em::after, .pick em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .085em; border-radius: .05em; background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #f59e0b, #ec4899); transform-origin: 0 50%; }
.lines li.on em::after, .pick.on em::after { animation: under .8s .55s cubic-bezier(.65,0,.2,1) both; }
/* Headlines wait out of sight, so they only ever arrive once: nothing is drawn before its turn. */
.pick .w b { transform: translateY(112%); transition: transform .25s ease-in; } .pick.on .w b { transform: none; transition: none; }
.pick em::after { transform: scaleX(0); transition: transform .2s; } .pick.on em::after { transform: none; transition: none; }
.pick-sub { opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; } .pick.on + .pick-sub { opacity: 1; transform: none; transition: opacity .5s .45s, transform .6s var(--soft) .45s; }
.tagline { display: flex; align-items: center; gap: 10px; font: 400 15px/1.2 Michroma, sans-serif; letter-spacing: .01em; } .tagline .mark { width: 24px; height: 24px; }

/* The statement: one set of shapes, turned by the scroll, from a voice into notes into work into the ring (statement.js). */
.state { position: relative; height: 300vh; }
.state-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 112px 16px 52px; overflow: hidden; }
.state-lines { display: grid; text-align: center; font: 800 clamp(34px, 6vw, 88px)/1.04 var(--display); letter-spacing: -.045em; }
.state-line { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(-18px); transition: opacity .25s, transform .35s; }
.state-line.on { opacity: 1; transform: none; transition: none; }
.state-line em { position: relative; font-style: normal; white-space: nowrap; } .state-line em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .085em; border-radius: .05em; background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #f59e0b, #ec4899); transform-origin: 0 50%; } .state-line.on em::after { animation: under .8s .5s cubic-bezier(.65,0,.2,1) both; }
.state-pin canvas { display: block; width: 100%; height: 100%; min-height: 0; margin-top: 18px; }
.state-bar { position: absolute; left: 50%; bottom: 26px; width: min(220px, 50vw); height: 3px; margin-left: calc(min(220px, 50vw) / -2); border-radius: 2px; background: rgb(19 23 29 / .1); } .state-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8b5cf6, #06b6d4, #f59e0b); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* Meetings: pinned to the screen; scrolling moves the story on. */
.story { position: relative; height: 560vh; }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: var(--shell); margin: 0 auto; padding: 70px 24px 0; }
.rail { display: flex; gap: 6px; max-width: 300px; }
.rail button { flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.rail i { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: rgb(19 23 29 / .12); overflow: hidden; transition: height .2s; } .rail button:hover i { height: 7px; }
.rail i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #8b5cf6, #06b6d4, #f59e0b); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.story .fibre { stroke: rgb(17 96 206 / .45); } .story .pack { background: #1160ce; box-shadow: 0 0 12px 2px rgb(17 96 206 / .6); }

/* Assistant: the page turns to night, edge to edge, and runs sideways. */
.hs { position: relative; height: 640vh; margin-top: 40px; }
.hs-pin { --c: 0px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #070b18; color: #fff; clip-path: inset(var(--c) round calc(var(--c) * 1.2)); isolation: isolate; }
.hs-ring { position: absolute; z-index: -1; left: 50%; top: 50%; width: 130vh; height: 130vh; margin: -65vh 0 0 -65vh; border-radius: 50%; background: conic-gradient(#6d77f2, #7c3aed, #06b6d4, #5bb187, #f59e0b, #ec4899, #6d77f2); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: .55; }
.hs-label { position: absolute; left: clamp(20px, 6vw, 96px); top: 104px; color: rgb(255 255 255 / .86); }
.hs-pin > .track { position: relative; height: 100%; }
.panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(56px); transition: opacity .4s ease, transform .7s var(--soft), visibility 0s .4s; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 70px clamp(20px, 6vw, 96px) 0; }
.panel.past { transform: translateY(-56px); }
.panel.up { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .12s, transform .7s var(--soft) .12s, visibility 0s; }
.panel:nth-child(even) > :first-child { order: 2; }
.pick-sub { max-width: 30em; margin: 20px 0 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; color: rgb(255 255 255 / .68); }
.pick { font: 800 clamp(34px, 4.5vw, 68px)/1.05 var(--display); letter-spacing: -.045em; margin: 0; }
.hs-rail { position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); bottom: 22px; width: min(300px, calc(100% - 40px)); }
.hs-rail i { background: rgb(255 255 255 / .16); }

/* The panels that show a whole Mac: the words beside the screen, the screen as large as the window allows. */
.panel.wide { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); padding: 84px clamp(20px, 4vw, 64px) 34px; } .panel.wide > :first-child { order: 0 !important; }
.panel.wide .pick { font-size: clamp(28px, 2.9vw, 44px); } .panel.wide .pick-sub { margin-top: 14px; font-size: clamp(14px, 1.25vw, 18px); }
.panel.wide .stage { width: 100%; height: calc(625px * var(--z, 1)); } .panel.wide .beat { width: 1000px; height: 625px; }

/* The apps: words running past, faster when you scroll. */
.mq { padding: clamp(70px, 11vh, 130px) 0 clamp(30px, 5vh, 60px); overflow: hidden; }
.mq-row { display: flex; width: max-content; gap: clamp(30px, 4vw, 64px); margin-bottom: 14px; font: 800 clamp(36px, 5.6vw, 82px)/1.15 var(--display); letter-spacing: -.04em; white-space: nowrap; will-change: transform; color: var(--text); }
.mq-row span { display: inline-flex; align-items: center; gap: .24em; transition: color .2s; } .mq-row img { width: .72em; height: .72em; object-fit: contain; } .mq-row + .mq-row { color: rgb(19 23 29 / .24); }

/* Organization: pieces at different heights, moving at different speeds. */
.org { position: relative; max-width: var(--shell); margin: 0 auto; padding: clamp(60px, 10vh, 120px) 24px 40px; }
.org-ring { position: absolute; z-index: -1; left: 50%; top: 26%; width: min(90vw, 980px); aspect-ratio: 1; margin-left: calc(min(90vw, 980px) / -2); border-radius: 50%; background: conic-gradient(#6d77f2, #7c3aed, #06b6d4, #5bb187, #f59e0b, #ec4899, #6d77f2); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); mask: radial-gradient(closest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); opacity: .14; }
.org-tag { display: flex; justify-content: center; margin-bottom: 60px; }
.item { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: center; margin-bottom: clamp(30px, 6vh, 80px); }
.item:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .item:nth-of-type(even) .pick { order: -1; text-align: right; }
.item:nth-of-type(3) { margin-left: 6%; } .item:nth-of-type(4) { margin-right: 6%; }
.item .stage { will-change: transform; }
.item .pick { font-size: clamp(34px, 4.3vw, 62px); }
.org-end { text-align: center; padding: 20px 0 40px; }
.more-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--text); color: #fff; font: 600 15px var(--display); letter-spacing: -.01em; transition: transform .15s, box-shadow .25s; }
.more-cta:hover { box-shadow: 0 12px 30px rgb(19 23 29 / .3); } .more-cta:active { transform: scale(.97); } .more-cta svg { transition: transform .2s; } .more-cta:hover svg { transform: translateX(3px); }

@media (min-width: 861px) {
  .state-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 56px); max-width: 1500px; margin: 0 auto; padding: 96px clamp(24px, 4vw, 64px) 52px; }
  .state-lines { text-align: left; font-size: clamp(40px, 5.2vw, 84px); }
  .state-pin canvas { height: 72vh; margin: 0; align-self: center; }
}
@media (max-width: 860px) {
  .story-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 22px; padding: 70px 16px 0; }
  .panel.wide { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding: 110px 16px 40px; text-align: center; } .panel.wide .pick { font-size: 30px; }
  .panel { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; padding: 110px 16px 40px; } .panel:nth-child(even) > :first-child { order: 0; }
  .hs-label { top: 84px; left: 16px; }
  .hs-rail { left: 16px; bottom: 14px; }
  .item, .item:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); margin-left: 0 !important; margin-right: 0 !important; } .item:nth-of-type(even) .pick { order: 0; text-align: left; }
  .org-tag { justify-content: flex-start; margin-bottom: 30px; }
}