/* Guide-specific layout. Navigation, footer and theme tokens stay shared. */
.guide-redesign .wrap { width:min(1180px,calc(100% - 48px)); max-width:1180px; }
.guide-redesign .guide-heading { font-size: clamp(52px, 7vw, 82px); letter-spacing: -.055em; line-height: 1.05; }
.guide-redesign .guide-lede { max-width: 650px; font-size: 19px; }
.guide-redesign .guide-label { font-size:13px; color:var(--text-2); margin:0 0 24px; }
html[data-theme="dark"] body .walkthrough .step details[open] .expand { color:#8aaaff; }
.guide-redesign .guide-preparation, .guide-redesign .guide-contents { max-width: 780px; }
.guide-redesign .chapter:not(.walkthrough), .guide-redesign .help { max-width: 780px; margin-inline: auto; }
.walkthrough .section-top { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:36px; }
.walkthrough .section-top h2 { margin:0; font-size:28px; letter-spacing:-.04em; }
.walkthrough .section-top p { margin:0; color:var(--text-2); font-size:13px; }
.walkthrough .walk-layout { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:64px; align-items:start; }
.walkthrough .steps { display:block; counter-reset:none; }
.walkthrough .step { padding:26px 0 50px; margin:0; border:0; border-top:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; scroll-margin-top:0; }
.walkthrough .step::before { display:none; }
.walkthrough summary { list-style:none; position:relative; cursor:pointer; padding-right:36px; }
.walkthrough summary::-webkit-details-marker { display:none; }
.walkthrough summary:focus-visible, .walkthrough button:focus-visible { outline:2px solid var(--brand); outline-offset:6px; }
.walkthrough .step-label { display:block; color:var(--text-2); font-size:12px; margin-bottom:16px; }
.walkthrough .step-title { display:block; font-size:clamp(25px,2.5vw,34px); font-weight:550; letter-spacing:-.04em; line-height:1.16; }
.walkthrough .expand { right:0; top:43px; }
.walkthrough details[open] .step-label, .walkthrough details[open] .step-title { color:var(--brand); }
[data-theme="dark"] .walkthrough details[open] .step-label, [data-theme="dark"] .walkthrough details[open] .step-title { color:#8aaaff; }
.walkthrough .step-body { padding-top:22px; max-width:390px; }
.walkthrough .step-body p { color:var(--text-2); font-size:15px; line-height:1.75; margin:0 0 16px; }
.walkthrough .step-body .hint { border-left:2px solid var(--border); padding-left:14px; font-size:13px; margin-top:24px; }
.walkthrough .mobile-media { display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:4/3; padding:26px; margin-top:28px; background:var(--surface); border:1px dashed var(--border); border-radius:24px; text-align:center; }
.walkthrough .mobile-media span { color:var(--text-2); font-size:12px; }
.walkthrough .mobile-media p { margin:12px 0 0; max-width:240px; color:var(--text-1); }
.walkthrough .media-column { display:none; }
.walkthrough .media-stage { background:#1e51e3; color:white; border-radius:26px; padding:30px; display:flex; flex-direction:column; min-height:480px; height:min(65svh,620px); transition:background .3s; }
.walkthrough .media-stage[data-index="1"] { background:#2548b4; }
.walkthrough .media-stage[data-index="2"] { background:#dce6fc; color:#183c89; }
.walkthrough .media-stage[data-index="3"] { background:#173d9c; }
[data-theme="dark"] .walkthrough .media-stage { background:#173eac; }
[data-theme="dark"] .walkthrough .media-stage[data-index="1"] { background:#1c3582; }
[data-theme="dark"] .walkthrough .media-stage[data-index="2"] { background:#1b2b4f; color:#dce6fc; }
[data-theme="dark"] .walkthrough .media-stage[data-index="3"] { background:#142c70; }
.walkthrough .media-top, .walkthrough .media-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; }
.walkthrough .placeholder-label { opacity:.8; }
.walkthrough .media-bottom { justify-content:center; }
.walkthrough .walk-placeholder { display:flex; flex:1; flex-direction:column; justify-content:center; align-items:center; padding:30px; margin:30px 0; border:1px dashed currentColor; border-color:color-mix(in srgb,currentColor 25%,transparent); border-radius:16px; text-align:center; }
.walkthrough .image-mark { width:38px; opacity:.6; margin-bottom:26px; }
.walkthrough .image-mark svg { width:100%; display:block; }
.walkthrough figcaption { max-width:290px; color:inherit; font-size:24px; line-height:1.3; letter-spacing:-.03em; }
.walkthrough figcaption p { color:inherit; opacity:.8; font-size:13px; line-height:1.6; letter-spacing:0; margin:18px 0 0; }
.walkthrough .step-navigation { display:flex; gap:8px; }
.walkthrough .step-navigation button { width:32px; height:32px; border:1px solid currentColor; border-radius:50%; color:inherit; background:transparent; cursor:pointer; font-size:12px; }
.walkthrough .step-navigation button[aria-pressed="true"] { color:#1e51e3; background:#fff; border-color:white; }
.walkthrough .media-footnote { color:var(--text-2); font-size:11px; margin:16px 0 0; text-align:center; }
@media(min-width:821px) {
  .walkthrough-ready .walkthrough .step { min-height:65svh; }
  .walkthrough-ready .walkthrough .mobile-media { display:none; }
  .walkthrough-ready .walkthrough .media-column { display:block; position:sticky; top:120px; }
}
@media(max-width:820px) {
  .guide-redesign .wrap { width:calc(100% - 32px); }
  .walkthrough .walk-layout { display:block; }
  .walkthrough .section-top { display:block; }
  .walkthrough .section-top p { margin-top:12px; }
  .walkthrough .step-title br { display:none; }
  .walkthrough .step-body { max-width:none; }
}
@media(prefers-reduced-motion:reduce) { .walkthrough * { transition:none!important; } }
@media print {
  .walkthrough .walk-layout { display:block; }
  .walkthrough-ready .walkthrough .step { min-height:0; break-inside:avoid; }
  .walkthrough .media-column, .walkthrough .mobile-media { display:none!important; }
}

/* A single introduction, clear topic cards and a continuous mobile walkthrough. */
.guide-redesign .guide-intro { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; margin-bottom:44px; }
.guide-redesign .guide-label { margin-bottom:16px; }
.guide-redesign .guide-heading { margin:0 0 22px; font-size:clamp(44px,5.5vw,72px); line-height:1.02; }
.guide-redesign .guide-lede { margin:0; max-width:48ch; font-size:17px; }
.guide-redesign .guide-preparation { max-width:none; margin:0; padding:26px; border-radius:22px; }
.guide-preparation ul { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:16px 0; list-style:none; }
.guide-preparation li { padding:6px 11px; border:1px solid var(--border); border-radius:9px; font-size:13px; color:var(--text-1); }
.guide-redesign .guide-preparation p { font-size:13px; line-height:1.6; margin-bottom:16px; }
.guide-redesign .preparation-download { display:inline-flex; gap:14px; align-items:center; font-size:14px; font-weight:600; }
.guide-redesign .guide-contents { max-width:none; margin-bottom:64px; }
.guide-redesign .guide-contents > p { color:var(--text-1); font-size:16px; font-weight:650; margin:0 0 18px; }
.guide-redesign .guide-contents ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.guide-redesign .guide-contents li { border:0; min-width:0; }
.guide-redesign .guide-contents a { min-height:96px; height:100%; padding:18px; border:1px solid var(--border); border-radius:17px; background:var(--surface); display:flex; justify-content:space-between; align-items:center; gap:12px; transition:border-color .2s,background .2s,transform .2s; }
.guide-redesign .guide-contents a:hover { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 4%,var(--surface)); text-decoration:none; transform:translateY(-2px); }
.guide-contents .topic-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
.guide-contents .topic-copy strong { color:var(--text-1); font-size:15px; font-weight:600; line-height:1.3; }
.guide-contents .topic-copy > span { color:var(--text-2); font-size:12px; line-height:1.4; }
.guide-contents .topic-arrow { color:var(--text-2); font-size:18px; flex-shrink:0; }
.guide-redesign .guide-topics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:56px 0 0; }
.guide-redesign .guide-topics .chapter { max-width:none; min-width:0; width:100%; margin:0; padding:28px; border:1px solid var(--border); border-radius:22px; background:var(--surface); scroll-margin-top:110px; }
.guide-topics #cross-device,.guide-topics #help { grid-column:1/-1; }
.guide-redesign .guide-topics .chapter > h2 { margin:0; padding:0; border:0; font-size:22px; font-weight:650; letter-spacing:-.03em; }
.guide-topics .chapter-intro { margin:14px 0 20px; max-width:75ch; font-size:14px; }
.guide-topics .chapter-list { padding-left:20px; margin:0 0 20px; max-width:80ch; font-size:14px; }
.guide-topics .chapter-list li { padding-left:5px; margin-bottom:12px; }
.guide-topics .note { margin:20px 0 0; border:0; padding:15px; border-radius:12px; background:var(--bg); }
.guide-topics .note p { font-size:13px; }
.guide-topics #streak > p { font-size:14px; }
.guide-redesign .help { max-width:none; padding:28px; margin-top:20px; border:1px solid var(--border); border-radius:22px; }
.walkthrough .step { scroll-margin-top:110px; }
.walkthrough .step-next { display:none; }
.walkthrough .step .mobile-media { transition:background-color .35s,border-color .35s; }
@media(max-width:1000px) {
 .guide-redesign .guide-contents ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:820px) {
 .guide-redesign .guide-intro { grid-template-columns:1fr; gap:24px; margin-bottom:32px; }
 .guide-redesign .guide-heading { font-size:clamp(42px,9vw,62px); }
 .guide-redesign .guide-lede { font-size:16px; }
 .guide-redesign .guide-preparation { padding:22px; border-radius:20px; }
 .guide-redesign .guide-contents { margin-bottom:44px; }
 .guide-redesign .guide-contents ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .guide-redesign .guide-contents a { min-height:98px; padding:15px; border-radius:16px; }
 .guide-contents .topic-copy strong { font-size:14px; }
 .guide-contents .topic-arrow { font-size:16px; }
 .guide-redesign .guide-topics { grid-template-columns:1fr; gap:16px; margin-top:32px; }
 .guide-redesign .guide-topics .chapter { padding:22px; border-radius:20px; }
 .guide-redesign .guide-topics .chapter > h2 { font-size:21px; }
 .walkthrough .step { margin:0 0 16px; padding:22px; border:1px solid var(--border); border-radius:22px; background:var(--surface); transition:border-color .3s; }
 .walkthrough .step.active { border-color:color-mix(in srgb,var(--brand) 50%,var(--border)); }
 .walkthrough .step-body { padding-top:18px; }
 .walkthrough .step-body p { font-size:15px; }
 .walkthrough .step-title { font-size:clamp(24px,6.4vw,30px); }
 .walkthrough .step-label { margin-bottom:12px; }
 .walkthrough .expand { top:37px; }
 .walkthrough .step-next { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-top:22px; padding:15px 0 0; border-top:1px solid var(--border); font-size:13px; font-weight:600; text-decoration:none; }
 .walkthrough .mobile-media { margin-top:22px; border:1px dashed color-mix(in srgb,var(--brand) 25%,var(--border)); border-radius:17px; background:color-mix(in srgb,var(--brand) 7%,var(--bg)); }
 .walkthrough .step:nth-child(2) .mobile-media { background:color-mix(in srgb,var(--brand) 12%,var(--bg)); }
 .walkthrough .step:nth-child(3) .mobile-media { background:color-mix(in srgb,var(--brand) 4%,var(--bg)); }
 .walkthrough .step:nth-child(4) .mobile-media { background:color-mix(in srgb,var(--brand) 10%,var(--bg)); }
 .guide-redesign .help { padding:22px; border-radius:20px; }
}
@media(prefers-reduced-motion:reduce) { .guide-redesign .guide-contents a { transition:none; transform:none; } }
@media print {
 .guide-redesign .guide-intro,.guide-redesign .guide-topics { display:block; }
 .guide-redesign .guide-topics .chapter { break-inside:avoid; margin-bottom:16px; }
 .walkthrough .step-next { display:none; }
}
/* Help occupies the remaining row space as a clear final destination. */
.guide-redesign .guide-contents li:last-child { grid-column:span 2; }
@media(min-width:821px) and (max-width:1000px) {
 .guide-redesign .guide-contents li:last-child { grid-column:1/-1; }
}

/* Genuine app photo for step one, shared by desktop and mobile. */
.walkthrough .walk-placeholder.has-image { padding:0; border:0; background:#fff; overflow:hidden; min-height:0; }
.walkthrough .walk-image { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.walkthrough .walk-image[hidden] { display:none; }
.walkthrough .walk-placeholder.has-image .image-mark,.walkthrough .walk-placeholder.has-image figcaption { display:none; }
.walkthrough .mobile-media.has-image { aspect-ratio:auto; padding:0; border:0; background:#fff; overflow:hidden; }
.walkthrough .mobile-media.has-image img { display:block; width:100%; height:auto; }

/* Let the landscape photos define their own rounded frames without letterboxing. */
.walkthrough .media-stage:is([data-index="1"],[data-index="2"],[data-index="3"]) .walk-placeholder.has-image { background:transparent; border-radius:0; container-type:size; }
.walkthrough .media-stage:is([data-index="1"],[data-index="2"],[data-index="3"]) .walk-image { width:min(100cqw,150cqh); height:auto; aspect-ratio:3/2; flex:none; object-fit:cover; border-radius:16px; }

/* Shared app concepts in the guide's contents and chapter headings. */
.guide-redesign .guide-topic-icon { display:block; flex:0 0 auto; width:24px; height:24px; color:var(--brand); }
.guide-redesign .guide-topics .topic-heading { display:flex; align-items:center; gap:12px; }
.guide-contents .topic-copy strong:has(.guide-topic-icon) { display:flex; align-items:center; gap:9px; }
.guide-contents .guide-topic-icon { width:19px; height:19px; }
[data-theme="dark"] .guide-redesign .guide-topic-icon { color:#8aaaff; }