/* Install guide (/guide/): step rail, step layout and animated scenes.
   Scenes: base CSS is the final state, keyframes hold only the start state (fill both).
   Delays come from w* classes (--d), durations from l* classes (--td). No inline styles (CSP). */

.gd-hero .lead { margin-inline: auto; }
.gd-hero .cta-row { justify-content: center; margin-top: 8px; }

/* What you need */
.gd-need { list-style: none; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gd-need li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 4px; align-content: start; }
.gd-need .ic { width: 18px; height: 18px; color: var(--text-2); margin-bottom: 8px; }
.gd-need b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.gd-need span { font-size: 13px; line-height: 20px; color: var(--text-3); }

/* Layout: sticky rail + steps */
.gd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.gd-rail { display: none; }
.gd-steps { display: grid; gap: clamp(72px, 10vw, 128px); }

@media (min-width: 1100px) {
  .gd-layout { grid-template-columns: 196px minmax(0, 1fr); gap: 56px; }
  .gd-rail { display: block; position: sticky; top: 96px; align-self: start; }
}
.gd-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.gd-rail ol::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.gd-rail a { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; line-height: 18px; color: var(--text-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.gd-rail a:hover { color: var(--text); }
.gd-rail .wz-mark { flex: none; color: var(--text-3); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.gd-rail a.is-done .wz-mark { color: var(--ok); border-color: rgba(95, 191, 138, .45); }
.gd-rail a.is-on { color: var(--text); }
.gd-rail a.is-on .wz-mark { color: var(--canvas); background: var(--text); border-color: var(--text); }
.gd-rail-note { margin: 24px 0 0; font-size: 12px; line-height: 18px; color: var(--text-3); }
.gd-rail-note a { display: inline; padding: 0; font-size: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* One step */
.gd-step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 56px); align-items: center; scroll-margin-top: 96px; }
.gd-text { display: grid; gap: 14px; align-content: start; }
.gd-text .kicker { display: flex; align-items: center; gap: 10px; }
.gd-text .kicker .wz-mark { color: var(--text); }
.gd-h { font-size: 28px; line-height: 34px; letter-spacing: -.015em; font-weight: 600; color: var(--text); text-wrap: balance; }
.gd-text > p { font-size: 15px; line-height: 24px; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
.gd-text strong { color: var(--text); font-weight: 600; }
.gd-tips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.gd-tips li { position: relative; padding-left: 18px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.gd-tips li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.gd-tips .soon { color: var(--text-3); }
.gd-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.gd-path li { padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
.gd-path li + li::before { content: "→"; margin: 0 8px 0 -2px; color: var(--text-3); }
.gd-path li + li { border: 0; background: none; padding-left: 0; }
.gd-path li + li span { display: inline-block; padding: 4px 9px; margin: -4px 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }

/* Copy line */
.gd-copyline { display: flex; align-items: center; gap: 8px; max-width: 460px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.gd-copyline code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; color: var(--text); overflow-wrap: anywhere; }
.gd-copybtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font: 500 12px/1 var(--font-sans); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.gd-copybtn:hover { color: var(--text); border-color: var(--text-3); }
.gd-copybtn .ic { width: 13px; height: 13px; }
.gd-copybtn.is-copied { color: var(--ok); border-color: rgba(95, 191, 138, .45); }
.gd-copylabel { font-size: 12px; line-height: 16px; color: var(--text-3); margin-top: 4px; }

/* Troubleshooting + end */
.gd-help { max-width: 760px; margin-inline: auto; }
.gd-end { max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); display: grid; gap: 14px; justify-items: center; text-align: center; }
.gd-end .cta-row { justify-content: center; }
.gd-end .h2 { text-wrap: balance; }

@media (max-width: 960px) {
  .gd-step { grid-template-columns: minmax(0, 1fr); }
  .gd-need { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .gd-need { grid-template-columns: minmax(0, 1fr); }
  .gd-h { font-size: 24px; line-height: 30px; }
}

/* ---------- Scene frame ---------- */
.sc { margin: 0; display: grid; gap: 10px; }
.sc-win { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.sc-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.sc-bar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); flex: none; }
.sc-url { margin-left: 10px; flex: 1; min-width: 0; max-width: 340px; height: 22px; padding: 0 10px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); font: 11px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.sc-url .ic { width: 10px; height: 10px; flex: none; margin-right: 6px; color: var(--ok); }
.sc-url b { font-weight: 400; color: var(--text-2); }
.sc-body { position: relative; min-height: 300px; padding: 20px; display: grid; gap: 12px; align-content: start; font-size: 13px; line-height: 18px; color: var(--text-2); }
.sc-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.sc-replay { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--text-3); font: 500 12px/1 var(--font-sans); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sc-replay:hover { color: var(--text); border-color: var(--line-strong); }
.sc-replay .ic { width: 12px; height: 12px; }

/* Scene parts */
.sc-label { font: 500 10.5px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sc-h { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text); }
.sc-row { display: flex; align-items: center; gap: 8px; }
.sc-row.between { justify-content: space-between; }
.sc-stack { display: grid; }
.sc-stack > * { grid-area: 1 / 1; }
.sc-field { position: relative; flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--canvas); font-family: var(--font-mono); font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; }
.sc-field.is-plain { flex: none; border-color: var(--line); color: var(--text-2); }
.sc-caret { width: 1px; height: 16px; margin-left: 2px; background: var(--text); animation: gd-blink 1s steps(1) infinite; }
.sc-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: var(--r-md); background: var(--text); color: var(--canvas); font-weight: 600; font-size: 13px; white-space: nowrap; justify-self: start; }
.sc-btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
.sc-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.sc-ok { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.sc-ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(95, 191, 138, .18); flex: none; }
.sc-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.sc-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ticks li { padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 11.5px; line-height: 16px; color: var(--text-2); }
.sc-prog { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sc-prog > i { display: block; height: 100%; background: var(--ember); transform-origin: left center; }
.sk { display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); }
.sk.w40 { width: 40%; } .sk.w60 { width: 60%; } .sk.w80 { width: 80%; } .sk.w25 { width: 25%; }
.sk.tall { height: 14px; }
.sc-toast { justify-self: start; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.sc-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 12px; color: var(--text-2); justify-self: start; }
.sc-pill.pro { color: var(--text); }
.sc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); flex: none; }

