.wrap{max-width:1180px}
header.site nav{display:flex;gap:24px;align-items:center;font-size:14px}
header.site nav a:not(.open-app){text-decoration:none;font-weight:600}
.catalog-intro{max-width:720px;margin-bottom:40px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.catalog-card{display:block;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .15s}
.catalog-card:hover{transform:translateY(-3px)}
.catalog-card:focus-visible,.open-app:focus-visible{outline:3px solid #7165d8;outline-offset:4px}
.catalog-art{background:#eef0e9;display:flex;align-items:center;justify-content:center;height:280px;padding:22px}
.catalog-art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 8px 20px #203b3212}
.catalog-caption{padding:22px}
.catalog-caption h2{font-size:20px;margin:0 0 8px}
.catalog-caption p{font-size:14px;line-height:1.6;margin:0 0 12px;color:var(--muted)}
.catalog-caption .spec{font-size:12px;color:var(--muted)}
.template-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;margin:24px 0 56px}
.template-preview{margin:0;border-radius:20px;padding:36px;background:#edf0e7;text-align:center}
.template-preview img{display:block;max-width:100%;max-height:600px;width:auto;height:auto;margin:0 auto;box-shadow:0 12px 32px #203b3218}
.template-preview figcaption{font-size:12px;color:var(--muted);margin-top:18px}
.template-copy h1{font-size:clamp(32px,4vw,50px)}
.template-copy .open-app{display:inline-block;margin:20px 0 8px;padding:13px 22px;font-weight:700;font-size:16px}
.template-copy .hint{font-size:13px;color:var(--muted);margin:8px 0}
.template-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:60px}
.template-body h2:first-child{margin-top:0}
.template-body aside .card{margin-top:0}
.variables{width:100%;border-collapse:collapse;font-size:14px}
.variables th,.variables td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}
.variables td{white-space:pre-line}
.variables code{white-space:nowrap}
.source-note{font-size:13px;color:var(--muted)}
.source-note ul{padding-left:18px}
.csv-example{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;border-radius:12px;background:#eef2ec;font-size:14px}
.csv-example code{padding:0;background:none}
.landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0}
.landing-steps .card{margin:0}
.landing-steps h2{font-size:20px}
.reading{max-width:780px}
footer.site nav{display:flex;flex-wrap:wrap;gap:16px}
footer.site a{display:inline-block;padding:8px 0}
@media(max-width:850px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-hero,.template-body{gap:32px}.landing-steps{grid-template-columns:1fr}}
@media(max-width:600px){header.site .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;gap:12px}header.site nav{gap:18px;font-size:13px}.wrap{padding-inline:20px}.catalog-grid,.template-hero,.template-body{grid-template-columns:1fr}.catalog-grid{gap:20px}.template-hero{gap:28px;margin-top:20px;margin-bottom:36px}.template-preview{padding:24px}.template-preview img{max-height:420px}.template-copy{grid-row:1}.template-copy h1{font-size:34px}.template-copy .lede{font-size:17px}.catalog-art{height:260px}.template-body aside .card{padding:20px 16px}.variables{font-size:13px}.variables th,.variables td{padding:10px 4px}.landing-steps{gap:16px}}