.transformation{min-height:0}
.transform-sticky{position:static;min-height:0}
.transformation .new-site,.transformation .transform-browser,.transformation .transform-track>span{animation:none}
.magic-sweep{display:none}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference) and (min-height:700px){
  .transformation{height:190svh;min-height:0;padding:0;view-timeline-inset:0;overflow-x:clip}
  .transform-sticky{position:sticky;top:0;height:100svh;min-height:0;padding-block:116px 24px}
  .transform-browser{animation:none;transform:none;overflow:hidden}
  .transform-screens{border-radius:0 0 12px 12px;overflow:hidden;isolation:isolate}
  /* Opposite transforms reveal the video without moving or stretching its content. */
  .transformation .new-site{opacity:1;animation:magic-reveal linear both;animation-timeline:--transformation;animation-range:contain 12% contain 78%}
  .transformation .redesign-video{animation:magic-countermove linear both;animation-timeline:--transformation;animation-range:contain 12% contain 78%}
  .magic-sweep{display:block;position:absolute;inset:0;z-index:20;pointer-events:none;animation:magic-reveal linear both;animation-timeline:--transformation;animation-range:contain 12% contain 78%}
  .magic-effects{position:absolute;inset:0;animation:magic-presence linear both;animation-timeline:--transformation;animation-range:contain 0% contain 100%}
  .magic-edge{position:absolute;left:100%;top:0;bottom:0;width:2px;background:#fff8db;box-shadow:0 0 6px 2px #ffce5980,0 0 18px 5px #ffce5933}
  .magic-wand{position:absolute;left:100%;top:34%;width:clamp(52px,8vw,110px);height:9px;border-radius:4px;background:#102044;box-shadow:0 2px 5px #10204425;transform-origin:0 50%;transform:rotate(-38deg)}
  .magic-wand::before{content:"";position:absolute;inset:0 auto 0 0;width:22%;border-radius:4px 0 0 4px;background:#ffce59}
  .magic-wand::after{content:"✦";position:absolute;left:-17px;top:-20px;font-size:42px;line-height:1;color:#fff8db;text-shadow:0 0 8px #ffce59}
  .magic-spark{position:absolute;left:calc(100% + var(--spark-x));top:var(--spark-y);width:var(--spark-size);height:var(--spark-size);background:var(--spark-color);clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:magic-twinkle linear both;animation-timeline:--transformation;animation-range:contain var(--spark-start) contain var(--spark-end)}
  .transformation .transform-track>span{animation:progress linear both;animation-timeline:--transformation;animation-range:contain 12% contain 78%}
  .transformation .scroll-hint{display:inline}.transformation .manual-hint{display:none}
  .transformation[data-manual] .new-site,.transformation[data-manual] .redesign-video{animation:none;transform:none}
  .transformation[data-manual=before] .new-site{opacity:0}
  .transformation[data-manual=after] .new-site{opacity:1}
  .transformation[data-manual] .magic-sweep{display:none}
  .transformation[data-manual] .scroll-hint{display:none}.transformation[data-manual] .manual-hint{display:inline}
  .transformation[data-manual] .transform-track>span{animation:none}
 }
 @media(prefers-reduced-motion:no-preference) and (min-height:700px) and (max-width:800px){
  .transform-sticky{padding-block:96px 24px;align-content:center;gap:24px}
  .transform-copy .eyebrow{margin-bottom:12px}
  .transform-copy h2{font-size:clamp(32px,8vw,42px)}
  .transform-copy h2 br{display:initial}
  .transform-copy>p:not(.eyebrow){margin-top:16px;font-size:15px;line-height:1.45}
  .transform-copy .view-switch{margin-top:16px}
  .transform-copy .transform-hint{margin-top:12px}
  .transform-stage{padding:12px;border-radius:20px}
  .transform-track{margin-top:12px}
 }
}
@keyframes magic-reveal{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes magic-countermove{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes magic-presence{0%,7%{opacity:0}12%,73%{opacity:1}82%,100%{opacity:0}}
@keyframes magic-twinkle{0%,100%{opacity:0;transform:translateX(10px) scale(.2) rotate(-30deg)}20%,65%{opacity:1;transform:translateX(0) scale(1) rotate(0)}40%{opacity:.4;transform:translateX(-6px) scale(.5) rotate(25deg)}85%{opacity:.7;transform:translateX(-18px) scale(.7) rotate(50deg)}}

/* Logos precede the pinned comparison, keeping its viewport and timeline intact. */
.transformation-technology{min-height:112px;margin-block:0;padding-block:32px;border-top:0;border-bottom:1px solid #10204414}
@media(max-width:800px){.transformation-technology{min-height:144px;padding-block:24px}}

/* Editorial introduction: one strong headline, a year stamp and clear comparison controls. */
.transform-copy{max-width:520px}
.transform-copy>p.transform-kicker{display:flex;align-items:center;gap:14px;margin:0 0 28px;max-width:none;color:var(--navy);font-size:12px;line-height:1.4;font-weight:600}
.transform-kicker-icon{position:relative;display:block;width:36px;height:32px;flex:none;color:var(--blue)}
.transform-kicker-icon .icon{position:absolute;width:25px;height:25px;stroke-width:1.5;background:var(--paper)}
.transform-kicker-icon .icon:first-child{left:0;top:0;opacity:.4}
.transform-kicker-icon .icon:last-child{right:0;bottom:0}
.transform-copy h2{margin:0;font-size:clamp(44px,4.6vw,66px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.transform-headline{display:block}
.transform-headline em{position:relative;display:inline-block;color:var(--blue);font-style:normal;isolation:isolate}
.transform-headline em::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.015em;height:.12em;background:var(--gold);transform:rotate(-1.5deg)}
.transform-era{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:24px;line-height:1.2;font-weight:400;letter-spacing:0;color:#687185}
.transform-era strong{font-size:34px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.transform-era i{display:grid;place-items:center;width:38px;height:38px;margin-left:6px;border-radius:50%;font-size:27px;line-height:1;color:var(--navy);background:var(--gold);font-style:normal;transform:rotate(-12deg)}
.transform-copy>p.transform-description{max-width:390px;margin:24px 0 0;font-size:17px;line-height:1.55;color:#626d81;text-wrap:pretty}
.transform-controls{max-width:430px;margin-top:28px;padding-top:20px;border-top:1px solid #10204420}
.transform-copy .view-switch{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;padding:0;margin:0;border:0;border-radius:0;background:none}
.transform-copy .view-switch button{display:flex;justify-content:flex-start;gap:10px;min-height:60px;padding:12px 14px;border:1px solid #10204422;border-radius:12px;background:transparent;color:var(--navy);font-size:13px;line-height:1.2;text-align:left;transition:background .18s ease-out,color .18s ease-out,border-color .18s ease-out}
.transform-copy .view-switch button[data-view=after]{background:#e9eefc;border-color:#d4dffa;color:var(--blue)}
.transform-copy .view-switch button:hover{border-color:var(--blue);background:#dfe8ff}
.transform-copy .view-switch button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.view-number{font-size:11px;font-weight:400;opacity:.65;font-variant-numeric:tabular-nums}
.transform-copy .view-switch .icon{flex:none;width:17px;height:17px;margin-left:auto}
.transform-copy .transform-hint{display:none;align-items:center;gap:10px;margin:16px 0 0;font-size:11px;line-height:1.4;color:#626d81}
.transform-scroll-icon{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #10204422;border-radius:50%}
.transform-hint-line{flex:1;height:1px;min-width:12px;background:#10204420}
@media(min-width:801px) and (max-height:820px){
 .transform-copy h2{font-size:clamp(38px,4vw,54px)}
 .transform-copy>p.transform-kicker{margin-bottom:20px}
 .transform-era{margin-top:16px;font-size:20px}.transform-era strong{font-size:28px}
 .transform-copy>p.transform-description{margin-top:20px;font-size:16px}
 .transform-controls{margin-top:20px;padding-top:16px}
}
@media(max-width:1100px) and (min-width:801px){
 .transform-copy .view-switch button{padding-inline:10px;gap:7px;font-size:12px}
 .transform-copy .view-switch .icon{width:14px;height:14px}
}
@media(max-width:800px){
 .transform-copy{max-width:540px}
 .transform-copy>p.transform-kicker{gap:10px;margin-bottom:16px;font-size:11px}
 .transform-kicker-icon{width:28px;height:25px}.transform-kicker-icon .icon{width:20px;height:20px}
 .transform-copy h2{font-size:clamp(30px,7.7vw,42px);line-height:1.04}
 .transform-era{margin-top:12px;font-size:18px;gap:7px}.transform-era strong{font-size:26px}.transform-era i{width:28px;height:28px;font-size:21px}
 .transform-copy>p.transform-description{margin-top:16px;font-size:15px;line-height:1.45;max-width:480px}
 .transform-controls{margin-top:20px;padding-top:16px;max-width:480px}
 .transform-copy .view-switch button{min-height:48px;padding:10px 12px;font-size:12px}
 .transform-copy .transform-hint{display:none}
}
@media(max-width:800px) and (min-height:700px) and (max-height:760px){
 .transform-copy>p.transform-kicker{margin-bottom:12px;font-size:10px}
 .transform-copy h2{font-size:28px}
 .transform-era{margin-top:8px;font-size:16px}.transform-era strong{font-size:23px}.transform-era i{width:25px;height:25px;font-size:19px}
 .transform-copy>p.transform-description{margin-top:12px;font-size:13px;line-height:1.4}
 .transform-controls{margin-top:14px;padding-top:12px}
 .transform-copy .view-switch button{min-height:44px;font-size:11px}
 .transform-sticky{gap:20px}
}

@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference) and (min-height:700px) and (min-width:801px){
  .transform-copy .transform-hint{display:flex}
  .transformation[data-manual] .transform-hint{visibility:hidden}
 }
}