/* ============================================================
   ARCOVEX — RESOURCES (field guide)
   ============================================================ */
.resources-page { padding-top: 64px; }
.resources-page h1, .resources-page h2, .resources-page h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.resources-page .t-eyebrow { font: 600 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ax-fg-muted); margin: 0; }
.resources-page .fb .t-eyebrow { color: rgba(255,255,255,.45); }
/* ---------- atoms ---------- */
.ruo-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; font: 600 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-muted); }
.ruo-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ax-warning); }
.ruo-dark { color: rgba(255,255,255,.5); } .ruo-dark i { background: #E8B04A; }
.btn-l, .btn-g, .btn-d, .btn-o { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 10px; font: 600 14px var(--font-body); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.btn-l { background: #F2F2EE; color: var(--ax-night); } .btn-l:hover { background: #fff; }
.btn-g { border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); } .btn-g:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-d { background: var(--ax-fg); color: var(--ax-bg); } .btn-d:hover { background: var(--n-800); }
.btn-o { border: 1px solid var(--ax-line-strong); color: var(--ax-fg); background: var(--ax-bg-raised); } .btn-o:hover { border-color: var(--ax-fg); }
.pass { font: 700 10px var(--font-mono); letter-spacing: .08em; color: var(--ax-success); background: var(--ax-success-bg); padding: 3px 7px; border-radius: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ---------- guide typography ---------- */
.gd-meta { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 10px; font: 600 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-muted); }
.gd-meta > span { padding: 0 10px; border-left: 1px solid var(--ax-line-strong); } .gd-meta > span:first-child { padding-left: 0; border-left: 0; color: var(--ax-fg); }
.gd h2, .fgd h2, .rd h2 { font-size: var(--text-2xl); line-height: 1.12; }
.gd-sum { margin: 10px 0 24px; font-size: var(--text-md); color: var(--ax-fg-muted); max-width: 60ch; }
.gd > p, .fgd-text > p, .rd-body > p { color: var(--ax-fg-body); max-width: 66ch; line-height: 1.7; }
.gd h3, .fgd-text h3, .rd-body h3 { font-size: var(--text-lg); margin: 32px 0 10px; }
.gd-ol, .gd-ul { margin: 0 0 8px; padding: 0; list-style: none; max-width: 68ch; counter-reset: g; }
.gd-ol li, .gd-ul li { position: relative; padding: 12px 0 12px 38px; border-top: 1px solid var(--ax-line); color: var(--ax-fg-body); line-height: 1.6; font-size: 15px; }
.gd-ol li::before { counter-increment: g; content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 600 11px var(--font-mono); color: var(--ax-fg-faint); }
.gd-ul li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 1.5px; background: var(--ax-fg-faint); }
.gd-ol b, .gd-ul b { color: var(--ax-fg); }
.gd-note { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--ax-fg); border-radius: 0 12px 12px 0; background: var(--ax-bg-raised); max-width: 68ch; }
.gd-note b { font: 600 var(--text-sm) var(--font-display); color: var(--ax-fg); } .gd-note p { margin: 6px 0 0; font-size: 14.5px; color: var(--ax-fg-body); line-height: 1.6; }
.gd a, .fgd a, .rd-body a, .gd-note a { color: var(--ax-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ax-line-strong); }

