/* ============================================================================
   pricing-calc.css — shared stylesheet for the pricing calculator hub
   (web/pricing.html → /pricing) and the per-vendor spokes
   (web/pricing/datadog.html, web/pricing/grafana.html → /pricing/<vendor>).
   Built entirely on tokens.css. Link AFTER tokens.css.
   From spokes (web/pricing/*) reference as ../pricing-calc.css.
   ============================================================================ */
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  main { position: relative; z-index: 1; }

  /* ---- hero ---- */
  .pc-hero { position: relative; overflow: hidden; padding: 80px 32px 40px; }
  .pc-hero .grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    opacity: 0.5;
  }
  .pc-hero-inner { max-width: var(--content-max); margin: 0 auto; position: relative; }
  .pc-hero h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1.05; margin: 16px 0 14px; max-width: 18ch; }
  .pc-hero h1 em {
    font-style: italic; font-family: var(--mono); font-weight: 400; letter-spacing: -0.01em;
    background: var(--brand-cta); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .pc-hero .lead { font-size: var(--fs-lead); color: var(--fg-2); max-width: 64ch; line-height: var(--lh-relaxed); }

  /* ---- hub: calculator cards ---- */
  .pc-cards { max-width: var(--content-max); margin: 0 auto; padding: 8px 32px 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  @media (max-width: 860px) { .pc-cards { grid-template-columns: 1fr; } }
  .pc-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--bg-1), var(--bg)); padding: 28px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
  .pc-card .pc-card-eyebrow { font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--accent); }
  .pc-card h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--ls-h3); margin: 0; color: var(--accent); }
  .pc-card p { font-size: var(--fs-body-sm); color: var(--fg-2); line-height: var(--lh-relaxed); margin: 0; }
  .pc-card .pc-card-drivers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .pc-card .pc-card-drivers span { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 9px; }
  .pc-card .pc-card-go { margin-top: auto; font-family: var(--mono); font-size: var(--fs-mono); color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
  .pc-card.soon { opacity: 0.6; pointer-events: none; }
  .pc-card.soon .pc-card-go { color: var(--fg-3); }
  .pc-card { position: relative; overflow: hidden; }
  .pc-ribbon { position: absolute; top: 18px; right: -42px; transform: rotate(45deg); width: 160px; text-align: center; font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--bg); background: linear-gradient(90deg, var(--accent), var(--warn)); padding: 5px 0; box-shadow: 0 2px 8px oklch(0 0 0 / 0.35); }

  /* ---- calculator shell ---- */
  .pc-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 32px 40px; position: relative; }
  .calc-tabs { display: flex; gap: 6px; border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--radius-pill); padding: 5px; width: fit-content; margin-bottom: 24px; }
  .calc-tab { font-family: var(--sans); font-size: var(--fs-body-sm); color: var(--fg-2); background: transparent; border: 0; padding: 9px 22px; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); text-decoration: none; }
  .calc-tab:hover { color: var(--fg); }
  .calc-tab.is-active { background: var(--brand-cta); color: var(--bg); font-weight: 600; }

  .calc-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; padding: 16px 18px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .calc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
  .preset { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 9px 14px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
  .preset:hover { border-color: var(--accent); }
  .preset.is-auto { border-style: dashed; }
  .preset.is-active { border-color: transparent; background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent); }
  .preset-name { font-size: var(--fs-body-sm); font-weight: 500; color: var(--fg); }
  .preset-tag { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); letter-spacing: 0.02em; }

  .calc-cycle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2); }
  .seg { font-family: var(--mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--fg-3); background: transparent; border: 0; padding: 9px 16px; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
  .seg.is-active { color: var(--fg); background: var(--bg-3); }
  .cycle-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
  .cycle-label { font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent); text-transform: uppercase; letter-spacing: var(--ls-meta); }

  /* ---- per-stream drag meter (inside module cards) ---- */
  .fld-range { -webkit-appearance: none; appearance: none; accent-color: var(--accent); width: 100%; height: 4px; margin: 10px 0 4px; background: transparent; border-radius: 999px; outline: none; }
  .fld-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--range-p, 0%), var(--line) var(--range-p, 0%)); }
  .fld-range::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--range-p, 0%), var(--line) var(--range-p, 0%)); }
  .fld-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-1); box-shadow: 0 0 0 1px var(--line); cursor: grab; }
  .fld-range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--bg-1); border-radius: 50%; background: var(--accent); cursor: grab; }
  .fld-range:active::-webkit-slider-thumb { cursor: grabbing; }
  .fld-range:disabled { opacity: 0.4; pointer-events: none; }
  .fld-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); }

  .tier-tag { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); margin-left: 8px; }
  /* BYOC infra breakdown (collapsible) */
  .infra-break { grid-column: 1 / -1; }
  .infra-break > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 2px 0; }
  .infra-break > summary::-webkit-details-marker { display: none; }
  .infra-sum-name { font-size: var(--fs-body-sm); color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
  .infra-sum-name::before { content: '▸'; font-family: var(--mono); color: var(--fg-3); font-size: var(--fs-micro); }
  .infra-break[open] .infra-sum-name::before { content: '▾'; }
  .infra-rate-tag { font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent); }
  .infra-rows { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px 16px; }
  .infra-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
  /* the pages' inline #calc-results block makes .infra-row a flex row, so match
     its specificity to get the slider onto its own line beneath the label */
  #calc-results .infra-row.has-slider { display: grid; grid-template-columns: 1fr auto; row-gap: 7px; }
  #calc-results .infra-row.has-slider .infra-row-name { grid-column: 1; grid-row: 1; }
  #calc-results .infra-row.has-slider .infra-row-amt { grid-column: 2; grid-row: 1; }
  #calc-results .infra-row.has-slider .disc-range { grid-column: 1; grid-row: 2; width: 180px; justify-self: start; }
  .infra-row-name .disc-val { font-family: var(--mono); font-weight: 500; color: var(--action, #F45F39); }
  .disc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; margin: 0; background: linear-gradient(90deg, var(--action, #F45F39) var(--range-p, 0%), var(--line) var(--range-p, 0%)); border-radius: 999px; outline: none; }
  .disc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--action, #F45F39); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--line); cursor: grab; }
  .disc-range::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--bg-1); border-radius: 50%; background: var(--action, #F45F39); cursor: grab; }
  .infra-row-name { font-size: var(--fs-micro); color: var(--fg-3); }
  .infra-row-amt { font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg-2); text-align: right; min-width: 74px; }
  #calc-results .infra-row.is-credit .infra-row-amt, #calc-results .infra-row-amt.is-credit { color: var(--action, #F45F39); }
  .infra-row-amt span { font-size: var(--fs-micro); color: var(--fg-3); }

  /* ---- layout: inputs + sticky results ---- */
  .calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: start; }
  @media (max-width: 1280px) { .calc-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
  @media (max-width: 1024px) { .calc-grid { grid-template-columns: 1fr; } }

  .calc-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .calc-grid.is-wide { grid-template-columns: 1fr; }
  .calc-modules.is-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 1100px) { .calc-modules.is-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .calc-modules.is-quad { grid-template-columns: 1fr; } }

  /* option-B card: name + toggle, accent value, meter, $/mo footer */
  .is-quad .module { padding: 0; gap: 0; background: var(--bg-1); overflow: hidden; }
  .is-quad .module-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 12px 8px; border-bottom: none; }
  .is-quad .module-sub { max-width: none; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .is-quad .module-sub b { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  .is-quad .module-head > div:first-child { min-width: 0; }
  .is-quad .module-title { font-size: var(--fs-h5); display: block; white-space: normal; line-height: 1.25; }
  .is-quad .module-head { align-items: flex-start; padding: 14px 12px 10px; gap: 6px; }
  .is-quad .module-head-right { min-width: 0; flex-shrink: 0; }
  .is-quad .module-fields { padding: 0 12px 8px; }
  .is-quad .fld-num-head { width: auto; max-width: 150px; min-width: 0; align-items: stretch; }
  .is-quad .fld-input-big.is-sm { font-size: 21px; }
  .is-quad .fld-num-head .fld-input-big { width: 100%; min-width: 0; font-size: 30px; padding: 0 1px; text-align: right; }
  .is-quad .fld-unit-below { color: var(--fg); font-size: var(--fs-body-sm); }
  .is-quad.calc-modules .module.is-off .module-fields { display: flex; }
  .is-quad.calc-modules .module.is-off { gap: 0; }
  .is-quad.calc-modules .module.is-off .fld-range { filter: grayscale(1); }
  .is-quad.calc-modules .module.is-off .fld-input-big,
  .is-quad.calc-modules .module.is-off .fld-unit-below { color: var(--fg-3); }
  .is-quad.calc-modules .module.is-off .module-head { padding: 14px 12px 10px; }
  .is-quad .module-foot { padding: 7px 12px; justify-content: space-between; align-items: center; margin-top: auto; }
  .is-quad .module.is-wide { grid-column: span 2; }
  .is-quad .module.is-wide .module-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; }
  .is-quad .module.is-wide .module-fields > .fld-range { grid-column: 1 / -1; }
  @media (max-width: 700px) { .is-quad .module.is-wide { grid-column: span 1; } .is-quad .module.is-wide .module-fields { grid-template-columns: 1fr; } }
  .is-quad .fld-unit-below { padding-right: 2px; }
  .module-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); padding: 9px 14px; border-top: 1px solid var(--line-soft); }
  .module-foot .module-cost { font-size: var(--fs-body-sm); color: var(--fg-2); }
  .module-foot .module-cost span { color: var(--fg-3); }
  @media (max-width: 640px) { .calc-modules { grid-template-columns: 1fr; } }

  .module { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-1), var(--bg)); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
  .module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
  .module-title { font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--ls-h3); display: flex; align-items: center; gap: 10px; }
  .fld-num-head { width: auto; min-width: 96px; max-width: 190px; flex-shrink: 0; flex-direction: column; align-items: stretch; gap: 2px; }
  .fld-num-head .fld-input-big { width: 100%; min-width: 0; padding: 6px 8px; font-size: var(--fs-h4); line-height: 1.15; color: var(--accent); text-align: right; background: transparent; border-color: transparent; text-overflow: clip; }
  .fld-num-head .fld-input-big:focus { background: var(--bg-2); border-color: var(--accent); }
  .fld-unit-below { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); text-align: right; padding-right: 8px; }
  .module-sub { font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.4; margin-top: 3px; max-width: 34ch; }
  .module-cost { font-family: var(--mono); font-size: var(--fs-h5); color: var(--accent); white-space: nowrap; }
  .module-cost span { font-size: var(--fs-micro); color: var(--fg-3); margin-left: 2px; }
  .module-fields { display: flex; flex-direction: column; gap: 14px; }
  .module-head-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .module.is-off { opacity: .6; }
  .module.is-off .module-cost { color: var(--fg-3); }
  .module.is-off .module-fields { display: none; }
  .module.is-off .module-head { padding-bottom: 0; border-bottom: none; }
  .module.is-off { gap: 0; }
  .res-corp-note { font-size: var(--fs-micro); color: var(--fg-3); text-align: center; padding: 2px 4px; }
  .res-corp-note a { color: var(--accent); }

  .fld { display: flex; flex-direction: column; gap: 6px; }
  .fld-label { font-size: var(--fs-body-sm); color: var(--fg-2); }
  .fld-num { position: relative; display: flex; align-items: center; }
  .fld-input { width: 100%; font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 12px; transition: border-color var(--dur-fast); }
  .fld-input:focus { outline: none; border-color: var(--accent); }
  select.fld-input { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
  .fld-num .fld-input { padding-right: 64px; }
  .fld-unit { position: absolute; right: 12px; font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); pointer-events: none; }
  .fld-hint { font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.45; }

  .fld-toggle { flex-direction: row; align-items: center; justify-content: space-between; }
  .toggle { width: 42px; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--bg-3); position: relative; cursor: pointer; transition: background var(--dur-fast); padding: 0; }
  .toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg-3); transition: transform var(--dur-fast), background var(--dur-fast); }
  .toggle.on { background: var(--accent-dim); border-color: var(--accent); }
  .toggle.on .knob { transform: translateX(18px); background: var(--accent); }

  /* ---- results panel ---- */
  .calc-results { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; }
  @media (max-width: 1024px) { .calc-results { position: static; } }

  /* summary cards (Datadog vs Kloudfuse) */
  .res-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .res-sum-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--bg-1), var(--bg)); padding: 18px; display: flex; flex-direction: column; gap: 4px; min-height: 116px; }
  .res-sum-card.kf { position: relative; overflow: hidden; background: var(--bg-1); }
  .res-sum-card.kf::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--brand-cta); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; }
  .res-sum-card.kf > * { position: relative; }
  .res-sum-eyebrow { font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--fg-3); min-height: 18px; display: flex; align-items: center; }
  .res-sum-eyebrow.kf-eyebrow { gap: 8px; text-transform: none; letter-spacing: 0; }
  .res-sum-logo { height: 16px; width: auto; filter: none !important; }
  .res-sum-total { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: auto; }
  .res-sum-total span { font-family: var(--mono); font-size: var(--fs-body-sm); font-weight: 400; color: var(--fg-3); margin-left: 3px; letter-spacing: 0; -webkit-text-fill-color: var(--fg-3); }
  .res-sum-sub { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); }
  .res-sum-sub.kf-summary-save { color: var(--accent); }
  .res-sum-sub.kf-headroom { color: var(--kf-ink, #1D0E17); font-weight: 600; }

  /* comparison paired bars */
  .res-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
  .res-compare-head > span:first-child { font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--ls-h3); }
  .res-compare-legend { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); display: flex; align-items: center; gap: 6px; }
  .res-compare-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
  .res-compare-legend i.dd { background: oklch(0.62 0.19 30); margin-left: 4px; }
  .res-compare-legend i.kf { background: var(--accent); margin-left: 8px; }
  .cmp { display: flex; flex-direction: column; gap: 13px; }
  .cmp-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
  .cmp-label { font-size: var(--fs-body-sm); color: var(--fg-2); }
  .cmp-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .cmp-bar { display: flex; align-items: center; gap: 8px; }
  .cmp-tag { font-family: var(--mono); font-size: 9px; color: var(--fg-3); width: 18px; flex-shrink: 0; }
  .cmp-track { height: 14px; border-radius: 3px; min-width: 0; transition: width var(--dur-base); }
  .cmp-bar.dd .cmp-track { background: linear-gradient(90deg, oklch(0.5 0.16 25), oklch(0.66 0.2 32)); }
  .cmp-bar.kf .cmp-track { background: var(--brand-cta); }
  .cmp-val { font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg); white-space: nowrap; flex-shrink: 0; }
  .cmp-val em { font-style: normal; color: var(--fg-3); }
  .cmp-bar.kf .cmp-val { color: var(--fg-2); }
  .cmp-na { color: var(--fg-3); display: inline-flex; align-items: center; gap: 5px; }
  .cmp-q { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--fg-3); color: var(--fg-3); font-size: 9px; line-height: 1; cursor: help; }
  .cmp-q:hover { border-color: var(--accent); color: var(--accent); }
  .cmp-incl { font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent); cursor: help; }

  .res-card { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 22px; }
  .res-competitor { background: linear-gradient(180deg, var(--bg-1), var(--bg)); }
  .res-eyebrow { font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--fg-3); }
  .res-total { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
  .res-total span { font-family: var(--mono); font-size: var(--fs-body-sm); font-weight: 400; color: var(--fg-3); margin-left: 4px; letter-spacing: 0; }
  .res-total-kf { background: var(--brand-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .res-year { font-family: var(--mono); font-size: var(--fs-meta); color: var(--fg-3); }
  .res-note { font-size: var(--fs-micro); color: var(--warn); line-height: 1.5; margin-top: 10px; }
  .res-bars { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; }
  .bar-row { display: flex; flex-direction: column; gap: 6px; }
  .bar-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--fs-micro); color: var(--fg-2); }
  .bar-top > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar-val { font-family: var(--mono); color: var(--fg); white-space: nowrap; flex-shrink: 0; }
  .bar-val em { font-style: normal; color: var(--fg-3); margin-left: 4px; }
  .bar-track { height: 5px; border-radius: var(--radius-pill); background: var(--bg-3); overflow: hidden; }
  .bar-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-magenta), var(--accent)); }

  .res-kf { background: var(--bg-1); position: relative; overflow: hidden; }
  .res-kf::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--brand-cta); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; }
  .res-kf > * { position: relative; }
  .res-kf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .res-kf-logo { height: 20px; width: auto; }
  .res-kf-tag { font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; }
  .res-kf-sub { font-size: var(--fs-micro); color: var(--fg-2); line-height: 1.5; margin: 0 0 14px; }
  .res-kf-sub strong { color: var(--fg); font-weight: 600; }
  .res-kf-headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 2px; }
  .kf-headline-cost { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .kf-headline-cost span { font-family: var(--mono); font-size: var(--fs-body-sm); font-weight: 400; margin-left: 4px; letter-spacing: 0; -webkit-text-fill-color: var(--fg-3); color: var(--fg-3); }
  .kf-headline-save { font-family: var(--mono); font-size: var(--fs-meta); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }

  .kf-streams { display: flex; flex-direction: column; gap: 10px; }
  .kf-stream { display: grid; grid-template-columns: 86px 1fr; grid-template-areas: "label num" "label hint"; align-items: center; gap: 2px 12px; }
  .kf-stream-label { grid-area: label; font-size: var(--fs-body-sm); color: var(--fg-2); }
  .kf-stream-num { grid-area: num; position: relative; display: flex; align-items: center; }
  .kf-stream-input { width: 100%; font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 7px 56px 7px 10px; transition: border-color var(--dur-fast); }
  .kf-stream-input:focus { outline: none; border-color: var(--accent); }
  .kf-stream-unit { position: absolute; right: 10px; font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); pointer-events: none; }
  .kf-stream-hint { grid-area: hint; font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.3; }
  .kf-stream-hint:empty { display: none; }

  .kf-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .kf-total-label { font-size: var(--fs-body); font-weight: 500; color: var(--fg); }
  .kf-total-val { font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg-2); text-align: right; white-space: nowrap; }
  .kf-total-val .kf-total-gb { color: var(--fg); font-weight: 600; }

  .kf-costs { display: grid; grid-template-columns: 1fr auto; row-gap: 11px; column-gap: 12px; align-items: center; margin-top: 12px; }
  .kf-cost-name { font-size: var(--fs-body-sm); color: var(--fg-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .kf-cost-amt { font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg); white-space: nowrap; text-align: right; }
  .kf-cost-amt span { color: var(--fg-3); font-size: var(--fs-micro); margin-left: 2px; }
  .kf-cost-byoc { font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 1px 7px; }
  .rate-input.rate-inline { padding: 3px 8px; gap: 1px; }
  .rate-input.rate-inline input { width: 46px; }
  .kf-cost-div { grid-column: 1 / -1; height: 1px; background: var(--line-soft); margin: 1px 0; }
  .kf-cost-grandname { font-weight: 600; color: var(--fg); font-size: var(--fs-body); }
  .kf-cost-grand { font-size: var(--fs-h5); font-weight: 600; }
  .kf-cost-grand span { -webkit-text-fill-color: var(--fg-3); color: var(--fg-3); }
  .kf-cost-keyname { color: var(--fg); font-weight: 600; }
  .kf-cost-key { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg); }
  .kf-cost-key span { color: var(--fg-3); }
  .kf-override-note { color: var(--warn); }
  .res-rate { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
  .res-rate label { font-size: var(--fs-micro); color: var(--fg-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .rate-input { font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 8px; white-space: nowrap; flex-shrink: 0; }
  .rate-input input { width: 48px; font-family: var(--mono); font-size: var(--fs-body-sm); color: var(--accent); background: transparent; border: 0; text-align: right; }
  .rate-input input:focus { outline: none; }
  .rate-hint { font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.45; }

  .res-save { border: 1px solid transparent; border-radius: var(--radius-xl); padding: 24px; text-align: center; background:
    radial-gradient(ellipse 400px 200px at 50% 0%, var(--accent-dim), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg)); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; align-items: center; }
  .save-big { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
  .save-big span { font-family: var(--mono); font-size: var(--fs-body-sm); font-weight: 400; color: var(--fg-3); margin-left: 6px; letter-spacing: 0; }
  .save-pct { font-family: var(--mono); font-size: var(--fs-meta); color: var(--accent); text-transform: uppercase; letter-spacing: var(--ls-meta); line-height: 1.4; margin-bottom: 12px; }
  .res-save .btn { width: 100%; justify-content: center; margin-top: 2px; }

  /* ---- sources / disclaimer ---- */
  .pc-sources { max-width: var(--content-max); margin: 0 auto; padding: 8px 32px 0; }
  .pc-sources details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 0; overflow: hidden; }
  .pc-sources summary { list-style: none; cursor: pointer; padding: 16px 20px; font-family: var(--mono); font-size: var(--fs-meta); color: var(--fg-2); text-transform: uppercase; letter-spacing: var(--ls-meta); display: flex; align-items: center; gap: 10px; }
  .pc-sources summary::-webkit-details-marker { display: none; }
  .pc-sources summary::before { content: '+'; color: var(--accent); font-size: 14px; }
  .pc-sources details[open] summary::before { content: '−'; }
  .pc-sources .src-body { padding: 4px 20px 20px; font-size: var(--fs-body-sm); color: var(--fg-2); line-height: var(--lh-relaxed); }
  .pc-sources .src-body p { margin: 0 0 12px; }
  .pc-sources .src-body strong { color: var(--fg); font-weight: 500; }
  .pc-sources .src-body a { color: var(--accent); text-decoration: none; }
  .pc-sources .src-body a:hover { text-decoration: underline; }

  /* ---- FAQ ---- */
  .pc-faq { max-width: 880px; margin: 0 auto; padding: 80px 32px 40px; }
  .pc-faq h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-h2); margin: 0 0 8px; }
  .pc-faq .lead { color: var(--fg-2); font-size: var(--fs-lead); margin: 0 0 32px; }
  .faq-item { border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
  .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: var(--fs-h4); font-weight: 500; letter-spacing: var(--ls-h3); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; font-family: var(--mono); color: var(--accent); font-size: 20px; flex-shrink: 0; }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item .faq-a { padding: 0 0 22px; color: var(--fg-2); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: 70ch; }
  .faq-item .faq-a a { color: var(--accent); text-decoration: none; }

  .pc-foot-note { max-width: var(--content-max); margin: 0 auto; padding: 0 32px 40px; }
  .pc-foot-note p { font-size: var(--fs-micro); color: var(--fg-3); line-height: var(--lh-relaxed); max-width: 90ch; }


