/* /guides (P249, frame SwqfB): what the hub and the guide and compare pages add to the tool pages' look
   (youtube-to-chords.css's yt-* blocks, guide.css's rail and shots, shell.css's FAQ and final call). */

.gd-hero { padding-block: clamp(96px, 10vw, 140px) 0; }
.gd-title .lp-display { font-size: clamp(58px, 9.17vw, 132px); line-height: 0.92; }
.gd-title .lp-hand { font-size: clamp(21px, 2.36vw, 34px); }
/* The hub and the instrument pages (frames I24Ds, DyPgV): 148 px at 1440, 66 on a phone. */
.gd-title--big .lp-display { font-size: clamp(66px, 10.28vw, 148px); }
.gd-title--big .lp-hand { font-size: clamp(22px, 2.5vw, 36px); }

.gd-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font: 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }
.gd-crumbs li + li::before { content: "/"; margin-right: 8px; }
.gd-crumbs a { color: inherit; text-decoration: none; }
.gd-crumbs a:hover { color: var(--lp-ink); }
.gd-crumbs [aria-current] { color: var(--lp-ink); }

.gd-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--lp-ink-3); }
.gd-meta li { display: inline-flex; align-items: center; gap: 6px; }
.gd-meta svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gd-answer-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gd-answer { padding: 24px 28px; border: 1px solid #ff2d5559; border-radius: 20px; background: linear-gradient(160deg, #2a0c1c, #120910); }
.gd-answer p:last-child { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: var(--lp-ink); }
.gd-toc p { margin: 0 0 12px; font: 11px var(--lp-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-ink-3); }
.gd-toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gd-toc a { display: flex; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--lp-ink-2); text-decoration: none; }
.gd-toc a span { font: 12px/1.6 var(--lp-mono); color: var(--lp-ink-3); }
.gd-toc a:hover { color: var(--lp-ink); }
.gd-toc a:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; border-radius: 4px; }

/* On a phone the contents fold into one line under the short answer (frame bt9VF). */
.gd-toc--fold { display: none; }
.gd-toc--fold summary { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border: 1px solid #ffffff1f; border-radius: 14px; font-size: 14px; color: var(--lp-ink); cursor: pointer; list-style: none; }
.gd-toc--fold summary::-webkit-details-marker { display: none; }
.gd-toc--fold summary span { color: var(--lp-ink-3); }
.gd-toc--fold summary svg { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--lp-ink-3); stroke-width: 1.8; transition: transform .2s; }
.gd-toc--fold[open] summary svg { transform: rotate(180deg); }
.gd-toc--fold summary:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
.gd-toc--fold ol { padding: 8px 16px 0; }

@media (max-width: 760px) {
  .gd-answer-row { grid-template-columns: 1fr; }
  .gd-answer-row nav.gd-toc { display: none; }
  .gd-toc--fold { display: block; }
}

.gd-prose { max-width: 760px; margin-top: 28px; }
.gd-prose a { color: var(--lp-hot); }

.gd-steps { display: grid; gap: 18px; max-width: 700px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.gd-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; padding-bottom: 18px; border-bottom: 1px solid #ffffff10; }
.gd-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 600 13px/1.7 var(--lp-mono); color: var(--lp-hot); }
.gd-steps h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.gd-steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--lp-ink-2); }

.gd-tip { max-width: 700px; margin: 28px 0 0; padding: 16px 20px; border: 1px solid #ffd16640; border-radius: 14px; background: #ffd1660d; font-size: 15px; line-height: 1.55; color: var(--lp-ink-2); }
.gd-tip::before { content: "Tip · "; font-weight: 600; color: var(--lp-gold); }

/* The home page's player, set in a section rather than the hero: no load rise below the fold. */
.gd-player .lp-player { animation: none; }

/* One column per product (2 to about 7): the table keeps its width and scrolls sideways on a phone. */
/* The cells' screen-reader labels (.lp-sr) are absolute: positioned here they stay in the scroller instead of widening a phone's page. */
.gd-table { position: relative; }
/* The capability column stays put while the products scroll under it (#464). */
.gd-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--lp-bg); }
.gd-table th, .gd-table td { min-width: 120px; }
.gd-table tbody th { min-width: 200px; }
.gd-mark { font-weight: 700; }
.gd-mark--yes { color: #4ade80; }
.gd-mark--catch { color: var(--lp-gold); }
.gd-mark--no { color: var(--lp-ink-3); }
.gd-mark__note { margin-left: 6px; font-size: 13px; color: var(--lp-ink-2); }
/* A phone or small tablet shows the capability and two products at once; a roundup's further columns scroll. */
@media (max-width: 760px) {
  .gd-table table { min-width: 0; font-size: 13px; }
  .gd-table th, .gd-table td { min-width: 88px; padding: 12px; }
  .gd-table tr > :first-child { min-width: 118px; }
  .gd-mark__note { display: block; margin: 2px 0 0; }
}
.gd-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--lp-ink-3); }

