.portal-page { display: flex; min-height: 100vh; flex-direction: column; background: #fff; }
.portal-index { display: grid; width: min(1440px, 100%); min-height: 720px; margin: 0 auto; padding: 72px clamp(24px, 4vw, 64px) 54px; grid-template-columns: minmax(330px, .85fr) minmax(700px, 1.55fr); gap: clamp(40px, 5vw, 80px); }
.portal-intro { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; }
.portal-intro h1 { margin: 28px 0; font: clamp(48px, 5.4vw, 78px)/1.08 CangErYuMo, sans-serif; letter-spacing: -.035em; }
.portal-intro h1 em { color: var(--tad-red); font-style: normal; }
.portal-intro p { max-width: 520px; margin: 28px 0; color: var(--tad-muted); font-size: 16px; line-height: 2; }
.portal-rule { width: 62px; height: 5px; margin: 36px 0 54px; background: var(--tad-red); }
.portal-minor-links { display: flex; gap: 26px; }
.portal-minor-links a { text-underline-offset: 6px; }
.portal-minor-links a { color: var(--tad-red); }
.product-index { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--tad-line); }
.product-spine { position: relative; display: flex; min-width: 0; min-height: 610px; padding: 72px 30px 0; flex-direction: column; border-left: 1px solid var(--tad-line); background: #fff; overflow: hidden; }
.product-spine.featured { border: 2px solid var(--tad-red); border-top-width: 8px; border-bottom-width: 0; }
.spine-type { min-height: 18px; color: var(--tad-red); font: 10px Consolas, monospace; letter-spacing: .12em; }
.spine-number { margin: 25px 0 8px; color: var(--tad-ink); font: 70px/1 CangErYuMo, sans-serif; }
.product-spine.planned .spine-number { color: #9b96a0; }
.spine-icon { width: 56px; height: 56px; margin: 22px 0 16px; object-fit: contain; object-position: left center; }
.product-spine h2 { margin: 0; font: 29px/1.25 CangErYuMo, sans-serif; }
.product-spine p { margin: 22px 0; color: var(--tad-muted); line-height: 1.85; }
.spine-action { z-index: 1; display: flex; min-height: 64px; margin: auto -30px 0; padding: 0 30px; align-items: center; justify-content: space-between; color: var(--tad-ink); text-decoration: none; }
.spine-action.primary { color: #fff; background: var(--tad-red); font-weight: 700; }
.portal-support-strip { display: grid; padding: 30px clamp(24px, 6vw, 90px); grid-template-columns: 330px minmax(280px,1fr) auto; align-items: center; gap: 32px; border-top: 1px solid var(--tad-line); background: var(--tad-surface); }
.portal-support-strip h2 { margin: 6px 0 0; font: 25px CangErYuMo, sans-serif; }
.portal-support-strip p { color: var(--tad-muted); }
.portal-support-strip > div:last-child { display: flex; gap: 9px; }
.portal-license { display: grid; padding: 36px clamp(24px, 6vw, 90px); grid-template-columns: 270px minmax(0,1fr); gap: 10px 45px; border-top: 1px solid var(--tad-line); background: #fff; }
.portal-license h2 { margin: 0; font: 30px CangErYuMo, sans-serif; }
.portal-license p { grid-column: 2; margin: 0; color: var(--tad-muted); line-height: 1.9; }
@media (max-width: 1080px) { .portal-index { grid-template-columns: 1fr; } .portal-intro h1 br { display: none; } .portal-minor-links { margin-top: 16px; } .product-spine { min-height: 520px; } }
@media (max-width: 760px) { .portal-index { padding-top: 42px; } .portal-intro h1 { font-size: 46px; } .product-index { grid-template-columns: 1fr; border-top: 1px solid var(--tad-line); } .product-spine { min-height: 340px; padding-top: 28px; border-right: 1px solid var(--tad-line); } .product-spine.featured { border-bottom-width: 2px; } .spine-number { position: absolute; top: 25px; right: 28px; margin: 0; font-size: 46px; } .spine-icon { margin-top: 12px; } .portal-support-strip, .portal-license { grid-template-columns: 1fr; } .portal-license p { grid-column: 1; margin: 8px 0 0; } }