/* =============================================================
   Components — product cards, archetypes, comparisons, FAQ
   ============================================================= */

/* ---------- Editor's Picks ---------- */
.picks-grid {
	display: grid; gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	margin-bottom: 40px;
}
.product-card { padding: 0; overflow: hidden; transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -22px rgba(0,0,0,0.7); }
.pc-media { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(11,110,79,0.4), rgba(6,70,99,0.6)); display: grid; place-items: center; overflow: hidden; }
.pc-image-placeholder { color: rgba(255,255,255,0.3); }
.pc-badge {
	position: absolute; top: 14px; left: 14px;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(244,211,94,0.95); color: #1c1402;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 4px 14px -4px rgba(244,211,94,0.6);
}
.pc-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.pc-rating-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rating { color: var(--coral-gold); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.rating .star { color: var(--coral-gold); }
.rating .empty { color: rgba(244,211,94,0.3); }
.rating .score { color: var(--text-mute); margin-left: 6px; font-size: 13px; }
.pc-cat { color: var(--text-mute); font-size: 12px; }
.pc-title { font-size: 20px; margin-bottom: 12px; color: var(--white); }
.pc-specs { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 14px; padding: 12px; background: rgba(0,0,0,0.18); border-radius: 10px; font-size: 13px; }
.pc-specs > div { display: flex; justify-content: space-between; gap: 12px; }
.pc-specs dt { color: var(--text-mute); margin: 0; }
.pc-specs dd { margin: 0; color: var(--text); text-align: right; }

.pc-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pc-proscons h4 { font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; color: var(--text-mute); }
.pc-proscons ul { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.pc-proscons .pros li::before { content: '✓ '; color: var(--success); font-weight: 700; }
.pc-proscons .cons li::before { content: '× '; color: var(--danger); font-weight: 700; }
.pc-note { font-size: 13px; font-style: italic; color: var(--text); margin: 12px 0; padding: 12px; background: rgba(244,211,94,0.06); border-left: 3px solid var(--coral-gold); border-radius: 4px; }
.pc-byline { display: block; font-style: normal; color: var(--text-mute); font-size: 11px; margin-top: 6px; letter-spacing: .05em; }
.pc-actions { display: flex; gap: 8px; margin-top: auto; }
.pc-actions .btn-amazon { flex: 1; }
.btn-compare { flex-shrink: 0; }

/* ---------- Tank archetype cards ---------- */
.explorer-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }
.filter-pill {
	padding: 9px 16px; border-radius: 999px; font-size: 13px;
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	transition: all .2s; cursor: pointer;
}
.filter-pill:hover { background: var(--surface-2); }
.filter-pill.is-active {
	background: linear-gradient(135deg, var(--coral-gold), #ffb347);
	color: #1c1402; border-color: rgba(244,211,94,0.6);
	box-shadow: 0 6px 18px -8px rgba(244,211,94,0.5);
}
.archetype-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.archetype-card { padding: 24px; transition: transform .3s, box-shadow .3s; }
.archetype-card:hover { transform: translateY(-4px); }
.ac-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ac-badge {
	padding: 5px 11px; border-radius: 999px; background: rgba(11,110,79,0.25);
	color: #6ed3a8; border: 1px solid rgba(11,110,79,0.45);
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ac-size { color: var(--coral-gold); font-weight: 600; font-size: 13px; }
.ac-name { font-size: 22px; margin-bottom: 6px; color: var(--white); }
.ac-tagline { color: var(--text-mute); font-size: 14px; margin-bottom: 16px; }
.ac-specs { display: grid; gap: 8px; padding: 12px; background: rgba(0,0,0,0.18); border-radius: 10px; font-size: 12.5px; margin: 0 0 14px; }
.ac-specs > div { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.ac-specs dt { color: var(--text-mute); margin: 0; }
.ac-specs dd { margin: 0; color: var(--text); }
.ac-equip { margin-bottom: 14px; }
.ac-equip summary { cursor: pointer; padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 13px; font-weight: 600; }
.ac-equip ul { list-style: none; padding: 12px; margin: 0; font-size: 13px; }
.ac-equip li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.ac-equip svg { color: var(--marine-green); flex-shrink: 0; }
.ac-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Comparison tables ---------- */
.comparison-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.cmp-tab {
	padding: 10px 18px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	font-size: 13px; font-weight: 500; transition: all .2s;
}
.cmp-tab.is-active {
	background: linear-gradient(135deg, var(--marine-green), #0e8a63);
	color: var(--white); border-color: rgba(11,110,79,0.6);
}
.cmp-panel { display: none; }
.cmp-panel.is-active { display: block; }
.cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.cmp-table {
	width: 100%; min-width: 760px; border-collapse: collapse;
	padding: 0; overflow: hidden;
}
.cmp-table th {
	text-align: left; padding: 14px 16px;
	background: rgba(255,255,255,0.04); color: var(--text-mute);
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	border-bottom: 1px solid var(--border);
	position: sticky; top: 0; backdrop-filter: blur(10px);
}
.cmp-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; vertical-align: middle; }
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table tr.row-best { background: linear-gradient(90deg, rgba(244,211,94,0.08), transparent); }
.cmp-table tr.row-best td:first-child { box-shadow: inset 3px 0 0 var(--coral-gold); }
.row-pill {
	display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
	background: var(--coral-gold); color: #1c1402; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.cmp-icon { font-size: 18px; line-height: 1; }
.cmp-yes { color: var(--success); }
.cmp-no { color: var(--text-dim); }
.cmp-partial { color: var(--warning); }

@media (max-width: 768px) {
	.cmp-table { min-width: unset; }
	.cmp-table thead { display: none; }
	.cmp-table tr { display: block; padding: 14px; border-bottom: 1px solid var(--border); }
	.cmp-table td { display: flex; justify-content: space-between; padding: 6px 0; border: 0; font-size: 13px; }
	.cmp-table td::before { content: attr(data-label); color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 12px; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq-item {
	padding: 0; transition: border-color .2s;
}
.faq-item summary {
	list-style: none; cursor: pointer; padding: 20px 24px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-weight: 600; font-size: 16px; color: var(--white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { display: grid; place-items: center; color: var(--coral-gold); transition: transform .25s; flex-shrink: 0; }
.faq-item[open] .faq-toggle { transform: rotate(180deg); }
.faq-a { padding: 0 24px 22px; color: var(--text-mute); margin: 0; }

/* ---------- Newsletter ---------- */
.newsletter-card {
	padding: 56px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
	position: relative;
}
.nc-glow {
	position: absolute; top: -40%; right: -10%; width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(244,211,94,0.20), transparent 65%);
	pointer-events: none;
}
.nc-copy h2 { font-size: clamp(26px, 3.2vw, 34px); color: var(--white); }
.nc-copy p { color: var(--text-mute); font-size: 16px; }
.nc-bullets { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.nc-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.nc-bullets svg { color: var(--marine-green); flex-shrink: 0; }
.nc-form { display: flex; flex-direction: column; gap: 10px; position: relative; }
.nc-form input {
	padding: 16px 20px; border-radius: 12px;
	background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); font-size: 15px;
}
.nc-form input:focus { outline: none; border-color: var(--coral-gold); }
@media (max-width: 768px) {
	.newsletter-card { grid-template-columns: 1fr; padding: 36px 28px; }
}

/* ---------- Trust section ---------- */
.trust-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.trust-card { padding: 26px; }
.trust-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(11,110,79,0.3), rgba(244,211,94,0.18)); color: var(--coral-gold); margin-bottom: 14px; }
.trust-card h3 { font-size: 18px; color: var(--white); margin-bottom: 8px; }
.trust-card p { color: var(--text-mute); font-size: 14px; margin: 0; }
.updated-stamp {
	margin-top: 36px; text-align: center; font-size: 13px; color: var(--text-mute);
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
	background: rgba(11,110,79,0.15); border-radius: 999px; border: 1px solid rgba(11,110,79,0.3);
}
.us-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--marine-green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---------- Article / single ---------- */
.article-hero {
	padding: 64px 0 36px;
	background: linear-gradient(180deg, rgba(11,110,79,0.18), transparent);
	border-bottom: 1px solid var(--border);
}
.breadcrumbs { color: var(--text-mute); font-size: 13px; margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-mute); }
.breadcrumbs a:hover { color: var(--coral-gold); }
.article-title { font-size: clamp(30px, 4.5vw, 50px); color: var(--white); max-width: 820px; }
.article-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-mute); font-size: 13.5px; }
.article-body-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 56px; padding: 56px 0; }
.article-body { max-width: 760px; }
.article-feature { margin: 0 0 28px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.prose { font-size: 17px; line-height: 1.75; color: var(--text); }
.prose h2 { margin-top: 2em; font-size: 28px; color: var(--white); }
.prose h3 { margin-top: 1.6em; font-size: 22px; color: var(--white); }
.prose a { color: var(--coral-gold); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--coral-gold); padding: 8px 0 8px 22px; margin: 1.5em 0; color: var(--text-mute); font-style: italic; }
.prose code { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.article-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; align-self: start; }
.sidebar-quiz, .sidebar-pick { padding: 22px; }
.sidebar-quiz h3, .sidebar-pick h4 { font-size: 17px; color: var(--white); }
.sidebar-quiz p, .sidebar-pick p { color: var(--text-mute); font-size: 13.5px; }

@media (max-width: 980px) {
	.article-body-wrap { grid-template-columns: 1fr; }
	.article-sidebar { position: static; }
}

/* ---------- Inline product (shortcode) ---------- */
.inline-product { padding: 22px; margin: 24px 0; }
.inline-product h4 { font-size: 19px; color: var(--white); margin-top: 8px; }
.inline-product p { color: var(--text-mute); font-size: 14px; }

/* ---------- Post grid ---------- */
.post-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.post-card { padding: 0; overflow: hidden; transition: transform .25s; }
.post-card:hover { transform: translateY(-4px); }
.pc-thumb { display: block; aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(11,110,79,0.4), rgba(6,70,99,0.5)); }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pc-thumb-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,0.3); }
.post-card .pc-body { padding: 20px; }
.post-card .pc-meta { font-size: 12px; color: var(--text-mute); }
.post-card .pc-title { font-size: 19px; margin: 8px 0 10px; }
.post-card .pc-title a { color: var(--white); }
.post-card .pc-title a:hover { color: var(--coral-gold); }
.post-card .pc-excerpt { color: var(--text-mute); font-size: 14px; }
.post-card .pc-more { color: var(--coral-gold); font-weight: 600; font-size: 13px; }

