/*
Theme Name: GoldVara
Description: Custom lightweight theme for goldvara.com — server-rendered live payout tables, calculator, structured data. Light navy-and-gold design system (2026-08-10), mobile-first.
Version: 0.6.17
Author: GoldVara
Requires PHP: 7.4
Text Domain: goldvara
*/

/* ---------- Design tokens (2026-08-10 redesign — palette from the brand logo) ---------- */
:root {
	/* 2026-08-12 palette rework (Worthy-referenced): white base + clearly
	   darker warm cream + navy feature bands, so section rhythm survives
	   small screens. */
	--bg: #FFFFFF;          /* base surface */
	--panel: #FFFFFF;
	--cream: #F2EFE7;       /* alt section — distinct from white on mobile */
	--ink: #1E2A4A;         /* wordmark navy */
	--muted: #5E6880;       /* navy-gray */
	--line: #E7E2D6;
	--gold: #A8842C;        /* shield gold — accents, rules, small text */
	--goldDeep: #8A671C;    /* CTA surface (AA with white text) */
	--goldSoft: #C9A227;
	--goldTint: #F3EAD3;    /* highlight fill */
	--good: #1E6E4E;
	--bad: #A63D2A;
	--shadow: 0 10px 30px rgba(30, 42, 74, .08);
	--mono: "Cascadia Code", Consolas, ui-monospace, monospace;
	--sans: "Segoe UI", system-ui, -apple-system, sans-serif;
	--serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--radius: 12px;
	/* The light navy+gold palette IS the design (2026-08-10 decision) —
	   no dark-mode variant. color-scheme pins UA form controls light too. */
	color-scheme: light;
}

/* ---------- Base (mobile-first: base styles ARE the 375px design) ---------- */
* { box-sizing: border-box; }
/* Canvas behind the page = navy: iOS rubber-band overscroll shows the html
   background, and both page ends are navy (ticker up top, footer at bottom) —
   white here painted a big white void under the footer on iPhone (2026-08-13). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
/* Mobile type scale (2026-08-13): owner asked for +20% across the board on
   phones (was 17px root) — 20.4px root puts body at ~20px and the smallest
   text at ~16.5px. body is 1rem (not px) so this cascades to every rem size. */
@media (max-width: 719px) {
	html { font-size: 20.4px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.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;
}

h1, h2, .gv-final h2 { font-family: var(--serif); letter-spacing: .005em; }

/* ---------- Ticker ---------- */
.gv-ticker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: center;
	padding: 7px 18px;
	background: var(--ink);
	color: #B9C1D6;
	font-size: .8125rem;
	font-family: var(--mono);
}
.gv-ticker b { color: #fff; font-weight: 600; }
.gv-ticker .up { color: #6FCF97; }
.gv-ticker .right { margin-left: auto; }
.gv-ticker .stale { color: #E8A090; }
@media (max-width: 719px) { .gv-ticker .right { display: none; } }

/* ---------- Nav (sticky, Worthy-style scroll transition) ---------- */
.gv-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s ease, padding .3s ease;
}
.gv-nav.is-stuck {
	box-shadow: 0 8px 28px rgba(30, 42, 74, .14);
	padding-top: 8px;
	padding-bottom: 8px;
}
.gv-logo { display: inline-flex; align-items: center; }
.gv-logo img { height: 34px; width: auto; display: block; }
.gv-nav .grow { flex: 1; }
.gv-nav a.nav-link { color: var(--ink); font-size: .92rem; padding: 6px 0; }
.gv-nav a.nav-link.on { color: var(--gold); font-weight: 600; }
.gv-cta {
	display: inline-block;
	background: var(--goldDeep);
	color: #fff !important;
	padding: 11px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	text-align: center;
	/* If a label must wrap (long text × large mobile type), wrap into evenly
	   balanced centered lines instead of one long line + an orphan word —
	   an unbalanced wrap made the pill look broken (2026-08-13 iPhone). */
	line-height: 1.35;
	text-wrap: balance;
}
.gv-cta:hover { background: var(--gold); text-decoration: none; }
.gv-cta.ghost { background: transparent; color: var(--goldDeep) !important; border: 1px solid var(--gold); }
.gv-cta.ghost:hover { background: var(--goldTint); }

/* Mobile nav: hamburger below 880px (nav links can never wrap) */
.gv-navtoggle { display: none; }
.gv-navbtn {
	display: none;
	margin-left: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	color: var(--ink);
	font: 600 .875rem/1 var(--sans);
	letter-spacing: .08em;
	padding: 10px 14px;
	cursor: pointer;
}
@media (max-width: 879px) {
	.gv-nav { flex-wrap: wrap; }
	.gv-nav .grow { display: none; }
	.gv-navbtn { display: inline-block; }
	.gv-nav a.nav-link, .gv-nav .gv-cta.navcta {
		display: none;
		width: 100%;
		padding: 12px 4px;
		border-top: 1px solid var(--line);
		font-size: 1rem;
	}
	.gv-nav .gv-cta.navcta { border-radius: 999px; border-top: 0; margin-top: 6px; padding: 12px 22px; }
	.gv-navtoggle:checked ~ a.nav-link,
	.gv-navtoggle:checked ~ .gv-cta.navcta { display: block; }
}
@media (min-width: 880px) {
	.gv-nav .gv-cta.navcta { padding: 9px 20px; font-size: .9rem; }
}

/* Sticky mobile CTA bar */
.gv-stickycta {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--panel) 92%, transparent);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--line);
}
.gv-stickycta .gv-cta { display: block; }
@media (max-width: 719px) {
	.gv-stickycta { display: block; }
	/* No main padding-bottom: the footer's own mobile padding already clears
	   the sticky bar; padding here painted a white band above the footer. */
}

/* ---------- Page head ---------- */
/* NOTE: these classes are combined with .wrap on the same element in the
   templates — longhand top/bottom only, or they clobber .wrap's 18px sides. */
.gv-pagehead { padding-top: 30px; padding-bottom: 6px; }
.gv-crumb { font-size: .8125rem; color: var(--muted); margin-bottom: 12px; letter-spacing: .04em; }
.gv-pagehead h1 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); line-height: 1.18; margin: 0 0 12px; }
.gv-pagehead h1 em { font-style: normal; color: var(--gold); }
.gv-pagehead .lede { color: var(--muted); max-width: 640px; margin: 0; font-size: 1.02rem; }

/* ---------- Sections ---------- */
.gv-sec { padding-top: 34px; padding-bottom: 34px; }
.gv-sec.alt { background: var(--cream); }
/* Section headers centered at every size (owner, 2026-08-14 — was mobile-only
   since 2026-08-12, desktop flush-left). */
.gv-sec h2 { font-size: clamp(1.35rem, 4vw, 1.7rem); margin: 0 0 14px; text-align: center; }
/* The intro paragraph directly under a section header centers with it
   (owner, 2026-08-14). margin-inline auto centers the max-width ones as a
   block too. Essay prose (.gv-article) and bullet lists stay left. */
