/* ==========================================================================
   Scoy Agentic Guides — editorial content system
   Reusable building blocks for long-form guides. Brand-aligned to scoy.ai
   (Instrument Serif display + Neue Haas body), dark/light adaptive via the
   theme tokens. Prefix: .g-*  Used inside .article__content.
   ========================================================================== */

/* ---- Brand typography fix + local tokens --------------------------------- *
   The theme loads Instrument Serif + Neue Haas Grotesk, but the base tokens
   pointed at Playfair/Source Sans (not loaded). Repoint them to what loads. */
:root {
	--ff-serif: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
	--ff-sans:  "Neue Haas Grotesk Display", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	--g-claude:    var(--c-sec-business);   /* warm, Anthropic-ish */
	--g-chatgpt:   var(--c-sec-markets);    /* green, OpenAI-ish   */
	--g-radius:    12px;
	--g-radius-sm: 8px;
}

/* Instrument Serif is a single-weight display face: never faux-bold it. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* ---- Article reading experience ----------------------------------------- */
/* Body copy in Neue Haas for readability; headings stay Instrument Serif. */
.article__content {
	font-family: var(--ff-sans);
	font-size: 18.5px;
	line-height: 1.72;
	color: var(--c-ink-soft);
}
.article__content > p { margin-block: 0 var(--sp-5); }
.article__content > p:first-of-type {
	font-size: 22px;
	line-height: 1.55;
	color: var(--c-ink);
}
.article__content strong { color: var(--c-ink); font-weight: 600; }
.article__content a { color: var(--c-accent); text-underline-offset: 3px; }

/* Section headings get a hairline rule + an accent tick, for rhythm. */
.article__content h2 {
	font-family: var(--ff-serif);
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.06;
	letter-spacing: -.01em;
	margin: var(--sp-8) 0 var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-rule);
	position: relative;
}
.article__content h2::before {
	content: ""; position: absolute; top: -2px; left: 0;
	width: 60px; height: 3px; background: var(--c-accent);
}
.article__content h3 {
	font-family: var(--ff-serif);
	font-size: clamp(21px, 2vw, 27px);
	line-height: 1.15;
	margin: var(--sp-6) 0 var(--sp-3);
	color: var(--c-ink);
}

/* ---- Verdict / TL;DR box ------------------------------------------------- */
.g-verdict {
	margin: var(--sp-6) 0;
	border: 1px solid var(--c-rule-strong);
	border-left: 4px solid var(--c-accent);
	border-radius: var(--g-radius);
	background: var(--c-paper-alt);
	padding: var(--sp-5) var(--sp-6);
}
.g-verdict__label {
	font-family: var(--ff-sans);
	font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--c-accent); margin: 0 0 var(--sp-3);
}
.g-verdict__row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; }
.g-verdict__row + .g-verdict__row { border-top: 1px dashed var(--c-rule); }
.g-verdict__pick {
	flex: 0 0 auto; align-self: flex-start;
	font-family: var(--ff-sans); font-size: 12px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.g-verdict__pick--a { background: var(--g-claude); }
.g-verdict__pick--b { background: var(--g-chatgpt); }
.g-verdict__text { font-size: 17px; line-height: 1.5; color: var(--c-ink); }

/* ---- Stat strip ---------------------------------------------------------- */
.g-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px; margin: var(--sp-6) 0; background: var(--c-rule);
	border: 1px solid var(--c-rule); border-radius: var(--g-radius); overflow: hidden;
}
.g-stat { background: var(--c-paper); padding: var(--sp-5) var(--sp-4); text-align: center; }
.g-stat__num {
	font-family: var(--ff-mono); font-size: clamp(24px, 3vw, 32px); font-weight: 500;
	color: var(--c-ink); line-height: 1;
}
.g-stat__label {
	font-family: var(--ff-sans); font-size: 12px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--c-muted); margin-top: var(--sp-2);
}

/* ---- Comparison table ---------------------------------------------------- */
.g-table-wrap { margin: var(--sp-6) 0; overflow-x: auto; border-radius: var(--g-radius); border: 1px solid var(--c-rule); }
.g-table { width: 100%; border-collapse: collapse; font-family: var(--ff-sans); font-size: 15.5px; min-width: 520px; }
.g-table thead th {
	background: var(--c-paper-alt);
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--c-ink); text-align: left; padding: var(--sp-4); border-bottom: 2px solid var(--c-rule-strong);
}
.g-table thead th:nth-child(2) { box-shadow: inset 0 3px 0 var(--g-claude); }
.g-table thead th:nth-child(3) { box-shadow: inset 0 3px 0 var(--g-chatgpt); }
.g-table tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--c-rule); vertical-align: top; color: var(--c-ink-soft); }
.g-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-paper-alt) 55%, transparent); }
.g-table tbody tr:hover td { background: color-mix(in srgb, var(--c-accent) 6%, transparent); }
.g-table tbody td:first-child { font-weight: 600; color: var(--c-ink); width: 30%; }
.g-table tbody td:last-child { border-right: none; }
.g-table .g-num { font-family: var(--ff-mono); font-size: 14.5px; color: var(--c-ink); }
.g-table .g-win { position: relative; color: var(--c-ink); font-weight: 600; background: color-mix(in srgb, var(--c-accent) 9%, transparent) !important; }
.g-table .g-win::after { content: "\2713"; margin-left: 7px; color: var(--c-accent); font-weight: 700; }

