/* ============================================================
   Man With Many Caps — guide & pillar component styles
   Loaded after style.css. Pairs with inc/shortcodes-guides.php.
   Additive only: no existing selector is redefined.
   ============================================================ */

:root {
	--g-line: var(--line, #DCE4F2);
	--g-ink: var(--ink, #141F3A);
	--g-navy: var(--brand-dark, #0B1531);
	--g-accent: var(--accent, #FF5C72);
	--g-paper: var(--paper, #F5F7FC);
	--g-cream: var(--cream, #EAF0FB);
	--g-mid: #6B7899;
	--g-mono: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
	--g-disp: var(--serif, "Sora", sans-serif);
	--g-r: var(--r, 10px);
	--g-rl: var(--r-lg, 18px);
}

/* tone palette — the caps rainbow */
.tone-accent  { --t: #FF5C72; --tw: #fff0f2; }
.tone-pink    { --t: #FF5C8A; --tw: #fff0f5; }
.tone-purple  { --t: #7C5CFF; --tw: #f2effe; }
.tone-blue    { --t: #2B7FFF; --tw: #ecf3ff; }
.tone-teal    { --t: #12B5A5; --tw: #e7f8f6; }
.tone-amber   { --t: #FFAE1A; --tw: #fff6e3; }
.tone-green   { --t: #2FB46B; --tw: #eaf7ef; }
.tone-coral   { --t: #FF6B4A; --tw: #fff1ed; }
.tone-navy    { --t: #1B2F63; --tw: #eef2fa; }
.tone-neutral { --t: #6B7899; --tw: #f3f6fc; }

/* shared small mono label */
.g-label, .fg-k, .ex-k, .oc-k, .gc-label, .rn-kicker {
	font-family: var(--g-mono);
	font-size: .68rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--g-accent);
}
.g-label { margin-bottom: .8em; display: flex; align-items: center; gap: 8px; }

/* ---------- article meta strip ---------- */
.g-articlemeta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-family: var(--g-mono); font-size: .78rem; color: var(--g-mid);
	border-bottom: 1px solid var(--g-line); padding-bottom: 12px; margin: 0 0 1.8em;
}
.g-articlemeta .am-by { color: var(--g-ink); font-weight: 700; }
.g-articlemeta .am-sep { color: var(--g-accent); }

/* ---------- back link ---------- */
.g-backlink {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--g-mono); font-size: .78rem; font-weight: 700;
	text-decoration: none; color: var(--g-mid); margin: 0 0 1.2em;
}
.g-backlink svg { width: 15px; height: 15px; }
.g-backlink:hover { color: var(--g-accent); }

/* ---------- contents ---------- */
.g-toc {
	background: var(--g-paper); border: 1px solid var(--g-line);
	border-radius: var(--g-rl); padding: 22px 26px; margin: 1.8em 0;
}
.g-toc ol { margin: 0; padding-left: 1.3em; }
.g-toc li { margin: 0 0 7px; font-size: .95rem; line-height: 1.5; }
.g-toc li::marker { font-family: var(--g-mono); color: var(--g-mid); font-size: .8rem; }
.g-toc a { text-decoration: none; border-bottom: 1px solid transparent; }
.g-toc a:hover { border-bottom-color: currentColor; }

/* ---------- who this is for / quick context / legal note ---------- */
.g-whofor, .g-context, .g-legal {
	border-radius: 0 var(--g-r) var(--g-r) 0;
	padding: 20px 24px; margin: 1.7em 0;
}
.g-whofor { background: var(--g-cream); border-left: 4px solid #2B7FFF; }
.g-whofor .g-label { color: #1a5fd6; }
.g-context { background: var(--g-paper); border-left: 4px solid var(--g-accent); }
.g-legal { background: #f6f4ef; border-left: 4px solid #FFAE1A; }
.g-legal .g-label { color: #8a6412; }
.g-whofor p, .g-context p, .g-legal p { margin: 0 0 .7em; font-size: .97rem; line-height: 1.65; }
.g-whofor p:last-child, .g-context p:last-child, .g-legal p:last-child { margin-bottom: 0; }

/* ---------- success box ---------- */
.g-success {
	display: flex; gap: 15px; align-items: flex-start;
	background: #eaf7ef; border: 1px solid #bfe3cd; border-left: 4px solid #2FB46B;
	border-radius: 0 var(--g-r) var(--g-r) 0; padding: 20px 24px; margin: 1.7em 0;
}
.g-success .g-ic {
	width: 34px; height: 34px; flex: none; border-radius: 50%;
	background: #2FB46B; color: #fff; display: grid; place-items: center;
}
.g-success .g-ic svg { width: 18px; height: 18px; }
.g-success .g-label { color: #1d7a48; }
.g-success p { margin: 0 0 .6em; font-size: .97rem; line-height: 1.65; }
.g-success p:last-child { margin-bottom: 0; }

/* ---------- UI change note ---------- */
.g-uinote {
	display: flex; gap: 12px; align-items: flex-start;
	border: 1px dashed var(--g-line); border-radius: var(--g-r);
	padding: 14px 18px; margin: 1.5em 0; background: #fff;
}
.g-uinote > svg { width: 18px; height: 18px; flex: none; color: var(--g-mid); margin-top: 3px; }
.g-uinote .ui-date {
	display: block; font-family: var(--g-mono); font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--g-accent); margin-bottom: 4px;
}
.g-uinote p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--g-mid); }

/* ---------- image placeholder ---------- */
.g-imgph {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--g-paper); border: 2px dashed var(--g-line);
	border-radius: var(--g-rl); padding: 20px 22px; margin: 1.7em 0;
}
.g-imgph .ph-ic {
	width: 40px; height: 40px; flex: none; border-radius: var(--g-r);
	background: #fff; border: 1px solid var(--g-line);
	display: grid; place-items: center; color: var(--g-mid);
}
.g-imgph .ph-ic svg { width: 20px; height: 20px; }
.g-imgph .ph-title { font-weight: 700; font-size: .95rem; line-height: 1.5; color: var(--g-ink); }
.g-imgph .ph-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.g-imgph .ph-meta span { font-family: var(--g-mono); font-size: .74rem; color: var(--g-mid); line-height: 1.5; }
.g-imgph .ph-meta b { color: var(--g-ink); }

/* ---------- link chips ---------- */
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.4em 0; }
.g-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--g-line); border-radius: 999px;
	padding: 7px 15px; font-family: var(--g-mono); font-size: .78rem; font-weight: 700;
	text-decoration: none; color: var(--g-ink);
}
.g-chip svg { width: 12px; height: 12px; color: var(--g-accent); }
.g-chip:hover { border-color: var(--g-accent); color: var(--g-accent); }

/* ---------- CTA band ---------- */
.g-ctaband {
	background: var(--g-navy); color: #EAF0FB; border-radius: var(--g-rl);
	padding: 34px 36px; margin: 2.2em 0; text-align: center;
}
.g-ctaband h3 { font-family: var(--g-disp); font-size: 1.5rem; color: #fff; margin: 0 0 .5em; line-height: 1.25; }
.g-ctaband p { margin: 0 auto 1.4em; max-width: 52ch; font-size: 1rem; line-height: 1.65; color: #9FB0D4; }
.g-ctabtn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--g-accent); color: #fff; text-decoration: none;
	font-family: var(--g-mono); font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 15px 30px; border-radius: var(--g-r);
}
.g-ctabtn svg { width: 16px; height: 16px; }
.g-ctabtn:hover { background: #fff; color: var(--g-navy); }

/* ---------- fact grid ---------- */
.g-factgrid {
	background: var(--g-navy); border-radius: var(--g-rl);
	padding: 26px 30px; margin: 1.9em 0;
}
.g-factgrid.tone-neutral, .g-factgrid.tone-blue, .g-factgrid.tone-teal,
.g-factgrid.tone-green, .g-factgrid.tone-amber { background: var(--tw); }
.g-factgrid .fg-head {
	display: flex; align-items: center; gap: 10px; margin-bottom: 1em;
	font-family: var(--g-disp); font-weight: 700; font-size: 1.15rem; color: #fff;
}
.g-factgrid.tone-neutral .fg-head, .g-factgrid.tone-blue .fg-head, .g-factgrid.tone-teal .fg-head,
.g-factgrid.tone-green .fg-head, .g-factgrid.tone-amber .fg-head { color: var(--g-ink); }
.g-factgrid .fg-head svg { width: 21px; height: 21px; color: var(--g-accent); flex: none; }
.g-factgrid .fg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
.g-factgrid .fg-k { margin-bottom: 5px; }
.g-factgrid .fg-v { font-size: .95rem; line-height: 1.6; color: #DCE4F2; }
.g-factgrid.tone-neutral .fg-v, .g-factgrid.tone-blue .fg-v, .g-factgrid.tone-teal .fg-v,
.g-factgrid.tone-green .fg-v, .g-factgrid.tone-amber .fg-v { color: var(--g-ink); }
.g-factgrid .fg-v p { margin: 0; }

/* ---------- rich step blocks ---------- */
.g-steps { display: flex; flex-direction: column; gap: 14px; margin: 1.8em 0; }
.g-step {
	display: flex; gap: 18px; background: #fff;
	border: 1px solid var(--g-line); border-radius: var(--g-rl); padding: 22px 24px;
}
.g-step .gs-num {
	flex: none; width: 40px; height: 40px; border-radius: var(--g-r);
	background: var(--g-navy); color: var(--g-accent);
	font-family: var(--g-mono); font-size: .92rem; font-weight: 700;
	display: grid; place-items: center;
}
.g-step .gs-body { min-width: 0; }
.g-step h4 { font-family: var(--g-disp); font-size: 1.06rem; font-weight: 700; margin: 2px 0 .5em; line-height: 1.3; }
.g-step p { margin: 0 0 .7em; font-size: .97rem; line-height: 1.65; }
.g-step p:last-child { margin-bottom: 0; }

/* ---------- checklist ---------- */
.g-checklist {
	background: var(--g-paper); border: 1px solid var(--g-line);
	border-radius: var(--g-rl); padding: 24px 28px; margin: 1.8em 0;
}
.g-checklist .cl-group + .cl-group { margin-top: 18px; }
.g-checklist h5 {
	font-family: var(--g-mono); font-size: .72rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--g-mid); margin: 0 0 .7em; font-weight: 700;
}
.g-checklist ul.cl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.g-checklist ul.cl-items li {
	position: relative; padding-left: 30px; font-size: .96rem; line-height: 1.55; color: var(--g-ink);
}
.g-checklist ul.cl-items li::before {
	content: ""; position: absolute; left: 0; top: .12em;
	width: 19px; height: 19px; border-radius: 5px;
	border: 2px solid var(--g-accent); background: #fff;
}
.g-checklist ul.cl-items li::after {
	content: ""; position: absolute; left: 5px; top: .42em;
	width: 9px; height: 5px; border-left: 2px solid var(--g-accent);
	border-bottom: 2px solid var(--g-accent); transform: rotate(-45deg);
}

/* ---------- decision table ---------- */
.g-decision {
	border: 1px solid var(--g-line); border-radius: var(--g-rl);
	padding: 22px 24px; margin: 1.8em 0; background: #fff;
}
.g-decision .dc-head, .g-decision .dc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g-decision .dc-head {
	font-family: var(--g-mono); font-size: .68rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--g-mid); font-weight: 700;
	padding-bottom: 9px; border-bottom: 2px solid var(--g-navy);
}
.g-decision .dc-row { padding: 14px 0; border-bottom: 1px solid var(--g-line); }
.g-decision .dc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.g-decision .dc-if { font-weight: 700; font-size: .95rem; line-height: 1.55; color: var(--g-ink); }
.g-decision .dc-then { font-size: .95rem; line-height: 1.55; color: #3A4767; }
.g-decision .dc-then::before {
	content: "→"; color: var(--g-accent); font-weight: 700; margin-right: 8px;
}

/* ---------- worked example ---------- */
.g-example {
	background: #fff; border: 1px solid var(--g-line); border-left: 4px solid var(--g-navy);
	border-radius: 0 var(--g-rl) var(--g-rl) 0; padding: 24px 26px; margin: 1.8em 0;
}
.g-example h4 { font-family: var(--g-disp); font-size: 1.1rem; font-weight: 700; margin: 0 0 1em; line-height: 1.3; }
.g-example .ex-row { padding: 12px 0; border-top: 1px solid var(--g-line); }
.g-example .ex-row:first-of-type { border-top: 0; padding-top: 0; }
.g-example .ex-k { color: var(--g-mid); margin-bottom: 4px; }
.g-example .ex-v { font-size: .96rem; line-height: 1.6; color: var(--g-ink); }

/* ---------- outcome story ---------- */
.g-outcome {
	background: #fff; border: 1px solid var(--g-line); border-top: 4px solid var(--g-accent);
	border-radius: 0 0 var(--g-rl) var(--g-rl); padding: 26px 28px; margin: 1.9em 0;
}
.g-outcome .oc-num {
	font-family: var(--g-mono); font-size: .68rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--g-accent); font-weight: 700; margin-bottom: 8px;
}
.g-outcome .oc-head { font-family: var(--g-disp); font-size: 1.22rem; font-weight: 700; margin: 0 0 1em; line-height: 1.3; }
.g-outcome .oc-row { margin-bottom: 14px; }
.g-outcome .oc-k { color: var(--g-mid); margin-bottom: 4px; }
.g-outcome .oc-v { font-size: .96rem; line-height: 1.65; color: #2a3450; }
.g-outcome .oc-limit {
	background: #fff6e3; border-left: 3px solid #FFAE1A; border-radius: 0 var(--g-r) var(--g-r) 0;
	padding: 13px 16px; margin-top: 16px; font-size: .92rem; line-height: 1.6; color: #6b4c05;
}
.g-outcome .oc-limit b { color: #4a3403; }

/* ---------- card grid ---------- */
.g-cardwrap { margin: 1.8em 0; }
.g-cardgrid { display: grid; gap: 14px; }
.g-cardgrid.cols-1 { grid-template-columns: 1fr; }
.g-cardgrid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cardgrid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-card {
	background: #fff; border: 1px solid var(--g-line); border-top: 3px solid var(--t, var(--g-accent));
	border-radius: 0 0 var(--g-rl) var(--g-rl); padding: 20px 22px;
	display: block; text-decoration: none; color: inherit;
}
.g-card .gc-label { color: var(--t, var(--g-accent)); margin-bottom: 7px; }
.g-card h4 { font-family: var(--g-disp); font-size: 1.02rem; font-weight: 700; margin: 0 0 .5em; line-height: 1.3; }
.g-card p { margin: 0 0 .6em; font-size: .93rem; line-height: 1.6; color: #3A4767; }
.g-card p:last-child { margin-bottom: 0; }
.g-card .gc-meta {
	margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--g-line);
	font-family: var(--g-mono); font-size: .72rem; color: var(--g-mid);
}
.g-card.is-link:hover { border-color: var(--t, var(--g-accent)); }

/* ---------- two-way comparison ---------- */
.g-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.8em 0; }
.g-side {
	background: var(--tw, #f3f6fc); border: 1px solid var(--g-line);
	border-radius: var(--g-rl); padding: 22px 24px;
}
.g-side.is-win { border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t); }
.g-side .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.g-side h4 { font-family: var(--g-disp); font-size: 1.08rem; font-weight: 700; margin: 0; line-height: 1.3; }
.g-side .cp-badge {
	font-family: var(--g-mono); font-size: .64rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
	background: var(--t, var(--g-mid)); color: #fff; white-space: nowrap;
}
.g-side .cp-sub {
	font-family: var(--g-mono); font-size: .85rem; font-weight: 700;
	color: var(--t, var(--g-mid)); margin-top: 6px;
}
.g-side .cp-body { margin-top: 12px; }
.g-side .cp-body p { margin: 0 0 .6em; font-size: .94rem; line-height: 1.6; }
.g-side .cp-body p:last-child { margin-bottom: 0; }
.g-side .cp-body ul { margin: 0; padding-left: 1.2em; }
.g-side .cp-body li { font-size: .94rem; line-height: 1.55; margin-bottom: 6px; }

/* ---------- workflow strip ---------- */
.g-flowstrip {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	gap: 12px; margin: 1.9em 0;
}
.g-flowstrip > :not(.g-flowstep) { display: none; }
.g-flowstep {
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: var(--g-rl, 18px); padding: 18px 20px 20px; min-height: 170px;
	background: linear-gradient(150deg, var(--h1, #16244d) 0%, var(--h2, #2B7FFF) 100%);
	box-shadow: 0 1px 2px rgba(11, 21, 49, .1);
}
.g-flowstep.hue-pink   { --h1: #b81f3f; --h2: #FF5C8A; }
.g-flowstep.hue-purple { --h1: #3f28a8; --h2: #7C5CFF; }
.g-flowstep.hue-blue   { --h1: #12275c; --h2: #2B7FFF; }
.g-flowstep.hue-teal   { --h1: #07564f; --h2: #12B5A5; }
.g-flowstep.hue-amber  { --h1: #b06a00; --h2: #FFAE1A; }
.g-flowstep.hue-green  { --h1: #14713f; --h2: #2FB46B; }
.g-flowstep.hue-coral  { --h1: #c33a1f; --h2: #FF6B4A; }
.g-flowstep.hue-navy   { --h1: #0B1531; --h2: #1B2F63; }
.g-flowstep .fs-ghost {
	position: absolute; z-index: 0; right: -6px; bottom: -34px;
	font-family: var(--g-disp, "Sora", sans-serif); font-weight: 800;
	font-size: 8.4rem; line-height: 1; letter-spacing: -.05em;
	color: rgba(255, 255, 255, .13); pointer-events: none;
}
.g-flowstep .fs-num {
	position: relative; z-index: 1; display: inline-flex; align-items: center;
	padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	font-family: var(--g-mono, ui-monospace, monospace); font-size: .72rem;
	font-weight: 700; letter-spacing: .1em; color: #fff;
}
.g-flowstep h5 {
	position: relative; z-index: 1;
	font-family: var(--g-disp, "Sora", sans-serif); font-size: 1.06rem; font-weight: 700;
	line-height: 1.28; color: #fff; margin: 0 0 .4em; letter-spacing: -.01em;
}
.g-flowstep p {
	position: relative; z-index: 1; margin: 0;
	font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .85); text-wrap: pretty;
}

/* ---------- next reads ---------- */
.g-readnext { margin: 2.2em 0; }
.g-readnext .rn-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.g-readnext .rn-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-readnext .rn-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* nothing but a card may occupy a grid cell */
.g-readnext .rn-grid > :not(a.g-read) { display: none; }

.g-readnext .rn-grid a.g-read {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; align-items: flex-start;
	min-height: 250px; padding: 20px 22px 18px;
	border: 0; border-radius: var(--g-rl, 18px);
	text-decoration: none !important; box-shadow: 0 1px 2px rgba(11, 21, 49, .1);
	background: linear-gradient(150deg, var(--h1, #16244d) 0%, var(--h2, #2B7FFF) 100%);
	transition: transform .25s ease, box-shadow .25s ease;
}
.g-read.hue-pink   { --h1: #b81f3f; --h2: #FF5C8A; }
.g-read.hue-purple { --h1: #3f28a8; --h2: #7C5CFF; }
.g-read.hue-blue   { --h1: #12275c; --h2: #2B7FFF; }
.g-read.hue-teal   { --h1: #07564f; --h2: #12B5A5; }
.g-read.hue-amber  { --h1: #b06a00; --h2: #FFAE1A; }
.g-read.hue-green  { --h1: #14713f; --h2: #2FB46B; }
.g-read.hue-coral  { --h1: #c33a1f; --h2: #FF6B4A; }
.g-read.hue-navy   { --h1: #0B1531; --h2: #1B2F63; }

/* oversized faded watermark, drawn in CSS from the --rn-wm custom property */
.g-readnext .rn-grid a.g-read::after {
	content: ""; position: absolute; z-index: 0;
	right: -14%; bottom: -18%; width: 62%; aspect-ratio: 1;
	background: var(--rn-wm) center / contain no-repeat;
	opacity: .16; mix-blend-mode: luminosity; pointer-events: none;
	transition: transform .35s ease, opacity .25s ease;
}
.g-readnext .rn-grid a.g-read > * { position: relative; z-index: 1; }

.g-read .rn-kicker {
	display: inline-flex; align-items: center; margin: 0 0 auto;
	padding: 5px 11px; border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	font-family: var(--g-mono, ui-monospace, monospace); font-size: .68rem;
	font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; text-decoration: none;
}
.g-read .rn-title {
	display: block; margin: 24px 0 .4em;
	font-family: var(--g-disp, "Sora", sans-serif); font-weight: 700;
	font-size: 1.22rem; line-height: 1.26; letter-spacing: -.012em;
	color: #fff; text-wrap: pretty; text-decoration: none;
	text-shadow: 0 1px 12px rgba(11, 21, 49, .25);
}
.g-read .rn-desc {
	display: block; font-family: inherit; font-size: .92rem; line-height: 1.55;
	color: rgba(255, 255, 255, .85); text-wrap: pretty; text-decoration: none;
}
.g-read .rn-go {
	display: grid; place-items: center; width: 34px; height: 34px; margin-top: 16px;
	border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.g-read .rn-go svg { width: 17px; height: 17px; }
.g-readnext .rn-grid a.g-read:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11, 21, 49, .24); }
.g-readnext .rn-grid a.g-read:hover::after { transform: scale(1.07) rotate(-4deg); opacity: .23; }
.g-read:hover .rn-go { background: #fff; color: var(--h1, #0B1531); transform: translateX(4px); }
.g-read:focus-visible { outline: 3px solid var(--g-accent, #FF5C72); outline-offset: 3px; }

/* ---------- inline pill ---------- */
.g-pill {
	display: inline-block; font-family: var(--g-mono); font-size: .66rem;
	font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 9px; border-radius: 5px;
	background: var(--tw, #f3f6fc); color: var(--t, var(--g-mid));
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, #6B7899) 30%, transparent);
	vertical-align: middle;
}

/* ---------- draft-only editorial blocks ---------- */
.g-seopack {
	background: var(--g-navy); color: #C6D3EE; border-radius: var(--g-rl);
	padding: 24px 28px; margin: 1.9em 0; font-family: var(--g-mono); font-size: .82rem; line-height: 1.7;
}
.g-seopack h4 {
	font-family: var(--g-disp); font-size: 1.05rem; color: var(--g-accent);
	margin: 0 0 1em; letter-spacing: 0; text-transform: none;
}
.g-seopack .sp-row { display: grid; grid-template-columns: 190px 1fr; gap: 6px 16px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.g-seopack .sp-row:first-of-type { border-top: 0; }
.g-seopack .sp-k { color: var(--g-accent); font-weight: 700; }
.g-seopack .sp-v { color: #DCE4F2; word-break: break-word; }
.g-seopack .sp-v p { margin: 0; }

.g-editnotes {
	background: #fff6e3; border: 1px solid #f0dcae; border-radius: var(--g-rl);
	padding: 22px 26px; margin: 1.9em 0;
}
.g-editnotes .g-label { color: #8a6412; }
.g-editnotes ul { margin: 0; padding-left: 1.2em; }
.g-editnotes li { font-size: .92rem; line-height: 1.6; color: #5a4207; margin-bottom: 7px; }
.g-editnotes li:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
	.g-cardgrid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-flowstrip { grid-auto-flow: row; grid-auto-columns: auto; }
}
@media (max-width: 640px) {
	.g-readnext .rn-grid, .g-readnext .rn-grid.cols-2, .g-readnext .rn-grid.cols-3,
	.g-factgrid .fg-grid,
	.g-cardgrid.cols-2, .g-cardgrid.cols-3,
	.g-compare { grid-template-columns: 1fr; }
	.g-decision .dc-head { display: none; }
	.g-decision .dc-row { grid-template-columns: 1fr; gap: 6px; }
	.g-seopack .sp-row { grid-template-columns: 1fr; }
	.g-ctaband { padding: 28px 22px; }
	.g-step { flex-direction: column; gap: 12px; }
}