:root{--bg:#f8fafc;--text:#0f1724;--muted:#586279;--panel-border:rgba(0,0,0,0.08);--card-grad-1:rgba(0,0,0,0.02);--card-grad-2:rgba(0,0,0,0.04);--tile-bg:rgba(0,0,0,0.02);--tile-border:rgba(0,0,0,0.08);--bullet-bg:rgba(0,0,0,0.02);--bullet-border:rgba(0,0,0,0.08);--callout-bg:rgba(0,0,0,0.02);--callout-border:rgba(0,0,0,0.18);--btn-primary-bg:#1166c1;--btn-primary-border:#1e64af;--btn-primary-text:#ffffff;--btn-primary-bg-hover:#1166c1;--btn-secondary-bg:#e2e8f0;--btn-secondary-border:rgba(0,0,0,0.12);--btn-secondary-text:#0f1724;--btn-ghost-bg:rgba(0,0,0,0.04);--btn-ghost-border:rgba(0,0,0,0.08);--btn-ghost-text:#334155;--footer-text:#64748b}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background: var(--bg); color:var(--text); }
.wrap{ max-width:980px; margin:23px auto; padding:14px; }
header{ display:flex; align-items:center; gap:16px; }
h1{ margin:0; font-size:28px; letter-spacing:0.02em; }
p.lead{ color:var(--muted); margin-top:8px }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:28px }
.card{ background:linear-gradient(180deg, var(--card-grad-1), var(--card-grad-2)); border:1px solid var(--panel-border); padding:20px; border-radius:10px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; align-items: center; }
.card img{ width:100%; height:auto; max-height:520px; object-fit:contain; display:block; border-radius:6px }
.card h3{ margin:0; font-size:18px }
.card p{ margin:0; color:var(--muted); font-size:15px }
footer{ margin-top:36px; color:var(--footer-text); font-size:13px }
/* New sections */
.hero{ padding:4px 0 8px }
.hero h2{ font-size:28px; margin:8px 0 6px }
.hero p{ color:var(--muted); margin:5px 0 14px }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; text-decoration:none; border:1px solid var(--btn-secondary-border); color:var(--btn-secondary-text); transition:background .15s ease, box-shadow .15s ease, transform .05s ease }
.btn:hover{ transform:translateY(-1px) }
.btn.primary{ background:var(--btn-primary-bg); border-color:var(--btn-primary-border); color:var(--btn-primary-text);font-weight: 600;}
.btn.primary:hover{ background:var(--btn-primary-bg-hover) }
.btn.secondary{ background:var(--btn-secondary-bg); border-color:var(--btn-secondary-border); color:var(--btn-secondary-text); }
.btn.ghost{ background:var(--btn-ghost-bg); color:var(--btn-ghost-text); border-color:var(--btn-ghost-border) }
.btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; pointer-events:none }
.section{ margin-top:50px }
.section h2{ font-size:20px; margin:0 0 10px }
.bullets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.bullet{ display:flex; gap:10px; align-items:flex-start; background:var(--bullet-bg); border:1px solid var(--bullet-border); padding:12px; border-radius:10px }
.bullet i{ font-style:normal; font-size:18px }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:12px }
.tile{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:10px; background:var(--tile-bg); border:1px solid var(--tile-border); text-decoration:none; color:inherit }
.tile small{ color:var(--muted) }

.tools .tile{
    flex-direction: row;
} 
.tool-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Icon sizing inside tool tiles */
.tools .tile img{ min-width: 50px;height: 50px;}

.callout{ padding:14px; border:1px dashed rgba(255,255,255,0.18); border-radius:10px; background:rgba(255,255,255,0.02); box-sizing:border-box }
.callout ul{ margin:0 0 1rem 1.05rem; padding:0; list-style-position:outside }
.callout li{ margin:6px 0 }
.muted{ color:var(--muted) }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px }
.footer-links a{ color:var(--muted); text-decoration:none }
/* Feature list styling (used on homepage) */
.feature-list{
    margin-top:10px; /* default spacing when used standalone */
    padding-left:1.4rem; /* indentation for list items */
    list-style:none; /* emojis used as markers instead of bullets */
}
.feature-list li{ margin:0.55rem 0; }
.feature-list .feature-emoji{ margin-right:10px; font-size:1.05em; vertical-align:text-bottom; display:inline-block; width:1.4em; text-align:center; }
/* Cards grid for instruments */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:18px }
/* Tools teaser */
/* chips removed */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
@media (max-width:420px){ .wrap{ margin:18px 16px } .card img{ max-height:320px } }