/* Firmo, V3 "Product"
   Fonts (self-hosted, latin subset, variable weight):
   - Figtree, Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
   - Bricolage Grotesque, Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
   - Poppins, Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
   Both are licensed under the SIL Open Font License, Version 1.1: https://openfontlicense.org
*/

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght.woff2") format("woff2-variations"), url("fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-latin-wght.woff2") format("woff2-variations"), url("fonts/bricolage-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F5F4F9;
  --bg-tint: #EDEBF5;
  --surface: #FFFFFF;
  --surface-2: #FAF9FD;
  --surface-3: #F2F0F8;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --line: rgba(30, 24, 80, .09);
  --line-2: rgba(30, 24, 80, .16);
  --ink: #16152A;
  --ink-2: #44435C;
  --ink-3: #62617A;

  --accent: #5A3FDF;
  --accent-2: #7B55F0;
  --accent-text: #4F35D2;
  --on-accent: #FFFFFF;
  --accent-soft: #EEEAFE;
  --accent-soft-ink: #4027B8;
  --ring: rgba(90, 63, 223, .45);

  --mint-bg: #DDF4EA;
  --mint-ink: #0B6343;
  --peach-bg: #FFE8D9;
  --peach-ink: #8A3A0E;
  --sky-bg: #DDEBFF;
  --sky-ink: #1D4E9A;
  --iris-bg: #ECE7FF;
  --iris-ink: #4327C0;

  --nff-ink: #57566F;
  --nff-line: #A9A6C2;

  --aur-1: #C8B6FF;
  --aur-2: #FFC8A6;
  --aur-3: #A7E6CF;
  --aur-4: #B6D5FF;

  --shadow-sm: 0 1px 2px rgba(22, 18, 60, .06), 0 1px 1px rgba(22, 18, 60, .04);
  --shadow-md: 0 1px 2px rgba(22, 18, 60, .05), 0 6px 16px -4px rgba(22, 18, 60, .08), 0 18px 36px -12px rgba(22, 18, 60, .10);
  --shadow-lg: 0 1px 1px rgba(22, 18, 60, .04), 0 4px 8px rgba(22, 18, 60, .04), 0 18px 40px -10px rgba(30, 20, 90, .14), 0 50px 100px -30px rgba(50, 30, 140, .28);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D0D18;
    --bg-tint: #121224;
    --surface: #171729;
    --surface-2: #141425;
    --surface-3: #1E1E35;
    --glass: rgba(26, 26, 46, .66);
    --glass-strong: rgba(28, 28, 50, .86);
    --line: rgba(210, 205, 255, .10);
    --line-2: rgba(210, 205, 255, .18);
    --ink: #EFEEF9;
    --ink-2: #BDBBD6;
    --ink-3: #9C9AB8;

    --accent: #9F8FFF;
    --accent-2: #B7A6FF;
    --accent-text: #B4A8FF;
    --on-accent: #120E2C;
    --accent-soft: rgba(159, 143, 255, .15);
    --accent-soft-ink: #CFC6FF;
    --ring: rgba(170, 155, 255, .6);

    --mint-bg: rgba(72, 205, 150, .14);
    --mint-ink: #86E2BC;
    --peach-bg: rgba(255, 150, 100, .14);
    --peach-ink: #FFC19C;
    --sky-bg: rgba(110, 165, 255, .15);
    --sky-ink: #A9CBFF;
    --iris-bg: rgba(159, 143, 255, .16);
    --iris-ink: #CDC3FF;

    --nff-ink: #B9B7D2;
    --nff-line: #6E6C8C;

    --aur-1: #4B35B8;
    --aur-2: #8A3F5C;
    --aur-3: #1D6B5A;
    --aur-4: #24508F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 1px 1px rgba(0, 0, 0, .3), 0 20px 50px -12px rgba(0, 0, 0, .6), 0 60px 120px -30px rgba(40, 20, 120, .45);
    --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 650; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
b, strong { font-weight: 650; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.ic { width: 16px; height: 16px; flex: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none !important; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1240px; }

/* ---------- Buttons ---------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px; line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-sm { --h: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(40, 20, 120, .25), 0 6px 16px -6px rgba(80, 50, 220, .55);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(40, 20, 120, .25), 0 10px 24px -6px rgba(80, 50, 220, .6); transform: translateY(-1px); }
.btn-primary:disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
.btn-glass {
  color: var(--ink); background: var(--glass-strong); border-color: var(--line-2);
  box-shadow: var(--shadow-sm), var(--inner-hi);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { border-color: var(--accent); }
.btn-dark { color: var(--bg); background: var(--ink); box-shadow: var(--shadow-sm); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ea-tag {
  font-size: 11px; font-weight: 650; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: inherit; margin-left: 2px;
}
@media (prefers-color-scheme: dark) { .ea-tag { background: rgba(0,0,0,.12); } }
.link-btn { background: none; border: 0; padding: 2px 4px; color: var(--accent-text); font-weight: 600; font-size: 13px; cursor: pointer; border-radius: 6px; }
.link-btn:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; pointer-events: none; }
.nav-shell {
  pointer-events: auto;
  max-width: 1160px; margin: 0 auto; height: 58px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 16px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-md), var(--inner-hi);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
/* The mark ships as two files, one drawn for light backgrounds and one for dark; the picture element picks
   whichever matches, so neither is ever shown against the wrong colour. */
.brand-mark { width: 35px; height: 35px; display: block; flex: none; }
.brand-mark img { width: 100%; height: 100%; display: block; }
/* Poppins sits high in its line box: at 26px the strokes of "firmo" centre 1.5px above the box centre, so
   centring the boxes leaves the word looking lifted next to the mark. The nudge is that measured 1.5px,
   written in em so it holds at every size. */
.brand-word { font-family: "Poppins", var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em;
  line-height: 1; transform: translateY(.058em); }  /* fmt: skip */
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 550; text-decoration: none; transition: background-color .2s, color .2s; }
.site-nav a:hover { background: var(--accent-soft); color: var(--ink); }
.nav-cta { margin-left: 6px; }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 118px 0 48px; isolation: isolate; margin-top: -70px; }
.aurora { position: absolute; inset: 0 0 auto 0; height: 980px; z-index: -2; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; will-change: transform; }
.b1 { width: 620px; height: 520px; left: -8%; top: -120px; background: var(--aur-1); animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 560px; height: 460px; right: -6%; top: -60px; background: var(--aur-2); animation: drift2 30s ease-in-out infinite alternate; }
.b3 { width: 520px; height: 420px; left: 30%; top: 260px; background: var(--aur-3); opacity: .55; animation: drift3 34s ease-in-out infinite alternate; }
.b4 { width: 480px; height: 380px; right: 18%; top: 420px; background: var(--aur-4); opacity: .6; animation: drift1 38s ease-in-out infinite alternate-reverse; }
@media (prefers-color-scheme: dark) { .blob { opacity: .5; } .b3, .b4 { opacity: .4; } }
@keyframes drift1 { to { transform: translate(80px, 60px) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-90px, 70px) scale(.94); } }
@keyframes drift3 { to { transform: translate(-60px, -40px) scale(1.1); } }
.hero-grid-bg {
  position: absolute; inset: 0 0 auto 0; height: 900px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 75%);
  opacity: .55;
}
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill-note {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #1FAE77; box-shadow: 0 0 0 3px rgba(31, 174, 119, .18); flex: none; }
.hero h1 {
  margin-top: 18px; max-width: 900px;
  font-size: clamp(40px, 5.6vw, 68px); font-weight: 680; letter-spacing: -.035em; line-height: 1.02;
}
.grad-text {
  background: linear-gradient(95deg, var(--accent) 0%, #B04FD8 55%, #F07A4A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
@media (prefers-color-scheme: dark) {
  .grad-text { background-image: linear-gradient(95deg, #B3A5FF 0%, #E49BF0 55%, #FFB28A 100%); }
}
.lede { text-wrap: balance; margin-top: 18px; max-width: 720px; font-size: clamp(17px, 1.6vw, 19.5px); color: var(--ink-2); line-height: 1.55; }
.lede strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

/* ---------- App window ---------- */
#search { margin-top: 40px; scroll-margin-top: 80px; }
.app {
  position: relative;
  background: var(--glass-strong);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), var(--inner-hi);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  overflow: hidden;
}
.app::before { /* glassy top sheen */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
}
@media (prefers-color-scheme: dark) { .app::before { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); } }
.app-chrome {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}
.traffic { display: flex; gap: 7px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; background: #FF6159; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.traffic i:nth-child(2) { background: #FFBD2E; }
.traffic i:nth-child(3) { background: #28C941; }
.app-url {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; min-width: 240px; justify-content: center;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-3); font-weight: 500;
}
.app-url .ic { width: 12px; height: 12px; }
.app-snap { justify-self: end; font-size: 12.5px; color: var(--ink-3); font-weight: 550; white-space: nowrap; }

.app-body { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 640px; }

/* Sidebar */
.app-side {
  border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 18px;
  max-height: 740px; overflow-y: auto; scrollbar-width: thin;
}
.side-head { display: flex; align-items: center; justify-content: space-between; }
.side-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; }
.fgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.flabel { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 12.5px; font-weight: 650; color: var(--ink-2); letter-spacing: .01em; text-transform: uppercase; }
.flabel-hint { text-transform: none; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: auto; font-size: 12px; }
.fnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.input {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface); font-size: 14px;
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input:focus-visible { outline: none; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat;
}
.select:disabled { opacity: .55; cursor: not-allowed; }
input[type="date"].input { padding: 0 8px; font-size: 13px; }

.combo { position: relative; }
.combo-ic { position: absolute; left: 11px; top: 11px; color: var(--ink-3); pointer-events: none; }
.input-combo { padding-left: 34px; }
.combo-pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 5px; transform-origin: top center;
  animation: pop .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.combo-pop ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.combo-pop li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; line-height: 1.3; align-items: start;
}
.combo-pop li b { font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); padding-top: 1px; }
.combo-pop li small { grid-column: 2; font-size: 11.5px; color: var(--ink-3); }
.combo-pop li[aria-selected="true"] { background: var(--accent-soft); }
.combo-pop li.is-added b::after { content: " ✓"; }
.combo-msg { font-size: 13px; color: var(--ink-3); padding: 8px 9px; }
.combo-msg:empty { display: none; }
.combo-keys { display: flex; gap: 4px; align-items: center; padding: 6px 9px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
kbd { font-family: var(--font); font-size: 11px; min-width: 18px; text-align: center; padding: 1px 4px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface-2); box-shadow: 0 1px 0 var(--line-2); }
.combo-keys kbd + kbd { margin-left: -1px; }
.browse { display: grid; gap: 6px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 550; line-height: 1.3;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
}
.chip b { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--accent-text); }
.chip-sel { background: var(--accent-soft); border-color: transparent; color: var(--accent-soft-ink); padding-right: 4px; }
.chip-sel .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip-x {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0;
}
.chip-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip-x .ic { width: 12px; height: 12px; }
.chip-soft { background: var(--surface); }
.chip-emp { background: var(--iris-bg); border-color: transparent; color: var(--iris-ink); }
.chip-in { animation: chipIn .32s var(--ease) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.85) translateY(3px); } }

