/* ConnectWare mobile guide — scroll-driven training 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:#1F8FE5; --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),#5AB0FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
a{ color:var(--accent); }
.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),#5AB0FF);
}

/* 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); -webkit-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:22px; }
.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,#1F8FE5,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; }

/* GETTING STARTED */
.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:400vh;                                  /* legacy fallback */
  height:calc(100svh * (1 + var(--steps,3) * .9));
}
.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 visual — the phone screenshot. It already carries its own bezel, so it
   gets a shadow and a rounded clip, nothing more. */
.stage__viz{ display:grid; place-items:center; }
.phone{ margin:0; width:100%; max-width:300px; }
.phone img{
  display:block; width:100%; height:auto; border-radius:34px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  will-change:transform,opacity;
}
html.motion .stage__viz .phone img{ height:min(76svh,700px); width:auto; max-width:100%; object-fit:contain; }
.phone figcaption{ margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--fg-faint); text-align:center; }

/* 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; }
html.motion .stage__hint{ display:flex; gap:10px; align-items:baseline; margin:0; height:20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
html.motion .stage__hintword::before{ content:"·"; margin-right:10px; color:var(--fg-faint); }
.step{ background:var(--ink-800); border:1px solid var(--line); border-radius:20px; padding:32px 30px 34px; }
.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; }
.step p b{ color:var(--fg); }
/* Each step carries its own screenshot for the no-JS and reduced-motion layouts.
   With motion on, the sticky phone shows it instead. */
.step__shot{ display:block; width:min(100%,220px); height:auto; margin:22px auto 0; border-radius:26px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
html.motion .step__shot{ display:none; }

/* MESSAGES */
.messages{ padding:120px 0; border-top:1px solid var(--line); }
.messages__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,90px); align-items:center; }
.msg-points{ display:grid; gap:14px; }
.msg-point{ border-top:1px solid var(--line-2); padding-top:16px; }
.msg-point b{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.msg-point p{ margin:0; color:var(--fg-dim); font-size:15.5px; }
.msg-point p b{ display:inline; font:inherit; letter-spacing:inherit; text-transform:none; color:var(--fg); }
.phone--static{ max-width:280px; justify-self:center; }

/* QUICK REFERENCE */
.reference{ padding:120px 0; border-top:1px solid var(--line); background:var(--ink-850); }
.ref{ margin:0; display:grid; gap:0; border-top:1px solid var(--line-2); }
.ref__row{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.ref dt{ font-weight:600; letter-spacing:-.015em; }
.ref dd{ margin:0; color:var(--fg-dim); }

/* KNOWLEDGE CHECK */
.quiz{ padding:120px 0 130px; border-top:1px solid var(--line); }
.quiz__list{ margin:0; padding:0 0 0 1.4em; display:grid; gap:10px; max-width:760px; }
.quiz__list li::marker{ color:var(--accent); font-family:var(--mono); font-size:13px; }
.quiz details{ background:var(--ink-800); border:1px solid var(--line); border-radius:14px; padding:14px 18px; }
.quiz summary{ cursor:pointer; font-weight:560; letter-spacing:-.012em; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.quiz summary::-webkit-details-marker{ display:none; }
.quiz summary::after{ content:"+"; font-family:var(--mono); color:var(--accent); flex:0 0 auto; }
.quiz details[open] summary::after{ content:"–"; }
.quiz details p{ margin:12px 0 2px; color:var(--fg-dim); font-size:15.5px; }

.foot{ border-top:1px solid var(--line); padding:30px 0 44px; }
.build{ color:var(--accent); }
.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. */
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; }
  .messages__grid{ grid-template-columns:1fr; }
  .phone--static{ max-width:240px; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .step{ padding:22px 20px 24px; }
  .ref__row{ grid-template-columns:1fr; gap:4px; padding:14px 0; }
  .hero__meta{ gap:28px; }

  /* Phones do NOT pin. The phone sticks to the top of the viewport and every
     step is a real card in document flow, so nothing can be clipped. */
  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:58px; z-index:3; padding:10px 0 14px; margin-bottom:8px;
    background:linear-gradient(var(--ink-900) 80%, transparent);
  }
  html.motion .method--alt .stage__viz{ background:linear-gradient(var(--ink-850) 80%, transparent); }
  html.motion .stage__viz .phone{ max-width:none; width:auto; }
  html.motion .stage__viz .phone img{ height:min(40svh,360px); width:auto; border-radius:22px; }
  html.motion .stage__viz .phone figcaption{ display:none; }

  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,
   each with its own screenshot. */
@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,.stage__viz{ display:none; }
  .stage__steps{ display:grid; gap:18px; min-height:0; }
  .step{ position:static; }
}

/* Sign-in figure under the Getting Started cards */
.phone--signin{ max-width:250px; margin:44px auto 0; }