/* ============================================================================
   American Companies — trust & verification surfaces (docs/07).
   Methodology page, the rubric table, and the badge legend treatments.
   ============================================================================ */

/* ---- Methodology hero (navy, matches the home hero language) ---- */
.ac-meth-hero{
	background:radial-gradient(1200px 380px at 80% -40%,rgba(60,90,153,.45),transparent 60%),
		linear-gradient(180deg,var(--ac-navy-800),var(--ac-navy-700));
	color:#fff;padding:44px 0 48px}
.ac-crumbs-invert{color:var(--ac-text-on-invert-muted)}
.ac-crumbs-invert a{color:#cdd9ec}
.ac-crumbs-invert a:hover{color:#fff}

/* per-badge landing hero: the large credential medallion beside the title */
.ac-badge-hero{display:flex;align-items:center;gap:20px;margin-bottom:14px}
.ac-badge-hero-ico{flex:none;line-height:0}
.ac-badge-hero .ac-cred-svg{width:72px;height:72px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.ac-badge-hero .ac-hp-h1{margin:2px 0 0}
@media(max-width:560px){
	.ac-badge-hero{gap:14px}
	.ac-badge-hero .ac-cred-svg{width:60px;height:60px}
}

.ac-meth{padding:8px 0 40px}
.ac-meth-sec{padding:32px 0;border-bottom:1px solid var(--ac-border)}
.ac-meth-sec:last-child{border-bottom:0}

/* process steps */
.ac-meth-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.ac-meth-step{background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:var(--ac-r-lg);
	padding:22px;box-shadow:var(--ac-shadow-xs)}
.ac-meth-step h3{font-size:var(--ac-fs-h3);margin:12px 0 8px}
.ac-meth-step p{margin:0;color:var(--ac-text-muted);font-size:var(--ac-fs-sm);line-height:1.6}
.ac-meth-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
	border-radius:50%;background:var(--ac-navy-800);color:#fff;font-weight:var(--ac-fw-black)}

/* master mark callout */
.ac-meth-mark{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:var(--ac-success-bg);
	border:1px solid var(--ac-success-line);border-radius:var(--ac-r-xl);padding:20px}
.ac-verified-lg{font-size:var(--ac-fs-base);padding:8px 16px}

/* rubric table */
.ac-meth-table-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--ac-border);
	border-radius:var(--ac-r-lg);background:var(--ac-surface)}
.ac-meth-table{width:100%;border-collapse:collapse;min-width:760px}
.ac-meth-table th,.ac-meth-table td{text-align:left;padding:12px 14px;vertical-align:top;
	border-bottom:1px solid var(--ac-border);font-size:var(--ac-fs-sm)}
.ac-meth-table thead th{background:var(--ac-surface-inset);position:sticky;top:0}
.ac-meth-table tbody tr:last-child th,.ac-meth-table tbody tr:last-child td{border-bottom:0}
.ac-meth-table td{color:var(--ac-text-muted)}
.ac-meth-cred{display:block;font-weight:var(--ac-fw-bold);color:var(--ac-text)}
.ac-meth-def{display:block;font-weight:400;color:var(--ac-text-faint);font-size:var(--ac-fs-xs);margin-top:3px;max-width:30ch}
.ac-meth-na{color:var(--ac-text-faint)}

/* evidence-source cards */
.ac-meth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.ac-meth-card{background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:var(--ac-r-lg);padding:20px}
.ac-meth-card h3{font-size:var(--ac-fs-lg);margin:0 0 8px}
.ac-meth-card p{margin:0;color:var(--ac-text-muted);font-size:var(--ac-fs-sm);line-height:1.6}

/* report-a-listing band */
.ac-meth-report{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
	background:var(--ac-surface-inset);border:1px solid var(--ac-border);border-radius:var(--ac-r-xl);padding:20px}

@media(max-width:820px){
	.ac-meth-steps,.ac-meth-grid{grid-template-columns:1fr}
}

/* ---- Content / trust pages (about, why-buy-american, data-safety, etc.) ---- */
.ac-pico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
	border-radius:12px;background:var(--ac-blue-50);color:var(--ac-navy-700);margin-bottom:14px}
.ac-pico svg{width:20px;height:20px;display:block}
.ac-pico-red{background:var(--ac-red-50);color:var(--ac-red-700)}
.ac-pico-gold{background:var(--ac-gold-bg);color:var(--ac-gold-ink)}
.ac-pico-green{background:var(--ac-success-bg);color:var(--ac-success-ink)}
.ac-page-lead{font-size:var(--ac-fs-lg);color:var(--ac-text-muted);line-height:1.7;max-width:66ch}
.ac-meth-card .ac-cklist{margin:12px 0 0;padding:0;list-style:none}
.ac-meth-card .ac-cklist li{display:flex;gap:8px;align-items:flex-start;padding:4px 0;
	color:var(--ac-text-muted);font-size:var(--ac-fs-sm);line-height:1.5}
.ac-meth-card .ac-cklist li svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ac-success-ink)}
.ac-meth-grid.ac-cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.ac-meth-grid.ac-cols-2{grid-template-columns:1fr}}

