/* aragonitesand.com — shared stylesheet
 *
 * Built on css/tokens.css. Chrome (header, footer) is a port of the parent's
 * site-chrome.css with the same class names, so the markup pattern matches
 * aragocorminerals.com. Page components follow the parent's inline patterns
 * (border-top feature blocks, paper stat strips, ink CTA band, .fld fields).
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--leading-copy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* The parent's serif, for headings only. Everything that carries a figure or
   a code — tables, tiers, SKUs, the wordmark — stays in the grotesque, which
   is what a trade table wants. A serif is set looser than a grotesque, so the
   negative tracking that suited Archivo comes off here. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.003em;
  line-height: var(--leading-heading);
  overflow-wrap: break-word;
}
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
table { border-collapse: collapse; }
sub, sup { font-size: max(0.83em, 10px); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
[id] { scroll-margin-top: var(--scroll-margin); }
/* `hidden` is a UA-stylesheet rule and any author `display` beats it. Several
   things here are hidden by attribute and carry their own display — the quote
   field is a flex `.field`, the quote bar is fixed — so without this they are
   set correctly and still paint. */
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip {
  position: fixed; z-index: 10000; top: 12px; left: 12px;
  transform: translateY(-160%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--bone); color: var(--ink);
  font-weight: 700; text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.skip:focus { transform: translateY(0); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--band { padding: var(--section-band) 0; }
.section--tight { padding: var(--section-tight) 0; }
.band-paper { background: var(--paper); border-bottom: var(--rule-soft); }
.band-ink { background: var(--gradient-deep); color: var(--bone); }
.band-abyss { background: var(--gradient-abyss); color: var(--bone); }
.band-sand { background: var(--sand); color: var(--ink); }
@media (max-width: 960px) {
  .section { padding: var(--section-tablet) 0; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 var(--gutter-phone); }
  .section, .section--band { padding: var(--section-phone) 0; }
  .section--tight { padding: 40px 0; }
}

/* ---------- Type ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: var(--label-tracking-tight);
  line-height: 1.5;
  color: var(--fg-2);
}
.band-ink .eyebrow, .band-abyss .eyebrow { color: var(--bone-60); }
.band-sand .eyebrow { color: var(--ink-80); }
.display-1 {
  font-size: var(--display-1);
  line-height: var(--display-1-leading);
  letter-spacing: -0.008em;
  max-width: var(--display-1-measure);
  text-wrap: balance;
}
.display-2 { font-size: var(--display-2); line-height: 1.12; letter-spacing: -0.005em; max-width: 640px; text-wrap: balance; }
.display-3 { font-size: var(--display-3); letter-spacing: -0.005em; max-width: 640px; text-wrap: balance; }
.lead { font-size: var(--lead); line-height: var(--leading-tight); color: var(--fg-2); max-width: var(--measure-lead); }
.band-ink .lead, .band-abyss .lead { color: var(--bone-80); }
.band-sand .lead { color: var(--ink-80); }
.copy { font-size: var(--body); line-height: var(--leading-body); color: var(--ink); }
.copy-2 { font-size: var(--body-sm); line-height: var(--leading-body); color: var(--fg-2); }
.copy-2 + .copy-2, .copy + .copy-2 { margin-top: 20px; }
.band-ink .copy-2, .band-abyss .copy-2 { color: var(--bone-78); }
.note { font-size: var(--small-xs); line-height: 1.5; color: var(--fg-3); }
.band-ink .note, .band-abyss .note { color: var(--bone-60); }
.sec-head { margin-bottom: 28px; }
.sec-head .eyebrow + h2 { margin-top: 10px; }
.sec-head h2 + .lead { margin-top: 12px; font-size: var(--lead-sm); }
.sec-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}

/* ---------- Links ---------- */
.tide-link {
  color: var(--surf); text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  transition: color var(--duration) var(--ease-tide);
}
.tide-link:hover, .tide-link:focus-visible { color: var(--ink); }
.arrow-move { display: inline-flex; transition: transform var(--duration) var(--ease-tide); }
.tide-link:hover .arrow-move, .link-row:hover .arrow-move { transform: translateX(4px); }
.band-ink .tide-link { color: var(--bone-78); }
.band-ink .prose-link, .band-abyss .prose-link { color: var(--surf-light); }
.band-ink .tide-link:hover { color: var(--bone); }
.prose-link { color: var(--surf); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-link:hover { color: var(--ink); }

/* ---------- Buttons (parent `.btn-ar`) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-height); padding: var(--btn-padding);
  border-radius: var(--btn-radius); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: var(--btn-size); font-weight: var(--btn-weight);
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--duration) var(--ease-tide), border-color var(--duration) var(--ease-tide), color var(--duration) var(--ease-tide), transform var(--duration) var(--ease-tide);
}
.btn:active { transform: scale(0.97); }
.btn svg { flex: none; }
.btn-ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-ink:hover { background: var(--tide); border-color: var(--tide); }
.btn-inkline { background: transparent; color: var(--ink); border-color: var(--ink-40); }
.btn-inkline:hover { background: var(--ink-04); border-color: var(--ink); }
.btn-bone { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-bone:hover { background: var(--bone-88); }
.btn-boneline { background: transparent; color: var(--bone); border-color: var(--bone-40); }
.btn-boneline:hover { background: var(--bone-08); border-color: var(--bone); }
.btn-sm { height: var(--btn-sm-height); padding: 0 20px; font-size: 14.5px; }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 600px) {
  /* Full width, and the label is allowed to wrap inside it. `nowrap` is right
     for an auto-width button in a row; on a 280px full-width one it is what
     pushes a long call to action past the screen edge. */
  .btn {
    width: 100%; white-space: normal; text-align: center;
    height: auto; min-height: var(--btn-height); padding: 14px 20px; line-height: 1.3;
  }
  .btn-sm { width: auto; min-height: var(--btn-sm-height); }
}

/* ---------- Header (parent `.ac-nav`) ---------- */
/* ---------- Utility bar ----------
   Phone, email and the trade line, above the nav on every page. On a phone the
   number alone survives: it is the one thing a buyer standing in a store wants,
   and the rest is a second row of noise at that width. */
.ac-util {
  background: var(--util-bg); color: var(--util-fg);
  font-family: var(--font-sans); font-size: var(--util-size); line-height: 1;
  border-bottom: 1px solid rgba(246, 242, 233, 0.10);
}
.ac-util__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  min-height: var(--util-height);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.ac-util__group { display: flex; align-items: center; gap: 22px; min-width: 0; }
.ac-util a { color: var(--util-fg); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; min-height: var(--util-height); white-space: nowrap; }
.ac-util a:hover, .ac-util a:focus-visible { color: var(--bone); }
.ac-util svg { flex: none; opacity: 0.75; }
.ac-util__note { color: rgba(246, 242, 233, 0.50); white-space: nowrap; }
.ac-util__strong { color: var(--bone); font-weight: 600; }
@media (max-width: 1080px) { .ac-util__inner { padding: 0 20px; } }
@media (max-width: 860px) {
  /* Specific enough to beat `.ac-util a { display: inline-flex }`, which is
     (0,1,1) and would otherwise win over a lone class and leave the bar
     overflowing the screen with everything still in it. */
  .ac-util .ac-util__hide { display: none !important; }
  .ac-util__inner { justify-content: center; gap: 18px; }
}

.ac-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--shadow-nav);
  font-family: var(--font-sans);
}
.ac-nav__inner {
  max-width: var(--container); margin: 0 auto; height: var(--nav-height);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ac-nav__left { display: flex; align-items: center; gap: 36px; min-width: 0; }
/* ---------- Brand ----------
 *
 * The site's own mark, not the parent's. Three grades drawn at true relative
 * size on a screen line — the idea the whole catalogue is built on, and
 * nothing borrowed from the AragoCor logo. The circles take currentColor so
 * the same markup works on the bone nav and the dark footer; only the screen
 * line is fixed, in sand. The parent's wordmark still appears, once, as an
 * endorsement at the foot of the page.
 */
/* ---------- Brand ----------
 *
 * The master brand leads: AragoCor Minerals, then a rule, then the product
 * line this site is. The parent's wordmark is filled with a sky texture and is
 * a light mark, so on the bone nav it sits on a navy plate rather than being
 * dropped straight onto the ground where it would all but disappear. In the
 * footer the ground is already dark and it needs no plate.
 */
.brand {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  text-decoration: none; color: var(--bone); min-width: 0;
}
/* On chrome the wordmark needs no plate: the ground is already dark. */
.brand__plate { display: inline-flex; align-items: center; flex: none; }
.brand__parent { width: 116px; height: auto; display: block; }
.brand__rule { width: 1px; height: 30px; background: var(--border-inverse); flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__name {
  font-family: var(--font-ui); font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.1; white-space: nowrap;
  font-variation-settings: "wdth" 96;
}
.brand__by {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em;
  line-height: 1.2; color: var(--bone-65); white-space: nowrap;
}
.brand--foot { color: var(--bone); }
.brand--foot .brand__by { color: var(--bone-60); }
.brand--foot .brand__plate { background: transparent; padding: 0; }
.brand--foot .brand__parent { width: 138px; }
.brand--foot .brand__rule { background: var(--bone-40); height: 34px; }
@media (max-width: 520px) {
  .brand__parent { width: 92px; }
  .brand__plate { padding: 6px 9px; }
  .brand__name { font-size: 15px; }
  .brand__rule { height: 26px; }
}
@media (max-width: 380px) {
  .brand__rule, .brand__text { display: none; }
}

/* The parent's wordmark, as an endorsement and only in the footer. */
.endorse { display: inline-block; margin-top: 24px; text-decoration: none; }
.endorse__label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--bone-60);
}
.endorse img { width: 150px; height: auto; opacity: 0.92; transition: opacity var(--duration) var(--ease-tide); }
.endorse:hover img { opacity: 1; }
.ac-nav__links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ac-nav__item { position: relative; }
.ac-nav__link {
  color: var(--nav-link); font-size: var(--nav-link-size); font-weight: 500;
  min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center;
  text-decoration: none; transition: color var(--duration) var(--ease-tide);
}
.ac-nav__link:hover, .ac-nav__link:focus-visible { color: var(--bone); }
.ac-nav__item[aria-current="page"] .ac-nav__link { color: var(--bone); }
.ac-nav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--sand);
}
/* The one action in the nav, so it is drawn as an object rather than another
   link: an outlined pill that fills to solid ink on hover. Everything else on
   the site uses the 4px trade button; the pill is reserved for this one place
   so it never competes with the page's own primary button. */
