/* KognitCapture site — components the Automatize base (site.css) does not have.
   Same vocabulary: hairlines, no radius, no shadow, mono for labels, numbers instead of icons. */

/* ---------- brand ---------- */
.brand-mark { font-size:15px; }
.brand small { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }

/* ---------- role variants ----------
   Every variant is in the HTML. Without a role (or without JS) the "all" variant shows. */
html:not([data-role]) [data-for]:not([data-for~="all"]),
html[data-role="finance"] [data-for]:not([data-for~="finance"]),
html[data-role="ops"] [data-for]:not([data-for~="ops"]),
html[data-role="it"] [data-for]:not([data-for~="it"]),
html[data-role="dev"] [data-for]:not([data-for~="dev"]),
html[data-role="sec"] [data-for]:not([data-for~="sec"]),
html[data-role="exec"] [data-for]:not([data-for~="exec"]),
html[data-role="partner"] [data-for]:not([data-for~="partner"]) { display:none !important; }

/* items tagged as relevant to the active role: ink rule, ink text, a small mono marker.
   (generated per role; keep the role list in sync with assets/js/role-core.js) */
html[data-role="finance"] .item[data-rel~="finance"],
html[data-role="ops"] .item[data-rel~="ops"],
html[data-role="it"] .item[data-rel~="it"],
html[data-role="dev"] .item[data-rel~="dev"],
html[data-role="sec"] .item[data-rel~="sec"],
html[data-role="exec"] .item[data-rel~="exec"],
html[data-role="partner"] .item[data-rel~="partner"] { border-top-color:var(--ink); }
html[data-role="finance"] .item[data-rel~="finance"]::before,
html[data-role="ops"] .item[data-rel~="ops"]::before,
html[data-role="it"] .item[data-rel~="it"]::before,
html[data-role="dev"] .item[data-rel~="dev"]::before,
html[data-role="sec"] .item[data-rel~="sec"]::before,
html[data-role="exec"] .item[data-rel~="exec"]::before,
html[data-role="partner"] .item[data-rel~="partner"]::before { content:"■ for your role"; display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; color:var(--accent); }
html[data-role="finance"] li[data-rel~="finance"],
html[data-role="ops"] li[data-rel~="ops"],
html[data-role="it"] li[data-rel~="it"],
html[data-role="dev"] li[data-rel~="dev"],
html[data-role="sec"] li[data-rel~="sec"],
html[data-role="exec"] li[data-rel~="exec"],
html[data-role="partner"] li[data-rel~="partner"] { color:var(--ink); }
html[data-role="finance"] .verts li[data-rel~="finance"],
html[data-role="ops"] .verts li[data-rel~="ops"],
html[data-role="it"] .verts li[data-rel~="it"],
html[data-role="dev"] .verts li[data-rel~="dev"],
html[data-role="sec"] .verts li[data-rel~="sec"],
html[data-role="exec"] .verts li[data-rel~="exec"],
html[data-role="partner"] .verts li[data-rel~="partner"] { border-top-color:var(--ink); }
html[data-role="finance"] .cap li[data-rel]:not([data-rel~="finance"])::before,
html[data-role="ops"] .cap li[data-rel]:not([data-rel~="ops"])::before,
html[data-role="it"] .cap li[data-rel]:not([data-rel~="it"])::before,
html[data-role="dev"] .cap li[data-rel]:not([data-rel~="dev"])::before,
html[data-role="sec"] .cap li[data-rel]:not([data-rel~="sec"])::before,
html[data-role="exec"] .cap li[data-rel]:not([data-rel~="exec"])::before,
html[data-role="partner"] .cap li[data-rel]:not([data-rel~="partner"])::before { content:"□"; color:var(--muted); }

/* focus filter: hide what is not tagged for the active role */
html[data-role-focus="on"][data-role="finance"] [data-rel]:not([data-rel~="finance"]),
html[data-role-focus="on"][data-role="ops"] [data-rel]:not([data-rel~="ops"]),
html[data-role-focus="on"][data-role="it"] [data-rel]:not([data-rel~="it"]),
html[data-role-focus="on"][data-role="dev"] [data-rel]:not([data-rel~="dev"]),
html[data-role-focus="on"][data-role="sec"] [data-rel]:not([data-rel~="sec"]),
html[data-role-focus="on"][data-role="exec"] [data-rel]:not([data-rel~="exec"]),
html[data-role-focus="on"][data-role="partner"] [data-rel]:not([data-rel~="partner"]) { display:none; }

