/*
 * XionLab theme, main.css
 * The approved homepage design (demo/variants/home.html) ported to the
 * theme. Oswald display, Barlow body, teal identity, oxide red CTAs,
 * warm paper sections. No external libraries. All motion is
 * transform/opacity only and honors prefers-reduced-motion.
 *
 * Sections:
 *   1. Tokens + font fallbacks
 *   2. Base
 *   3. Shared primitives (.wrap, .btn, .eyebrow, .xl-* used by inner pages)
 *   4. Counterfeit banner, promise bar, nav
 *   5. Hero
 *   6. Press strip
 *   7. About XionLab
 *   8. Rust calculator
 *   9. Customer photos
 *  10. Why it works numerals
 *  11. What we make
 *  12. Field reports
 *  13. From the resources
 *  14. FAQ
 *  15. Final CTA
 *  16. Footer
 *  17. Legacy blocks other templates still use
 *  18. Reveal + reduced motion
 *  19. Responsive
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens + font fallbacks                                          */
/* ------------------------------------------------------------------ */

:root {
  --xl-ink: #0C1115;
  --xl-ink-2: #161D23;
  --xl-paper: #F6F4EF;
  --xl-white: #FFFFFF;
  --xl-teal: #0FA99C;
  --xl-teal-deep: #0B7C73;
  --xl-oxide: #D64127;
  --xl-oxide-deep: #B03018;
  --xl-rust: #8A4B2D;
  --xl-gray: #5C6670;
  --xl-gray-light: #AEB6BD;
  --xl-line: rgba(12, 17, 21, .12);
  --xl-line-dark: rgba(255, 255, 255, .09);
  --xl-font-display: 'Oswald', 'Oswald Fallback', 'Arial Narrow', Impact, sans-serif;
  --xl-font-body: 'Barlow', 'Barlow Fallback', 'Helvetica Neue', Arial, sans-serif;
  --xl-radius: 6px;
  --xl-shadow: 0 12px 32px rgba(12, 17, 21, .14);
  --xl-container: 1200px;
  --xl-space: 8px;
  --xl-ease: cubic-bezier(.22, .61, .36, 1);

  /* Short aliases used by the homepage rules below. */
  --teal: var(--xl-teal);
  --teal-deep: var(--xl-teal-deep);
  --ink: var(--xl-ink);
  --red: var(--xl-oxide);
  --red-hover: var(--xl-oxide-deep);
  --gray: var(--xl-gray);
  --paper: var(--xl-paper);
  --line: var(--xl-line);
  --display: var(--xl-font-display);
  --body: var(--xl-font-body);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --xl-noise: var(--noise);
}

/* Metric compatible fallbacks so layout holds if Google Fonts fail. */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Arial');
  size-adjust: 88%;
  ascent-override: 119%;
  descent-override: 29%;
}

/* Measured on staging: Helvetica Neue and Arial set this theme's copy 7 to 10
   percent wider than Barlow, so the old 98% left the promise bar on two lines
   until Barlow arrived and then snapped it to one. 90% matches the advance
   widths and holds the line count through the swap. */
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 90%;
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.5; color: var(--ink); background: #fff; }
img { display: block; max-width: 100%; height: auto; }
/* The responsive <picture> wrappers must not become a layout box of their
   own, so every rule that targets an img keeps sizing it directly. */
