/* ==========================================================================
   Vorton Tools — site.css
   Everything that is NOT needed for the first paint. Loaded non-blocking
   (preload + onload swap) by build.mjs, with a <noscript> fallback.
   ========================================================================== */

/* 1. (moved) Trust bar ----------------------------------------------------
   The trade-terms bar now sits above the fold on the home pages, so its rules
   live in critical.css section 8c instead — a deferred stylesheet would let it
   flash unstyled on first paint. */

/* 2. Card grids ---------------------------------------------------------- */
/* auto-fill, not auto-fit: several grids hold only one or two items (a category
   with a single model, "other models buyers order with this one"). auto-fit
   collapses the unused tracks and stretches that lone card across the whole
   wrap, which reads as a broken layout. Capping the card width instead was
   tried and rejected — it kept the stretched track and produced 146px gutters
   between cards that sat 21.6px apart everywhere else. auto-fill keeps the
   gutter constant and simply leaves the unused slot empty.
   The grid declarations themselves now live in critical.css so the columns
   exist at first paint; everything below is decoration that cannot move a
   block. */
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin:0;position:relative;
  transition:box-shadow .24s ease,border-color .24s ease,transform .24s cubic-bezier(.22,.61,.36,1);
}
/* An amber rule draws across the top edge on hover. It is a pseudo-element
   rather than a border so the card's own radius survives, and it scales from
   the start edge, which reads as the card being activated rather than simply
   recoloured. It is repeated on :focus-within because the whole card is a tab
   stop for anyone navigating by keyboard. */
.card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
[dir="rtl"] .card::before{transform-origin:100% 50%}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
.card:hover,.card:focus-within{box-shadow:var(--shadow-2);border-color:#CFDCEB;transform:translateY(-4px)}
.card-media{background:var(--bg-alt)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img,.card:focus-within .card-media img{transform:scale(1.05)}
.card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-title{margin:0;font-family:var(--font-display);font-size:var(--fs-title);font-weight:600;line-height:1.25;letter-spacing:-.014em}
.card-title a{text-decoration:none;color:var(--brand)}
.card-title a:hover{text-decoration:underline;color:var(--brand-600)}
.card-text{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}
.card-meta{margin:0;font-family:var(--font-display);font-size:var(--fs-label);color:var(--muted);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600}
.card-link{margin-top:auto;padding-top:.85rem;font-family:var(--font-display);font-weight:600;text-decoration:none;font-size:var(--fs-small);letter-spacing:-.005em}
.card-link::after{content:" \2192";transition:margin-inline-start .2s ease;display:inline-block}
.card-link:hover::after{margin-inline-start:.28rem}
/* The range has eleven categories, so a four-column grid leaves the twelfth
   cell empty and the section ends on a hole. This tile closes the rectangle
   and spends the gap on the section's own call to action instead. It is an
   <a>, so it is styled as a card that happens to be a link rather than a link
   that happens to sit in a grid. Its amber rule is drawn rather than animated:
   a solid edge marks it as the end of the row rather than one more item. */
.card-cta{
  background:linear-gradient(158deg,var(--brand) 0%,var(--brand-700) 100%);
  border-color:var(--brand-700);color:#fff;text-decoration:none;
  justify-content:flex-start;padding:1.45rem 1.4rem 1.5rem;gap:.55rem;
}
.card-cta::before{transform:scaleX(1);opacity:.85}
.card-cta:hover,.card-cta:focus-within{border-color:var(--brand-700)}
.card-cta .card-meta{color:rgba(255,255,255,.7)}
.card-cta-title{
  margin:0;font-family:var(--font-display);font-size:var(--step-2);font-weight:650;
  line-height:1.15;letter-spacing:-.022em;color:#fff;
}
.card-cta-text{margin:0;color:rgba(255,255,255,.8);font-size:var(--fs-small);line-height:1.6}
.card-cta-link{
  margin-top:auto;padding-top:1.1rem;font-family:var(--font-display);
  font-weight:600;font-size:var(--fs-small);letter-spacing:-.005em;color:var(--accent);
}
.card-cta-link::after{content:"\2192";display:inline-block;margin-inline-start:.34rem;transition:margin-inline-start .2s ease}
.card-cta:hover .card-cta-link::after{margin-inline-start:.6rem}
@media (prefers-reduced-motion:reduce){
  .card-cta:hover .card-cta-link::after{margin-inline-start:.34rem}
}

/* 3. Split sections ------------------------------------------------------
   .split, .grid-2 and .grid-3 are declared in critical.css: they set the
   height of the first screen, and a sheet that arrives after first paint
   cannot be allowed to decide it. Only what sits inside them lives here. */
.split-media{margin:0}
.split-media img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line)}
.split-media figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--muted)}

