/* Advance Matting: homepage stylesheet, built from DESIGN.md (v2.0).
   Colours and spacing come only from the tokens below. Nothing outside :root is a hex value
   or an off-scale number. If you need a new value, add it to DESIGN.md first. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400.woff2") format("woff2"); }

:root {
  /* Colour (section 2) */
  --ink: #181717; --charcoal: #212020; --graphite: #3F3E3E; --muted: #5F5B58; --white: #FFFFFF;
  --mist: #F5F3F2; --sand: #FBE5CD; --rule: #D9D6D4; --track: #E9E8E7; --on-ink: #C9C4C0; --orange: #D6732C;
  /* Spacing scale (section 4) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: var(--s-48);
  --section-feature: var(--s-64);
  --band: var(--s-32);
  /* Header (section 12.1) */
  --hdr-top: 88px; --hdr-nav: 56px;
  /* Motion (section 7) */
  --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  /* Type families (section 3) */
  --font: "Montserrat", Arial, sans-serif;
  --font-contact: "Poppins", Arial, sans-serif;
}
@media (min-width: 56.25em) { :root { --section: var(--s-64); --section-feature: var(--s-96); --band: var(--s-48); } }
@media (min-width: 77.5em) { :root { --hdr-top: 96px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-top) + var(--s-16)); }
@media (min-width: 77.5em) { html { scroll-padding-top: calc(var(--hdr-top) + var(--hdr-nav) + var(--s-16)); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: var(--s-4); }
.on-ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-8); top: calc(-1 * var(--s-96)); z-index: 100; background: var(--white); color: var(--ink); padding: var(--s-12) var(--s-16); font-weight: 700; }
.skip-link:focus { top: var(--s-8); }
.wrap { max-width: calc(1240px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Type (section 3) */
.t-display { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; max-width: 11em; }
.t-statement { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.t-h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.t-card-statement { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.005em; }
.t-h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.t-lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 400; line-height: 1.5; max-width: 34em; }
.t-small { font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.t-eyebrow { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; }
.t-contact { font-family: var(--font-contact); font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--s-12) var(--s-24); border: 1px solid var(--orange); border-radius: 0; background: var(--orange); color: var(--ink); font: 700 1rem/1.25 var(--font); text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-ink .btn:not(.btn--outline):hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-ink .btn--outline { border-color: var(--white); color: var(--white); }
.on-ink .btn--outline:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-16); }
@media (max-width: 37.4375em) { .actions .btn, .email-card .btn { width: 100%; } }

/* Header (pinned) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--white); }
.header-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); min-height: var(--hdr-top); }
.brand { display: block; min-width: 0; flex: 0 1 auto; padding-block: var(--s-8); }
.brand img { width: 150px; max-width: 100%; height: auto; }
.header-right { display: flex; align-items: center; gap: var(--s-8); }
.utility { display: none; gap: var(--s-24); }
.utility a { display: inline-block; padding-block: var(--s-12); color: var(--on-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.utility a:hover { color: var(--white); }
.tab { flex: none; width: 44px; height: 62px; }
@media (max-width: 29.9375em) { .tab { display: none; } }
.header-btn { padding: var(--s-12) var(--s-16); }
.menu-toggle[hidden] { display: none; }
.site-nav { background: var(--charcoal); }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; max-height: calc(100dvh - var(--hdr-top)); overflow-y: auto; }
.menu-phone a { display: block; padding: var(--s-16) var(--gutter); color: var(--white); text-decoration: none; }
.menu > li > a { display: block; padding: var(--s-16) var(--gutter); color: var(--white); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; text-decoration: none; }
.menu > li.has-sub:not(:first-child) > .sub { display: none; }
.sub a { display: flex; justify-content: space-between; gap: var(--s-24); padding: var(--s-16) var(--gutter) var(--s-16) calc(var(--gutter) + var(--s-24)); color: var(--white); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.zn { color: var(--on-ink); }
.sub-toggle { display: none; }
@media (max-width: 77.4375em) {
  .js .menu > li.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
  .js .menu > li.has-sub > .sub { grid-column: 1 / -1; }
  .js .menu > li.has-sub.is-sub-open > .sub { display: block; }
  .js .sub-toggle { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--white); font: 700 1.5rem/1 var(--font); cursor: pointer; }
  .js .sub-toggle::before { content: "+"; }
  .js .sub-toggle[aria-expanded="true"]::before { content: "\2212"; }
  .js .sub-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
}
@media (min-width: 77.5em) {
  .brand img { width: 220px; }
  .utility { display: flex; }
  .tab { width: 58px; height: 80px; }
  .call-link, .menu-toggle, .menu-phone { display: none; }
  .js .site-nav, .js .site-nav.is-open { display: block; max-height: none; overflow: visible; }
  .menu { display: flex; gap: var(--s-32); }
  .menu > li { position: relative; }
  .menu > li.right { margin-left: auto; }
  .menu > li > a { padding: var(--s-16) 0; border-bottom: 3px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
  .menu > li > a:hover, .menu > li > a[aria-current="page"] { border-bottom-color: var(--orange); }
  .has-sub > a::after { content: "\25BE"; margin-left: var(--s-8); }
  .menu > li.has-sub:not(:first-child) > .sub { display: block; }
  .sub { position: absolute; left: 0; top: 100%; z-index: 10; width: max-content; padding: var(--s-8) 0; opacity: 0; visibility: hidden; transform: translateY(var(--s-4)); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .has-sub.is-closed > .sub { opacity: 0; visibility: hidden; }
  .sub a { padding: var(--s-12) var(--s-24); transition: background-color var(--dur-fast) var(--ease); }
  .sub { background: var(--orange); }
  .sub a { color: var(--ink); }
  .sub .zn { color: var(--ink); }
  .sub a:hover, .sub a.is-pressed { background: var(--ink); color: var(--white); }
  .sub a:hover .zn, .sub a.is-pressed .zn { color: var(--on-ink); }
  .sub a:focus-visible { outline-color: var(--ink); outline-offset: -3px; }
  .sub a:hover:focus-visible { outline-color: var(--white); }
  .sub--wide { columns: 2; column-gap: 0; }
  .sub--wide li { break-inside: avoid; }
}

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; background: var(--ink); color: var(--white); overflow: hidden; }
.hero__photo { order: -1; width: 100%; aspect-ratio: 5 / 2; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 90%; }
.hero__inner { position: relative; display: flex; flex-direction: column; padding-top: var(--s-32); padding-bottom: var(--s-48); }
.hero__inner .t-display { margin-bottom: var(--s-24); }
.hero__inner .t-lead { margin-bottom: var(--s-32); }
.hero__inner .actions { order: 0; margin-top: 0; margin-bottom: var(--s-32); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.chips .chip-i { padding: var(--s-4) var(--s-8); border: 1px solid var(--rule); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.spec dt.spec__dim { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
@media (min-width: 56.25em) {
  .hero__inner { display: block; }
  .hero__inner .actions { order: 0; margin-top: 0; margin-bottom: var(--s-48); }
}
@media (min-width: 77.5em) {
  .hero { display: block; }
  .hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; aspect-ratio: auto; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
  .hero__inner { padding-block: var(--s-96); }
  .hero__inner .actions { margin-bottom: var(--s-48); }
}
.finder { display: grid; gap: var(--s-16); max-width: 40em; padding: var(--s-24); background: var(--charcoal); border-top: 3px solid var(--orange); }
.finder__row { display: grid; grid-template-columns: 1fr; gap: var(--s-16); align-items: end; }
.field { display: grid; gap: var(--s-8); }
.field label { font-size: 0.9375rem; line-height: 1.5; color: var(--white); }
.field select { width: 100%; min-height: 48px; padding: var(--s-12) var(--s-16); border: 0; border-radius: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--font); }
@media (min-width: 37.5em) { .finder__row { grid-template-columns: 1fr 1fr auto; } }

/* Proof band */
.proof { background: var(--ink); color: var(--white); border-top: 3px solid var(--orange); padding-block: var(--s-24); }
.proof ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-24); }
.proof li { display: grid; gap: var(--s-4); align-content: start; }
.proof .t-eyebrow { color: var(--on-ink); }
@media (min-width: 37.5em) { .proof ul { grid-template-columns: repeat(4, 1fr); column-gap: var(--s-48); } }