.gd-reasons { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.gd-reasons li { display: grid; grid-template-columns: 20px 1fr; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
.gd-reasons li::before { content: "→"; color: var(--lp-hot); }

.gd-checked { max-width: 760px; margin-top: 32px; padding: 22px 26px; border: 1px solid #ffd16633; border-radius: 18px; background: #ffd16608; font-size: 15px; line-height: 1.6; color: var(--lp-ink-2); }
.gd-checked p { margin: 0 0 10px; }
.gd-checked ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0 0 0 18px; }
.gd-checked a { color: var(--lp-hot); }

.gd-tool { padding: clamp(24px, 4vw, 40px); border: 1px solid #ff2d5559; border-radius: 24px; background: linear-gradient(160deg, #2a0c1c, #120910); }
.gd-tool .lp-body { margin: 12px 0 0; }
/* Both buttons in one row under the text, left-aligned; on a phone they stack, still left-aligned. */
.gd-tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
@media (max-width: 560px) { .gd-tool__actions { flex-direction: column; align-items: flex-start; } }

.gd-steps-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.gd-step { display: grid; gap: 8px; color: #fff; text-decoration: none; }
.gd-step--next { text-align: right; }
.gd-step__tag, .gd-card__tag { font: 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }
.gd-step__name { font-size: 17px; font-weight: 600; }
.gd-step__name b { margin-right: 8px; font: 400 30px/1 var(--lp-display); color: var(--lp-hot); }
.gd-related { margin: 40px 0 0; font: 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }

/* Fixed-width columns (frames I24Ds, DyPgV): a section's cards keep one size whether it has one guide or ten. */
.gd-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 32px; }
.gd-cards--path { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.gd-card, .gd-path { display: grid; align-content: start; gap: 10px; height: 100%; box-sizing: border-box; text-decoration: none; }
.gd-card h3, .gd-path h3 { margin: 0; }
.gd-card p, .gd-path p { margin: 0; }
.gd-card__min { font-size: 13px; color: var(--lp-hot); }
/* A phone's guide card is one line of tag, the title and its foot, no description (frames DyPgV, bt9VF: 112 px). */
@media (max-width: 560px) {
  .gd-card { gap: 8px; padding: 20px; border-radius: 16px; }
  .gd-card h3 { font-size: 17px; line-height: 26px; }
  .gd-card p { display: none; }
  .gd-card .gd-card__tag { font-size: 10px; }
  .gd-card .gd-card__min { line-height: 17px; }
}
.gd-path__no { font: 400 56px/0.9 var(--lp-display); color: var(--lp-hot); }
.gd-cards--path li:first-child .gd-path { border-color: #ff2d5580; }
.gd-card:hover, .gd-path:hover, .gd-step:hover { border-color: var(--lp-ink-3); }
.gd-card:focus-visible, .gd-path:focus-visible, .gd-step:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }

/* The hub's last section (P249): the six tools the guides use, as compact cards in the tool pages' card look. */
.gd-tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.gd-tools__item { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 18px 20px; border: 1px solid #ffffff14; border-radius: 16px; background: #ffffff06; color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.gd-tools__item:hover, .gd-tools__item:focus-visible { border-color: #ff2d5559; background: #ff2d550d; }
.gd-tools__item svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--lp-hot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gd-tools__item .lp-tools__name { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.gd-tools__item .lp-tools__sub { display: block; margin-top: 4px; font-size: 14px; color: var(--lp-ink-2); }
.gd-tools__all { display: inline-flex; gap: 8px; margin-top: 18px; font-weight: 700; color: #fff; text-decoration: none; }
.gd-tools__all span { color: var(--lp-hot); }
@media (max-width: 900px) { .gd-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gd-tools__grid { grid-template-columns: 1fr; } }

/* Wide screens (P249): the article and a sticky "On this page" column side by side, so the page isn't all on the left.
   Below 1200 px the contents stay beside the short answer, as before. */
.gd-body__side { display: none; }
@media (min-width: 1200px) {
  .gd-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; max-width: var(--lp-page); margin-inline: auto; padding-inline: var(--lp-gutter); box-sizing: border-box; }
  .gd-body .lp-shell { padding-inline: 0; max-width: none; }
  .gd-body .gd-answer-row { grid-template-columns: 1fr; }
  .gd-body .gd-answer-row .gd-toc { display: none; }
  .gd-body__side { display: block; }
  .gd-toc--side { position: sticky; top: 110px; padding-top: clamp(56px, 7vw, 110px); }
}

/* The hub's filters (D522, frame ue0wt): a chip per instrument page under the hero, then a jump to each section. */
.gd-filters { display: grid; gap: 18px; padding-block: 36px 0; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #ffffff24; border-radius: 999px; font-size: 14px; font-weight: 500; color: #c9c9d1; text-decoration: none; }
.gd-chip:hover { border-color: #ffffff4d; color: var(--lp-ink); }
.gd-chip:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
/* The search box (D522, frame I24Ds): 480 px under the chips, full width on a phone. */
.gd-search { position: relative; display: grid; gap: 8px; max-width: 480px; }
.gd-search svg { position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; fill: none; stroke: var(--lp-ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.gd-search input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid #ffffff24; border-radius: 12px; background: #ffffff06; font: inherit; font-size: 14px; color: var(--lp-ink); }
.gd-search input::placeholder { color: var(--lp-ink-3); }
.gd-search input:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
.gd-search__status { margin: 0; font-size: 13px; color: var(--lp-ink-3); }
.gd-search__status:empty { display: none; }
.gd-jump { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1px solid var(--lp-line); }
.gd-jump a { font-size: 14px; font-weight: 500; color: #c9c9d1; text-decoration: none; }
.gd-jump a:hover { color: var(--lp-ink); }
.gd-jump span { margin-left: 4px; font: 12px var(--lp-mono); color: var(--lp-ink-3); }
.gd-sec { scroll-margin-top: 72px; }

/* Instrument pages (P249, frame DyPgV): the quick answers sit under their heading at reading width, with no side panel. */
.gd-faq { max-width: 880px; margin-top: 28px; }