/* OMERVIA v22.2 — final visual polish: 3-line desktop hero + clean portal handoff.
/* v22.1 — QA fix: scroll-state inheritance + tiny-screen card spacing.
.clarity-portal-v22 .clarity-portal-sticky{--hero-card-opacity:1;--hero-card-x:0px;--hero-phone-opacity:1;--hero-phone-scale:1;--hero-phone-x:0px;--hero-benefit-opacity:1;--hero-benefit-y:0px}

/* OMERVIA v22 — two-column clarity + product-in-action hero. Reference composition rebuilt as real DOM/SVG, not a flattened screenshot. */
.clarity-portal-v22 .clarity-shell-v22{
  inset:0!important;
  width:min(94vw,1560px)!important;
  max-width:none!important;
  min-height:100%;
  padding:clamp(70px,8.5vh,92px) 0 clamp(76px,9vh,96px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch!important;
  justify-content:stretch!important;
  text-align:left!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none;
}
.clarity-portal-v22 .hero-v22-brand{
  position:relative;
  z-index:6;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#f7f1e8;
  font:700 clamp(.82rem,.92vw,1rem)/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.24em;
  opacity:var(--portal-copy-opacity);
  transform:translateY(var(--portal-copy-y));
  will-change:opacity,transform;
}
.clarity-portal-v22 .hero-v22-brand .brand-mark{width:29px;height:29px;flex:0 0 29px}
.clarity-portal-v22 .hero-v22-grid{
  position:relative;
  z-index:5;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(12px,2vw,34px);
  align-items:center;
}
.clarity-portal-v22 .hero-v22-copy{
  position:relative;
  z-index:7;
  align-self:center;
  padding-left:clamp(10px,1.3vw,22px);
  padding-right:clamp(10px,1vw,18px);
  opacity:var(--portal-copy-opacity);
  transform:translate3d(0,var(--portal-copy-y),0) scale(var(--portal-copy-scale));
  transform-origin:20% 50%;
  will-change:opacity,transform;
}
.clarity-portal-v22 .hero-v22-kicker{
  margin:0 0 clamp(16px,2.2vh,24px)!important;
  max-width:38ch;
  color:#91e4cb;
  font:700 clamp(.57rem,.64vw,.68rem)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.clarity-portal-v22 .hero-v22-title{
  margin:0;
  max-width:11ch!important;
  color:#f7f1e8;
  font:400 clamp(4.1rem,6.25vw,6.65rem)/.91 Georgia,"Times New Roman",serif!important;
  letter-spacing:-.057em;
  text-wrap:balance;
}
.clarity-portal-v22 .hero-v22-lede{
  max-width:52ch!important;
  margin:clamp(20px,2.7vh,28px) 0 0!important;
  color:#c2d1cd;
  font-size:clamp(.96rem,1.08vw,1.12rem)!important;
  line-height:1.56!important;
  text-wrap:pretty;
}
.clarity-portal-v22 .hero-v22-lede strong{color:#f1f6f4;font-weight:650}
.clarity-portal-v22 .hero-v22-clarifier{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:17px 0 0!important;
  padding:8px 12px;
  max-width:max-content;
  border:1px solid rgba(145,228,203,.18);
  border-radius:999px;
  background:rgba(5,26,25,.34);
  color:#8eaaa3;
  font:700 .61rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.clarity-portal-v22 .hero-v22-clarifier::before{
  content:"";
  width:5px;height:5px;border-radius:50%;background:#91e4cb;box-shadow:0 0 12px rgba(145,228,203,.48);
}
.clarity-portal-v22 .hero-v22-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  width:min(100%,610px);
  margin-top:clamp(24px,3.8vh,38px);
  opacity:var(--hero-benefit-opacity);
  transform:translateY(var(--hero-benefit-y));
  will-change:opacity,transform;
}
.clarity-portal-v22 .hero-benefit{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 10px;
  color:#9db4ae;
  text-align:center;
}
.clarity-portal-v22 .hero-benefit:not(:last-child)::after{
  content:"";position:absolute;right:0;top:7px;width:1px;height:42px;background:linear-gradient(180deg,transparent,rgba(130,225,201,.22),transparent);
}
.clarity-portal-v22 .hero-benefit svg{
  width:25px;height:25px;fill:none;stroke:#66d7b8;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 9px rgba(89,216,181,.13));
}
.clarity-portal-v22 .hero-benefit span{
  max-width:12ch;
  font:700 .54rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* Product visual: photographic device only; context, logic, labels and connectors remain DOM/SVG. */
.clarity-portal-v22 .hero-v22-product{
  position:relative;
  align-self:stretch;
  min-height:clamp(520px,67vh,690px);
  margin-left:clamp(-58px,-3.5vw,-18px);
  opacity:var(--hero-phone-opacity);
  transform:translate3d(var(--hero-phone-x),0,0) scale(var(--hero-phone-scale));
  transform-origin:45% 54%;
  will-change:opacity,transform;
}
.clarity-portal-v22 .hero-v22-product::before{
  content:"";
  position:absolute;
  inset:6% 0 5% 2%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(46,215,174,.12),rgba(17,103,88,.05) 37%,transparent 69%);
  filter:blur(12px);
  pointer-events:none;
}
.clarity-portal-v22 .hero-device-crop{
  position:absolute;
  z-index:4;
  left:-7%;
  bottom:-3%;
  width:67%;
  height:98%;
  overflow:hidden;
  pointer-events:none;
  clip-path:polygon(12% 100%,7% 91%,9% 78%,17% 64%,18% 34%,24% 16%,35% 5%,52% 2%,64% 8%,72% 25%,74% 55%,70% 66%,85% 75%,98% 92%,100% 100%);
  -webkit-mask-image:linear-gradient(#000,#000);
}
.clarity-portal-v22 .hero-device-crop picture,.clarity-portal-v22 .hero-device-crop img{display:block;width:100%;height:100%}
.clarity-portal-v22 .hero-device-crop img{
  position:absolute;
  width:268%!important;
  height:auto!important;
  max-width:none!important;
  left:-116%;
  top:-1.5%;
  object-fit:contain;
  filter:none!important;
  opacity:1;
  transform:rotate(-.7deg);
  transform-origin:56% 52%;
}
.clarity-portal-v22 .hero-link-map{
  position:absolute;
  z-index:2;
  inset:8% 1% 10% 26%;
  width:73%;
  height:82%;
  overflow:visible;
  pointer-events:none;
}
.clarity-portal-v22 .hero-link-map path{
  fill:none;
  stroke:url(#heroLinkGradient);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-dasharray:3 6;
  opacity:.75;
  vector-effect:non-scaling-stroke;
}
.clarity-portal-v22 .hero-link-map circle{fill:#82e7c9;filter:drop-shadow(0 0 5px rgba(112,230,196,.8))}
.clarity-portal-v22 .hero-context-card,
.clarity-portal-v22 .hero-host-card,
.clarity-portal-v22 .hero-engine-node{
  position:absolute;
  z-index:5;
  border:1px solid rgba(112,224,194,.24);
  background:linear-gradient(145deg,rgba(6,39,35,.88),rgba(2,24,23,.92));
  box-shadow:0 18px 45px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025),0 0 34px rgba(62,211,172,.045);
  color:#dce9e5;
  backdrop-filter:blur(8px);
  opacity:var(--hero-card-opacity);
  transform:translate3d(var(--hero-card-x),0,0);
  will-change:opacity,transform;
}
.clarity-portal-v22 .hero-context-card{
  top:12%;right:2%;width:min(38%,295px);padding:15px;border-radius:14px;
}
.clarity-portal-v22 .hero-context-head{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(134,224,202,.12)}
.clarity-portal-v22 .hero-context-thumb{width:52px;height:42px;overflow:hidden;border-radius:7px;background:#05201d}
.clarity-portal-v22 .hero-context-thumb img{width:100%;height:100%;object-fit:cover;filter:none!important}
.clarity-portal-v22 .hero-context-head small,.clarity-portal-v22 .hero-host-card small{
  display:block;color:#70d9ba;font:700 .48rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
}
.clarity-portal-v22 .hero-context-head strong{display:block;margin-top:3px;color:#f4f3ec;font:650 .86rem/1.2 ui-sans-serif,system-ui,sans-serif}
.clarity-portal-v22 .hero-context-list{display:grid;gap:7px;margin-top:11px}
.clarity-portal-v22 .hero-context-item{display:flex;align-items:center;gap:8px;color:#a9bcb7;font:600 .65rem/1.35 ui-sans-serif,system-ui,sans-serif}
.clarity-portal-v22 .hero-context-item i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(86,218,181,.07);color:#7adfbe;font:700 .57rem/1 ui-monospace,monospace;font-style:normal}
.clarity-portal-v22 .hero-engine-node{
  top:47%;right:7%;width:min(30%,226px);padding:13px 15px 12px;border-radius:13px;text-align:center;
}
.clarity-portal-v22 .hero-engine-brand{display:flex;align-items:center;justify-content:center;gap:9px;color:#f7f1e8;font:750 .67rem/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em}
.clarity-portal-v22 .hero-engine-mark{width:25px;height:25px;position:relative;display:inline-block}
.clarity-portal-v22 .hero-engine-mark::before,.clarity-portal-v22 .hero-engine-mark::after{content:"";position:absolute;inset:5px;border:1px solid #58d6b4;transform:rotate(45deg)}
.clarity-portal-v22 .hero-engine-mark::after{inset:9px;border-color:rgba(145,228,203,.6)}
.clarity-portal-v22 .hero-engine-node p{margin:8px 0 0;color:#8fa8a1;font:700 .48rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.clarity-portal-v22 .hero-host-card{
  right:2%;bottom:13%;width:min(38%,295px);padding:14px 15px;border-radius:14px;
}
.clarity-portal-v22 .hero-host-row{display:flex;align-items:center;gap:10px}
.clarity-portal-v22 .hero-host-avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(123,223,197,.22);border-radius:9px;background:rgba(91,214,181,.06);color:#8ee1c7}
.clarity-portal-v22 .hero-host-avatar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.clarity-portal-v22 .hero-host-copy{min-width:0;flex:1}
.clarity-portal-v22 .hero-host-copy strong{display:block;margin-top:3px;color:#eef3ef;font:650 .72rem/1.28 ui-sans-serif,system-ui,sans-serif}
.clarity-portal-v22 .hero-host-actions{display:flex;gap:7px;margin-top:10px;padding-left:48px}
.clarity-portal-v22 .hero-host-actions span{padding:5px 11px;border-radius:999px;border:1px solid rgba(121,224,196,.20);color:#8ba69f;font:700 .46rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.clarity-portal-v22 .hero-host-actions span:first-child{background:#62d7b6;color:#06251f;border-color:#62d7b6}
.clarity-portal-v22 .hero-map-label{position:absolute;z-index:6;right:0;color:#6f9890;font:700 .43rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:var(--hero-card-opacity)}
.clarity-portal-v22 .hero-map-label--context{top:30%;transform:translateX(42%)}
.clarity-portal-v22 .hero-map-label--host{bottom:29%;transform:translateX(34%)}

/* v21 below-story screenshot is obsolete once its semantics are rebuilt into the hero. */
.product-glance-v21{display:none!important}

/* Scroll cue remains the single primary action. */
.clarity-portal-v22 .clarity-scroll{z-index:10}

@keyframes omvV22Flow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:no-preference){
  .clarity-portal-v22[data-portal-state="message"] .hero-link-map path{animation:omvV22Flow 4.5s linear infinite}
  .clarity-portal-v22[data-portal-state="message"] .hero-context-card,
  .clarity-portal-v22[data-portal-state="message"] .hero-engine-node,
  .clarity-portal-v22[data-portal-state="message"] .hero-host-card{transition:border-color .35s ease,box-shadow .35s ease}
}

@media(max-width:1100px){
  .clarity-portal-v22 .clarity-shell-v22{width:min(95vw,1180px)!important}
  .clarity-portal-v22 .hero-v22-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:2px}
  .clarity-portal-v22 .hero-v22-title{font-size:clamp(3.55rem,6.6vw,5.15rem)!important}
  .clarity-portal-v22 .hero-v22-product{margin-left:-42px;min-height:570px}
  .clarity-portal-v22 .hero-map-label{display:none}
}

@media(max-width:780px){
  .clarity-hero.clarity-portal.clarity-portal-v22{height:178svh!important}
  .clarity-portal-v22 .clarity-shell-v22{
    width:91vw!important;
    padding:44px 0 62px!important;
    grid-template-rows:auto minmax(0,1fr);
  }
  .clarity-portal-v22 .hero-v22-brand{gap:10px;font-size:.76rem;letter-spacing:.2em}
  .clarity-portal-v22 .hero-v22-brand .brand-mark{width:24px;height:24px;flex-basis:24px}
  .clarity-portal-v22 .hero-v22-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(220px,1fr);
    gap:8px;
    align-items:start;
  }
  .clarity-portal-v22 .hero-v22-copy{padding:22px 0 0;text-align:center;transform-origin:50% 30%}
  .clarity-portal-v22 .hero-v22-kicker{margin-bottom:11px!important;max-width:none;font-size:.53rem;letter-spacing:.14em}
  .clarity-portal-v22 .hero-v22-title{margin:0 auto;max-width:10ch!important;font-size:clamp(2.75rem,12.1vw,4.1rem)!important;line-height:.91!important}
  .clarity-portal-v22 .hero-v22-lede{margin:14px auto 0!important;max-width:36ch!important;font-size:clamp(.78rem,3.4vw,.94rem)!important;line-height:1.45!important}
  .clarity-portal-v22 .hero-v22-clarifier{margin:11px auto 0!important;padding:6px 9px;font-size:.48rem;letter-spacing:.055em}
  .clarity-portal-v22 .hero-v22-benefits{width:100%;margin:15px auto 0;grid-template-columns:repeat(4,1fr)}
  .clarity-portal-v22 .hero-benefit{gap:5px;padding:0 4px}
  .clarity-portal-v22 .hero-benefit:not(:last-child)::after{height:32px;top:4px}
  .clarity-portal-v22 .hero-benefit svg{width:20px;height:20px}
  .clarity-portal-v22 .hero-benefit span{font-size:.42rem;letter-spacing:.075em;line-height:1.25}
  .clarity-portal-v22 .hero-v22-product{align-self:stretch;min-height:0;height:100%;margin:0;transform-origin:50% 50%}
  .clarity-portal-v22 .hero-v22-product::before{inset:0 -12% -6%;filter:blur(9px)}
  .clarity-portal-v22 .hero-device-crop{left:1%;bottom:-3%;width:64%;height:104%}
  .clarity-portal-v22 .hero-device-crop img{width:270%!important;left:-117%;top:1%}
  .clarity-portal-v22 .hero-context-card{top:6%;right:0;width:42%;padding:9px;border-radius:10px}
  .clarity-portal-v22 .hero-context-head{grid-template-columns:34px 1fr;gap:7px;padding-bottom:7px}
  .clarity-portal-v22 .hero-context-thumb{width:34px;height:29px;border-radius:5px}
  .clarity-portal-v22 .hero-context-head small,.clarity-portal-v22 .hero-host-card small{font-size:.35rem;letter-spacing:.08em}
  .clarity-portal-v22 .hero-context-head strong{font-size:.61rem}
  .clarity-portal-v22 .hero-context-list{gap:4px;margin-top:7px}
  .clarity-portal-v22 .hero-context-item{gap:5px;font-size:.46rem;line-height:1.2}
  .clarity-portal-v22 .hero-context-item i{width:15px;height:15px;border-radius:4px;font-size:.42rem}
  .clarity-portal-v22 .hero-engine-node{top:46%;right:4%;width:34%;padding:8px;border-radius:9px}
  .clarity-portal-v22 .hero-engine-brand{gap:5px;font-size:.48rem;letter-spacing:.14em}
  .clarity-portal-v22 .hero-engine-mark{width:18px;height:18px}
  .clarity-portal-v22 .hero-engine-node p{margin-top:4px;font-size:.32rem;line-height:1.35;letter-spacing:.08em}
  .clarity-portal-v22 .hero-host-card{right:0;bottom:6%;width:43%;padding:8px 9px;border-radius:10px}
  .clarity-portal-v22 .hero-host-row{gap:6px}
  .clarity-portal-v22 .hero-host-avatar{width:27px;height:27px;border-radius:7px}
  .clarity-portal-v22 .hero-host-avatar svg{width:15px;height:15px}
  .clarity-portal-v22 .hero-host-copy strong{font-size:.48rem;line-height:1.2}
  .clarity-portal-v22 .hero-host-actions{gap:4px;margin-top:6px;padding-left:33px}
  .clarity-portal-v22 .hero-host-actions span{padding:4px 6px;font-size:.31rem}
  .clarity-portal-v22 .hero-link-map{inset:6% 0 7% 24%;width:76%;height:87%}
  .clarity-portal-v22 .clarity-scroll{bottom:9px!important;font-size:.51rem;letter-spacing:.095em}
}

@media(max-width:360px){
  .clarity-portal-v22 .clarity-shell-v22{width:92vw!important;padding-top:34px!important;padding-bottom:54px!important}
  .clarity-portal-v22 .hero-v22-copy{padding-top:14px}
  .clarity-portal-v22 .hero-v22-kicker{font-size:.48rem}
  .clarity-portal-v22 .hero-v22-title{font-size:clamp(2.45rem,12vw,3.2rem)!important}
  .clarity-portal-v22 .hero-v22-lede{font-size:.74rem!important;line-height:1.38!important;margin-top:10px!important}
  .clarity-portal-v22 .hero-v22-clarifier{font-size:.43rem;margin-top:8px!important}
  .clarity-portal-v22 .hero-v22-benefits{margin-top:11px}
  .clarity-portal-v22 .hero-benefit span{font-size:.38rem}
}

@media(max-height:700px) and (min-width:781px){
  .clarity-portal-v22 .clarity-shell-v22{padding:42px 0 54px!important}
  .clarity-portal-v22 .hero-v22-title{font-size:clamp(3.35rem,5.9vw,5.4rem)!important}
  .clarity-portal-v22 .hero-v22-lede{margin-top:15px!important;font-size:.92rem!important;line-height:1.42!important}
  .clarity-portal-v22 .hero-v22-clarifier{margin-top:11px!important}
  .clarity-portal-v22 .hero-v22-benefits{margin-top:18px}
  .clarity-portal-v22 .hero-v22-product{min-height:510px}
}

@media(max-height:640px) and (max-width:780px){
  .clarity-portal-v22 .clarity-shell-v22{padding:26px 0 46px!important}
  .clarity-portal-v22 .hero-v22-brand{font-size:.67rem}
  .clarity-portal-v22 .hero-v22-copy{padding-top:9px}
  .clarity-portal-v22 .hero-v22-kicker{margin-bottom:6px!important;font-size:.43rem}
  .clarity-portal-v22 .hero-v22-title{font-size:clamp(2.15rem,10.5vw,2.85rem)!important}
  .clarity-portal-v22 .hero-v22-lede{margin-top:7px!important;font-size:.68rem!important;line-height:1.34!important}
  .clarity-portal-v22 .hero-v22-clarifier{display:none}
  .clarity-portal-v22 .hero-v22-benefits{margin-top:8px}
  .clarity-portal-v22 .hero-benefit svg{width:16px;height:16px}
  .clarity-portal-v22 .hero-benefit span{font-size:.34rem}
  .clarity-portal-v22 .hero-context-list{display:none}
  .clarity-portal-v22 .hero-v22-grid{grid-template-rows:auto minmax(150px,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .clarity-portal-v22 .hero-link-map path{animation:none!important}
  .clarity-portal-v22 .hero-v22-brand,
  .clarity-portal-v22 .hero-v22-copy,
  .clarity-portal-v22 .hero-v22-product,
  .clarity-portal-v22 .hero-v22-benefits,
  .clarity-portal-v22 .hero-context-card,
  .clarity-portal-v22 .hero-engine-node,
  .clarity-portal-v22 .hero-host-card{opacity:1!important;transform:none!important}
}

/* v22.1 narrow-height collision gate */
@media(max-width:780px) and (max-height:680px){
  .clarity-portal-v22 .hero-host-actions{display:none!important}
  .clarity-portal-v22 .hero-host-card{bottom:3%!important}
  .clarity-portal-v22 .hero-engine-node{top:42%!important}
}