/* ---------- figures ---------- */
.fg { margin: 28px 0; padding: 20px; border-radius: 16px; background: var(--ax-bg-raised); border: 1px solid var(--ax-line); }
.fg figcaption { margin-top: 14px; font-size: 12px; color: var(--ax-fg-faint); }
/* COA */
.fg-coa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; } .fg-coa figcaption { grid-column: 1 / -1; margin-top: 0; }
.coa-doc { border-radius: 10px; background: #fff; border: 1px solid var(--ax-line-strong); padding: 6px; box-shadow: 0 18px 40px -28px rgba(13,15,14,.35); }
.coa-z { position: relative; padding: 10px 12px 10px 34px; border-radius: 7px; transition: background .2s, opacity .2s; }
.coa-z + .coa-z { border-top: 1px solid #ECECE8; }
.fg-coa.focus .coa-z { opacity: .35; } .fg-coa.focus .coa-z.on { opacity: 1; background: color-mix(in srgb, #E8B04A 14%, #fff); }
.coa-m { position: absolute; left: 8px; top: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--font-mono); background: var(--ax-fg); color: #fff; }
.coa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; } .coa-top b { font: 700 13px var(--font-display); } .coa-top .t-data { font-size: 10px; color: var(--ax-fg-muted); }
.coa-kv { display: flex; flex-wrap: wrap; gap: 6px 18px; } .coa-kv span { display: block; font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ax-fg-faint); } .coa-kv b { font-size: 12.5px; font-weight: 600; color: var(--ax-fg); }
.coa-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12.5px; } .coa-row > span:first-child { font-weight: 600; color: var(--ax-fg); } .coa-row .t-data { grid-column: 1; font-size: 11px; color: var(--ax-fg-muted); } .coa-ok { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 10px var(--font-mono); color: var(--ax-success); background: var(--ax-success-bg); padding: 3px 7px; border-radius: 5px; }
.coa-sign b { display: block; font-size: 12.5px; color: var(--ax-success); } .coa-sign span { font-size: 11.5px; color: var(--ax-fg-muted); }
.coa-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.coa-legend button, .coa-legend span[data-zone] { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ax-fg-body); transition: background .15s; }
.coa-legend [data-zone] > span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--font-mono); border: 1.5px solid var(--ax-fg); color: var(--ax-fg); }
.coa-legend button:hover { background: var(--ax-bg-sunken); } .coa-legend button[aria-pressed="true"] { background: color-mix(in srgb, #E8B04A 16%, transparent); color: var(--ax-fg); font-weight: 600; } .coa-legend button[aria-pressed="true"] > span { background: var(--ax-fg); color: #fff; }
.coa-legend button:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: 1px; }
/* HPLC */
.hp-wrap svg { width: 100%; height: auto; display: block; }
.hp-grid { stroke: var(--ax-line); stroke-dasharray: 2 4; } .hp-axis { stroke: var(--ax-fg-muted); }
.hp-tick line { stroke: var(--ax-fg-muted); } .hp-tick text { font: 500 10px var(--font-mono); fill: var(--ax-fg-faint); text-anchor: middle; } .hp-ax-l { font: 500 10px var(--font-mono); fill: var(--ax-fg-faint); }
.hp-line { fill: none; stroke: var(--ax-fg); stroke-width: 1.6; stroke-linejoin: round; }
.hp-fill { fill: var(--ax-fg); opacity: .06; cursor: pointer; transition: opacity .2s, fill .2s; } .hp-fill.on { opacity: .3; fill: #C98A1B; } .hp-fill.main.on { fill: var(--ax-success); opacity: .22; }
.hp-pl { font: 700 10px var(--font-mono); fill: var(--ax-fg-muted); }
.hp-ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hp-ctrl button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ax-line-strong); font-size: 12.5px; color: var(--ax-fg-body); }
.hp-ctrl .t-data { font-size: 10.5px; color: var(--ax-fg-faint); }
.hp-ctrl button[aria-pressed="true"] { background: var(--ax-fg); border-color: var(--ax-fg); color: var(--ax-bg); } .hp-ctrl button[aria-pressed="true"] .t-data { color: rgba(255,255,255,.6); }
.hp-ctrl button:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: 2px; }
.hp-read { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--ax-bg-sunken); }
.hp-read span { display: block; font: 600 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-faint); } .hp-read b { font-size: 13.5px; color: var(--ax-fg); }
.hp-eq { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--ax-fg-muted); }
/* Lot */
.lm { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; }
.lm-c .t-eyebrow { display: block; margin-bottom: 8px; font-size: 9.5px; }
.lm-label, .lm-coa, .lm-rec { display: grid; gap: 3px; padding: 14px; border-radius: 10px; height: calc(100% - 22px); box-sizing: border-box; }
.lm-label { background: linear-gradient(135deg, #1F3A8A, #142659); color: #fff; } .lm-label span { color: rgba(255,255,255,.7); font-size: 12px; }
.lm-coa { background: #fff; border: 1px solid var(--ax-line-strong); } .lm-rec { background: var(--ax-night); color: #fff; } .lm-rec span { color: rgba(255,255,255,.6); font-size: 12px; } .lm-coa span { font-size: 12px; color: var(--ax-fg-muted); }
.lm b { font: 600 13.5px var(--font-display); }
.lm .lm-id { margin-top: 6px; padding: 4px 7px; border-radius: 5px; font-size: 11px !important; font-weight: 700; justify-self: start; background: color-mix(in srgb, var(--ax-success) 18%, transparent); color: inherit !important; outline: 1.5px solid var(--ax-success); transition: all .25s; }
.lm .lm-sub { font-size: 10px !important; }
.lm-link { display: grid; place-items: center; padding-top: 22px; } .lm-link i { width: 100%; height: 1.5px; background: var(--ax-success); position: relative; } .lm-link i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ax-success); transform: translate(-50%, -50%); }
.lm-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.lm-st { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ax-success); } .lm-st i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lm-tg { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--ax-line-strong); font: 600 12.5px var(--font-body); color: var(--ax-fg); } .lm-tg:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: 2px; }
.fg-lot.bad .lm-coa .lm-id { background: color-mix(in srgb, #B4412F 14%, transparent); outline-color: #B4412F; color: #B4412F !important; }
.fg-lot.bad .lm-link:first-of-type i, .fg-lot.bad .lm-link:nth-of-type(2) i { background: #B4412F; } .fg-lot.bad .lm-link i::after { background: #B4412F; }
.fg-lot.bad .lm-st { color: #B4412F; }

/* ---------- FAQ / closing ---------- */
.fq { border-top: 1px solid var(--ax-fg); }
.fq details { border-bottom: 1px solid var(--ax-line); }
.fq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 var(--text-md) var(--font-display); color: var(--ax-fg); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: 5px; } .fq summary i::before, .fq summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform .2s; }
.fq summary i::after { transform: rotate(90deg); } .fq details[open] summary i::after { transform: rotate(0); }
.fq summary:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: 2px; }
.fq details p { margin: 0 0 18px; max-width: 66ch; color: var(--ax-fg-body); font-size: 14.5px; line-height: 1.65; }
.rs-faq { padding: 80px 0; border-top: 1px solid var(--ax-line); }
.rs-split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; } .rs-split h2 { font-size: var(--text-2xl); margin-top: 8px; }
.rs-close { padding: 0 0 88px; } .da + .rs-close { padding-top: 8px; }
.cl-box { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 36px 40px; border-radius: 18px; background: var(--ax-bg-sunken); border: 1px solid var(--ax-line); }
.cl-box h2 { font-size: var(--text-xl); } .cl-box p { margin: 6px 0 0; color: var(--ax-fg-muted); font-size: var(--text-sm); max-width: 58ch; }
.cl-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- B ---------- */
.fb { background: var(--ax-night); color: #fff; padding: 64px 0 0; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size: 100% 28px; }
.fb .t-eyebrow { color: rgba(255,255,255,.45); }
.fb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; align-items: end; margin-bottom: 40px; }
.fb h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.035em; margin-top: 10px; } .fb-head > p { margin: 0; color: rgba(255,255,255,.6); }
.fb-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.1); }
.fb-tabs button { all: unset; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 18px 16px 22px 0; border-top: 2px solid transparent; margin-top: -1px; }
.fb-tabs .t-data { font-size: 11px; color: rgba(255,255,255,.35); } .fb-tabs b { font: 600 var(--text-sm) var(--font-display); color: rgba(255,255,255,.65); line-height: 1.3; } .fb-tabs small { font-size: 11.5px; color: rgba(255,255,255,.35); }
.fb-tabs button:hover b { color: #fff; } .fb-tabs button[aria-selected="true"] { border-top-color: #fff; } .fb-tabs button[aria-selected="true"] b { color: #fff; } .fb-tabs button[aria-selected="true"] .t-data { color: #E8B04A; }
.fb-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.fb-body { padding: 56px 0 72px; }
.fgd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; animation: fIn .3s var(--ease-out); } .fgd.nofig { grid-template-columns: minmax(0, 760px); }
@keyframes fIn { from { opacity: 0; transform: translateY(6px); } }
.fgd-fig { position: sticky; top: 90px; } .fgd-fig .fg { margin: 0; } .fgd-fig .fg-coa { grid-template-columns: 1fr; }
.fgd-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ax-line); }
.fgd-nav button { all: unset; cursor: pointer; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ax-line); max-width: 48%; } .fgd-nav .nx { text-align: right; margin-left: auto; }
.fgd-nav span { font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-fg-faint); } .fgd-nav b { font: 600 14px var(--font-display); color: var(--ax-fg); }
.fgd-nav button:hover { border-color: var(--ax-fg); } .fgd-nav button:focus-visible { outline: 2px solid var(--ax-fg); outline-offset: 2px; }


