/* Range Trust site.
 *
 * Design reference: a hallmark struck into silver. An assay office's mark
 * is independent proof, punched permanently into the object the owner
 * keeps: close the office, cancel anything you like, the mark is still in
 * the metal. That is the product's argument, so the page is built from
 * that world - oxidised silver ground, bright metal sheets, near-black
 * struck recesses, and one gold mark used sparingly where something has
 * actually been verified (stars, the buy control, a marked row).
 *
 * Type: Libre Franklin only, self-hosted. Franklin Gothic is the
 * job-printing and commercial-signage gothic that certificates, plates
 * and utility printing were set in. Hierarchy is carried by weight
 * (300-800) and size. Fragment Mono appears for code and nothing else.
 *
 * Rules that hold everywhere: one accent (gold), surfaces are square and
 * controls take a 2px relief, no gradients, no blur, no shadows except
 * where the plugin's own widget CSS asks for them, no second display
 * face, no em-dashes in copy, and no colour used as the only carrier of
 * meaning.
 */

/* ---- type --------------------------------------------------------- */
@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Libre Franklin";
	font-style: italic;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/libre-franklin-latin-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fragment Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/fragment-mono-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ------------------------------------------------------- */
:root {
	/* Roles, not shades. ground = the page, sheet = a raised surface,
	   ink = struck text, quiet = secondary, rule = hairline,
	   signal = the one gold mark. */
	--ground: #e4e5e1;
	--sheet: #f4f5f2;
	--sheet-2: #eceeea;
	--ink: #15181a;
	--quiet: #4f5659;
	--rule: #c6c9c3;
	--rule-soft: #d6d8d3;
	--signal: #a97b0d;
	--signal-fill: #d3a01c;
	--signal-on: #15181a;
	--footer-bg: #15181a;
	--footer-ink: #e4e5e1;
	--footer-quiet: #9aa1a3;
	--footer-rule: #333a3d;

	--r: 2px;
	--max: 1160px;
	--sans: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
	--mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Same reference, oxidised the other way: the dark is the
		   recess, the light is the bright metal. */
		--ground: #15181a;
		--sheet: #1e2225;
		--sheet-2: #191d1f;
		--ink: #e8e9e5;
		--quiet: #9ba2a4;
		--rule: #343b3e;
		--rule-soft: #272c2f;
		--signal: #e0ae2a;
		--signal-fill: #d3a01c;
		--signal-on: #15181a;
		--footer-bg: #1e2225;
		--footer-ink: #e8e9e5;
		--footer-quiet: #9ba2a4;
		--footer-rule: #343b3e;
	}
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.62;
	color: var(--quiet);
	background: var(--ground);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--ink); line-height: 1.08; font-weight: 700; }
h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 780; line-height: 1.02; }
h2 { font-size: clamp(27px, 3.3vw, 39px); font-weight: 740; }
h3 { font-size: 19px; font-weight: 650; line-height: 1.3; }
strong, b { color: var(--ink); font-weight: 650; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--signal); }
img, svg { max-width: 100%; }

code, kbd, samp, pre {
	font-family: var(--mono);
	font-size: 0.88em;
	font-variant-ligatures: none;
}
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: var(--signal-fill); color: var(--signal-on); }

/* Visually hidden but read out: used for table column headers that are
   obvious to a sighted reader and empty in the layout. */