.ac-nav__cta {
  background: transparent; color: var(--bone); height: 38px; padding: 0 18px;
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-inverse); border-radius: var(--radius-sm);
  white-space: nowrap; flex-shrink: 0; text-decoration: none;
  transition: background var(--duration) var(--ease-tide), color var(--duration) var(--ease-tide);
}
.ac-nav__cta:hover, .ac-nav__cta:focus-visible { background: var(--bone); color: var(--ink); }
.ac-nav__cta:active { transform: scale(0.98); }
.ac-nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-inverse); border-radius: var(--radius-sm);
  color: var(--bone); cursor: pointer; flex-shrink: 0;
}
.ac-nav__toggle svg { width: 20px; height: 20px; display: block; }
.ac-nav__mobile { display: none; }
.ac-nav__mobile[hidden] { display: none !important; }
@media (max-width: 1080px) {
  .ac-nav__inner { padding: 0 20px; }
  .ac-nav__links, .ac-nav__cta { display: none; }
  .ac-nav__toggle { display: inline-flex; }
  .ac-nav__mobile {
    display: block; max-height: 0; overflow: hidden;
    background: var(--surface-chrome); border-top: 1px solid var(--nav-border);
    transition: max-height 260ms var(--ease-tide);
  }
  .ac-nav__mobile.is-open { max-height: 80vh; overflow-y: auto; }
  .ac-nav__mobile ul, .ac-nav__mobile li { list-style: none; }
  .ac-nav__mobile ul { margin: 0; padding: 8px 20px 20px; }
  .ac-nav__mobile a {
    display: block; padding: 14px 0; color: var(--nav-link); font-size: 16px; font-weight: 500;
    text-decoration: none; border-bottom: 1px solid var(--border-inverse); min-height: 48px;
  }
  .ac-nav__mobile a:hover, .ac-nav__mobile a:focus-visible { color: var(--bone); }
  .ac-nav__mobile a[aria-current="page"] { color: var(--bone); font-weight: 700; border-bottom-color: var(--sand); }
  .ac-nav__mobile a.ac-nav__mobile-cta,
  .ac-nav__mobile a.ac-nav__mobile-cta:hover,
  .ac-nav__mobile a.ac-nav__mobile-cta:focus-visible {
    margin-top: 16px; background: var(--bone); color: var(--ink); border-radius: var(--radius-sm);
    text-align: center; font-weight: 600; border-bottom: none;
  }
  .ac-nav__mobile a.ac-nav__mobile-cta:hover { background: var(--tide); }
}


