#view-products { max-width: none; }
.op-shell { --op-navy:#0a244d; --op-ink:#112847; --op-muted:#68809a; --op-line:#dbe6ef; --op-teal:#11b6c7; color:var(--op-ink); display:grid; gap:20px; padding-bottom:36px; }
.op-shell * { box-sizing:border-box; }
.op-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; min-height:196px; padding:29px 36px; border-radius:22px; color:white; background:radial-gradient(circle at 84% 74%,rgba(249,209,77,.13),transparent 26%),radial-gradient(circle at 76% 36%,#174c77 0,transparent 36%),linear-gradient(119deg,#081d42,#123461 72%,#0b294c); box-shadow:0 18px 34px rgba(8,30,67,.15); }
.op-hero::after { content:""; position:absolute; width:440px; height:440px; border:1px solid rgba(85,224,232,.18); border-radius:50%; right:-80px; top:-235px; pointer-events:none; }
.op-hero h2 { position:relative; z-index:1; margin:10px 0 7px; font-size:clamp(26px,3vw,39px); letter-spacing:-.055em; line-height:1.08; }
.op-hero p { position:relative; z-index:1; margin:0; max-width:610px; color:#bad2e8; font-size:13px; line-height:1.6; }
.op-kicker { display:block; color:#0a91af; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.op-hero .op-kicker { color:#5cdeeb; }
.op-hero-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin-top:19px; }
.op-hero-meta span { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid rgba(159,212,234,.27); border-radius:30px; background:rgba(255,255,255,.07); color:#d9eaf5; font-size:10px; font-weight:700; }
.op-hero-orbit { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 116px; height:116px; margin-right:36px; border:1px solid rgba(92,222,235,.38); border-radius:50%; background:radial-gradient(circle,rgba(16,176,198,.23),rgba(20,98,138,.08) 68%,transparent 69%); box-shadow:0 0 0 17px rgba(118,211,224,.055),0 0 0 35px rgba(118,211,224,.035); }
.op-hero-orbit span { color:#f8d956; font-size:42px; text-shadow:0 0 20px rgba(246,219,99,.43); }
.op-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.op-segmented { display:inline-flex; gap:3px; padding:4px; border:1px solid var(--op-line); border-radius:12px; background:#eaf1f8; }
.op-segmented button { border:0; border-radius:9px; padding:10px 15px; background:transparent; color:#657b95; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.op-segmented button[aria-pressed="true"] { background:#fff; color:#0c5d8b; box-shadow:0 2px 8px rgba(35,68,110,.12); }
.op-scenario { display:flex; align-items:center; gap:9px; color:#617891; font-size:11px; font-weight:800; }
.op-scenario select { width:auto; min-width:159px; border:1px solid var(--op-line); border-radius:9px; background:#fff; padding:9px 10px; color:var(--op-ink); font:inherit; }
.op-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.op-metric { position:relative; display:flex; flex-direction:column; gap:8px; min-height:109px; padding:18px 19px; border:1px solid #e4edf4; border-radius:15px; background:white; box-shadow:0 6px 20px rgba(14,43,81,.055); }
.op-metric::before { content:""; position:absolute; top:0; left:18px; width:36px; height:3px; border-radius:0 0 5px 5px; background:#1e9ab6; }
.op-metric span { color:#657c96; font-size:11px; font-weight:700; }
.op-metric strong { color:#0b2448; font-size:clamp(19px,2.1vw,28px); line-height:1; letter-spacing:-.045em; white-space:nowrap; }
.op-metric small { color:#8194a8; font-size:10px; line-height:1.4; }
.op-metric.op-positive::before { background:#10b69e; }.op-metric.op-negative::before { background:#e16666; }.op-metric.op-warm::before { background:#f0c33c; }.op-metric.op-muted::before { background:#a0b4c9; }
.op-tabs { display:flex; gap:4px; overflow:auto; padding:4px; border:1px solid var(--op-line); border-radius:13px; background:#eaf1f7; scrollbar-width:thin; }
.op-tabs button { flex:1 0 auto; min-width:max-content; padding:12px 13px; border:0; border-radius:9px; color:#5f7893; background:transparent; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.op-tabs button[aria-current="page"] { color:#0a6594; background:white; box-shadow:inset 0 -2px #f0c33c,0 2px 9px rgba(28,61,99,.11); }
.op-stack { display:grid; gap:16px; }
.op-card { min-width:0; padding:24px; border:1px solid #e1ebf2; border-radius:18px; background:#fff; box-shadow:0 6px 22px rgba(17,46,85,.05); }
.op-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:20px; }
.op-section-head h2 { margin:5px 0 3px; color:#11294b; font-size:19px; letter-spacing:-.035em; }
.op-section-head p { margin:0; color:#7890a7; font-size:11px; line-height:1.5; }
.op-badge { display:inline-block; padding:7px 10px; border-radius:50px; color:#0d7897; background:#e8f8fa; font-size:9px; font-weight:900; letter-spacing:.08em; white-space:nowrap; }
.op-statement-rows { border:1px solid #e6eef4; border-radius:12px; overflow:hidden; }
.op-statement-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px; border-bottom:1px solid #edf2f6; font-size:11px; }
.op-statement-row:last-child { border-bottom:0; }.op-statement-row:nth-child(even) { background:#f9fbfd; }
.op-statement-row strong { display:block; font-weight:700; }.op-statement-row small { display:block; margin-top:3px; color:#8297a9; font-size:10px; }
.op-statement-row b { white-space:nowrap; color:#173453; font-size:12px; }
.op-statement-row.op-strong { color:#095d87; background:#eef8fa; }.op-statement-row.op-total { padding:16px; color:white; background:linear-gradient(90deg,#0b2e58,#115b83); }.op-statement-row.op-total b { color:white; font-size:17px; }.op-statement-row.op-total.op-loss { background:linear-gradient(90deg,#743e46,#974e55); }
.op-statement-foot { display:flex; flex-wrap:wrap; gap:14px 25px; align-items:center; margin-top:18px; padding:13px 16px; border-radius:10px; background:#f3f7fa; }
.op-statement-foot div { display:flex; gap:6px; flex-direction:column; font-size:10px; color:#688098; }.op-statement-foot strong { font-size:12px; color:#183653; }.op-statement-foot p { margin:0 0 0 auto; max-width:350px; color:#8998a9; font-size:10px; line-height:1.5; }
.op-insight { display:flex; align-items:center; gap:17px; padding:17px 21px; border:1px solid #d4eef0; border-radius:15px; background:linear-gradient(110deg,#e9f8f8,#f6fbfc); }
.op-insight-mark { display:grid; place-items:center; width:37px; height:37px; flex:0 0 37px; border-radius:10px; color:#0b9eb1; background:#d8f0f1; font-size:23px; }.op-insight p { margin:4px 0 0; font-size:11px; line-height:1.55; color:#3b6381; }
.op-product-list,.op-cohorts { display:grid; gap:9px; }.op-product,.op-cohort { border:1px solid #e2ebf1; border-radius:12px; background:#fbfdfe; overflow:hidden; }
.op-product summary,.op-cohort summary { display:flex; align-items:center; gap:14px; padding:15px 17px; cursor:pointer; list-style:none; }.op-product summary::-webkit-details-marker,.op-cohort summary::-webkit-details-marker { display:none; }
.op-product-name,.op-cohort summary>span:first-child { flex:1; min-width:0; }.op-product summary strong,.op-cohort summary strong { display:block; font-size:12px; color:#123251; }.op-product summary small,.op-cohort summary small { display:block; margin-top:3px; font-size:10px; color:#879aad; }
.op-product-figure,.op-cohort summary>span:nth-child(2) { text-align:right; }.op-product-figure b,.op-cohort summary b { display:block; color:#0c7699; font-size:15px; }.op-chevron { color:#7195aa; font-size:20px; transition:transform .15s; }.op-product[open] .op-chevron,.op-cohort[open] .op-chevron { transform:rotate(180deg); }
.op-product-track { height:3px; margin:0 17px; background:#ebf0f4; border-radius:4px; }.op-product-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#1796c1,#16c6c8); }
.op-product-detail,.op-cohort-summary,.op-cost-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:17px; }.op-product-detail .op-metric,.op-cohort-summary .op-metric,.op-cost-grid .op-metric { min-height:86px; padding:14px; box-shadow:none; }.op-product-detail .op-metric strong,.op-cohort-summary .op-metric strong,.op-cost-grid .op-metric strong { font-size:17px; }
.op-cost-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; }
.op-table-wrap { overflow-x:auto; border:1px solid #e5edf3; border-radius:11px; }.op-table { width:100%; border-collapse:collapse; font-size:11px; }.op-table th { padding:11px 13px; color:#6e859e; background:#f3f7fa; text-align:left; font-size:10px; white-space:nowrap; }.op-table td { padding:11px 13px; border-top:1px solid #eaf0f4; color:#314f69; white-space:nowrap; }.op-table td strong { color:#12314f; }.op-table td small { display:block; margin-top:3px; color:#8c9fb0; font-size:9px; }
.op-cohort .op-table-wrap { margin:0 17px 17px; }.op-cohort .op-cohort-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.op-empty { padding:18px; border-radius:10px; background:#f5f8fb; color:#748ba1; font-size:11px; line-height:1.5; }.op-footnote { margin:13px 0 0; color:#8396a8; font-size:10px; line-height:1.5; }
.op-notice { padding:13px 16px; border:1px solid #cae9eb; border-radius:11px; color:#276278; background:#eaf8f9; font-size:11px; line-height:1.5; }.op-notice-error { border-color:#f0c6c6; color:#9c4646; background:#fff2f2; }
.op-disclosure { margin-top:17px; border:1px solid #dce8ee; border-radius:11px; background:#f8fbfc; }.op-disclosure>summary { padding:13px 16px; color:#0a7898; font-size:11px; font-weight:800; cursor:pointer; }.op-disclosure[open]>summary { border-bottom:1px solid #e4eef1; }
.op-form { display:grid; gap:15px; padding:16px; }.op-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.op-form label { display:flex; flex-direction:column; gap:6px; color:#5f7893; font-size:10px; font-weight:800; }.op-form label small { font-weight:500; }.op-form input,.op-form select,.op-form textarea { width:100%; min-width:0; border:1px solid #d9e5ed; border-radius:8px; padding:9px 10px; color:#163350; background:#fff; font:inherit; font-size:11px; font-weight:500; }.op-form input:focus,.op-form select:focus,.op-form textarea:focus { outline:2px solid #5fcbd3; outline-offset:1px; }.op-form-actions { display:flex; gap:9px; flex-wrap:wrap; }.op-button { display:inline-block; width:max-content; border:0; border-radius:9px; padding:11px 16px; background:#0b5d89; color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }.op-button:hover { background:#084e74; }.op-button-light { color:#346985; background:#e9f2f7; }.op-button-light:hover { background:#dceaf2; }.op-text-button { border:0; padding:5px; background:transparent; color:#0a7e9e; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.op-form [hidden] { display:none !important; }
.op-policy-locked { display:grid; gap:15px; min-width:0; margin:0; padding:0; border:0; }.op-policy-locked[disabled] { opacity:.74; }.op-version-list { display:grid; gap:7px; }.op-version-list>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border:1px solid #e4edf2; border-radius:9px; background:#f8fbfc; }.op-version-list strong { display:block; color:#164366; font-size:11px; }.op-version-list small { color:#8c9dae; font-size:9px; }.op-version-detail { margin-top:15px; padding-top:15px; border-top:1px solid #e1eaf0; }.op-version-detail h3 { margin:0 0 4px; font-size:13px; color:#153957; }.op-version-detail>p { color:#788fa3; font-size:10px; line-height:1.5; }
.op-policy-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; color:#163553; font-size:13px; }.op-policy-meta span { color:#8295a9; font-size:10px; }.op-policy-product,.op-curve { margin:0; padding:15px; border:1px solid #e0eaf0; border-radius:11px; }.op-policy-product legend,.op-curve legend { padding:0 7px; color:#0b658d; font-size:12px; font-weight:800; }.op-policy-product h4 { margin:15px 0 8px; color:#668097; font-size:10px; }.op-fee-row { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr auto; align-items:end; gap:8px; margin:7px 0; }.op-fee-row label span,.op-fee-basis { color:#8b9aaa; font-size:9px; }.op-fee-basis { align-self:center; }.op-fee-remove { height:32px; width:32px; border:1px solid #ead3d3; border-radius:7px; background:#fff5f5; color:#a65353; font-size:18px; cursor:pointer; }.op-curve p { margin:0 0 12px; color:#8499a8; font-size:10px; }.op-curve-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }.op-opening-form { grid-template-columns:minmax(0,260px) auto; align-items:end; justify-content:start; padding:0; }.op-notes>summary { color:#386d88; font-size:11px; font-weight:800; cursor:pointer; }.op-notes li { margin:6px 0; color:#6c8398; font-size:10px; line-height:1.5; }
.op-loading { padding:38px; border-radius:16px; background:#fff; color:#59829a; font-size:13px; text-align:center; }
@media(max-width:1100px) { .op-product-detail { grid-template-columns:repeat(2,minmax(0,1fr)); }.op-form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .op-hero { min-height:0; padding:26px; }.op-hero-orbit { display:none; }.op-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.op-product-detail,.op-cost-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.op-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.op-fee-row { grid-template-columns:1fr 1fr; }.op-curve-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.op-statement-foot p { margin-left:0; }.op-tabs button { flex:none; } }
@media(max-width:520px) { .op-shell { gap:13px; }.op-hero { padding:22px; border-radius:16px; }.op-hero h2 { font-size:26px; }.op-toolbar { align-items:stretch; }.op-segmented,.op-scenario { width:100%; }.op-segmented button { flex:1; }.op-scenario { justify-content:space-between; }.op-metrics { gap:8px; }.op-metric { min-height:102px; padding:15px; }.op-metric strong { font-size:18px; white-space:normal; }.op-card { padding:17px; }.op-section-head h2 { font-size:17px; }.op-product-detail,.op-cohort .op-cohort-summary,.op-cost-grid,.op-form-grid { grid-template-columns:1fr 1fr; }.op-fee-row { grid-template-columns:1fr; }.op-curve-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.op-opening-form { grid-template-columns:1fr; }.op-statement-row { padding:11px; gap:10px; }.op-statement-row b { font-size:11px; } }