/* HostScout.ca - How I Verify a Canadian Web Host (/methodology, /fr/methodologie)
   Page stylesheet, loaded after base.css by includes/head.php.
   Every rule is scoped to .method-page (the <main> element), so nothing here
   reaches the header, footer or other pages. Fonts, .wrap, the header and
   the footer come from base.css and the shared includes. */

/* ----------------------------------------------------------------------
   TOKENS
---------------------------------------------------------------------- */

.method-page {
  --red: #AD0000;
  --red-dark: #8f0000;
  --red-soft: #f8ecec;
  --ink: #161616;
  --muted: #626a74;
  --text: #353b44;
  --line: #e9e9ea;
  --line-strong: #dfe1e5;
  --panel: #f7f7f8;
  --white: #ffffff;
  --shadow: 0 5px 14px rgba(17,24,39,.045),0 24px 48px -16px rgba(17,24,39,.16);
  --shadow-sm: 0 3px 8px rgba(17,24,39,.04),0 16px 30px -12px rgba(17,24,39,.16);
  --page-gutter: 40px;
  --article-width: 900px;
  /* Evidence (terminal) boxes */
  --term-bg: #141518;
  --term-line: #2a2d33;
  --term-text: #c9cdd3;
  --term-key: #a3aab5;
  --term-strong: #f4f5f7;
  --term-accent: #ff9a9a;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

.method-page a {
  color: inherit;
  text-decoration: none;
}

.method-page img {
  max-width: 100%;
  display: block;
}

.method-page :where(a,button,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

.method-page .content-link {
  color: var(--red-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(173,0,0,.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease,text-decoration-color .18s ease;
}

.method-page .content-link:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

.method-page .narrow {
  width: min(var(--article-width),calc(100% - var(--page-gutter)));
  margin: 0 auto;
}

.method-page .kicker {
  display: block;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.method-page .mono {
  font-family: var(--mono);
}

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

/* ----------------------------------------------------------------------
   BASE.CSS ADJUSTMENTS
   base.css caps every h2 at 720px and sizes .btn icons at 17px; this page
   sets its own heading widths and uses 18px icons.
---------------------------------------------------------------------- */

.method-page h2 {
  max-width: none;
}

.method-page .btn svg {
  width: 18px;
  height: 18px;
}

/* ----------------------------------------------------------------------
   HERO
---------------------------------------------------------------------- */

.method-page .hero {
  padding: 76px 0 52px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,#fff 0%,#fbfbfc 100%);
}

.method-page .hero h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(40px,6vw,68px);
  line-height: 1.06;
  letter-spacing: -.05em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.method-page .hero .lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: #42474f;
  font-size: 17px;
  line-height: 1.7;
}

.method-page .byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.method-page .byline strong {
  color: var(--ink);
}

.method-page .byline .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4c7cc;
}

.method-page .jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.method-page .jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: #2a2e34;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .18s ease,color .18s ease;
}

.method-page .jump a:hover {
  border-color: var(--red);
  color: var(--red);
}

.method-page .jump span {
  color: var(--red);
  font-family: var(--mono);
  font-size: 12px;
}

/* ----------------------------------------------------------------------
   GENERIC SECTION
---------------------------------------------------------------------- */

.method-page .section {
  padding: 84px 0;
}

.method-page .section-head {
  max-width: 760px;
  margin: 0 0 40px;
}

.method-page .section-head h2 {
  margin: 0;
  font-size: clamp(31px,3.6vw,44px);
  line-height: 1.12;
  letter-spacing: -.045em;
  font-weight: 700;
}

.method-page .section-head p {
  margin: 18px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.72;
}

.method-page .prose {
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.method-page .prose p {
  margin: 0 0 17px;
}

.method-page .prose h3 {
  margin: 44px 0 12px;
  color: var(--ink);
  font-size: clamp(21px,2.4vw,26px);
  line-height: 1.2;
  letter-spacing: -.03em;
}

.method-page .prose h3:first-child {
  margin-top: 0;
}

.method-page .prose code,
.method-page .cell-mono {
  font-family: var(--mono);
  font-size: .88em;
}

.method-page .prose code {
  padding: 2px 6px;
  border: 1px solid #e2e4e8;
  border-radius: 5px;
  background: var(--panel);
  color: #2a2f37;
  white-space: nowrap;
}

.method-page .prose ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.method-page .prose li {
  margin-bottom: 8px;
}

/* ----------------------------------------------------------------------
   THE FOUR CHECKS
---------------------------------------------------------------------- */

.method-page .checks {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.6fr);
  gap: 56px;
  align-items: start;
}

.method-page .checks-intro {
  position: sticky;
  top: 28px;
}

.method-page .checks-intro h2 {
  margin: 0;
  font-size: clamp(34px,4vw,50px);
  line-height: 1.1;
  letter-spacing: -.05em;
  font-weight: 700;
}

.method-page .checks-intro p {
  margin: 20px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.72;
}

.method-page .checks-intro .note {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a5059;
}

.method-page .check-list {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: check;
}

.method-page .check-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 28px 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Numbered cards intentionally have no corner accents or eyebrow labels. */

.method-page .check-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: #d6d8dc;
  font-variant-numeric: tabular-nums;
}

.method-page .check-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--ink);
}