/* 4. Prose / lists ------------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose>*:first-child{margin-top:0}
/* Geometry for .check-list lives in critical.css so the reserved indent exists
   at first paint; only the tick glyph is drawn here, where arriving late cannot
   move anything. */
.check-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.45em;width:.62rem;height:.34rem;
  border-inline-start:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.cross-list li::before{border-color:#B3261E;transform:rotate(0);width:.7rem;height:0;border-inline-start:0;border-bottom:2px solid #B3261E;top:.72em}
.def-list{display:grid;grid-template-columns:minmax(9rem,auto) minmax(0,1fr);gap:.5rem 1.25rem;margin:0 0 1.5rem}
.def-list dt{margin:0;font-weight:650;color:var(--brand)}
.def-list dd{margin:0}
@media (max-width:560px){.def-list{grid-template-columns:minmax(0,1fr);gap:0 0}.def-list dd{margin-bottom:.75rem}}

/* 5. Tables -------------------------------------------------------------- */
.table-wrap{
  position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 1.5rem;background:#fff;
  /* Two hairline shadows pinned to the scroll box tell you there is more table
     to the right without any JavaScript. */
  background-image:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(255,255,255,0),#fff 70%),
    radial-gradient(farthest-side at 0 50%,rgba(16,22,29,.14),rgba(16,22,29,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(16,22,29,.14),rgba(16,22,29,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:2.5rem 100%,2.5rem 100%,.85rem 100%,.85rem 100%;
  background-attachment:local,local,scroll,scroll;
}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:34rem;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:start;padding:.9rem 1rem;font-weight:650;color:var(--brand);background:var(--bg-alt);border-bottom:1px solid var(--line)}
th,td{padding:.72rem .95rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--line-2)}
thead th{background:var(--brand-050);color:var(--brand);font-weight:700;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:#FBFCFE}
.spec-table th{width:38%;color:var(--ink-2);font-weight:600;background:#fff}
.spec-table{min-width:0}
.spec-table tbody tr:hover{background:transparent}
/* Narrow screens: a three-column text table cannot fit, so it scrolls. Every
   table on the site puts its row label in a <th scope="row">, so that label can
   be pinned to the start edge while the remaining columns scroll past it —
   otherwise the reader loses track of which row they are looking at. */
@media (max-width:640px){
  th,td{padding:.6rem .7rem}
  .table-wrap th[scope="row"],.table-wrap thead th:first-child{
    position:sticky;inset-inline-start:0;z-index:2;background:#fff;
    box-shadow:1px 0 0 var(--line-2),7px 0 11px -7px rgba(16,22,29,.20);
  }
  .table-wrap thead th:first-child{background:var(--brand-050)}
  [dir="rtl"] .table-wrap th[scope="row"],[dir="rtl"] .table-wrap thead th:first-child{
    box-shadow:-1px 0 0 var(--line-2),-7px 0 11px -7px rgba(16,22,29,.20);
  }
}

/* 6. Steps / process ----------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.2rem;margin:0;padding:0;list-style:none}
.step{position:relative;padding-inline-start:3.3rem;margin:0}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;inset-inline-start:0;top:0;width:2.25rem;height:2.25rem;
  display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.step h3{margin:0 0 .3rem;font-size:var(--fs-title-sm);color:var(--brand)}
.step p{margin:0;color:var(--ink-2);font-size:var(--fs-small);max-width:74ch}

/* 7. Feature highlights -------------------------------------------------- */
/* border-inline-start, not border-left: in Arabic the amber rule belongs on
   the right-hand edge. */
.feature{
  background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:var(--radius);padding:1.15rem 1.2rem;margin:0;
}
.feature h3{margin:0 0 .35rem;font-size:var(--fs-title-sm);color:var(--brand)}
.feature p{margin:0;color:var(--muted);font-size:var(--fs-small)}

/* 8. Callouts ------------------------------------------------------------ */
.callout{border:1px solid #CFDCEB;background:var(--brand-050);border-radius:var(--radius);padding:1.15rem 1.3rem;margin:0 0 1.5rem}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-color:#F3D9A4;background:var(--accent-050)}
.callout-honest{border-color:#CFDCEB}
.callout strong{color:var(--brand)}

/* 9. Badges --------------------------------------------------------------
   .badges itself (the flex row) is declared in critical.css — it sits above the
   fold on product and category pages. Only the pill decoration is here. */
.badges li{
  margin:0;padding:.32rem .72rem;border-radius:var(--radius-pill);background:var(--brand-050);
  color:var(--brand);font-size:var(--fs-label);font-weight:650;border:1px solid #D6E3F2;
}

/* 10. FAQ ---------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);margin-top:1.5rem}
/* The FAQ page stacks several h2 + .faq groups inside one section, so the group
   heading needs its own breathing room or it reads as part of the list above. */
.faq + h2{margin-top:clamp(2.25rem,4.5vw,3.25rem)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>summary{
  cursor:pointer;padding:1.1rem 2.2rem 1.1rem 0;font-weight:650;color:var(--brand);
  font-size:var(--fs-title);position:relative;list-style:none;
  transition:color .18s ease;
}
.faq-item>summary:hover{color:var(--brand-600)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"";position:absolute;inset-inline-end:.35rem;top:1.6rem;width:.55rem;height:.55rem;
  border-inline-end:2px solid var(--accent-700);border-bottom:2px solid var(--accent-700);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq-item[open]>summary::after{transform:rotate(-135deg)}
.faq-item[open]>summary{color:var(--ink)}
.faq-answer{padding:0 0 1.2rem;color:var(--ink-2);max-width:74ch}
.faq-answer p:last-child{margin-bottom:0}

/* 11. Product pages ------------------------------------------------------
   .product-hero is in critical.css: it is the first screen of all 37 product
   pages, and the deferred sheet used to paint it stacked and then snap the two
   columns together (CLS 0.72). What remains here is inside those columns. */
.product-media{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-alt);overflow:hidden}
.product-media img{width:100%;height:auto}
/* .product-gallery's grid and li are in critical.css — the strip is above the
   fold on mobile and stacks into three tall rows without them. */
.product-gallery img{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-alt);
  transition:border-color .18s ease,transform .18s ease;
}
.product-gallery img:hover{border-color:#C3D3E6;transform:translateY(-2px)}
/* Which frame the main image is showing has to be visible without depending on
   colour alone, so the selected thumbnail gets the brand border *and* a ring —
   and the ring is repeated on :focus-visible, because a keyboard buyer tabs
   through the same strip and needs the same signal. */
.product-gallery button:focus-visible img,
.product-gallery button[aria-pressed="true"] img{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-050)}
.product-sku{margin:0 0 .5rem;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
.product-cta{margin-top:1.6rem;padding:1.35rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-alt)}
.product-cta h2{margin:0 0 .35rem;font-size:var(--fs-title)}
.product-cta p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.product-cta .btn-row{margin-top:1rem}
.product-cta .btn-row:first-child{margin-top:0}

/* 12. CTA band ----------------------------------------------------------- */
.cta-band{background:var(--brand);color:#D8E4F1;border-radius:var(--radius-lg);padding:clamp(1.9rem,4.5vw,3rem)}
.cta-band h2{color:#fff;margin-bottom:.5rem}
.cta-band p{color:#C6D6E8;max-width:62ch}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cta-band .btn-row{margin-top:1.6rem}

/* 13. Forms --------------------------------------------------------------
   Moved to forms.css, which is inlined into every page that carries a form.
   A deferred sheet left the contact form's first screen unstyled at first
   paint and reflowed it on arrival — CLS 0.317 measured under Slow 4G. See
   the header comment in forms.css. Do not re-add these rules here. */

/* 14. Footer ------------------------------------------------------------- */
.site-footer{background:var(--bg-dark);color:#AFC2D6;margin-top:0;padding-block:clamp(2.5rem,5.5vw,3.75rem) 1.35rem;font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.1rem)}
.footer-name{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;font-weight:700;color:#fff;font-size:var(--fs-title)}
/* the supplied wordmark is white-on-transparent, so it reads on this navy panel */
.footer-logo{display:block;width:auto;height:30px;max-width:100%}
.footer-desc{margin:0 0 .9rem;max-width:44ch}
.footer-note{margin:0 0 1rem;padding:.8rem 1rem;border-inline-start:3px solid var(--accent);background:rgba(255,255,255,.05);border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm);max-width:46ch}
.footer-note strong{color:#fff}
.footer-contact{margin:0 0 1.1rem;padding:0;list-style:none}
.footer-contact li{margin:0 0 .3rem}
.site-footer a{color:#DCE7F3;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-decoration-thickness:1px;text-underline-offset:3px;padding-block:.28rem;transition:color .18s ease,text-decoration-color .18s ease}
.site-footer a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.footer-address{font-style:normal;color:#8FA5BC;line-height:1.6;font-size:var(--fs-label)}
.footer-col-title{margin:0 0 .8rem;font-weight:700;color:#fff;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li{margin:0 0 .5rem}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4.5vw,2.75rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.13);
  font-size:var(--fs-label);color:#8FA5BC;
}
.footer-bottom p{margin:0}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* 15. Misc --------------------------------------------------------------- */
.related{margin-top:2.5rem}
.related h2{font-size:var(--step-2)}
.section-dark a{color:#BFD6F0}
.section-dark a:hover{color:var(--accent)}

/* 16. Arabic / RTL -------------------------------------------------------
   The RTL text metrics live in critical.css. [dir="rtl"] body{line-height:1.85}
   used to be here, in the deferred sheet: on every Arabic page the whole
   document reflowed vertically the moment site.css landed, 1.5 seconds in,
   which is where /ar/'s CLS came from. Only the table-cell alignment below is
   still here — tables are well below the fold. */
[lang="ar"] .prose{max-width:70ch}

/* 17. Print -------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.cta-band,.nav-toggle,.skip-link,.btn-row{display:none!important}
  body{color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
  .card,.product-media,.callout{box-shadow:none;border-color:#999}
  .section{padding-block:1rem}
}

/* 18. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .card:hover{transform:none}
  .card:hover .card-media img{transform:none}
}

/* 19. Scroll-linked reveals ----------------------------------------------
   Content fades and lifts as it enters the viewport. This is pure CSS
   (scroll-driven animations) with no observer and no library, and it is
   wrapped in @supports so browsers without animation-timeline simply render
   everything in place - there is no hidden state to get stuck in, and no
   JavaScript that could fail to run.

   It animates the standalone `translate` property, never `transform`, because
   `.card:hover` uses transform for its lift and an animated transform would
   win over it. */
@keyframes reveal-up{
  from{opacity:0;translate:0 1.15rem}
  to{opacity:1;translate:0 0}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.feature,.step,.callout,.table-wrap,.split-media,.cta-band,.related,.faq{
      animation:reveal-up both linear;
      animation-timeline:view();
      animation-range:entry 4% entry 68%;
    }
    /* A short stagger so a row of cards does not snap in as one slab. Kept to
       four steps: past that it reads as a queue rather than a reveal. */
    .card-grid>*:nth-child(2),.grid-3>*:nth-child(2),.grid-2>*:nth-child(2){animation-range:entry 13% entry 97%}
    .card-grid>*:nth-child(3),.grid-3>*:nth-child(3),.grid-2>*:nth-child(3){animation-range:entry 18% entry 100%}
    .card-grid>*:nth-child(4),.grid-3>*:nth-child(4),.grid-2>*:nth-child(4){animation-range:entry 23% entry 100%}
  }
}

/* 20. Display face on structural type ------------------------------------
   critical.css is inlined before this sheet, so a font-family declared there
   for a selector that is also styled here loses the cascade. These are the
   titles, labels and captions that carry structure rather than prose: setting
   them in the display face makes a specification table, a card caption and the
   heading above them read as one voice. */
.card-title,.card-meta,.card-link,.trust-label,.footer-col-title,
.step h3,.feature h3,.faq-item>summary,.def-list dt,.badges li,.product-sku,
.crumbs,.spec-table caption{font-family:var(--font-display)}
.badges li,.product-sku,.trust-label,.footer-col-title{letter-spacing:var(--tracking-label)}

/* 21. Component refinements ----------------------------------------------
   Corrections to components that were built before the display scale existed:
   their internal spacing was tuned around a smaller heading and now reads a
   little cramped next to it. */

/* Features and callouts — the coloured rule is the only thing separating two
   stacked panels, so both get more air around it. */
.feature{padding:1.35rem 1.45rem}
.feature h3{font-size:var(--fs-title);letter-spacing:-.012em}
.feature p{line-height:1.6}
.callout{padding:1.35rem 1.5rem;line-height:1.6}

/* Steps — the counter is a fixed disc, so the numeral in it is set in the
   display face at a size that actually fills the circle. */
.step{padding-inline-start:3.6rem}
.step::before{width:2.5rem;height:2.5rem;font-family:var(--font-display);font-size:var(--fs-title-sm);letter-spacing:0;box-shadow:0 7px 16px -9px rgba(6,18,33,.55)}
.step h3{letter-spacing:-.012em}

/* FAQ — a summary sets the answer's own vertical rhythm rather than the
   default. The block padding is left as it is: the chevron in ::after is
   positioned against it. */
.faq-item>summary{letter-spacing:-.014em}
.faq-answer{line-height:1.68}

/* Tables — a caption is a label, so it takes the label voice. */
caption{font-family:var(--font-display);letter-spacing:-.008em}

/* CTA band — a faint amber glow in the top corner stops a large flat navy
   panel from reading as one solid block of ink. */
.cta-band{
  background:
    radial-gradient(760px 340px at 92% -22%,rgba(242,161,4,.20),transparent 70%),
    linear-gradient(180deg,var(--brand) 0%,var(--brand-700) 100%);
  box-shadow:0 26px 52px -36px rgba(6,18,33,.7);
}
/* The band paints itself with a gradient, so its background-color stays
   transparent and the global link colour (brand-600) lands on it at 1.29:1 —
   measured on the mailto in the closing line. The dark sections already carry
   this override; the band needs its own. */
.cta-band a:not(.btn){color:#BFD6F0}
.cta-band a:not(.btn):hover{color:var(--accent)}

/* Footer — the brand separates the two halves of the footer instead of yet
   another grey rule. */
.footer-bottom{border-top-color:rgba(242,161,4,.32)}

/* 22. Micro-interactions -------------------------------------------------
   Small responses that tell the visitor the page heard them. All of them are
   confined to transform, opacity and colour so nothing here can move layout,
   and every one is inside the reduced-motion guard at the end of this file
   (see section 18) or is a colour-only change that motion preference cannot
   reasonably object to. */

/* A primary button sinks a hairline on press. Without it a click on a large
   amber slab reads as having done nothing until the next page paints. */
.btn:active{transform:translateY(1px)}

/* Navigation: the active item is marked by a fixed amber rule. Every other item
   draws the same rule on hover, growing from the start edge — the same gesture
   the cards use, so the whole site answers a pointer the same way. */
.nav-item>a:not([aria-current="page"])::after{
  content:"";position:absolute;inset-inline:.7rem;bottom:.12rem;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
[dir="rtl"] .nav-item>a:not([aria-current="page"])::after{transform-origin:100% 50%}
.nav-item>a:not([aria-current="page"]):hover::after,
.nav-item>a:not([aria-current="page"]):focus-visible::after{transform:scaleX(1)}

/* Anchored headings: the sticky header would otherwise cover the line a
   same-page link just scrolled to. */
:target{scroll-margin-top:6.5rem}
h2[id],h3[id],h4[id],section[id],div[id]{scroll-margin-top:6.5rem}

/* Inline links inside a paragraph: the underline thickens on hover instead of
   the colour alone carrying the state, which is invisible to a colour-blind
   visitor and to anyone reading on a low-quality panel. */
.prose a,.faq-answer a,.callout a{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .14s ease,text-underline-offset .14s ease}
.prose a:hover,.faq-answer a:hover,.callout a:hover{text-decoration-thickness:2px;text-underline-offset:4px}

/* The hover rule has no meaning once the nav stacks into a column, and a line
   floating under a full-width row reads as a stray border. */
@media (max-width:900px){
  .nav-item>a:not([aria-current="page"])::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none}
}

/* A label/value table (`.kv`, and `.spec-table` on product pages) is not really
   a table of comparable columns — it is a definition list that happens to use
   table markup, and every row is a paragraph. On a phone the horizontal scroll
   this needs makes the homepage's "if you only read one block, read this" block
   the least readable thing on the page. Stacked, the label sits directly above
   its value and the whole thing reads like prose. Multi-column data tables keep
   the scroll: their cells mean nothing without the column header above them,
   and CSS cannot repeat a header into each cell. */
@media (max-width:600px){
  .kv{overflow-x:visible;background-image:none}
  .kv table{display:block;min-width:0}
  .kv tbody{display:block}
  .kv tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line-2)}
  .kv tr:last-child{border-bottom:0}
  .kv th[scope="row"]{
    display:block;width:auto;padding:0 0 .22rem;border-bottom:0;background:transparent;
    position:static;box-shadow:none;color:var(--brand);
  }
  .kv td,.kv th[scope="row"]+td{display:block;padding:0;border-bottom:0}
  /* Once the table is a block box a table-caption stops being full width and
     collapses onto a narrow column, so the caption has to become a block too. */
  .kv caption{display:block;width:auto}
}

/* A spec strip is the label-beside-value form of the facts a product hero must
   state before the CTA. It replaces pills for facts that are sentences rather
   than tokens: a pill holding "1 unit for samples; 30 units for private label"
   is a paragraph in a capsule, and three of them stacked turn the hero's
   second-most-scanned block into coloured bars.
   Three equal columns were tried first and failed on the certificate value —
   one long id plus a sentence ran to eleven lines in a 190 px cell and pushed
   the quote panel 200 px down the page. A fixed label column with a flexible
   value column keeps all three rows shallow whatever the text length. */
.spec-strip{margin:1.2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.spec-strip>li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.1rem 1rem;
  margin:0;padding:.55rem 0;border-bottom:1px solid var(--line-2);
}
.spec-strip>li:last-child{border-bottom:0}
.spec-strip-label{
  margin:0;font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-700);
  padding-top:.12rem;
}
.spec-strip-value{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--ink-2)}
@media (max-width:700px){
  .spec-strip>li{grid-template-columns:minmax(0,1fr);gap:0;padding:.6rem 0}
  .spec-strip-label{padding-top:0}
}

/* A card grid whose length depends on the data — a category with two models, a
   product with two siblings. `auto-fill` keeps the tracks the row did not need,
   so two cards sit in the left half and the right half is empty, which reads as
   failed rendering rather than as space. `auto-fit` collapses the unused tracks
   and the explicit maximum keeps two cards from stretching to 570 px each; the
   row is then centred so the leftover space is split evenly either side of the
   cards instead of dumped on one edge. */
.card-grid-fit{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card-grid-fit:not(:has(> :nth-child(4))){grid-template-columns:repeat(auto-fit,minmax(16rem,22.5rem));justify-content:center}