/* Section scaffolding */
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section__title { margin-bottom: var(--s-24); }
.section__title--intro { margin-bottom: var(--s-8); }
.section__intro { margin-bottom: var(--s-24); max-width: 34em; color: var(--graphite); }
.note { margin-top: var(--s-32); color: var(--muted); }

/* Reliability band */
.reliability { position: relative; overflow: hidden; padding-block: var(--section-feature); background: var(--ink); color: var(--white); }
.reliability::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background: var(--charcoal); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.reliability .wrap { position: relative; z-index: 1; }
.reliability .t-statement { margin-bottom: var(--s-32); }
.rely__stat { display: grid; gap: var(--s-8); margin-bottom: var(--s-32); max-width: 34em; }
.rely__fig { color: var(--orange); max-width: none; }
.rely__cap { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; }
.rely { display: grid; gap: var(--s-24); grid-template-columns: 1fr; margin-bottom: var(--s-32); }
.rely .t-h3 { margin-bottom: var(--s-8); }
@media (min-width: 56.25em) { .rely { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-32); } }

/* Cards (range, industry) */
.grid { display: grid; gap: var(--s-24); grid-template-columns: 1fr; }
.card { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.card__media { position: relative; overflow: hidden; background: var(--track); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card--range { background: var(--white); border: 1px solid var(--rule); }
.card--range:hover { border-color: var(--ink); }
.card--range .card__media { aspect-ratio: 16 / 10; }
.zone-tag { position: absolute; top: 0; left: 0; padding: var(--s-8) var(--s-12); background: var(--ink); color: var(--orange); }
.card__body { display: grid; gap: var(--s-8); align-content: start; padding: var(--s-24); }
.card__body .t-eyebrow { color: var(--graphite); order: -1; } /* the title is first in the DOM so a link name starts with it */
.card__body .t-small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card--tile { background: var(--white); }
.card--tile .card__media { aspect-ratio: 3 / 2; }
.card--tile .t-h3 { padding: var(--s-16); }
.card--tile:hover .t-h3 { text-decoration: underline; }
.range-grid { grid-template-columns: 1fr; }
.industry-grid { grid-template-columns: 1fr; }
.more { margin-top: var(--s-32); }
@media (min-width: 30em) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 37.5em) { .range-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56.25em) { .range-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .industry-grid { grid-template-columns: repeat(5, 1fr); } }

/* Steps */

/* Help band */
.help { background: var(--sand); padding-block: var(--band); }
.help .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-48); }
.help__text, .help__contact { display: grid; gap: var(--s-8); }
.help__contact { gap: var(--s-4); }
.help__text p { color: var(--graphite); }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-48); padding-top: var(--s-64); padding-bottom: var(--s-48); }
.footer-brand { display: grid; gap: var(--s-16); align-content: start; }
.footer-brand img { width: 214px; height: auto; }
.footer-brand p:first-of-type { color: var(--white); }
.footer-col h2 { margin-bottom: var(--s-16); color: var(--orange); }
.footer-col ul { display: grid; gap: var(--s-12); }
.footer-col a { color: var(--white); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-base { padding-block: var(--s-24); border-top: 1px solid var(--graphite); }
@media (min-width: 30em) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 77.5em) { .footer-grid { grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr 1.25fr; } .footer-brand { grid-column: auto; } }

