/* Factory website starter kit — site stylesheet. Colours are CSS variables in
   :root; swap the hex values for your brand, keep the variable names so the
   rest of the sheet does not need touching. */
:root{
  /* wangyudian.com brand: deep pitch green + print-ink orange. The variable NAMES
     are the kit's (--navy is the primary slot and holds pitch green, --amber holds
     the orange) so every rule below keeps working. Every text/background pair used
     on buttons, header, footer, tags and links was computed against WCAG 4.5:1
     (3:1 for large text and UI) — the table is in docs/DESIGN-NOTES.md. */
  --navy:#0a5a35; --navy-dark:#063d22; --navy-soft:#e3f2e8;
  --ink:#14201a; --muted:#55635b; --mist:#f2f5f2; --line:#dbe4dd;
  --teal:#0f766e; --teal-soft:#e6f5f1; --paper:#faf9f4;
  --amber:#e8630f; --amber-soft:#ffe9d6; --amber-text:#9a3d06; --wa:#11833f; --wa-dark:#0d6a32;
  /* Brand-only additions. --pitch-black/--pitch-mid bound the hero and CTA gradients
     (contrast is checked against BOTH stops); the --orange-* and --on-dark* tints are
     the lightest values that pass 4.5:1 on those greens — do not lighten the greens
     without re-running the contrast table. --slate is the "factory-stated" tag hue,
     kept blue so it cannot be confused with the green "document-sighted" tag. */
  --pitch-black:#041f12; --pitch-mid:#0b6239; --orange-light:#ffc298; --orange-stat:#ffb980; --orange-bright:#ff8c3a;
  --on-dark:#cfe3d6; --on-dark-soft:#a9c7b4; --hero-pill:#dbe9df; --slate:#2f4f8f; --slate-soft:#e8edf8;
  --halftone:radial-gradient(circle,rgba(255,255,255,.14) 1.2px,transparent 1.9px);
  --radius:14px; --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Respect a reduced-motion preference: kill the smooth scroll the skip link
   triggers, and the float/card transforms. Vestibular disorders make animated
   movement genuinely painful, and this costs nothing to honour. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wa-float,.buyer-card,.btn{transition:none}
  .wa-float:hover,.buyer-card:hover,.btn:hover{transform:none}
}
body{font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px}
/* THIS is what prevents image layout shift on this site: the aspect-ratio rules on
   .photos img / .card img / .product img reserve the box before the file loads. The
   width/height ATTRIBUTES on the img tags are correct and worth keeping, but measured
   2026-08-27 they carry none of the load: all 75 images across 8 pages were already
   reserved by CSS aspect-ratio, and stripping the attributes produced zero displacement.
   So do NOT remove an aspect-ratio rule believing the attributes cover it — they do not
   here, because object-fit:cover means the rendered ratio is the CSS one, not the file's. */
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
a{color:var(--navy);text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* header */
/* Skip link: the first focusable element on every page. Off-screen until focused,
   then pinned top-left. Keyboard users would otherwise tab the whole nav on every
   page before reaching content. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:.95rem}
.skip-link:focus,.skip-link:focus-visible{left:0}
main:focus{outline:none}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
/* Kit trim: a 4px green/orange band across the top of the header. It is absolutely
   positioned inside the sticky header so it adds no height — the mobile nav panel is
   pinned at top:64px below and must keep lining up with the header's bottom edge. */
.site-header:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy) 0 68%,var(--amber) 68% 84%,var(--navy-dark) 84% 100%);pointer-events:none}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand-mark{font-weight:800;font-size:1.45rem;letter-spacing:-.02em;color:var(--navy-dark)}
/* The "print dot": a small tilted orange square after the wordmark, the one brand
   device reused on the footer brand and the OG cover. Inline-block, not flex, so
   .brand-reg's vertical-align keeps working if a registered mark is ever added. */
.brand-mark:after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.32em;border-radius:2px;background:var(--amber);transform:rotate(14deg);vertical-align:.08em}
.brand-reg{font-size:.6em;vertical-align:super}
.brand-sub{font-size:.68rem;color:#5d6b63;letter-spacing:.02em}
.site-nav{display:flex;align-items:center;gap:22px}
.nav-item{font-size:.92rem;font-weight:600;color:#22332a;padding:6px 0}
.nav-item:hover{color:var(--navy)}
/* Orange underline on the top-level links only (the dropdown container is a div whose
   decoration would propagate into the static mobile submenu). */
.site-nav>a.nav-item:hover,.has-drop>a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:6px}
.has-drop{position:relative}
.drop{display:none;position:absolute;top:100%;left:-12px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:10px;box-shadow:0 10px 30px rgba(6,61,34,.14);min-width:230px;padding:8px 0}
/* KEYBOARD PARITY — DO NOT REDUCE THIS TO :hover ALONE.
   Without :focus-within the Products submenu never opens for a keyboard user, so all
   seven links inside it — including the Product Finder — are unreachable above 960px.
   That is a WCAG 2.1.1 keyboard failure on the site's primary navigation.
   This rule was added deliberately in be0a575, silently dropped by the 3b9575f redesign
   (comment and all), and restored here after the dropdown was found unreachable by
   keyboard on the live site. If a redesign touches this line, re-test with the keyboard. */
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;padding:9px 18px;font-size:.9rem}
.drop a:hover{background:var(--mist)}
.drop a:focus-visible,.nav-item:focus-visible,.site-nav a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
/* Wide tables scroll inside their own box. tabindex=0 in the markup makes that box
   keyboard-scrollable (WCAG 2.1.1) - which makes it focusable, so it MUST keep a
   visible ring. Do not drop this rule when tidying focus styles. */