/* ==============================================================
   LIGHT THEME ALIASES — this sheet was authored against tokens.css.
   Pages on kf-design.css (html.kf-light) define a different token
   vocabulary, so map the names this file uses onto that system and
   supply the type/radius/motion scale it expects.
   ============================================================== */
html.kf-light{
  /* type families */
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* type scale */
  --fs-h1: clamp(38px,4.2vw,58px);
  --fs-h2: clamp(30px,3.2vw,44px);
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-h5: 16px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14.5px;
  --fs-mono: 12.5px;
  --fs-meta: 11.5px;
  --fs-micro: 11px;

  --lh-relaxed: 1.6;
  --ls-display: -.032em;
  --ls-h2: -.028em;
  --ls-h3: -.020em;
  --ls-meta: .06em;

  /* radii */
  --radius-sm: 6px;
  --radius-md: var(--r-btn);
  --radius-lg: var(--r-card);
  --radius-xl: var(--r-panel);
  --radius-pill: 999px;

  /* surfaces + accents */
  --bg-3: var(--stone-2);
  --warn: var(--insight);
  --accent-magenta: var(--action);
  --brand-cta: var(--action);

  /* layout + motion */
  --content-max: var(--maxw);
  --p: var(--pad);
  --dur-fast: .15s;
  --dur-base: .25s;
}