.archive-header { text-align: center; margin-bottom: 40px; }
.archive-title { font-size: clamp(28px, 4vw, 42px); color: var(--white); }
.archive-desc { color: var(--text-mute); max-width: 640px; margin: 12px auto 0; }
.search-bar { display: flex; gap: 10px; padding: 14px; max-width: 640px; margin: 0 auto 32px; }
.search-bar input { flex: 1; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); }

.pagination { margin-top: 40px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.pagination .current { background: var(--coral-gold); color: #1c1402; border-color: var(--coral-gold); }

/* ---------- 404 ---------- */
.error-section { padding: 80px 0; }
.error-stack { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.error-product--top {
	padding: 28px 32px;
	background: linear-gradient(135deg, rgba(244,211,94,0.16), rgba(11,110,79,0.12));
	border-color: rgba(244,211,94,0.35);
	box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6);
}
.error-product h2 { font-size: 24px; color: var(--white); margin-top: 12px; }
.error-product p { color: var(--text-mute); font-size: 14.5px; }
.ep-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 14px; background: rgba(0,0,0,0.20); border-radius: 10px; margin: 14px 0; font-size: 13px; }
.ep-specs > div { display: flex; flex-direction: column; gap: 2px; }
.ep-specs dt { color: var(--text-mute); margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ep-specs dd { margin: 0; color: var(--text); font-weight: 600; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.error-copy { padding: 8px 0; }
.error-copy h1 { font-size: clamp(30px, 4.5vw, 44px); color: var(--white); }
.error-copy .eyebrow { margin-bottom: 12px; }
.error-search { display: flex; gap: 10px; padding: 14px; margin: 18px 0 0; }
.error-search input { flex: 1; padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); }
.error-recovery { padding: 28px 32px; }
.error-recovery h3 { color: var(--white); font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.error-recovery h3:not(:first-child) { margin-top: 22px; }
.error-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill {
	padding: 8px 14px; border-radius: 999px; background: var(--surface);
	border: 1px solid var(--border); color: var(--text); font-size: 13px;
}
.cat-pill:hover { background: var(--surface-2); border-color: rgba(244,211,94,0.4); color: var(--coral-gold); }
.error-links { list-style: none; padding: 0; margin: 0; }
.error-links li { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.error-links li:last-child { border-bottom: 0; }
.error-links li a { color: var(--text); font-weight: 500; }
.error-links li a:hover { color: var(--coral-gold); }
.error-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Misc ---------- */
.bullet-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.bullet-list li { padding-left: 24px; position: relative; color: var(--text); }
.bullet-list li::before { content: '✦'; position: absolute; left: 0; color: var(--coral-gold); }

/* ---------- Reef Tools Hub ---------- */
.tools-cat-head {
	font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--coral-gold); font-family: var(--font-sans); font-weight: 700;
	margin: 36px 0 18px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.tools-hub-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tool-hub-card { padding: 22px; display: flex; gap: 16px; align-items: flex-start; transition: transform .25s, box-shadow .25s; }
.tool-hub-card:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -20px rgba(0,0,0,0.6); color: var(--text); }
.thc-icon { font-size: 32px; line-height: 1; padding-top: 4px; }
.thc-body h3 { color: var(--white); font-size: 17px; margin: 0 0 6px; }
.thc-body p { color: var(--text-mute); font-size: 13.5px; margin: 0 0 10px; }
.thc-cta { color: var(--coral-gold); font-weight: 600; font-size: 13px; }

/* ---------- Reef Glossary ---------- */
.glossary-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 14px 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px; position: sticky; top: 80px; z-index: 5; backdrop-filter: blur(12px); }
.glossary-jump a {
	display: inline-grid; place-items: center; min-width: 32px; height: 32px;
	border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text); padding: 0 8px;
	background: rgba(255,255,255,0.05); border: 1px solid var(--border);
}
.glossary-jump a:hover { background: rgba(244,211,94,0.15); color: var(--coral-gold); border-color: rgba(244,211,94,0.35); }
.glossary-letter { color: var(--coral-gold); font-family: var(--font-display); font-size: 28px; margin: 32px 0 10px; }
.glossary-list { padding: 22px 26px; }
.glossary-row { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.glossary-row:last-child { border-bottom: 0; }
.glossary-row dt { color: var(--white); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.glossary-row dd { color: var(--text-mute); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ---------- Kit Bundles ---------- */
.kits-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); margin-bottom: 30px; }
.kit-card { padding: 24px; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.kit-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(0,0,0,0.65); }
.kit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.kit-badge { padding: 5px 11px; border-radius: 999px; background: rgba(244,211,94,0.16); color: var(--coral-gold); border: 1px solid rgba(244,211,94,0.32); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kit-price { color: var(--marine-green); font-weight: 700; font-size: 13.5px; }
.kit-name { font-size: 21px; margin-bottom: 6px; color: var(--white); }
.kit-tagline { color: var(--text-mute); font-size: 14px; margin-bottom: 14px; }
.kit-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: rgba(0,0,0,0.18); border-radius: 8px; margin: 0 0 14px; font-size: 12px; }
.kit-meta > div { display: flex; flex-direction: column; gap: 2px; }
.kit-meta dt { color: var(--text-mute); margin: 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.kit-meta dd { color: var(--text); margin: 0; font-weight: 600; font-size: 13px; }
.kit-items { margin: 0 0 14px; }
.kit-items summary { cursor: pointer; padding: 10px 12px; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.kit-items[open] summary { background: rgba(255,255,255,0.06); }
.kit-items ul { list-style: none; padding: 12px; margin: 0; display: grid; gap: 6px; }
.kit-items li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; font-size: 13px; background: rgba(0,0,0,0.15); }
.kit-items .item-link { color: var(--coral-gold); display: grid; place-items: center; padding: 3px; border-radius: 4px; }
.kit-items .item-link:hover { background: rgba(244,211,94,0.12); }
.kit-actions { margin-top: auto; }
.kit-actions .btn-amazon { width: 100%; }

/* Legal / contact pages */
.container-narrow { max-width: 880px; margin-inline: auto; }
.legal-page { padding: 64px 0 96px; }
.legal-hero { text-align: left; margin-bottom: 32px; }
.legal-hero h1 { font-size: clamp(28px, 4vw, 44px); color: var(--white); }
.legal-hero p { color: var(--text-mute); font-size: 17px; max-width: 720px; }
.legal-body { padding: 36px 40px; }
.legal-body h2 { font-size: 22px; color: var(--white); margin-top: 1.6em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 17px; color: var(--white); margin-top: 1.4em; }
.legal-body code { background: rgba(244,211,94,0.10); color: var(--coral-gold); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.contact-form { display: grid; gap: 14px; }
.contact-form .field input, .contact-form .field select, .contact-form .field textarea {
	padding: 12px 14px; border-radius: 10px;
	background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text);
	font-size: 15px;
}
.contact-form textarea { resize: vertical; min-height: 140px; font-family: inherit; }
@media (max-width: 760px) {
	.contact-grid { grid-template-columns: 1fr; }
	.legal-body { padding: 24px 22px; }
}

.swag-badge {
	display: inline-block; padding: 4px 10px; border-radius: 6px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.badge-reef       { background: rgba(11,110,79,0.25); color: #6ed3a8; }
.badge-care-easy  { background: rgba(74,222,128,0.18); color: #4ade80; }
.badge-care-moderate { background: rgba(252,211,77,0.18); color: #fcd34d; }
.badge-care-advanced { background: rgba(255,107,107,0.18); color: #ff8a8a; }