.tchip { position: relative; cursor: pointer; }
.tchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tchip span {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 550;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.tchip:hover span { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.tchip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tchip input:active + span { transform: scale(.95); }
.tchip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* Employees (locked) */
.emp-lock {
  position: relative; padding: 12px; border-radius: 12px;
  background: linear-gradient(135deg, var(--iris-bg), color-mix(in srgb, var(--peach-bg) 60%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.emp-lock legend { float: left; width: 100%; margin-bottom: 8px; color: var(--iris-ink); }
.emp-lock legend + * { clear: both; }
.soon {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 650; padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--surface); color: var(--iris-ink); border: 1px solid var(--line);
}
.soon .ic { width: 12px; height: 12px; }
.emp-range input { width: 100%; accent-color: var(--accent); opacity: .6; margin: 0; cursor: not-allowed; }
.emp-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-weight: 550; margin-top: 2px; }
.emp-ticks .on { color: var(--iris-ink); font-weight: 700; }
.checkline { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.checkline input { accent-color: var(--accent); margin: 0; }
.emp-lock .fnote { color: var(--ink-2); }

/* Segmented presets */
.seg { display: grid; grid-template-columns: repeat(4, auto); gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); }
.seg button {
  border: 0; background: transparent; border-radius: 7px; padding: 5px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.daterow label { display: grid; gap: 3px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* Results panel */
.app-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.res-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 12px; }
.count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.count-num {
  font-family: var(--display); font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: opacity .25s;
}
.count-label { font-size: 16px; color: var(--ink-2); font-weight: 550; }
.count-sub { margin-top: 8px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nff-line); flex: none; }
.is-ready .live-dot { background: #1FAE77; }
.is-loading .live-dot { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.is-error .live-dot { background: #D9534F; }
@keyframes pulse { 50% { opacity: .3; } }
.is-loading .count-num { opacity: .45; }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.filters-toggle { display: none; }
.badge-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; display: inline-grid; place-items: center; }
.badge-n:empty { display: none; }

.active-chips { list-style: none; margin: 0; padding: 0 22px 14px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; }
.active-chips .chip { padding-right: 10px; }
.active-chips .chip.has-x { padding-right: 3px; }
.chip-status { background: var(--mint-bg); color: var(--mint-ink); border-color: transparent; }

.progress { position: relative; height: 2px; margin: 0 0 -2px; overflow: hidden; z-index: 3; }
.progress::after {
  content: ""; position: absolute; inset: 0; width: 35%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%); opacity: 0;
}
.is-loading .progress::after { opacity: 1; animation: sweep 1.1s var(--ease) infinite; }
@keyframes sweep { to { transform: translateX(300%); } }

.table-scroll {
  position: relative; flex: 1; overflow: auto; max-height: 560px; border-top: 1px solid var(--line);
  background: var(--surface); scrollbar-width: thin;
}
.table-scroll:focus-visible { outline-offset: -3px; border-radius: 0; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.rtable thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; font-size: 12px; font-weight: 650; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rtable thead th:first-child { padding-left: 22px; }
.rtable td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rtable td:first-child { padding-left: 22px; }
.rtable tbody tr { transition: background-color .15s; }
.rtable tbody tr:hover { background: var(--surface-2); }
.rtable tbody tr.row-in { animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.rtable th:nth-child(3), .rtable td:nth-child(3) { white-space: nowrap; }
.rtable th:nth-child(2), .rtable td:nth-child(2) { width: 190px; }
.rtable th:nth-child(4), .rtable td:nth-child(4) { width: 200px; }

.co { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.co > div { min-width: 0; }
.avatar {
  --h: 262;
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: hsl(var(--h) 80% 93%); color: hsl(var(--h) 50% 30%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 50% / .12);
}
@media (prefers-color-scheme: dark) { .avatar { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 80% 84%); } }
.avatar-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.co-name { display: block; font-weight: 650; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.co-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.sics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sic {
  display: inline-flex; gap: 5px; align-items: baseline; max-width: 100%;
  font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); line-height: 1.35;
}
.sic b { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-text); }
.sic span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.cell-main { display: block; color: var(--ink); font-weight: 550; }
.cell-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.approx { display: inline-flex; align-items: center; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--peach-bg); color: var(--peach-ink); cursor: help; }

.hc { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--mint-bg); color: var(--mint-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hc b { font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.nff {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: 999px; white-space: nowrap;
  border: 1.5px dashed var(--nff-line); color: var(--nff-ink); font-size: 13px; font-weight: 600; background: transparent;
}
.nff .ic { width: 15px; height: 15px; }

/* skeleton */
.sk td { border-bottom: 1px solid var(--line); }
.sk-bar {
  display: block; height: 10px; border-radius: 6px; margin: 4px 0;
  background: linear-gradient(90deg, var(--surface-3) 25%, color-mix(in srgb, var(--surface-3) 40%, var(--surface)) 50%, var(--surface-3) 75%);
  background-size: 300% 100%; animation: shimmer 1.3s linear infinite;
}
.sk-av { width: 32px; height: 32px; border-radius: 9px; margin: 0; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

.res-state { padding: 48px 24px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.res-state[hidden] { display: none; }
.res-state .state-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); margin-bottom: 4px; }
.res-state .state-ic .ic { width: 22px; height: 22px; }
.res-state strong { font-size: 16px; }
.res-state p { font-size: 14px; color: var(--ink-3); max-width: 420px; }
.res-state .btn { margin-top: 8px; }

.res-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3);
  background: var(--surface-2);
}
.foot-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; color: var(--accent-text); }
.foot-cta:hover { text-decoration: underline; }
.foot-cta .ic { transition: transform .2s var(--ease); }
.foot-cta:hover .ic { transform: translateX(3px); }

.app-caption { text-align: center; margin: 18px auto 0; max-width: 720px; font-size: 13.5px; color: var(--ink-3); }

/* app responsive */
@media (max-width: 1080px) {
  .rtable th:nth-child(3), .rtable td:nth-child(3) { display: none; }
}
@media (max-width: 860px) {
  .app-chrome { grid-template-columns: auto 1fr; }
  .app-snap { display: none; }
  .app-url { min-width: 0; justify-self: end; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow: visible; }
  .js .app-side:not(.is-open) { display: none; }
  .js .filters-toggle { display: inline-flex; }
  .res-top { flex-direction: column; padding: 18px 16px 10px; gap: 14px; }
  .res-actions { justify-content: flex-start; width: 100%; }
  .active-chips { padding: 0 16px 12px; }
  .res-foot { padding: 12px 16px; }
  .table-scroll { max-height: none; }  /* flow with the page: a capped inner scroll box clipped the rows */
  .rtable thead { display: none; }
  .rtable, .rtable tbody { display: block; }
  .rtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .rtable td, .rtable td:first-child { display: block; padding: 0; border: 0; width: auto !important; }
  .rtable td:first-child { grid-column: 1 / -1; }
  .rtable th:nth-child(3), .rtable td:nth-child(3) { display: none; }
  .rtable td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 3px; }
  .sk td[data-label]::before { content: none; }
  .sic span { max-width: 200px; }
  .co-name { font-size: 15px; }
}
@media (max-width: 420px) {
  .rtable tr { grid-template-columns: 1fr; }
  .rtable td:first-child { grid-column: auto; }
  .app-url { font-size: 12px; padding: 3px 10px; }
  .btn-dark .ea-tag { display: none; }
}

/* ---------- Icon tiles (the trust points) ---------- */
.strip-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ic-iris { background: var(--iris-bg); color: var(--iris-ink); }
.ic-mint { background: var(--mint-bg); color: var(--mint-ink); }
.ic-peach { background: var(--peach-bg); color: var(--peach-ink); }
.ic-sky { background: var(--sky-bg); color: var(--sky-ink); }

/* ---------- Sections ---------- */
.section { padding: 110px 0; position: relative; }
.section-tint { background: linear-gradient(180deg, var(--bg-tint), var(--bg) 85%); border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 820px; }
.section-head.center p:not(.eyebrow) { max-width: 640px; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.03em; line-height: 1.06; }
.section-head p:not(.eyebrow) { margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.eyebrow {
  display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}
.tag { display: inline-flex; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; }
.tag-iris { background: var(--iris-bg); color: var(--iris-ink); }
.tag-sky { background: var(--sky-bg); color: var(--sky-ink); }
.tag-peach { background: var(--peach-bg); color: var(--peach-ink); }
@media (max-width: 700px) { .section { padding: 76px 0; } .section-head { margin-bottom: 40px; } }

/* Tick lists (legal pages) */
.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: var(--ink-2); }
.ticks .ic { margin-top: 4px; color: var(--mint-ink); background: var(--mint-bg); border-radius: 50%; padding: 2px; width: 20px; height: 20px; }
.date-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--mint-bg); color: var(--mint-ink); font-size: 13px; font-weight: 650; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.plan:first-child { background: linear-gradient(160deg, var(--iris-bg), var(--surface) 55%); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan h3 { font-size: 21px; }
.plan-price { margin: 14px 0 12px; font-family: var(--display); font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.plan > p:not(.plan-price) { color: var(--ink-2); font-size: 15.5px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--ink-2); }
.plan-list li { display: flex; gap: 9px; align-items: center; }
.plan-list .ic { color: var(--accent-text); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.st-live { background: var(--mint-bg); color: var(--mint-ink); }
.st-wait { background: var(--peach-bg); color: var(--peach-ink); }
.st-wait .dot { background: currentColor; box-shadow: none; width: 7px; height: 7px; animation: pulse 1.8s ease-in-out infinite; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-layout .section-head { position: sticky; top: 110px; margin-bottom: 0; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s; }
.faq details[open] { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; position: relative; font-weight: 650; font-size: 16.5px; line-height: 1.4; border-radius: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--accent-soft) no-repeat center / 10px 10px;
  background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--accent-text), var(--accent-text));
  background-size: 10px 1.8px, 1.8px 10px;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .answer { padding: 0 20px 18px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 0; } .faq-layout .section-head { position: static; margin-bottom: 32px; } }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 56px; border-top: 1px solid var(--line); margin-top: 110px; background: var(--bg-tint); }