.gv-sec .wrap:not(.gv-article) > h2 + p { text-align: center; margin-left: auto; margin-right: auto; }
/* Designer brands section (2026-08-14 owner): BOTH paragraphs center at the
   same body size — the .gv-sub footnote style next to a full-size intro read
   as two mismatched fonts. */
.gv-designer .wrap > p { text-align: center; margin-left: auto; margin-right: auto; }
.gv-sub { font-size: .88rem; color: var(--muted); }
/* Sections are built around a centered h2 — trailing sub lines and freshness
   stamps that sit as direct children of the wrap center with it (owner,
   2026-08-14: left-flushed footers under centered sections read as a bug). */
.gv-sec .wrap:not(.gv-article) > .gv-sub:not(.gv-bullets) { text-align: center; }
.gv-sec .wrap:not(.gv-article) > .gv-freshness { display: table; margin-left: auto; margin-right: auto; }
/* Bullet blocks under centered headers: the LIST centers as a block, the
   items inside stay left-aligned (centered bullet text reads ragged). */
ul.gv-bullets { margin: 0 auto 10px; padding-left: 22px; width: fit-content; }
ul.gv-bullets li { margin: 4px 0; }

/* Legacy GF thank-you pages (Thank You – Quote Request / PAK Request): the
   stored content carries its own 80px-padded wrapper + a second h1 under the
   template's real title (big dead band + duplicate heading, owner 2026-08-14).
   Keyed to the legacy inline style so this dies on its own once the page
   content is rewritten in wp-admin. */
.gv-sec div[style*="padding: 80px"] { padding: 0 0 8px !important; }
.gv-sec div[style*="padding: 80px"] > h1 { display: none; }

/* ---------- Tables ---------- */
.gv-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius);
	/* scroll shadows — hint that the matrix pans sideways on small screens */
	background:
		linear-gradient(to right, var(--panel) 30%, transparent),
		linear-gradient(to left, var(--panel) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(30, 42, 74, .18), transparent),
		radial-gradient(farthest-side at 100% 50%, rgba(30, 42, 74, .18), transparent) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}
