/* Shared directory cards, on the landing page and in the complete guide hub. */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.guide-card{border-top:2px solid var(--primary);padding:20px 0}
.guide-card h3{margin:8px 0 14px;font-size:1.45rem;line-height:1.28}
.guide-card h3 a{color:var(--ink);text-decoration:none}
.guide-card h3 a:hover,.guide-link:hover{text-decoration:underline}
.guide-card p,.guide-hub-note{color:var(--muted)}
.guide-card .guide-card-meta{font-size:.8rem;margin:0}
.guide-link{display:inline-block;min-height:40px;padding:8px 0;font-weight:700;text-underline-offset:4px}
.guides-browse{margin:24px 0 0}
.guide-group{padding:26px 0 32px}
.guide-group h2{margin:0 0 12px;font-size:28px;line-height:1.25}
.guide-group-intro{max-width:760px;margin:0 0 22px;color:var(--muted)}
.guide-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 42px}
.guide-hub .page-title{max-width:900px;margin-bottom:24px}
.guide-hub .page-title h1{font-size:clamp(30px,3.8vw,46px);line-height:1.14}
.guide-hub .page-title .lede{max-width:760px}
.guide-hub-note{max-width:760px;border-top:1px solid var(--line);margin-top:26px;padding-top:22px;font-size:15px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:.84rem;margin-bottom:26px}
.guide-article{max-width:760px;margin-inline:auto}
.guide-main .breadcrumbs{max-width:760px;margin:0 auto 26px}
.guide-title{margin-bottom:24px}
.guide-title h1{font-size:clamp(30px,3.8vw,46px);line-height:1.14}
.guide-title .lede{max-width:760px}
.guide-title .meta{margin-top:20px;line-height:1.6}
.guide-copy{max-width:100%;font-size:17px;line-height:1.78}
.guide-copy p{margin:18px 0}
.guide-copy section{padding:22px 0 26px;scroll-margin-top:24px}
.guide-copy h2{font-size:26px;line-height:1.3;margin:0 0 16px}
.guide-copy strong{font-weight:720}
.guide-copy code{overflow-wrap:anywhere;font-size:.92em}
.guide-copy li+li{margin-top:12px}
.guide-toc{margin-bottom:24px;padding:17px 22px;background:var(--primary-soft);border:1px solid var(--line);border-radius:12px}
.guide-toc summary{cursor:pointer;font-weight:650;min-height:24px}
.guide-toc[open] summary{margin-bottom:14px}
.guide-toc ol{margin-bottom:0}
.guide-toc li{padding:3px 0}
.guide-copy .guide-image{max-width:380px;margin:24px auto 28px}
.guide-copy .guide-image.wide{max-width:100%}
.guide-image a,.guide-image img{display:block}
.guide-image img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.guide-image figcaption{margin-top:12px;font-size:14px;line-height:1.65;color:var(--muted)}
.guide-image figcaption strong{color:var(--ink)}
.guide-image-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.guide-image-pair .guide-image{width:100%;margin:24px 0 28px;display:flex;flex-direction:column}
.guide-image-pair figcaption{order:-1;margin:0 0 12px;min-height:68px}
.guide-table-wrap{overflow-x:auto;max-width:100%;margin:22px 0;overscroll-behavior-inline:contain}
.guide-copy table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.55;text-align:left}
.guide-copy caption{margin-bottom:12px;text-align:left;color:var(--muted);font-size:14px;line-height:1.6}
.guide-table-hint{display:none}
.guide-copy th,.guide-copy td{vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)}
.guide-download{margin-top:32px;padding:24px;background:var(--primary-soft);border:1px solid var(--line);border-radius:12px}
.guide-download .actions{margin-top:22px}
.related-guides{margin-top:42px}
.related-guides li{padding:4px 0}
.credential-example{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0 12px}
.credential-example>div{min-width:0;padding:22px;border:1px solid var(--line);background:var(--surface);border-radius:12px}
.credential-example pre{margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;line-height:1.8}
.credential-mask{display:inline-block;background:#141414;color:#fff;padding:1px 12px}
/* These are original input and app-export previews, linked to their full PNGs. */
.actual-proof{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.actual-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.actual-proof-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.actual-proof .proof-label{margin:0 0 10px;font-size:14px}
.actual-proof figcaption{font-size:14px;line-height:1.6;margin:18px 0 8px}
.actual-proof figcaption strong{color:var(--ink)}
@media(max-width:820px){.guide-grid,.guide-directory{grid-template-columns:1fr;gap:12px}.guide-main{padding-top:32px}}
@media(max-width:620px){.guide-title h1,.guide-hub .page-title h1{font-size:30px}.guide-copy{font-size:16px}.guide-copy h2,.guide-group h2{font-size:24px}.guide-copy table{font-size:14px}.guide-copy .guide-table-wide table{min-width:510px}.guide-copy th,.guide-copy td{padding:10px 7px}.guide-image-pair{gap:12px}.guide-image-pair figcaption{font-size:13px;min-height:84px}.guide-table-hint{display:block;color:var(--muted);font-size:13px;margin:8px 0 18px}.guide-toc,.guide-download{padding:18px}.credential-example{grid-template-columns:1fr;gap:6px}.actual-proof{padding:16px}.actual-proof-grid{gap:10px}}

.guide-image a:has(>img[src$="characters-android.webp"]),.guide-image a:has(>img[src$="android-mask-editor.webp"]),.guide-image a:has(>img[src$="android-share-menu.webp"]){overflow:hidden;border:1px solid var(--line);border-radius:12px}
.guide-image img[src$="characters-android.webp"]{width:102.34%;max-width:none;margin-top:-10.21%;border:0;border-radius:0}
.guide-image img[src$="android-mask-editor.webp"],.guide-image img[src$="android-share-menu.webp"]{width:108.26%;max-width:none;margin-left:-3.7%;border:0;border-radius:0}