/* Yealink DECT factory reset — tutorial page
   Dark-first. Pinned stages sized in svh (stable under mobile URL-bar collapse);
   dvh elsewhere; a 100vh declaration ships first as the legacy fallback. */

:root{
  --ink-900:#0A0C10; --ink-850:#0E1117; --ink-800:#141821; --ink-700:#1C212C;
  --fg:#E8EBF2; --fg-dim:#98A0B0; --fg-faint:#6B7385;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#009DDC; --accent-2:#3D7BE8; --green:#35D07F;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.motion{ scroll-behavior:auto; }
html.lenis,html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto; }

body{
  margin:0; background:var(--ink-900); color:var(--fg);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
code{ font-family:var(--mono); font-size:.88em; background:var(--ink-700); padding:.12em .42em; border-radius:5px; }
em{ font-style:normal; background:linear-gradient(92deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wrap{ width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto; }

/* Film grain — static, composited once, no scroll cost. */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.030;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; background:transparent; }
.progress i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(20px,4vw,44px);
  background:rgba(10,12,16,.66); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(0); transition:transform .45s var(--ease), border-color .45s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav.is-hidden{ transform:translateY(-104%); }
.nav__mark{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav__brand{ color:var(--fg); text-decoration:none; font-weight:700; font-size:15px; letter-spacing:-.02em; white-space:nowrap; }
.nav__brand em{ font-weight:700; margin-left:3px; }
.nav__sep{ width:1px; height:16px; background:var(--line-2); flex:0 0 auto; }
.nav__label{ color:var(--fg-dim); font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav__label a{ color:var(--fg-dim); text-decoration:none; }
.nav__label a:hover,.nav__label a:focus-visible{ color:var(--fg); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{ color:var(--fg-dim); text-decoration:none; font-size:14px; transition:color .25s var(--ease); }
.nav__links a:hover,.nav__links a:focus-visible{ color:var(--fg); }

/* HERO */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:grid; place-items:center; padding:140px 0 90px; overflow:clip;
}
.hero__orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; will-change:transform; }
.hero__orb--a{ width:520px; height:520px; left:-90px; top:2%;  background:radial-gradient(circle,#2E6BFF,transparent 68%); }
.hero__orb--b{ width:430px; height:430px; right:-60px; top:22%; background:radial-gradient(circle,#7B5CFF,transparent 68%); }
.hero__orb--c{ width:330px; height:330px; left:44%;   bottom:2%; background:radial-gradient(circle,#0FA98A,transparent 68%); opacity:.28; }
.hero__inner{ position:relative; z-index:2; text-align:center; width:min(920px,calc(100% - 48px)); }

.kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 26px; }
.kicker .line{ width:44px; height:1px; background:var(--line-2); }

h1{ font-size:clamp(2.6rem,7.4vw,5.4rem); line-height:1.02; letter-spacing:-.042em; font-weight:650; margin:0 0 26px; }
.mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.04em; }
.mask .up{ display:block; }
.hero__sub{ font-size:clamp(1.02rem,1.9vw,1.22rem); color:var(--fg-dim); max-width:62ch; margin:0 auto 38px; }

.hero__paths{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px; text-decoration:none; font-size:15px; font-weight:560; border:1px solid transparent; transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); }
.btn--primary{ background:linear-gradient(96deg,var(--accent),var(--accent-2)); color:#fff; }
.btn--ghost{ border-color:var(--line-2); color:var(--fg); }
.btn--ghost:hover{ background:var(--ink-800); }

.hero__meta{ display:flex; gap:46px; justify-content:center; flex-wrap:wrap; }
.hero__meta div{ display:flex; flex-direction:column; gap:2px; }
.hero__meta b{ font-size:1.5rem; font-weight:600; letter-spacing:-.03em; }
.hero__meta span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); }

.cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); }
.cue__rail{ width:1px; height:52px; background:var(--line-2); position:relative; overflow:hidden; }
.cue__rail i{ position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); }
html.motion .cue__rail i{ animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%{ transform:translateY(100%);} 100%{ transform:translateY(100%);} }

/* SECTION FURNITURE */
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 16px; }
h2{ font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.1; letter-spacing:-.035em; font-weight:640; margin:0 0 44px; max-width:22ch; }
h3{ font-size:1.14rem; letter-spacing:-.02em; font-weight:600; margin:0 0 8px; }

/* BEFORE */
.before{ padding:120px 0; border-top:1px solid var(--line); background:var(--ink-850); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ background:var(--ink-800); border:1px solid var(--line); border-radius:18px; padding:30px 26px 32px; }
.card__no{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:16px; }
.card p{ color:var(--fg-dim); font-size:15px; margin:0; }

/* METHOD — pinned stage.
   Track height is a multiple of svh so the stage never resizes mid-scroll. */
.method{ position:relative; border-top:1px solid var(--line); }
.method--alt{ background:var(--ink-850); }
.method__track{ height:auto; }
html.motion .method__track{
  height:700vh;                                  /* legacy fallback */
  height:calc(100svh * (1 + var(--steps,6) * .82));
}
.method__stage{ padding:96px 0; }
html.motion .method__stage{
  position:sticky; top:0;
  height:100vh;                                   /* legacy fallback */
  height:100svh;
  display:grid; align-items:center; padding:0;
}

.stage__grid{ display:grid; grid-template-columns:minmax(200px,.85fr) 1fr 1.15fr; gap:clamp(24px,4vw,64px); align-items:center; }
.stage__side h2{ margin-bottom:18px; }
.stage__note{ color:var(--fg-dim); font-size:15px; margin:0 0 26px; max-width:34ch; }

.legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.legend li{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--fg-faint); transition:color .35s var(--ease); }
.legend li b{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); font-size:11px; font-family:var(--mono); font-weight:500; transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); }
.legend li.is-on{ color:var(--fg); }
.legend li.is-on b{ background:linear-gradient(140deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff; }

/* Stage visuals — real product photographs with a measured annotation layer.
   The photos ship on a white background, so they sit on a white plate rather
   than a chewed-up transparency cutout. */
.stage__viz{ display:grid; place-items:center; }

.photo{ margin:0; width:100%; max-width:330px; }
.photo__frame{ display:block; position:relative; }
.photo img{
  display:block; width:100%; height:auto; border-radius:18px;
  background:#fff; border:1px solid var(--line);
}
.photo .anno{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.photo figcaption{
  margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--fg-faint);
}
.photo figcaption b{ color:var(--fg-dim); font-weight:600; }

/* Status lights: ringed while off, filled green once the base reports ready. */
.led{ fill:rgba(10,12,16,.55); stroke:rgba(255,255,255,.55); stroke-width:2.5; transition:fill .4s var(--ease), stroke .4s var(--ease); }
.led.is-green{ fill:var(--green); stroke:#fff; }

/* Paging button: ring pulses while it is being held. */
.connect__halo{ fill:none; stroke:var(--accent); stroke-width:3; opacity:0; transition:opacity .3s var(--ease); }
.connect__btn{ fill:none; stroke:var(--accent); stroke-width:2; opacity:0; transition:opacity .3s var(--ease); }
.connect.is-held .connect__halo{ opacity:.9; }
.connect.is-held .connect__btn{ opacity:.55; }

/* Power state: the cord dims and the plug pulls away while unpowered. */
.cord__path{ fill:none; stroke:var(--line-2); stroke-width:4; stroke-linecap:round; transition:stroke .35s var(--ease); }
.cord__plug{ fill:var(--fg-faint); transition:fill .35s var(--ease), transform .45s var(--ease); transform-origin:466px 604px; }
.cord.is-unplugged .cord__path{ stroke:rgba(220,80,110,.30); }
.cord.is-unplugged .cord__plug{ fill:#B33A52; transform:translateX(-34px); }

/* Handset screen overlay, drawn over the real screen. */
.hs__screen{ fill:rgba(4,14,10,.90); stroke:rgba(53,208,127,.35); stroke-width:1.5; }
.hs__line{ fill:var(--green); font-family:var(--mono); font-size:15px; letter-spacing:.04em; }
.hs__line--2{ fill:rgba(255,255,255,.42); font-size:10px; }
.hs__ok{ fill:none; stroke:var(--accent); stroke-width:3; opacity:0; transition:opacity .3s var(--ease); }
.hs__dpad.is-on .hs__ok{ opacity:.9; }
.key{ fill:none; stroke:var(--accent); stroke-width:3; opacity:0; transition:opacity .3s var(--ease); }
.key.is-on{ opacity:.9; }

/* Steps */
.stage__steps{ position:relative; }
html.motion .stage__steps{ position:relative; min-height:304px; }
html.motion .step{ position:absolute; left:0; right:0; top:34px; }
.step{ background:var(--ink-800); border:1px solid var(--line); border-radius:20px; padding:32px 30px 34px; }
.method--alt .step{ background:var(--ink-800); }
.step__no{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px; }
.step p{ color:var(--fg-dim); margin:0; font-size:15.5px; }


/* VIDEO — facade cards. Real links first, so they work with JS off and load no
   third-party code until someone actually clicks one. */
.videos{ padding:118px 0; border-top:1px solid var(--line); background:var(--ink-850); }
.videos__note{ color:var(--fg-dim); font-size:15.5px; max-width:68ch; margin:-24px 0 40px; }
.videos__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px; }

.vid{
  display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit;
  background:var(--ink-800); border:1px solid var(--line); border-radius:20px;
  padding:26px 24px 28px;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.vid:hover,.vid:focus-visible{ transform:translateY(-3px); border-color:var(--line-2); background:var(--ink-700); }
.vid__play{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; position:relative;
}
.vid__play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.vid__body{ display:flex; flex-direction:column; gap:7px; }
.vid__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.vid__title{ font-size:1.04rem; font-weight:600; letter-spacing:-.018em; line-height:1.32; }
.vid__meta{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--fg-faint); }
.vid__desc{ color:var(--fg-dim); font-size:14.5px; margin-top:4px; }

/* Swapped in on click. 16:9 without a padding hack, so no layout shift. */
.vid__frame{ aspect-ratio:16/9; border-radius:20px; overflow:hidden; border:1px solid var(--line-2); background:#000; }
.vid__frame iframe{ width:100%; height:100%; border:0; display:block; }

.step__alias{ margin-top:12px !important; padding-top:12px; border-top:1px solid var(--line); font-size:14px !important; color:var(--fg-faint) !important; }

@media (max-width:1080px){ .videos__grid{ grid-template-columns:1fr 1fr; } }

/* AFTER */
.after{ padding:120px 0 130px; border-top:1px solid var(--line); }
.after__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:52px; }
.after__item{ border-top:1px solid var(--line-2); padding-top:20px; }
.after__item b{ display:block; font-size:1.02rem; font-weight:600; margin-bottom:8px; }
.after__item p{ color:var(--fg-dim); font-size:15px; margin:0; }
.source{ color:var(--fg-faint); font-size:13px; max-width:70ch; margin:0; }

.foot{ border-top:1px solid var(--line); padding:30px 0 44px; }
.build{ color:var(--accent); }
/* Build marker lives in the nav so "which version am I on" is answerable
   without scrolling 20,000px to the footer. */

.foot .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); }

