:root {
    --bg-page: #F5EFE3; --bg-card: #FFFFFF; --bg-secondary: #FAF5EA; --bg-tertiary: #F0E9D9;
    --border-subtle: rgba(31,41,55,.08); --border-stronger: rgba(31,41,55,.16);
    --text-primary: #1F2937; --text-secondary: #6B7280; --text-tertiary: #9CA3AF;
    --amber-primary: #B45309; --amber-medium: #D97706; --amber-soft-bg: #FBF4DF;
    --navy-deep: #1e2c3d; --gold: #D4A862;
    --success: #15803D; --success-bg: #DCFCE7;
    --warning: #B45309; --warning-bg: #FEF3C7;
    --concern: #C2410C; --concern-bg: #FFEDD5;
    --danger: #B91C1C; --danger-bg: #FEE2E2;
    --shadow-card: 0 1px 3px rgba(31,41,55,.06), 0 1px 2px rgba(31,41,55,.04);
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--sans); background: var(--bg-page); color: var(--text-primary); font-size: 14px; line-height: 1.5; }

  .mock-banner { background: var(--navy-deep); color: #C5D0DC; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-align: center; padding: 7px 16px; }
  .mock-banner strong { color: var(--gold); font-weight: 500; }

  .brand-bar { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .brand-mark { font-family: var(--serif); font-size: 19px; font-weight: 500; }
  .brand-mark .ampersand { color: var(--amber-primary); }
  .brand-mark .sub { display: inline-block; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border-subtle); font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
  .audit-meta { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); padding: 6px 12px; background: var(--bg-secondary); border-radius: 6px; border: 1px solid var(--border-subtle); }
  .audit-meta strong { color: var(--text-primary); }

  nav.tabs { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); padding: 0 28px; display: flex; gap: 4px; overflow-x: auto; }
  .tab-btn { background: transparent; border: 0; padding: 16px 18px; font-family: var(--sans); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
  .tab-btn:hover { color: var(--text-primary); }
  .tab-btn.active { color: var(--amber-primary); border-bottom-color: var(--amber-primary); font-weight: 500; }
  .tab-btn .n { font-family: var(--mono); font-size: 10.5px; margin-right: 6px; opacity: .7; }

  main { padding: 28px; max-width: 1180px; margin: 0 auto; }
  .panel { display: none; }
  .panel.active { display: block; }

  .section { margin-bottom: 30px; }
  .section-num { font-family: var(--mono); font-size: 10.5px; color: var(--amber-primary); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
  .section-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0 0 8px; line-height: 1.2; }
  .section-lede { color: var(--text-secondary); font-size: 13px; line-height: 1.6; max-width: 820px; margin: 0 0 18px; }

  .hero { text-align: center; padding: 28px 0 8px; }
  .hero h1 { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; margin: 0 0 12px; letter-spacing: -.01em; }
  .hero h1 em { color: var(--amber-primary); font-style: normal; }
  .hero p { color: var(--text-secondary); font-size: 15px; max-width: 620px; margin: 0 auto; }

  .card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 22px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
  .card h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 6px; }
  .card .card-sub { color: var(--text-secondary); font-size: 12.5px; margin: 0 0 14px; }

  .setup-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 6px; }
  .field input, .field textarea { width: 100%; font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--border-stronger); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }
  .field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .check-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 10px 12px; border-radius: 8px; margin-top: 8px; }
  .check-note.ok { background: var(--success-bg); color: var(--success); }
  .check-note.warn { background: var(--warning-bg); color: #92400E; }
  .check-note .ic { font-family: var(--mono); font-weight: 600; }

  .choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .choice { border: 1px solid var(--border-stronger); border-radius: 8px; padding: 12px; cursor: pointer; background: var(--bg-card); user-select: none; transition: border-color .15s, background .15s; }
  .choice.on { border-color: var(--amber-primary); background: var(--amber-soft-bg); }
  .choice .t { font-weight: 500; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
  .choice .d { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
  .tick { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-stronger); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
  .choice.on .tick { background: var(--amber-primary); border-color: var(--amber-primary); }
  .scen-grid { grid-template-columns: repeat(3, 1fr); }
  .scen-grid .choice .q { font-size: 12px; color: var(--text-primary); font-style: italic; margin-top: 8px; line-height: 1.5; }

  .runs-row { display: flex; align-items: center; gap: 14px; }
  .runs-row input[type=range] { flex: 1; accent-color: var(--amber-primary); }
  .runs-val { font-family: var(--serif); font-size: 26px; color: var(--amber-primary); min-width: 40px; text-align: right; }

  .pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; border: 1px solid transparent; }
  .pill.ok { background: var(--success-bg); color: var(--success); }
  .pill.warn { background: var(--warning-bg); color: var(--warning); }
  .pill.concern { background: var(--concern-bg); color: var(--concern); }
  .pill.danger { background: var(--danger-bg); color: var(--danger); }
  .pill.muted { background: var(--bg-tertiary); color: var(--text-secondary); }

  .price-card { background: var(--navy-deep); color: #FAFAFA; border-radius: 10px; padding: 22px; position: sticky; top: 16px; }
  .price-card .lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #8B9AAB; }
  .price-line { display: flex; justify-content: space-between; font-size: 13px; color: #C5D0DC; padding: 7px 0; border-bottom: 1px solid #2a3a4f; }
  .price-line strong { color: #FAFAFA; font-family: var(--mono); font-weight: 500; }
  .price-total { font-family: var(--serif); font-size: 40px; color: var(--gold); margin: 14px 0 2px; line-height: 1; }
  .price-card .small { font-size: 11.5px; color: #8B9AAB; line-height: 1.55; margin-top: 8px; }
  .conf { margin-top: 14px; font-size: 12px; padding: 10px 12px; border-radius: 8px; background: #25364b; color: #C5D0DC; }
  .conf strong { color: #FAFAFA; }
  .cur{display:inline-flex;border:1px solid #4a5d74;border-radius:6px;overflow:hidden}.cur button{background:transparent;color:#C5D0DC;border:0;padding:4px 10px;font-size:12px;cursor:pointer;font-family:var(--mono)}.cur button.on{background:var(--gold);color:var(--navy-deep)}
  .go-btn { display: block; width: 100%; margin-top: 16px; padding: 14px; border: 0; border-radius: 8px; background: var(--amber-medium); color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
  .go-btn:hover { background: var(--amber-primary); }
  .ghost-btn { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border-stronger); background: var(--bg-card); font-family: var(--sans); font-size: 13px; cursor: pointer; color: var(--text-primary); }
  .ghost-btn.primary { background: var(--amber-medium); color: #fff; border-color: var(--amber-medium); }

  /* running */
  .run-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .progress { height: 10px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; margin: 10px 0 6px; }
  .progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-medium), var(--amber-primary)); transition: width .4s; }
  .jgrid-wrap { margin-top: 10px; }
  .jgrid-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
  .jgrid-row .rl { font-size: 12px; color: var(--text-secondary); }
  .jgrid-row .rl strong { color: var(--text-primary); font-weight: 500; }
  .cells { display: flex; gap: 5px; flex-wrap: wrap; }
  .cell { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); font-family: var(--mono); font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: background .3s; }
  .cell.running { background: var(--amber-soft-bg); border-color: var(--amber-medium); animation: pulse 1s infinite; }
  .cell.win { background: var(--success); color: #fff; border-color: var(--success); }
  .cell.shared { background: #86EFAC; color: #14532D; border-color: #86EFAC; }
  .cell.lost { background: #FDBA74; color: #7C2D12; border-color: #FDBA74; }
  .cell.none { background: #FCA5A5; color: #7F1D1D; border-color: #FCA5A5; }
  .cell.nopick { background: #CBD5E1; color: #334155; border-color: #CBD5E1; }
  @keyframes pulse { 50% { opacity: .5; } }
  .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); margin-top: 10px; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

  .feed { font-size: 12.5px; max-height: 360px; overflow-y: auto; }
  .feed-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); animation: fadein .35s; }
  .feed-row .stage { font-family: var(--mono); font-size: 10.5px; color: var(--amber-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
  .feed-row .meta { color: var(--text-secondary); font-size: 11.5px; }
  @keyframes fadein { from { opacity: 0; transform: translateY(-3px); } }

  /* report */
  .verdict { background: var(--navy-deep); color: #FAFAFA; border-radius: 12px; padding: 28px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-bottom: 20px; }
  .verdict .big { font-family: var(--serif); font-size: 64px; color: var(--gold); line-height: 1; }
  .verdict .big small { font-size: 22px; color: #C5D0DC; }
  .verdict h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 10px 0 8px; line-height: 1.25; }
  .verdict p { color: #C5D0DC; font-size: 13px; margin: 0; line-height: 1.6; }
  .verdict .lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #8B9AAB; }
  .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mini { background: #25364b; border-radius: 8px; padding: 12px 14px; }
  .mini .v { font-family: var(--serif); font-size: 26px; color: #FAFAFA; }
  .mini .v small { font-size: 13px; color: #8B9AAB; }

  .funnel { display: flex; flex-direction: column; gap: 8px; }
  .f-row { display: grid; grid-template-columns: 150px 1fr 90px; gap: 12px; align-items: center; }
  .f-row .l { font-size: 13px; }
  .f-row .l small { display: block; color: var(--text-secondary); font-size: 11px; }
  .f-bar { height: 30px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; }
  .f-bar span { display: flex; align-items: center; padding-left: 10px; height: 100%; color: #fff; font-family: var(--mono); font-size: 11px; background: linear-gradient(90deg, var(--amber-medium), var(--amber-primary)); border-radius: 6px; }
  .f-row .v { font-family: var(--mono); font-size: 13px; text-align: right; }
  .drop { font-size: 11.5px; color: var(--concern); margin: -2px 0 2px 162px; font-family: var(--mono); }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .stack { display: flex; height: 34px; border-radius: 6px; overflow: hidden; margin: 6px 0 12px; }
  .stack div { display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 11px; }

  table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.table th { text-align: left; padding: 10px 12px; background: var(--bg-secondary); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
  table.table td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
  table.table td.num { font-family: var(--mono); text-align: right; }
  table.table th.num { text-align: right; }

  .dist-row { display: grid; grid-template-columns: 160px 1fr 60px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
  .dist-row:last-child { border-bottom: 0; }
  .dist-row .bar { background: var(--bg-tertiary); border-radius: 4px; height: 10px; overflow: hidden; }
  .dist-row .bar > span { display: block; height: 100%; background: linear-gradient(90deg, #FDBA74, var(--concern)); }
  .dist-row .val { text-align: right; font-family: var(--mono); font-size: 12.5px; }

  .finding { border-left: 3px solid var(--amber-primary); background: var(--bg-secondary); border-radius: 0 8px 8px 0; padding: 14px 16px; margin-bottom: 12px; }
  .finding .h { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
  .finding .obs { font-size: 13px; line-height: 1.55; }
  .finding .ev { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
  .finding .act { font-size: 12.5px; margin-top: 8px; color: var(--success); }
  .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
  .tag.obs { background: #DBEAFE; color: #1E40AF; }
  .tag.int { background: var(--amber-soft-bg); color: var(--amber-primary); }

  .trail { font-size: 12.5px; }
  .trail .step { display: grid; grid-template-columns: 30px 100px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border-subtle); }
  .trail .step .s { font-family: var(--mono); color: var(--text-tertiary); font-size: 11px; }
  .trail .step .k { font-family: var(--mono); font-size: 10.5px; color: var(--amber-primary); font-weight: 600; text-transform: uppercase; }
  .trail .step.hl { background: var(--danger-bg); margin: 0 -10px; padding: 8px 10px; border-radius: 6px; }

  .footnote { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.6; margin-top: 8px; }

  .cta-band { background: var(--amber-soft-bg); border: 1px solid rgba(180,83,9,.2); border-radius: 10px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .cta-band .t { font-family: var(--serif); font-size: 18px; }
  .cta-band .s { font-size: 12.5px; color: var(--text-secondary); }

  .compare { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 10px; align-items: center; }
  .cmp-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 20px; text-align: center; }
  .cmp-card .d { font-family: var(--mono); font-size: 10.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
  .cmp-card .v { font-family: var(--serif); font-size: 52px; line-height: 1.05; margin: 8px 0 2px; }
  .cmp-card.after .v { color: var(--success); }
  .arrow { font-family: var(--serif); font-size: 30px; text-align: center; color: var(--amber-primary); }
  .delta { font-family: var(--mono); font-size: 12px; }
  .delta.up { color: var(--success); }
  .delta.flat { color: var(--text-secondary); }

  .lock { font-family: var(--mono); font-size: 11px; background: var(--bg-tertiary); padding: 8px 12px; border-radius: 6px; color: var(--text-secondary); display: inline-block; }

  @media (max-width: 900px) {
    main { padding: 18px 16px; }
    .brand-bar, nav.tabs { padding-left: 16px; padding-right: 16px; }
    .setup-grid, .run-top, .two-col, .verdict { grid-template-columns: 1fr; }
    .choice-grid { grid-template-columns: 1fr 1fr; }
    .scen-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 30px; }
    .compare { grid-template-columns: 1fr; }
    .arrow { transform: rotate(90deg); }
    .f-row { grid-template-columns: 110px 1fr 70px; }
    .drop { margin-left: 0; }
    .jgrid-row { grid-template-columns: 1fr; }
    .price-card { position: static; }
  }

/* ── app additions (real product, not mockup) ── */
.flash { max-width: 760px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; }
.flash.ok { background: var(--success-bg); color: var(--success); } .flash.err { background: var(--danger-bg); color: var(--danger); }
.flash.info { background: var(--amber-soft-bg); color: var(--amber-primary); }
.tone-good { color: var(--success); } .tone-warn { color: var(--warning); } .tone-bad { color: var(--danger); } .tone-info { color: var(--text-secondary); }
.summary-line { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.state { font-family: var(--mono); font-size: 11.5px; padding: 2px 8px; border-radius: 10px; }
.state.read { background: var(--success-bg); color: var(--success); } .state.blocked, .state.robots_disallowed { background: var(--danger-bg); color: var(--danger); }
.state.error { background: var(--bg-tertiary); color: var(--text-secondary); }
select, input[type=text], input[type=email], input[type=url], textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-stronger); border-radius: 8px; font-family: var(--sans); font-size: 14px; background: #fff; }
.muted { color: var(--text-secondary); } .right { text-align: right; } .mono { font-family: var(--mono); }
.nav-right { display: flex; gap: 10px; align-items: center; }
.linkbtn { background: none; border: 0; color: var(--amber-primary); cursor: pointer; font: inherit; padding: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--border-stronger); padding: 8px; } .tbl td { border-bottom: 1px solid var(--border-subtle); padding: 8px; vertical-align: top; }
.checkres { margin-top: 8px; font-size: 13px; padding: 10px 12px; border-radius: 8px; display: none; }
.checkres.pass { display: block; background: var(--success-bg); color: var(--success); } .checkres.warn { display: block; background: var(--warning-bg); color: var(--warning); } .checkres.fail { display: block; background: var(--danger-bg); color: var(--danger); }
.progress { height: 10px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; } .progress > div { height: 100%; background: var(--amber-primary); }
@media (max-width: 720px) { main { padding: 16px; } .row2 { grid-template-columns: 1fr !important; } }

a.tab-btn { text-decoration: none; display: inline-block; }

.card { overflow-x: auto; }

/* design pass (29 Sep): match the V1 mockup */
main a { color: var(--amber-primary); }
main a:hover { color: var(--amber-medium); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--amber-primary); vertical-align: -3px; margin-right: 6px; }
td.num strong, .v strong { font-weight: 500; }
.mono, td.num, .num { font-variant-numeric: tabular-nums; }
.finding .act .tag { margin-right: 6px; }

/* ── client workspace + client dashboard + portfolio (from mockup/agency.html and mockup/client-view.html) ── */
.chip{font-family:var(--mono);font-size:11px;color:var(--text-secondary);padding:6px 10px;background:var(--bg-secondary);border-radius:6px;border:1px solid var(--border-subtle)}
.chip b{color:var(--text-primary);font-weight:500}
.ws-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.ws-head h1{font-family:var(--serif);font-weight:500;font-size:30px;margin:4px 0 4px;line-height:1.15}
.ws-head .for{font-size:13px;color:var(--text-secondary)}
.ws-actions{display:flex;gap:8px;flex-wrap:wrap}
.ws-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-subtle);margin-bottom:20px;overflow-x:auto}
.ws-tab{padding:11px 16px;font-size:13.5px;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.ws-tab.on{color:var(--amber-primary);border-bottom-color:var(--amber-primary);font-weight:500}
.ws-tab .cnt{font-family:var(--mono);font-size:10.5px;background:var(--amber-soft-bg);color:var(--amber-primary);border-radius:8px;padding:1px 6px;margin-left:6px}
.plain{background:#fff;border:1px solid var(--border-subtle);border-radius:12px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.plain h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 10px}
.plain .body{font-size:14px;line-height:1.7;white-space:pre-line}
.plain textarea{width:100%;min-height:130px;font:inherit;font-size:14px;line-height:1.6;padding:10px 12px;border:1px solid var(--border-stronger);border-radius:8px;background:var(--bg-secondary)}
.rep-meta{font-family:var(--mono);font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.kpis{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-card)}
.kpi .l{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:8px}
.kpi .v{font-family:var(--serif);font-size:34px;line-height:1;margin-bottom:8px}
.kpi .v small{font-size:13px;font-family:var(--sans);margin-left:6px}
.kpi .s{font-size:12px;color:var(--text-secondary);line-height:1.5}
.kpi.dark{background:var(--navy-deep);border-color:#2a3a4f;color:#FAFAFA}
.kpi.dark .l{color:#8B9AAB}.kpi.dark .v{color:var(--gold)}.kpi.dark .s{color:#C5D0DC}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fchip{font-size:12.5px;padding:6px 11px;border-radius:16px;border:1px solid var(--border-stronger);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;user-select:none}
.fchip b{font-family:var(--mono);font-weight:500;margin-left:6px}
.fchip.on{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.acc{font-size:12px}.acc.ok{color:var(--success)}.acc.bad{color:#B91C1C}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.ws-head h1{font-size:24px}}

/* portfolio client table (mockup/agency.html) */
table.t { width:100%; border-collapse:collapse; font-size:13px }
table.t th { text-align:left; padding:9px 10px; background:var(--bg-secondary); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); white-space:nowrap }
table.t td { padding:11px 10px; border-bottom:1px solid var(--border-subtle); vertical-align:middle }
table.t td.cl a { color:var(--text-primary); text-decoration:none; font-weight:500 } table.t td.cl a:hover { color:var(--amber-primary) }
table.t .meta { font-size:11.5px; color:var(--text-secondary) }
.wr { font-family:var(--serif); font-size:19px } .rng { font-family:var(--mono); font-size:10.5px; color:var(--text-tertiary); display:block }
.delta { font-family:var(--mono); font-size:12px; white-space:nowrap } .delta .tag { display:block; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; margin-top:1px }
.delta.up { color:var(--success) } .delta.down { color:var(--danger) } .delta.flat { color:var(--text-tertiary) }
.pill.info { background:#DBEAFE; color:#1D4ED8 }
.spark { display:inline-block; vertical-align:middle }

/* one table style everywhere (Paul, 28 Sep): headings sit over their numbers, same heading band as the report tables */
.tbl th { font-family: var(--mono); font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
          background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); padding: 10px 12px; white-space: nowrap; }
.tbl td { padding: 11px 12px; vertical-align: middle; }
.tbl th.right, .tbl td.right, .tbl th.num, .tbl td.num,
table.t th.right, table.t td.right, table.t th.num, table.t td.num,
table.table th.right, table.table td.right { text-align: right; }
.tbl td.right, .tbl td.num, table.t td.num { font-variant-numeric: tabular-nums; }

/* Terms & Privacy pages */
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 26px 0 8px; }
.legal h3 { font-size: 15px; margin: 18px 0 6px; }
.legal p, .legal li { font-size: 14px; line-height: 1.7; color: var(--text-primary); }
.legal ul { padding-left: 20px; margin: 6px 0 12px; }
.legal .tbl td { vertical-align: top; font-size: 13.5px; }
.site-foot { max-width: 1100px; margin: 34px auto 26px; padding: 0 16px; font-size: 12px; color: var(--text-tertiary); text-align: center; }
.site-foot a { color: var(--text-secondary); }