/* ---------- Footer (parent `.ac-foot`) ---------- */
.ac-foot { background: var(--abyss); color: var(--foot-fg); font-family: var(--font-sans); font-size: var(--foot-size); line-height: 1.65; }
.ac-foot__inner {
  max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 32px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px;
}
@media (max-width: 1180px) { .ac-foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-foot a { color: var(--foot-link); text-decoration: none; }
.ac-foot a:hover, .ac-foot a:focus-visible { color: var(--bone); }
.ac-foot img { display: block; }
.ac-foot a:has(> img) { display: inline-block; padding: 4px 0; }
.ac-foot p { margin: 0; }
.ac-foot__label {
  font-family: var(--font-mono); font-size: var(--label-xs); letter-spacing: var(--label-tracking-tight);
  color: var(--bone); margin-bottom: 18px;
}
.ac-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ac-foot__list a, .ac-foot__row a, .ac-foot__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.ac-foot__row { display: flex; gap: 10px; align-items: center; min-height: 44px; margin-bottom: 6px; }
.ac-foot__row svg { flex-shrink: 0; margin-top: 2px; }
.ac-foot__row a[href^="tel:"] { white-space: nowrap; }
.ac-foot__disclaimer {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 32px;
  font-size: var(--small-xs); line-height: 1.6; color: var(--bone-60);
}
.ac-foot__disclaimer p { max-width: 78ch; }
.ac-foot__bottom {
  max-width: var(--container); margin: 0 auto; padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--bone-14);
  display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between;
  font-size: var(--foot-bottom); color: var(--bone-72);
}
.ac-foot__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 960px) {
  .ac-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 48px 20px 32px; gap: 36px; }
  .ac-foot__bottom, .ac-foot__disclaimer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .ac-foot__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
  .ac-foot__inner > div:nth-child(1) { order: 4; padding-top: 28px; border-top: 1px solid var(--bone-14); }
  .ac-foot__inner > div:nth-child(2) { order: 1; }
  .ac-foot__inner > div:nth-child(3) { order: 2; }
  .ac-foot__inner > div:nth-child(4) { order: 3; }
  .ac-foot__inner > div:nth-child(1) img { width: 152px; height: auto; }
  .ac-foot__inner > div:nth-child(1) p { max-width: none; }
  .ac-foot__label { font-size: 12px; margin-bottom: 14px; }
  .ac-foot__row { margin-bottom: 0; }
  .ac-foot__bottom { gap: 6px 24px; padding-top: 20px; padding-bottom: 32px; }
  .ac-foot__bottom > span { line-height: 1.5; }
}
@media (max-width: 600px), (pointer: coarse) {
  a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Editorial hero (parent about/products hero) ---------- */
.hero { padding: var(--section-hero) 0 40px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.hero .eyebrow + h1 { margin-top: 10px; }
.hero h1 + .lead { margin-top: 16px; }
.hero .actions { margin-top: 22px; }
.crumb { font-size: var(--small-xs); color: var(--fg-3); margin-bottom: 20px; }
.crumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumb a { color: var(--fg-2); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.hero__mm {
  margin-top: 14px; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; color: var(--fg-2);
}
@media (max-width: 960px) {
  .hero { padding-top: 56px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ---------- Grain plate (EXTENDED) ---------- */
.plate {
  background: var(--paper); border: var(--rule); border-radius: var(--radius);
  padding: 20px 22px 18px; box-shadow: var(--shadow-1);
}
.plate__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; margin-bottom: 22px; }
.plate__head .eyebrow { color: var(--fg-2); }
.plate__mm { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-3); }
.grains { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.grain { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.grain__dots { display: flex; align-items: center; gap: 5px; height: 78px; }
.grain__dots--tall { height: 78px; flex-wrap: wrap; }
/* A 5 mm coarse grain draws 75px across and five of them need 283px, which is
   wider than the plate on a phone. The fixed height is what lines the three
   groups up on a desktop and is the thing that has to go once they wrap. */
@media (max-width: 640px) {
  .grain__dots, .grain__dots--tall { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 6px; }
}
.dot { display: block; border-radius: 50%; background: var(--sand); }
.dot--2 { background: var(--grade-medium); }
.dot--3 { background: var(--grade-coarse); }
.grain__name { margin-top: 14px; font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.grain__name a { text-decoration: none; }
.grain__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.grain__mm { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-2); margin-top: 2px; }
.ruler { margin-top: 28px; position: relative; height: 30px; max-width: 100%; }
.ruler__bar { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--border-strong); }
.tick { position: absolute; top: 0; width: 1px; height: 7px; background: var(--border-strong); }
.tick--major { height: 12px; background: var(--ink); }
.ruler__cap { position: absolute; top: 15px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.tick__label { position: absolute; top: 15px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.plate__foot { margin-top: 18px; font-size: var(--fine); line-height: 1.5; color: var(--fg-3); }

/* ---------- Stat strip (parent `.ac-stat-grid`) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 0; }
.stat-grid > div { padding: 8px 28px; text-align: center; border-right: 1px solid var(--ink-08); min-width: 0; }
.stat-grid > div:last-child { border-right: 0; }
.stat-grid .v { font-family: var(--font-ui); font-size: var(--figure); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.stat-grid .k { font-size: var(--small-xs); color: var(--fg-2); margin-top: 7px; }
@media (max-width: 960px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 8px; padding: 28px 0; }
  .stat-grid > div { border-right: 0; padding: 8px 10px; }
}

/* ---------- Feature blocks (parent border-top principle cards) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
.feature { border-top: var(--rule-feature); padding-top: 18px; min-width: 0; }
.feature__n { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-3); margin-bottom: 12px; }
.feature h3 { font-size: var(--h3); margin-bottom: 8px; line-height: var(--leading-h3); }
.feature p { font-size: var(--body-xs); line-height: var(--leading-copy); color: var(--fg-2); }
.band-ink .feature { border-top-color: var(--bone-40); }
.band-ink .feature__n { color: var(--bone-60); }
.band-ink .feature p { color: var(--bone-78); }
.band-ink .feature--no { border-top-color: var(--sand); }
.band-ink .feature--no h3 { color: var(--caution-heading); }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .feature-grid, .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-grid, .feature-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- Grade cards (EXTENDED from parent's card + proof cells) ---------- */
.grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grade-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: var(--rule); border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--duration) var(--ease-tide), box-shadow var(--duration) var(--ease-tide);
}
.grade-card:hover { border-color: var(--ink); box-shadow: var(--shadow-1); }
.grade-card__band { height: 5px; background: var(--grade-fine); }
.grade-card--medium .grade-card__band { background: var(--grade-medium); }
.grade-card--coarse .grade-card__band { background: var(--grade-coarse); }
.grade-card__top { padding: 24px 24px 18px; border-bottom: var(--rule); }
.grade-card h3 { font-size: var(--h3); }
.grade-card h3 a { text-decoration: none; }
.grade-card h3 a::after { content: ""; position: absolute; inset: 0; }
.grade-card { position: relative; }
.grade-card__mm { margin-top: 6px; font-family: var(--font-mono); font-size: var(--small-xs); color: var(--fg-2); }
.grade-card__use { padding: 18px 24px; font-size: var(--body-xs); line-height: var(--leading-copy); color: var(--fg-2); border-bottom: var(--rule); }
.grade-card__foot { padding: 16px 24px 20px; margin-top: auto; }
.grade-card__foot .tide-link { position: relative; z-index: 1; min-height: 32px; }
@media (max-width: 960px) { .grade-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Spec table (parent `.technical-table` / card rows) ---------- */
.spec { width: 100%; font-size: var(--body-xs); }
.spec th, .spec td { text-align: left; padding: 11px 24px; border-bottom: 1px solid var(--ink-08); vertical-align: top; }
.spec th { font-weight: 400; color: var(--fg-2); width: 55%; }
.spec td { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec--full { background: var(--paper); border: var(--rule); border-radius: var(--radius); overflow: hidden; font-size: var(--body-sm); }
.spec--full th, .spec--full td { padding: 14px 20px; }
.spec--full th { width: 42%; }
.spec--full caption { text-align: left; padding: 16px 20px; border-bottom: var(--rule); font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.spec--full td { white-space: normal; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Sieve chart (EXTENDED) ---------- */
.sieve { background: var(--paper); border: var(--rule); border-radius: var(--radius); padding: 24px; }
.sieve h3 { font-size: 17px; }
.sieve__note { font-size: var(--small); color: var(--fg-2); margin: 4px 0 20px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; align-items: center; gap: 12px; margin-bottom: 9px; font-size: var(--small); }
.bar-row__k { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-2); white-space: nowrap; }
.bar-track { height: var(--bar-height); background: var(--bar-track); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--bar-fill); }
.bar-row__v { text-align: right; color: var(--fg-2); }
.sieve__foot { margin: 18px 0 0; font-size: var(--small); line-height: 1.55; color: var(--fg-2); }
.band-ink .bar-track, .band-abyss .bar-track { background: var(--bone-14); }
.band-ink .bar-fill, .band-abyss .bar-fill { background: var(--sand); }
.band-ink .bar-row__k, .band-ink .bar-row__v, .band-abyss .bar-row__k, .band-abyss .bar-row__v { color: var(--bone-72); }

/* ---------- Two-column splits ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.split--wide { grid-template-columns: 0.8fr 1.2fr; gap: 72px; }
.split--lot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; }
@media (max-width: 960px) { .split, .split--wide, .split--lot { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ---------- Lot lookup (EXTENDED, on the ink band) ---------- */
.lot-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.lot-form .fld { flex: 1 1 220px; }
.lot-hint { margin-top: 14px; font-size: var(--small); color: var(--bone-60); }
.lot-hint code { font-family: var(--font-mono); font-size: var(--label); background: var(--bone-10); padding: 2px 6px; border-radius: 2px; }
.lot-hint button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lot-hint button code:hover { background: rgba(246,242,233,0.2); }
.lot-panel { border: 1px solid var(--bone-14); background: var(--bone-04); border-radius: var(--radius); padding: 30px; min-height: 180px; }
.lot-panel__empty { color: var(--bone-60); font-size: var(--body-sm); }
.lot-panel__err { color: var(--sand); font-size: var(--body-sm); }
.lot-id { font-family: var(--font-ui); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.lot-meta { font-size: var(--small); color: var(--bone-60); margin-top: 4px; }
.lot-rows { margin-top: 22px; border-top: 1px solid var(--bone-14); }
.lot-row { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--bone-14); font-size: var(--body-xs); }
.lot-row span:first-child { color: var(--bone-60); }
.lot-row span:last-child { font-weight: 600; text-align: right; }
.lot-sieve { margin-top: 22px; }
.lot-sieve .eyebrow { margin-bottom: 12px; }
.lot-panel .bar-row { grid-template-columns: 84px minmax(0, 1fr) 46px; }
.lot-status { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bone-14); font-size: var(--small-xs); color: var(--bone-60); }
.lot-status--placeholder { color: var(--sand); }
@media (max-width: 600px) { .lot-panel { padding: 22px 18px; } }

/* ---------- Calculator (EXTENDED) ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 52px; align-items: start; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.result { background: var(--paper); border: var(--rule); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-1); }
.result__big { font-family: var(--font-ui); font-size: var(--figure-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.result__big small { font-size: 0.42em; font-weight: 600; color: var(--fg-2); letter-spacing: 0; }
.result__sub { margin-top: 12px; font-size: var(--body-xs); color: var(--fg-2); }
.result__note { margin-top: 18px; padding-top: 16px; border-top: var(--rule-soft); font-size: var(--small-xs); line-height: 1.5; color: var(--fg-3); }
.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent;
  color: var(--ink); font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.02em; cursor: pointer;
  transition: background var(--duration) var(--ease-tide), border-color var(--duration) var(--ease-tide);
}
.chip:hover { background: var(--ink-04); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
@media (max-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 600px) { .fields, .fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Form fields (parent contact.html `.fld`) ---------- */
.field { display: flex; flex-direction: column; min-width: 0; }
.field label, .field__label {
  display: block; font-size: var(--field-label); font-weight: 500; color: var(--ink); margin-bottom: 8px;
}
.field .req { color: var(--error); }
.band-ink .field label, .band-abyss .field label { color: var(--bone); }
.fld {
  width: 100%; height: var(--field-height); padding: var(--field-padding);
  border: 1px solid var(--border-strong); border-radius: var(--field-radius);
  background: var(--paper); font-family: var(--font-sans); font-size: var(--field-size); color: var(--ink);
  outline: none; transition: border-color var(--duration) var(--ease-tide), box-shadow var(--duration) var(--ease-tide);
}
.fld:focus { border-color: var(--tide); box-shadow: 0 0 0 3px var(--field-ring); }
.fld::placeholder { color: var(--fg-3); }
textarea.fld { height: var(--textarea-height); padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.fld { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E3540' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.fld[aria-invalid="true"] { border-color: var(--error); }
.band-ink .fld, .band-abyss .fld { background: var(--bone-08); border-color: var(--bone-40); color: var(--bone); }
.band-ink .fld::placeholder, .band-abyss .fld::placeholder { color: var(--bone-40); }
.band-ink .fld:focus, .band-abyss .fld:focus { border-color: var(--bone); box-shadow: 0 0 0 3px rgba(246,242,233,0.12); }
.fld-err { display: block; min-height: 0; margin-top: 6px; font-size: var(--field-error); line-height: 1.4; color: var(--error-text); }
.fld-err:empty { display: none; }
@media (pointer: coarse), (max-width: 900px) { .fld { font-size: 16px; } }
.form-card { background: var(--paper); border: var(--rule); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-1); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.field--full { grid-column: 1 / -1; }
.form-group { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
.form-group:last-of-type { margin-bottom: 0; }
.form-group__legend { padding: 0; margin-bottom: 16px; font-family: var(--font-mono); font-size: var(--label-sm); letter-spacing: var(--label-tracking-tight); color: var(--fg-2); }
.form-footer { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-footer p { font-size: var(--fine); color: var(--fg-3); max-width: 44ch; }
.form-alert { margin-bottom: 18px; padding: 12px 16px; border: 1px solid rgba(150,40,40,0.35); background: rgba(150,40,40,0.06); border-radius: var(--radius-sm); font-size: var(--small); line-height: 1.5; color: var(--error-text); }
.form-success { background: var(--paper); border: var(--rule); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-1); }
.form-success h2 { font-size: 28px; letter-spacing: -0.015em; margin: 0 0 14px; }
.form-success p { font-size: var(--body-sm); line-height: 1.6; color: var(--fg-2); margin: 0 0 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-card { padding: 24px 20px; } }

/* ---------- Pack facts (parent proof strip) ---------- */
.pack {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: var(--radius); overflow: hidden;
}
.pack > div { background: var(--bone); padding: 22px 24px; min-width: 0; }
.band-sand .pack { background: rgba(11,44,58,0.20); border-color: rgba(11,44,58,0.20); }
.band-sand .pack > div { background: var(--sand); }
.pack .v { font-family: var(--font-ui); font-size: var(--figure-sm); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.pack .k { font-size: var(--small); line-height: 1.4; color: var(--fg-2); margin-top: 8px; }
.band-sand .pack .k { color: var(--ink-80); }
.pack__note { font-size: var(--small-xs); line-height: 1.5; color: var(--fg-3); margin: 14px 0 0; }
.band-sand .pack__note { color: var(--ink-80); }
@media (max-width: 720px) { .pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Other-grade cards (EXTENDED, parent `.rt-card`) ---------- */
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.other {
  display: block; background: var(--paper); border: var(--rule); border-radius: var(--radius); padding: 24px;
  text-decoration: none; transition: border-color var(--duration) var(--ease-tide), background var(--duration) var(--ease-tide);
}
.other:hover { border-color: var(--ink); background: var(--ink-04); }
.other h3 { font-size: 21px; }
.other__mm { font-family: var(--font-mono); font-size: var(--small-xs); color: var(--fg-2); margin-top: 4px; }
.other p { font-size: var(--body-sm); color: var(--fg-2); margin-top: 12px; line-height: var(--leading-copy); }
.others--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .others--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .others, .others--3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Data table (parent `table.data`) ---------- */
.data-wrap { background: var(--paper); border: var(--rule); border-radius: var(--radius); overflow: hidden; }
table.data { width: 100%; font-size: var(--body-xs); }
table.data caption { text-align: left; padding: 16px 20px; border-bottom: var(--rule); font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
table.data thead th { text-align: left; padding: 12px 20px; background: var(--ink); color: var(--bone); font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500; letter-spacing: 0.04em; }
table.data th, table.data td { text-align: left; padding: 13px 20px; border-top: 1px solid var(--ink-08); vertical-align: top; }
table.data tbody th { font-weight: 600; color: var(--ink); }
table.data td { color: var(--fg-2); }
table.data td.val { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.data tbody tr:hover { background: var(--ink-04); }
table.data .mono { font-family: var(--font-mono); font-size: var(--small-xs); }
@media (max-width: 600px) { table.data th, table.data td { padding: 12px 14px; } }

/* ---------- Terms list (EXTENDED, parent documentation-list) ---------- */
.terms { list-style: none; padding: 0; margin: 0; border-top: var(--rule-feature); }
.terms > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: var(--rule); }
.terms dt, .terms__k { font-weight: 600; color: var(--ink); font-size: var(--body-sm); }
.terms dd, .terms__v { margin: 0; font-size: var(--body-sm); line-height: var(--leading-copy); color: var(--fg-2); }
.terms__v p + p { margin-top: 8px; }
@media (max-width: 600px) { .terms > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------- Ink CTA band (parent closing band) ---------- */
.cta { text-align: center; padding: 56px 0; }
.cta h2 { max-width: 720px; margin: 0 auto 20px; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.cta p { max-width: 540px; margin: 0 auto 32px; font-size: var(--lead-band); color: var(--bone-80); }
.cta .actions { justify-content: center; margin-top: 0; }

/* ---------- Placeholder marker (EXTENDED) ----------
   Anything marked `data-placeholder` carries invented data. The marker is
   visible in the page so nobody ships it by accident; remove the attribute
   when real values are dropped in. Styled as a status chip in the parent's
   `.status-chip--condition` amber, the one warning colour the parent uses. */
.placeholder-flag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px;
  border: 1px solid hsl(38 68% 66%); background: hsl(38 72% 94%); color: hsl(31 78% 31%);
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.2;
  vertical-align: middle;
}
.band-ink .placeholder-flag, .band-abyss .placeholder-flag { background: var(--bone-10); border-color: var(--sand); color: var(--sand); }

/* ---------- Image frame (EXTENDED, parent about origin panel) ---------- */
.frame { aspect-ratio: 21 / 7; border-radius: var(--radius); position: relative; overflow: hidden; background: var(--gradient-deep); }
.frame__caption { position: absolute; bottom: 28px; left: 32px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking-tight); color: var(--bone); }
.frame__todo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bone-60); font-family: var(--font-mono); font-size: var(--label); text-align: center; padding: 20px; }
@media (max-width: 600px) { .frame { aspect-ratio: 16 / 9; } .frame__caption { left: 20px; bottom: 20px; } }

/* ---------- Contact rows on the about page ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--body-sm); color: var(--fg-2); min-height: 32px; }
.contact-list svg { flex-shrink: 0; margin-top: 4px; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   COMMERCE — product cards, price list, volume tiers, quote builder
   =====================================================================
   None of this exists on aragocorminerals.com, which sells by quotation and
   publishes no prices. It is built from the parent's own vocabulary all the
   same: the cards are its bordered white card, the price list is its
   `table.data`, the tier cells are its proof strip, and the quantity control
   is its form field. Only the accent (`--surf`) is new, and it is what makes
   a price or a SKU readable as commerce rather than as one more spec value. */

/* ---------- Price status banner ---------- */
.price-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin-bottom: 28px;
  border: 1px solid hsl(38 68% 66%); border-left: 4px solid hsl(38 68% 55%);
  background: hsl(38 72% 94%); color: hsl(31 78% 27%);
  border-radius: var(--radius-sm); font-size: var(--small); line-height: 1.55;
}
.price-banner strong { font-weight: 700; }
.price-banner p { max-width: 80ch; margin: 0; }
.band-ink .price-banner, .band-abyss .price-banner {
  background: var(--bone-10); border-color: var(--sand); border-left-color: var(--sand); color: var(--sand);
}

/* ---------- SKU chip ---------- */
.sku {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px;
  border: 1px solid var(--sku-border); background: var(--sku-bg); border-radius: 3px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--sku); white-space: nowrap;
}
.band-ink .sku, .band-abyss .sku { background: var(--bone-08); border-color: var(--bone-40); color: var(--surf-light); }

/* ---------- Product card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: var(--rule); border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--duration) var(--ease-tide), box-shadow var(--duration) var(--ease-tide);
}
.product:hover { border-color: var(--surf); box-shadow: var(--shadow-2); }
.product__band { height: 5px; background: var(--grade-fine); }
.product--medium .product__band { background: var(--grade-medium); }
.product--coarse .product__band { background: var(--grade-coarse); }

.product__head { padding: 20px 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product__type { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-2); }

/* The grain sample doubles as the product image: the actual grain, at the
   scale the ruler on the grade page uses, rather than an empty photo frame. */
/* A fixed height, not a min-height: a 5 mm coarse grain draws 75px tall and a
   0.5 mm fine grain 8px, so without it the six cards in a grid never line up
   their prices. Centred, so each sample still sits on the same optical line. */
.product__sample {
  margin: 16px 22px 0; padding: 12px 16px; height: 104px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; overflow: hidden;
  background: var(--bone); border: 1px solid var(--ink-08); border-radius: var(--radius-sm);
}

.product__title { padding: 18px 22px 0; }
.product__title h3 { font-size: 23px; letter-spacing: -0.015em; }
.product__title h3 a { text-decoration: none; }
.product__title h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.product__mm { margin-top: 5px; font-family: var(--font-mono); font-size: var(--small-xs); color: var(--fg-2); }

.product__price { padding: 18px 22px 0; }
.price {
  font-family: var(--font-ui); font-size: var(--price); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--price-color);
  font-variant-numeric: tabular-nums;
}
.price small { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--price-unit); }
.price__sub { margin-top: 8px; font-size: var(--small); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.price__rows { margin-top: 14px; border-top: 1px solid var(--ink-08); }
.price__row {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--ink-08); font-size: var(--small); color: var(--fg-2);
}
.price__row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.price__row:last-child { border-bottom: 0; }
.product__margin {
  margin: 14px 22px 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--tier-active); font-size: var(--small-xs); line-height: 1.5; color: var(--surf-deep);
}
.product__title h3 { min-height: 0; }
.product__margin b { font-variant-numeric: tabular-nums; }
.product__foot { padding: 18px 22px 22px; margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product__foot > * { position: relative; z-index: 1; }
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Quantity stepper ---------- */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); }
.qty button {
  width: var(--qty-height); min-height: var(--qty-height); padding: 0;
  background: var(--paper); border: 0; color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer;
  transition: background var(--duration) var(--ease-tide);
}
.qty button:hover { background: var(--sku-bg); }
.qty button[disabled] { opacity: 0.35; cursor: default; }
.qty input {
  width: 56px; min-height: var(--qty-height); padding: 0 6px; text-align: center;
  border: 0; border-inline: 1px solid var(--border); background: var(--paper);
  font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.qty__label { font-size: var(--small); color: var(--fg-2); }
.product--active { border-color: var(--surf); box-shadow: inset 0 0 0 1px var(--surf); }

/* ---------- Price list ---------- */
table.price-list { width: 100%; font-size: var(--body-xs); font-variant-numeric: tabular-nums; }
table.price-list caption { text-align: left; padding: 16px 20px; border-bottom: var(--rule); font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
table.price-list thead th {
  padding: 12px 16px; background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500; letter-spacing: 0.03em; text-align: right;
}
table.price-list thead th:first-child, table.price-list thead th:nth-child(2) { text-align: left; }
table.price-list th, table.price-list td { padding: 13px 16px; border-top: 1px solid var(--ink-08); vertical-align: middle; text-align: right; }
table.price-list tbody th { text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; }
table.price-list td { color: var(--fg-2); }
table.price-list td.t-left { text-align: left; }
table.price-list td.t-price { font-weight: 700; color: var(--ink); font-size: var(--body); white-space: nowrap; }
table.price-list tbody tr:hover { background: var(--ink-04); }
table.price-list tbody tr.is-grade-break th, table.price-list tbody tr.is-grade-break td { border-top: 1.5px solid var(--ink-20); }

/* ---------- Volume tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: var(--radius); overflow: hidden; }
.tier { background: var(--paper); padding: 22px; min-width: 0; transition: background var(--duration) var(--ease-tide); }
.tier__label { font-family: var(--font-mono); font-size: var(--label); color: var(--fg-2); }
.tier__off { margin-top: 10px; font-family: var(--font-ui); font-size: var(--figure-sm); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tier__note { margin-top: 8px; font-size: var(--small-xs); line-height: 1.5; color: var(--fg-2); }
.tier[data-active="true"] { background: var(--tier-active); box-shadow: inset 3px 0 0 var(--surf); }
.tier[data-active="true"] .tier__off { color: var(--surf-deep); }
@media (max-width: 900px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tier-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Quote builder bar ----------
   Fixed to the bottom once the buyer has put a pallet in it. Hidden entirely
   at zero, so a page with nothing selected looks exactly as it did before. */
.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--abyss); color: var(--bone);
  border-top: 1px solid var(--bone-14); box-shadow: 0 -10px 40px rgba(6, 20, 28, 0.28);
  transform: translateY(100%); transition: transform 260ms var(--ease-tide);
}
.quote-bar.is-open { transform: translateY(0); }
.quote-bar[hidden] { display: none !important; }
.quote-bar__inner {
  max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap;
}
.quote-bar__figures { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; min-width: 0; }
.quote-bar__total { font-family: var(--font-ui); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.quote-bar__total small { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--bone-60); letter-spacing: 0; }
.quote-bar__meta { font-size: var(--small); color: var(--bone-72); font-variant-numeric: tabular-nums; }
.quote-bar__meta b { color: var(--surf-light); font-weight: 600; }
.quote-bar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote-bar__clear { background: none; border: 0; color: var(--bone-72); font-size: var(--small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.quote-bar__clear:hover { color: var(--bone); }
/* Fallback only. js/site.js replaces this with the bar's measured height. */
body.has-quote { padding-bottom: 108px; }
@media (max-width: 720px) {
  .quote-bar__inner { padding: 14px 20px; gap: 12px 18px; }
  .quote-bar__total { font-size: 25px; }
  .quote-bar__actions { width: 100%; }
  .quote-bar__actions .btn { flex: 1 1 auto; }
  body.has-quote { padding-bottom: 232px; }
}
@media (prefers-reduced-motion: reduce) { .quote-bar { transition: none; } }

/* ---------- Quote carried into the inquiry form ---------- */
.quote-context {
  margin-bottom: 22px; padding: 18px 20px;
  border: 1px solid var(--border); border-left: 3px solid var(--surf);
  border-radius: var(--radius-sm); background: var(--sku-bg);
}
.quote-context__label { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: var(--label-sm); letter-spacing: var(--label-tracking-tight); color: var(--surf-deep); }
.quote-context__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quote-context__list li { display: flex; justify-content: space-between; gap: 16px; font-size: var(--small); color: var(--ink); font-variant-numeric: tabular-nums; }
.quote-context__total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sku-border); display: flex; justify-content: space-between; gap: 16px; font-size: var(--body-xs); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Bag-size explainer on the grade pages ---------- */
.buy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 720px) { .buy-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Outbound links to the parent ----------
   Buying happens at aragocorminerals.com. Anything that leaves for it is
   marked, because a buyer should know they are crossing to another site
   before they click rather than after. */
.ext-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--surf); font-size: var(--small); font-weight: 600; text-decoration: none;
  transition: color var(--duration) var(--ease-tide);
}
.ext-link:hover, .ext-link:focus-visible { color: var(--surf-deep); text-decoration: underline; text-underline-offset: 3px; }
.band-ink .ext-link, .band-abyss .ext-link { color: var(--surf-light); }
.band-ink .ext-link:hover, .band-abyss .ext-link:hover { color: var(--bone); }
.band-sand .ext-link { color: var(--ink); }
/* The icon sits after the link text. Where its container already spaces its
   children with a flex gap (.ext-link, .btn) that gap is the spacing; anywhere
   else — footer lists, prose, contact rows — it needs its own margin. */
.ext-icon { flex: none; opacity: 0.8; margin-left: 5px; vertical-align: -1px; }
.ext-link > .ext-icon, .btn > .ext-icon { margin-left: 0; }
.ac-foot__list a { gap: 0; }
.btn .ext-icon { opacity: 0.75; }
table.price-list td .ext-link { min-height: 0; }

/* The band that says where ordering happens. One per page at most, and it
   carries the parent's name rather than a bare link, because "AragoCor
   Minerals" is the thing a dealer is being asked to transact with. */
.parent-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: 28px 32px; border: 1px solid var(--sku-border); border-left: 4px solid var(--surf);
  border-radius: var(--radius); background: var(--sku-bg);
}
.parent-cta__label { font-family: var(--font-mono); font-size: var(--label); color: var(--surf-deep); }
.parent-cta h2, .parent-cta h3 { margin-top: 10px; font-size: 23px; letter-spacing: -0.015em; }
.parent-cta p { margin-top: 10px; font-size: var(--body-xs); line-height: var(--leading-copy); color: var(--fg-2); max-width: 62ch; }
.parent-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.band-ink .parent-cta, .band-abyss .parent-cta {
  background: var(--bone-08); border-color: var(--bone-40); border-left-color: var(--surf-light);
}
.band-ink .parent-cta__label, .band-abyss .parent-cta__label { color: var(--surf-light); }
.band-ink .parent-cta p, .band-abyss .parent-cta p { color: var(--bone-78); }
.band-sand .parent-cta { background: rgba(255,255,255,0.42); border-color: var(--ink-20); border-left-color: var(--ink); }
.band-sand .parent-cta__label { color: var(--ink); }
.band-sand .parent-cta p { color: var(--ink-80); }
@media (max-width: 900px) {
  .parent-cta { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .parent-cta__actions .btn { width: 100%; }
}

/* The quote bar's secondary route, next to Clear. */
.quote-bar__alt { color: var(--bone-72); font-size: var(--small); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.quote-bar__alt:hover { color: var(--bone); }

/* ---------- Literature library ----------
   Spec sheets, safety data, price list, photography. A trade buyer looks for
   this before they look at anything else, so the rows are dense and scannable
   rather than card-shaped. A row whose file does not exist yet is not hidden
   and not a dead link: it says so and offers to have it sent. */
.lit-group + .lit-group { margin-top: 32px; }
.lit-group__head { margin-bottom: 14px; }
.lit-group__head h3 { font-size: var(--h4); }
.lit-group__head p { margin-top: 5px; font-size: var(--small); line-height: 1.5; color: var(--fg-2); max-width: 72ch; }
.lit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-12); }
.lit-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center; gap: 8px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--ink-08);
}
.lit-row__kind { font-family: var(--font-mono); font-size: var(--label-sm); letter-spacing: 0.04em; color: var(--fg-3); }
.lit-row__title { font-size: var(--body-xs); font-weight: 600; color: var(--ink); line-height: 1.35; }
.lit-row__note { margin-top: 3px; font-size: var(--small-xs); line-height: 1.45; color: var(--fg-2); }
.lit-row__meta { font-family: var(--font-mono); font-size: var(--label-sm); color: var(--fg-3); margin-top: 4px; }
.lit-row__action { justify-self: end; white-space: nowrap; }
.lit-row__action .ext-link, .lit-row__action .lit-dl { min-height: 36px; }
.lit-dl {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  color: var(--surf); font-size: var(--small); font-weight: 600; text-decoration: none;
}
.lit-dl:hover { color: var(--surf-deep); text-decoration: underline; text-underline-offset: 3px; }
.lit-row--pending .lit-row__title { color: var(--fg-2); }
.band-ink .lit-list, .band-abyss .lit-list { border-top-color: var(--bone-40); }
.band-ink .lit-row, .band-abyss .lit-row { border-bottom-color: var(--bone-14); }
.band-ink .lit-row__title, .band-abyss .lit-row__title { color: var(--bone); }
.band-ink .lit-row__note, .band-ink .lit-row__meta,
.band-abyss .lit-row__note, .band-abyss .lit-row__meta { color: var(--bone-72); }
@media (max-width: 720px) {
  .lit-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .lit-row__action { justify-self: start; }
}