/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .fgd { grid-template-columns: minmax(0, 1fr); gap: 0; } .fgd-fig { position: static; order: -1; margin-bottom: 28px; }
  .fb-head { grid-template-columns: 1fr; gap: 12px; }
  .fb-tabs { grid-template-columns: repeat(5, minmax(170px, 1fr)); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 860px) {
  .rs-split { grid-template-columns: 1fr; gap: 24px; } .cl-box { flex-direction: column; align-items: flex-start; padding: 28px; }
  .fg-coa { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fb h1 { font-size: 34px; }
  .fg { padding: 14px; margin-left: -4px; margin-right: -4px; }
  .lm { grid-template-columns: 1fr; gap: 0; } .lm-link { padding: 0; height: 22px; } .lm-link i { width: 1.5px; height: 100%; } .lm-label, .lm-coa, .lm-rec { height: auto; }
  .hp-read { grid-template-columns: 1fr 1fr; } .hp-read > div:first-child { grid-column: 1 / -1; }
  .fgd-nav { flex-direction: column; } .fgd-nav button { max-width: none; } .fgd-nav .nx { margin-left: 0; text-align: left; }
}
.coa-doc { color: var(--ax-fg); }
.fb-tabs { scroll-margin-top: 64px; }
/* figure: pinned beside text on desktop, inline after the intro on smaller screens */
@media (min-width: 1081px) { .fgd:not(.nofig) .fgd-text > .fg { display: none; } }
@media (max-width: 1080px) { .fgd-fig { display: none; } }