/* ==========================================================================
   Stocktend shared chrome: assets/stocktend.css  (pairs with assets/stocktend.js)
   Soft Shelf tokens, base styles, components, the floating header, menu sheet
   and footer. Chrome classes use the st- prefix so page CSS cannot clash.
   v4 (14 October 2026): All Outfit, Floating top bar only, logo option 2 "Ink".
   14 October 2026 (later): footer Help group (Support, Terms, Privacy), a contact
   line (support@stocktend.com and a WhatsApp placeholder), the trading name line,
   and Support in the phone menu sheet.
   Go live (14 October 2026, evening): no waiting list. The official App Store
   and Google Play badges (assets/badges/) link to the stores from the header,
   the menu sheet and the footer, and the footer carries the Apple and Google
   trademark line. Pages that copied an older header, sheet or footer: paste
   snippets 3 and 4 again.
   ==========================================================================

   HOW TO USE ON A PAGE  (copy the four snippets below exactly)

   ---------------------------------------------------------------------------
   1) HEAD  (in this order, inside <head>)
   ---------------------------------------------------------------------------
   <html lang="en-GB">  (no classes needed; the script below adds them)

   <script>document.documentElement.className+=' st-js type-outfit'</script>
   <link rel="icon" href="assets/logos/logo-2-ink-favicon.svg" type="image/svg+xml">
   <link rel="preload" href="assets/fonts/outfit-latin.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="assets/stocktend.css">
   <script src="assets/stocktend.js" defer></script>

   Then your own <style> AFTER stocktend.css (your rules win).

   Outfit is the only typeface, served from this site (assets/fonts/, declared
   with @font-face below), never from Google Fonts, so visitors' browsers only
   ever talk to stocktend.com. Nothing in this file needs a class for it; the
   head script still adds "type-outfit" so older page rules written as
   :root.type-outfit ... keep applying before first paint. Write new rules
   without it. Gelasio is retired. The one exception is the homepage, whose
   street drawing has "Hair & Colour" lettered in Gelasio italic: a tiny subset
   of just those letters (assets/fonts/gelasio-italic-sign.woff2), declared
   below too. A browser only downloads it on a page that uses it.

   ---------------------------------------------------------------------------
   2) BODY  attribute
   ---------------------------------------------------------------------------
   <body data-st-page="index">   (index | pricing | ideas | blog | privacy | ...)
   It tells the header which page this is (marks the current link and turns on
   scrollspy for links like index.html#how-it-works). Put your content in
   <main id="main"> so the skip link works. Add aria-current="page" to this
   page's own links in the header nav, the menu sheet and the footer.

   ---------------------------------------------------------------------------
   3) HEADER  (first thing inside <body>)
   ---------------------------------------------------------------------------
<a class="st-skip" href="#main">Skip to content</a>
<svg class="st-sprite" aria-hidden="true" focusable="false" width="0" height="0">
  <!-- Stocktend logo, option 2 "Ink" (assets/logos/logo-2-ink.svg): the one source for every logo on the page. -->
  <clipPath id="st-logo-tag"><path d="M92 58 H148 L176 86 V192 Q176 202 166 202 H74 Q64 202 64 192 V86 Z"/></clipPath>
  <symbol id="st-logo" viewBox="0 0 240 240"><rect width="240" height="240" rx="54" fill="#26232E"/><g transform="rotate(-8 120 130)"><path d="M92 58 H148 L176 86 V192 Q176 202 166 202 H74 Q64 202 64 192 V86 Z" fill="#F7F5F1"/><circle cx="120" cy="88" r="9" fill="#26232E"/><path d="M120 88 C 126 58, 150 36, 180 22" fill="none" stroke="#F7F5F1" stroke-width="4" stroke-linecap="round"/><path d="M120 88 C 126 58, 150 36, 180 22" fill="none" stroke="#26232E" stroke-width="4" stroke-linecap="round" clip-path="url(#st-logo-tag)"/><rect x="87" y="129" width="14" height="5.5" rx="1.5" fill="#26232E"/><rect x="100" y="130" width="7" height="3" rx="1.5" fill="#26232E"/><rect x="90.5" y="133" width="7" height="9" rx="1" fill="#26232E"/><rect x="84" y="140" width="20" height="36" rx="5.5" fill="#26232E"/><rect x="114.5" y="122" width="9" height="10" rx="2" fill="#26232E"/><rect x="110" y="130" width="18" height="46" rx="7.5" fill="#26232E"/><rect x="132.5" y="151" width="23" height="7" rx="2.5" fill="#B5532F"/><rect x="134" y="157" width="20" height="19" rx="4.5" fill="#B5532F"/><rect x="80" y="176" width="80" height="5" rx="2.5" fill="#26232E"/></g></symbol>
  <!-- Apple and Android marks (the homepage's "iPhone and Android apps" tile): paths from the simple-icons npm package (16.35.0, CC0 icon data). The store badges are the official image files in assets/badges/. -->
  <symbol id="st-apple" viewBox="0 0 24 24"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></symbol>
  <symbol id="st-android" viewBox="0 0 24 24"><path d="M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z"/></symbol>
  <symbol id="st-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5 18.5 12 13 17.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<header class="st-header" data-st-header>
  <div class="st-header__bar">
    <span class="st-header__bg" aria-hidden="true"></span>
    <a class="st-brand" href="index.html" aria-label="Stocktend home">
      <svg class="st-brand__icon" viewBox="0 0 240 240" aria-hidden="true" focusable="false"><use href="#st-logo"/></svg>
      <span class="st-brand__word" aria-hidden="true">Stocktend</span>
    </a>
    <nav class="st-nav" aria-label="Main">
      <span class="st-nav__ind" aria-hidden="true"><i></i><i></i><i></i></span>
      <ul class="st-nav__list">
        <li><a class="st-nav__link" href="index.html#how-it-works">How it works</a></li>
        <li><a class="st-nav__link" href="pricing.html">Pricing</a></li>
        <li><a class="st-nav__link" href="ideas.html">Ideas</a></li>
        <li><a class="st-nav__link" href="blog.html">Blog</a></li>
      </ul>
    </nav>
    <div class="st-actions">
      <!-- Store badges: the build sets each href from STORE_LINKS in assets/stocktend.js -->
      <div class="st-badges st-badges--bar">
        <a class="st-badge" data-store="apple" href="https://apps.apple.com/app/id6811699164"><img src="assets/badges/app-store-badge.svg" width="120" height="40" alt="Download on the App Store"></a>
        <a class="st-badge" data-store="google" href="https://play.google.com/store/apps/details?id=com.stocklog.app"><img src="assets/badges/google-play-badge.png" width="134" height="40" alt="Get it on Google Play"></a>
      </div>
      <button class="st-menu-btn" type="button" aria-expanded="false" aria-controls="st-sheet"><span class="st-vh">Menu</span><span class="st-menu-btn__bars" aria-hidden="true"><i></i><i></i></span></button>
    </div>
  </div>
</header>
<div class="st-sheet" id="st-sheet">
  <div class="st-sheet__inner">
    <nav aria-label="Menu">
      <ul class="st-sheet__list">
        <li><a class="st-sheet__link" href="index.html#how-it-works"><span>How it works</span><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a></li>
        <li><a class="st-sheet__link" href="pricing.html"><span>Pricing</span><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a></li>
        <li><a class="st-sheet__link" href="ideas.html"><span>Ideas</span><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a></li>
        <li><a class="st-sheet__link" href="blog.html"><span>Blog</span><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a></li>
        <li><a class="st-sheet__link" href="support.html"><span>Support</span><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a></li>
      </ul>
    </nav>
    <div class="st-sheet__apps">
      <p class="st-sheet__label">Get the app</p>
      <!-- Store badges: the build sets each href from STORE_LINKS in assets/stocktend.js -->
      <div class="st-badges">
        <a class="st-badge" data-store="apple" href="https://apps.apple.com/app/id6811699164"><img src="assets/badges/app-store-badge.svg" width="120" height="40" alt="Download on the App Store"></a>
        <a class="st-badge" data-store="google" href="https://play.google.com/store/apps/details?id=com.stocklog.app"><img src="assets/badges/google-play-badge.png" width="134" height="40" alt="Get it on Google Play"></a>
      </div>
    </div>
  </div>
</div>
<div class="st-header-spacer" aria-hidden="true"></div>

   The header is position: fixed. .st-header-spacer reserves its height
   (var(--st-bar-h)). If your first section should run UNDER the transparent
   bar (the homepage sky), delete the spacer and give that section
   padding-top: var(--st-bar-h) (or more) instead.

   ---------------------------------------------------------------------------
   4) FOOTER  (last thing inside <body>, after </main>)
   ---------------------------------------------------------------------------
<footer class="st-footer">
  <svg class="st-footer__shelf" viewBox="0 0 96 60" aria-hidden="true" focusable="false"><rect x="6" y="4" width="18" height="5" rx="2" fill="#26232E"/><rect x="20" y="5" width="10" height="3" rx="1.5" fill="#26232E"/><rect x="10" y="8" width="10" height="12" rx="2" fill="#26232E"/><rect x="2" y="18" width="26" height="42" rx="8" fill="#26232E"/><rect x="39" y="0" width="12" height="10" rx="3" fill="#26232E"/><rect x="34" y="7" width="22" height="53" rx="9" fill="#26232E"/><rect x="62" y="30" width="32" height="9" rx="3" fill="#B5532F"/><rect x="64" y="36" width="28" height="24" rx="6" fill="#B5532F"/></svg>
  <div class="st-footer__inner">
    <div class="st-footer__top">
      <div class="st-footer__brand">
        <a class="st-brand st-brand--light" href="index.html" aria-label="Stocktend home">
          <svg class="st-brand__icon" viewBox="0 0 240 240" aria-hidden="true" focusable="false"><use href="#st-logo"/></svg>
          <span class="st-brand__word" aria-hidden="true">Stocktend</span>
        </a>
        <p class="st-footer__tag">Salon stock, <span class="st-footer__accent">tended.</span></p>
        <!-- Store badges: the build sets each href from STORE_LINKS in assets/stocktend.js -->
        <div class="st-badges">
          <a class="st-badge" data-store="apple" href="https://apps.apple.com/app/id6811699164"><img src="assets/badges/app-store-badge.svg" width="120" height="40" alt="Download on the App Store"></a>
          <a class="st-badge" data-store="google" href="https://play.google.com/store/apps/details?id=com.stocklog.app"><img src="assets/badges/google-play-badge.png" width="134" height="40" alt="Get it on Google Play"></a>
        </div>
        <ul class="st-footer__contact" aria-label="Contact Stocktend">
          <li><a href="mailto:support@stocktend.com"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3.5" y="5.5" width="17" height="13" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M4.5 7.5 12 13l7.5-5.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>support@stocktend.com</a></li>
          <!-- PLACEHOLDER: Ian's WhatsApp Business number -->
          <li><a href="https://wa.me/440000000000"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4.5c4.4 0 7.5 2.9 7.5 6.6s-3.1 6.6-7.5 6.6c-.9 0-1.8-.1-2.6-.4L5.5 19l.9-3.4c-1.2-1.2-1.9-2.8-1.9-4.5 0-3.7 3.1-6.6 7.5-6.6Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>WhatsApp us</a></li>
        </ul>
      </div>
      <nav class="st-footer__links" aria-label="Footer">
        <div class="st-footer__group">
          <p class="st-footer__label" id="st-f-product">Product</p>
          <ul aria-labelledby="st-f-product">
            <li><a href="index.html#how-it-works">How it works</a></li>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="ideas.html">Ideas</a></li>
          </ul>
        </div>
        <div class="st-footer__group">
          <p class="st-footer__label" id="st-f-resources">Resources</p>
          <ul aria-labelledby="st-f-resources">
            <li><a href="blog.html">Blog</a></li>
            <li><a href="article-salon-stock-control.html">Salon stock control</a></li>
            <li><a href="article-best-salon-inventory-apps-uk.html">Inventory apps UK</a></li>
            <li><a href="article-salon-stocktake.html">Salon stocktake</a></li>
            <li><a href="article-backbar-vs-retail-stock.html">Backbar vs retail</a></li>
          </ul>
        </div>
        <div class="st-footer__group">
          <p class="st-footer__label" id="st-f-help">Help</p>
          <ul aria-labelledby="st-f-help">
            <li><a href="support.html">Support</a></li>
            <li><a href="terms.html">Terms</a></li>
            <li><a href="privacy.html">Privacy</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="st-footer__base">
      <p>&copy; 2026 Stocktend. A trading name of Ian Magee, sole trader, London, United Kingdom.</p>
      <a class="st-totop" href="#">Back to top<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#st-arrow"/></svg></a>
      <p class="st-footer__legal">Apple and the Apple logo are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.</p>
    </div>
  </div>
</footer>

   Footer notes: mark this page's own footer link with aria-current="page"
   (stocktend.js also does it for a plain page link such as privacy.html). The
   WhatsApp link keeps the placeholder 440000000000 in the source: the build
   writes the real number from WHATSAPP_NUMBER in website/site/build.mjs into
   every page, and refuses to deploy while it is the placeholder. The email
   link is the address itself, written out, so it can be read and copied.

   Store badges anywhere else on a page (hero, a closing card, a plan): copy
   the two <a class="st-badge"> lines above into <div class="st-badges">. Set the height on the row with --badge-h
   (40px or more, never less); the width follows each badge's own shape. Keep
   the alt text exactly "Download on the App Store" and "Get it on Google Play".
   Never recolour, crop, stretch or redraw the badges, and never put anything
   on or over them. The trademark line in the footer covers both.

   Store links: STORE_LINKS at the top of assets/stocktend.js is the one place.
   It sets the href of every a[data-store="apple"] and a[data-store="google"]
   in the browser, and build.mjs writes the same two links into every badge's
   href in the built pages (for visitors without JavaScript and for crawlers),
   so the hrefs in the source never need editing. Until the listings are live,
   STORE_LINKS carries a PLACEHOLDER comment, and the deploy refuses to build
   until it is gone.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts: Outfit (variable, 300 to 600) and the homepage sign's Gelasio italic
   subset, both under the SIL Open Font License, served from assets/fonts/.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Gelasio'; font-style:italic; font-weight:400; font-display:swap;
  src:url(fonts/gelasio-italic-sign.woff2) format('woff2');
  unicode-range:U+20, U+26, U+43, U+48, U+61, U+69, U+6C, U+6F, U+72, U+75;
}

/* --------------------------------------------------------------------------
   Tokens (Soft Shelf, from the app's globals.css)
   -------------------------------------------------------------------------- */