/* Cursor + click ripple (inside the clicked element) */
.sc-cursor { position: absolute; right: 8px; bottom: -14px; width: 20px; height: 20px; z-index: 3; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.sc-ring { position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }

/* Scene 1: domain + plan */
.sc-price { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* Scene 2: hosting panel */
.sc-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 300px; }
.sc-side { display: grid; align-content: start; gap: 2px; padding: 14px 8px; border-right: 1px solid var(--line); background: var(--surface-2); }
.sc-side span { padding: 6px 8px; border-radius: var(--r-sm); font-size: 12px; color: var(--text-3); }
.sc-side .on { background: var(--surface-3); color: var(--text); }
.sc-side .sub { padding-left: 18px; color: var(--text); }
.sc-main { padding: 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.sc-select { position: relative; width: 168px; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--canvas); }
.sc-roll { height: 38px; overflow: hidden; }
.sc-roll > span { display: grid; transform: translateY(-114px); }
.sc-roll b { height: 38px; display: flex; align-items: center; font: 500 13px/1 var(--font-mono); color: var(--text); }
.sc-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); }

/* Scene 3: app installer */
.sc-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-app { display: grid; gap: 8px; justify-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: 12px; color: var(--text); }
.sc-app.is-pick { border-color: var(--line-strong); box-shadow: 0 0 0 1px var(--text-3); }
.sc-app .sk { width: 70%; }
.sc-logo { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--text); font: 700 13px/1 var(--font-serif); color: var(--text); }
.sc-logo.ghost { border-color: var(--surface-3); background: var(--surface-3); }

/* Scene 4: WordPress admin */
.sc-wp { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 300px; }
.sc-wp .sc-side { background: #0c0c0c; }
.sc-drop { display: grid; place-items: center; gap: 10px; min-height: 96px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); text-align: center; color: var(--text-3); font-size: 12px; }
.sc-zip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-3); color: var(--text); font: 500 12px/1 var(--font-mono); }
.sc-zip .ic { width: 14px; height: 14px; }

/* Scene 5: Studio */
.sc-belo { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 12px; color: var(--text); background: var(--surface-3); }
.sc-studio { display: grid; grid-template-rows: auto 1fr; min-height: 300px; }
.sc-stbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text); }
.sc-stbar .sc-row { gap: 6px; }
.sc-page { position: relative; padding: 28px 22px; display: grid; gap: 12px; align-content: start; }
.sc-edit { position: relative; justify-self: start; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; color: var(--text); padding: 2px 4px; margin: -2px -4px; }
.sc-sel { position: absolute; inset: 0; border: 1.5px solid var(--text); border-radius: var(--r-xs); pointer-events: none; }
.sc-tool { position: absolute; left: 0; top: -40px; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8); }
.sc-tool span { min-width: 26px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-xs); font-size: 12px; color: var(--text-2); }
.sc-tool span:first-child { background: var(--surface-3); color: var(--text); font-weight: 700; }
.sc-hint { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }

/* Scene 6: licence */
.sc-meter { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sc-meter > i { display: block; height: 100%; width: 100%; background: var(--ember); transform-origin: left center; transform: scaleX(.3333); }
.mono { font-family: var(--font-mono); }

/* Scene 7: live site */
.sc-site { padding: 20px 22px 24px; display: grid; gap: 14px; align-content: start; min-height: 300px; }
.sc-site-nav { display: flex; align-items: center; justify-content: space-between; }
.sc-site-nav .sc-row span { width: 34px; }
.sc-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--text); }
.sc-site h3 { margin: 10px 0 0; font-size: 24px; line-height: 30px; letter-spacing: -.015em; font-weight: 600; color: var(--text); }
.sc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.sc-cards i { height: 64px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.sc-cta { width: 104px; height: 28px; border-radius: var(--r-md); background: var(--text); }
.sc-live { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid rgba(95, 191, 138, .45); border-radius: var(--r-pill); background: rgba(10, 22, 15, .9); color: var(--text); font-size: 12px; font-weight: 600; }
.sc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: gd-pulse 2s var(--ease-out) 2s infinite; }

