/* Adapter tokens: map to the actual site's existing light/dark theme variables. */
.uah-visual-scope {
  --uv-surface: var(--ux-surface, #17171c);
  --uv-text: var(--fg, #f6f4f3);
  --uv-muted: var(--ux-text, #bcbac4);
  --uv-border: var(--ln2, #424049);
  --uv-accent: var(--pink, #eb5b78);
  --uv-soft: color-mix(in srgb, var(--uv-accent) 12%, transparent);
  color: var(--uv-text);
}
.uah-visual-scope *, .uah-visual-scope *::before,
.uah-visual-scope *::after { box-sizing: border-box; }
.uah-motion-card {
  position: relative; isolation: isolate; min-width: 0;
  background: var(--uv-surface); border: 1px solid var(--uv-border);
  border-radius: 24px; padding: 24px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.uah-motion-card > * { position: relative; z-index: 1; }
html[data-page-hidden=true] .uah-motion-card::before{animation-play-state:paused!important}
.uah-motion-card .uah-card-title { display: flex; align-items: center; gap: 14px; }
.uah-service-icon {
  flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 17px;
  background: radial-gradient(circle at 25% 12%, color-mix(in srgb, var(--uv-accent) 30%, transparent), transparent 65%), var(--uv-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--uv-accent) 35%, transparent), 0 5px 14px var(--uv-soft);
  color: var(--uv-accent);
  transition: transform 240ms ease, background-color 240ms ease;
}
.uah-service-icon svg { width: 28px; height: 28px; stroke-width: 1.7; }
.uah-motion-card h3 { margin: 0; font: inherit; font-size: 21px; font-weight: 650; line-height: 1.2; }
.uah-motion-card p { color: var(--uv-muted); line-height: 1.55; }
.uah-card-arrow { display: inline-flex; transition: transform 220ms ease; }
.uah-motion-card:focus-within { border-color: var(--uv-accent); box-shadow: 0 0 0 3px var(--uv-soft); }
@supports (mask-composite: exclude) {
  .uah-motion-card::before {
    content: ''; position: absolute; inset: -1px; z-index: 0; border-radius: inherit;
    padding: 1px; pointer-events: none; opacity: 0;
    background: linear-gradient(110deg, transparent 15%, var(--uv-accent) 46%, transparent 74%);
    background-size: 260% 200%;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude; transition: opacity 220ms ease;
  }
}
@keyframes uah-border-travel { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@media (hover: hover) and (pointer: fine) {
  .uah-motion-card:hover {
    transform: translateY(-3px); border-color: var(--uv-accent);
    box-shadow: 0 10px 32px var(--uv-soft), inset 0 0 28px var(--uv-soft);
  }
  .uah-motion-card:hover .uah-service-icon { transform: translateY(-2px) rotate(-4deg); }
  .uah-motion-card:hover .uah-card-arrow { transform: translate(3px, -3px); }
  .uah-motion-card:hover::before { opacity: 1; animation: uah-border-travel 1.2s ease 1; }
}
.uah-orbit { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.uah-orbit-device { grid-column: 2; grid-row: 1 / span 3; justify-self: center; width: 300px; max-width: 100%; }
.uah-callout { position: relative; border: 1px solid var(--uv-border); background: var(--uv-surface); border-radius: 20px; padding: 19px; min-width: 0; }
.uah-callout h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.uah-callout h3 svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--uv-accent); }
.uah-callout p { margin: 0; color: var(--uv-muted); line-height: 1.5; }
.uah-callout[data-side="left"] { grid-column: 1; }
.uah-callout[data-side="right"] { grid-column: 3; }
.uah-callout[data-row="1"] { grid-row: 1; }
.uah-callout[data-row="2"] { grid-row: 2; }
.uah-callout[data-row="3"] { grid-row: 3; }
.uah-callout::after { content: ''; position: absolute; top: 50%; width: 32px; border-top: 1px dashed var(--uv-border); pointer-events: none; }
.uah-callout[data-side="left"]::after { left: 100%; }
.uah-callout[data-side="right"]::after { right: 100%; }
.uah-inline-video {
  position: relative; display: block; width: 100%; height: 100%; padding: 0;
  overflow: hidden; border: 0; border-radius: inherit; background: var(--uv-surface);
  cursor: pointer; color: var(--uv-text); touch-action: manipulation;
}
.uah-inline-video video, .uah-inline-video > .uah-video-poster {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: inherit;
}
.uah-inline-video video { z-index: 1; }
.uah-inline-video[data-state="error"] video { opacity: 0; }
.uah-video-control {
  position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; color: white;
  background: rgb(0 0 0 / 72%); pointer-events: none;
}
.uah-video-control svg { width: 18px; height: 18px; }
.uah-inline-video[data-state="playing"] .uah-play-icon,
.uah-inline-video:not([data-state="playing"]) .uah-pause-icon { display: none; }
.uah-inline-video:focus-visible { outline: 3px solid var(--uv-accent); outline-offset: -5px; }
.uah-video-error { display: none; }
.uah-inline-video[data-state="error"] .uah-video-error {
  display: block; position: absolute; z-index: 2; bottom: 70px; left: 12px; right: 12px;
  padding: 10px; border-radius: 10px; color: white; background: rgb(0 0 0 / 80%); font-size: 13px;
}
.uah-media-credit { color: var(--uv-muted); font-size: 12px; line-height: 1.5; margin-top: 10px; }
.uah-media-credit a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .uah-orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .uah-orbit-device { grid-column: 1 / -1; grid-row: 1; }
  .uah-callout[data-side][data-row] { grid-column: auto; grid-row: auto; }
  .uah-callout::after { display: none; }
}
@media (max-width: 599px) {
  .uah-orbit { grid-template-columns: minmax(0, 1fr); }
  .uah-motion-card { padding: 20px; }
  .uah-service-icon { flex-basis: 48px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .uah-motion-card, .uah-service-icon, .uah-card-arrow { transition: none; }
  .uah-motion-card::before { animation: none !important; transition: none; }
  .uah-motion-card:hover, .uah-motion-card:hover .uah-service-icon,
  .uah-motion-card:hover .uah-card-arrow { transform: none; }
}
/* R12: existing phone dimensions and theme tokens. */
.uah-service-hero > div:first-child > .uah-service-icon { margin-bottom:20px; --uv-accent:var(--pink); --uv-soft:color-mix(in srgb,var(--pink) 12%,transparent); }
.uah-service-diagram { margin-top:28px; }
.uah-diagram-caption { color:var(--ux-text); margin-bottom:26px; font-size:15px; line-height:1.7; }
.uah-service-page .uah-scenario-heading h3 { margin:12px 0; }
.uah-scenario-heading { max-width:720px; margin-bottom:28px; }
.uah-scenario-heading p { line-height:1.7; margin-bottom:20px; }
.uah-callout::before { content:''; position:absolute; top:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:var(--uv-border); }
.uah-callout[data-side=left]::before { right:-4px; }
.uah-callout[data-side=right]::before { left:-4px; }
.uah-service-page .uah-callout h3 { font-size:17px; margin:0 0 10px; }
.uah-callout p { font-size:15px; }
.uah-service-page .uah-orbit-device .uah-phone { width:300px; max-width:100%; }
.uah-recording .device-screen .uah-inline-video { width:390px; height:830px; }
.uah-inline-video { --uv-surface:var(--bg); --uv-text:var(--fg); --uv-accent:var(--pink); }
.uah-inline-video[data-state=blocked] video { opacity:0; }
.uah-service-card > .uah-service-icon { margin-bottom:12px; }
.home-directions article > .uah-service-icon { display:grid; margin-bottom:24px; }
.home-directions article > .uah-service-icon svg { color:var(--pink); }
.price-row .uah-service-icon { float:left; margin:0 18px 12px 0; }
.home-own-example { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; padding:0 0 70px; }
.home-own-example p { line-height:1.7; margin:20px 0; }
.uah-example-filter { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 0 40px; }
.uah-example-filter select { min-height:44px; max-width:100%; padding:10px 14px; border:1px solid var(--ln2); border-radius:10px; background:var(--bg); color:var(--fg); font:inherit; }
.uah-recordings > [hidden] { display:none; }
.uah-motion-card .service-link { display:inline-flex; align-items:center; gap:8px; }
.uah-motion-card .service-link:focus-visible { outline:2px solid var(--pink); outline-offset:5px; }
.uah-service-card .service-link svg,.home-directions .service-link svg { width:20px; height:20px; }
[data-scene-step]:not([hidden]) { animation:uah-scene-enter 200ms ease; }
@keyframes uah-scene-enter { from { opacity:.3; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media(max-width:899px) { .uah-callout::before { display:none; } }
@media(max-width:767px) { .home-own-example { grid-template-columns:1fr; } }
@media(max-width:380px) { .uah-service-page .uah-orbit-device .uah-phone { width:268px; } .uah-orbit-device { width:268px; } }
@media(prefers-reduced-motion:reduce) { [data-scene-step]:not([hidden]) { animation:none; } }
.home-directions .uah-motion-card h3{font-size:32px;line-height:1.2}.uah-recording sup a{font-size:13px;line-height:1.5}
/* UX1.1: only the separate Radar PUBLIC landing loads this visual section.
   Shared asset is already referenced by its ServiceVisual; no app/report styles. */
main:has(.radar-public-nav) :is(h1,h2,h3,p,a){overflow-wrap:anywhere}
main:has(.radar-public-nav) .grid>*{min-width:0}
main:has(.radar-public-nav) a{max-width:100%;white-space:normal;height:auto}
.radar-public-nav,.radar-public-auth-actions{flex-wrap:wrap}
.radar-public-brand{flex-shrink:0}
@media(max-width:380px){.radar-visual-section .radar-visual .uah-recording-phone{width:268px;--uah-phone-scale:.626168}}