/* =============================================================
   Rate My Ratings — methodology.css
   "The Review Census" — the proprietary method.
   Scoped under the .census wrapper. Uses the site's NATIVE
   branding: Inter type and the brand blue / green / amber
   palette, so these sections read as part of the website rather
   than a separate artifact. Every visual is preserved — only the
   type and colour are brought onto the brand.
   Used by: the home-page methodology teaser, and /methodology.
   ============================================================= */

.census {
  /* ---- Brand tokens (native site palette) ---- */
  --paper: #FBFAF7;          /* page ground (site --paper) */
  --paper-card: #FFFFFF;     /* card surface */
  --ink: #14161A;            /* body text (site --ink) */
  --ink-muted: #5C6068;      /* secondary copy */
  --hair: #E6E2D8;           /* hairline rules (site --rule) */
  --hair-dot: #D8D3C6;       /* dotted rules */
  --slate: #1870E8;          /* accent → brand blue (nums, links, tags) */
  --slate-soft: #EAF2FD;
  --green: #30A850;          /* positive (site --rmr-green) */
  --green-soft: #EAF6EE;
  --brick: #C8412B;          /* negative (site --data-negative) */
  --brick-soft: #F7E7E3;
  --clay: #8A8E96;           /* neutral / market grey (site --data-market) */
  --amber-ink: #C49000;      /* amber-700, for the "passive" band */
  --amber-soft: #FEF6E0;

  /* Native type: Inter for everything (the brand uses no serif);
     mono inherits the site's JetBrains Mono. */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --measure: 65ch;
  --gap-section: clamp(3.5rem, 8vw, 6rem);

  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.census *,
.census *::before,
.census *::after { box-sizing: border-box; }

/* The full-page treatment gets the paper ground; the teaser stays
   transparent so it blends into the home page's alt band. */
.census-page { background: var(--paper); }
.census .wrap { max-width: 1080px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) 4rem; }

.census .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 0; font-weight: 500; }
.census h1, .census h2, .census h3, .census h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; color: var(--ink); }

/* ---------- Masthead ---------- */
.census .masthead { border-bottom: 1px solid var(--ink); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); position: relative; padding-right: clamp(108px, 15vw, 168px); }
.census .masthead .census-badge { position: absolute; top: 0; right: 0; width: clamp(88px, 11vw, 132px); height: auto; }
.census .masthead .rule-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 0.75rem; margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.census .masthead .rule-top span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.census .masthead .brand { display: flex; align-items: center; gap: 0.65rem; }
.census .masthead .brand-mark { width: 34px; height: 34px; display: block; }
.census .masthead .rule-top .brand-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.012em; text-transform: none; color: var(--ink); }
.census .masthead h1 { font-size: clamp(2.5rem, 6.5vw, 4rem); line-height: 1.04; letter-spacing: -0.022em; margin: 0.5rem 0 0; }
.census .masthead .sub { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 500; color: var(--ink-muted); margin: 0.9rem 0 0; letter-spacing: -0.008em; }
.census .deck { max-width: var(--measure); margin: 1.4rem 0 0; color: var(--ink-muted); font-size: 1.075rem; }
.census .spine { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.census .spine em { color: var(--ink-muted); font-style: normal; }
.census .spine b { color: var(--ink); font-weight: 600; }
.census .spine i { color: var(--slate); font-style: normal; }

/* ---------- Section scaffolding ---------- */
.census section { margin-top: var(--gap-section); }
.census .sec-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.census .sec-head .num { font-family: var(--font-mono); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500; color: var(--slate); letter-spacing: 0.01em; line-height: 1; padding-top: 0.1rem; }
.census .sec-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); line-height: 1.1; margin: 0; letter-spacing: -0.018em; }
.census .sec-head p { margin: 0.4rem 0 0; color: var(--ink-muted); max-width: 56ch; font-size: 1rem; }