.footer-grid { display: grid; grid-template-columns: 1fr auto 1.3fr; gap: 48px; }
.foot-brand p { margin-top: 12px; color: var(--ink-3); font-size: 15px; }
.foot-nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 8px 32px; }
.foot-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 550; }
.foot-nav a:hover { color: var(--accent-text); text-decoration: underline; }
.legal { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.legal a { color: var(--ink); }
.legal .small { color: var(--ink-3); font-size: 13px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .site-header { padding: 8px 10px 0; }
  .nav-shell { height: 52px; padding: 0 7px 0 14px; }
  .brand-word { font-size: 23px; }
  .brand-mark { width: 31px; height: 31px; }
  .hero { padding-top: 104px; padding-bottom: 32px; margin-top: -60px; }
  .hero h1 { margin-top: 16px; }
  .pill-note { font-size: 12.5px; }
  .cta-row .btn { padding: 0 16px; }
  .hero h1 { font-size: 38px; }
  .lede { font-size: 16.5px; }
  #search { margin-top: 36px; }
  .app { border-radius: 16px; }
  .app-chrome { height: 40px; padding: 0 12px; }
  .traffic i { width: 9px; height: 9px; }
  .feature-copy h3 { font-size: 26px; }
  .frag { padding: 16px; }
  .hc-big { font-size: 46px; }
  .fc-list li { grid-template-columns: auto 1fr; }
  .fc-list em { display: none; }
}

/* ---------- Phones: keep the look, drop the GPU-heavy parts ----------
   Four 500px blobs under a 70px blur, animating forever, and frosted-glass surfaces that re-blur whatever is
   behind them on every repaint are what make taps feel slow on mid-range phones. Same colours, static blobs,
   opaque panels. */
@media (max-width: 720px), (hover: none) {
  /* Mobile Safari draws big blurred layers into a limited GPU budget; past it, it stops painting tiles and shows
     black rectangles while scrolling. So no blobs, no blur filters and no masks here: the same colours as plain
     gradients, one cheap layer. */
  .blob { display: none !important; }
  .aurora {
    -webkit-mask-image: none; mask-image: none;
    background:
      radial-gradient(70% 38% at 12% 8%, color-mix(in srgb, var(--aur-1) 60%, transparent), transparent 72%),
      radial-gradient(60% 34% at 92% 14%, color-mix(in srgb, var(--aur-2) 50%, transparent), transparent 72%),
      radial-gradient(60% 30% at 45% 46%, color-mix(in srgb, var(--aur-3) 38%, transparent), transparent 72%),
      radial-gradient(55% 28% at 78% 58%, color-mix(in srgb, var(--aur-4) 38%, transparent), transparent 72%);
  }
  /* Still black blocks on fast scrolls after the above (26 September): the hero's dot grid is a 900px layer under
     a radial mask, and the card shadows stack blurs up to 120px, all repainted as tiles come into view. On phones
     the grid goes, and every shadow is one small one. */
  .hero-grid-bg { display: none; }
  /* :root:not(.x) outranks the dark palette's :root, so this wins in both schemes. */
  :root:not(.x) {
    --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .22);
    --shadow-lg: 0 6px 18px -6px rgba(0, 0, 0, .28);
  }
  /* The floating header pill sits in a strip that used to be see-through: while scrolling, the page showed above
     and around it. On phones the strip is solid. */
  .site-header { background: var(--bg); padding-bottom: 10px; }
  *, *::before, *::after, ::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav-shell { background: var(--surface); }
  .btn-glass { background: var(--surface-2); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; animation-delay: 0ms !important; }
  .blob { animation: none !important; }
  .sk-bar { animation: none !important; }
  .caret { animation: none !important; }
}