/* ---- Per-badge landing: the 3-tier rubric strip ---- */
.ac-badge-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.ac-badge-tier{background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:var(--ac-r-lg);padding:18px}
.ac-badge-tier p{margin:10px 0 0;color:var(--ac-text-muted);font-size:var(--ac-fs-sm);line-height:1.55}
@media(max-width:760px){.ac-badge-tiers{grid-template-columns:1fr}}

/* ============================================================================
   Content-page upgrades (2026-06): document layout for editable legal pages,
   flag-photo hero variant, pull-quotes, step timelines, credential strips.
   ============================================================================ */

/* ---- Document layout (privacy/terms — generic pages/page.html) ---- */
.ac-doc-updated{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;
	font-size:var(--ac-fs-sm);color:#cdd9ec;background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 13px}
.ac-doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;padding-top:28px}
.ac-doc-toc{position:sticky;top:84px}
.ac-doc-toc-h{font-size:var(--ac-fs-xs);font-weight:var(--ac-fw-bold);letter-spacing:.1em;
	text-transform:uppercase;color:var(--ac-text-faint);margin:0 0 10px}
.ac-doc-toc ol{list-style:none;margin:0;padding:0;counter-reset:doctoc;border-left:2px solid var(--ac-border)}
.ac-doc-toc li{counter-increment:doctoc}
.ac-doc-toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;
	font-size:var(--ac-fs-sm);color:var(--ac-text-muted);text-decoration:none;
	transition:color var(--ac-dur) var(--ac-ease),border-color var(--ac-dur) var(--ac-ease)}
.ac-doc-toc a::before{content:counter(doctoc) ".  ";color:var(--ac-gold-solid);font-weight:var(--ac-fw-bold);
	font-variant-numeric:tabular-nums}
.ac-doc-toc a:hover{color:var(--ac-navy-800);border-left-color:var(--ac-gold-solid)}
.ac-doc-single{max-width:760px;margin:0 auto;padding-top:28px}
/* the document body: numbered section headings + a styled lead paragraph */
.ac-doc-body{counter-reset:docsec;min-width:0}
.ac-doc-body .ac-prose>p:first-child{font-size:var(--ac-fs-lg);color:var(--ac-text);line-height:1.65}
.ac-doc-body .ac-prose h2{counter-increment:docsec;scroll-margin-top:90px;
	display:flex;align-items:baseline;gap:12px;margin-top:36px;padding-top:26px;border-top:1px solid var(--ac-border)}
.ac-doc-body .ac-prose h2::before{content:counter(docsec,decimal-leading-zero);flex:none;
	font-size:var(--ac-fs-sm);font-weight:var(--ac-fw-bold);color:var(--ac-gold-solid);
	font-variant-numeric:tabular-nums;letter-spacing:.06em}
@media(max-width:900px){
	.ac-doc{display:block}
	.ac-doc-toc{position:static;margin-bottom:6px}
	.ac-doc-toc ol{border-left:0;display:flex;flex-wrap:wrap;gap:8px}
	.ac-doc-toc a{border:1px solid var(--ac-border);border-radius:999px;padding:6px 13px;margin:0;
		background:var(--ac-surface)}
	.ac-doc-toc a:hover{border-color:var(--ac-border-strong)}
}

/* ---- Flag-photo hero variant (about / why-buy-american / magazine) ----
   Same recipe as the homepage hero: blurred flag photo clipped inside a
   backdrop layer + navy gradient for contrast. Markup adds one element:
   <span class="ac-meth-hero-bg" aria-hidden="true"></span> as first child. */