picture { display: contents; }
a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }
button { font: inherit; color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }
/* Focus indicators need 3:1 against the background they sit on. Brand teal
   #0FA99C is 2.93:1 on white and 2.66:1 on paper, so the ring uses the deeper
   teal (5.07:1 on white, 4.61:1 on paper, 3.75:1 on ink). Dark bands get a
   white ring instead. */
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.promise :focus-visible,
.authbar :focus-visible,
.cta :focus-visible,
.foot :focus-visible,
.rc__top :focus-visible,
.xl-stats :focus-visible,
.xl-final :focus-visible,
.xl-section--dark :focus-visible,
.xl-section--ink :focus-visible { outline-color: #fff; }
::selection { background: var(--teal); color: #fff; }

.sr,
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100; width: auto !important; height: auto !important; margin: 0; padding: 12px 20px; overflow: visible; clip: auto; background: var(--teal-deep); color: #fff; font-weight: 700; border-radius: 6px; text-decoration: none; }
.xl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.02; letter-spacing: .005em; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(30px, 3.2vw, 42px); }
h3 { font-size: 19px; font-weight: 500; letter-spacing: .03em; }
h4 { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; margin: 0; }

/* ------------------------------------------------------------------ */
/* 3. Shared primitives                                                */
/* ------------------------------------------------------------------ */

.wrap { width: min(100% - 48px, 1200px); margin-inline: auto; }
.xl-container { max-width: var(--xl-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.xl-container--narrow { max-width: 780px; }
.xl-cv { content-visibility: auto; contain-intrinsic-size: auto 760px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--teal); flex: none; }
.xl-eyebrow { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 16px; }
.lede { color: var(--gray); font-size: 17px; max-width: 56ch; margin-top: 14px; }
.lede a, .faq details p a, .foot__about a { padding: 14px 0; margin: -14px 0; }
.xl-lead { font-size: 1.15rem; color: var(--gray); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 6px; border: 0; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, box-shadow .15s, transform .15s; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hover); color: #fff; }
.btn--red:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn--teal { background: transparent; color: var(--teal-deep); box-shadow: inset 0 0 0 2px var(--teal); }
.btn--teal:hover { background: var(--teal); color: #fff; }
.btn--buy { min-height: 56px; min-width: 320px; font-size: 17px; white-space: normal; text-align: center; padding: 10px 26px; flex-wrap: wrap; row-gap: 2px; }

/* .xl-btn keeps working for inner pages, WooCommerce and funnel templates. */
.xl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; background: var(--red); color: #fff; font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background-color .15s, box-shadow .15s, transform .15s; }
.xl-btn:hover { background: var(--red-hover); color: #fff; }
.xl-btn:active { transform: translateY(1px); }
.xl-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.xl-btn--ghost:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.xl-btn--teal { background: var(--teal); }
.xl-btn--teal:hover { background: var(--teal-deep); }
.xl-btn--small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.xl-btn--large { min-height: 56px; padding: 0 36px; font-size: 17px; }
.xl-btn--block { width: 100%; }

/* Rating rows */
.rating { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; font-weight: 500; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; color: var(--teal); }
.rating__count { color: var(--gray); }
.rating__count::before { content: "\00B7"; margin-right: 10px; color: var(--line); }
.xl-rating { display: inline-flex; align-items: center; gap: 10px; }
.xl-rating__count { font-size: .95rem; color: var(--gray); }
.xl-stars { display: inline-block; line-height: 0; }
.xl-stars__track { position: relative; display: inline-block; color: rgba(12, 17, 21, .15); }
.xl-stars__track svg { display: block; }
.xl-stars__fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap; color: var(--teal); }

.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); background: rgba(15, 169, 156, .12); padding: 6px 10px; border-radius: 999px; }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.fn { font-size: 13px; color: var(--gray); max-width: 92ch; margin-top: 14px; }

/* Generic sections used by inner page templates. */
.xl-section { padding: 88px 0; }
.xl-section--dark, .xl-section--ink { background: var(--ink); color: #fff; }
.xl-section__head { max-width: 760px; margin-bottom: 40px; }
.xl-section__head--center { margin-inline: auto; text-align: center; }
.xl-section__lead { color: var(--gray); font-size: 1.1rem; margin: 0; }
.xl-section--dark .xl-section__lead, .xl-section--dark .xl-lead { color: var(--xl-gray-light); }
.xl-section p { margin-bottom: 16px; }

/* ------------------------------------------------------------------ */
/* 4. Counterfeit banner, promise bar, nav                             */
/* ------------------------------------------------------------------ */

/* The amber highlight cannot reach 4.5:1 over the bright #D64127 middle of the
   old gradient, so the gradient runs one stop deeper in the same oxide family.
   #FFE08A now measures 4.96:1 at the brightest point and 6.68:1 at the darkest,
   and the white body copy 6.40:1 to 8.61:1. */
.authbar { background: linear-gradient(90deg, #8F250E, var(--xl-oxide-deep) 55%, #8F250E); color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.authbar__in { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 72px; padding: 12px 16px; text-align: left; }
.authbar__icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .14); animation: authpulse 2.2s ease-in-out infinite; }
.authbar__icon svg { width: 30px; height: 30px; display: block; }
.authbar__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.authbar__lead { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; color: #FFE08A; }
.authbar__body { font-size: 15px; font-weight: 500; color: #fff; }
.authbar__strong, .authbar__body strong { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #FFE08A; }
.authbar a { color: #FFE08A; }
@keyframes authpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 138, .55); } 60% { box-shadow: 0 0 0 10px rgba(255, 224, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .authbar__icon { animation: none; } }
@media (max-width: 600px) {
  .authbar__in { gap: 12px; min-height: 0; padding: 12px 14px; align-items: flex-start; }
  .authbar__icon { width: 38px; height: 38px; margin-top: 2px; }
  .authbar__icon svg { width: 24px; height: 24px; }
  .authbar__lead { font-size: 17px; }
  .authbar__body { font-size: 13.5px; }
}
/* On a 360 phone the banner was 124px, a seventh of the first screen. */
@media (max-width: 400px) {
  .authbar__in { gap: 10px; padding: 10px 14px; }
  .authbar__icon { width: 32px; height: 32px; }
  .authbar__icon svg { width: 21px; height: 21px; }
  .authbar__text { line-height: 1.25; }
  .authbar__lead { font-size: 15.5px; }
  .authbar__body { font-size: 13px; }
}

.promise { background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.promise ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 36px; flex-wrap: wrap; }
.promise li + li::before { content: "\00B7"; margin-right: 12px; color: var(--teal); }

.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.logo { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .08em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; }
.logo::before { content: ""; width: 10px; height: 10px; background: var(--teal); border-radius: 2px; flex: none; }
.logo--image::before { display: none; }
.logo--image img { display: block; height: 68px; width: auto; }
@media (max-width: 560px) { .logo--image img { height: 50px; } }
.nav nav { margin-inline: auto; }
.nav__links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 13px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 4px; }
.nav__links a:hover { color: var(--teal-deep); }
.nav__links a[aria-current], .nav__links .current-menu-item > a { color: var(--teal-deep); box-shadow: inset -2px 0 0 transparent, inset 0 -2px 0 var(--teal); }
.nav__cart, .nav__acct { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; color: var(--ink); border-radius: 6px; }
.nav__cart:hover, .nav__acct:hover { color: var(--teal-deep); }
.nav__cart svg, .nav__acct svg { width: 24px; height: 24px; }
.nav__acct { margin-right: -14px; }  /* sits with the cart as one pair, not as a third item */
.nav__count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-family: var(--body); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; display: none; }
.nav__count.is-active { display: block; }
.nav__toggle { display: none; flex: none; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 6px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu backdrop. Sits one layer under the sticky header so the open
   panel stays lit, dims everything else, and gives the tap away to dismiss
   gesture something to land on. Body scroll is locked while it is up, the
   same way the cart drawer does it. */
.nav__scrim { position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: 0; background: rgba(12, 17, 21, .45); border: 0; }
@media (max-width: 1023px) {
  /* The lock goes on <html> and nowhere else. overflow: hidden on body makes
     body the scroll container for its descendants, which kills position:
     sticky on the header, and the open menu panel then scrolls away with it.
     The jump to the top that this used to cause was never the lock: it was
     focus() scrolling the first nav link into view, fixed in main.js. */
  html.xl-nav-open { overflow: hidden; }
  html.xl-nav-open .nav__links { overscroll-behavior: contain; }
}
.nav--minimal .nav__in { justify-content: space-between; min-height: 64px; }
.nav__secure { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--gray); font-size: 15px; font-weight: 500; }
.nav__secure svg { width: 18px; height: 18px; color: var(--teal); }

/* ------------------------------------------------------------------ */
/* 5. Hero                                                             */
/* ------------------------------------------------------------------ */

.hero { padding: 28px 0 22px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: 40px; align-items: center; }
.hero .eyebrow { letter-spacing: .13em; font-size: 11.5px; }
.hero h1 { font-size: clamp(38px, 4.2vw, 56px); margin: 16px 0 18px; max-width: 19ch; }
.hero__sub { font-size: 17px; color: var(--gray); max-width: 50ch; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero__actions .btn { min-height: 56px; font-size: 17px; padding: 0 28px; }
.hero__line { margin-top: 16px; font-size: 15px; color: var(--gray); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hero__line svg { color: var(--teal); flex: none; }

.hero__media { position: relative; min-height: 660px; display: flex; align-items: center; justify-content: center; padding: 24px 24px 64px; border-radius: 28px; background: var(--paper); overflow: hidden; }
.hero__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%); }
.hero__media::after { content: ""; position: absolute; left: 50%; bottom: 48px; width: 380px; height: 44px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(12, 17, 21, .22), rgba(12, 17, 21, 0) 70%); }
/* White on brand teal is 2.93:1. The coverage claim is the biggest number on
   the homepage, so the disc uses the deeper teal for 5.07:1. */
.badge { position: absolute; z-index: 2; top: 30px; right: 30px; width: 120px; height: 120px; border-radius: 50%; background: var(--teal-deep); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--display); line-height: 1.05; text-transform: uppercase; transform: rotate(8deg); box-shadow: 0 10px 24px rgba(11, 124, 115, .35); margin: 0; }
.badge b { font-size: 26px; font-weight: 600; display: block; }
.badge span { font-size: 11px; letter-spacing: .14em; font-weight: 500; display: block; margin-top: 3px; }
.hero__colors { position: absolute; z-index: 2; left: 28px; bottom: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); font-weight: 700; }
.hero__usa { position: absolute; z-index: 2; right: 28px; bottom: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); font-weight: 700; }