/* ---------- role bar (under the header) ---------- */
.role-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--muted); }
.role-bar b { color:var(--ink); font-weight:500; }
.role-bar .spacer { flex:1; }
.role-bar button { font:inherit; min-height:28px; padding:0 10px; background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; }
.role-bar button:hover:not(:disabled) { background:var(--tint); }
.role-bar button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); border-color:var(--btn); }
.role-bar button:disabled { color:var(--muted); cursor:not-allowed; }
html:not(.js) .role-bar { display:none; }

/* ---------- role picker (dialog + inline) ---------- */
.role-dialog { width:min(880px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--ink); background:var(--bg); color:var(--ink); overflow:auto; }
.role-dialog::backdrop { background:rgba(0,0,0,.55); }
.role-dialog .inner { padding:clamp(20px,3vw,36px); }
.role-dialog .h-big { margin-bottom:10px; }
.role-dialog .sub { max-width:none; margin-bottom:22px; font-size:15px; }
.role-dialog .foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; font-size:12px; color:var(--muted); }
.roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.roles button, .roles a { display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:16px 16px 18px; min-height:112px; background:var(--bg); color:var(--ink); border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; font:inherit; text-decoration:none; }
.roles button:hover, .roles a:hover { background:var(--tint); }
.roles button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); }
.roles button[aria-pressed="true"] .d, .roles button[aria-pressed="true"] .num { color:inherit; opacity:.75; }
.roles .t { font-size:16px; }
/* Partner link tile: the one coloured tile on the site (signal yellow, dark text, 15:1), with a
   light sweep, a pulsing frame and a moving arrow, so it cannot be mistaken for the chosen role. */
