/* BulkGauge — public site brand.
   Deliberately NOT Polaris. The extension is invisible inside the admin; the site is not.
   Product surfaces (admin app, extension) keep --p-* tokens from /styles.css. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --ink:oklch(0.21 0.014 255);
  --ink-2:oklch(0.29 0.016 255);
  --ink-soft:oklch(0.46 0.012 255);
  --paper:oklch(0.985 0.004 90);
  --paper-2:oklch(0.955 0.006 90);
  --paper-3:oklch(0.915 0.007 90);
  --line:oklch(0.87 0.008 90);
  --line-dark:oklch(0.36 0.014 255);
  --needle:oklch(0.70 0.155 58);      /* gauge needle — the one loud colour */
  --needle-ink:oklch(0.48 0.12 58);
  --gauge:oklch(0.70 0.095 195);      /* secondary reading */
  --good:oklch(0.62 0.115 155);
  --warn:oklch(0.75 0.145 85);
  --bad:oklch(0.58 0.175 25);

  --font-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --w:1180px;
  --r-s:6px;--r-m:10px;--r-l:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--font-body);font-feature-settings:"ss01";text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.022em;margin:0;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(40px,6vw,68px)}
h2{font-size:clamp(29px,3.6vw,42px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-0.012em;line-height:1.2}
h4{font-size:17px;letter-spacing:-0.006em}
p{margin:0;text-wrap:pretty}
a{color:var(--needle-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .12s ease}
a:hover{color:var(--ink)}
.num,.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum"}
::selection{background:var(--needle);color:oklch(0.16 0.01 255)}
:focus-visible{outline:2px solid var(--needle-ink);outline-offset:2px;border-radius:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px}
section{padding:clamp(56px,7vw,104px) 0}
.section-tight{padding:clamp(36px,4vw,56px) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.dark a{color:var(--needle)}
.dark a:hover{color:#fff}
.tint{background:var(--paper-2)}
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gap-8{gap:8px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}

/* ---------- measurement motif: the tick rule ---------- */
.ticks{height:14px;border-top:1px solid var(--line);background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);background-size:24px 6px;background-repeat:repeat-x;background-position:0 0}
.dark .ticks{border-color:var(--line-dark);background-image:repeating-linear-gradient(90deg,var(--line-dark) 0 1px,transparent 1px 24px)}

/* ---------- type helpers ---------- */
.eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.dark .eyebrow{color:var(--needle)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-soft)}
.dark .lede{color:oklch(0.80 0.012 255)}
.muted{color:var(--ink-soft)}
.small{font-size:14px;line-height:1.5}
.xs{font-size:12.5px;line-height:1.45}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--font-body);padding:14px 20px;border-radius:var(--r-m);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease;white-space:nowrap}
.btn-primary{background:oklch(0.555 0.145 52);color:oklch(0.99 0.005 90);border-color:oklch(0.49 0.14 52)}
.btn-primary:hover{background:oklch(0.50 0.145 52);color:#fff}
.dark .btn-primary,.dark .btn-primary:hover{color:oklch(0.99 0.005 90)}
.dark .btn-ink{background:var(--paper);color:var(--ink)}
.dark .btn-ink:hover{background:#fff;color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.dark .btn-ghost{color:var(--paper);border-color:var(--line-dark)}
.dark .btn-ghost:hover{background:var(--ink-2);color:#fff}
.btn-sm{padding:9px 14px;font-size:14px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:oklch(0.985 0.004 90/.88);backdrop-filter:none;border-bottom:1px solid var(--line)}
.site-header.on-dark{background:var(--ink);border-bottom-color:var(--line-dark)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.03em;color:var(--ink);text-decoration:none}
.on-dark .brand{color:var(--paper)}
.brand-mark{width:22px;height:22px;flex:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){font:500 14.5px/1 var(--font-body);color:var(--ink-soft);text-decoration:none;padding:8px 11px;border-radius:var(--r-s)}
.nav a:not(.btn):hover{color:var(--ink);background:var(--paper-2)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.on-dark .nav a:not(.btn){color:oklch(0.78 0.012 255)}
.on-dark .nav a:not(.btn):hover,.on-dark .nav a:not(.btn)[aria-current="page"]{color:#fff;background:var(--ink-2)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;font:500 14px var(--font-body);cursor:pointer;color:inherit}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px}
.dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.card-flat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:20px}

/* ---------- pricing ---------- */
/* FIVE plans. The count is not arbitrary here: at 5 the only column counts that don't strand a
   single card in its own row are 5 (one row), 3 (3+2) and 1 (stacked). Two columns give 2+2+1 and
   leave the last tier orphaned, which is why .plans is NOT in the shared 900px two-column rule with
   .cols-3/.cols-4 — it steps 5 → 3 → 1 on its own breakpoints. Adding a sixth plan means revisiting
   this ladder, not just the base rule. */
.plans{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
@media(max-width:1180px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px}
.plan[data-featured="true"]{border-color:var(--needle);box-shadow:0 0 0 1px var(--needle)}
.plan-name{font-family:var(--font-display);font-weight:600;font-size:18px}
.plan-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:38px;letter-spacing:-0.03em;line-height:1}
.plan-cadence{font-size:13px;color:var(--ink-soft)}
.plan-feats{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;flex:1}
/* A feature line is a RUN OF TEXT with a marker, not a row of two things. It was `display:flex`,
   which made the bare label an anonymous flex item and the <strong> value a second one — so
   "Rule chaining (steps in one job) — 3 steps" laid out as two side-by-side columns that wrapped
   independently, putting the value on line 1 beside the first half of its own label. The dot is now
   an absolutely-positioned marker and the sentence is one inline flow, so any mix of plain text and
   inline elements reads in source order. padding-left 15px = the 6px dot plus the old 9px gap. */
.plan-feats li{position:relative;padding-left:15px;color:var(--ink-soft)}
.plan-feats li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--needle)}
.plan-feats li.off{color:oklch(0.66 0.008 90)}
.plan-feats li.off::before{background:var(--line)}
.badge-featured{position:absolute;top:-11px;left:24px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--needle);color:oklch(0.22 0.02 58);padding:5px 8px;border-radius:999px}

/* Scrollable comparison tables.
   A comparison matrix has an irreducible minimum width — five columns of tabular numbers do not
   reflow into one column and stay readable. So below that width it scrolls horizontally, with the
   row-label column pinned so you never lose track of which feature a tick belongs to.
   `min-width` is set per table by a modifier, because a 4-column table needs less room than a 6. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.table-wrap>.matrix{min-width:600px}
.table-wrap.tw-sm>.matrix{min-width:440px}
.table-wrap.tw-lg>.matrix{min-width:720px}
/* Six columns — the feature matrix once it carries five plans plus the label column. */
.table-wrap.tw-xl>.matrix{min-width:880px}
/* Pinned first column. Harmless at full width (nothing scrolls), essential once it does.
   The background must be opaque and match the surface behind it, or scrolled cells bleed through. */
.matrix tbody th:first-child,.matrix thead th:first-child{position:sticky;left:0;z-index:1;background:#fff}
.matrix thead th:first-child{z-index:2}
.matrix .grp td:first-child{position:sticky;left:0;z-index:1;background:var(--paper-2)}
/* A hairline so the pinned column reads as pinned rather than as overlapping text. */
.matrix tbody th:first-child::after,.matrix thead th:first-child::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}

/* comparison matrix */
.matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.matrix th,.matrix td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.matrix thead th{font:600 13px/1.3 var(--font-body);color:var(--ink);border-bottom:1px solid var(--ink)}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.matrix tbody th{font-weight:500;color:var(--ink-soft)}
.matrix .grp td{background:var(--paper-2);font:600 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:10px 14px}
.yes{color:var(--good);font-weight:600}
.no{color:oklch(0.72 0.006 90)}

/* toggle */
.seg{display:inline-flex;background:var(--paper-3);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;font:500 14px/1 var(--font-body);padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.09)}

