.guide-hero{padding-top:64px;padding-bottom:42px;max-width:1120px}.guide-back{display:inline-block;margin-bottom:28px;color:#42623e}.guide-hero h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.08;max-width:950px;letter-spacing:-.04em;margin:12px 0 24px}.guide-lead{font-size:1.2rem;line-height:1.65;max-width:850px;color:#536050}.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:start;max-width:1120px;padding-bottom:64px}.guide-aside{position:sticky;top:105px;font-size:.93rem}.guide-aside nav{display:grid;gap:16px;margin-bottom:28px}.guide-aside a{color:#42503f;text-decoration:underline;text-underline-offset:4px}.guide-article{min-width:0;line-height:1.75}.guide-article section{scroll-margin-top:110px;margin:40px 0}.guide-article h2,.guide-related h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;margin-bottom:18px}.guide-article p{margin:16px 0}.guide-article a:not(.button){color:#326330;text-decoration:underline;text-underline-offset:3px}.guide-article ol,.guide-article ul{padding-left:24px}.guide-article li{margin:12px 0}.guide-article figure{margin:0;background:#f1f3ed;border-radius:20px;padding:24px;text-align:center}.guide-article figure img{display:block;width:100%;height:370px;object-fit:contain}.guide-article figcaption{font-size:.85rem;color:#56634f;margin-top:16px}.guide-cta{padding:28px;border-radius:20px;background:#edf3e6;margin-top:48px}.guide-cta .button{margin:8px 18px 8px 0}.guide-related{padding-bottom:72px;max-width:1120px}.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.guide-card{display:block;padding:28px;background:#f3f5ee;border:1px solid #dfe5d8;border-radius:18px;color:inherit;text-decoration:none}.guide-card h2,.guide-card h3{font-size:1.35rem;line-height:1.3;margin:12px 0}.guide-card p{line-height:1.6;color:#536050;font-size:1rem}.guide-arrow{display:block;margin-top:22px;font-weight:600;color:#326330}.guide-card:hover{border-color:#739465}.comparison-scroll{overflow-x:auto;margin:24px 0}.version-table{border-collapse:collapse;width:100%;min-width:700px;line-height:1.6}.version-table caption{text-align:left;margin:0 0 16px;font-weight:600}.version-table th,.version-table td{padding:20px;text-align:left;border:1px solid #dfe5d8;vertical-align:top}.version-table thead{background:#eaf0e2}.version-table tbody th{background:#f5f7f0;min-width:150px}.guide-note{padding:24px;background:#f3f5ee;border-radius:16px;line-height:1.7}.guide-cards a:focus-visible,.guide-card:focus-visible,.comparison-scroll:focus-visible{outline:3px solid #326330;outline-offset:4px}
@media(max-width:800px){.guide-layout{grid-template-columns:1fr;gap:24px}.guide-aside{position:static;padding:20px;background:#f3f5ee;border-radius:16px}.guide-aside nav{gap:12px}.guide-cards{grid-template-columns:1fr}.guide-hero{padding-top:36px}.guide-article figure img{height:300px}.guide-layout{padding-bottom:36px}.guide-cta{padding:22px}}
body[data-page="guides"] main,body[data-page="compare"] main{padding-top:84px}
@media(max-width:700px){body[data-page="guides"] main,body[data-page="compare"] main{padding-top:72px}}

.comparison-hint{display:none}@media(max-width:800px){.comparison-hint{display:block;font-size:.9rem;color:#536050}}

/* Compact product summaries and visual guide navigation. */
.version-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 64px; }
.version-card { --accent: #4e752b; --tint: #f2f7ec; display: flex; flex-direction: column; padding: 28px; border: 1px solid #dce3d5; border-top: 3px solid var(--accent); border-radius: 20px; background: linear-gradient(150deg, var(--tint), #fff 65%); }
.version-card--bluetooth { --accent: #16689c; --tint: #edf7fe; }
.version-card--usb { --accent: #995114; --tint: #fff5e8; }
.version-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.version-card__head img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.version-card__head h2 { font-size: 25px; margin: 0 0 3px; letter-spacing: -.025em; }
.version-card__head p { font-size: 12px; line-height: 1.5; color: #536050; margin: 0; }
.version-card h3 { font-size: 19px; line-height: 1.4; letter-spacing: -.02em; margin: 0 0 17px; }
.version-card ul { padding: 0; margin: 0 0 25px; list-style: none; }
.version-card li { position: relative; padding-left: 19px; margin: 12px 0; font-size: 14px; line-height: 1.6; color: #455040; }
.version-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.version-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 13px 16px; border-radius: 10px; color: var(--accent); background: var(--tint); font-size: 14px; font-weight: 750; text-decoration: none; }
.version-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.version-card__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.comparison-heading h2 { margin: 8px 0 12px; }
.comparison-heading > p:last-child { color: #536050; line-height: 1.6; }
.version-table { font-size: 15px; }
.version-table th, .version-table td { padding: 18px; }
.version-table tbody tr:nth-child(even) td { background: #fafbf8; }
.version-table a { color: #326330; text-underline-offset: 3px; }
.guide-note { font-size: 14px; margin-top: 24px; }
.guide-card { display: flex; flex-direction: column; background: #fafbf7; padding: 26px; transition: border-color .15s ease, background .15s ease; }
.guide-card:hover { background: #f0f5e8; }
.guide-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: #eaf1df; color: #4e702e; }
.guide-card__icon svg { width: 29px; height: 29px; }
.guide-card h3 { margin: 0 0 10px; font-size: 22px; }
.guide-card p { margin: 0 0 24px; font-size: 15px; }
.guide-card .guide-arrow { margin-top: auto; font-size: 14px; padding-top: 8px; }
.guide-toc { border: 1px solid #dfe5d8; border-radius: 16px; background: #f7f9f2; overflow: hidden; }
.guide-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; padding: 20px; font-weight: 700; list-style: none; }
.guide-toc > summary::-webkit-details-marker { display: none; }
.guide-toc > summary::after { content: '+'; font-size: 21px; line-height: 1; font-weight: 400; }
.guide-toc[open] > summary::after { content: '−'; }
.guide-toc-body { padding: 0 20px 22px; }
.guide-toc nav { gap: 14px; margin-bottom: 20px; }
.guide-toc a { line-height: 1.55; }
.guide-toc summary:focus-visible { outline: 3px solid #4e752b; outline-offset: -4px; }
@media (max-width: 800px) {
  .version-cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 44px; }
  .version-card { padding: 24px; }
  .version-card__head { margin-bottom: 20px; }
  .guide-aside { padding: 0; background: transparent; }
  .guide-toc-body { padding-bottom: 20px; }
  .guide-hero { padding-bottom: 28px; }
  .guide-lead { font-size: 17px; line-height: 1.7; }
  .guide-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding: 22px; }
  .guide-card__icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  .guide-card h3, .guide-card p, .guide-card .guide-arrow { grid-column: 2; }
  .guide-card h3 { font-size: 21px; }
  .guide-card p { margin-bottom: 16px; }
  .guide-card .guide-arrow { padding: 0; }
}
body[data-page="compare"] .guide-hero { padding-top: 48px; padding-bottom: 32px; }
body[data-page="compare"] .guide-hero h1 { max-width: none; font-size: clamp(2.2rem, 4vw, 3.5rem); }
body[data-page="compare"] .guide-lead { font-size: 18px; }
@media(max-width:800px) { body[data-page="compare"] .guide-hero { padding-top: 32px; } body[data-page="compare"] .guide-lead { font-size: 17px; } }