/* =============================================================
   AI Visibility Tracker: design system
   Locked to design/mockup-v2.html. Light theme only.

   Type scale : 11 / 12.5 / 13.5 / 15 / 19 / 26 / 36
   Weights    : 400 regular, 600 semibold, 700 numerals only
   Fonts      : Inter (all UI) + JetBrains Mono (URLs and raw values only)
   Capitals   : Title Case on headings, nav, tabs, buttons, column labels.
                Sentence case for sub-headings, helper text and body copy.
   ============================================================= */
:root{
  --ink:#0E1D33; --ink-2:#54637A; --ink-3:#8593A8; --ink-4:#A9B4C4;
  --line:#E8EDF4; --line-2:#DAE2EC;
  --bg:#F6F8FB; --panel:#FFFFFF; --tint:#FAFBFD;
  /* dark chrome: navigation recedes so the data is the only bright thing */
  --nav:#101E33; --nav-2:#1B2C46; --nav-line:#22334C; --nav-txt:#9FB0C7; --nav-dim:#5B6C86;
  --blue:#2563EB; --blue-2:#1D4ED8; --blue-bg:#EFF4FE; --blue-ink:#1E40AF;
  --green:#0A7C48; --green-bg:#E8F6EF;
  --red:#C62828; --red-bg:#FDEEEE;
  --amber:#8A5A0B; --amber-bg:#FDF4E3;
  --violet:#5B3FA8; --violet-bg:#EFEAFA;
  --pink-bg:#FBEAF3; --pink:#A12C68;
  /* Competitor identity colours: distinct hues, all lighter than the blue
     that means "you". No red or green: those already mean worse and better. */
  --c1:#3FB0A4; --c2:#D0A03F; --c3:#9781D8; --c4:#CE85AB; --c5:#6F9FD8;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:12px; --r-sm:8px;
  --sh:0 1px 2px rgba(14,29,51,.04), 0 8px 24px -14px rgba(14,29,51,.14);
  color-scheme: light;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,
  'Segoe UI',sans-serif;font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.grow{flex:1}
.hidden{display:none !important}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3);font-size:12.5px}