.ac-meth-hero-flag{position:relative;isolation:isolate;background:var(--ac-navy-900)}
.ac-meth-hero-flag .ac-hp-wrap{position:relative}
.ac-meth-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ac-meth-hero-bg::before{content:"";position:absolute;inset:-24px;
	background:url("../img/american-flag.8ea33efe962f.jpg") center/cover no-repeat;
	filter:blur(4px) brightness(.85) saturate(.95);transform:scale(1.06)}
.ac-meth-hero-flag::after{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(11,22,40,.82),rgba(11,22,40,.62) 45%,rgba(11,22,40,.86))}
.ac-meth-hero-flag .ac-hp-h1,.ac-meth-hero-flag .ac-hp-sub{text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* ---- Pull-quote: a principle statement, not a testimonial ---- */
.ac-pullquote{margin:26px 0 4px;padding:6px 0 6px 24px;border-left:3px solid var(--ac-gold-solid)}
.ac-pullquote p{margin:0;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.4;
	font-weight:var(--ac-fw-semibold);color:var(--ac-navy-800);letter-spacing:-.012em}
.ac-pullquote cite{display:block;margin-top:8px;font-style:normal;font-size:var(--ac-fs-sm);
	color:var(--ac-text-faint)}

/* ---- Timeline variant for .ac-meth-steps: a line connects the numbers ---- */
.ac-meth-steps-line .ac-meth-step{position:relative}
.ac-meth-steps-line .ac-meth-step::before{content:"";position:absolute;top:37px;left:calc(20px + 34px);
	right:-18px;height:2px;background:linear-gradient(90deg,var(--ac-gold-solid),var(--ac-border))}
.ac-meth-steps-line .ac-meth-step:last-child::before{display:none}
.ac-meth-steps-line .ac-meth-num{position:relative;z-index:1;box-shadow:0 0 0 4px var(--ac-surface)}
@media(max-width:820px){
	.ac-meth-steps-line .ac-meth-step::before{top:calc(20px + 34px);bottom:-18px;left:37px;right:auto;
		width:2px;height:auto;background:linear-gradient(180deg,var(--ac-gold-solid),var(--ac-border))}
}

/* ---- Credential medallion strip (reuses verification's .ac-cred-svg) ---- */
.ac-cred-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ac-cred-strip a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
	background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:999px;
	padding:7px 16px 7px 8px;font-size:var(--ac-fs-sm);font-weight:var(--ac-fw-semibold);
	color:var(--ac-navy-800);transition:border-color var(--ac-dur) var(--ac-ease),box-shadow var(--ac-dur) var(--ac-ease)}
.ac-cred-strip a:hover{border-color:var(--ac-gold-line);box-shadow:var(--ac-shadow-inset-gold),var(--ac-shadow-sm)}
.ac-cred-strip .ac-cred-svg{width:30px;height:30px;display:block}
/* small medallions inside the methodology rubric table */
.ac-meth-table .ac-cred-cell{display:flex;align-items:flex-start;gap:10px}
.ac-meth-table .ac-cred-cell .ac-cred-svg{flex:none;width:28px;height:28px;display:block;margin-top:1px}

/* ---- Link-card hover lift (contact channels etc.) ---- */
.ac-meth-card-link{transition:box-shadow var(--ac-dur) var(--ac-ease),transform var(--ac-dur) var(--ac-ease),border-color var(--ac-dur) var(--ac-ease)}
.ac-meth-card-link:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-pop);border-color:var(--ac-border-strong)}

/* ---- "Jump to" chip nav (FAQ) ---- */
.ac-jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.ac-jump a{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 15px;
	font-size:var(--ac-fs-sm);font-weight:var(--ac-fw-semibold);color:#e8eef7;text-decoration:none;
	transition:background var(--ac-dur) var(--ac-ease)}
.ac-jump a:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---- Stat band as an inset card (content pages; homepage band is full-bleed) ---- */
.ac-stat-band{border-radius:var(--ac-r-2xl);padding:28px 24px;margin-top:22px;
	border-top:3px solid var(--ac-cta);box-shadow:var(--ac-shadow-lg)}
.ac-meth-steps-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.ac-meth-steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.ac-meth-steps-4{grid-template-columns:1fr}}
/* steps-4 wraps to 2-col mid-width — connector geometry no longer lines up, hide it */
@media(max-width:980px){.ac-meth-steps-4 .ac-meth-step::before{display:none !important}}
/* FAQ topic sections: land anchors below the sticky navbar */
.ac-faq-wrap .ac-meth-sec{scroll-margin-top:70px}