.method-page .check-card p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

/* ----------------------------------------------------------------------
   TABLES
---------------------------------------------------------------------- */

.method-page .table-wrap {
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.method-page .table-wrap.scroll {
  overflow-x: auto;
}

.method-page table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.method-page caption {
  caption-side: top;
  padding: 16px 18px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.method-page caption span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
  font-size: 12.5px;
}

.method-page th {
  padding: 12px 16px;
  background: var(--panel);
  color: #30343a;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.method-page td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
  line-height: 1.5;
}

.method-page tbody tr:last-child td {
  border-bottom: 0;
}

.method-page tbody tr:hover td {
  background: #fcfcfd;
}

.method-page .cell-mono {
  color: var(--ink);
  font-weight: 600;
}

.method-page .row-group td {
  background: #fbfbfc;
}

.method-page .ns-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.method-page .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid #e3e5e8;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.method-page .pill.dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.method-page .asn {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.method-page .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.method-page .tag-whc {
  background: var(--red-soft);
  color: var(--red-dark);
}

.method-page .tag-neutral {
  background: var(--panel);
  color: #4a5059;
  border: 1px solid var(--line);
}

.method-page .tag-ok {
  background: var(--ink);
  color: #fff;
}

.method-page .same-ip {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Proof table (what each check can / cannot prove) */

.method-page .proof td:first-child {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.method-page .yes,
.method-page .no {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.method-page .yes svg {
  color: var(--ink);
  flex: 0 0 16px;
  margin-top: 3px;
}

.method-page .no svg {
  color: var(--red);
  flex: 0 0 16px;
  margin-top: 3px;
}

/* ----------------------------------------------------------------------
   CASE STUDY BAND
---------------------------------------------------------------------- */

.method-page .case {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.method-page .case-top {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 30px;
  align-items: start;
}

.method-page .case-top h2 {
  margin: 0;
  font-size: clamp(34px,4.2vw,54px);
  line-height: 1.1;
  letter-spacing: -.05em;
  font-weight: 700;
}

.method-page .case-intro p {
  margin: 20px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.method-page .verdict {
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.method-page .verdict-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.method-page .verdict-logo {
  width: auto;
  height: 40px;
  max-width: 120px;
  object-fit: contain;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.method-page .verdict-head strong {
  display: block;
  font-size: 17px;
  letter-spacing: -.01em;
}

.method-page .verdict-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.method-page .verdict-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.method-page .verdict-badge svg {
  flex: 0 0 18px;
}

.method-page .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 12px 0 0;
}

.method-page .fact {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.method-page .fact:nth-child(odd) {
  padding-right: 14px;
}

.method-page .fact dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.method-page .fact dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.method-page .facts .fact:nth-last-child(-n+2) {
  border-bottom: 0;
}

/* Step label inside the case study */

.method-page .step-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.method-page .step-label b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0;
}

.method-page .case-step {
  padding: 72px 0 0;
}

.method-page .case-step h3 {
  margin: 0 0 16px;
  font-size: clamp(28px,3vw,36px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.method-page .case-step .prose {
  max-width: none;
}

.method-page .op code,
.method-page .caveats code,
.method-page .annotation code {
  padding: 1px 5px;
  border: 1px solid #e2e4e8;
  border-radius: 5px;
  background: var(--panel);
  color: #2a2f37;
  font-family: var(--mono);
  font-size: .86em;
  white-space: nowrap;
}

/* Ownership chain */

.method-page .chain {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.method-page .chain li {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.method-page .chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

.method-page .chain .lbl {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.method-page .chain strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.method-page .chain small {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}

.method-page .chain li.key {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* Official record box (light grey) */

.method-page .record {
  margin: 28px 0;
  border: 1px solid #dcdee2;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.method-page .record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid #e3e5e8;
}

.method-page .record-head strong {
  font-size: 13.5px;
  letter-spacing: -.01em;
}

.method-page .record-head .src {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.method-page .record dl {
  display: grid;
  grid-template-columns: minmax(150px,220px) 1fr;
  margin: 0;
}

.method-page .record dt,
.method-page .record dd {
  padding: 12px 20px;
  border-bottom: 1px solid #eeeff1;
}

.method-page .record dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fcfcfd;
  padding-top: 15px;
}

.method-page .record dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.method-page .record dd .plain {
  font-family: "Inter","Inter Fallback",sans-serif;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

.method-page .record dt.hl,
.method-page .record dd.hl {
  background: var(--red-soft);
}

.method-page .record dd.hl {
  box-shadow: inset 3px 0 0 var(--red);
}

.method-page .record dl > :nth-last-child(-n+2) {
  border-bottom: 0;
}

.method-page .record-foot {
  padding: 12px 20px;
  border-top: 1px solid #eeeff1;
  background: #fcfcfd;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Terminal / evidence box (dark) */

.method-page .terminal {
  margin: 28px 0 12px;
  border-radius: 16px;
  background: var(--term-bg);
  color: var(--term-text);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10,10,12,.18);
}

.method-page .terminal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--term-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--term-key);
}

.method-page .terminal-head .dots {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.method-page .terminal-head .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3d44;
}

.method-page .terminal-head .dots i:first-child {
  background: var(--red);
}

.method-page .terminal pre {
  margin: 0;
  padding: 20px 22px 22px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--term-text);
}

.method-page .terminal .p {
  color: var(--term-accent);
  user-select: none;
}

.method-page .terminal .cmd {
  color: var(--term-strong);
  font-weight: 600;
}

.method-page .terminal .k {
  color: var(--term-key);
}

.method-page .terminal .v {
  color: var(--term-strong);
}

.method-page .terminal .c {
  color: #a3aab5;
}

.method-page .terminal mark {
  background: rgba(173,0,0,.55);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
}

.method-page .annotation {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.method-page .annotation b.marker {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
}

/* Network operator cards */

.method-page .ops {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin: 28px 0;
}

.method-page .op {
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.method-page .op-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.method-page .op h4 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.method-page .op .where {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.method-page .op p {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.method-page .op.whc {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* Callout (brand legal-callout) */

.method-page .callout {
  margin: 30px 0;
  padding: 22px 24px;
  border: 1px solid #e2e3e6;
  border-left: 3px solid var(--red);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.method-page .callout strong.t {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15.5px;
}

.method-page .callout p {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.72;
}

.method-page .callout p:last-child {
  margin-bottom: 0;
}

.method-page .callout ul {
  margin: 6px 0 10px;
  padding-left: 20px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Caveats */

.method-page .caveats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.method-page .caveats li {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.method-page .caveats .ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--red);
  font-weight: 800;
  font-size: 14px;
}

.method-page .caveats strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.method-page .caveats p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* Conclusions */

.method-page .conclusions {
  display: grid;
  gap: 14px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
  counter-reset: c;
}

.method-page .conclusions li {
  counter-increment: c;
  position: relative;
  padding: 20px 22px 20px 66px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.method-page .conclusions li::before {
  content: counter(c,decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 19px;
  color: var(--red);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.method-page .conclusions strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 15.5px;
}

.method-page .conclusions p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

.method-page .conclusions li.is-canadian {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.method-page .conclusions li.is-canadian::before {
  color: #15803d;
}

.method-page .conclusions li.is-canadian > strong {
  color: #166534;
}

/* Sub-headings and sources band */

.method-page .h2-sub {
  margin: 56px 0 0;
  font-size: clamp(28px,3vw,36px);
  line-height: 1.16;
  letter-spacing: -.045em;
  font-weight: 700;
}

.method-page .h2-sub.first {
  margin-top: 0;
}

.method-page .sources-band {
  padding: 64px 0;
}

.method-page .method-note {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

/* Sources */

.method-page .source-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  display: grid;
  gap: 10px;
}

.method-page .source-list li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.method-page .source-list li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.method-page .source-list small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

/* CTA band */

.method-page .cta {
  padding: 72px 0;
  background: var(--ink);
  color: #fff;
}

.method-page .cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.method-page .cta h2 {
  margin: 0;
  font-size: clamp(28px,3.4vw,40px);
  line-height: 1.05;
  letter-spacing: -.045em;
  max-width: 620px;
}

.method-page .cta p {
  margin: 14px 0 0;
  color: #c8cbd0;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 620px;
}

.method-page .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.method-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  max-width: 100%;
  padding: 12px 22px;
  text-align: center;
  line-height: 1.4;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease,color .2s ease,transform .2s ease;
}

.method-page .btn-light {
  background: #fff;
  color: var(--ink);
}

.method-page .btn-light:hover {
  transform: translateY(-1px);
  background: #f1f1f2;
}

.method-page .btn-ghost {
  border: 1px solid #3b3e44;
  color: #fff;
}

.method-page .btn-ghost:hover {
  border-color: #fff;
}

/* Content stays inside its column without hiding accidental page overflow. */

.method-page .checks > *,
.method-page .check-card > *,
.method-page .case-top > *,
.method-page .chain > *,
.method-page .ops > *,
.method-page .verdict-head > *,
.method-page .annotation > span,
.method-page .source-list li > div {
  min-width: 0;
}

.method-page .pill,
.method-page .tag {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.method-page .pill {
  min-width: 0;
}

.method-page .record-head > * {
  min-width: 0;
}

.method-page .record-head strong,
.method-page .verdict-head strong {
  overflow-wrap: break-word;
}

.method-page .terminal-head > span:last-child {
  min-width: 0;
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.method-page :where(section[id],.case-step[id]) {
  scroll-margin-top: 24px;
}

/* Supporting ownership evidence; retain the existing page layout. */

.method-page .case-intro .evidence-source {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.method-page .ownership-card {
  margin: 28px 0 0;
  padding: clamp(20px,3.2vw,30px);
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.method-page .ownership-card h4 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(23px,2.6vw,28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.method-page .ownership-card h5 {
  margin: 22px 0 12px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.method-page .ownership-card p {
  margin: 0 0 16px;
}

.method-page .ownership-card ul {
  margin: 0;
  padding-left: 22px;
}

.method-page .ownership-card li {
  margin: 0 0 12px;
  padding-left: 2px;
}

.method-page .ownership-card li:last-child {
  margin-bottom: 0;
}

.method-page .ownership-card li::marker {
  color: var(--red);
}

.method-page .ownership-card strong {
  color: var(--ink);
  font-weight: 700;
}

.method-page .ownership-card a {
  overflow-wrap: anywhere;
}

.method-page .ownership-card .ownership-note {
  margin: 20px 0 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 14px;
  line-height: 1.65;
}

/* Accreditation evidence card; keep the established article width. */

.method-page .accreditation-card {
  margin: 28px 0 0;
  padding: clamp(20px,3.2vw,30px);
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.method-page .case-step .accreditation-card h3 {
  margin: 0 0 14px;
  max-width: none;
  color: var(--ink);
  font-size: clamp(23px,2.6vw,28px);
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 700;
}

.method-page .accreditation-card p {
  margin: 0 0 14px;
}

.method-page .accreditation-card p:last-child {
  margin-bottom: 0;
}

.method-page .accreditation-card .accreditation-record {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.method-page .accreditation-card a {
  overflow-wrap: anywhere;
}

/* Internal review link, styled to match the supplied red button reference. */

.method-page .review-cta {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.method-page .btn-review {
  min-height: 56px;
  padding: 16px 24px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  gap: 12px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(173,0,0,.12);
}

.method-page .btn-review > span {
  min-width: 0;
}

.method-page .btn-review svg {
  flex: 0 0 18px;
}

.method-page .btn-review:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.method-page .btn-review:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .method-page .review-cta .btn-review {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------------- */

@media (max-width: 1020px) {
  .method-page .checks {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .method-page .checks-intro {
    position: static;
  }

  .method-page .chain {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .method-page .chain li:nth-child(2)::after {
    display: none;
  }
}

/* Phones: the same type scale as the guide pages (h1 about 34px, h2 28px,
   h3 18-22px, body 15px), with tighter spacing so the page reads like the
   rest of the site. Desktop sizes above are unchanged. */

@media (max-width: 760px) {
  /* Hero */
  .method-page .hero {
    padding: 40px 0 30px;
  }

  .method-page .hero h1 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -.04em;
  }

  .method-page .hero .lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
  }

  .method-page .byline {
    gap: 6px 12px;
    margin-top: 16px;
    font-size: 12px;
  }

  /* Dots end up dangling when the byline wraps; spacing alone separates
     the items, as on the guide pages. */
  .method-page .byline .dot {
    display: none;
  }

  .method-page .jump {
    gap: 8px;
    margin-top: 20px;
  }

  .method-page .jump a {
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    font-size: 12.5px;
  }

  .method-page .jump span {
    font-size: 11px;
  }

  /* Section and step headings */
  .method-page .kicker,
  .method-page .step-label {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .method-page .step-label b {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .method-page .checks-intro h2,
  .method-page .case-top h2,
  .method-page .section-head h2,
  .method-page .h2-sub,
  .method-page .cta h2 {
    font-size: 28px;
    line-height: 1.14;
    letter-spacing: -.035em;
  }

  .method-page .h2-sub {
    margin-top: 44px;
  }

  .method-page .case-step h3 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.22;
    letter-spacing: -.025em;
  }

  .method-page .prose h3 {
    margin: 32px 0 10px;
    font-size: 19px;
  }

  /* Body text */
  .method-page .prose,
  .method-page .section-head p,
  .method-page .checks-intro p,
  .method-page .case-intro p {
    font-size: 15px;
    line-height: 1.72;
  }

  .method-page .checks-intro p,
  .method-page .case-intro p,
  .method-page .section-head p {
    margin-top: 14px;
  }

  .method-page .prose p {
    margin-bottom: 14px;
  }

  .method-page .checks-intro .note {
    margin-top: 18px;
    padding: 13px 15px;
    font-size: 13px;
  }

  .method-page .case-intro .evidence-source {
    font-size: 13px;
  }

  .method-page .section-head {
    margin-bottom: 26px;
  }

  /* Spacing between sections */
  .method-page .section {
    padding: 48px 0;
  }

  .method-page .sources-band {
    padding: 48px 0;
  }

  .method-page .case-step {
    padding-top: 44px;
  }

  .method-page .checks {
    gap: 26px;
  }

  .method-page .case-top {
    gap: 22px;
  }

  /* The four checks: number sits beside the heading, like the
     conclusions list further down. */
  .method-page .check-list {
    gap: 12px;
  }

  .method-page .check-card {
    grid-template-columns: 26px minmax(0,1fr);
    gap: 10px;
    padding: 18px 18px 18px 16px;
    border-radius: 14px;
  }

  .method-page .check-num {
    padding-top: 2px;
    font-size: 17px;
  }

  .method-page .check-card h3 {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.3;
  }

  .method-page .check-card p {
    font-size: 14.5px;
    line-height: 1.65;
  }

  /* Tables and records */
  .method-page .table-wrap,
  .method-page .record {
    margin: 20px 0;
    border-radius: 12px;
  }

  .method-page caption {
    padding: 13px 16px;
  }

  .method-page caption span {
    font-size: 12px;
    line-height: 1.45;
  }

  .method-page .record-head {
    padding: 12px 16px;
  }

  .method-page .record dd {
    font-size: 13px;
  }

  .method-page .record-foot {
    padding: 11px 16px;
  }

  /* WHC verdict card */
  .method-page .verdict-head strong {
    font-size: 16px;
  }

  .method-page .verdict-badge {
    margin-top: 14px;
    padding: 11px 13px;
    font-size: 13.5px;
  }

  /* Ownership chain, operators, cards */
  .method-page .chain {
    gap: 14px;
    margin: 22px 0;
  }

  .method-page .chain li {
    padding: 14px 16px;
    border-radius: 12px;
  }

  .method-page .chain strong {
    font-size: 14.5px;
  }

  .method-page .ownership-card,
  .method-page .accreditation-card {
    margin-top: 22px;
    padding: 18px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.65;
  }

  .method-page .ownership-card h4,
  .method-page .case-step .accreditation-card h3 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.02em;
  }

  .method-page .ownership-card h5 {
    margin: 18px 0 10px;
    font-size: 15.5px;
  }

  .method-page .ownership-card p,
  .method-page .accreditation-card p {
    margin-bottom: 12px;
  }

  .method-page .ownership-card li {
    margin-bottom: 8px;
  }

  .method-page .ownership-card .ownership-note,
  .method-page .accreditation-card .accreditation-record {
    font-size: 13px;
  }

  .method-page .ownership-card .ownership-note {
    margin-top: 16px;
    padding: 13px 14px;
  }

  .method-page .ops {
    gap: 12px;
    margin: 22px 0;
  }

  .method-page .op {
    padding: 18px;
    border-radius: 14px;
  }

  .method-page .op-top {
    margin-bottom: 10px;
  }

  .method-page .op h4 {
    font-size: 17px;
  }

  .method-page .op .where {
    font-size: 12px;
  }

  .method-page .op p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
  }

  .method-page .terminal {
    margin: 22px 0 10px;
    border-radius: 12px;
  }

  .method-page .terminal-head {
    padding: 10px 14px;
    font-size: 11.5px;
  }

  .method-page .annotation {
    margin-bottom: 22px;
    padding: 13px 14px;
    font-size: 13.5px;
  }

  .method-page .callout {
    margin: 22px 0;
  }

  .method-page .callout strong.t {
    font-size: 15px;
  }

  .method-page .callout p {
    font-size: 14.5px;
    line-height: 1.68;
  }

  .method-page .callout ul {
    font-size: 14px;
  }

  /* Honest limits and conclusions */
  .method-page .caveats,
  .method-page .conclusions {
    gap: 10px;
    margin: 22px 0;
  }

  .method-page .caveats li {
    grid-template-columns: 26px minmax(0,1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
  }

  .method-page .caveats .ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
  }

  .method-page .caveats strong,
  .method-page .conclusions strong {
    font-size: 15px;
  }

  .method-page .caveats p,
  .method-page .conclusions p {
    font-size: 14px;
    line-height: 1.62;
  }

  .method-page .conclusions li {
    padding: 16px 16px 16px 52px;
    border-radius: 12px;
  }

  .method-page .conclusions li::before {
    left: 16px;
    top: 16px;
    font-size: 14px;
  }

  /* Sources and the closing call to action */
  .method-page .source-list li {
    font-size: 13.5px;
  }

  .method-page .source-list small {
    font-size: 12px;
  }

  .method-page .method-note {
    margin-top: 22px;
    font-size: 12.5px;
  }

  .method-page .cta {
    padding: 48px 0;
  }

  .method-page .cta-inner {
    gap: 22px;
  }

  .method-page .cta p {
    margin-top: 12px;
    font-size: 15px;
  }

  .method-page .chain,
  .method-page .ops,
  .method-page .caveats {
    grid-template-columns: 1fr;
  }

  .method-page .chain li:not(:last-child)::after {
    top: auto;
    bottom: -12px;
    right: 50%;
    transform: translateX(50%) rotate(135deg);
  }

  .method-page .chain li:nth-child(2)::after {
    display: block;
  }

  .method-page .record dl {
    grid-template-columns: 1fr;
  }

  .method-page .record dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  .method-page .record dd {
    padding-top: 2px;
  }

  .method-page .facts {
    grid-template-columns: 1fr;
  }

  .method-page .fact:nth-child(odd) {
    padding-right: 0;
  }

  .method-page .facts .fact:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .method-page .terminal pre {
    font-size: 12px;
    line-height: 1.7;
    padding: 14px 15px 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .method-page .prose code,
  .method-page .op code,
  .method-page .caveats code,
  .method-page .annotation code {
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .method-page .verdict {
    padding: 18px;
    border-radius: 14px;
  }

  .method-page .verdict-head {
    gap: 12px;
  }

  .method-page .verdict-logo {
    max-width: 94px;
    padding-right: 12px;
  }

  .method-page .record dt,
  .method-page .record dd {
    padding-left: 16px;
    padding-right: 16px;
  }

  .method-page .record dt {
    padding-top: 12px;
  }

  .method-page .record dd {
    padding-bottom: 12px;
  }

  .method-page .callout {
    padding: 16px 18px;
  }

  .method-page .btns {
    width: 100%;
  }

  .method-page .btns .btn {
    width: 100%;
  }
}

/* Keep labels above values rather than squeezing two columns onto a phone. */

@media (max-width: 900px) {
  .method-page .stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .method-page .stack,
  .method-page .stack tbody,
  .method-page .stack tbody tr,
  .method-page .stack td,
  .method-page .stack caption {
    display: block;
    width: 100%;
  }

  .method-page .stack tbody tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .method-page .stack tbody tr:last-child {
    border-bottom: 0;
  }

  .method-page .stack td {
    border: 0;
    padding: 8px 18px;
    min-height: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .method-page .stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-family: "Inter","Inter Fallback",sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .055em;
    text-transform: uppercase;
    line-height: 1.4;
  }

  .method-page .stack tbody tr:hover td {
    background: transparent;
  }

  .method-page .proof td:first-child {
    white-space: normal;
  }
}

/* Phones: each stacked row reads as a small record. The first cell becomes
   the row's title and the other labels sit beside their values, so long
   tables such as the nameserver list stay compact. The proof table keeps
   its labels above, because its values are full sentences. */

@media (max-width: 640px) {
  .method-page .stack tbody tr {
    padding: 13px 16px 12px;
  }

  .method-page .stack td {
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .method-page .stack td:first-child {
    padding: 0 0 6px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 700;
  }

  .method-page .stack td:first-child::before {
    display: none;
  }

  .method-page .stack:not(.proof) td:not(:first-child) {
    position: relative;
    min-height: 29px;
    padding-left: 128px;
  }

  .method-page .stack:not(.proof) td:not(:first-child)::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 118px;
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .05em;
  }

  .method-page .stack .ns-pills {
    gap: 5px;
  }

  .method-page .stack .pill {
    padding: 3px 8px;
    font-size: 12px;
  }

  .method-page .proof td:not(:first-child) {
    padding: 6px 0;
  }

  .method-page .proof td::before {
    margin-bottom: 3px;
    font-size: 10.5px;
  }

  /* Verdict facts: label on the left, value on the right. */
  .method-page .fact {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
  }

  .method-page .fact dt {
    font-size: 10.5px;
    letter-spacing: .05em;
  }

  .method-page .fact dd {
    margin: 0;
    font-size: 13.5px;
  }
}

@media (max-width: 360px) {
  .method-page .hero h1 {
    font-size: 30px;
  }

  .method-page .checks-intro h2,
  .method-page .case-top h2,
  .method-page .section-head h2,
  .method-page .h2-sub,
  .method-page .cta h2 {
    font-size: 26px;
  }

  .method-page .case-step h3 {
    font-size: 21px;
  }

  .method-page .check-card {
    padding: 16px 16px 16px 14px;
  }

  .method-page .verdict-head {
    flex-wrap: wrap;
  }

  .method-page .jump {
    gap: 8px;
  }

  .method-page .jump a {
    padding: 7px 12px;
    line-height: 1.4;
  }

  .method-page .chain li,
  .method-page .op,
  .method-page .ownership-card,
  .method-page .accreditation-card,
  .method-page .verdict {
    padding: 16px;
  }

  /* Too narrow for side-by-side table labels: put them back on top. */
  .method-page .stack:not(.proof) td:not(:first-child) {
    min-height: 0;
    padding: 5px 0;
  }

  .method-page .stack:not(.proof) td:not(:first-child)::before {
    position: static;
    width: auto;
    margin-bottom: 2px;
  }

  .method-page .fact {
    grid-template-columns: 100px minmax(0,1fr);
  }
}

/* Content gutters match base.css .wrap on phones. */
@media (max-width: 640px) {
  .method-page {
    --page-gutter: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-page * {
    transition: none !important;
  }
}