/* Anfa Materials — design layer v2.
   v1 added radius and shadow to a page that was still laid out as a document.
   This one changes the structures that made it read that way: the label/paragraph
   rows become cards with an index numeral, inner pages get a real header band,
   the header condenses on scroll, and tables get a sticky head.
   Content is untouched throughout. */

:root{
  --ink:#1C1A17; --char:#26231F; --char2:#332F29;
  --cream:#F2F0EC; --cream2:#EDEAE3; --panel:#FFFDFB; --panel2:#F8F6F1;
  --line:#E4DFD6; --line2:#D3CCC1;
  --ox:#B8501E; --oxl:#C2703F; --oxd:#8F3C13;
  --muted:#7D766B; --faint:#9B9385;
}

/* ------------------------------------------------------------- page ground */
body{ background:var(--cream) !important; }
main{ position:relative; }

/* ---------------------------------------------------------- header behaviour */
header[style]{
  position:sticky !important; top:0 !important; z-index:60 !important;
  backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(28,26,23,.92) !important;
  transition:padding .24s ease, background-color .24s ease, box-shadow .24s ease !important;
}
header[style] > div{ transition:padding .24s ease !important; }
body.anfa-scrolled header[style]{ box-shadow:0 6px 24px rgba(0,0,0,.28) !important; background:rgba(28,26,23,.97) !important; }
body.anfa-scrolled header[style] > div{ padding-top:7px !important; padding-bottom:7px !important; }
header nav a{ position:relative !important; border-bottom:0 !important; padding:6px 0 !important; }
header nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--oxl); transition:right .26s cubic-bezier(.22,.61,.36,1);
}
header nav a:hover::after{ right:0; }

/* breadcrumb strip */
div[style*="background: #eae7e0"],
div[style*="background: rgb(234, 231, 224)"]{
  background:linear-gradient(180deg,#EDEAE3 0%, var(--cream) 100%) !important;
  border-bottom:1px solid var(--line) !important;
}

/* ----------------------------------------------------- inner page header band */
.anfa-pagehead{
  background:linear-gradient(168deg, var(--char) 0%, var(--ink) 62%, #171512 100%);
  color:#F7F5F1; margin:0 0 0; position:relative; overflow:hidden;
}
.anfa-pagehead::after{
  content:''; position:absolute; right:-160px; top:-220px; width:620px; height:620px;
  background:radial-gradient(circle at center, rgba(184,80,30,.20), rgba(184,80,30,0) 66%);
  pointer-events:none;
}
.anfa-pagehead-in{ max-width:1200px; margin:0 auto; padding:78px 40px 74px; position:relative; z-index:1; }
.anfa-pagehead h1{
  margin:0 0 18px !important; font-size:46px !important; line-height:1.1 !important;
  letter-spacing:-.022em !important; color:#F7F5F1 !important; max-width:20ch;
}
.anfa-pagehead p{
  margin:0 !important; font-size:16.5px !important; line-height:1.68 !important;
  color:#B3AB9E !important; max-width:64ch !important;
}
.anfa-pagehead .anfa-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oxl); margin-bottom:20px; display:block;
}

/* --------------------------------------------------- label / paragraph rows */
/* These were the single biggest reason the site read as a document: a 300px
   label column, a paragraph, and a hairline, repeated down the page. */
div[style*="grid-template-columns: 300px 1fr"]{
  border-bottom:0 !important; padding:30px 32px !important; margin-bottom:14px !important;
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:6px !important; box-shadow:0 1px 2px rgba(38,35,31,.04) !important;
  position:relative !important; overflow:hidden !important;
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease !important;
}
div[style*="grid-template-columns: 300px 1fr"]:hover{
  box-shadow:0 10px 30px rgba(38,35,31,.09) !important;
  border-color:var(--line2) !important; transform:translateY(-2px) !important;
}
div[style*="grid-template-columns: 300px 1fr"]::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--ox), rgba(184,80,30,0));
  opacity:0; transition:opacity .22s ease;
}
div[style*="grid-template-columns: 300px 1fr"]:hover::before{ opacity:1; }
div[style*="grid-template-columns: 300px 1fr"] h2{
  font-size:19px !important; letter-spacing:-.008em !important; line-height:1.3 !important;
}
/* the mono index becomes a real numeral */
div[style*="grid-template-columns: 300px 1fr"] > div:first-child > div:first-child{
  font-size:26px !important; color:var(--line2) !important; letter-spacing:.02em !important;
  font-weight:600 !important; margin-bottom:10px !important;
}
/* the 2px rule above the stack is no longer doing anything */
div[style*="border-top: 2px solid #26231f"],
div[style*="border-top: 2px solid rgb(38, 35, 31)"]{ border-top:0 !important; }

