/* =========================================================================
   /crawlers/  ·  Salience house style
   -------------------------------------------------------------------------
   Shipped from this repo and linked into the page by
   deploy/refresh_static_chrome.py, which swaps the page's inline <style>
   block for a link to this file on every deploy. deploy/rewrites/
   crawlers.json rebuilds the hero (the green field, the stat strip as its
   paper panel, a breadcrumb) and opens the cd-body section the legend,
   filters and ledger sit in; deploy/inject/crawlers-*.html adds the named
   crawlers band, the section heading, the explainer grid, the FAQ and the
   closing black band. The page's own JS still writes the stat tiles and the
   ledger rows, so every class it binds to (.stat, .row, .nm, .badge, .type,
   .prev, .vcell, .detail) is kept.

   Same register as /tools/fake-googlebot-checker/: hero, band, body, tiles,
   FAQ and final band are that sheet's rules under a cd- prefix. The
   figures, the filters and the ledger render as the app does: white cards
   with an 8px radius and a hairline frame, the pale green table head band,
   tinted type chips, shield chips for verification, hairline controls. Every var()
   has a hard fallback because the sheet is served outside the Next shell.

   carl-extras.css (loaded before this) forces border-radius:0 on every
   descendant of .cp-main; the pill CTAs, the filter chips, the hero panel,
   the tiles and the live dot are the only things that override it.
   ========================================================================= */