/* ---- Head-to-head "round" band ------------------------------------------- */
.g-round {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	margin: var(--sp-7) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
	background: var(--c-paper-alt); border-radius: var(--g-radius-sm);
	border-left: 4px solid var(--c-rule-strong);
}
.g-round__cat { font-family: var(--ff-serif); font-size: clamp(20px, 2vw, 26px); color: var(--c-ink); }
.g-round__win {
	font-family: var(--ff-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; padding: 6px 12px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.g-round__win--a { background: var(--g-claude); }
.g-round__win--b { background: var(--g-chatgpt); }
.g-round__win--tie { background: var(--c-rule-strong); }

/* ---- Callout ------------------------------------------------------------- */
.g-callout {
	margin: var(--sp-5) 0; padding: var(--sp-5); border-radius: var(--g-radius);
	background: var(--c-paper-alt); border: 1px solid var(--c-rule);
	border-left: 4px solid var(--c-sec-tech);
}
.g-callout__label {
	font-family: var(--ff-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--c-sec-tech); margin: 0 0 var(--sp-2);
}
.g-callout p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-soft); }
.g-callout--warn { border-left-color: var(--c-accent); }
.g-callout--warn .g-callout__label { color: var(--c-accent); }

/* ---- Key takeaway (great clip cut-point) --------------------------------- */
.g-key {
	margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
	border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink);
}
.g-key__label {
	font-family: var(--ff-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--sp-2);
}
.g-key__text { font-family: var(--ff-serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--c-ink); margin: 0; }

/* ---- Pull quote ---------------------------------------------------------- */
.g-pull {
	margin: var(--sp-6) 0; padding-left: var(--sp-5); border-left: 3px solid var(--c-accent);
	font-family: var(--ff-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.3; color: var(--c-ink);
}

/* ---- Pros / cons --------------------------------------------------------- */
.g-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; }
.g-pc { border: 1px solid var(--c-rule); border-radius: var(--g-radius); padding: var(--sp-5); background: var(--c-paper); }
.g-pc__h { font-family: var(--ff-sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--sp-3); }
.g-pc--pro .g-pc__h { color: var(--c-sec-markets); }
.g-pc--con .g-pc__h { color: var(--c-accent); }
.g-pc ul { list-style: none; margin: 0; padding: 0; }
.g-pc li { position: relative; padding-left: 26px; margin-bottom: var(--sp-3); font-size: 16px; line-height: 1.45; color: var(--c-ink-soft); }
.g-pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.g-pc--pro li::before { content: "\2713"; color: var(--c-sec-markets); }
.g-pc--con li::before { content: "\2715"; color: var(--c-accent); }

/* ---- Decision cards ------------------------------------------------------ */
.g-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: var(--sp-6) 0; }
.g-pick { border: 1px solid var(--c-rule); border-top: 3px solid var(--c-accent); border-radius: var(--g-radius); padding: var(--sp-5); background: var(--c-paper); }
.g-pick__who { font-family: var(--ff-serif); font-size: 21px; line-height: 1.15; color: var(--c-ink); margin: 0 0 var(--sp-2); }
.g-pick__rec { font-size: 15.5px; line-height: 1.5; color: var(--c-ink-soft); margin: 0; }
.g-pick__rec strong { color: var(--c-ink); }

/* ---- FAQ ----------------------------------------------------------------- */
.g-faq { margin: var(--sp-5) 0; }
.g-faq__item { border-top: 1px solid var(--c-rule); padding: var(--sp-4) 0; }
.g-faq__item:last-child { border-bottom: 1px solid var(--c-rule); }
.g-faq__q { font-family: var(--ff-serif); font-size: clamp(19px, 1.8vw, 23px); color: var(--c-ink); margin: 0 0 var(--sp-2); padding-left: 22px; position: relative; }
.g-faq__q::before { content: "Q"; position: absolute; left: 0; top: 1px; font-family: var(--ff-sans); font-weight: 700; font-size: 14px; color: var(--c-accent); }
.g-faq__a { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-soft); }

/* ---- Closing CTA --------------------------------------------------------- */
.g-cta {
	margin: var(--sp-8) 0 var(--sp-5); padding: var(--sp-7) var(--sp-6); border-radius: var(--g-radius);
	background: var(--c-paper-alt); border: 1px solid var(--c-rule); border-top: 3px solid var(--c-accent); text-align: center;
}
.g-cta__label { font-family: var(--ff-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--sp-3); }
.g-cta__h { font-family: var(--ff-serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; margin: 0 0 var(--sp-3); color: var(--c-ink); }
.g-cta p { max-width: 54ch; margin: 0 auto var(--sp-5); font-size: 17px; line-height: 1.55; color: var(--c-ink-soft); }
.g-cta__btn {
	display: inline-block; font-family: var(--ff-sans); font-weight: 600; font-size: 16px;
	background: var(--c-accent); color: #fff !important; text-decoration: none;
	padding: 14px 28px; border-radius: 999px; transition: transform .15s ease, opacity .15s ease;
}
.g-cta__btn:hover { transform: translateY(-2px); opacity: .94; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
	.g-proscons, .g-picks { grid-template-columns: 1fr; }
	.g-verdict__row { flex-direction: column; gap: var(--sp-2); }
	.g-round { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}