/* Localecheck — shared design system */

:root {
  --ink: #0e1319;
  --ink-2: #333d4b;
  --muted: #68737f;
  --line: #e2e6eb;
  --line-2: #edf0f3;
  --paper: #ffffff;
  --bg: #fafbfc;
  --accent: #1a4fd6;
  --accent-2: #143fae;
  --accent-soft: #eef3ff;
  --ok: #0f7b4f;
  --ok-bg: #e9f6ef;
  --warn: #9a5a00;
  --warn-bg: #fdf4e5;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --r: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 4px 16px rgba(16, 24, 40, 0.08);
}

* { box-sizing: border-box; }

/* The hidden attribute must win over any component display rule below.
   Without this, .notice { display: flex } silently defeats hidden="". */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.018em; font-weight: 650; }
p { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 58px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 680;
  font-size: 16.5px;
  letter-spacing: -0.022em;
  color: var(--ink);
  flex: 0 0 auto;
}
.logo:hover { text-decoration: none; }

.logo-mark {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}

.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a { color: var(--ink-2); font-size: 14px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.on { color: var(--ink); font-weight: 600; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { background: #f6f8fa; text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #f1f4f7; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- hero ---------- */

.hero { padding: 64px 0 20px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 46px;
  letter-spacing: -0.032em;
  /* The headline is two sentences that must break between them, not inside
     them. At 46 px they measure 513 px and 467 px, so the old 15ch (397 px)
     clamp forced a third line and stranded "In" at the end of line two. */
  max-width: 22ch;
  margin-bottom: 18px;
}

.hero h1 em { font-style: normal; color: var(--accent); }

.hero p.lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.55;
}

.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.hero-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .hero { padding: 40px 0 12px; }
  .hero h1 { font-size: 32px; max-width: none; }
  .hero p.lede { font-size: 16px; }
}

/* ---------- sections ---------- */

.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: 26px; letter-spacing: -0.024em; margin-bottom: 8px; }
.section-head p { color: var(--muted); font-size: 15px; max-width: 64ch; }

.divider { height: 1px; background: var(--line); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow);
}

.card-link {
  display: block;
  color: inherit;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
.card-link:hover {
  text-decoration: none;
  border-color: #c9d2de;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.card h3 { font-size: 16px; margin-bottom: 7px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.icon-box {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-live { background: var(--ok-bg); color: var(--ok); }
.badge-soon { background: #f1f3f6; color: var(--muted); }
.badge-free { background: var(--accent-soft); color: var(--accent); }

/* ---------- feature list ---------- */

.feature { display: flex; gap: 14px; }
.feature-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.feature h3 { font-size: 15.5px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 14px; }

/* ---------- pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(26, 79, 214, 0.1);
}

.price-tag {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
}

.price-name { font-size: 15px; font-weight: 650; margin-bottom: 4px; }
.price-sub { font-size: 13.5px; color: var(--muted); min-height: 40px; }

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 16px 0 4px;
}
.price-amount b { font-size: 38px; font-weight: 680; letter-spacing: -0.03em; }
.price-amount span { font-size: 14px; color: var(--muted); }
.price-alt { font-size: 13px; color: var(--muted); min-height: 20px; }

.price-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 22px;
  display: grid;
  gap: 9px;
}
.price-list li {
  font-size: 13.8px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 1.8px solid var(--ok);
  border-bottom: 1.8px solid var(--ok);
  transform: rotate(-45deg);
}
.price-list li.off { color: #9aa4b0; }
.price-list li.off::before {
  border: none;
  width: 8px;
  height: 1.5px;
  background: #c3cbd4;
  transform: none;
  top: 11px;
}

.price-card .btn { width: 100%; margin-top: auto; }
.price-card .price-list { margin-bottom: 20px; }

/* ---------- table ---------- */

.table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: auto;
}
table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.8px;
  min-width: 640px;
}

/* The 640px floor exists so the four-column pricing grid keeps its columns
   legible instead of crumbling. A two-column table has nothing to protect —
   applying the same floor inside a 516px hero column only produced a sideways
   scrollbar that clipped the row labels. */
table.cmp-2col { min-width: 0; }
table.cmp th,
table.cmp td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
}
table.cmp th {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--muted);
  background: #fbfcfd;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
table.cmp tr:last-child td { border-bottom: none; }
table.cmp td.c { text-align: center; }
table.cmp .yes { color: var(--ok); font-weight: 600; }
table.cmp .no { color: #9aa4b0; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
  margin-top: 40px;
  font-size: 13.5px;
  color: var(--muted);
}
.footer-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 650;
}
.footer-col a {
  display: block;
  color: var(--muted);
  padding: 3px 0;
  font-size: 13.5px;
}
.footer-col a:hover { color: var(--ink); text-decoration: none; }
.footer-bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