/* ---------- feature blocks ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.feature:nth-child(even) .feature-media{order:-1}
.feature.stack{grid-template-columns:1fr;gap:32px}
.feature.stack>:first-child{max-width:66ch}
.feature.stack .feature-media{order:0}
.kpi{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:34px;letter-spacing:-0.03em;line-height:1}

/* ---------- product screenshots ----------
   Real captures of the extension UI, rendered from the design system at 2x. Intrinsic width and
   height are on every tag so the page reserves the right box before the image lands. */
.shot-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-2)}
.dark .shot-img{border-color:var(--line-dark)}
.shot-img.panel{max-width:400px;margin-inline:auto}
.shot-img.wide{box-shadow:0 1px 2px oklch(0 0 0/0.04),0 8px 24px oklch(0 0 0/0.06)}

/* ---------- image placeholder (kept for sections without a capture yet) ---------- */
.shot{position:relative;border:1px solid var(--line);border-radius:var(--r-m);background-color:var(--paper-2);background-image:repeating-linear-gradient(135deg,oklch(0.90 0.006 90) 0 1px,transparent 1px 9px);display:flex;align-items:center;justify-content:center;min-height:260px;padding:24px}
.dark .shot{border-color:var(--line-dark);background-color:var(--ink-2);background-image:repeating-linear-gradient(135deg,oklch(0.34 0.014 255) 0 1px,transparent 1px 9px)}
.shot span{font:400 12px/1.5 var(--font-mono);color:var(--ink-soft);background:var(--paper);padding:6px 10px;border-radius:4px;border:1px solid var(--line);text-align:center}
.dark .shot span{background:var(--ink);color:oklch(0.72 0.012 255);border-color:var(--line-dark)}