.hero__grid--lineup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 901px) { .hero__grid--lineup .eyebrow { font-size: 11px; letter-spacing: .12em; white-space: nowrap; } }
.hero__grid--lineup .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 901px) { .hero__grid--lineup .hero__actions .btn { min-width: 0; padding-left: 20px; padding-right: 20px; font-size: 15px; white-space: nowrap; } }
.hero__media--lineup { min-height: 0; padding: 40px 26px 56px; display: flex; align-items: center; justify-content: center; }
.hero__media--lineup::after { width: 84%; height: 32px; bottom: 52px; opacity: .55; }
.hero__media--lineup .badge { left: 22px; right: auto; top: 22px; width: 104px; height: 104px; transform: rotate(-8deg); }
.hero__media--lineup .badge b { font-size: 22px; }
.hero__media--lineup .badge span { font-size: 10px; }
.lineup { position: relative; z-index: 1; width: 100%; margin: 0 auto; }
.lineup img { display: block; width: 100%; height: auto; }
.lineup__new { position: absolute; z-index: 4; transform: translate(-70%, -40%) rotate(6deg); background: var(--red); color: #fff; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-radius: 3px; box-shadow: 0 6px 14px rgba(214, 65, 39, .35); }
@media (max-width: 900px) {
  .hero__media--lineup { padding: 40px 10px 40px; }
  .hero__media--lineup::after { display: none; }
  .lineup__new { font-size: 9px; padding: 4px 6px; }
  .hero__media--lineup .badge { left: 10px; right: auto; top: 10px; width: 78px; height: 78px; transform: rotate(-8deg); }
  .hero__media--lineup .badge b { font-size: 17px; }
  .hero__media--lineup .badge span { font-size: 8px; }
}

.fits { margin-top: 44px; border-top: 1px solid var(--line); padding: 18px 0; display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: baseline; font-size: 14px; color: var(--gray); }
.fits strong { color: var(--ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; flex: none; }
.fits ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; }
.fits li + li::before { content: "\00B7"; margin: 0 10px; color: var(--teal); }

/* ------------------------------------------------------------------ */
/* 6. Press strip                                                      */
/* ------------------------------------------------------------------ */

.press { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.press__in { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; justify-content: center; }
.press__label { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .22em; color: var(--teal-deep); text-transform: uppercase; }
.press img { height: 24px; width: auto; transition: opacity .15s, filter .15s; }
.press img.press--ink { height: 22px; filter: brightness(0); opacity: .72; }
.press img.press--ink:hover { opacity: 1; }
.press img.press--amz { height: 30px; filter: grayscale(1); opacity: .8; }
.press img.press--amz:hover { filter: none; opacity: 1; }
.press img.press--seal { height: 44px; mix-blend-mode: multiply; opacity: .9; }
.press img.press--seal:hover { opacity: 1; }

/* ------------------------------------------------------------------ */
/* 7. About XionLab                                                    */
/* ------------------------------------------------------------------ */

.lab { background: var(--paper); padding: 80px 0; }
.lab__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: stretch; }
.lab h2 { margin-top: 14px; max-width: none; font-size: clamp(26px, 2.9vw, 38px); }
.lab .lede { max-width: 58ch; }
.lab .lede + .lede { margin-top: 12px; }
.lab__link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 14px; font-weight: 700; color: var(--teal-deep); }
.lab__link::after { content: "\2192"; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: stretch; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px 22px; min-height: 156px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tile__val { font-family: var(--display); font-weight: 600; font-size: 48px; line-height: .95; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; }
.tile__val small { font-size: .5em; color: var(--teal); vertical-align: top; font-weight: 500; line-height: 1.5; margin-left: 2px; }
.tile__val--sm { font-size: 30px; line-height: 1.05; }
.tile__lab { font-size: 14px; color: var(--gray); font-weight: 500; line-height: 1.35; }

/* ------------------------------------------------------------------ */
/* 8. Rust calculator                                                  */
/* ------------------------------------------------------------------ */

.calcsec { padding: 72px 0; background: var(--paper); }
.calcsec--page { min-height: calc(100vh - 72px); }
.calcsec--page h1 { font-size: clamp(30px, 3.2vw, 42px); }
.calcsec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.calcsec__copy .lede + .lede { margin-top: 10px; }
.calcsec__copy .rating { margin: 24px 0 0; }
.calcsec__panel { background: var(--teal-deep); border-radius: 24px; padding: 36px; position: relative; overflow: hidden; color: #fff; }
.calcsec__panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 0%, rgba(15, 169, 156, .6), transparent 45%), radial-gradient(circle at 0% 100%, rgba(15, 169, 156, .35), transparent 40%); pointer-events: none; }
.rc { position: relative; max-width: 520px; margin: 0 auto; }
.rc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; min-height: 44px; }
.rc__kicker { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.rc__back { background: none; border: 0; color: #fff; font-weight: 500; font-size: 15px; min-height: 48px; min-width: 48px; padding: 0 8px; cursor: pointer; border-radius: 6px; text-decoration: underline; text-underline-offset: 3px; }
.rc__back:hover { color: rgba(255, 255, 255, .75); }
.rc__back:focus-visible { outline-color: #fff; }
.rc__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 8px; }
.rc__progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; margin-bottom: 18px; }
.rc__progress > span { display: block; height: 100%; width: 25%; background: var(--teal); border-radius: 999px; transition: width .35s ease; }
.rc__card { background: #fff; color: var(--ink); border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
.rc__card h3 { font-size: 26px; font-weight: 600; margin-bottom: 16px; letter-spacing: .01em; }
.rc__hint { font-size: 15px; color: var(--gray); margin: -8px 0 16px; }
.rc__opts { display: grid; gap: 8px; }
.rc__opt { width: 100%; min-height: 52px; text-align: left; padding: 10px 16px 10px 46px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; font-size: 16px; cursor: pointer; position: relative; transition: background-color .15s, color .15s, border-color .15s; }
.rc__opt::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--teal-deep); background: #fff; transition: background-color .15s, box-shadow .15s; }
.rc__opt:hover { border-color: var(--ink); }
.rc__opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rc__opt[aria-pressed="true"]::before { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px var(--ink); }
.rc__opts--row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.rc__opts--row .rc__opt { text-align: center; padding-left: 16px; }
.rc__opts--row .rc__opt::before { display: none; }
.rc__out { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; color: var(--teal-deep); margin-bottom: 4px; }
.rc__out small { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--gray); }
.rc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; cursor: pointer; }
.rc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal-deep) var(--fill, 0%), rgba(12, 17, 21, .12) var(--fill, 0%)); }
.rc__range::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(12, 17, 21, .12); }
.rc__range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--teal-deep); }
.rc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--teal-deep); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.rc__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--teal-deep); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.rc__range:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 999px; }
.rc__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray); margin: -4px 0 12px; }
.rc__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rc__chip { min-height: 48px; min-width: 64px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.rc__chip:hover { border-color: var(--ink); }
.rc__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rc__card .btn { width: 100%; }
.rc__for { font-size: 15px; color: var(--gray); margin: -8px 0 14px; }
.rc__plan { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.rc__plan li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 8px 8px; }
.rc__plan img { width: 64px; height: 64px; object-fit: contain; }
.rc__name { font-weight: 700; }
.rc__cov { display: block; font-size: 14px; color: var(--gray); }
.rc__qty { font-family: var(--display); font-weight: 600; color: var(--teal-deep); font-size: 18px; white-space: nowrap; letter-spacing: .04em; }
.rc__totals { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.rc__cover { font-size: 14px; color: var(--gray); }
.rc__cover strong { display: block; color: var(--ink); font-size: 16px; }
.rc__total { font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1; color: var(--ink); }
.rc__total small { font-family: var(--body); font-weight: 700; font-size: 11px; color: var(--gray); display: block; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.rc__tip { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 0 0 8px; padding: 10px 14px; border-radius: 8px; background: rgba(15, 169, 156, .1); }
.rc__tip svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--teal-deep); }
.rc__actions { display: grid; gap: 8px; margin-top: 16px; }
.rc__fn { font-size: 12px; color: var(--gray); margin-top: 12px; }
.rc__note { font-size: 13px; color: rgba(255, 255, 255, .78); margin: 14px 0 0; text-align: center; }
.rc noscript p { background: #fff; color: var(--ink); padding: 14px; border-radius: 10px; margin-top: 12px; }

/* ------------------------------------------------------------------ */
/* 9. Customer photos                                                  */
/* ------------------------------------------------------------------ */

.proof { padding: 72px 0 72px; }
.proof__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; margin-bottom: 28px; }
.proof__lead { margin: 0; max-width: 44ch; color: var(--gray); font-size: 16px; }
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 14px; }
.job { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--paper); }
.job img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.job:hover img { transform: scale(1.03); }
/* The scrim is still near transparent where the tag sits, so teal measured as
   low as 2.89:1 over the brighter photos. The tag now matches the caption:
   white, and the gradient starts earlier so it carries both lines. */