.vh {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(52px, 6vw, 88px) 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section-sheet { background: var(--sheet-2); }
.lede { font-size: 20px; line-height: 1.5; color: var(--quiet); }
.note { font-size: 14.5px; line-height: 1.55; color: var(--quiet); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Section headings sit left, one message each. No eyebrows anywhere.
   The measure is set on the heading itself so it stays in ch of its own
   size rather than of the body size. */
.head { margin-bottom: clamp(28px, 3.5vw, 46px); }
.head h2 { max-width: 24ch; }
.head p { margin-top: 14px; max-width: 58ch; font-size: 18px; }
.head-wide h2 { max-width: 30ch; }

/* ---- controls ------------------------------------------------------ */
.btn {
	display: inline-block;
	font: inherit;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.2;
	padding: 13px 22px;
	border-radius: var(--r);
	border: 1px solid var(--ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn-primary { background: var(--signal-fill); color: var(--signal-on); }
.btn-primary:hover { background: var(--ink); color: var(--ground); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--ink); }
.btn-sm { padding: 8px 15px; font-size: 14.5px; }

/* ---- nav ----------------------------------------------------------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ground);
	border-bottom: 1px solid var(--rule);
}
.nav-pill {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 22px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--ink);
	flex: none;
}
.brand-mark {
	display: inline-flex;
	width: 26px;
	height: 26px;
	border-radius: var(--r);
	background: var(--ink);
	color: var(--signal-fill);
	align-items: center;
	justify-content: center;
	flex: none;
}
.brand-mark svg { width: 15px; height: 15px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--quiet); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 800px) {
	.nav-links { display: none; }
	.nav-pill { justify-content: space-between; }
}

/* ---- hero: copy left, the five-year ledger right ------------------- */
.hero { padding: clamp(44px, 5.5vw, 80px) 0 clamp(44px, 5vw, 64px); }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(34px, 5vw, 76px);
	align-items: start;
}
.hero h1 { margin-bottom: 20px; max-width: 13ch; }
.hero .lede { max-width: 44ch; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.ledger { border-top: 2px solid var(--ink); padding-top: 14px; }
.ledger caption {
	caption-side: top;
	text-align: left;
	color: var(--ink);
	font-weight: 650;
	font-size: 15px;
	padding-bottom: 12px;
}
.ledger table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.ledger th, .ledger td { padding: 9px 0; text-align: right; font-size: 15px; }
.ledger thead th { font-size: 12.5px; font-weight: 500; color: var(--quiet); padding-bottom: 4px; }
.ledger th[scope="row"] { text-align: left; color: var(--ink); font-weight: 600; padding-right: 12px; white-space: nowrap; }
.ledger tbody tr + tr th, .ledger tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.ledger .total { font-weight: 700; color: var(--ink); border-left: 1px solid var(--rule); padding-left: 22px; }
.ledger thead .total { font-weight: 500; }
.ledger .mine .total { color: var(--signal); }
.ledger .zero { color: var(--quiet); }
.ledger tfoot td { padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--quiet); text-align: left; }
@media (max-width: 1000px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero h1 { max-width: 16ch; }
}
@media (max-width: 620px) {
	.ledger .yr { display: none; }
	.ledger .total { border-left: 0; padding-left: 0; }
}

/* ---- the argument: one measured column ----------------------------- */
.argument { max-width: 34em; }
.argument p { font-size: 20px; line-height: 1.55; color: var(--ink); font-weight: 350; }
.argument p + p { margin-top: 20px; }
.argument .note { margin-top: 26px; }

/* ---- specimen: the plugin's own widgets, rendered live -------------- */
.spec-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr; } }

/* A swatch is a bounded sample on a sheet, not a card wrapping content.
   Swatch surfaces are deliberately fixed rather than theme-token driven:
   a light-preset sample has to be shown on light, and a dark-preset
   sample on dark, whichever mode the page itself is in. This is a paint
   chart, not a section of the page. */