.roles a[data-role-link] { --flash:#FFD400; --flashInk:#111111; position:relative; overflow:hidden; isolation:isolate; background:var(--flash); color:var(--flashInk); animation:partnerPulse 2.4s ease-in-out infinite; }
.roles a[data-role-link] .num, .roles a[data-role-link] .d { color:inherit; }
.roles a[data-role-link] .num { font-weight:700; }
.roles a[data-role-link] .t { font-size:20px; font-weight:700; letter-spacing:-.01em; }
.roles a[data-role-link] .arr { display:inline-block; animation:partnerArrow 1.2s ease-in-out infinite; }
.roles a[data-role-link]::after { content:""; position:absolute; inset-block:0; inset-inline-start:0; inline-size:45%; z-index:-1; background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform:translateX(-120%); animation:partnerSweep 2.8s ease-in-out infinite; pointer-events:none; }
.roles a[data-role-link]:hover { background:var(--flash); box-shadow:inset 0 0 0 4px var(--flashInk); animation:none; }
.roles a[data-role-link]:hover .arr { animation-duration:.5s; }
@keyframes partnerSweep { 0%, 45% { transform:translateX(-120%); } 100% { transform:translateX(340%); } }
@keyframes partnerArrow { 0%, 100% { transform:none; } 50% { transform:translateX(7px); } }
@keyframes partnerPulse { 0%, 100% { box-shadow:inset 0 0 0 0 var(--flashInk); } 50% { box-shadow:inset 0 0 0 3px var(--flashInk); } }
@media (prefers-reduced-motion: reduce) { .roles a[data-role-link], .roles a[data-role-link] .arr, .roles a[data-role-link]::after { animation:none; } }
.roles .d { margin:0; }

/* ---------- in-page table of contents ---------- */
.toc { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0; border-bottom:1px solid var(--line); }
.toc a { font-family:var(--mono); font-size:12px; padding:5px 9px; border:1px solid var(--line); }
.toc a:hover { background:var(--ink); color:var(--bg); text-decoration:none; }

/* ---------- pipeline ---------- */
.pipe { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--line); counter-reset:pipe; }
.pipe li { padding:16px 16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); counter-increment:pipe; }
.pipe li::before { content:counter(pipe, decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; }
.pipe .t { font-size:17px; }
.pipe .d { font-size:13.5px; }
.pipe .k { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:10px; display:block; }

/* ---------- detailed feature blocks ---------- */
.block { padding:clamp(28px,3.4vw,44px) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(20px,4vw,56px); align-items:start; scroll-margin-top:16px; }
.block > header .eyebrow { margin-bottom:12px; }
.block > header .h-big { margin-bottom:12px; }
.block > header p { font-size:15px; color:var(--muted); margin:0 0 14px; text-wrap:pretty; }
.block .items { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:0 28px; }
.item { border-top:1px solid var(--line); padding:14px 0 16px; }
.item .t { font-size:15.5px; }
.item .d { font-size:14px; margin-top:5px; line-height:1.5; }
.item .o { font-family:var(--mono); font-size:11.5px; line-height:1.55; color:var(--muted); margin-top:8px; display:block; }
@media (max-width:860px) { .block { grid-template-columns:1fr; } }

/* ---------- data tables (full container width, scroll on small screens) ---------- */
.tbl-wrap { width:100%; overflow-x:auto; margin-top:18px; border-top:1px solid var(--ink); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.tbl th, .tbl td { padding:11px 16px 11px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-weight:400; text-wrap:pretty; }
.tbl thead th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tbl tbody th { font-weight:600; }
.tbl td.mono, .tbl .n { font-family:var(--mono); font-size:12.5px; }
.tbl .yes::before { content:"■ "; font-size:9px; vertical-align:1px; }
.tbl .no { color:var(--muted); }
.tbl .no::before { content:"□ "; font-size:9px; vertical-align:1px; }
.tbl caption { caption-side:bottom; text-align:left; font-size:12px; color:var(--muted); padding-top:12px; }

/* ---------- FAQ ---------- */
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { display:grid; grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; padding:16px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); font-weight:400; text-align:right; }
.faq details[open] summary::after { content:"−"; }
.faq summary:hover { background:var(--tint); }
.faq .a { padding:0 32px 20px 44px; font-size:15.5px; line-height:1.55; color:var(--muted); max-width:900px; text-wrap:pretty; }
.faq .a p { margin:0 0 10px; }
.faq .a p:last-child { margin:0; }
@media (max-width:560px) { .faq .a { padding:0 0 18px; } }

/* ---------- code sample ---------- */
.code { margin:14px 0 0; padding:16px 18px; background:var(--tint); border-left:2px solid var(--ink); font-family:var(--mono); font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre; tab-size:2; }
.code .c { color:var(--muted); }

/* ---------- role panel (home) ---------- */
.for-you { border:1px solid var(--ink); padding:clamp(18px,2.6vw,30px); margin-top:22px; }
.for-you .h-big { margin:8px 0 12px; }
.for-you .links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ---------- pricing ---------- */
/* Use-case page: heading of one kit family above its table. */
.tbl-kits { table-layout:fixed; min-width:860px; }
.tbl-kits th:nth-child(1) { width:15%; } .tbl-kits th:nth-child(2) { width:14%; } .tbl-kits th:nth-child(4) { width:13%; } .tbl-kits th:nth-child(5) { width:15%; } .tbl-kits th:nth-child(6) { width:7%; }
.tbl-kits thead th { white-space:normal; }
.verts .d a { text-decoration:underline; text-underline-offset:2px; }
.h-kit { display:flex; align-items:baseline; gap:12px; font-size:17px; font-weight:600; letter-spacing:-.01em; margin:32px 0 0; scroll-margin-top:16px; }
.price-note { font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:12px; }
.incl { list-style:none; margin:0; padding:0; columns:2 260px; column-gap:32px; }
.incl li { break-inside:avoid; position:relative; padding:0 0 10px 18px; font-size:14.5px; text-wrap:pretty; }
.incl li::before { content:"■"; position:absolute; left:0; top:2px; font-size:9px; }
.incl.not li { color:var(--muted); }
.incl.not li::before { content:"□"; }

/* ---------- footer ---------- */
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px 32px; padding:32px 0 28px; border-bottom:1px solid var(--line); }
.foot-grid h2 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 12px; }
.foot-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14px; }
.foot-grid p { margin:0; font-size:14px; color:var(--muted); max-width:300px; text-wrap:pretty; }

/* ---------- small helpers ---------- */
.mt0 { margin-top:0; } .mb0 { margin-bottom:0; }
.mt-s { margin-top:12px; } .mt-m { margin-top:22px; } .mt-l { margin-top:34px; }
.mb-s { margin-bottom:12px; } .mb-m { margin-bottom:22px; } .mb-l { margin-bottom:30px; }
.tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tag.road { border-style:dashed; }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(24px,4vw,64px); }
.sec > .h-sec + .body { margin-top:10px; }
section[id], article[id] { scroll-margin-top:16px; }
@media print { .site-header, .role-bar, .role-dialog, .sec-cta, .site-footer nav { display:none !important; } }
button.btn-ghost { background:transparent; color:var(--ink); cursor:pointer; font-family:inherit; }
.form select { background:var(--bg); border:0; border-bottom:1px solid var(--ink); padding:12px 0; font-size:15px; font-family:'Instrument Sans', system-ui, sans-serif; letter-spacing:0; text-transform:none; color:var(--ink); }
.sol-item .t, .sol-item .d { display:block; }

