/* ============================================================
   DICE PEPTIDES — CONTENT PAGES (loaded on pages, 404, cart, checkout,
   account, blog). Design System v1.0 tokens. Shared
   primitives (buttons, badges, fields, breadcrumb, product-card,
   product-grid, section-header, cta-band, newsletter, accordion,
   footer, nav) come from base.css and are NOT redefined here.
   ============================================================ */

/* ============ LEGAL / CONTENT PAGE ============ */
.legal-hero { padding-block: var(--sp-16) var(--sp-8); border-bottom: 1px solid var(--border-subtle); }
.legal-hero .breadcrumb { padding-top: 0; margin-bottom: var(--sp-5); }
.legal-hero__title { color: var(--text-primary); }
.legal-hero__updated { margin-top: var(--sp-5); font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.legal-hero__updated svg { width: 14px; height: 14px; color: var(--accent); }

.legal { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--sp-12); align-items: start; padding-block: var(--sp-12) var(--sp-20); }
.legal--no-toc { grid-template-columns: minmax(0,1fr); }

.toc { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
.toc__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 0 var(--sp-3) var(--sp-4); cursor: default; pointer-events: none; }
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary svg { width: 16px; height: 16px; display: none; transition: transform var(--dur-fast); }
.toc__nav { display: flex; flex-direction: column; gap: 2px; }
.toc__link { position: relative; display: block; padding: 8px var(--sp-3); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); border-left: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }
.toc__link:hover { color: var(--text-primary); }
.toc__link.is-active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }

.legal-content { max-width: 800px; }
.legal-content > h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); margin-top: var(--sp-12); margin-bottom: var(--sp-4); scroll-margin-top: calc(var(--nav-h) + var(--sp-6)); }
.legal-content > h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.legal-content p { color: var(--text-secondary); margin-bottom: var(--sp-4); line-height: 1.85; }
.legal-content ul, .legal-content ol { color: var(--text-secondary); margin: 0 0 var(--sp-4) var(--sp-6); line-height: 1.85; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: var(--sp-2); }
.legal-content a { color: var(--accent); font-weight: 500; transition: color var(--dur-fast); }
.legal-content a:hover { color: var(--accent-light); text-decoration: underline; }
.legal-content strong { color: var(--text-primary); font-weight: 600; }
.legal-content img { border-radius: var(--radius-md); margin: var(--sp-2) 0 var(--sp-6); }
.legal-content table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin: var(--sp-2) 0 var(--sp-6); }
.legal-content th { text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }
.legal-content td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }

/* Notice cards (author via reusable blocks / shortcode in content) */
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); margin: var(--sp-2) 0 var(--sp-6); font-size: 14px; line-height: 1.7; }
.notice svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.notice__title { font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 2px; }
.notice p { margin: 0; color: var(--text-secondary); }
.notice--support { background: var(--accent-dim); border: 1px solid rgba(30,72,196,0.28); }
.notice--support svg { color: var(--accent); }
.notice--warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); }
.notice--warning svg { color: var(--warning); }
.notice--important { background: var(--bg-surface); border: 1px solid var(--accent); }
.notice--important svg { color: var(--accent); }

/* ============ 404 ============ */
.nf-hero { text-align: center; padding-block: var(--sp-20) var(--sp-12); }
.nf-code { font-size: clamp(96px,20vw,180px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: var(--text-primary); position: relative; display: inline-block; }
.nf-code span { color: var(--accent); }
.nf-hero__title { margin-top: var(--sp-4); color: var(--text-primary); }
.nf-hero__sub { margin: var(--sp-4) auto 0; max-width: 48ch; }
.nf-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }
.nf-search { max-width: 560px; margin: var(--sp-10) auto 0; }
.nf-searchbar { position: relative; display: flex; gap: var(--sp-2); }
.nf-searchbar__field { flex: 1; position: relative; }
.nf-searchbar__field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.nf-searchbar__field .field { padding-left: 46px; height: 52px; font-size: 15px; }
.nf-searchbar .btn { height: 52px; }

.link-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); }
.link-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.link-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.link-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); }
.link-card__icon svg { width: 20px; height: 20px; }
.link-card__name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.link-card__meta { font-size: 12px; color: var(--text-muted); margin-top: -8px; }

