.product-page { display: flex; min-height: 100vh; flex-direction: column; }
.product-main { padding-bottom: 80px; }
.product-hero { display: grid; padding: 64px 0 42px; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 48px; }
.product-symbol { display: block; width: 180px; height: 180px; justify-self: end; object-fit: contain; }
.product-actions { display: flex; margin-top: 28px; align-items: center; gap: 10px; }
.product-actions > span { margin-left: auto; color: var(--tad-muted); font-size: 13px; }
.product-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.product-previews figure { margin: 0; border-bottom: 1px solid var(--tad-line); background: #fff; }
.product-previews img { display: block; width: 100%; height: auto; border: 1px solid var(--tad-line); }
.product-previews figcaption { padding: 8px 2px; color: var(--tad-muted); font-size: 12px; }
.release-summary { display: grid; margin: 34px 0 70px; padding: 20px 24px; grid-template-columns: 240px minmax(0,1fr) auto; align-items: center; gap: 24px; color: #fff; background: var(--tad-ink); }
.release-summary > div { display: grid; }
.release-summary .tad-kicker { color: #e8aab2; }
.release-summary strong { font: 24px Consolas, monospace; }
.release-summary small, .release-summary p { color: #d6cbd9; }
.module-directory > header { display: flex; margin-bottom: 24px; align-items: end; justify-content: space-between; border-bottom: 2px solid var(--tad-ink); }
.module-directory h2 { margin: 7px 0 18px; font: 38px CangErYuMo, sans-serif; }
.module-list { display: grid; grid-template-columns: repeat(3,1fr); }
.module-list article { min-height: 220px; padding: 24px 25px; border-left: 1px solid var(--tad-line); border-bottom: 1px solid var(--tad-line); background: #fff; }
.module-list article:nth-child(3n) { border-right: 1px solid var(--tad-line); }
.module-list article > span { color: var(--tad-red); font: 11px Consolas, monospace; }
.module-list h3 { margin: 34px 0 1px; font: 25px CangErYuMo, sans-serif; }
.module-list strong { color: var(--tad-red); }
.module-list p { color: var(--tad-muted); }
.changelog { display: grid; margin-top: 70px; padding-top: 30px; grid-template-columns: 250px 1fr; border-top: 1px solid var(--tad-line); }
.changelog h2 { margin: 6px 0; font: 32px CangErYuMo, sans-serif; }
.changelog ol { margin: 0; padding: 0; counter-reset: line; list-style: none; }
.changelog li { min-height: 46px; padding: 10px 12px 10px 52px; border-bottom: 1px solid var(--tad-line); counter-increment: line; }
.changelog li::before { float: left; margin-left: -40px; color: var(--tad-red); font: 11px Consolas, monospace; content: "0" counter(line); }
.product-support { display: flex; margin-top: 58px; padding: 26px 0; align-items: center; justify-content: space-between; border-top: 1px solid var(--tad-line); border-bottom: 1px solid var(--tad-line); }
.product-support h2 { margin: 0; font: 28px CangErYuMo, sans-serif; }
.product-support p { margin: 5px 0; color: var(--tad-muted); }
.download-release { padding: 20px; border-bottom: 1px solid var(--tad-line); background: var(--tad-surface); }
.download-release strong { font: 25px Consolas, monospace; }
.download-release span { margin-left: 12px; color: var(--tad-muted); }
.download-list { display: grid; padding: 20px; gap: 9px; }
.download-item { display: grid; padding: 14px; grid-template-columns: 86px 1fr; border: 1px solid var(--tad-line); text-decoration: none; }
.download-item:hover { border-color: var(--tad-red); }
.download-item > span { grid-row: 1 / span 2; color: var(--tad-red); font-weight: 700; }
.download-item small { color: var(--tad-muted); font: 10px Consolas, monospace; overflow-wrap: anywhere; }
.download-note { padding: 0 20px 20px; color: var(--tad-muted); font-size: 11px; }
@media (max-width: 900px) { .product-previews, .module-list { grid-template-columns: 1fr 1fr; } .module-list article:nth-child(3n) { border-right: 0; } .module-list article:nth-child(2n) { border-right: 1px solid var(--tad-line); } .release-summary { grid-template-columns: 1fr; } .release-summary .tad-button { justify-self: start; } }
@media (max-width: 620px) { .product-hero { grid-template-columns: 1fr; } .product-symbol { width: 120px; height: 120px; justify-self: start; } .product-actions { align-items: stretch; flex-direction: column; } .product-actions > span { margin-left: 0; } .product-previews, .module-list, .changelog { grid-template-columns: 1fr; } .module-list article { border-right: 1px solid var(--tad-line) !important; } .product-support { align-items: flex-start; flex-direction: column; gap: 16px; } }