/* ---------- pricing calculator ---------- */
html:not(.js) .js-only { display:none; }
.calc { border:1px solid var(--ink); padding:clamp(18px,2.6vw,30px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(20px,4vw,48px); }
.calc label, .calc .lbl { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.calc input[type="range"] { width:100%; accent-color:var(--btn); margin:0; height:28px; }
.calc input[type="text"] { width:100%; background:var(--bg); border:0; border-bottom:1px solid var(--ink); padding:10px 0; font:500 16px/1.2 var(--mono); color:var(--ink); }
.calc .presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.calc .presets button { font-family:var(--mono); font-size:12px; padding:5px 9px; background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; }
.calc .presets button:hover { background:var(--tint); }
.calc .presets button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); border-color:var(--btn); }
.calc .big { font-family:var(--mono); font-size:clamp(40px,6vw,64px); font-weight:500; letter-spacing:-.04em; line-height:1; }
.calc .pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.calc .stat b { font-size:20px; }

/* numbering follows display order, so role-based reordering never shows 08 before 06 */
[data-reorder] { counter-reset:blk; }
[data-reorder] > .block, [data-reorder] > .cap, [data-reorder] > .uc { counter-increment:blk; }
[data-reorder] > .block > header .eyebrow::before, [data-reorder] > .uc > .kicker::before { content:counter(blk, decimal-leading-zero) " · "; }
[data-reorder] > .cap > div > .num::before { content:counter(blk, decimal-leading-zero); }
.cap > .link-caps { grid-column:1 / -1; padding-left:0; }
.pipe-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:820px) { .pipe-6 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .pipe-6 { grid-template-columns:minmax(0,1fr); } }
/* inline role picker (home): compact tiles, descriptions live in the dialog */
.sec > .roles button { min-height:72px; }
details > summary.link-caps { cursor:pointer; }

