/* C5 · Outlook */
.hbadge { font: 700 11px var(--f-big); letter-spacing: .04em; text-transform: uppercase; padding: 7px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--mute); }
.h-ok { color: var(--buy); } .h-warn { color: var(--wait); } .h-bad { color: var(--bad); } .h-neu { color: var(--mute); }
.hchip .up { color: var(--buy); font-weight: 600; } .hchip .dn { color: var(--bad); font-weight: 600; }
.card.hold .hl { font: 700 24px/1.1 var(--f-big); letter-spacing: -.03em; }
.card .sub { font-size: 13px; color: var(--mute); }
.card .sub b { color: var(--text); }
.marks { display: flex; flex-wrap: wrap; gap: 6px; }
.marks .mk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mute); background: var(--raise); padding: 3px 8px 3px 6px; border-radius: 99px; }
i[class^="mk-"] { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.mk-ok { background: var(--buy); } .mk-warn { background: var(--wait); } .mk-bad { background: var(--bad); }
.card .more, .ol .more { all: unset; cursor: pointer; margin-top: auto; font-size: 13px; font-weight: 600; color: var(--fair); }
.ol { padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: 2px; }
.ol h3 { font: 600 15px var(--f-ui); margin: var(--sp-4) 0 var(--sp-2); }
.ol-sum { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.ol-sum .hl { font: 700 20px var(--f-big); letter-spacing: -.02em; }
.ol-sum span { font-size: 13px; color: var(--mute); }
.chk { display: grid; grid-template-columns: 12px 150px minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.chk i { transform: translateY(-1px); }
.chk .n { font-weight: 600; } .chk .d { color: var(--mute); }
.setrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-top: var(--sp-3); border-radius: var(--r-s); background: var(--raise); }
.setrow img { height: 28px; max-width: 90px; object-fit: contain; }
.setrow span { flex: 1; min-width: 0; } .setrow b { display: block; } .setrow small { color: var(--mute); font-size: 12px; }
.setrow .more { margin: 0; }
.ptab { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptab th { text-align: right; font-size: 12px; font-weight: 600; color: var(--mute); padding: 6px 8px; }
.ptab td { text-align: right; padding: 8px; border-top: 1px solid var(--line); }
.ptab td:first-child, .ptab th:first-child { text-align: left; color: var(--mute); }
.ptab td:last-child { color: var(--mute); }
.how { margin-top: var(--sp-3); font-size: 13px; color: var(--mute); }
.how summary { cursor: pointer; font-weight: 600; color: var(--text); }
.how p { margin-top: var(--sp-2); line-height: 1.5; }
.ol .sub { font-size: 14px; color: var(--mute); line-height: 1.5; margin: 0 0 var(--sp-2); }
.ol .up { color: var(--buy); font-weight: 600; } .ol .dn { color: var(--bad); font-weight: 600; }
.projbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.projbar .sub { font-size: 12px; color: var(--faint); }
.ok-wrap { padding: var(--sp-3) 0; }
.okcall { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); background: color-mix(in srgb, currentColor 10%, transparent); display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
.okcall b { font: 700 18px var(--f-big); letter-spacing: -.02em; }
.okcall span { color: var(--text); font-size: 14px; }
.okbar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px; gap: var(--sp-3); align-items: center; padding: 6px 0; font-size: 14px; }
.okbar span { color: var(--mute); }
.okbar i { height: 14px; border-radius: 7px; display: block; }
.okbar i.sealed { background: var(--v); } .okbar i.inside { background: var(--mute); }
.okbar b { text-align: right; font-weight: 600; }
.ok-wrap h3 { font: 600 15px var(--f-ui); margin: var(--sp-4) 0 var(--sp-1); }
@media (max-width: 760px) {
  .seg { overflow-x: auto; scrollbar-width: none; } .seg button { flex: none; padding: 8px 12px; }
  .chk { grid-template-columns: 12px minmax(0, 1fr); } .chk .d { grid-column: 2; }
  .okbar { grid-template-columns: 1fr 80px; } .okbar span { grid-column: 1 / -1; } .okbar i { grid-column: 1; }
  .ptab { font-size: 13px; } .ptab th, .ptab td { padding: 6px 4px; }
}

.ol h3.first { margin-top: 0; }
.ol h4 { font: 600 13px var(--f-ui); color: var(--mute); margin: var(--sp-4) 0 var(--sp-1); }
.ptab.ev td:nth-child(2) { color: var(--mute); text-align: left; } .ptab.ev th:nth-child(2) { text-align: left; }
.ptab.ev sup { color: var(--faint); }
.labs { display: inline-block; font: 700 9px var(--f-big); letter-spacing: .06em; text-transform: uppercase; color: #C9A2FF; background: color-mix(in srgb, #C9A2FF 15%, transparent); padding: 2px 6px; border-radius: 5px; vertical-align: 2px; margin-left: 4px; }
button.hbadge { all: unset; cursor: pointer; font: 700 11px var(--f-ui); letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--mute); display: inline-flex; gap: 6px; align-items: center; }
.ol .stats { padding: 0; }

.osub { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, #FFB84D 7%, var(--raise)); margin-bottom: var(--sp-4); }
.osub button { all: unset; cursor: pointer; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--mute); white-space: nowrap; }
.osub button[aria-selected=true] { color: #FFD27A; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 184, 77, .45); }
.osub button { position: relative; overflow: visible; }
.osub .pro { position: absolute; top: -7px; right: 6px; font-size: 8px; padding: 2px 5px; }   /* corner badge, so it never squeezes the label */
.ol .lede { font-size: 14px; color: var(--mute); margin: 0 0 var(--sp-3); }
.ol .stats small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
@media (max-width: 760px) { .osub button { font-size: 13px; padding: 9px 2px; } }

/* products like this: who we compared, one dot each, then money */
.lt-who { font-size: 14px; color: var(--mute); line-height: 1.45; margin: 0 0 var(--sp-3); }
.lt-who b { color: var(--text); font-weight: 600; }
.lt-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-dot { width: 18px; height: 18px; border-radius: 50%; cursor: help; }
.lt-dot.up { background: var(--buy); } .lt-dot.dn { background: var(--bad); }
.lt-count { font-size: 14px; color: var(--mute); margin: var(--sp-2) 0 var(--sp-4); }
.lt-count b { font: 700 18px var(--f-big); letter-spacing: -.02em; } .lt-count b.up { color: var(--buy); } .lt-count b.dn { color: var(--bad); }
.lt-money { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-3); }
.lt-money > div { background: var(--raise); border-radius: var(--r-s); padding: var(--sp-3); }
.lt-money span { display: block; font-size: 12px; color: var(--mute); }
.lt-money b { display: block; font: 700 18px var(--f-big); letter-spacing: -.02em; margin-top: 2px; }
.lt-money small { font-size: 12px; color: var(--mute); }
.lt b.up, .lt-list b.up { color: var(--buy); } .lt b.dn, .lt-list b.dn { color: var(--bad); }
.lt-list { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.lt-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: var(--sp-3); padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.lt-list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .lt-list small { color: var(--faint); } .lt-list b { text-align: right; font-weight: 600; }
@media (max-width: 760px) { .lt-money { grid-template-columns: 1fr 1fr; } .lt-money > div:first-child { grid-column: 1 / -1; } .lt-list > div { grid-template-columns: minmax(0, 1fr) 56px; } .lt-list small { display: none; } }