.cp-main{
  --paper: var(--color-paper, #ffffff);
  --ink: var(--color-ink, #000000);
  --border: var(--color-hairline, #e6e6e6);
  --text: var(--color-ink, #000000);
  --muted: var(--color-muted, #6b6b6b);
  --muted2: var(--color-muted, #6b6b6b);
  /* The accent under its old name: the page JS paints with var(--cyan). */
  --cyan: var(--color-accent-ink, #2c7a2c);
  --cyanD: var(--color-accent-deep, #5fdc55);

  /* Category palette: the hues the app's Bots & Crawlers screen gives each
     category (AI amber, search blue, social purple, scrapers and SEO tools
     coral, monitoring green), plus two from its series palette for the
     types the app has no category for. The page JS paints each type chip
     with color-mix(var 16%) for the tint and the var itself for the text. */
  --ai:     #8a5a0a;   /* amber, AI crawlers */
  --search: #1d5fb8;   /* blue */
  --ads:    #16757d;   /* teal */
  --scrap:  #b35c8a;   /* scripts and headless browsers */
  --seo:    #c2452a;   /* coral, SEO tools (the app's scrapers) */
  --social: #6b3fa0;   /* purple */
  --mon:    #6b6b6b;   /* muted grey */
  --other:  #6b6b6b;   /* muted grey */
  /* verification: the app's verified green, unverified coral
     (deploy/rewrites/crawlers.json points the page JS at --unv) */
  --unv:    #c2452a;
  --field:  #f9f8f9;
  --frame:  rgba(0,0,0,0.1);

  --mono: var(--font-mono, "IBM Plex Mono","SFMono-Regular",Consolas,monospace);
  --sans: var(--font-sans, "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  --display: var(--font-display, "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.cp-main *{box-sizing:border-box}
.cp-main a{color:var(--color-accent-ink,#2c7a2c);text-decoration:none}
.cp-main a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Hero: the brand green field, extended up behind the header -------- */
.cp-main .cd-hero{
  position:relative;
  background:var(--color-accent,#8cf37a);
  color:var(--color-ink,#000);
}
.cp-main .cd-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:10rem;
  background:var(--color-accent,#8cf37a);
}
.cp-main .cd-hero .cd-hero-wrap{
  position:relative;
  padding-top:2.5rem;padding-bottom:2.5rem;margin-bottom:0;
}
@media(min-width:1024px){
  .cp-main .cd-hero .cd-hero-wrap{padding-top:3rem;padding-bottom:3.5rem}
}
.cp-main .cd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center}
@media(min-width:1024px){
  .cp-main .cd-hero-grid{grid-template-columns:1.05fr 1fr;gap:3rem}
}
.cp-main .cd-hero-copy{min-width:0}
.cp-main .cd-hero h1{
  font-family:var(--display);
  font-size:clamp(1.9rem,5vw,2.5rem);font-weight:600;
  letter-spacing:-0.03em;line-height:1.16;
  text-transform:none;max-width:24ch;margin:0;
}
@media(min-width:1024px){
  .cp-main .cd-hero h1{font-size:clamp(1.9rem,2.65vw,2.5rem)}
}
.cp-main .cd-hero .lede{
  margin:1.25rem 0 0;max-width:38rem;
  font-size:0.9375rem;line-height:1.75;color:rgba(0,0,0,0.75);
}
.cp-main .cd-hero-link{margin:1.75rem 0 0;font-size:0.875rem;line-height:1.5}
.cp-main .cd-hero-link a{
  color:var(--color-ink,#000);text-decoration:none;
  background-image:linear-gradient(var(--color-ink,#000),var(--color-ink,#000));
  background-position:0 100%;background-repeat:no-repeat;background-size:0% 1.5px;
  padding-bottom:2px;transition:background-size .35s cubic-bezier(.22,1,.36,1);
}
.cp-main .cd-hero-link:hover a{background-size:100% 1.5px}
.cp-main .cd-hero-link span{display:inline-block;transition:transform .2s}
.cp-main .cd-hero-link:hover span{transform:translateX(2px)}
.cp-main .cd-note{
  margin:1rem 0 0;max-width:34rem;
  font-family:var(--sans);
  font-size:0.7rem;line-height:1.6;color:rgba(0,0,0,0.7);
}

/* Breadcrumb */
.cp-main .cd-crumbs{margin:0 0 2rem}
.cp-main .cd-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  list-style:none;margin:0;padding:0;
  font-family:var(--sans);
  font-size:0.72rem;line-height:1.5;color:rgba(0,0,0,0.6);
}
.cp-main .cd-crumbs li{display:flex;align-items:center;gap:0.5rem}
.cp-main .cd-crumbs a{color:inherit;text-decoration:none;transition:color .2s}
.cp-main .cd-crumbs a:hover,
.cp-main .cd-crumbs [aria-current]{color:var(--color-ink,#000)}

/* ---- The network figures: the app's KPI cards ---------------------------
   A label line, then one white card per figure with the 8px radius and
   hairline frame the app uses, the number in Inter semibold, its meaning
   under it. */
.cp-main .cd-panel{
  width:100%;min-width:0;
  background:transparent;border:0;border-radius:0!important;
  overflow:visible;box-shadow:none!important;
  font-family:var(--sans);
}
@media(min-width:1024px){
  .cp-main .cd-panel{max-width:30rem;margin-left:auto}
}
.cp-main .cd-panel-head{
  display:flex;align-items:center;gap:0.625rem;
  padding:0 0.25rem 0.75rem;
}
.cp-main .cd-dot{
  position:relative;flex:none;width:7px;height:7px;
  border-radius:50%!important;background:var(--color-accent-deep,#5fdc55);
}
.cp-main .cd-dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--color-accent,#8cf37a);
  animation:cd-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes cd-ping{75%,100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.cp-main .cd-dot::before{display:none}}
.cp-main .cd-panel-label,
.cp-main .cd-panel-win{
  font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;line-height:1.5;
}
.cp-main .cd-panel-label{color:var(--color-ink,#000);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-main .cd-panel-win{margin-left:auto;flex:none;color:rgba(0,0,0,0.6)}
.cp-main .cd-panel-body{padding:0}

/* Cards, written by the page JS: two across, the last spanning the row. */
.cp-main .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;margin:0;border:0;background:transparent}
.cp-main .stat{
  display:block;min-width:0;
  background:var(--paper);border:1px solid rgba(0,0,0,0.12);border-radius:8px!important;
  padding:0.95rem 1.1rem 1rem;
}
.cp-main .stat:last-child{grid-column:1/-1}
.cp-main .stat .v{
  font-family:var(--sans);font-size:1.6rem;font-weight:600;
  letter-spacing:-0.02em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.cp-main .stat .k{
  font-family:var(--sans);font-size:0.75rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.45;
  color:var(--muted);margin-top:0.35rem;text-wrap:pretty;
}
/* The AI share carries the accent ink, as the app's highlighted KPIs do. */
.cp-main .stat.hl .v{color:var(--color-accent-ink,#2c7a2c)}
.cp-main .stat.hl2 .v,
.cp-main .stat.hl3 .v{color:var(--ink)}

/* ---- CTA pill: label cell + arrow cell, the CtaSolid anatomy ----------- */
.cp-main .cd-cta{
  display:inline-flex;align-items:stretch;overflow:hidden;
  margin:0;padding:0;background:transparent;
  border:1px solid var(--color-ink,#000);
  border-radius:8px!important;
  font-family:var(--sans);
  font-size:0.9rem;line-height:1.5;letter-spacing:-0.01em;font-weight:400;
  color:var(--color-ink,#000);text-decoration:none;cursor:pointer;
  transition:transform .15s;
}
.cp-main .cd-cta:hover{text-decoration:none}
.cp-main .cd-cta:active{transform:scale(0.98)}
.cp-main .cd-cta:focus-visible{outline:2px solid var(--color-ink,#000);outline-offset:2px}
.cp-main .cd-cta-label{
  display:flex;align-items:center;white-space:nowrap;
  padding:0.875rem 1.5rem;
  background:var(--color-ink,#000);color:var(--color-paper,#fff);
}
.cp-main .cd-cta-arrow{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:3.5rem;overflow:hidden;
  border-left:1px solid var(--color-ink,#000);
  background:var(--color-paper,#fff);color:var(--color-ink,#000);
}
.cp-main .cd-cta-arrow::before{
  content:"";position:absolute;inset:0;
  background:var(--color-accent,#8cf37a);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.cp-main .cd-cta-arrow::after{
  content:"\2192";position:relative;z-index:1;
  transition:transform .3s,color .3s;
}
.cp-main .cd-cta:hover .cd-cta-arrow::before{transform:scaleX(1)}
.cp-main .cd-cta:hover .cd-cta-arrow::after{transform:translateX(2px)}
.cp-main .cd-cta-invert{border-color:var(--color-paper,#fff);color:var(--color-paper,#fff)}
.cp-main .cd-cta-invert .cd-cta-label{background:var(--color-paper,#fff);color:var(--color-ink,#000)}
.cp-main .cd-cta-invert .cd-cta-arrow{border-left-color:var(--color-paper,#fff);background:var(--color-surface-dark,#000);color:var(--color-paper,#fff)}
.cp-main .cd-cta-invert:hover .cd-cta-arrow::after{color:var(--color-ink,#000)}
.cp-main .cd-pill{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:0.875rem 1.5rem;
  border:1px solid rgba(249,248,249,0.55);border-radius:8px!important;
  font-family:var(--sans);
  font-size:0.9rem;line-height:1.5;letter-spacing:-0.01em;
  color:var(--color-ink-invert,#f9f8f9);text-decoration:none;
  transition:background .25s,color .25s;
}
.cp-main .cd-pill:hover{background:var(--color-ink-invert,#f9f8f9);color:var(--color-ink,#000);text-decoration:none}

/* ---- Container for injected full-bleed blocks -------------------------- */
.cp-main .cd-wrap{max-width:1180px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
@media(min-width:640px){.cp-main .cd-wrap{padding-left:2rem;padding-right:2rem}}
@media(min-width:1024px){.cp-main .cd-wrap{padding-left:3rem;padding-right:3rem}}

/* ---- Named crawlers band under the hero -------------------------------- */
.cp-main .cd-band{background:var(--color-surface-dark,#000);color:var(--color-ink-invert,#f9f8f9)}
.cp-main .cd-band-wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 3rem;padding-top:1.25rem;padding-bottom:1.25rem;
}
.cp-main .cd-band-label{
  width:100%;text-align:center;
  font-family:var(--sans);
  font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;line-height:1.6;
  color:rgba(244,244,243,0.55);
}
.cp-main .cd-band-marks{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 2.25rem;list-style:none;margin:0;padding:0;
}
.cp-main .cd-band-marks li{display:flex;align-items:center;gap:0.5rem}
.cp-main .cd-band-marks img{display:block;width:auto;object-fit:contain;filter:invert(1)}
.cp-main .cd-band-marks span{
  white-space:nowrap;
  font-family:var(--display);
  font-size:0.82rem;font-weight:600;letter-spacing:-0.025em;
  color:var(--color-ink-invert,#f9f8f9);
}
@media(min-width:1280px){
  .cp-main .cd-band-wrap{flex-wrap:nowrap}
  .cp-main .cd-band-label{width:auto;min-width:0;max-width:24rem;text-align:left}
  .cp-main .cd-band-marks{flex:none;flex-wrap:nowrap;gap:1rem 2.25rem}
}

/* ---- Body section on paper -------------------------------------------- */
.cp-main .cd-body{padding-top:4rem;padding-bottom:5rem}
@media(min-width:1024px){.cp-main .cd-body{padding-top:5rem;padding-bottom:6rem}}
.cp-main .cd-h2{
  font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2rem);font-weight:500;
  letter-spacing:-0.025em;line-height:1.12;
  max-width:24ch;margin:0 0 1.5rem;
}

/* Legend: round dots, as the app's chart legends */
.cp-main .legend{
  display:flex;gap:0.5rem 1.5rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:0.72rem;line-height:1.6;color:var(--muted);
  margin:0 0 1.5rem;
}
.cp-main .legend b{font-weight:500;color:var(--text)}
.cp-main .legend .sw{
  display:inline-block;width:8px;height:8px;border-radius:50%!important;
  margin-right:0.45rem;vertical-align:middle;
}
.cp-main .legend .sw[style*="rgba(0,0,0,0.04)"]{background:var(--border)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15)!important}

/* Controls: the app's hairline boxes, 6px radius, quiet type; the active
   filter on the accent tint */
.cp-main .controls{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.25rem}
.cp-main #q{
  flex:1;min-width:220px;
  background:var(--paper);border:1px solid rgba(0,0,0,0.12);border-radius:6px!important;color:var(--text);
  padding:0.45rem 0.75rem;font-family:var(--sans);font-size:0.8rem;line-height:1.5;
}
.cp-main #q:focus{outline:2px solid var(--color-accent,#8cf37a);outline-offset:-1px;border-color:var(--color-accent-ink,#2c7a2c)}
.cp-main #q::placeholder{color:var(--muted);opacity:1}
.cp-main .chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  background:var(--paper);border:1px solid rgba(0,0,0,0.12);color:rgba(0,0,0,0.8);
  border-radius:6px!important;padding:0.3rem 0.7rem;
  font-family:var(--sans);font-size:0.7rem;line-height:1.5;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.cp-main .chip:hover{color:var(--text);border-color:rgba(0,0,0,0.3)}
.cp-main .chip.on{background:rgba(140,243,122,0.25);color:var(--color-accent-ink,#2c7a2c);border-color:rgba(44,122,44,0.25)}

/* Ledger: the app's card, the green head band, hairline rows */
.cp-main .tbl{
  background:var(--paper);border:1px solid var(--frame);border-radius:8px!important;
  overflow:hidden;
}
.cp-main .hdr,.cp-main .row{
  display:grid;grid-template-columns:2.4fr 1.3fr 1.1fr 1.7fr 1.15fr;
  gap:0.75rem;align-items:center;
}
.cp-main .hdr{
  padding:0.6rem 1.25rem;
  background:rgba(140,243,122,0.15);
  font-family:var(--sans);font-size:0.62rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;line-height:1.5;
  color:rgba(0,0,0,0.6);border-bottom:1px solid var(--border);
}
.cp-main .row{
  padding:0.75rem 1.25rem;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .2s;
  font-family:var(--sans);font-size:0.8rem;line-height:1.5;
}
.cp-main #rows > .row:last-of-type{border-bottom:0}
.cp-main .row:hover{background:rgba(140,243,122,0.06)}
.cp-main .row.open{background:rgba(140,243,122,0.06)}
.cp-main .nm{font-weight:500;display:flex;align-items:center;gap:0.5rem;min-width:0;color:var(--ink);font-size:0.85rem}
.cp-main .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Named or observed: the app's verification chip, a shield for a crawler
   with a published identity, a plain grey chip for one only seen */
.cp-main .badge{
  display:inline-flex;align-items:center;gap:0.3rem;flex:none;
  font-family:var(--sans);font-size:0.6rem;font-weight:500;
  letter-spacing:0.02em;text-transform:none;line-height:1.5;
  padding:0.05rem 0.5rem;border:1px solid rgba(0,0,0,0.15);border-radius:999px!important;
  background:rgba(0,0,0,0.04);color:rgba(0,0,0,0.6);white-space:nowrap;
}
.cp-main .b-verified{
  border-color:rgba(44,122,44,0.25);background:rgba(140,243,122,0.12);
  color:var(--color-accent-ink,#2c7a2c);padding-left:0.4rem;
}
.cp-main .b-verified::before{
  content:"";flex:none;width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Zm-3-10 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Zm-3-10 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Category: the app's tinted chip, 4px radius, the colour the page JS sets inline */
.cp-main .type{
  font-family:var(--sans);font-size:0.6rem;font-weight:500;
  letter-spacing:0.06em;text-transform:uppercase;line-height:1.5;
  padding:0.1rem 0.4rem;display:inline-block;white-space:nowrap;
  border:0;border-radius:4px!important;
}
.cp-main .type[style*="--mon"],
.cp-main .type[style*="--other"]{background:rgba(0,0,0,0.06)!important;color:rgba(0,0,0,0.6)!important}

.cp-main .op{color:var(--muted);font-size:0.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-main .prev{display:flex;flex-direction:column;gap:0.3rem}
.cp-main .bar{height:4px;background:var(--border);overflow:hidden;border-radius:2px!important}
.cp-main .bar span{display:block;height:100%;background:var(--color-accent-deep,#5fdc55)}
.cp-main .prev .n{font-family:var(--sans);font-size:0.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cp-main .vcell{display:flex;flex-direction:column;gap:0.3rem}
.cp-main .vbar{display:flex;height:4px;overflow:hidden;background:var(--border);border-radius:2px!important}
.cp-main .vbar span{display:block;height:100%}
.cp-main .vbar span[style*="--cyan"]{background:var(--color-accent-deep,#5fdc55)!important}
.cp-main .vbar span[style*="--unv"]{background:var(--color-alert,#ff7a5c)!important}
.cp-main .vbar span[style*="rgba(255,255,255"]{background:var(--border)!important}
.cp-main .vlabel{font-family:var(--sans);font-size:0.72rem;text-align:right;font-variant-numeric:tabular-nums}

/* Expanded row: the app's detail strip on the grey field, the user agent as
   the app's black code block */
.cp-main .detail{
  grid-column:1/-1;display:none;
  padding:0.9rem 1.25rem 1.1rem;
  border-bottom:1px solid var(--border);
  background:var(--field);
  color:var(--muted);font-size:0.78rem;line-height:1.7;
}
.cp-main .row.open+.detail{display:block}
.cp-main .detail .ua{
  font-family:var(--mono);font-size:0.72rem;line-height:1.6;
  color:rgba(249,248,249,0.9);background:#000;
  border:0;border-radius:6px!important;padding:0.7rem 0.9rem;margin:0.6rem 0;word-break:break-all;
}
.cp-main .detail .kv{display:flex;gap:0.4rem 1.5rem;flex-wrap:wrap;margin-top:0.4rem}
.cp-main .detail .kv b{color:var(--muted);font-weight:500}

/* Dataset note under the FAQ */
.cp-main .foot{
  margin:3rem 0 0;padding-top:1rem;
  border-top:1px solid var(--border);
  text-align:left;color:var(--muted);
  font-family:var(--sans);font-size:0.72rem;line-height:1.7;
}

/* Explainer: the open grid, one rule above, tiles on the title rows */
.cp-main .cd-explainer{margin-top:5rem}
.cp-main .cd-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0 2rem;
  margin:0;padding-top:1.75rem;
  border-top:1px solid var(--border);
}
@media(min-width:640px){.cp-main .cd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cp-main .cd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cp-main .cd-cell{display:flex;flex-direction:column;gap:0.75rem;padding:0 0 1.75rem;border:0;min-width:0}
.cp-main .cd-cell-title{
  display:flex;align-items:center;gap:0.75rem;margin:0;
  font-family:var(--display);
  font-size:1rem;font-weight:500;letter-spacing:-0.01em;line-height:1.3;
  color:var(--ink);
}
.cp-main .cd-tile{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:6px!important;
  background:var(--color-accent,#8cf37a);
}
.cp-main .cd-tile::before{
  content:"";width:16px;height:16px;
  background-repeat:no-repeat;background-size:4px 4px;
  background-image:linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink));
}
.cp-main .cd-tile-1::before{background-position:0 0,12px 0,6px 6px,0 12px,12px 12px,-20px -20px}
.cp-main .cd-tile-2::before{background-position:6px 0,0 6px,6px 6px,12px 6px,6px 12px,-20px -20px}
.cp-main .cd-tile-3::before{background-position:0 0,6px 0,0 6px,12px 6px,6px 12px,12px 12px}
.cp-main .cd-cell-body{margin:0;font-size:0.85rem;line-height:1.7;color:rgba(0,0,0,0.75)}

/* FAQ, the Faqs register */
.cp-main .cd-faq{margin-top:5rem}
.cp-main .cd-faq-list{border-top:1px solid var(--border)}
.cp-main .cd-faq details{border-bottom:1px solid var(--border)}
.cp-main .cd-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);
  font-size:1.1rem;font-weight:500;letter-spacing:-0.02em;line-height:1.35;
  color:var(--ink);
}
.cp-main .cd-faq summary::-webkit-details-marker{display:none}
.cp-main .cd-faq summary::after{
  content:"+";flex:none;
  font-family:var(--sans);
  font-size:1.25rem;line-height:1;color:var(--color-accent-ink,#2c7a2c);
}
.cp-main .cd-faq details[open] summary::after{content:"\2013"}
.cp-main .cd-faq details p{
  margin:0;padding:0 0 1.5rem;max-width:80ch;
  font-size:0.8rem;line-height:1.8;color:var(--muted);
}

/* ---- Closing CTA: the FinalCta black band ------------------------------ */
.cp-main .cd-final{
  background:var(--color-surface-dark,#000);color:var(--color-ink-invert,#f9f8f9);
  padding:5rem 0;border-bottom:1px solid rgba(249,248,249,0.15);
}
@media(min-width:1024px){.cp-main .cd-final{padding:6rem 0}}
.cp-main .cd-final-wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2rem 3rem;
}
.cp-main .cd-final-copy{min-width:0;max-width:620px}
.cp-main .cd-final h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2rem);font-weight:500;
  letter-spacing:-0.025em;line-height:1.12;
  color:var(--color-ink-invert,#f9f8f9);
}
.cp-main .cd-final p{margin:0.75rem 0 0;max-width:36rem;font-size:0.875rem;line-height:1.7;color:rgba(249,248,249,0.7)}
.cp-main .cd-final-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem}

/* ---- Below 820px: the ledger folds ------------------------------------ */
@media(max-width:820px){
  /* Prevalence and verification stay desktop-only; the remaining three
     facts become two aligned lines per row, name and status on the first
     with the type tag pinned right, operator underneath. */
  .cp-main .hdr .c4,.cp-main .hdr .c5,.cp-main .row .c4,.cp-main .row .c5{display:none}
  .cp-main .hdr{grid-template-columns:1fr auto;gap:0.6rem}
  .cp-main .hdr div:nth-child(2){display:none}
  .cp-main .hdr div:nth-child(3){text-align:right}
  .cp-main .row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;gap:0.15rem 0.6rem;
  }
  .cp-main .row .nm{grid-column:1;grid-row:1}
  .cp-main .row .op{grid-column:1;grid-row:2;font-size:0.72rem}
  .cp-main .row .op:empty{display:none}
  .cp-main .row > div:nth-child(3){grid-column:2;grid-row:1/3;justify-self:end;align-self:center}
  .cp-main .hdr,.cp-main .row{padding-left:1rem;padding-right:1rem}
  .cp-main .detail{padding-left:1rem;padding-right:1rem}
  .cp-main .stat{padding:0.8rem 0.9rem 0.85rem}
  .cp-main .stat .v{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.cp-main *{transition-duration:0.01ms!important}}

/* Phones: the closing band's buttons fill the width, one under the other. */
@media(max-width:639px){
  .cp-main .cd-final-ctas{flex-direction:column;align-items:stretch}
  .cp-main .cd-cta,.cp-main .cd-pill{display:flex;width:100%}
  .cp-main .cd-cta-label{flex:1;justify-content:center}
}