.combo-pop mark { background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.app-main:focus { outline: none; }
.recipe .chip, .active-chips .chip:not(.has-x) { display: inline-block; }
.chip b { white-space: nowrap; }

/* Cloudflare Turnstile human check, shown in the results panel only while a check is running */
.human-check { display: grid; justify-items: center; gap: 10px; padding: 18px 16px; text-align: center; }
.human-check[hidden] { display: none; }
.human-check p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Pricing CTAs ---------- */
.plan { display: flex; flex-direction: column; }
.plan-price small { font-family: var(--sans, inherit); font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan-cta { margin-top: 22px; }
.plan-list + .plan-cta { margin-top: auto; }
.plan-list { margin-bottom: 22px; }
.plan-fine { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.plans-terms { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.plans-terms a { color: var(--accent-text); }

/* ---------- Buy dialog ---------- */
.buy { padding: 0; border: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; color: var(--ink); }
.buy::backdrop { background: rgba(14, 12, 40, .45); backdrop-filter: blur(4px); }
.buy[open] { animation: buy-in .22s ease-out; }
@keyframes buy-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .buy[open] { animation: none; } }
.buy-card { display: grid; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.buy-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.buy-head h2 { margin: 2px 0 0; font-size: 24px; }
.buy-head .eyebrow { margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { border-color: var(--accent); color: var(--ink); }
.icon-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.buy-summary { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-2); font-size: 14px; }
.buy-rows p { margin: 0; }
.buy-rows strong { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; }
.buy-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 550; }
.check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.input-num { width: 88px; height: 36px; text-align: right; }
.input-num:disabled { opacity: .55; }
.buy-error { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--peach-bg); color: var(--peach-ink); font-size: 14px; }
.buy-error[hidden] { display: none; }
.buy-fine { margin: 0; font-size: 13px; color: var(--ink-3); }
.buy-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.buy-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.buy-consent a { color: var(--accent-text); }
.buy-consent[hidden], .buy-done[hidden], .buy-sort[hidden] { display: none; }
.buy-sort { display: grid; gap: 6px; }
.buy-sort .flabel { margin: 0; }
.buy-fine a { color: var(--accent-text); }
@media (max-width: 480px) { .buy-card { padding: 18px; } }

/* ---------- Order page ---------- */
.order-card { max-width: 620px; margin: 0 auto; display: grid; gap: 14px; padding: 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.order-card h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); }
.order-card p { margin: 0; color: var(--ink-2); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.order-item .meta { font-size: 13.5px; color: var(--ink-3); }

/* ======================================================================
   Homepage search: one question, then where, count, preview and buy.
   From funnel prototype O1 "One box", with O4's cap indicator and O2's reassurance.
   ====================================================================== */
/* Firmo funnel prototype O1, "One box". Builds on /assets/site.css tokens and components. */

/* ---------- Hero / question 1 ---------- */
.ob-hero { min-height: 84vh; padding-top: 150px; padding-bottom: 40px; }
.ob-hero.is-chosen { min-height: 0; padding-top: 108px; }
.ob-wrap { max-width: 1120px; }
.ob-ask { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ob-hero .ob-title {
  margin-top: 20px; max-width: 760px;
  font-size: clamp(36px, 4.9vw, 62px); font-weight: 680; letter-spacing: -.035em; line-height: 1.04;
  transition: font-size .35s var(--ease), margin .35s var(--ease);
}
.ob-title label { cursor: text; }
.ob-lede { margin-top: 16px; font-size: clamp(16.5px, 1.5vw, 19px); color: var(--ink-2); }
.ob-lede strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ob-hero.is-chosen .ob-pill, .ob-hero.is-chosen .ob-lede { display: none; }
.ob-hero.is-chosen .ob-title { margin-top: 0; font-size: clamp(24px, 2.5vw, 32px); }

/* The one box */
.ob-box {
  position: relative; width: 100%; margin-top: 30px; text-align: left;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  min-height: 70px; padding: 10px 14px 10px 56px; border-radius: 24px;
  background: var(--surface); border: 1.5px solid var(--line-2);
  box-shadow: var(--shadow-lg), var(--inner-hi);
  transition: border-color .2s, box-shadow .2s;
  cursor: text;
}
.ob-box:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.ob-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), var(--shadow-lg); }
.ob-hero.is-chosen .ob-box { margin-top: 16px; }
.ob-box-ic { position: absolute; left: 21px; top: 24px; width: 21px; height: 21px; color: var(--accent-text); pointer-events: none; }
.ob-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.ob-tokens:empty { display: none; }
.ob-token {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0;
  padding: 5px 4px 5px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink);
  font-size: 15.5px; font-weight: 600; line-height: 1.3; animation: chipIn .32s var(--ease) both;
}
.ob-token-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ob-token-code { font-family: var(--mono); font-size: 11.5px; font-weight: 600; opacity: .75; white-space: nowrap; }
.ob-token .chip-x { width: 26px; height: 26px; }
.ob-input {
  flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 4px; border: 0; background: transparent;
  font-size: 20px; font-weight: 500; color: var(--ink); outline: none;
}
.ob-input::placeholder { color: var(--ink-3); font-weight: 400; }
.ob-box.has-tokens .ob-input { font-size: 17px; flex-basis: 160px; }

