/* Shared mechanics for the demo mock-ups and the example report.
   Each style sets the --mk-* / --rp-* tokens (and may restyle anything). */
:root {
  --mk-ink: #1b1b1b;
  --mk-btn: #181715;
  --mk-btn-ink: #fff;
  --mk-bar: #ececea;
  --mk-link: #1a3fa0;
  --mk-radius: 0;
  --mk-phone-radius: 36px;
  --mk-photo-filter: grayscale(.25) contrast(1.02);

  --rp-bg: #f4f4ef;
  --rp-ink: #181715;
  --rp-muted: #5a5953;
  --rp-line: #181715;
  --rp-area: rgba(24,23,21,.07);
  --rp-dot: #bfb21a;
  --rp-dot-ring: #181715;
  --rp-tag-bg: #bfb21a;
  --rp-tag-ink: #181715;
  --rp-bar: #181715;
  --rp-font: inherit;
  --rp-num-font: inherit;
}

.mk { margin: 0; }
.mk figcaption { margin-top: 12px; font-size: .9375rem; }

.browser { background: #fff; color: var(--mk-ink); overflow: hidden; border-radius: var(--mk-radius); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--mk-bar); }
.browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: #c4c4c0; }
.browser__bar em { flex: 1; max-width: 280px; margin-left: 10px; padding: 4px 12px; background: #fff; color: #555; font: 500 13px/1.2 system-ui, sans-serif; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser img { width: 100%; height: 280px; object-fit: cover; filter: var(--mk-photo-filter); }
.site__body { padding: 20px 22px 24px; font-family: system-ui, "Segoe UI", sans-serif; }
.site__brand { margin: 0 0 6px; font-size: 14px; color: #666; }
.site__h { margin: 0 0 16px; font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.08 system-ui, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.site__btn { display: inline-block; margin: 0; padding: 12px 22px; background: var(--mk-btn); color: var(--mk-btn-ink); font: 600 15px/1 system-ui, sans-serif; border-radius: var(--mk-radius); }

.serp { max-width: 460px; background: #fff; color: var(--mk-ink); font: 400 15px/1.4 system-ui, "Segoe UI", sans-serif; overflow: hidden; border-radius: var(--mk-radius); }
.serp__q { padding: 14px 18px; background: #f1f1ef; font-size: 16px; }
.serp__r { padding: 16px 18px 0; font-size: 13px; color: #444; }
.serp__r b { margin-right: 6px; }
.serp__t { padding: 2px 18px 0; font: 500 19px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--mk-link); }
.serp__d { padding: 4px 18px 18px; color: #4a4a4a; }

.phone { width: min(100%, 320px); padding: 10px; background: #0e0e0d; border-radius: var(--mk-phone-radius); }
.ad { background: #fff; color: var(--mk-ink); border-radius: calc(var(--mk-phone-radius) - 8px); overflow: hidden; font: 400 14px/1.35 system-ui, "Segoe UI", sans-serif; }
.ad__head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; }
.ad__av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mk-btn); }
.ad__img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; filter: var(--mk-photo-filter); }
.ad__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; background: #f0f0ee; }
.ad__btn { flex: none; padding: 9px 14px; background: var(--mk-btn); color: var(--mk-btn-ink); font-weight: 600; }

/* report + chart */
.report { background: var(--rp-bg); color: var(--rp-ink); padding: 22px 22px 24px; font-family: var(--rp-font); }
.report__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.report__title { margin: 0; font-size: 1.25rem; font-weight: 600; }
.report__tag { margin: 0; padding: 4px 10px; background: var(--rp-tag-bg); color: var(--rp-tag-ink); font-size: 13px; font-weight: 700; }
.report__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi__n { margin: 0; font: 600 clamp(1.75rem, 3.2vw, 2.75rem)/1 var(--rp-num-font, inherit); font-variant-numeric: tabular-nums; }
.kpi__l { margin: 4px 0 0; color: var(--rp-muted); font-size: 13px; line-height: 1.3; }
.report__note { max-width: 46em; margin: 14px 0 0; font-size: .9375rem; opacity: .85; }
.chart { position: relative; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__area { fill: var(--rp-area); opacity: 0; transition: opacity 1.2s var(--ease, ease) .5s; }
.chart__be { stroke: var(--rp-muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart__line { fill: none; stroke: var(--rp-line); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart__dot { position: absolute; left: 96.67%; top: 17.14%; box-sizing: border-box; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--rp-dot); border: 3px solid var(--rp-dot-ring); opacity: 0; transition: opacity .5s var(--ease, ease) 1.6s; }
.chart__belabel { position: absolute; right: 3%; top: calc(64.3% + 8px); margin: 0; font-size: 13px; color: var(--rp-muted); }
.js .chart__line { stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease, ease); }
.js .chart.drawn .chart__line { stroke-dashoffset: 0; }
.chart.drawn .chart__area, .chart.drawn .chart__dot { opacity: 1; }
.chart__axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--rp-muted); font-size: 13px; }
.bars { margin-top: 18px; }
.bars__l { margin: 0 0 6px; color: var(--rp-muted); font-size: 13px; }
.bars__svg { display: block; width: 62%; height: 44px; fill: var(--rp-bar); }

/* calculator inputs (outputs are styled per page) */
.calc { display: grid; gap: 14px; max-width: 420px; }
.cfield { display: block; }
.cfield span { display: block; margin-bottom: 6px; font-weight: 600; }
.cfield input { width: 100%; min-height: 56px; padding: 12px 16px; border: 2px solid var(--cf-bd, transparent); border-radius: var(--cf-radius, 0); background: var(--cf-bg, #eee); color: var(--cf-ink, #111); font: 600 1.25rem/1.2 var(--cf-font, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.cfield input:focus { outline: 3px solid var(--cf-focus, currentColor); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .chart__line { stroke-dashoffset: 0; transition: none; }
  .chart__area, .chart__dot { opacity: 1; transition: none; }
}