/* ---------- prose (legal + docs) ---------- */
.prose{max-width:70ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:clamp(22px,2.4vw,27px);margin:44px 0 12px;scroll-margin-top:90px}
.prose h3{font-size:18px;margin:28px 0 8px}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.prose li{padding-left:2px}
.prose strong{font-weight:600;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 18px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2);font-weight:600}
.prose code{font:400 14px var(--font-mono);background:var(--paper-2);padding:2px 5px;border-radius:4px}
.callout{border-left:2px solid var(--needle);background:var(--paper-2);padding:16px 18px;border-radius:0 var(--r-s) var(--r-s) 0;margin:0 0 18px;font-size:15.5px}
.toc{position:sticky;top:90px;align-self:start;font-size:14px;border-left:1px solid var(--line);padding-left:16px}
.toc a{display:block;padding:5px 0;color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--ink)}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:56px;align-items:start}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:oklch(0.76 0.012 255);padding:60px 0 34px;font-size:14.5px}
.site-footer h4{color:var(--paper);font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.site-footer a{color:oklch(0.76 0.012 255);text-decoration:none;display:block;padding:5px 0}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.footer-legal{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:oklch(0.62 0.012 255)}

/* ---------- misc ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 var(--font-body);padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);background:#fff}
.dark .pill{border-color:var(--line-dark);background:var(--ink-2);color:oklch(0.80 0.012 255)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot-good{background:var(--good)}.dot-warn{background:var(--warn)}.dot-bad{background:var(--bad)}
details.faq{border-bottom:1px solid var(--line);padding:18px 0}
details.faq summary{font-family:var(--font-display);font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--ink-soft)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px;color:var(--ink-soft);max-width:70ch}

@media(max-width:900px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr}
  .feature:nth-child(even) .feature-media{order:0}
  .doc-layout{grid-template-columns:1fr}
  .toc{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 24px 18px}
  .on-dark .nav.open{background:var(--ink);border-color:var(--line-dark)}
  .nav-toggle{display:inline-flex}
}
@media(max-width:620px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  body{font-size:16px}
  /* Tighter cells buy roughly one more visible column before scrolling starts. */
  .matrix{font-size:13.5px}
  .matrix th,.matrix td{padding:10px 10px}
  .matrix .grp td{padding:9px 10px}
  .prose table{font-size:13.5px}
  .prose th,.prose td{padding:8px 9px}
}
/* Long-form doc tables get the same treatment — they are authored as plain markup, so scroll them
   at the container rather than asking every page to wrap each table by hand. */
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:721px){.prose table{display:table}}
@media print{.site-header,.site-footer,.nav-toggle{display:none}}