.dark-device-demo-hero{
  box-sizing:border-box;width:100%;flex:0 0 100%;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:var(--hero-h);
  background:var(--ink);color:var(--on-dark);

  
  
  --hero-h:min(824px,calc(96vh - 56px));
  
  --plate-inset:0px;

  
  --fit-h:calc(var(--hero-h) - var(--plate-inset));
  --dev-x:calc(100vw - min(0.527512 * 100vw,0.937301 * var(--fit-h)));
  --copy-max:min(640px,calc(var(--dev-x) - (100vw - var(--shell))/2 - 44px));
  --hero-copy-width:min(560px,100%);
  --hero-title-lede-gap:clamp(28px,3vw,36px);
  --hero-lede-cta-gap:clamp(32px,3.4vw,42px);
}



.dark-device-demo-hero__frame{position:relative;isolation:isolate;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

.dark-device-demo-hero__photo{
  position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,var(--grey-dark) calc(100% - 30px),rgba(24,24,24,0) 100%);
  mask-image:linear-gradient(to bottom,var(--grey-dark) calc(100% - 30px),rgba(24,24,24,0) 100%);
}
.dark-device-demo-hero__stage{
  position:absolute;left:0;top:0;width:1672px;height:941px;
  transform-origin:0 0;
  transform:translate3d(var(--sx,0px),var(--sy,0px),0) scale(var(--sk,1));
}
.dark-device-demo-hero__device-photo{width:1672px;height:941px;display:block}


.dark-device-demo-hero__device-video{
  position:absolute;left:0;top:0;width:1200px;height:1600px;
  transform-origin:0 0;
  transform:matrix3d(
    0.4506525532,-0.005393651569,0,-0.00003078772509,
    -0.06659929119,0.4504720237,0,-0.00003417809494,
    0,0,1,0,
    875.1,63.1,0,1);
  
  object-fit:cover;object-position:50% 50%;
  background:var(--paper);
}

.dark-device-demo-hero__device-gloss{
  position:absolute;left:0;top:0;width:1200px;height:1600px;
  transform-origin:0 0;
  transform:matrix3d(
    0.4506525532,-0.005393651569,0,-0.00003078772509,
    -0.06659929119,0.4504720237,0,-0.00003417809494,
    0,0,1,0,
    875.1,63.1,0,1);
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 46%,rgba(24,24,24,.10) 100%);
}


.dark-device-demo-hero__foreground-hand{
  position:absolute;left:1160px;top:800px;width:120px;height:100px;
  pointer-events:none;
}


html:not(.js) .dark-device-demo-hero__stage{position:absolute;inset:var(--plate-inset) 0 0;width:auto;height:auto;transform:none}
html:not(.js) .dark-device-demo-hero__device-photo{width:100%;height:100%;object-fit:contain;object-position:100% 50%}
html:not(.js) .dark-device-demo-hero__device-video,html:not(.js) .dark-device-demo-hero__device-gloss,html:not(.js) .dark-device-demo-hero__foreground-hand{display:none}


.dark-device-demo-hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 82% 42%,rgba(66,102,83,.30) 0%,rgba(66,102,83,0) 60%),
    linear-gradient(to right,rgba(24,24,24,.95) 0%,rgba(24,24,24,.88) 24%,rgba(24,24,24,.62) 40%,rgba(24,24,24,.22) 52%,rgba(24,24,24,0) 64%),
    linear-gradient(to top,rgba(24,24,24,.42) 0%,rgba(24,24,24,0) 30%);
}


.dark-device-demo-hero__aurora-line{
  position:absolute;z-index:0;inset:0 0 auto;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,0) 12%,var(--gold-pure) 46%,var(--sage) 58%,transparent 92%);
  background-size:220% 100%;
  opacity:.7;animation:dark-device-demo-hero-sweep 9s linear infinite;
}
@keyframes dark-device-demo-hero-sweep{0%{background-position:220% 0}100%{background-position:-220% 0}}


.dark-device-demo-hero__inner{
  position:relative;z-index:1;
  width:var(--shell);margin:0 auto;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,5vh,64px) 0 clamp(44px,6vh,76px);
}
.dark-device-demo-hero__copy{width:var(--hero-copy-width);max-width:100%}


.eyebrow{
  display:inline-block;margin-bottom:16px;
  font-family:var(--body);font-weight:700;font-size:var(--fs-small);
  line-height:var(--lh-tight);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pure);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .dark-device-demo-hero .eyebrow{
    background:linear-gradient(92deg,var(--gold-pure) 0%,var(--cream) 46%,var(--cream) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}


.dark-device-demo-hero__title{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--display-track);
  color:var(--on-dark);margin:0;text-wrap:balance;
  text-shadow:0 2px 24px rgba(24,24,24,.55);
}
.dark-device-demo-hero__title .dark-device-demo-hero__title-line{display:block;overflow:visible}

.dark-device-demo-hero__title .dark-device-demo-hero__title-line > i{display:block;font-style:normal}
.js .dark-device-demo-hero__title .dark-device-demo-hero__title-line > i{transform:none}
.js .dark-device-demo-hero__title.in .dark-device-demo-hero__title-line > i{transform:none;transition:none}