/* Reveal — armed by JS, never by CSS alone. The old rule hid every .reveal the
   moment the stylesheet parsed, so if GSAP failed to load, or the tab was
   backgrounded (rAF suspended), the content stayed invisible permanently.
   JS adds .js-reveal-ready only when it can actually run the animation. */
html.motion.js-reveal-ready .reveal{ opacity:0; }

/* RESPONSIVE */
@media (max-width:1080px){
  .stage__grid{ grid-template-columns:1fr 1fr; }
  .stage__side{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .cards,.after__grid,.videos__grid{ grid-template-columns:1fr; }
  .photo{ max-width:230px; }
  .step{ padding:22px 20px 24px; }

  /* Phones do NOT pin. Fitting a diagram, a heading, a legend and a step card
     inside one viewport meant the instruction was the thing that got cut off.
     Instead: the diagram sticks to the top, and every step is a real card in
     document flow, so nothing can be clipped and every step is reachable. */
  html.motion .method__track{ height:auto; }
  html.motion .method__stage{ position:static; height:auto; padding:84px 0 64px; display:block; }
  html.motion .stage__grid{ display:block; }
  html.motion .stage__side{ margin-bottom:18px; }
  html.motion .stage__side h2{ font-size:1.7rem; margin-bottom:12px; }
  html.motion .stage__note{ margin-bottom:18px; }

  html.motion .stage__viz{
    position:sticky; top:62px; z-index:3; padding:12px 0 14px; margin-bottom:8px;
    background:linear-gradient(var(--ink-900) 78%, transparent);
  }
  .method--alt html.motion .stage__viz,
  html.motion .method--alt .stage__viz{ background:linear-gradient(var(--ink-850) 78%, transparent); }
  html.motion .stage__viz .photo{ max-width:200px; }
  html.motion .stage__viz .photo figcaption{ display:none; }

  /* Vertical numbered list with labels — reads as the agenda for the section.
     In flow, not sticky: a 7-row list pinned to the top would eat the screen,
     which is what the horizontal-dot version was working around. Now that
     phones don't pin, it doesn't need to be compressed at all. */
  html.motion .legend{
    flex-direction:column; gap:11px; margin:0 0 26px;
    padding:20px 18px; border:1px solid var(--line); border-radius:16px;
    background:rgba(255,255,255,.018);
  }
  html.motion .legend li{ font-size:15px; gap:12px; }
  html.motion .legend li b{ width:26px; height:26px; font-size:11.5px; flex:0 0 auto; }

  html.motion .stage__steps{ position:static; min-height:0; display:grid; gap:16px; }
  html.motion .step{ position:static; opacity:1 !important; transform:none !important; }
  .stage__hint{ display:none; }
}

/* REDUCED MOTION — a real layout, not a stripped one.
   Nothing pins, nothing overlays: every step is a numbered card in document order. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain,.progress,.cue{ display:none; }
  .hero__orb{ opacity:.26; filter:blur(80px); }
  .nav{ position:sticky; }
  .method__track,.method__stage{ height:auto; position:static; padding:96px 0; }
  .stage__grid{ grid-template-columns:1fr; gap:32px; }
  .legend,.stage__hint{ display:none; }
  .stage__steps{ display:grid; gap:18px; min-height:0; }
  .step{ position:static; }
  .photo{ max-width:270px; }
}