/* ---------- At-a-glance panel ----------
   The facts a trade buyer checks first, beside the hero rather than under it. */
.facts {
  background: var(--paper); border: var(--rule); border-radius: var(--radius);
  padding: 4px 20px; box-shadow: var(--shadow-1);
}
.facts__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--ink-08); font-size: var(--small);
}
.facts__row:last-child { border-bottom: 0; }
.facts__row dt, .facts__k { color: var(--fg-2); }
.facts__row dd, .facts__v { margin: 0; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.facts__v .sku { margin-left: 6px; }

/* =====================================================================
   MARKETS, FORMATS, COMPLIANCE, FAQ
   ===================================================================== */

/* ---------- Market cards ----------
   A distributor arrives knowing their trade, not our grade names, so this is
   the index everything else hangs off. Specification, not persuasion. */
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: var(--radius); overflow: hidden; }
.market { background: var(--paper); padding: 22px 22px 20px; min-width: 0; display: flex; flex-direction: column; }
.market h3 { font-size: var(--h3); letter-spacing: -0.01em; }
.market h3 a { text-decoration: none; }
.market h3 a:hover { color: var(--surf); }
.market__summary { margin-top: 8px; font-size: var(--small); line-height: 1.5; color: var(--fg-2); }
.market__spec { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--ink-08); display: grid; gap: 7px; }
.market__spec > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; font-size: var(--small-xs); }
.market__spec dt { color: var(--fg-3); }
.market__spec dd { margin: 0; color: var(--ink); }
.market .tag { margin-top: 14px; align-self: flex-start; }
/* Five markets in a three-column grid leave a hole in the last row, and the
   grid's hairline background makes that hole visible. The odd card out spans
   the remainder instead. Stated for both column counts. */
