.guide-page .site-intro { display: none; }
.guide-page .site-header nav a.is-current { color: var(--accent); }
.guide-main { width: min(var(--max), calc(100% - 40px)); margin: auto; }

.guide-hero { min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr); align-items: center; gap: 76px; padding: 74px 0 88px; }
.guide-hero > *, .guide-step > *, .step-copy { min-width: 0; }
.guide-hero h1 { max-width: 800px; }
.guide-hero h1 em { color: var(--accent); font-style: normal; }
.guide-lead { max-width: 650px; color: #b5c1cb; font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.7; }
.ready-card { border: 1px solid rgba(71, 215, 172, .25); border-radius: 26px; background: radial-gradient(circle at 90% 0, rgba(71, 215, 172, .12), transparent 19rem), linear-gradient(150deg, #131e28, #0d151c); padding: 25px; box-shadow: 0 30px 70px rgba(0, 0, 0, .27); }
.ready-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.ready-card-head img { border-radius: 13px; }
.ready-card-head div { display: grid; }
.ready-card-head small { color: var(--accent); font-size: .6rem; font-weight: 850; letter-spacing: .15em; }
.ready-card-head strong { margin-top: 3px; font-size: .92rem; }
.ready-card-head > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #061711; font-weight: 900; }
.ready-card ol { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ready-card li { display: flex; align-items: center; gap: 11px; color: #c4ced6; font-size: .84rem; line-height: 1.45; }
.ready-card li b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(71, 215, 172, .24); border-radius: 8px; color: var(--accent); font: 750 .64rem/1 ui-monospace, monospace; }

.before-start { display: grid; grid-template-columns: auto 1fr; gap: 17px; margin-bottom: 26px; padding: 22px 24px; border: 1px solid #315648; border-radius: 18px; background: rgba(71, 215, 172, .065); }
.notice-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(71, 215, 172, .4); border-radius: 11px; color: var(--accent); font-weight: 900; }
.before-start h2 { margin: 0 0 5px; font-size: 1rem; }
.before-start p { margin: 0; color: var(--muted); font-size: .83rem; }

.step-index { position: sticky; z-index: 35; top: 76px; display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; margin: 0 0 56px; border: 1px solid var(--line); border-radius: 16px; background: rgba(11, 18, 25, .94); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); backdrop-filter: blur(17px); }
.step-index a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 10px; color: var(--muted); font-size: .76rem; font-weight: 800; text-align: center; text-decoration: none; }
.step-index a + a { border-left: 1px solid var(--line); }
.step-index a:hover, .step-index a:focus-visible { background: rgba(71, 215, 172, .08); color: var(--text); }
.step-index span { color: var(--accent); font: 800 .7rem/1 ui-monospace, monospace; }

.guide-step { scroll-margin-top: 150px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); align-items: center; gap: 74px; padding: 90px 0; border-top: 1px solid var(--line); }
.guide-step-reverse .step-copy { order: 2; }
.step-copy { max-width: 570px; }
.step-number { margin-bottom: 13px; color: var(--accent); font: 800 .68rem/1 ui-monospace, monospace; letter-spacing: .15em; }
.guide-step h2, .troubleshooting h2, .guide-support h2 { margin-bottom: 17px; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.05em; }
.step-copy > p:not(.step-number) { color: var(--muted); font-size: .96rem; }
.instruction-list { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.instruction-list li { min-height: 31px; display: flex; align-items: flex-start; gap: 14px; color: #bac5ce; font-size: .9rem; line-height: 1.55; }
.instruction-number { width: 29px; height: 29px; display: grid; flex: 0 0 29px; place-items: center; margin-top: -3px; border: 1px solid rgba(71, 215, 172, .28); border-radius: 9px; background: rgba(71, 215, 172, .07); color: var(--accent); font: 750 .65rem/1 ui-monospace, monospace; }
.samsung-note { margin-top: 25px; padding: 16px 18px; border-left: 2px solid var(--accent); border-radius: 0 13px 13px 0; background: rgba(71, 215, 172, .06); }
.samsung-note strong { color: var(--accent); font-size: .78rem; }
.samsung-note p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }

.phone-sequence { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 13px; }
.single-phone-wrap { display: grid; place-items: center; }
.phone-mock { min-height: 410px; overflow: hidden; border: 7px solid #202c35; border-radius: 31px; background: #0a1117; box-shadow: 0 28px 62px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04); }
.phone-mock::after { display: block; width: 78px; height: 4px; margin: 17px auto 8px; border-radius: 99px; background: #33434f; content: ""; }
.phone-wide { width: min(100%, 390px); min-height: 360px; }
.phone-status { display: flex; justify-content: space-between; padding: 17px 18px 11px; color: #8796a3; font-size: .6rem; font-weight: 800; }
.phone-screen { padding: 15px 14px; }
.phone-screen > small { display: block; margin-bottom: 14px; color: #6f8190; font-size: .53rem; font-weight: 850; letter-spacing: .11em; }
.setting-row, .app-setting, .radio-row { display: flex; align-items: center; gap: 11px; padding: 15px 12px; border-bottom: 1px solid #25323c; }
.setting-row > div, .app-setting > div, .radio-row > div { display: grid; flex: 1; }
.setting-row strong, .app-setting strong, .radio-row strong { font-size: .72rem; }
.setting-row span, .app-setting span, .radio-row small { margin-top: 3px; color: #82919d; font-size: .58rem; }
.setting-row.target { margin-top: 10px; border: 1px solid rgba(71, 215, 172, .36); border-radius: 12px; background: rgba(71, 215, 172, .08); }
.setting-row.target span { color: var(--accent); }
.setting-row.target b { color: var(--accent); font-size: 1.3rem; }
.toggle { width: 35px; height: 20px; flex: none; border-radius: 99px; background: #40505c; }
.toggle::after { display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: #dce3e8; content: ""; transition: transform .2s ease; }
.toggle.on { background: rgba(71, 215, 172, .55); }
.toggle.on::after { transform: translateX(15px); background: var(--accent-soft); }
.sequence-arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); }
.notification-card { padding: 13px; border: 1px solid #2d3b46; border-radius: 14px; background: #141e26; }
.notification-card > div:first-child { display: flex; align-items: center; gap: 10px; }
.notification-card img, .app-setting img { border-radius: 9px; }
.notification-card div div { display: grid; }
.notification-card strong { font-size: .68rem; }
.notification-card span { color: var(--muted); font-size: .55rem; }
.notification-action { width: 100%; margin-top: 14px; border-radius: 9px; background: rgba(71, 215, 172, .13); padding: 10px; color: var(--accent); font-size: .62rem; font-weight: 850; text-align: center; }
.code-preview { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px; border-radius: 9px; background: #0d151c; }
.code-preview span { letter-spacing: .18em; }
.code-preview b { color: var(--accent); font-size: .57rem; }
.permission-ok { display: flex; align-items: center; gap: 11px; margin-top: 36px; padding: 15px; border: 1px solid rgba(71, 215, 172, .27); border-radius: 13px; background: rgba(71, 215, 172, .07); }
.permission-ok > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #061711; font-weight: 900; }
.permission-ok div { display: grid; }
.permission-ok strong { font-size: .7rem; }
.permission-ok small, .screen-hint { color: var(--muted); font-size: .58rem; }
.screen-hint { margin-top: 26px; text-align: center; }
.radio-row > span { width: 17px; height: 17px; border: 1px solid #586a77; border-radius: 50%; }
.radio-row.selected { border: 1px solid rgba(71, 215, 172, .35); border-radius: 12px; background: rgba(71, 215, 172, .07); }
.radio-row.selected > span { border: 5px solid var(--accent); }
.battery-ok { margin-top: 28px; border-radius: 10px; background: rgba(71, 215, 172, .1); padding: 11px; color: var(--accent); font-size: .63rem; font-weight: 850; text-align: center; }
.mini-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(71, 215, 172, .15); color: var(--accent) !important; font-weight: 900; }

.mode-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.mode-guide-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #0e171f; }
.mode-guide-grid article.mode-advanced { border-color: rgba(71, 215, 172, .35); background: rgba(71, 215, 172, .06); }
.mode-guide-grid span { color: var(--accent); font: 800 .65rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.mode-guide-grid h3 { margin: 13px 0 7px; font-size: .98rem; }
.mode-guide-grid p, .inline-note { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.inline-note { margin-top: 14px; padding: 13px 15px; border-left: 2px solid var(--accent); border-radius: 0 11px 11px 0; background: rgba(71, 215, 172, .05); }
.inline-note strong { color: var(--text); }

.app-selection-card { max-width: 470px; width: 100%; justify-self: center; }
.app-guide-row { min-height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.app-guide-row > div { display: grid; }
.app-guide-row strong { font-size: .9rem; }
.app-guide-row small { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.app-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-weight: 900; font-size: .72rem; }
.uber-logo { background: #050505; color: #fff; }
.ninety-logo { background: #fff; color: #e7a900; font-size: 1rem; }
.indrive-logo { background: #b7f219; color: #101b16; font-size: 1rem; }
.selected-box { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 8px; background: rgba(71, 215, 172, .13); color: var(--accent); font-weight: 900; }
.test-pill { max-width: 106px; border-radius: 999px; padding: 7px 10px; background: rgba(71, 215, 172, .13); color: var(--accent); font-size: .58rem; font-weight: 900; line-height: 1.2; letter-spacing: .045em; text-align: center; }
.auto-save-preview { margin-top: 18px; padding: 12px; border-radius: 11px; background: rgba(71, 215, 172, .11); color: var(--accent); font-size: .7rem; font-weight: 850; text-align: center; }

.feature-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature-stack article { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid rgba(71, 215, 172, .22); border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(71, 215, 172, .11), transparent 12rem), #0e171f; }
.feature-stack span { margin-bottom: auto; color: var(--accent); font: 800 .68rem/1.4 ui-monospace, monospace; }
.feature-stack strong { font-size: .98rem; }
.feature-stack small { margin-top: 5px; color: var(--muted); font-size: .74rem; line-height: 1.5; }

.manufacturer-guides { display: grid; gap: 9px; margin-top: 25px; }
.manufacturer-guides details { border: 1px solid var(--line); border-radius: 13px; background: #0e171f; }
.manufacturer-guides summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.manufacturer-guides summary::-webkit-details-marker { display: none; }
.manufacturer-guides summary span { font-size: .86rem; font-weight: 800; }
.manufacturer-guides summary b { color: var(--accent); font-size: .62rem; letter-spacing: .05em; text-align: right; text-transform: uppercase; }
.manufacturer-guides ol { display: grid; gap: 8px; margin: 0; padding: 0 22px 17px 38px; color: var(--muted); font-size: .8rem; line-height: 1.5; }

.finish-note { display: flex; gap: 13px; margin-top: 28px; padding: 17px; border: 1px solid rgba(71, 215, 172, .25); border-radius: 14px; background: rgba(71, 215, 172, .06); }
.finish-note > span { width: 31px; height: 31px; display: grid; flex: none; place-items: center; border-radius: 50%; background: var(--accent); color: #061711; font-weight: 900; }
.finish-note strong { font-size: .8rem; }
.finish-note p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.rules-card { padding: 24px; border: 1px solid rgba(71, 215, 172, .25); border-radius: 24px; background: linear-gradient(150deg, #132029, #0d161d); box-shadow: 0 28px 62px rgba(0, 0, 0, .28); }
.rules-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.rules-head > div { display: grid; }
.rules-head small { color: var(--accent); font-size: .56rem; font-weight: 850; letter-spacing: .12em; }
.rules-head strong { margin-top: 8px; font-size: 1.15rem; }
.rules-head strong span { color: var(--muted); font-weight: 500; }
.status-pill { align-self: start; border-radius: 99px; background: rgba(71, 215, 172, .14); padding: 6px 10px; color: var(--accent); font-size: .55rem; font-weight: 900; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; border-bottom: 1px solid var(--line); }
.rule-row div { display: grid; }
.rule-row strong { font-size: .8rem; }
.rule-row span { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.save-preview { margin-top: 22px; border-radius: 11px; background: var(--accent); padding: 13px; color: #061711; font-size: .74rem; font-weight: 900; text-align: center; }

.troubleshooting { padding: 100px 0; border-top: 1px solid var(--line); }
.troubleshooting .section-heading > p:last-child { color: var(--muted); }
.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.solution-grid article { min-height: 190px; display: grid; grid-template-rows: auto auto 1fr; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #121d26, #0d151c); }
.solution-grid article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(71, 215, 172, .32); border-radius: 11px; background: rgba(71, 215, 172, .08); color: var(--accent); font: 850 .82rem/1 ui-monospace, monospace; }
.solution-grid h3 { margin: 18px 0 9px; font-size: 1.08rem; line-height: 1.3; }
.solution-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.58; }
.guide-support { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 96px; padding: 42px; border: 1px solid rgba(71, 215, 172, .27); border-radius: 26px; background: radial-gradient(circle at 90% 0, rgba(71, 215, 172, .13), transparent 22rem), #0f1a21; }
.guide-support > div { max-width: 740px; }
.guide-support h2 { margin-bottom: 10px; }
.guide-support p:last-child { margin: 0; color: var(--muted); }
.guide-support .button { flex: none; }

@media (max-width: 960px) {
  .guide-hero, .guide-step { grid-template-columns: 1fr; gap: 46px; }
  .guide-hero { padding-top: 58px; }
  .guide-step-reverse .step-copy { order: 0; }
  .step-copy { max-width: 720px; }
  .phone-sequence { width: min(100%, 640px); justify-self: center; }
  .single-phone-wrap { justify-items: center; }
}

@media (max-width: 700px) {
  .guide-main { width: min(100% - 28px, var(--max)); }
  .guide-hero, .guide-step { width: 100%; }
  .guide-lead, .step-copy > p, .instruction-list span, .inline-note { overflow-wrap: anywhere; }
  .guide-hero { min-height: auto; padding: 48px 0 62px; }
  .guide-hero h1 { font-size: clamp(2.85rem, 14vw, 4.2rem); }
  .step-index { top: 70px; grid-template-columns: repeat(6, minmax(88px, 1fr)); overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 1px; scroll-snap-type: inline proximity; margin-bottom: 22px; }
  .step-index { scrollbar-width: none; }
  .step-index::-webkit-scrollbar { display: none; }
  .step-index a { min-width: 88px; flex-direction: column; gap: 5px; padding-inline: 8px; font-size: .66rem; line-height: 1.2; scroll-snap-align: start; }
  .guide-step { scroll-margin-top: 145px; gap: 34px; padding: 66px 0; }
  .guide-step h2, .troubleshooting h2, .guide-support h2 { font-size: clamp(2.05rem, 11vw, 3.1rem); }
  .phone-sequence { grid-template-columns: 1fr; }
  .sequence-arrow { transform: rotate(90deg); }
  .phone-mock { width: min(100%, 330px); min-height: 370px; }
  .mode-guide-grid, .feature-stack { grid-template-columns: 1fr; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-grid article { min-height: 0; padding: 22px; }
  .guide-support { align-items: stretch; flex-direction: column; margin-bottom: 70px; padding: 30px 24px; }
  .guide-support .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .toggle::after { transition: none; }
}