/* ============================================================================
   THERMO FISHER SCIENTIFIC — per-shop brand layer  (hand-authored)

   Loaded IMMEDIATELY AFTER public/css/thermofishersci.css, which is REGENERATED
   by site-factory/generate-identity.js. Nothing shop-specific may live in that
   file (SCAFFOLD-RUNBOOK §9.3) — it belongs here.

   What this layer does, and why:
   The generated identity derives its whole neutral ramp from the brand hue, so
   a #E71316 shop comes out pink-on-pink. The real Thermo Fisher surface is the
   opposite: a cool, near-white corporate ground with TRUE neutrals, and red
   used sparingly as a signal — rules, fills, and the wordmark. So this layer
   re-neutralises the ramp, squares the geometry off, replaces the mono
   micro-labels with letterspaced Public Sans caps (mono reads "dev tool", the
   brand reads "instrument catalogue"), and gives the header/hero/sections a
   keyline-driven rhythm that no other shop in the fleet uses.

   Contrast note (§9.4): every neutral below is a true grey, so each one is
   MORE contrasty on the dark grounds (footer, trustpilot ribbon, sale bar,
   photo scrims) than the red-tinted token it replaces — the ramp is lifted, not
   lowered. Verified with contrast-audit.js on every page + the checkout modal.
   ========================================================================== */

:root {
    /* --- True-neutral ramp (replaces the hue-tinted one) ------------------- */
    --white: #ffffff;
    --paper: #ffffff;
    --porcelain: #ffffff;
    --gray-50: #f7f8f9;
    --gray-100: #eef0f2;
    --gray-200: #e1e4e8;
    --gray-300: #c7ccd2;
    --gray-400: #949ba3;
    --gray-500: #6b737c;
    --gray-600: #545b63;
    --gray-700: #3c4147;
    --gray-800: #24282c;
    --gray-900: #16181b;
    --ink: #16181b;

    --border-subtle: #e6e9ec;
    --border-default: #d5d9de;
    --hairline: 1px solid #e6e9ec;
    --surface-elevated: #ffffff;
    --surface-sunken: #f4f5f7;
    --grid-line: rgba(22, 24, 27, 0.045);

    /* Red stays the signal colour; only the tints are de-pinked. */
    --primary-50: #fdf2f2;
    --primary-100: #fadcdc;
    --accent-navy: #24282c;

    /* Neutral, un-tinted elevation — the red-tinted shadows read as a smudge
       on a white ground. */
    --shadow-sm: 0 1px 2px rgba(22, 24, 27, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 24, 27, 0.04), 0 6px 16px -8px rgba(22, 24, 27, 0.12);
    --shadow-lg: 0 2px 4px rgba(22, 24, 27, 0.05), 0 14px 30px -12px rgba(22, 24, 27, 0.16);
    --shadow-xl: 0 4px 10px rgba(22, 24, 27, 0.06), 0 26px 52px -18px rgba(22, 24, 27, 0.2);

    /* Brand-layer-only helpers */
    --tfs-rule: #e1e4e8;
    --tfs-red: #e71316;
    --tfs-red-deep: #b60f12;
    --tfs-label: 0.68rem;
}

/* === TYPE ================================================================
   Micro-labels move off JetBrains Mono onto letterspaced Public Sans caps.
   Mono is kept where it is genuinely data: cat numbers, prices, countdowns. */