.job figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; font-size: 13px; font-weight: 500; color: #fff; background: linear-gradient(180deg, rgba(12, 17, 21, 0), rgba(12, 17, 21, .55) 45%, rgba(12, 17, 21, .82)); line-height: 1.3; }
.job__tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 3px; }
.job--lead { grid-column: span 2; grid-row: span 2; }
.job:nth-child(6), .job:nth-child(7) { grid-column: span 2; }
.job--lead figcaption { font-size: 15px; padding-bottom: 16px; }
.proof__cap { margin-top: 14px; font-size: 14px; color: var(--gray); display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.proof__cap a { color: var(--teal-deep); }
@media (max-width: 900px) {
  .jobs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .job--lead { grid-column: span 2; grid-row: span 2; }
  .job:nth-child(6), .job:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .jobs { grid-auto-rows: 170px; gap: 10px; }
  .job--lead { grid-row: span 2; }
  .proof__head { margin-bottom: 18px; }
}

/* ------------------------------------------------------------------ */
/* 10. Why it works numerals                                           */
/* ------------------------------------------------------------------ */

.nums { padding: 8px 0 72px; }
.nums__more { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.nums__more a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--teal-deep); }
.nums__more a::after { content: "\2192"; }
.nums__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.num { padding: 6px 32px 6px 32px; border-left: 1px solid var(--line); }
.num:first-child { border-left: 0; padding-left: 0; }
.num__val { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 7.5vw, 104px); line-height: .9; letter-spacing: -.01em; }
.num__val small { font-size: .36em; color: var(--teal); vertical-align: top; margin-left: 4px; font-weight: 500; line-height: 1.6; }
.num__lab { margin-top: 14px; font-weight: 700; font-size: 17px; }
.num__txt { color: var(--gray); font-size: 15px; margin-top: 6px; max-width: 30ch; }

