.moderation-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(30px, 5vw, 74px); min-height: 650px; margin: 0 clamp(12px, 2vw, 26px); padding: clamp(28px, 5vw, 72px); border: 1px solid #454967; border-radius: 26px; background: radial-gradient(circle at 78% 9%, #9bd9bb17, transparent 32%), linear-gradient(125deg, #171b29, #232945); }
.moderation-hero-copy { min-width: 0; }
.moderation-hero h1 { max-width: 650px; font-size: clamp(53px, 6.4vw, 98px); line-height: .99; letter-spacing: -.07em; }
.moderation-hero h1 em, .moderation-stages h2 em { color: var(--accent); font-style: normal; }
.moderation-hero-lead { max-width: 570px; margin-top: 28px; color: #e0e3ee; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.4; }
.moderation-hero-intro { max-width: 535px; margin-top: 30px; padding-top: 23px; border-top: 1px solid #6b71926c; color: #bfc5d4; font-size: 14px; line-height: 1.75; }
.moderation-hero-image { min-width: 0; overflow: hidden; border: 1px solid #606886; border-radius: 20px; background: #111722; box-shadow: 0 24px 65px #05070c77; transform: rotate(1deg); }
.moderation-hero-image img { display: block; width: 100%; height: auto; }
.moderation-hero-image figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px 22px; }
.moderation-hero-image figcaption strong { max-width: 400px; font-size: 14px; line-height: 1.5; }
.figure-kicker { min-width: 90px; color: var(--mint); font: 700 10px/1.5 Consolas, monospace; letter-spacing: .11em; }
.moderation-plan { display: grid; grid-template-columns: minmax(210px, .56fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 100px); padding-top: clamp(95px, 11vw, 155px); padding-bottom: clamp(90px, 10vw, 140px); }
.moderation-plan h2, .moderation-preflight h2, .moderation-stages h2, .moderation-retry h2 { font-size: clamp(42px, 4.5vw, 68px); line-height: 1.05; letter-spacing: -.06em; }
.moderation-plan-intro > p:last-child { max-width: 300px; margin-top: 25px; color: #b8bdca; font-size: 14px; line-height: 1.65; }
.moderation-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.moderation-numbers > div { display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; padding: 18px 19px; border: 1px solid #4a5161; border-radius: 16px; background: #151b25; }
.moderation-numbers strong { color: var(--accent); font-family: "Trebuchet MS", sans-serif; font-size: clamp(54px, 5.5vw, 80px); line-height: .9; letter-spacing: -.07em; }
.moderation-numbers span { color: #c7ccd6; font-size: 12px; line-height: 1.45; }
.moderation-copy { max-width: 765px; color: #cdd1da; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; }
.moderation-copy p + p { margin-top: 18px; }
.moderation-preflight { display: grid; grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(35px, 8vw, 145px); padding: 25px 0 clamp(100px, 12vw, 175px); }
.moderation-second-image { width: min(100%, 500px); margin: 0 0 0 auto; overflow: hidden; border: 1px solid #484d5a; border-radius: 20px; background: #171d25; transform: rotate(-1deg); }
.moderation-second-image img { display: block; width: 100%; height: auto; }
.moderation-second-image figcaption { padding: 16px 20px 21px; color: #bac3ce; font-size: 12px; line-height: 1.6; }
.moderation-preflight-copy > p:not(.section-kicker) { max-width: 635px; margin-top: 28px; color: #cbd1d9; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; }
.moderation-checklist { max-width: 660px; margin: 28px 0 0; padding: 0; list-style: none; }
.moderation-checklist li { position: relative; padding: 14px 12px 14px 32px; border-top: 1px solid #3a414c; color: #e2e5ea; font-size: 14px; line-height: 1.5; }
.moderation-checklist li:before { position: absolute; top: 16px; left: 0; width: 17px; height: 17px; border: 1px solid var(--mint); border-radius: 50%; color: var(--mint); content: "✓"; font-size: 11px; line-height: 15px; text-align: center; }
.moderation-stages { padding: clamp(35px, 5vw, 70px) clamp(20px, 5vw, 70px) clamp(45px, 6vw, 80px); border: 1px solid #485373; border-radius: 24px; background: radial-gradient(circle at 50% 45%, #aab0ff15, transparent 50%), linear-gradient(135deg, #1c2234, #111720); }
.moderation-stages-header { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 30px; }
.moderation-stages-header > p { max-width: 480px; margin-left: auto; padding-bottom: 6px; color: #c7ccda; font-size: 16px; line-height: 1.7; }
.moderation-status-board { width: min(100%, 700px); margin: 65px auto 25px; padding: 20px; border: 1px solid #5b6481; border-radius: 18px; background: #111722; box-shadow: 0 24px 70px #070a1488; }
.moderation-status-row { display: flex; align-items: center; gap: 17px; min-height: 90px; padding: 14px 18px; border: 1px solid #3d4656; border-radius: 12px; background: #1b222d; }
.status-round { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 12px; background: #9bd9bb22; color: var(--mint); font-size: 27px; }
.status-round-second { background: #aab0ff22; color: var(--accent); }
.moderation-status-row > div { display: grid; gap: 5px; min-width: 0; }
.moderation-status-row small { color: #aab2c1; font: 700 10px/1.3 Consolas, monospace; letter-spacing: .1em; }
.moderation-status-row strong { font-size: 16px; }
.status-pill { flex: 0 0 auto; margin-left: auto; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status-active { background: #9bd9bb2b; color: #a6e5c6; }
.status-review { background: #aab0ff26; color: #c3c7ff; }
.moderation-status-path { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 45px; }
.moderation-status-path span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.moderation-status-board > p { margin: 16px 5px 0; color: #9fa7b8; font-size: 11px; line-height: 1.5; text-align: center; }
.moderation-stages-foot { max-width: 700px; margin: 0 auto; color: #cbd0dd; font-size: 15px; line-height: 1.7; text-align: center; }
.moderation-retry { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(0, 1fr); gap: 50px; padding: clamp(110px, 12vw, 170px) 0 105px; }
.moderation-retry .section-kicker { padding-top: 15px; }
.moderation-retry h2 { max-width: 850px; margin-bottom: 30px; }
.moderation-next { display: flex; align-items: center; gap: 32px; padding: 30px; border: 1px solid #50647a; border-radius: 16px; background: #18212a; }
.moderation-next .section-kicker { min-width: 120px; margin: 0; }
.moderation-next > div { display: grid; gap: 8px; }
.moderation-next strong { font-size: 22px; }.moderation-next span:not(.section-kicker) { color: #bbc3cd; font-size: 13px; }
.moderation-next a { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 800; white-space: nowrap; }
.moderation-next a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 990px) { .moderation-hero { grid-template-columns: 1fr; }.moderation-hero-image { max-width: 750px; }.moderation-plan { grid-template-columns: 1fr; gap: 32px; }.moderation-plan-intro > p:last-child { max-width: 680px; }.moderation-preflight { gap: 35px; }.moderation-stages-header { grid-template-columns: 1fr; }.moderation-stages-header > p { max-width: 700px; margin-left: 0; } }
@media (max-width: 700px) { .moderation-hero { min-height: 0; padding: 28px 20px 35px; }.moderation-hero h1 { font-size: clamp(49px, 10vw, 69px); }.moderation-hero-image { transform: none; }.moderation-hero-image figcaption { display: block; }.figure-kicker { display: block; margin-bottom: 6px; }.moderation-plan { padding-top: 85px; padding-bottom: 70px; }.moderation-numbers { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }.moderation-numbers > div { min-height: 135px; padding: 12px; }.moderation-numbers strong { font-size: 48px; }.moderation-numbers span { font-size: 10px; }.moderation-preflight { grid-template-columns: 1fr; padding-bottom: 90px; }.moderation-second-image { width: min(100%, 440px); margin: 0 auto; transform: none; }.moderation-stages { padding: 34px 18px 44px; }.moderation-status-board { margin-top: 30px; padding: 10px; }.moderation-status-row { gap: 9px; padding: 10px; }.moderation-status-row strong { font-size: 13px; }.status-round { flex-basis: 36px; height: 36px; font-size: 21px; }.status-pill { padding: 6px 8px; font-size: 10px; }.moderation-retry { grid-template-columns: 1fr; gap: 0; padding: 85px 0 70px; }.moderation-next { flex-wrap: wrap; gap: 15px; padding: 23px; }.moderation-next .section-kicker { width: 100%; }.moderation-next a { width: 100%; margin-left: 0; } }
@media (max-width: 390px) { .moderation-numbers { grid-template-columns: 1fr; }.moderation-numbers > div { flex-direction: row; align-items: center; min-height: 80px; gap: 15px; }.moderation-numbers strong { min-width: 65px; }.moderation-numbers span { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .moderation-hero-image, .moderation-second-image { transform: none; } }