/* Suggestions */
.ob-pop {
  position: absolute; z-index: 40; left: -1.5px; right: -1.5px; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 6px; cursor: default;
  animation: pop .16s var(--ease);
}
.ob-pop-msg { padding: 9px 12px 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.ob-pop-msg:empty { display: none; }
.ob-pop-msg strong { color: var(--ink); }
.ob-pop ul { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.ob-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 14px;
  padding: 11px 12px; border-radius: 11px; cursor: pointer; font-size: 16.5px; line-height: 1.35; color: var(--ink);
}
.ob-opt[aria-selected="true"] { background: var(--accent-soft); }
.ob-opt-code { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-opt.is-added .ob-opt-main::after { content: " ✓"; color: var(--accent-text); }
.ob-opt-browse {
  display: flex; align-items: center; gap: 9px; margin-top: 4px; border-top: 1px dashed var(--line-2); border-radius: 0 0 11px 11px;
  color: var(--accent-text); font-weight: 650; font-size: 15px;
}
.ob-opt-browse:first-child { border-top: 0; border-radius: 11px; margin-top: 0; }
.ob-opt-browse[aria-selected="true"] { border-radius: 11px; }
.ob-pop mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ob-keys { margin-top: 6px; }

/* Example chips + browse */
.ob-examples { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob-examples[hidden] { display: none; }
.ob-examples-label { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ob-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ob-chip {
  min-height: 42px; padding: 0 17px; border-radius: 999px; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--line-2); color: var(--ink);
  font-size: 15.5px; font-weight: 600; box-shadow: var(--shadow-sm), var(--inner-hi);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.ob-chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ob-chip:active { transform: scale(.97); }
.ob-chip:focus-visible { outline-offset: 3px; border-radius: 999px; }
.ob-browse-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--accent-text); font-size: 15px; font-weight: 650;
}
.ob-browse-btn:hover { background: var(--accent-soft); }
.ob-browse-btn:focus-visible { border-radius: 999px; }

.ob-browse {
  width: 100%; margin-top: 18px; text-align: left; padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-lg);
  animation: pop .2s var(--ease);
}
.ob-browse[hidden] { display: none; }
.ob-browse-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ob-browse-title { flex: 1 1 200px; font-size: 19px; letter-spacing: -.015em; outline: none; }
.ob-browse-back { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; flex-basis: 100%; justify-content: flex-start; width: max-content; flex: 0 0 auto; }
.ob-browse-back[hidden] { display: none; }
.ob-browse-body { max-height: 440px; overflow-y: auto; scrollbar-width: thin; padding-top: 12px; }
.ob-muted { font-size: 14.5px; color: var(--ink-3); }
.ob-browse-intro { margin-bottom: 10px; }
.ob-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ob-section {
  width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
  text-align: left; cursor: pointer; font-size: 15px; font-weight: 550; line-height: 1.3; color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
.ob-section small { font-size: 12.5px; color: var(--ink-3); font-weight: 550; white-space: nowrap; }
.ob-section .ic { color: var(--ink-3); }
.ob-section:hover { border-color: var(--accent); background: var(--surface); }
.ob-add-all {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 15px; font-weight: 650; text-align: left;
}
.ob-add-all:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.ob-div { margin-top: 14px; }
.ob-div-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px 4px; font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.ob-div-head .link-btn { text-transform: none; letter-spacing: 0; }
.ob-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-code {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font-size: 15px; line-height: 1.35; color: var(--ink);
}
.ob-code b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.ob-code:hover { background: var(--surface-3); }
.ob-code.is-added { background: var(--accent-soft); }
.ob-code.is-added span::after { content: " ✓"; color: var(--accent-text); }

/* ---------- Question 2 + result ---------- */
.ob-next { max-width: 1120px; margin: 26px auto 0; }
.ob-next[hidden] { display: none; }
.ob-reveal { animation: obReveal .45s var(--ease) both; }
@keyframes obReveal { from { opacity: 0; transform: translateY(10px); } }

.ob-where { border: 0; margin: 0 auto; padding: 0; min-width: 0; max-width: 1120px; text-align: center; }
.ob-where-toggle { display: none; }
.ob-q {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 12px; padding: 0 6px;
  font-family: var(--display); font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); outline: none;
}
.ob-q:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.ob-optional { font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); background: var(--surface-3); padding: 2px 9px; border-radius: 999px; }
.ob-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ob-rchip { position: relative; cursor: pointer; }
.ob-rchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-rchip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 580; color: var(--ink-2); background: var(--glass-strong); border: 1px solid var(--line-2);
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.ob-rchip span .ic { width: 15px; height: 15px; }
.ob-rchip:hover span { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.ob-rchip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ob-rchip input:active + span { transform: scale(.96); }
.ob-rchip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.ob-fine { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

.ob-result {
  position: relative; margin-top: 24px; text-align: left;
  background: var(--glass-strong); border: 1px solid var(--line-2); border-radius: 22px;
  box-shadow: var(--shadow-lg), var(--inner-hi); overflow: hidden;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.ob-result-top { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 20px 24px 16px; }
.ob-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.ob-count-num { font-family: var(--display); font-size: clamp(38px, 4vw, 50px); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity .25s; }
.ob-count-label { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.ob-summary { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.ob-result.is-loading .ob-count-num { opacity: .45; }
/* No dimming of rows while loading: setLoading() swaps them for the matching placeholder at once instead. */
.ob-result-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-refine-btn { --h: 44px; font-size: 15px; }
.ob-buy { --h: 50px; padding: 0 22px; font-size: 16px; }
.ob-buy[hidden] { display: none; }
.ob-cap-hint { padding: 0 24px 14px; margin-top: -4px; font-size: 13.5px; color: var(--ink-2); text-align: right; }
.ob-cap-hint[hidden] { display: none; }

.ob-refine {
  display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px 22px;
  padding: 18px 24px; border-top: 1px solid var(--line); background: var(--surface-2);
  animation: pop .18s var(--ease);
}
.ob-refine[hidden] { display: none; }
.ob-rgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-rgroup legend { float: left; width: 100%; margin-bottom: 8px; }
.ob-rgroup legend + * { clear: both; }
.ob-emp { padding: 12px; border-radius: 12px; background: linear-gradient(135deg, var(--iris-bg), color-mix(in srgb, var(--peach-bg) 55%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.ob-emp legend { color: var(--iris-ink); }
.ob-emp .checkline { flex-wrap: wrap; opacity: .7; }
.ob-emp .fnote { color: var(--ink-2); }
.ob-emp-num { width: 64px; height: 30px; }
.ob-refine-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px dashed var(--line); }
.ob-refine .seg { grid-template-columns: repeat(4, 1fr); }

.ob-preview { position: relative; border-top: 1px solid var(--line); background: var(--surface); }
.ob-table[hidden] { display: none; }
.ob-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ob-result-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 13px 24px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 14px; color: var(--ink-3);
}
.ob-result-foot[hidden] { display: none; }
.ob-foot-cta { border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 650; }

.ob-footer { margin-top: 72px; }

/* ---------- Purchase step ---------- */
/* The buy dialog: count, search, what arrives, consent, pay. */
.ob-buy-dialog .buy-head h2 { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.buy-search { margin: -6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.buy-search .link-btn { font-size: 14px; white-space: nowrap; }
.buy-pay { --h: 50px; font-size: 16.5px; }
.buy-fine-center { margin-top: -8px; text-align: center; }
.ob-buy-dialog .buy-emp-status { margin: 0; }
.buy-done { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--mint-bg); color: var(--mint-ink); font-size: 14px; }
.buy-done a { color: inherit; font-weight: 650; }
.ob-buy-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.ob-buy-incl li { display: flex; gap: 8px; align-items: flex-start; }
.ob-buy-incl .ic { margin-top: 3px; color: var(--mint-ink); }
.ob-buy-dialog .buy-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ---------- Mobile buy dock ---------- */
.ob-dock {
  position: fixed; z-index: 60; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 7px 7px 18px;
  border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums;
  animation: obReveal .25s var(--ease) both;
}
.ob-dock[hidden] { display: none; }
@media (min-width: 701px) { .ob-dock { display: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ob-refine { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ob-result-top { padding: 18px 16px 14px; }
  .ob-cap-hint { padding: 0 16px 14px; text-align: left; }
  .ob-refine { padding: 16px; }
  .ob-result-foot { padding: 12px 16px; }
  .wk-search { padding: 8px 16px 12px; }
  .ob-result-actions { width: 100%; }
  .ob-buy { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .ob-hero { min-height: 0; padding-top: 118px; }
  .ob-hero.is-chosen { padding-top: 96px; }
  .ob-hero .ob-title { font-size: 34px; margin-top: 16px; }
  .ob-hero.is-chosen .ob-title { font-size: 22px; }
  .ob-box { min-height: 60px; padding: 7px 8px 7px 44px; border-radius: 20px; margin-top: 22px; }
  .ob-box-ic { left: 16px; top: 20px; width: 19px; height: 19px; }
  .ob-input { font-size: 17px; height: 44px; flex-basis: 140px; }
  .ob-box.has-tokens .ob-input { font-size: 16px; }
  .ob-token { font-size: 14.5px; }
  .ob-pop { left: -8px; right: -8px; }
  .ob-opt { grid-template-columns: minmax(0, 1fr); font-size: 16px; }
  .ob-keys { display: none; }
  .ob-chip { min-height: 40px; padding: 0 14px; font-size: 15px; }
  .ob-sections { grid-template-columns: 1fr; }
  .ob-browse { padding: 12px; }
  .ob-browse-body { max-height: none; overflow: visible; }
  .ob-where { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; text-align: left; }
  .ob-q { margin: 0; padding: 0; font-size: 20px; float: left; }
  .ob-q .ob-optional { display: none; }
  .ob-where-toggle {
    display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-size: 15.5px; font-weight: 600; color: var(--ink);
  }
  .ob-where-toggle span:first-of-type { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ob-where-toggle .ic { color: var(--accent-text); }
  .ob-caret { width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
  .ob-where.is-open .ob-caret { transform: translateY(2px) rotate(-135deg); }
  .ob-where .ob-regions, .ob-where .ob-fine { grid-column: 1 / -1; }
  .ob-where:not(.is-open) .ob-regions, .ob-where:not(.is-open) .ob-fine { display: none; }
  .ob-where .ob-regions { justify-content: flex-start; padding: 4px 0 2px; }
  .ob-where .ob-fine { margin-top: 0; }
  .ob-box.has-tokens .ob-input { height: 38px; }
  .ob-table tr { grid-template-columns: 1fr 1fr; }
  .ob-table td:first-child { grid-column: 1 / -1; }
  .ob-rchip span { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .ob-refine { grid-template-columns: 1fr; }
  .ob-refine-btn { order: 2; }
  .ob-buy { --h: auto; min-height: 50px; padding: 10px 18px; white-space: normal; text-align: center; line-height: 1.25; width: 100%; order: 1; }
  .ob-refine-btn { width: 100%; }
  .ob-data { padding-top: 44px; }
  .ob-data-title { margin-left: 4px; }
  .ob-footer { margin-top: 48px; padding-bottom: 90px; }
}
@media (max-width: 380px) {
  .ob-hero .ob-title { font-size: 30px; }
  .ob-count-num { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-hero .ob-title { transition: none; }
  .ob-reveal, .ob-dock, .ob-token { animation: none; }
}

.strip-item span.ob-inl { display: inline; margin: 0; font-size: inherit; color: inherit; line-height: inherit; }

/* Several regions: on phones the list stays open until Done (it used to fold after every pick) */

/* O2: reassurance next to the price */
.ob-reassure { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); text-align: right; }
.ob-reassure[hidden] { display: none; }
@media (max-width: 720px) { .ob-reassure { text-align: left; } }

/* O4: how this list compares with what one report holds */
.ob-meter { display: grid; gap: 6px; margin-top: 12px; }
.ob-meter[hidden] { display: none; }
.ob-meter-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ob-meter-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint-ink), var(--accent)); transition: width .45s ease; }
@media (prefers-reduced-motion: reduce) { .ob-meter-bar span { transition: none; } }
.ob-meter .ob-cap-hint { margin: 0; }
.ob-reassure, .ob-meter { padding: 0 24px; }
.ob-meter { padding-bottom: 14px; margin-top: 8px; }
.ob-meter .ob-cap-hint { padding: 0; text-align: left; }
@media (max-width: 720px) { .ob-reassure, .ob-meter { padding-left: 16px; padding-right: 16px; } }
/* Count + summary flex so the actions stay beside them; the reassurance sits directly under the price */
.ob-count-block { flex: 1 1 360px; min-width: 0; }
.ob-actions-col { display: grid; justify-items: end; gap: 6px; }
.ob-actions-col .ob-reassure { padding: 0; margin: 0; text-align: right; }
@media (max-width: 720px) {
  .ob-actions-col { width: 100%; justify-items: stretch; }
  .ob-actions-col .ob-reassure { text-align: left; }
}
@media (max-width: 720px) {
  /* Phone order: buy, what it costs you, then Refine */
  .ob-actions-col .ob-result-actions { display: contents; }
  .ob-actions-col .ob-buy { order: 1; }
  .ob-actions-col .ob-reassure { order: 2; }
  .ob-actions-col .ob-refine-btn { order: 3; }
}
.csv-cols .pair small { margin-left: 4px; font-size: .82em; font-weight: 500; opacity: .85; }
/* Free preview: headcount is paid data, so every row says the same thing */
.in-report { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--accent-soft-ink); background: var(--accent-soft); white-space: nowrap; }
.in-report .ic { width: 13px; height: 13px; }
/* Size-threshold check in the buy dialog */
.buy-emp-status { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-md); font-size: 13.5px; }
.buy-emp-status[hidden] { display: none; }
.buy-emp-status.is-wait { background: var(--surface-3); color: var(--ink-2); }
.buy-emp-status.is-good { background: var(--mint-bg); color: var(--mint-ink); }
.buy-emp-status.is-bad { background: var(--peach-bg); color: var(--peach-ink); }
.btn-primary:disabled { cursor: not-allowed; }
.soon[hidden] { display: none; }
.tag-mint { background: var(--mint-bg); color: var(--mint-ink); }

/* ---------------- Legal pages (privacy, terms) ---------------- */
.legal-page { padding: 56px 0 72px; }
.wrap-narrow { max-width: 760px; }
.legal-page h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 6px 0 14px; }
.legal-page .lede { color: var(--ink-2); font-size: 17px; margin: 0 0 8px; }
.legal-page section { margin-top: 34px; }
.legal-page h2 { font-size: 21px; margin: 0 0 10px; }
.legal-page p { margin: 0 0 12px; line-height: 1.65; }
.legal-page .ticks { margin: 12px 0; }
.legal-page .plain-list { margin: 0 0 12px; padding-left: 20px; }
.legal-page .plain-list li { margin-bottom: 8px; line-height: 1.6; }

/* The count changed: a short pulse, never a roll-up. The digits stay readable throughout. */
@keyframes count-pulse { from { opacity: .55; transform: translateY(-1px); } to { opacity: 1; transform: none; } }
.ob-count-num.is-new { animation: count-pulse 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .ob-count-num.is-new { animation: none; } }

/* ---------------- Sign in (nav) ---------------- */
/* Discreet on purpose: most visitors are here to search. A plain text link beside the call to action, kept on
   small screens (where the section links collapse) because a customer looking for their report needs it most. */
.nav-signin { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 550; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.nav-signin:hover { background: var(--accent-soft); color: var(--ink); }
.nav-signin + .nav-cta { margin-left: 0; }
@media (max-width: 900px) { .nav-signin { margin-left: auto; } }
@media (max-width: 600px) { .nav-signin { padding: 7px 9px; font-size: 14.5px; } }

/* ---------------- Size presets (buy dialog, account builder) ---------------- */
.size-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.size-presets button {
  display: grid; gap: 1px; justify-items: center; padding: 7px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s;
}
.size-presets button b { font-size: 14px; font-weight: 650; color: var(--ink); }
.size-presets button span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.size-presets button:hover { border-color: var(--accent); }
.size-presets button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.size-presets button[aria-pressed="true"] b { color: var(--accent-soft-ink); }
.size-presets button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
fieldset:disabled .size-presets button { cursor: not-allowed; opacity: .55; }

/* ---------------- Account: sign-in page, dashboard, API docs ---------------- */
.acct { padding: 48px 0 80px; }
.acct [hidden] { display: none !important; }  /* the cards and lists below set display, which would beat [hidden] */
.acct-narrow { max-width: 520px; margin: 0 auto; }
/* The dashboard: its own navigation beside the sections, one section at a time (account.js showPanel). */
.dash { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.dash-main { display: grid; gap: 18px; min-width: 0; }
.dash-main > .acct-card + .acct-card { margin-top: 0; }
.acct .is-off { display: none !important; }
.dash-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); display: grid; gap: 14px; padding: 18px 14px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.dash-me { display: grid; gap: 6px; padding: 0 6px 12px; border-bottom: 1px solid var(--line); }
.dash-email { font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-me .status-pill { justify-self: start; }
.dash-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--ink-2); font-weight: 550; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.dash-nav a .ic { width: 16px; height: 16px; flex: none; }
.dash-nav a:hover { background: var(--surface-2); color: var(--ink); }
.dash-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.dash-nav a:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.dash-signout { justify-self: start; padding: 4px 10px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 860px) {
  .dash { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* A tab bar under the site header: scrolls sideways when the plan offers more than fits. */
  .dash-nav { top: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 20; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-me, .dash-signout { display: none; }
  .dash-nav ul { display: flex; gap: 4px; }
  .dash-nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; }
}
.acct-card { display: grid; gap: 14px; padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.acct-card + .acct-card { margin-top: 18px; }
.acct-card h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; }
.acct-card h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.acct-card p { margin: 0; color: var(--ink-2); }
.acct-card .eyebrow { margin: 0; }
.acct-fine { font-size: 13.5px; color: var(--ink-3) !important; }
.acct-fine a, .acct-card p a { color: var(--accent-text); }
.acct-form { display: grid; gap: 10px; }
.acct-form .input { width: 100%; }
.acct-msg { margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; }
.acct-msg[hidden] { display: none; }
.acct-msg.is-good { background: var(--mint-bg); color: var(--mint-ink); }
.acct-msg.is-bad { background: var(--peach-bg); color: var(--peach-ink); }
.acct-msg.is-wait { background: var(--surface-3); color: var(--ink-2); }
.acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.acct-who { display: grid; gap: 6px; min-width: 0; }
.acct-email { font-family: var(--display); font-size: clamp(20px, 3vw, 26px); font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }
.acct-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.acct-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct-empty { padding: 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 14.5px; text-align: center; }

.rep-list, .key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rep-item, .key-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.rep-title { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.rep-meta { font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.rep-desc { margin: 6px 0 0; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.rep-desc div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.rep-desc dt { color: var(--ink-3); }
.rep-desc dd { margin: 0; overflow-wrap: anywhere; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pill-muted { background: var(--surface-3); color: var(--ink-3); }
@media (max-width: 560px) {
  .rep-item, .key-item { grid-template-columns: 1fr; }
  .rep-actions { justify-content: flex-start; }
  .rep-desc div { grid-template-columns: 1fr; gap: 0; }
  .acct-card { padding: 20px 18px; }
}

.builder { display: grid; gap: 16px; }
.builder-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.builder-group { display: grid; gap: 7px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.builder-group > legend { padding: 0; margin-bottom: 7px; }
.builder .ob-regions { justify-content: flex-start; }
.builder .check { font-weight: 500; font-size: 14.5px; }
.sector-box { position: relative; }
.sector-tokens { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sector-tokens:empty { display: none; }
.sector-tokens li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 13.5px; font-weight: 600; max-width: 100%; }
.sector-tokens li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-tokens button { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.sector-tokens button:hover { background: rgba(0, 0, 0, .08); }
.sector-tokens .ic { width: 12px; height: 12px; }
.sector-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow: auto; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.sector-pop[hidden] { display: none; }
.sector-pop li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.sector-pop li small { color: var(--ink-3); white-space: nowrap; }
.sector-pop li[aria-selected="true"], .sector-pop li:hover { background: var(--accent-soft); }
.builder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.builder-count { font-size: 14.5px; color: var(--ink-2); padding-top: 12px; }
.builder-count strong { font-family: var(--display); font-size: 22px; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.builder-foot .btn { margin-top: 12px; }
@media (max-width: 700px) { .builder-row { grid-template-columns: 1fr; } }

.key-reveal { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--mint-bg); color: var(--mint-ink); }
.key-reveal[hidden] { display: none; }
.key-reveal code { display: block; padding: 10px 12px; border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.key-name { font-weight: 650; }
.key-prefix { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.key-form { display: flex; gap: 8px; flex-wrap: wrap; }
.key-form .input { flex: 1 1 200px; min-width: 0; }

/* API reference */
.api-doc { display: grid; gap: 18px; }
.api-op { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.api-sig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.api-verb { display: inline-block; min-width: 56px; text-align: center; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--sky-bg); color: var(--sky-ink); }
.api-verb.is-post { background: var(--mint-bg); color: var(--mint-ink); }
.api-verb.is-delete { background: var(--peach-bg); color: var(--peach-ink); }
.api-op h3 { margin: 0; font-size: 17px; }
.api-op p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.api-fields { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.api-fields th, .api-fields td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.api-fields th { color: var(--ink-3); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.api-fields code, .api-doc pre { font-family: var(--mono); font-size: 13px; }
.api-scroll { overflow-x: auto; }
.api-doc pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-3); color: var(--ink); overflow-x: auto; white-space: pre; }

/* ---------------- Unlimited billing toggle (pricing card) ---------------- */
.bill-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 14px; padding: 3px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); }
.bill-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bill-toggle button small { font-size: 11.5px; font-weight: 650; color: var(--mint-ink); background: var(--mint-bg); padding: 1px 6px; border-radius: 999px; }
.bill-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.bill-toggle button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.plan-price + .plan-bill-note { margin: -8px 0 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------------- How big? (free size and growth filters) ---------------- */
.ob-size { border: 0; margin: 22px auto 0; padding: 0; min-width: 0; max-width: 1120px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.ob-size .ob-q { margin-bottom: 2px; }
.ob-size-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: 14.5px; color: var(--ink-2); }
.ob-size-row[hidden] { display: none; }
.ob-size-row label { display: inline-flex; align-items: center; gap: 7px; }
.ob-size .check { font-weight: 550; }
.ob-size .ob-fine { margin-top: 0; max-width: 640px; }
@media (max-width: 600px) {
  .ob-size { justify-items: start; text-align: left; }
  .ob-size .ob-regions, .ob-size-row { justify-content: flex-start; }
}

/* Locked rows under a size filter: shapes drawn by the page, never data. */
.rtable.is-locked tbody tr:hover { background: transparent; }
.locked-text { color: transparent; text-shadow: 0 0 7px color-mix(in srgb, var(--ink) 55%, transparent); letter-spacing: -.06em; user-select: none; }
.locked-bar { display: block; max-width: 100%; height: 10px; margin: 5px 0; border-radius: 6px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.co-bars { flex: 1; min-width: 0; }
.co-bars .locked-bar:first-child { height: 13px; }
.avatar-locked { background: var(--surface-3); }
/* On a phone three placeholder rows make the point; eight tall cards were a long dark scroll. */
@media (max-width: 720px) { .is-locked tbody .is-locked-row:nth-child(n+4) { display: none; } }
.ob-locked-cta { display: grid; justify-items: center; gap: 12px; margin: 4px 0 0; padding: 22px 18px; text-align: center; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--accent-soft)); }
.ob-locked-cta[hidden] { display: none; }
.ob-locked-lede { margin: 0; max-width: 620px; font-size: 15px; color: var(--ink-2); }
.ob-locked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 480px) { .ob-locked-actions .btn { width: 100%; } }

/* ---------------- Analytics consent (web/assets/analytics.js) ---------------- */
.consent {
  position: fixed; z-index: 90; left: 16px; bottom: 16px; max-width: 420px; display: grid; gap: 8px; padding: 16px 18px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
}
.consent-title { margin: 0; font-weight: 700; color: var(--ink); }
.consent-text { margin: 0; font-size: 14px; color: var(--ink-2); }
.consent-text a { color: var(--accent-text); }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 480px) {
  .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .consent-actions .btn { flex: 1; }
}

/* ---------------- Prepared preview (outreach links, r=CODE) ---------------- */
.ob-prepared { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.ob-prepared[hidden] { display: none; }
.ob-prepared-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft-ink); }
@media (max-width: 600px) { .ob-prepared { padding: 12px 16px; } }

/* ---------------- Landing pages (/companies/, /guides/): server-rendered counts, firmo/api/landing_pages.py ---------------- */
.lp { padding: 28px 0 0; }
.lp-wrap { max-width: 960px; }
.lp-article { max-width: 820px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 550; }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.lp-head h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; line-height: 1.08; max-width: 24ch; }
.lp-article .lp-head h1 { max-width: none; }
.lp-answer { margin-top: 16px; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ink); max-width: 62ch; }
.lp-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.date-pill-quiet { background: var(--surface-3); color: var(--ink-2); }
.lp-section { margin-top: 56px; }
.lp-h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; margin-bottom: 16px; }
.lp-note { margin-top: 12px; font-size: 14px; color: var(--ink-3); max-width: 70ch; }
.lp-prose p { margin-top: 14px; line-height: 1.7; max-width: 70ch; }
.lp-prose .lp-h2 { margin-bottom: 4px; }
.lp-prose .lp-table-scroll { margin-top: 18px; }
.lp-prose code { font-family: var(--mono); font-size: .86em; overflow-wrap: anywhere; }

/* The list behind the number: the free search's locked rows, then the way to buy them. */
.lp-card { margin-top: 36px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; }
.lp-card-head { padding: 22px 22px 18px; }
.lp-card-head .lp-h2 { margin-bottom: 6px; }
.lp-card-head p { color: var(--ink-2); font-size: 15.5px; max-width: 64ch; }
.lp-cta { display: grid; justify-items: center; gap: 10px; padding: 22px 18px; text-align: center; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--accent-soft)); }
.lp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-fine { font-size: 13.5px; color: var(--ink-3); max-width: 62ch; }

/* Distribution tables: numbers right-aligned in tabular figures, the page's own band marked. */
.lp-table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.lp-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.lp-table th, .lp-table td { padding: 11px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lp-table th:first-child { text-align: left; white-space: normal; }
.lp-table thead th { font-size: 12px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
.lp-table tbody th, .lp-table tfoot th { font-weight: 600; }
.lp-table tfoot th, .lp-table tfoot td { background: var(--surface-2); }
.lp-table tr:last-child th, .lp-table tr:last-child td { border-bottom: 0; }
.lp-table .is-here th, .lp-table .is-here td { background: var(--accent-soft); color: var(--accent-soft-ink); }
.lp-table a { font-weight: 600; }
.lp-range { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.lp-table .is-here .lp-range { color: inherit; opacity: .8; }

/* What is counted */
.lp-facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.lp-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lp-facts dt { font-weight: 650; }
.lp-facts dd { margin: 0; color: var(--ink-2); }
.lp-codes { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-3); }

/* Links to other counts */
.lp-linkgroup + .lp-linkgroup { margin-top: 20px; }
.lp-linkgroup h3 { font-size: 16px; font-family: var(--font); font-weight: 650; letter-spacing: 0; margin-bottom: 10px; }
.lp-linkgroup h3 a { color: var(--ink); text-decoration: none; }
.lp-linkgroup h3 a:hover { color: var(--accent-text); text-decoration: underline; }
.lp-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.lp-link-grid .lp-linkgroup + .lp-linkgroup { margin-top: 0; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lp-chips a { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 550; text-decoration: none; }
.lp-chips a:hover { border-color: var(--accent); color: var(--accent-text); }
.lp-prose .lp-chips { margin-top: 14px; }

@media (max-width: 700px) {
  .lp-section { margin-top: 44px; }
  .lp-facts div { grid-template-columns: 1fr; gap: 4px; }
  .lp-link-grid { grid-template-columns: 1fr; }
  .lp-table th, .lp-table td { padding: 10px 12px; font-size: 14px; }
  .lp-cta-actions .btn { width: 100%; }
  .lp-card-head { padding: 18px 16px 14px; }
}

/* ---------------- Live map (/live/): firmo/api/live.py, web/assets/live.js ----------------
   The dots are drawn on two canvases over a static SVG outline, never as DOM elements, so a busy minute costs a few
   circles a frame, and only while a pulse is alive. Nothing here animates for long: list entries slide in once,
   and the "live" beacon is a transform on a pseudo-element, off on phones and for reduced motion. */
:root {
  --live-inc: #1a9d55; --live-dis: #e0444a; --live-str: #e8950c; --live-liq: #e8950c;
  --live-inc-ink: #0c6f39; --live-dis-ink: #b42a30; --live-str-ink: #8f5500;
}
@media (prefers-color-scheme: dark) {
  :root {
    --live-inc: #3fd98a; --live-dis: #ff6a6f; --live-str: #ffb43c; --live-liq: #ffb43c;
    --live-inc-ink: #74e6aa; --live-dis-ink: #ff9a9d; --live-str-ink: #ffc978;
  }
}
.k-inc { --k: var(--live-inc); --k-ink: var(--live-inc-ink); }
.k-dis { --k: var(--live-dis); --k-ink: var(--live-dis-ink); }
.k-str, .k-liq { --k: var(--live-str); --k-ink: var(--live-str-ink); }
.k-inc-text { color: var(--live-inc-ink); font-weight: 650; }
.k-dis-text { color: var(--live-dis-ink); font-weight: 650; }
.k-str-text { color: var(--live-str-ink); font-weight: 650; }
.live-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--ink-3)); }

.live-wrap { max-width: 1160px; }
.live-head h1 { max-width: 22ch; }

.live-panel { margin-top: 28px; padding: 18px 20px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.live-counts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.live-counts-title { font-family: var(--font); font-size: 16px; font-weight: 650; letter-spacing: 0; }
.live-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.live-beacon { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.live-status[data-live-status="live"] { color: var(--live-inc-ink); }
[data-live-status="live"] .live-beacon { background: var(--live-inc); }
[data-live-status="live"] .live-beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live-inc); animation: live-beacon 2.4s ease-out infinite; }
@keyframes live-beacon { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
.live-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.live-count dt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.live-count dd { margin: 4px 0 0; font-family: var(--display); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* The map sets the row's height; the feed beside it scrolls within the same height. 0.6527 is the map's width over
   its height (firmo.geo.MAP_FRAME_KM). */
.live-grid { --live-h: min(78vh, 780px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.live-map { justify-self: center; width: min(100%, calc(var(--live-h) * 0.6527)); margin: 0; }
.live-map-frame { position: relative; }
.live-map-frame > picture, .live-map-frame > picture > img { display: block; width: 100%; height: 100%; }
.live-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.live-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.live-legend > span { display: inline-flex; align-items: center; gap: 7px; }

.live-feed { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.live-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.live-feed-title { font-family: var(--font); font-size: 16px; font-weight: 650; letter-spacing: 0; }
.live-feed-note { font-size: 12.5px; color: var(--ink-3); }
.live-scroll { position: relative; height: calc(var(--live-h) - 49px); overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; }
.live-new-wrap { position: sticky; top: 0; z-index: 2; height: 0; display: flex; justify-content: center; }
.live-new { margin-top: 10px; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--font); box-shadow: var(--shadow-md); cursor: pointer; }
.live-list { list-style: none; margin: 0; padding: 0; }
.live-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.live-item .live-dot { margin-top: 6px; }
/* The row whose dot is pulsing on the map (web/assets/live.js, setFocus). */
.live-item.is-focus { background: var(--surface-3); }
.live-item.is-focus .live-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k, currentColor) 25%, transparent); }
.live-name { display: block; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; line-height: 1.35; }
.live-name:hover { color: var(--accent-text); text-decoration: underline; }
.live-meta { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.live-what { color: var(--k-ink); font-weight: 600; }
.live-ago { padding-top: 2px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.live-empty { padding: 24px 16px; color: var(--ink-3); font-size: 14.5px; }
.live-item.is-new { animation: live-in .5s var(--ease); }
@keyframes live-in { from { opacity: 0; transform: translateY(-10px); } }

.live-cta { display: grid; justify-items: center; gap: 10px; margin-top: 32px; text-align: center; }
.live-credits { margin-top: 40px; }

@media (max-width: 860px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-map { width: min(100%, 520px); }
  .live-scroll { height: min(62vh, 560px); }
  .live-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px), (hover: none) {
  [data-live-status="live"] .live-beacon::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-item.is-new { animation: none; }
  [data-live-status="live"] .live-beacon::after { animation: none; }
}

/* ---------- Weekly emails: the signup card, the preferences page (weekly.js, firmo/api/weekly_routes.py) ---------- */
.wk-card { display: grid; gap: 10px; margin-top: 32px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.wk-card-inline { margin-top: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.live-wrap .wk-card { max-width: 680px; margin-left: auto; margin-right: auto; }
.wk-title { margin: 0; font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -.015em; line-height: 1.2; }
.wk-subtitle { margin: 0; font-size: 17px; }
.wk-lede { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 64ch; }
.wk-form { display: grid; gap: 10px; }
.wk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-input { flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 16px; box-shadow: var(--shadow-sm); }
.wk-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.wk-submit { flex: 0 0 auto; }
.wk-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wk-label { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.wk-hint { font-weight: 500; color: var(--ink-3); }
.wk-select { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 15px; max-width: 100%; }
.wk-check { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; cursor: pointer; }
.wk-check input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.wk-consent { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }
.wk-status { margin: 0; font-size: 14px; color: var(--ink-2); }
.wk-status:empty { display: none; }
.wk-form.is-sent .wk-status { padding: 10px 12px; border-radius: 10px; background: var(--mint-bg); color: var(--mint-ink); }
.wk-human:not([hidden]) { display: block; }
.wk-search { padding: 10px 24px 14px; border-top: 1px solid var(--line); }  /* lined up with .ob-result-foot above */
.wk-open { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 14.5px; font-weight: 620; cursor: pointer; }
.wk-open .ic { width: 16px; height: 16px; }
.wk-open:hover { text-decoration: underline; }
.wk-page .wk-card:first-of-type { margin-top: 24px; }
.wk-notice { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-md); background: var(--mint-bg); color: var(--mint-ink); font-size: 15px; }
.wk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wk-count { font-family: var(--font); font-size: 14px; font-weight: 550; color: var(--ink-3); }
.wk-segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wk-seg { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); }
.wk-seg.is-paused { opacity: .7; }
.wk-seg-empty { color: var(--ink-3); font-size: 14.5px; }
.wk-seg-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.wk-seg-main p { margin: 0; }
.wk-seg-label { font-weight: 650; overflow-wrap: anywhere; }
.wk-seg-meta { font-size: 13.5px; color: var(--ink-3); }
.wk-seg-preview { font-size: 14px; color: var(--ink-2); }
.wk-seg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-badge { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--peach-bg); color: var(--peach-ink); vertical-align: 2px; }
.wk-builder { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--accent); background: var(--surface); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chips .ob-rchip span { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.wk-sector { position: relative; display: grid; gap: 6px; }
.wk-tokens:empty { display: none; }
.wk-token { font-size: 14px; }
.wk-token .chip-x { width: 24px; height: 24px; font-size: 16px; line-height: 1; }
.wk-pop { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 5px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); }
.wk-pop li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.wk-pop li b { font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); white-space: nowrap; }
.wk-pop li[aria-selected="true"], .wk-pop li:hover { background: var(--accent-soft); }
.wk-pop .wk-pop-msg { cursor: default; color: var(--ink-3); }
.wk-preview { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.wk-preview:empty, .wk-error:empty { display: none; }
.wk-error { margin: 0; font-size: 14px; color: var(--peach-ink); }
.wk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-danger .wk-title { color: var(--ink-2); }
.wk-confirm { display: grid; gap: 14px; }
@media (max-width: 480px) {
  .wk-card { padding: 16px; }
  .wk-submit { width: 100%; }
  .wk-seg-actions { width: 100%; }
}
/* The display rules above would otherwise beat the hidden attribute, which weekly.js uses to show one state at a time. */
.wk-card[hidden], .wk-actions[hidden], .wk-builder[hidden], .wk-notice[hidden], .wk-pop[hidden], .wk-human[hidden],
.wk-segs[hidden], [data-prefs-main][hidden] { display: none !important; }

/* ---------------- Firmo Weekly: the homepage card below the search (index.html), editions, lists ----------------
   A card of its own, under the search and its examples, so the search stays the page's first action. Two columns
   from 820px (the pitch, then the form), one below. */
.wk-hero { position: relative; display: grid; gap: 22px; margin: 44px auto 8px; max-width: 980px; padding: 26px 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); text-align: left; }
.wk-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--aur-3)); opacity: .85; }
@media (min-width: 820px) { .wk-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 30px 34px; } }
.wk-hero-copy { display: grid; gap: 10px; min-width: 0; }
.wk-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; justify-self: start; margin: 0; padding: 4px 11px; border-radius: 999px; background: var(--iris-bg); color: var(--iris-ink); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }
.wk-hero-eyebrow .ic { width: 14px; height: 14px; }
.wk-hero-title { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.wk-hero-body { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
.wk-hero-who { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.wk-hero-proof { margin: 2px 0 0; padding: 9px 12px; border-radius: var(--r-md); background: var(--mint-bg); color: var(--mint-ink); font-size: 14px; line-height: 1.45; justify-self: start; }
.wk-hero-proof strong { font-variant-numeric: tabular-nums; }
.wk-hero-form { align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.wk-hero-fine { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 480px) { .wk-hero { padding: 22px 16px; margin-top: 32px; } .wk-hero-form { padding: 14px; } }

.ob-filed { width: auto; min-width: 64px; padding: 0 6px; text-align: left; }

.lp-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; max-width: 72ch; color: var(--ink-2); }
.lp-list li { line-height: 1.55; }
.lp-list strong { color: var(--ink); }
.wk-notes { font-size: 14px; color: var(--ink-3); }
.wk-archive { list-style: none; padding-left: 0; }
.wk-archive a { font-weight: 650; }
.wk-edition .lp-table td { white-space: nowrap; }
@media (max-width: 480px) { .wk-table th, .wk-table td { padding: 9px 8px; font-size: 13.5px; } .wk-table thead th { font-size: 11px; letter-spacing: .02em; } }

/* ---------------- Homepage: who it's for, the data, browse (index.html) ----------------
   Flat cards: plain surfaces and the small shadow token, nothing blurred, so the phone rules above have nothing
   more to take away. */
.icp .section-head, .trust .section-head { margin-bottom: 40px; }
.icp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.icp-tile { display: flex; flex-direction: column; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.icp-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-family: var(--mono); font-weight: 700; font-size: 12.5px; }
.icp-tile h3 { margin-top: 16px; font-size: 20px; letter-spacing: -.01em; }
.icp-tile > p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.icp-search {
  display: grid; gap: 6px; margin-top: auto; padding: 14px; border-radius: 12px; background: var(--bg-tint); border: 1px dashed var(--line-2);
  color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease);
}
.icp-tile > p + .icp-search { margin-top: 18px; }
.icp-search:hover, .icp-search:focus-visible { border-color: var(--accent); border-style: solid; }
.icp-count { font-size: 14px; color: var(--ink-2); }
.icp-count:empty { display: none; }
.icp-num { font-family: var(--display); font-size: 24px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
.icp-what { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.icp-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--accent-text); }
.icp-go .ic { transition: transform .2s var(--ease); }
.icp-search:hover .icp-go .ic { transform: translateX(3px); }
.icp-fine { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-3); }
@media (max-width: 1080px) { .icp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .icp-grid { grid-template-columns: 1fr; gap: 12px; } .icp-tile { padding: 18px; } }

.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-grid li { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.trust-grid h3 { margin-top: 14px; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.trust-grid p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.trust-more { margin-top: 22px; text-align: center; color: var(--ink-2); font-size: 15px; }
.trust-more a { font-weight: 650; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; gap: 12px; } .trust-grid li { padding: 18px; } }

.plan-soon { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--peach-bg); color: var(--peach-ink); }
.plan-soon a { color: inherit; font-weight: 650; }

.browse-row { padding: 8px 0 0; text-align: center; }
.browse-row-title { font-size: 18px; letter-spacing: -.01em; margin-bottom: 14px; }
.browse-row .lp-chips { justify-content: center; }
.browse-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; }
.browse-live a { font-weight: 600; }
@media (max-width: 700px) { .icp .section-head, .trust .section-head { margin-bottom: 28px; } }