/* ------------------------------------------------------------------ */
/* 11. What we make                                                    */
/* ------------------------------------------------------------------ */

.products { background: var(--paper); padding: 80px 0; border-top: 1px solid var(--line); }
.prod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.prod { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px 30px 22px; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 22px; }
.prod--lead { border-color: rgba(15, 169, 156, .45); box-shadow: 0 12px 32px rgba(12, 17, 21, .06); }
.prod__body { display: flex; flex-direction: column; align-items: flex-start; min-height: 250px; justify-content: center; }
.prod__img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(12, 17, 21, .16)); }
.prod--lead .prod__img { max-width: 250px; }
.prod__img--drain { object-fit: cover; object-position: center; mix-blend-mode: multiply; filter: none; max-width: 240px; }
.prod .tag { margin-bottom: 12px; }
.prod h3 { font-size: 24px; font-weight: 600; letter-spacing: .01em; line-height: 1.05; }
.prod__desc { color: var(--gray); margin-top: 10px; font-size: 16px; max-width: 44ch; }
.prod .rating { margin: 14px 0 6px; }
.prod__price { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; }
.prod .btn { margin-top: 18px; align-self: flex-start; min-height: 52px; font-size: 16px; padding: 0 24px; }

/* ------------------------------------------------------------------ */
/* 12. Field reports                                                   */
/* ------------------------------------------------------------------ */