.dark-device-demo-hero__lede{
  font-size:var(--fs-standard-lede);line-height:var(--lh-copy);color:var(--on-dark-soft);
  width:100%;max-width:100%;margin:var(--hero-title-lede-gap) 0 0;
  text-shadow:0 1px 14px rgba(24,24,24,.55);
}
.dark-device-demo-hero__lede b{font-weight:700;color:var(--paper)}


.dark-device-demo-hero__cta-row{display:flex;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;margin-top:var(--hero-lede-cta-gap)}
.dark-device-demo-hero__primary-cta{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;background:var(--gold);color:var(--cta-ink);
  font-family:var(--display);font-size:var(--fs-standard-lede);line-height:var(--lh-tight);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 12px 30px -14px rgba(212,175,55,.7);
  transition:background .25s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease);
}
.dark-device-demo-hero__primary-cta:hover{background:var(--gold-pure);color:var(--grey-dark);box-shadow:0 16px 34px -12px rgba(212,175,55,.55);transform:translateY(-2px)}
.dark-device-demo-hero__primary-cta:focus-visible{outline:3px solid var(--gold-pure);outline-offset:4px}
.dark-device-demo-hero__primary-cta:active{transform:translateY(0)}
.dark-device-demo-hero__primary-cta-arrow{display:inline-block;transition:transform .3s var(--ease)}
.dark-device-demo-hero__primary-cta:hover .dark-device-demo-hero__primary-cta-arrow{transform:translateX(6px)}
.dark-device-demo-hero__primary-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);transition:left .62s var(--ease);
}
.dark-device-demo-hero__primary-cta:hover::after{left:118%}
.dark-device-demo-hero__cta-note{font-size:var(--fs-body);line-height:var(--lh-tight);color:var(--on-dark-faint);max-width:26ch}


@media (max-width:960px){
  .dark-device-demo-hero{display:flex;flex-direction:column;min-height:0;background:var(--ink)}
  .dark-device-demo-hero__frame{display:contents}
  .dark-device-demo-hero__inner{order:1;flex:0 0 auto;padding-bottom:clamp(28px,4vh,40px)}
  .dark-device-demo-hero__photo{order:2;position:relative;inset:auto;z-index:0;width:100%;aspect-ratio:1672/941;border-top:1px solid rgba(255,255,255,.16);--plate-inset:0px}
  .dark-device-demo-hero__copy{width:var(--hero-copy-width);max-width:100%}
  .dark-device-demo-hero__scrim{display:none}
  .dark-device-demo-hero__title,.dark-device-demo-hero .dark-device-demo-hero__lede{text-shadow:none}
  .dark-device-demo-hero__title{max-width:13ch}
}
@media (max-width:600px){.dark-device-demo-hero__inner{padding-top:30px}.dark-device-demo-hero__cta-row{align-self:stretch}.dark-device-demo-hero__primary-cta{justify-content:center}}
@media (prefers-reduced-motion:reduce){
  .dark-device-demo-hero__aurora-line{animation:none}
  .dark-device-demo-hero__primary-cta,.dark-device-demo-hero__primary-cta::after,.dark-device-demo-hero__primary-cta-arrow{transition:none}
  .dark-device-demo-hero__primary-cta:hover{transform:none}
}

/* Template title standard: section H2 */
[data-section="dark-device-demo-hero"][data-section="dark-device-demo-hero"] h2,
.dark-device-demo-hero.dark-device-demo-hero h2,
.dark-device-demo-hero__root.dark-device-demo-hero__root h2{
  font-size:50px !important;
  font-weight:500 !important;
  line-height:var(--lh-tight) !important;
  overflow-wrap:anywhere;
}

/* Headline width repair 2026-09-20. */
@media (max-width:960px){
  .dark-device-demo-hero__title{
    max-width:none;
  }
}

/* 80px section-padding exception 2026-09-21: hero banner owns its own viewport rhythm. */
.dark-device-demo-hero{
  min-height:var(--hero-h);
  padding-top:0;
  padding-bottom:0;
}
.dark-device-demo-hero__frame,
.dark-device-demo-hero__inner{
  flex:1 1 auto;
}
.dark-device-demo-hero__inner{
  justify-content:center;
  padding:clamp(36px,5vh,64px) 0 clamp(44px,6vh,76px);
}
@media (max-width:960px){
  .dark-device-demo-hero__inner{
    flex:0 0 auto;
    padding-bottom:clamp(28px,4vh,40px);
  }
  .dark-device-demo-hero__frame{
    display:contents;
  }
}
@media (max-width:600px){
  .dark-device-demo-hero__inner{
    padding-top:30px;
  }
}

/* Title/description stack standard 2026-09-22: title, lede, and CTA share the same measured copy column. */
[data-section="dark-device-demo-hero"] .dark-device-demo-hero__title,
[data-section="dark-device-demo-hero"] .dark-device-demo-hero__lede{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  grid-column:1 / -1 !important;
  justify-self:start !important;
  align-self:start !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
[data-section="dark-device-demo-hero"] .dark-device-demo-hero__lede{
  margin-top:var(--hero-title-lede-gap) !important;
}