:root{
  --page:#F7F5F1; --card:#FFFFFF; --ink:#26232E; --ink-2:#4A4452; --ink-hover:#383440;
  --grey:#6B6675; --grey-2:#8B8696; /* icons and dots only, never text */
  --caption:#726D7C; --grey-3:#B3AEBB; --mist:#D9D5DE; --track:#F1EEF5;
  --colours:#F9C9B4; --colours-tint:#FCE3D8;
  --backwash:#BFE0D0; --backwash-tint:#DDEFE6;
  --retail:#D8CCF5; --retail-tint:#ECE6FA;
  --butter:#F5D97A; --butter-soft:#FBF0C9;
  --good:#3E7A5C; --low:#B5532F; --low-ink:#A74E2F;
  --line:rgba(38,35,46,.08); --line-row:rgba(38,35,46,.06);
  --shadow-float:0 1px 2px rgba(38,35,46,.05), 0 10px 24px rgba(38,35,46,.10);
  --brand-teal:#7BB5B2; /* retired with the teal logo; kept so older page rules still resolve */
  --light:#F0DFA3; --light-2:#FFF6E0; /* lamp light in illustrations only */

  --r-pill:999px; --r-card:22px; --r-hero:26px; --r-sheet:28px; --r-field:16px; --r-band:40px;

  /* All Outfit, like the app. Headlines Outfit 500 with tight tracking; accent words Outfit 300. */
  --font-sans:Outfit, ui-sans-serif, system-ui, sans-serif;
  --font-display:var(--font-sans);
  --font-ui:var(--font-sans);
  --font-serif:var(--font-sans); /* Gelasio is retired: an alias so older page rules fall back to Outfit */
  --display-weight:500;
  --display-tracking:-0.03em;

  --st-max:1200px;
  --st-gutter:clamp(16px, 3vw, 40px);
  --st-bar-h:72px;
  --st-ease:cubic-bezier(.2,.8,.2,1);
  --st-ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Base (zero specificity via :where, so any page rule wins)
   -------------------------------------------------------------------------- */
:where(html){color-scheme:light; background:var(--page); -webkit-text-size-adjust:100%; text-size-adjust:100%}
:where(body){margin:0; background:var(--page); color:var(--ink); font-family:var(--font-ui); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
:where(h1,h2,h3){font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); line-height:1.1; color:var(--ink); text-wrap:balance}
:where(h4,h5,h6){font-family:var(--font-ui); font-weight:600; color:var(--ink)}
:where(p){text-wrap:pretty}
:where(a){color:inherit}
:where(button,input,select,textarea){font:inherit; color:inherit}
:where([id]){scroll-margin-top:calc(var(--st-bar-h) + 28px)}
:where(:focus-visible){outline:2px solid var(--ink); outline-offset:3px}
:where(::selection){background:var(--butter-soft); color:var(--ink)}

.st-vh{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.st-sprite{position:absolute; width:0; height:0; overflow:hidden}
.st-no-anim, .st-no-anim *{transition:none !important}

/* Section label: Outfit 12px 600 uppercase +0.1em in caption grey */
.label{font-family:var(--font-ui); font-size:12px; font-weight:600; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:var(--caption)}

/* Accent word: the app's weight contrast (Outfit 300 in ink-2 beside the 500 ink
   headline) with the soft hand-drawn butter swash under it, as in "always stocked." */
.accent{
  font-style:normal; font-weight:300; color:var(--ink-2);
  padding:0 .05em .1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M5 14.6C48 8.4 118 5.6 206 6.2c33 .2 62 1.4 89 3.1 3 .2 3.6 3.6.5 4-48 4.3-120 5.7-196 8.1-28 .9-55 1.7-84 2.4-5.4.1-6.6-7.4-1.4-8.4z' fill='%23F5D97A'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .3em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* On an ink band: the accent turns butter, no swash */
.on-ink .accent{color:var(--butter); background:none; padding:0}

/* --------------------------------------------------------------------------
   Buttons: one ink primary, a white secondary with a fine ring, a text button
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border:0; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-family:var(--font-ui); font-size:16px; font-weight:600; line-height:1.1; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 2px rgba(38,35,46,.10), 0 8px 18px rgba(38,35,46,.12);
  transition:transform .25s var(--st-ease), background-color .2s, box-shadow .25s;
}
.btn:hover{background:var(--ink-hover); transform:translateY(-1px); box-shadow:0 2px 4px rgba(38,35,46,.10), 0 12px 24px rgba(38,35,46,.22)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px; height:18px; flex:none}
.btn-secondary{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(38,35,46,.14)}
.btn-secondary:hover{background:var(--card); box-shadow:inset 0 0 0 1.5px rgba(38,35,46,.28), 0 6px 16px rgba(38,35,46,.08)}
.btn-text{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 2px;
  border:0; background:none; color:var(--ink); font-family:var(--font-ui); font-size:16px; font-weight:600;
  text-decoration:underline; text-decoration-color:rgba(38,35,46,.22); text-decoration-thickness:1.5px; text-underline-offset:5px;
  cursor:pointer; transition:text-decoration-color .2s;
}
.btn-text:hover{text-decoration-color:var(--ink)}
.btn-text svg{width:18px; height:18px; transition:transform .25s var(--st-ease)}
.btn-text:hover svg{transform:translateX(3px)}
.btn-sm{min-height:44px; padding:0 18px; font-size:15px}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--track)}
.on-ink :focus-visible{outline-color:var(--butter)}

/* --------------------------------------------------------------------------
   Status (a dot plus a word), chips, the quiet "Coming soon" pill
   -------------------------------------------------------------------------- */
.status{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:14.5px; font-weight:500; line-height:1.2; color:var(--ink-2)}
.status::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--grey-2)}
.status-low{color:var(--low)}
.status-low::before{background:var(--low)}
.status-good{color:var(--good)}
.status-good::before{background:var(--good)}
.status-low.on-tint, .on-tint .status-low{color:var(--low-ink)}

.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--card); color:var(--ink-2);
  font-family:var(--font-ui); font-size:14.5px; font-weight:500; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s, border-color .2s, color .2s;
}
.chip:hover{border-color:rgba(38,35,46,.2); color:var(--ink)}
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip-colours, .chip-backwash, .chip-retail{border-color:transparent; color:var(--ink)}
.chip-colours{background:var(--colours-tint)}
.chip-backwash{background:var(--backwash-tint)}
.chip-retail{background:var(--retail-tint)}
.chip-colours::before, .chip-backwash::before, .chip-retail::before{content:""; width:8px; height:8px; border-radius:50%}
.chip-colours::before{background:#EAAF97}
.chip-backwash::before{background:#9FC7B3}
.chip-retail::before{background:#B9A8E6}

.soon{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:var(--r-pill); background:var(--track); color:var(--grey); font-family:var(--font-ui); font-size:12.5px; font-weight:500; line-height:1; letter-spacing:.01em; white-space:nowrap}

/* --------------------------------------------------------------------------
   Store badges: Apple's "Download on the App Store" and Google's "Get it on
   Google Play", the official artwork in assets/badges/, exactly as supplied
   (Apple's black US-UK SVG; Google's PNG with its transparent padding trimmed).
   Apple's and Google's rules: never recolour, crop, stretch or redraw them;
   show both at the same height, at least 40px tall; keep clear space of at
   least a quarter of the badge height around each. So only the height is set
   (--badge-h on the row), the width follows each image's own shape, the gap
   between the two is 0.3 x the height, and nothing moves, tints or covers them
   on hover. Their links come from STORE_LINKS in assets/stocktend.js.
   -------------------------------------------------------------------------- */
.st-badges{--badge-h:40px; display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--badge-h) * .3)}
.st-badge{flex:none; display:block; line-height:0; border-radius:calc(var(--badge-h) * .2); text-decoration:none}
.st-badge img{display:block; width:auto; height:var(--badge-h); max-width:none; border:0}
.st-badge:focus-visible{outline-offset:4px}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.st-skip{
  position:fixed; z-index:100; left:16px; top:calc(env(safe-area-inset-top, 0px) + 12px);
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font:600 15px/1 var(--font-sans); text-decoration:none;
  transform:translateY(calc(-100% - 40px)); transition:transform .25s var(--st-ease);
}
.st-skip:focus{transform:none; outline:2px solid var(--butter); outline-offset:2px}

/* --------------------------------------------------------------------------
   Header (Floating): a full-width transparent bar at the top of the page that
   eases into a centred floating white capsule once you scroll.
   -------------------------------------------------------------------------- */
.st-header{
  position:fixed; z-index:60; top:0; left:0; right:0;
  padding-top:env(safe-area-inset-top, 0px);
  pointer-events:none; font-family:var(--font-sans);
}
.st-header-spacer{height:calc(var(--st-bar-h) + env(safe-area-inset-top, 0px))}
.st-header__bar{
  pointer-events:auto; position:relative;
  display:grid; grid-template-columns:minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items:center; column-gap:16px;
  width:100%; max-width:1440px; height:var(--st-bar-h); margin:0 auto; padding:0 var(--st-gutter);
  box-sizing:border-box;
}
.st-header__bar > .st-brand, .st-header__bar > .st-nav, .st-header__bar > .st-actions{transition:transform .56s var(--st-ease)}
.st-header__bg{
  position:absolute; inset:0; z-index:-1; border-radius:var(--r-pill);
  background:rgba(255,255,255,.955); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-float);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  opacity:0; transform:scale(.965, .86);
  transition:opacity .36s var(--st-ease-soft), transform .56s var(--st-ease);
  pointer-events:none;
}