/* ---------- Thesis + census ---------- */
.census .thesis { font-size: clamp(1.8rem, 4.2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 20ch; }
.census .thesis em { font-style: normal; color: var(--slate); }
.census .thesis-body { max-width: var(--measure); margin: 1.3rem 0 0; color: var(--ink-muted); }
.census .census-wrap { position: relative; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; height: clamp(240px, 42vw, 380px); border: 1px solid var(--hair); border-radius: 4px; background: linear-gradient(180deg, #FDFCFA, #F4F2EC); overflow: hidden; }
.census canvas { display: block; width: 100%; height: 100%; }
.census .survey-box { position: absolute; left: 6%; top: 20%; width: 17%; height: 36%; border: 2.5px dashed var(--slate); background: rgba(24,112,232,0.10); box-shadow: 0 0 0 4px rgba(251,250,247,0.85); pointer-events: none; }
.census .survey-tag { position: absolute; left: 6%; top: calc(20% - 1.85rem); background: var(--slate); color: #fff; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 2px; pointer-events: none; white-space: nowrap; }
.census .survey-tag::after { content: ""; position: absolute; left: 12px; bottom: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--slate); }
.census .census-cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-muted); text-transform: uppercase; }
.census .census-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.census .census-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.census .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.census .dot.g { background: var(--green); } .census .dot.n { background: var(--clay); } .census .dot.r { background: var(--brick); }

/* ---------- Why it's different ---------- */
.census .whys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
.census .why-card { background: var(--paper-card); padding: clamp(1.25rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; gap: 0.55rem; }
.census .why-card .lbl { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.census .why-card h3 { margin: 0; font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.012em; }
.census .why-card p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); line-height: 1.55; max-width: none; }
.census .why-card.lead { grid-column: 1 / -1; background: var(--ink); color: #fff; }
.census .why-card.lead .lbl { color: #7FB0F2; }
.census .why-card.lead h3 { font-size: clamp(1.35rem, 3vw, 1.85rem); max-width: 30ch; color: #fff; letter-spacing: -0.018em; }
.census .why-card.lead p { color: #C7CBD1; max-width: 60ch; font-size: 1rem; }

/* ---------- Four lenses ---------- */
.census .lenses { display: flex; flex-direction: column; }
.census .lens { border-top: 1px solid var(--hair); padding: clamp(2rem, 5vw, 3rem) 0; }
.census .lens:last-child { border-bottom: 1px solid var(--hair); }
.census .lens-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.census .lens-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.census .lens-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--hair); border-radius: 2px; padding: 0.15rem 0.55rem; }
.census .lens h3 { width: 100%; font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0.7rem 0 0; letter-spacing: -0.02em; }
.census .lens-q { width: 100%; font-style: normal; color: var(--ink-muted); font-size: 1.12rem; line-height: 1.45; margin: 0.4rem 0 0; }
.census .lens-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; margin-top: 1.6rem; }

.census .mini-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.6rem; }
.census .methods { list-style: none; margin: 0; padding: 0; }
.census .methods li { padding: 0.65rem 0; border-top: 1px dotted var(--hair-dot); font-size: 0.96rem; color: var(--ink-muted); line-height: 1.5; max-width: none; }
.census .methods li:first-child { border-top: none; padding-top: 0; }
.census .methods li b { color: var(--ink); font-weight: 600; }
.census .diff { margin: 1.5rem 0 0; padding: 1rem 1.2rem; background: var(--green-soft); border-left: 3px solid var(--green); border-radius: 0 2px 2px 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink); font-weight: 500; max-width: none; }
.census .diff b { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; color: var(--green-700, #228040); margin-bottom: 0.4rem; font-weight: 600; }

.census .viz { border: 1px solid var(--hair); border-radius: 4px; background: var(--paper-card); padding: clamp(1rem, 2.4vw, 1.4rem); }
.census .viz-cap { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.9rem; }

/* ABSA bars (Experience) */
.census .absa { display: flex; flex-direction: column; gap: 0.85rem; }
.census .absa .row .lab { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; }
.census .absa .bar { display: flex; height: 20px; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }
.census .absa .seg { height: 100%; }
.census .absa .seg.pos { background: var(--green); } .census .absa .seg.neu { background: var(--clay); } .census .absa .seg.neg { background: var(--brick); }
.census .net { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--hair); }
.census .net .n { font-family: var(--font-mono); font-size: 1.5rem; color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.census .net .cap { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* NPS gauge (Persona) */
.census .score-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.9rem; }
.census .score-row .big { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.census .score-row .of { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }
.census .score-row .band { margin-left: auto; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-ink); background: var(--amber-soft); border: 1px solid #EBD9A6; border-radius: 2px; padding: 0.12rem 0.5rem; }
.census .gauge { position: relative; }
.census .gauge .track { display: flex; height: 14px; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }
.census .gauge .z1 { flex: 6.5; background: var(--brick-soft); } .census .gauge .z2 { flex: 2; background: #EEECE6; } .census .gauge .z3 { flex: 1.5; background: var(--green-soft); }
.census .gauge .mk { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); left: 80%; }
.census .gauge .ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-muted); margin-top: 0.35rem; }
.census .pchips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; }
.census .pchip { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: 2px; padding: 0.15rem 0.5rem; color: var(--ink-muted); }
.census .calib { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin: 0.9rem 0 0; }

