/* Scoped additions: preserve the site's existing theme and device cards. */
.tutorial-section{padding:28px 0 0;margin-top:28px}
.tutorial-section .section-head{margin-bottom:24px}
.tutorial-section h2{font-size:2rem}
.tutorial-tabs{display:flex;max-width:560px;margin:0 auto 24px;padding:4px;gap:4px;background:var(--teal-bg);border-radius:var(--radius-lg)}
.tutorial-tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:1rem;line-height:1.4;padding:13px 10px;border-radius:var(--radius);cursor:pointer}
.tutorial-tabs button[aria-selected="true"]{background:var(--teal);color:#fff}
.tutorial-tabs button:not([aria-selected="true"]):hover{background:rgba(255,255,255,.65)}
.tutorial-tabs button:focus-visible,.tutorial-card:focus-visible,.tutorial-actions a:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.tutorial-card{max-width:840px;margin:0 auto;display:grid;grid-template-columns:minmax(150px,225px) minmax(0,1fr);gap:40px;align-items:center;padding:28px 32px}
.tutorial-cover{display:block;width:100%;height:auto;aspect-ratio:707/1000;object-fit:contain;border-radius:3px;box-shadow:0 2px 8px rgba(38,50,56,.14)}
.tutorial-details{min-width:0}
.tutorial-app{font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 16px}
.tutorial-details h3{font-size:1.6rem;overflow-wrap:anywhere}
.tutorial-meta{font-size:1rem;color:var(--muted);margin:8px 0 20px}
.tutorial-description{margin:0 0 24px}
.tutorial-actions{display:flex;gap:12px;flex-wrap:wrap}
.tutorial-actions .btn{font-size:1rem}
.tutorial-preview-btn{background:var(--teal);border-color:var(--teal);color:#fff}
.tutorial-preview-btn:hover{background:var(--teal-dark);color:#fff}
.tutorial-preview-note{font-size:.875rem;color:var(--muted);margin:10px 0 0}
.client-app-grid .card{padding:24px;min-width:0}
.client-app-grid h3{font-size:1.3rem}
.client-app-grid .app-category{font-size:.875rem;color:var(--muted);margin:20px 0 0}
.client-app-grid .app-category-paid{border-top:1px solid var(--border);padding-top:18px;margin-top:22px}
.client-app-grid .app-list{margin-top:10px}
.client-app-grid .app-list li{line-height:1.6}
.client-app-grid .app-list a{overflow-wrap:anywhere}
.client-app-grid .app-tag{font-size:.75rem}
.client-app-grid .app-meta{font-size:.875rem;flex-basis:100%}
.app-extra{font-size:.875rem;color:#8a6d1a}
.client-app-note{max-width:none;margin-top:20px;font-size:1rem}
.setup-converter{display:flex;align-items:center;gap:20px;margin:24px 0 32px;padding:24px;border:1px solid var(--teal-light);border-left:6px solid var(--teal);border-radius:var(--radius-lg);background:linear-gradient(110deg,var(--teal-bg),#f4fbfa)}
.setup-converter-icon{display:flex;align-items:center;justify-content:center;flex:0 0 56px;height:56px;border-radius:50%;background:var(--teal-bg);color:var(--teal)}
.setup-converter-copy{flex:1;min-width:0}
.setup-converter-copy h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink)}
.setup-converter-copy p{margin:0;color:var(--muted);line-height:1.6}
.setup-converter>.btn{flex-shrink:0;text-align:center;max-width:100%}
.setup-converter>.btn:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media(max-width:900px){
  .setup-converter{flex-wrap:wrap}
  .setup-converter>.btn{width:100%}
}
@media(max-width:640px){
  .setup-converter{padding:20px 16px;gap:14px}
  .setup-converter-icon{flex-basis:42px;height:42px}
  .tutorial-section{padding-top:12px}
  .tutorial-tabs{gap:2px}
  .tutorial-tabs button{font-size:.875rem;padding:12px 7px}
  .tutorial-card{grid-template-columns:1fr;gap:24px;padding:24px;text-align:center}
  .tutorial-cover{width:170px;max-width:100%;margin:auto}
  .tutorial-details h3{font-size:1.4rem}
  .tutorial-actions{justify-content:center}
  .client-app-grid{grid-template-columns:1fr}
}