/* ============ GENERIC PAGE HERO (More pages: FAQ, Contact, Affiliate) ============ */
.page-hero { padding-block: var(--sp-20) var(--sp-12); text-align: center; }
.page-hero__kicker { display: block; margin-bottom: var(--sp-5); }
.page-hero__title { color: var(--text-primary); max-width: 20ch; margin-inline: auto; }
.page-hero__sub { margin: var(--sp-5) auto 0; max-width: 62ch; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }
.container--narrow { max-width: 820px; }

/* ============ FAQ ============ */
.faq-groups { display: flex; flex-direction: column; gap: var(--sp-10); }
.faq-group__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 10px; }
.faq-group__title::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
.faq-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.faq-search { position: relative; flex: 1; min-width: 240px; max-width: 360px; }
.faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.faq-search .field { padding-left: 40px; }
.faq-empty { display: none; padding: var(--sp-8) 0; text-align: center; color: var(--text-muted); font-size: 14px; }
.faq-empty.is-shown { display: block; }
.faq-group.is-hidden, .accordion__item.is-hidden { display: none; }
@media (max-width:600px) { .faq-toolbar { flex-direction: column; align-items: stretch; } .faq-search { max-width: none; } }

/* ============ CONTACT (matches contact-preview.html) ============ */
.contact { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--sp-10); align-items: start; }
.contact__aside { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Form-card header + legal (card/grid/field/label/actions/success reused from the affiliate block below). */
.form-card__head { margin-bottom: var(--sp-6); }
.form-card__title { font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.form-card__sub { font-size: 13px; color: var(--text-muted); margin-top: var(--sp-2); }
.form-legal { margin-top: var(--sp-3); font-size: 11px; color: var(--text-muted); line-height: 1.5; }
/* Contact info cards */
.contact-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.contact-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.contact-card__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); }
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-1); }
.contact-card__value { font-size: 15px; font-weight: 600; color: var(--text-primary); display: block; transition: color var(--dur-fast); word-break: break-word; }
a.contact-card__value:hover { color: var(--accent); }
.contact-card__meta { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
/* Support / response-time note */
.support-note { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); }
.support-note__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.support-note__title svg { width: 16px; height: 16px; color: var(--accent); }
.support-note__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.support-note__item { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 13px; color: var(--text-secondary); }
.support-note__item strong { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.support-note__faq { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.support-note__faq svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }
.support-note__faq a { color: var(--accent); font-weight: 600; }
@media (max-width:900px) { .contact { grid-template-columns: 1fr; gap: var(--sp-8); } .contact__aside { order: 2; } }

/* ============ COA / LAB TESTS ============ */
.coa-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.coa-search { position: relative; flex: 1; min-width: 240px; max-width: 380px; }
.coa-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.coa-search .field { padding-left: 40px; }
.coa-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.coa-card.is-hidden { display: none; }
.coa-empty { display: none; padding: var(--sp-10) 0; text-align: center; color: var(--text-muted); }
.coa-empty.is-shown { display: block; }
@media (max-width:900px) { .coa-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .coa-grid { grid-template-columns: 1fr; } .coa-toolbar { flex-direction: column; align-items: stretch; } }

/* ============ PEPTIDE CALCULATOR ============ */
.calc-hero { padding-block: var(--sp-20) var(--sp-12); text-align: center; }
.calc-hero__kicker { display: block; margin-bottom: var(--sp-5); }
.calc-hero__title { color: var(--text-primary); max-width: 16ch; margin-inline: auto; font-size: clamp(36px,5vw,56px); letter-spacing: -0.035em; line-height: 1.05; }
.calc-hero__sub { margin: var(--sp-5) auto 0; max-width: 60ch; }
.calc-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-8); font-size: 13px; color: var(--text-muted); }
.calc-hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.calc-hero__trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
.calc-tool { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-6); align-items: start; }
.calc-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--sp-8); }
.calc-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.calc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); flex-shrink: 0; }
.calc-card__icon svg { width: 18px; height: 18px; }
.calc-card__title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.calc-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.calc-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.calc-field--full { grid-column: 1/-1; }
.calc-field__label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.calc-field__hint { font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.calc-input { position: relative; display: block; }
.calc-input .field { padding-right: 52px; }
.calc-input__unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--text-muted); pointer-events: none; }
.calc-dose { display: grid; grid-template-columns: 1fr 96px; gap: var(--sp-2); }
.field--select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E82A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px; cursor: pointer; }
.calc-results { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--sp-8); box-shadow: var(--shadow-card); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.calc-headline { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.calc-headline__num { font-size: clamp(44px,7vw,64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-headline__unit { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.calc-headline__sub { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); }
/* Insulin syringe visual — realistic U-100 medical illustration (SVG), matches
   calculator-preview.html. Needle · hub · barrel · plunger · rubber stopper ·
   0–100 unit scale. Liquid, draw-line and plunger animate to the calculated units. */
.syringe { margin: var(--sp-6) 0; }
.syr-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Inter', -apple-system, sans-serif; }
.syr-needle { stroke: url(#syrMetal); stroke-width: 3; stroke-linecap: round; }
/* Light-theme medical syringe: clean brushed-gray metal on the white result card. */
.syr-needle-tip { fill: #AEB7C9; }
.syr-hub { fill: #C7CEDC; stroke: #AEB7C9; stroke-width: 1.5; stroke-linejoin: round; }
.syr-barrel { fill: rgba(15,26,51,0.035); stroke: #C3CBD9; stroke-width: 2; }
.syr-glass { fill: url(#syrGlass); pointer-events: none; }
.syr-fill { fill: url(#syrLiquid); transform-box: fill-box; transform-origin: left center; transition: transform var(--dur-base) var(--ease-out); }
.syr-tick { stroke: #B6BECC; stroke-width: 1; }
.syr-tick--major { stroke: #7E879B; stroke-width: 1.4; }
.syr-num { fill: #525C72; font-size: 11px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.syr-cap { fill: #8A93A8; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-anchor: middle; }
.syr-flange { fill: #C7CEDC; stroke: #AEB7C9; stroke-width: 1.5; }
.syr-thumb { fill: #C7CEDC; stroke: #AEB7C9; stroke-width: 1.5; }
.syr-rod { fill: #D6DEEB; stroke: #C3CBD9; stroke-width: 1; transform-box: fill-box; transform-origin: right center; transition: transform var(--dur-base) var(--ease-out); }
.syr-draw { transition: transform var(--dur-base) var(--ease-out); }
.syr-stopper { fill: #9AA3B8; stroke: #7E879B; stroke-width: 1; }
.syr-stopper-ridge { stroke: #7E879B; stroke-width: 1; }
.syr-drawline { stroke: var(--accent-light); stroke-width: 2.5; stroke-linecap: round; }
.syr-drawpin { fill: var(--accent-light); }
.calc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.calc-stat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-4); }
.calc-stat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.calc-stat__val { margin-top: 4px; font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.calc-stat__val small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.calc-confirm { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-md); }
.calc-confirm svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.calc-confirm__text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.calc-confirm__text strong { color: var(--text-primary); font-weight: 600; }
.calc-alert { display: none; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); font-size: 13px; line-height: 1.6; }
.calc-alert.is-shown { display: flex; }
.calc-alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.calc-alert--warn { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); color: var(--warning); }
.calc-copied { font-size: 12px; color: var(--success); text-align: center; margin-top: var(--sp-3); min-height: 16px; opacity: 0; transition: opacity var(--dur-fast); }
.calc-copied.is-shown { opacity: 1; }
.calc-disclaimer { max-width: 760px; margin: var(--sp-8) auto 0; text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* Educational cards (calculator + other pages) */
.edu-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.edu-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.edu-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.edu-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); }
.edu-card__icon svg { width: 22px; height: 22px; }
.edu-card__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.edu-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
@media (max-width:900px) { .calc-tool { grid-template-columns: 1fr; } .calc-results { position: static; } .edu-grid { grid-template-columns: 1fr; } }
@media (max-width:600px) { .calc-row { grid-template-columns: 1fr; } .calc-stats { grid-template-columns: 1fr; } }

/* ============ RESPONSIVE ============ */
@media (max-width:980px) {
  .legal { grid-template-columns: 1fr; gap: var(--sp-8); }
  .toc { position: static; }
  .toc__nav { flex-direction: row; overflow-x: auto; gap: var(--sp-1); padding-bottom: var(--sp-2); }
  .toc__link { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .toc__link.is-active { border-left: none; border-bottom-color: var(--accent); }
  .link-grid { grid-template-columns: repeat(3,1fr); }
}
@media (min-width:981px) and (max-width:1100px) { .legal { grid-template-columns: 200px minmax(0,1fr); gap: var(--sp-8); } }
@media (max-width:600px) {
  .toc__summary { pointer-events: auto; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
  .toc__summary svg { display: block; }
  .toc[open] .toc__summary svg { transform: rotate(180deg); }
  .toc__nav { flex-direction: column; overflow: visible; margin-top: var(--sp-2); }
  .link-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   AFFILIATE PAGE  (matches affiliate-preview.html)
   Stat band · benefit cards · steps · application form. Reuses the
   shared .page-hero / .section-header / .cta-band from base + pages.
   ============================================================ */

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.stat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); text-align: center; }
.stat__num { font-size: clamp(32px,5vw,44px); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.stat__label { margin-top: var(--sp-3); font-size: 13px; color: var(--text-secondary); }

/* Benefit / feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.feature-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.feature-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); }
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.feature-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.step { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--accent-dim); color: var(--accent); font-size: 15px; font-weight: 700; margin-bottom: var(--sp-4); }
.step__title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.step__text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* Application layout + form card */
.apply { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--sp-10); align-items: start; }
.apply__aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.apply__points { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.apply__point { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.apply__point svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--success); margin-top: 2px; }
.form-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--sp-8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
.form-label .req { color: var(--accent); margin-left: 2px; }
.form-label .opt { color: var(--text-muted); font-weight: 400; }
.form-card textarea.field { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-actions { margin-top: var(--sp-2); }
.form-success { display: none; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35); border-radius: var(--radius-md); font-size: 14px; color: var(--success); line-height: 1.6; }
.form-success.is-shown { display: flex; }
.form-success[data-error] { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.35); color: var(--danger); }
.form-success svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

@media (max-width:900px) {
  .stat-band, .feature-grid, .steps { grid-template-columns: 1fr; }
  .apply { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width:600px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG  (home.php index + single.php) — matches blog-preview.html
   ============================================================ */

/* Studio-render media treatment shared with product cards */
.post-media { position: relative; aspect-ratio: 16/10; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--stage); }
.post-media img { width: auto; height: auto; max-width: 66%; max-height: 78%; object-fit: contain; -webkit-mask-image: radial-gradient(80% 82% at 50% 48%, #000 66%, transparent 100%); mask-image: radial-gradient(80% 82% at 50% 48%, #000 66%, transparent 100%); filter: drop-shadow(0 12px 20px rgba(15,26,51,0.14)); transition: transform var(--dur-base) var(--ease-out); }
.post-cat { position: absolute; top: 12px; left: 12px; }
.post-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: 12px; color: var(--text-muted); }
.post-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

/* Featured post — 2-column hero card */
.featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.featured:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.featured .post-media { aspect-ratio: auto; min-height: 340px; height: 100%; }
/* The featured card's image is a full-bleed panel, not a floating studio render.
   The shared .post-media img treatment above (contain at 66%/78% + radial mask +
   drop shadow) is right for a product cut-out on a stage, but on this card it
   leaves the --stage background showing all around the photo. Fill the left
   column and crop instead; the card's own overflow:hidden keeps the radius. */
.featured .post-media img { width: 100%; height: 100%; align-self: stretch; max-width: none; max-height: none; object-fit: cover; object-position: center; -webkit-mask-image: none; mask-image: none; filter: none; }
.featured__body { padding: var(--sp-10); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); }
.featured__title { color: var(--text-primary); }
.featured__title a { color: inherit; }
.featured__excerpt { color: var(--text-secondary); }

/* Post grid + card (mirrors .product-card) */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.post-card { position: relative; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.post-card.is-hidden { display: none; }
.post-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.post-card:hover .post-media img { transform: scale(1.04); }
/* Same reasoning as .featured .post-media img: a blog photo is a full-bleed
   panel, not a floating studio render, so the shared contain/mask/shadow
   treatment leaves --stage showing all around it. Fill and crop instead; the
   card's own overflow:hidden keeps the radius. */
.post-card .post-media img { width: 100%; height: 100%; align-self: stretch; max-width: none; max-height: none; object-fit: cover; object-position: center; -webkit-mask-image: none; mask-image: none; filter: none; }
.post-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.post-card__title { font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.post-card__title a { color: inherit; }
.post-card__title a::after { content: ''; position: absolute; inset: 0; }
.post-card__excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.post-card__meta { margin-top: auto; }

/* Newsletter band */
.news { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--sp-10); }
.news__copy { max-width: 46ch; }
.news__form { display: flex; gap: var(--sp-2); flex: 1; min-width: 260px; max-width: 420px; flex-wrap: wrap; }
.news__form .field { flex: 1; }
.news__note { font-size: 12px; color: var(--success); margin-top: var(--sp-3); width: 100%; text-align: right; }
.news__note[data-error] { color: var(--danger); }
.grid-cta, .navigation.pagination { margin-top: var(--sp-10); text-align: center; }
.navigation.pagination .nav-links { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.navigation.pagination .page-numbers.current { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.navigation.pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }

/* Single post */
.single-hero { padding-block: var(--sp-16) var(--sp-6); text-align: center; }
.single-hero .breadcrumb { justify-content: center; margin-bottom: var(--sp-5); }
.single-hero__cat { position: static; display: inline-flex; margin-bottom: var(--sp-4); }
.single-hero__title { color: var(--text-primary); }
.single-hero__meta { justify-content: center; margin-top: var(--sp-4); }
.single-media { margin: var(--sp-8) 0 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.single-media img { width: 100%; height: auto; display: block; }
.post-content { padding-block: var(--sp-10); color: var(--text-secondary); font-size: 16px; line-height: 1.8; }
.post-content > * + * { margin-top: var(--sp-5); }
.post-content h2 { color: var(--text-primary); font-size: 24px; margin-top: var(--sp-10); }
.post-content h3 { color: var(--text-primary); font-size: 20px; margin-top: var(--sp-8); }
.post-content a { color: var(--accent); }
.post-content a:hover { color: var(--accent-light); }
.post-content img { border-radius: var(--radius-md); }
.post-content ul, .post-content ol { padding-left: var(--sp-6); }
.post-content li { margin-top: var(--sp-2); }
.post-content blockquote { border-left: 3px solid var(--accent); padding-left: var(--sp-5); color: var(--text-primary); font-style: italic; }
.single-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); }
.single-tags a { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-secondary); }
.single-foot { padding-block: var(--sp-8) var(--sp-16); border-top: 1px solid var(--border-subtle); margin-top: var(--sp-8); }

/* Journal article system (.dj-article) — light-only lock.
   The Journal stylesheet (shipped inline with each post) defines its colour
   tokens twice: light on `.dj-article`, then a dark set inside
   `@media (prefers-color-scheme: dark)` on `.dj-article:not([data-theme="light"])`.
   dicepeptides.com has no dark mode — the page stays white — so for any reader
   whose OS reports a dark preference the dark tokens won, painting --dj-ink
   (#EAE7F3) body text on a white page and turning the scope callout's wash
   (--dj-accent-wash) into a dark box. Re-assert the article's own light values
   at higher specificity (0,3,0 vs 0,2,0) so they win on the cascade without
   !important, and only inside the same media query so light mode is untouched. */
@media (prefers-color-scheme: dark) {
	.post-content .dj-article:not([data-theme="light"]) {
		--dj-surface: #FFFFFF;
		--dj-sunk: #EDEBF3;
		--dj-ink: #1B1826;
		--dj-ink-2: #494259;
		--dj-ink-3: #6F6885;
		--dj-rule: #DBD6E6;
		--dj-rule-2: #C2BBD4;
		--dj-accent: #573494;
		--dj-accent-wash: #EDE6F8;
		--dj-amber: #96600F;
		--dj-amber-wash: #F4EADA;
	}
}

/* Comments (default WP markup → DS dark styling) */
.comments-area { padding-block: var(--sp-8); border-top: 1px solid var(--border-subtle); }
.comments-area .comments-title, .comments-area .comment-reply-title { color: var(--text-primary); font-size: 20px; font-weight: 600; margin-bottom: var(--sp-5); }
.comments-area ol.comment-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.comments-area .comment-body { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); color: var(--text-secondary); }
.comments-area .comment-author .fn { color: var(--text-primary); }
.comments-area .comment-metadata a, .comments-area .comment-author a { color: var(--text-muted); }
.comments-area .avatar { border-radius: var(--radius-full); }
.comments-area .reply a, .comments-area .comment-reply-link { display: inline-flex; font-size: 13px; color: var(--accent); }
.comment-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.comment-form label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent-strong); color: #fff;
  border: none; border-radius: var(--radius-md); padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.comment-form input[type="submit"]:hover { box-shadow: var(--shadow-glow); }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: center; gap: var(--sp-2); }
.comment-form .comment-form-cookies-consent label { margin: 0; }

@media (max-width:900px) {
  .post-grid { grid-template-columns: repeat(2,1fr); }
  .featured { grid-template-columns: 1fr; }
  .featured .post-media { min-height: 220px; }
  .featured__body { padding: var(--sp-8); }
}
@media (max-width:600px) {
  .post-grid { grid-template-columns: 1fr; }
}