/* Brand: logo + wordmark (Outfit 600, tight tracking) */
.st-brand{
  justify-self:start; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding-right:4px;
  color:var(--ink); text-decoration:none; border-radius:12px;
}
.st-brand__icon{flex:none; width:34px; height:34px; transform-origin:62% 18%; transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.st-brand:hover .st-brand__icon{transform:rotate(-7deg)}
.st-brand__word{font-family:var(--font-sans); font-size:22px; font-weight:600; line-height:1; letter-spacing:-.03em; white-space:nowrap}
.st-brand--light{color:#fff}
.st-brand--light .st-brand__icon{border-radius:22.5%; box-shadow:0 0 0 1px rgba(255,255,255,.22)} /* the ink tile sits on the ink footer: a hairline keeps its square shape visible */

/* Nav links + sliding indicator */
.st-nav{position:relative; justify-self:center}
.st-nav__list{position:static; display:flex; gap:2px; margin:0; padding:0; list-style:none}
.st-nav__list li{position:static}
.st-nav__link{
  position:relative; z-index:1; display:inline-flex; align-items:center; height:44px; padding:0 15px; border-radius:var(--r-pill);
  color:var(--ink-2); font-size:15px; font-weight:500; line-height:1; letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  transition:color .2s;
}
.st-nav__link:hover, .st-nav__link.is-active, .st-nav__link[aria-current="page"]{color:var(--ink)}
.st-nav__ind{
  --x:0px; --k:0; --rx:0px; --r:18px;
  position:absolute; z-index:0; left:0; top:50%; width:0; height:36px; margin-top:-18px;
  transform:translateX(var(--x)); opacity:0; pointer-events:none;
  transition:transform .46s var(--st-ease), opacity .24s var(--st-ease-soft);
}
.st-nav__ind.is-on{opacity:1}
.st-nav__ind i{position:absolute; top:0; left:0; height:100%; background:#EBE8E3; transition:transform .46s var(--st-ease), background-color .3s}
.st-nav__ind i:nth-child(1){width:var(--r); border-radius:var(--r) 0 0 var(--r)}
.st-nav__ind i:nth-child(2){left:calc(var(--r) - 1px); width:100px; transform-origin:0 50%; transform:scaleX(var(--k))}
.st-nav__ind i:nth-child(3){width:var(--r); border-radius:0 var(--r) var(--r) 0; transform:translateX(var(--rx))}
.st-header.is-stuck .st-nav__ind i{background:var(--track)}

/* Actions: the App Store and Google Play badges (40px tall, the smallest the stores allow), and the menu button
   on phones. The bar is 72px tall and the capsule 60px, so each badge keeps at least 10px (a quarter of its
   height) of clear space above and below. Phones show only the logo and the menu button: the badges are in
   the menu sheet (and in the homepage hero). */
.st-actions{justify-self:end; display:flex; align-items:center; gap:12px}
.st-badges--bar{--badge-h:40px; flex-wrap:nowrap; gap:12px; transition:opacity .2s var(--st-ease-soft), visibility 0s linear 0s}
.st-header.st-menu-open .st-badges--bar{opacity:0; visibility:hidden; transition:opacity .2s var(--st-ease-soft), visibility 0s linear .2s}

/* Menu button (phones) */
.st-menu-btn{
  display:none; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0; margin:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.7); color:var(--ink); cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(38,35,46,.14); transition:background-color .2s;
}
.st-menu-btn:hover{background:#fff}
.st-menu-btn__bars{position:relative; width:18px; height:12px}
.st-menu-btn__bars i{position:absolute; left:0; right:0; top:50%; height:1.8px; margin-top:-.9px; border-radius:2px; background:currentColor; transition:transform .38s var(--st-ease)}
.st-menu-btn__bars i:first-child{transform:translateY(-3.6px)}
.st-menu-btn__bars i:last-child{transform:translateY(3.6px)}
.st-menu-btn[aria-expanded="true"] .st-menu-btn__bars i:first-child{transform:rotate(45deg)}
.st-menu-btn[aria-expanded="true"] .st-menu-btn__bars i:last-child{transform:rotate(-45deg)}

/* Scrolled: the centred capsule */
.st-header.is-stuck .st-header__bar{
  width:calc(100% - 24px); max-width:900px; height:60px; margin-top:12px; padding:0 16px 0 14px;
}
.st-header.is-stuck .st-header__bg{opacity:1; transform:none}

/* Menu open: the bar sits flat on top of the sheet, opaque so the sheet scrolls under it */
.st-header.st-menu-open .st-header__bg{
  inset:calc(-1 * env(safe-area-inset-top, 0px)) 0 0; opacity:1; transform:none; border-radius:0; border:0; border-bottom:1px solid transparent;
  background:var(--page); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:none;
}
.st-header.st-menu-open.is-sheet-scrolled .st-header__bg{border-bottom-color:var(--line)}

/* --------------------------------------------------------------------------
   Phone menu sheet
   -------------------------------------------------------------------------- */
.st-sheet{
  position:fixed; z-index:58; top:0; left:0; right:0; max-height:100vh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  box-sizing:border-box; padding:calc(env(safe-area-inset-top, 0px) + var(--st-bar-h) + 4px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background:var(--page); border-radius:0 0 var(--r-sheet) var(--r-sheet);
  box-shadow:0 24px 60px rgba(38,35,46,.18);
  font-family:var(--font-sans); color:var(--ink);
  visibility:hidden; transform:translateY(-104%);
  transition:transform .5s var(--st-ease), visibility 0s linear .5s;
}
.st-sheet.is-open{visibility:visible; transform:none; transition-delay:0s}
.st-sheet__inner{max-width:560px; margin:0 auto; display:grid; gap:16px}
.st-sheet__list{margin:0; padding:0; list-style:none}
.st-sheet__list li{opacity:0; transform:translateY(-10px); transition:opacity .3s var(--st-ease-soft), transform .5s var(--st-ease)}
.st-sheet.is-open .st-sheet__list li{opacity:1; transform:none}
.st-sheet.is-open .st-sheet__list li:nth-child(1){transition-delay:.08s}
.st-sheet.is-open .st-sheet__list li:nth-child(2){transition-delay:.12s}
.st-sheet.is-open .st-sheet__list li:nth-child(3){transition-delay:.16s}
.st-sheet.is-open .st-sheet__list li:nth-child(4){transition-delay:.2s}
.st-sheet.is-open .st-sheet__list li:nth-child(5){transition-delay:.24s}
.st-sheet__link{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:0 4px;
  border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none;
  font-family:var(--font-display); font-size:30px; font-weight:var(--display-weight); line-height:1.1; letter-spacing:var(--display-tracking);
}
.st-sheet__link svg{flex:none; width:40px; height:40px; padding:10px; box-sizing:border-box; border-radius:50%; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); transition:transform .3s var(--st-ease)}
.st-sheet__link:hover svg{transform:translateX(3px)}
.st-sheet__link[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--butter); text-decoration-thickness:4px; text-underline-offset:6px}
.st-sheet__apps{padding:18px 16px 20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card)}
.st-sheet__label{margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--caption)}
.st-sheet__apps .st-badges{--badge-h:44px}
.st-scrim{
  position:fixed; z-index:57; inset:0; background:rgba(38,35,46,.34);
  opacity:0; visibility:hidden; transition:opacity .4s var(--st-ease-soft), visibility 0s linear .4s;
}
.st-scrim.is-open{opacity:1; visibility:visible; transition-delay:0s}
:root.st-locked, :root.st-locked body{overflow:hidden}

