/* Blocks of the data-built guides (releases/src/guides/template.html) and the /guides hub (hub.html), v11+.
   Loaded after /assets/guide.css (same tokens, header, footer, .guide article). Kept in its own file so guide.css,
   which v6-v10 ship, stays byte for byte. */

/* head: crumbs + answer box (the answer sits where the comparison guide has its quick-picks card) */
.guide__crumbs{font:700 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.guide__crumbs a{color:var(--purple);text-decoration:none}
.guide__crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.guide--how .guide__head h1{max-width:20ch;font-size:clamp(36px,4.6vw,60px)}
.guide-answer{margin-right:11px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sticker);padding:24px 26px}
.guide-answer__text{margin:0;color:var(--ink);font-size:clamp(17px,1.4vw,19px);line-height:1.55}
@media (max-width:520px){.guide-answer{margin-right:6px;box-shadow:6px 6px 0 var(--ink);padding:20px}}

/* body copy inside a section */
.guide__section>*+*{margin-top:16px}
.guide__section>h2+*{margin-top:0}
.guide__section ul:not([class]),.guide__section ol:not([class]){padding-left:22px}
.guide__section li+li{margin-top:6px}

/* native Shopify: can / can't, each item with its source */
.guide-native{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:24px}
@media (min-width:760px){.guide-native{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.guide-native__col{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.guide-native__col--can{border-top:4px solid var(--purple)}
.guide-native__col--cannot{border-top:4px solid var(--ink);background:var(--paper)}
.guide-native__col h3{font:700 12px/1.3 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px!important}
.guide-native__col--can h3{color:var(--purple)}
.guide-native ul{list-style:none;margin:0;padding:0}
.guide-native li{position:relative;padding:10px 0 10px 26px;border-top:var(--hair);max-width:none}
.guide-native li:first-child{border-top:0}
.guide-native li::before{position:absolute;left:0;top:10px;font-weight:700}
.guide-native__col--can li::before{content:"✓";color:var(--purple)}
.guide-native__col--cannot li::before{content:"✕";color:var(--ink)}
.guide-src{display:inline-block;margin-left:6px;font:700 12px/1.4 var(--mono);letter-spacing:.04em;white-space:nowrap}

/* steps: numbered click path */
.guide-steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:s}
.guide-steps li{counter-increment:s;position:relative;padding:12px 0 12px 52px;border-top:var(--hair);max-width:65ch}
.guide-steps li:first-child{border-top:0}
.guide-steps li::before{content:counter(s);position:absolute;left:0;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lilac);color:var(--purple);font:700 15px/1 var(--sans)}

/* callout, figure */
.guide-callout{padding:16px 20px;background:var(--wash);border-left:3px solid var(--purple);border-radius:0 var(--r-ctl) var(--r-ctl) 0;max-width:65ch}
.guide-callout>*{margin:0}
.guide-callout>*+*{margin-top:10px}
.guide-figure{margin:24px 0 0}
.guide-figure img{border:1px solid var(--line);border-radius:var(--r-card)}
.guide-figure figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

/* CTA band (same dark band as the comparison guide's close) */
.guide-cta{display:grid;gap:16px 32px;margin-top:clamp(56px,7vw,96px);padding:28px 32px;border-radius:var(--r-card);background:var(--ink);color:rgb(255 255 255/.8)}
@media (min-width:760px){.guide-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.guide-cta p{margin:0;max-width:60ch}
.guide-cta__h{color:var(--white);font:700 clamp(20px,2vw,26px)/1.3 var(--serif)}
.guide-cta__h+p{margin-top:6px}
.guide-cta .guide-card__cta--primary:hover{border-color:var(--white);background:var(--white);color:var(--ink)}

/* hub: one card per guide, grouped */
.guide--hub .guide__head{grid-template-columns:minmax(0,1fr)}
.guide-hub{list-style:none;margin:28px 0 0;padding:0 11px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:720px){.guide-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.guide-hub li{max-width:none;margin:0!important}
.guide-hub a{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.guide-hub a:hover{border-color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.guide-hub__h{color:var(--ink);font:700 clamp(20px,1.6vw,24px)/1.2 var(--serif);letter-spacing:-.01em}
.guide-hub__d{font-size:15px;color:var(--muted)}
.guide-hub__more{margin-top:auto;padding-top:8px;color:var(--purple);font:700 15px/1 var(--sans)}