.voices { background: #fff; padding: 80px 0; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 38px 34px 30px; position: relative; margin: 0; }
.quote::before { content: "\201C"; position: absolute; top: 8px; left: 24px; font-family: var(--display); font-size: 100px; line-height: 1; color: var(--teal); opacity: .3; }
.quote p { font-size: 20px; line-height: 1.45; font-weight: 500; position: relative; }
.quote footer { margin-top: 18px; font-size: 14px; color: var(--gray); display: flex; align-items: center; gap: 10px; }
.quote cite { font-style: normal; }
.quote .stars svg { width: 14px; height: 14px; }
.trust { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--gray); font-size: 15px; max-width: 76ch; }

/* ------------------------------------------------------------------ */
/* 13. From the resources                                              */
/* ------------------------------------------------------------------ */

.guides { background: var(--paper); padding: 80px 0; border-top: 1px solid var(--line); }
.guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.guide { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.guide__thumb { height: 150px; position: relative; isolation: isolate; }
.guide__thumb img, .guide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide__thumb::before { content: ""; position: absolute; inset: 0; background: var(--noise); background-size: 220px 220px; opacity: .28; mix-blend-mode: multiply; pointer-events: none; }
.guide__thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, transparent 40%, rgba(0, 0, 0, .28) 100%); pointer-events: none; }
.guide__thumb--1 { background: radial-gradient(ellipse 50% 60% at 20% 30%, rgba(242, 160, 108, .7), transparent 65%), linear-gradient(135deg, #7A3A1C, #C8551F 60%, #A9502A); }
.guide__thumb--2 { background: radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200, 85, 31, .8), transparent 65%), linear-gradient(160deg, #141719, #3a1d10 50%, #5A2A14); }
.guide__thumb--3 { background: radial-gradient(ellipse 50% 70% at 70% 20%, rgba(240, 130, 55, .65), transparent 65%), linear-gradient(120deg, #A9502A, #5A2A14 55%, #23282C); }
.guide__read { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(12, 17, 21, .72); padding: 7px 10px; border-radius: 999px; }
.guide__body { padding: 22px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.guide h3 { font-size: 22px; font-weight: 600; letter-spacing: .01em; line-height: 1.08; }
.guide h3 a { color: var(--ink); text-decoration: none; }
.guide h3 a:hover { color: var(--teal-deep); }
.guide p { color: var(--gray); font-size: 15px; margin-top: 10px; }
.guide__link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--teal-deep); align-self: flex-start; }
.guide__link::after { content: "\2192"; }

/* ------------------------------------------------------------------ */
/* 14. FAQ                                                             */
/* ------------------------------------------------------------------ */

.faq { padding: 80px 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 12px 0; font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 28px; color: var(--teal); transition: transform .2s; flex: none; width: 32px; text-align: center; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gray); padding: 0 52px 22px 0; max-width: 60ch; }

/* ------------------------------------------------------------------ */
/* 15. Final CTA                                                       */
/* ------------------------------------------------------------------ */

.cta { background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.cta::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 160%; background: radial-gradient(ellipse at center, rgba(15, 169, 156, .18), rgba(15, 169, 156, 0) 60%); pointer-events: none; }
.cta__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 40px; position: relative; }
.cta__copy { padding: 72px 0; }
.cta h2 { font-size: clamp(36px, 4.4vw, 60px); max-width: 14ch; }
.cta p { color: rgba(255, 255, 255, .72); margin-top: 18px; max-width: 46ch; font-size: 17px; }
.cta__actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.cta__link { color: #fff; font-weight: 500; min-height: 48px; display: inline-flex; align-items: center; }
.cta__link:hover { color: var(--teal); }
.cta__media { position: relative; display: flex; justify-content: center; align-items: end; padding-top: 40px; }
.cta__can { width: 380px; height: 380px; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); margin-bottom: -40px; }
.cta__new { position: absolute; top: 56px; left: 8px; background: var(--teal-deep); color: #fff; font-family: var(--display); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; padding: 8px 12px; border-radius: 999px; }

/* ------------------------------------------------------------------ */
/* 16. Footer                                                          */
/* ------------------------------------------------------------------ */

.foot { background: var(--ink); color: rgba(255, 255, 255, .72); border-top: 1px solid rgba(255, 255, 255, .12); padding: 56px 0 28px; font-size: 15px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 40px; }
.foot h2 { font-size: 13px; letter-spacing: .2em; font-weight: 500; color: #fff; margin-bottom: 16px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.foot ul a { display: inline-flex; align-items: center; min-height: 48px; }
.foot a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .logo { color: #fff; }
.foot__about { margin-top: 14px; max-width: 34ch; }
.foot__about a { text-decoration: underline; text-underline-offset: 3px; }
.news { display: flex; gap: 8px; margin-top: 14px; }
/* 16px, not the footer's inherited 15px: iOS Safari zooms the whole page on
   focus below 16px and never zooms back out. */
.news input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font-family: inherit; font-size: 16px; font-weight: inherit; line-height: normal; }
.news input::placeholder { color: rgba(255, 255, 255, .45); }
.news__msg { margin-top: 10px; color: var(--teal); font-weight: 500; }
.foot__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .5); }
.foot__bottom ul { display: flex; gap: 18px; }
.foot__bottom a { color: rgba(255, 255, 255, .6); }
.foot--minimal { padding: 28px 0; }
.foot--minimal .foot__bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------ */
/* 17. Legacy blocks other templates still use                         */
/* ------------------------------------------------------------------ */

/* Stats band (page-about.php, counters in main.js). */
.xl-stats { background: radial-gradient(600px 300px at 85% 0%, rgba(15, 169, 156, .12), transparent 60%), var(--ink); color: #fff; padding-block: clamp(48px, 6vw, 72px); border-block: 1px solid var(--xl-line-dark); }
.xl-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.xl-stat { text-align: center; padding: 12px clamp(8px, 2vw, 24px); border-left: 1px solid var(--xl-line-dark); }
.xl-stat:first-child { border-left: 0; }
.xl-stat__num { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; margin: 0; }
.xl-stat__num .xl-stat__suffix { color: var(--teal); }
.xl-stat__label { margin: 8px 0 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--xl-gray-light); }
@media (max-width: 760px) {
  .xl-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .xl-stat:nth-child(3) { border-left: 0; }
}

/* Final band (page-about.php). */
.xl-final { position: relative; overflow: hidden; background: radial-gradient(800px 460px at 50% 120%, rgba(214, 65, 39, .25), transparent 65%), radial-gradient(500px 300px at 12% 0%, rgba(138, 75, 45, .2), transparent 60%), var(--ink); color: #fff; text-align: center; }
.xl-final .xl-container { position: relative; z-index: 1; }
.xl-final h2 { max-width: 18ch; margin-inline: auto; }
.xl-final p { color: var(--xl-gray-light); font-size: 1.15rem; margin: 18px auto 32px; max-width: 52ch; }

/* FAQ accordion with buttons (funnel-landing.php, toggled in main.js). */
.xl-faq__list { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.xl-faq__list .xl-faq__item { border-bottom: 1px solid var(--line); }
.xl-faq__q { margin: 0; font-size: inherit; font-family: var(--body); text-transform: none; letter-spacing: 0; }
.xl-faq__btn { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 48px; padding: 20px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--body); font-weight: 700; font-size: 18px; color: var(--ink); }
.xl-faq__btn:hover { color: var(--teal-deep); }
.xl-faq__mark { position: relative; flex: none; width: 22px; height: 22px; }
.xl-faq__mark::before, .xl-faq__mark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--teal); transition: transform 220ms var(--xl-ease); }
.xl-faq__mark::before { width: 14px; height: 2px; }
.xl-faq__mark::after { width: 2px; height: 14px; }
.xl-faq__btn[aria-expanded="true"] .xl-faq__mark::after { transform: rotate(90deg) scaleY(0); }
.xl-faq__btn[aria-expanded="true"] .xl-faq__mark::before { transform: rotate(180deg); }
.xl-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--xl-ease); }
.xl-faq__item.is-open .xl-faq__panel { grid-template-rows: 1fr; }
.xl-faq__panel-inner { overflow: hidden; }
.xl-faq__panel p { color: var(--gray); margin: 0; padding: 0 36px 22px 4px; max-width: 64ch; }

