/* The selected Cloudbreak hero. The comparison page keeps its own styles. */
.cloudbreak-header { z-index: 5; }
.cloudbreak-header .header-link { display: inline-flex; align-items: center; gap: .5rem; background: #17343cbf; }
.trail-care-icon { width: 18px; height: 18px; flex: none; }
.cloudbreak-header .header-link:hover { background: var(--cream); }
.hero-cloudbreak { --hero-blur: 5.5px; min-height: 680px; height: min(100svh, 1000px); padding: 6.5rem clamp(2rem, 6vw, 6.5rem) 2.5rem; background: #173d49; }
.hero-cloudbreak::after { display: none; }
.hero-cloudbreak .hero-inner { position: relative; z-index: 2; gap: clamp(1rem, 2vw, 2.5rem); }
.hero-cloudbreak .hero-copy { max-width: 680px; }
.hero-cloudbreak .hero-kicker { color: #deded1; }
.hero-cloudbreak h1 em { color: #f3d9ac; }
.hero-title-line { display: block; }
/* A small circuit leaves the button edge, passes two stops and returns. */
.hero-cloudbreak .hero-primary { position: relative; justify-content: center; padding-inline: 1.3rem; overflow: visible; }
.hero-cta-trail { position: absolute; left: -10%; top: -50%; width: 120%; height: 200%; overflow: visible; pointer-events: none; color: #f4dfb9; opacity: 0; transition: opacity 180ms ease-out; }
.hero-cta-trail path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-cta-trail .cta-leg { stroke: white; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 180ms ease-in; }
.hero-cta-trail .cta-waypoint { opacity: 0; transition: opacity 100ms ease-out; }
.hero-cta-trail .cta-brush { fill: currentColor; stroke: none; }
.hero-cta-trail .cta-stop-ring { fill: #173d49; stroke: currentColor; stroke-width: 1.3; }
.hero-cta-trail .cta-stop-dot { fill: currentColor; }
.hero-cloudbreak .hero-primary .hero-cta-trail.is-finished { opacity: 0; transition: opacity 450ms ease-out; }
.hero-cta-trail .cta-plane { opacity: 0; pointer-events: none; }
.hero-cta-trail .cta-plane path { fill: #f4dfb9; stroke: #173d49; stroke-width: .8; }
.hero-primary:focus-visible .hero-cta-trail { opacity: 1; }
.hero-primary:focus-visible .cta-leg { stroke-dashoffset: 0; transition: stroke-dashoffset 650ms linear var(--start); }
.hero-primary:focus-visible .cta-waypoint { opacity: 1; transition-delay: var(--arrival); }
@media (hover: hover) and (pointer: fine) {
  .hero-primary:hover .hero-cta-trail { opacity: 1; }
  .hero-primary:hover .cta-leg { stroke-dashoffset: 0; transition: stroke-dashoffset 650ms linear var(--start); }
  .hero-primary:hover .cta-waypoint { opacity: 1; transition-delay: var(--arrival); }
}
.hero-cloudbreak .hero-app-preview { max-width: min(570px, calc((100svh - 168px) * .925)); user-select: none; -webkit-user-select: none; }
.hero-cloudbreak .hero-app-device { box-shadow: 0 20px 70px rgba(11, 31, 41, .45), 0 0 0 1px rgba(240, 239, 220, .65); }
.hero-scene, .hero-scene-land, .hero-scene-air, .hero-scene-light, .hero-reading-field { position: absolute; inset: 0; pointer-events: none; }
.hero-scene { z-index: 0; overflow: hidden; }
.hero-scene-land { inset: -2%; transform: scale(1.01); filter: blur(var(--hero-blur)); }
.hero-scene-land picture, .hero-scene-land video, .hero-scene-land img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-scene-land img, .hero-scene-land video { object-fit: cover; object-position: 58% center; }
.hero-scene-land video { opacity: 0; transition: opacity 220ms ease-out; }
.hero-scene-land video.is-visible { opacity: 1; }
.hero-scene-air { background: linear-gradient(0deg, rgba(22, 54, 64, .46), transparent 42%), linear-gradient(180deg, rgba(21, 47, 64, .12), transparent 35%); }
.hero-scene-light { background: radial-gradient(ellipse at 81% 17%, rgba(255, 218, 155, .3), rgba(252, 221, 160, .09) 20%, transparent 48%); opacity: .35; }
.hero-reading-field { background: linear-gradient(90deg, rgba(10, 34, 47, .85), rgba(13, 39, 51, .64) 30%, rgba(13, 42, 53, .13) 59%, transparent 80%), linear-gradient(180deg, rgba(16, 37, 49, .42), transparent 17%, transparent 84%, rgba(11, 36, 49, .38)); }
.hero-focus-layer { display: none; }
/* Touch uses one directly filtered media surface. The focus mask is mouse-only. */
@media (hover: hover) and (pointer: fine) {
  @supports (backdrop-filter: blur(1px)) {
    .hero-cloudbreak .hero-scene-land { filter: none; }
    .hero-focus-layer { display: block; position: absolute; inset: 0; backdrop-filter: blur(var(--hero-blur)); mask-image: radial-gradient(circle 180px at var(--focus-x, 70%) var(--focus-y, 50%), rgb(0 0 0 / var(--focus-mask, 1)) 24%, #000 100%); -webkit-mask-image: radial-gradient(circle 180px at var(--focus-x, 70%) var(--focus-y, 50%), rgb(0 0 0 / var(--focus-mask, 1)) 24%, #000 100%); }
  }
}
.hero-cloudbreak .hero-trail { color: #f4dfb9; }
.hero-cloudbreak .hero-ink { fill: currentColor; opacity: .9; }
.hero-cloudbreak .hero-trail-line { opacity: 0; }
.hero-cloudbreak .hero-pin { stroke-width: .9; }
.hero-cloudbreak .hero-pin-disc { fill: #21424bd9; }
.hero-cloudbreak .hero-pin text { font-size: 11.5px; font-weight: 550; letter-spacing: .025em; }
.hero-cloudbreak .hero-pin .hero-place { fill: #f6e5c8; font-size: 14px; letter-spacing: .035em; text-anchor: end; }
.hero-cloudbreak .hero-pin[data-day="11"] .hero-place { text-anchor: start; }
.hero-cloudbreak .hero-pin .hero-place-stop { text-anchor: start; }
.hero-cloudbreak .hero-pin .hero-place-stop-top { text-anchor: middle; }
.hero-cloudbreak .hero-trail .hero-pin .hero-place-stop-right { text-anchor: end; }
.hero-cloudbreak .hero-pin-reveal { transition: none !important; }
.hero-cloudbreak .hero-trail-origin { stroke-width: 1; }
.hero-route-hit { fill: none; stroke: transparent; stroke-width: 22px; vector-effect: non-scaling-stroke; pointer-events: none; }
.hero-route-hit.is-ready { pointer-events: stroke; }
.hero-route-light { opacity: 0; transition: opacity 160ms ease-out; pointer-events: none; }
.hero-route-light.is-lit { opacity: 1; }
.hero-route-light path { fill: #ffe6ac; }
.hero-motion { position: absolute; z-index: 3; right: 1.5rem; bottom: 1.5rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #f6f4e966; border-radius: 50%; background: #18374499; color: #f6f4e9; cursor: pointer; }
.hero-motion[hidden] { display: none; }
.hero-motion:hover { background: #183744; }
.hero-motion:focus-visible { outline: 3px solid #f1c987; outline-offset: 4px; }
.hero-motion svg { width: 16px; height: 16px; fill: currentColor; }
.hero-motion .motion-play, .hero-motion.is-paused .motion-pause { display: none; }
.hero-motion.is-paused .motion-play { display: block; }
.cloudbreak-pending .cloudbreak-header, .cloudbreak-pending .hero-cloudbreak .hero-inner { opacity: 0; }
.hero-cloudbreak.is-entering .hero-app-device { will-change: transform, opacity; }
@media (max-width: 1000px) and (min-width: 851px) {
  .hero-cloudbreak { padding-inline: 4.5vw; }
  .hero-cloudbreak .hero-inner { gap: .5rem; }
}
@media (max-width: 850px) {
  .hero-cloudbreak { height: auto; min-height: 100svh; padding: 7rem 6vw 2.5rem; }
  .hero-cloudbreak .hero-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-cloudbreak .hero-copy { width: 100%; max-width: 560px; margin: auto; padding: 0; }
  .hero-cloudbreak .hero-kicker { margin-bottom: 1.25rem; }
  .hero-cloudbreak h1 { font-size: clamp(3.1rem, 8vw, 4.5rem); margin-bottom: 1.25rem; }
  .hero-cloudbreak .hero-lede { max-width: 32rem; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.65; }
  .hero-cloudbreak .hero-app-preview { width: min(100%, 440px); max-width: none; }
  .hero-reading-field { background: linear-gradient(180deg, rgba(10, 34, 47, .78), rgba(13, 39, 51, .76) 33%, rgba(13, 42, 53, .2) 58%, rgba(11, 36, 49, .26)); }
}
@media (max-width: 520px) {
  .hero-cloudbreak { padding: 6.5rem 1.25rem 2rem; }
  .hero-cloudbreak .hero-inner { gap: 1.2rem; }
  .hero-cloudbreak h1 { font-size: clamp(2.5rem, 12.4vw, 4rem); }
  .hero-cloudbreak .hero-kicker { font-size: .63rem; }
  .hero-cloudbreak .hero-lede { font-size: .95rem; }
  .hero-cloudbreak .hero-app-preview { width: min(100%, 360px); }
  .hero-cloudbreak .hero-app-device { border-width: 3px; border-radius: 22px; }
  .hero-cloudbreak .hero-app-device img { border-radius: 18px; }
  .hero-cloudbreak .hero-pin text { font-size: 16px; }
  .hero-cloudbreak .hero-pin .hero-place { font-size: 16px; }
  .hero-motion { right: .8rem; bottom: .8rem; }
}
@media print {
  .hero-route-light, .hero-route-hits { display: none !important; }
  .hero-cloudbreak { height: 1050px; }
  .hero-cloudbreak .hero-inner, .cloudbreak-header { opacity: 1 !important; }
  .hero-cloudbreak .hero-inner * { opacity: 1 !important; }
  .hero-cloudbreak .hero-trail-line, .hero-cloudbreak .hero-plane, .hero-scene-land video, .hero-motion { display: none !important; }
  .hero-cloudbreak .hero-ink { visibility: visible !important; }
  .hero-cloudbreak .hero-ink-mask { stroke-dashoffset: 0 !important; }
}