[hidden] { display: none !important; }
.comparison { display:block; width:min(1740px,calc(100% - 40px)); margin:32px auto 0; }
.step-section { margin-bottom:24px; }
.step-heading { display:flex; align-items:center; gap:16px; margin-bottom:23px; }
.step-heading>div { flex:1; }
.step-heading h2 { margin:0; font-size:clamp(23px,2.2vw,32px); }
.step-heading p { margin:5px 0 0; color:#b9c9d8; font-size:14px; line-height:1.45; }
.step-number { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; background:#e12f12; color:white; font-size:20px; font-weight:800; }
.style-gallery { display:grid; gap:16px; }
.style-choice { display:grid; grid-template-columns:minmax(220px,27%) minmax(0,1fr); align-items:stretch; width:100%; gap:22px; padding:18px; border:1px solid #3b566d; border-radius:14px; background:#12273a; color:#f5f8fc; text-align:left; cursor:pointer; transition:border-color .16s,background .16s,transform .16s; }
.style-choice:hover,.style-choice:focus-visible { border-color:#e12f12; background:#183148; transform:translateY(-2px); outline:none; }
.style-choice-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; padding:4px 8px; }
.style-index { color:#e12f12; font-size:12px; font-weight:800; letter-spacing:.11em; }
.style-choice h3 { margin:10px 0 8px; font-size:clamp(22px,2.1vw,31px); line-height:1.12; }
.style-choice p { margin:0; max-width:350px; color:#c3d0db; font-size:14px; line-height:1.5; }
.style-cta { display:inline-block; margin-top:19px; padding:9px 13px; border-radius:7px; background:#e12f12; color:#fff; font-size:13px; font-weight:800; }
.draft-count { margin-top:12px; color:#cfe3f0; font-size:12px; }
.style-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; }
.style-sample { display:block; min-width:0; }
.style-sample .cover-shell { border:1px solid #50677b; border-radius:8px; }
.style-sample>span { display:block; margin-top:6px; color:#d7e4ee; font-size:11px; font-weight:700; letter-spacing:.035em; }
.change-style { flex:none; padding:10px 14px; border:1px solid #819bad; border-radius:7px; background:#183044; color:#fff; font:700 13px "DM Sans",sans-serif; cursor:pointer; }
.change-style:hover,.change-style:focus-visible { border-color:#e12f12; outline:2px solid #e12f12; outline-offset:2px; }
.variant-gallery { width:min(1740px,calc(100% - 40px)); margin:30px auto 70px; }
.module-review { margin:0 0 40px; padding-bottom:27px; border-bottom:1px solid #2e455a; }
.module-review-head { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.module-review-head span { flex:none; color:#e12f12; font-size:13px; font-weight:800; letter-spacing:.07em; }
.module-review-head h3 { margin:0; font-size:21px; }
.variant-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.variant-card { position:relative; min-width:0; }
.cover-open { display:block; width:100%; padding:0; border:1px solid #526d83; border-radius:11px; background:transparent; text-align:left; cursor:zoom-in; overflow:hidden; }
.cover-open:hover,.cover-open:focus-visible { border-color:#e12f12; outline:2px solid #e12f12; outline-offset:2px; }
.cover-open .platform-card { border:0; border-radius:0; width:100%; }
.cover-open .card-info { min-height:77px; padding:10px 11px 35px; gap:3px; }
.cover-open .card-info small { color:#d4422b; font-size:10px; font-weight:800; letter-spacing:.05em; }
.cover-open .card-info strong { color:#22384c; font-size:12px; line-height:1.2; }
.pick-button { position:absolute; right:8px; bottom:8px; z-index:3; padding:6px 9px; border:1px solid #91aaba; border-radius:5px; color:#214057; background:#edf6fb; font:700 11px "DM Sans",sans-serif; cursor:pointer; }
.pick-button[aria-pressed="true"] { color:#fff; border-color:#e12f12; background:#e12f12; }
.pick-button:hover,.pick-button:focus-visible { outline:2px solid #e12f12; outline-offset:2px; }
.review-panel { width:min(1740px,calc(100% - 40px)); margin:0 auto; padding:22px 25px; border:1px solid #496078; border-radius:14px; color:#e9f2f8; background:#15293c; box-shadow:0 10px 28px #0002; }
.review-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr); gap:24px; align-items:start; }
.review-intro h2 { margin:3px 0 7px; font-size:25px; }
.review-intro p:not(.eyebrow) { margin:0; max-width:760px; color:#c5d4e1; line-height:1.45; }
.review-fields { display:grid; gap:11px; }
.review-fields label { display:grid; gap:5px; color:#dce8f1; font-size:13px; font-weight:700; }
.review-fields input,.review-fields textarea { width:100%; padding:9px 11px; border:1px solid #70889a; border-radius:7px; background:#0b1c2c; color:#fff; font:500 13px "DM Sans",sans-serif; resize:vertical; }
.review-fields input:focus,.review-fields textarea:focus { outline:2px solid #e12f12; outline-offset:1px; }
.review-output { display:flex; justify-content:space-between; gap:25px; margin-top:15px; padding-top:14px; border-top:1px solid #3e5467; }
.review-output strong { font-size:14px; }
.selection-list { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:8px 0 0; list-style:none; }
.selection-list li { padding:5px 8px; border-radius:5px; background:#25445f; color:#e8f2f7; font-size:11px; }
.review-actions { display:flex; flex-wrap:wrap; align-items:start; justify-content:end; gap:7px; min-width:340px; }
.review-actions button,.dialog-pick { border:1px solid #e12f12; border-radius:6px; padding:9px 11px; background:#e12f12; color:#fff; font:700 13px "DM Sans",sans-serif; cursor:pointer; }
.review-actions button:nth-child(2) { background:#24445f; border-color:#7591a5; }
.review-actions button:nth-child(3) { background:transparent; border-color:#7591a5; }
.review-actions button:disabled { opacity:.45; cursor:not-allowed; }
#reviewStatus { flex-basis:100%; text-align:right; color:#b9dfcd; font-size:12px; }
.review-quick { position:fixed; right:20px; bottom:20px; z-index:10; padding:11px 14px; border-radius:8px; color:#fff; background:#e12f12; box-shadow:0 9px 25px #0007; font:700 13px "DM Sans",sans-serif; text-decoration:none; }
.style-photo .background { filter:saturate(.84); }
.cover-dialog { width:min(96vw,1280px); max-height:96vh; border:1px solid #57728a; border-radius:14px; padding:20px; color:#f7f8fb; background:#102235; box-shadow:0 25px 80px #000a; }
.cover-dialog::backdrop { background:#02080dd9; }
.cover-dialog .cover-shell { margin-top:12px; }
.dialog-heading { font-size:21px; font-weight:800; padding-right:90px; }
.dialog-note { color:#cad7e2; margin:13px 2px 2px; font-size:15px; }
.dialog-pick { display:block; margin:16px 0 0 auto; }
.dialog-pick[aria-pressed="true"] { background:#1c5268; border-color:#b9d4dd; }
.dialog-close { position:absolute; right:18px; top:17px; border:0; border-radius:6px; padding:8px 11px; background:#e12f12; color:#fff; font:700 13px "DM Sans",sans-serif; cursor:pointer; }
@media(max-width:1100px) { .style-choice { grid-template-columns:minmax(190px,29%) minmax(0,1fr); gap:12px; } .style-samples { gap:7px; } .variant-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:850px) { .review-intro { grid-template-columns:1fr; } .review-output { display:block; } .review-actions { justify-content:start; min-width:0; margin-top:14px; } #reviewStatus { text-align:left; } }
@media(max-width:700px) { .comparison,.variant-gallery,.review-panel { width:calc(100% - 24px); } .style-choice { display:block; padding:12px; } .style-choice-copy { padding:5px 4px 13px; } .style-choice h3 { margin:6px 0; } .style-choice p { font-size:13px; } .style-cta { margin-top:10px; } .style-samples { grid-template-columns:repeat(2,minmax(0,1fr)); } .style-sample:first-child { grid-column:1 / -1; } .style-sample:first-child .cover-shell { width:100%; } .step-heading { flex-wrap:wrap; } .change-style { margin-left:58px; } .variant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .module-review-head { display:block; } .module-review-head h3 { margin-top:4px; } .cover-dialog { padding:14px; } }
@media(max-width:470px) { .variant-grid { grid-template-columns:1fr; } .cover-open .card-info { min-height:78px; } .review-actions button { flex:1 1 auto; } .dialog-heading { font-size:16px; } .dialog-close { top:10px; right:10px; } }