.market-grid > :last-child:nth-child(3n + 2) { grid-column: span 2; }
@media (max-width: 960px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-grid > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .market-grid > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .market-grid { grid-template-columns: minmax(0, 1fr); }
  .market-grid > :last-child { grid-column: auto !important; }
}

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; line-height: 1.2; white-space: nowrap;
}
.tag--held { background: rgba(23, 112, 126, 0.10); border: 1px solid var(--sku-border); color: var(--surf-deep); }
.tag--quiet { background: var(--ink-04); border: 1px solid var(--ink-12); color: var(--fg-2); }

/* ---------- Format table inside a product card ---------- */
table.fmt { width: 100%; font-size: var(--small); border-top: 1px solid var(--ink-08); }
table.fmt th, table.fmt td { padding: 9px 22px; border-bottom: 1px solid var(--ink-08); text-align: left; vertical-align: baseline; }
table.fmt th { font-weight: 500; color: var(--fg-2); }
table.fmt th .sku { margin-right: 0; }
/* Stacked, not inline: at card width the SKU and the format name broke
   mid-phrase ("AR-F20 20 / lb bag"). */
.fmt__name { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; }
table.fmt tr:last-child th, table.fmt tr:last-child td { border-bottom: 0; }
table.fmt .t-price { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.fmt .t-sub { text-align: right; color: var(--fg-3); font-size: var(--small-xs); white-space: nowrap; }
.per { font-weight: 500; color: var(--fg-3); }
.t-sub { color: var(--fg-3); font-size: var(--small-xs); }
td .t-sub { margin-top: 3px; }

/* ---------- Pre-launch notice ----------
   One quiet line per page instead of an amber chip beside every figure. The
   chips read as an unfinished draft; this reads as a price list not yet in
   force, which is what it is. */
.notice {
  padding: 11px 16px; margin-bottom: 22px; max-width: none;
  border: 1px solid var(--ink-12); border-left: 3px solid var(--sand-deep);
  border-radius: var(--radius-sm); background: var(--ink-04);
  font-size: var(--small); line-height: 1.5; color: var(--fg-2);
}
.notice strong { color: var(--ink); }
.band-ink .notice, .band-abyss .notice { background: var(--bone-08); border-color: var(--bone-40); border-left-color: var(--sand); color: var(--bone-78); }
.band-ink .notice strong, .band-abyss .notice strong { color: var(--bone); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--ink-12); max-width: 92ch; }
.faq { border-bottom: 1px solid var(--ink-08); }
.faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 0; font-size: var(--body-xs); font-weight: 600; color: var(--ink);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--duration) var(--ease-tide);
}
.faq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq > summary:hover { color: var(--surf); }
.faq > p { margin: 0 0 16px; padding-right: 32px; font-size: var(--body-xs); line-height: var(--leading-body); color: var(--fg-2); max-width: 78ch; }
@media (prefers-reduced-motion: reduce) { .faq > summary::after { transition: none; } }

