/* /start — setup page (the QR code in every box lands here) */
.narrow { max-width: 720px; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.page-start .nav-inner, .page-support .nav-inner { max-width: 744px; }
.start { padding: 110px 0 40px; }
.start-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 28px; }
.start-hero .h-lg { font-size: clamp(40px, 8vw, 68px); }
.start-face { width: 112px; height: 112px; border-radius: 50%; padding: 6px; background: radial-gradient(closest-side, #1f1a2b, #0d0b13); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -16px rgba(184, 243, 75, .4); }
.start-face .blink-face { border-radius: 50%; }
.start-progress { width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 6px; }
.start-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime); transition: width .8s var(--ease); }

.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.s-card {
  position: relative; border-radius: var(--r-md); padding: 26px 24px 24px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background .4s, opacity .4s;
}
.s-card.current { box-shadow: inset 0 0 0 1.5px rgba(184, 243, 75, .55), 0 30px 60px -30px rgba(184, 243, 75, .25); }
.s-card.done { opacity: .62; }
.s-card.done .s-num { background: var(--lime); color: #0b0a05; font-size: 0; }
.s-card.done .s-num::before { content: "\2713"; font-size: 16px; }
.s-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.s-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 600; background: rgba(255,255,255,.08); transition: background .3s; }
.s-card h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.s-card p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.s-card p + p, .s-card .s-visual + p, .s-card .btn + p, .s-card .try + p { margin-top: 14px; }
.s-card .s-tip { font-size: 14px; color: var(--dim); }
.s-wide { width: 100%; margin-top: 18px; }
.s-done {
  margin-top: 18px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 560;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s;
}
.s-done:hover { background: rgba(255,255,255,.12); }
.s-card.done .s-done { background: transparent; color: var(--lime); box-shadow: none; padding: 0; }
.s-card.done .s-done::before { content: "\2713  "; }

.s-visual { margin-top: 18px; border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); height: 120px; display: flex; align-items: center; justify-content: center; padding: 0 20px; overflow: hidden; }
.plug .mini-buddy { flex: none; width: 74px; height: 74px; border-radius: 50%; padding: 4px; background: #0d0b13; box-shadow: inset 0 0 0 1px var(--line-2); }
.plug .mini-buddy img { border-radius: 50%; filter: brightness(.35) saturate(.4); }
.plug .cable { flex: 1; max-width: 240px; height: 40px; color: #d9d3e3; }
.plug .cable-line { stroke-dasharray: 260; stroke-dashoffset: 260; }
.plug .usb { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; padding: 10px; border-radius: 8px; background: #2a2433; color: var(--muted); }
.s-card.current .plug .cable-line, .s-card.done .plug .cable-line { animation: plug 2.6s var(--ease) infinite; }
.s-card.current .plug .mini-buddy img, .s-card.done .plug .mini-buddy img { animation: wake 2.6s var(--ease) infinite; }
@keyframes plug { 0% { stroke-dashoffset: 260; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes wake { 0%, 38% { filter: brightness(.35) saturate(.4); } 50%, 100% { filter: none; } }

.pair { gap: 14px; }
.pair-screen { width: 92px; height: 92px; border-radius: 50%; background: #0d0b13; box-shadow: 0 0 0 4px #1f1a2b, inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pair-screen span, .pair-phone span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.pair-screen b { font-family: var(--mono); font-size: 15px; color: var(--lime); }
.pair-dots { display: flex; gap: 6px; }
.pair-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); opacity: .2; animation: pd 1.4s infinite; }
.pair-dots i:nth-child(2) { animation-delay: .2s; }
.pair-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pd { 30% { opacity: 1; } }
.pair-phone { width: 64px; height: 100px; border-radius: 14px; background: #0d0b13; box-shadow: inset 0 0 0 2px #2a2433; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pair-phone b { font-family: var(--mono); font-size: 11px; color: var(--text); }

.try { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.try > span { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chip-say { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; transition: background .3s, box-shadow .3s; }
.chip-say:hover, .chip-say.on { background: rgba(184,243,75,.14); box-shadow: inset 0 0 0 1px rgba(184,243,75,.4); }

.all-set { position: relative; text-align: center; padding: 56px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.all-set[hidden] { display: none; }
.confetti { position: absolute; inset: -40px 0 0; pointer-events: none; }
.confetti i { position: absolute; top: 40%; left: 50%; width: 8px; height: 12px; border-radius: 2px; animation: conf 1.6s var(--ease) forwards; }
@keyframes conf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

.tips { padding-top: 64px; }
.tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.tip { display: flex; gap: 16px; padding: 22px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tip-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #0b0a05; background: var(--c); overflow: hidden; }
.tip-ico img { width: 100%; height: 100%; }
.tip h3 { margin: 2px 0 6px; font-size: 18px; letter-spacing: -.02em; font-weight: 600; }
.tip p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 600px) { .tip-grid { grid-template-columns: 1fr; } }
.before-drive { margin-top: 40px; padding: 22px 24px; border-radius: var(--r-md); background: rgba(255, 178, 30, .07); box-shadow: inset 0 0 0 1px rgba(255, 178, 30, .25); }
.before-drive h3 { margin: 0 0 6px; font-size: 16px; color: var(--amber); font-weight: 600; }
.before-drive p { margin: 0; color: var(--muted); font-size: 15px; }
.start-help { padding-top: 64px; }
.start-help .faq { margin-top: 14px; }
.foot-small { padding: 40px 0 32px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90; padding: 12px 18px; border-radius: 999px; background: var(--text); color: #0b0a10; font-size: 14.5px; font-weight: 520; opacity: 0; transition: opacity .3s, transform .5s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* support page */
.support-hero { padding: 120px 0 20px; display: flex; flex-direction: column; gap: 18px; }
.support-hero .h-lg { font-size: clamp(42px, 8vw, 72px); }
.help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 60px; }
.help-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, transform .5s var(--ease); }
.help-card:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.help-card b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.help-card span { color: var(--muted); font-size: 15px; }
.help-card em { font-style: normal; color: var(--lime); font-size: 14.5px; margin-top: 8px; }
@media (max-width: 600px) { .help-cards { grid-template-columns: 1fr; } }
.faq-group { margin-bottom: 50px; }
.faq-group h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin: 0 0 4px; }