/* =========================================================
   TOOL UI
   ========================================================= */

.tool-head {
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.tool-head h1 { font-size: 28px; letter-spacing: -0.026em; margin-bottom: 8px; }
.tool-head p { color: var(--muted); font-size: 15px; max-width: 68ch; }

.tool-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Same specificity as .wrap, declared later, so the horizontal value has to be
   repeated here — shorthand `22px 0 60px` used to swallow .wrap's 24px inset
   and every tool panel sat 24px left of the heading above it (and flush to the
   screen edge on a phone). */
.tool-body { padding: 22px 24px 60px; }

.tool-grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1040px) {
  .tool-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 16px; }

.panel-title {
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* form controls */

label.lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
label.lbl b { font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: #fff;
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 79, 214, 0.1);
}
textarea { resize: vertical; min-height: 40px; line-height: 1.45; }

/* Sample text sitting in a placeholder reads as real input at a glance, and
   the counter beside it then insists there is nothing to count. Push it far
   enough back that the difference is obvious without reading. */
::placeholder { color: #a9b3c1; opacity: 1; }
select { cursor: pointer; }

.field { margin-bottom: 9px; }
.field:last-child { margin-bottom: 0; }

.meter {
  height: 3px;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 5px;
}
.meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.16s ease;
}

/* version card */