@media (max-width: 520px) {
  .sc-panel, .sc-wp { grid-template-columns: minmax(0, 1fr); }
  .sc-panel .sc-side, .sc-wp .sc-side { display: none; }
  .sc-body { padding: 16px; }
  .sc-edit, .sc-site h3 { font-size: 20px; line-height: 26px; }
}

/* ---------- Motion ---------- */
.a-in   { animation: gd-in .5s var(--ease-out) var(--d, 0s) both; }
.a-pop  { animation: gd-pop .45s var(--ease-out) var(--d, 0s) both; }
.a-out  { animation: gd-out .2s ease-in var(--d, 0s) both; }
.a-fly  { animation: gd-fly .8s var(--ease-out) var(--d, 0s) both; }
.a-press{ animation: gd-press .3s ease var(--d, 0s) both; }
.a-fill { animation: gd-fill var(--td, 1s) cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
.a-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: gd-type var(--td, 1.2s) steps(var(--n, 12)) var(--d, 0s) both; }
.a-roll { animation: gd-roll var(--td, 1.4s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.sc-cursor.a-cur { animation: gd-cursor 1s var(--ease-out) var(--d, 0s) both; }
.sc-ring.a-ring  { animation: gd-ring .6s ease-out var(--d, 0s) both; }
.t12 { width: 12ch; --n: 12; }
.t19 { width: 19ch; --n: 19; }

@keyframes gd-in   { from { opacity: 0; transform: translateY(8px); } }
@keyframes gd-pop  { from { opacity: 0; transform: scale(.92); } }
@keyframes gd-out  { to { opacity: 0; visibility: hidden; } }
@keyframes gd-fly  { from { opacity: 0; transform: translate(-48px, 56px) rotate(-8deg); } }
@keyframes gd-press{ 50% { transform: scale(.95); } }
@keyframes gd-fill { from { transform: scaleX(0); } }
@keyframes gd-type { from { width: 0; } }
@keyframes gd-roll { from { transform: translateY(0); } }
@keyframes gd-blink{ 50% { opacity: 0; } }
@keyframes gd-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes gd-pulse{ 0% { box-shadow: 0 0 0 0 rgba(95, 191, 138, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(95, 191, 138, 0); } }
@keyframes gd-cursor {
  0%   { opacity: 0; transform: translate(64px, 52px); }
  20%  { opacity: 1; }
  72%  { opacity: 1; transform: translate(0, 0) scale(1); }
  80%  { transform: translate(0, 0) scale(.82); }
  88%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* Not started until scrolled into view (JS); replay resets. */
.js-anim .sc:not(.is-play) * { animation-play-state: paused !important; }
.sc.is-reset * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sc * { animation: none !important; }
  .sc .a-out, .sc-caret, .sc-replay { display: none !important; }
  .gd-rail a, .gd-rail .wz-mark { transition: none; }
}

/* Delays (seconds × 10) and durations */
.w0{--d:0s} .w1{--d:0.1s} .w2{--d:0.2s} .w3{--d:0.3s} .w4{--d:0.4s} .w5{--d:0.5s} .w6{--d:0.6s} .w7{--d:0.7s} .w8{--d:0.8s} .w9{--d:0.9s}
.w10{--d:1s} .w11{--d:1.1s} .w12{--d:1.2s} .w13{--d:1.3s} .w14{--d:1.4s} .w15{--d:1.5s} .w16{--d:1.6s} .w17{--d:1.7s} .w18{--d:1.8s} .w19{--d:1.9s}
.w20{--d:2s} .w21{--d:2.1s} .w22{--d:2.2s} .w23{--d:2.3s} .w24{--d:2.4s} .w25{--d:2.5s} .w26{--d:2.6s} .w27{--d:2.7s} .w28{--d:2.8s} .w29{--d:2.9s}
.w30{--d:3s} .w31{--d:3.1s} .w32{--d:3.2s} .w33{--d:3.3s} .w34{--d:3.4s} .w35{--d:3.5s} .w36{--d:3.6s} .w37{--d:3.7s} .w38{--d:3.8s} .w39{--d:3.9s}
.w40{--d:4s} .w41{--d:4.1s} .w42{--d:4.2s} .w43{--d:4.3s} .w44{--d:4.4s} .w45{--d:4.5s} .w46{--d:4.6s} .w47{--d:4.7s} .w48{--d:4.8s} .w49{--d:4.9s}
.w50{--d:5s} 
.l6{--td:0.6s} .l8{--td:0.8s} .l10{--td:1s} .l12{--td:1.2s} .l14{--td:1.4s} .l16{--td:1.6s} .l20{--td:2s} .l21{--td:2.1s}