/* ---------------- app shell ---------------- */
.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.side{background:var(--nav);color:var(--nav-txt);padding:18px 12px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brandmark{display:flex;align-items:center;gap:10px;padding:2px 8px 20px;font-size:14px;
  font-weight:600;letter-spacing:-0.01em;color:#fff}
.brandmark i{width:26px;height:26px;border-radius:7px;flex:0 0 auto;font-style:normal;
  background:linear-gradient(140deg,#3B82F6,#1D4ED8);display:grid;place-items:center}
.brandmark svg{width:14px;height:14px}
.navlbl{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--nav-dim);padding:18px 8px 7px}
.nav{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--nav-txt);font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;
  width:100%;font-family:inherit;text-align:left;transition:.13s ease;position:relative}
.nav:hover{background:var(--nav-2);color:#fff}
.nav.on{background:var(--nav-2);color:#fff;font-weight:600}
.nav svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}
.nav .ic{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;opacity:.85}
.nav .dot{width:6px;height:6px;border-radius:50%;margin-left:auto;flex:0 0 auto}
.nav .cnt{margin-left:auto;color:var(--nav-dim);font-size:11px;font-variant-numeric:tabular-nums}
.subnav{display:flex;flex-direction:column;gap:1px;margin:3px 0 8px 9px;padding-left:11px;
  border-left:1px solid #23344F}
.subnav .nav{font-size:12.5px;padding:5px 9px;font-weight:400}
.subnav .nav.on{font-weight:600;background:transparent;color:#fff}
.subnav .nav.on::before{content:'';position:absolute;left:-12px;width:2px;height:15px;
  background:var(--blue);border-radius:2px}
.side .foot{margin-top:auto;border-top:1px solid var(--nav-line);padding:13px 8px 2px;
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--nav-txt)}
.av{width:28px;height:28px;border-radius:50%;background:var(--nav-2);color:#fff;
  display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:0 0 auto}
.side .btn.ghost{color:var(--nav-dim)}
.side .btn.ghost:hover{background:var(--nav-2);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:16px 30px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar h1{font-size:20px;font-weight:600;letter-spacing:-0.02em}
.crumb{font-size:11.5px;color:var(--ink-3);margin-bottom:2px}
.meta{display:flex;align-items:center;gap:9px;margin-top:3px;font-size:12.5px;color:var(--ink-2);
  flex-wrap:wrap}
.meta .mono{font-size:11.5px}
.body{padding:26px 30px 60px;max-width:1560px;width:100%}

/* ---------------- atoms ---------------- */
.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;
  color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#B9C6D8}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:#2450AE}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--tint);color:var(--ink)}
.btn.danger:hover{border-color:var(--red);color:var(--red)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:5px;background:var(--blue-bg);color:var(--blue-ink);
  white-space:nowrap}
.chip.g{background:var(--green-bg);color:var(--green)}
.chip.r{background:var(--red-bg);color:var(--red)}
.chip.a{background:var(--amber-bg);color:var(--amber)}
.chip.n{background:#EFF2F7;color:var(--ink-2)}
.chip.s{background:var(--pink-bg);color:var(--pink)}
/* Gemini grounding redirect: blue, since it IS a Google artefact */
.chip.redirect{background:#E6F0FB;color:#1B5FA8}
.chip.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}

.sent{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:1px 8px;
  border-radius:999px;border:1px solid}
.sent.pos{color:var(--green);border-color:#BFE3CE;background:#F5FBF8}
.sent.neu{color:var(--ink-2);border-color:var(--line-2);background:#FBFCFE}
.sent.neg{color:var(--red);border-color:#F2C9C9;background:#FEF7F7}

.delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
  padding:1px 6px;border-radius:4px;vertical-align:baseline;letter-spacing:.01em}
.delta .ar{font-size:8px;line-height:1}
.delta.up{background:var(--green-bg);color:var(--green)}
.delta.down{background:var(--red-bg);color:var(--red)}
.delta.flat{background:#EFF2F7;color:var(--ink-2)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh)}
/* One row, never two: the subtitle truncates before it can push an action onto
   a second line, otherwise two cards side by side stop lining up. */
.card-h{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:10px;height:56px;flex-wrap:nowrap;overflow:hidden}
.card-h h3{font-size:13.5px;font-weight:600;letter-spacing:-0.005em;white-space:nowrap;flex:0 0 auto}
.card-h .sub{font-size:12px;color:var(--ink-3);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card-h .act{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600;color:var(--blue);
  cursor:pointer}
.sec{margin-bottom:26px}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sec-h h2{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.sec-h .sub{font-size:12.5px;color:var(--ink-3)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.takeaway{font-size:13px;color:var(--ink-2);background:var(--tint);border:1px solid var(--line);
  border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:11px 14px;margin-top:12px}
.takeaway.warn{border-left-color:var(--red)}

/* ---------------- KPI cards ---------------- */
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px;align-items:stretch}
.kpis.even{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  display:flex;flex-direction:column}
.kpi .v{font-size:36px;font-weight:700;letter-spacing:-0.035em;line-height:1.12;margin-top:6px;
  display:inline-block;vertical-align:baseline;margin-right:9px}
.kpi.sm .v{font-size:26px}
.kpi .foot{font-size:12px;color:var(--ink-3);margin-top:auto;padding-top:8px}
.kpi svg{display:block;margin-top:10px}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:9px 14px;background:var(--tint);border-bottom:1px solid var(--line);
  white-space:nowrap}
td{font-size:13px;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr.click{cursor:pointer}
tbody tr:hover td{background:var(--tint)}
td .delta{margin-left:5px}
.nowrap{white-space:nowrap}
.u-dom{font-weight:600;font-size:13px}
/* Fixed layout, so one long URL can't dictate every column's width. */
table.pages{table-layout:fixed}
/* A class rather than an inline style, so the phone rules can switch it to
   horizontal scroll. Inline styles win over media queries. */
.pagescard{overflow:hidden}
table.pages td{vertical-align:middle}
table.pages th.mid,table.pages td.mid{text-align:center}
table.pages th:last-child,table.pages td:last-child{padding-right:18px}
.u-url.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cited-for{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.cited-for>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sized so all six fit on one line: the column never reflows, so rows stay the
   same height whether a page was cited once or everywhere. */
.surfset{display:inline-flex;gap:5px;justify-content:center;align-items:center;
  flex-wrap:nowrap}
.slogo.sm{width:26px;height:26px;border-radius:7px;padding:4px;background:#fff;
  border:1px solid var(--line);flex:0 0 auto}
/* A solid tile reads bigger than line art at the same size, and this one has no
   4px inset either, so it gets sized down to sit level with the rest. */
.slogo.sm.bleed{width:23px;height:23px;border-radius:6px;padding:0;border:none;
  background:none}
/* URLs stay in the UI sans: monospace read like a terminal, not a product */
.u-url{font-size:12px;color:var(--blue);margin-top:3px;word-break:break-word;
  line-height:1.5;letter-spacing:-0.005em}
.fav{width:19px;height:19px;border-radius:4px;display:inline-grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff;vertical-align:-4px;margin-right:9px}

/* The run's shape belongs on its own line where it can be read, not squeezed
   into a header beside a dropdown. */
.matcap{padding:15px 19px 0;font-size:12.5px;color:var(--ink-3)}

/* ---------------- verdict matrix ----------------
   Full width, so a question gets a whole line instead of stacking into three.
   The prompt is the row's label and should read like a sentence. */
.matrix{width:100%;border-collapse:separate;border-spacing:5px 7px;table-layout:fixed}
.matrix th{background:transparent;border:none;text-align:center;padding:0 4px 10px;
  line-height:1.3;white-space:normal}
.matrix th.q,.matrix th:first-child{text-align:left;width:42%}
.matrix td{border:none;padding:0;background:none !important}
.matrix td.p{font-size:13px;padding-right:26px;line-height:1.45;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matrix td.p .t{font-size:11px;color:var(--ink-3);margin-top:1px}
.cell{display:flex;align-items:center;justify-content:center;gap:5px;height:44px;
  border-radius:var(--r-sm);font-size:12px;font-weight:600}
.cell.cited{background:var(--green-bg);color:var(--green)}
.cell.mentioned{background:var(--blue-bg);color:var(--blue-ink)}
.cell.absent{background:#F1F4F8;color:var(--ink-3);font-weight:400}
.cell.flagged{background:var(--red-bg);color:var(--red)}
.cell.nodata{background:repeating-linear-gradient(135deg,#F7F9FC,#F7F9FC 6px,#F1F4F8 6px,#F1F4F8 12px);
  color:var(--ink-3);font-weight:400;font-size:11px}
.cell .pos{font-family:var(--mono);font-size:10.5px;opacity:.8;font-weight:500}
/* Even columns rather than ragged wrap, so a fifth item doesn't end up alone
   on a second line looking like an afterthought. */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:9px 16px;margin-top:16px;font-size:12px;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

/* ---------------- share of voice ---------------- */
.sov{display:grid;grid-template-columns:26px 1fr 170px 54px 76px 74px;align-items:center;
  gap:14px;padding:12px 18px;border-bottom:1px solid var(--line)}
.sov:last-child{border-bottom:none}
.sov.you{background:var(--tint)}
.sov.you .nm{font-weight:600}
.sov .rk{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.sov .track{height:6px;border-radius:3px;background:#EDF1F7;overflow:hidden}
.sov .track>i{display:block;height:100%;border-radius:3px;background:#B9C6D8}
.sov.you .track>i{background:var(--blue)}
.sov .pc{font-size:13px;font-weight:600;text-align:right}
.sov .ps,.sov .dl{font-size:12px;text-align:right;color:var(--ink-3)}

/* ---------------- filters ----------------
   One toolbar, not three rows of loose pills: a segmented control for the
   primary cut, plain selects for the secondary ones. */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:#fff}
.seg button{font:inherit;font-size:12.5px;font-weight:500;padding:6px 13px;border:none;
  background:none;color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--tint);color:var(--ink)}
.seg button.on{background:var(--blue);color:#fff;font-weight:600}
.seg button .n{opacity:.65;margin-left:5px;font-variant-numeric:tabular-nums}
.seg button.on .n{opacity:.8}
.selwrap{display:inline-flex;align-items:center;gap:7px}
.selwrap .lbl{font-size:11px}
.selwrap select{width:auto;padding:6px 10px;font-size:12.5px}

.filters{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.pill{font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink-2);cursor:pointer;background:#fff;font-family:inherit}
.pill:hover{border-color:#B9C6D8}
.pill.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}

/* ---------------- sections on the single brand page ----------------
   Each section gets a real masthead so the eye knows a new subject started. */
.anchor{scroll-margin-top:20px}
.sec-divider{border:none;border-top:1px solid var(--line-2);margin:40px 0 0}
.sec-mast{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:26px 0 4px;margin-bottom:14px;border-bottom:2px solid var(--ink)}
.sec-mast h2{font-size:19px;font-weight:600;letter-spacing:-0.02em}
.sec-mast .sub{font-size:12.5px;color:var(--ink-3)}
.sec-mast .grow{flex:1}
.sec-mast .n{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}

/* ---------------- forms ---------------- */
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--r);padding:9px 12px;font:inherit;font-size:13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,92,197,.1)}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:14px}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.psel{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:8px;cursor:pointer;background:#fff}
.psel:hover{border-color:var(--line-2)}
.psel.on{border-color:var(--blue);background:#FBFCFE}
.psel input{width:auto;margin:0}
.psel .nm{font-size:13px;font-weight:600;flex:1}
.psel .why{font-size:12px;color:var(--ink-3);flex:1.4}
.psel .pr{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.repsel{display:flex;gap:8px}
.repsel label{display:flex;align-items:center;justify-content:center;flex:1;margin:0;
  border:1px solid var(--line);border-radius:var(--r);padding:9px;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--ink-2);background:#fff}
.repsel label.on{border-color:var(--blue);background:var(--blue-bg);color:var(--blue-ink)}
.repsel input{display:none}
.calc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.calcrow{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--ink-2);gap:12px}
.calcrow.tot{border-top:1px solid var(--line-2);margin-top:6px;padding-top:9px;font-weight:600;
  color:var(--ink);font-size:13.5px}

/* ---------------- responses ---------------- */
.resp{padding:16px 18px;border-bottom:1px solid var(--line)}
.resp:last-child{border-bottom:none}
.resp .top{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.resp .q{font-size:12.5px;color:var(--ink-2);flex:1;min-width:200px}
.resp .rep{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.resp .txt{font-size:13px;color:var(--ink-2);line-height:1.62}
.resp .txt mark{background:#FFF3C4;color:#7A5B00;border-radius:2px;padding:0 3px;font-weight:600}
.resp .src{font-size:11.5px;color:var(--ink-3);margin-top:8px}
.resp .src a{font-family:var(--mono);color:var(--blue);word-break:break-all}

/* ---------------- progress ---------------- */
.runbar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px;
  margin-bottom:18px}
.progress{height:6px;border-radius:999px;background:#EDF1F7;overflow:hidden;margin-top:10px}
.progress>i{display:block;height:100%;background:var(--blue);transition:width .4s ease}

/* ---------------- misc ---------------- */
.empty{text-align:center;padding:44px 20px;color:var(--ink-2);border:1px dashed var(--line-2);
  border-radius:10px;background:var(--panel)}
.empty h3{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:5px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#fff;border-radius:var(--r);padding:11px 20px;font-size:13px;z-index:100;max-width:90vw;
  box-shadow:0 4px 20px rgba(18,38,63,.2)}
.toast.error{background:var(--red)}
.modal-backdrop{position:fixed;inset:0;background:rgba(18,38,63,.35);display:grid;place-items:center;
  z-index:90;padding:20px;overflow:auto}
.modal{width:min(560px,100%);background:#fff;border-radius:12px;padding:24px;
  box-shadow:0 10px 40px rgba(18,38,63,.2)}
.modal h3{font-size:16px;font-weight:600;margin-bottom:16px}

/* ---------------- auth ---------------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(392px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px;box-shadow:0 2px 10px rgba(18,38,63,.05)}
.auth-card .brandmark{justify-content:center;padding-bottom:6px}
.auth-card h2{font-size:19px;font-weight:600;text-align:center;letter-spacing:-0.015em}
.auth-card p.s{font-size:12.5px;color:var(--ink-2);text-align:center;margin:5px 0 20px}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--ink-3);font-size:11.5px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

/* ============================================================
   Overview v5: hero chart, share of voice, attention, page lists
   ============================================================ */
.hero{display:grid;grid-template-columns:1.62fr 1fr;gap:18px;margin-bottom:18px}
.bignum{font-size:56px;font-weight:700;letter-spacing:-0.045em;line-height:.95;
  font-variant-numeric:tabular-nums;display:inline-block;vertical-align:baseline;margin-right:12px}

/* A grid, not flex-wrap: every chip is the same width, so names of wildly
   different lengths still form a tidy block instead of a ragged pile. */
.legend2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0 14px}
.lg{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;padding:7px 11px;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:#fff;cursor:pointer;
  transition:.13s ease;color:var(--ink-2);min-width:0}
.lg:hover{border-color:#C3CEDD}
.lg.off{opacity:.45}
.lg .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.lg .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);flex:0 0 auto}
.lg.off .v{color:var(--ink-3)}
.axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-4);
  margin:8px 0 0 34px;font-variant-numeric:tabular-nums}

/* chart hover readout */
.chartwrap{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:7px;
  padding:7px 10px;font-size:11.5px;line-height:1.5;white-space:nowrap;opacity:0;
  transform:translate(-50%,-118%);transition:opacity .1s ease;z-index:3;
  box-shadow:0 6px 18px -6px rgba(14,29,51,.5)}
.tip.on{opacity:1}
.tip b{font-variant-numeric:tabular-nums}
.tip .r{display:flex;align-items:center;gap:6px;color:#C7D3E4}
.tip .r i{width:7px;height:7px;border-radius:2px;display:inline-block}

/* one skeleton so every stat card bottoms out together */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh);transition:.15s ease}
.stat:hover{box-shadow:0 1px 2px rgba(14,29,51,.05), 0 12px 28px -16px rgba(14,29,51,.22)}
.stat .vrow{display:flex;align-items:baseline;gap:9px;margin-top:8px}
.stat .v{font-size:28px;font-weight:700;letter-spacing:-0.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat .foot{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.45;min-height:35px}

/* share of voice */
.sov2{padding:11px 19px;border-bottom:1px solid var(--line);transition:.13s ease}
.sov2:last-child{border-bottom:none}
.sov2:hover{background:var(--tint)}
.sov2.you{background:linear-gradient(90deg,var(--blue-bg),transparent 70%)}
.sov2 .top{display:flex;align-items:center;gap:10px}
.sov2 .rk{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;width:12px}
.sov2 .swatch{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.sov2 .nm{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sov2.you .nm{font-weight:600}
.sov2 .pc{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.sov2 .dl{width:52px;text-align:right}
.sov2 .bar{height:5px;border-radius:3px;background:#EDF1F7;overflow:hidden;margin:7px 0 0 31px}
.sov2 .bar>i{display:block;height:100%;border-radius:3px;background:#CBD5E1;transition:width .5s ease}
.sov2.you .bar>i{background:linear-gradient(90deg,var(--blue),#3B82F6)}
.sov2.c1 .bar>i{background:var(--c1)} .sov2.c2 .bar>i{background:var(--c2)}
.sov2.c3 .bar>i{background:var(--c3)} .sov2.c4 .bar>i{background:var(--c4)}
.sov2.c5 .bar>i{background:var(--c5)}

/* needs attention — side by side at full width, since three findings stretched
   across a whole screen read as three lonely sentences */
.attgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.attgrid .att{border-right:1px solid var(--line);border-bottom:none}
.attgrid .att:last-child{border-right:none}
@media (max-width:940px){
  .attgrid{grid-template-columns:1fr}
  .attgrid .att{border-right:none;border-bottom:1px solid var(--line)}
  .attgrid .att:last-child{border-bottom:none}
}
.att{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.att:last-child{border-bottom:none}
.att .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.att .ic svg{width:14px;height:14px}
.att .t{font-size:12.5px;font-weight:600;margin-bottom:2px}
.att .d{font-size:12px;color:var(--ink-2);line-height:1.5}
.att .d b{color:var(--ink)}

/* page lists with favicons */
.pg .ico{margin-right:0 !important;vertical-align:baseline !important}
.pg{display:grid;grid-template-columns:22px 1fr 52px 30px;align-items:center;gap:12px;
  padding:11px 19px;border-bottom:1px solid var(--line);transition:.13s ease}
.pg:last-child{border-bottom:none}
.pg:hover{background:var(--tint)}
/* The lettermark is only a fallback. Once a real favicon loads we drop the
   box behind it, so the site's own icon sits on the page rather than inside a
   grey chip that isn't the site's. */
.ico{width:22px;height:22px;border-radius:6px;overflow:hidden;position:relative;flex:0 0 auto;
  background:#F0F3F8;display:inline-grid;place-items:center}
.ico img{width:18px;height:18px;display:block;position:relative;z-index:1;border-radius:4px}
.ico .fb{position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;
  font-weight:700;color:#fff;background:#64748B}
.ico.you .fb{background:var(--blue)}
.ico.ok{background:none}
.ico.ok .fb{display:none}
.pg .path{min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-2)}
.pg .path b{font-weight:600;color:var(--ink)}
.pg .bar{height:4px;border-radius:2px;background:#EDF1F7;overflow:hidden}
.pg .bar>i{display:block;height:100%;border-radius:2px;background:var(--blue)}
.pg .bar.alt>i{background:#B6C2D2}
.pg .n{font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  text-align:right}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wide{display:grid;grid-template-columns:1.72fr 1fr;gap:18px;align-items:start}

/* ---------------- loading skeletons ----------------
   The layout is drawn before the data lands, in the right shape, so nothing
   jumps when it arrives. Waiting on a blank screen is most of what makes an
   app feel slow: more than the milliseconds themselves. */
@keyframes shimmer{0%{background-position:-500px 0}100%{background-position:500px 0}}
.sk{background:#EDF1F7;background-image:linear-gradient(90deg,#EDF1F7 0%,#F5F8FC 45%,#EDF1F7 90%);
  background-size:500px 100%;animation:shimmer 1.25s linear infinite;border-radius:6px;
  display:block}
.sk.t{height:11px} .sk.m{height:15px} .sk.lg{height:34px}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 19px;
  border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:none}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ============================================================
   Public site: landing, docs, legal. Same tokens as the app so
   signing in doesn't feel like arriving at a different product.
   ============================================================ */
body.pub{background:#fff}

/* --- the small stuff that separates designed from assembled --- */
::selection{background:#D9E5FD;color:var(--ink)}
.pub a:focus-visible,.pub button:focus-visible{outline:2px solid var(--blue);
  outline-offset:3px;border-radius:4px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* Nav links get an underline that grows from the left rather than appearing
   all at once: the kind of detail you feel before you notice it. */
.publinks a{position:relative;padding-bottom:3px}
.publinks a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.publinks a:hover::after{transform:scaleX(1)}

/* A numbered eyebrow with a hairline gives each section a place in an order,
   instead of six blocks that could be shuffled without anyone noticing. */
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.kicker .n{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:700}
.kicker::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.kicker.mid{justify-content:center}
.kicker.mid::after{display:none}
.kicker.mid::before{content:'';flex:0 0 40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2))}
.pubwrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
.pubnav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);z-index:20}
/* A 2px accent above the nav: the sort of thing print designers call a rule,
   and the cheapest way to make a page look like it has an art director. */
.pubnav::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),#8E7CF8 42%,var(--c1) 78%,var(--blue))}
.pubnav .pubwrap{height:64px;display:flex;align-items:center;gap:14px}
.pubmark{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;
  letter-spacing:-0.015em;color:var(--ink)}
.pubmark i{width:26px;height:26px;border-radius:7px;flex:0 0 auto;font-style:normal;
  background:linear-gradient(140deg,#3B82F6,#1D4ED8);display:grid;place-items:center}
.pubmark svg{width:14px;height:14px}
.publinks{display:flex;gap:22px;margin-right:8px}
.publinks a{font-size:13px;font-weight:500;color:var(--ink-2);transition:.13s ease}
.publinks a:hover{color:var(--ink)}
.btn.lg{padding:11px 20px;font-size:14px}

/* Dot grid under the wash: gradients alone read as a template, but a fine
   grid gives the page a surface, and it fades out so it never competes. */
.hero-pub{padding:76px 0 70px;position:relative;overflow:hidden;background:
  radial-gradient(760px 420px at 18% -8%, #EAF1FE 0%, rgba(255,255,255,0) 62%),
  radial-gradient(620px 380px at 88% 8%, #F2EEFD 0%, rgba(255,255,255,0) 60%)}
.hero-pub::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, #C8D4E6 1px, transparent 1px);
  background-size:22px 22px;opacity:.4;
  -webkit-mask-image:radial-gradient(680px 340px at 22% 20%, #000 0%, transparent 72%);
  mask-image:radial-gradient(680px 340px at 22% 20%, #000 0%, transparent 72%)}
.hero-pub>*{position:relative}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);background:#fff;
  border:1px solid #D8E4FB;padding:5px 12px;border-radius:999px;margin-bottom:22px;
  box-shadow:0 1px 2px rgba(14,29,51,.05)}
.hero-pub h1{font-size:54px;line-height:1.04;font-weight:700;letter-spacing:-0.035em}
.lead{font-size:17px;line-height:1.62;color:var(--ink-2);margin-top:18px;max-width:620px}

/* hero product preview: the real components, not an illustration */
.preview{position:relative}
.pvcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:0 2px 4px rgba(14,29,51,.04), 0 26px 60px -28px rgba(14,29,51,.42);
  transform:perspective(1400px) rotateY(-7deg) rotateX(2deg)}
.pvnum{font-size:48px;font-weight:700;letter-spacing:-0.045em;line-height:1;
  font-variant-numeric:tabular-nums;margin-right:10px;vertical-align:baseline;
  display:inline-block}
.pvrow{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:12.5px;
  color:var(--ink-2);border-top:1px solid var(--line)}
.pvrow b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.pvrow.you{font-weight:600;color:var(--ink)}
.pvrow .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.pvchips{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pvchips .cell{height:auto;padding:7px 13px;font-size:11.5px;border-radius:8px;
  box-shadow:0 1px 2px rgba(14,29,51,.05)}

.band{background:var(--bg);border-block:1px solid var(--line);padding:60px 0}
.pubsec{padding:64px 0}
/* Both capped, so the heading and the paragraph read as one column. The
   paragraph shouldn't stretch to match the heading: past about 80 characters
   a line gets hard to track back from. Bringing the heading in instead. */
.pubsec h2,.band h2{font-size:30px;font-weight:600;letter-spacing:-0.025em;
  line-height:1.2;max-width:860px}
.pubsec > .pubwrap > .lead{max-width:720px}
.bandhead{text-align:center;max-width:600px;margin:0 auto 30px}
.bandhead p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin-top:12px}
.pubhead{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.pubhead h1{font-size:40px;font-weight:700;letter-spacing:-0.03em}

.surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.surf{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;
  box-shadow:var(--sh);display:grid;grid-template-columns:36px 1fr;
  grid-template-rows:auto auto;column-gap:14px;align-items:center;transition:.15s ease}
.surf:hover{border-color:#C9D6E8;
  box-shadow:0 1px 2px rgba(14,29,51,.05), 0 14px 30px -18px rgba(14,29,51,.3)}
/* Logos live in static/logos/ as standalone files, drop an official SVG over
   one and it updates everywhere without a code change. Each sits in the same
   white tile so five marks with different shapes and weights still line up. */
.slogo{grid-row:1/3;width:36px;height:36px;border-radius:10px;display:block;
  background:#fff;border:1px solid var(--line);padding:6px;object-fit:contain}
/* Marks that carry their own solid tile fill the frame instead of sitting in it. */
.slogo.bleed{padding:0;border:none;background:none}
.surf b{font-size:13.5px;font-weight:600;align-self:end}
.surf span:not(.slogo){font-size:12px;color:var(--ink-3);align-self:start}

/* Hairline dividers between columns instead of three cards floating in space, 
   it reads as one considered block rather than a repeated component. */
.threecol{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:34px}
.feat{padding:28px 30px 6px;border-left:1px solid var(--line);position:relative}
.feat:first-child{border-left:none;padding-left:0}
.feat:last-child{padding-right:0}
.feat::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--blue);transition:width .32s cubic-bezier(.4,0,.2,1)}
.feat:hover::before{width:44px}
.feat:first-child::before{left:0}
.feat h3{font-size:16px;font-weight:600;margin:14px 0 7px;letter-spacing:-0.015em}
.feat p{font-size:13.5px;color:var(--ink-2);line-height:1.66}
.fic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.fic svg{width:19px;height:19px}
@media (max-width:860px){
  .feat{border-left:none;border-top:1px solid var(--line);padding:24px 0 6px}
  .feat:first-child{border-top:none}
}

.split2{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.split2 p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin-top:14px}
.ticks{list-style:none;padding:0;margin:20px 0 0}
.ticks li{position:relative;padding:7px 0 7px 26px;font-size:13.5px;color:var(--ink-2)}
.ticks li::before{content:'';position:absolute;left:2px;top:14px;width:9px;height:5px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}
.statbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--sh)}
.crow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13px;
  color:var(--ink-2);border-bottom:1px solid var(--line)}
.crow b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.crow.tot{border-bottom:none;border-top:2px solid var(--ink);margin-top:4px;padding-top:12px;
  font-weight:600;color:var(--ink);font-size:14.5px}

.closer{text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:18px;
  padding:48px 32px;position:relative;overflow:hidden}
.closer::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 220px at 50% 0%, rgba(37,99,235,.07) 0%, rgba(37,99,235,0) 70%)}
.closer h2{position:relative}
.closer p{position:relative;font-size:15.5px;color:var(--ink-2);line-height:1.65;
  max-width:560px;margin:12px auto 0}
.closer .row{position:relative}
.closer .faint a{color:var(--blue);font-weight:600}

/* long-form pages */
.prose{max-width:760px}
.prose h2{font-size:21px;font-weight:600;letter-spacing:-0.015em;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin-bottom:14px}
.prose li{font-size:14.5px;line-height:1.7}
.prose a{color:var(--blue);font-weight:500}
.prose table{margin:16px 0 22px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.prose td{font-size:13.5px;color:var(--ink-2)}
.prose pre{background:var(--ink);color:#E8EDF4;padding:13px 16px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:12.5px;overflow-x:auto;margin:6px 0 18px}
.callout{background:var(--blue-bg);border:1px solid #D6E3FB;border-radius:var(--r);
  padding:16px 19px;font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:22px 0}
.callout b{color:var(--ink)}

/* demo banner: says plainly that this is real data, not a mock-up */
.demobar{background:var(--ink);color:#C7D3E4;font-size:12.5px;padding:11px 0}
.demobar b{color:#fff}
.demobar .chip{background:rgba(255,255,255,.14);color:#fff}
.main.demo{display:block}
.main.demo .body{margin:0 auto;padding:26px 24px 60px;max-width:1160px}
.main.demo .topbar{position:static}

.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.ccard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--sh);transition:.15s ease}
.ccard:hover{border-color:#C3CEDD;
  box-shadow:0 1px 2px rgba(14,29,51,.05), 0 12px 28px -16px rgba(14,29,51,.24)}
.ccard h3{font-size:15px;font-weight:600;margin:13px 0 4px;letter-spacing:-0.01em;color:var(--ink)}
.ccard p{font-size:13.5px;color:var(--blue);font-weight:500;margin:0 0 5px}
.ccard .faint{display:block;font-size:12.5px}
@media (max-width:860px){.contactgrid{grid-template-columns:1fr}}

.pubfoot{border-top:1px solid var(--line);padding:46px 0 32px;background:var(--bg)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.footgrid a{display:block;font-size:13px;color:var(--ink-2);padding:4px 0}
.footgrid a:hover{color:var(--blue)}
.footgrid .lbl{margin-bottom:8px}
.footend{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;
  padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.footend a{color:var(--ink-2);font-weight:500}

@media (max-width:1000px){
  .herogrid{grid-template-columns:1fr;gap:40px}
  .pvcard{transform:none}
  .surfaces{grid-template-columns:repeat(2,1fr)}
}
/* ---------------- phones: the report layouts ----------------
   The overview grids were all built for a wide screen and had no small-screen
   behaviour at all, so on a phone the hero, the stat cards and the two page
   lists each stayed in multiple columns and squashed. */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:14px}
  .strip{grid-template-columns:1fr 1fr;gap:12px}
  .two{grid-template-columns:1fr;gap:14px}
  .stat{padding:14px 15px}
  .stat .v{font-size:24px}
  .bignum{font-size:44px}

  /* A six-surface grid can't fit 390px and shouldn't be squeezed into it.
     Scroll it sideways instead, with the prompt column wide enough to read. */
  .mwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix{min-width:560px}
  .matrix th.q,.matrix th:first-child{width:200px}

  .demobar{font-size:12px}
  .demobar .pubwrap{flex-wrap:wrap;gap:8px}
  .demobar .btn{width:100%;justify-content:center}

  .main.demo .body{padding:18px 14px 44px}
  .main.demo .topbar{padding:0 0 14px}
  .main.demo .topbar h1{font-size:22px}

  /* Cited Pages has seven columns; same treatment inside the app. */
  .pagescard{overflow-x:auto}
  table.pages{min-width:720px}

  .card-h{height:auto;min-height:52px;padding:13px 15px;flex-wrap:wrap}
  .card-h .sub{display:none}          /* the heading carries the meaning */
  .card-h .act{margin-left:auto}
  .matcap{padding:13px 15px 0}
  .pg{padding:11px 15px;gap:10px}
  .sov2{padding:11px 15px}
}

/* Phone header: the mark plus two buttons doesn't fit, and the second button
   was wrapping onto its own line and breaking the bar. Create Account is the
   hero's primary CTA and appears again at the foot of the page, so the header
   keeps Sign In, which is the one thing a returning user comes here for. */
@media (max-width:640px){
  .pubwrap{padding:0 16px}
  .pubnav .pubwrap{height:58px;flex-wrap:nowrap;gap:10px}
  .pubnav .btn.pri{display:none}
  .pubmark{font-size:13.5px;min-width:0;overflow:hidden;white-space:nowrap;
    text-overflow:ellipsis}
  .pubmark i{width:24px;height:24px;flex:0 0 auto}
  .pubnav .btn.sm{flex:0 0 auto;padding:7px 14px}
  .hero-pub .row .btn{flex:1 1 auto;justify-content:center}
}

@media (max-width:860px){
  .hero-pub{padding:52px 0 46px}
  .hero-pub h1{font-size:36px}
  .surfaces,.threecol{grid-template-columns:1fr}
  .split2{grid-template-columns:1fr;gap:28px}
  .footgrid{grid-template-columns:1fr 1fr}
  .publinks{display:none}
  .pubsec h2,.band h2{font-size:24px}
}

/* ---------------- print ----------------
   Not a PDF feature: just so a screen someone prints isn't ruined by the
   sidebar and the toolbars. */
@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff !important}
  .side,.toolbar,.toast,.runbar,.btn{display:none !important}
  .app,.main{display:block}
  .body{padding:0 !important;max-width:none}
  .card{break-inside:avoid}
  .sov,.cell,table tr{page-break-inside:avoid;break-inside:avoid}
  .u-url{word-break:break-all}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .body{padding:18px 16px 40px}
  .topbar{padding:14px 16px}
  .sov{grid-template-columns:22px 1fr 60px 60px;gap:10px}
  .sov .track,.sov .ps{display:none}
}