/* --------------------------------------------------------------- grade chips */
a[href="products.html"][style*="border: 1px solid #c9c2b6"],
a[href="products.html"][style*="border: 1px solid rgb(201, 194, 182)"]{
  border-radius:999px !important; padding:7px 14px !important; background:var(--panel2) !important;
}
a[href="products.html"][style*="border: 1px solid #c9c2b6"]:hover,
a[href="products.html"][style*="border: 1px solid rgb(201, 194, 182)"]:hover{
  background:#fff !important; border-color:var(--ox) !important;
  box-shadow:0 3px 10px rgba(38,35,31,.08) !important; transform:translateY(-1px) !important;
}

/* ------------------------------------------------------------------- tables */
table{ width:100% !important; }
/* NOT sticky. The spec table sits inside div{overflow-x:auto}, which is the
   sticky containing block — so top:56px pushed the header 56px DOWN inside the
   box and it covered the first data row (iodine number). Verified in Playwright:
   thead spanned 1047-1101 while row 1 spanned 1045-1087. */
thead th{
  background:var(--panel2) !important;
  border-bottom:1px solid var(--line2) !important;
}
div:has(> table){ border-radius:6px !important; }
tbody td{ border-top:1px solid #EFEBE4 !important; }

/* --------------------------------------------------------- closing CTA band */
.anfa-cta{
  background:linear-gradient(135deg, var(--char) 0%, var(--ink) 100%);
  color:#F7F5F1; margin-top:8px;
}
.anfa-cta-in{
  max-width:1200px; margin:0 auto; padding:64px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.anfa-cta h2{ margin:0 !important; font-size:29px !important; letter-spacing:-.018em !important;
  line-height:1.25 !important; color:#F7F5F1 !important; max-width:22ch; }
.anfa-cta p{ margin:10px 0 0 !important; font-size:15px !important; color:#B3AB9E !important; max-width:52ch; }
.anfa-cta a{
  background:var(--ox); color:#fff !important; padding:15px 30px; border-radius:3px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.anfa-cta a:hover{ background:var(--oxd) !important; text-decoration:none !important;
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(184,80,30,.34); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 720px){
  .anfa-pagehead-in{ padding:46px 20px 42px; }
  .anfa-pagehead h1{ font-size:31px !important; max-width:none; }
  .anfa-pagehead p{ font-size:15px !important; }
  .anfa-cta-in{ padding:44px 20px; flex-direction:column; align-items:flex-start; gap:24px; }
  .anfa-cta h2{ font-size:23px !important; max-width:none; }
  .anfa-cta a{ width:100%; text-align:center; box-sizing:border-box; }
  div[style*="grid-template-columns: 300px 1fr"]{ padding:22px 20px !important; }
  header[style]{ position:sticky !important; }
}

/* --------------------------------------------------------- grade ladder */
@media (max-width: 720px){
  /* stacked cards don't need a column header; the values are self-labelling */
  .anfa-ladder-head{ display:none !important; }
  .anfa-ladder-row{ gap:9px !important; padding:15px 16px !important; }
}

/* ================================================================== footer ==
   One footer, eight pages, built from shell.footerVals(). The old one was a
   single strip carrying a wordmark and a transport paragraph; this gives the
   site a proper foot — where to go next, who to contact, and the two notes that
   have to appear on every page. */
.anfa-foot{ background:var(--ink); color:#B3AB9E; margin-top:auto;
  border-top:3px solid var(--ox); }
.anfa-foot-top{
  max-width:1280px; margin:0 auto; padding:54px 32px 40px;
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
  gap:40px 44px; align-items:start;
}
.anfa-foot-tag{ margin:0 0 22px; font-size:13.5px; line-height:1.7; color:#9A9285; max-width:44ch; }
.anfa-foot-contact{ display:flex; flex-direction:column; gap:10px; }
.anfa-foot-contact > div{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.anfa-foot-k{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#6F6961; flex:0 0 104px;
}
.anfa-foot-v{ font-size:13px; line-height:1.55; color:#9A9285; flex:1; min-width:0; }
.anfa-foot-contact a{ font-size:13.5px; color:#E8E3DA; text-decoration:none;
  border-bottom:1px solid #4D4840; padding-bottom:1px; }
.anfa-foot-contact a:hover{ color:#fff; border-bottom-color:var(--ox); text-decoration:none; }

.anfa-foot-col{ display:flex; flex-direction:column; }
.anfa-foot-col a{
  display:block; font-size:13.5px; line-height:1.45; color:#A79F92; text-decoration:none;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.055); transition:color .15s ease;
}
.anfa-foot-col a:last-child{ border-bottom:0; }
.anfa-foot-col a:hover{ color:#fff; text-decoration:none; }
.anfa-foot-code{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; color:var(--ox); margin-bottom:2px;
}

.anfa-foot-note{
  max-width:1280px; margin:0 auto; padding:22px 32px 20px;
  border-top:1px solid rgba(255,255,255,.09);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 44px;
}
.anfa-foot-note p{ margin:0; font-size:12px; line-height:1.65; color:#7E776D; }
.anfa-foot-note .anfa-foot-k{ display:block; flex:none; margin-bottom:4px; }

.anfa-foot-base{
  max-width:1280px; margin:0 auto; padding:16px 32px 30px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; justify-content:space-between; gap:14px 32px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em; color:#6F6961;
}

@media (max-width: 900px){
  .anfa-foot-top{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px; }
  .anfa-foot-brand{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .anfa-foot-top{ grid-template-columns:1fr; padding:40px 20px 30px; }
  .anfa-foot-note{ grid-template-columns:1fr; padding:20px; }
  .anfa-foot-base{ padding:16px 20px 26px; flex-direction:column; gap:8px; }
  .anfa-foot-k{ flex-basis:100%; }
}

/* A grid or table that scrolls sideways gives no hint that it does, so the last
   column just looks clipped. This fades the right edge only while there is more
   to scroll to. */
.anfa-scroller{ position:relative; }
.anfa-scroller::after{
  content:''; position:absolute; top:1px; right:1px; bottom:1px; width:46px; pointer-events:none;
  background:linear-gradient(to right, rgba(251,250,248,0), rgba(251,250,248,.96));
  opacity:0; transition:opacity .18s ease;
}
.anfa-scroller.is-overflowing::after{ opacity:1; }
.anfa-scroller.is-scrolled-end::after{ opacity:0; }

/* The browser's default focus ring rendered as a dark bar across the grade cells and
   read as a glitch. Keyboard focus still needs to be obvious, so it is restyled to
   match rather than removed. */
button:focus{ outline:none; }
button:focus-visible{ outline:2px solid var(--ox); outline-offset:2px; }
a:focus-visible{ outline:2px solid var(--ox); outline-offset:3px; }

/* --------------------------------------------------- premium vs standard diff */
.anfa-diff-head, .anfa-diff-row{
  display:grid; grid-template-columns:1fr auto auto; gap:9px 22px; align-items:baseline;
}
.anfa-diff-head{ margin-bottom:9px; }
.anfa-diff-head span{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint,#9b9385); text-align:right;
}
.anfa-diff-head span:first-child{ text-align:left; }
.anfa-diff-head .anfa-diff-this{ color:var(--ox); }
.anfa-diff-row{ padding:4px 0; }
.anfa-diff-k{ font-size:13.5px; color:#45403a; }
.anfa-diff-v{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:#7d766b;
  text-align:right; white-space:nowrap;
}
.anfa-diff-mine{ color:#26231f; font-weight:600; }
.anfa-diff-v i{ display:none; }

@media (max-width: 720px){
  /* the three-column comparison cannot survive a 356px column, and the site-wide
     grid collapse turned it into an unlabelled vertical list. Each row becomes a
     small block instead, with the two values labelled inline. */
  .anfa-diff-head{ display:none !important; }
  .anfa-diff-row{
    display:block !important; padding:11px 0;
    border-bottom:1px solid rgba(38,35,31,.09);
  }
  .anfa-diff-row:last-child{ border-bottom:0; }
  .anfa-diff-k{ display:block; font-weight:600; color:#26231f; margin-bottom:5px; }
  .anfa-diff-v{ display:inline-block; text-align:left; margin-right:20px; white-space:normal; }
  .anfa-diff-v i{
    display:block; font-style:normal; font-size:9px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--faint,#9b9385); margin-bottom:2px;
  }
  .anfa-diff-mine i{ color:var(--ox); }
}

@media (max-width: 720px){
  /* a spec row carrying both the grade's value and the standard one has three things
     competing for 356px, which was breaking "Iodine number" mid-word. Give the label
     its own line and let the two values sit under it. */
  .anfa-spec-row{ flex-wrap:wrap; gap:4px 12px !important; }
  .anfa-spec-row .anfa-spec-k{ flex:0 0 100% !important; font-weight:600; color:#26231f !important; }
}