/* Content-first revision, 2026-09-18. Preserve the original black/orange brand.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 3 / VISUAL_DENSITY 4.
   The user explicitly requested white text placeholders, not generated media.
   Native semantic figures describe future media; they are not fake product UI.
   Keep the established light theme, 12px surfaces and rounded black buttons. */
/* Targeted homepage refinement, 2026-10-06: preserve-mode 5 / 4 / 3.
   One sampled #f5f5f7 page canvas; existing card and media surfaces stay intact.
   Native CSS frosted glass, not an Apple platform material. */
:root { --paper: #f5f5f7; }
.header {
  background: rgb(245 245 247 / 68%);
  border-bottom: 1px solid rgb(212 215 221 / 42%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 62%),0 2px 12px rgb(33 42 56 / 2.5%);
}
/* The transparent cutout's main bounds are x160–1726, y95–725.
   Crop only its transparent margins; proportional sizing serves all three lockups. */
.logo-crop img { width: 124.0102%; max-width: none; height: auto; left: -10.2171%; top: 50%; transform: translateY(-50.68%); }
.desktop-nav a { color: var(--ink); white-space: nowrap; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.hero { padding-top: 58px; }
.hero-copy,.hero-copy::before,.hero-copy::after { animation: none; }
/* Preserve-mode cleanup: only the user-selected hero decorations are retired.
   Keep the light black/orange brand, original typography and native video controls. */
.hero-copy::before,.hero-copy::after { content: none; display: none; }
.hero h1 .hero-slogan { background: none; padding-bottom: 0; }
.hero h1 .hero-ai-word { display: inline-block; margin: 0; padding: 0; color: #596fff; background: none; }
/* Reuse the approved login's .slogan-ai palette and 7-second color flow.
   Keep the homepage font size/weight and limit color motion to the two letters. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 .hero-ai-word {
    background-image: linear-gradient(110deg, #348dfa, #596fff, #8664ec, #309ecc, #348dfa);
    background-size: 280% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-ai-flow 7s ease-in-out infinite;
  }
}
@keyframes hero-ai-flow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-ai-word { animation: none; background-position: 50% 50%; }
}
.section-heading { max-width: 920px; }
.section-heading.centered { margin-inline: auto; }
.section-heading p { max-width: 720px; }
.section-heading.centered p { margin-inline: auto; }
.heading-support { display: block; margin-top: 12px; font-size: .62em; line-height: 1.5; font-weight: 500; letter-spacing: -.5px; }
.video-section { padding-top: 48px; padding-bottom: 100px; }
.media-placeholder { background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.media-kind { display: block; color: #686868; font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.6; margin-bottom: 22px; }
.note-reference { margin-top: 20px; font-size: 12px; line-height: 1.8; color: #676767; }
.note-reference a { display: inline-block; padding-block: 4px; text-decoration: underline; text-underline-offset: 3px; }
.note-reference a:hover { color: var(--ink); }
/* Xiaomi-style compact footnotes, adapted to the existing light page canvas. */
.site-notes { max-width: 1000px; padding-top: 24px; padding-bottom: 28px; color: #676767; font-size: 12px; line-height: 1.55; }
.site-notes h2 { margin-bottom: 8px; font-size: 12px; line-height: 1.55; font-weight: 400; letter-spacing: 0; }
.site-notes-list { margin: 0; padding: 0; list-style: none; }
.site-notes-list li { display: flex; align-items: flex-start; gap: 6px; scroll-margin-top: 14px; }
.site-notes-list li + li { margin-top: 4px; }
.site-note-marker { flex: none; white-space: nowrap; }
.site-notes-list p { min-width: 0; }
/* A compact, three-field consultation form; keep the existing modal behavior. */
#consult-dialog { width: min(480px, calc(100% - 32px)); max-width: 480px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 32px; overflow-y: auto; background: #fff; }
#consult-dialog h2 { margin: 0 44px 24px 0; font-size: 26px; line-height: 1.4; letter-spacing: -.5px; }
.consult-form { display: grid; gap: 18px; }
.consult-form[hidden],.consult-result[hidden],.consult-spinner[hidden],.consult-submit-check[hidden] { display: none; }
.consult-form { opacity: 1; transition: opacity 200ms ease; }
.consult-form.is-leaving { opacity: 0; }
.consult-form[aria-busy="true"] .consult-field { opacity: .7; }
.consult-field { display: grid; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.consult-field input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #dedee2; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; }
.consult-field input::placeholder { color: #85858a; opacity: 1; }
.consult-field input:focus-visible { outline: 2px solid #252525; outline-offset: 2px; border-color: #252525; }
.consult-submit { position: relative; display: flex; width: 100%; min-width: 0; height: 52px; min-height: 52px; padding: 0; gap: 0; margin: 4px auto 0; overflow: hidden; border-radius: 999px; transition: width 360ms cubic-bezier(.22,1,.36,1),background 160ms ease; }
.consult-submit:hover,.consult-submit:active { transform: none; }
.consult-submit.is-loading { width: 52px; border-radius: 50%; }
.consult-submit-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; transition: opacity 140ms ease; }
.consult-submit.is-loading .consult-submit-label { opacity: 0; }
.consult-submit:disabled { background: #252525; color: #fff; cursor: wait; }
.consult-spinner { position: absolute; top: calc(50% - 11px); left: calc(50% - 11px); width: 22px; height: 22px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: consult-spin .7s linear infinite; }
.consult-submit-check { position: absolute; top: calc(50% - 14px); left: calc(50% - 14px); width: 28px; height: 28px; }
.consult-submit-check svg { display: block; width: 100%; height: 100%; }
.consult-submit-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.consult-submit.is-complete .consult-submit-check path { animation: consult-check 240ms ease forwards; }
.consult-feedback { color: #a33627; font-size: 13px; line-height: 1.6; }
.consult-feedback:not(:empty) { margin-top: 12px; }
.consult-result { padding: 16px 0 8px; text-align: center; animation: consult-appear 200ms ease both; }
.consult-success-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #252525; color: #fff; }
.consult-success-mark svg { width: 32px; height: 32px; }
.consult-result h3 { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 24px; line-height: 1.4; font-weight: 600; }
.consult-result > p { margin-top: 12px; color: #666; font-size: 15px; line-height: 1.8; }
.consult-done { width: 100%; min-height: 48px; margin-top: 28px; }
.consult-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes consult-spin { to { transform: rotate(360deg); } }
@keyframes consult-check { to { stroke-dashoffset: 0; } }
@keyframes consult-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .consult-form,.consult-submit,.consult-submit-label { transition: none; }
  .consult-spinner,.consult-result,.consult-submit.is-complete .consult-submit-check path { animation: none; }
  .consult-submit.is-complete .consult-submit-check path { stroke-dashoffset: 0; }
}
@media (max-width:767px) {
  #consult-dialog { padding: 28px 22px; }
  #consult-dialog h2 { font-size: 24px; margin-bottom: 22px; }
  .consult-form { gap: 16px; }
}
.media-placeholder p { font-size: 16px; line-height: 1.85; color: var(--muted); }
.media-placeholder h3,.media-placeholder h4 { font-size: 23px; line-height: 1.5; font-weight: 600; letter-spacing: -.35px; }
.media-placeholder .placeholder-detail { font-size: 13px; line-height: 1.8; color: #696969; margin-top: 24px; }
.video-placeholder { padding: 34px 42px 42px; }
.video-showcase { margin: 0; }
.business-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 16px; background: #111; box-shadow: 0 14px 36px -6px rgb(33 42 56 / 10%),0 3px 10px rgb(33 42 56 / 4%); }
.business-video:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.media-caption { padding-bottom: 24px; }
.media-caption .media-kind { margin-bottom: 12px; }
.media-caption h2 { font-size: 25px; letter-spacing: -.5px; }
.media-caption>p { margin-top: 12px; font-size: 14px; }
.video-storyboard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 48px; }
.video-storyboard article { border-top: 1px solid var(--line); padding-top: 22px; }
.video-storyboard h3 { color: var(--accent-text); font-size: 17px; }
.video-storyboard p { margin-top: 12px; font-size: 15px; }
.video-storyboard .scene-line { color: var(--ink); font-size: 21px; font-weight: 500; margin-top: 8px; }
.video-storyboard .scene-result { font-size: 14px; }
.geo-section { background: var(--paper); }
.geo-section .section-heading h2 { font-size: clamp(32px,3.6vw,48px); }
.geo-showcase { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 32px; align-items: stretch; }
/* The native image height sets the desktop row; three text blocks share it.
   Size containment prevents text padding from pushing the row below the image. */
.feature-selector { display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 8px; min-width: 0; min-height: 0; contain: size; }
.feature-selector button { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; text-align: left; background: none; border: 0; padding: 16px 20px; border-radius: 3px; color: var(--muted); }
.feature-selector button strong { display: block; font-size: 23px; line-height: 1.4; margin-bottom: 8px; font-weight: 500; color: var(--ink); }
.feature-selector button span { display: block; font-size: 16px; line-height: 1.7; }
.feature-selector button[aria-selected=true] { background: #ededeb; }
.feature-selector button[aria-selected=true]::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--accent); }
.feature-selector button:hover { background: #f0f0ed; }
.feature-selector button[aria-selected=true]:hover { background: #ededeb; }
.feature-image { padding: 44px; display: grid; align-items: center; min-height: 465px; }
.feature-image h3 { font-size: 28px; margin-bottom: 20px; }
.feature-image p { max-width: 480px; }
/* Default source ratio is 1672 x 941; selected originals may override it.
   No stretching or color extensions; explicit edge trims only remove source borders. */
.feature-image.geo-artwork { display: block; align-self: start; min-width: 0; min-height: 0; padding: 0; aspect-ratio: 1672 / 941; overflow: hidden; border: 0; border-radius: 16px; background: transparent; }
.geo-artwork img { display: block; width: 100%; height: auto; }
/* The 1654 x 951 monitor PNG contains 3 black rows above and 20 below.
   Show only source rows 3-930; translate percentages refer to the image height. */
.feature-image.geo-artwork--trim-edges { position: relative; aspect-ratio: 1654 / 928; }
.geo-artwork--trim-edges img { position: absolute; top: 0; left: 0; transform: translateY(-0.31545741%); }
/* Preserve-mode real-world stage carousel: DESIGN_VARIANCE 5 /
   MOTION_INTENSITY 5 / VISUAL_DENSITY 3. Generated photography carries
   the scenario; punctuation-led clauses stream in with restrained emphasis. */
.care-gallery { display: grid; gap: 28px; }
.care-card { position: relative; display: grid; grid-template-rows: auto auto; min-width: 0; overflow: visible; background: transparent; }
.care-ai-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.care-copy { --care-bubble-bg: #eef4fc; --care-bubble-line: #cfddf0; position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: start; gap: 14px; width: max-content; max-width: 100%; min-width: 0; min-height: 3.1em; padding: 0 0 18px; color: var(--ink); background: transparent; pointer-events: none; transition: opacity 260ms ease,transform 260ms ease; }
.care-ai-avatar { display: block; width: 54px; height: auto; overflow: visible; }
.care-ai-eyes { animation: care-eye-look 4.8s ease-in-out infinite; }
.care-copy h3 { position: relative; justify-self: start; width: fit-content; max-width: 100%; margin: 0; padding: 14px 20px 15px; border: 1px solid var(--care-bubble-line); border-radius: 16px; color: #172b46; background: var(--care-bubble-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%),0 12px 30px -24px rgb(31 69 116 / 38%); font-size: 22px; line-height: 1.55; font-weight: 600; letter-spacing: -.35px; }
.care-copy h3::before { content: ""; position: absolute; top: 22px; left: -8px; width: 15px; height: 15px; border-left: 1px solid var(--care-bubble-line); border-bottom: 1px solid var(--care-bubble-line); background: var(--care-bubble-bg); transform: rotate(45deg); }
.care-title-line { display: block; white-space: nowrap; }
.care-mobile-break { display: none; }
.care-emphasis { color: #3151b8; background: linear-gradient(transparent 62%,rgb(102 126 255 / 20%) 62%); font-weight: inherit; }
.care-stream-char { display: inline-block; }
.care-gallery.is-character-stream .care-emphasis { position: relative; z-index: 0; background: none; }
.care-gallery.is-character-stream .care-emphasis::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; z-index: -1; height: .4em; border-radius: 2px; background: rgb(102 126 255 / 20%); transform: scaleX(0); transform-origin: left center; }
.care-page { position: relative; min-width: 0; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 16px; background: #edf2fa; }
.care-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Selected card stays large in the center. The three equal-ratio cards share
   one grid cell while transforms expose the neighboring scenes.
   DESIGN_VARIANCE 4 / MOTION_INTENSITY 4 / VISUAL_DENSITY 4. */
.care-gallery.is-coverflow { isolation: isolate; gap: 0; padding-block: 20px 52px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.is-coverflow .care-card { grid-area: 1 / 1; align-self: stretch; width: 64%; margin-inline: auto; transform-origin: center; transition: transform 480ms cubic-bezier(.22,.68,.12,1), opacity 480ms ease; }
.is-coverflow .care-card[data-position="center"] { z-index: 2; transform: translateX(0) scale(1); opacity: 1; }
.is-coverflow .care-card[data-position="center"] .care-page { box-shadow: 0 26px 56px -22px rgb(35 57 84 / 26%),0 10px 24px -16px rgb(35 57 84 / 20%); }
.is-coverflow .care-card[data-position="previous"] { z-index: 1; transform: translateX(-62%) scale(.68); opacity: .66; }
.is-coverflow .care-card[data-position="next"] { z-index: 1; transform: translateX(62%) scale(.68); opacity: .66; }
.is-coverflow .care-card:not([data-position="center"]) .care-copy { opacity: 0; transform: translateY(8px); }
.is-coverflow .care-card:not([data-position="center"]) .care-ai-eyes { animation-play-state: paused; }
.is-coverflow.is-character-stream .care-card[data-position="center"] .care-stream-char { animation: care-character-stream 80ms linear both; animation-delay: var(--care-char-delay); }
.is-coverflow.is-character-stream .care-card[data-position="center"] .care-emphasis::after { animation: care-emphasis-sweep 320ms cubic-bezier(.16,1,.3,1) both; animation-delay: var(--care-emphasis-delay); }
.is-coverflow .care-page img { user-select: none; }
.care-select { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; padding: 0; border-radius: 16px; background: transparent; cursor: pointer; }
.care-select:focus-visible { outline: 3px solid #2355a1; outline-offset: -4px; }
.is-coverflow .care-card:focus-within { opacity: 1; }
.product-topics { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.product-topics span { font-size: 18px; font-weight: 500; }
.product-topics span + span { border-left: 2px solid #ffd0af; padding-left: 24px; }
.conversion-section .availability { font-size: 14px; }
@keyframes care-eye-look {
  0%,38%,100% { transform: translateX(0); }
  52%,82% { transform: translateX(40px); }
}
@keyframes care-character-stream { from { opacity: 0; } to { opacity: 1; } }
@keyframes care-emphasis-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.decisions-section { background: var(--paper); padding-block: 88px; }
/* Targeted preserve-mode redesign.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 2 / VISUAL_DENSITY 3.
   Apple product-card inspiration, implemented with native CSS, not a package.
   User-requested 28px product-card radius; other section radii are preserved.
   Original copy sits above real objects with user-requested crayon accents.
   Artwork is 80% of its previous contain-fit size and clipped by the card bottom.
   Preserve the site's light theme; no animation or new interaction. */
.decision-orbit {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 40px;
  max-width: 1080px;
  margin-inline: auto;
}
.decision-feature {
  --art-stage-height: 320px;
  --card-padding-block: 32px;
  --art-bottom-shift: 4%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 560px;
  gap: 24px;
  padding: 32px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  overflow: clip;
  box-shadow: 0 14px 36px -6px rgb(33 42 56 / .14),0 3px 10px rgb(33 42 56 / .04);
}
.decision-feature-copy { min-width: 0; }
.decision-artwork-stage {
  display: grid;
  place-items: end center;
  flex: none;
  height: var(--art-stage-height);
  margin-top: auto;
  margin-bottom: calc(-1 * var(--card-padding-block));
}
.decision-feature-artwork {
  display: block;
  width: min(80%,calc(var(--art-stage-height) * 4 / 3 * .8));
  height: auto;
  object-fit: contain;
  transform: translateY(var(--art-bottom-shift));
}
.decision-feature h3 { margin-bottom: 16px; font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -.6px; text-wrap: pretty; }
.decision-feature p { color: #414148; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
@media(max-width:1100px) and (min-width:768px) {
  .decision-feature { --art-stage-height: 260px; --card-padding-block: 28px; min-height: 500px; padding: 28px; }
  .decision-feature h3 { font-size: 28px; }
  .decision-feature p { font-size: 17px; }
}
@media(max-width:767px) {
  .decisions-section { padding-block: 64px; }
  .decision-orbit { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .decision-feature { --art-stage-height: 260px; --card-padding-block: 28px; min-height: 0; gap: 24px; padding: 28px 24px; }
  .decision-artwork-stage { margin-top: 0; }
  .decision-feature h3 { font-size: 26px; margin-bottom: 14px; }
  .decision-feature p { font-size: 17px; }
}
@media(max-width:359px) {
  .decision-feature { --art-stage-height: 220px; --card-padding-block: 24px; padding: 24px 20px; }
  .decision-feature h3 { font-size: 24px; }
}
.paradigm-equation { font-size: 24px!important; color: var(--ink)!important; font-weight: 500; }
.paradigm-equation span { color: var(--accent-text); margin: 0 12px; }
/* Preserve-mode architecture explainer: solid cards and a shared AI.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 4 / VISUAL_DENSITY 3.
   Local stacking context: cards at 0, the shared AI at 1.
   The original PNG is centered by its body bounds; the sparkle sits outside.
   Soft card shadows add depth; only the separated original eyes animate. */
.os-section .section-heading { margin-bottom: 40px; }
.os-concept { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 96px; align-items: stretch; }
.os-concept-card { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 360px; border: 1px solid; border-radius: 16px; box-shadow: 0 14px 34px -4px rgb(33 42 56 / .09),0 3px 8px rgb(33 42 56 / .035); }
.os-concept-card--agent { grid-column: 1; grid-row: 1; padding: 40px 104px 40px 40px; color: #f8fafc; border-color: #252a30; background: #252a30; }
.os-concept-card--system { grid-column: 2; grid-row: 1; padding: 40px 40px 40px 144px; color: #20252c; border-color: #e1e7ed; background: #f0f3f6; }
.os-concept-card h3 { font-size: 17px; line-height: 1.5; font-weight: 500; letter-spacing: .1px; }
.os-concept-message { margin-top: 22px; font-size: 28px; line-height: 1.55; font-weight: 600; letter-spacing: -.6px; text-wrap: pretty; }
.os-concept-copy { margin-top: 20px; font-size: 16px; line-height: 1.9; }
.os-concept-card--agent .os-concept-copy { color: #d9dfe5; }
.os-concept-card--system .os-concept-copy { color: #525c68; }
.os-companion { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: center; width: 224px; min-width: 0; pointer-events: none; }
.os-companion-avatar { display: block; width: 100%; height: auto; overflow: visible; }
@media(prefers-reduced-motion:no-preference) {
  .os-companion-eyes { animation: os-eye-look 10s ease-in-out infinite; animation-play-state: paused; }
  .os-concept[data-playing=true] .os-companion-eyes { animation-play-state: running; }
  @keyframes os-eye-look {
    0%,12%,48%,60%,100% { transform: translateX(0); }
    20%,36% { transform: translateX(-32px); }
    68%,84% { transform: translateX(32px); }
  }
}
@media(max-width:1100px) {
  .os-concept { gap: 64px; }
  .os-concept-card--agent { padding: 34px 80px 34px 24px; }
  .os-concept-card--system { padding: 34px 24px 34px 128px; }
  .os-companion { width: 176px; }
  .os-concept-message { font-size: 24px; }
  .os-concept-copy { font-size: 15px; }
}
@media(max-width:767px) {
  .os-section .section-heading { margin-bottom: 28px; }
  .os-concept { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .os-concept-card { min-height: 0; }
  .os-concept-card--agent { grid-column: 1; grid-row: 1; padding: 28px 24px 84px; }
  .os-concept-card--system { grid-column: 1; grid-row: 2; padding: 92px 24px 28px; }
  .os-concept-message { font-size: 24px; margin-top: 18px; }
  .os-concept-copy { margin-top: 16px; }
  .os-companion { grid-column: 1; grid-row: 1; width: 112px; align-self: end; translate: 0 calc(50% + 12px); }
}
@media(max-width:359px) {
  .os-concept-card { padding-inline: 18px; }
  .os-concept-message { font-size: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .os-companion-eyes { animation: none!important; transform: none; }
}
/* Application gallery: screenshot-inspired offset rows, original brand retained.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 4 / VISUAL_DENSITY 4.
   User-requested automatic gallery; semantic examples, not executable prompts. */
.applications-section { padding-bottom: 64px; }
.applications-section .section-heading { max-width: none; margin-bottom: 24px; }
.applications-section .section-heading h2 { font-size: clamp(30px,3.3vw,46px); }
.application-gallery { --card-width: 360px; --card-gap: 22px; padding: 7px max(40px,calc((100% - 1200px)/2)) 20px; overflow-x: clip; overflow-y: visible; }
.application-gallery.is-animated { padding-inline: 0; }
.application-gallery:focus-visible { outline-offset: -3px; }
.application-rows { display: grid; gap: var(--card-gap); }
.application-row,.application-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--card-gap); }
.application-row:has(.application-group) { display: block; }
.application-gallery.is-animated .application-row { display: flex; gap: 0; width: max-content; animation: application-loop var(--loop-duration) linear infinite both; animation-play-state: paused; }
.application-gallery.is-animated .application-group { grid-template-columns: repeat(4,var(--card-width)); flex: none; padding-right: var(--card-gap); }
.application-gallery.is-animated .application-row + .application-row { animation-direction: reverse; }
.application-gallery.is-animated[data-playing=true] .application-row { animation-play-state: running; }
.application-gallery.is-animated:focus-visible .application-row { animation-play-state: paused; }
@media(hover:hover) and (pointer:fine) { .application-gallery.is-animated:hover .application-row { animation-play-state: paused; } }
@keyframes application-loop {
  from { transform: translateX(calc(-1 * var(--loop-offset))); }
  to { transform: translateX(calc(-1 * (var(--loop-distance) + var(--loop-offset)))); }
}
.application-card { background: #fff; border-radius: 28px; padding: 28px; min-height: 208px; box-shadow: 0 14px 36px -6px rgb(33 42 56 / .14),0 3px 10px rgb(33 42 56 / .04); }
.application-card-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 12px; margin-bottom: 20px; }
.application-card h3 { font-size: 21px; font-weight: 500; line-height: 1.5; letter-spacing: -.35px; }
.application-card p { font-size: 16px; line-height: 1.85; color: #424242; }
.applications-section + .os-section { padding-top: 72px; }
/* This review build stays still so media notes can be read without transitions. */
.reveal,.reveal.is-visible { opacity: 1; transform: none; transition: none; }
@media(max-width:1199px) {
  .geo-showcase { grid-template-columns: 1fr; gap: 24px; }
  .feature-selector { contain: none; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto; }
  .feature-selector button { justify-content: flex-start; }
}
@media(max-width:1100px) {
  .feature-image { padding: 30px; }
  .care-copy { padding-bottom: 16px; }
  .care-ai-avatar { width: 50px; }
  .care-copy h3 { font-size: 20px; }
  .is-coverflow .care-card { width: 70%; }
  .application-gallery { --card-width: 330px; padding-inline: 28px; }
  .application-card { padding: 25px; }
}
@media(max-width:767px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* A filtered header would contain its fixed descendant instead of the viewport. */
  .header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .desktop-nav { display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 56px; gap: 0; padding: 5px 8px; border-radius: 999px; background: #fff; box-shadow: 0 5px 24px rgb(33 42 56 / 10%); font-size: 13px; }
  .desktop-nav a { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; min-height: 44px; }
  .desktop-nav a:focus-visible { outline-offset: -3px; }
  .hero { padding-top: 42px; }
  .video-section { padding-top: 35px; padding-bottom: 70px; }
  .video-placeholder { padding: 26px 23px; }
  .media-caption h2 { font-size: 23px; }
  .video-storyboard { grid-template-columns: 1fr; gap: 25px; }
  .video-storyboard .scene-line { font-size: 20px; }
  .heading-support { font-size: 22px; margin-top: 8px; }
  .geo-showcase { grid-template-columns: 1fr; gap: 22px; }
  .feature-selector { grid-template-columns: 1fr; }
  .feature-selector button { padding: 19px 20px; }
  .feature-selector button strong { font-size: 21px; margin-bottom: 6px; }
  .feature-selector button span { font-size: 15px; }
  .feature-selector button[aria-selected=true]::before { top: 25px; }
  .feature-image { padding: 28px 24px; min-height: 360px; }
  .feature-image h3 { font-size: 25px; }
  .geo-footer { flex-wrap: wrap; }
  .geo-footer p { max-width: none; }
  .care-gallery { gap: 24px; }
  .care-copy { grid-template-columns: 38px minmax(0,1fr); gap: 8px; min-height: 3em; padding: 0 2px 12px; }
  .care-ai-avatar { width: 38px; }
  .care-copy h3 { padding: 11px 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; letter-spacing: -.15px; }
  .care-copy h3::before { top: 15px; left: -6px; width: 11px; height: 11px; }
  .care-gallery.is-coverflow { gap: 0; padding-block: 12px 38px; }
  .is-coverflow .care-card { width: 96%; }
  .is-coverflow .care-card[data-position="previous"] { transform: translateX(-67%) scale(.72); }
  .is-coverflow .care-card[data-position="next"] { transform: translateX(67%) scale(.72); }
  .product-topics { gap: 12px 18px; }
  .product-topics span { font-size: 17px; }
  .product-topics span + span { padding-left: 0; border: 0; }
  .paradigm-equation { font-size: 21px!important; }
  .paradigm-equation span { display: block; margin: 4px 0; }
  .applications-section { padding-bottom: 40px; }
  .applications-section .section-heading { margin-bottom: 30px; }
  .application-gallery { --card-width: min(310px,calc(100vw - 48px)); --card-gap: 14px; padding: 5px 20px 0; }
  .application-row,.application-group { grid-template-columns: minmax(0,1fr); }
  .application-card { padding: 25px; min-height: 0; }
  .application-card-title { margin-bottom: 14px; }
  .application-card h3 { font-size: 20px; }
  .application-card p { font-size: 16px; }
  .applications-section + .os-section { padding-top: 40px; }
}
@media(max-width:359px) {
  .desktop-nav { font-size: 12px; }
}
@media(max-width:399px) {
  .care-mobile-break { display: block; }
}
@media(max-width:359px) {
  .care-copy { grid-template-columns: 30px minmax(0,1fr); gap: 6px; }
  .care-ai-avatar { width: 30px; }
  .care-copy h3 { padding-inline: 8px; font-size: 12px; }
  .is-coverflow .care-card { width: 100%; }
  .application-gallery { padding-inline: 14px; }
}
@media(prefers-reduced-motion:reduce) { .application-gallery .application-row { animation: none!important; transform: none!important; } }
@media(prefers-reduced-motion:reduce) {
  .is-coverflow .care-card { transition: none; }
  .care-ai-eyes { animation: none; transform: none; }
  .is-coverflow.is-character-stream .care-card[data-position="center"] .care-stream-char { animation: none; opacity: 1; }
  .is-coverflow.is-character-stream .care-card[data-position="center"] .care-emphasis::after { animation: none; transform: scaleX(1); }
}

/* Closing brand signature: one compact lockup and one continuous headline. */
.contact-section::before { content: none; }
.contact-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 30px; }
.contact-company-logo { width: 112px; height: 48px; }
.contact-brand-divider { width: 1px; height: 34px; background: #d9d9d4; }
.contact-ai-mark { width: 50px; height: auto; }
.contact-section h2 { display: grid; gap: 0; font-size: clamp(26px,3.65vw,46px); line-height: 1.34; letter-spacing: -1.7px; text-wrap: balance; }
.contact-section h2 > span { display: block; }
.contact-section h2 .contact-native-line { display: flex; justify-content: center; align-items: baseline; gap: .32em; white-space: nowrap; }
.contact-native-line > span { display: inline; }
.contact-section .button { margin-top: 32px; }
@media(max-width:767px) {
  .contact-brand-lockup { gap: 13px; margin-bottom: 24px; }
  .contact-company-logo { width: 91px; height: 39px; }
  .contact-brand-divider { height: 28px; }
  .contact-ai-mark { width: 42px; }
  .contact-section h2 { font-size: 26px; line-height: 1.42; letter-spacing: -1.2px; }
  .contact-section h2 .contact-native-line { display: block; white-space: normal; }
  .contact-native-line > span { display: block; }
  .contact-section .button { margin-top: 27px; }
}
@media(max-width:359px) {
  .contact-section h2 { font-size: 22px; letter-spacing: -.9px; }
}