/* ---------- Inline button that reads as a link ---------- */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--surf); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--surf-deep); }

/* ---------- Lot panel on a light ground ---------- */
.lot-panel--light { background: var(--paper); border: var(--rule); color: var(--ink); }
.lot-panel--light .lot-panel__empty { color: var(--fg-2); }
.lot-panel--light .lot-id { color: var(--ink); }
.lot-panel--light .lot-meta, .lot-panel--light .lot-row span:first-child { color: var(--fg-2); }
.lot-panel--light .lot-rows { border-top-color: var(--ink-12); }
.lot-panel--light .lot-row { border-bottom-color: var(--ink-08); }
.lot-panel--light .lot-row span:last-child { color: var(--ink); }
.lot-panel--light .bar-track { background: var(--ink-08); }
.lot-panel--light .bar-fill { background: var(--sand-deep); }
.lot-panel--light .bar-row__k, .lot-panel--light .bar-row__v { color: var(--fg-2); }
.lot-panel--light .lot-status { border-top-color: var(--ink-12); color: var(--fg-2); }
.lot-panel--light .lot-status strong { color: var(--ink) !important; }
.lot-panel--light .lot-panel__err { color: var(--error-text); }
.lot-panel--light .eyebrow { color: var(--fg-2); }

/* ---------- Two-column tier grid, for a narrower column ---------- */
.tier-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .tier-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Product card header, now two lines ---------- */
.product__head { align-items: flex-start; }
.product__head h3 { font-size: var(--h3); letter-spacing: -0.01em; }
.product__head h3 a { text-decoration: none; }
.product__head h3 a:hover { color: var(--surf); }