.hero-eyebrow,
.trending-category, .trending-cta,
.footer-col h4, .footer-logo small,
.mobile-menu-title,
.site-flash,
.tfs-label {
    font-family: var(--font-family) !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.site-flash { font-size: 0.68rem; letter-spacing: 0.1em; }
h1, h2, h3, h4, .section-heading, .section-header h2 { letter-spacing: -0.02em; }

/* === HEADER ==============================================================
   Solid white, one hairline, no blur. The brand mark is the real lockup
   (public/logo.svg, traced from the supplied logo) rather than a square tile
   plus a text abbreviation. */
.header {
    background: #ffffff;
    backdrop-filter: none;
    border-bottom: 1px solid var(--tfs-rule);
    box-shadow: none;
}
.header .logo { gap: 0; }
.header .logo-lockup {
    display: block;
    width: 172px;
    max-width: 46vw;
    height: auto;
}
.header .logo-text small, .logo-text small {
    display: block;
    font-family: var(--font-family);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 3px;
    white-space: nowrap;
}
.nav-link.active, .nav-link:hover { background: transparent; }   /* no pink pill */
.nav-link.active { color: var(--tfs-red); }
.header .cart-btn, .cart-btn { border-radius: 0; font-weight: 700; letter-spacing: 0.04em; }
.header .warehouse-btn, .warehouse-btn { border-radius: 0; border-color: var(--border-default); }

/* === FLASH + TRUST BAR ===================================================
   The flash ribbon becomes solid brand red — it is the one full-bleed red
   band on the page, which is how the brand actually behaves. */
.site-flash {
    background: var(--tfs-red);
    color: #ffffff;
    border-bottom: none;
}
.site-flash strong { color: #ffffff; }
.trust-bar { background: var(--gray-900) !important; }
.trust-bar-item, .trust-bar-item i { color: #e8eaec !important; }
.trust-bar-item a { color: #e8eaec !important; }

/* === HERO ================================================================ */
.hero-section {
    background: #ffffff;
    border-bottom: 1px solid var(--tfs-rule);
}
.hero-section::before { opacity: 0.5; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--tfs-red);
    border-radius: 0;
    padding: 2px 0 2px 10px;
    color: var(--gray-700);
    font-size: var(--tfs-label);
}
.hero-title { line-height: 1.06; }
/* The generated theme sets the emphasis span in italic. The brand's wordmark
   is upright and tightly set; italic reads as a different company. */
.hero-title span { font-style: normal; color: var(--tfs-red); }
.hero-title .cn-seal {
    border-color: var(--tfs-red);
    color: var(--tfs-red);
}
.hero-subtitle { color: var(--gray-600); }
.hero-cta-primary, .hero-cta-secondary { border-radius: 0; font-weight: 700; }
.hero-cta-primary::after { display: none; }          /* no sheen sweep */
.hero-cta-primary:hover { transform: none; box-shadow: none; background: var(--tfs-red-deep); }
.hero-cta-secondary {
    border: 1px solid var(--gray-800);
    color: var(--gray-800);
    background: #ffffff;
}
.hero-cta-secondary:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--tfs-red);
    color: var(--tfs-red);
    background: #ffffff;
}
.hero-trust-row { gap: 1.5rem; }
.hero-trust-item, .hero-trust-item a { color: var(--gray-600); font-weight: 600; }
.hero-trust-item i { color: var(--tfs-red); }

/* Spec strip under the hero copy — the "at a glance" block a manufacturer
   catalogue leads with. */
.tfs-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 2rem;
    border-top: 1px solid var(--tfs-rule);
    border-left: 1px solid var(--tfs-rule);
}
.tfs-spec {
    padding: 0.85rem 0.9rem;
    border-right: 1px solid var(--tfs-rule);
    border-bottom: 1px solid var(--tfs-rule);
}
.tfs-spec-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}
.tfs-spec-label {
    display: block;
    margin-top: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* === DEAL CARD =========================================================== */
.deal-card {
    border-radius: 0;
    border: 1px solid var(--border-default);
    box-shadow: none;
}
.deal-card-badge { background: var(--tfs-red); border-radius: 0; }
.deal-card-badge span:first-child, .deal-card-badge span:last-child { color: #ffffff; }
.deal-tier-value { border-radius: 0; }
.deal-card-footer { background: var(--surface-sunken); }

/* === SECTIONS ============================================================
   Alternating white / cool grey, separated by hairlines rather than shadow;
   every heading carries a short red keyline. */
.section-alt { background: var(--surface-sunken); border-block: 1px solid var(--tfs-rule); }
.section-header h2::after,
.trust-header .section-heading::after {
    background: var(--tfs-red);
    height: 3px;
    border-radius: 0;
}
.order-step-icon, .cert-icon, .trust-card-icon {
    border-radius: 0;
    background: var(--primary-50);
    color: var(--tfs-red);
}
.cert-card, .trust-card, .lab-video-card, .trending-card, .pay-badge {
    border-radius: 0;
}
.cert-card, .trust-card {
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cert-card:hover, .trust-card:hover {
    border-color: var(--tfs-red);
    box-shadow: var(--shadow-md);
}
.trending-card { border: 1px solid var(--border-subtle); }
.trending-card:hover { transform: none; }
.trust-stat { border-radius: 0; }
.trust-stat-value { color: var(--tfs-red); }

/* === FAQ ================================================================= */
.faq-item { border-radius: 0; background: #ffffff; border: 1px solid var(--border-subtle); }
.faq-item.open { border-color: var(--tfs-red); }
.faq-question { font-weight: 700; color: var(--ink); }

/* === BUTTONS / MODALS ==================================================== */
.btn, .checkout-btn, .btn-primary, .btn-secondary { border-radius: 0; font-weight: 700; }
.btn-primary:hover, .checkout-btn:hover { transform: none; background: var(--tfs-red-deep); }
.modal-content { border-radius: 0; }
.modal { background: rgba(22, 24, 27, 0.55); }

/* === FOOTER ==============================================================
   Near-black with the brand's red top rule; neutral greys read cleaner and
   measure HIGHER contrast on this ground than the tinted ramp did. */
.footer { background: var(--gray-900); border-top: 3px solid var(--tfs-red); }
.footer-col a, .footer-col p { color: #ced3d8; }
.footer-col h4 { color: #9aa1a9; }
.footer-bottom p, .footer-logo small { color: #9aa1a9; }
.footer-social a { color: #ced3d8; border-radius: 0; }

/* === MOBILE ============================================================== */
@media (max-width: 900px) {
    .header .logo-lockup { width: 132px; }
    .header .logo-text small, .logo-text small { display: none; }
}
@media (max-width: 640px) {
    .tfs-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-trust-row { gap: 0.75rem 1rem; }
}

/* === LATE FIXES (order matters — these must beat the rules above) ========= */

/* The Trustpilot ribbon carries BOTH `trustpilot-banner` and `section-alt`.
   The `.section-alt` rule above would repaint that DARK ribbon with the light
   sunken surface and strand white text on near-white (§9.4, the exact
   dark-on-dark class of bug). Re-assert the dark ground after it. */
.trustpilot-banner, .trustpilot-banner.section-alt {
    background: var(--gray-900);
    border-block: none;
}
.trustpilot-banner:hover, .trustpilot-banner.section-alt:hover { background: #0d0f11; }
.tp-banner-btn { border-radius: 0; color: var(--tfs-red); }
.tp-banner-btn:hover { background: #f2f4f6; transform: none; color: var(--tfs-red-deep); }

/* home.css paints the payment strip in the TEMPLATE's mint-green gradient
   (#eef5f0 / #dcebe1) and the identity layer has no rule for it — a leftover
   of another brand's palette sitting mid-page. Neutralise it. */
.payment-methods-section {
    background: var(--surface-sunken);
    border-top: 1px solid var(--tfs-rule);
    border-bottom: 1px solid var(--tfs-rule);
}
.payment-methods-title i { color: var(--tfs-red); }
.pay-crypto-tag { border-radius: 0; }

/* --- Header fit ----------------------------------------------------------
   .header-content is flex-nowrap inside a 1200px-capped .container, so every
   pixel the brand block takes is a pixel the nav has to absorb by wrapping its
   labels onto a second line (the QST/erp header trap). Keep the lockup narrow
   and step it down before the nav has to wrap. */
.header .logo-lockup { width: 156px; }
@media (max-width: 1320px) {
    .header .logo-lockup { width: 138px; }
    .header .logo-text small, .logo-text small { font-size: 0.55rem; letter-spacing: 0.08em; }
}
.hero-title .cn-seal { font-size: 0.42em; vertical-align: 0.35em; }
.hero-trust-row { gap: 0.85rem 1.4rem; margin-top: 1.25rem; }
.tfs-spec-label { line-height: 1.35; }

/* ==========================================================================
   CONTRAST FLOOR  (SCAFFOLD-RUNBOOK §9.4 — the floor is keyed on the HEX,
   readability on the GROUND, so both directions are handled here.)

   Measured with site-factory/contrast-audit.js on /, /products, /pricelist,
   /reports/, /reviews, /about, /contact, /wholesale/login, /product/:catNo and
   the cart+checkout modal. Three root causes accounted for all 45 failures:

   1. The literal logo red #E71316 measures 4.66:1 on PURE WHITE — so as TEXT
      it fails AA on every tint the theme paints (chips, badges, price cells,
      the active mobile-nav item, warehouse rows). Fills are fine: white on
      #E71316 is 4.66:1 and passes. So the brand splits into two tokens —
      --primary is the accessible TEXT red, --tfs-red stays the true logo red
      and is re-asserted below on every surface that is a FILL. The two differ
      by ~7% luminance and read as the same red side by side.
   2. --gray-500 sat at 4.41:1 on the light grounds. Darkened.
   3. That same darkening drops it to 2.9:1 on the near-black footer, so the
      footer's text colour is now set explicitly instead of inheriting it.
   ========================================================================== */
:root {
    --primary: #d81114;        /* accessible TEXT red (fills use --tfs-red) */
    --primary-100: #fdeeee;    /* lightened so red text clears AA on it */
    --gray-500: #5a6169;
}

/* --- FILLS keep the exact logo red --------------------------------------- */
.btn-primary, .checkout-btn, .hero-cta-primary,
.header .cart-btn, .cart-btn,
.view-product-btn, .bottom-nav-badge, .skip-link:focus {
    background: var(--tfs-red);
}
.btn-primary:hover, .checkout-btn:hover, .hero-cta-primary:hover,
.header .cart-btn:hover, .cart-btn:hover, .view-product-btn:hover {
    background: var(--tfs-red-deep);
}

/* --- Dark grounds: set the text explicitly ------------------------------- */
.footer, .footer p, .footer li, .footer span, .footer small,
.footer-col p, .footer-bottom p, .footer-copyright {
    color: #ced3d8;
}
.footer a, .footer-col a, .footer-social a { color: #ced3d8; }
.footer a:hover, .footer-col a:hover, .footer-social a:hover { color: #ff8a8c; }
.footer-col h4, .footer-logo small { color: #a7aeb6; }

/* --- Retire the template's mint/cream tints ------------------------------
   product.css / wholesale.css / pricelist.css hardcode another brand's
   #eef5f0 / #dcebe1 / #fbf7ea chips. They are both an off-palette leak and
   the ground under four of the failures above. */
.pd-tag, .pd-tag-category, .pd-cat-badge,
.wh-option, .wh-option small,
.pl-raw-tier, .pl-raw-tier-label {
    background-color: var(--gray-50);
}
.pd-tag-category, .pd-cat-badge { background-color: var(--primary-50); color: var(--primary); }

/* --- Last two, both fixed at the ground rather than the text -------------- */
/* footer.ejs sets `color: var(--gray-500)` INLINE on the contact paragraph, so
   no stylesheet rule can reach it — an attribute selector anchored to the
   property is the only lever (§9.6/§9.7: matched case-insensitively and
   anchored to `color:`, so a `background: var(--gray-500)` is never caught).
   Scoped to .footer, which is the only dark ground this pattern lands on. */
.footer [style*="color: var(--gray-500)" i],
.footer [style*="color:var(--gray-500)" i] { color: #ced3d8 !important; }

/* wholesale.css paints the login card's contact strip in the template's mint
   #eef5f0. Neutralise the ground and use the accessible text red. */
.ws-contact-links { background: var(--gray-50); }
.ws-contact-links a, .ws-contact-links a i { color: var(--primary); }

/* --- Mobile audit fixes (site-factory/mobile-audit.js @390px) ------------- */
:root { --tfs-label: 0.7rem; }   /* 11.2px — the audit floor is 11px */
@media (max-width: 640px) {
    .tfs-spec-label { font-size: 0.7rem; letter-spacing: 0.08em; }
    .tfs-spec-value { font-size: 1.25rem; }
    /* the hero trust row's links were 21px tall — below the 44px tap floor */
    .hero-trust-item { display: inline-flex; align-items: center; min-height: 44px; }
    .hero-trust-item a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Footer brand block: the real lockup, reversed out for the dark ground - */
.footer-logo { display: block; }
.footer-logo-lockup { display: block; width: 180px; max-width: 60%; height: auto; margin-bottom: 8px; }
.footer-logo small { display: block; font-family: var(--font-family); letter-spacing: 0.09em; }

/* --- Real supplied artwork ------------------------------------------------
   public/logo.svg is the operator's own thermofisher-logo.png embedded verbatim
   (site-factory/brand-assets/thermofishersci/lockup.svg), so it is a RED BLOCK
   with the wordmark reversed out in white — not a transparent wordmark. Give it
   a little breathing room on the white header so the block reads as the logo
   rather than as a banner, and drop the strapline that used to sit under a
   transparent mark. */
.header .logo-lockup { width: 188px; }
@media (max-width: 1320px) { .header .logo-lockup { width: 156px; } }
.header .logo-text small, .logo-text small { display: none; }
.footer-logo-lockup { width: 196px; }

/* ==========================================================================
   HERO — rebuilt
   Structural problems in the previous version, all visible at 1024px: the
   1fr/1fr grid squeezed the copy column so the H1 broke mid-phrase ("built" /
   "to specification"); a third CTA wrapped onto its own row; the spec strip
   sat inside the copy column where its cells could not size evenly; and the
   trust row wrapped to two lines. On mobile, three stacked full-width buttons
   pushed the actual offer a full screen below the fold.

   The fix is structural rather than cosmetic: give the copy column more of the
   grid, pin the H1 line break, demote the third action to a text link, and
   lift the spec strip out into a full-bleed band that acts as the seam between
   the hero and the rest of the page.
   ========================================================================== */

.tfs-hero {
    padding: 3.25rem 0 0;
    border-bottom: none;                 /* the spec band is the edge now */
    background:
        radial-gradient(ellipse 60% 120% at 92% -20%, rgba(231, 19, 22, 0.07), transparent 60%),
        #ffffff;
}
.tfs-hero .hero-grid {
    align-items: start;
    padding-bottom: 3rem;
}
@media (min-width: 900px) {
    /* copy needs the larger share — at 1fr/1fr the headline broke mid-phrase */
    .tfs-hero .hero-grid { grid-template-columns: 1.12fr 0.88fr; gap: 3.5rem; }
}

/* --- copy ---------------------------------------------------------------- */
.tfs-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 1.15rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--gray-600);
    font-size: var(--tfs-label);
    line-height: 1;
}
.tfs-eyebrow-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--tfs-red);
    color: #fff;
    font-family: "Noto Serif SC", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
.tfs-eyebrow-dot { color: var(--gray-500); }   /* gray-300 measured 1.44:1 */

.tfs-hero .hero-title {
    margin-bottom: 1.1rem;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.tfs-hero .hero-title span { color: var(--tfs-red); font-style: normal; }
.tfs-hero .hero-subtitle {
    max-width: 34em;
    margin-bottom: 1.75rem;
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--gray-600);
}

/* --- actions -------------------------------------------------------------
   Two buttons, not three. The third carried the same visual weight as the
   other two while being the least-used path, and it is what forced the wrap. */
.tfs-hero .hero-cta {
    gap: 0.7rem;
    margin-bottom: 1.15rem;
    animation: none;                     /* hero is the LCP element */
}
.tfs-hero .hero-cta-primary,
.tfs-hero .hero-cta-secondary {
    min-height: 50px;
    padding: 0 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.tfs-herolinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: none;
}
.tfs-herolinks a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;                    /* tap floor, mobile-audit gate */
    color: var(--gray-600);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.tfs-herolinks a:hover { color: var(--primary); border-bottom-color: currentColor; }
.tfs-herolinks i { color: var(--tfs-red); font-size: 0.85em; }

/* --- product proof -------------------------------------------------------
   The hero showed no product at all. A real vial, with its lot code, is the
   most direct statement this shop can make, and it fills the dead column. */
.tfs-heroproof {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--tfs-rule);
}
.tfs-heroproof img {
    width: 64px;
    height: auto;
    flex: 0 0 auto;
    mix-blend-mode: multiply;            /* the render ships a white ground */
}
.tfs-heroproof figcaption { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tfs-heroproof-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}
.tfs-heroproof-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray-600);
    overflow-wrap: anywhere;
}

/* --- offer card ---------------------------------------------------------- */
.tfs-hero .deal-card { box-shadow: var(--shadow-md); }
.tfs-hero .deal-card-badge {
    padding: 0.7rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tfs-hero .deal-tier { padding: 0.8rem 0; align-items: center; }
.tfs-hero .deal-tier-label { font-weight: 600; color: var(--gray-700); }
.tfs-hero .deal-tier-value {
    padding: 4px 10px;
    background: var(--primary-50);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.tfs-hero .deal-tier-top .deal-tier-value { background: var(--tfs-red); color: #fff; }
.tfs-hero .deal-card-footer { padding: 0.8rem 1.1rem; }

/* "Shop now" was a bare link in a padded row — make it a real button-sized
   target, which also gives the card a proper terminal action. */
.tfs-hero .deal-shop-now { padding: 0; border-top: 1px solid var(--tfs-rule); }
.tfs-hero .deal-shop-now a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    background: var(--tfs-red);
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.tfs-hero .deal-shop-now a:hover { background: var(--tfs-red-deep); }
.tfs-hero .deal-contact-secondary { padding: 0.7rem 1.1rem; text-align: center; font-size: 0.82rem; }

/* --- spec band -----------------------------------------------------------
   Lifted out of the copy column so the four cells get the full container and
   size evenly, and so the band reads as the hero's bottom edge. */
.tfs-specband {
    border-top: 1px solid var(--tfs-rule);
    border-bottom: 1px solid var(--tfs-rule);
    background: var(--surface-sunken);
}
.tfs-specband .tfs-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: none;
}
.tfs-specband .tfs-spec {
    display: flex;
    flex-direction: column-reverse;      /* value reads first; dt stays first in the DOM */
    gap: 4px;
    padding: 1.15rem 1.25rem;
    border: none;
    border-left: 1px solid var(--tfs-rule);
}
.tfs-specband .tfs-spec:first-child { border-left: none; }
.tfs-specband .tfs-spec-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}
.tfs-specband .tfs-spec-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 899px) {
    .tfs-hero { padding-top: 2.5rem; }
    .tfs-hero .hero-grid { gap: 2rem; padding-bottom: 2.25rem; }
    .tfs-heroproof { max-width: 420px; }
}

/* --- mobile ---------------------------------------------------------------
   The offer used to sit a full screen below the fold behind three stacked
   buttons. Now: headline, one primary action, one secondary, a light link row,
   then the offer. The proof tile is desktop-only — on a phone it costs a
   screen of height to say what the catalogue says two taps later. */
@media (max-width: 767px) {
    .tfs-hero { padding-top: 1.6rem; }
    .tfs-hero .hero-grid { gap: 1.5rem; padding-bottom: 1.75rem; }
    .tfs-hero .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); letter-spacing: -0.025em; }
    .tfs-hero .hero-subtitle { margin-bottom: 1.4rem; font-size: 0.95rem; }
    .tfs-hero .hero-cta { flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
    .tfs-hero .hero-cta-primary,
    .tfs-hero .hero-cta-secondary { width: 100%; min-height: 52px; }
    .tfs-herolinks { gap: 0 1.25rem; }
    .tfs-herolinks a { font-size: 0.82rem; }
    .tfs-heroproof { display: none; }
    .tfs-hero .deal-tier { padding: 0.7rem 0; }
    .tfs-hero .deal-tier-value { font-size: 0.75rem; }

    .tfs-specband .tfs-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tfs-specband .tfs-spec { padding: 0.95rem 1rem; border-top: 1px solid var(--tfs-rule); }
    .tfs-specband .tfs-spec:nth-child(-n+2) { border-top: none; }
    .tfs-specband .tfs-spec:nth-child(odd) { border-left: none; }
    .tfs-specband .tfs-spec-label { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* Hero is the LCP element — never animate it, and honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .tfs-hero *, .tfs-specband * { animation: none !important; transition: none !important; }
}

/* --- hero refinements, second pass ---------------------------------------- */

/* The seal glyph was unreadable at 12px inside a 22px tile. */
.tfs-eyebrow-seal { width: 24px; height: 24px; font-size: 14px; }

/* Tracked-dispatch strip. This exists because `align-items:start` leaves the
   copy column ~200px shorter than the offer column at >=900px, and dead space
   under a call to action reads as an unfinished page. Real shipping figures
   are the most useful thing that can go there. */
.tfs-lanes {
    display: none;                       /* >=900px only: below that the column
                                            heights already match and the space
                                            is better spent on the offer */
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tfs-rule);
}
@media (min-width: 900px) { .tfs-lanes { display: block; } }
.tfs-lanes-head {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.tfs-lanes ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tfs-lanes li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 1rem;
    border-right: 1px solid var(--tfs-rule);
}
.tfs-lanes li:last-child { border-right: none; }
.tfs-lanes li + li { padding-left: 1rem; }
.tfs-lane-to {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
}
.tfs-lane-days {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--gray-600);
    white-space: nowrap;
}

/* The offer badge clipped its right-hand chip under ~430px. */
.tfs-hero .deal-card-badge { flex-wrap: wrap; gap: 6px 10px; }
.tfs-hero .deal-card-badge > span:last-child { flex: 0 0 auto; }

/* Header nav wrapped to two lines between roughly 940px and 1180px — the brand
   lockup plus eight labels plus the warehouse and cart controls exceed the
   capped container. Tighten the labels rather than let the row wrap. */
@media (max-width: 1180px) {
    .nav-link { padding: 6px 6px; font-size: 0.76rem; }
    .header .logo-lockup { width: 132px; }
    .nav-links { gap: 0; }
}
@media (max-width: 980px) {
    .nav-link { padding: 5px 5px; font-size: 0.73rem; }
}

@media (max-width: 767px) {
    /* the second sentence is accurate but costs two lines on a phone; it is
       repeated in full on /about and in the FAQ */
    .tfs-sub-extra { display: none; }
    .tfs-herolinks { gap: 0 1rem; }
}