/* Press (DESIGN.md section 7: input timing and interruptibility).
   :active responds on pointer-down for a mouse; the script adds .is-pressed on pointer-down so touch screens get the
   same instant response. Every rule below is a transition target, so pressing and releasing mid-flight re-targets
   from the value currently on screen. */
a, button, select, label, summary, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.menu a, .sub a { transition: background-color var(--dur-fast) var(--ease); }
.btn:active, .btn.is-pressed { transform: scale(0.97); }
.btn.is-pressed { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-ink .btn.is-pressed { background: var(--white); border-color: var(--white); color: var(--ink); }
.utility a.is-pressed { color: var(--white); }
.footer-col a.is-pressed { text-decoration: underline; }
.card--range.is-pressed { border-color: var(--ink); }
.card.is-pressed .card__media img { transform: scale(1.03); }
.card--tile.is-pressed .t-h3 { text-decoration: underline; }
.menu-phone a.is-pressed, .sub a.is-pressed { background: var(--ink); }
/* Disclosures, the "+" group buttons and the guide recovery buttons: same instant, re-targetable press. */
.js .sub-toggle { transition: background-color var(--dur-fast) var(--ease); }
.js .sub-toggle.is-pressed { background: rgba(255, 255, 255, 0.14); }
.guide-empty__btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.guide-empty__btn:active, .guide-empty__btn.is-pressed { background: var(--ink); color: var(--white); transform: scale(0.97); }
.more-filters summary, details.faq summary { transition: background-color var(--dur-fast) var(--ease); }
.more-filters summary.is-pressed, details.faq summary.is-pressed { background: var(--mist); }
@media (max-width: 77.4375em) { .menu > li > a.is-pressed { background: var(--ink); } }
@media (min-width: 77.5em) { .menu > li > a.is-pressed { border-bottom-color: var(--orange); } }
/* Reduced motion (section 7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .card:hover .card__media img, .card.is-pressed .card__media img { transform: none; }
  .btn:active, .btn.is-pressed, .guide-empty__btn:active, .guide-empty__btn.is-pressed { transform: none; }
}

/* Inner pages (DESIGN.md sections 5 and 8) */
.page-head { background: var(--white); padding-top: var(--s-32); padding-bottom: var(--s-64); }
.page-head .t-display { margin-bottom: var(--s-24); }
.page-head--photo { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.page-head__photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.page-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-head__photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--ink); opacity: 0.8; }
.page-head--photo .wrap { position: relative; z-index: 1; }
.crumbs { margin-bottom: var(--s-24); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-8); }
.crumbs a { color: inherit; }
.crumbs a:hover { text-decoration: underline; }
.page-head--photo .crumbs { color: var(--on-ink); }