/* Quadrant (Benchmark) */
.census .viz svg { width: 100%; height: auto; display: block; }

/* Evidence chain (Strategy) */
.census .chain { display: flex; flex-direction: column; }
.census .cnode { border: 1px solid var(--hair); border-radius: 3px; background: var(--paper); padding: 0.7rem 0.85rem; }
.census .cnode .k { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.census .cnode .t { font-size: 0.95rem; margin-top: 0.15rem; color: var(--ink); }
.census .cchips { display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap; }
.census .cchip { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: 2px; padding: 0.08rem 0.38rem; color: var(--ink-muted); }
.census .cchip.hi { color: var(--brick); border-color: #E9BAAF; }
.census .cchip.now { color: var(--slate); border-color: #B6CDF3; }
.census .cchip.metric { color: var(--green); border-color: #B2DCBE; }
.census .clink { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0 0.3rem 0.8rem; }
.census .clink .ln { width: 1px; height: 15px; background: var(--slate); }
.census .clink span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Comparison table ---------- */
.census .table-scroll { overflow-x: auto; border: 1px solid var(--hair); border-radius: 4px; }
.census table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.98rem; }
.census thead th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 0.9rem 1.1rem; background: var(--ink); color: #fff; }
.census thead th:last-child { color: #fff; }
.census .table-scroll thead th:last-child { background: var(--slate); }
.census tbody th { text-align: left; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; padding: 0.85rem 1.1rem; background: var(--paper-card); white-space: nowrap; }
.census tbody td { padding: 0.85rem 1.1rem; vertical-align: top; background: var(--paper-card); }
.census tbody td.old { color: var(--ink-muted); }
.census tbody td.new { color: var(--ink); font-weight: 600; background: var(--slate-soft); }
.census tbody tr + tr th, .census tbody tr + tr td { border-top: 1px solid var(--hair); }

/* ---------- Close ---------- */
.census .close { margin-top: var(--gap-section); border-top: 1px solid var(--ink); padding-top: clamp(2rem, 5vw, 3rem); }
.census .taglines { display: flex; flex-direction: column; gap: 0.4rem; }
.census .taglines p { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: -0.02em; max-width: none; color: var(--ink); }
.census .taglines p:nth-child(2) { color: var(--slate); }
.census .colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

.census a { color: var(--slate); }
.census :focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }

/* =============================================================
   The method in detail — the substantive dossier, preserved
   from the original methodology page, in the native brand style.
   ============================================================= */
.census .dossier { margin-top: var(--gap-section); border-top: 1px solid var(--ink); padding-top: clamp(2rem, 5vw, 3rem); }
.census .dossier__grid { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.census .dossier__item { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2.75rem); border-top: 1px solid var(--hair); padding: 1.35rem 0; align-items: start; }
.census .dossier__item > h3 { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.004em; line-height: 1.35; margin: 0; color: var(--ink); }
.census .dossier__body { min-width: 0; }
.census .dossier__body > :first-child { margin-top: 0; }
.census .dossier__body > :last-child { margin-bottom: 0; }
.census .dossier__body h4 { font-size: 0.88rem; font-weight: 600; margin: 1rem 0 0.4rem; color: var(--ink); letter-spacing: -0.004em; }
.census .dossier__body p { font-size: 0.9rem; line-height: 1.58; color: var(--ink-muted); margin: 0 0 0.7rem; max-width: 70ch; }
.census .dossier__body ul { margin: 0 0 0.7rem; padding-left: 1.05rem; }
.census .dossier__body li { font-size: 0.9rem; line-height: 1.55; color: var(--ink-muted); margin-bottom: 0.35rem; max-width: 68ch; }
.census .dossier__body li strong, .census .dossier__body p strong { color: var(--ink); font-weight: 600; }
.census .dossier__body table { min-width: 0; margin: 0.5rem 0 0.2rem; font-size: 0.84rem; }
.census .dossier__body thead th { background: var(--ink); font-size: 0.6rem; padding: 0.55rem 0.85rem; }
.census .dossier__body tbody th, .census .dossier__body tbody td { padding: 0.5rem 0.85rem; font-size: 0.84rem; }
@media (max-width: 640px) {
  .census .dossier__item { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* =============================================================
   Home-page teaser — a condensed census that sits inside the
   site's normal section rhythm (no paper card; blends onto the
   alt band). Bracketed by the site's .section spacing.
   ============================================================= */
.census-teaser { max-width: 1080px; }
/* Hand-stamped Review Census seal on the top-right corner of the dot visual */
.census-teaser .census-visual { position: relative; }
.census-teaser .census-visual .census-badge { position: absolute; z-index: 2; top: -18px; right: -14px; width: clamp(80px, 9vw, 112px); height: auto; transform: rotate(-8deg); transform-origin: center; mix-blend-mode: multiply; opacity: 0.88; pointer-events: none; }
.census-teaser .thesis { margin-top: 1.1rem; max-width: 24ch; font-size: clamp(1.9rem, 4vw, 2.5rem); }
/* Home section keeps blue only on the LENS labels (.lx) — everything else neutral. */
.census-teaser .thesis em { color: var(--ink); }
.census-teaser .mini-label { color: var(--ink-muted); }
.census-teaser .survey-box { border-color: var(--ink); background: rgba(20,22,26,0.09); }
.census-teaser .survey-tag { background: var(--ink); }
.census-teaser .survey-tag::after { border-top-color: var(--ink); }
.census-teaser .thesis-body { margin-top: 1.2rem; font-size: 1.075rem; }
.census-teaser .census-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.census-teaser .census-wrap { margin-top: 0; height: clamp(230px, 34vw, 330px); }
.census-teaser .lens-list { list-style: none; margin: 0; padding: 0; }
.census-teaser .lens-list li { display: flex; gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--hair); align-items: baseline; }
.census-teaser .lens-list li:first-child { border-top: none; }
.census-teaser .lens-list .lx { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); white-space: nowrap; padding-top: 0.15rem; min-width: 4.5rem; }
.census-teaser .lens-list .ld b { font-weight: 600; font-size: 1.08rem; color: var(--ink); display: block; letter-spacing: -0.012em; }
.census-teaser .lens-list .ld span { font-size: 0.92rem; color: var(--ink-muted); line-height: 1.45; }
.census-teaser .census-foot { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
/* Dark CTA button (no blue) for the home teaser. */
.census .btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.census .btn--dark:hover { background: #2B2E34; color: #fff; border-color: #2B2E34; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .census-teaser .census-grid { grid-template-columns: 1fr; }
  /* visual spans full width when stacked — tuck the stamp inside the corner */
  .census-teaser .census-visual .census-badge { top: 10px; right: 10px; width: clamp(68px, 15vw, 92px); }
}
@media (max-width: 760px) {
  .census .lens-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .census .whys { grid-template-columns: 1fr; }
  .census .masthead { padding-right: 0; }
  .census .masthead .census-badge { position: static; display: block; width: 84px; margin: 0 auto 1.25rem 0; }
}