/* Additive graphics pass: original sections, screenshots and content stay intact. */
.cloud-graphics .cloud-hero { min-height: min(820px, calc(100svh - 69px)); padding: 24px var(--pad) 38px; }
.cloud-graphics .cloud-hero__copy { width: min(1100px, 100%); }
.cloud-hero__art { position: relative; width: 310px; aspect-ratio: 1; margin: -8px auto 12px; isolation: isolate; }
.cloud-hero__fallback { display: block; width: 100%; height: 100%; }
.cloud-hero__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cloud-hero__art[data-orb-rendered] .cloud-hero__fallback { visibility: hidden; }
.cloud-graphics .cloud-hero .cloud-kicker { margin-bottom: 16px; font-size: .72rem; }
.cloud-graphics .cloud-hero .display { max-width: 100%; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1.06; margin-bottom: 22px; }
.cloud-graphics .cloud-hero__title-line { display: inline; width: auto; white-space: normal; }
.cloud-graphics .cloud-hero__title-line + .cloud-hero__title-line::before { content: ' '; }
.cloud-graphics .cloud-hero__title-accent { display: block; }
.cloud-graphics .cloud-hero__sub { font-size: 1.06rem; margin-bottom: 24px; }
.cloud-graphics .cloud-hero__meta { margin-top: 24px; gap: 10px; }
.cloud-graphics .cloud-hero__release { width: 100%; }
.cloud-graphics .cloud-hero__release [data-state='ready'] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* The text remains readable even if an observer or an animation cannot run. */
.cloud-graphics .reveal { opacity: 1; transform: none; transition: none; }
.cloud-demo__link { position: relative; height: 70px; align-self: center; }
.cloud-demo__wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: scaleY(.25); opacity: .5; transition: transform .45s var(--step), opacity .45s var(--step); }
.cloud-demo__wave-line { stroke: var(--accent-lift-b); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cloud-demo__wave-glow { stroke: var(--accent-a); stroke-width: 5; opacity: .45; filter: blur(5px); }
.cloud-graphics .cloud-demo__wire { opacity: 0; transition: opacity .3s var(--step); }
.cloud-live[data-in-view] [data-phase='speaking']:not([data-live-demo]) .cloud-demo__wave { opacity: 1; animation: cloud-wave-breathe 2.4s ease-in-out infinite; }
[data-cloud-demo][data-live-demo] .cloud-demo__wave { transform: scaleY(calc(.25 + var(--demo-level) * .9)); opacity: calc(.5 + var(--demo-level) * .5); }
.cloud-live[data-in-view] [data-phase='prompt'] .cloud-demo__wire { opacity: 1; }
.cloud-live[data-in-view] [data-phase='prompt'] .cloud-demo__wire i { animation: cloud-signal .8s var(--step) 1; }
@keyframes cloud-wave-breathe { 0%,100% { transform: scaleY(.65); } 50% { transform: scaleY(1); } }
/* Original photographs and composition retained; a short reveal follows tab selection. */
.cloud-graphics .workflow-panel[data-active] { animation: cloud-panel-enter .32s var(--step) both; }
.cloud-graphics .workflow-panel[data-active] .workflow-panel__image img { animation: cloud-image-settle .75s var(--step) both; }
@keyframes cloud-panel-enter { from { opacity: .15; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes cloud-image-settle { from { transform: scale(1.045); } to { transform: scale(1.012); } }
@media (min-width: 641px) and (max-height: 780px) {
  .cloud-graphics .cloud-hero { padding-top: 12px; padding-bottom: 24px; }
  .cloud-hero__art { width: 252px; margin-bottom: 4px; }
  .cloud-graphics .cloud-hero .display { font-size: clamp(2.4rem, 4.1vw, 3.3rem); margin-bottom: 16px; }
  .cloud-graphics .cloud-hero__sub { margin-bottom: 18px; }
  .cloud-graphics .cloud-hero__meta { margin-top: 20px; padding-top: 14px; }
}
@media (max-width: 640px) {
  .cloud-graphics .cloud-hero { padding: 22px 18px 36px; min-height: calc(100svh - 64px); }
  .cloud-hero__art { width: 180px; margin-bottom: 8px; }
  .cloud-graphics .cloud-hero .display { font-size: clamp(1.85rem, 8vw, 2.8rem); }
  .cloud-graphics .cloud-hero__sub { font-size: 1rem; }
  .cloud-graphics[data-hero-visible] .cloud-mobile-cta,
  .cloud-graphics[data-demo-visible] .cloud-mobile-cta { opacity: 0; visibility: hidden; pointer-events: none; }
  .cloud-demo__wave { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-graphics *, .cloud-graphics *::before, .cloud-graphics *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Demo: art and status are separate grid rows, never overlapping layers. */
.cloud-demo__art { position: relative; width: min(230px, 100%); aspect-ratio: 1; margin: -12px auto 0; }
.cloud-demo__art canvas, .cloud-orb__fallback { display: block; width: 100%; height: 100%; }
.cloud-demo__art canvas { position: absolute; inset: 0; }
.cloud-demo__art[data-orb-rendered] .cloud-orb__fallback { visibility: hidden; }
.cloud-graphics .cloud-demo__orb-stage { width: 100%; padding: 0; gap: 2px; }
.cloud-graphics .cloud-demo__voice { gap: 16px; }
.cloud-graphics .cloud-product-window .mock__status { position: static; transform: none; width: 100%; max-width: 250px; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cloud-graphics .cloud-product-window .mock__phase { font: 500 .78rem/1.45 var(--sans); letter-spacing: .015em; text-transform: none; text-wrap: balance; }
.cloud-graphics .cloud-demo__state-orb[hidden] { display: none; }

/* Privacy: a local device and journal, with bounded motion while in view. */
.cloud-graphics .privacy-flow { grid-template-columns: minmax(240px, .9fr) 90px minmax(350px, 1.3fr); gap: 18px; }
.cloud-graphics .privacy-node { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px 30px; }
.privacy-device { width: min(100%, 300px); margin: 0 auto 24px; }
.privacy-device svg { display: block; width: 100%; overflow: visible; }
.privacy-device__screen { transform-origin: 50% 70%; }
.privacy-device__voice path { transform-box: fill-box; transform-origin: center; }
.privacy-device__packet { stroke-dasharray: 2 10; }
.privacy-flow[data-in-view] .privacy-device__screen { animation: privacy-device-float 7s ease-in-out infinite; }
.privacy-flow[data-in-view] .privacy-device__voice path { animation: privacy-voice 2.3s ease-in-out infinite alternate; }
.privacy-flow[data-in-view] .privacy-device__voice path:nth-child(2n) { animation-delay: -.65s; }
.privacy-flow[data-in-view] .privacy-device__voice path:nth-child(3n) { animation-delay: -1.2s; }
.privacy-flow[data-in-view] .privacy-device__packet { animation: privacy-packet 2.5s linear infinite; }
@keyframes privacy-device-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes privacy-voice { from { transform: scaleY(.5); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@keyframes privacy-packet { to { stroke-dashoffset: -24; } }
.cloud-graphics .privacy-node p { margin-bottom: 0; color: var(--text-2); }
.cloud-graphics .privacy-service { padding: 24px; transition: border-color .25s var(--step), background .25s var(--step); }
.cloud-graphics .privacy-service:hover { border-color: hsl(277 50% 65% / .4); background: hsl(260 30% 15% / .7); }
.privacy-service__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid hsl(278 50% 70% / .18); border-radius: 13px; background: linear-gradient(135deg, hsl(280 50% 45% / .16), hsl(260 30% 15%)); }
.privacy-service__icon svg { width: 26px; height: 26px; color: var(--accent-lift-b); }
.cloud-graphics .privacy-service > b { font-size: 1rem; margin-bottom: 10px; }
.cloud-graphics .privacy-service > span:not(.privacy-service__icon) { color: var(--text-2); font-size: .88rem; line-height: 1.65; }
.cloud-graphics .privacy-wire { writing-mode: horizontal-tb; display: flex; flex-direction: column; justify-content: center; gap: 10px; font-size: .63rem; line-height: 1.55; letter-spacing: .035em; text-align: center; }
.cloud-graphics .privacy-wire::before { inset: 50% 0 auto; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, hsl(280 75% 70% / .55), transparent); }
.cloud-graphics .privacy-wire svg { position: relative; z-index: 1; width: 30px; height: 30px; padding: 5px; box-sizing: content-box; background: var(--bg); color: var(--accent-lift-b); }
.cloud-graphics .privacy-wire span { padding: 6px 0; }
.cloud-graphics .privacy-wire::after { content: ''; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-lift-b); opacity: 0; }
.privacy-flow[data-in-view] .privacy-wire::after { animation: privacy-channel 3.4s linear infinite; }
@keyframes privacy-channel { 0% { transform: translateX(0); opacity: 0; } 20%,80% { opacity: .9; } 100% { transform: translateX(90px); opacity: 0; } }

/* Pricing keeps a shared button geometry and intentional phrase wrapping. */
.cloud-plan__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; width: min(100%, 340px); }
.cloud-plan__actions .btn { width: 100%; min-height: 50px; text-align: center; justify-content: center; }
.cloud-plan__kicker { flex-wrap: wrap; column-gap: 10px; row-gap: 6px; font-size: .68rem; letter-spacing: .09em; line-height: 1.5; }
.cloud-plan__kicker::before { display: none; }
.cloud-plan__kicker > span { white-space: nowrap; }
.cloud-plan__kicker > span + span { color: var(--text-2); }
.cloud-graphics .cloud-plan .title { font-size: clamp(1.85rem, 2.8vw, 2.65rem); line-height: 1.14; text-wrap: balance; }
.cloud-graphics .cloud-plan__price { flex-wrap: wrap; row-gap: 0; }
.cloud-graphics .cloud-plan__price span { line-height: 1.5; }
@media (max-width: 1000px) {
  .cloud-graphics .privacy-flow { grid-template-columns: minmax(200px, .8fr) 74px minmax(280px, 1.2fr); gap: 12px; }
  .cloud-graphics .privacy-service { padding: 18px; }
}
@media (max-width: 840px) {
  .cloud-graphics .privacy-flow { grid-template-columns: 1fr; gap: 24px; }
  .cloud-graphics .privacy-node { display: grid; grid-template-columns: minmax(160px, .7fr) 1fr; column-gap: 28px; align-items: center; }
  .privacy-device { grid-row: span 2; margin: 0; }
  .cloud-graphics .privacy-node p { align-self: start; }
  .cloud-graphics .privacy-node h3 { align-self: end; }
  .cloud-graphics .privacy-wire { flex-direction: row; gap: 8px; }
  .cloud-graphics .privacy-wire span { padding-inline: 8px; }
  .cloud-graphics .privacy-wire::after { display: none; }
  .cloud-plan__actions { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cloud-demo__art { width: 190px; }
  .cloud-graphics .privacy-node { display: flex; text-align: center; padding: 24px; }
  .privacy-device { width: min(260px, 100%); margin-bottom: 24px; }
  .cloud-graphics .privacy-services { grid-template-columns: 1fr; }
  .cloud-graphics .privacy-service { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 16px; padding: 20px; }
  .privacy-service__icon { grid-row: span 2; margin: 0; }
  .cloud-plan__actions { grid-template-columns: 1fr; }
  .cloud-plan__kicker { font-size: .66rem; }
  .cloud-graphics .cloud-plan .title { font-size: 1.9rem; }
}

/* The primary and secondary actions share one alignment on every landing CTA. */
.cloud-graphics .cloud-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: min(520px, 100%); margin-inline: auto; }
.cloud-graphics .cloud-hero__actions .btn { min-height: 48px; height: 100%; text-align: center; justify-content: center; }
.cloud-graphics #privacy .cloud-section__head .title { font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.12; text-wrap: balance; }
.cloud-graphics #privacy .cloud-section__head--split { column-gap: 40px; }
.cloud-graphics #how .cloud-section__head .title { font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.12; text-wrap: balance; }
@media (max-width: 640px) {
  .cloud-graphics .cloud-hero__actions { grid-template-columns: 1fr; }
  .cloud-graphics #privacy .cloud-section__head .title,
  .cloud-graphics #how .cloud-section__head .title { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
}

/* FAQ: one compact composition; the answer sheets respond to the open question. */
.cloud-graphics .cloud-faq { padding-top: clamp(56px, 5vw, 72px); padding-bottom: 32px; }
.cloud-graphics .cloud-faq .faq { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.cloud-graphics .cloud-faq .faq__title { position: static; top: auto; min-width: 0; }
.cloud-graphics .cloud-faq .cloud-kicker { margin-bottom: 16px; }
.cloud-graphics .cloud-faq .title { margin-bottom: 0; font-size: clamp(2rem, 2.6vw, 2.25rem); line-height: 1.12; text-wrap: balance; }
.cloud-graphics .faq__lede { max-width: 34ch; margin-top: 20px; color: var(--text-2); }
.faq__art { position: relative; width: 230px; aspect-ratio: 1; margin: 8px 0 -28px -16px; isolation: isolate; }
.faq__art::before { content: ''; position: absolute; inset: 30% 8% 6%; background: radial-gradient(ellipse, hsl(285 65% 55% / .12), transparent 70%); pointer-events: none; }
.faq__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.faq__art[data-orb-rendered] .cloud-orb__fallback { visibility: hidden; }
.cloud-graphics .cloud-faq .faq__list { min-width: 0; }
.cloud-graphics .cloud-faq .qa .qa__answer p { color: var(--text-2); }
.cloud-graphics .cloud-faq + .cloud-closing { padding-top: 48px; }
@media (max-width: 900px) {
  .cloud-graphics .cloud-faq .faq { grid-template-columns: 1fr; gap: 28px; }
  .cloud-graphics .cloud-faq .faq__title { display: grid; grid-template-columns: minmax(0, 1fr) 160px; column-gap: 24px; align-items: start; }
  .cloud-graphics .cloud-faq .faq__title > :not(.faq__art) { grid-column: 1; }
  .faq__art { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 160px; margin: 0; }
  .cloud-graphics .faq__lede { margin-top: 16px; }
}
@media (max-width: 640px) {
  .cloud-graphics .cloud-faq { padding-top: 48px; padding-bottom: 24px; }
  .cloud-graphics .cloud-faq .faq__title { display: block; position: relative; padding-top: 8px; }
  .cloud-graphics .cloud-faq .cloud-kicker { min-height: 48px; margin-bottom: 16px; }
  .cloud-graphics .cloud-faq .title { max-width: 15ch; font-size: 2rem; }
  .cloud-graphics .faq__lede { max-width: 32ch; }
  .faq__art { position: absolute; width: 88px; right: 0; top: -16px; opacity: .85; }
  .cloud-graphics .cloud-faq + .cloud-closing { padding-top: 40px; }
}