.yh-showcase{--ys-ink:#0e1733;--ys-paper:#fbf7e9;--ys-orange:#f5a20e;box-sizing:border-box;padding:clamp(86px,10vw,156px) max(clamp(22px,5vw,72px),calc((100vw - 1420px)/2));overflow:hidden;color:var(--ys-ink);background:var(--ys-paper)}
.yh-showcase *{box-sizing:border-box}
.yh-showcase__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:24px 7vw;align-items:end;margin-bottom:clamp(38px,5vw,68px)}
.yh-showcase__eyebrow{grid-column:1/-1;margin:0;color:#59617a;font:600 10px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em}
.yh-showcase__head h2{max-width:10ch;margin:0;color:var(--ys-ink);font-size:clamp(54px,7vw,112px);font-weight:480;line-height:.88;letter-spacing:-.065em}
.yh-showcase__head>div{max-width:410px;padding-bottom:7px}
.yh-showcase__head>div p{margin:0;color:#4c5676;font-size:clamp(15px,1.2vw,18px);line-height:1.55}
.yh-showcase__head>div a{display:inline-flex;gap:42px;align-items:center;margin-top:28px;padding-bottom:7px;border-bottom:1px solid #9ca2b5;color:var(--ys-ink);font-size:12px;font-weight:650;text-decoration:none}
.yh-showcase__head>div a span{color:var(--ys-orange)}

.yh-showcase__rail{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(560px,54vw,760px);transition:grid-template-columns .6s cubic-bezier(.2,.75,.2,1),grid-template-rows .6s cubic-bezier(.2,.75,.2,1)}
.yh-showcase__panel{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:18px;background:#19223a;isolation:isolate}
.yh-showcase__panel img,.yh-showcase__shade,.yh-showcase__trigger{position:absolute;inset:0;width:100%;height:100%}
.yh-showcase__panel img{z-index:-2;object-fit:cover;filter:saturate(.78);transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .4s}
.yh-showcase__panel.is-active img{filter:saturate(.94);transform:scale(1.035)}
.yh-showcase__shade{z-index:-1;background:linear-gradient(0deg,rgba(8,15,36,.88),rgba(8,15,36,.05) 58%),linear-gradient(90deg,rgba(8,15,36,.3),transparent 55%)}
.yh-showcase__trigger{z-index:2;padding:0;border:0;background:transparent;cursor:pointer}
.yh-showcase__trigger:focus-visible{outline:2px solid var(--ys-orange);outline-offset:-4px}
.yh-showcase__number{position:absolute;top:18px;left:20px;color:#fff;font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.1em}

.yh-showcase__label{position:absolute;left:20px;right:20px;bottom:18px;z-index:3;margin:0;color:#fff;font:600 10px/1.3 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase;opacity:.85;transition:opacity .3s}
.yh-showcase__label b{display:block;margin-top:4px;color:#fff;font-size:15px;font-weight:650;letter-spacing:-.01em;text-transform:none;font-family:var(--wp--preset--font-family--body,inherit)}
.yh-showcase__panel.is-active .yh-showcase__label{opacity:0}

.yh-showcase__copy{position:absolute;z-index:3;right:clamp(20px,2.4vw,36px);bottom:clamp(20px,2.4vw,32px);left:clamp(20px,2.4vw,36px);max-width:560px;color:#fff;opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .3s .16s,transform .45s .12s}
.yh-showcase__panel.is-active .yh-showcase__copy{opacity:1;pointer-events:auto;transform:none}
.yh-showcase__copy>p{margin:0 0 12px;color:#f7bf54;font:600 9px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em}
.yh-showcase__copy h3{margin:0;color:#fff;font-size:clamp(28px,3vw,42px);font-weight:480;line-height:.95;letter-spacing:-.03em}
.yh-showcase__copy>span{display:block;max-width:42ch;margin-top:12px;color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.5}
.yh-showcase__tag{display:inline-block;margin-top:14px;padding:5px 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:rgba(255,255,255,.92);font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase}
.yh-showcase__copy a{position:relative;z-index:4;display:inline-flex;gap:22px;align-items:center;margin-top:14px;padding:10px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font-size:11px;font-weight:650;text-decoration:none}
.yh-showcase__copy a b{color:var(--ys-orange)}
.yh-showcase__note{max-width:720px;margin:18px 0 0;color:#697087;font-size:10px;line-height:1.5}

.yh-showcase__panel--cta{background:linear-gradient(135deg,#f5a20e,#c97a02)}
.yh-showcase__panel--cta .yh-showcase__number,
.yh-showcase__panel--cta .yh-showcase__label,
.yh-showcase__panel--cta .yh-showcase__copy>p,
.yh-showcase__panel--cta .yh-showcase__copy h3,
.yh-showcase__panel--cta .yh-showcase__copy>span{color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__tag{border-color:rgba(28,20,6,.45);color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__copy a{border-color:rgba(28,20,6,.45);color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__copy a b{color:#1c1406}

@media(max-width:900px){
  .yh-showcase__head{grid-template-columns:1fr}
  .yh-showcase__eyebrow,.yh-showcase__head h2,.yh-showcase__head>div{grid-column:1}
  .yh-showcase__rail{display:grid;grid-template-columns:1fr!important;grid-template-rows:none!important;height:auto;gap:14px}
  .yh-showcase__panel{aspect-ratio:3/4;border-radius:14px}
  .yh-showcase__panel .yh-showcase__label{display:none}
  .yh-showcase__panel .yh-showcase__copy{opacity:1;pointer-events:auto;transform:none}
  .yh-showcase__panel .yh-showcase__copy h3{font-size:26px}
}
@media(max-width:600px){
  .yh-showcase{padding-right:16px;padding-left:16px}
  .yh-showcase__head{padding:0 6px}
  .yh-showcase__head h2{font-size:52px}
  .yh-showcase__copy h3{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.yh-showcase__rail,.yh-showcase__panel img,.yh-showcase__copy{transition:none}.yh-showcase__panel.is-active img{transform:none}}

/* 2026-09-19 · Option C: three product panels in one row + slim project-support banner */
.yh-showcase__rail:has(>.yh-showcase__panel:nth-child(3):last-child){grid-template-rows:1fr;height:clamp(420px,38vw,580px)}
.yh-showcase__support{display:grid;grid-template-columns:auto 1fr auto;gap:12px clamp(24px,4vw,64px);align-items:center;margin-top:12px;padding:clamp(20px,2.2vw,28px) clamp(20px,2.6vw,36px);border-radius:18px;background:linear-gradient(135deg,#f5a20e,#c97a02);color:#1c1406}
.yh-showcase__support-eyebrow{margin:0;font:600 9px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.yh-showcase__support-copy h3{margin:0;color:#1c1406;font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.yh-showcase__support-copy p{margin:6px 0 0;color:rgba(28,20,6,.82);font-size:13.5px;line-height:1.45}
.yh-showcase__support-link{display:inline-flex;gap:22px;align-items:center;padding:10px 16px;border:1px solid rgba(28,20,6,.45);border-radius:999px;color:#1c1406;font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.yh-showcase__support-link:hover,.yh-showcase__support-link:focus-visible{background:#1c1406;color:#f5a20e}
@media(max-width:900px){
  .yh-showcase__rail:has(>.yh-showcase__panel:nth-child(3):last-child){height:auto}
  .yh-showcase__support{grid-template-columns:1fr;border-radius:14px}
  .yh-showcase__support-link{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.yh-showcase__support-link{transition:none}}
/* Tag pill was inheriting display:block from .yh-showcase__copy>span and stretching full width */
.yh-showcase__copy>.yh-showcase__tag{display:block;width:fit-content}

/* 2026-09-19 r2 · Removed section number, card numbers, "Products · Visual concept", tag pill and footnote.
   Collapsed cards now show only the product name. */
.yh-showcase__label b{margin-top:0}

/* ==========================================================================
   Applications · split colour block (2026-09-19 r2)
   Copy sits on a light-blue panel; the framed floor-plan model hangs past the
   panel's lower edge into the cream page. Pure CSS + a tiny IntersectionObserver
   in home-showcase.js for the entrance.
   ========================================================================== */
.yh-apps{
  --apps-blue:#D3E4F0;          /* brand light blue (panel) — tune here */
  --apps-ink:#0E1733;
  --apps-copy:#23304F;
  --apps-paper:#FBF7E9;
  --apps-overhang:clamp(48px,6vw,96px);
  --apps-gutter:max(clamp(22px,4.5vw,72px),calc((100vw - 1600px)/2));
  position:relative;box-sizing:border-box;margin:0;color:var(--apps-ink);
  background:linear-gradient(180deg,var(--apps-blue) 0,var(--apps-blue) calc(100% - var(--apps-overhang)),var(--apps-paper) calc(100% - var(--apps-overhang)))
}
.yh-apps *{box-sizing:border-box}
.yh-apps__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);min-height:clamp(580px,min(90svh,52vw),860px);padding:clamp(28px,2.4vw,44px) var(--apps-gutter) 0}
.yh-apps__copy{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:48px;padding-bottom:calc(var(--apps-overhang) + clamp(40px,5vw,96px))}
.yh-apps__title{margin:0;color:var(--apps-ink);font:680 clamp(3rem,5.6vw,6.6rem)/.9 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:-.055em}
.yh-apps__body{max-width:34rem}
.yh-apps__lead{margin:0;color:var(--apps-copy);font:400 clamp(1.05rem,1.3vw,1.3rem)/1.5 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-apps__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0}
.yh-apps__links a{color:var(--apps-ink);font:650 .74rem/1.3 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(14,23,51,.35);padding-bottom:3px;transition:border-color .2s}
.yh-apps__links a:hover,.yh-apps__links a:focus-visible{border-color:#F5A20E}
.yh-apps .yh-apps__cta{margin-top:30px}
.yh-apps__frame{position:relative;display:flex;min-width:0;align-items:center;margin:0;align-self:stretch;overflow:hidden;border-radius:18px;background:var(--apps-paper);box-shadow:0 30px 70px -40px rgba(14,23,51,.35)}
.yh-apps__frame .yb-banner{--yb-background:transparent;flex:none;width:128%;margin-left:-14%;background:transparent}

/* entrance (JS adds data-yh-apps-ready, then .is-in when 20% visible) */
.yh-apps[data-yh-apps-ready] .yh-apps__title,
.yh-apps[data-yh-apps-ready] .yh-apps__body{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.yh-apps[data-yh-apps-ready] .yh-apps__frame{clip-path:inset(12% 0 0 0 round 18px);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.yh-apps.is-in .yh-apps__title,.yh-apps.is-in .yh-apps__body{opacity:1;transform:none}
.yh-apps.is-in .yh-apps__body{transition-delay:.15s}
.yh-apps.is-in .yh-apps__frame{clip-path:inset(0 0 0 0 round 18px)}

@media(max-width:900px){
  .yh-apps{--apps-overhang:48px}
  .yh-apps__inner{grid-template-columns:1fr;gap:36px;padding-top:64px}
  .yh-apps__copy{gap:24px;padding-bottom:0}
  .yh-apps__title{font-size:clamp(2.6rem,10vw,4.4rem)}
  .yh-apps__inner{min-height:0}
  .yh-apps__frame{align-self:auto;aspect-ratio:4/3;border-radius:14px}
  .yh-apps__frame .yb-banner{width:124%;margin-left:-12%}
}
@media(max-width:600px){
  .yh-apps__inner{padding:56px 16px 0}
  .yh-apps__lead{font-size:1rem}
  .yh-apps__frame{aspect-ratio:1/1}
  .yh-apps__frame .yb-banner{width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .yh-apps[data-yh-apps-ready] .yh-apps__title,.yh-apps[data-yh-apps-ready] .yh-apps__body{opacity:1;transform:none;transition:none}
  .yh-apps[data-yh-apps-ready] .yh-apps__frame{clip-path:none;transition:none}
}

/* ==========================================================================
   Applications · pinned scroll sequence (2026-09-26)
   Scroll timeline (p = 0 → 1 over the section's extra height):
     0.00–0.12  model on a light-blue block, already enlarged, keeps zooming to centre
     0.14–0.40  the 8 hotspots reveal one by one (marker + outline + leader + label)
     0.46–0.68  model shrinks back into the left column (labels stay on)
     0.70–0.90  copy rises into the lower-right
   JS only writes CSS variables / classes; all visuals live here.
   ≤900px or reduced motion: no pin, static stacked layout.
   ========================================================================== */
.yh-apps.yh-apps--seq{
  --seq-len:320svh;
  height:var(--seq-len);
  background:var(--apps-paper);
}
.yh-apps--seq .yh-apps__pin{position:sticky;top:0;display:flex;height:100svh;align-items:center;overflow:hidden}
.yh-apps--seq .yh-apps__inner{
  width:100%;min-height:0;
  grid-template-columns:minmax(0,7fr) minmax(0,3.5fr);
  gap:clamp(28px,3.6vw,64px);align-items:end;
  padding:clamp(76px,10svh,112px) var(--apps-gutter) clamp(36px,6svh,72px)
}
.yh-apps--seq .yh-apps__media{position:relative;z-index:3;grid-column:1;grid-row:1;margin:0;min-width:0}
.yh-apps--seq .yh-apps__frame{
  --tx:0px;--ty:0px;--ts:1;
  display:block;align-self:auto;
  width:min(100%,calc((100svh - clamp(112px,16svh,184px)) * 16 / 9));
  aspect-ratio:16/9;overflow:hidden;
  border-radius:18px;
  background:var(--apps-blue);   /* 浅蓝色块：让户型模型从奶油色页面里跳出来 */
  box-shadow:0 34px 80px -46px rgba(14,23,51,.45);
  transform:translate3d(var(--tx),var(--ty),0) scale(var(--ts));
  transform-origin:50% 50%;will-change:transform;clip-path:none
}
.yh-apps--seq .yh-apps__frame .yb-banner{width:100%;margin:0}
.yh-apps--seq .yh-apps__copy{grid-column:2;grid-row:1;display:block;min-width:0;padding:0 0 6px}
.yh-apps--seq .yh-apps__title{margin:0 0 clamp(20px,2.4vw,34px);font-size:clamp(2.3rem,3.3vw,4rem);line-height:.92}
.yh-apps--seq .yh-apps__lead{font-size:clamp(.98rem,1.08vw,1.14rem)}
.yh-apps--seq .yh-apps__body{max-width:30rem}

/* copy reveal is scrubbed by --c1 / --c2 (0→1) */
.yh-apps--seq.is-seq .yh-apps__title{opacity:var(--c1,0);transform:translateY(calc((1 - var(--c1,0)) * 46px))}
.yh-apps--seq.is-seq .yh-apps__body{opacity:var(--c2,0);transform:translateY(calc((1 - var(--c2,0)) * 46px))}
.yh-apps--seq.is-seq:not(.is-copy) .yh-apps__copy{pointer-events:none}

/* labels: compact so all eight fit together */
.yh-apps--seq .yb-banner .yb-label{padding:5px 9px 6px;background:rgba(255,255,255,.78);border-radius:6px;box-shadow:0 6px 18px -12px rgba(14,23,51,.4);font-size:clamp(12px,.95cqw,17px);line-height:1.3;text-shadow:none}
.yh-apps--seq .yb-banner .yb-label small{font-size:clamp(10px,.7cqw,13px);line-height:1.35}
.yh-apps--seq .yb-banner .yb-outline{fill:rgba(255,255,255,.34)}

/* sequence mode: hotspots start hidden and are switched on one by one */
.yh-apps--seq.is-seq .yb-banner .yb-marker{opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.9,.25,1.25)}
.yh-apps--seq .yb-banner .yb-marker.is-shown{opacity:1;transform:translate(-50%,-50%)}
.yh-apps--seq .yb-banner .yb-label.is-shown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s .12s,visibility .35s .12s}
.yh-apps--seq .yb-banner .yb-leader.is-shown{opacity:1}
.yh-apps--seq .yb-banner .yb-trace.is-shown{stroke-dashoffset:0}
.yh-apps--seq .yb-banner .yb-highlight.is-shown .yb-outline{opacity:1}

@media(max-width:900px){
  .yh-apps.yh-apps--seq{height:auto;background:var(--apps-paper)}
  .yh-apps--seq .yh-apps__pin{position:relative;height:auto;overflow:visible}
  .yh-apps--seq .yh-apps__inner{grid-template-columns:1fr;padding:64px 16px 56px}
  .yh-apps--seq .yh-apps__media,.yh-apps--seq .yh-apps__copy{grid-column:1;grid-row:auto}
  .yh-apps--seq .yh-apps__frame{width:100%;transform:none;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .yh-apps.yh-apps--seq{height:auto}
  .yh-apps--seq .yh-apps__pin{position:relative;height:auto}
  .yh-apps--seq .yh-apps__frame{transform:none}
}

/* ==========================================================================
   Applications × Tested performance (2026-09-29)
   One chapter: centred heading · floor plan inside a tablet-style device frame
   (same pinned zoom → hotspots → shrink sequence) · four proof cards float in
   around the device · short line + CTA + reference note below.
   Warm-white page (flow-bg blends it into the sections above and below).
   ========================================================================== */
.yh-apps.yh-apps--proof{
  --seq-len:330svh;
  --fw:min(56vw,calc((100svh - 330px) * 16 / 9 + 28px),980px);  /* device width incl. bezel */
  --bezel:14px;
  --device:#141b2d;
  --screen:#F1ECDF;
  background:var(--apps-paper)
}
.yh-apps--proof .yh-apps__inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,2.6svh,34px);
  padding:clamp(78px,11svh,118px) var(--apps-gutter) clamp(22px,3svh,40px)
}
/* heading: small, centred, always visible */
.yh-apps--proof .yh-apps__head{position:relative;z-index:1;text-align:center}
.yh-apps__eyebrow{margin:0 0 12px;color:#B87400;font:700 .7rem/1.2 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.yh-apps--proof .yh-apps__title,
.yh-apps--proof.is-seq .yh-apps__title{margin:0;font-size:clamp(2rem,3.1vw,3.4rem);line-height:1;letter-spacing:-.05em;opacity:1;transform:none}

/* stage = device + floating cards */
.yh-apps--proof .yh-apps__stage{position:relative;z-index:3;display:flex;justify-content:center;width:100%}
.yh-apps--proof .yh-apps__media{position:relative;z-index:3;display:block;width:var(--fw);margin:0}
.yh-apps--proof .yh-apps__frame{
  width:100%;aspect-ratio:auto;padding:var(--bezel);
  border-radius:30px;overflow:visible;
  background:linear-gradient(145deg,#2a3350,var(--device) 38%,#0b1020);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.14) inset,0 44px 90px -40px rgba(14,23,51,.55),0 16px 30px -18px rgba(14,23,51,.35)
}
.yh-apps__cam{position:absolute;top:50%;left:calc(var(--bezel) / 2 - 3px);width:6px;height:6px;border-radius:50%;background:#2f3a5c;box-shadow:0 0 0 1.5px #0b1020;transform:translateY(-50%)}
.yh-apps__screen{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:17px;background:radial-gradient(120% 90% at 50% 40%,#FFFDF6 0,var(--screen) 70%)}
.yh-apps--proof .yh-apps__frame .yb-banner{width:100%;margin:0}

/* proof cards */
.yh-proof{--k:1;position:absolute;z-index:4;margin:0;pointer-events:none;
  opacity:var(--k);
  transform:translate3d(calc((1 - var(--k)) * var(--dx,0px)),calc((1 - var(--k)) * 40px),0) scale(calc(.82 + .18 * var(--k))) rotate(var(--r,0deg));
  filter:drop-shadow(0 26px 30px rgba(14,23,51,.28));
  animation:yh-proof-float 6.5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.6s)}
.yh-proof img{display:block;width:100%;height:auto}
.yh-proof--wind   {--dx:120px; --r:-2.5deg;width:clamp(210px,18vw,300px);right:calc(50% + var(--fw) / 2 - 64px);top:-7%}
.yh-proof--thermal{--dx:90px;  --r:3deg;   width:clamp(118px,9.5vw,158px);right:calc(50% + var(--fw) / 2 - 10px);bottom:0;animation-duration:7.4s}
.yh-proof--air    {--dx:-100px;--r:4deg;   width:clamp(148px,12.5vw,206px);left:calc(50% + var(--fw) / 2 - 50px);top:-11%;animation-duration:5.8s}
.yh-proof--water  {--dx:-110px;--r:-2deg;  width:clamp(186px,15.5vw,258px);left:calc(50% + var(--fw) / 2 - 58px);bottom:-6%;animation-duration:7s}
@keyframes yh-proof-float{from{translate:0 0}to{translate:0 -12px}}

/* below the device: one line, CTA, reference note */
.yh-apps--proof .yh-apps__copy{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 36px;align-items:center;width:min(100%,var(--fw));padding:0}
.yh-apps--proof .yh-apps__lead{margin:0;max-width:44ch;font-size:clamp(.95rem,1.02vw,1.08rem);line-height:1.5}
.yh-apps--proof .yh-apps__cta{margin:0;justify-self:end}
.yh-apps__note{grid-column:1/-1;margin:4px 0 0;padding-top:12px;border-top:1px solid rgba(14,23,51,.12);color:rgba(14,23,51,.52);font:400 .72rem/1.5 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-apps__note a{color:var(--apps-ink);font-weight:650;text-decoration:none;border-bottom:1px solid rgba(14,23,51,.3);white-space:nowrap}
.yh-apps__note a:hover{border-color:#F5A20E}
.yh-apps--proof.is-seq .yh-apps__copy{opacity:var(--c2,0);transform:translateY(calc((1 - var(--c2,0)) * 24px))}
.yh-apps--proof.is-seq:not(.is-copy) .yh-apps__copy{pointer-events:none}
.yh-apps--proof.is-seq .yh-apps__body{opacity:1;transform:none}

/* hotspot labels sit on a light screen now */
.yh-apps--proof .yb-banner .yb-label{background:rgba(255,255,255,.9)}

/* tablet / phone: no pin — heading, device, 2×2 cards, copy */
@media(max-width:900px){
  .yh-apps.yh-apps--proof{--fw:100%;--bezel:9px}
  .yh-apps--proof .yh-apps__inner{padding:64px 16px 56px;gap:28px}
  .yh-apps--proof .yh-apps__stage{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:center;justify-items:center}
  .yh-apps--proof .yh-apps__media{grid-column:1/-1;width:100%;margin-bottom:6px}
  .yh-apps--proof .yh-apps__frame{border-radius:20px}
  .yh-apps__screen{border-radius:12px}
  .yh-proof{position:relative;inset:auto!important;width:min(100%,240px)!important;--k:1!important}
  .yh-apps--proof .yh-apps__copy{grid-template-columns:1fr;width:100%}
  .yh-apps--proof .yh-apps__cta{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .yh-proof{animation:none;--k:1!important}
  .yh-apps--proof .yh-apps__copy{opacity:1!important;transform:none!important}
}

/* ---------- 2026-09-29 r2 · deep-navy stage + dot field, tidier copy, cards clear the labels ---------- */
.yh-apps.yh-apps--proof{
  --apps-navy:#0E1733;
  background:var(--apps-navy);            /* flow-bg reads this colour and blends cream ↔ navy above / navy ↔ cream below */
  color:#FBF7E9;
  --device:#1d2745;
  --screen:#F4EFE2
}
.yh-apps--proof .yh-apps__pin{isolation:isolate}
/* brand-navy glow + slowly drifting dot field (pure CSS) */
.yh-apps--proof .yh-apps__pin::before,
.yh-apps--proof .yh-apps__pin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.yh-apps--proof .yh-apps__pin::before{
  background:
    radial-gradient(60% 55% at 50% 52%,rgba(58,86,160,.55),transparent 70%),
    radial-gradient(40% 40% at 12% 88%,rgba(245,162,14,.10),transparent 70%),
    radial-gradient(45% 45% at 90% 10%,rgba(74,110,190,.28),transparent 70%)}
.yh-apps--proof .yh-apps__pin::after{
  inset:-20%;
  background-image:radial-gradient(circle,rgba(251,247,233,.38) 1px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(38% 30% at 30% 30%,#000,transparent 70%),radial-gradient(34% 28% at 72% 70%,#000,transparent 70%);
          mask-image:radial-gradient(38% 30% at 30% 30%,#000,transparent 70%),radial-gradient(34% 28% at 72% 70%,#000,transparent 70%);
  opacity:.55;animation:yh-dots-drift 26s ease-in-out infinite alternate}
@keyframes yh-dots-drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}

.yh-apps--proof .yh-apps__title,.yh-apps--proof.is-seq .yh-apps__title{color:#FBF7E9}
.yh-apps--proof .yh-apps__eyebrow{color:#F5A20E}
/* device reads as a lit object on the dark stage */
.yh-apps--proof .yh-apps__frame{
  background:linear-gradient(145deg,#3a4568,#1d2745 40%,#121a31);
  box-shadow:0 0 0 1px rgba(251,247,233,.12) inset,0 1px 0 rgba(255,255,255,.2) inset,0 0 0 1px rgba(0,0,0,.35),0 50px 110px -40px rgba(0,0,0,.7),0 0 80px -20px rgba(90,125,210,.35)}
.yh-apps--proof .yh-apps__cam{background:#4a567c;box-shadow:0 0 0 1.5px #121a31}
/* cards: only kiss the bezel, never the screen (hotspot labels sit on the screen edges) */
.yh-apps--proof .yh-proof{filter:drop-shadow(0 22px 26px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(251,247,233,.25))}
.yh-apps--proof .yh-proof--wind   {right:calc(50% + var(--fw) / 2 - 14px);top:-9%}
.yh-apps--proof .yh-proof--thermal{right:calc(50% + var(--fw) / 2 - 10px);bottom:2%}
.yh-apps--proof .yh-proof--air    {left:calc(50% + var(--fw) / 2 - 14px);top:-12%}
.yh-apps--proof .yh-proof--water  {left:calc(50% + var(--fw) / 2 - 14px);bottom:-4%}

/* below the device: CTA + one short reference line, centred */
.yh-apps--proof .yh-apps__copy{display:flex;flex-direction:column;align-items:center;gap:12px;width:auto;text-align:center}
.yh-apps--proof .yh-apps__cta{--cta-ink:#FBF7E9;--cta-paper:#0E1733;justify-self:auto}
.yh-apps--proof .yh-apps__note{margin:0;padding:0;border:0;color:rgba(251,247,233,.55);font-size:.72rem}
.yh-apps--proof .yh-apps__note a{color:#FBF7E9;border-color:rgba(251,247,233,.4)}
.yh-apps--proof .yh-apps__note a:hover{border-color:#F5A20E}
.yh-apps--proof .yb-banner .yb-label{background:rgba(255,255,255,.94)}
@media(max-width:900px){
  .yh-apps--proof .yh-apps__copy{align-items:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){.yh-apps--proof .yh-apps__pin::after{animation:none}}
/* fade bands around the navy stage: cream → navy above, navy → warm cream below (2026-09-29 r2) */
.yh-fade{display:block;height:clamp(160px,32svh,320px);margin-block:0!important;pointer-events:none}
.yh-fade--to-navy{background:linear-gradient(180deg,#FBF7E9 0%,#d9d6d0 22%,#6d7896 52%,#26325a 80%,#0E1733 100%)}
.yh-fade--to-cream{background:linear-gradient(180deg,#0E1733 0%,#26325a 20%,#6d7896 48%,#d9d6d0 78%,#FBF7E9 100%)}
.yh-apps--proof .yh-apps__pin{overflow:hidden}