.scroll-x{overflow-x:auto}
/* The acceptance checkboxes are a group, so they need a fieldset+legend (WCAG 1.3.1).
   Reset the UA border/padding so it looks exactly like the plain label it replaced. */
.choice-set{border:0;padding:0;margin:0;min-width:0}
.choice-set>legend{display:block;padding:0;font-size:.82rem;font-weight:600;color:#22332a;margin:12px 0 4px}
.scroll-x:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;background:none;border:none;border-radius:8px;cursor:pointer;color:var(--navy)}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--navy-soft)}

/* buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);text-decoration:none}
/* WhatsApp green stays the #25D366 hue (142°) but darkened to #11833f so white text
   reaches 4.84:1; the brand's own greens are bluer (150°) and darker, so the CTA
   still reads as "the WhatsApp button" next to them. */
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(17,131,63,.28)}
.btn-wa:hover{background:var(--wa-dark);box-shadow:0 8px 20px rgba(17,131,63,.34)}
.btn-navy{background:var(--navy-dark);color:#fff}
.btn-navy:hover{background:var(--navy)}
.btn-ghost{border:2px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy-soft)}

/* hero */
.hero{background:linear-gradient(115deg,var(--navy-dark) 0%,var(--navy) 55%,var(--pitch-mid) 100%);color:#fff;padding:64px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:2.35rem;line-height:1.2;font-weight:800;margin-bottom:16px}
.hero p{color:var(--on-dark);font-size:1.05rem;margin-bottom:24px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.kicker{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-light);margin-bottom:12px}
/* Orange marks that sit ON the green gradients use --orange-bright: the print orange
   itself is only 2.2:1 against the lightest hero stop, the brighter tint is 3.2:1. */
.kicker:before{content:"";display:inline-block;width:22px;height:3px;margin-right:10px;border-radius:2px;background:var(--orange-bright);vertical-align:.2em}

/* stat bar */
.stats{background:var(--navy-dark);color:#fff;padding:18px 0;border-top:4px solid var(--amber)}
.stats .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:center}
.stat{text-align:center}
.stat b{display:block;font-size:1.25rem;font-weight:800;color:var(--orange-stat);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:.75rem;color:var(--on-dark-soft);letter-spacing:.04em;text-transform:uppercase}

/* sections */
.section{padding:64px 0}
.section.alt{background:var(--mist)}
.sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-size:1.8rem;font-weight:800;color:var(--navy-dark);margin-bottom:10px;letter-spacing:-.02em}
.sec-head h2:before{content:"";display:block;width:36px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--amber)}
.sec-head p{color:var(--muted)}
h3{color:var(--navy-dark)}

/* cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#fff}
.card-img.contain{object-fit:contain;padding:12px}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.08rem;font-weight:700}
.card-body p{font-size:.9rem;color:#44534a}
.card .model{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--amber-text);text-transform:uppercase}
.card .btn{margin-top:auto;align-self:flex-start;padding:9px 16px;font-size:.85rem}

/* product detail blocks */
.product{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.product:first-of-type{border-top:none}
.product-img{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.product h3{font-size:1.35rem;margin-bottom:4px}
.product .model{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--amber-text);text-transform:uppercase}
.product p{margin:10px 0;color:#34433a}
.spec{width:100%;border-collapse:collapse;font-size:.88rem;margin:14px 0 18px}
/* th must carry the same cell styling as td: real <th> were introduced for screen
   readers, and without this the header row and row-header column lose their padding
   and borders entirely. */
.spec td,.spec th{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child,.spec th[scope=row]{color:#55635b;width:42%;font-weight:500;text-align:left}
/* <th> defaults to text-align:center; these were <td><strong> before and were
   left-aligned. Without this the comparison table's header row re-centres. */
.spec th[scope=col]{text-align:left;border-bottom:2px solid var(--navy-dark);color:var(--navy-dark)}
.spec td:last-child{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.84rem;color:#1f2a24}
.spec.prose-table th[scope=row]{width:22%}
.spec.prose-table td:last-child{font-family:inherit;font-size:inherit;color:inherit}
.feat{margin:10px 0 16px;padding-left:20px;color:#34433a;font-size:.93rem}
.feat li{margin-bottom:6px}

/* photo grid */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photos.four{grid-template-columns:repeat(2,1fr)}
.photos figure{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.photos img{aspect-ratio:4/3;object-fit:cover;width:100%}
.photos figcaption{padding:10px 14px;font-size:.82rem;color:#55635b}

/* misc */
.notice{background:var(--navy-soft);border-left:4px solid var(--amber);border-radius:8px;padding:16px 20px;font-size:.92rem;color:#1f2e25;margin:26px 0}
.pf-intro{margin:0 0 18px}
.pf-shortlist{border:1px solid #c9d8ce;border-radius:12px;background:#f6f9f6;padding:20px;margin:18px 0 14px}
.pf-shortlist__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.pf-shortlist__head h2{font-size:1.2rem;color:var(--navy-dark);margin:0 0 3px}
.pf-shortlist__head p{font-size:.82rem;color:#5d6b63;margin:0}
.pf-shortlist__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-shortlist__item{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px}
.pf-shortlist__item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.pf-shortlist__item-head strong{color:var(--navy-dark);font-size:.95rem}
.pf-shortlist__item p{font-size:.82rem;color:#44534a;margin:4px 0;line-height:1.45}
.pf-remove{border:0;background:none;color:#5d6b63;text-decoration:underline;font:inherit;font-size:.78rem;padding:2px;cursor:pointer}
.pf-remove:hover,.pf-remove:focus-visible{color:var(--navy-dark)}
.pf-pick{padding:6px 10px;font-size:.78rem;white-space:nowrap}
.pf-pick:disabled{opacity:.45;cursor:not-allowed}
.pf-shortlist__note{font-size:.82rem;color:#55635b;margin:14px 0}
.pf-shortlist .btn-wa{border:0;cursor:pointer}
.pf-shortlist .btn-wa:disabled{opacity:.5;cursor:not-allowed}
.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0}
.badge{border:1px solid var(--line);border-radius:10px;padding:12px 22px;font-weight:700;color:var(--navy-dark);background:#fff}
.badge small{display:block;font-weight:500;color:#5d6b63;font-size:.72rem}
.breadcrumb{font-size:.82rem;color:#5d6b63;padding:18px 20px 0}
.breadcrumb a{color:#5d6b63}
.page-head{padding:36px 20px 8px}
.page-head h1{font-size:2rem;font-weight:800;color:var(--navy-dark);margin-bottom:10px;letter-spacing:-.025em}
.page-head h1:before{content:"";display:block;width:36px;height:4px;margin:0 0 14px;border-radius:2px;background:var(--amber)}
.page-head p{max-width:760px;color:#44534a}
.cta-band{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--pitch-black),var(--navy) 60%,var(--pitch-mid));color:#fff;text-align:center;padding:52px 20px}
.cta-band:before{content:"";position:absolute;inset:0;z-index:0;background:var(--halftone);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000);mask-image:linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:1.6rem;margin-bottom:10px}
.cta-band p{color:var(--on-dark);margin-bottom:22px;max-width:640px;margin-left:auto;margin-right:auto}

/* footer */
.site-footer{background:var(--navy-dark);color:#c5d8cb;margin-top:64px;border-top:4px solid var(--amber)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px;padding:52px 20px 36px}
.foot-brand{font-weight:800;font-size:1.15rem;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.foot-brand:after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.32em;border-radius:2px;background:var(--amber);transform:rotate(14deg);vertical-align:.08em}
.foot-head{font-weight:700;color:#fff;margin-bottom:12px;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.site-footer a{display:block;color:#c5d8cb;font-size:.9rem;margin-bottom:8px}
.site-footer a:hover{color:#fff}
.site-footer .btn-wa{display:inline-block;color:#fff;margin-top:6px}
.foot-note{font-size:.82rem;color:#a9c7b4;margin-bottom:12px}
.foot-note a{display:inline;color:#c5d8cb}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;font-size:.78rem;color:#8fa79a}

/* floating WhatsApp */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(17,131,63,.45);transition:transform .15s}
.wa-float:hover{transform:scale(1.08);background:var(--wa-dark)}

/* RFQ builder */
.rfq{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin:30px 0}
.rfq h3{margin-bottom:6px}
.rfq p{font-size:.9rem;color:#44534a;margin-bottom:16px}
.rfq label{display:block;font-size:.82rem;font-weight:600;color:#22332a;margin:12px 0 4px}
.rfq input,.rfq select,.rfq textarea{width:100%;padding:10px 12px;border:1px solid #c4d2c8;border-radius:8px;font:inherit;font-size:.92rem;background:#fff}
.rfq textarea{min-height:70px;resize:vertical}
.rfq input:focus-visible,.rfq select:focus-visible,.rfq textarea:focus-visible{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.rfq .btn{margin-top:16px}
.rfq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rfq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rfq-actions .btn{margin-top:0;border:0;cursor:pointer}
.rfq-actions .btn-ghost{border:2px solid var(--navy);background:#fff}
.rfq-status{min-height:1.5em;margin:10px 0 0;color:var(--navy);font-weight:600}
@media (max-width:640px){
  .pf-shortlist__head{display:block}
  .pf-shortlist__head .btn{margin-top:10px}
  .pf-shortlist__items{grid-template-columns:1fr}
  .rfq-grid{grid-template-columns:1fr}
}

/* FAQ */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff}
.faq-item[open]{border-color:var(--navy)}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;color:var(--navy-dark);list-style:none;border-radius:inherit}
.faq-item summary:hover{background:var(--mist)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--amber-text);font-weight:700}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 20px 16px;color:#34433a;font-size:.93rem}
.ship-group td{background:var(--navy-soft);color:var(--navy-dark);font-weight:700;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:.03em}
.price-note{font-size:.83rem;color:var(--navy-dark);background:var(--navy-soft);border-radius:8px;padding:7px 12px;display:inline-block;margin:6px 0 10px;font-family:ui-monospace,Consolas,monospace}
.related{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.86rem;color:#5d6b63}
.related a{margin-right:14px}

/* Editorial insight pages: visible authorship/date, answer-first summaries and
   representative images support readers while the same facts are mirrored in
   Article JSON-LD. Keep the body measure narrow enough for long-form reading. */
.article-meta{margin-top:12px;font-size:.82rem;color:#5d6b63}
.article-body{max-width:900px}
.article-body h2{font-size:1.5rem;line-height:1.25;color:var(--navy-dark);margin:38px 0 12px}
.article-body h2[id]{scroll-margin-top:88px}
.article-body>h2:first-of-type{margin-top:32px}
.article-jump{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin:26px 0 4px;padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.86rem}
.article-jump strong{flex-basis:100%;color:var(--navy-dark)}
.article-jump a{white-space:nowrap}
.article-figure{margin:0 0 28px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.article-figure img{width:100%;aspect-ratio:16/7;object-fit:cover}
.article-figure--square{max-width:620px;margin-left:auto;margin-right:auto}
.article-figure--square img{aspect-ratio:16/9;object-fit:contain;padding:16px;background:var(--mist)}
.article-figure figcaption{padding:10px 14px;font-size:.8rem;color:#55635b}
.answer-box{font-size:1rem;margin-top:0}
.article-process{margin-bottom:30px}

/* document gallery (certifications) */
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:16px 0 8px}
.doc-card{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.doc-card a{display:block;line-height:0;background:#eef3ef}
.doc-card img{width:100%;height:auto;display:block}
.doc-card figcaption{padding:11px 13px;font-size:.78rem;line-height:1.5;color:#44534a}
.doc-card figcaption strong{display:block;color:var(--navy-dark);font-size:.83rem;margin-bottom:4px}
.doc-kind{display:inline-block;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:20px;margin-bottom:7px}
.doc-kind.granted{background:#e6f4ec;color:#1a6b3c}
.doc-kind.attested{background:#eef3ef;color:#44534a}

/* responsive */

/* Keep the full desktop nav for genuinely wide screens. Phone landscape viewports
   now reach 932px, and wrapping the labels into two lines makes the header cramped
   even when it technically fits without overflow. */
@media (max-width:960px){
  .header-row{height:64px}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;background:#fff;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(6,61,34,.14);padding:8px 0 max(16px,env(safe-area-inset-bottom))}
  body.nav-open .site-nav{display:flex}
  .site-nav .nav-item,.site-nav .drop a{padding:11px 24px}
  .drop{display:block;position:static;border:none;box-shadow:none;padding:0 0 0 12px}
  .nav-cta{margin:10px 24px 0}
  .nav-toggle{display:flex}
  body.nav-open{overflow:hidden}
  body.nav-open .wa-float{opacity:0;pointer-events:none}
}

@media (max-width:900px){
  .hero-grid,.grid-3,.grid-4,.product,.foot-grid{grid-template-columns:1fr 1fr}
  .photos{grid-template-columns:1fr 1fr}
  .doc-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .product{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:640px){
  .hero-grid,.grid-2,.grid-3,.grid-4,.product,.foot-grid,.photos{grid-template-columns:1fr}
  .photos.four{grid-template-columns:1fr}
  .hero h1{font-size:1.7rem}
}

/* Phone portrait: keep readable breathing room without making every section feel
   desktop-sized, and leave the floating WhatsApp control clear of safe areas. */
@media (max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  .brand{min-width:0;max-width:calc(100% - 56px)}
  .brand-sub{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
  .hero{padding:44px 0 40px}
  .hero-grid{gap:28px}
  .hero p{font-size:.98rem}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{width:100%;text-align:center}
  .section{padding:48px 0}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:1.55rem}
  .page-head{padding-top:28px}
  .page-head h1{font-size:1.72rem;line-height:1.25}
  .card-body{padding:18px 18px 21px}
  .product{gap:24px;padding:32px 0}
  .rfq{padding:22px 16px}
  .foot-grid{gap:28px;padding-top:44px}
  .wa-float{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:52px;height:52px}
}

/* Phone landscape: the short viewport needs denser vertical rhythm, while the
   content can still use the available width. */
@media (max-width:960px) and (orientation:landscape){
  .hero{padding:34px 0 32px}
  .hero-grid{gap:26px}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:.95rem;margin-bottom:18px}
  .hero .btn{padding:10px 16px}
  .section{padding:44px 0}
  .page-head{padding-top:28px}
  .site-nav .nav-item,.site-nav .drop a{padding-top:9px;padding-bottom:9px}
}

/* Grid and flex children default to min-width:auto, so one unbreakable token
   (e.g. sales@example.com) can force a track wider than its container
   and scroll the whole page sideways. Seen on /contact/ at 320px. */
.grid-2>*,.grid-3>*,.grid-4>*,.hero-grid>*,.product>*,.foot-grid>*,.rfq-grid>*{min-width:0}
.spec td,.spec th,.spec td:last-child{overflow-wrap:anywhere}

/* iOS Safari zooms the page in when a focused field is under 16px and never
   zooms back out. The RFQ fields were 14.72px, so every tap on the enquiry form
   left the buyer zoomed in. 16px on touch widths only; desktop keeps its size. */
/* 960px, NOT 820px — must match the nav breakpoint above. When the nav moved from
   820 to 960 this block stayed behind, so 821-960px (iPad Pro 11" portrait is 834)
   got the mobile layout with desktop-sized inputs, and the iOS zoom bug came back on
   exactly the widths the hamburger had just started serving. Touch-layout rules must
   share one breakpoint. */
@media (max-width:960px){
  /* Applies to EVERY text-entry control, not just .rfq: the /reliability/ battery
     calculator shipped at 13.76px and re-introduced the zoom bug that the .rfq-only
     rule had fixed. Keep this selector generic so new forms inherit the fix. */
  /* !important is deliberate: the calculator inputs carry an inline style="font:inherit"
     which beats any stylesheet rule and drops them to 13.76px. Inline styles are the
     norm in this project's content files, so the guard has to outrank them. */
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}
  .site-footer a{display:inline-block;padding:5px 0}
}

/* factory video blocks — portrait clips are phone-shot, cap their width so a
   vertical 720x1280 does not become a two-screen-tall column on desktop */
.vid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:18px 0}
.vid-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.vid-card video{display:block;width:100%;height:auto;background:var(--pitch-black)}
.vid-card.portrait{max-width:300px}
.vid-cap{font-size:.83rem;color:#44534a;padding:10px 12px;margin:0}
.vid-cap strong{color:var(--navy-dark)}


/* Evidence-led homepage and conversion components */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 18%,rgba(232,99,15,.16),transparent 28%),linear-gradient(115deg,var(--pitch-black) 0%,var(--navy) 58%,var(--pitch-mid) 100%);padding:72px 0 64px}
/* Halftone print motif, pure CSS: a dot field on the right two-thirds, masked to
   nothing on the left where the headline sits so it never touches legibility. The
   circle at bottom right is the pitch centre circle. Both are decoration only. */
.hero:before{content:"";position:absolute;inset:0;background:var(--halftone);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 72%);mask-image:linear-gradient(90deg,transparent 38%,#000 72%);pointer-events:none}
.hero:after{content:"";position:absolute;width:360px;height:360px;border:2px solid rgba(255,255,255,.14);border-radius:50%;right:-150px;bottom:-220px;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* The starter content ships the hero's ghost button with an inline blue border/text
   (border-color:#8ea4d6;color:#dbe4f7) tuned for the kit's navy hero. Content files
   are out of this stylesheet's remit, so the brand colours are asserted here with
   !important; drop this rule once the inline style is removed from content/home.html. */
.hero .btn-ghost{border-color:rgba(255,255,255,.6) !important;color:#fff !important}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero h1{font-size:clamp(2.2rem,4vw,3.35rem);line-height:1.06;letter-spacing:-.035em}
.hero-img{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.38)}
.hero-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.hero-caption{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:10px;background:rgba(4,31,18,.86);backdrop-filter:blur(8px);color:#e6f0ea;font-size:.78rem}
.hero-points{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;list-style:none}
.hero-points li{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px 6px 10px;color:var(--hero-pill);font-size:.78rem;background:rgba(255,255,255,.07)}
.hero-points li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--orange-bright);vertical-align:.1em}
.section.paper{background:var(--paper)}
.eyebrow{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text);margin-bottom:8px}
.buyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.buyer-card{display:flex;flex-direction:column;min-height:184px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(6,61,34,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.buyer-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(6,61,34,.12),inset 0 3px 0 var(--amber);border-color:#9fc3ad}
.buyer-card .buyer-no{font-size:1.3rem;font-weight:800;color:var(--amber-text);letter-spacing:-.02em;line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums}
.buyer-card strong{font-size:1rem;line-height:1.3;color:var(--navy-dark);margin-bottom:8px}
.buyer-card span{font-size:.82rem;line-height:1.5;color:var(--muted)}
.buyer-card em{margin-top:auto;padding-top:16px;font-style:normal;font-size:.8rem;font-weight:700;color:var(--navy)}
.authority-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px}
.authority-card{border-radius:14px;padding:24px;background:#fff;border:1px solid var(--line)}
.authority-card.primary{background:linear-gradient(145deg,var(--navy-dark),var(--navy));border-color:transparent;color:#fff}
.authority-card h3{font-size:1.16rem;margin-bottom:8px}
.authority-card.primary h3{color:#fff}
.authority-card p{font-size:.88rem;color:var(--muted)}
.authority-card.primary p{color:var(--on-dark)}
.authority-label{display:inline-block;margin-bottom:14px;padding:4px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.authority-card.primary .authority-label{background:rgba(232,99,15,.22);color:var(--orange-light)}
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}
.evidence-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.evidence-card h3{font-size:.95rem;margin:8px 0 6px}
.evidence-card p{font-size:.82rem;color:var(--muted)}
.quality-page-head{margin-top:18px;padding:52px 54px 48px;border-radius:22px;background:radial-gradient(circle at 86% 18%,rgba(232,99,15,.2),transparent 28%),linear-gradient(120deg,var(--pitch-black) 0%,var(--navy) 64%,var(--pitch-mid) 100%);box-shadow:0 22px 48px rgba(4,31,18,.18)}
.quality-page-head .eyebrow{color:var(--orange-light)}
.quality-page-head h1{max-width:820px;color:#fff;font-size:clamp(2.15rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.035em}
.quality-page-head p{max-width:830px;color:var(--on-dark);font-size:1.05rem;line-height:1.65}
.quality-head-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-primary{background:var(--amber);color:var(--pitch-black)}
.btn-primary:hover{background:#f5712a;color:var(--pitch-black)}
.btn-secondary{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.quality-sec-head{max-width:820px;margin-bottom:24px}
.quality-sec-head h2{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.025em}
.quality-sec-head p,.quality-section-intro{color:var(--muted);line-height:1.65}
.quality-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:26px 0 16px}
.quality-product-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(6,61,34,.09)}
.quality-product-media{position:relative;height:286px;background:linear-gradient(145deg,#f4f8f5,#e6efe9)}
.quality-product-media img{display:block;width:100%;height:100%;object-fit:contain}
.quality-product-media--lifestyle img{object-fit:cover}
.quality-product-media:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(4,31,18,.7));pointer-events:none}
.quality-product-media>span{position:absolute;z-index:1;left:20px;bottom:16px;color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quality-product-body{padding:25px 26px 26px}
.quality-product-body h3{margin:11px 0 9px;font-size:1.25rem;line-height:1.32;color:var(--navy-dark)}
.quality-product-body>p{color:var(--muted);font-size:.9rem;line-height:1.58}
.quality-benefits{display:grid;gap:10px;margin:18px 0;padding:0;list-style:none}
.quality-benefits li{position:relative;padding-left:22px;color:#3a4840;font-size:.87rem;line-height:1.5}
.quality-benefits li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:900}
.quality-rate-visual{display:grid;gap:10px;margin:21px 0 14px;padding:16px;border-radius:12px;background:#f3f7f4}
.quality-rate-visual>div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.quality-rate-visual span{font-size:.75rem;color:#4a5950}
.quality-rate-visual strong{font-size:.84rem;color:var(--navy)}
.quality-rate-bar{position:relative;display:block;grid-column:1/-1;height:8px;border-radius:999px;background:#dde7e0;overflow:hidden}
.quality-rate-bar:after{content:"";position:absolute;inset:0 auto 0 0;min-width:8px;border-radius:inherit}
/* Add one modifier per bar you need, e.g. .quality-rate-bar--ours-a:after{width:N%} —
   two brand-specific modifiers lived here in the source site and were removed from the kit. */
.quality-rate-bar--peer:after{width:70%;background:repeating-linear-gradient(135deg,#c56d32 0,#c56d32 8px,#e29b68 8px,#e29b68 16px)}
.quality-product-link{display:inline-flex;align-items:center;font-size:.86rem;font-weight:800;color:var(--navy)}
.quality-product-link:hover{text-decoration:underline}
.quality-source-note{margin:0;padding:13px 16px;border-left:3px solid #b5c9bb;background:#f5f8f6;color:#5d6b63;font-size:.76rem;line-height:1.5}
.quality-value-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:34px 0 8px;overflow:hidden;border:1px solid #d6e2da;border-radius:16px;background:#d6e2da}
.quality-value-strip article{padding:23px;background:#fff}
.quality-value-strip span{display:inline-block;margin-bottom:12px;color:var(--amber-text);font-size:.72rem;font-weight:900;letter-spacing:.1em}
.quality-value-strip h3{font-size:1rem;margin-bottom:7px;color:var(--navy-dark)}
.quality-value-strip p{color:var(--muted);font-size:.82rem;line-height:1.55}
.quality-visual-head{margin-top:46px}
.quality-visual-stack{display:grid;gap:24px;margin:22px 0 32px}
.quality-visual-card{overflow:hidden;border:1px solid #c9d8ce;border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(6,61,34,.08)}
.quality-visual-title{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px;align-items:end;padding:24px 26px 20px;background:linear-gradient(145deg,#f3f7f4,#fff)}
.quality-visual-title h3{margin:10px 0 0;color:var(--navy-dark);font-size:1.28rem;line-height:1.32}
.quality-visual-title>p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.58}
.quality-visual-sides{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#d6e2da;border-top:1px solid #d6e2da;border-bottom:1px solid #d6e2da}
.quality-visual-side{display:grid;grid-template-columns:minmax(165px,.82fr) minmax(0,1.18fr);min-width:0;background:#fff}
/* .quality-visual-side--ours was site-specific and was removed from the kit; add your
   own modifier class the same way if you use the side-by-side visual comparison block. */
.quality-visual-side--peer{background:linear-gradient(135deg,#fff9f4,#fff 66%)}
.quality-visual-photo,.quality-peer-diagram{position:relative;display:grid;place-items:center;min-height:275px;padding:20px;background:#edf3ef}
.quality-visual-photo img{display:block;width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 13px 17px rgba(4,31,18,.16))}
.quality-visual-photo--bar img{height:205px}
.quality-visual-photo>span,.quality-peer-diagram>span{position:absolute;left:14px;right:14px;bottom:13px;padding:6px 9px;border-radius:8px;background:rgba(4,31,18,.86);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.065em;text-align:center;text-transform:uppercase}
.quality-visual-copy{padding:23px 20px 20px}
.quality-visual-copy h4{margin:0 0 16px;color:var(--navy-dark);font-size:.94rem;line-height:1.35}
.quality-component-grid{display:grid;gap:10px}
.quality-component-grid>div{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid #d9e7e4;border-radius:10px;background:rgba(255,255,255,.84)}
.quality-component-grid b{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#dff3ee;color:#0b7168;font-size:.65rem;letter-spacing:.02em}
.quality-component-grid span{color:#3a4840;font-size:.74rem;line-height:1.38}
.quality-component-grid--peer>div{border-color:#eadbcf}
.quality-component-grid--peer b{background:#f7e6d9;color:#9a4f25}
.quality-peer-diagram{overflow:hidden;background:repeating-linear-gradient(135deg,#f6ede5 0,#f6ede5 12px,#fbf6f1 12px,#fbf6f1 24px)}
.quality-peer-device{position:relative;display:grid;place-items:center;border:2px dashed #c47b4c;background:rgba(255,255,255,.74);box-shadow:0 14px 28px rgba(111,58,25,.12)}
.quality-peer-diagram--switch .quality-peer-device{width:145px;height:145px;border-radius:28px}
.quality-peer-diagram--switch .quality-peer-device:before{content:"";width:78px;height:78px;border:2px solid #c47b4c;border-radius:50%;background:#f5e4d8}
.quality-peer-diagram--switch .quality-peer-device i{position:absolute;width:24px;height:6px;border-radius:999px;background:#c47b4c}
.quality-peer-diagram--switch .quality-peer-device i:nth-child(1){top:25px;left:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(2){top:25px;right:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(3){bottom:25px;left:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(4){right:22px;bottom:25px}
.quality-peer-diagram--bar .quality-peer-device{width:min(190px,90%);height:58px;border-radius:14px}
.quality-peer-diagram--bar .quality-peer-device i{width:13px;height:13px;border-radius:50%;background:#d49b72;box-shadow:0 0 0 5px rgba(212,155,114,.16)}
.quality-peer-diagram--bar .quality-peer-device:after{content:"";position:absolute;right:13px;top:13px;width:16px;height:16px;border:2px solid #c47b4c;border-radius:50%}
.quality-visual-vs{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;border:4px solid #fff;border-radius:50%;transform:translate(-50%,-50%);background:var(--navy);box-shadow:0 8px 22px rgba(4,31,18,.25);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.06em}
.quality-visual-outcome{padding:17px 24px;background:var(--navy-dark);color:var(--on-dark);font-size:.84rem;line-height:1.55}
.quality-visual-outcome strong{color:var(--orange-light)}
.quality-cta-panel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin:30px 0;padding:30px 32px;border-radius:18px;background:linear-gradient(125deg,var(--pitch-black),var(--navy));color:#fff}
.quality-cta-panel .eyebrow{color:var(--orange-light)}
.quality-cta-panel h2{color:#fff;font-size:1.45rem;margin-bottom:7px}
.quality-cta-panel p{max-width:690px;color:var(--on-dark);font-size:.88rem;line-height:1.58}
.quality-methodology-body{padding:4px 20px 20px}
.quality-methodology-body>p{margin:14px 0;color:var(--muted);font-size:.86rem;line-height:1.62}
.quality-proof-head{margin-top:42px}
.quality-photo-note{margin:6px 0 24px;color:#5d6b63;font-size:.76rem;line-height:1.5}
.quality-research-grid{gap:20px;margin-top:20px}
.quality-research-grid h3{margin:0 0 10px;font-size:.95rem}
.proof-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.proof-compare-card{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(6,61,34,.06)}
.proof-compare-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#edf2ee}
.proof-compare-card figcaption{padding:18px 20px 20px}
.proof-compare-card h3{font-size:1rem;margin:9px 0 8px}
.proof-compare-card p{font-size:.84rem;color:var(--muted);margin:7px 0}
.benchmark-figure{margin:22px 0 26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#f4f8f5 0%,#fff 62%);box-shadow:0 12px 32px rgba(6,61,34,.07)}
#peer-comparison{scroll-margin-top:88px}
.benchmark-figure>figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 22px 14px}
.benchmark-figure>figcaption strong{font-size:1.05rem;color:var(--navy)}
.benchmark-figure>figcaption>span:last-child{flex-basis:100%;font-size:.8rem;color:var(--muted)}
.benchmark-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:6px 22px 18px}
.benchmark-card{padding:18px;border:1px solid #d6e2da;border-radius:12px;background:#fff}
.benchmark-card h3{font-size:.96rem;margin:0 0 15px}
.benchmark-row{display:grid;grid-template-columns:minmax(112px,.9fr) minmax(110px,1.3fr) auto;align-items:center;gap:10px;margin:12px 0}
.benchmark-label{font-size:.76rem;color:#44534a}
.benchmark-track{position:relative;display:block;height:16px;border-radius:999px;background:#e6efe9;overflow:hidden}
.benchmark-fill,.benchmark-range{position:absolute;top:0;bottom:0;border-radius:999px}
.benchmark-fill{left:0;min-width:10px;background:linear-gradient(90deg,#0f776e,#16a394)}
.benchmark-fill--04{width:8%}
.benchmark-fill--03{width:6%}
.benchmark-range{left:40%;width:60%;background:repeating-linear-gradient(135deg,#c56d32 0,#c56d32 8px,#e29b68 8px,#e29b68 16px)}
.benchmark-row strong{font-size:.88rem;color:var(--navy);white-space:nowrap}
.benchmark-caveat{margin:0;padding:17px 22px 20px;border-top:1px solid #d6e2da;background:#fff;font-size:.82rem;color:var(--muted)}
.peer-build-stack{display:grid;gap:20px;margin:20px 0 24px}
.peer-build-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(6,61,34,.06)}
.peer-build-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 22px 16px;background:linear-gradient(145deg,#f4f8f5,#fff)}
.peer-build-head h3{font-size:1.08rem;margin:9px 0 0}
.peer-build-head>p{max-width:390px;margin:2px 0 0;font-size:.8rem;color:var(--muted);text-align:right}
.peer-build-table{min-width:920px;margin:0;border-left:0;border-right:0;border-bottom:0;border-radius:0}
.peer-build-table th:first-child{width:14%}
.peer-build-table th:nth-child(2),.peer-build-table th:nth-child(3){width:27%}
.evidence-gallery{margin:24px 0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.evidence-gallery>summary{cursor:pointer;padding:17px 20px;font-weight:800;color:var(--navy);background:#f4f8f5}
.evidence-gallery>p,.evidence-gallery>h3{margin-left:20px;margin-right:20px}
.evidence-gallery>p{font-size:.86rem;color:var(--muted)}
.evidence-gallery>h3{font-size:.98rem;margin-top:22px;margin-bottom:10px}
.evidence-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:8px 20px 22px}
.evidence-photo-grid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.evidence-photo-grid img{display:block;width:100%;height:240px;object-fit:contain;background:#edf2ee}
.evidence-photo-grid figcaption{padding:9px 11px;font-size:.76rem;color:var(--muted)}
.evidence-photo-grid--portrait{grid-template-columns:repeat(4,minmax(0,1fr))}
.evidence-photo-grid--portrait img{height:260px}
.evidence-tag{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.evidence-tag.verified{background:var(--navy-soft);color:var(--navy-dark)}
.evidence-tag.stated{background:var(--slate-soft);color:var(--slate)}
.evidence-tag.verify{background:var(--amber-soft);color:var(--amber-text)}
.evidence-tag.limited{background:#f0f1f4;color:#596174}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px}
.process-step{position:relative;padding:22px 22px 20px;border-top:2px solid #c9d8ce}
.process-step:before{content:attr(data-step);position:absolute;top:-17px;left:22px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-dark);color:#fff;font-size:.75rem;font-weight:800;border:4px solid #fff}
.process-step h3{font-size:.98rem;margin:10px 0 6px}
.process-step p{font-size:.82rem;color:var(--muted)}
.intent-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.intent-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#e6f0ea;font-size:.82rem}
.intent-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:10px 0}
.choice{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.86rem;color:#2b3a31}
.choice input{width:auto;margin-top:4px}
.form-help{font-size:.78rem;color:#5d6b63;margin-top:5px}
.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.route-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px}
.route-card h3{font-size:1rem;margin-bottom:6px}
.route-card p{font-size:.84rem;color:var(--muted)}
@media (max-width:900px){
  .buyer-grid{grid-template-columns:repeat(3,1fr)}
  .authority-grid{grid-template-columns:1fr 1fr}
  .authority-card.primary{grid-column:1/-1}
  .evidence-grid,.process-grid{grid-template-columns:1fr 1fr}
  .quality-page-head{padding:44px 38px 40px}
  .quality-value-strip{grid-template-columns:1fr}
  .quality-cta-panel{grid-template-columns:1fr}
  .quality-cta-panel .btn{justify-self:start}
  .quality-visual-title{grid-template-columns:1fr;gap:10px}
  .quality-visual-sides{grid-template-columns:1fr}
  .quality-visual-vs{top:50%;left:50%}
}
@media (max-width:640px){
  .buyer-grid,.authority-grid,.evidence-grid,.process-grid,.choice-grid,.route-summary,.proof-compare-grid,.benchmark-grid,.quality-product-grid{grid-template-columns:1fr}
  .quality-page-head{margin-top:12px;padding:34px 22px 30px;border-radius:16px}
  .quality-page-head h1{font-size:2.05rem}
  .quality-page-head p{font-size:.95rem}
  .quality-head-actions{display:grid}
  .quality-head-actions .btn{text-align:center}
  .quality-product-media{height:240px}
  .quality-product-body{padding:22px 20px}
  .quality-visual-title{padding:21px 19px 18px}
  .quality-visual-title h3{font-size:1.12rem}
  .quality-visual-side{grid-template-columns:1fr}
  .quality-visual-photo,.quality-peer-diagram{min-height:210px}
  .quality-visual-photo img,.quality-visual-photo--bar img{height:165px}
  .quality-visual-copy{padding:20px 18px}
  .quality-visual-vs{top:50%;width:42px;height:42px}
  .quality-visual-outcome{padding:16px 18px}
  .quality-cta-panel{padding:25px 22px}
  .peer-build-card .scroll-x{overflow-x:visible}
  .peer-build-table{display:block;min-width:0;border:0}
  .peer-build-table tbody{display:grid}
  .peer-build-table tr{display:block}
  .peer-build-table tr:first-child{display:none}
  .peer-build-table tr:not(:first-child){padding:17px 18px 19px;border-top:1px solid var(--line)}
  .peer-build-table th[scope="row"]{display:block;width:100%!important;padding:0 0 12px;border:0;background:transparent;color:var(--navy-dark);font-size:.98rem}
  .peer-build-table td{display:block;width:100%!important;padding:9px 0 0;border:0;color:#3f4d44;font-size:.84rem;line-height:1.55}
  .peer-build-table td:before{display:block;margin-bottom:3px;color:var(--amber-text);font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
  .peer-build-table td:nth-child(2):before{content:"Our build"}
  .peer-build-table td:nth-child(3):before{content:"Lower-cost samples"}
  .peer-build-table td:nth-child(4):before{content:"Why buyers care"}
  .evidence-photo-grid,.evidence-photo-grid--portrait{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peer-build-head{display:block}
  .peer-build-head>p{max-width:none;margin-top:10px;text-align:left}
  .benchmark-figure>figcaption,.benchmark-grid,.benchmark-caveat{padding-left:16px;padding-right:16px}
  .benchmark-row{grid-template-columns:minmax(100px,.9fr) minmax(92px,1.2fr) auto;gap:8px}
  .authority-card.primary{grid-column:auto}
  .process-grid{gap:18px}
  .process-step{border-top:none;border-left:2px solid #c9d8ce;padding:5px 16px 16px 30px}
  .process-step:before{top:0;left:-17px;border-color:var(--paper)}
  .article-body h2{font-size:1.3rem}
  .article-figure img{aspect-ratio:4/3}
}

/* wangyudian.com brand additions (no kit rule to edit) */
::selection{background:var(--amber-soft);color:var(--ink)}
h1,h2,h3{letter-spacing:-.015em}
/* Underline body links on hover only where they sit in running text; nav, cards and
   buttons have their own hover states. */
.notice a:hover,.authority-card p a:hover,.related a:hover,.feat a:hover,.faq-a a:hover,.article-body a:hover,.foot-note a:hover,.spec a:hover{text-decoration:underline;text-underline-offset:3px}
/* Focus rings on the dark surfaces: the green ring above is invisible on green, so
   links and buttons inside the hero, stats, CTA band, footer and the primary authority
   card get a white ring (7.4:1 on the lightest gradient stop, 12.4:1 on the footer).
   The floating WhatsApp button sits over page content, so it keeps the green ring. */
.hero a:focus-visible,.stats a:focus-visible,.cta-band a:focus-visible,.site-footer a:focus-visible,.authority-card.primary a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.nav-toggle{color:var(--navy-dark)}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.card-body h3,.authority-card h3,.evidence-card h3,.process-step h3,.route-card h3{color:var(--navy-dark)}