/* CRUZE Service Connect: interactive walkthrough (/walkthrough/)
   The screen is a frozen copy of the real interface. Only the highlighted control responds, and each click
   moves to the next prepared screen. No app logic, data or AI code ships with this page. */
:root{
  --bg:#05090D; --bg-2:#081018; --bg-3:#0D1822; --ink:#E8EDF3; --muted:#9AA8B5; --faint:#6F7E8C;
  --line:rgba(232,237,243,.09); --line-2:rgba(232,237,243,.16);
  --accent:#0A6C96; --accent-2:#4DB0DD; --glow:#6FD3FF; --ice:#BDEBFF; --violet:#9C8CFF; --green:#6FCB95;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(900px 500px at 10% -10%,rgba(10,108,150,.22),transparent 60%),var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--f-display);font-weight:700;line-height:1;margin:0;text-transform:uppercase;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--f-mono)}
.wt-wrap{max-width:1440px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;z-index:200;text-decoration:none}
.skip:focus{top:12px}
.grad{background:linear-gradient(100deg,var(--glow),var(--accent-2) 45%,var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:11px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;background:none;transition:background-color .2s,border-color .2s,box-shadow .2s,opacity .2s}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn-lg{padding:14px 22px;font-size:16px}
.btn-primary{background:linear-gradient(135deg,#19A0D6,#0A6C96);color:#fff;box-shadow:0 0 0 1px rgba(111,211,255,.3) inset,0 8px 22px rgba(10,108,150,.35)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(111,211,255,.55) inset,0 10px 28px rgba(25,160,214,.5)}
.btn-ghost{border-color:var(--line-2);background:rgba(13,24,34,.7)}
.btn-ghost:hover{border-color:rgba(111,211,255,.45)}
.btn:disabled{opacity:.35;cursor:default}

/* Header */
.wt-hdr{position:sticky;top:0;z-index:50;background:rgba(5,9,13,.95);border-bottom:1px solid var(--line)}
.wt-nav{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px}
.brand>span{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--f-display);font-size:19px;letter-spacing:.14em}
.brand>span>span{font-size:11px;color:var(--muted);margin-top:3px}
.wt-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);border:1px solid rgba(111,211,255,.3);padding:4px 10px;border-radius:999px}
.wt-badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.wt-nav-r{margin-left:auto;display:flex;gap:10px}
@media (max-width:760px){.hide-sm,.wt-badge{display:none}.wt-nav-r .btn{padding:8px 12px;font-size:13px}}

.wt-intro{padding:28px 0 20px;max-width:880px}
.wt-intro h1{font-size:clamp(32px,4.4vw,56px)}
.wt-intro p{margin-top:12px;color:var(--muted);font-size:16.5px}

/* Tour layout */
.tour{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.stage{border-radius:14px;overflow:hidden;background:#0B141B;border:1px solid rgba(111,211,255,.2);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.screen-chrome{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 12px;background:#0E1A24;border-bottom:1px solid rgba(255,255,255,.06)}
.screen-chrome>i{width:10px;height:10px;border-radius:50%;background:#2A3A48;flex:none}
.screen-chrome>i:nth-child(1){background:#E5675C}.screen-chrome>i:nth-child(2){background:#E8B24F}.screen-chrome>i:nth-child(3){background:#5FBF6B}
.screen-chrome span{margin-left:12px;font-family:var(--f-mono);font-size:11.5px;color:var(--faint);background:rgba(255,255,255,.04);padding:3px 12px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fs-btn{margin-left:auto;width:28px;height:28px;border-radius:7px;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none}
.fs-btn:hover{color:var(--ink);border-color:var(--accent-2)}
.fs-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viewport{position:relative;overflow:hidden;background:#0E141A;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.device{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transition:transform .6s var(--ease),opacity .18s ease}
.device.fade{opacity:0}
.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted);font-size:14px;background:#0E141A}
.loading span{width:34px;height:34px;border-radius:50%;border:3px solid rgba(111,211,255,.2);border-top-color:var(--glow);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Coach panel */
.coach{position:sticky;top:84px;padding:22px;border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));box-shadow:0 20px 50px rgba(0,0,0,.35)}
.coach-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chap{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.chap .ai-tag{letter-spacing:.04em}
.count{font-size:12px;color:var(--faint)}
.bar{height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;margin:12px 0 18px}
.bar i{display:block;height:100%;width:100%;transform-origin:0;transform:scaleX(.04);background:linear-gradient(90deg,var(--accent),var(--glow));transition:transform .5s var(--ease)}
.coach h2{font-size:clamp(28px,2.6vw,36px)}
.coach .body{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6}
.do{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:13px 14px;border-radius:13px;border:1px solid rgba(111,211,255,.35);background:rgba(10,108,150,.16);font-size:15px;font-weight:600;color:var(--ice);transition:background-color .3s,border-color .3s}
.do.flash{animation:flash .6s ease}
@keyframes flash{30%{background:rgba(111,211,255,.35);border-color:var(--glow)}}
.do.watch{color:#D8D1FF;border-color:rgba(156,140,255,.45);background:rgba(156,140,255,.12)}
.do-ic{width:28px;height:28px;border-radius:8px;background:rgba(111,211,255,.18);display:grid;place-items:center;flex:none}
.do-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ai-tag{display:inline-block;font-family:var(--f-mono);font-size:10.5px;font-weight:500;color:#140F33;background:var(--violet);padding:1px 6px;border-radius:5px}
.end{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.end p{color:var(--muted);font-size:15px}
.end .btn{width:100%}
.end-note{font-size:13.5px!important}
.end-note b{color:var(--ink)}
.end-note a{color:var(--glow)}
.coach-ctrl{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.chapters{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:14px}
.chapters summary{cursor:pointer;color:var(--muted);list-style:none}
.chapters summary::-webkit-details-marker{display:none}
.chapters summary::after{content:" ▾";font-size:11px}
.chapters ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.chapters button{width:100%;text-align:left;padding:7px 10px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--muted);font-size:14px}
.chapters button:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.chapters button.on{color:var(--ink);background:rgba(111,211,255,.08)}
.chapters button.done::before{content:"✓ ";color:var(--green)}

.nojs{padding:24px;border-radius:16px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--muted)}
.nojs ul{margin:12px 0 18px;padding-left:20px}
.nojs b{color:var(--ink)}
.wt-fine{text-align:center;font-size:13px;color:var(--faint);margin:22px auto 56px;max-width:760px}
.wt-fine a{color:var(--muted)}
.wt-ftr{border-top:1px solid var(--line);padding:22px 0;font-size:13px;color:var(--faint)}
.wt-ftr .wt-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wt-ftr a{color:var(--muted);text-decoration:none}

/* Full screen */
.tour:fullscreen{background:var(--bg);padding:18px;grid-template-columns:minmax(0,1fr) 320px;align-items:center;overflow:auto}
.tour:fullscreen .coach{top:0}

@media (max-width:1060px){
  .tour{grid-template-columns:1fr}
  .coach{position:static}
}
@media (max-width:760px){
  .tour{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .stage-col{width:100%}
  .wt-intro p{display:none}
  .wt-intro h1{font-size:30px}
  .coach{order:-1;padding:14px 16px}
  .coach h2{font-size:24px}
  .coach .body{font-size:14px;margin-top:8px}
  .bar{margin:8px 0 12px}
  .do{margin-top:12px;padding:10px 12px;font-size:14px}
  .coach-ctrl{margin-top:12px}
  .chapters{display:none}
  .wt-wrap{padding:0 14px}
  .wt-intro{padding:20px 0 14px}
  .wt-intro p{font-size:15px}
  .stage{border-radius:12px}
  .screen-chrome{height:30px}
  .coach{padding:18px}
  .fs-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}