.version {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px;
  margin-bottom: 9px;
  background: #fcfdfe;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  cursor: pointer;
}
.version:hover { border-color: #ccd5e0; }
.version.active {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(26, 79, 214, 0.09);
}

.vhead { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.vhead select { max-width: 178px; width: auto; flex: 0 0 auto; }

.flag {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ok);
}

.icon-btn {
  margin-left: auto;
  border: none;
  background: none;
  color: #a7b0bb;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  flex: 0 0 auto;
}
.icon-btn:hover { background: #f1f3f6; color: var(--bad); }

.add-btn {
  width: 100%;
  padding: 9px;
  border: 1px dashed #c9d2de;
  background: none;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.add-btn:hover { border-color: var(--accent); color: var(--accent); }

.sep { height: 1px; background: var(--line-2); margin: 15px 0; }

/* segmented toggle */

.toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.toggle button {
  border: none;
  background: #fff;
  padding: 6px 15px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.toggle button.on { background: var(--ink); color: #fff; }

/* SERP preview */

.serp {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
  background: #fff;
  max-width: 660px;
  transition: max-width 0.2s, border-radius 0.2s;
}
.serp.mobile {
  max-width: 372px;
  border-radius: 24px;
  padding: 20px 15px;
  border-width: 7px;
  border-color: #1d2126;
}

.site {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.fav {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8eaed;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--muted);
  flex: 0 0 auto;
}
.siteurl { font-size: 12px; color: #4d5156; line-height: 1.35; min-width: 0; }
.siteurl b { font-weight: 400; display: block; }
.sitepath { color: #5f6368; }

.stitle {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: #1a0dab;
  margin: 0 0 4px;
  overflow: hidden;
}
.mobile .stitle { font-size: 18px; }

.sdesc {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4d5156;
  margin: 0;
  overflow: hidden;
}
.mobile .sdesc { font-size: 13px; }

.rtl { direction: rtl; text-align: right; }
.rtl .site { flex-direction: row-reverse; }
.rtl .siteurl { text-align: right; }

.truncnote {
  font-size: 12px;
  color: var(--bad);
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* diagnostics */

.diag { margin-top: 16px; display: grid; gap: 6px; }

.row {
  display: flex;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  align-items: flex-start;
  line-height: 1.5;
}
.row i { font-style: normal; font-weight: 620; flex: 0 0 auto; font-size: 12.5px; }
.row.ok { background: var(--ok-bg); color: var(--ok); }
.row.warn { background: var(--warn-bg); color: var(--warn); }
.row.bad { background: var(--bad-bg); color: var(--bad); }
.row.info { background: #f2f5f9; color: #344054; }

/* comparison matrix */

.matrix { margin-top: 22px; }

.mx-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 74px 62px;
  gap: 11px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  transition: background 0.12s;
  cursor: pointer;
}
.mx-row:hover { background: #f6f8fa; }
.mx-row.head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 650;
  padding-top: 0;
  padding-bottom: 6px;
  cursor: default;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
}
.mx-row.head:hover { background: none; }
.mx-row.danger { background: #fdf6f5; }

.mx-code {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mx-track {
  height: 16px;
  background: var(--line-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.mx-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}
.mx-track .cutline {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  background: rgba(180, 35, 24, 0.55);
}
.mx-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-size: 12.5px;
}
.mx-delta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

/* advice box */

.advice {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 9px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  font-size: 13.3px;
  color: var(--ink-2);
  line-height: 1.6;
}
.advice b { color: var(--ink); }
.advice code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.hint { color: var(--muted); font-size: 12.5px; margin-top: 14px; line-height: 1.65; }

/* code output */

pre.code-out {
  background: #0e1319;
  color: #d7e0ea;
  border-radius: 9px;
  padding: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  overflow: auto;
  margin: 0;
  white-space: pre;
  min-height: 90px;
  tab-size: 2;
}
pre.code-out .k { color: #7fb2ff; }
pre.code-out .s { color: #9ee6a8; }
pre.code-out .c { color: #6b7785; }

/* misc */

.notice {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 9px;
  background: var(--warn-bg);
  border: 1px solid #f0dcbc;
  color: #7a4a00;
  font-size: 13.3px;
  line-height: 1.55;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* batch audit: results table, stat tiles, drop zone */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  margin-bottom: 14px;
  border: 1.5px dashed #c9d2dd;
  border-radius: 10px;
  background: #fbfcfe;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: center;
}
.drop:hover, .drop.on { border-color: var(--accent); background: var(--accent-soft); }
.drop b { font-size: 13.5px; color: var(--ink); font-weight: 620; }
.drop span { font-size: 12.5px; color: var(--muted); }

.stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.stat .n {
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .k {
  margin-top: 3px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 620;
}
.stat .sub { margin-top: 5px; font-size: 12px; color: var(--muted); }
.stat.bad .n { color: var(--bad); }
.stat.warn .n { color: var(--warn); }
.stat.ok .n { color: var(--ok); }

.tbl-scroll {
  max-height: 540px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 660;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tbl th:hover { color: var(--ink); }
.tbl th .arrow { opacity: 0.35; margin-left: 3px; }
.tbl th.sorted .arrow { opacity: 1; color: var(--accent); }
.tbl td { padding: 8px 11px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #f8fafc; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .u {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink-2);
}
.tbl .t { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .lg {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-2);
}

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 660;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
}
.pill.over { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.dup { background: #eef3ff; color: var(--accent); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px;
  border: 0;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

/* =========================================================
   POLISH PASS — appended so it wins over the rules above
   ========================================================= */

.nav-signin { font-size: 14px; color: var(--ink-2); }
.nav-signin:hover { color: var(--ink); text-decoration: none; }

.icon-box svg { display: block; }

/* One visible focus treatment for everything keyboard-reachable. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

/* Break long headings on sense, not on the last word. */
.hero h1, .section-head h2, .tool-head h1, .price-name { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Grid items default to min-width:auto, so a wide <table> inside a column
   stretches the whole page instead of scrolling inside its own wrapper.
   That is what pushed the mobile layout sideways. */
.grid > * { min-width: 0; }

/* Long code lines scroll inside their panel instead of widening the page. */
.tool-grid > *, .panel { min-width: 0; }
pre.code-out { overflow-x: auto; }

/* Link cards should feel clickable before the cursor lands on text. */
.card-link { transition: border-color 0.13s, box-shadow 0.13s, transform 0.13s; }
.card-link:hover {
  border-color: #ccd6e2;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.07);
  transform: translateY(-1px);
  text-decoration: none;
}
.card-link:active { transform: translateY(0); }

/* ---------- hero: copy left, a real result on the right ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 52px;
  align-items: center;
}
@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

.demo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 10px 34px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
}
.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 620;
}
.demo-row { padding: 11px 0; border-top: 1px solid var(--line-2); }
.demo-row:first-of-type { border-top: none; padding-top: 2px; }
.demo-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.demo-lang b { font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.demo-title { font-size: 15px; line-height: 1.42; color: #1a0dab; }
.demo-title .gone {
  color: #c2c8d0;
  text-decoration: line-through;
  text-decoration-color: rgba(180, 35, 24, 0.55);
}
.demo-cut {
  position: relative;
  height: 0;
  border-top: 1.5px dashed #e08579;
  margin-top: 3px;
}
.demo-cut::after {
  content: "cut at 580 px";
  position: absolute;
  right: 0;
  top: 3px;
  font-size: 10px;
  color: #b42318;
  letter-spacing: 0.02em;
}
.demo-fits { border-top: 1.5px dashed #8fcfae; }
.demo-fits::after { content: "fits"; color: var(--ok); }
.demo-px { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 660; }
.demo-px.over { color: var(--bad); }
.demo-px.ok { color: var(--ok); }

/* An informational notice, as opposed to a warning. Same shape, no alarm. */
.notice.info {
  background: #f2f5fa;
  border-color: #dfe6ef;
  color: #344054;
}