.gv-tablewrap table { background-color: transparent; }
/* JS-injected hint under horizontally scrollable tables (motion.js) */
.gv-scrollhint {
	text-align: center;
	font-size: .8125rem;
	color: var(--muted);
	margin-top: 6px;
}
.gv-scrollhint .arr { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	/* Animate only once the hint is on screen (.in-view via motion.js
	   IntersectionObserver) — animating at page load meant the 3 nudges were
	   long over before anyone scrolled down to the table (2026-08-13). */
	.gv-scrollhint.in-view .arr { animation: gv-nudge 1.2s ease-in-out 4; }
	@keyframes gv-nudge {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(6px); }
	}
}
.gv-scrollhint.is-done { display: none; }
.gv-table:not(.gv-comp) th, .gv-table:not(.gv-comp) td { white-space: nowrap; }
table.gv-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	font-size: .95rem;
	box-shadow: var(--shadow);
}
.gv-table th, .gv-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.gv-table thead th { background: var(--ink); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.gv-table tbody tr:last-child td { border-bottom: 0; }
/* Row highlight on hover (pointer) and tap (touch) — ALL tables, 2026-08-12 */
.gv-table tbody tr { cursor: pointer; }
.gv-table tbody tr td { transition: background-color .15s ease; }
.gv-table tbody tr:hover td,
.gv-table tbody tr.tapped td { background: var(--goldTint); }
@media (max-width: 719px) {
	/* the sticky first column must highlight with its row too */
	.gv-table tbody tr:hover td:first-child,
	.gv-table tbody tr.tapped td:first-child { background: var(--goldTint); }
}
.gv-table tr.hl td { background: var(--goldTint); }
.gv-table td.dim { color: var(--muted); font-style: italic; }
.gv-table td.rate { font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
	/* first column sticks while rates scroll — matrix stays readable at 375px */
	.gv-table th:first-child, .gv-table td:first-child {
		position: sticky; left: 0; z-index: 1;
		background: var(--panel);
		box-shadow: 2px 0 0 var(--line);
	}
	.gv-table thead th:first-child { background: var(--ink); }
	.gv-table tr.hl td:first-child { background: var(--goldTint); }
}

/* ---------- Tier ruler ---------- */
.gv-ruler { margin-top: 14px; }
.gv-ruler .track { display: flex; height: 32px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
/* Equal segments with the boundary weights labeled under the joints — the
   proportional widths crushed "Golden"/"Premium" together on phones and the
   marks never lined up with the segment edges (owner, 2026-08-14). */
.gv-ruler .seg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.gv-ruler .s1 { background: #EFE9DA; }
.gv-ruler .s2 { background: #EBDFBB; }
.gv-ruler .s3 { background: #E2CF97; }
.gv-ruler .s4 { background: #D6BC6B; }
.gv-ruler .marks { position: relative; height: 1.5em; font-size: .8125rem; color: var(--muted); margin-top: 5px; font-family: var(--mono); }
.gv-ruler .marks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 719px) { .gv-ruler .marks { font-size: .7rem; } }

/* ---------- Freshness stamp (receipt motif) ---------- */
.gv-freshness {
	display: inline-block;
	font-family: var(--mono);
	font-size: .8125rem;
	color: var(--muted);
	margin: 12px 0 0;
	padding: 4px 10px;
	border: 1px dashed var(--line);
	border-radius: 6px;
	background: var(--panel);
}
.gv-freshness.stale { color: var(--bad); border-color: var(--bad); }

/* ---------- Calculator ---------- */
.gv-calc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 20px;
	box-shadow: var(--shadow);
}
@media (min-width: 720px) { .gv-calc { grid-template-columns: 1fr 1fr; padding: 26px; } }
.gv-calc .lbl { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.kchips { display: flex; gap: 8px; flex-wrap: wrap; }
.kchip {
	font-family: var(--mono);
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	font-size: .95rem;
}
.kchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
input[type="range"].gv-range { width: 100%; accent-color: var(--goldDeep); }
.gv-est { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.gv-est .tier { font-size: .875rem; color: var(--gold); font-weight: 600; letter-spacing: .03em; }
.gv-est .big { font-size: 2.5rem; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gv-est .fine { font-size: .8125rem; color: var(--muted); margin: 8px 0 0; }
.gv-est .note { font-size: .875rem; color: var(--muted); }

/* ---------- Footer ---------- */
.gv-footer {
	/* no margin-top: navy final bands sit flush against the navy footer;
	   white-ending pages read fine flush too (2026-08-12 whitespace pass) */
	margin-top: 0;
	padding: 30px 18px calc(30px + 56px);
	background: var(--ink);
	color: #B9C1D6;
	font-size: .875rem;
}
@media (min-width: 720px) { .gv-footer { padding-bottom: 30px; } }
.gv-footer a { color: #D7DCE9; }
.gv-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.gv-footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 20px; }
.gv-footer .gv-mailonly { display: block; color: #A9B2C7; font-size: .8125rem; margin: 3px 0; }
/* Footer partners stack vertically (owner, 2026-08-14) — column removed
   2026-08-17 (BBB), rule kept in case the row ever comes back. */
.gv-footer .gv-logos { flex-direction: column; align-items: flex-start; gap: 12px; }
/* Three columns since the Partners column was pulled (2026-08-17). */
@media (min-width: 720px) { .gv-footer .cols { grid-template-columns: repeat(3, 1fr); } }
.gv-footer .cols b { display: block; color: #fff; margin-bottom: 6px; font-family: var(--serif); }
.gv-footer .cols a { color: #B9C1D6; display: block; margin: 3px 0; }

/* ---------- Category cards (What We Buy) ---------- */
.gv-cats { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 520px) { .gv-cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gv-cats { grid-template-columns: repeat(4, 1fr); } }
.gv-cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gv-cat .img { height: 130px; background: linear-gradient(135deg, var(--cream), #E2CF97); background-size: cover; background-position: center; }
.gv-cat .bd { padding: 14px 16px; }
.gv-cat h3 { margin: 0 0 6px; font-size: 1rem; }
.gv-cat p { margin: 0; font-size: .875rem; color: var(--muted); }

/* ---------- Yes / No columns ---------- */
.gv-buy { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .gv-buy { grid-template-columns: 1fr 1fr; } }
.gv-buy .col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.gv-buy .col h3 { margin: 0 0 12px; font-size: 1.05rem; }
.gv-buy .col.yes { border-top: 3px solid var(--good); }
.gv-buy .col.no { border-top: 3px solid var(--bad); }
.gv-buy .col.yes h3 { color: var(--good); }
.gv-buy .col.no h3 { color: var(--bad); }
.gv-buy ul { margin: 0; padding-left: 20px; }
.gv-buy li { margin: 7px 0; font-size: .93rem; }
.gv-buy .foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .875rem; color: var(--muted); }

/* ---------- Kit chooser ---------- */
.gv-kits { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .gv-kits { grid-template-columns: 1fr 1fr; } }
.gv-kit { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); }
.gv-kit.rec { border-color: var(--gold); border-width: 2px; }
.gv-kit .tag { position: absolute; top: -11px; right: 14px; background: var(--goldDeep); color: #fff; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; }
.gv-kit h3 { margin: 0 0 2px; font-family: var(--serif); }
.gv-kit .when { font-size: .8125rem; letter-spacing: .08em; color: var(--muted); font-family: var(--mono); }
.gv-kit ul { margin: 12px 0 16px; padding-left: 20px; }
.gv-kit li { margin: 7px 0; font-size: .9rem; }

/* ---------- Step timeline ---------- */
.gv-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .gv-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gv-steps { grid-template-columns: repeat(4, 1fr); } }
.gv-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.gv-step .d { font-family: var(--mono); font-size: .8125rem; color: var(--gold); letter-spacing: .08em; font-weight: 600; }
.gv-step h3 { margin: 6px 0; font-size: 1rem; }
.gv-step p { margin: 0; font-size: .875rem; color: var(--muted); }

/* ---------- Process section (5-step) — Worthy-style dark band ----------
   Navy band, large serif numerals joined by a thin rule, step cards below.
   Mobile: horizontal scroll-snap carousel. ≥900px: five equal columns. */
.gv-procsec {
	background:
		radial-gradient(90% 120% at 50% 130%, rgba(168, 132, 44, .22) 0%, transparent 60%),
		var(--ink);
	color: #F3EDDA;
	padding-top: 40px;
	padding-bottom: 44px;
}
.gv-procsec h2 { color: #fff; text-align: center; margin-bottom: 26px; }
.gv-procsec .gv-sub { color: #B9C1D6; }
.gv-procsec .gv-sub a, .gv-express a { color: var(--goldSoft); }
.gv-procwrap { position: relative; }
.gv-procnav {
	position: absolute;
	top: -58px;
	right: 0;
	display: flex;
	gap: 8px;
}
@media (max-width: 719px) { .gv-procnav { display: none; } }
.gv-procnav button {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(243, 237, 218, .4);
	background: transparent;
	color: #F3EDDA;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.gv-procnav button:hover { background: rgba(255, 255, 255, .1); border-color: var(--goldSoft); }
.gv-procnav button:disabled { opacity: .35; cursor: default; }
.gv-procbar {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78vw, 300px);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(243, 237, 218, .35) transparent;
}
.gv-procbar li {
	position: relative;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	scroll-snap-stop: always; /* one card per swipe, no fling-past */
	min-width: 0;
}
.gv-procbar .n {
	display: block;
	font-family: var(--serif);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1;
	color: #F3EDDA;
	padding-bottom: 12px;
	position: relative;
}
.gv-procbar li::before {
	/* thin rule joining the numerals, Worthy-style */
	content: "";
	position: absolute;
	top: 15px;
	left: 34px;
	right: -16px;
	height: 1px;
	background: rgba(243, 237, 218, .28);
}
.gv-procbar li:last-child::before { display: none; }
.gv-procbar li.on .n { color: var(--goldSoft); }
.gv-procbar li.on .n::after {
	content: "";
	position: absolute;
	left: 0; bottom: 6px;
	width: 26px; height: 2px;
	background: var(--goldSoft);
}
.gv-procbar .bd {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
	padding: 14px 16px 16px;
}
.gv-procbar li.on .bd { border-color: var(--goldSoft); }
.gv-procbar .bd b { display: block; font-family: var(--serif); font-size: 1.05rem; color: #fff; margin: 0 0 5px; }
.gv-procbar .bd p { margin: 0 0 12px; font-size: .875rem; line-height: 1.5; color: #B9C1D6; }
.gv-procbar .bd img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	margin-top: auto;
}
.gv-express {
	margin: 18px 0 0;
	font-size: .875rem;
	color: #B9C1D6;
	text-align: center;
}
/* On light pages nothing overrides — express line only ever renders inside
   .gv-procsec, which sets its palette above. */

/* ---------- Proof band ---------- */
.gv-proof { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .gv-proof { grid-template-columns: repeat(3, 1fr); } }
.gv-proof .g { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.gv-proof b { display: block; margin-bottom: 6px; }
.gv-proof p { margin: 0; font-size: .875rem; color: var(--muted); }

/* ---------- Trust grid ---------- */
.gv-trustgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .gv-trustgrid { grid-template-columns: 1fr 1fr; } }
.gv-tcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.gv-tcard h3 { margin: 0 0 8px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.gv-tcard .big { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.gv-tcard p { margin: 0; font-size: .875rem; color: var(--muted); }
/* "No walk-ins" callout — owner (2026-08-14): strictly a mail-in business,
   nobody should ever show up at the address. Red-accented so it can't be
   skimmed past. */
.gv-nowalk { background: #FAEFEB; border: 1px solid rgba(166, 61, 42, .3); border-left: 3px solid var(--bad); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.gv-tcard .gv-nowalk { color: var(--ink); }
.gv-nowalk b { color: var(--bad); }
.gv-workwith { display: flex; flex-wrap: wrap; gap: 8px; }
.gv-workwith i { font-style: normal; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .875rem; }

/* ---------- Recent purchases (real photos off the scale) ---------- */
.gv-recent { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 720px) { .gv-recent { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.gv-recent .item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gv-recent .item picture { display: block; }
.gv-recent .item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; }

/* Tap-to-zoom lightbox (assets/zoom.js) — full-screen photo on click/tap. */
.gv-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(11, 20, 38, .92); }
.gv-lightbox.open { display: flex; }
.gv-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .55); cursor: default; }
.gv-lightbox-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.gv-lightbox-close:hover { background: rgba(255, 255, 255, .3); }
@media (prefers-reduced-motion: no-preference) {
	.gv-lightbox.open img { animation: gv-zoomin .18s ease; }
	@keyframes gv-zoomin { from { transform: scale(.96); opacity: .5; } to { transform: scale(1); opacity: 1; } }
}
.gv-recent .bd { padding: 10px 12px 12px; }
/* Card captions use the site's body/serif faces, not the receipt mono —
   the mono read as a different design system here (owner, 2026-08-14). */
.gv-recent .what { font-size: .9375rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.gv-recent .fin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.gv-recent .chip { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: .75rem; color: var(--muted); max-width: 100%; }
.gv-recent .paid { font-family: var(--serif); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; color: var(--goldDeep); }
.gv-recent .note { font-size: .75rem; color: var(--muted); margin-top: 5px; line-height: 1.45; letter-spacing: .01em; }
/* Wall variant — larger photos, 3-up on desktop (the photos are the evidence). */
@media (min-width: 720px) { .gv-recent--wall { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
/* Teaser variant (homepage, 3 cards): a 2+1 grid left dead space on phones,
   so mobile becomes a swipe row with snap; desktop matches the wall's 3-up. */
@media (max-width: 719px) {
	.gv-recent--teaser { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.gv-recent--teaser::-webkit-scrollbar { display: none; }
	.gv-recent--teaser .item { flex: 0 0 74%; scroll-snap-align: start; }
}
@media (min-width: 720px) { .gv-recent--teaser { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
/* Teaser cards stay uniform height: the explanatory note only appears on the
   full wall — its extra line was stretching every sibling card (2026-08-14). */
.gv-recent--teaser .note { display: none; }
/* Collapsed wall: first rows only until the visitor asks for the rest. */
.gv-recent .item.is-more { display: none; }
.gv-recent.expanded .item.is-more { display: block; }
.gv-morewrap { text-align: center; margin-top: 18px; }
.gv-showmore { font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: var(--panel); border: 1.5px solid var(--gold); border-radius: 999px; padding: 11px 26px; cursor: pointer; }
@media (hover: hover) { .gv-showmore:hover { background: var(--goldTint); } }

/* ---------- Founder ---------- */
.gv-founder { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
@media (min-width: 640px) { .gv-founder { flex-direction: row; text-align: left; gap: 26px; } }
.gv-founder .ph { flex: 0 0 104px; width: 104px; height: 104px; border-radius: 50%; background: linear-gradient(135deg, var(--goldTint), var(--gold)); background-image: url("assets/img/steve-madar.jpg"); background-size: cover; background-position: center top; border: 3px solid var(--panel); box-shadow: var(--shadow); }
.gv-founder blockquote { margin: 0 0 10px; font-size: 1.25rem; font-family: var(--serif); font-style: italic; color: var(--ink); }
.gv-founder-origin { margin: 0 0 12px; font-size: .95rem; font-style: italic; color: var(--muted); max-width: 62ch; }
.gv-namestory { max-width: 68ch; font-size: 1.05rem; }
.gv-founder cite { font-style: normal; font-size: .875rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.gv-ctaband { text-align: center; }
.gv-ctaband h2 { margin-bottom: 8px; }
.gv-ctaband .gv-sub { margin: 0 auto 18px; max-width: 480px; }

/* CTA-band placement of the Trustpilot stack (badge spacing lives on .gv-tpstack) */

/* ---------- FAQ ---------- */
.gv-faqsearch { display: flex; gap: 10px; margin-bottom: 22px; }
.gv-faqsearch input { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: .95rem; }
.gv-faq .grp { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 700; margin: 24px 0 8px; }
.gv-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 0 18px; }
.gv-faq details[open] { border-color: var(--gold); }
.gv-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: .95rem; }
.gv-faq details p { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.gv-faq details[hidden] { display: none; }

/* ---------- Hero (homepage) — centered & minimal (2026-08-12, Worthy ref) ---------- */
.gv-hero {
	background:
		radial-gradient(110% 100% at 50% 0%, var(--goldTint) 0%, transparent 60%),
		linear-gradient(180deg, #FBF8F1, var(--bg));
	border-bottom: 1px solid var(--line);
	padding: 46px 0 52px;
	text-align: center;
}
.gv-hero .wrap { max-width: 760px; }
@media (min-width: 860px) { .gv-hero { padding: 74px 0 80px; } }
.gv-hero h1 { font-size: clamp(2rem, 6.8vw, 3.4rem); line-height: 1.12; margin: 0 0 16px; color: var(--ink); }
.gv-hero h1 em { font-style: normal; color: var(--goldDeep); }
.gv-hero .lede { color: var(--muted); max-width: 56ch; margin: 0 auto 26px; font-size: 1.08rem; }
.gv-herolist {
	list-style: none;
	margin: 0 auto 26px;
	padding: 0;
	display: block;
	width: fit-content;
	text-align: left;
}
.gv-herolist li {
	position: relative;
	padding: 4px 0 4px 30px;
	font-size: 1.05rem;
	color: var(--muted);
}
.gv-herolist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--good);
	font-weight: 700;
}
.gv-hero .gv-cta { padding: 14px 38px; font-size: 1.05rem; }
.gv-ctanote { margin: 12px 0 0; font-size: .875rem; color: var(--muted); }
.gv-ctanote a { color: var(--muted); text-decoration: underline; }

/* ---------- The receipt (signature element) ---------- */
.gv-offer .sampletag {
	margin: -18px -20px 14px;
	background: var(--goldDeep);
	color: #fff;
	font-weight: 700;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	text-align: center;
	padding: 9px 12px;
	border-radius: var(--radius) var(--radius) 0 0;
}
.gv-offer {
	position: relative;
	background: var(--panel);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px 20px;
	box-shadow: 0 24px 60px rgba(30, 42, 74, .16);
	align-self: center;
}
.gv-offer .scalephoto {
	position: relative;
	height: 120px;
	border-radius: 8px;
	margin-bottom: 12px;
	background: linear-gradient(135deg, var(--cream), #D6BC6B);
	background-image: url("assets/img/hero-scale.jpg");
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.gv-offer .scalephoto::after {
	content: "your items on our scale, with every offer";
	position: absolute;
	inset: auto 0 0;
	padding: 26px 10px 7px;
	/* Scrim must carry the caption even when it wraps to two lines over a
	   bright photo (2026-08-13 iPhone review): darker, starts higher, plus a
	   text-shadow so every word reads regardless of what's behind it. */
	background: linear-gradient(transparent, rgba(20, 26, 43, .55) 35%, rgba(20, 26, 43, .92));
	color: #FFFFFF;
	text-shadow: 0 1px 3px rgba(10, 14, 26, .85);
	font-size: .8125rem;
	letter-spacing: .05em;
	font-family: var(--mono);
	line-height: 1.4;
}
.gv-offer .hd { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.gv-offer .hd b { font-size: .95rem; font-family: var(--serif); }
.gv-offer .hd span { font-size: .8125rem; color: var(--muted); font-family: var(--mono); }
.gv-offer table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gv-offer td { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.gv-offer td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.gv-offer .tot td { border-bottom: none; font-weight: 700; font-size: 1rem; padding-top: 10px; }
.gv-offer .tot td:last-child { color: var(--goldDeep); }
.gv-offer .note { font-size: .8125rem; color: var(--muted); margin-top: 10px; font-family: var(--sans); text-align: center; }
.gv-offer .acts { display: flex; gap: 10px; margin-top: 12px; }
.gv-offer .acts span { flex: 1; text-align: center; font-size: .8125rem; padding: 10px 4px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 519px) {
	/* nowrap pills exceed narrow phone width side by side — stack them */
	.gv-offer .acts { flex-direction: column; }
}
.gv-offer .acts .yes { background: var(--goldDeep); color: #fff; font-weight: 600; }
.gv-offer .acts .no { border: 1px solid var(--line); color: var(--muted); }

/* ---------- Guarantees ---------- */
.gv-guar { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .gv-guar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gv-guar { grid-template-columns: repeat(4, 1fr); } }
.gv-guar .g { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.gv-guar b { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 1.02rem; }
.gv-guar p { margin: 0; font-size: .875rem; color: var(--muted); }

/* ---------- Comparison table ---------- */
.gv-comp td.y { color: var(--good); font-weight: 600; }
.gv-comp td.n { color: var(--muted); }
.gv-comp td:first-child { font-weight: 600; }
/* Navy header row + highlighted GoldVara column (2026-08-12 request) */
table.gv-comp thead th { background: var(--ink); color: #fff; }
table.gv-comp thead th:nth-child(2) { background: var(--goldDeep); color: #fff; }
table.gv-comp tbody td:nth-child(2) { background: #EFE4C2; font-weight: 600; }
@media (max-width: 719px) {
	/* keep the sticky first column readable over the navy header */
	table.gv-comp thead th:first-child { background: var(--ink); }
}

/* ---------- Why Choose GoldVara (hero content relocated, 2026-08-12) ---------- */
/* Desktop: feats column is much shorter than the offer card — center it
   vertically so the two columns read as one aligned unit (owner, 2026-08-14). */
.gv-why { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 860px) { .gv-why { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.gv-why > * { min-width: 0; }
.gv-why .gv-offer { width: 100%; }
.gv-why .feats { display: flex; flex-direction: column; gap: 18px; }
.gv-why .f h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.15rem; }
.gv-why .f p { margin: 0; font-size: .95rem; color: var(--muted); }
.gv-why .f a { font-weight: 600; }

/* ---------- Partner logo row ---------- */
.gv-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: 22px;
}
.gv-logosec { margin-top: 26px; }
.gv-logosec .lbl { display: block; font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.gv-logosec .gv-logos { margin-top: 8px; }
/* Desktop: spread the marks evenly across the full row width */
@media (min-width: 720px) {
	.gv-logosec .gv-logos { justify-content: space-between; }
}
/* Mobile: 2×2 grid, every mark centered in its cell — flex-wrap staggered the
   marks because the text marks (Jewelers Mutual, GIA) are wider than the SVGs,
   which read as "scattered" on a phone (2026-08-13 iPhone review). */
@media (max-width: 719px) {
	.gv-logosec .lbl { text-align: center; }
	.gv-logosec .gv-logos {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		align-items: center;
		row-gap: 18px;
		column-gap: 12px;
	}
	.gv-logosec .gv-logos img { height: 17px; }
	.gv-logosec .gv-logos img.mid { height: 20px; }
	.gv-logosec .gv-logos img.tall { height: 22px; }
	.gv-logosec .gv-logos .txtmark { font-size: .95rem; text-align: center; line-height: 1.15; }
	.gv-logosec .gv-logos .txtmark small { margin-top: 1px; }
	.gv-logosec .gv-licbadge { grid-column: 1 / -1; justify-content: center; margin-top: 2px; }
}
.gv-logos img { height: 22px; width: auto; display: block; opacity: .9; }
.gv-logos img.mid { height: 26px; }
.gv-logos img.tall { height: 30px; }
.gv-logos .txtmark { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.gv-logos .txtmark small { display: block; font-family: var(--sans); font-weight: 400; font-size: .8125rem; color: var(--muted); letter-spacing: 0; }
/* Footer variant: monochrome white, Worthy-style */
.gv-footer .gv-logos { margin-top: 10px; gap: 14px 22px; }
.gv-footer .gv-logos img { filter: brightness(0) invert(1); opacity: .8; height: 19px; }
.gv-footer .gv-logos .txtmark { color: #fff; font-size: .85rem; }
.gv-footer .gv-logos .txtmark small { color: #B9C1D6; }

/* ---------- NYC DCWP license badge ---------- */
/* The standalone .gv-licrow wrapper was dropped 2026-08-19 with the homepage
   badge (owner call). The badge itself stays styled: goldvara_partner_logos()
   still renders it, and the footer variant below is live. */
.gv-licbadge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 6px 12px;
	background: var(--panel);
}
.gv-licbadge:hover { text-decoration: none; border-color: var(--gold); }
.gv-licbadge svg { width: 22px; height: 22px; fill: var(--goldDeep); flex: 0 0 22px; }
.gv-licbadge b { display: block; font-size: .875rem; }
.gv-licbadge small { display: block; font-size: .8125rem; color: var(--muted); }
.gv-footer .gv-licbadge { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; }
.gv-footer .gv-licbadge svg { fill: var(--goldSoft); }

/* ---------- BBB Accredited Business seal (live 2026-08-26) ---------- */
/* The seal art is a TRANSPARENT PNG with dark text (verified by decoding its
   alpha channel), so it reads fine on every light section but disappears on the
   navy footer. The footer rule below puts a white chip behind it. That is a
   background, not an alteration of the mark, which the agreement forbids: never
   recolour, crop, or overlay the seal itself. */
.gv-bbbseal { display: inline-block; line-height: 0; }
.gv-bbbseal img { display: block; max-width: 100%; height: auto; }
.gv-bbbseal:hover { text-decoration: none; }
/* Trust-page card: sits under the card copy. */
.gv-bbbseal.incard { margin-top: 12px; }
/* Centred under a CTA band or a proof grid. `width: fit-content` is what makes
   the auto margins centre it: the base rule is inline-block, which auto margins
   ignore, and How It Works is not a text-align:center section. */
.gv-bbbseal.standalone { display: block; width: fit-content; margin: 22px auto 0; }
/* Footer: white chip so the seal's dark text stays legible on navy.
   `width: fit-content` is required, not cosmetic: `.gv-footer .cols a` sets
   display:block, which stretched the chip to the full column and left ~128px of
   empty white beside the seal. */
.gv-footer .gv-bbbseal {
	width: fit-content;
	margin-top: 10px;
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
}
.gv-footer .gv-licbadge small { color: #B9C1D6; }
/* Footer license as a plain hyperlinked line (owner call 2026-08-13) */
.gv-footer .cols .gv-lictext {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	font-size: .8125rem;
	color: #B9C1D6;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gv-footer .cols .gv-lictext:hover { color: var(--goldSoft); }

/* ---------- Social icons ---------- */
/* Bare icons, no circles (2026-08-13 owner call — the bordered circles never
   rendered right on iPhone). Selector carries .gv-footer to outweigh the
   `.gv-footer .cols a { display: block }` rule that was breaking the layout. */
.gv-socialicons { display: flex; gap: 18px; margin-top: 14px; }
.gv-footer .cols .gv-socialicons a {
	display: inline-flex;
	margin: 0;
	padding: 0;
	line-height: 0; /* kills the baseline offset that nudged icons off-center */
	color: #D7DCE9;
}
.gv-socialicons a:hover { color: var(--goldSoft); text-decoration: none; }
.gv-socialicons svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* ---------- Trustpilot: styled badge + live TrustBox stack ---------- */
.gv-tpstack { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 18px; }
.gv-trustbox { width: 100%; max-width: 420px; }
.gv-trustbox .tp-mobile { display: none; }
@media (max-width: 719px) {
	.gv-trustbox .tp-desktop { display: none; }
	.gv-trustbox .tp-mobile { display: block; }
}
/* Fallback link (shows until/unless the TrustBox script paints the iframe) */
.gv-trustbox .trustpilot-widget > a { font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: block; text-align: center; }

/* ---------- Trustpilot badge (CSS build, 2026-08-12 owner-supplied reference) ---------- */
.gv-tpbadge {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ink);
}
.gv-tpbadge:hover { text-decoration: none; }
.gv-tpbadge .word {
	font-size: 1.35rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--ink);
}
.gv-tpbadge .stars { display: inline-flex; gap: 3px; }
.gv-tpbadge .stars i {
	position: relative;
	width: 28px; height: 28px;
	background: #00B67A;
	display: inline-block;
}
.gv-tpbadge .stars i::after {
	content: "★";
	position: absolute;
	inset: 0;
	color: #fff;
	font-size: 19px;
	line-height: 28px;
	text-align: center;
	font-style: normal;
}
.gv-tpbadge .stars i.half { background: linear-gradient(90deg, #00B67A 50%, #DCDCE6 50%); }
.gv-tpbadge .stars i.p70 { background: linear-gradient(90deg, #00B67A 70%, #DCDCE6 70%); }
.gv-tpbadge .score { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.gv-tpbadge .tpmark {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	font-family: var(--sans);
}
.gv-tpbadge .tpmark .star { color: #00B67A; font-size: 1.35rem; line-height: 1; }
@media (max-width: 519px) {
	.gv-tpbadge { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* ---------- Final CTA band ---------- */
.gv-final {
	background:
		radial-gradient(100% 120% at 50% 120%, rgba(168, 132, 44, .28) 0%, transparent 60%),
		var(--ink);
	color: #F3EDDA;
	text-align: center;
	padding: 56px 20px;
}
.gv-final h2 { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 10px; color: #fff; }
.gv-final p { color: #B9C1D6; margin: 0 auto 24px; max-width: 52ch; }
.gv-final .gv-cta { margin: 6px 6px 0; }
.gv-final .gv-cta.ghost { color: #F3EDDA !important; border-color: var(--goldSoft); }
.gv-final .gv-cta.ghost:hover { background: rgba(201, 162, 39, .15); }

/* ---------- Editorial article ---------- */
.gv-article { max-width: 70ch; }
.gv-article p, .gv-article li { font-size: 1rem; line-height: 1.7; }
.gv-article h2 { margin-top: 28px; }
.gv-article h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.gv-article ul { margin: 0 0 16px; padding-left: 22px; }
.gv-article li { margin: 6px 0; }
.gv-byline { font-size: .875rem; color: var(--muted); margin: 14px 0 0; }
.gv-byline b { color: var(--ink); }

/* ---------- Review quote cards ---------- */
.gv-quotes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .gv-quotes { grid-template-columns: repeat(3, 1fr); } }
.gv-quote { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.gv-quote blockquote { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; }
.gv-quote figcaption { font-size: .8125rem; color: var(--muted); }

/* ---------- Press strip ---------- */
.gv-press {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding: 14px 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	justify-content: center;
}
.gv-press .lbl { font-size: .8125rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.gv-press a { color: var(--ink); border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 16px; font-size: .875rem; letter-spacing: .04em; }
.gv-press a:hover { text-decoration: none; border-color: var(--gold); }

/* ---------- Get Kit / Estimate conversion pages ---------- */
.gv-getkit { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 860px) { .gv-getkit { grid-template-columns: 1.25fr .75fr; } }
/* Grid items default to min-width:auto, so a wide intrinsic child (e.g. a
   <select> whose longest option can't wrap) blows the card past the viewport
   on phones. Let the cards shrink; inner controls already cap at 100%. */
.gv-getkit > * { min-width: 0; }
.gv-formcard select { max-width: 100%; }
.gv-formcard {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 20px;
	box-shadow: var(--shadow);
}
@media (min-width: 720px) { .gv-formcard { padding: 28px; } }
.gv-rail { display: flex; flex-direction: column; gap: 16px; }
.gv-railphoto { margin: 0; }
.gv-railphoto img { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.gv-mini .row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .875rem; }
.gv-mini .row:last-child { border-bottom: 0; }
.gv-mini .row i { font-style: normal; font-family: var(--mono); font-size: .8125rem; color: var(--gold); flex: 0 0 58px; padding-top: 2px; letter-spacing: .05em; }
.gv-mini .row span { color: var(--muted); }

/* Gravity Forms restyle — scoped to the form card */
.gv-formcard .gform_wrapper form { margin: 0; }
.gv-formcard .gform_heading, .gv-formcard .gform_title, .gv-formcard .gform_description { display: none; }
/* Specificity matters here. Gravity Forms' theme.min.css carries
   `.gform_wrapper.gravity-theme .gfield_label { font-size: 16px; font-weight: 700 }`
   at 0,3,0, which outranks a plain `.gv-formcard .gfield_label`. The legend selector
   was already specific enough to win; a plain <label> was not, so the one visible
   text-field label on the kit form ("Your current address") rendered 16px/700 against
   13px/600 on every section header around it. Scoping through .gform_fields takes this
   to 0,4,0 and wins regardless of stylesheet order. */
.gv-formcard .gform_wrapper .gform_fields .gfield_label,
.gv-formcard .gform_wrapper legend.gfield_label {
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 6px;
}
.gv-formcard .gfield_required { color: var(--gold); }
.gv-formcard input[type="text"],
.gv-formcard input[type="email"],
.gv-formcard input[type="tel"],
.gv-formcard input[type="number"],
.gv-formcard select,
.gv-formcard textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	color: var(--ink);
	font-size: 16px; /* prevents iOS zoom-on-focus */
	font-family: var(--sans);
}
/* A textarea ships with `resize: both`, so its corner handle can be dragged sideways.
   On a phone that handle sits exactly where your thumb lands as you finish typing, and
   widening it past the card makes the WHOLE PAGE scroll left and right. Reported from an
   iPhone 14 on the "what are you sending" field and reproduced: dragging it to 520px took
   the document to 559px against a 390px viewport. Vertical resizing is useful, so it stays;
   only the horizontal axis is locked. max-width is belt and braces for a dragged width
   that survives in the inline style. */
.gv-formcard textarea { resize: vertical; max-width: 100%; }
/* iOS Safari zooms the entire page whenever a focused control renders below 16px, and it
   does NOT zoom back out on blur. The page is then wider than the screen and scrolls side
   to side, which is the "I can drag the page sideways after typing in a field" report. It
   affects both forms and every iPhone, not one device.
   The rule above already asks for 16px and says why, but Gravity Forms' theme.min.css
   carries `.gform_wrapper.gravity-theme input[type="..."] { font-size: 15px }` at 0,3,1 and
   wins, so every field was rendering at 15px. Scoping through .gform_fields reaches 0,4,1.
   Font size ONLY. The padding and border in the block above are deliberately left losing to
   Gravity Forms, because the approved look is built on GF's 8px padding and raising the
   whole block would make every field taller. */
.gv-formcard .gform_wrapper .gform_fields input[type="text"],
.gv-formcard .gform_wrapper .gform_fields input[type="email"],
.gv-formcard .gform_wrapper .gform_fields input[type="tel"],
.gv-formcard .gform_wrapper .gform_fields input[type="number"],
.gv-formcard .gform_wrapper .gform_fields input[type="password"],
.gv-formcard .gform_wrapper .gform_fields input[type="url"],
.gv-formcard .gform_wrapper .gform_fields select,
.gv-formcard .gform_wrapper .gform_fields textarea { font-size: 16px; }
.gv-formcard input:focus, .gv-formcard select:focus, .gv-formcard textarea:focus {
	outline: 2px solid var(--gold);
	outline-offset: 0;
	border-color: var(--gold);
}
/* Same problem, different rule. Radio and address fields render as <fieldset>, and
   Gravity Forms' basic.min.css zeroes every fieldset margin, so those sections sat 16px
   apart while text fields sat 34px. Every field now runs on one rhythm. */
.gv-formcard .gform_wrapper .gform_fields .gfield { margin-bottom: 18px; }
.gv-formcard .gchoice, .gv-formcard .gfield_radio > div, .gv-formcard .gfield_checkbox > div { margin: 6px 0; }
.gv-formcard .gchoice label { font-size: .92rem; }
.gv-formcard input[type="radio"], .gv-formcard input[type="checkbox"] { accent-color: var(--goldDeep); width: auto; }
.gv-formcard .gform_button, .gv-formcard .gform_next_button, .gv-formcard .gform_previous_button {
	background: var(--goldDeep);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px 22px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
}
.gv-formcard .gform_button:hover, .gv-formcard .gform_next_button:hover { background: var(--gold); }
.gv-formcard .gform_previous_button {
	background: transparent;
	color: var(--goldDeep);
	border: 1px solid var(--gold);
	width: auto;
	margin-right: 10px;
}
.gv-formcard .gform_footer, .gv-formcard .gform_page_footer { display: flex; align-items: center; margin-top: 8px; }
.gv-formcard .gform_footer .gform_button { flex: 1; }
.gv-formcard .gform_page_footer .gform_next_button { flex: 1; }
/* Narrow phones: stack the footer buttons, primary action on top.
   A submit input cannot wrap its label, so "Send My Shipping Kit" has a hard
   minimum width that flex-shrink cannot go below. Paired with "Previous" the two
   stop fitting at about 506px and the submit runs off the card — measured 71px
   past it at iPhone 14 width, which also gave the page a horizontal scrollbar.
   519px is the breakpoint the rest of this form card already uses.
   Do NOT solve this with flex-wrap: the buttons carry width:100%, so wrapping
   makes them claim a full row each and they stop sitting side by side on desktop. */
@media (max-width: 519px) {
	.gv-formcard .gform_footer, .gv-formcard .gform_page_footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}
	.gv-formcard .gform_footer .gform_button,
	.gv-formcard .gform_page_footer .gform_button,
	.gv-formcard .gform_page_footer .gform_next_button,
	.gv-formcard .gform_page_footer .gform_previous_button {
		flex: 0 0 auto;
		width: 100%;
		margin-right: 0;
	}
}
.gv-formcard .gf_progressbar_wrapper, .gv-formcard .gf_page_steps { margin-bottom: 20px; }
.gv-formcard .gf_progressbar { background: var(--cream); border-radius: 999px; height: 8px; overflow: hidden; }
.gv-formcard .gf_progressbar_percentage { background: var(--goldDeep); height: 100%; border-radius: 999px; }
.gv-formcard .gf_progressbar_title { font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gv-formcard .gf_page_steps { display: flex; flex-wrap: wrap; gap: 14px 18px; border: 0; }
@media (max-width: 519px) {
	/* Narrow phones: numbers stay for every step, label only on the active
	   one — the 3-step form's labels otherwise wrap into a 4-line pile. */
	.gv-formcard .gf_step:not(.gf_step_active) .gf_step_label { display: none; }
	.gv-formcard .gf_page_steps { gap: 10px; align-items: center; }
}
.gv-formcard .gf_page_steps .gf_step.gf_step { display: flex; align-items: center; gap: 8px; width: auto; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.gv-formcard .gf_page_steps .gf_step_number.gf_step_number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font-family: var(--mono); font-size: .8125rem; }
.gv-formcard .gf_page_steps .gf_step.gf_step_active { color: var(--ink); font-weight: 600; }
.gv-formcard .gf_page_steps .gf_step_active .gf_step_number.gf_step_number { background: var(--goldDeep); border-color: var(--goldDeep); color: #fff; }
/* Completed step: GF paints a 40px absolute slate circle + check over the
   number — resize both pseudos to sit exactly on our 26px pill. */
.gv-formcard .gform_wrapper .gf_page_steps .gf_step_completed .gf_step_number::before {
	width: 26px; height: 26px;
	inset: -1px auto auto -1px;
	border-radius: 50%;
	background: var(--good);
}
.gv-formcard .gform_wrapper .gf_page_steps .gf_step_completed .gf_step_number::after {
	width: 14px; height: 14px;
	inset: 5px auto auto 5px;
}
.gv-formcard #field_7_1 { display: none; }

/* /request-kit/ address block (field 7_20). Google autocomplete fills these from the
   single-line "Your current address" box above, so showing street/city/state/ZIP again
   is pure repetition. Only the apartment line stays, because autocomplete cannot supply
   a unit number.
   Hide with CSS, never with Gravity Forms' own per-input "hide": that removes the input
   from the page entirely and the autocomplete plugin is then filling nothing, which
   silently empties the address on every submission. Verified live 2026-08-23.
   The field previously carried a class "hidefield" from the old Elementor site that this
   theme never defined, which is why the block reappeared at cutover. */
.gv-formcard #field_7_20 > .gfield_label,
.gv-formcard #field_7_20 .ginput_address_line_1,
.gv-formcard #field_7_20 .ginput_address_city,
.gv-formcard #field_7_20 .ginput_address_state,
.gv-formcard #field_7_20 .ginput_address_zip { display: none; }
/* The apartment box carries a placeholder instead, matching every other field
   on this form (hidden label + placeholder). A sub-label sitting UNDER an empty
   box reads as a caption for nothing. */
.gv-formcard #field_7_20 .ginput_address_line_2 > label { display: none; }
/* The address line and the apartment box are one thought, so they sit closer to each
   other than to the next question. The address field's own run-out is handled by the
   general .gfield rule above. */
.gv-formcard #field_7_19 { margin-bottom: 0; }
.gv-formcard .gfield--type-radio .gfield_radio { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .gv-formcard .gfield--type-radio .gfield_radio { grid-template-columns: 1fr 1fr; } }
.gv-formcard .gfield--type-radio .gchoice { margin: 0; position: relative; }
.gv-formcard .gfield--type-radio .gchoice label.gform-field-label {
	/* .gform-field-label bump outranks GF theme's inline-block choice label */
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 13px 15px;
	cursor: pointer;
	font-weight: 600;
	background: var(--bg);
}
/* Pin the hidden radio inside its (position:relative) card so focusing it on
   label-click never scrolls the page to the document top. */
.gv-formcard .gfield--type-radio .gchoice input { position: absolute; opacity: 0; top: 0; left: 0; }
.gv-formcard .gfield--type-radio .gchoice input:checked + label,
.gv-formcard .gfield--type-radio .gchoice:has(input:checked) label {
	border-color: var(--goldDeep);
	background: var(--goldTint);
	outline: 1px solid var(--goldDeep);
}
.gv-formcard .gfield--type-radio .gchoice input:focus-visible + label,
.gv-formcard .gfield--type-radio .gchoice:has(input:focus-visible) label { outline: 2px solid var(--gold); }
/* Multifile upload dropzone — GF renders a bare div + native button */
.gv-formcard .gform_wrapper .gform_drop_area.gform_drop_area {
	border: 1.5px dashed var(--gold);
	border-radius: 10px;
	background: var(--bg);
	padding: 26px 16px;
	text-align: center;
}
.gv-formcard .gform_drop_instructions {
	display: block;
	color: var(--muted);
	font-size: .9rem;
	margin-bottom: 10px;
}
.gv-formcard .gform_button_select_files {
	background: transparent;
	color: var(--goldDeep);
	border: 1px solid var(--gold);
	border-radius: 999px;
	padding: 11px 22px;
	font: 600 .95rem var(--sans);
	cursor: pointer;
}
.gv-formcard .gform_button_select_files:hover { background: var(--goldTint); }
.gv-formcard .gfield .gform_fileupload_rules, .gv-formcard .gfield .gfield_description {
	font-size: .8125rem;
	color: var(--muted);
	padding: 6px 0 0;
}
.gv-formcard .ginput_preview { font-size: .875rem; }
.gv-formcard .gform_validation_errors, .gv-formcard .gfield_validation_message, .gv-formcard .validation_message {
	color: var(--bad);
	font-size: .875rem;
	background: none;
	border: 0;
	padding: 4px 0 0;
}
.gv-formcard .gform_validation_errors { border: 1px solid var(--bad); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.gv-formcard .gform_confirmation_message { font-size: 1.05rem; }

/* ---------- Generic content ---------- */
.gv-content { padding-top: 30px; padding-bottom: 30px; }

/* ---------- Motion (2026-08-10 — restrained by design) ----------
   Scroll-reveal only applies under html.gv-motion, which the inline head
   script adds ONLY when IntersectionObserver exists AND the user has not
   asked for reduced motion. No JS / reduced motion ⇒ everything is simply
   visible. The global prefers-reduced-motion rule at the top of this file
   additionally kills every transition as a second guard. */
html.gv-motion .gv-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s ease;
	transition-delay: var(--gv-d, 0ms);
}
html.gv-motion .gv-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media print {
	html.gv-motion .gv-reveal { opacity: 1; transform: none; }
}

/* Hover lift — pointer devices only, so touch scrolling never triggers it. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gv-cat, .gv-step, .gv-kit, .gv-tcard, .gv-quote,
	.gv-recent .item, .gv-guar .g, .gv-proof .g {
		transition: transform .25s ease, box-shadow .25s ease;
	}
	.gv-cat:hover, .gv-step:hover, .gv-kit:hover, .gv-tcard:hover,
	.gv-quote:hover, .gv-recent .item:hover, .gv-guar .g:hover, .gv-proof .g:hover {
		transform: translateY(-3px);
		box-shadow: 0 16px 40px rgba(30, 42, 74, .13);
	}
	.gv-cat .img { transition: transform .45s ease; }
	.gv-cat:hover .img { transform: scale(1.04); }
	.gv-cta { transition: background-color .2s ease, transform .2s ease; }
	.gv-cta:hover { transform: translateY(-1px); }
	.gv-cta:active { transform: none; }
	.gv-recent .item img { transition: transform .45s ease; }
	.gv-recent .item:hover img { transform: scale(1.03); }
}

/* ---------------------------------------------------------------------------
   Gravity Forms email typo hint (assets/email-suggest.js). Appears under an
   email field only when the typed domain matches a known misspelling; the
   correction is never applied unless the customer clicks it.
   --------------------------------------------------------------------------- */
.gv-email-hint {
	margin-top: 6px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.4;
	color: var(--muted);
}

.gv-email-hint__accept {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--gold);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.gv-email-hint__accept:hover,
.gv-email-hint__accept:focus-visible {
	color: var(--ink);
}