.product-hero { padding: calc(var(--header-height, 72px) + 4rem) 1rem 3rem; background: radial-gradient(circle at 85% 10%, rgba(0,174,239,.14), transparent 28%), var(--dark, #08111f); color: #fff; }
.product-hero .container { width: min(980px, 100%); margin: 0 auto; }
.product-hero + .suite-main { padding-top: 3rem; }
body > .product-hero { margin: 0; }
.product-kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: #73d4ff; font: 700 .78rem/1 var(--font-heading, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.product-kicker::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
.product-hero h1 { max-width: 820px; margin: 0 0 1rem; font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: .98; }
.product-hero p { max-width: 740px; color: #b9c7d9; font-size: clamp(1rem, 2vw, 1.2rem); }
.privacy-strip { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; margin-top: 1.6rem; color: #d9e8f4; font-size: .9rem; }
.privacy-strip span::before { content: "✓"; margin-right: .45rem; color: #4de3a5; font-weight: 800; }
.suite-main { padding: 3rem 0 5rem; background: #f5f8fb; }
.suite-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.suite-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 1.4rem; align-items: start; }
.suite-panel { border: 1px solid #dce5ed; border-radius: 18px; background: #fff; box-shadow: 0 14px 35px rgba(13, 30, 48, .07); overflow: hidden; }
.suite-panel__head { padding: 1.25rem 1.4rem; border-bottom: 1px solid #e7edf3; background: linear-gradient(135deg, #fff, #f5fbff); }
.suite-panel__head h2, .suite-panel__head h3 { margin: 0; color: #102438; }
.suite-panel__head p { margin: .45rem 0 0; color: #5e7082; font-size: .92rem; }
.suite-panel__body { padding: 1.4rem; }
.suite-section + .suite-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e7edf3; }
.suite-section h3 { margin: 0 0 .8rem; color: #18334b; font-size: 1.05rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field-grid .wide { grid-column: 1 / -1; }
.suite-field { display: grid; gap: .38rem; }
.suite-field label, .suite-field > span { color: #263e54; font-size: .82rem; font-weight: 700; }
.suite-field small { color: #6a7c8d; }
.suite-field input, .suite-field select, .suite-field textarea { width: 100%; min-height: 44px; padding: .72rem .8rem; border: 1px solid #cdd9e3; border-radius: 10px; background: #fff; color: #152a3d; font: inherit; }
.suite-field textarea { min-height: 108px; resize: vertical; }
.suite-field input:focus, .suite-field select:focus, .suite-field textarea:focus { outline: 3px solid rgba(0, 174, 239, .16); border-color: #00aeef; }
.suite-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.suite-btn { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: .45rem; padding: .68rem 1rem; border: 1px solid #0a334f; border-radius: 10px; background: #0a334f; color: #fff; font: 700 .9rem/1 var(--font-body, sans-serif); cursor: pointer; text-decoration: none; }
.suite-btn:hover { background: #075b84; color: #fff; }
.suite-btn--accent { border-color: #00aeef; background: #00aeef; color: #041521; }
.suite-btn--quiet { border-color: #c9d6e0; background: #fff; color: #1c3b54; }
.suite-btn--danger { border-color: #b84a4a; background: #fff; color: #9c3030; }
.suite-btn:disabled { opacity: .45; cursor: not-allowed; }
.suite-notice { margin: 1rem 0; padding: .9rem 1rem; border-left: 4px solid #00aeef; border-radius: 8px; background: #eef9fd; color: #26495e; font-size: .9rem; }
.suite-notice--warn { border-color: #d89116; background: #fff8e9; color: #684b17; }
.suite-notice--danger { border-color: #c74646; background: #fff1f1; color: #732d2d; }
.repeat-list { display: grid; gap: .7rem; }
.repeat-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: .55rem; align-items: end; padding: .8rem; border: 1px solid #e0e8ef; border-radius: 12px; background: #f9fbfd; }
.repeat-row--two { grid-template-columns: 1fr 1.4fr auto; }
.repeat-row button { min-height: 42px; }
.output { min-height: 220px; color: #173147; }
.output-empty { display: grid; min-height: 220px; place-items: center; padding: 2rem; color: #758696; text-align: center; }
.output h2, .output h3 { color: #102e45; }
.output ul, .output ol { padding-left: 1.3rem; }
.output-card { margin-bottom: .8rem; padding: 1rem; border: 1px solid #dce6ed; border-radius: 12px; background: #fbfdff; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1rem 0; }
.metric { padding: .85rem; border-radius: 12px; background: #eef5f9; text-align: center; }
.metric strong { display: block; color: #08324e; font-size: 1.65rem; }
.metric span { color: #617588; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.rag { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.rag--red { background: #ffe4e4; color: #9c2929; }
.rag--amber { background: #fff0c9; color: #78520b; }
.rag--green { background: #daf7e8; color: #176344; }
.check-list { display: grid; gap: .65rem; }
.check-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .75rem; border: 1px solid #dce6ed; border-radius: 10px; }
.check-item input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.check-item strong { display: block; color: #1b3448; }
.check-item small { display: block; margin-top: .2rem; color: #6c7d8c; }
.passport { padding: 1.3rem; border: 2px solid #102e45; background: #fff; color: #122a3d; }
.passport__head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 3px solid #00aeef; padding-bottom: .8rem; }
.passport__grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-top: 1rem; }
.passport dl { display: grid; grid-template-columns: 9rem 1fr; gap: .45rem .8rem; margin: 0; }
.passport dt { color: #637587; font-weight: 700; }
.passport dd { margin: 0; overflow-wrap: anywhere; }
.qrbox { width: 220px; min-height: 220px; display: grid; place-items: center; padding: 8px; border: 1px solid #d1dce5; background: #fff; }
.file-list { display: grid; gap: .5rem; margin-top: .7rem; }
.file-pill { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border-radius: 9px; background: #f1f5f8; font-size: .82rem; }
.suite-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e0e8ee; }
.suite-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #00aeef, #27d7a1); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.screen-only { display: initial; }
.print-only { display: none; }
@media (max-width: 820px) { .suite-grid { grid-template-columns: 1fr; } .field-grid { grid-template-columns: 1fr; } .repeat-row, .repeat-row--two { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: 1fr; } .passport__grid { grid-template-columns: 1fr; } .qrbox { width: 100%; } }
@media print { header, .footer, .product-hero, .screen-only, .suite-panel__head, .suite-main > .suite-shell > .suite-grid > :first-child { display: none !important; } body, .suite-main { background: #fff !important; } .suite-main { padding: 0; } .suite-shell { width: 100%; } .suite-grid { display: block; } .suite-panel { border: 0; box-shadow: none; } .suite-panel__body { padding: 0; } .print-only { display: block; } }