/* stacked competitor-vs-Kloudfuse comparison bars */
.sb{display:flex;flex-direction:column;gap:12px}
.sb-row{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:12px}
.sb-name{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.sb-track{height:26px;border-radius:6px;background:var(--bg-2,rgba(0,0,0,.06));overflow:hidden;display:flex}
.sb-seg{display:block;height:100%}
.sb-seg.sb-kf{background:var(--signal,#67C2D1)}
.sb-total{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--kf-ink,var(--fg))}
.sb-total span{font-size:12px;font-weight:400;color:var(--fg-3);margin-left:2px}
.sb-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:2px}
.sb-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--fg-2)}
.sb-key i{width:9px;height:9px;border-radius:2px;display:inline-block}
.sb-key b{font-weight:600;color:var(--kf-ink,var(--fg))}
.sb-save{font-family:var(--mono);font-size:13.5px;color:var(--kf-ink,var(--fg));border-top:1px solid var(--line);padding-top:10px}
.sb-gap{flex:1;display:flex;align-items:center;justify-content:flex-start;padding-left:8px;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--kf-ink,#1D0E17);white-space:nowrap}

  .calc-err{padding:24px;font:400 15px/1.5 var(--font-sans);color:var(--fg-2)}

  /* Headroom line reads as a chip, matching the active retention button */
  #calc-results .res-sum-sub.kf-headroom{display:inline-block;width:auto;align-self:start;background:var(--stone,#F4EBDD);color:var(--kf-ink,#1D0E17);border:1px solid var(--kf-ink,#1D0E17);border-radius:8px;padding:5px 10px;font:600 12px var(--mono);letter-spacing:.02em;margin-top:8px}

  /* Support tier toggle, in the licence row of the Kloudfuse panel */
  #calc-results .sup-row{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:-3px}
  #calc-results .sup-label{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
  #calc-results .sup-toggle{display:flex;gap:5px}
  #calc-results .sup-btn{font:400 11px var(--mono);letter-spacing:.02em;color:var(--fg-2);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
  #calc-results .sup-btn:hover{border-color:var(--kf-ink);color:var(--kf-ink)}
  #calc-results .sup-btn.is-active{background:var(--kf-ink);border-color:var(--kf-ink);color:var(--paper);font-weight:500}
  #calc-results .sup-btn:focus-visible{outline:2px solid var(--action);outline-offset:1px}


  .sb-eg-b b{color:var(--action);font-weight:500}


  /* separate the Kloudfuse row from the competitor's bill below it */
  #cmp-bars .sb>.sb-row:first-child{padding-bottom:16px;border-bottom:2px solid var(--kf-ink)}
  /* egress: its own row on the shared grid, subordinate to the bill above it */
  .sb-row-eg{margin-top:-4px}
  .sb-row-eg .sb-name,.sb-row-eg .sb-total{color:var(--fg-3)}
  .sb-row-eg .sb-track{height:18px}
  .sb-row-eg .sb-total{font-size:13px}

  /* Enterprise: no list price, so the panel becomes a statement + quote CTA */
  #calc-results .res-kf.is-custom .kf-custom{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:14px}
  #calc-results .kf-custom-price{font:500 40px/1 var(--font-display,inherit);letter-spacing:-.02em;color:var(--kf-ink,#1D0E17)}
  #calc-results .kf-custom-copy{margin:0;max-width:52ch;font-size:13px;line-height:1.55;color:var(--fg-2)}
  #calc-results .res-kf.is-custom .btn{margin-top:2px;align-self:center}
  #calc-results .sb-total{white-space:nowrap}