/* ---------- comparison pages ---------- */
.incl.one { columns:auto; }
.verdict > div > .num { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.verdict .incl li { font-size:14.5px; color:var(--muted); }
.verdict p.d { font-size:14.5px; line-height:1.5; }
.items.wide { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); display:grid; gap:0 28px; }
.items.wide .incl li { font-size:13px; padding-bottom:6px; }
.items.wide a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---------- product screenshots and the live demo ---------- */
.shot { margin:22px 0 0; }
.shot img { display:block; width:100%; height:auto; border:1px solid var(--ink); background:var(--tint); }
.shot a:hover img { opacity:.92; }
.shot figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding-top:10px; font-size:13px; color:var(--muted); text-wrap:pretty; }
.shot figcaption b { color:var(--ink); font-weight:600; }
.shot figcaption .k { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.block > .shot { grid-column:1 / -1; margin-top:8px; }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:28px 24px; margin-top:8px; }
.shots .shot { margin:0; }
.shots .shot figcaption { display:block; }
.shots .shot figcaption b { display:block; margin-bottom:2px; }
.demo-pick { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.demo-pick button { font-family:var(--mono); font-size:12px; padding:7px 10px; background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; }
.demo-pick button:hover { background:var(--tint); }
.demo-pick button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); border-color:var(--btn); }
.demo-stage { position:relative; border:1px solid var(--ink); background:var(--tint); scroll-margin-top:12px; }
.demo-stage iframe { display:none; width:100%; height:min(860px, 88vh); border:0; background:#fff; }
.demo-stage.is-live iframe { display:block; }
.demo-stage.is-live .demo-poster { display:none; }
.demo-poster { position:relative; display:block; }
.demo-poster img { display:block; width:100%; height:auto; }
.demo-poster .go { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.55); }
html[data-theme="dark"] .demo-poster .go, html[data-theme="agentic"] .demo-poster .go { background:rgba(0,0,0,.5); }
@media (max-width:900px) { .demo-stage iframe { height:70vh; } }
.faq .a a, .info a.link-caps { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.calc select { width:100%; background:var(--bg); border:0; border-bottom:1px solid var(--ink); padding:10px 0; font:500 15px/1.2 'Instrument Sans', system-ui, sans-serif; color:var(--ink); }

/* ---------- extracted-fields strip under the hero screenshot ---------- */
.scan-out { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--line); margin-top:18px; }
.scan-out > div { display:grid; gap:3px; padding:12px 14px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.scan-out b { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; color:var(--muted); }
.scan-out span { font-size:15px; font-weight:600; }
.scan-out i { font-family:var(--mono); font-size:12px; font-style:normal; color:var(--muted); }
.scan-out .warn { background:var(--tint); box-shadow:inset 0 2px 0 var(--ink); }
.scan-out .warn i { color:var(--ink); }
.uc p.d { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; text-wrap:pretty; }

/* ---------- cost model chart ---------- */
.tco { position:relative; margin-top:18px; border-top:1px solid var(--ink); padding-top:14px; }
.tco-svg { display:block; width:100%; height:auto; overflow:visible; }
.tco-svg .grid { stroke:var(--line); stroke-width:1; }
.tco-svg .ax { stroke:var(--ink); stroke-width:1; }
.tco-svg .tick { font-family:var(--mono); font-size:11px; fill:var(--muted); }
.tco-svg .ln { stroke:var(--muted); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.tco-svg .ln-us { stroke:var(--ink); stroke-width:3; }
.tco-svg .ln-metered { stroke-dasharray:9 5; }
.tco-svg .ln-suite { stroke-dasharray:2 5; }
.tco-svg .ln-cloud { stroke-dasharray:12 4 2 4; }
.tco-svg .ln-build { stroke-dasharray:5 3; stroke-width:1.5; }
.tco-svg .lead { stroke:var(--line); stroke-width:1; }
.tco-svg .end { font-size:12px; fill:var(--muted); font-family:'Instrument Sans', system-ui, sans-serif; }
.tco-svg .end-us { fill:var(--ink); font-weight:700; }
.tco-svg .cross { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; }
.tco-svg .hit { fill:transparent; cursor:crosshair; }
.tco-tip { position:absolute; top:22px; min-width:250px; padding:10px 12px; background:var(--bg); border:1px solid var(--ink); font-size:12.5px; pointer-events:none; }
.tco-tip b { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; margin-bottom:6px; color:var(--muted); }
.tco-tip div { display:flex; justify-content:space-between; gap:16px; padding:2px 0; color:var(--muted); }
.tco-tip div.us { color:var(--ink); font-weight:700; }
.tco-tip i { font-family:var(--mono); font-style:normal; }
.tco-legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin:10px 0 0; padding:0; list-style:none; font-size:12.5px; color:var(--muted); }
.tco-legend li { display:flex; align-items:center; gap:8px; }
.tco-legend svg { width:34px; height:8px; flex:none; }
.tco-legend .us { color:var(--ink); font-weight:600; }
.seg { display:flex; gap:6px; flex-wrap:wrap; }
.calc .trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px; margin-top:18px; }
@media (max-width:700px) { .tco-svg .end, .tco-svg .lead { display:none; } }
.tbl tr.is-us th, .tbl tr.is-us td { font-weight:600; }
.tbl tr.is-us th::before { content:"■ "; font-size:9px; vertical-align:1px; }
.callout:empty { display:none; }
.savings { margin-top:14px; border-top:1px solid var(--ink); padding-top:16px; }
.savings .mode { grid-template-columns:minmax(200px,340px) minmax(0,1fr); }
.savings .mode-bar.neg > div { background:transparent; box-shadow:inset 0 0 0 1px var(--ink); }
.tbl th.grp { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; padding-top:22px; }
.tbl td.src { font-family:var(--mono); font-size:11.5px; overflow-wrap:anywhere; }
.tbl td.src a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (max-width:760px) { .savings .mode { grid-template-columns:1fr; } }

.shots .shot figcaption .k { display:block; white-space:normal; margin-top:2px; }
.calc input[type="range"][data-slide-for] { margin-top:6px; height:22px; }

/* ---------- language picker and Google Translate ---------- */
html:not(.js) .sc-lang { display:none; }
/* the header row has no room for a second label; the collapsed menu (960px and below) shows it */
@media (min-width:961px) { .sc-lang .sc-label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
.side-controls .lang-btn { display:inline-flex; align-items:center; gap:6px; padding:0 8px; color:var(--ink); }
.langs { grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr)); }
.roles.langs button { min-height:0; gap:2px; padding:12px 14px 14px; text-align:start; }
.langs .num { padding-top:0; font-size:11px; letter-spacing:.1em; }
.langs .t { font-size:15px; }
.langs .lang-group { grid-column:1 / -1; margin:0; padding:9px 14px; background:var(--tint); border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.lang-dialog .foot > span { flex:1 1 320px; max-width:64ch; text-wrap:pretty; }
.lang-dialog .foot a, #translation .body a { text-decoration:underline; text-underline-offset:3px; }
.lang-status { margin:0 0 18px; padding:12px 14px; border:1px solid var(--ink); font-size:14px; }
/* Google's own bar, tooltip and spinner are not shown: the picker above replaces them.
   Google sets `top:40px` on <body> as an inline style to make room for its bar. */
html[data-translate] body { top:0 !important; }
body > .skiptranslate, body > [class*="VIpgJd-"] { display:none !important; }
html[data-translate] font[class*="VIpgJd-"] { background-color:transparent !important; box-shadow:none !important; }