/* The Products pages: /cloudy/ (Cloudy, the device) and /download/ (the app for Mac and Windows).
   Loaded after styles.css, whose type, pills, cards, bands, scene stages (.fit / .stage, scaled by
   main.js), the device glass and the talk bubbles these pages reuse. Everything here is prefixed pr-
   so it never collides with the home page or the other page groups. The heroes are their own class,
   not .hero, and the device scene is not .device-stage: styles.css recomposes both on phones with
   !important positions meant for the home page only. */

.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Hero: the copy on the left, a scene on the right ------------------------------------------ */
.pr-hero { display: flex; align-items: center; gap: 32px; min-height: 720px; padding: 24px var(--gutter) 96px; }
.pr-hero-copy { display: flex; flex-direction: column; gap: 30px; width: 580px; flex-shrink: 0; }
.pr-hero > .fit { flex: 1 1 0; min-width: 0; }
.pr-hero-copy .lede { max-width: 500px; }
.pr-title { position: relative; z-index: 0; font-weight: 900; font-size: clamp(76px, 8.4vw, 128px); line-height: 0.88; letter-spacing: -0.065em; }
.pr-title.is-long { font-size: clamp(64px, 7vw, 108px); line-height: 0.9; letter-spacing: -0.062em; }
.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: -4px; }
.pr-price b { font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.05em; }
.pr-small { font-size: 14px; line-height: 20px; color: var(--muted); }
.pr-small a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.pr-hero-copy .pr-small { margin-top: -14px; }
/* The download line under the buttons: what the visitor's computer needs (html.os-* from the shell). */
.pr-req { display: flex; flex-wrap: wrap; gap: 2px 18px; }
html.os-mac .pr-req-win, html.os-windows .pr-req-mac { display: none; }