.delivery { background: var(--mist); padding-block: var(--s-16); }
.delivery .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8) var(--s-16); }
.delivery .t-eyebrow { color: var(--graphite); }

.product-grid { grid-template-columns: 1fr; }
@media (min-width: 37.5em) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56.25em) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 77.5em) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.card--product { background: var(--white); border: 1px solid var(--rule); }
.card--product:hover { border-color: var(--ink); }
.card--product .card__media { aspect-ratio: 4 / 3; }
.card--product .card__body .t-small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.section--mist .card--product { border: 0; }
.card--product.is-pressed { border-color: var(--ink); }

.product-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
.product-top__text { min-width: 0; }
.product-photo { order: -1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--track); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); align-content: start; }
.block--wide { grid-column: 1 / -1; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-24); margin-top: var(--s-16); }
.swatches li { display: grid; gap: var(--s-8); align-content: start; }
.swatch__img { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--rule); overflow: hidden; background: var(--white); }
.swatch__img img { width: 100%; height: 100%; object-fit: cover; }
.swatch__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.4; }
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s-24); margin-top: var(--s-16); }
.glance li { display: grid; justify-items: center; align-content: start; gap: var(--s-8); text-align: center; color: var(--ink); }
.glance img, .glance svg { height: 64px; width: auto; }
.glance__note { margin-top: var(--s-24); color: var(--graphite); }
@media (min-width: 56.25em) {
  .product-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-48); }
  .product-top .product-photo { order: 0; align-self: start; }
  .product-details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-48); }
}
@media (min-width: 77.5em) { .product-top { gap: var(--s-64); } .product-details { column-gap: var(--s-64); } }
.ticks { display: grid; gap: var(--s-12); }
.ticks li { display: flex; gap: var(--s-12); }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: calc(0.8em - 4px); background: var(--orange); }
.spec { display: grid; gap: var(--s-16); padding: var(--s-32); background: var(--mist); }
.spec dl { display: grid; gap: var(--s-16); margin: 0; }
.spec dd { margin: 0; }
.spec dt { color: var(--graphite); }
.block { display: grid; gap: var(--s-8); }
.link-list { display: grid; gap: var(--s-8); }
.link-list a { text-decoration: underline; text-underline-offset: var(--s-4); }
.link-list a:hover { text-decoration-thickness: 3px; }