.swatch { border: 1px solid #d9dbd6; background: #f4f5f2; padding: 20px; }
.swatch-ink { background: #1d2327; border-color: #33383d; }
.swatch-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #5b6265;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid #e2e4df;
}
.swatch-ink .swatch-label { color: #a7aaad; border-bottom-color: #33383d; }
.swatch-stack { display: grid; gap: 22px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.spec-index { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
@media (max-width: 760px) { .spec-index { grid-template-columns: 1fr; } }
.spec-index div { display: flex; gap: 14px; font-size: 15.5px; }
.spec-index dt { color: var(--ink); font-weight: 600; flex: none; min-width: 8ch; }
.spec-index dd { color: var(--quiet); }

/* ---- comparison: a ledger, grouped, no card, hairlines at group edges */
.compare { width: 100%; border-collapse: collapse; }
.compare caption { text-align: left; padding-bottom: 18px; font-size: 15px; color: var(--quiet); }
.compare th, .compare td { padding: 11px 16px 11px 0; text-align: left; font-size: 16px; vertical-align: top; }
.compare thead th { font-size: 13px; font-weight: 600; color: var(--quiet); border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.compare tbody th[scope="rowgroup"] {
	padding: 26px 0 8px;
	font-size: 13px;
	font-weight: 650;
	color: var(--ink);
	text-align: left;
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { padding-bottom: 22px; }
.compare tbody + tbody th[scope="rowgroup"] { border-top: 1px solid var(--rule); }
.compare th[scope="row"] { font-weight: 400; color: var(--quiet); width: 34%; }
.compare .ours { color: var(--ink); font-weight: 600; width: 33%; }
.compare .theirs { color: var(--quiet); width: 33%; }
/* One row where the subscription tools genuinely win. Marked by weight,
   not by colour, so it survives greyscale and colour-blindness. */
.compare .theirs-win { color: var(--ink); font-weight: 600; }
.compare tfoot td { padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--quiet); }
.compare-scroll { overflow-x: auto; }
@media (max-width: 720px) {
	.compare { min-width: 620px; }
}

/* ---- install: real code, three lines -------------------------------- */
.install { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 60em; }
.install div {
	display: grid;
	grid-template-columns: 15em minmax(0, 1fr);
	gap: 6px 28px;
	padding: 20px 0;
	border-bottom: 1px solid var(--rule-soft);
	align-items: baseline;
}
@media (max-width: 700px) { .install div { grid-template-columns: 1fr; } }
.install dt { color: var(--ink); font-weight: 600; font-size: 15.5px; }
.install dd { min-width: 0; }
.install code {
	display: block;
	overflow-x: auto;
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	padding: 10px 13px;
	color: var(--ink);
	font-size: 14.5px;
	white-space: pre;
}

/* ---- capabilities: a two-column index, no cards, no icons ----------- */
.index-group + .index-group { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.index-group h3 { font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 18px; }
.index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
@media (max-width: 820px) { .index-list { grid-template-columns: 1fr; } }
.index-list div { max-width: 46ch; }
.index-list dt { color: var(--ink); font-weight: 650; font-size: 16.5px; margin-bottom: 4px; }
.index-list dd { font-size: 15.5px; line-height: 1.55; }

/* ---- price: a ledger line, not a plan card -------------------------- */
.price-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(30px, 5vw, 68px);
	align-items: start;
	border-top: 2px solid var(--ink);
	padding-top: 30px;
}
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.price-figure {
	font-size: clamp(60px, 8vw, 92px);
	font-weight: 780;
	line-height: 0.9;
	color: var(--ink);
	font-variant-numeric: tabular-nums lining-nums;
}
.price-figure span { display: block; font-size: 16px; font-weight: 500; color: var(--quiet); line-height: 1.4; margin-top: 14px; }
.price-grid .btn { margin-top: 26px; }
.price-grid .note { margin-top: 18px; max-width: 34em; }
.includes { border-top: 1px solid var(--rule); }
.includes li { list-style: none; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; color: var(--ink); }
#checkout-note { color: var(--ink); font-weight: 600; }

/* ---- FAQ ------------------------------------------------------------ */
.faq { max-width: 68ch; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
	font-weight: 650;
	font-size: 17.5px;
	color: var(--ink);
	cursor: pointer;
	padding: 18px 34px 18px 0;
	position: relative;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 16px;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--quiet);
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 0 20px; max-width: 62ch; }

/* ---- footer --------------------------------------------------------- */
footer { background: var(--footer-bg); color: var(--footer-quiet); padding: 56px 0 34px; }
footer .brand { color: var(--footer-ink); }
footer .brand-mark { background: var(--footer-ink); color: var(--footer-bg); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } }
.foot p { font-size: 15px; margin-top: 12px; max-width: 32em; }
.foot h4 { color: var(--footer-ink); font-size: 13px; font-weight: 650; margin-bottom: 12px; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--footer-quiet); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--footer-ink); text-decoration: underline; }
.foot-bottom {
	grid-column: 1 / -1;
	border-top: 1px solid var(--footer-rule);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
}
.foot-bottom span { max-width: 46em; }

/* ---- documentation pages -------------------------------------------- */
.page-top { padding-top: 34px; padding-bottom: 70px; }
.docs-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; }
@media (max-width: 860px) { .docs-shell { grid-template-columns: 1fr; } }
.docs-nav { position: sticky; top: 88px; align-self: start; }
.docs-nav h5 { font-size: 12.5px; font-weight: 650; color: var(--ink); margin: 22px 0 8px; }
.docs-nav h5:first-child { margin-top: 0; }
.docs-nav a { display: block; padding: 4px 0; color: var(--quiet); text-decoration: none; font-size: 15px; }
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.active { color: var(--ink); font-weight: 650; box-shadow: inset 2px 0 0 var(--signal); padding-left: 10px; }
.docs-toggle { display: none; margin-bottom: 20px; }
@media (max-width: 860px) {
	.docs-toggle { display: inline-block; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet); padding: 8px 16px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
	.docs-nav { display: none; position: static; }
	.docs-nav.open { display: block; margin-bottom: 28px; }
}
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(31px, 4.2vw, 42px); margin-bottom: 18px; }
.prose h2 { font-size: 25px; margin: 36px 0 12px; }
.prose h3 { font-size: 19px; margin: 26px 0 10px; }
.prose p, .prose li { font-size: 16.5px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 6px; }
.prose code { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 1px 5px; color: var(--ink); }
.prose pre {
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	color: var(--ink);
	padding: 16px 18px;
	overflow-x: auto;
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15.5px; }
.prose th, .prose td { border-bottom: 1px solid var(--rule-soft); padding: 9px 12px 9px 0; text-align: left; }
.prose th { color: var(--ink); border-bottom-color: var(--ink); font-size: 13px; }
.prose blockquote { border-left: 2px solid var(--signal); padding: 2px 0 2px 16px; margin: 0 0 16px; }
.docs-footer {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid var(--rule);
	margin-top: 48px;
	padding-top: 18px;
	font-size: 14px;
}