/* --------------------------------------------------------------------------
   Footer (one ink band per page)
   -------------------------------------------------------------------------- */
.st-footer{
  position:relative; margin-top:clamp(72px, 9vw, 120px);
  padding:clamp(56px, 7vw, 84px) 0 calc(env(safe-area-inset-bottom, 0px) + 28px);
  border-radius:var(--r-band) var(--r-band) 0 0; background:var(--ink); color:#fff;
  font-family:var(--font-sans);
}
.st-footer :focus-visible{outline-color:var(--butter)}
.st-footer__shelf{position:absolute; right:clamp(56px, 9vw, 140px); top:-59px; width:96px; height:60px}
.st-footer__inner{max-width:var(--st-max); margin:0 auto; padding:0 var(--st-gutter)}
.st-footer__top{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:48px 64px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12)}
.st-footer__brand{display:grid; justify-items:start; gap:20px}
.st-footer__tag{margin:0; font-family:var(--font-display); font-size:clamp(32px, 4.2vw, 48px); font-weight:var(--display-weight); line-height:1.05; letter-spacing:var(--display-tracking); color:#fff}
.st-footer__accent{font-weight:300; color:var(--butter)}
.st-footer__brand .st-badges{margin-top:4px}
/* contact line under the store badges: the support address (written out) and WhatsApp */
.st-footer__contact{display:flex; flex-wrap:wrap; gap:0 28px; margin:-4px 0 0; padding:0; list-style:none}
.st-footer__contact a{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; box-sizing:border-box;
  color:var(--mist); font-size:16px; line-height:1.3; text-decoration:none; transition:color .2s;
}
.st-footer__contact svg{flex:none; width:20px; height:20px; color:var(--grey-3); transition:color .2s}
.st-footer__contact a:hover{color:#fff; text-decoration:underline; text-decoration-color:var(--butter); text-decoration-thickness:1.5px; text-underline-offset:5px}
.st-footer__contact a:hover svg{color:var(--butter)}
.st-footer__links{display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap:32px 24px; align-content:start; padding-top:6px}
.st-footer__label{margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-3)}
.st-footer__group ul{margin:0; padding:0; list-style:none}
.st-footer__group a{
  display:inline-flex; align-items:center; box-sizing:border-box; min-height:44px; padding:6px 0; line-height:1.3;
  color:var(--mist); font-size:16px; text-decoration:none; transition:color .2s;
}
.st-footer__group a:hover, .st-footer__group a[aria-current="page"]{color:#fff; text-decoration:underline; text-decoration-color:var(--butter); text-decoration-thickness:1.5px; text-underline-offset:5px}
.st-footer__base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding-top:20px; color:var(--grey-3); font-size:14px}
.st-footer__base p{margin:0; max-width:62ch; line-height:1.5}
/* the trademark line for the store badges: small print on its own row under the trading name */
.st-footer__base .st-footer__legal{flex-basis:100%; max-width:none; margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--grey-3)}
.st-totop{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--grey-3); text-decoration:none; transition:color .2s}
.st-totop svg{width:16px; height:16px; transform:rotate(-90deg); transition:transform .3s var(--st-ease)}
.st-totop:hover{color:#fff}
.st-totop:hover svg{transform:rotate(-90deg) translateX(3px)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px){
  :root{--st-bar-h:64px}
  .st-nav{display:none}
  .st-menu-btn{display:inline-flex}
  .st-header__bar{grid-template-columns:1fr auto; column-gap:8px}
  .st-header.is-stuck .st-header__bar{width:calc(100% - 20px); height:56px; margin-top:8px; padding:0 6px 0 12px}
}
/* tablets: the badges stay in the bar, so the capsule keeps its 60px height (10px clear above and below them) */
@media (min-width: 640px) and (max-width: 899.98px){
  .st-header.is-stuck .st-header__bar{height:60px; padding:0 16px 0 14px}
}
/* phones: just the logo and the menu button; the badges are in the menu sheet */
@media (max-width: 639.98px){
  /* Phones: one badge in the bar, for the phone's own store (stocktend.js adds .st-android) */
  .st-badges--bar .st-badge[data-store="google"]{display:none}
  .st-android .st-badges--bar .st-badge[data-store="apple"]{display:none}
  .st-android .st-badges--bar .st-badge[data-store="google"]{display:block}
  .st-actions{gap:8px}
}
@media (min-width: 900px){
  .st-sheet, .st-scrim{display:none}
}
@media (min-width: 1100px) and (max-width: 1279.98px){
  /* the links share half the footer here: size the three columns to their labels so the guide names stay on one line */
  .st-footer__links{grid-template-columns:auto auto auto; justify-content:space-between; column-gap:20px}
}
@media (max-width: 1099.98px){
  .st-footer__top{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .st-footer__top{grid-template-columns:1fr; gap:40px}
  .st-footer__links{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows:auto 1fr}
  .st-footer__group:first-child{grid-row:span 2} /* Product on the left, Resources and Help stacked on the right */
  .st-footer__group a{text-wrap:balance}
  .st-footer__shelf{right:56px; top:-47px; width:76px; height:48px}
}
@media (max-width: 520px){
  .st-brand{gap:8px; padding-right:0}
  .st-brand__icon{width:32px; height:32px}
  .st-brand__word{font-size:20px}
  .st-header.is-stuck .st-header__bar{width:calc(100% - 16px); padding:0 5px 0 10px}
}

/* --------------------------------------------------------------------------
   Reduced motion: no easing; the header still changes state instantly
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .st-header, .st-header *, .st-sheet, .st-sheet *, .st-scrim, .st-skip,
  .st-footer *, .btn, .btn-text svg, .chip{transition:none !important; animation:none !important}
  .st-brand:hover .st-brand__icon, .btn:hover{transform:none}
}

@media print{
  .st-header, .st-header-spacer, .st-sheet, .st-scrim, .st-skip{display:none !important}
}