/* Size cards (funnel-offer.php, woo variation picker adds its own rules). */
.xl-size-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; text-align: center; transition: transform 200ms var(--xl-ease), box-shadow 200ms var(--xl-ease); }
.xl-size-card:hover { transform: translateY(-4px); box-shadow: var(--xl-shadow); }
.xl-size-card--featured { border: 2px solid var(--teal); box-shadow: var(--xl-shadow); }
.xl-size-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }
.xl-size-card__media { height: 190px; display: grid; place-items: center; margin-bottom: 16px; }
.xl-size-card__media img { max-height: 100%; width: auto; filter: drop-shadow(0 16px 18px rgba(12, 17, 21, .22)); }
.xl-size-card__tag { font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
.xl-size-card h3 { font-size: 24px; font-weight: 600; text-transform: uppercase; margin: 6px 0 8px; }
.xl-size-card__copy { color: var(--gray); font-size: 16px; margin-bottom: 16px; }
.xl-size-card__price { font-family: var(--display); font-weight: 600; font-size: 32px; color: var(--ink); margin-top: auto; margin-bottom: 16px; }
.xl-size-card__price .woocommerce-Price-amount { font-family: inherit; }

/* ------------------------------------------------------------------ */
/* 18. Reveal + reduced motion                                         */
/* ------------------------------------------------------------------ */

html.js .reveal, html.js .xl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal[data-delay="1"] { transition-delay: .1s; }
html.js .reveal[data-delay="2"] { transition-delay: .2s; }
html.js .xl-reveal { transition-delay: var(--xl-delay, 0ms); }
html.js .reveal.is-in, html.js .xl-reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal, html.no-js .xl-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal, html.js .xl-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* 19. Responsive                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
  .nav__toggle { display: flex; order: 4; }
  .nav__cta { margin-left: auto; order: 2; padding: 0 18px; }
  .nav__acct { order: 3; }
  .nav__cart { order: 4; }
  .nav__toggle { order: 5; }
  .nav nav { margin: 0; }
  html.js .nav__links { display: none; }
  .nav__links { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; padding: 8px 24px 16px; box-shadow: 0 20px 30px rgba(12, 17, 21, .08); }
  .nav__links a { min-height: 52px; font-size: 17px; }
  html.js .nav--open .nav__links { display: flex; }
  html:not(.js) .nav__links { position: static; flex-direction: row; flex-wrap: wrap; box-shadow: none; border: 0; padding: 0; width: 100%; }
}
@media (max-width: 900px) {
  .hero { padding-top: 24px; }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__media { order: -1; min-height: 0; padding: 28px 16px 48px; }
  .hero__media::after { width: 60%; bottom: 30px; }
  .badge { width: 92px; height: 92px; top: 14px; right: 14px; }
  .badge b { font-size: 20px; }
  .badge span { font-size: 9px; }
  .hero__usa, .hero__colors { display: none; }
  .hero h1 { max-width: none; }
  .nums__grid { grid-template-columns: 1fr; gap: 8px; }
  .num { border-left: 0; padding: 22px 0 8px; border-top: 1px solid var(--line); }
  .num:first-child { border-top: 0; padding-top: 0; }
  .lab__grid { grid-template-columns: 1fr; gap: 32px; }
  .prod__grid { grid-template-columns: 1fr; }
  .prod { grid-template-columns: 1fr; text-align: left; padding: 24px 20px; }
  .prod--lead { gap: 12px; padding: 30px 26px 26px; }
  .prod__body { min-height: 0; }
  .prod__img { max-width: 200px; }
  .prod--lead .prod__img { max-width: 240px; }
  .guides__grid { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .cta__in { grid-template-columns: 1fr; gap: 0; }
  .cta__copy { padding: 56px 0 8px; }
  .cta__can { width: 280px; height: 280px; margin-bottom: -24px; }
  .cta__new { top: 24px; left: 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .calcsec { padding: 56px 0; }
  .calcsec--page { min-height: 0; }
  .calcsec__grid { grid-template-columns: 1fr; gap: 28px; }
  .calcsec__panel { padding: 20px 16px; border-radius: 16px; }
  .rc__card { padding: 22px 18px; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 40px, 1200px); }
  .nav__in { gap: 12px; }
  /* At 375 the logo, the Shop Now pill, the cart and the menu button do not
     fit on one row and the menu button was pushed past the screen edge.
     The hero and the sticky buy bar already carry the shop action here. */
  .nav__cta { display: none; }
  .nav__acct { order: 2; margin-left: auto; margin-right: -6px; }
  .nav__cart { order: 3; }
  .nav__toggle { order: 4; margin-right: -6px; }
  .nav__acct, .nav__cart { width: 44px; }
  body { font-size: 16px; }
  /* Tight enough that all three promises hold one line down to 360 in Barlow
     and in either local fallback, so the row never changes line count. */
  .promise { font-size: 10.5px; letter-spacing: .06em; }
  .promise ul { gap: 6px 10px; min-height: 32px; }
  .promise li + li::before { display: none; }
  .hero h1 { font-size: 40px; }
  .hero__sub { font-size: 17px; }
  .hero__actions .btn { width: 100%; }
  .btn--buy { width: 100%; min-width: 0; }
  .nums { padding: 56px 0 48px; }
  .lab, .products, .voices, .guides, .faq { padding: 56px 0; }
  .proof { padding: 56px 0; }
  .tile { min-height: 132px; padding: 20px 16px 16px; }
  .tile__val { font-size: 40px; }
  .tile__val--sm { font-size: 24px; }
  .prod .btn { align-self: stretch; }
  .sec__head .btn { width: 100%; }
  .quote { padding: 34px 24px 26px; }
  .quote p { font-size: 18px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .news { flex-direction: column; }
  .news .btn { width: 100%; }
  .foot__bottom { flex-direction: column; }
  .press__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; justify-items: center; align-items: center; }
  .press__label { grid-column: 1 / -1; text-align: center; }
  .press img, .press img.press--ink, .press img.press--amz { height: auto; width: auto; max-width: 100%; max-height: 22px; object-fit: contain; }
  .press img.press--seal { height: auto; max-height: 40px; }
  .rc__opts--row { grid-template-columns: 1fr 1fr; }
  .rc__plan li { grid-template-columns: 52px 1fr auto; gap: 8px; }
  .rc__plan img { width: 52px; height: 52px; }
  .rc__total { font-size: 32px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 18px; }
  .hero__grid { align-items: start; }
  .hero__grid--lineup { align-items: center; }
  .hero__media { min-height: 560px; }
  .hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
  .hero__sub { font-size: 15.5px; max-width: 52ch; }
  .rating { margin: 8px 0 12px; }
  .hero__actions { margin-top: 16px; }
}

/* Calculator: typed area entry beside the slider, for jobs past 3,000 sq ft. */
.rc__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  width: 4.5ch;
  padding: 0;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: inherit;
  text-align: right;
  -moz-appearance: textfield;
}
.rc__num::-webkit-outer-spin-button,
.rc__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rc__num:focus { outline: none; border-bottom-color: currentColor; }

/* Footer policy links. These pages exist and must be reachable before checkout. */
.foot__legal { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; }
.foot__legal a { color: rgba(255,255,255,.62); font-size: 13px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot__legal a:hover { color: #fff; text-decoration: underline; }
.foot__bottom ul a { color: inherit; text-decoration: none; }
.foot__bottom ul a:hover { text-decoration: underline; }