/* The quantity stepper now lives in a table cell on the estimate table. */
table.data .qty { margin: -4px 0; }

/* ---------- Product photography ----------
   A slot holds the exact ratio its photograph will occupy and prints the shot
   brief inside it, so the page does not reflow when the image lands and the
   shot list is the site rather than a separate document. Deliberately neutral:
   a reserved image area, not a warning. */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; object-fit: cover; border: var(--rule); border-radius: var(--radius); background: var(--bone); }
.shot__slot {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 20px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--ink-04) 0 10px, transparent 10px 20px), var(--bone);
  color: var(--fg-3);
}
.shot__icon { flex: none; opacity: 0.55; }
.shot__brief { max-width: 46ch; margin: 0; font-size: var(--small-xs); line-height: 1.45; color: var(--fg-2); }
.shot__meta { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-3); }
.shot__cap { margin-top: 8px; font-size: var(--small-xs); color: var(--fg-3); }
/* A drawing standing in for a photograph. It is composed to its own frame,
   so it is fitted rather than cropped the way a photograph is. */
.shot--figure img, .shot--contain img { object-fit: contain; background: var(--paper); }
.shot--contain img { padding: 14px; }
/* The hero product shot: it is the page's lead image, so it is not cropped
   into a card but sits at its own ratio beside the headline. */
