/* ===== Setup guide pages ===== */
.guide-hero .wrap{grid-template-columns:1.15fr .85fr;align-items:start}
.guide-hero h1{font-size:clamp(2rem,4.4vw,3.3rem)}
.crumbs{font-size:.9rem;color:var(--text-3);margin-bottom:16px;font-weight:700}
.crumbs a{color:var(--text-2)}
.meta-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.meta-pills li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--pill);background:var(--surface);border:1.5px solid var(--line-2);font-weight:800;font-size:.9rem}
.meta-pills svg{width:18px;height:18px;color:var(--orange)}
.before{background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-lg);padding:26px 28px;animation:rise .9s var(--ease) .15s both}
.before h3{margin-bottom:8px}
.before p{color:var(--text-2)}
.before .checks{margin-bottom:0}
.before .checks li{font-weight:600}

/* steps */
.stepc-list{display:grid;gap:14px;counter-reset:none}
.stepc{display:grid;grid-template-columns:44px 1fr;gap:18px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px 24px}
.stepc .num{margin:0}
.stepc h3{margin-bottom:6px}
.stepc p{color:var(--text-2);margin:0}
.stepc img{margin-top:16px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);max-width:620px;width:100%;height:auto}
@media (max-width:560px){.stepc{grid-template-columns:1fr}}

/* callouts */
.callouts{display:grid;gap:10px;margin-bottom:24px}
.callout{background:var(--surface-2);border-left:4px solid var(--orange);border-radius:var(--r-sm);padding:14px 18px;color:var(--text-2);margin-top:18px}
.callouts .callout{margin-top:0}
.callout b{color:var(--text)}
.callout.small{font-size:.95rem;padding:12px 16px}
.callout .btn{display:inline-flex}

/* app cards */
.appcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:860px){.appcards{grid-template-columns:1fr}}
.appcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.appcard header{display:flex;align-items:center;gap:14px}
.appicon{width:56px;height:56px;border-radius:14px;flex:none;object-fit:cover}
.appicon.letter{display:grid;place-items:center;background:var(--orange);color:var(--orange-ink);font-family:var(--display);font-weight:800;font-size:1.6rem}
.appcard h3{margin:0 0 4px;font-size:1.25rem}
.apptag{display:inline-block;padding:3px 10px;border-radius:var(--pill);font-size:.78rem;font-weight:800;letter-spacing:.03em}
.apptag.free{background:var(--orange-soft);color:var(--orange)}
.apptag.paid{background:var(--yellow-soft);color:var(--yellow)}
.appshot{width:100%;height:auto;border-radius:var(--r-sm);border:1.5px solid var(--line-2)}
.appcard p{margin:0;color:var(--text-2)}
.appcard .callout{margin-top:0}
.appactions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.codechip{display:inline-flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:var(--pill);background:var(--bg);border:1.5px solid var(--line-2);font-weight:700;font-size:.92rem;color:var(--text-2)}
.codechip b{color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;letter-spacing:.04em}
.codechip button{border:0;background:var(--orange);color:var(--orange-ink);font:inherit;font-weight:800;padding:6px 12px;border-radius:var(--pill);cursor:pointer}
.codechip button.done{background:var(--text);color:var(--bg)}
.jump{width:100%;font-weight:800;font-size:.92rem}

/* login blocks */
.logins{display:grid;gap:16px}
.loginblock{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px 26px;scroll-margin-top:96px}
.loginblock h3{margin-bottom:10px}
.loginblock ol{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--text-2)}
.loginblock li::marker{color:var(--orange);font-weight:800}
.loginblock .callout{margin-top:14px}

/* chips as links */
.chips a{text-decoration:none!important}
.chips a:hover span{border-color:var(--orange)}

/* collapsible guide blocks */
.gfold{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.gfold > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 28px;gap:16px;align-items:center;padding:18px 22px}
.gfold > summary::-webkit-details-marker{display:none}
.gfold > summary h3{margin:0;font-size:1.15rem}
.gfold > summary .sub{display:block;color:var(--text-3);font-size:.9rem;font-weight:700;margin-top:2px}
.gfold > summary .tog{width:28px;height:28px;border-radius:50%;background:var(--orange-soft);position:relative}
.gfold > summary .tog::before,.gfold > summary .tog::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2.4px;border-radius:2px;background:var(--orange)}
.gfold > summary .tog::after{transform:rotate(90deg);transition:transform .25s var(--ease)}
.gfold[open] > summary .tog::after{transform:rotate(0)}
.gfold[open] > summary{border-bottom:1px solid var(--line)}
.gfold .num{margin:0;width:44px;height:44px}
.gfold-body{padding:18px 22px 22px 82px;color:var(--text-2)}
.gfold-body p{margin:0 0 12px}
@media (max-width:560px){.gfold > summary{grid-template-columns:36px 1fr 28px;padding:16px}.gfold .num{width:36px;height:36px;font-size:1rem}.gfold-body{padding:16px}}
/* uniform images */
.gimg{display:block;width:100%;max-width:640px;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:var(--r-sm);border:1.5px solid var(--line-2);margin-top:14px;background:var(--bg)}
.appcard .appshot{aspect-ratio:16/9;object-fit:cover;object-position:top}
.appcard header .appicon{width:44px;height:44px;border-radius:12px}
.appcard header{grid-template-columns:44px 1fr 28px}
.gfold-body .appshot{margin-top:0;margin-bottom:14px}
.appactions{padding-top:12px}
.appcards{grid-template-columns:1fr}