/* ---- Sections ------------------------------------------------------------------------------------ */
.pr-sec { padding: 130px var(--gutter); }
.pr-split { display: flex; align-items: center; justify-content: space-between; gap: 72px; }
.pr-copy { display: flex; flex-direction: column; gap: 26px; width: 520px; flex-shrink: 0; }
.pr-visual { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.pr-ink-lede { max-width: 660px; color: #b4b4b0; }
.band.ink .mono-muted { color: #9a9a98; }

/* A card on white: the scenes that sit in normal flow (no stage to scale). */
.pr-scene { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 600px; padding: 56px 0; }
.pr-figure { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.pr-shot { display: block; width: 100%; max-width: 560px; height: auto; -webkit-user-drag: none; }

/* Lists with the lime tick. */
.pr-checks { display: flex; flex-direction: column; }
.pr-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-weight: 500; font-size: 15px; line-height: 21px; }
.pr-checks svg { flex-shrink: 0; margin-top: 1px; }

/* Questions: plain details, a lime plus that turns into a cross. */
.pr-faq { width: 780px; max-width: 100%; margin-top: 28px; text-align: left; border-top: 1px solid var(--ring); }
.pr-faq details { border-bottom: 1px solid var(--ring); }
.pr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 18px 4px; cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: var(--lime); font-weight: 600; font-size: 20px; line-height: 1; transition: transform 0.2s ease; }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq summary:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pr-faq p { max-width: 660px; padding: 0 48px 22px 4px; font-size: 16px; line-height: 24px; color: var(--graphite); }

/* ---- /cloudy/: the device, talking ----------------------------------------------------------------
   The device render with the round glass measured as the OS's DeviceFace (styles.css .glass: left
   10.03%, top 8.99%, 78.93% x 79.9%, Cloudy at 92% of it). Poke Cloudy; there is no drag or rotate on
   the face. Hold to talk is its own button, beside the device's real talk button. */
.pr-talk { width: 680px; height: 660px; }
.pr-talk .spot { left: 80px; top: 100px; width: 500px; height: 500px; }
.pr-talk .device { left: 160px; top: 170px; width: 340px; height: 348px; }
.pr-talk .ask { left: 10px; top: 40px; width: 300px; }
.pr-talk .reply { left: 300px; top: 540px; width: 340px; }
.pr-talk .pr-state { left: 470px; top: 150px; }
.pr-talk .pr-hold { left: 512px; top: 322px; }
.pr-lines { display: none; }

/* What Cloudy's screen says it is doing (the docs: Listening, Thinking, Working, Speaking, Done). */
.pr-state { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 36px -18px rgba(0, 0, 0, 0.35); font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; white-space: nowrap; }
.pr-state i { width: 8px; height: 8px; border-radius: 999px; background: #2bb24c; }
.pr-state[data-state="listening"] i { background: #e59a0b; animation: pr-pulse 1s ease-in-out infinite; }
.pr-state[data-state="thinking"] i, .pr-state[data-state="working"] i { background: var(--ink); animation: pr-pulse 0.7s ease-in-out infinite; }
.pr-state[data-state="speaking"] i { background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
@keyframes pr-pulse { 50% { opacity: 0.25; } }

/* Hold to talk: press and hold, say nothing (it's an example), let go, and Cloudy answers. */
.pr-hold { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; white-space: nowrap; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.5); transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; }
.pr-hold::before { content: ""; position: absolute; left: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.pr-hold .pr-mic { width: 26px; height: 26px; }
.pr-hold:hover { transform: translateX(-2px); }
.pr-hold.is-held { background: var(--lime); color: var(--ink); transform: scale(0.96); }
.pr-hold.is-held .pr-mic { background: var(--ink); color: var(--lime); }
.pr-hold:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pr-mic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--lime); color: var(--ink); }

/* The five states, one lit at a time (products.js), all of them plain without it. */
.pr-states { width: 100%; max-width: 500px; padding: 20px 24px 10px; }
.pr-states-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.pr-states li { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hair); transition: opacity 0.3s ease; }
.pr-states .status { width: 94px; flex-shrink: 0; text-align: center; transition: background 0.3s ease, color 0.3s ease; }
.pr-states.is-cycling li { opacity: 0.45; }
.pr-states.is-cycling li.is-on { opacity: 1; }
.pr-states li.is-on .status { background: var(--ink); color: var(--lime); }

.pr-spec { width: 100%; border-top: 1px solid var(--ring); }
.pr-spec > div { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ring); }
.pr-spec dt { width: 104px; flex-shrink: 0; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; color: var(--muted); }
.pr-spec dd { font-weight: 500; font-size: 16px; line-height: 22px; }

.pr-buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 940px; max-width: 100%; margin-top: 16px; overflow: hidden; text-align: left; background: #fff; border-radius: 28px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 40px 80px -34px rgba(0, 0, 0, 0.32); }
.pr-buy-media { display: flex; align-items: center; justify-content: center; padding: 36px 28px; background: #fff; border-right: 1px solid var(--hair); }
.pr-buy-media img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.pr-buy-body { display: flex; flex-direction: column; padding: 30px 32px 26px; }
.pr-buy-name { font-weight: 700; font-size: 19px; line-height: 24px; letter-spacing: -0.01em; }
.pr-buy-price { margin: 2px 0 16px; font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: -0.055em; }
.pr-buy-price span { margin-left: 6px; font-weight: 500; font-size: 16px; letter-spacing: 0; color: var(--muted); }
.pr-buy .pill { justify-content: center; margin-top: 18px; min-height: 56px; }
.pr-buy .pr-small { margin-top: 12px; text-align: center; }

/* ---- /download/: Cloudy dropping out of the notch --------------------------------------------------
   The island opens and closes with a clip, never a change of size, so main.js's fit never moves. */
.pr-notch { width: 680px; height: 560px; }
.pr-notch .spot { left: 150px; top: 70px; width: 440px; height: 440px; }
.pr-screen { left: 20px; top: 24px; width: 640px; height: 330px; padding: 12px 12px 0; border-radius: 30px 30px 0 0; background: var(--ink); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.pr-display { position: relative; height: 100%; overflow: hidden; border-radius: 19px 19px 0 0; background: linear-gradient(165deg, #fbfbf9 0%, #eaeae6 100%); }
.pr-menubar { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 16px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }
.pr-menubar span { display: flex; align-items: center; gap: 12px; }
.pr-menubar i { display: block; height: 7px; border-radius: 4px; background: #cfcfcb; }
.pr-menubar svg { display: block; }
.pr-cut { position: absolute; left: 50%; top: 0; width: 168px; height: 30px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: var(--ink); }
.pr-island { left: 200px; top: 36px; width: 280px; height: 372px; display: flex; flex-direction: column; align-items: center; padding: 34px 16px 16px; border-radius: 0 0 44px 44px; background: #000; color: #fff; clip-path: inset(0 0 0 0 round 0 0 44px 44px); transition: clip-path 0.55s cubic-bezier(0.3, 1.25, 0.4, 1); }
.pr-island > * { transition: opacity 0.3s ease 0.15s; }
.pr-notch.is-closed .pr-island { clip-path: inset(0 56px calc(100% - 30px) 56px round 0 0 14px 14px); transition-duration: 0.35s; transition-timing-function: ease; }
.pr-notch.is-closed .pr-island > * { opacity: 0; transition-delay: 0s; }
.pr-island-face { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; flex-shrink: 0; border-radius: 999px; background: radial-gradient(circle at 50% 45%, #242426 0%, #000 70%); }
.pr-island .cloudy { position: relative; width: 140px; height: 140px; }
.pr-island .cloudy:focus-visible { outline: 3px solid var(--lime); outline-offset: -6px; }
.pr-island-state { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; color: var(--lime); }
.pr-island-state i { width: 7px; height: 7px; border-radius: 999px; background: var(--lime); }
.pr-island-text { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 0.28em; min-height: 48px; margin-top: 6px; text-align: center; font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
.pr-island-text.is-you { color: #b4b4b0; }
.pr-island .wave { margin-top: 6px; }
.pr-island-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 44px; margin-top: auto; padding: 0 6px 0 16px; border-radius: 999px; background: #1b1b1b; color: #8a8a87; font-size: 13px; line-height: 16px; }
/* The notch itself is a button: click it to open or close Cloudy, as in the app. */
.pr-notch-btn { left: 256px; top: 36px; width: 168px; height: 30px; border: 0; border-radius: 0 0 14px 14px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pr-notch-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pr-tool { left: 488px; top: 262px; width: 188px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 18px; transition: opacity 0.3s ease, transform 0.3s ease; }
.pr-tool .mono-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; }
.pr-tool-who { display: flex; align-items: center; gap: 8px; }
.pr-tool-who img { width: 34px; height: 20px; object-fit: contain; }
.pr-keys { left: 30px; top: 410px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pr-keys:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 14px; }
.pr-keycaps { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 15px; }
.pr-keycaps kbd { display: inline-flex; flex-direction: column; justify-content: space-between; min-width: 60px; height: 56px; padding: 7px 10px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 0 #d6d6d2, 0 22px 30px -18px rgba(0, 0, 0, 0.35); font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: 12px; line-height: 14px; color: var(--ink); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.pr-keycaps kbd b { font-size: 17px; line-height: 18px; }
.pr-keycaps kbd.is-wide { min-width: 96px; justify-content: flex-end; }
.pr-keys.is-pressed kbd { transform: translateY(3px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 0 #d6d6d2, 0 12px 20px -14px rgba(0, 0, 0, 0.35); }
.pr-keys .mono-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
/* products.js plays the island: listening, thinking, working (the tool card comes in), speaking, done.
   Without JS or with reduced motion it rests in full, the way it reads here. */
.pr-notch.is-playing .pr-tool { opacity: 0; transform: translateY(8px); }
.pr-notch.is-playing.show-tool .pr-tool { opacity: 1; transform: none; }
.pr-notch .wave i { height: 30%; }
.pr-notch.is-listening .wave i, .pr-notch.is-speaking .wave i { animation: wave 0.9s ease-in-out infinite; }
.pr-island-text .w { transition: opacity 0.18s ease; }
.pr-notch.is-playing .pr-island-text .w { opacity: 0.2; }
.pr-notch.is-playing .pr-island-text .w.on { opacity: 1; }

/* The app in a window. */
.pr-window { width: 100%; max-width: 540px; overflow: hidden; background: #fff; border-radius: 20px; text-align: left; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 40px 80px -34px rgba(0, 0, 0, 0.4); }
.pr-window-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: #f2f2f0; border-bottom: 1px solid var(--ring); }
.pr-dots { display: flex; gap: 7px; }
.pr-dots i { width: 11px; height: 11px; border-radius: 999px; background: #d4d4d0; }
.pr-address { flex: 1; min-width: 0; overflow: hidden; padding: 5px 12px; border-radius: 8px; background: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--graphite); }
.pr-window-body { display: flex; min-height: 330px; }
.pr-side { display: flex; flex-direction: column; gap: 2px; width: 150px; flex-shrink: 0; padding: 12px 8px; background: var(--paper-2); border-right: 1px solid var(--hair); }
.pr-side li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 18px; }
.pr-side li span { display: flex; flex-direction: column; }
.pr-side li small { font-weight: 500; font-size: 11px; line-height: 14px; color: var(--muted); }
.pr-side li.is-on { background: #fff; box-shadow: 0 0 0 1px var(--ring); }
.pr-side img { width: 30px; height: 18px; object-fit: contain; flex-shrink: 0; }
.pr-chat { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 16px 14px; }
.pr-chat .bubble { font-size: 14px; line-height: 19px; }
.pr-ok { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; box-shadow: 0 0 0 1px var(--ring); }
.pr-ok-head { display: flex; align-items: center; gap: 8px; }
.pr-ok.is-done .dot-amber { background: #2bb24c; }
.pr-ok-actions { display: flex; gap: 8px; margin-top: 2px; }
.pr-ok .btn-ink, .pr-ok .btn-soft { min-height: 32px; }

.pr-reqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 1080px; max-width: 100%; margin-top: 12px; text-align: left; }
.pr-reqs > li { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 26px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -36px rgba(0, 0, 0, 0.3); }
.pr-reqs .ficon { margin-bottom: 10px; background: var(--ink); box-shadow: none; color: #fff; }
.pr-reqs b { font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.pr-reqs p { font-size: 16px; line-height: 23px; color: var(--graphite); }
html.os-mac .pr-reqs .is-mac, html.os-windows .pr-reqs .is-win { box-shadow: 0 0 0 2px var(--ink), 0 30px 60px -36px rgba(0, 0, 0, 0.3); }
.pr-reqs-note { max-width: 640px; }

/* ---- Narrower screens ---------------------------------------------------------------------------- */
@media (max-width: 1179.98px) {
  .pr-hero { flex-direction: column; align-items: stretch; gap: 40px; min-height: 0; padding: 16px var(--gutter) 72px; }
  .pr-hero-copy { width: 100%; max-width: 640px; }
  .pr-hero > .fit, .pr-split > .fit { flex: none; width: auto; }
  .pr-sec { padding: var(--section, 88px) var(--gutter); }
  .pr-split { flex-direction: column; align-items: stretch; gap: 48px; }
  .pr-copy { width: 100%; max-width: 640px; }
  .pr-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 760px; }
  .pr-reqs > li:last-child { grid-column: 1 / -1; }
}
/* Landscape tablets and small laptop windows: side by side again, in flexible columns. */
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .pr-hero { flex-direction: row; align-items: center; }
  .pr-hero-copy { width: 46%; flex-shrink: 0; }
  .pr-hero > .fit { flex: 1 1 0; min-width: 0; }
  .pr-split { flex-direction: row; align-items: center; }
  .pr-copy { width: 46%; flex-shrink: 0; }
}
@media (max-width: 759.98px) {
  .pr-reqs { grid-template-columns: minmax(0, 1fr); width: 520px; }
  .pr-buy { grid-template-columns: minmax(0, 1fr); width: 520px; }
}

/* Phones: the stages recomposed for a narrow column, the same parts closer together, so main.js can
   draw them larger. */
@media (max-width: 640px) {
  .pr-hero { padding-top: 8px; }
  .pr-title { font-size: clamp(64px, 19vw, 86px); }
  .pr-title.is-long { font-size: clamp(56px, 16.5vw, 76px); }
  .pr-price b { font-size: 46px; }
  .pr-scene { padding: 36px 0; }
  .pr-faq summary { font-size: 17px; }
  .pr-faq p { padding-right: 8px; }
  .pr-talk .spot { left: 110px; top: 130px; width: 320px; height: 320px; }
  .pr-talk .device { left: 120px; top: 136px; width: 300px; height: 307px; }
  .pr-talk .ask { left: 80px; top: 0; width: 300px; }
  .pr-talk .pr-state { left: 84px; top: 462px; }
  .pr-talk .pr-hold { left: 252px; top: 457px; }
  .pr-hold::before { display: none; }
  .pr-talk .reply { left: 110px; top: 520px; width: 320px; }
  .pr-notch .spot { left: 160px; top: 80px; width: 360px; height: 360px; }
  .pr-screen { left: 140px; width: 400px; }
  .pr-menubar i:nth-child(n + 3) { display: none; }
  .pr-tool { left: 336px; top: 424px; width: 200px; }
  .pr-keys { left: 144px; top: 428px; }
  .pr-keycaps kbd { min-width: 54px; }
  .pr-keycaps kbd.is-wide { min-width: 76px; }
  .pr-keys .mono-label { display: none; }
  .pr-side { display: none; }
  .pr-buy-price { font-size: 60px; }
  .pr-buy-body { padding: 26px 22px 22px; }
  .pr-buy-media { padding: 28px 22px; border-right: 0; border-bottom: 1px solid var(--hair); }
}

@media (hover: none) {
  .pr-faq summary:hover { text-decoration: none; }
  .pr-hold:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-state i { animation: none; }
  .pr-faq summary::after, .pr-tool, .pr-island, .pr-island > *, .pr-island-text .w, .pr-hold, .pr-states li, .pr-states .status, .pr-keycaps kbd { transition: none; }
  .pr-notch .wave i { animation: none !important; }
  .pr-notch .wave i:nth-child(odd) { height: 70%; }
}

/* Hold to talk: your words come up as Cloudy hears them. */
.pr-talk.is-playing .ask .w { opacity: 0.18; transition: opacity 0.18s ease; }
.pr-talk.is-playing .ask .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pr-talk.is-playing .ask .w { transition: none; }
}

/* The home hero's device, alive (show.js). Cloudy sits dead centre on the glass (data-framing="glass",
   at 92% of it, as the OS's DeviceFace does). The device floats a little over its own soft shadow, and a
   light runs over the metal now and then. Hold to talk sends rings out from the glass. */
.show-stage { width: 700px; height: 600px; }
/* Cloudy itself takes the pull (touch-action none), so the page still scrolls everywhere else. */
.show-stage .device-cloudy { touch-action: none; cursor: grab; }
.show-stage .device-cloudy:active { cursor: grabbing; }
.show-stage .show-device { left: 120px; top: 60px; width: 460px; height: 472px; animation: show-float 6s ease-in-out infinite; }
.show-stage .device-shadow { left: 210px; top: 552px; width: 280px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), transparent); animation: show-shadow 6s ease-in-out infinite; }
.show-stage .show-fx { left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; } /* zero-sized, so the scene's fit (main.js) is the device alone */
@keyframes show-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes show-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.75; } }
.device-sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(/v2/media/cloudy-device.webp) center / 100% 100% no-repeat; mask: url(/v2/media/cloudy-device.webp) center / 100% 100% no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 160% 0 / 280% 100% no-repeat; animation: show-sheen 7s ease-in-out infinite; }
@keyframes show-sheen { 0%, 62% { background-position: 160% 0; } 88%, 100% { background-position: -60% 0; } }
.hear-rings { position: absolute; left: 10.03%; top: 8.99%; width: 78.93%; height: 79.9%; pointer-events: none; }
.hear-rings i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--lime); opacity: 0; }
.show-stage.is-hearing .hear-rings i { animation: show-ring 1.5s cubic-bezier(.2, .6, .3, 1) infinite; }
.show-stage.is-hearing .hear-rings i:nth-child(2) { animation-delay: 0.5s; }
.show-stage.is-hearing .hear-rings i:nth-child(3) { animation-delay: 1s; }
@keyframes show-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
.fx { position: absolute; pointer-events: none; line-height: 0; will-change: transform, opacity; }
.fx-note { color: var(--ink); }
.fx-note svg { width: 30px; height: 30px; }
.fx-star { color: var(--lime); filter: drop-shadow(0 0 0.6px #0a0a0a) drop-shadow(0 0 0.6px #0a0a0a); }
.fx-star.is-ink { color: var(--ink); filter: none; }
.fx-bit i { display: block; width: 8px; height: 13px; border-radius: 2px; }
.fx-z { font-weight: 900; font-size: 30px; line-height: 1; color: var(--ink); }
.fx-steam i { display: block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #d9d9d6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
@media (max-width: 640px) {
  .show-stage .show-device { left: 120px; top: 40px; width: 460px; height: 472px; }
  .show-stage .device-shadow { top: 524px; }
}
@media (prefers-reduced-motion: reduce) {
  .show-stage .show-device, .show-stage .device-shadow, .device-sheen, .show-stage.is-hearing .hear-rings i { animation: none; }
}

/* The hardware tour (home section 4, hwtour.js). The renders large on ink; a 640 px square viewer in the
   middle with the cards springing out into the space either side; the parts as chips underneath. */
.hw-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 120px var(--gutter) 110px; }
.hw-head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hw .mono-muted { color: #9a9a98; }
.hw-lede { max-width: 600px; color: #b4b4b0; }
.hw-stage { position: relative; width: min(1260px, 100%); height: 640px; margin-top: 24px; }
.hw-zoom { position: absolute; left: calc(50% - 320px); top: 0; width: 640px; height: 640px; transform-origin: 50% 50%; transition: transform 0.9s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.hw-view { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.7s ease; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.hw-view.is-on { opacity: 1; }
.hw-glow { position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 255, 59, 0.28), rgba(233, 255, 59, 0.08) 55%, transparent); opacity: 0; transition: opacity 0.5s ease, left 0.9s cubic-bezier(.2, .9, .25, 1), top 0.9s cubic-bezier(.2, .9, .25, 1); pointer-events: none; }
.hw.is-touring .hw-glow { opacity: 1; }
/* The front view's glass: the live Cloudy lights it when the screen is the part on show. */
.hw-glass { position: absolute; left: 19.4%; top: 17.9%; width: 60.4%; height: 62.6%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #1b1b1d 0%, #0b0b0c 62%); opacity: 0; transition: opacity 0.6s ease; }
.hw.part-screen .hw-glass { opacity: 1; }
.hw-cloudy { position: relative; width: 92%; height: 92%; flex-shrink: 0; }
.hw-cloudy img { object-fit: contain; }
.hw-spots { position: absolute; inset: 0; }
.hw-spot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0; transition: opacity 0.4s ease; }
.hw-spot span { position: absolute; inset: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(233, 255, 59, 0.25), 0 6px 16px rgba(0, 0, 0, 0.5); transition: transform 0.35s cubic-bezier(.2, 1.7, .4, 1); }
.hw-spot span::before, .hw-spot span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: var(--ink); transition: transform 0.3s ease; }
.hw-spot span::after { transform: rotate(90deg); }
.hw-spot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--lime); opacity: 0; animation: hw-ping 2.4s ease-out infinite; }
@keyframes hw-ping { 0% { transform: scale(0.7); opacity: 0.8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.hw.view-front .hw-spot[data-view="front"], .hw.view-pair .hw-spot[data-view="pair"] { opacity: 1; }
.hw.view-angled .hw-spot { opacity: 0; pointer-events: none; }
.hw-spot:hover span, .hw-spot.is-on span { transform: scale(1.25); }
.hw-spot.is-on span::after { transform: rotate(0deg); }
.hw-spot.is-on span::before { transform: rotate(180deg); }
.hw-spot:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* The card: springs out beside the device, on the side away from the part. */
.hw-card { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: 270px; padding: 18px 20px 20px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.hw-card.on-left { left: max(0px, calc(50% - 320px - 300px)); }
.hw-card.on-right { left: min(calc(100% - 270px), calc(50% + 320px + 30px)); }
.hw-card[hidden] { display: none; }
.hw-card.is-pop { animation: hw-card-in 0.6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes hw-card-in { from { opacity: 0; transform: translate(var(--from, 0), -50%) scale(0.7); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
.hw-card { transform: translate(0, -50%); }
.hw-card-label { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.hw-card-title { font-weight: 800; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; }
.hw-card-text { font-size: 15px; line-height: 21px; color: var(--graphite); }
.hw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; }
.hw-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 16px 9px; border: 0; border-radius: 14px; background: #161616; color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px #2a2a28; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.hw-chip b { font-weight: 700; font-size: 14px; line-height: 18px; }
.hw-chip-label { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: #8a8a87; }
.hw-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #4a4a46; }
.hw-chip.is-on { background: var(--lime); color: var(--ink); box-shadow: none; }
.hw-chip.is-on .hw-chip-label { color: #4a4a20; }
.hw-chip:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.hw-carry { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a87; text-align: center; }
/* The full list: for screen readers always; on screen without JS or with reduced motion. */
.hw-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.hw-js) .hw-list, .hw.is-static .hw-list { position: static; width: min(1080px, 100%); height: auto; overflow: visible; clip-path: none; white-space: normal; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hw-list li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: #151515; box-shadow: inset 0 0 0 1px #262624; }
.hw-li-label { font-family: "Geist Mono", monospace; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: var(--lime); }
.hw-list b { font-weight: 700; font-size: 17px; color: #fff; }
.hw-list li > span:last-child { font-size: 14px; line-height: 20px; color: #a8a8a4; }
html:not(.hw-js) .hw-chips, html:not(.hw-js) .hw-card, .hw.is-static .hw-chips, .hw.is-static .hw-card, html:not(.hw-js) .hw-spot, .hw.is-static .hw-spot { display: none; }
html:not(.hw-js) .hw-view[data-view="angled"], .hw.is-static .hw-view[data-view="angled"] { opacity: 0; }
html:not(.hw-js) .hw-view[data-view="front"], .hw.is-static .hw-view[data-view="front"] { opacity: 1; }

@media (max-width: 1179.98px) {
  .hw-wrap { padding: var(--section) var(--gutter); }
  .hw-stage { height: auto; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .hw-zoom { position: relative; left: auto; width: min(560px, 100%); height: auto; aspect-ratio: 1; }
  .hw-card, .hw-card.on-left, .hw-card.on-right { position: relative; left: auto; top: auto; width: min(480px, 100%); transform: none; }
  @keyframes hw-card-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: none; } }
  html:not(.hw-js) .hw-list, .hw.is-static .hw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hw-spot { display: none; }
  .hw-chips { flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hw-chips::-webkit-scrollbar { display: none; }
  .hw-chip { flex: 0 0 auto; scroll-snap-align: center; }
  html:not(.hw-js) .hw-list, .hw.is-static .hw-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-zoom, .hw-view, .hw-glow, .hw-glass, .hw-spot, .hw-spot span, .hw-chip { transition: none; }
  .hw-spot::after, .hw-card.is-pop { animation: none; }
}

/* The home hero, v3 (hero.js). White, ink, lime only as an accent. The copy on the left: the headline's
   words land with a springy stagger and the highlighter sweeps across "does it."; under it, jobs are
   typed in as if said out loud, each ticked as Cloudy reacts. The device large on the right, floating over
   a soft contact shadow and leaning a little with the pointer (a translate only, never a rotate). */
.hero-v3 { position: relative; min-height: min(860px, calc(100vh - 88px)); min-height: min(860px, calc(100svh - 88px)); padding-bottom: 72px; gap: 24px; }
.hero-v3 .pr-hero-copy { gap: 28px; width: 600px; }
.hero-v3 .kicker { margin-bottom: -6px; }
.hero-v3 .hero-title { font-size: clamp(76px, 8.6vw, 132px); line-height: 0.88; }
.hero-title .hw-w { display: inline-block; }
.hero-title .hl { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 0 / 100% 100%; }
.hero-v3.is-live .hero-title .hw-w { animation: hero-word 0.9s cubic-bezier(.2, 1.4, .35, 1) both; animation-delay: calc(0.08s + var(--i) * 0.09s); }
.hero-v3.is-live .hero-title .hl { animation: hero-sweep 0.6s cubic-bezier(.3, .9, .3, 1) 0.75s both; }
@keyframes hero-word { from { opacity: 0; transform: translateY(42%) rotate(5deg) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes hero-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* What you say: a mic, the words as you say them, a caret, then the tick. */
.said { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: -2px; font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.015em; white-space: nowrap; }
.said-mic { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--lime); }
.said-q { min-width: 0; overflow: hidden; text-overflow: clip; }
.said-caret { display: inline-block; width: 3px; height: 1.05em; margin: 0 1px -0.16em 2px; border-radius: 2px; background: var(--ink); animation: said-blink 1s steps(1) infinite; }
@keyframes said-blink { 50% { opacity: 0; } }
.said-done { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 1; }
.hero-v3.is-live .said-done { opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.45s cubic-bezier(.2, 1.8, .4, 1); }
.hero-v3.is-live .said.is-done .said-done { opacity: 1; transform: none; }
.hero-v3.is-live .said.is-done .said-caret, .hero-v3:not(.is-live) .said-caret { width: 0; margin: 0; visibility: hidden; }
.hero-v3 .lede { max-width: 520px; }
/* The device: bigger, centred in its column, with a contact shadow that tightens as it floats up. */
.hero-stage.show-stage { width: 660px; height: 660px; }
.hero-stage .hero-lean { left: 60px; top: 30px; width: 540px; height: 553px; transition: transform 0.6s cubic-bezier(.2, .8, .3, 1); will-change: transform; }
.hero-stage .show-device { position: absolute; left: 0; top: 0; width: 540px; height: 553px; animation: show-float 6s ease-in-out infinite; }
.hero-stage .device-shadow { left: 150px; top: 596px; width: 360px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 60%, transparent); animation: show-shadow 6s ease-in-out infinite; transition: translate 0.6s cubic-bezier(.2, .8, .3, 1); }
.hero-stage .device-shadow i { position: absolute; left: 22%; right: 22%; top: 34%; bottom: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.32), transparent); }
@media (min-width: 1180px) { .hero-fit { align-self: center; } }
/* The device's room is held before main.js sizes it (the same numbers it arrives at: the whole 660 x 640 stage on
   wide screens, the device's own 540 x 612 below that), so nothing under it jumps while a slow phone loads. */
@media (min-width: 1180px) { .hero-v3 .hero-fit { max-width: 660px; aspect-ratio: 660 / 640; } }
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) { .hero-v3 .hero-fit { aspect-ratio: 540 / 612; } }
/* A tiny scroll cue. */
.scroll-cue { position: absolute; left: 50%; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); font-family: "Geist Mono", monospace; font-weight: 600; font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }
.scroll-cue i { position: relative; width: 1.5px; height: 28px; overflow: hidden; background: var(--ring); }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--ink); animation: cue-drop 1.8s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes cue-drop { to { top: 100%; } }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 1179.98px) {
  .hero-v3 { min-height: 0; padding-bottom: 64px; }
  .hero-v3 .pr-hero-copy { width: 100%; max-width: 640px; }
  .scroll-cue { display: none; }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .hero-v3 .pr-hero-copy { width: 48%; }
}
/* Stacked (phones, tablets upright): the device right after what you say, so Cloudy reacts on screen. */
@media (max-width: 959.98px), (max-width: 1179.98px) and (max-height: 599.98px) {
  .hero-v3 { gap: 26px; }
  .hero-v3 .pr-hero-copy { display: contents; }
  .hero-v3 .kicker { order: 1; }
  .hero-v3 .hero-title { order: 2; }
  .hero-v3 .said { order: 3; }
  .hero-v3 .hero-fit { order: 4; margin: 4px 0 0; height: min(612px, calc((100vw - 2 * var(--gutter)) * 612 / 540)); }
  .hero-v3 .lede { order: 5; }
  .hero-v3 .ctas { order: 6; }
}
@media (max-width: 640px) {
  .hero-v3 .hero-title { font-size: clamp(60px, 18vw, 84px); }
  .hero-v3 .pr-hero-copy { gap: 24px; }
  .said { gap: 10px; font-size: 19px; }
  .said-mic { width: 32px; height: 32px; }
  .hero-stage .show-device { left: 0; top: 0; width: 540px; height: 553px; }
  .hero-stage .device-shadow { top: 596px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v3.is-live .hero-title .hw-w, .hero-v3.is-live .hero-title .hl, .said-caret, .scroll-cue i::after, .hero-stage .show-device, .hero-stage .device-shadow { animation: none; }
  .hero-stage .hero-lean, .hero-v3.is-live .said-done { transition: none; }
}