.hero__grid--product { align-items: center; gap: 44px 56px; }
.shot--hero img { border-radius: var(--radius); border: var(--rule); background: var(--paper); }
.shot--hero .shot__cap { text-align: right; }
@media (max-width: 900px) { .hero__grid--product { gap: 28px; } }

/* The verified-facts band: one row of short, checkable statements. */
.factbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; }
.factbar > div { padding: 22px 22px 22px 0; border-right: var(--rule); }
.factbar > div:last-child { border-right: 0; }
.factbar > div + div { padding-left: 22px; }
.factbar dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: none; color: var(--fg-3); }
.factbar dd { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
@media (max-width: 1000px) { .factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar > div { border-right: 0; border-bottom: var(--rule); padding: 18px 0; }
  .factbar > div + div { padding-left: 0; }
  .factbar > div:nth-child(odd) { border-right: var(--rule); padding-right: 18px; }
  .factbar > div:nth-child(even) { padding-left: 18px; } }
@media (max-width: 560px) { .factbar { grid-template-columns: minmax(0, 1fr); }
  .factbar > div:nth-child(odd) { border-right: 0; padding-right: 0; }
  .factbar > div:nth-child(even) { padding-left: 0; } }

.market__cta { margin-top: 14px; }
.shot--card { margin: 0; }
.shot--card .shot__slot { border-radius: 0; border-inline: 0; border-top: 0; }
.shot--card .shot__brief { font-size: 11.5px; max-width: 38ch; }
.shot--card img { border-radius: 0; border-inline: 0; border-top: 0; }
.band-ink .shot__slot, .band-abyss .shot__slot {
  border-color: var(--bone-40); background: var(--bone-04); color: var(--bone-60);
}
.band-ink .shot__brief, .band-abyss .shot__brief { color: var(--bone-72); }
.band-ink .shot__meta, .band-abyss .shot__meta { color: var(--bone-60); }
@media (max-width: 620px) {
  .shot__brief { font-size: 11.5px; }
  .shot__slot { padding: 14px; }
}

/* Three pack photographs in a row, on the distributor page. */
.shot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .shot-row { grid-template-columns: minmax(0, 1fr); } }