/* Activated Cloud landing page. Highlighter on paper: white, ink, and one lime. */
:root {
  --ink: #0a0a0a;
  --lime: #e9ff3b;
  --graphite: #5e5e5b;
  --muted: #6b6b6b;
  --hair: #f0f0ee;
  --ring: #e6e6e3;
  --paper-2: #f7f7f5;
  --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 34px 70px -30px rgba(0, 0, 0, 0.3);
  --gutter: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: Geist, system-ui, sans-serif; color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band.ink :focus-visible { outline-color: var(--lime); }
[id] { scroll-margin-top: 16px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.skip:focus { top: 12px; }

/* Type */
.mono-label, .mono-muted, .mono-small, .tag { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0.08em; }
.mono-label { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; color: var(--graphite); }
.mono-label.ink { color: var(--ink); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }
.mono-label.lime { color: var(--lime); font-weight: 600; }
.mono-muted { font-weight: 600; font-size: 13px; line-height: 16px; color: var(--graphite); }
.mono-small { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; color: var(--muted); }
.tag { display: inline-flex; font-weight: 600; font-size: 13px; line-height: 16px; color: var(--ink); background: var(--lime); padding: 5px 9px; border-radius: 6px; }
.tag-sm { font-size: 11px; line-height: 14px; padding: 3px 7px; vertical-align: 2px; }
.t13 { font-size: 13px; line-height: 17px; }
.t15 { font-size: 15px; line-height: 20px; }
.t16 { font-size: 16px; line-height: 22px; }
.t17 { font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.white { color: #fff; }
.lede { font-size: 21px; line-height: 30px; color: var(--graphite); }
/* The highlighter: the line that matters gets a stroke of lime. */
.hl { position: relative; z-index: -1; background: var(--lime); color: var(--ink); padding: 0 .12em; margin-left: -.12em; border-radius: .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* The highlight sits under the heading's other lines, so the line above keeps its descenders. */
.h2, .h2-xl, .h2-final { position: relative; z-index: 0; }

/* Buttons */
.pill { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 999px; padding: 18px 28px; font-weight: 600; font-size: 17px; line-height: 22px; transition: transform 0.15s ease, opacity 0.15s ease; }
.pill:hover { transform: translateY(-1px); opacity: 0.92; }
.pill-sm { gap: 8px; padding: 10px 18px; font-size: 14px; line-height: 18px; }
.lime-pill { background: var(--lime); color: var(--ink); font-weight: 700; padding: 18px 30px; }
.play { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; line-height: 22px; }
.play-ring { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background 0.15s ease; }
.play-ring svg { margin-left: 2px; }
.play:hover .play-ring { background: var(--lime); }
.ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* "No Cloudy yet?": the calm way in for the team on its own, on a line of its own under a page's buttons. */
.start-today { flex-basis: 100%; margin-top: -6px; font-size: 16px; line-height: 24px; color: var(--graphite); }
.start-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.start-link::after { content: "\00a0\2192"; }
.start-link:hover { text-decoration-color: currentColor; }
.band.ink .start-today { color: #a3a3a0; }
.band.ink .start-link { color: #fff; }

.inline-link:hover, .final-small a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Stages: the illustrated scenes keep their designed size and scale down to fit (main.js). */
.fit { position: relative; flex-shrink: 0; }
.split > .fit { flex: 1 1 0; min-width: 0; }
.stage { position: absolute; left: 0; top: 0; transform-origin: top left; }
.stage > * { position: absolute; }
.card { background: #fff; border-radius: 22px; box-shadow: var(--card-shadow); }

/* Cloudy (cloudy.js): a picture of the 3D model, with the live one fading in over it. Poke it. */
.cloudy { display: block; cursor: pointer; border-radius: 40%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.cloudy:focus { outline: none; }
.cloudy:focus-visible { outline: 2px solid var(--ink); outline-offset: -20%; }
.cloudy img, .cloudy-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cloudy img { transition: opacity 0.35s ease; }
.cloudy-canvas { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.cloudy.is-live .cloudy-canvas { opacity: 1; }
.cloudy.is-live img { opacity: 0; }
/* Without the live one: a squash for a poke, a hop for a cheer. */
.cloudy.is-poked img { animation: poke 0.6s ease-out; transform-origin: 50% 80%; }
.cloudy.is-cheering img { animation: cheer 1s ease-out; transform-origin: 50% 80%; }
@keyframes poke { 0% { transform: none; } 25% { transform: scale(1.08, 0.88); } 55% { transform: scale(0.96, 1.06) translateY(-4%); } 100% { transform: none; } }
@keyframes cheer { 0%, 100% { transform: none; } 20% { transform: translateY(-9%); } 40% { transform: none; } 60% { transform: translateY(-6%); } 80% { transform: none; } }

/* 1. Hero */
.hero { display: flex; align-items: center; min-height: 790px; }
.hero-copy { display: flex; flex-direction: column; gap: 32px; width: 640px; flex-shrink: 0; padding: 0 0 40px 56px; }
.kicker { display: flex; align-items: center; gap: 10px; padding-left: 8px; margin-bottom: -14px; }
.hero-title { font-weight: 900; font-size: clamp(96px, 10.8vw, 156px); line-height: 0.86; letter-spacing: -0.065em; }
.hero-copy .lede, .hero-copy .ctas { margin-left: 6px; }
.hero-copy .lede { max-width: 490px; }
.hero .fit { flex: 1; }
/* The team hero's room is held before main.js sizes it (the numbers it arrives at: the whole 800 x 800 stage on wide
   screens, the drawn 800 x 672 below that, the phone's recomposed 480 x 616), so nothing under it jumps on a slow phone. */
@media (min-width: 1180px) { .hero > .fit { max-width: 800px; aspect-ratio: 1; } }
@media (min-width: 640.02px) and (max-width: 1179.98px) { .hero > .fit { aspect-ratio: 800 / 672; } }
@media (max-width: 640px) { .hero > .fit { height: min(616px, calc((100vw - 2 * var(--edge)) * 616 / 480)); } }

.needs { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 50px -24px rgba(0, 0, 0, 0.28); }
.needs-head { display: flex; align-items: center; gap: 8px; }
.dot-amber { width: 8px; height: 8px; border-radius: 999px; background: #e59a0b; transition: background 0.2s ease; }
.needs.is-done .dot-amber { background: #2bb24c; }
.needs-who { margin-top: -4px; }
.needs-actions { display: flex; gap: 8px; margin-top: 2px; }
.btn-ink, .btn-soft { font-size: 13px; line-height: 16px; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: transform 0.12s ease, opacity 0.12s ease; }
.btn-ink { background: var(--ink); color: #fff; font-weight: 600; }
.btn-soft { background: #f2f2f0; font-weight: 500; }
.btn-ink:hover, .btn-soft:hover { transform: translateY(-1px); }
.btn-ink:disabled, .btn-soft:disabled { opacity: 0.35; cursor: default; transform: none; }

.done { display: flex; flex-direction: column; padding: 18px 22px 10px; }
.done-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.done-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); }
.av { width: 38px; height: 22px; flex-shrink: 0; object-fit: contain; }
.done-text { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.time { width: 70px; flex-shrink: 0; text-align: right; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Section bands */
.band { width: 100%; }
.band.gray { background: var(--paper-2); }
/* A white band after another white band: a hairline between them, never a tint (the home page is all white). */
.band.rule { border-top: 1px solid var(--hair); }
.band.gray.is-white { background: #fff; } /* the grey band's layout, without the grey */
.band.ink { background: var(--ink); color: #fff; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.split-copy { display: flex; flex-direction: column; gap: 28px; flex-shrink: 0; }
.h2 { font-weight: 900; font-size: clamp(52px, 5.6vw, 80px); line-height: 0.95; letter-spacing: -0.055em; }

/* 2. Every hire gets a desk */
.band.gray > .split { padding: 0 96px 0 var(--gutter); align-items: stretch; }
.s2-copy { width: 600px; padding: 130px 0; justify-content: center; }
.features { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.features li { display: flex; gap: 16px; align-items: flex-start; }
.ficon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ring); flex-shrink: 0; }
.features b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; font-size: 18px; line-height: 24px; }
.features p { font-size: 16px; line-height: 23px; color: var(--graphite); margin-top: 2px; }
.inline-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 3px; white-space: nowrap; }

.badge { display: flex; flex-direction: column; background: #fff; border-radius: 28px; box-shadow: 0 0 0 2px var(--ink), 0 40px 80px -30px rgba(0, 0, 0, 0.35); transform: rotate(-3deg); }
.badge-top { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 28px 22px; border-bottom: 1px solid #ececea; }
.slot { width: 56px; height: 10px; border-radius: 999px; background: #ececea; box-shadow: inset 0 0 0 1.5px #d9d9d6; }
.badge-id { display: flex; align-items: center; gap: 18px; width: 100%; }
.photo { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 20px; background: var(--lime); flex-shrink: 0; }
.photo img { width: 84px; height: auto; -webkit-user-drag: none; }
/* The teammate on the badge: live 3D when it can be (cloudy.js), the still otherwise. */
.badge-cloudy { position: relative; width: 92px; height: 92px; border-radius: 16px; }
.badge-cloudy img { inset: 6% !important; width: 88% !important; height: 88% !important; object-fit: contain; }
.badge-cloudy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.badge-cloudy.is-new img { animation: hire-pop 0.7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes hire-pop { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hire a teammate: one button per role; the badge re-drops with the new hire (hire.js). */
.hire-pick { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; padding-top: 24px; border-top: 1px solid #e8e8e5; }
.hire-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hire-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ring); font-weight: 600; font-size: 15px; line-height: 20px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.hire-chip img { width: 34px; height: 20px; object-fit: contain; }
.hire-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hire-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.hire-chip[aria-pressed="true"] img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)); }
.hire-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hire-said { min-height: 20px; font-size: 15px; line-height: 20px; color: var(--graphite); }
@media (prefers-reduced-motion: reduce) {
  .hire-chip { transition: none; }
  .badge-cloudy.is-new img { animation: none; }
}
.badge-name { display: flex; flex-direction: column; gap: 4px; }
.badge-name .mono-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.name { font-weight: 800; font-size: 34px; line-height: 36px; letter-spacing: -0.03em; }
.issued { display: flex; flex-direction: column; padding: 8px 28px 6px; }
.issued > div { display: flex; align-items: center; height: 44px; border-bottom: 1px solid var(--hair); }
.issued > div:last-child { border-bottom: 0; }
.issued dt { width: 112px; flex-shrink: 0; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.issued dd { font-weight: 500; font-size: 15px; line-height: 20px; }
.badge-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px 20px; background: var(--ink); border-radius: 0 0 26px 26px; }

/* The badge on its lanyard (lanyard.js). None of this applies until the script adds a class, and at
   rest it takes them off again, so the badge above is exactly what you see. */
.lanyard.is-waiting .badge, .lanyard.is-waiting .straps, .lanyard.is-moving .straps { visibility: hidden; }
.lanyard-rig { display: none; left: 0; top: 0; pointer-events: none; overflow: visible; }
.lanyard.is-moving .lanyard-rig { display: block; }
.lanyard.is-moving .badge { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lanyard.is-moving { overflow-x: visible; overflow-y: clip; }
.lanyard-band { overflow-x: clip; }
.lanyard.is-live .badge { cursor: grab; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.lanyard-grabbing, html.lanyard-grabbing * { cursor: grabbing !important; }
/* The strap's colour is the teammate's on the badge (hire.js sets --strap), easing over a flip. */
.lanyard .strap { stroke: var(--strap, #0a0a0a); transition: stroke 0.9s ease; }
@media (prefers-reduced-motion: reduce) { .lanyard .strap { transition: none; } }

/* The person's staff badge (home "Cloudy comes with a team." and /team/ "Every person."): the person on top,
   the AI agent assigned to them on the AI AGENT row, the five lines, a caption under the badge; hire.js
   flips it over to the next person.
   The person's photo sits in the photo slot: a white rounded square with their letters, the photo over
   them once hire.js has seen it load (.has-photo). A missing or slow photo leaves the letters, and without
   JS the letters are all there is. It fades in only the first time; on a flip it is swapped while the card
   is edge-on, already loaded. */
.photo.badge-person { position: relative; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d2; color: var(--ink); font: 600 30px/1 "Geist Mono", monospace; letter-spacing: 0.02em; }
.photo .badge-person-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; -webkit-user-drag: none; }
.photo.badge-person.has-photo .badge-person-img { opacity: 1; transition: opacity 0.25s ease; }
.photo.badge-person.has-photo .badge-person-ini { visibility: hidden; }
.photo.badge-person.has-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12); pointer-events: none; }

/* The AI AGENT row: a quiet stripe across the badge, its label in the same column as the lines below;
   the agent's picture, its name over its role, and "1 OF 2" / "2 OF 2" on Sarah's two. */
.badge-with { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 28px; background: var(--paper-2); border-bottom: 1px solid #ececea; }
.badge-with-label { width: 102px; flex-shrink: 0; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; color: var(--ink); }
.badge-with-mate { display: grid; place-items: center; width: 48px; height: 34px; flex-shrink: 0; }
.badge-with-mate img { width: 48px; height: 28px; object-fit: contain; -webkit-user-drag: none; }
.badge-with-person { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; white-space: nowrap; }
.badge-with-who { font-weight: 700; font-size: 16px; line-height: 19px; letter-spacing: -0.01em; color: var(--ink); }
.badge-with-team { font-size: 13px; line-height: 16px; color: var(--graphite); }
.badge-with-nth { flex-shrink: 0; padding: 4px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d2; font: 600 10.5px/1 "Geist Mono", monospace; letter-spacing: 0.08em; color: var(--ink); }
.badge-with-nth[hidden] { display: none; }

/* The caption under the badge: the pair in a sentence. It changes with the badge (while the card is
   edge-on) and rises in a little; it sits behind the badge, so a hard swing passes over it. */
.badge-say { margin: 0; font-size: 18px; line-height: 26px; color: var(--graphite); text-align: center; text-wrap: balance; }
.badge-say b { font-weight: 700; color: var(--ink); }
.badge-say.is-new { animation: pair-say 0.6s cubic-bezier(.2, 1, .4, 1) both; }
@keyframes pair-say { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .badge-say.is-new { animation: none; }
  .photo.badge-person.has-photo .badge-person-img { transition: none; }
}
@media (max-width: 640px) { .badge-say { font-size: 20px; line-height: 28px; } } /* the scene scales down on phones (main.js) */

/* 3. How it works */
.bubble { font-size: 15px; line-height: 20px; border-radius: 18px; padding: 8px 14px; }
.ink-bubble { background: var(--ink); color: #fff; max-width: 340px; }
.bubble.gray { background: #ececea; max-width: 340px; }
.steps { display: flex; flex-direction: column; gap: 20px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.step-n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: "Geist Mono", monospace; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.steps b { font-weight: 700; font-size: 18px; line-height: 24px; }
.steps p { font-size: 16px; line-height: 23px; color: var(--graphite); margin-top: 2px; }

/* 3. How it works, as a night (night.js). The band's colour is the sky: evening, night, sunrise, driven
   by the scroll; the orb is the sun setting, the moon, the sun rising; the stars and the glowing screens
   only show at night. Without JS or with reduced motion it is the still morning: everything done. */
.night { position: relative; background: var(--sky, #fff6ea); transition: color 0.35s ease; }
.night-sticky { position: relative; overflow: hidden; padding: 120px 0 110px; }
.night-sky { position: absolute; inset: 0; pointer-events: none; }
.night-stars { position: absolute; inset: 0; opacity: var(--stars, 0); background-image:
  radial-gradient(1.6px 1.6px at 22px 38px, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 120px 90px, #fff 50%, transparent 52%),
  radial-gradient(1.8px 1.8px at 210px 24px, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 64px 160px, #fff 50%, transparent 52%),
  radial-gradient(1.4px 1.4px at 260px 140px, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 170px 210px, #fff 50%, transparent 52%);
  background-size: 300px 240px; }
.night-orb { position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--orb-c, #ffb547); opacity: var(--orb-o, 0); transform: translate(var(--orb-x, 80vw), var(--orb-y, 20vh)); box-shadow: 0 0 60px 10px var(--orb-g, rgba(255, 181, 71, 0.35)); }
.night-grid { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: 56px; padding: 0 var(--gutter); }
.night-copy { display: flex; flex-direction: column; gap: 22px; }
.night-clock { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.night-ampm { font-size: 22px; }
.night-steps li { transition: opacity 0.3s ease; }
.night.is-dark { color: #fff; }
.night.is-dark .mono-muted, .night.is-dark .night-steps p { color: #b9b9c8; }
.night.is-dark .step-n { background: var(--lime); color: var(--ink); }
.night.is-dark .hl { color: var(--ink); }
.night-fit { position: relative; }
.night-stage { position: absolute; left: 0; top: 0; transform-origin: top left; }
.night-stage > * { position: absolute; }
.night-cloudy img { object-fit: contain; }
.say-you { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.say-you .mono-label { color: inherit; opacity: 0.6; }
.say-you .bubble, .say-cloudy .bubble { font-size: 17px; line-height: 23px; padding: 11px 16px; border-radius: 20px; max-width: none; }
.say-cloudy .bubble { display: inline-block; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 20px 40px -24px rgba(0, 0, 0, 0.35); color: var(--ink); }
.say-you, .say-cloudy, .night-caption { opacity: 0; }
.wake { display: flex; flex-direction: column; gap: 8px; }
.note { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 40px -24px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.note img { width: 40px; height: 24px; object-fit: contain; flex-shrink: 0; }
.note div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.note b { font-weight: 700; font-size: 14px; line-height: 18px; }
.note span { font-size: 14px; line-height: 19px; color: var(--graphite); }
.note time { align-self: flex-start; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 12px; color: var(--muted); }
.desk-who { position: absolute; left: 42px; top: 0; width: 96px; height: 57px; object-fit: contain; transition: filter 0.4s ease; }
.laptop { position: absolute; left: 30px; top: 34px; width: 120px; height: 76px; }
.laptop-screen { fill: #2e2e33; transition: fill 0.4s ease; }
.laptop-lines rect { fill: #4a4a50; transition: fill 0.4s ease; }
.desk::before { content: ""; position: absolute; left: 10px; top: -14px; width: 160px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 255, 59, 0.45), transparent); opacity: 0; transition: opacity 0.5s ease; }
.desk-top { position: absolute; left: 6px; top: 110px; width: 168px; height: 10px; border-radius: 5px; background: #d9d3c8; transition: background 0.4s ease; }
.desk-name { position: absolute; left: 0; top: 128px; width: 180px; text-align: center; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.night.is-glow .desk.is-working::before { opacity: 1; }
.night.is-glow .desk.is-working .laptop-screen { fill: var(--lime); }
.night.is-glow .desk.is-working .laptop-lines rect { fill: rgba(10, 10, 10, 0.4); }
.night.is-dark .desk-top { background: #2b2b40; }
.night.is-glow .desk.is-working .desk-who { animation: typing 0.42s ease-in-out infinite alternate; }
@keyframes typing { from { transform: none; } to { transform: translateY(2px) rotate(-1.5deg); } }
.job { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 12px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 40px -24px rgba(0, 0, 0, 0.4); will-change: transform; }
.job-what { font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: -0.01em; }
.job-state { order: -1; display: flex; }
.job-state i { display: inline-block; font-style: normal; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 6px; }
.job-working { display: none !important; background: var(--lime); }
.job-done { background: var(--ink); color: #fff; }
.job.is-working .job-working { display: inline-block !important; }
.job.is-working .job-done { display: none; }
.job-result { font-size: 13px; line-height: 17px; color: var(--graphite); }
.job.is-working .job-result { visibility: hidden; }
.job.is-flip { animation: job-flip 0.5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes job-flip { 0% { transform: var(--t, none) scale(1); } 35% { transform: var(--t, none) scale(1.08); } 100% { transform: var(--t, none) scale(1); } }
.night-caption { text-align: center; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }

/* Live: a tall track, the scene pinned while the night goes by. */
.night.is-live .night-track { height: 340vh; }
.night.is-live .night-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 72px 0 24px; }
.night.is-live .night-steps li { opacity: 0.32; }
.night.is-live .night-steps li.is-on { opacity: 1; }
.night.is-live .say-you, .night.is-live .say-cloudy, .night.is-live .night-caption, .night.is-live .note { transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.2, 1.4, .4, 1); }
.night.is-live .say-you { transform: translateY(10px); }
.night.is-live.show-you .say-you { opacity: 1; transform: none; }
.night.is-live .say-cloudy { transform: translateY(10px); }
.night.is-live.show-cloudy .say-cloudy { opacity: 1; transform: none; }
.night.is-live .note { opacity: 0; transform: translateY(-18px) scale(0.96); }
.night.is-live .note.is-on { opacity: 1; transform: none; }
.night.is-live.is-glow .night-caption { opacity: 1; }

@media (max-width: 1179.98px) {
  .night-orb { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .night-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .night-copy { max-width: 640px; }
  .night.is-live .night-steps li { display: none; }
  .night.is-live .night-steps li.is-on { display: flex; }
  .night.is-live .night-sticky { padding: 64px 0 16px; align-items: flex-start; }
  .night.is-live .night-copy { gap: 12px; }
  .night.is-live .night-clock { font-size: 30px; line-height: 34px; }
}
@media (max-width: 640px) {
  .night .h2 { font-size: 46px; }
  /* the scene recomposed for a narrow column (night.js reads the 400 x 600 size) */
  .night-cloudy { left: 0 !important; top: 34px !important; width: 116px !important; height: 116px !important; }
  .say-you { left: 118px !important; top: 0 !important; width: 282px !important; }
  .say-cloudy { left: 118px !important; top: 112px !important; width: 282px !important; }
  .wake { left: 0 !important; top: 0 !important; width: 400px !important; }
  .desk { transform: scale(0.74); transform-origin: top left; top: 392px !important; }
  .desk[data-who="wren"] { left: 0 !important; }
  .desk[data-who="remi"] { left: 136px !important; }
  .desk[data-who="atlas"] { left: 272px !important; }
  .job { width: 128px !important; top: 296px !important; padding: 9px 10px; }
  .job[data-who="wren"] { left: 0 !important; }
  .job[data-who="remi"] { left: 136px !important; }
  .job[data-who="atlas"] { left: 272px !important; }
  .job-what { font-size: 14px; line-height: 18px; }
  .job-result { font-size: 12px; line-height: 15px; }
  .night-caption { left: 0 !important; top: 520px !important; width: 400px !important; }
  .night-cloudy { transition: opacity 0.3s ease; }
  .night.is-live.is-morning .night-cloudy { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .night, .night-steps li, .desk-who, .laptop-screen, .laptop-lines rect, .desk::before, .desk-top { transition: none; }
  .night.is-glow .desk.is-working .desk-who, .job.is-flip { animation: none; }
}

/* Home pricing (Cloudy, plus your team): the plans under the device card. */
.bridge-lede { max-width: 560px; margin-top: -6px; font-size: 19px; line-height: 28px; }
.pr-plans-title { margin-top: 64px; font-weight: 900; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.055em; }
.pr-plans-note { max-width: 660px; margin-top: -10px; font-size: 18px; line-height: 27px; color: var(--graphite); }

/* Home 3. The brain (brain.js): provider cartridges in a fan; the picked one plugs into the socket over Cloudy. */
.brain-split { padding: 120px var(--gutter); }
.brain-copy { width: 520px; }
.brain-slot { display: flex; align-items: center; justify-content: center; border-radius: 22px; background: #f3f3f1; box-shadow: inset 0 0 0 2px #dcdcd8, inset 0 6px 14px rgba(0, 0, 0, 0.08); }
.brain-slot-label { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: #a3a3a0; }
.brain-slot.is-snap { animation: brain-snap 0.42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes brain-snap { 0% { transform: scale(1); } 30% { transform: scale(1.06, 0.92); } 100% { transform: scale(1); } }
.brain-static { position: absolute; inset: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
html.brain-js .brain-static { display: none; }
.brain-cable { border-radius: 5px; background: #d7d7d3; overflow: hidden; }
.brain-cable i { position: absolute; left: 0; right: 0; top: -40%; height: 40%; border-radius: 5px; background: var(--lime); opacity: 0; }
.brain-stage.is-on .brain-cable { background: var(--ink); }
.brain-stage.is-on .brain-cable i { opacity: 1; animation: brain-flow 1.1s linear infinite; }
@keyframes brain-flow { from { transform: translateY(0); } to { transform: translateY(350%); } }
.brain-cloudy img { object-fit: contain; }
.brain-sparks i { position: absolute; left: 50%; top: 40%; width: 16px; height: 16px; margin: -8px; opacity: 0; background: var(--lime); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.brain-sparks i:nth-child(2n) { background: var(--ink); width: 11px; height: 11px; margin: -5.5px; }
.brain-sparks.is-on i { animation: brain-spark 0.9s cubic-bezier(.2, .8, .3, 1) both; }
.brain-sparks i:nth-child(1) { --x: -120px; --y: -40px; }
.brain-sparks i:nth-child(2) { --x: -90px; --y: -100px; animation-delay: 0.05s; }
.brain-sparks i:nth-child(3) { --x: 100px; --y: -90px; animation-delay: 0.08s; }
.brain-sparks i:nth-child(4) { --x: 128px; --y: -20px; animation-delay: 0.02s; }
.brain-sparks i:nth-child(5) { --x: -40px; --y: -130px; animation-delay: 0.1s; }
.brain-sparks i:nth-child(6) { --x: 50px; --y: -128px; animation-delay: 0.06s; }
@keyframes brain-spark { 0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(90deg); } }
.brain-now { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.brain-now b { font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.brain-now span { font-size: 15px; line-height: 21px; color: var(--graphite); }
.brain-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 108px; height: 80px; padding: 8px 6px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 30px -18px rgba(0, 0, 0, 0.4); transform: rotate(var(--r, 0deg)); transform-origin: 50% 50%; will-change: transform; -webkit-tap-highlight-color: transparent; }
.brain-card:hover { box-shadow: 0 0 0 1.5px var(--ink), 0 22px 34px -18px rgba(0, 0, 0, 0.45); }
.brain-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.brain-card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), 0 22px 34px -18px rgba(0, 0, 0, 0.45); z-index: 2; }
html:not(.brain-js) .brain-card.is-in { opacity: 0.4; }
.brain-logo { display: flex; align-items: center; justify-content: center; height: 30px; }
.brain-logo img { width: auto; height: 26px; max-width: 30px; object-fit: contain; }
.brain-mark { width: 40px; height: 22px; }
.brain-name { font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.brain-tag { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 9px; line-height: 12px; letter-spacing: 0.1em; color: var(--muted); }
.brain-card[data-brain="builtin"] .brain-tag, .brain-static .brain-tag { color: var(--ink); background: var(--lime); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 1179.98px) {
  .brain-split { padding: var(--section) var(--gutter); }
  .brain-copy { width: 100%; max-width: 640px; }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .brain-copy { width: 44%; }
}
@media (max-width: 640px) {
  /* the cartridges in two rows under Cloudy, so the scene draws large on a phone */
  .brain-card[data-brain="builtin"] { left: 128px !important; top: 424px !important; }
  .brain-card[data-brain="anthropic"] { left: 246px !important; top: 424px !important; }
  .brain-card[data-brain="google"] { left: 364px !important; top: 424px !important; }
  .brain-card[data-brain="openai"] { left: 128px !important; top: 518px !important; }
  .brain-card[data-brain="openrouter"] { left: 246px !important; top: 518px !important; }
  .brain-card[data-brain="local"] { left: 364px !important; top: 518px !important; }
  .brain-card { --r: 0deg !important; }
  .brain-now { left: 118px !important; width: 364px !important; top: 356px !important; }
  .brain-now b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-slot.is-snap, .brain-stage.is-on .brain-cable i, .brain-sparks.is-on i { animation: none; }
  .brain-stage.is-on .brain-cable i { opacity: 0; }
}

/* 4. The World */
.world-wrap { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 130px var(--gutter) 140px; }
.world-head { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.world .mono-muted { color: #9a9a98; }
.world-h { max-width: 1060px; font-size: clamp(46px, 6vw, 86px); text-wrap: balance; }
.world-lede { max-width: 640px; color: #b4b4b0; }
.world-frame { position: relative; width: 1080px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.world-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 26px; background: #1a1a1a; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -40px rgba(233, 255, 59, 0.25); }
.world-frame figcaption { color: #8a8a87; }
.world-frame.is-second { width: 760px; }
.world-toggle { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(10, 10, 10, 0.72); color: #fff; font-weight: 600; font-size: 13px; line-height: 16px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.world-toggle:hover { background: rgba(10, 10, 10, 0.9); }
.world-toggle .i-play, .world-toggle.is-paused .i-pause { display: none; }
.world-toggle.is-paused .i-play { display: block; }
.pad-callout { display: flex; align-items: center; gap: 20px; width: 860px; max-width: 100%; padding: 22px 26px; border-radius: 24px; background: var(--lime); color: var(--ink); }
.pad-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--ink); color: var(--lime); flex-shrink: 0; }
.pad-callout b { display: block; font-weight: 800; font-size: 22px; line-height: 27px; letter-spacing: -0.02em; }
.pad-callout p { margin-top: 4px; font-size: 15px; line-height: 21px; color: #2e2e2c; }
.world-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 1080px; max-width: 100%; }
.world-tiles li { padding: 22px 24px 24px; border-radius: 22px; background: #151515; box-shadow: inset 0 0 0 1px #262624; }
.world-tiles b { display: block; font-weight: 700; font-size: 18px; line-height: 24px; }
.world-tiles p { margin-top: 6px; font-size: 15px; line-height: 22px; color: #a8a8a4; }

/* 5. Done, not drafted */
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s4 { gap: 28px; padding: 130px var(--gutter) 140px; }
.h2-xl { font-weight: 900; font-size: clamp(56px, 7.2vw, 104px); line-height: 0.96; letter-spacing: -0.06em; }
.center-lede { max-width: 620px; }
/* The difference: Activated Cloud beside Muse, Grok Bot and dots. A real table on wide screens: our column
   outlined in ink under an ink head, lime ticks for us, grey ones for them, a dash for "partly", a cross only
   where the company says otherwise, "Not stated" in grey where it says nothing. */
.vs-title { max-width: 1000px; font-size: clamp(46px, 6.4vw, 92px); text-wrap: balance; }
.compare.vs { width: 1120px; max-width: 100%; margin-top: 20px; }
.vs-scroll { padding: 12px 14px 16px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 40px 80px -34px rgba(0, 0, 0, 0.32); }
.vs-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.vs-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: left; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vs-corner { width: 17%; }
.vs-head.is-ours { width: 24%; }
.vs-table th, .vs-table td { padding: 15px 16px; vertical-align: top; border-top: 1px solid var(--hair); font-size: 15px; line-height: 21px; color: var(--graphite); }
.vs-table thead th, .vs-table thead td { border-top: 0; vertical-align: bottom; }
.vs-table tbody th { padding-left: 12px; font-weight: 600; color: var(--ink); }
.vs-head { padding: 18px 16px 14px; }
.vs-head img { display: block; width: 40px; height: 24px; margin-bottom: 10px; object-fit: contain; }
.vs-head b { display: block; font-weight: 800; font-size: 19px; line-height: 24px; letter-spacing: -0.02em; color: var(--ink); }
.vs-head span { display: block; margin-top: 3px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; color: var(--muted); }
.vs-head.is-ours { border-radius: 18px 18px 0 0; background: var(--ink); }
.vs-head.is-ours b { color: #fff; }
.vs-head.is-ours span { color: var(--lime); }
.vs-table td.is-ours { color: var(--ink); font-weight: 500; border-top-color: #e8e8e5; box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); }
.vs-table tr:last-child td.is-ours { border-radius: 0 0 18px 18px; box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); }
.vs-table td.is-ns { color: #9a9a97; }
.vs-k { display: none; }
.vs-v { display: flex; align-items: flex-start; gap: 10px; }
.vs-i { flex-shrink: 0; margin-top: 1.5px; }
.vs-swipe { display: none; }
/* When the table scrolls in (page.js), the rows spring up one after another and each tick pops a beat later,
   left to right. Before that (with JS) they wait; without JS or with reduced motion, the finished table. */
.vs-table tr > :nth-child(3) { --c: 1; }
.vs-table tr > :nth-child(4) { --c: 2; }
.vs-table tr > :nth-child(5) { --c: 3; }
.compare.is-waiting .vs-table tr > * { opacity: 0; transform: translateY(16px); }
.compare.is-waiting .vs-i { transform: scale(0); }
.compare.is-in .vs-table tr > * { transition: opacity 0.4s ease, transform 0.7s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(var(--r, 0) * 0.07s); }
.compare.is-in .vs-i { transition: transform 0.5s cubic-bezier(.2, 1.7, .4, 1); transition-delay: calc(0.3s + var(--r, 0) * 0.07s + var(--c, 0) * 0.06s); }
/* The note under it, and the sources it opens. */
.vs-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 1120px; max-width: 100%; margin-top: -4px; font-size: 13px; line-height: 19px; color: var(--muted); }
.vs-foot p { max-width: 640px; text-wrap: balance; }
.vs-sources summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.vs-sources summary::-webkit-details-marker { display: none; }
.vs-sources summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
.vs-sources[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.vs-sources summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.vs-sources ul { display: grid; gap: 7px; max-width: 720px; margin: 14px auto 0; list-style: none; text-align: left; }
.vs-sources li { display: flex; gap: 12px; }
.vs-sources b { flex-shrink: 0; width: 112px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 11px; line-height: 19px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.vs-sources a { min-width: 0; color: var(--graphite); text-decoration: underline; text-decoration-color: #c9c9c5; text-underline-offset: 3px; overflow-wrap: anywhere; }
.vs-sources a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Phones and small tablets: the same cells regroup into one card per product, side by side, swiped
   sideways and snapping to each card. The row names move into each cell as small labels. */
@media (max-width: 900px) {
  .compare.vs { width: calc(100% + 2 * var(--gutter)); max-width: none; }
  .vs-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 20px; border-radius: 0; background: none; box-shadow: none; scrollbar-width: none; }
  .vs-scroll::-webkit-scrollbar { display: none; }
  .vs-scroll:focus-visible { outline-offset: -2px; }
  .vs-table { display: grid; grid-template-columns: repeat(4, min(320px, calc(100vw - 2 * var(--gutter) - 40px))); column-gap: 12px; width: max-content; }
  .vs-table thead, .vs-table tbody, .vs-table tr { display: contents; }
  .vs-table th, .vs-table td { display: block; }
  .vs-table .vs-corner { display: none; }
  .vs-table tbody th { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vs-head, .vs-head.is-ours { width: auto; }
  .vs-head { padding: 20px 20px 16px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: inset 0 1px 0 var(--ring), inset 1px 0 0 var(--ring), inset -1px 0 0 var(--ring); scroll-snap-align: start; }
  .vs-head.is-ours { box-shadow: none; }
  .vs-table td { padding: 12px 20px 13px; background: #fff; box-shadow: inset 1px 0 0 var(--ring), inset -1px 0 0 var(--ring); }
  .vs-table tr:last-child td { padding-bottom: 18px; border-radius: 0 0 20px 20px; box-shadow: inset 1px 0 0 var(--ring), inset -1px 0 0 var(--ring), inset 0 -1px 0 var(--ring); }
  .vs-k { display: block; margin-bottom: 5px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 10.5px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .vs-swipe { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -4px; }
  .vs-sources li { flex-direction: column; gap: 0; }
}

/* 6. Talk to your team anywhere */
.s6 { padding: 120px var(--gutter) 120px var(--gutter); }
.s6-copy { width: 560px; }
.device-shell { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; }
/* The glass, measured on the render (the OS's DeviceFace): black whatever is around it, Cloudy centred
   on it at 92% of its size. */
.glass { position: absolute; left: 10.03%; top: 8.99%; width: 78.93%; height: 79.9%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #1b1b1d 0%, #0b0b0c 62%); }
.device-cloudy { position: relative; width: 92%; height: 92%; flex-shrink: 0; }
.device-cloudy:focus-visible { outline: 3px solid var(--lime); outline-offset: -6px; }
/* Without the live one: a little bob while it talks. */
.talk.is-speaking .device-cloudy:not(.is-live) img { animation: talk-bob 0.36s ease-in-out infinite alternate; transform-origin: 50% 70%; }
@keyframes talk-bob { from { transform: none; } to { transform: translateY(-2.5%) scale(1.015, 0.985); } }

/* What is said out loud: your question, and Cloudy's answer coming from the device. */
.say { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; border-radius: 22px; transition: opacity 0.35s ease, transform 0.35s ease; }
.say::after { content: ""; position: absolute; width: 22px; height: 22px; transform: rotate(45deg); border-radius: 4px; }
.say-label { display: flex; align-items: center; gap: 8px; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; }
.say-text { position: relative; z-index: 1; font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; }
.say.ask { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.3); }
.say.ask .say-label { color: var(--muted); }
.say.ask::after { right: 46px; bottom: -8px; background: #fff; }
.say.reply { background: var(--ink); color: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.say.reply .say-label { color: var(--lime); }
.say.reply::after { left: 40px; top: -8px; background: var(--ink); }
.wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.wave i { width: 3px; height: 35%; border-radius: 2px; background: var(--lime); transition: height 0.3s ease; }
.talk.is-speaking .wave i { animation: wave 0.9s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -0.15s; }
.wave i:nth-child(3) { animation-delay: -0.45s; }
.wave i:nth-child(4) { animation-delay: -0.3s; }
.wave i:nth-child(5) { animation-delay: -0.6s; }
.wave i:nth-child(6) { animation-delay: -0.75s; }
.wave i:nth-child(7) { animation-delay: -0.2s; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
/* page.js plays the exchange: the question comes in, then the answer word by word as Cloudy says it.
   Without JS or with reduced motion, both simply show in full. */
.talk.is-playing .say { opacity: 0; transform: translateY(8px); }
.talk.is-playing.show-ask .ask, .talk.is-playing.show-reply .reply { opacity: 1; transform: none; }
.talk.is-playing .reply .w { opacity: 0.18; transition: opacity 0.18s ease; }
.talk.is-playing .reply .w.on { opacity: 1; }

/* 7. Pricing: four plans, the compare card's look. */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 1240px; max-width: 100%; margin-top: 20px; text-align: left; }
.plan { will-change: transform; display: flex; flex-direction: column; background: #fff; border-radius: 24px; padding: 22px 22px 18px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 40px 80px -34px rgba(0, 0, 0, 0.32); }
.plan-for { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; color: var(--muted); }
.plan-name { margin-top: 10px; font-weight: 700; font-size: 19px; line-height: 24px; letter-spacing: -0.01em; }
.plan-price { margin: 2px 0 14px; font-weight: 800; font-size: 44px; line-height: 48px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-per { margin-left: 3px; font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0; color: var(--muted); }
.plan ul { flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hair); font-weight: 500; font-size: 15px; line-height: 20px; }
.plan li svg { flex-shrink: 0; margin-top: 1px; }
.plan-cta { justify-content: center; margin-top: 12px; min-height: 46px; }
.plan-spec { margin-top: 12px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); }
.plans-note { margin-top: 4px; }
.byok { max-width: 640px; margin-top: -8px; font-size: 15px; line-height: 22px; color: var(--graphite); }
.team-cloudy { max-width: 640px; font-size: 16px; line-height: 24px; color: var(--graphite); }

/* 8. Close */
.s5 { gap: 30px; padding: 120px var(--gutter) 130px; }
.final-disc { position: relative; display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 999px; background: var(--lime); }
.final-cloudy { position: relative; width: 118px; height: 118px; }
.h2-final { font-weight: 900; font-size: clamp(52px, 6.7vw, 96px); line-height: 0.96; letter-spacing: -0.06em; color: #fff; }
.final-lede { color: #a3a3a0; max-width: 560px; }
.s5 .ctas { justify-content: center; padding-top: 8px; }
.final-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: 16px; line-height: 22px; }
.final-small { font-size: 14px; line-height: 20px; color: #8a8a87; }
.final-small a { color: #fff; font-weight: 500; }


/* Narrower screens: stack each section, scenes scale down. */
@media (max-width: 1180px) {
  :root { --gutter: 28px; }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 24px 0 40px; }
  .hero-copy { width: 100%; padding: 0 var(--gutter) 24px; }
  .hero .fit { margin: 0 var(--gutter); }
  .split, .band.gray > .split { flex-direction: column; align-items: stretch; gap: 40px; padding: 88px var(--gutter); }
  .s2-copy, .s6-copy { width: 100%; padding: 0; }
  .hero .fit, .split > .fit { flex: none; }
  .split .fit { width: 100%; max-width: 680px; align-self: center; }
  .s4, .s5 { padding: 88px var(--gutter); }
  .world-wrap { padding: 88px var(--gutter) 96px; }
}
/* Tablets and phones, below 1180 px. */
@media (max-width: 1179.98px) {
  :root { --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); --edge: var(--gutter); --section: 88px; }
  main { overflow-x: hidden; overflow-x: clip; }
  .pill-sm { padding: 13px 18px; }
  .play { min-height: 44px; }
  .hero { padding: 16px 0 64px; }
  .hero-copy { padding: 0 var(--gutter) 40px; }
  .hero .fit { margin: 0 var(--edge); }
  .split, .band.gray > .split { gap: 48px; padding: var(--section) var(--gutter); }
  .split .fit { width: auto; max-width: none; align-self: stretch; margin: 0 calc(var(--edge) - var(--gutter)); }
  .s2-copy, .s6-copy { max-width: 640px; }
  .s4, .s5 { padding: var(--section) var(--gutter); }
  .world-wrap { padding: var(--section) var(--gutter); gap: 36px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 760px; }
  .world-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-link { padding: 11px 0; }
}

/* Landscape tablets and small laptop windows: copy and scene side by side again, in flexible columns. */
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .hero { flex-direction: row; align-items: center; padding: 16px 0 72px; }
  .hero-copy { width: 48%; flex-shrink: 0; padding: 0 0 24px var(--gutter); }
  .hero .fit { flex: 1 1 0; min-width: 0; margin: 0 var(--gutter) 0 16px; }
  .split, .band.gray > .split { flex-direction: row; align-items: center; gap: 48px; }
  .band.gray > .split { align-items: stretch; padding-top: 0; padding-bottom: 0; }
  .s2-copy { width: 50%; max-width: none; flex-shrink: 0; padding: var(--section) 0; justify-content: center; }
  .s6-copy { width: 44%; max-width: none; flex-shrink: 0; }
  .split .fit { flex: 1 1 0; min-width: 0; margin: 0; align-self: auto; }
}

@media (max-width: 759.98px) {
  .plans { grid-template-columns: minmax(0, 1fr); width: 520px; }
}

/* Phones. */
@media (max-width: 640px) {
  :root { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --edge: max(14px, env(safe-area-inset-left), env(safe-area-inset-right)); --section: 72px; }
  .hero { padding: 8px 0 56px; }
  .hero-copy { gap: 28px; padding-bottom: 36px; }
  .kicker { flex-wrap: wrap; row-gap: 8px; }
  .lede { font-size: 18px; line-height: 27px; }
  .split, .band.gray > .split { gap: 40px; }
  .world-tiles { grid-template-columns: minmax(0, 1fr); }
  .pad-callout { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .pad-callout b { font-size: 20px; line-height: 25px; }
  .world-video { border-radius: 18px; }
  .world-toggle { right: 10px; top: 10px; }

  /* The hero, the thread and the device, recomposed for a narrow column: the same parts, closer
     together, so main.js can draw them larger. (Their inline styles hold the desktop composition.) */
  .hero .hero-cloudy { left: 160px !important; top: 70px !important; width: 480px !important; height: 201px !important; }
  .hero .needs { left: 376px !important; top: -46px !important; width: 234px !important; z-index: 1; }
  .hero .done { left: 190px !important; top: 268px !important; width: 420px !important; }
  .done-row .time { width: 64px; }
  .done-text .t15 { text-wrap: balance; }
  .device-stage .ask { left: 96px !important; top: 34px !important; width: 300px !important; }
  .device-stage .reply { left: 150px !important; top: 478px !important; width: 330px !important; }
}
/* The smallest phones: a little more room for the nav's logo and Download pill. */
@media (max-width: 380px) {
  :root { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --edge: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .pill-sm { padding-left: 14px; padding-right: 14px; }
}

/* Touch screens: no hover state left stuck on after a tap. */
@media (hover: none) {
  .pill:hover { transform: none; opacity: 1; }
  .play:hover .play-ring { background: none; }
  .final-link:hover { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .btn-ink, .btn-soft, .cloudy img { transition: none; }
  .cloudy.is-poked img, .cloudy.is-cheering img, .talk.is-speaking .device-cloudy img, .talk.is-speaking .wave i { animation: none; }
  .say { transition: none; }
  .wave i:nth-child(odd) { height: 70%; }
}

/* ===== The shared shell: header, download buttons, footer (every page; tools/sync-shell.mjs) ===== */
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 24px; line-height: 30px; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.logo-dot { color: #b9cc12; }
.site-header { position: relative; z-index: 20; }
.nav { display: flex; align-items: center; gap: 28px; padding: 22px var(--gutter); }
.nav-main { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 500; font-size: 15px; line-height: 20px; color: var(--ink); }
.nav-link:hover { background: #f2f2f0; }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lime); border-radius: 0; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-dl { display: flex; gap: 8px; }
.nav-cta { white-space: nowrap; }
.footer-dl .pill:first-child { background: var(--lime); color: var(--ink); }
.nav-mobile { display: none; position: static; }
.nav-burger { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.nav-burger::-webkit-details-marker { display: none; }
.burger { position: relative; width: 16px; height: 10px; }
.burger i { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, top 0.2s ease; }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 8px; }
.nav-mobile[open] .burger i:first-child { top: 4px; transform: rotate(45deg); }
.nav-mobile[open] .burger i:last-child { top: 4px; transform: rotate(-45deg); }
.nav-sheet { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 8px var(--gutter) 24px; background: #fff; box-shadow: 0 1px 0 var(--hair), 0 40px 60px -30px rgba(0, 0, 0, 0.3); }
.sheet-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--hair); font-weight: 700; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; }
.sheet-dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sheet-dl .pill { flex: 1 1 auto; justify-content: center; }

/* Download buttons: the one for the visitor's computer (the shell's script marks html.os-mac or
   html.os-windows); both, the Mac one filled, on phones, tablets, Linux and without JS. */
.dl { white-space: nowrap; }
.dl-win { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
html.os-mac .dl-win, html.os-windows .dl-mac { display: none; }
html.os-windows .dl-win { background: var(--ink); color: #fff; box-shadow: none; }
.band.ink .dl { font-weight: 700; padding: 18px 30px; }
.band.ink .dl-mac { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.band.ink .dl-win { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
html.os-windows .band.ink .dl-win { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

.site-footer { border-top: 1px solid var(--hair); color: var(--graphite); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 48px var(--gutter) 36px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 420px; }
.footer-brand p { font-size: 15px; line-height: 22px; }
.footer-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px var(--gutter) max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); font-size: 14px; line-height: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer-links a { display: inline-block; padding: 10px 0; font-weight: 500; font-size: 15px; color: var(--ink); }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }

@media (max-width: 1199.98px) {
  .nav { gap: 16px; }
  .nav-link { padding: 0 10px; }
}
@media (max-width: 899.98px) {
  .nav-main, .nav-login { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-mobile { display: block; }
}
@media (max-width: 640px) {
  .nav { padding: 10px var(--gutter); }
  .logo { font-size: 19px; gap: 7px; }
  .logo-mark { width: 26px; height: 15px; }
  .footer-top { padding-top: 40px; }
}
@media (max-width: 480px) {
  .nav-actions { gap: 8px; }
  .burger-text { display: none; }
  .nav-burger { padding: 0 14px; }
  .nav-cta { padding: 12px 15px; }
}
@media (max-width: 380px) {
  .logo { font-size: 17px; }
  .nav-cta { padding: 12px 12px; }
}
@media (hover: none) {
  .nav-link:hover { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .burger i { transition: none; }
}

/* The note the download buttons open on anything but an Apple-silicon Mac (download.js): a small card
   in the page's own style, with Cloudy. */
button.pill { border: 0; font-family: inherit; cursor: pointer; }
.pill-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mac-note { width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 34px 28px 26px; border: 0; border-radius: 28px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 0 0 2px var(--ink), 0 40px 80px -30px rgba(0, 0, 0, 0.5); overscroll-behavior: contain; }
.mac-note[open] { display: flex; flex-direction: column; align-items: center; animation: mac-note-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.mac-note:focus { outline: none; }
.mac-note::backdrop { background: rgba(10, 10, 10, 0.55); }
.mac-note [hidden] { display: none !important; }
.mac-note-disc { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 84px; height: 84px; margin-bottom: 18px; border-radius: 999px; background: var(--lime); }
.mac-note-disc img { width: 62px; height: auto; }
.mac-note h2 { font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -0.035em; }
.mac-note p { max-width: 320px; margin-top: 10px; font-size: 16px; line-height: 23px; color: var(--graphite); }
.mac-note-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 24px; }
.mac-note .pill { flex: 1 1 auto; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 20px; font-size: 16px; line-height: 22px; }
.mac-note .pill.is-done { background: var(--lime); color: var(--ink); box-shadow: none; }
.mac-note-anyway { margin-top: 8px; padding: 12px 8px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.mac-note-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }
.mac-note-close:hover { background: #f2f2f0; }
.mac-note button:focus-visible, .mac-note a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mac-note-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mac-note-copy { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; }
@keyframes mac-note-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@media (max-height: 500px) {
  .mac-note { padding-top: 22px; }
  .mac-note-disc { width: 64px; height: 64px; margin-bottom: 12px; }
  .mac-note-disc img { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .mac-note[open] { animation: none; }
}