/* Step-by-step guides (templates/guide-*.html). Reading chrome from marketing.css; this adds
   the numbered steps and the screenshots with their marks. The marks are an SVG laid over the
   image in the image's own coordinates, so they stay on target at every width. */
.guide{max-width:760px;padding-block:56px 88px}
.guide h1{font-size:clamp(30px,3.6vw,40px);letter-spacing:-.035em;line-height:1.1;margin:0 0 12px}
.guide-eyebrow{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--blue-ink)}
.guide-lead{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 8px;max-width:62ch}
.guide-part{margin-top:48px}
.guide-part>h2{font-size:22px;letter-spacing:-.02em;line-height:1.25;margin:0 0 20px}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:36px}
.guide-step-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.guide-step-number{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--azure);color:var(--on-brand);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.guide-step h3{font-size:17px;letter-spacing:-.01em;line-height:1.3;margin:0}
.guide-step>p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 14px 40px;max-width:62ch}
.guide-step>p b,.guide-faq b,.guide-small b{color:var(--ink);font-weight:600}
.guide-step>p a,.guide-small a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px}
.shot{margin:0}
.shot-link{position:relative;display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-card)}
.shot-link:hover{border-color:var(--line-strong)}
.shot img{display:block;width:100%;height:auto}
.shot-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mark-box{fill:color-mix(in srgb,var(--azure) 10%,transparent);stroke:var(--azure);stroke-width:3}
.mark-arrow{fill:none;stroke:var(--azure);stroke-width:3.5;stroke-linecap:round}
.mark-head{fill:var(--azure)}
.mark-badge{fill:var(--azure);stroke:var(--paper);stroke-width:2.5}
.mark-badge-text{fill:var(--on-brand);font:600 14px Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.guide-notes{padding-top:32px;border-top:1px solid var(--line)}
.guide-faq{margin:0;display:grid;gap:14px}
.guide-faq dt{font-size:15px;font-weight:600;color:var(--ink)}
.guide-faq dd{margin:4px 0 0;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.guide-small{margin:24px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:62ch}
@media (max-width:767px){.guide{padding-block:40px 64px}.guide-part{margin-top:36px}.guide-steps{gap:28px}.guide-step>p{margin-left:0;font-size:16px}.guide-faq dd{font-size:16px}}

/* Written guides (templates/guide-*.html beyond the OpenAI key walk-through) and the /guides
   index. The same reading column and tokens; this adds running prose, the tables, the source
   list and the one closing action. Tables scroll inside their own frame on a phone, so the
   page itself never scrolls sideways. */
.guide-crumbs{margin:0 0 20px;font-size:13px;font-weight:500}
.guide-crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;min-height:32px}
.guide-crumbs a:hover{color:var(--ink)}
.guide-crumbs a::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
.guide-meta{margin:0 0 20px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.guide-body{margin-top:8px}
.guide-body>h2{font-size:22px;letter-spacing:-.02em;line-height:1.25;margin:44px 0 12px;scroll-margin-top:88px}
.guide-body>h3{font-size:17px;letter-spacing:-.01em;line-height:1.3;margin:28px 0 8px}
.guide-body>p,.guide-body li{font-size:16px;line-height:1.7;color:var(--ink-2)}
.guide-body>p{margin:0 0 14px;max-width:66ch}
.guide-body>ul,.guide-body>ol{margin:0 0 16px;padding-left:22px;max-width:64ch;display:grid;gap:6px}
.guide-body strong{color:var(--ink);font-weight:600}
.guide-body a,.guide-sources a,.guide-index-item p a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px}
.guide-body a:hover,.guide-sources a:hover{text-decoration-color:currentColor}
.guide-table{margin:8px 0 20px;border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:var(--paper);box-shadow:var(--shadow-card)}
.guide-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--ink-2)}
.guide-table caption{caption-side:top;text-align:left;padding:12px 14px 0;font-size:13px;color:var(--ink-3)}
.guide-table th,.guide-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--soft-line)}
.guide-table thead th{font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-2);border-bottom-color:var(--line)}
.guide-table tbody th{font-weight:500;color:var(--ink);min-width:4.8em}
.guide-table tr:last-child>*{border-bottom:0}
.guide-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.guide-table tr.is-total>*{font-weight:600;color:var(--ink);background:var(--brand-soft)}
.guide-sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.guide-sources h2{font-size:17px;letter-spacing:-.01em;margin:0 0 10px}
.guide-sources ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.guide-close{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.guide-close h2{font-size:22px;letter-spacing:-.02em;line-height:1.25;margin:0 0 10px}
.guide-close p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.guide-index{max-width:760px;padding-block:56px 88px}
/* The searchable help catalog (help-center.js) under the written guides, on the same column. */
.guide-help{max-width:760px;padding-block:0 72px}
.guide-help .help-center{max-width:none}
.guide-index h1{font-size:clamp(30px,3.6vw,40px);letter-spacing:-.035em;line-height:1.1;margin:0 0 12px}
.guide-index-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.guide-index-item{border-bottom:1px solid var(--line)}
.guide-index-item>a{display:block;padding:20px 4px;border-radius:10px;transition:background-color .12s var(--ease)}
.guide-index-item>a:hover{background:var(--surface-2)}
.guide-index-item h2{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:18px;letter-spacing:-.015em;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.guide-index-item h2::after{content:"";flex:none;width:7px;height:7px;margin-right:6px;border:solid var(--ink-3);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.guide-index-item p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch}
@media (max-width:767px){.guide-body>h2{margin-top:36px}.guide-body>p,.guide-body li{font-size:16px}.guide-index{padding-block:40px 64px}.guide-index-item>a{padding:18px 0}.guide-close .button{width:100%;min-height:48px}.guide-table table{font-size:13.5px}.guide-table th,.guide-table td{padding:9px 10px}.guide-table caption{padding:10px 10px 0}}