.split { display: grid; grid-template-columns: 1fr; gap: var(--s-48); align-items: start; }
@media (min-width: 56.25em) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 77.5em) { .split { gap: var(--s-64); } }
.stack { display: grid; gap: var(--s-32); align-content: start; }
.stack > div { display: grid; gap: var(--s-16); }
.email-card { display: grid; gap: var(--s-16); justify-items: start; padding: var(--s-32); background: var(--mist); }
.values { display: grid; gap: var(--s-24); margin: 0; }
.values dt { color: var(--graphite); }
.values dd { margin: 0; }
.request-list { display: grid; gap: var(--s-24); }
.request { display: grid; gap: var(--s-8); padding: var(--s-24); background: var(--mist); border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.request:hover, .request.is-pressed { border-color: var(--ink); }
.request p { color: var(--graphite); }
.menu > li > a[aria-current], .menu > li > a.is-section { border-bottom-color: var(--orange); }
.values dd, .email-card .t-h3 { overflow-wrap: anywhere; }
.page-head .actions { margin-top: var(--s-32); }
.footer-col a, .crumbs a, .link-list a, .help__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col ul { gap: 0; }

/* Hover and press for in-body links. The underline is instant; nothing here animates. */
.help a:hover, .values a:hover, .email-card a:hover,
.crumbs a.is-pressed, .help a.is-pressed, .values a.is-pressed, .email-card a.is-pressed { text-decoration: underline; }
.link-list a.is-pressed { text-decoration-thickness: 3px; }

/* Resilience (DESIGN.md section 17) */
main :is(h1, h2, h3, p, li, dt, dd, span, a:not(.btn)), .site-footer :is(h2, p, li, a), .help :is(h2, p, a) { overflow-wrap: anywhere; }
@media (forced-colors: active) { .ticks li::before { background: ButtonText; forced-color-adjust: none; } }

/* Pages added after the first build (DESIGN.md section 18) */
.prose { display: grid; gap: var(--s-16); max-width: 40em; }
.prose :is(h2, h3) { margin-top: var(--s-16); }
.prose > :first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-underline-offset: var(--s-4); }
.prose ol { display: grid; gap: var(--s-8); padding-left: var(--s-24); list-style: decimal; }
.prose figure { margin: var(--s-16) 0; }
.prose img { width: auto; max-width: 100%; height: auto; }
.doc-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
@media (min-width: 37.5em) { .doc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .doc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc-group { display: grid; gap: var(--s-8); align-content: start; }
.doc-group__zone { margin-left: var(--s-8); color: var(--graphite); } /* the zone name beside the mat type, as in the menu */
.guide-form { display: grid; gap: var(--s-24); padding: var(--s-24); background: var(--mist); }
.guide-form[hidden] { display: none; }
.guide-form .field label { color: var(--ink); }
.guide-form__selects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
@media (min-width: 37.5em) { .guide-form__selects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .guide-form__selects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.field input[type="search"] { width: 100%; min-height: 48px; padding: var(--s-12) var(--s-16); border: 1px solid var(--graphite); border-radius: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--font); }
.guide-form .field select { border: 1px solid var(--graphite); }
.sample-field label { color: var(--ink); }
.sample-field select { border: 1px solid var(--graphite); }
html:not(.js) .needs-js { display: none; } /* the product list only does something with scripting */
.js .no-js { display: none; }
/* Fields: hover and focus feedback on the border (fast), a transition so it re-targets from the value on screen. */
.guide-form .field select, .field input[type="search"], .doc-filter input[type="search"] { transition: border-color var(--dur-fast) var(--ease); }
.guide-form .field select:hover, .field input[type="search"]:hover, .doc-filter input[type="search"]:hover,
.guide-form .field select:focus, .field input[type="search"]:focus, .doc-filter input[type="search"]:focus { border-color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); margin: 0; padding: 0; border: 0; }
.checks legend { margin-bottom: var(--s-8); padding: 0; color: var(--graphite); }
.check { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.guide-bar[hidden] { display: none; }
.guide-bar .guide-status { flex: 1 1 auto; }
.guide-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s-12) var(--s-16); margin-top: var(--s-24); margin-bottom: var(--s-24); padding: var(--s-12) var(--s-16); background: var(--mist); border-top: 1px solid var(--rule); }
.guide-bar__filters { display: none; }
.more-filters summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.more-filters[open] summary { margin-bottom: var(--s-8); }
@media (max-width: 56.1875em) {
  .guide-bar { position: sticky; top: var(--hdr-top); z-index: 5; }
  .guide-bar__filters { display: inline-flex; align-items: center; min-height: 44px; flex: none; text-decoration: underline; text-underline-offset: var(--s-4); }
  .guide-bar__filters:hover, .guide-bar__filters.is-pressed { text-decoration-thickness: 3px; }
}
.jump ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-24); margin-top: var(--s-24); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: var(--s-4); }
.guide-empty { margin-bottom: var(--s-24); padding: var(--s-24); background: var(--mist); }
.guide-empty a { text-decoration: underline; }
.sitemap-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
@media (min-width: 37.5em) { .sitemap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .sitemap-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.page-head + .section { padding-top: 0; }
.crumbs ol { align-items: center; }
.crumbs li { display: flex; align-items: center; min-height: 44px; }
.ticks li > span { min-width: 0; }

/* Advice (DESIGN.md section 19) and the no-script header */
.feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); }
@media (min-width: 37.5em) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.request .t-eyebrow { color: var(--graphite); }
.request .t-h3 { overflow-wrap: anywhere; }
.post-date { color: var(--graphite); }
.subscribe { display: grid; gap: var(--s-16); justify-items: start; }
.subscribe .actions { margin-top: 0; }
@media (max-width: 77.4375em) { html:not(.js) .site-header { position: static; } }
.request { align-content: start; }
.feed .request p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* What resellers get, and the help band action (DESIGN.md sections 5, 8 and 16) */
@media (min-width: 56.25em) { .ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-48); } }
@media (min-width: 77.5em) { .ticks--cols { column-gap: var(--s-64); } }
.ticks a { padding-block: var(--s-12); text-decoration: underline; text-underline-offset: var(--s-4); }
.ticks a:hover { text-decoration-thickness: 3px; }
.help__action { margin-top: var(--s-8); }
.doc-filter { display: none; }
.js .doc-filter { display: grid; gap: var(--s-8); max-width: 28rem; margin-top: var(--s-24); }
.doc-filter label { font-weight: 700; }
.doc-filter input[type="search"] { width: 100%; min-height: 48px; padding: var(--s-12) var(--s-16); border: 1px solid var(--graphite); border-radius: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--font); }
.doc-filter p { min-height: 1.5em; }
.doc-group[hidden] { display: none; }
.guide-empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-16); }
.guide-empty__actions:empty { display: none; }
.guide-empty__btn { min-height: 48px; padding: var(--s-12) var(--s-16); border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); font: 500 0.9375rem/1.4 var(--font); cursor: pointer; }
.guide-empty__btn:hover, .guide-empty__btn:focus-visible { background: var(--ink); color: var(--white); }
.size-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.size-table caption { text-align: left; }
.size-table th, .size-table td { padding: var(--s-8) var(--s-12) var(--s-8) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.size-table th { font-weight: 700; color: var(--graphite); }
.size-table :is(th, td, a:not(.btn)) { overflow-wrap: normal; } /* a row heading wraps at its spaces, never inside a word */
.size-wrap { overflow-x: auto; }