.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; padding: 1rem 0 3rem; }
.eyebrow { font-size: .68rem; letter-spacing: .16em; color: var(--brand); margin: 0 0 1.35rem; }
.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.9rem); line-height: 1.22; margin-bottom: 1.35rem; }
.hero-intro { font-size: 1.05rem; color: var(--muted); max-width: 29rem; }
.platform, .price { font-size: .76rem; color: var(--muted); }
.platform { margin-top: 1.6rem; }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0 .65rem; }
.release-badge { color: #fff; background: linear-gradient(115deg, #1f52b8, #11787e); border: 1px solid #215fba; border-radius: 2rem; padding: .55rem 1rem; font-size: .8rem; }
.guide-link { font-size: .82rem; text-decoration: none; white-space: nowrap; }
.rule-visual { padding: 1.6rem; border: 1px solid #bed8e4; border-radius: 1rem; background: linear-gradient(145deg, #ffffffbf, #e9f5f6); box-shadow: 0 12px 30px #215fba08; }
.visual-top { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; margin-bottom: 1.6rem; }
.status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: #16837f; }
.rule-stage { padding: 1rem 0; border-block: 1px solid var(--line); }
.rule-stage > span { display: block; font-size: .68rem; color: var(--brand); letter-spacing: .1em; margin-bottom: .5rem; }
.rule-stage strong { display: block; font-weight: 500; font-size: 1rem; overflow-wrap: anywhere; }
.route-arrow { text-align: center; color: #288aa2; padding: .55rem; }
.result strong { color: #11787e; }
.visual-note { font-size: .72rem; color: var(--muted); margin: 1.2rem 0 0; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; border-block: 1px solid var(--line); }
.feature-number { font-family: Georgia, serif; font-size: .9rem; color: #3f6b86; }
.features h2 { font-size: 1.3rem; margin: .7rem 0; }
.features p { font-size: .86rem; color: var(--muted); margin: 0; }
.scope-panel { padding: 1.7rem 0; }
.scope-panel p { font-size: .82rem; color: var(--muted); margin: .35rem 0; }
.scope-panel .local-note { color: var(--ink); }
.scope-panel .scope-note { font-size: .74rem; }
.closing { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; font-size: .82rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; gap: 2rem; } .rule-visual { max-width: 32rem; width: 100%; } .hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); } }
@media (max-width: 600px) { .hero { padding-top: .3rem; padding-bottom: 2rem; gap: 1.5rem; } .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .hero-intro { font-size: .95rem; } .features { grid-template-columns: 1fr; gap: 1.7rem; } .features article { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem .6rem; } .features h2 { margin: 0; font-size: 1.2rem; } .features p { grid-column: 2; } .rule-visual { padding: 1.3rem; } .platform { margin-top: 1.3rem; } }