/* ============================================================
   YOPERSH · PIXEL
   The site in a Google Pixel design (owner, 2026-10-21: "redesigned to have a google pixel ui throughout,
   keep the font, the colors, their colors are burnt black and orange").

   Material 3 Expressive on Yopersh's own brand: Fraunces and Plus Jakarta Sans stay, the colours stay
   (burnt black #1A1611, orange #C25511, and the logo's #F88C00 on black). What changes is everything
   Pixel is made of:
     - colour roles: tonal surfaces and containers instead of hairline borders
     - shape: large rounded corners (28px cards, 48px sheets, pill buttons), and the expressive shapes
       (cookie, clover, sunny) for icons and step numbers
     - state layers instead of lifts and shadows: hover 8%, press 12%, and a ripple
     - a button presses into a squarer shape; springs everywhere
     - a navigation bar along the bottom on phones, a navigation drawer from the start edge
     - Iconly icons: Light, Bold for the selected item

   Loaded after site.css, which keeps the layout and the behaviour; this layer only restyles.

   Core pass (2026-10-21): the shared fixes from the Pixel audit and a Material 3 Expressive component library
   (.m3-* classes, button sizes and groups, type scale, shapes, loader, progress, selection controls, menus,
   dialogs, snackbar, tooltips, carousel, bento, .ic-shape). Every class, token and JS hook is written up in
   CORE_API.md. The area files (assets/px/*.css) load after this one; a page's own <style> comes later still,
   so a rule that must beat a page's style starts at html.
   ============================================================ */

:root{
  /* ---- colour roles (light) ---- */
  --md-primary:#C25511;            /* orange: AA on white for text and filled buttons */
  --md-on-primary:#FFFFFF;
  --md-primary-container:#FFDCC4;
  --md-on-primary-container:#5A2300;
  --md-bright:#F88C00;             /* the logo's orange, for orange on burnt black */
  --md-secondary-container:#F3E0D2;
  --md-on-secondary-container:#2B1D13;
  --md-tertiary-container:#FFE0A8;
  --md-on-tertiary-container:#3B2500;

  --md-surface:#FBF7EF;            /* the cream the site already has */
  --md-surface-lowest:#FFFFFF;
  --md-surface-low:#F6EFE4;
  --md-surface-container:#F1E9DC;
  --md-surface-high:#EBE2D4;
  --md-surface-highest:#E5DBCB;
  --md-on-surface:#1A1611;         /* burnt black */
  --md-on-surface-variant:#4E453B;
  --md-outline:#80756A;
  --md-outline-variant:#D6CABA;

  --md-inverse-surface:#1A1611;    /* burnt black ground: footer, CTA, featured price */
  --md-inverse-surface-2:#2A231C;
  --md-inverse-on-surface:#F6EFE6;
  --md-inverse-variant:rgba(246,239,230,.68);
  --md-inverse-primary:#F88C00;    /* actions on burnt black (snackbar action, CTA primary) */
  /* orange TEXT below 24px (or 18.7px bold) on the cream surfaces: the same hue one tone deeper, 4.6:1 or more
     on every cream surface up to surface-container-highest. #C25511 stays the primary for fills and large type. */
  --md-primary-text:#A0440B;

  /* roles added by the core pass (2026-10-21) */
  --md-secondary:#6F5B4E;          /* warm brown: selected toggles, active nav label */
  --md-on-secondary:#FFFFFF;
  --md-tertiary:#7A5900;
  --md-on-tertiary:#FFFFFF;
  --md-error:#B3261E;
  --md-on-error:#FFFFFF;
  --md-error-container:#F9DEDC;
  --md-on-error-container:#410E0B;
  --md-success:#2A6E49;            /* not a Google role: delivered, paid, ticks */
  --md-success-container:#CFEBD8;
  --md-on-success-container:#0E3B23;
  --md-info-container:#D7E4F6;
  --md-on-info-container:#0E3A5E;
  --md-surface-dim:#E2D8C8;
  --md-surface-bright:#FFFDF9;
  --md-scrim:rgba(16,14,10,.32);   /* modal scrim, 32% */

  /* state layers (content colour at these opacities) */
  --md-state-hover:.08; --md-state-focus:.10; --md-state-press:.10; --md-state-drag:.16;

  /* type: the owner's fonts in the M3 roles. brand = Fraunces, plain = Plus Jakarta Sans */
  --font-brand:'Fraunces','Iowan Old Style','Times New Roman',serif;
  --font-plain:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --type-display-large:400 57px/64px var(--font-brand);
  --type-display-medium:400 45px/52px var(--font-brand);
  --type-display-small:400 36px/44px var(--font-brand);
  --type-headline-large:400 32px/40px var(--font-brand);
  --type-headline-medium:400 28px/36px var(--font-brand);
  --type-headline-small:400 24px/32px var(--font-brand);
  --type-title-large:600 22px/28px var(--font-plain);
  --type-title-medium:600 16px/24px var(--font-plain);
  --type-title-small:600 14px/20px var(--font-plain);
  --type-body-large:400 16px/24px var(--font-plain);
  --type-body-medium:400 14px/20px var(--font-plain);
  --type-body-small:400 12px/16px var(--font-plain);
  --type-label-large:600 14px/20px var(--font-plain);
  --type-label-medium:600 12px/16px var(--font-plain);
  --type-label-small:600 11px/16px var(--font-plain);

  /* motion: Google's published web stand-ins for the Expressive springs (curve + duration) */
  --m3-fast-spatial:cubic-bezier(.42,1.67,.21,.90);     --m3-fast-spatial-dur:350ms;
  --m3-default-spatial:cubic-bezier(.38,1.21,.22,1);    --m3-default-spatial-dur:500ms;
  --m3-slow-spatial:cubic-bezier(.39,1.29,.35,.98);     --m3-slow-spatial-dur:650ms;
  --m3-fast-effects:cubic-bezier(.31,.94,.34,1);        --m3-fast-effects-dur:150ms;
  --m3-default-effects:cubic-bezier(.34,.80,.34,1);     --m3-default-effects-dur:200ms;
  --m3-slow-effects:cubic-bezier(.34,.88,.34,1);        --m3-slow-effects-dur:300ms;
  --m3-standard-spatial:cubic-bezier(.27,1.06,.18,1);   /* standard scheme: 350 / 500 / 750ms */
  --m3-standard:cubic-bezier(.2,0,0,1);
  --m3-standard-decel:cubic-bezier(0,0,0,1);
  --m3-standard-accel:cubic-bezier(.3,0,1,1);
  --m3-emphasized-decel:cubic-bezier(.05,.7,.1,1);
  --m3-emphasized-accel:cubic-bezier(.3,0,.8,.15);
  /* pairs, ready for a transition: transition:transform var(--m3-motion-fast-spatial) */
  --m3-motion-fast-spatial:350ms cubic-bezier(.42,1.67,.21,.90);
  --m3-motion-default-spatial:500ms cubic-bezier(.38,1.21,.22,1);
  --m3-motion-slow-spatial:650ms cubic-bezier(.39,1.29,.35,.98);
  --m3-motion-fast-effects:150ms cubic-bezier(.31,.94,.34,1);
  --m3-motion-default-effects:200ms cubic-bezier(.34,.80,.34,1);
  --m3-motion-slow-effects:300ms cubic-bezier(.34,.88,.34,1);

  /* ---- shape scale (Material 3 Expressive) ---- */
  --sh-xs:4px; --sh-sm:8px; --sh-md:12px; --sh-lg:16px; --sh-lgi:20px;
  --sh-xl:28px; --sh-xli:32px; --sh-2xl:48px; --sh-full:999px;

  /* ---- elevation: tonal first; shadows only on what floats ---- */
  --el-1:0 1px 2px rgba(26,22,17,.08),0 1px 3px 1px rgba(26,22,17,.05);
  --el-2:0 1px 2px rgba(26,22,17,.09),0 2px 6px 2px rgba(26,22,17,.06);
  --el-3:0 4px 8px 3px rgba(26,22,17,.07),0 1px 3px rgba(26,22,17,.10);
  --el-4:0 6px 10px 4px rgba(26,22,17,.08),0 2px 3px rgba(26,22,17,.10);
  --el-5:0 8px 12px 6px rgba(26,22,17,.08),0 4px 4px rgba(26,22,17,.10);

  /* ---- motion: Material 3 Expressive springs ---- */
  --m-spring-fast:cubic-bezier(.42,1.67,.21,.9);   /* spatial, fast: presses, chips */
  --m-spring:cubic-bezier(.38,1.21,.22,1);         /* spatial, default: panels, shapes */
  --m-effects:cubic-bezier(.31,.94,.34,1);         /* colour and opacity */
  --m-emph:cubic-bezier(.2,0,0,1);

  /* ---- expressive shapes, used as masks ---- */
  --shape-cookie4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M98.4 50.0L98.4 52.5L98.5 55.1L98.7 57.7L98.8 60.4L98.9 63.1L99.0 65.9L99.0 68.8L98.8 71.7L98.4 74.7L97.8 77.6L96.9 80.5L95.7 83.2L94.3 85.9L92.6 88.3L90.6 90.6L88.3 92.6L85.9 94.3L83.2 95.7L80.5 96.9L77.6 97.8L74.7 98.4L71.7 98.8L68.8 99.0L65.9 99.0L63.1 98.9L60.4 98.8L57.7 98.7L55.1 98.5L52.5 98.4L50.0 98.4L47.5 98.4L44.9 98.5L42.3 98.7L39.6 98.8L36.9 98.9L34.1 99.0L31.2 99.0L28.3 98.8L25.3 98.4L22.4 97.8L19.5 96.9L16.8 95.7L14.1 94.3L11.7 92.6L9.4 90.6L7.4 88.3L5.7 85.9L4.3 83.2L3.1 80.5L2.2 77.6L1.6 74.7L1.2 71.7L1.0 68.8L1.0 65.9L1.1 63.1L1.2 60.4L1.3 57.7L1.5 55.1L1.6 52.5L1.6 50.0L1.6 47.5L1.5 44.9L1.3 42.3L1.2 39.6L1.1 36.9L1.0 34.1L1.0 31.2L1.2 28.3L1.6 25.3L2.2 22.4L3.1 19.5L4.3 16.8L5.7 14.1L7.4 11.7L9.4 9.4L11.7 7.4L14.1 5.7L16.8 4.3L19.5 3.1L22.4 2.2L25.3 1.6L28.3 1.2L31.2 1.0L34.1 1.0L36.9 1.1L39.6 1.2L42.3 1.3L44.9 1.5L47.5 1.6L50.0 1.6L52.5 1.6L55.1 1.5L57.7 1.3L60.4 1.2L63.1 1.1L65.9 1.0L68.8 1.0L71.7 1.2L74.7 1.6L77.6 2.2L80.5 3.1L83.2 4.3L85.9 5.7L88.3 7.4L90.6 9.4L92.6 11.7L94.3 14.1L95.7 16.8L96.9 19.5L97.8 22.4L98.4 25.3L98.8 28.3L99.0 31.2L99.0 34.1L98.9 36.9L98.8 39.6L98.7 42.3L98.5 44.9L98.4 47.5Z'/%3E%3C/svg%3E");
  --shape-cookie6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.0 50.0L98.8 52.6L98.2 55.1L97.2 57.5L95.9 59.8L94.4 61.9L92.9 63.9L91.3 65.9L89.8 67.7L88.5 69.6L87.3 71.5L86.2 73.5L85.3 75.6L84.4 77.8L83.5 80.2L82.5 82.5L81.4 84.9L80.1 87.1L78.5 89.2L76.6 91.0L74.5 92.4L72.2 93.5L69.7 94.2L67.1 94.6L64.5 94.6L61.9 94.4L59.4 94.1L56.9 93.7L54.6 93.4L52.3 93.1L50.0 93.0L47.7 93.1L45.4 93.4L43.1 93.7L40.6 94.1L38.1 94.4L35.5 94.6L32.9 94.6L30.3 94.2L27.8 93.5L25.5 92.4L23.4 91.0L21.5 89.2L19.9 87.1L18.6 84.9L17.5 82.5L16.5 80.2L15.6 77.8L14.7 75.6L13.8 73.5L12.7 71.5L11.5 69.6L10.2 67.7L8.7 65.9L7.1 63.9L5.6 61.9L4.1 59.8L2.8 57.5L1.8 55.1L1.2 52.6L1.0 50.0L1.2 47.4L1.8 44.9L2.8 42.5L4.1 40.2L5.6 38.1L7.1 36.1L8.7 34.1L10.2 32.3L11.5 30.4L12.7 28.5L13.8 26.5L14.7 24.4L15.6 22.2L16.5 19.8L17.5 17.5L18.6 15.1L19.9 12.9L21.5 10.8L23.4 9.0L25.5 7.6L27.8 6.5L30.3 5.8L32.9 5.4L35.5 5.4L38.1 5.6L40.6 5.9L43.1 6.3L45.4 6.6L47.7 6.9L50.0 7.0L52.3 6.9L54.6 6.6L56.9 6.3L59.4 5.9L61.9 5.6L64.5 5.4L67.1 5.4L69.7 5.8L72.2 6.5L74.5 7.6L76.6 9.0L78.5 10.8L80.1 12.9L81.4 15.1L82.5 17.5L83.5 19.8L84.4 22.2L85.3 24.4L86.2 26.5L87.3 28.5L88.5 30.4L89.8 32.3L91.3 34.1L92.9 36.1L94.4 38.1L95.9 40.2L97.2 42.5L98.2 44.9L98.8 47.4Z'/%3E%3C/svg%3E");
  --shape-cookie9:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M98.5 50.0L98.2 52.6L97.3 55.1L96.1 57.5L94.7 59.7L93.3 61.9L92.1 64.1L91.2 66.3L90.7 68.6L90.3 71.1L90.0 73.7L89.5 76.4L88.7 78.9L87.4 81.2L85.7 83.1L83.5 84.7L81.1 85.8L78.5 86.7L76.0 87.4L73.7 88.2L71.5 89.3L69.6 90.6L67.7 92.2L65.8 94.0L63.7 95.8L61.5 97.3L59.2 98.5L56.6 99.0L54.0 99.0L51.4 98.4L48.9 97.5L46.4 96.5L44.1 95.5L41.8 94.8L39.4 94.5L36.9 94.4L34.4 94.5L31.7 94.7L29.0 94.5L26.4 94.0L24.0 93.0L21.9 91.4L20.2 89.4L18.7 87.2L17.5 84.8L16.3 82.5L15.1 80.4L13.6 78.6L11.8 76.9L9.8 75.3L7.7 73.7L5.7 72.0L3.9 70.0L2.5 67.8L1.7 65.3L1.5 62.7L1.7 60.0L2.3 57.4L2.9 54.8L3.3 52.4L3.5 50.0L3.3 47.6L2.9 45.2L2.3 42.6L1.7 40.0L1.5 37.3L1.7 34.7L2.5 32.2L3.9 30.0L5.7 28.0L7.7 26.3L9.8 24.7L11.8 23.1L13.6 21.4L15.1 19.6L16.3 17.5L17.5 15.2L18.7 12.8L20.2 10.6L21.9 8.6L24.0 7.0L26.4 6.0L29.0 5.5L31.7 5.3L34.4 5.5L36.9 5.6L39.4 5.5L41.8 5.2L44.1 4.5L46.4 3.5L48.9 2.5L51.4 1.6L54.0 1.0L56.6 1.0L59.2 1.5L61.5 2.7L63.7 4.2L65.8 6.0L67.7 7.8L69.6 9.4L71.5 10.7L73.7 11.8L76.0 12.6L78.5 13.3L81.1 14.2L83.5 15.3L85.7 16.9L87.4 18.8L88.7 21.1L89.5 23.6L90.0 26.3L90.3 28.9L90.7 31.4L91.2 33.7L92.1 35.9L93.3 38.1L94.7 40.3L96.1 42.5L97.3 44.9L98.2 47.4Z'/%3E%3C/svg%3E");
  --shape-sunny:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.0 50.0L98.7 52.5L97.7 55.0L96.2 57.3L94.5 59.5L92.7 61.4L91.1 63.3L89.8 65.3L89.0 67.4L88.5 69.6L88.3 72.1L88.1 74.8L87.8 77.5L87.3 80.2L86.2 82.6L84.6 84.6L82.6 86.2L80.2 87.3L77.5 87.8L74.8 88.1L72.1 88.3L69.6 88.5L67.4 89.0L65.3 89.8L63.3 91.1L61.4 92.7L59.5 94.5L57.3 96.2L55.0 97.7L52.5 98.7L50.0 99.0L47.5 98.7L45.0 97.7L42.7 96.2L40.5 94.5L38.6 92.7L36.7 91.1L34.7 89.8L32.6 89.0L30.4 88.5L27.9 88.3L25.2 88.1L22.5 87.8L19.8 87.3L17.4 86.2L15.4 84.6L13.8 82.6L12.7 80.2L12.2 77.5L11.9 74.8L11.7 72.1L11.5 69.6L11.0 67.4L10.2 65.3L8.9 63.3L7.3 61.4L5.5 59.5L3.8 57.3L2.3 55.0L1.3 52.5L1.0 50.0L1.3 47.5L2.3 45.0L3.8 42.7L5.5 40.5L7.3 38.6L8.9 36.7L10.2 34.7L11.0 32.6L11.5 30.4L11.7 27.9L11.9 25.2L12.2 22.5L12.7 19.8L13.8 17.4L15.4 15.4L17.4 13.8L19.8 12.7L22.5 12.2L25.2 11.9L27.9 11.7L30.4 11.5L32.6 11.0L34.7 10.2L36.7 8.9L38.6 7.3L40.5 5.5L42.7 3.8L45.0 2.3L47.5 1.3L50.0 1.0L52.5 1.3L55.0 2.3L57.3 3.8L59.5 5.5L61.4 7.3L63.3 8.9L65.3 10.2L67.4 11.0L69.6 11.5L72.1 11.7L74.8 11.9L77.5 12.2L80.2 12.7L82.6 13.8L84.6 15.4L86.2 17.4L87.3 19.8L87.8 22.5L88.1 25.2L88.3 27.9L88.5 30.4L89.0 32.6L89.8 34.7L91.1 36.7L92.7 38.6L94.5 40.5L96.2 42.7L97.7 45.0L98.7 47.5Z'/%3E%3C/svg%3E");
  --shape-clover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M91.1 50.0L91.3 52.2L91.8 54.4L92.6 56.7L93.6 59.3L94.7 62.0L95.9 64.9L97.0 68.0L98.0 71.4L98.7 74.8L99.0 78.3L98.9 81.8L98.3 85.1L97.3 88.3L95.7 91.2L93.6 93.6L91.2 95.7L88.3 97.3L85.1 98.3L81.8 98.9L78.3 99.0L74.8 98.7L71.4 98.0L68.0 97.0L64.9 95.9L62.0 94.7L59.3 93.6L56.7 92.6L54.4 91.8L52.2 91.3L50.0 91.1L47.8 91.3L45.6 91.8L43.3 92.6L40.7 93.6L38.0 94.7L35.1 95.9L32.0 97.0L28.6 98.0L25.2 98.7L21.7 99.0L18.2 98.9L14.9 98.3L11.7 97.3L8.8 95.7L6.4 93.6L4.3 91.2L2.7 88.3L1.7 85.1L1.1 81.8L1.0 78.3L1.3 74.8L2.0 71.4L3.0 68.0L4.1 64.9L5.3 62.0L6.4 59.3L7.4 56.7L8.2 54.4L8.7 52.2L8.9 50.0L8.7 47.8L8.2 45.6L7.4 43.3L6.4 40.7L5.3 38.0L4.1 35.1L3.0 32.0L2.0 28.6L1.3 25.2L1.0 21.7L1.1 18.2L1.7 14.9L2.7 11.7L4.3 8.8L6.4 6.4L8.8 4.3L11.7 2.7L14.9 1.7L18.2 1.1L21.7 1.0L25.2 1.3L28.6 2.0L32.0 3.0L35.1 4.1L38.0 5.3L40.7 6.4L43.3 7.4L45.6 8.2L47.8 8.7L50.0 8.9L52.2 8.7L54.4 8.2L56.7 7.4L59.3 6.4L62.0 5.3L64.9 4.1L68.0 3.0L71.4 2.0L74.8 1.3L78.3 1.0L81.8 1.1L85.1 1.7L88.3 2.7L91.2 4.3L93.6 6.4L95.7 8.8L97.3 11.7L98.3 14.9L98.9 18.2L99.0 21.7L98.7 25.2L98.0 28.6L97.0 32.0L95.9 35.1L94.7 38.0L93.6 40.7L92.6 43.3L91.8 45.6L91.3 47.8Z'/%3E%3C/svg%3E");
  --shape-flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.0 50.0L98.6 52.5L97.4 55.0L95.6 57.2L93.6 59.3L91.5 61.1L89.6 62.9L88.3 64.7L87.5 66.7L87.1 68.9L87.2 71.5L87.3 74.3L87.4 77.2L87.0 80.0L86.2 82.6L84.6 84.6L82.6 86.2L80.0 87.0L77.2 87.4L74.3 87.3L71.5 87.2L68.9 87.1L66.7 87.5L64.7 88.3L62.9 89.6L61.1 91.5L59.3 93.6L57.2 95.6L55.0 97.4L52.5 98.6L50.0 99.0L47.5 98.6L45.0 97.4L42.8 95.6L40.7 93.6L38.9 91.5L37.1 89.6L35.3 88.3L33.3 87.5L31.1 87.1L28.5 87.2L25.7 87.3L22.8 87.4L20.0 87.0L17.4 86.2L15.4 84.6L13.8 82.6L13.0 80.0L12.6 77.2L12.7 74.3L12.8 71.5L12.9 68.9L12.5 66.7L11.7 64.7L10.4 62.9L8.5 61.1L6.4 59.3L4.4 57.2L2.6 55.0L1.4 52.5L1.0 50.0L1.4 47.5L2.6 45.0L4.4 42.8L6.4 40.7L8.5 38.9L10.4 37.1L11.7 35.3L12.5 33.3L12.9 31.1L12.8 28.5L12.7 25.7L12.6 22.8L13.0 20.0L13.8 17.4L15.4 15.4L17.4 13.8L20.0 13.0L22.8 12.6L25.7 12.7L28.5 12.8L31.1 12.9L33.3 12.5L35.3 11.7L37.1 10.4L38.9 8.5L40.7 6.4L42.8 4.4L45.0 2.6L47.5 1.4L50.0 1.0L52.5 1.4L55.0 2.6L57.2 4.4L59.3 6.4L61.1 8.5L62.9 10.4L64.7 11.7L66.7 12.5L68.9 12.9L71.5 12.8L74.3 12.7L77.2 12.6L80.0 13.0L82.6 13.8L84.6 15.4L86.2 17.4L87.0 20.0L87.4 22.8L87.3 25.7L87.2 28.5L87.1 31.1L87.5 33.3L88.3 35.3L89.6 37.1L91.5 38.9L93.6 40.7L95.6 42.8L97.4 45.0L98.6 47.5Z'/%3E%3C/svg%3E");
  --shape-scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.0 50.0L98.6 52.5L97.6 55.0L96.3 57.3L95.0 59.6L94.1 61.8L93.8 64.2L93.7 66.8L93.7 69.5L93.4 72.1L92.4 74.5L90.8 76.5L88.7 78.1L86.4 79.5L84.2 80.8L82.3 82.3L80.8 84.2L79.5 86.4L78.1 88.7L76.5 90.8L74.5 92.4L72.1 93.4L69.5 93.7L66.8 93.7L64.2 93.8L61.8 94.1L59.6 95.0L57.3 96.3L55.0 97.6L52.5 98.6L50.0 99.0L47.5 98.6L45.0 97.6L42.7 96.3L40.4 95.0L38.2 94.1L35.8 93.8L33.2 93.7L30.5 93.7L27.9 93.4L25.5 92.4L23.5 90.8L21.9 88.7L20.5 86.4L19.2 84.2L17.7 82.3L15.8 80.8L13.6 79.5L11.3 78.1L9.2 76.5L7.6 74.5L6.6 72.1L6.3 69.5L6.3 66.8L6.2 64.2L5.9 61.8L5.0 59.6L3.7 57.3L2.4 55.0L1.4 52.5L1.0 50.0L1.4 47.5L2.4 45.0L3.7 42.7L5.0 40.4L5.9 38.2L6.2 35.8L6.3 33.2L6.3 30.5L6.6 27.9L7.6 25.5L9.2 23.5L11.3 21.9L13.6 20.5L15.8 19.2L17.7 17.7L19.2 15.8L20.5 13.6L21.9 11.3L23.5 9.2L25.5 7.6L27.9 6.6L30.5 6.3L33.2 6.3L35.8 6.2L38.2 5.9L40.4 5.0L42.7 3.7L45.0 2.4L47.5 1.4L50.0 1.0L52.5 1.4L55.0 2.4L57.3 3.7L59.6 5.0L61.8 5.9L64.2 6.2L66.8 6.3L69.5 6.3L72.1 6.6L74.5 7.6L76.5 9.2L78.1 11.3L79.5 13.6L80.8 15.8L82.3 17.7L84.2 19.2L86.4 20.5L88.7 21.9L90.8 23.5L92.4 25.5L93.4 27.9L93.7 30.5L93.7 33.2L93.8 35.8L94.1 38.2L95.0 40.4L96.3 42.7L97.6 45.0L98.6 47.5Z'/%3E%3C/svg%3E");

  /* ---- the old tokens, pointed at the new roles so every page and the chat follow ---- */
  --paper:var(--md-surface); --paper-2:var(--md-surface-low); --paper-3:var(--md-surface-high); --paper-4:var(--md-surface-highest);
  --surface:var(--md-surface-lowest); --surface-2:var(--md-surface-low);
  --cream:var(--md-surface); --cream-2:var(--md-surface-low); --cream-3:var(--md-surface-high);
  --bg:var(--md-surface); --bg-2:var(--md-surface-lowest); --bg-3:var(--md-surface-low);
  --line:rgba(26,22,17,.09); --line-2:rgba(26,22,17,.14); --line-3:rgba(26,22,17,.24);
  /* secondary text takes the role, not translucent ink (it measured 4.0:1 on cream) */
  --muted:var(--md-on-surface-variant); --ink-soft:var(--md-on-surface-variant);
  --faint:var(--md-outline); --muted-2:var(--md-outline);
  --text-2:var(--md-on-surface-variant); --text-3:var(--md-on-surface-variant);
  --terra-deep:var(--md-primary-text); --orange-deep:var(--md-primary-text); --gold-deep:var(--md-primary-text);
  --orange-2:var(--md-bright); --gold:var(--md-bright); --gold-2:var(--md-bright);
  --orange-tint:var(--md-primary-container); --terra-tint:var(--md-primary-container); --gold-tint:var(--md-primary-container);
  --r-xs:8px; --r-sm:12px; --r:16px; --r-md:20px; --r-lg:28px; --r-xl:32px; --r-2xl:48px; --r-full:999px;
  --shadow-xs:none; --shadow-sm:var(--el-1); --shadow:var(--el-2); --shadow-lg:var(--el-3); --shadow-xl:var(--el-4);
  --shadow-terra:none;
  --nav-h:72px;
  --nav-bg:var(--md-surface-container);
}

/* ============================================================
   BASE
   ============================================================ */
body{background:var(--md-surface);color:var(--md-on-surface);font-size:16px;line-height:1.5}   /* body-large */
body::after{display:none}                      /* no paper grain: Pixel surfaces are clean */
::selection{background:var(--md-primary-container);color:var(--md-on-primary-container)}
/* Focus ring: 3px, 2px outside. List rows and navigation items draw it 3px inside (see .m3-focus-inner). */
:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
:where(a:not([class])):focus-visible{border-radius:4px}
.m3-focus-inner:focus-visible,.m3-navbar a:focus-visible,.m3-navbar button:focus-visible,.drawer-links a:focus-visible,
.faq-item summary:focus-visible,.m3-list-item:focus-visible,.m3-menu-item:focus-visible{outline-offset:-3px}
.bg-ink :focus-visible,.cta-band :focus-visible,.footer :focus-visible,.m3-inverse :focus-visible{outline-color:var(--md-inverse-primary)}

/* <main> fades in once per page (site.css: animation pageIn ... both). The held "both" fill kept the opacity
   animation in effect for the life of the page, which made <main> a stacking context under the nav (z 120)
   and top bar (z 130): fixed overlays inside <main> (the gallery viewer) could not rise above them.
   "backwards" keeps the fade but lets the animation end, so <main> stops being a stacking context. */
main.page{animation-fill-mode:backwards}
@media(pointer:fine){
  ::-webkit-scrollbar-track{background:var(--md-surface)}
  ::-webkit-scrollbar-thumb{background:var(--md-outline-variant);border:3px solid var(--md-surface)}
}
.ic{flex:0 0 auto}
/* Elements that slide in from the right wait off-screen until revealed; on a phone that widened the page and
   zoomed it out. clip (not hidden) keeps the sticky columns working. */
main.page{overflow-x:clip}
/* Grid columns may shrink below their widest word: on a phone the tracker hero grew to 425px inside 350px. */
.hero-grid>*,.split-feature>*,.how-grid>*,.contact-grid>*,.grid>*{min-width:0}

/* Headlines keep Fraunces, set on the M3 scale: no sub-1.0 line heights, light tracking (C13). */
h1{line-height:1.08;letter-spacing:-.02em}
.page-title{font-size:clamp(36px,4.8vw,57px);line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(28px,3.4vw,45px);line-height:1.16;letter-spacing:-.01em}
h3{font-size:clamp(20px,1.7vw,24px);line-height:1.3;letter-spacing:-.01em}
em{color:var(--md-primary);font-weight:400}
/* The italic accent stays where it is an editorial moment: page and hero titles (h1) and the CTA band.
   In section headlines the accent is the same Fraunces, upright, in the primary colour (H31). */
h2 em,h3 em{font-style:normal;font-weight:500;font-variation-settings:"opsz" 96,"SOFT" 50,"WONK" 0}
.cta-band h2 em{font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
/* the italic overhang ate the next word's space ("honestpricing") */
h1 em,h2 em,h3 em{padding-inline-end:.08em;margin-inline-start:.02em}
.bg-ink em,.cta-band em,.price-card.featured em{color:var(--md-bright)}
p{color:var(--md-on-surface-variant);line-height:1.5}
.lede{color:var(--md-on-surface-variant);font-size:16px;line-height:24px}
.small{font-size:14px;line-height:20px;color:var(--md-on-surface-variant)}
.card p,.rail-body p,.price-card li,.loc-row{font-size:14px;line-height:20px}
.ticklist li{font-size:16px;line-height:24px}
/* UI labels at 600 (Jakarta's nearest to Google's medium weight), small labels on the 12/16 step (H30) */
.store-row-body b,.guarantee-item b,.tcard .who b{font-weight:600}
.cat-count,.tcard .who span{font-size:12px;line-height:16px}

/* On burnt black the old secondary-text tokens take the light role, so text set with var(--muted) stays readable */
.bg-ink,.cta-band,.price-card.featured,.footer,.m3-inverse{--muted:var(--md-inverse-variant);--ink-soft:var(--md-inverse-variant);
  --faint:rgba(246,239,230,.5);--muted-2:rgba(246,239,230,.5);--text-2:var(--md-inverse-variant);--text-3:var(--md-inverse-variant)}
.m3-inverse{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}

/* Eyebrow. In hero and page heads: an assist-chip-sized tonal label (32px, 8px corners). Inside sections:
   plain label-large text in the primary role, no container (C14). No flex gap between text runs (H36). */
.eyebrow{display:inline-block;gap:0;height:32px;padding:0 12px 0 10px;border-radius:var(--sh-sm);background:var(--md-primary-container);
  color:var(--md-on-primary-container);font-size:14px;line-height:32px;letter-spacing:.01em;text-transform:none;font-weight:600;white-space:nowrap;max-width:100%}
.eyebrow::before{display:inline-block;vertical-align:middle;width:7px;height:7px;margin:-2px 8px 0 0;border-radius:50%;background:var(--md-primary);opacity:1}
.eyebrow.center::after,.page-head .eyebrow::after{display:none}
.section-head .eyebrow,.how-aside .eyebrow,.split-feature .eyebrow,.strip-head .eyebrow,.guarantee-panel .eyebrow,
.bg-ink .eyebrow,.cta-band .eyebrow{height:auto;padding:0;background:none;border-radius:0;color:var(--md-primary-text);font-weight:700}
.section-head .eyebrow::before,.how-aside .eyebrow::before,.split-feature .eyebrow::before,.strip-head .eyebrow::before,
.guarantee-panel .eyebrow::before,.bg-ink .eyebrow::before,.cta-band .eyebrow::before{display:none}
.bg-ink .eyebrow,.cta-band .eyebrow{color:var(--md-bright)}

/* ============================================================
   SECTIONS: tonal sheets with big rounded corners
   ============================================================ */
/* M3 Expressive spacing: containers 8px apart, 40-72px inside (H39, C33) */
section{padding:clamp(40px,5vw,72px) 0}
.bg-surface,.bg-paper-2{background:var(--md-surface-low);border:0;border-radius:var(--sh-2xl);
  margin-inline:clamp(8px,1.4vw,20px);margin-block:8px}
.bg-ink{background:var(--md-inverse-surface);border-radius:var(--sh-2xl);margin-inline:clamp(8px,1.4vw,20px);margin-block:8px}
main>section:last-child{padding-bottom:clamp(12px,2vw,24px)}
.rule{background:var(--md-outline-variant);height:1px}

/* Section header: start-aligned headline, optional supporting text, and an optional trailing action
   (<a class="btn btn-tonal section-head-action">) on the same row (H5 anatomy). */
.section-head,.section-head.center{max-width:none;margin:0 0 clamp(24px,3vw,40px);text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;justify-items:start}
.section-head>*{grid-column:1;max-width:min(100%,760px)}
.section-head .eyebrow{margin-bottom:8px}
.section-head h2{margin-bottom:8px}
.section-head .lede,.section-head.center .lede{margin-inline:0;max-width:60ch}
.section-head>.section-head-action{grid-column:2;grid-row:1 / span 4;align-self:end;justify-self:end}
.section-head.is-centered{text-align:center;justify-items:center;grid-template-columns:1fr}
.section-head.is-centered .lede{margin-inline:auto}

/* ============================================================
   BUTTONS (M3 Expressive common buttons)
   Sizes XS 32 / S 40 (default) / M 56 / L 96 / XL 136, round (pill) or .btn-square. A press morphs the corners to
   the pressed radius on the fast spatial spring. Every size sets its numbers as custom properties.
   .btn-sm = XS, .btn = S, .btn-lg = M (the names the pages already use), plus .btn-xs .btn-s .btn-m .btn-l .btn-xl.
   On phones XS and S render 48px tall so the visible button is the 48px touch target.
   ============================================================ */
.btn{--btn-h:40px;--btn-px:16px;--btn-icon:20px;--btn-gap:8px;--btn-sq:12px;--btn-press:8px;--btn-ol:1px;
  height:var(--btn-h);padding:0 var(--btn-px);gap:var(--btn-gap);border-radius:var(--sh-full);
  font:var(--type-label-large);letter-spacing:.01em;box-shadow:none;transform:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-radius var(--m3-motion-fast-spatial),padding var(--m3-motion-fast-spatial),
             background-color .2s var(--m-effects),box-shadow .2s var(--m-effects),color .2s var(--m-effects),border-color .2s var(--m-effects)}
/* state layer: hover 8%, focus 10%, press 10% of the label colour */
.btn::before{background:currentColor;opacity:0;transform:none;transition:opacity 15ms linear}
.btn:hover::before{transform:none;opacity:var(--md-state-hover)}
.btn:focus-visible::before{opacity:var(--md-state-focus)}
.btn:active::before{opacity:var(--md-state-press)}
.btn:hover{transform:none}
.btn:active{transform:none!important;border-radius:var(--btn-press);transition-duration:120ms}
.btn svg{width:var(--btn-icon);height:var(--btn-icon)}
.btn:hover svg:last-child{transform:none}
.btn-xs,.btn-sm{--btn-h:32px;--btn-px:12px;--btn-icon:20px;--btn-gap:4px;--btn-sq:12px;--btn-press:8px}
.btn-s{--btn-h:40px;--btn-px:16px}
.btn-m,.btn-lg{--btn-h:56px;--btn-px:24px;--btn-icon:24px;--btn-gap:8px;--btn-sq:16px;--btn-press:12px;font:var(--type-title-medium)}
.btn-l{--btn-h:96px;--btn-px:48px;--btn-icon:32px;--btn-gap:12px;--btn-sq:28px;--btn-press:16px;--btn-ol:2px;font:var(--type-headline-small)}
.btn-xl{--btn-h:136px;--btn-px:64px;--btn-icon:40px;--btn-gap:16px;--btn-sq:28px;--btn-press:16px;--btn-ol:3px;font:var(--type-headline-large)}
.btn-square{border-radius:var(--btn-sq)}
.btn-block{width:100%}
@media(max-width:760px){
  .btn:not(.btn-m):not(.btn-lg):not(.btn-l):not(.btn-xl){min-height:48px}
}

/* colour styles. .btn-terra = filled (primary). */
.btn-filled,.btn-terra{background:var(--md-primary);color:var(--md-on-primary);box-shadow:none}
.btn-filled:hover,.btn-terra:hover{background:var(--md-primary);box-shadow:var(--el-1);transform:none}
.btn-tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}
.btn-tonal:hover{background:var(--md-secondary-container);box-shadow:none}
.btn-outlined{background:transparent;color:var(--md-on-surface-variant);box-shadow:inset 0 0 0 var(--btn-ol) var(--md-outline-variant)}
.btn-outlined:hover{background:transparent;box-shadow:inset 0 0 0 var(--btn-ol) var(--md-outline-variant)}
.btn-text{background:transparent;color:var(--md-primary-text);--btn-px:12px;box-shadow:none}
.btn-text:hover{background:transparent}
.btn-elevated{background:var(--md-surface-low);color:var(--md-primary-text);box-shadow:var(--el-1)}
.btn-elevated:hover{background:var(--md-surface-low);box-shadow:var(--el-2)}
/* the site's own styles */
.btn-accent{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:none}
.btn-accent:hover{background:var(--md-inverse-surface);box-shadow:var(--el-1);transform:none}
.btn-ghost{background:transparent;color:var(--md-on-surface);border:1px solid var(--md-outline);box-shadow:none}
.btn-ghost:hover{border-color:var(--md-outline);box-shadow:none;transform:none}
.btn-light{background:var(--md-surface-lowest);color:var(--md-on-surface);border:0}
.btn-light:hover{background:var(--md-surface-lowest);box-shadow:var(--el-1);transform:none}
.btn-outline-light{border:1px solid rgba(246,239,230,.45);color:var(--md-inverse-on-surface)}
.btn-outline-light:hover{background:transparent;border-color:rgba(246,239,230,.45);transform:none}
/* On a light page head (the shop pages) the light outline button was white on cream: outlined in ink there. */
.page-head .btn-outline-light,.hero .btn-outline-light{color:var(--md-on-surface);border-color:var(--md-outline)}
.page-head .btn-outline-light:hover,.hero .btn-outline-light:hover{border-color:var(--md-outline)}
.btn-wa{background:#25D366;color:#06301A;box-shadow:none}
.btn-wa:hover{background:#25D366;box-shadow:var(--el-1);transform:none}
.price-card.featured .btn-light,.cta-band .btn-light{background:var(--md-bright);color:#1A1611}
/* on burnt black (.bg-ink, .cta-band, .m3-inverse, .footer): tonal, outlined, text and filled read on the dark ground */
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .btn-tonal{background:var(--md-inverse-surface-2);color:var(--md-inverse-on-surface)}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .btn-outlined{color:var(--md-inverse-on-surface);box-shadow:inset 0 0 0 var(--btn-ol) rgba(246,239,230,.32)}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .btn-text{color:var(--md-inverse-primary)}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .btn-filled{background:var(--md-inverse-primary);color:#1A1611}

/* toggle buttons: aria-pressed="true|false". Selected round turns square, selected square turns round. */
.btn[aria-pressed="true"]{border-radius:var(--btn-sq)}
.btn-square[aria-pressed="true"]{border-radius:var(--sh-full)}
.btn-filled[aria-pressed="false"],.btn-terra[aria-pressed="false"]{background:var(--md-surface-container);color:var(--md-on-surface-variant)}
.btn-tonal[aria-pressed="true"]{background:var(--md-secondary);color:var(--md-on-secondary)}
.btn-outlined[aria-pressed="true"]{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:none}
.btn-elevated[aria-pressed="true"]{background:var(--md-primary);color:var(--md-on-primary)}
/* disabled: container on-surface 10%, label on-surface 38% */
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:1;pointer-events:none;box-shadow:none!important;border-color:transparent!important;
  background:rgba(26,22,17,.10)!important;color:rgba(26,22,17,.38)!important}
.btn-text:disabled,.btn-text[disabled],.btn-outlined:disabled{background:transparent!important}

/* Buttons never move under the pointer (motion.js leans .btn-lg toward the cursor with an inline translate) */
html .btn,html [data-magnetic]{translate:none!important}

/* ============================================================
   BUTTON GROUPS
   .m3-btn-group           standard: a pressed button widens and its neighbours give way (fast spatial spring)
   .m3-btn-group.connected connected: 2px gaps, full outer corners, small inner corners; selection rounds an item
   Size it with .xs/.s/.m/.l/.xl on the group (gap and corners), and the same size on the buttons.
   Add data-m3-select="single|multi|required" for toggle behaviour (pixel.js keeps aria-pressed in step).
   ============================================================ */
.m3-btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.m3-btn-group.xs{gap:18px}.m3-btn-group.m,.m3-btn-group.l,.m3-btn-group.xl{gap:8px}
.m3-btn-group:not(.connected)>.btn:active{padding-inline:calc(var(--btn-px) * 1.5)}
.m3-btn-group.connected{gap:2px;flex-wrap:nowrap;--in:8px;--in-press:4px}
.m3-btn-group.connected.l{--in:16px;--in-press:12px}
.m3-btn-group.connected.xl{--in:20px;--in-press:16px}
.m3-btn-group.connected>.btn{flex:1 1 auto;min-width:48px;border-radius:var(--in)}
.m3-btn-group.connected>.btn:first-child{border-radius:var(--sh-full) var(--in) var(--in) var(--sh-full)}
.m3-btn-group.connected>.btn:last-child{border-radius:var(--in) var(--sh-full) var(--sh-full) var(--in)}
.m3-btn-group.connected>.btn:active{border-radius:var(--in-press)}
.m3-btn-group.connected>.btn:first-child:active{border-radius:var(--sh-full) var(--in-press) var(--in-press) var(--sh-full)}
.m3-btn-group.connected>.btn:last-child:active{border-radius:var(--in-press) var(--sh-full) var(--sh-full) var(--in-press)}
.m3-btn-group.connected>.btn[aria-pressed="true"]{border-radius:var(--sh-full)}
/* items without a colour class: the filled toggle colours (surface-container, selected primary) */
.m3-btn-group.connected>.btn:not(.btn-tonal):not(.btn-outlined):not(.btn-elevated):not(.btn-terra):not(.btn-filled):not(.btn-accent){background:var(--md-surface-container);color:var(--md-on-surface-variant)}
.m3-btn-group.connected>.btn[aria-pressed="true"]:not(.btn-tonal):not(.btn-outlined):not(.btn-elevated){background:var(--md-primary);color:var(--md-on-primary)}
/* the selected item may show a leading check (.m3-check-ic on any icon) only while selected */
.m3-btn-group .btn .m3-check-ic{display:none}
.m3-btn-group .btn[aria-pressed="true"] .m3-check-ic{display:block}

/* Ripple (pixel.js puts a <span class="ripple"> where the finger lands): grows 450ms, fades 375ms */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.12;
  transform:scale(.2);animation:ripple .45s var(--m3-standard) forwards,rippleOut .375s linear .3s forwards;z-index:0}
@keyframes ripple{to{transform:scale(1)}}
@keyframes rippleOut{to{opacity:0}}

/* Links: primary text, no sweeping underline */
.link{color:var(--md-primary-text)}
.link::after{display:none}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   CHROME: progress, top bar, top app bar, drawer
   ============================================================ */
/* No reading-progress bar: in Material a linear indicator means loading (H34). The route bar stays: it shows a
   navigation in flight, as an M3 linear indicator with its track. */
.scroll-progress{display:none!important}
.route-bar{height:4px;background:var(--md-primary);box-shadow:none;border-radius:0 2px 2px 0}
.route-bar.on::after{content:"";position:fixed;left:0;right:0;top:0;height:4px;background:var(--md-secondary-container);z-index:-1}

.topbar{background:var(--md-inverse-surface)}
.topbar-info span{color:var(--md-inverse-variant)}
.topbar-info a:hover{color:var(--md-bright)}
/* Region: a segmented button, the selected side in the logo's orange */
.region-switch{background:transparent;box-shadow:inset 0 0 0 1px rgba(246,239,230,.28);padding:3px}
.region-switch::before{background:var(--md-bright);transition:left .5s var(--m-spring),width .5s var(--m-spring)}
.region-switch button{height:30px;padding:0 14px;color:var(--md-inverse-on-surface);font-weight:700}
.region-switch button.active{color:#1A1611}
.region-switch:not([data-ready]) button.active{background:var(--md-bright)}
.topbar-socials a{width:32px;height:32px;background:transparent}
.topbar-socials a:hover{background:rgba(246,239,230,.12);transform:none}

/* Top app bar */
.nav{background:color-mix(in srgb,var(--md-surface) 90%,transparent);border-bottom:0}
.nav.is-stuck{background:var(--md-surface-container);box-shadow:none;border-color:transparent}
.nav .wrap{min-height:var(--nav-h)}
.brand-mark{width:46px;height:46px;flex:0 0 46px;background:transparent;box-shadow:none;border-radius:50%}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}
.brand-mark img{object-fit:contain}
.nav-links{gap:4px}
.nav-links::before{background:var(--md-secondary-container);box-shadow:none;transition:left .5s var(--m-spring),width .5s var(--m-spring),opacity .2s}
.nav-links a{height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;
  color:var(--md-on-surface-variant);font-size:14px;letter-spacing:.01em}
.nav-links a:hover,.nav-links a.active{color:var(--md-on-secondary-container)}
.nav-links:not([data-ready]) a.active{background:var(--md-secondary-container);box-shadow:none}
.nav-links a i{display:none}
.nav-links a .ic{width:18px;height:18px}
.nav-menu-toggle{width:48px;height:48px;border-radius:50%;border:0;background:transparent;box-shadow:none;position:relative;overflow:hidden}
.nav-menu-toggle:hover{background:rgba(26,22,17,.08)}
.nav-menu-toggle svg{width:24px;height:24px}

/* Navigation drawer: from the start edge, rounded on its open side */
.drawer-scrim{background:rgba(16,14,10,.4);backdrop-filter:none}
.drawer-panel{left:0;right:auto;transform:translateX(-102%);width:min(360px,86vw);padding:12px;
  background:var(--md-surface-low);border-radius:0 var(--sh-xl) var(--sh-xl) 0;box-shadow:var(--el-4);
  transition:transform .55s var(--m-spring)}
.drawer-head{padding:8px 8px 8px 12px;margin-bottom:8px}
.drawer-head .brand-text{font-size:17px}
.drawer-close{width:48px;height:48px;border-radius:50%;border:0;background:transparent}
.drawer-close:hover{background:rgba(26,22,17,.08)}
.drawer-links{gap:2px}
.drawer-links li{transform:translateX(-14px)}
.drawer-links a{height:56px;padding:0 20px 0 16px;border-radius:var(--sh-full);font-weight:700;color:var(--md-on-surface-variant);
  gap:14px;justify-content:flex-start;position:relative;overflow:hidden}
.drawer-links a > .ic:first-child{width:22px;height:22px}
.drawer-links a > svg:last-child{margin-left:auto;color:var(--md-outline)}
.drawer-links a:hover{background:rgba(26,22,17,.06);padding-left:16px}
.drawer-links a.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);padding-left:16px}
.drawer-links a i{display:none}
.drawer-links .ic.f,.drawer-links a.active .ic.o{display:none}
.drawer-links a.active .ic.f{display:block}
.drawer-foot{padding:16px 4px 8px}

/* Navigation bar (phones): five destinations, a pill indicator behind the selected icon */
.m3-navbar{position:fixed;left:0;right:0;bottom:0;z-index:140;display:none;grid-template-columns:repeat(5,1fr);
  height:calc(80px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);
  background:var(--md-surface-container);transition:transform .35s var(--m-emph)}
.m3-navbar a,.m3-navbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 0 16px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--md-on-surface-variant);
  -webkit-tap-highlight-color:transparent;position:relative}
.m3-navbar .ind{position:relative;width:64px;height:32px;border-radius:var(--sh-lg);display:grid;place-items:center;overflow:hidden;
  transition:background-color .25s var(--m-effects)}
.m3-navbar .ind::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--md-secondary-container);
  transform:scaleX(.4);opacity:0;transition:transform .45s var(--m-spring),opacity .2s var(--m-effects)}
.m3-navbar .ic{position:relative;width:24px;height:24px}
.m3-navbar .ic.f{display:none}
.m3-navbar .active{color:var(--md-on-surface)}
.m3-navbar .active .ind::before{transform:none;opacity:1}
.m3-navbar .active .ic.o{display:none}
.m3-navbar .active .ic.f{display:block;color:var(--md-on-secondary-container)}
.m3-navbar a:not(.active):hover .ind{background:rgba(26,22,17,.08)}
body.ui-locked .m3-navbar,html.wc-lock .m3-navbar{transform:translateY(110%)}

@media(max-width:760px){
  .m3-navbar{display:grid}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .nav-menu-toggle{display:none!important}
  .nav-cta .btn{height:40px;padding:0 16px}
  /* the chat button sits above the bar */
  .wc-fab{bottom:calc(96px + env(safe-area-inset-bottom))!important}
}

/* ============================================================
   FOOTER: burnt black, rounded on top
   ============================================================ */
.footer{background:var(--md-inverse-surface);color:var(--md-inverse-variant);border-radius:var(--sh-2xl) var(--sh-2xl) 0 0;
  margin-top:8px}
.footer::before{display:none}
.footer .brand-mark{background:transparent}
.footer-about{color:var(--md-inverse-variant)}
.footer h5{font-size:14px;letter-spacing:.01em;text-transform:none;color:var(--md-bright)}
.footer ul a,.footer-contact li{color:var(--md-inverse-variant)}
.footer ul a:hover{color:var(--md-inverse-on-surface);transform:none}
.footer-socials a{width:44px;height:44px;border-radius:50%;background:var(--md-inverse-surface-2)}
.footer-socials a:hover{background:var(--md-bright);color:#1A1611;transform:none}
.footer-contact svg{opacity:1;color:var(--md-bright)}
.footer-bottom{border-top:1px solid rgba(246,239,230,.10)}
.footer-bottom a[style*="gold"]{color:var(--md-bright)!important}

/* ============================================================
   HERO: big type, expressive shapes behind it
   ============================================================ */
.hero{background:var(--md-surface);isolation:isolate}
.hero>*{z-index:1}
.hero::before{opacity:1;background:var(--md-primary-container);background-image:none;
  -webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;
  inset:auto;width:min(520px,62vw);aspect-ratio:1;top:-150px;right:-140px;
  animation:shapeSpin 60s linear infinite;z-index:0}
.hero::after{z-index:0;content:"";position:absolute;pointer-events:none;width:min(300px,40vw);aspect-ratio:1;left:-90px;bottom:60px;
  background:var(--md-tertiary-container);opacity:.85;
  -webkit-mask:var(--shape-clover) center/contain no-repeat;mask:var(--shape-clover) center/contain no-repeat;
  animation:shapeSpin 80s linear infinite reverse}
@keyframes shapeSpin{to{transform:rotate(360deg)}}
.hero-trust{border-top:0;padding-top:0;margin-top:26px;gap:8px}
.htb{height:36px;padding:0 14px 0 10px;border-radius:var(--sh-sm);background:var(--md-surface-lowest);
  box-shadow:inset 0 0 0 1px var(--md-outline-variant);color:var(--md-on-surface);font-size:13.5px}
.htb svg{width:18px;height:18px;color:var(--md-primary)}

/* Stats: connected tiles, the outer corners large and the inner ones small */
.stat-band{background:transparent;border:0;box-shadow:none;padding:0;gap:4px}
.stat{background:var(--md-surface-lowest);padding:26px 16px;border-radius:var(--sh-sm)}
.stat:first-child{border-radius:var(--sh-xl) var(--sh-sm) var(--sh-sm) var(--sh-xl)}
.stat:last-child{border-radius:var(--sh-sm) var(--sh-xl) var(--sh-xl) var(--sh-sm)}
.stat + .stat::before{display:none}
.stat .n .acc{color:var(--md-primary)}
.stat .lbl{color:var(--md-on-surface-variant)}

/* ============================================================
   CARDS: filled, 28px. Static cards have no hover at all (H14, C21); cards that are links (a.card, .cat-card,
   .store-row, gallery tiles) get the 8% state layer, on pointer devices only (A47).
   ============================================================ */
.card,.offer,.loc-card,.tcard,.price-card,.panel,.form-card,.cat-card{border:0;box-shadow:none}
.card{background:var(--md-surface-lowest);border-radius:var(--sh-xl);padding:28px 26px}
.card:hover{transform:none;box-shadow:none}
.card:not(.step)::after{display:none}
.card::before{background:var(--md-on-surface);opacity:0;transition:opacity .25s var(--m-effects)}
.card:hover::before{opacity:0}
@media(hover:hover) and (pointer:fine){
  a.card:hover::before,button.card:hover::before,.card.is-interactive:hover::before{opacity:var(--md-state-hover)}
}
.card h3,.card h4{font-weight:500}
.card p{color:var(--md-on-surface-variant)}
a.card:active{border-radius:var(--sh-lgi);transition:border-radius .2s var(--m-spring-fast)}
.card.step::after{color:var(--md-surface-high)}

/* Icons sit in an expressive shape, each tint its own */
.card-row .card-ic{flex:0 0 56px;width:56px;height:56px}
.card-ic{width:56px;height:56px;border-radius:0;box-shadow:none;background:var(--md-inverse-surface);color:var(--md-bright);
  -webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;
  transition:transform .7s var(--m-spring)}
.card:hover .card-ic,.card:hover .card-ic svg{transform:none}
@media(hover:hover) and (pointer:fine){
  a.card:hover .card-ic{transform:rotate(30deg)}
  a.card:hover .card-ic svg{transform:rotate(-30deg)}
}
.card-ic svg{width:26px;height:26px;transition:transform .7s var(--m-spring)}
.card-ic.terra{background:var(--md-primary-container);color:var(--md-on-primary-container);
  -webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.card-ic.gold{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);
  -webkit-mask-image:var(--shape-clover);mask-image:var(--shape-clover)}
.card-ic.forest{background:#CFEBD8;color:#0E3B23;-webkit-mask-image:var(--shape-cookie4);mask-image:var(--shape-cookie4)}
.card-ic.track{background:#D7E4F6;color:#0E3A5E;-webkit-mask-image:var(--shape-flower);mask-image:var(--shape-flower)}
.card-ic.muted{background:var(--md-surface-high);color:var(--md-on-surface-variant);
  -webkit-mask-image:var(--shape-scallop);mask-image:var(--shape-scallop)}

/* Offer, location, testimonial, panels */
.offer{background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.offer:hover,.loc-card:hover{transform:none;box-shadow:none}
.offer-price{border-top:1px solid var(--md-outline-variant)}
.loc-card{background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.loc-flag{border:0;background:var(--md-surface-high)}
.loc-card:hover .loc-flag{transform:none;background:var(--md-surface-high)}
.loc-row svg{color:var(--md-primary)}
.panel{background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.panel-tint{background:var(--md-surface-high);border:0;border-radius:var(--sh-xl)}
.frame{border:0;border-radius:var(--sh-xli);box-shadow:none}
.frame::after{border-radius:calc(var(--sh-xli) - 10px)}

.tcard{background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.tcard:hover{transform:none;box-shadow:none}
.tcard::before{color:var(--md-primary-container)}
.tcard .stars{color:var(--md-bright)}
.tcard .who{border-top:1px solid var(--md-outline-variant)}
.tcard .av{border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container)}
.reviews-cta{border:0;border-radius:var(--sh-xli);background:var(--md-surface-lowest);box-shadow:none}
.reviews-cta::before{display:none}
.reviews-cta .g-stars{color:var(--md-bright)}

/* Chips and badges */
/* .badge is a static label: a tonal pill, not the outlined (tappable-looking) chip */
.badge{height:28px;padding:0 12px;border-radius:var(--sh-full);border:0;box-shadow:none;background:var(--md-surface-high);color:var(--md-on-surface);font-weight:600}
.badge.tint{background:var(--md-primary-container);box-shadow:none;color:var(--md-on-primary-container)}

/* Tabs: a tonal track with a sliding selected pill */
.tabs{background:var(--md-surface-high);border:0;padding:4px}
.tabs::before{background:var(--md-surface-lowest);box-shadow:var(--el-1)}
.tabs button{height:40px;padding:0 20px;font-weight:600;color:var(--md-on-surface-variant)}
.tabs button.active{color:var(--md-on-surface)}

/* Step rail: numbers in a cookie shape on a soft line */
.rail-step{border-bottom:0;padding:22px 0}
.rail-num{border:0;border-radius:0;background:var(--md-primary-container);color:var(--md-on-primary-container);font-weight:600;
  -webkit-mask:var(--shape-cookie6) center/contain no-repeat;mask:var(--shape-cookie6) center/contain no-repeat;
  transition:transform .7s var(--m-spring),background-color .25s var(--m-effects),color .25s var(--m-effects)}
.rail-step:hover .rail-num{background:var(--md-primary-container);color:var(--md-on-primary-container);transform:none}
.rail-step:hover .rail-num::before{transform:none}
.rail-step::before{width:2px;background:var(--md-outline-variant);border-radius:2px;left:25px}

/* Lists */
.ticklist li .ic.no{background:#FCDAD6;color:#8C1D18}
.ticklist li .ic.yes{background:#CFEBD8;color:#0E3B23}

/* ============================================================
   PRICING
   ============================================================ */
.price-card{background:var(--md-surface-lowest);border-radius:var(--sh-xl);padding:32px 28px}
.price-card:hover{transform:none;box-shadow:none}
.price-card.featured{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:none}
@media(min-width:981px){.price-card.featured,.price-card.featured:hover{transform:none}}
.price-card.featured::before{background:var(--md-inverse-surface-2);opacity:1;inset:auto;width:220px;aspect-ratio:1;right:-60px;top:-70px;
  -webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat}
.price-card.featured p,.price-card.featured li,.price-card.featured .sub{color:var(--md-inverse-variant)}
.price-tag{position:static;top:auto;right:auto;align-self:flex-start;display:inline-flex;margin:0 0 14px;border-radius:var(--sh-full);background:var(--md-bright);color:#1A1611;
  font-size:12px;letter-spacing:.01em;text-transform:none;padding:6px 12px;box-shadow:none}
.price-card li svg{color:#2A6E49}
.price-card.featured li svg{color:var(--md-bright)}
.price-card li[style]{border-bottom-color:var(--md-outline-variant)!important}
.skel-line{border-radius:var(--sh-full);background:var(--md-surface-high)!important;animation:m3-pulse 1.6s var(--m3-standard) infinite!important}

/* ============================================================
   FAQ: an expressive segmented list (2px gaps, 16px outer and 4px inner corners). The open question detaches
   and rounds out, and so do the neighbours facing the gap (H28). Questions in title-medium. The chevron sits in
   a 40px round container that turns over on the spatial spring (H1).
   ============================================================ */
.faq-list{gap:2px}
.faq-item{border:0;border-radius:4px;background:var(--md-surface-lowest);
  transition:border-radius var(--m3-motion-default-spatial),margin var(--m3-motion-default-spatial)}
.faq-item:first-child{border-top-left-radius:16px;border-top-right-radius:16px}
.faq-item:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.faq-item:has(+ .faq-item[open]){border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.faq-item[open] + .faq-item{border-top-left-radius:16px;border-top-right-radius:16px}
.faq-item:hover{border-color:transparent}
.faq-item[open]{border-radius:16px;margin-block:8px;box-shadow:none}
.faq-item summary{min-height:64px;padding:12px 12px 12px 20px;font-size:16px;line-height:24px;font-weight:600;
  color:var(--md-on-surface);border-radius:inherit;transition:background-color 15ms linear}
.faq-item summary:hover{color:var(--md-on-surface)}
@media(hover:hover) and (pointer:fine){.faq-item summary:hover{background-color:rgba(26,22,17,.08)}}
.faq-item summary>svg:last-child,.faq-item summary .chev{width:40px;height:40px;flex:0 0 40px;padding:8px;border-radius:50%;
  background:var(--md-surface-high);color:var(--md-on-surface);
  transition:transform var(--m3-motion-default-spatial),background-color .2s var(--m-effects),color .2s var(--m-effects)}
.faq-item[open] summary>svg:last-child,.faq-item[open] summary .chev{transform:rotate(180deg);background:var(--md-primary-container);color:var(--md-on-primary-container)}
.faq-item .faq-a{padding:0 20px 20px;font-size:14px;line-height:20px;color:var(--md-on-surface-variant)}

/* ============================================================
   CTA band, page head, breadcrumb, guarantee
   ============================================================ */
/* The decorative shapes paint behind the content (H2, C1): solid tonal shapes, not alpha blobs (H22, C7). */
.cta-band{background:var(--md-inverse-surface);border-radius:var(--sh-2xl);box-shadow:none;isolation:isolate}
.cta-band::before{z-index:-1;background:var(--md-inverse-surface-2);opacity:1;inset:auto;width:360px;aspect-ratio:1;right:-90px;top:-120px;
  -webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;
  animation:shapeSpin 70s linear infinite}
.cta-band::after{z-index:-1;content:"";position:absolute;pointer-events:none;width:120px;aspect-ratio:1;left:auto;right:9%;bottom:-48px;
  background:var(--md-bright);opacity:1;-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;
  animation:shapeSpin 90s linear infinite reverse}
.cta-band p{color:var(--md-inverse-variant)}
/* One filled primary (the logo orange) and a tonal WhatsApp action, a connected pair on wider screens (C9). */
.cta-band .btn-wa,.cta-band .btn-wa:hover{background:var(--md-inverse-surface-2);color:var(--md-inverse-on-surface)}
.cta-band .btn-wa svg{color:#25D366}
@media(min-width:621px){
  .cta-band .cta-actions{gap:4px}
  .cta-band .cta-actions>.btn:first-child:not(:last-child){border-radius:var(--sh-full) var(--sh-sm) var(--sh-sm) var(--sh-full)}
  .cta-band .cta-actions>.btn:last-child:not(:first-child){border-radius:var(--sh-sm) var(--sh-full) var(--sh-full) var(--sh-sm)}
}

/* Page head: a large rounded tonal container, start-aligned display title, whole expressive shapes inside it
   (C15). Start-aligned at every width (C34, X57). .page-head.compact for utility pages (A31). */
.page-head{margin:8px clamp(8px,1.4vw,20px) 0;border-radius:var(--sh-2xl);background:var(--md-surface-container);
  text-align:left;padding:clamp(40px,6vw,80px) 0;isolation:isolate}
.page-head>*{z-index:1}
.page-head .eyebrow{justify-content:flex-start;margin-bottom:16px}
.page-head p,.page-head .lede{margin-inline:0!important;max-width:60ch}
.page-head .cta-actions,.page-head .hero-ctas{justify-content:flex-start!important}
.page-head::before{content:"";position:absolute;pointer-events:none;z-index:0;width:min(260px,30vw);aspect-ratio:1;right:5%;top:50%;translate:0 -50%;
  background:var(--md-primary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;
  animation:shapeSpin 70s linear infinite}
.page-head::after{display:block;content:"";position:absolute;pointer-events:none;z-index:0;width:110px;height:auto;aspect-ratio:1;
  left:auto;top:auto;right:calc(5% + min(210px,24vw));bottom:28px;transform:none;
  background:var(--md-tertiary-container);-webkit-mask:var(--shape-clover) center/contain no-repeat;mask:var(--shape-clover) center/contain no-repeat;
  animation:shapeSpin 80s linear infinite reverse}
.page-head.compact{padding:clamp(24px,4vw,48px) 0 clamp(20px,3vw,32px)}
.page-head.compact .page-title{font-size:clamp(32px,4vw,45px);line-height:1.15}
.page-head.compact .eyebrow{display:none}
.page-head.compact::before{width:min(160px,22vw)}
.page-head.compact::after{display:none}
.page-head.compact + section{padding-top:16px}

/* Breadcrumb: label-large, links with a full-round state layer (X56) */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font:500 14px/20px var(--font-plain);letter-spacing:0;
  color:var(--md-on-surface-variant);margin-bottom:12px}
.breadcrumb a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;margin-inline:-10px -6px;border-radius:var(--sh-full);
  color:var(--md-on-surface);transition:background-color 15ms linear}
.breadcrumb a:hover{background:rgba(26,22,17,.08);color:var(--md-on-surface)}
@media(max-width:760px){.breadcrumb a{min-height:48px}}

.guarantee-panel{border:0;background:var(--md-surface-high);border-radius:var(--sh-2xl)}

/* ============================================================
   CATEGORIES AND STORE LIST
   ============================================================ */
.cat-card{background:var(--md-surface-lowest);border-radius:var(--sh-xl);padding:26px 16px 22px;position:relative;
  transition:border-radius .45s var(--m-spring-fast),box-shadow .2s}
.cat-card:hover{transform:none;box-shadow:none}
.cat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--md-on-surface);opacity:0;pointer-events:none;transition:opacity 15ms linear}
.cat-card:active{transform:none;border-radius:var(--sh-lg)}
.cat-ic{width:60px;height:60px;border-radius:0;background:var(--md-primary-container);color:var(--md-on-primary-container);
  -webkit-mask:var(--shape-cookie6) center/contain no-repeat;mask:var(--shape-cookie6) center/contain no-repeat;
  transition:transform .7s var(--m-spring)}
.cat-ic svg{width:26px;height:26px;transition:transform .7s var(--m-spring)}
.cat-card:hover .cat-ic,.cat-card:hover .cat-ic svg{transform:none}
@media(hover:hover) and (pointer:fine){
  .cat-card:hover::before{opacity:var(--md-state-hover)}
  .cat-card:hover .cat-ic{transform:rotate(60deg)}
  .cat-card:hover .cat-ic svg{transform:rotate(-60deg)}
}
.cat-card:nth-child(4n+2) .cat-ic{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask-image:var(--shape-clover);mask-image:var(--shape-clover)}
.cat-card:nth-child(4n+3) .cat-ic{background:#D7E4F6;color:#0E3A5E;-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.cat-card:nth-child(4n+4) .cat-ic{background:#CFEBD8;color:#0E3B23;-webkit-mask-image:var(--shape-cookie4);mask-image:var(--shape-cookie4)}
.cat-name{font-size:15px;font-weight:600}
.cat-count{color:var(--md-on-surface-variant)}

.store-list{gap:3px}
.store-row{border:0;border-radius:var(--sh-sm);background:var(--md-surface-lowest);padding:12px 14px}
.store-row:first-child{border-top-left-radius:var(--sh-lgi);border-top-right-radius:var(--sh-lgi)}
.store-row:last-child{border-bottom-left-radius:var(--sh-lgi);border-bottom-right-radius:var(--sh-lgi)}
.store-row:hover{background:var(--md-surface-lowest);transform:none;box-shadow:none}
@media(hover:hover) and (pointer:fine){.store-row:hover{background:color-mix(in srgb,var(--md-surface-lowest) 92%,var(--md-on-surface))}}
.store-row-ic{border-radius:50%;background-color:var(--md-primary-container);color:var(--md-on-primary-container)}
.store-row-go{background:var(--md-surface-high)}
.store-row:hover .store-row-go{background:var(--md-primary)}

/* Gallery */
.strip-item{border:0;border-radius:var(--sh-xl)}
.strip-item:hover,.gal-item:hover{transform:none;box-shadow:var(--el-2)}
.gal-item{border:0;border-radius:var(--sh-lgi)}
.lb-btn{border:0;background:rgba(246,239,230,.14)}
.lb-count{border:0;background:rgba(246,239,230,.14)}

/* Contact */
.form-card{background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.contact-method{border-bottom:1px solid var(--md-outline-variant)}
.cm-ic{border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container)}
.cm-t{letter-spacing:.02em;text-transform:none;font-size:12.5px;color:var(--md-on-surface-variant)}

/* ============================================================
   DIALOGS: the order dialog and the store list (.modal > .modal-card)
   Desktop: a basic dialog (surface-container-high, 28px, level 3, 32% scrim). The headline, close button and
   tabs stay put; only the body scrolls, and the submit button sticks to the bottom of it (X14).
   Phone: a full-screen dialog, the close button leading the title, the submit pinned to the bottom (X15).
   ============================================================ */
.modal{align-items:center;overflow:hidden}
.modal-scrim{background:var(--md-scrim);backdrop-filter:none}
.modal-card{background:var(--md-surface-high);border-radius:var(--sh-xl);box-shadow:var(--el-3);
  max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:dialogIn .5s var(--m-spring)}
@keyframes dialogIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.modal-head,.modal-tabs{flex:0 0 auto}
.modal-head{padding:24px 72px 0 24px}
.modal-head h3{font-size:24px;line-height:32px}
.modal-head p{color:var(--md-on-surface-variant)}
.modal-close{width:48px;height:48px;border-radius:50%;background:transparent;top:16px;right:16px}
.modal-close svg{width:24px;height:24px}
.modal-close:hover{background:rgba(26,22,17,.08)}
.modal-close:active{transform:none}
/* the two order kinds as a segmented choice (X43: 40px, label-large) */
.modal-tabs{gap:0;padding:20px 24px 0}
.modal-tabs button{height:40px;padding:0 12px;border:1px solid var(--md-outline);border-radius:0;font-weight:600;font-size:14px;
  color:var(--md-on-surface);background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.modal-tabs button:first-child{border-radius:var(--sh-full) 0 0 var(--sh-full)}
.modal-tabs button:last-child{border-radius:0 var(--sh-full) var(--sh-full) 0;margin-left:-1px}
.modal-tabs button:hover{color:var(--md-on-surface);background:rgba(26,22,17,.08)}
.modal-tabs button.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:var(--md-outline)}
.modal-tabs button.active::before{content:"";width:14px;height:8px;border:solid currentColor;border-width:0 0 2px 2px;
  transform:translateY(-2px) rotate(-45deg)}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 24px}
.modal-body .btn[type=submit]{position:sticky;bottom:12px;z-index:2;box-shadow:0 0 0 12px var(--md-surface-high)}
.modal-info{background:var(--md-surface-lowest);border:0;border-radius:var(--sh-lg);color:var(--md-on-surface-variant)}
.modal-or a{color:#1A7F43;display:inline-flex;align-items:center;min-height:48px}
.modal-note,.form-note{border-radius:var(--sh-md)}
@media(max-width:760px){.modal-tabs button{height:48px}}
@media(max-width:620px){
  .modal{padding:0;align-items:stretch}
  .modal-card{width:100%;height:100dvh;max-height:none;margin:0;border-radius:0;background:var(--md-surface);
    animation:sheetIn .4s var(--m3-emphasized-decel)}
  .modal-card::before{display:none}
  .modal-head{display:grid;grid-template-columns:48px 1fr;column-gap:4px;align-items:center;padding:8px 16px 0 8px}
  .modal-close{position:static;order:-1}
  .modal-head h3{font-size:22px;line-height:28px}
  .modal-head p{grid-column:1 / -1;padding-left:8px}
  .modal-tabs{padding:16px 16px 0}
  .modal-body{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .modal-body .btn[type=submit]{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
    width:auto!important;z-index:3;box-shadow:var(--el-2)}
}
@keyframes sheetIn{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}

/* ============================================================
   TEXT FIELDS: the M3 filled text field on every form wrapper (.mfield .field .fld .cc-field .cr-field, and the
   dashboard profile form): 56px, surface-container-highest, 4px top corners, a 1px bottom active indicator that
   turns 2px primary on focus, 16px text (no zoom on iPhone), primary caret.
   Where the label comes first and the input/textarea/select right after it (the site's markup), the label sits
   INSIDE the field at the top in 12/16 and turns primary on focus (X16, A7, A23, H41). If the input has
   placeholder=" " the label rests at 16px until the field is focused or filled.
   Supporting text: <p class="fld-hint">; error: .is-error on the wrapper or aria-invalid="true" on the input,
   with <p class="fld-error">. Textareas grow with their content and have no resize grip (X42, A54).
   ============================================================ */
:is(.mfield,.field,.fld,.cc-field,.cr-field){position:relative}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) :is(input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden])),textarea,select),
html .profile-form input{
  box-sizing:border-box;width:100%;min-height:56px;margin:0;padding:16px;border:0;border-radius:4px 4px 0 0;
  background:var(--md-surface-highest);box-shadow:inset 0 -1px 0 var(--md-on-surface-variant);
  color:var(--md-on-surface);font:400 16px/24px var(--font-plain);letter-spacing:0;caret-color:var(--md-primary);outline:none;
  transition:box-shadow .15s var(--m-effects),background-color .15s var(--m-effects)}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) :is(input,textarea,select):hover,html .profile-form input:hover{
  background:color-mix(in srgb,var(--md-surface-highest) 92%,var(--md-on-surface));box-shadow:inset 0 -1px 0 var(--md-on-surface)}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) :is(input,textarea,select):focus,html .profile-form input:focus{
  background:var(--md-surface-highest);box-shadow:inset 0 -2px 0 var(--md-primary);border:0;outline:none}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) :is(input,textarea)::placeholder,html .profile-form input::placeholder{color:var(--md-on-surface-variant);opacity:.85}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) textarea{min-height:112px;max-height:240px;resize:none;field-sizing:content}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E453B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 8.5l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:22px}
html .fld .otp-input{font:800 24px/32px var(--font-plain);letter-spacing:.35em;text-align:center}
/* the label outside (any markup the inside label does not fit) */
html :is(.mfield,.field,.fld,.cc-field,.cr-field) > label:first-child,html .profile-form .fld > label:first-child{
  display:block;margin:0 0 6px;font:600 14px/20px var(--font-plain);letter-spacing:.01em;text-transform:none;color:var(--md-on-surface-variant)}
/* the label inside the field */
html :is(.mfield,.field,.fld,.cc-field,.cr-field):has(> label:first-child + :is(input:where(:not([type=checkbox],[type=radio],[type=file],[type=hidden])),textarea,select)) > label:first-child{
  position:absolute;left:16px;right:16px;top:8px;z-index:1;margin:0;font:400 12px/16px var(--font-plain);letter-spacing:.01em;
  color:var(--md-on-surface-variant);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:top .2s var(--m3-standard),font-size .2s var(--m3-standard),line-height .2s var(--m3-standard),color .15s linear}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) > label:first-child + :is(input,textarea,select){padding-top:24px;padding-bottom:8px}
html :is(.mfield,.field,.fld,.cc-field,.cr-field):has(> label:first-child + :is(input,textarea,select):focus) > label:first-child{color:var(--md-primary-text)}
html :is(.mfield,.field,.fld,.cc-field,.cr-field):has(> label:first-child + :is(input,textarea)[placeholder=" "]:placeholder-shown:not(:focus)) > label:first-child{
  top:16px;font-size:16px;line-height:24px}
html :is(.mfield,.field,.fld,.cc-field,.cr-field) > label:first-child :is(span,small){color:inherit!important;font-weight:400!important}
/* supporting and error text (body-small, 16px in from the field edge) */
.fld-hint,.fld-support,.fld-error{display:block;margin:4px 16px 0;font:400 12px/16px var(--font-plain);color:var(--md-on-surface-variant)}
.fld-error{color:var(--md-error)}
html :is(.mfield,.field,.fld,.cc-field,.cr-field).is-error :is(input,textarea,select),
html :is(.mfield,.field,.fld,.cc-field,.cr-field) [aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--md-error)}
html :is(.mfield,.field,.fld,.cc-field,.cr-field).is-error > label:first-child{color:var(--md-error)!important}
.form-card :is(.mfield,.field,.fld) :is(input,textarea,select){background-color:var(--md-surface-highest)}
.news-form input{border-radius:var(--sh-full);font-size:16px}
/* Inputs are 16px on phones everywhere a form lives (A24) */
html :is(.cc-row .cc-pick,.track-row input,.search-field input,.news-form input,.stmt-input-wrap input){font-size:16px}

/* ============================================================
   STATS, RAIL, SHEETS ON PHONES
   ============================================================ */
/* the "+" suffix in the plain face so it does not vanish as a hairline (C43) */
.stat .n .acc{font-family:var(--font-plain);font-weight:700;font-size:.55em;vertical-align:.55em;margin-left:2px}
.stat .lbl{font-size:14px;line-height:20px;font-weight:500}

@media(max-width:620px){
  /* compact window: 16px margins, sheets 6px from the edge, card padding 20px (C22) */
  :root{--gutter:16px}
  .bg-surface,.bg-paper-2,.bg-ink{margin-inline:6px;border-radius:var(--sh-xli)}
  .bg-surface>.wrap,.bg-paper-2>.wrap,.bg-ink>.wrap{width:calc(100% - 20px)}
  .card,.price-card,.loc-card,.panel{padding:20px}
  .cta-band{border-radius:var(--sh-xl);padding:32px 20px}
  .cta-band::before{width:240px}
  .cta-band::after{width:84px}
  section{padding-block:40px}
  .bg-surface,.bg-paper-2,.bg-ink{padding-block:32px}
  .section-head{grid-template-columns:1fr}
  .section-head>.section-head-action{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .page-head::after{display:none}
  .page-head::before{width:140px;right:-30px;top:24px;translate:none}
  .cta-band{text-align:left}
  .cta-band p{margin-inline:0}
  .cta-band .cta-actions{justify-content:flex-start}
  .rail-step::before{left:21px}
  .stat-band{gap:4px}
  .stat,.stat:first-child,.stat:last-child{border-radius:var(--sh-sm)}
  .stat:nth-child(1){border-top-left-radius:var(--sh-xl)}
  .stat:nth-child(2){border-top-right-radius:var(--sh-xl)}
  .stat:nth-last-child(2){border-bottom-left-radius:var(--sh-xl)}
  .stat:last-child{border-bottom-right-radius:var(--sh-xl)}
  .hero::before{width:300px;top:-120px;right:-130px}
  .hero::after{width:180px;left:-80px;bottom:120px}
}
@media(min-width:621px) and (max-width:980px){
  .stat,.stat:first-child,.stat:last-child{border-radius:var(--sh-lgi)}
}

/* ============================================================
   CHAT: the button is a Material FAB, the panel a 28px sheet. The chat's own <style> comes later in
   the page, so these start at html; on phones the panel stays full screen and square.
   The FAB keeps its colour on hover (8% state layer, level 3 to 4) and never moves (X1, H24). As an extended
   FAB it collapses to a 56px FAB while the page scrolls down and extends again on the way up (pixel.js puts
   .is-compact on it; X2, H33, C32). On phones it steps aside while a form field has focus.
   ============================================================ */
html .wc-fab{border-radius:var(--sh-lg);background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--el-3);height:56px;
  gap:0;padding:0 20px 0 16px;font:var(--type-title-medium);
  transition:padding .45s var(--m-spring),border-radius .45s var(--m-spring-fast),box-shadow .2s var(--m-effects),opacity .2s var(--m-effects)}
html .wc-fab svg{width:24px;height:24px}
html .wc-fab .wc-fab-label{display:block;margin-left:10px;max-width:12em;overflow:hidden;white-space:nowrap;
  transition:max-width .45s var(--m-spring),margin .45s var(--m-spring),opacity .2s var(--m-effects)}
html .wc-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
html .wc-fab:hover{background:var(--md-primary);transform:none;box-shadow:var(--el-4)}
html .wc-fab:hover::after{opacity:var(--md-state-hover)}
html .wc-fab:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
html .wc-fab:focus-visible::after,html .wc-fab:active::after{opacity:var(--md-state-press)}
html .wc-fab:active{transform:none;border-radius:var(--sh-md)}
html .wc-fab.pulse{animation:none}
html .wc-fab.is-compact{padding:0 16px}
html .wc-fab.is-compact .wc-fab-label{max-width:0;margin-left:0;opacity:0}
html .wc-fab.is-open .wc-fab-label{display:none}
@media(max-width:760px){
  html body:has(:is(main,.modal) :is(input,textarea,select):focus) .wc-fab{opacity:0;pointer-events:none}
}
html .wc-panel{border:0;border-radius:var(--sh-xl);box-shadow:var(--el-4);background:var(--md-surface-low)}
html .wc-head{border-top-left-radius:var(--sh-xl);border-top-right-radius:var(--sh-xl);background:var(--md-surface-container);border-bottom:0}
html .wc-foot{border-bottom-left-radius:var(--sh-xl);border-bottom-right-radius:var(--sh-xl);background:var(--md-surface-container)}
html .wc-msg{border-radius:var(--sh-lgi)}
html .wc-msg.them{background:var(--md-surface-lowest);border:0;border-bottom-left-radius:6px}
html .wc-msg.me{border-bottom-right-radius:6px}
@media(max-width:640px){
  html .wc-panel,html .wc-head,html .wc-foot{border-radius:0}
}

/* ============================================================
   SHAPE LIBRARY (Material shapes, rebuilt from androidx MaterialShapes.kt), as masks: --shape-<name>.
   The first seven (cookie4, cookie6, cookie9, sunny, clover, flower, scallop) are defined at the top.
   ============================================================ */
:root{
  --shape-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M95.3 31.2 L96.9 35.7 L98.1 40.4 L98.8 45.2 L99 50 L98.8 54.8 L98.1 59.5 L96.9 64.2 L95.3 68.7 L93.2 73.1 L90.7 77.2 L87.9 81.1 L84.6 84.6 L81.1 87.9 L77.2 90.7 L73.1 93.2 L68.7 95.3 L64.2 96.9 L59.5 98.1 L54.8 98.8 L50 99 L45.2 98.8 L40.4 98.1 L35.7 96.9 L31.2 95.3 L26.8 93.2 L22.7 90.7 L18.9 87.9 L15.3 84.6 L12.1 81.1 L9.2 77.2 L6.7 73.1 L4.7 68.7 L2.8 63.5 L1.6 58.2 L1 52.7 L1 47.2 L1.6 41.7 L2.8 36.4 L4.7 31.2 L6.7 26.8 L9.2 22.7 L12.1 18.9 L15.3 15.3 L18.9 12.1 L22.7 9.2 L26.8 6.7 L31.2 4.7 L36.4 2.8 L41.7 1.6 L47.2 1 L52.7 1 L58.2 1.6 L63.5 2.8 L68.7 4.7 L73.1 6.7 L77.2 9.2 L81.1 12.1 L84.6 15.3 L87.9 18.9 L90.7 22.7 L93.2 26.8 L95.3 31.2Z'/%3E%3C/svg%3E");
  --shape-square:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99 69.6 L98.6 74.2 L97.6 78.7 L95.8 82.9 L93.4 86.9 L90.4 90.4 L86.9 93.4 L82.9 95.8 L78.7 97.6 L74.2 98.6 L69.6 99 L30.4 99 L25.8 98.6 L21.3 97.6 L17.1 95.8 L13.1 93.4 L9.6 90.4 L6.6 86.9 L4.2 82.9 L2.4 78.7 L1.4 74.2 L1 69.6 L1 30.4 L1.4 25.8 L2.4 21.3 L4.2 17.1 L6.6 13.1 L9.6 9.6 L13.1 6.6 L17.1 4.2 L21.3 2.4 L25.8 1.4 L30.4 1 L69.6 1 L74.2 1.4 L78.7 2.4 L82.9 4.2 L86.9 6.6 L90.4 9.6 L93.4 13.1 L95.8 17.1 L97.6 21.3 L98.6 25.8 L99 30.4Z'/%3E%3C/svg%3E");
  --shape-slanted:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M93.4 79.3 L92.8 82.3 L91.8 85.1 L90.3 87.8 L88.4 90.1 L86.2 92.2 L83.6 93.8 L80.9 95 L77.9 95.7 L74.9 95.9 L19.2 95.8 L16.2 95.5 L13.2 94.7 L10.4 93.5 L7.9 91.8 L5.7 89.7 L3.8 87.3 L2.4 84.6 L1.5 81.7 L1 78.7 L1.1 75.6 L6.6 20.7 L7.2 17.7 L8.2 14.9 L9.7 12.2 L11.6 9.9 L13.8 7.8 L16.4 6.2 L19.1 5 L22.1 4.3 L25.1 4.1 L80.8 4.2 L83.8 4.5 L86.8 5.3 L89.6 6.5 L92.1 8.2 L94.3 10.3 L96.2 12.7 L97.6 15.4 L98.5 18.3 L99 21.3 L98.9 24.4Z'/%3E%3C/svg%3E");
  --shape-arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M1 50 L1.6 42.3 L3.4 34.9 L6.3 27.8 L10.4 21.2 L15.4 15.4 L21.2 10.4 L27.8 6.3 L34.9 3.4 L42.3 1.6 L50 1 L57.7 1.6 L65.1 3.4 L72.2 6.3 L78.8 10.4 L84.6 15.4 L89.6 21.2 L93.7 27.8 L96.6 34.9 L98.4 42.3 L99 50 L99 85.1 L98.8 87.5 L98.2 89.9 L97.1 92.1 L95.8 94 L94 95.8 L92.1 97.1 L89.9 98.2 L87.5 98.8 L85.1 99 L14.9 99 L12.5 98.8 L10.1 98.2 L7.9 97.1 L6 95.8 L4.2 94 L2.9 92.1 L1.8 89.9 L1.2 87.5 L1 85.1Z'/%3E%3C/svg%3E");
  --shape-fan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99 84.1 L98.9 86.4 L98.4 88.7 L97.5 90.8 L96.4 92.8 L94.9 94.6 L93.2 96.1 L91.2 97.3 L89.1 98.2 L86.8 98.8 L84.5 99 L15.8 99 L13.5 98.8 L11.2 98.2 L9.1 97.4 L7.1 96.1 L5.3 94.6 L3.8 92.9 L2.6 90.9 L1.7 88.7 L1.2 86.5 L1 84.2 L1 15.5 L1.2 13.2 L1.7 11 L2.6 8.9 L3.9 6.9 L5.4 5.2 L7.1 3.7 L9.1 2.5 L11.3 1.7 L13.5 1.2 L15.8 1 L22 1.2 L35.2 2.6 L48 6.2 L60 12 L70.8 19.6 L80.2 29 L87.9 39.8 L93.7 51.8 L97.4 64.6 L98.8 77.8Z'/%3E%3C/svg%3E");
  --shape-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M56.8 89.8 L50 89 L43.3 89.7 L25.5 93.6 L22.2 94.1 L18.9 94 L15.6 93.3 L12.5 92.1 L9.6 90.5 L7 88.3 L4.8 85.8 L3.1 82.9 L1.9 79.8 L1.2 76.5 L1 73.2 L1.4 69.9 L2.3 66.6 L3.8 63.6 L31.9 16 L33.9 13.3 L36.2 10.9 L38.9 8.9 L41.8 7.4 L45 6.3 L48.3 5.8 L51.6 5.8 L54.9 6.3 L58.1 7.3 L61.1 8.9 L63.8 10.8 L66.1 13.2 L68 16 L96.1 63.1 L97.6 66.2 L98.6 69.5 L99 72.9 L98.8 76.4 L98.1 79.7 L96.8 82.9 L95 85.8 L92.8 88.4 L90.2 90.6 L87.2 92.3 L84 93.5 L80.6 94.2 L77.2 94.2 L73.8 93.7Z'/%3E%3C/svg%3E");
  --shape-semicircle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99 70.4 L98.9 72 L98.5 73.6 L97.9 75.1 L97.1 76.4 L96 77.6 L94.8 78.7 L93.4 79.5 L91.9 80.1 L90.4 80.5 L88.8 80.6 L11.2 80.6 L9.6 80.5 L8.1 80.1 L6.6 79.5 L5.2 78.7 L4 77.6 L2.9 76.4 L2.1 75.1 L1.5 73.6 L1.1 72 L1 68.4 L1.6 60.7 L3.4 53.2 L6.3 46.1 L10.4 39.6 L15.4 33.7 L21.2 28.7 L27.8 24.7 L34.9 21.8 L42.3 20 L50 19.4 L57.7 20 L65.1 21.8 L72.2 24.7 L78.8 28.7 L84.6 33.7 L89.6 39.6 L93.7 46.1 L96.6 53.2 L98.4 60.7 L99 68.4Z'/%3E%3C/svg%3E");
  --shape-oval:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M78 1.8 L81.8 2.8 L85.3 4.4 L88.5 6.3 L91.3 8.7 L93.7 11.5 L95.6 14.7 L97.2 18.2 L98.2 22 L98.9 26 L99 30.4 L98.7 34.9 L97.9 39.5 L96.6 44.2 L94.9 49 L92.8 53.8 L90.2 58.6 L87.3 63.3 L84 67.9 L80.3 72.2 L76.4 76.4 L72.2 80.3 L67.9 84 L63.3 87.3 L58.6 90.2 L53.8 92.8 L49 94.9 L44.2 96.6 L39.5 97.9 L34.9 98.7 L30.4 99 L26 98.9 L22 98.2 L17.6 97 L13.7 95.1 L10.3 92.7 L7.3 89.7 L4.9 86.3 L3 82.4 L1.8 78 L1.1 74 L1 69.6 L1.3 65.1 L2.1 60.5 L3.4 55.8 L5.1 51 L7.2 46.2 L9.8 41.4 L13.2 36 L17 30.9 L21.3 25.9 L25.9 21.3 L30.9 17 L36 13.2 L41.4 9.8 L46.2 7.2 L51 5.1 L55.8 3.4 L60.5 2.1 L65.1 1.3 L69.6 1 L74 1.1 L78 1.8Z'/%3E%3C/svg%3E");
  --shape-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M61.4 1.4 L68.4 2.8 L75 5.3 L81.1 8.9 L86.6 13.4 L91.1 18.9 L94.7 25 L97.2 31.6 L98.6 38.6 L99 43 L98.1 51.3 L95.7 59.3 L91.7 66.7 L86.4 73.2 L73.2 86.4 L66.7 91.7 L59.3 95.7 L51.3 98.1 L43 99 L38.6 98.6 L31.6 97.2 L25 94.7 L18.9 91.1 L13.4 86.6 L8.9 81.1 L5.3 75 L2.8 68.4 L1.4 61.4 L1 57 L1.9 48.7 L4.3 40.7 L8.3 33.3 L13.6 26.8 L26.8 13.6 L33.3 8.3 L40.7 4.3 L48.7 1.9 L57 1Z'/%3E%3C/svg%3E");
  --shape-triangle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38.2 12.5 L39.4 10.7 L41 9.1 L42.7 7.8 L44.7 6.8 L46.7 6.1 L48.9 5.8 L51.1 5.8 L53.3 6.1 L55.3 6.8 L57.3 7.8 L59 9.1 L60.6 10.7 L61.8 12.5 L97.2 73.8 L98.1 75.8 L98.7 77.9 L99 80.1 L98.9 82.3 L98.5 84.4 L97.7 86.5 L96.6 88.4 L95.2 90.1 L93.6 91.5 L91.7 92.7 L89.7 93.5 L87.6 94.1 L85.4 94.2 L14.6 94.2 L12.4 94.1 L10.3 93.5 L8.3 92.7 L6.4 91.5 L4.8 90.1 L3.4 88.4 L2.3 86.5 L1.5 84.4 L1.1 82.3 L1 80.1 L1.3 77.9 L1.9 75.8 L2.8 73.8Z'/%3E%3C/svg%3E");
  --shape-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M61.7 93.3 L60.1 95.1 L58.1 96.6 L56 97.8 L53.7 98.6 L51.2 99 L48.8 99 L46.3 98.6 L44 97.8 L41.9 96.6 L39.9 95.1 L38.3 93.3 L12.2 59.5 L10.8 57.4 L9.8 55 L9.2 52.6 L9 50 L9.2 47.4 L9.8 45 L10.8 42.6 L12.2 40.5 L38.3 6.7 L39.9 4.9 L41.9 3.4 L44 2.2 L46.3 1.4 L48.8 1 L51.2 1 L53.7 1.4 L56 2.2 L58.1 3.4 L60.1 4.9 L61.7 6.7 L87.8 40.5 L89.2 42.6 L90.2 45 L90.8 47.4 L91 50 L90.8 52.6 L90.2 55 L89.2 57.4 L87.8 59.5Z'/%3E%3C/svg%3E");
  --shape-clamshell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M26.9 83.4 L24.1 83.2 L21.5 82.5 L19 81.3 L16.7 79.7 L14.8 77.7 L13.3 75.5 L2.8 56.7 L1.8 54.6 L1.2 52.3 L1 50 L1.2 47.7 L1.8 45.4 L2.7 43.3 L13.2 24.6 L14.7 22.3 L16.7 20.3 L18.9 18.7 L21.4 17.5 L24.1 16.8 L26.8 16.6 L73.1 16.6 L75.9 16.8 L78.5 17.5 L81 18.7 L83.3 20.3 L85.2 22.3 L86.7 24.5 L97.2 43.3 L98.2 45.4 L98.8 47.7 L99 50 L98.8 52.3 L98.2 54.6 L97.3 56.7 L86.8 75.4 L85.3 77.7 L83.3 79.7 L81.1 81.3 L78.6 82.5 L75.9 83.2 L73.2 83.4Z'/%3E%3C/svg%3E");
  --shape-pentagon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40.3 7 L42.8 5.5 L45.6 4.4 L48.5 3.9 L51.5 3.9 L54.4 4.4 L57.2 5.5 L59.7 7 L92.2 29.9 L94.2 31.5 L95.9 33.4 L97.2 35.6 L98.2 38 L98.8 40.5 L99 43 L98.8 45.6 L98.2 48.1 L85.9 84.7 L84.8 87.5 L83.1 89.9 L81.1 92 L78.7 93.8 L76 95 L73.2 95.8 L70.2 96.1 L29.8 96.1 L26.8 95.8 L24 95 L21.3 93.8 L18.9 92 L16.9 89.9 L15.2 87.5 L14.1 84.7 L1.8 48.1 L1.2 45.6 L1 43 L1.2 40.5 L1.8 38 L2.8 35.6 L4.1 33.4 L5.8 31.5 L7.8 29.9Z'/%3E%3C/svg%3E");
  --shape-gem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M59.8 97 L55.9 98.3 L52 99 L47.9 99 L43.9 98.3 L40.1 96.9 L14.4 85.1 L11.5 83.5 L8.9 81.5 L6.7 79.1 L4.9 76.3 L3.6 73.3 L2.8 70.1 L2.5 66.9 L2.7 63.6 L6.7 35.7 L7.5 32.2 L8.9 28.9 L10.8 25.8 L13.1 23.1 L15.8 20.8 L38 4.9 L41.8 2.7 L45.9 1.4 L50.1 1 L54.4 1.5 L58.5 2.8 L62.2 4.9 L84.3 20.9 L87.1 23.2 L89.4 26 L91.3 29.1 L92.6 32.4 L93.4 35.9 L97.4 63.8 L97.5 67.1 L97.2 70.3 L96.4 73.5 L95 76.5 L93.2 79.2 L91 81.6 L88.4 83.7 L85.6 85.3Z'/%3E%3C/svg%3E");
  --shape-very-sunny:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M57.2 95 L55.5 97 L53.2 98.4 L50.7 99 L48 98.8 L45.6 97.8 L43.6 96 L38.5 87.9 L36.5 86.1 L34 85.1 L31.4 84.9 L22 87.1 L19.3 86.9 L16.9 85.9 L14.9 84.2 L13.5 81.9 L12.9 79.4 L13.1 76.7 L15.1 68.6 L14.9 66 L13.9 63.5 L12.1 61.5 L3.9 56.4 L2.2 54.4 L1.2 52 L1 49.3 L1.6 46.8 L3 44.5 L5 42.8 L12.1 38.5 L13.9 36.5 L14.9 34 L15.1 31.4 L12.9 22 L13.1 19.3 L14.1 16.9 L15.8 14.9 L18.1 13.5 L20.6 12.9 L23.3 13.1 L31.4 15.1 L34 14.9 L36.5 13.9 L38.5 12.1 L43.6 3.9 L45.6 2.2 L48 1.2 L50.7 1 L53.2 1.6 L55.5 3 L57.2 5 L61.5 12.1 L63.5 13.9 L66 14.9 L68.6 15.1 L78 12.9 L80.7 13.1 L83.1 14.1 L85.1 15.8 L86.5 18.1 L87.1 20.6 L86.9 23.3 L84.9 31.4 L85.1 34 L86.1 36.5 L87.9 38.5 L96.1 43.6 L97.8 45.6 L98.8 48 L99 50.7 L98.4 53.2 L97 55.5 L95 57.2 L87.9 61.5 L86.1 63.5 L85.1 66 L84.9 68.6 L87.1 78 L86.9 80.7 L85.9 83.1 L84.2 85.1 L81.9 86.5 L79.4 87.1 L76.7 86.9 L68.6 84.9 L66 85.1 L63.5 86.1 L61.5 87.9 L60.8 89Z'/%3E%3C/svg%3E");
  --shape-cookie7:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M36 7.5 L38.7 5.2 L41.7 3.5 L44.9 2.4 L48.3 1.8 L51.7 1.8 L55.1 2.4 L58.3 3.5 L61.3 5.2 L66.5 9.6 L69.4 11.3 L72.4 12.4 L79.1 13.8 L82.3 15 L85.2 16.8 L87.8 19.1 L89.9 21.8 L91.6 24.8 L92.7 28.1 L93.2 31.5 L93 38.2 L93.5 41.5 L94.5 44.7 L97.6 50.7 L98.6 54 L99 57.4 L98.8 60.8 L98.1 64.2 L96.7 67.4 L94.9 70.2 L92.5 72.8 L87.1 76.8 L84.9 79.3 L83 82 L80.3 88.2 L78.3 91 L75.9 93.5 L73.1 95.5 L70 97 L66.7 97.9 L63.3 98.2 L59.8 98 L53.3 96.3 L50 96 L46.7 96.3 L40.2 98 L36.7 98.2 L33.3 97.9 L30 97 L26.9 95.5 L24.1 93.5 L21.7 91 L19.7 88.2 L17 82 L15.1 79.3 L12.9 76.8 L7.5 72.8 L5.1 70.2 L3.3 67.4 L1.9 64.2 L1.2 60.8 L1 57.4 L1.4 54 L2.4 50.7 L5.5 44.7 L6.5 41.5 L7 38.2 L6.8 31.5 L7.3 28.1 L8.4 24.8 L10.1 21.8 L12.2 19.1 L14.8 16.8 L17.7 15 L20.9 13.8 L27.6 12.4 L30.6 11.3 L33.5 9.6 L36 7.5Z'/%3E%3C/svg%3E");
  --shape-cookie12:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M43 4.1 L44.1 3 L45.5 2.2 L46.9 1.5 L48.4 1.1 L50 1 L51.6 1.1 L53.1 1.5 L54.5 2.2 L55.9 3 L58.1 5.1 L59.4 6 L60.8 6.6 L62.3 7 L63.8 7.2 L65.4 7.1 L68.4 6.4 L70 6.3 L71.6 6.5 L73.1 6.9 L74.5 7.6 L75.8 8.5 L76.9 9.6 L77.9 10.8 L78.6 12.2 L79.5 15.2 L80.2 16.6 L81.1 17.9 L82.1 18.9 L83.4 19.8 L84.8 20.5 L87.8 21.4 L89.2 22.1 L90.4 23.1 L91.5 24.2 L92.4 25.5 L93.1 26.9 L93.5 28.4 L93.7 30 L93.6 31.6 L92.9 34.6 L92.8 36.2 L93 37.7 L93.4 39.2 L94 40.6 L94.9 41.9 L97 44.1 L97.8 45.5 L98.5 46.9 L98.9 48.4 L99 50 L98.9 51.6 L98.5 53.1 L97.8 54.5 L97 55.9 L94.9 58.1 L94 59.4 L93.4 60.8 L93 62.3 L92.8 63.8 L92.9 65.4 L93.6 68.4 L93.7 70 L93.5 71.6 L93.1 73.1 L92.4 74.5 L91.5 75.8 L90.4 76.9 L89.2 77.9 L87.8 78.6 L84.8 79.5 L83.4 80.2 L82.1 81.1 L81.1 82.1 L80.2 83.4 L79.5 84.8 L78.6 87.8 L77.9 89.2 L76.9 90.4 L75.8 91.5 L74.5 92.4 L73.1 93.1 L71.6 93.5 L70 93.7 L68.4 93.6 L65.4 92.9 L63.8 92.8 L62.3 93 L60.8 93.4 L59.4 94 L58.1 94.9 L55.9 97 L54.5 97.8 L53.1 98.5 L51.6 98.9 L50 99 L48.4 98.9 L46.9 98.5 L45.5 97.8 L44.1 97 L41.9 94.9 L40.6 94 L39.2 93.4 L37.7 93 L36.2 92.8 L34.6 92.9 L31.6 93.6 L30 93.7 L28.4 93.5 L26.9 93.1 L25.5 92.4 L24.2 91.5 L23.1 90.4 L22.1 89.2 L21.4 87.8 L20.5 84.8 L19.8 83.4 L18.9 82.1 L17.9 81.1 L16.6 80.2 L15.2 79.5 L12.2 78.6 L10.8 77.9 L9.6 76.9 L8.5 75.8 L7.6 74.5 L6.9 73.1 L6.5 71.6 L6.3 70 L6.4 68.4 L7.1 65.4 L7.2 63.8 L7 62.3 L6.6 60.8 L6 59.4 L5.1 58.1 L3 55.9 L2.2 54.5 L1.5 53.1 L1.1 51.6 L1 50 L1.1 48.4 L1.5 46.9 L2.2 45.5 L3 44.1 L5.1 41.9 L6 40.6 L6.6 39.2 L7 37.7 L7.2 36.2 L7.1 34.6 L6.4 31.6 L6.3 30 L6.5 28.4 L6.9 26.9 L7.6 25.5 L8.5 24.2 L9.6 23.1 L10.8 22.1 L12.2 21.4 L15.2 20.5 L16.6 19.8 L17.9 18.9 L18.9 17.9 L19.8 16.6 L20.5 15.2 L21.4 12.2 L22.1 10.8 L23.1 9.6 L24.2 8.5 L25.5 7.6 L26.9 6.9 L28.4 6.5 L30 6.3 L31.6 6.4 L34.6 7.1 L36.2 7.2 L37.7 7 L39.2 6.6 L40.6 6 L41.9 5.1 L43 4.1Z'/%3E%3C/svg%3E");
  --shape-ghostish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 1 L57.7 1.6 L65.1 3.4 L72.2 6.4 L78.8 10.4 L84.6 15.4 L89.6 21.2 L93.7 27.8 L96.6 34.9 L98.4 42.3 L99 50 L99 79.1 L98.7 82.3 L98 85.4 L96.8 88.3 L95.1 91 L93 93.4 L90.6 95.4 L87.9 97 L84.9 98.1 L81.8 98.8 L78.7 99 L75.5 98.7 L72.5 97.8 L69.6 96.5 L62.8 92.8 L59.1 91.2 L55.2 90.1 L48.9 89.8 L44.8 90.1 L40.9 91.2 L37.2 92.8 L30.4 96.5 L27.5 97.8 L24.5 98.7 L21.3 99 L18.2 98.8 L15.1 98.1 L12.1 97 L9.4 95.4 L7 93.4 L4.9 91 L3.2 88.3 L2 85.4 L1.3 82.3 L1 79.1 L1 50 L1.6 42.3 L3.4 34.9 L6.3 27.8 L10.4 21.2 L15.4 15.4 L21.2 10.4 L27.8 6.4 L34.9 3.4 L42.3 1.6 L50 1Z'/%3E%3C/svg%3E");
  --shape-clover8:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4.6 L52.3 3.4 L55.4 2.1 L58.6 1.3 L62 1 L65.3 1.3 L68.6 2.2 L71.6 3.5 L74.4 5.3 L76.9 7.6 L79 10.3 L80.6 13.2 L82.1 17.9 L84.6 18.7 L87.7 19.9 L90.6 21.7 L93.1 23.8 L95.3 26.4 L97 29.3 L98.2 32.4 L98.9 35.7 L99 39.1 L98.6 42.4 L97.6 45.6 L95.4 50 L96.6 52.3 L97.9 55.4 L98.7 58.6 L99 62 L98.7 65.3 L97.8 68.6 L96.5 71.6 L94.7 74.4 L92.4 76.9 L89.7 79 L86.8 80.6 L82.1 82.1 L81.3 84.6 L80.1 87.7 L78.3 90.6 L76.2 93.1 L73.6 95.3 L70.7 97 L67.6 98.2 L64.3 98.9 L60.9 99 L57.6 98.6 L54.4 97.6 L50 95.4 L47.7 96.6 L44.6 97.9 L41.4 98.7 L38 99 L34.7 98.7 L31.4 97.8 L28.4 96.5 L25.6 94.7 L23.1 92.4 L21 89.7 L19.4 86.8 L17.9 82.1 L15.4 81.3 L12.3 80.1 L9.4 78.3 L6.9 76.2 L4.7 73.6 L3 70.7 L1.8 67.6 L1.1 64.3 L1 60.9 L1.4 57.6 L2.4 54.4 L4.6 50 L3.4 47.7 L2.1 44.6 L1.3 41.4 L1 38 L1.3 34.7 L2.2 31.4 L3.5 28.4 L5.3 25.6 L7.6 23.1 L10.3 21 L13.2 19.4 L17.9 17.9 L18.7 15.4 L19.9 12.3 L21.7 9.4 L23.8 6.9 L26.4 4.7 L29.3 3 L32.4 1.8 L35.7 1.1 L39.1 1 L42.4 1.4 L45.6 2.4 L48.6 3.8Z'/%3E%3C/svg%3E");
  --shape-burst:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M49.5 1.3 L50.5 1.3 L59.5 16.2 L74.8 8.1 L75.2 25.5 L92.4 26.1 L84.1 41.3 L98.7 50.5 L83.8 59.5 L91.9 74.8 L74.5 75.2 L73.9 92.4 L58.7 84.1 L49.5 98.7 L40.5 83.8 L25.2 91.9 L24.8 74.5 L7.6 73.9 L15.9 58.7 L1.3 49.5 L16.2 40.5 L8.1 25.2 L25.5 24.8 L26.1 7.6 L41.3 15.9Z'/%3E%3C/svg%3E");
  --shape-soft-burst:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15.8 29.3 L17.5 28.6 L18.8 27.3 L19.6 25.7 L19.7 23.9 L19.1 14.1 L19.5 12.4 L20.5 11 L21.9 9.9 L23.6 9.4 L25.3 9.5 L35.4 13.4 L37.2 13.5 L38.9 12.9 L40.3 11.8 L46.1 2.8 L47.4 1.7 L49.1 1.1 L50.8 1.1 L52.5 1.6 L53.8 2.7 L59.7 11.8 L61.1 12.9 L62.8 13.5 L64.6 13.4 L74.6 9.5 L76.3 9.4 L78 9.9 L79.4 10.9 L80.4 12.3 L80.9 14 L80.3 24.8 L80.7 26.5 L81.8 28 L83.3 29 L93.7 31.7 L95.2 32.6 L96.2 34 L96.8 35.7 L96.7 37.4 L96.1 39 L89.3 47.4 L88.7 49.1 L88.7 50.9 L89.3 52.6 L96.1 60.9 L96.8 62.5 L96.8 64.2 L96.3 65.9 L95.2 67.3 L93.8 68.2 L83.3 71 L81.8 72 L80.8 73.5 L80.3 75.2 L80.9 85.9 L80.5 87.6 L79.5 89 L78.1 90.1 L76.4 90.6 L74.7 90.5 L64.6 86.6 L62.8 86.5 L61.1 87.1 L59.7 88.2 L53.9 97.2 L52.6 98.3 L50.9 98.9 L49.2 98.9 L47.5 98.4 L46.2 97.3 L40.3 88.2 L38.9 87.1 L37.2 86.5 L35.4 86.6 L25.4 90.5 L23.7 90.6 L22 90.1 L20.6 89.1 L19.6 87.7 L19.1 86 L19.7 75.2 L19.3 73.5 L18.2 72 L16.7 71 L6.3 68.3 L4.8 67.4 L3.8 66 L3.2 64.3 L3.3 62.6 L3.9 61 L10.7 52.6 L11.3 50.9 L11.3 49.1 L10.7 47.4 L3.9 39.1 L3.2 37.5 L3.2 35.8 L3.7 34.1 L4.8 32.7 L6.2 31.8 L7.1 31.5Z'/%3E%3C/svg%3E");
  --shape-boom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.7 28.8 L46 28.5 L50.7 1.9 L55.3 28.8 L70.4 6.4 L63.7 32.8 L86.6 18.5 L69.7 39.9 L96.5 36.1 L72.3 48.9 L98.3 56.3 L71.1 58.1 L91.8 75.5 L66.2 66 L78 90.3 L58.5 71.2 L59.4 98.3 L49.3 72.9 L39.2 98 L40.3 70.7 L20.8 89.5 L32.9 65 L7.5 74.3 L28.5 56.8 L1.5 54.9 L27.8 47.5 L3.9 34.8 L31 38.8 L14.3 17.5 L37.4 32 L30.8 5.8Z'/%3E%3C/svg%3E");
  --shape-soft-boom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M72.9 45.5 L78.7 44.5 L83.4 44.1 L88 44.3 L91.5 44.7 L94.1 45.3 L97.6 47.1 L98.8 48.7 L98.9 50.7 L98.1 52.6 L96.5 53.8 L94.1 54.9 L91.4 55.4 L88 55.8 L83.3 56 L78.7 55.5 L72.9 54.6 L78.6 56 L83.1 57.3 L87.3 59.3 L90.3 61 L92.5 62.5 L95.1 65.5 L95.5 67.5 L94.9 69.4 L93.5 70.8 L91.5 71.3 L88.9 71.4 L86.2 70.9 L82.9 69.9 L78.5 68.3 L74.4 66.1 L69.4 63 L74.2 66.5 L77.8 69.4 L80.9 72.9 L83.1 75.6 L84.5 77.8 L85.7 81.6 L85.4 83.6 L84.1 85.1 L82.2 85.8 L80.2 85.6 L77.7 84.6 L75.5 83.1 L72.8 81 L69.4 77.8 L66.4 74.2 L63 69.4 L66 74.5 L68.2 78.6 L69.8 82.9 L70.8 86.3 L71.3 88.9 L70.9 92.9 L69.8 94.6 L68 95.5 L66 95.4 L64.3 94.4 L62.4 92.6 L60.8 90.4 L59.2 87.3 L57.2 83.1 L55.9 78.7 L54.5 72.9 L55.5 78.7 L55.9 83.4 L55.7 88 L55.3 91.5 L54.7 94.1 L52.9 97.6 L51.3 98.8 L49.3 98.9 L47.4 98.1 L46.2 96.5 L45.1 94.1 L44.6 91.4 L44.2 88 L44 83.3 L44.5 78.7 L45.4 72.9 L44 78.6 L42.7 83.1 L40.7 87.3 L39 90.3 L37.5 92.5 L34.5 95.1 L32.5 95.5 L30.6 94.9 L29.2 93.5 L28.7 91.5 L28.6 88.9 L29.1 86.2 L30.1 82.9 L31.7 78.5 L33.9 74.4 L37 69.4 L33.5 74.2 L30.6 77.8 L27.1 80.9 L24.4 83.1 L22.2 84.5 L18.4 85.7 L16.4 85.4 L14.9 84.1 L14.2 82.2 L14.4 80.2 L15.4 77.7 L16.9 75.5 L19 72.8 L22.2 69.4 L25.8 66.4 L30.6 63 L25.5 66 L21.4 68.2 L17.1 69.8 L13.7 70.8 L11.1 71.3 L7.1 70.9 L5.4 69.8 L4.5 68 L4.6 66 L5.6 64.3 L7.4 62.4 L9.6 60.8 L12.7 59.2 L16.9 57.2 L21.3 55.9 L27.1 54.5 L21.3 55.5 L16.6 55.9 L12 55.7 L8.5 55.3 L5.9 54.7 L2.4 52.9 L1.2 51.3 L1.1 49.3 L1.9 47.4 L3.5 46.2 L5.9 45.1 L8.6 44.6 L12 44.2 L16.7 44 L21.3 44.5 L27.1 45.4 L21.4 44 L16.9 42.7 L12.7 40.7 L9.7 39 L7.5 37.5 L4.9 34.5 L4.5 32.5 L5.1 30.6 L6.5 29.2 L8.5 28.7 L11.1 28.6 L13.8 29.1 L17.1 30.1 L21.5 31.7 L25.6 33.9 L30.6 37 L25.8 33.5 L22.2 30.6 L19.1 27.1 L16.9 24.4 L15.5 22.2 L14.3 18.4 L14.6 16.4 L15.9 14.9 L17.8 14.2 L19.8 14.4 L22.3 15.4 L24.5 16.9 L27.2 19 L30.6 22.2 L33.6 25.8 L37 30.6 L34 25.5 L31.8 21.4 L30.2 17.1 L29.2 13.7 L28.7 11.1 L29.1 7.1 L30.2 5.4 L32 4.5 L34 4.6 L35.7 5.6 L37.6 7.4 L39.2 9.6 L40.8 12.7 L42.8 16.9 L44.1 21.3 L45.5 27.1 L44.5 21.3 L44.1 16.6 L44.3 12 L44.7 8.5 L45.3 5.9 L47.1 2.4 L48.7 1.2 L50.7 1.1 L52.6 1.9 L53.8 3.5 L54.9 5.9 L55.4 8.6 L55.8 12 L56 16.7 L55.5 21.3 L54.6 27.1 L56 21.4 L57.3 16.9 L59.3 12.7 L61 9.7 L62.5 7.5 L65.5 4.9 L67.5 4.5 L69.4 5.1 L70.8 6.5 L71.3 8.5 L71.4 11.1 L70.9 13.8 L69.9 17.1 L68.3 21.5 L66.1 25.6 L63 30.6 L66.5 25.8 L69.4 22.2 L72.9 19.1 L75.6 16.9 L77.8 15.5 L81.6 14.3 L83.6 14.6 L85.1 15.9 L85.8 17.8 L85.6 19.8 L84.6 22.3 L83.1 24.5 L81 27.2 L77.8 30.6 L74.2 33.6 L69.4 37 L74.5 34 L78.6 31.8 L82.9 30.2 L86.3 29.2 L88.9 28.7 L92.9 29.1 L94.6 30.2 L95.5 32 L95.4 34 L94.4 35.7 L92.6 37.6 L90.4 39.2 L87.3 40.8 L83.1 42.8 L78.7 44.1Z'/%3E%3C/svg%3E");
  --shape-puffy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 17.7 L52.5 14.1 L54.7 12.5 L57.5 11.4 L60.5 11.2 L62.3 11.3 L64 11.7 L65.6 12.4 L67 13.2 L68.2 14.2 L69.8 16.6 L70.9 18.7 L71.4 20.9 L71.6 23.1 L73.2 21.3 L75.5 20 L78.2 19.3 L81.1 19.3 L83.8 20 L86.4 21.5 L88.1 23.1 L89.4 24.9 L90.4 26.9 L90.9 29.5 L90.9 32 L90.2 34.5 L88.9 36.8 L87.1 38.9 L89.3 38.9 L92.3 39.6 L94.8 41 L95.8 41.9 L97.5 44.3 L98.6 47 L99 50.3 L98.6 53 L97.5 55.7 L95.8 58.1 L93.6 59.8 L90.8 60.8 L87.1 61.1 L88.9 63.2 L90.2 65.5 L90.9 68 L90.8 71.1 L90.4 73.1 L89.4 75.1 L88.1 76.9 L86.1 78.7 L83.8 80 L81.1 80.7 L78.2 80.7 L75.5 80 L73.2 78.7 L71.6 76.9 L71.4 79.1 L70.9 81.3 L69.1 84.6 L68.2 85.8 L67 86.8 L65.6 87.6 L64 88.3 L62.3 88.7 L59 88.8 L56 88.1 L53.5 86.8 L51.7 84.9 L50 82.3 L47.5 85.9 L45.3 87.5 L42.5 88.6 L39.5 88.8 L37.7 88.7 L36 88.3 L34.4 87.6 L33 86.8 L31.8 85.8 L30.2 83.4 L29.1 81.3 L28.6 79.1 L28.4 76.9 L26.8 78.7 L24.5 80 L21.8 80.7 L18.9 80.7 L16.2 80 L13.6 78.5 L11.9 76.9 L10.6 75.1 L9.6 73.1 L9.1 70.5 L9.1 68 L9.8 65.5 L11.1 63.2 L12.9 61.1 L10.7 61.1 L7.7 60.4 L5.2 59 L4.2 58.1 L2.5 55.7 L1.4 53 L1 49.7 L1.4 47 L2.5 44.3 L4.2 41.9 L6.4 40.2 L9.2 39.2 L12.9 38.9 L11.1 36.8 L9.8 34.5 L9.1 32 L9.2 28.9 L9.6 26.9 L10.6 24.9 L11.9 23.1 L13.9 21.3 L16.2 20 L18.9 19.3 L21.8 19.3 L24.5 20 L26.8 21.3 L28.4 23.1 L28.6 20.9 L29.1 18.7 L30.9 15.4 L31.8 14.2 L33 13.2 L34.4 12.4 L36 11.7 L37.7 11.3 L41 11.2 L44 11.9 L46.5 13.2 L48.3 15.1Z'/%3E%3C/svg%3E");
  --shape-puffy-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64 18.8 L66.4 18.5 L68.8 18.6 L71.2 19 L73.4 19.9 L75.5 21.1 L77.3 22.7 L78.9 24.5 L80.1 26.6 L81 28.8 L81.4 31.2 L81.5 33.6 L81.2 36 L85.1 35.7 L87.6 35.9 L89.9 36.6 L92.1 37.7 L94.1 39.2 L95.8 40.9 L97.2 43 L98.2 45.2 L98.8 47.6 L99 50 L98.8 52.4 L98.2 54.8 L97.2 57 L95.8 59.1 L94.1 60.8 L92.1 62.3 L89.9 63.4 L87.6 64.1 L85.1 64.3 L81.2 64 L81.5 66.4 L81.4 68.8 L81 71.2 L80.1 73.4 L78.9 75.5 L77.3 77.3 L75.5 78.9 L73.4 80.1 L71.2 81 L68.8 81.4 L66.4 81.5 L64 81.2 L64.3 85.1 L64.1 87.6 L63.4 89.9 L62.3 92.1 L60.8 94.1 L59.1 95.8 L57 97.2 L54.8 98.2 L52.4 98.8 L50 99 L47.6 98.8 L45.2 98.2 L43 97.2 L40.9 95.8 L39.2 94.1 L37.7 92.1 L36.6 89.9 L35.9 87.6 L35.7 85.1 L36 81.2 L33.6 81.5 L31.2 81.4 L28.8 81 L26.6 80.1 L24.5 78.9 L22.7 77.3 L21.1 75.5 L19.9 73.4 L19 71.2 L18.6 68.8 L18.5 66.4 L18.8 64 L14.9 64.3 L12.4 64.1 L10.1 63.4 L7.9 62.3 L5.9 60.8 L4.2 59.1 L2.8 57 L1.8 54.8 L1.2 52.4 L1 50 L1.2 47.6 L1.8 45.2 L2.8 43 L4.2 40.9 L5.9 39.2 L7.9 37.7 L10.1 36.6 L12.4 35.9 L14.9 35.7 L18.8 36 L18.5 33.6 L18.6 31.2 L19 28.8 L19.9 26.6 L21.1 24.5 L22.7 22.7 L24.5 21.1 L26.6 19.9 L28.8 19 L31.2 18.6 L33.6 18.5 L36 18.8 L35.7 14.9 L35.9 12.4 L36.6 10.1 L37.7 7.9 L39.2 5.9 L40.9 4.2 L43 2.8 L45.2 1.8 L47.6 1.2 L50 1 L52.4 1.2 L54.8 1.8 L57 2.8 L59.1 4.2 L60.8 5.9 L62.3 7.9 L63.4 10.1 L64.1 12.4 L64.3 14.9 L64 18.8Z'/%3E%3C/svg%3E");
  --shape-bun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M79 50 L84.4 52.2 L88.3 54.8 L91.1 57.5 L93.5 60.6 L95.4 64.1 L96.6 67.8 L97.3 71.7 L97.4 75.7 L96.8 79.8 L95.5 83.8 L93.5 87.5 L91 90.8 L88 93.6 L84.5 95.9 L80.7 97.6 L76.7 98.7 L72.5 99 L27.5 99 L23.3 98.7 L19.3 97.6 L15.5 95.9 L12 93.6 L9 90.8 L6.5 87.5 L4.5 83.8 L3.2 79.8 L2.6 75.6 L2.7 71.7 L3.4 67.8 L4.6 64.1 L6.5 60.6 L8.9 57.5 L11.7 54.8 L15.6 52.2 L21 50 L15.6 47.8 L11.7 45.2 L8.9 42.5 L6.5 39.4 L4.6 35.9 L3.4 32.2 L2.7 28.3 L2.6 24.3 L3.2 20.2 L4.5 16.2 L6.5 12.5 L9 9.2 L12 6.4 L15.5 4.1 L19.3 2.4 L23.3 1.3 L27.5 1 L72.5 1 L76.7 1.3 L80.7 2.4 L84.5 4.1 L88 6.4 L91 9.2 L93.5 12.5 L95.5 16.2 L96.8 20.2 L97.4 24.4 L97.3 28.3 L96.6 32.2 L95.4 35.9 L93.5 39.4 L91.1 42.5 L88.3 45.2 L84.4 47.8 L80.1 49.7Z'/%3E%3C/svg%3E");
  --shape-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M49.6 26.7 L50.4 26.7 L62.2 13.3 L64.5 11 L67.3 9.1 L70.3 7.6 L73.4 6.7 L76.7 6.2 L80 6.3 L83.3 6.9 L86.5 8 L89.4 9.6 L92 11.6 L94.3 14.1 L96.3 17.2 L97.8 20.6 L98.7 24.2 L99 27.9 L98.6 31.7 L97.6 35.3 L96 38.6 L93.9 41.7 L49.8 93.7 L6.1 41.7 L4 38.6 L2.4 35.3 L1.4 31.7 L1 27.9 L1.3 24.2 L2.2 20.6 L3.7 17.2 L5.7 14.1 L8 11.6 L10.6 9.6 L13.5 8 L16.7 6.9 L20 6.3 L23.3 6.2 L26.6 6.7 L29.7 7.6 L32.7 9.1 L35.5 11 L37.8 13.3Z'/%3E%3C/svg%3E");
  --shape-clover4:var(--shape-clover);
  --m3-loader-still:path('M19.0 0.0 L20.8 1.1 L22.1 3.3 L23.4 4.7 L24.9 4.7 L27.1 3.8 L29.5 3.3 L30.9 4.6 L30.9 7.1 L30.8 9.4 L31.5 10.6 L33.5 11.3 L36.0 11.9 L37.1 13.5 L36.2 15.6 L34.6 17.5 L34.0 19.0 L34.7 20.5 L36.3 22.4 L37.2 24.5 L36.0 26.0 L33.5 26.7 L31.5 27.4 L30.8 28.7 L30.9 30.9 L30.9 33.5 L29.5 34.7 L27.1 34.1 L24.9 33.2 L23.4 33.3 L22.1 34.8 L20.8 37.0 L19.0 38.0 L17.2 36.9 L15.9 34.7 L14.6 33.3 L13.1 33.3 L10.9 34.2 L8.5 34.7 L7.1 33.4 L7.1 30.9 L7.2 28.6 L6.5 27.4 L4.5 26.7 L2.0 26.1 L0.9 24.5 L1.8 22.4 L3.4 20.5 L4.0 19.0 L3.3 17.5 L1.7 15.6 L0.8 13.5 L2.0 12.0 L4.5 11.3 L6.5 10.6 L7.2 9.3 L7.1 7.1 L7.1 4.5 L8.5 3.3 L10.9 3.9 L13.1 4.8 L14.6 4.7 L15.9 3.2 L17.2 1.0Z');
}

/* ============================================================
   MOTION: scroll reveals as a short fade with a springy 16px rise; no blur, no sideways travel (H20, C11, X52).
   Parallax off (motion.js writes --py; nothing moves).
   ============================================================ */
.js .reveal,.js .reveal-l,.js .reveal-r{filter:none;transform:translateY(16px);
  transition:opacity .3s var(--m-effects),transform .6s var(--m-spring);transition-delay:calc(var(--i,0)*40ms)}
.js .reveal.in,.js .reveal-l.in,.js .reveal-r.in{opacity:1;transform:none;filter:none}
.js .split-line>span{transform:translateY(40%);opacity:0;transition:transform .6s var(--m-spring),opacity .3s var(--m-effects);
  transition-delay:calc(var(--i,0)*60ms)}
.js .split.in .split-line>span{transform:none;opacity:1}
[data-parallax],.parallax{--py:0px!important}

/* Brand lockup subtitle in sentence case, label-medium (C49, X12) */
.brand-text{font-size:18px;font-weight:700;letter-spacing:0}
.brand-text small{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;margin-top:2px}
.footer .brand-text small{color:var(--md-inverse-variant)}

/* ============================================================
   TYPE SCALE (M3) on the owner's fonts. Brand role (Fraunces): display, headline. Plain role (Jakarta): title,
   body, label. Add .m3-emph for the emphasized style (heavier weight).
   Every style is also a token: font:var(--type-title-medium).
   ============================================================ */
.m3-display-large{font:var(--type-display-large);letter-spacing:-.0044em}
.m3-display-medium{font:var(--type-display-medium);letter-spacing:0}
.m3-display-small{font:var(--type-display-small);letter-spacing:0}
.m3-headline-large{font:var(--type-headline-large);letter-spacing:0}
.m3-headline-medium{font:var(--type-headline-medium);letter-spacing:0}
.m3-headline-small{font:var(--type-headline-small);letter-spacing:0}
.m3-title-large{font:var(--type-title-large);letter-spacing:0}
.m3-title-medium{font:var(--type-title-medium);letter-spacing:.01em}
.m3-title-small{font:var(--type-title-small);letter-spacing:.007em}
.m3-body-large{font:var(--type-body-large);letter-spacing:0}
.m3-body-medium{font:var(--type-body-medium);letter-spacing:0}
.m3-body-small{font:var(--type-body-small);letter-spacing:.01em}
.m3-label-large{font:var(--type-label-large);letter-spacing:.007em}
.m3-label-medium{font:var(--type-label-medium);letter-spacing:.03em}
.m3-label-small{font:var(--type-label-small);letter-spacing:.03em}
:is(.m3-display-large,.m3-display-medium,.m3-display-small,.m3-headline-large,.m3-headline-medium,.m3-headline-small){
  color:var(--md-on-surface);text-wrap:balance;font-variation-settings:"SOFT" 30,"WONK" 0}
.m3-emph{font-weight:700}
:is(.m3-display-large,.m3-display-medium,.m3-display-small,.m3-headline-large,.m3-headline-medium,.m3-headline-small,
    .m3-body-large,.m3-body-medium,.m3-body-small).m3-emph{font-weight:500}

/* ============================================================
   STATE LAYER, any element: .m3-state (hover 8%, focus 10%, press 10% of the content colour) + ripple via pixel.js
   ============================================================ */
.m3-state{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.m3-state::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.m3-state:hover::after{opacity:var(--md-state-hover)}}
.m3-state:focus-visible::after{opacity:var(--md-state-focus)}
.m3-state:active::after{opacity:var(--md-state-press)}

/* ============================================================
   ICON BUTTONS: .m3-icon-btn (standard), + .filled / .tonal / .outlined; sizes .xs .s (default) .m .l .xl;
   widths .narrow / .wide; .square; toggle with aria-pressed. The element is always at least 48x48 (the touch
   target); the visible container (40px for S) is drawn inside it.
   ============================================================ */
.m3-icon-btn{--ib:40px;--ib-w:40px;--ib-wn:32px;--ib-ww:52px;--ib-icon:24px;--ib-sq:12px;--ib-press:8px;--ib-ol:1px;
  --ib-bg:transparent;--ib-fg:var(--md-on-surface-variant);--ib-bd:none;
  position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:0 0 auto;
  width:max(48px,var(--ib-w));height:max(48px,var(--ib));padding:0;margin:0;border:0;background:none;color:var(--ib-fg);
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s var(--m-effects)}
.m3-icon-btn::before,.m3-icon-btn::after{content:"";position:absolute;left:50%;top:50%;width:var(--ib-w);height:var(--ib);
  translate:-50% -50%;border-radius:var(--sh-full);pointer-events:none;
  transition:border-radius var(--m3-motion-fast-spatial),background-color .2s var(--m-effects),opacity 15ms linear}
.m3-icon-btn::before{z-index:-1;background:var(--ib-bg);box-shadow:var(--ib-bd)}
.m3-icon-btn::after{background:currentColor;opacity:0}
@media(hover:hover){.m3-icon-btn:hover::after{opacity:var(--md-state-hover)}}
.m3-icon-btn:focus-visible{outline:none}
.m3-icon-btn:focus-visible::before{outline:3px solid var(--md-primary);outline-offset:2px}
.m3-icon-btn:focus-visible::after,.m3-icon-btn:active::after{opacity:var(--md-state-press)}
.m3-icon-btn:active::before,.m3-icon-btn:active::after{border-radius:var(--ib-press)}
.m3-icon-btn svg{width:var(--ib-icon);height:var(--ib-icon);position:relative}
.m3-icon-btn.square::before,.m3-icon-btn.square::after{border-radius:var(--ib-sq)}
.m3-icon-btn.xs{--ib:32px;--ib-w:32px;--ib-wn:28px;--ib-ww:40px;--ib-icon:20px;--ib-sq:12px;--ib-press:8px}
.m3-icon-btn.m{--ib:56px;--ib-w:56px;--ib-wn:48px;--ib-ww:72px;--ib-icon:24px;--ib-sq:16px;--ib-press:12px}
.m3-icon-btn.l{--ib:96px;--ib-w:96px;--ib-wn:64px;--ib-ww:128px;--ib-icon:32px;--ib-sq:28px;--ib-press:16px;--ib-ol:2px}
.m3-icon-btn.xl{--ib:136px;--ib-w:136px;--ib-wn:104px;--ib-ww:184px;--ib-icon:40px;--ib-sq:28px;--ib-press:16px;--ib-ol:3px}
.m3-icon-btn.narrow{--ib-w:var(--ib-wn)}
.m3-icon-btn.wide{--ib-w:var(--ib-ww)}
.m3-icon-btn.filled{--ib-bg:var(--md-primary);--ib-fg:var(--md-on-primary)}
.m3-icon-btn.tonal{--ib-bg:var(--md-secondary-container);--ib-fg:var(--md-on-secondary-container)}
.m3-icon-btn.outlined{--ib-bd:inset 0 0 0 var(--ib-ol) var(--md-outline-variant);--ib-fg:var(--md-on-surface-variant)}
/* toggles */
.m3-icon-btn[aria-pressed="true"]{--ib-fg:var(--md-primary)}
.m3-icon-btn.filled[aria-pressed="false"]{--ib-bg:var(--md-surface-container);--ib-fg:var(--md-on-surface-variant)}
.m3-icon-btn.filled[aria-pressed="true"]{--ib-bg:var(--md-primary);--ib-fg:var(--md-on-primary)}
.m3-icon-btn.tonal[aria-pressed="true"]{--ib-bg:var(--md-secondary);--ib-fg:var(--md-on-secondary)}
.m3-icon-btn.outlined[aria-pressed="true"]{--ib-bg:var(--md-inverse-surface);--ib-fg:var(--md-inverse-on-surface);--ib-bd:none}
.m3-icon-btn[aria-pressed="true"]::before,.m3-icon-btn[aria-pressed="true"]::after{border-radius:var(--ib-sq)}
.m3-icon-btn.square[aria-pressed="true"]::before,.m3-icon-btn.square[aria-pressed="true"]::after{border-radius:var(--sh-full)}
.m3-icon-btn:disabled,.m3-icon-btn[aria-disabled="true"]{pointer-events:none;--ib-fg:rgba(26,22,17,.38)}
.m3-icon-btn.filled:disabled,.m3-icon-btn.tonal:disabled{--ib-bg:rgba(26,22,17,.10)}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .m3-icon-btn:not(.filled):not(.tonal){--ib-fg:var(--md-inverse-on-surface)}

/* ============================================================
   FAB and EXTENDED FAB: .m3-fab (56px, 16px corners), .m (80/20), .l (96/28). Colours: tonal primary by default,
   .primary .secondary .tertiary .tonal-secondary .tonal-tertiary. Extended: add .extended and a
   <span class="m3-fab-label">. .is-compact collapses an extended FAB (pixel.js does it on scroll for
   [data-fab-collapse]). .m3-fab-dock pins one bottom-right, above the phone navigation bar.
   ============================================================ */
.m3-fab{--fab:56px;--fab-r:16px;--fab-icon:24px;--fab-bg:var(--md-primary-container);--fab-fg:var(--md-on-primary-container);
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:var(--fab);min-width:var(--fab);padding:0 calc((var(--fab) - var(--fab-icon)) / 2);margin:0;border:0;border-radius:var(--fab-r);
  background:var(--fab-bg);color:var(--fab-fg);box-shadow:var(--el-3);font:var(--type-title-medium);cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s var(--m-effects),padding var(--m3-motion-default-spatial),border-radius var(--m3-motion-fast-spatial)}
.m3-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
.m3-fab:hover{box-shadow:var(--el-4)}
@media(hover:hover){.m3-fab:hover::after{opacity:var(--md-state-hover)}}
.m3-fab:focus-visible::after,.m3-fab:active::after{opacity:var(--md-state-press)}
.m3-fab svg{width:var(--fab-icon);height:var(--fab-icon);flex:0 0 auto}
.m3-fab.m{--fab:80px;--fab-r:20px;--fab-icon:28px}
.m3-fab.l{--fab:96px;--fab-r:28px;--fab-icon:36px}
.m3-fab.primary{--fab-bg:var(--md-primary);--fab-fg:var(--md-on-primary)}
.m3-fab.secondary{--fab-bg:var(--md-secondary);--fab-fg:var(--md-on-secondary)}
.m3-fab.tertiary{--fab-bg:var(--md-tertiary);--fab-fg:var(--md-on-tertiary)}
.m3-fab.tonal-secondary{--fab-bg:var(--md-secondary-container);--fab-fg:var(--md-on-secondary-container)}
.m3-fab.tonal-tertiary{--fab-bg:var(--md-tertiary-container);--fab-fg:var(--md-on-tertiary-container)}
.m3-fab.extended{padding:0 16px}
.m3-fab.extended.m{padding:0 26px;font:var(--type-title-large)}
.m3-fab.extended.l{padding:0 28px;font:var(--type-headline-small)}
.m3-fab-label{display:block;max-width:16em;overflow:hidden;white-space:nowrap;margin-left:8px;
  transition:max-width var(--m3-motion-default-spatial),margin var(--m3-motion-default-spatial),opacity .2s var(--m-effects)}
.m3-fab.m .m3-fab-label{margin-left:12px}
.m3-fab.l .m3-fab-label{margin-left:16px}
.m3-fab.extended.is-compact{padding:0 calc((var(--fab) - var(--fab-icon)) / 2)}
.m3-fab.is-compact .m3-fab-label{max-width:0;margin-left:0;opacity:0}
.m3-fab-dock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:150}
@media(max-width:760px){.m3-fab-dock{bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ============================================================
   CHIPS: .m3-chip + .assist | .filter | .input | .suggestion; .elevated for over imagery.
   32px, 8px corners, label-large, 18px icons, 1px outline-variant. A selected filter chip (aria-pressed="true"
   or .selected) is secondary-container with a leading check. An input chip's remove button: .m3-chip-x.
   On phones the chip keeps its 32px look inside a 48px tall touch target. A chip row: .m3-chip-row (scrolls
   sideways on phones instead of wrapping).
   ============================================================ */
.m3-chip{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:32px;padding:0 16px;margin:0;
  border:0;border-radius:var(--sh-sm);background:transparent;box-shadow:inset 0 0 0 1px var(--md-outline-variant);
  color:var(--md-on-surface-variant);font:var(--type-label-large);letter-spacing:.007em;white-space:nowrap;cursor:pointer;
  text-decoration:none;-webkit-tap-highlight-color:transparent;background-clip:padding-box;
  transition:background-color .2s var(--m-effects),box-shadow .2s var(--m-effects),color .2s var(--m-effects),padding var(--m3-motion-fast-spatial)}
.m3-chip::after{content:"";position:absolute;inset:0;border-radius:var(--sh-sm);background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.m3-chip:hover::after{opacity:var(--md-state-hover)}}
.m3-chip:focus-visible::after,.m3-chip:active::after{opacity:var(--md-state-press)}
.m3-chip svg{width:18px;height:18px;flex:0 0 auto}
.m3-chip>svg:first-child{margin-left:-8px}
.m3-chip>svg:last-child:not(:first-child),.m3-chip>.m3-chip-x{margin-right:-8px}
.m3-chip.assist{color:var(--md-on-surface)}
.m3-chip.assist>svg:first-child,.m3-chip.suggestion>svg:first-child,.m3-chip.filter>svg:first-child{color:var(--md-primary)}
.m3-chip.elevated{box-shadow:var(--el-1);background-color:var(--md-surface-low)}
.m3-chip.elevated:hover{box-shadow:var(--el-2)}
/* filter: the leading check grows in when selected */
.m3-chip.filter::before{content:"";width:0;height:18px;margin-left:0;margin-right:-8px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.3 4.2L19 7.2'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.3 4.2L19 7.2'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:width var(--m3-motion-fast-spatial),margin var(--m3-motion-fast-spatial)}
.m3-chip.filter:is([aria-pressed="true"],[aria-checked="true"],.selected){background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none;padding-left:8px}
.m3-chip.filter:is([aria-pressed="true"],[aria-checked="true"],.selected)::before{width:18px;margin-left:0;margin-right:0}
.m3-chip.filter:is([aria-pressed="true"],[aria-checked="true"],.selected)>svg:first-child{display:none}
.m3-chip.input{padding-right:8px}
.m3-chip.input.selected{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}
.m3-chip .m3-chip-avatar{width:24px;height:24px;border-radius:50%;margin-left:-12px;object-fit:cover;flex:0 0 24px}
.m3-chip-x{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.m3-chip-x::before{content:"";position:absolute;inset:-15px}
.m3-chip-row{display:flex;flex-wrap:wrap;gap:8px}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .m3-chip{color:var(--md-inverse-on-surface);box-shadow:inset 0 0 0 1px rgba(246,239,230,.32)}
@media(max-width:760px){
  .m3-chip{height:48px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-radius:8px / 16px}
  .m3-chip.elevated,.m3-chip.elevated:hover{box-shadow:none;background-color:var(--md-surface-container)}
  .m3-chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .m3-chip-row::-webkit-scrollbar{display:none}
}

/* ============================================================
   LISTS (expressive segmented list): .m3-list > .m3-list-item. Items 2px apart, 4px inner and 16px outer
   corners; an interactive item (a, button, label) rounds to 12px on hover and 16px pressed or selected.
   Parts: .m3-list-lead (icon or initial in a 40px tonal shape; .plain, .img), .m3-list-text with
   .m3-list-overline / .m3-list-label / .m3-list-support, and .m3-list-trail (label-small text or a 20px icon).
   Heights: one line 56, .two 72, .three 88. .m3-list.standard = one container with dividers.
   ============================================================ */
.m3-list{--list-bg:var(--md-surface-lowest);display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.m3-list-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;margin:0;
  border:0;border-radius:4px;background:var(--list-bg);color:var(--md-on-surface);font:var(--type-body-large);text-align:left;text-decoration:none;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:border-radius var(--m3-motion-fast-spatial),background-color .2s var(--m-effects)}
.m3-list>.m3-list-item:first-child,.m3-list>li:first-child>.m3-list-item{border-top-left-radius:16px;border-top-right-radius:16px}
.m3-list>.m3-list-item:last-child,.m3-list>li:last-child>.m3-list-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
:is(a,button,label).m3-list-item{cursor:pointer}
:is(a,button,label).m3-list-item::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover) and (pointer:fine){
  :is(a,button,label).m3-list-item:hover{border-radius:12px}
  :is(a,button,label).m3-list-item:hover::after{opacity:var(--md-state-hover)}
}
:is(a,button,label).m3-list-item:active,.m3-list-item:focus-visible,.m3-list-item:is([aria-selected="true"],[aria-current="page"],.selected){border-radius:16px}
:is(a,button,label).m3-list-item:active::after{opacity:var(--md-state-press)}
.m3-list-item:is([aria-selected="true"],[aria-current="page"],.selected){background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.m3-list-item.two{min-height:72px}
.m3-list-item.three{min-height:88px;align-items:flex-start}
.m3-list-lead{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--md-primary-container);color:var(--md-on-primary-container);font:var(--type-title-medium)}
.m3-list-lead svg{width:20px;height:20px}
.m3-list-lead.plain{width:24px;height:24px;background:none;color:var(--md-on-surface-variant)}
.m3-list-lead.img{width:56px;height:56px;border-radius:8px;overflow:hidden}
.m3-list-lead.img img{width:100%;height:100%;object-fit:cover}
.m3-list-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.m3-list-overline{font:var(--type-label-small);letter-spacing:.03em;color:var(--md-on-surface-variant)}
.m3-list-label{font:var(--type-body-large);color:inherit}
.m3-list-support{font:var(--type-body-medium);color:var(--md-on-surface-variant)}
.m3-list-item:is([aria-selected="true"],.selected) :is(.m3-list-support,.m3-list-trail){color:inherit}
.m3-list-trail{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:var(--type-label-small);color:var(--md-on-surface-variant)}
.m3-list-trail svg{width:20px;height:20px}
.m3-list.standard{gap:0;background:var(--list-bg);border-radius:16px;overflow:hidden}
.m3-list.standard>.m3-list-item{border-radius:0;background:transparent}
.m3-list.standard>.m3-list-item+.m3-list-item::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--md-outline-variant)}
.m3-list.on-low{--list-bg:var(--md-surface-low)}
.m3-list.on-container{--list-bg:var(--md-surface-container)}

/* ============================================================
   CARDS: .m3-card + .elevated | .filled | .outlined (12px corners, 16px padding; Google's card token).
   .xl gives the Expressive hero container (28px corners, 24px padding). A card that is a link or button gets the
   state layer and lifts one level on hover.
   ============================================================ */
.m3-card{position:relative;display:block;border-radius:var(--sh-md);padding:16px;color:var(--md-on-surface);text-decoration:none;
  transition:box-shadow .2s var(--m-effects)}
.m3-card.elevated{background:var(--md-surface-low);box-shadow:var(--el-1)}
.m3-card.filled{background:var(--md-surface-highest)}
.m3-card.outlined{background:var(--md-surface);box-shadow:inset 0 0 0 1px var(--md-outline-variant)}
.m3-card.xl{border-radius:var(--sh-xl);padding:24px}
:is(a,button).m3-card{cursor:pointer;overflow:hidden;border:0;font:inherit;text-align:inherit;width:100%}
:is(a,button).m3-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover) and (pointer:fine){
  :is(a,button).m3-card:hover::after{opacity:var(--md-state-hover)}
  :is(a,button).m3-card.elevated:hover{box-shadow:var(--el-2)}
  :is(a,button).m3-card.filled:hover{box-shadow:var(--el-1)}
  :is(a,button).m3-card.outlined:hover{box-shadow:inset 0 0 0 1px var(--md-outline-variant),var(--el-1)}
}
:is(a,button).m3-card:active::after{opacity:var(--md-state-press)}
.m3-card-media{display:block;margin:-16px -16px 16px;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden}
.m3-card.xl .m3-card-media{margin:-24px -24px 20px}
.m3-card-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   CAROUSEL: .m3-carousel (a horizontal scroll-snap row) with any items (a, figure, div), 28px corners, 8px gaps.
   Variants: .multi (default widths for browsing), .hero (one large item and a peek of the next), .center
   (centre-aligned hero), .uncontained (bleeds past the end). --item-w and --item-h set the item size.
   Where scroll-driven animations exist, items narrow into rounded tiles as they reach either edge (a clip on a
   view() timeline, so the layout never moves); elsewhere they are simply cut by the edge.
   ============================================================ */
.m3-carousel{--item-w:clamp(160px,42%,300px);--item-h:240px;display:flex;gap:8px;margin:0;padding:8px 16px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
.m3-carousel::-webkit-scrollbar{display:none}
.m3-carousel>*{position:relative;flex:0 0 var(--item-w);height:var(--item-h);margin:0;scroll-snap-align:start;
  border-radius:var(--sh-xl);overflow:hidden;background:var(--md-surface-high)}
.m3-carousel>* img,.m3-carousel>* video{width:100%;height:100%;object-fit:cover;display:block}
.m3-carousel.hero{--item-w:calc(100% - 72px)}
.m3-carousel.center>*{scroll-snap-align:center}
.m3-carousel.center{--item-w:calc(100% - 128px)}
.m3-carousel.uncontained{padding-right:0;scroll-padding-right:0}
.m3-carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;font:var(--type-title-medium);
  background:linear-gradient(transparent,rgba(16,14,10,.6))}
@supports (animation-timeline:view()){
  .m3-carousel>*{animation:m3-carousel-edge linear both;animation-timeline:view(inline)}
}
@keyframes m3-carousel-edge{
  entry 0%{clip-path:inset(0 100% 0 0 round 28px)}
  entry 100%{clip-path:inset(0 0 0 0 round 28px)}
  exit 0%{clip-path:inset(0 0 0 0 round 28px)}
  exit 100%{clip-path:inset(0 0 0 100% round 28px)}
}

/* ============================================================
   PROGRESS INDICATORS
   Linear: <div class="m3-progress" style="--value:40%" role="progressbar" aria-valuenow="40" ...>. 4px active
   indicator in primary, 4px gap, the track in secondary-container with a 4px stop dot at its end.
   .wavy = the Expressive wavy indicator (10px tall, 3px amplitude, 40px wavelength, travelling).
   .indeterminate on either. Circular: <span class="m3-progress-circle" style="--value:40">, 40px, 4px thick,
   .indeterminate spins.
   ============================================================ */
.m3-progress{--value:0%;--pc:var(--md-primary);--tc:var(--md-secondary-container);position:relative;display:flex;align-items:center;gap:4px;
  width:100%;height:10px}
.m3-progress::before{content:"";flex:0 0 auto;width:max(0px,calc(var(--value) - 4px));height:4px;border-radius:2px;background:var(--pc);
  transition:width .6s var(--m3-standard)}
.m3-progress::after{content:"";flex:1 1 0;min-width:0;height:4px;border-radius:2px;
  background:radial-gradient(circle 2px at calc(100% - 2px) 50%,var(--pc) 95%,transparent 100%),var(--tc)}
.m3-progress.wavy::before{height:10px;border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5Q10-1 20 5T40 5' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") 0 50%/40px 10px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5Q10-1 20 5T40 5' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") 0 50%/40px 10px repeat-x;
  animation:m3-wave 1.2s linear infinite}
@keyframes m3-wave{to{-webkit-mask-position:40px 50%;mask-position:40px 50%}}
.m3-progress.indeterminate{overflow:hidden}
.m3-progress.indeterminate::before{position:absolute;left:0;top:50%;translate:0 -50%;width:40%;z-index:1;
  animation:m3-indeterminate 1.8s var(--m3-standard) infinite;box-shadow:0 0 0 4px var(--md-surface)}
.m3-progress.indeterminate.wavy::before{box-shadow:none;-webkit-mask-size:20px 10px;mask-size:20px 10px;
  animation:m3-indeterminate 1.8s var(--m3-standard) infinite,m3-wave-s .6s linear infinite}
.m3-progress.indeterminate::after{background:var(--tc)}
@keyframes m3-indeterminate{from{left:-40%}to{left:100%}}
@keyframes m3-wave-s{to{-webkit-mask-position:20px 50%;mask-position:20px 50%}}
.m3-progress-circle{--value:0;--size:40px;--pc:var(--md-primary);--tc:var(--md-secondary-container);--a:calc(var(--value) * 3.6deg);
  display:inline-block;flex:0 0 auto;width:var(--size);height:var(--size);border-radius:50%;vertical-align:middle;
  background:conic-gradient(var(--pc) 0 var(--a),transparent 0 calc(var(--a) + 14deg),var(--tc) 0 346deg,transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px))}
.m3-progress-circle.indeterminate{background:conic-gradient(var(--pc) 0 100deg,transparent 0);animation:m3-loader-spin 1s linear infinite}

/* ============================================================
   LOADING INDICATOR (M3 Expressive, shape-morphing): <span class="m3-loader" role="progressbar"
   aria-label="Loading"></span>. 48px container, a 38px shape that morphs every 650ms through
   SoftBurst, Cookie9, Pentagon, Pill, Sunny, Cookie4, Oval on a 0.6 / 200 spring, turning 90 degrees each time,
   while the whole indicator turns once every 4666ms (Google's Compose numbers).
   .contained = on a primary-container circle; .on-dark = logo orange; .sm (24px), .xs (18px), .lg (72px).
   ============================================================ */
.m3-loader{--loader-c:var(--md-primary);display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  vertical-align:middle;animation:m3-loader-spin 4666ms linear infinite}
.m3-loader::before{content:"";width:38px;height:38px;background:var(--loader-c);clip-path:var(--m3-loader-still);
  animation:m3-loader-morph 4550ms infinite,m3-loader-turn 2600ms infinite}
.m3-loader.contained{background:var(--md-primary-container);--loader-c:var(--md-on-primary-container)}
.m3-loader.on-dark{--loader-c:var(--md-inverse-primary)}
.m3-loader.sm{zoom:.5}
.m3-loader.xs{zoom:.375}
.m3-loader.lg{zoom:1.5}
@keyframes m3-loader-spin{to{rotate:360deg}}
@keyframes m3-loader-morph{
  0.0000%{clip-path:path('M19.0 0.0 L20.8 1.1 L22.1 3.3 L23.4 4.7 L24.9 4.7 L27.1 3.8 L29.5 3.3 L30.9 4.6 L30.9 7.1 L30.8 9.4 L31.5 10.6 L33.5 11.3 L36.0 11.9 L37.1 13.5 L36.2 15.6 L34.6 17.5 L34.0 19.0 L34.7 20.5 L36.3 22.4 L37.2 24.5 L36.0 26.0 L33.5 26.7 L31.5 27.4 L30.8 28.7 L30.9 30.9 L30.9 33.5 L29.5 34.7 L27.1 34.1 L24.9 33.2 L23.4 33.3 L22.1 34.8 L20.8 37.0 L19.0 38.0 L17.2 36.9 L15.9 34.7 L14.6 33.3 L13.1 33.3 L10.9 34.2 L8.5 34.7 L7.1 33.4 L7.1 30.9 L7.2 28.6 L6.5 27.4 L4.5 26.7 L2.0 26.1 L0.9 24.5 L1.8 22.4 L3.4 20.5 L4.0 19.0 L3.3 17.5 L1.7 15.6 L0.8 13.5 L2.0 12.0 L4.5 11.3 L6.5 10.6 L7.2 9.3 L7.1 7.1 L7.1 4.5 L8.5 3.3 L10.9 3.9 L13.1 4.8 L14.6 4.7 L15.9 3.2 L17.2 1.0Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  14.2857%{clip-path:path('M19.0 0.7 L20.8 1.0 L22.4 1.8 L23.9 2.9 L25.4 3.5 L27.2 3.7 L29.0 4.0 L30.7 4.8 L31.9 6.1 L32.8 7.7 L33.2 9.5 L33.9 11.0 L35.0 12.4 L36.4 13.7 L37.2 15.4 L37.5 17.2 L37.2 19.0 L36.4 20.7 L35.8 22.3 L35.8 24.1 L36.0 26.0 L35.6 27.9 L34.7 29.5 L33.3 30.7 L31.5 31.5 L30.0 32.4 L28.9 33.7 L27.7 35.3 L26.3 36.5 L24.5 37.2 L22.6 37.2 L20.7 36.7 L19.0 36.4 L17.3 36.7 L15.4 37.2 L13.5 37.2 L11.7 36.5 L10.3 35.3 L9.1 33.7 L8.0 32.4 L6.5 31.5 L4.7 30.7 L3.3 29.5 L2.4 27.9 L2.0 26.0 L2.2 24.1 L2.2 22.3 L1.6 20.7 L0.8 19.0 L0.5 17.2 L0.8 15.4 L1.6 13.7 L3.0 12.4 L4.1 11.0 L4.8 9.5 L5.2 7.7 L6.1 6.1 L7.3 4.8 L9.0 4.0 L10.8 3.7 L12.6 3.5 L14.1 2.9 L15.6 1.8 L17.2 1.0Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  28.5714%{clip-path:path('M19.0 2.3 L20.6 2.5 L22.2 3.1 L23.5 4.1 L24.8 5.0 L26.0 5.8 L27.2 6.7 L28.4 7.5 L29.6 8.4 L30.9 9.2 L32.2 10.2 L33.6 11.2 L35.1 12.3 L36.2 13.8 L36.7 15.5 L36.7 17.3 L36.3 19.0 L35.7 20.6 L35.2 22.2 L34.7 23.8 L34.2 25.3 L33.7 26.8 L33.1 28.4 L32.6 30.1 L31.9 31.9 L31.0 33.6 L29.6 34.8 L27.8 35.5 L25.9 35.7 L24.1 35.7 L22.3 35.7 L20.6 35.7 L19.0 35.7 L17.4 35.7 L15.7 35.7 L13.9 35.7 L12.1 35.7 L10.2 35.5 L8.4 34.8 L7.0 33.6 L6.1 31.9 L5.4 30.1 L4.9 28.4 L4.3 26.8 L3.8 25.3 L3.3 23.8 L2.8 22.2 L2.3 20.6 L1.7 19.0 L1.3 17.3 L1.3 15.5 L1.8 13.8 L2.9 12.3 L4.4 11.2 L5.8 10.2 L7.1 9.2 L8.4 8.4 L9.6 7.5 L10.8 6.7 L12.0 5.8 L13.2 5.0 L14.5 4.1 L15.8 3.1 L17.4 2.5Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  42.8571%{clip-path:path('M19.0 1.3 L20.8 1.1 L22.6 1.1 L24.3 1.4 L26.1 1.8 L27.9 2.4 L29.5 3.3 L31.0 4.4 L32.4 5.6 L33.6 7.0 L34.7 8.5 L35.6 10.1 L36.2 11.9 L36.6 13.7 L36.9 15.4 L36.9 17.2 L36.7 19.0 L36.3 20.7 L35.8 22.3 L35.0 23.9 L34.2 25.3 L33.1 26.6 L32.1 27.8 L31.0 28.9 L29.9 29.9 L28.9 31.0 L27.8 32.1 L26.6 33.1 L25.3 34.2 L23.9 35.0 L22.3 35.8 L20.7 36.3 L19.0 36.7 L17.2 36.9 L15.4 36.9 L13.7 36.6 L11.9 36.2 L10.1 35.6 L8.5 34.7 L7.0 33.6 L5.6 32.4 L4.4 31.0 L3.3 29.5 L2.4 27.9 L1.8 26.1 L1.4 24.3 L1.1 22.6 L1.1 20.8 L1.3 19.0 L1.7 17.3 L2.2 15.7 L3.0 14.1 L3.8 12.7 L4.9 11.4 L5.9 10.2 L7.0 9.1 L8.1 8.1 L9.1 7.0 L10.2 5.9 L11.4 4.9 L12.7 3.8 L14.1 3.0 L15.7 2.2 L17.3 1.7Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  57.1429%{clip-path:path('M19.0 0.0 L20.8 0.6 L22.4 2.0 L23.8 3.2 L25.2 4.1 L26.8 4.4 L28.7 4.5 L30.7 4.7 L32.4 5.6 L33.3 7.3 L33.5 9.3 L33.6 11.2 L33.9 12.8 L34.8 14.2 L36.0 15.6 L37.4 17.2 L38.0 19.0 L37.4 20.8 L36.0 22.4 L34.8 23.8 L33.9 25.2 L33.6 26.8 L33.5 28.7 L33.3 30.7 L32.4 32.4 L30.7 33.3 L28.7 33.5 L26.8 33.6 L25.2 33.9 L23.8 34.8 L22.4 36.0 L20.8 37.4 L19.0 38.0 L17.2 37.4 L15.6 36.0 L14.2 34.8 L12.8 33.9 L11.2 33.6 L9.3 33.5 L7.3 33.3 L5.6 32.4 L4.7 30.7 L4.5 28.7 L4.4 26.8 L4.1 25.2 L3.2 23.8 L2.0 22.4 L0.6 20.8 L0.0 19.0 L0.6 17.2 L2.0 15.6 L3.2 14.2 L4.1 12.8 L4.4 11.2 L4.5 9.3 L4.7 7.3 L5.6 5.6 L7.3 4.7 L9.3 4.5 L11.2 4.4 L12.8 4.1 L14.2 3.2 L15.6 2.0 L17.2 0.6Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  71.4286%{clip-path:path('M19.0 5.0 L20.4 4.9 L21.9 4.5 L23.6 3.7 L25.5 3.2 L27.4 3.2 L29.3 3.6 L31.0 4.4 L32.4 5.6 L33.6 7.0 L34.4 8.7 L34.8 10.6 L34.7 12.5 L34.3 14.4 L33.5 16.1 L33.1 17.6 L33.0 19.0 L33.1 20.4 L33.5 21.9 L34.3 23.6 L34.8 25.5 L34.8 27.4 L34.4 29.3 L33.6 31.0 L32.4 32.4 L31.0 33.6 L29.3 34.4 L27.4 34.8 L25.5 34.7 L23.6 34.3 L21.9 33.5 L20.4 33.1 L19.0 33.0 L17.6 33.1 L16.1 33.5 L14.4 34.3 L12.5 34.8 L10.6 34.8 L8.7 34.4 L7.0 33.6 L5.6 32.4 L4.4 31.0 L3.6 29.3 L3.2 27.4 L3.3 25.5 L3.7 23.6 L4.5 21.9 L4.9 20.4 L5.0 19.0 L4.9 17.6 L4.5 16.1 L3.7 14.4 L3.2 12.5 L3.2 10.6 L3.6 8.7 L4.4 7.0 L5.6 5.6 L7.0 4.4 L8.7 3.6 L10.6 3.2 L12.5 3.3 L14.4 3.7 L16.1 4.5 L17.6 4.9Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  85.7143%{clip-path:path('M19.0 4.5 L20.5 4.0 L22.1 3.5 L23.8 3.2 L25.6 3.1 L27.4 3.2 L29.3 3.6 L31.0 4.4 L32.4 5.6 L33.6 7.0 L34.4 8.7 L34.8 10.6 L34.9 12.4 L34.8 14.2 L34.5 15.9 L34.0 17.5 L33.5 19.0 L32.9 20.4 L32.2 21.6 L31.5 22.8 L30.7 23.9 L30.0 24.9 L29.2 25.8 L28.4 26.7 L27.6 27.6 L26.7 28.4 L25.8 29.2 L24.9 30.0 L23.9 30.7 L22.8 31.5 L21.6 32.2 L20.4 32.9 L19.0 33.5 L17.5 34.0 L15.9 34.5 L14.2 34.8 L12.4 34.9 L10.6 34.8 L8.7 34.4 L7.0 33.6 L5.6 32.4 L4.4 31.0 L3.6 29.3 L3.2 27.4 L3.1 25.6 L3.2 23.8 L3.5 22.1 L4.0 20.5 L4.5 19.0 L5.1 17.6 L5.8 16.4 L6.5 15.2 L7.3 14.1 L8.0 13.1 L8.8 12.2 L9.6 11.3 L10.4 10.4 L11.3 9.6 L12.2 8.8 L13.1 8.0 L14.1 7.3 L15.2 6.5 L16.4 5.8 L17.6 5.1Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  100.0000%{clip-path:path('M19.0 0.0 L20.8 1.1 L22.1 3.3 L23.4 4.7 L24.9 4.7 L27.1 3.8 L29.5 3.3 L30.9 4.6 L30.9 7.1 L30.8 9.4 L31.5 10.6 L33.5 11.3 L36.0 11.9 L37.1 13.5 L36.2 15.6 L34.6 17.5 L34.0 19.0 L34.7 20.5 L36.3 22.4 L37.2 24.5 L36.0 26.0 L33.5 26.7 L31.5 27.4 L30.8 28.7 L30.9 30.9 L30.9 33.5 L29.5 34.7 L27.1 34.1 L24.9 33.2 L23.4 33.3 L22.1 34.8 L20.8 37.0 L19.0 38.0 L17.2 36.9 L15.9 34.7 L14.6 33.3 L13.1 33.3 L10.9 34.2 L8.5 34.7 L7.1 33.4 L7.1 30.9 L7.2 28.6 L6.5 27.4 L4.5 26.7 L2.0 26.1 L0.9 24.5 L1.8 22.4 L3.4 20.5 L4.0 19.0 L3.3 17.5 L1.7 15.6 L0.8 13.5 L2.0 12.0 L4.5 11.3 L6.5 10.6 L7.2 9.3 L7.1 7.1 L7.1 4.5 L8.5 3.3 L10.9 3.9 L13.1 4.8 L14.6 4.7 L15.9 3.2 L17.2 1.0Z');animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
}
@keyframes m3-loader-turn{
  0%{rotate:0deg;animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  25%{rotate:90deg;animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  50%{rotate:180deg;animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  75%{rotate:270deg;animation-timing-function:linear(0.000 0.0%,0.054 3.8%,0.185 7.7%,0.352 11.5%,0.527 15.4%,0.690 19.2%,0.827 23.1%,0.934 26.9%,1.011 30.8%,1.060 34.6%,1.086 38.5%,1.095 42.3%,1.091 46.2%,1.079 50.0%,1.063 53.8%,1.047 57.7%,1.031 61.5%,1.018 65.4%,1.007 69.2%,1.000 73.1%,0.995 76.9%,0.992 80.8%,0.991 84.6%,0.991 88.5%,0.992 92.3%,0.994 96.2%,0.995 100.0%)}
  100%{rotate:360deg}
}

/* ============================================================
   SELECTION CONTROLS on native inputs (each is a 48x48 touch target; the visible control is drawn inside)
   <input type="checkbox" class="m3-switch" role="switch">  52x32 track, 16px handle, 24px with check when on,
                                                            28px while pressed, 40px state layer round the handle
   <input type="checkbox" class="m3-checkbox">              18px box, 2px corners
   <input type="radio" class="m3-radio">                    20px ring, 10px dot
   <input type="range" class="m3-slider">                   Expressive slider: 4px bar handle with 6px gaps;
                                                            sizes .s (24) .m (40) .l (56) .xl (96), default XS (16)
   ============================================================ */
.m3-switch{-webkit-appearance:none;appearance:none;position:relative;box-sizing:border-box;flex:0 0 52px;width:52px;height:48px;margin:0;padding:0;
  border:8px solid transparent;border-left:0;border-right:0;border-radius:16px / 24px;background:var(--md-surface-highest);background-clip:padding-box;
  box-shadow:inset 0 0 0 2px var(--md-outline);cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s var(--m-effects),box-shadow .15s var(--m-effects)}
.m3-switch::before{content:"";position:absolute;top:50%;left:16px;width:16px;height:16px;translate:-50% -50%;border-radius:50%;
  background:var(--md-outline) center/16px no-repeat;
  transition:left var(--m3-motion-fast-spatial),width var(--m3-motion-fast-spatial),height var(--m3-motion-fast-spatial),background-color .15s var(--m-effects),box-shadow 15ms linear}
.m3-switch:checked{background-color:var(--md-primary);box-shadow:none}
.m3-switch:checked::before{left:36px;width:24px;height:24px;background-color:var(--md-on-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25511' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.3 4.2L19 7.2'/%3E%3C/svg%3E")}
.m3-switch:active::before{width:28px;height:28px}
@media(hover:hover){
  .m3-switch:hover::before{box-shadow:0 0 0 12px rgba(26,22,17,.08)}
  .m3-switch:checked:hover::before{box-shadow:0 0 0 8px rgba(194,85,17,.08)}
}
.m3-switch:disabled{opacity:.38;cursor:default}

.m3-checkbox,.m3-radio{-webkit-appearance:none;appearance:none;position:relative;box-sizing:border-box;flex:0 0 48px;width:48px;height:48px;margin:0;padding:0;
  cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;--sl:transparent;
  transition:box-shadow .15s var(--m-effects),background-color .15s var(--m-effects)}
.m3-checkbox{--fill:transparent;--mark:none;--ring:var(--md-on-surface-variant);border:15px solid transparent;border-radius:17px;
  background:var(--mark) center/18px no-repeat padding-box,linear-gradient(var(--fill),var(--fill)) padding-box,
             radial-gradient(circle 20px,var(--sl) 98%,transparent 100%) border-box border-box;
  box-shadow:inset 0 0 0 2px var(--ring)}
.m3-checkbox:checked{--fill:var(--md-primary);--ring:var(--md-primary);
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.4l4 4L18 8.6'/%3E%3C/svg%3E")}
.m3-checkbox:indeterminate{--fill:var(--md-primary);--ring:var(--md-primary);
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.m3-checkbox:focus-visible,.m3-radio:focus-visible{outline:3px solid var(--md-primary);outline-offset:-13px}
.m3-checkbox[aria-invalid="true"]{--ring:var(--md-error)}
.m3-radio{--dot:transparent;--ring:var(--md-on-surface-variant);border:14px solid transparent;border-radius:50%;
  background:radial-gradient(circle 5px,var(--dot) 92%,transparent 100%) padding-box,
             radial-gradient(circle 20px,var(--sl) 98%,transparent 100%) border-box border-box;
  box-shadow:inset 0 0 0 2px var(--ring)}
.m3-radio:checked{--dot:var(--md-primary);--ring:var(--md-primary)}
@media(hover:hover){
  .m3-checkbox:hover,.m3-radio:hover{--sl:rgba(26,22,17,.08)}
  .m3-checkbox:checked:hover,.m3-radio:checked:hover{--sl:rgba(194,85,17,.08)}
}
.m3-checkbox:active,.m3-radio:active{--sl:rgba(194,85,17,.10)}
.m3-checkbox:disabled,.m3-radio:disabled{opacity:.38;cursor:default}
/* a whole row as the target: <label class="m3-check-row"><input class="m3-checkbox"> Text</label> */
.m3-check-row{display:flex;align-items:center;gap:4px;min-height:48px;cursor:pointer;font:var(--type-body-large);color:var(--md-on-surface)}

.m3-slider{--v:50%;--track:16px;--track-r:8px;--handle:44px;--pc:var(--md-primary);--tc:var(--md-secondary-container);--stop:var(--md-on-secondary-container);
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:max(48px,var(--handle));margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.m3-slider:focus-visible{outline:none}
.m3-slider::-webkit-slider-runnable-track{height:var(--track);border-radius:var(--track-r);
  background:radial-gradient(circle 2px at calc(100% - 6px) 50%,var(--stop) 95%,transparent 100%),
             linear-gradient(to right,var(--pc) 0 calc(var(--v) - 8px),transparent 0 calc(var(--v) + 8px),var(--tc) 0)}
.m3-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4px;height:var(--handle);border:0;border-radius:2px;background:var(--pc);
  margin-top:calc((var(--track) - var(--handle)) / 2);transition:width .15s var(--m-effects)}
.m3-slider:active::-webkit-slider-thumb,.m3-slider:focus-visible::-webkit-slider-thumb{width:2px}
.m3-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--md-surface),0 0 0 6px var(--md-primary)}
.m3-slider::-moz-range-track{height:var(--track);border-radius:var(--track-r);background:var(--tc)}
.m3-slider::-moz-range-progress{height:var(--track);border-radius:var(--track-r);background:var(--pc)}
.m3-slider::-moz-range-thumb{width:4px;height:var(--handle);border:0;border-radius:2px;background:var(--pc);box-shadow:0 0 0 6px var(--md-surface)}
.m3-slider.s{--track:24px;--track-r:8px;--handle:44px}
.m3-slider.m{--track:40px;--track-r:12px;--handle:52px}
.m3-slider.l{--track:56px;--track-r:16px;--handle:68px}
.m3-slider.xl{--track:96px;--track-r:28px;--handle:108px}
.m3-slider:disabled{opacity:.38;cursor:default}

/* ============================================================
   SNACKBAR: window.m3Snackbar('Copied', {action:'Undo', onAction:fn, timeout:4000, close:true}) from pixel.js.
   Burnt black, 4px corners, level 3, body-medium; the action in the logo orange. Above the phone nav bar.
   ============================================================ */
.m3-snackbar{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:1000;translate:-50% 0;
  display:flex;align-items:center;gap:4px;min-height:48px;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:4px 4px 4px 16px;
  border-radius:var(--sh-xs);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:var(--el-3);
  font:var(--type-body-medium);opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .2s var(--m-effects),transform var(--m3-motion-default-spatial)}
.m3-snackbar.show{opacity:1;transform:none;pointer-events:auto}
.m3-snackbar-text{flex:1 1 auto;padding:10px 8px 10px 0}
.m3-snackbar .btn{color:var(--md-inverse-primary);background:transparent;--btn-px:12px;min-height:48px;height:48px}
.m3-snackbar .m3-icon-btn{--ib-fg:var(--md-inverse-on-surface)}
@media(max-width:760px){
  .m3-snackbar{left:16px;right:16px;translate:none;width:auto;max-width:none;bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ============================================================
   TOOLTIPS: data-tooltip="Copy tracking number" on any control (plain: burnt black, body-small, 4px corners);
   add data-tooltip-title="..." for a rich tooltip (surface-container, 12px corners, level 2). pixel.js shows it
   after a 500ms hover or on keyboard focus, never on touch.
   ============================================================ */
.m3-tooltip{position:fixed;z-index:1100;left:0;top:0;max-width:200px;min-height:24px;padding:4px 8px;border-radius:var(--sh-xs);
  background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);font:var(--type-body-small);pointer-events:none;
  opacity:0;transform:scale(.9);transform-origin:var(--tt-origin,50% 100%);transition:opacity .15s var(--m-effects),transform .15s var(--m-effects)}
.m3-tooltip.show{opacity:1;transform:none}
.m3-tooltip.rich{max-width:312px;padding:12px 16px 8px;border-radius:var(--sh-md);background:var(--md-surface-container);
  color:var(--md-on-surface-variant);box-shadow:var(--el-2);font:var(--type-body-medium)}
.m3-tooltip.rich b{display:block;margin-bottom:4px;font:var(--type-title-small);color:var(--md-on-surface-variant)}

/* ============================================================
   BADGES: <span class="m3-badge">3</span> (large: 16px, error colour, label-small) or <span class="m3-badge dot"></span>
   (small: 6px). Inside .m3-badge-host (wrap an icon) it sits on the icon's top-trailing corner.
   ============================================================ */
.m3-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:16px;max-width:34px;height:16px;padding:0 4px;
  border-radius:var(--sh-full);background:var(--md-error);color:var(--md-on-error);font:700 11px/16px var(--font-plain);overflow:hidden;white-space:nowrap}
.m3-badge.dot,.m3-badge:empty{min-width:6px;width:6px;height:6px;padding:0}
.m3-badge-host{position:relative;display:inline-flex}
.m3-badge-host>.m3-badge{position:absolute;left:calc(100% - 12px);top:-2px}
.m3-badge-host>.m3-badge:is(.dot,:empty){left:calc(100% - 6px);top:0}

/* ============================================================
   DIVIDERS: <hr class="m3-divider"> 1px outline-variant; .inset (16px start), .middle (16px both), .vertical
   ============================================================ */
.m3-divider{display:block;height:1px;margin:0;border:0;background:var(--md-outline-variant);flex:0 0 auto}
.m3-divider.inset{margin-left:16px}
.m3-divider.middle{margin-inline:16px}
.m3-divider.vertical{width:1px;height:auto;align-self:stretch}
:is(.bg-ink,.cta-band,.m3-inverse,.footer) .m3-divider{background:rgba(246,239,230,.16)}

/* ============================================================
   MENUS (Expressive): <div class="m3-menu" id="x" role="menu"> with .m3-menu-item children; open it with
   <button data-menu="x" aria-haspopup="menu">. 16px corners, level 2, surface-container-low; items 44px
   (48px on phones), label-large, 20px icons; the first and last items take 12px outer corners; the selected item
   (aria-checked="true" or .selected) is tertiary-container. .vibrant = a tertiary-container menu.
   pixel.js places it under its trigger, closes it on Escape, outside clicks and item clicks, and moves focus
   with the arrow keys.
   ============================================================ */
.m3-menu{position:fixed;z-index:1050;left:0;top:0;display:flex;flex-direction:column;min-width:112px;max-width:280px;margin:0;padding:4px;list-style:none;
  border-radius:var(--sh-lg);background:var(--md-surface-low);color:var(--md-on-surface);box-shadow:var(--el-2);
  opacity:0;visibility:hidden;transform:scaleY(.85);transform-origin:top center;
  transition:opacity .15s var(--m-effects),transform var(--m3-motion-default-spatial),visibility 0s linear .2s}
.m3-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .15s var(--m-effects),transform var(--m3-motion-default-spatial),visibility 0s}
.m3-menu-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 16px;margin:0;border:0;border-radius:4px;
  background:transparent;color:inherit;font:var(--type-label-large);text-align:left;text-decoration:none;cursor:pointer;overflow:hidden;
  transition:border-radius var(--m3-motion-fast-spatial)}
.m3-menu-item:first-child{border-top-left-radius:12px;border-top-right-radius:12px}
.m3-menu-item:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.m3-menu-item::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.m3-menu-item:hover::after{opacity:var(--md-state-hover)}}
.m3-menu-item:focus-visible::after,.m3-menu-item:active::after{opacity:var(--md-state-press)}
.m3-menu-item svg{width:20px;height:20px;flex:0 0 auto;color:var(--md-on-surface-variant)}
.m3-menu-item:is([aria-checked="true"],.selected){background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border-radius:12px}
.m3-menu-item:is([aria-checked="true"],.selected) svg{color:inherit}
.m3-menu-support{display:block;font:var(--type-body-small);color:var(--md-on-surface-variant)}
.m3-menu-trail{margin-left:auto;font:var(--type-label-large);color:var(--md-on-surface-variant)}
.m3-menu .m3-divider{margin:4px 0}
.m3-menu.vibrant{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.m3-menu.vibrant .m3-menu-item:is([aria-checked="true"],.selected){background:var(--md-tertiary);color:var(--md-on-tertiary)}
@media(max-width:760px){.m3-menu-item{min-height:48px}}

/* ============================================================
   DIALOG and BOTTOM SHEET on native <dialog>:
   <dialog class="m3-dialog" id="d"> (basic: 28px, surface-container-high, level 3, 24px padding, 280-560px)
   <dialog class="m3-sheet" id="s"> (bottom sheet: 28px top corners, drag handle .m3-sheet-handle)
   Open with <button data-dialog-open="d">, close with [data-dialog-close] or a click on the scrim.
   ============================================================ */
dialog.m3-dialog{box-sizing:border-box;min-width:280px;max-width:min(560px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:24px;border:0;
  border-radius:var(--sh-xl);background:var(--md-surface-high);color:var(--md-on-surface);box-shadow:var(--el-3);overflow:auto}
dialog.m3-dialog[open]{animation:dialogIn .5s var(--m-spring)}
dialog.m3-dialog::backdrop,dialog.m3-sheet::backdrop{background:var(--md-scrim)}
.m3-dialog-icon{display:block;width:24px;height:24px;margin:0 auto 16px;color:var(--md-secondary)}
.m3-dialog-title{margin:0 0 16px;font:var(--type-headline-small);color:var(--md-on-surface)}
.m3-dialog-icon + .m3-dialog-title{text-align:center}
.m3-dialog p{font:var(--type-body-medium);color:var(--md-on-surface-variant)}
.m3-dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:24px}
dialog.m3-sheet{box-sizing:border-box;position:fixed;inset:auto 0 0 0;width:100%;max-width:640px;max-height:calc(100dvh - 72px);margin:0 auto;padding:0 16px 24px;
  border:0;border-radius:var(--sh-xl) var(--sh-xl) 0 0;background:var(--md-surface-low);color:var(--md-on-surface);box-shadow:var(--el-1);overflow:auto}
dialog.m3-sheet[open]{animation:sheetIn .5s var(--m-spring)}
.m3-sheet-handle{display:block;width:32px;height:4px;margin:22px auto;border-radius:2px;background:var(--md-on-surface-variant);opacity:.4}

/* ============================================================
   BENTO GRID: <div class="m3-bento"> with tiles; 12 columns on wide screens, 6 on medium, 1 on phones.
   Tiles: .span-3 .span-4 .span-6 .span-8 .span-12 and .row-2; .m3-bento-tile = a 28px tonal tile.
   ============================================================ */
.m3-bento{display:grid;gap:8px;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(120px,auto);grid-auto-flow:dense}
.m3-bento>*{grid-column:span 4;min-width:0}
.m3-bento>.span-3{grid-column:span 3}.m3-bento>.span-4{grid-column:span 4}.m3-bento>.span-5{grid-column:span 5}
.m3-bento>.span-6{grid-column:span 6}.m3-bento>.span-7{grid-column:span 7}.m3-bento>.span-8{grid-column:span 8}
.m3-bento>.span-12{grid-column:1 / -1}.m3-bento>.row-2{grid-row:span 2}
.m3-bento-tile{position:relative;overflow:hidden;padding:24px;border-radius:var(--sh-xl);background:var(--md-surface-lowest);color:var(--md-on-surface)}
.m3-bento-tile.tonal{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.m3-bento-tile.inverse{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}
@media(max-width:839px){
  .m3-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .m3-bento>*,.m3-bento>[class*="span-"]{grid-column:span 3}
  .m3-bento>.span-8,.m3-bento>.span-12,.m3-bento>.span-6.wide-m{grid-column:1 / -1}
}
@media(max-width:599px){
  .m3-bento{grid-template-columns:minmax(0,1fr)}
  .m3-bento>*,.m3-bento>[class*="span-"]{grid-column:1 / -1}
  .m3-bento>.row-2{grid-row:auto}
}

/* ============================================================
   ICON IN A SHAPE: <span class="ic-shape cookie9"><?= icon('Bag') ?></span>. The shape is a mask on ::before, so the
   icon stays upright when the shape turns (.spin turns it slowly; a.card:hover turns it a little).
   Sizes .sm 40, default 48, .lg 56, .xl 72. Colours: tonal primary by default, .primary .secondary .tertiary
   .success .info .inverse .surface. Shapes: every --shape-* name (cookie4 cookie6 cookie9 cookie7 cookie12 sunny
   very-sunny clover clover8 flower scallop soft-burst burst boom soft-boom puffy puffy-diamond pentagon gem pill
   oval circle square triangle diamond arch semicircle fan arrow slanted clamshell ghostish bun heart).
   ============================================================ */
.ic-shape{--ics:48px;--ic-shape:var(--shape-cookie9);--ics-bg:var(--md-primary-container);
  position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:0 0 var(--ics);width:var(--ics);height:var(--ics);
  color:var(--md-on-primary-container)}
.ic-shape::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ics-bg);
  -webkit-mask:var(--ic-shape) center/contain no-repeat;mask:var(--ic-shape) center/contain no-repeat;transition:rotate .7s var(--m-spring)}
.ic-shape svg{width:calc(var(--ics) * .5);height:calc(var(--ics) * .5)}
.ic-shape.sm{--ics:40px}.ic-shape.lg{--ics:56px}.ic-shape.xl{--ics:72px}
.ic-shape.primary{--ics-bg:var(--md-primary);color:var(--md-on-primary)}
.ic-shape.secondary{--ics-bg:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.ic-shape.tertiary{--ics-bg:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.ic-shape.success{--ics-bg:var(--md-success-container);color:var(--md-on-success-container)}
.ic-shape.info{--ics-bg:var(--md-info-container);color:var(--md-on-info-container)}
.ic-shape.inverse{--ics-bg:var(--md-inverse-surface);color:var(--md-inverse-primary)}
.ic-shape.surface{--ics-bg:var(--md-surface-high);color:var(--md-on-surface-variant)}
.ic-shape.spin::before{animation:shapeSpin 40s linear infinite}
@media(hover:hover) and (pointer:fine){a:hover .ic-shape::before,.ic-shape.hover-turn:hover::before{rotate:45deg}}
.ic-shape.arch{--ic-shape:var(--shape-arch)}
.ic-shape.arrow{--ic-shape:var(--shape-arrow)}
.ic-shape.boom{--ic-shape:var(--shape-boom)}
.ic-shape.bun{--ic-shape:var(--shape-bun)}
.ic-shape.burst{--ic-shape:var(--shape-burst)}
.ic-shape.circle{--ic-shape:var(--shape-circle)}
.ic-shape.clamshell{--ic-shape:var(--shape-clamshell)}
.ic-shape.clover{--ic-shape:var(--shape-clover)}
.ic-shape.clover8{--ic-shape:var(--shape-clover8)}
.ic-shape.cookie12{--ic-shape:var(--shape-cookie12)}
.ic-shape.cookie4{--ic-shape:var(--shape-cookie4)}
.ic-shape.cookie6{--ic-shape:var(--shape-cookie6)}
.ic-shape.cookie7{--ic-shape:var(--shape-cookie7)}
.ic-shape.cookie9{--ic-shape:var(--shape-cookie9)}
.ic-shape.diamond{--ic-shape:var(--shape-diamond)}
.ic-shape.fan{--ic-shape:var(--shape-fan)}
.ic-shape.flower{--ic-shape:var(--shape-flower)}
.ic-shape.gem{--ic-shape:var(--shape-gem)}
.ic-shape.ghostish{--ic-shape:var(--shape-ghostish)}
.ic-shape.heart{--ic-shape:var(--shape-heart)}
.ic-shape.oval{--ic-shape:var(--shape-oval)}
.ic-shape.pentagon{--ic-shape:var(--shape-pentagon)}
.ic-shape.pill{--ic-shape:var(--shape-pill)}
.ic-shape.puffy{--ic-shape:var(--shape-puffy)}
.ic-shape.puffy-diamond{--ic-shape:var(--shape-puffy-diamond)}
.ic-shape.scallop{--ic-shape:var(--shape-scallop)}
.ic-shape.semicircle{--ic-shape:var(--shape-semicircle)}
.ic-shape.slanted{--ic-shape:var(--shape-slanted)}
.ic-shape.soft-boom{--ic-shape:var(--shape-soft-boom)}
.ic-shape.soft-burst{--ic-shape:var(--shape-soft-burst)}
.ic-shape.square{--ic-shape:var(--shape-square)}
.ic-shape.sunny{--ic-shape:var(--shape-sunny)}
.ic-shape.triangle{--ic-shape:var(--shape-triangle)}
.ic-shape.very-sunny{--ic-shape:var(--shape-very-sunny)}

/* ============================================================
   SKELETON: .m3-skeleton (a tonal block that pulses, no moving gradient)
   ============================================================ */
.m3-skeleton{display:block;min-height:1em;border-radius:var(--sh-sm);background:var(--md-surface-high);animation:m3-pulse 1.6s var(--m3-standard) infinite}
@keyframes m3-pulse{50%{opacity:.5}}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.cta-band::before,.cta-band::after,.page-head::before,.page-head::after{animation:none}
  .ripple{display:none}
  html .state.show,html .acc-form.active,html .dash-panel.active,.m3-through{animation:none}
  .m3-loader{animation-duration:9332ms}
  .m3-loader::before{animation:none}
  .m3-progress::before,.m3-progress-circle,.m3-carousel-item{animation:none}
  .m3-snackbar,.m3-menu,.m3-tooltip{transition-duration:.01ms}
}

/* ============================================================
   PAGES: the styles each page carries in its own <style> come after this file, so these
   rules start at html to outrank them.
   ============================================================ */
/* shared: labels in sentence case, filled rounded fields, pill buttons */
/* (the text fields of .fld, .cr-field, .cc-field, .profile-form are styled by TEXT FIELDS above) */
html .profile-form label{text-transform:none}
html .stmt-input-wrap input{border:2px solid transparent;border-radius:var(--sh-lg);background:var(--md-surface-high);box-shadow:none}
html .stmt-input-wrap input:focus{border-color:var(--md-primary);background:var(--md-surface-lowest);box-shadow:none}
/* State changes between results, forms and panels share one fade-through on the spatial spring (A62) */
@keyframes m3Through{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
html .state.show,html .acc-form.active,html .dash-panel.active,.m3-through{animation:m3Through .45s var(--m-spring) both}
html .acc-btn,html .profile-save,html .track-row button,html .stmt-input-wrap button{min-height:52px;border-radius:var(--sh-full);background:var(--md-primary);
  box-shadow:none;transform:none;transition:border-radius .45s var(--m-spring-fast),box-shadow .2s;position:relative;overflow:hidden}
html .acc-btn:hover,html .profile-save:hover,html .track-row button:hover{background:var(--md-primary);transform:none;box-shadow:var(--el-1)}
html .acc-btn:active,html .profile-save:active,html .track-row button:active{transform:none;border-radius:var(--sh-md)}
html .status-chip{border-radius:var(--sh-sm);padding:4px 10px}
html .skel,html .skl-row,html .skl-dot{border-radius:var(--sh-full)}

/* account */
html .acc-page{background:var(--md-surface)}
html .acc-card{border:0;border-radius:var(--sh-xl);background:var(--md-surface-lowest);box-shadow:var(--el-1);animation:dialogIn .5s var(--m-spring) both}
html .acc-card::before{display:none}
html .acc-logo img{box-shadow:none;object-fit:contain}
html .acc-tabs{background:var(--md-surface-high);padding:4px}
html .acc-tab{height:44px;padding:0 12px}
html .acc-tab.active{background:var(--md-surface-lowest);box-shadow:var(--el-1)}
html .acc-err{border:0;border-radius:var(--sh-md)}
html .welcome-pts{border:0;border-radius:var(--sh-lg);background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* track */
html .search-card,html .notfound,html .skl,html .result-card{border:0;border-radius:var(--sh-xl);background:var(--md-surface-lowest);box-shadow:var(--el-1)}
html .sc-eyebrow{letter-spacing:.01em;text-transform:none;font-size:13px;color:var(--md-primary)}
html .search-field{border:2px solid transparent;border-radius:var(--sh-full);background:var(--md-surface-high);padding:6px 6px 6px 18px}
html .search-field:focus-within{border-color:var(--md-primary);box-shadow:none;background:var(--md-surface-lowest)}
html .search-field .btn{height:44px}
html .demo-link{color:var(--md-primary)}
html .recent-label,html .rc-trk-label,html .card-title,html .meta-item .lbl,html .route-head .rt-title,html .route-end .re-lbl{
  letter-spacing:.01em;text-transform:none;font-size:12.5px}
html .recent-chip{border:0;border-radius:var(--sh-sm);background:var(--md-surface-high)}
html .recent-chip:hover{background:var(--md-secondary-container)}
html .notfound .tips{border-radius:var(--sh-lg);background:var(--md-surface-low)}
html .rc-top{background:var(--md-surface-low);border-bottom:0}
html .copy-btn{border-radius:50%;background:var(--md-surface-high)}
html .eta{border:0;border-radius:var(--sh-lg)}
html .eta-ic{border-radius:50%;box-shadow:none}
html .route{border:0;border-radius:var(--sh-xl);background:var(--md-surface-low)}
html .route-head{border-bottom:1px solid var(--md-outline-variant)}
html .meta-card,html .courier-card{border:0;border-radius:var(--sh-xl);background:var(--md-surface-low)}
html .courier-av{border-radius:50%;background:var(--md-inverse-surface);color:var(--md-bright)}
html .banner{border-radius:var(--sh-lg)}
html .banner-note{border-left:0;background:var(--md-primary-container);color:var(--md-on-primary-container)}
html .rc-actions{background:var(--md-surface-low);border-top:0}
html .prog-track::before,html .prog2{background:var(--md-surface-high)}
html .prog-dot{border-color:var(--md-surface-high)}
/* the auto-refresh toggle as a Material switch */
html .switch{width:52px;height:32px;flex:0 0 52px;border-radius:16px;background:var(--md-surface-highest);box-shadow:inset 0 0 0 2px var(--md-outline)}
html .switch::after{top:8px;left:8px;width:16px;height:16px;background:var(--md-outline);
  transition:top var(--m3-motion-fast-spatial),left var(--m3-motion-fast-spatial),width var(--m3-motion-fast-spatial),height var(--m3-motion-fast-spatial),background-color .15s var(--m-effects),box-shadow .15s linear}
html .switch.on{background:var(--md-primary);box-shadow:none}
html .switch.on::after{top:4px;left:24px;width:24px;height:24px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25511' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.3 4.2L19 7.2'/%3E%3C/svg%3E") center/16px no-repeat}
/* pressed: the handle grows to 28px; hover/focus: a 40px state layer round the handle (A46) */
html .switch:active::after{width:28px;height:28px;top:2px;left:2px}
html .switch.on:active::after{left:22px}
html .switch:hover::after{box-shadow:0 0 0 8px rgba(26,22,17,.08)}
html .switch.on:hover::after{box-shadow:0 0 0 8px rgba(194,85,17,.12)}
html .switch:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}

/* dashboard */
html .dash-shell{background:var(--md-surface)}
html .dash-user,html .dash-nav,html .pts-card,html .orders-table-wrap{border:0;border-radius:var(--sh-xl);background:var(--md-surface-lowest);box-shadow:none}
html .dash-avatar{background:var(--md-inverse-surface);color:var(--md-bright)}
html .dash-nav{padding:8px;gap:2px}
html .dash-nav-btn{min-height:52px;border-radius:var(--sh-full);font-weight:700}
html .dash-nav-btn:hover{background:rgba(26,22,17,.06)}
html .dash-nav-btn.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
html .pts-card:hover{transform:none;box-shadow:var(--el-1)}
html .pts-card-lbl,html .orders-table th,html .lp-table th,html .stmt-table th,html .cstat-lbl{letter-spacing:.01em;text-transform:none;font-size:12.5px}
html .orders-table th,html .lp-table th{background:var(--md-surface-low)}
html .pts-bar-track{background:var(--md-surface-high)}
html .pts-bar-fill{background:var(--md-primary)}
html .btn-sm-outline,html .logout-btn,html .btn-export{min-height:40px;border-radius:var(--sh-full);border:1px solid var(--md-outline);background:transparent;transform:none}
html .btn-sm-outline:hover,html .btn-export:hover{background:rgba(26,22,17,.06);border-color:var(--md-outline);transform:none}
html .track-row input{border:2px solid transparent;border-radius:var(--sh-full);background:var(--md-surface-high);box-shadow:none}
html .track-row input:focus{border-color:var(--md-primary);background:var(--md-surface-lowest);box-shadow:none}
html .profile-msg{border-radius:var(--sh-md)}

/* careers */
html .cr-hero-meta .l,html .cr-eyebrow,html .cr-strip .l{letter-spacing:.01em;text-transform:none;font-size:12.5px}
html .cr-filters button{height:36px;padding:0 14px;border-radius:var(--sh-sm);border:1px solid var(--md-outline-variant)}
html .cr-filters button[aria-pressed="true"]{background:var(--md-secondary-container);border-color:transparent;color:var(--md-on-secondary-container)}
html .cr-strip,html .cr-apply{border:0;border-radius:var(--sh-xl);background:var(--md-surface-lowest)}
html .cr-file{border-radius:var(--sh-lg)}
html .cr-msg{border-radius:var(--sh-md)}

/* statement */
html .stmt-hero{background:var(--md-surface)}
html .client-card,html .pts-progress,html .stmt-table-wrap{border:0;border-radius:var(--sh-xl);background:var(--md-surface-lowest);box-shadow:none}
html .stmt-table th{background:var(--md-surface-low)}
html .tier-badge{border-radius:var(--sh-xl)}
html .tier-name{letter-spacing:.02em}


/* ============================================================
   AREA: CHROME (the full Pixel pass, 2026-10-22)
   ============================================================ */
/* chrome: the full Pixel pass (2026-10-21), merged into pixel.css when done */
/* ============================================================
   CHROME (every page): the info bar, the top app bar, the branch control, the navigation drawer, the navigation
   bar, the footer, the order dialog's WhatsApp link, the chat and the first-visit branch chooser.
   Loaded after pixel.css. The chat widget's own <style> comes later in the page, so chat rules start at html.
   ============================================================ */

/* Small top app bar: 64px (X35) */
:root{--nav-h:64px}

/* ---------- info bar: desktop only, a slim burnt black strip (X3, X5) ---------- */
.topbar{font:500 12px/16px var(--font-plain);letter-spacing:.02em;color:var(--md-inverse-variant)}
.topbar .wrap{min-height:40px;flex-wrap:nowrap;padding-block:4px;gap:16px}
.topbar-info{gap:20px;flex-wrap:nowrap;min-width:0}
.topbar-info span{gap:8px;white-space:nowrap;color:var(--md-inverse-variant)}
.topbar-info svg{width:16px;height:16px;opacity:1;color:var(--md-bright)}
.topbar-info a{color:var(--md-inverse-on-surface)}
.topbar-info a:hover{color:var(--md-bright);text-decoration:underline;text-underline-offset:3px}
.topbar-right{gap:8px;flex:0 0 auto}
.topbar-socials{gap:0}
.topbar-socials a{width:36px;height:36px;border-radius:50%;background:transparent;color:var(--md-inverse-on-surface);transform:none!important}
.topbar-socials a:hover{background:rgba(246,239,230,.10)}
.topbar-socials svg{width:16px;height:16px}
@media(max-width:1120px){.topbar-info span:not(:first-child){display:none}}
@media(max-width:980px){.topbar{display:none}}

/* ---------- the branch: a connected button group (X6, X7) ----------
   Used in the info bar (.on-dark), the drawer (.in-drawer) and the footer (.on-dark.in-footer). The buttons carry
   .btn-tonal so the core group's default colours stay out of the way; the selected one rounds out and shows a check. */
.region-group{flex-wrap:nowrap}
.region-group>.btn{font:var(--type-label-large);letter-spacing:.01em;gap:4px;white-space:nowrap;flex:0 0 auto}
.region-group>.btn .m3-check-ic{width:18px;height:18px;margin-left:-4px}
.region-group>.btn-tonal,.region-group>.btn{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.region-group>.btn[aria-pressed="true"]{background:var(--md-primary);color:var(--md-on-primary);font-weight:700}
.region-group.on-dark>.btn{background:var(--md-inverse-surface-2);color:var(--md-inverse-on-surface)}
.region-group.on-dark>.btn[aria-pressed="true"]{background:var(--md-bright);color:#1A1611}
.region-group.in-drawer{width:100%}
.region-group.in-drawer>.btn{--btn-h:40px;flex:1 1 0;min-width:0}

/* ---------- top app bar (X35, X36, X8, X9, X38, X58) ---------- */
.nav{background:var(--md-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:0;
  transition:background-color .25s var(--m-effects),transform .35s var(--m3-emphasized-decel)}
.nav.is-stuck{background:var(--md-surface-container);box-shadow:none}
.nav .wrap{min-height:var(--nav-h);gap:16px}
.nav .brand{position:relative;border-radius:50%;padding:4px;margin:-4px;flex:0 0 auto}
.nav .brand::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--md-on-surface);opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.nav .brand:hover::after{opacity:var(--md-state-hover)}}
.nav .brand:active::after{opacity:var(--md-state-press)}
.brand:hover .brand-mark,.nav .brand:hover .brand-mark{transform:none}
.nav .brand-mark{width:40px;height:40px;flex:0 0 40px}
/* page links: the pill stays on the current page; a hovered link gets its own state layer */
.nav-links a{overflow:hidden;isolation:isolate}
.nav-links a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.nav-links a:hover::after{opacity:var(--md-state-hover)}}
.nav-links a:active::after{opacity:var(--md-state-press)}
.nav-links a:hover:not(.active){color:var(--md-on-surface)}
.nav-links a.active{font-weight:700}
.nav-cta{gap:8px}
.nav-cta .btn{--btn-h:40px;--btn-px:16px;--btn-icon:18px}
.nav-cta .btn svg{width:18px;height:18px}
.nav-login[aria-current="page"]{background:var(--md-secondary);color:var(--md-on-secondary)}
@media(min-width:981px) and (max-width:1100px){.nav-links a{padding:0 12px}.nav .wrap{gap:8px}}
/* the page's name: phones and tablets, once the page's own title has scrolled under the bar */
.nav-title{display:none}
/* the branch as a chip with a menu: phones and tablets (the info bar carries it on desktop) */
.region-chip{display:none}
.region-chip.m3-chip{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none;padding:0 12px;gap:4px}
.region-chip.m3-chip::after{border-radius:inherit}
.region-chip.m3-chip>svg:first-child{margin-left:-4px}
.region-chip.m3-chip>svg:last-child{margin-right:-4px}
.region-chip .region-chip-chev{transition:transform var(--m3-motion-fast-spatial)}
.region-chip[aria-expanded="true"] .region-chip-chev{transform:rotate(180deg)}
@media(max-width:980px){
  .nav .wrap{justify-content:flex-start}
  .nav-title{display:block;flex:1 1 auto;min-width:0;font:var(--type-title-large);font-weight:600;color:var(--md-on-surface);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .2s var(--m-effects),transform var(--m3-motion-default-spatial)}
  .nav.has-title .nav-title{opacity:1;transform:none}
  .nav-cta{margin-left:auto}
  .region-chip{display:inline-flex}
}
@media(max-width:760px){
  .nav .wrap{gap:12px}
  .nav-login{display:none}
  /* the chip's visible container is 40px inside its 48px target, level with the 48px Order Now beside it */
  .region-chip.m3-chip{height:48px;border-top-width:4px;border-bottom-width:4px;border-radius:12px / 16px}
}
@media(max-width:599px){
  .nav-title{font-size:20px}
  .nav.has-title .region-chip{display:none}
}
@media(max-width:374px){
  .region-chip.m3-chip{padding:0 8px}
  .region-chip .region-chip-chev{display:none}
}

/* the branch menu (from the chip) */
.region-menu{min-width:208px}
.region-menu .m3-menu-item{min-height:56px}
.region-menu-text{display:flex;flex-direction:column;align-items:flex-start;line-height:20px}
.region-menu .m3-menu-trail{display:inline-flex}
.region-menu .region-menu-check{opacity:0;transform:scale(.4);transition:opacity .15s var(--m-effects),transform var(--m3-motion-fast-spatial)}
.region-menu [aria-checked="true"] .region-menu-check{opacity:1;transform:none}

/* ---------- navigation drawer: modal, from the start edge, three labelled groups (X11, X39, X40) ---------- */
.drawer-scrim{background:var(--md-scrim)}
.drawer-panel{background:var(--md-surface-low);border-radius:0 var(--sh-lg) var(--sh-lg) 0;padding:12px 12px 16px;
  transition:transform .5s var(--m3-emphasized-decel)}
.drawer:not(.open) .drawer-panel{transition:transform .25s var(--m3-emphasized-accel)}
.drawer-panel:focus{outline:none}
.drawer-head{padding:4px 4px 4px 12px;margin-bottom:4px}
.drawer-close svg{width:24px;height:24px}
.drawer-links{gap:0}
.drawer-label,.drawer-links li.drawer-label{display:block;margin:0;padding:16px 16px 8px;font:var(--type-title-small);letter-spacing:.01em;
  color:var(--md-on-surface-variant)}
.drawer-links li.drawer-label:first-child{padding-top:8px}
.drawer-links a{height:56px;padding:0 24px 0 16px;gap:12px;justify-content:flex-start;font:var(--type-label-large);font-size:14px;
  font-weight:600;letter-spacing:.01em;color:var(--md-on-surface-variant)}
.drawer-links a .ic{width:24px;height:24px;flex:0 0 24px;color:inherit}
.drawer-links a .ic.f{display:none}
.drawer-links a.active .ic.o{display:none}
.drawer-links a.active .ic.f{display:block}
.drawer-links a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
.drawer-links a:hover{background:transparent;padding-left:16px}
@media(hover:hover){.drawer-links a:hover::after{opacity:var(--md-state-hover)}}
.drawer-links a:active::after{opacity:var(--md-state-press)}
.drawer-links a.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:700}
.drawer-foot{display:grid;gap:12px;padding:8px 4px 4px}
.drawer-foot .drawer-label{padding:8px 12px 0}
.drawer-foot .btn-wa svg{width:22px;height:22px}

/* ---------- navigation bar: phones and tablets, 64px (X10, X13, X41) ---------- */
.m3-navbar{height:calc(64px + env(safe-area-inset-bottom));box-shadow:none}
.m3-navbar a,.m3-navbar button{padding:6px 0;gap:4px;font:500 12px/16px var(--font-plain);letter-spacing:.03em}
.m3-navbar .ind{width:56px;height:32px;border-radius:var(--sh-full)}
.m3-navbar .active{color:var(--md-secondary);font-weight:700}
@media(max-width:980px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wc-fab{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  .m3-fab-dock{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(min-width:761px) and (max-width:980px){
  .m3-navbar{display:grid}
  .nav-menu-toggle{display:none!important}
}
/* 600px and wider: the medium window's navigation bar, icon and label side by side in one 40px pill */
@media(min-width:600px) and (max-width:980px){
  .m3-navbar{grid-template-columns:repeat(5,auto);justify-content:center;align-content:center;column-gap:8px;padding-top:0}
  .m3-navbar a,.m3-navbar button{flex-direction:row;height:48px;padding:0 16px;gap:8px;border:4px solid transparent;border-left:0;border-right:0;
    background-clip:padding-box;border-radius:24px / 20px;overflow:hidden;transition:background-color .2s var(--m-effects)}
  .m3-navbar .ind{width:24px;height:24px;overflow:visible;background:none!important}
  .m3-navbar .ind::before{display:none}
  .m3-navbar .active{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}
  .m3-navbar :is(a,button):not(.active):hover{background-color:rgba(26,22,17,.08)}
}

/* ---------- footer (X21, X50, X51) ---------- */
/* the bottom padding keeps the last row clear of the chat button, which stays docked over the footer */
.footer{padding:clamp(40px,6vw,72px) 0 96px}
.footer-grid{gap:32px;margin-bottom:24px}
.footer-grid>div:last-child{border-top:0}
.footer h5{font:var(--type-title-small);font-weight:700;letter-spacing:.01em;color:var(--md-bright);margin:0 0 8px}
.footer-group summary{list-style:none;display:block;cursor:default}
.footer-group summary::-webkit-details-marker{display:none}
.footer-group summary>svg{display:none}
.footer ul{gap:0}
.footer ul a{display:inline-flex;align-items:center;min-height:40px;transform:none!important}
.footer ul a:hover{color:var(--md-inverse-on-surface);text-decoration:underline;text-underline-offset:3px}
.footer-contact li{gap:12px;margin:0;padding:8px 0;min-height:40px;align-items:flex-start}
.footer-contact li a{color:inherit;display:inline;min-height:0}
.footer-contact li a:hover{color:var(--md-inverse-on-surface);text-decoration:underline;text-underline-offset:3px}
.footer-contact svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.footer-socials{gap:4px}
.footer-socials a{width:48px;height:48px}
.footer-socials svg{width:20px;height:20px}
.footer-bottom{border-top:0;margin-top:8px;padding:8px 8px 8px 24px;border-radius:var(--sh-xl);background:var(--md-inverse-surface-2);
  align-items:center;gap:8px 24px;font:var(--type-body-small);color:var(--md-inverse-variant)}
.footer-bottom .footer-legal{flex:1 1 320px}
.footer-legal a{color:var(--md-inverse-on-surface)}
.footer-legal a:hover{color:var(--md-bright);text-decoration:underline;text-underline-offset:3px}
.footer-credit a{color:var(--md-bright);font-weight:700}
.region-group.in-footer>.btn{background:rgba(246,239,230,.08)}
.region-group.in-footer>.btn[aria-pressed="true"]{background:var(--md-bright);color:#1A1611}
@media(min-width:721px){.footer-bottom .footer-credit{flex:0 0 100%;order:3;padding-bottom:8px}}
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr;gap:2px;margin-bottom:16px}
  .footer-grid>*{grid-column:auto!important}
  .footer-brand{margin-bottom:24px}
  /* the two link columns: an expandable segmented list on the dark ground */
  .footer-group{background:var(--md-inverse-surface-2);border-radius:4px;overflow:hidden}
  .footer-group:first-of-type{border-top-left-radius:var(--sh-lg);border-top-right-radius:var(--sh-lg)}
  .footer-group:last-of-type{border-bottom-left-radius:var(--sh-lg);border-bottom-right-radius:var(--sh-lg)}
  .footer-group summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 12px 0 16px;cursor:pointer;
    position:relative;-webkit-tap-highlight-color:transparent}
  .footer-group summary::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
  .footer-group summary:active::after{opacity:var(--md-state-press)}
  .footer-group summary:focus-visible{outline-offset:-3px}
  .footer-group h5{margin:0;font:var(--type-title-medium);font-weight:600;color:var(--md-inverse-on-surface)}
  .footer-group summary>svg{display:block;width:32px;height:32px;padding:6px;border-radius:50%;background:rgba(246,239,230,.08);
    color:var(--md-inverse-on-surface);transition:transform var(--m3-motion-default-spatial),background-color .2s var(--m-effects)}
  .footer-group[open] summary>svg{transform:rotate(180deg);background:var(--md-bright);color:#1A1611}
  .footer-group ul{padding:0 8px 8px}
  .footer-group ul a{display:flex;min-height:48px;padding:0 8px;border-radius:12px;font-size:16px}
  .footer-contact-col{margin-top:24px}
  .footer-contact li{min-height:48px;align-items:center;font-size:16px}
  .footer-contact li svg{margin-top:0}
  .footer-contact li a{display:inline-flex;align-items:center;min-height:48px}
  .footer-bottom{flex-direction:column;align-items:stretch;padding:16px 16px 16px 20px;gap:8px}
  .footer-bottom .footer-legal{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
  .footer-legal a{display:inline-flex;align-items:center;min-height:48px}
  .footer-copy{flex:0 0 100%;padding:4px 0}
  .footer-copy+.footer-dot{display:none}
  .footer-credit a{display:inline-flex;align-items:center;min-height:48px}
  .region-group.in-footer{width:100%}
  .region-group.in-footer>.btn{flex:1 1 0;min-width:0}
}

/* ---------- order dialog: the WhatsApp alternative as a text button with its icon (X44) ---------- */
.modal-or{margin-top:8px;font:var(--type-body-medium);color:var(--md-on-surface-variant)}
.modal-or a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:var(--sh-full);
  color:#146C3A;font-weight:600;overflow:hidden;vertical-align:middle}
.modal-or a svg{width:18px;height:18px;flex:0 0 18px}
.modal-or a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.modal-or a:hover::after{opacity:var(--md-state-hover)}}
.modal-or a:active::after{opacity:var(--md-state-press)}
@media(max-width:760px){.modal-or a{min-height:48px}}

/* ============================================================
   CHAT (X19, X20, X45, X46, X47, X48): the FAB turns into a close button and the panel grows out of it; the header
   and composer tools are standard icon buttons (48px targets, 40px state layers); the composer is a filled pill
   with a 48px round send button that squares off when pressed. The core pass styled the FAB and the sheet.
   ============================================================ */
html .wc-fab.is-open{padding:0 16px}
html .wc-fab.is-open .wc-fab-x{animation:wcFabSpin .45s var(--m-spring)}
@keyframes wcFabSpin{from{transform:rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
html .wc-dot{top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border:0;border-radius:8px;background:var(--md-error);
  color:var(--md-on-error);font:700 11px/16px var(--font-plain)}
html .wc-panel{transform-origin:calc(100% - 28px) calc(100% + 40px);transform:translateY(16px) scale(.6);
  transition:opacity .2s var(--m-effects),transform .5s var(--m-spring)}
html .wc-panel.open{transform:none}
/* header */
html .wc-head{padding:8px 4px 8px 16px;gap:12px;min-height:64px}
html .wc-head h4{font:var(--type-title-medium);font-weight:700;letter-spacing:0;color:var(--md-on-surface)}
html .wc-head p{font:500 12px/16px var(--font-plain);letter-spacing:.02em;color:var(--md-on-surface-variant);margin-top:2px}
html .wc-live{width:8px;height:8px;background:#1F8A50}
html .wc-live.off{background:var(--md-outline)}
html .wc-ini span{width:32px;height:32px;border:2px solid var(--md-surface-container);box-shadow:none;background:var(--md-primary);
  color:var(--md-on-primary);font:700 12px/1 var(--font-plain)}
html .wc-acts{gap:0}
html .wc-x{position:relative;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:var(--md-on-surface-variant);
  display:grid;place-items:center;font-size:0;-webkit-tap-highlight-color:transparent}
html .wc-x::after{content:"";position:absolute;inset:4px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
html .wc-x:hover{background:transparent;color:var(--md-on-surface)}
@media(hover:hover){html .wc-x:hover::after{opacity:var(--md-state-hover)}}
html .wc-x:active::after,html .wc-x:focus-visible::after{opacity:var(--md-state-press)}
html .wc-x:focus-visible{outline:3px solid var(--md-primary);outline-offset:-3px}
html .wc-x svg{width:24px;height:24px}
html .wc-snd.muted{color:var(--md-on-surface-variant)}
/* thread */
html .wc-body{background:var(--md-surface);padding:16px 12px;gap:8px}
html .wc-msg{font:var(--type-body-medium);padding:10px 14px;max-width:82%}
html .wc-msg time{font-size:11px;line-height:16px;opacity:.75;margin-top:2px}
html .wc-msg.media{padding:4px}
html .wc-msg img{border-radius:16px}
html .wc-typing{border:0;background:var(--md-surface-lowest);border-radius:var(--sh-lgi);border-bottom-left-radius:6px;padding:14px 16px}
html .wc-typing i{background:var(--md-on-surface-variant)}
html .wc-doc-card,html .wc-loc-card{border:0;background:var(--md-surface-container);border-radius:12px;min-height:48px}
html .wc-doc-card svg,html .wc-loc-card svg{flex:0 0 auto;color:var(--md-primary)}
html .wc-msg.me .wc-doc-card,html .wc-msg.me .wc-loc-card{background:rgba(255,255,255,.16);border:0}
html .wc-msg.me .wc-doc-card svg,html .wc-msg.me .wc-loc-card svg{color:#fff}
html .wc-reaction{border:0;background:var(--md-surface-high);border-radius:8px;box-shadow:var(--el-1);padding:2px 6px}
html .wc-react-row{gap:4px}
html .wc-react-btn{width:40px;height:40px;border:0;background:var(--md-surface-high);color:var(--md-on-surface-variant);transform:none!important}
html .wc-react-btn:hover{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
/* quick replies: M3 suggestion chips */
html .wc-chips{gap:8px}
html .wc-chip{position:relative;height:32px;padding:0 16px 0 12px;border:0;border-radius:var(--sh-sm);background:var(--md-surface-lowest);
  box-shadow:inset 0 0 0 1px var(--md-outline-variant);color:var(--md-on-surface);font:var(--type-label-large);font-weight:600;gap:8px;
  overflow:hidden;transform:none!important;-webkit-tap-highlight-color:transparent}
html .wc-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
html .wc-chip:hover{background:var(--md-surface-lowest);color:var(--md-on-surface)}
@media(hover:hover){html .wc-chip:hover::after{opacity:var(--md-state-hover)}}
html .wc-chip:active::after{opacity:var(--md-state-press)}
html .wc-chip:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
html .wc-chip svg,html .wc-chip i{width:18px;height:18px;font-size:15px;color:var(--md-primary);flex:0 0 auto}
/* the name box */
html .wc-name-form{border:0;background:var(--md-surface-lowest);border-radius:var(--sh-lgi);border-bottom-left-radius:6px;padding:14px;gap:10px}
html .wc-name-form label{text-transform:none;letter-spacing:.01em;font:500 12px/16px var(--font-plain);color:var(--md-on-surface-variant)}
html .wc-name-form input{min-height:48px;padding:12px 14px;border:0;border-bottom:1px solid var(--md-on-surface-variant);border-radius:4px 4px 0 0;
  background:var(--md-surface-highest);font-size:16px;color:var(--md-on-surface);caret-color:var(--md-primary)}
html .wc-name-form input:focus,html .wc-name-form input:focus-visible{outline:none;border-bottom:2px solid var(--md-primary);padding-bottom:11px}
html .wc-name-form button{height:40px;padding:0 20px;border-radius:var(--sh-full);background:var(--md-primary);color:var(--md-on-primary);
  font:var(--type-label-large);font-weight:600;transition:border-radius var(--m3-motion-fast-spatial)}
html .wc-name-form button:hover:not(:disabled){background:var(--md-primary);box-shadow:var(--el-1)}
html .wc-name-form button:active:not(:disabled){border-radius:8px}
html .wc-name-form button:disabled{opacity:1;background:rgba(26,22,17,.10);color:rgba(26,22,17,.38)}
/* composer */
html .wc-foot{border-top:0;padding:8px 8px 8px 4px}
html .wc-row{gap:4px;align-items:flex-end}
html .wc-in{min-height:48px;padding:13px 18px;border:0;border-radius:24px;background:var(--md-surface-highest);color:var(--md-on-surface);
  font-size:16px;line-height:22px;caret-color:var(--md-primary);transition:box-shadow .15s var(--m-effects)}
html .wc-in::placeholder{color:var(--md-on-surface-variant);opacity:1}
html .wc-in:focus{border:0;box-shadow:inset 0 0 0 2px var(--md-primary)}
html .wc-in:disabled{opacity:.6}
html .wc-tool{position:relative;width:48px;height:48px;border-radius:50%;background:transparent;color:var(--md-on-surface-variant)}
html .wc-tool::after{content:"";position:absolute;inset:4px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
html .wc-tool:hover{background:transparent;color:var(--md-on-surface)}
@media(hover:hover){html .wc-tool:not(:disabled):hover::after{opacity:var(--md-state-hover)}}
html .wc-tool:active::after{opacity:var(--md-state-press)}
html .wc-tool:disabled{opacity:.38}
html .wc-tool:disabled:hover{background:transparent;color:var(--md-on-surface-variant)}
html .wc-tool svg{width:24px;height:24px}
html .wc-tool.recording,html .wc-tool.recording:hover{background:var(--md-error);color:var(--md-on-error)}
html .wc-send{width:48px;height:48px;border-radius:24px;background:var(--md-primary);color:var(--md-on-primary);
  transition:border-radius var(--m3-motion-fast-spatial),box-shadow .2s var(--m-effects),background-color .2s var(--m-effects)}
html .wc-send:hover:not(:disabled){transform:none;background:var(--md-primary);box-shadow:var(--el-1)}
html .wc-send:active:not(:disabled){transform:none;border-radius:16px}
html .wc-send:disabled{opacity:1;background:rgba(26,22,17,.10);color:rgba(26,22,17,.38)}
html .wc-send svg{width:22px;height:22px}
html .wc-hint{font:500 12px/16px var(--font-plain);color:var(--md-on-surface-variant);margin:6px 0 2px}
html .wc-upload-progress{font-size:12px;color:var(--md-on-surface-variant)}
html .wc-menu-btn{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;margin-left:8px;border:0;border-radius:var(--sh-sm);
  background:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--type-label-large);font-weight:600;vertical-align:middle}
html .wc-menu-btn[hidden]{display:none}
html .wc-menu-btn:hover{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:var(--el-1)}
html .wc-menu-btn svg{width:16px;height:16px}
/* the attach menu: an M3 menu */
html .wc-attach-menu{border:0;border-radius:var(--sh-lg);background:var(--md-surface-low);box-shadow:var(--el-2);padding:4px;min-width:200px;gap:0}
html .wc-attach-menu button{min-height:44px;padding:8px 16px;border-radius:4px;gap:12px;font:var(--type-label-large);font-weight:600;color:var(--md-on-surface)}
html .wc-attach-menu button:first-child{border-radius:12px 12px 4px 4px}
html .wc-attach-menu button:last-child{border-radius:4px 4px 12px 12px}
html .wc-attach-menu button:hover{background:rgba(26,22,17,.08)}
html .wc-attach-menu button svg{width:20px;height:20px;color:var(--md-on-surface-variant)}
@media(max-width:640px){
  /* full screen like a messaging app: the back arrow leads the header, as in a Pixel app */
  html .wc-panel{transform-origin:50% 100%;transform:translateY(32px);border-radius:0}
  html .wc-panel.open{transform:none}
  html .wc-head{padding-left:4px;padding-top:calc(8px + env(safe-area-inset-top))}
  html .wc-acts{display:contents}
  html .wc-close{order:-1}
  html .wc-close .wc-close-x{display:none}
  html .wc-close .wc-close-back{display:block}
  html .wc-x{width:48px;height:48px}
  html .wc-foot{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  html .wc-chip{height:48px;border-top:8px solid transparent;border-bottom:8px solid transparent;background-clip:padding-box;border-radius:8px / 16px}
  html .wc-chip::after{inset:8px 0;border-radius:8px}
  html .wc-name-form button{height:48px}
  html .wc-menu-btn{height:48px;border-top:8px solid transparent;border-bottom:8px solid transparent;background-clip:padding-box;border-radius:8px / 16px}
  html .wc-react-btn{width:48px;height:48px;border:4px solid transparent;background-clip:padding-box}
  html .wc-attach-menu button{min-height:48px}
}

/* ============================================================
   FIRST-VISIT BRANCH CHOOSER (X49): an M3 basic dialog (surface-container-high, 28px, level 3, 32% scrim) with a
   shape for its icon and the three branches as a segmented list. It opens once, while no branch is stored.
   ============================================================ */
html .wc-branch{background:var(--md-scrim);-webkit-backdrop-filter:none;backdrop-filter:none;padding:24px}
html.wc-branch-open,html.wc-branch-open body{overflow:hidden}
html .wc-branch-card{max-width:400px;padding:24px;border-radius:var(--sh-xl);background:var(--md-surface-high);box-shadow:var(--el-3);
  text-align:center;animation:dialogIn .5s var(--m-spring) both}
html .wc-branch-card:focus{outline:none}
html .wc-branch-ic{margin:0 auto 16px;color:var(--md-on-primary-container)}
html .wc-branch-card h3{font:var(--type-headline-small);color:var(--md-on-surface);margin:0 0 8px;letter-spacing:0}
html .wc-branch-card p{font:var(--type-body-medium);color:var(--md-on-surface-variant);margin:0 0 24px}
html .wc-branch-opts{display:flex;flex-direction:column;gap:2px;text-align:left}
html .wc-branch-opts button{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;min-height:64px;padding:8px 16px;text-align:left;
  border:0;border-radius:4px;background:var(--md-surface-lowest);color:var(--md-on-surface);font:var(--type-title-medium);font-weight:600;
  overflow:hidden;transform:none!important;transition:border-radius var(--m3-motion-fast-spatial);-webkit-tap-highlight-color:transparent}
html .wc-branch-opts button:first-child{border-radius:16px 16px 4px 4px}
html .wc-branch-opts button:last-child{border-radius:4px 4px 16px 16px}
html .wc-branch-opts button::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
html .wc-branch-opts button:hover{border-color:transparent;background:var(--md-surface-lowest);border-radius:12px}
@media(hover:hover){html .wc-branch-opts button:hover::after{opacity:var(--md-state-hover)}}
html .wc-branch-opts button:active{border-radius:16px}
html .wc-branch-opts button:active::after{opacity:var(--md-state-press)}
html .wc-branch-opts button:focus-visible{outline:3px solid var(--md-primary);outline-offset:-3px;border-radius:16px}
html .wc-branch-opts .fl{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container)}
html .wc-branch-opts .fl svg{width:22px;height:22px}
html .wc-bo-t{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;min-width:0}
html .wc-bo-t small{font:var(--type-body-medium);color:var(--md-on-surface-variant)}
html .wc-bo-go{flex:0 0 auto;width:20px;height:20px;color:var(--md-on-surface-variant)}

/* ============================================================
   BREADCRUMB (X56): steps joined by an Iconly chevron; the current page is plain text.
   ============================================================ */
.breadcrumb .bc-sep{flex:0 0 auto;width:16px;height:16px;margin:0 2px;color:var(--md-on-surface-variant)}
.breadcrumb a{padding:0 8px;margin-inline:-8px -4px}
.breadcrumb [aria-current="page"]{color:var(--md-on-surface-variant)}

/* ============================================================
   CONTACT (X22, X23, X24, X26)
   ============================================================ */
/* how to reach us: an expressive segmented list on the tonal sheet */
.contact-list{margin-top:24px}
.contact-list .m3-list-label{font-weight:600;overflow-wrap:anywhere}
.contact-list .m3-list-overline{font-size:12px;line-height:16px;font-weight:600}
.contact-list .m3-list-item.three{align-items:center}
.cm-lead.wa{background:#C4EED0;color:#0B6B32}
.cm-lead.wa svg{width:22px;height:22px}
.cm-lead.plain-tone{background:var(--md-surface-high);color:var(--md-on-surface-variant)}
.cm-lead svg{width:22px;height:22px}
@media(hover:hover) and (pointer:fine){.contact-list a.m3-list-item:hover .m3-list-trail{color:var(--md-on-surface)}}
/* the enquiry form card */
.contact-grid .form-card{padding:clamp(24px,3vw,32px)}
.contact-grid .form-card h3{font:var(--type-headline-small);letter-spacing:0}
@media(max-width:620px){
  .contact-grid .form-card{padding:24px 16px;margin-inline:-8px}
}
/* branches: tonal cards (no hover lift: they are not links), a shape for the icon, Call and Directions */
.branch-grid .loc-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:var(--sh-xl);background:var(--md-surface-lowest)}
.branch-grid .loc-card:hover{transform:none;box-shadow:none}
.branch-grid .loc-card h3{margin:16px 0 4px;font:var(--type-headline-small);letter-spacing:0}
.branch-grid .loc-sub{font:var(--type-label-large);font-weight:600;color:var(--md-on-surface-variant);letter-spacing:.01em}
.branch-grid .loc-row{font:var(--type-body-medium);color:var(--md-on-surface-variant);gap:12px}
.branch-grid .loc-row svg{width:18px;height:18px;flex:0 0 18px;color:var(--md-primary)}
.loc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
@media(min-width:761px){.branch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  /* a carousel: one card and a peek of the next */
  .branch-carousel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter)}
  .branch-carousel::-webkit-scrollbar{display:none}
  .branch-carousel>.loc-card{flex:0 0 min(84%,340px);scroll-snap-align:start}
}
/* newsletter on burnt black: a filled field and a full-width button on phones (X26) */
html #newsletter .news-form input{height:56px;border:0;border-radius:var(--sh-full);background:var(--md-inverse-surface-2);
  color:var(--md-inverse-on-surface);box-shadow:none;padding:0 24px}
html #newsletter .news-form input::placeholder{color:var(--md-inverse-variant);opacity:1}
html #newsletter .news-form input:focus{box-shadow:inset 0 0 0 2px var(--md-bright);background:var(--md-inverse-surface-2);outline:none}
html #newsletter .news-form .btn{height:56px}
@media(max-width:620px){
  html #newsletter .news-form{flex-direction:column;align-items:stretch}
  html #newsletter .news-form input,html #newsletter .news-form .btn{width:100%;min-width:0;flex:0 0 auto}
}

/* ============================================================
   LEGAL PAGES (privacy, terms): contents beside the text, readable headings, links that look like links,
   the date as a chip (X32, X33, X34, X54, X55)
   ============================================================ */
.legal-updated{margin:20px 0 0}
.legal-updated .badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--sh-sm);
  background:var(--md-surface-lowest);color:var(--md-on-surface-variant);font:var(--type-label-large);font-weight:600;letter-spacing:.01em}
.legal-updated .badge svg{width:16px;height:16px;color:var(--md-primary)}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,74ch);gap:48px;justify-content:center;align-items:start}
.legal{max-width:74ch;margin:0}
/* contents: a navigation list in a white container that stays in view while you read */
.legal-toc{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:2px;padding:8px;
  max-height:calc(100vh - var(--nav-h) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  background:var(--md-surface-lowest);border-radius:var(--sh-xl)}
.legal-toc a{position:relative;display:flex;align-items:center;min-height:48px;padding:8px 16px;border-radius:var(--sh-full);overflow:hidden;
  font:var(--type-label-large);font-weight:600;letter-spacing:.01em;color:var(--md-on-surface-variant);text-decoration:none;flex:0 0 auto}
.legal-toc a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.legal-toc a:hover::after{opacity:var(--md-state-hover)}}
.legal-toc a:active::after{opacity:var(--md-state-press)}
.legal-toc a:focus-visible{outline-offset:-3px}
.legal-toc a.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:700}
.legal-toc a.toc-part{min-height:40px;padding:16px 16px 4px;border-radius:12px;font:var(--type-title-small);font-weight:700;color:var(--md-primary-text)}
.legal-toc a.toc-part:first-child{padding-top:8px}
.legal-toc a.toc-part.active{background:transparent;color:var(--md-primary-text)}
/* the text */
.legal h2{font-size:22px;line-height:28px;letter-spacing:-.005em;font-variation-settings:"opsz" 24,"SOFT" 20;font-weight:500;margin:40px 0 12px;
  scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal h2:first-child{margin-top:0}
.legal h2.legal-part{font:var(--type-headline-small);font-variation-settings:"opsz" 36,"SOFT" 30;margin:48px 0 16px;padding:16px 24px;
  border-radius:var(--sh-xl);background:var(--md-primary-container);color:var(--md-on-primary-container)}
.legal h2.legal-part+h2{margin-top:24px}
.legal p{margin:0 0 12px;line-height:1.7}
.legal li{line-height:1.7}
.legal ul{list-style:none;margin:8px 0 16px;padding:0}
.legal li{position:relative;margin:6px 0;padding-left:22px;color:var(--md-on-surface-variant)}
.legal li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--md-primary)}
.legal li b{color:var(--md-on-surface);font-weight:600}
.legal a{color:var(--md-primary-text);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}
@media(max-width:900px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  /* phones and tablets: the contents as a row of chips that scrolls sideways */
  .legal-toc{position:static;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 var(--gutter);
    margin-inline:calc(var(--gutter) * -1);background:none;border-radius:0;scrollbar-width:none}
  .legal-toc::-webkit-scrollbar{display:none}
  .legal-toc a{white-space:nowrap;min-height:48px;padding:0 16px;border-top:8px solid transparent;border-bottom:8px solid transparent;
    background-clip:padding-box;border-radius:8px / 16px;background-color:var(--md-surface-lowest)}
  .legal-toc a.active{background-color:var(--md-secondary-container)}
  .legal-toc a.toc-part{display:none}
}

/* ============================================================
   REDUCED MOTION: the chrome's own movement stops; colour and opacity changes stay
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nav-title,.region-chip .region-chip-chev,.region-menu .region-menu-check,.footer-group summary>svg{transition:none}
  .drawer-panel,.drawer:not(.open) .drawer-panel{transition:none}
  html .wc-panel,html .wc-panel.open{transform:none;transition:opacity .15s linear}
  html .wc-fab.is-open .wc-fab-x,html .wc-branch-card{animation:none}
}


/* ============================================================
   AREA: HOME (the full Pixel pass, 2026-10-22)
   ============================================================ */
/* ============================================================
   HOME (index.php): the full Pixel pass (2026-10-21), merged into pixel.css when done.
   Loads after pixel.css. Builds on the core components (.section-head, .m3-bento, .ic-shape, .m3-list,
   .m3-carousel, .m3-icon-btn, .m3-inverse); only home-specific layout and tones live here.
   Gap ids from the audit are noted beside each block.
   ============================================================ */

/* ---------- HERO: one centred column (owner, 2026-09-25) in a rounded tonal container, the shapes whole
   inside it and cropped only by its corners (H19); trust labels are static tonal labels (H18) ---------- */
.hero{margin:8px clamp(8px,1.4vw,20px) 0;border-radius:var(--sh-2xl);background:var(--md-surface-container);
  padding:clamp(48px,6.5vw,88px) 0 clamp(16px,2.4vw,28px)}
.hero::before{width:min(500px,52vw);top:-170px;right:-130px}
.hero::after{width:min(280px,34vw);left:-110px;bottom:150px}
.hero-copy h1{margin:20px 0 20px}
.hero-copy .lede{margin-bottom:32px}
.hero-ctas{gap:8px}
/* the secondary hero action: a tonal button would melt into the container, so it is the light tonal */
.hero .btn-tonal,.hero .btn-tonal:hover{background:var(--md-surface-lowest);color:var(--md-on-surface)}
.hero-trust{margin-top:24px;gap:8px}
.htb{height:32px;padding:0 12px 0 8px;gap:8px;border-radius:var(--sh-sm);box-shadow:none;background:color-mix(in srgb,var(--md-surface-lowest) 72%,transparent);
  color:var(--md-on-surface);font:var(--type-label-large)}
.htb svg{width:18px;height:18px;color:var(--md-primary)}
.hero .stat-band{margin-top:clamp(40px,5vw,64px)}
.hero .stat .n{font-size:clamp(36px,4.2vw,52px)}

/* ---------- SECTION HEADS inside a sheet (the category head under the destinations) ---------- */
.sub-head{margin-top:clamp(40px,5vw,56px)}
.sub-title{font:400 clamp(26px,2.4vw,32px)/1.25 var(--font-brand);letter-spacing:-.01em;margin:0 0 8px;color:var(--md-on-surface)}
.sub-title em{font-style:normal;font-weight:500;color:var(--md-primary)}

/* ---------- WHY IT'S HARD: a connected group, 4px apart, 28px outer and 8px inner corners (H9) ---------- */
.problem-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.problem-group .card-problem{display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--sh-sm);padding:28px 24px}
.problem-group .card-problem:first-child{border-radius:var(--sh-xl) var(--sh-sm) var(--sh-sm) var(--sh-xl)}
.problem-group .card-problem:last-child{border-radius:var(--sh-sm) var(--sh-xl) var(--sh-xl) var(--sh-sm)}
.card-problem .ic-shape{margin-bottom:20px}
.card-problem h3{font:500 22px/28px var(--font-brand);margin:0 0 8px}

/* ---------- SERVICES: a bento; the core service is the hero tile (H6) ---------- */
.svc-bento{grid-auto-rows:auto}
.svc-tile{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.svc-tile h3{font:500 22px/28px var(--font-brand);letter-spacing:-.005em;margin:0 0 6px;color:var(--md-on-surface)}
.svc-tile p{font:var(--type-body-medium);margin:0;color:var(--md-on-surface-variant)}
.svc-hero{background:var(--md-primary-container);color:var(--md-on-primary-container);padding:clamp(28px,3.4vw,40px);
  justify-content:flex-end;gap:20px;isolation:isolate}
.svc-hero .ic-shape{--ics:96px;margin-bottom:auto}
.svc-hero h3{font:400 clamp(30px,3vw,36px)/1.22 var(--font-brand);letter-spacing:-.015em;color:var(--md-on-primary-container);margin-bottom:10px}
.svc-hero p{font:var(--type-body-large);color:var(--md-on-primary-container);max-width:42ch}
.svc-hero .svc-cta{margin-top:4px}
.svc-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:300px;aspect-ratio:1;right:-80px;top:-90px;
  background:color-mix(in srgb,var(--md-primary) 12%,var(--md-primary-container));
  -webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat;
  animation:shapeSpin 80s linear infinite}
.svc-bento>.svc-tile:nth-child(4){background:var(--md-tertiary-container)}
.svc-bento>.svc-tile:nth-child(4) .ic-shape{--ics-bg:var(--md-tertiary);color:var(--md-on-tertiary)}
.svc-bento>.svc-tile:nth-child(4) :is(h3,p){color:var(--md-on-tertiary-container)}
@media(min-width:840px){
  .svc-bento>.svc-tile{grid-column:span 4}
  .svc-bento>.svc-tile:nth-child(1){grid-column:span 6;grid-row:span 2}
  .svc-bento>.svc-tile:nth-child(2),.svc-bento>.svc-tile:nth-child(3){grid-column:span 3}
  .svc-bento>.svc-tile:nth-child(4){grid-column:span 6;flex-direction:row;align-items:center;gap:20px}
  /* the services come from the CRM: with fewer than four the tiles beside the hero tile still fill its height */
  .svc-bento>.svc-tile:only-child{grid-column:1 / -1}
  .svc-bento>.svc-tile:nth-child(2):last-child{grid-column:span 6;grid-row:span 2}
  .svc-bento>.svc-tile:nth-child(2):nth-last-child(2),.svc-bento>.svc-tile:nth-child(3):last-child{grid-column:span 6}
}
@media(min-width:600px) and (max-width:839px){
  .svc-bento>.svc-tile:nth-child(1),.svc-bento>.svc-tile:nth-child(4){grid-column:1 / -1}
}

/* ---------- SHOP: destinations as navigation tiles in their own tones, a trailing arrow (H10, H32) ---------- */
.dest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dest-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:20px;padding:24px;
  border-radius:var(--sh-xl);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:border-radius var(--m3-motion-fast-spatial)}
.dest-card::after{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
.dest-ug{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.dest-ke{background:var(--md-info-container);color:var(--md-on-info-container)}
.dest-ke .ic-shape{--ics-bg:var(--md-on-info-container);color:var(--md-info-container)}
.flag-txt{font:700 18px/1 var(--font-plain);letter-spacing:.02em}
.dest-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.dest-title{font:500 22px/28px var(--font-brand);letter-spacing:-.005em}
.dest-sub{font:var(--type-body-medium)}
.card-go{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--md-surface-lowest);color:var(--md-on-surface);
  transition:border-radius var(--m3-motion-fast-spatial),background-color .2s var(--m-effects),color .2s var(--m-effects)}
.card-go svg{width:24px;height:24px}
@media(hover:hover) and (pointer:fine){
  .dest-card:hover::after{opacity:var(--md-state-hover)}
  .dest-card:hover .card-go{border-radius:var(--sh-lg);background:var(--md-primary);color:var(--md-on-primary)}
  .dest-ke:hover .card-go{background:var(--md-on-info-container);color:var(--md-info-container)}
}
.dest-card:active{border-radius:var(--sh-lgi)}
.dest-card:active::after{opacity:var(--md-state-press)}

/* ---------- CATEGORIES: tiles that fill the pane, start-aligned, a count pill and an open cue (H25) ---------- */
html .cat-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-content:stretch;gap:8px}
html .cat-card{align-items:flex-start;text-align:left;gap:0;padding:20px;min-height:184px;cursor:pointer}
.cat-card .cat-ic{width:56px;height:56px;margin-bottom:auto}
.cat-card .cat-name{margin-top:20px;font:500 20px/26px var(--font-brand);letter-spacing:-.005em;color:var(--md-on-surface)}
.cat-card .cat-count{display:inline-flex;align-items:center;height:24px;margin-top:8px;padding:0 10px;border-radius:var(--sh-full);
  background:var(--md-surface-container);color:var(--md-on-surface-variant);font:var(--type-label-medium);letter-spacing:.01em}
.cat-go{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--md-surface-container);color:var(--md-on-surface-variant);
  transition:border-radius var(--m3-motion-fast-spatial),background-color .2s var(--m-effects),color .2s var(--m-effects)}
.cat-go svg{width:20px;height:20px;transform:rotate(-45deg)}
@media(hover:hover) and (pointer:fine){
  .cat-card:hover .cat-go{border-radius:var(--sh-md);background:var(--md-primary);color:var(--md-on-primary)}
}
/* the catch-all tile leads, in the primary container */
.cat-card.cat-all{background:var(--md-primary-container)}
.cat-card.cat-all .cat-ic{background:var(--md-primary);color:var(--md-on-primary)}
.cat-card.cat-all .cat-name{color:var(--md-on-primary-container)}
.cat-card.cat-all .cat-count,.cat-card.cat-all .cat-go{background:var(--md-surface-lowest);color:var(--md-on-primary-container)}

/* ---------- HOW IT WORKS: a connected list, each step led by a number in an expressive shape (H11) ---------- */
.how-aside h2{margin:8px 0 12px}
.rail{list-style:none;margin:0;padding:0;gap:4px}
.rail-step{grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:center;padding:24px;border:0;
  background:var(--md-surface-lowest);border-radius:var(--sh-sm)}
.rail-step:first-child{border-radius:var(--sh-xl) var(--sh-xl) var(--sh-sm) var(--sh-sm)}
.rail-step:last-child{border-radius:var(--sh-sm) var(--sh-sm) var(--sh-xl) var(--sh-xl)}
.rail-step::before{display:none}
.rail-num{width:56px;height:56px;font:500 24px/1 var(--font-brand)}
.rail-num::before{content:counter(rail)}
.rail-step:nth-child(4n+2) .rail-num{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask-image:var(--shape-clover);mask-image:var(--shape-clover)}
.rail-step:nth-child(4n+3) .rail-num{background:var(--md-info-container);color:var(--md-on-info-container);-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.rail-step:nth-child(4n+4) .rail-num{background:var(--md-primary);color:var(--md-on-primary);-webkit-mask-image:var(--shape-cookie9);mask-image:var(--shape-cookie9)}
.rail-step:nth-child(4n+2):hover .rail-num{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.rail-step:nth-child(4n+3):hover .rail-num{background:var(--md-info-container);color:var(--md-on-info-container)}
.rail-step:nth-child(4n+4):hover .rail-num{background:var(--md-primary);color:var(--md-on-primary)}
.rail-body h3{font:500 22px/28px var(--font-brand);margin:0 0 4px}
.rail-body p{margin:0}

/* ---------- WHY SHOPPERS STAY: the photo in an arch, static; the values as a two-line list (H12, H13) ---------- */
.why-photo{aspect-ratio:4/5;border-radius:50% 50% var(--sh-xl) var(--sh-xl) / 40% 40% var(--sh-xl) var(--sh-xl);background:var(--md-surface-high)}
.why-photo::after{display:none}
.why-photo img,.why-photo:hover img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:74% 30%;transform:none;transition:none}
.why-copy h2{margin:8px 0 12px}
.values-list{margin-top:28px}
.values-list .m3-list-item{gap:16px;padding:16px 20px 16px 16px}
.values-list .m3-list-label{font:var(--type-title-medium);color:var(--md-on-surface)}
.values-list .m3-list-support{margin-top:2px}

/* ---------- OUR PROMISE: a tonal headline tile beside a connected list; icons in shapes (H7, H8) ---------- */
.guarantee-bento{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px}
.section-head.guarantee-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:0;
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,3.6vw,48px);border-radius:var(--sh-xl);
  background:var(--md-primary-container);color:var(--md-on-primary-container)}
.guarantee-head .eyebrow,.guarantee-head h2,.guarantee-head .lede{color:var(--md-on-primary-container)}
.guarantee-head::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:220px;aspect-ratio:1;right:-70px;bottom:-80px;
  background:color-mix(in srgb,var(--md-primary) 12%,var(--md-primary-container));
  -webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;
  animation:shapeSpin 90s linear infinite reverse}
html .guarantee-grid{list-style:none;margin:0;padding:0;max-width:none;display:flex;flex-direction:column;gap:4px}
.guarantee-item{flex:1 1 auto;align-items:center;gap:20px;padding:24px;border-radius:var(--sh-sm);background:var(--md-surface-lowest)}
.guarantee-item:first-child{border-radius:var(--sh-xl) var(--sh-xl) var(--sh-sm) var(--sh-sm)}
.guarantee-item:last-child{border-radius:var(--sh-sm) var(--sh-sm) var(--sh-xl) var(--sh-xl)}
.guarantee-item .ic-shape{margin:0}
.guarantee-item b{display:block;margin:0 0 2px;font:var(--type-title-medium);color:var(--md-on-surface)}
.guarantee-item p{font:var(--type-body-medium);margin:0;color:var(--md-on-surface-variant)}

/* ---------- PRICING: the popular way on burnt black, prices in a tonal inset, static tonal labels (H15) ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.offer{padding:clamp(24px,3vw,36px);isolation:isolate}
.offer-top{margin-bottom:24px}
.offer h3{font:500 clamp(24px,2.2vw,28px)/1.25 var(--font-brand);letter-spacing:-.01em;margin:0 0 8px}
.offer>p{font:var(--type-body-medium);margin:0 0 24px}
.offer-price{border-top:0;margin:auto 0 16px;padding:20px 24px;border-radius:var(--sh-lg);background:var(--md-surface-container);
  flex-wrap:wrap;gap:4px 12px}
.offer.offer-featured{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}
.offer-featured h3,.offer-featured .offer-price .amount{color:var(--md-inverse-on-surface)}
.offer-featured>p,.offer-featured .offer-price small{color:var(--md-inverse-variant)}
.offer-featured .offer-price{background:var(--md-inverse-surface-2)}
.offer-featured .badge.tint{background:var(--md-bright);color:#1A1611}
.offer-featured::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:240px;aspect-ratio:1;right:-70px;top:-90px;
  background:var(--md-inverse-surface-2);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat}

/* ---------- CAROUSELS (gallery, reviews): aligned with the content edge, prev/next icon buttons in the
   header, 8px gaps, 28px items, a state layer instead of the zoom (H3, H4, H27) ---------- */
.head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cx-nav{display:inline-flex;align-items:center;gap:0}
.cx-nav .m3-icon-btn[aria-disabled="true"]{--ib-bg:rgba(26,22,17,.10);--ib-bd:none;--ib-fg:rgba(26,22,17,.38)}
.cx-sec .section-head{margin-bottom:clamp(16px,2vw,24px)}
.cx-row{--cx-pad:max(var(--gutter),calc((100% - var(--maxw)) / 2));padding:8px var(--cx-pad);scroll-padding-inline:var(--cx-pad)}
.cx-sec>.cx-row{margin:0}
/* photos */
.cx-photos{--item-w:clamp(200px,24vw,300px);--item-h:auto}
.cx-photos>.cx-photo{display:block;aspect-ratio:4/5;height:auto;-webkit-tap-highlight-color:transparent}
.cx-photo img{transition:none}
.cx-photo::after{content:"";position:absolute;inset:0;background:var(--md-on-surface);opacity:0;pointer-events:none;transition:opacity .2s var(--m-effects)}
@media(hover:hover) and (pointer:fine){.cx-photo:hover::after{opacity:var(--md-state-hover)}}
.cx-photo:active::after{opacity:var(--md-state-press)}
/* reviews: the Google rating leads as a burnt black tile, then the cards (H16, H17) */
.cx-reviews{--item-w:340px;--item-h:auto;align-items:stretch}
.cx-reviews>.tcard{height:auto;background:var(--md-surface-lowest);padding:24px;gap:12px;border-radius:var(--sh-xl)}
.cx-reviews>.tcard::before{display:none}
.tcard .stars{gap:2px}
.tcard .quote{font:var(--type-body-large);color:var(--md-on-surface);margin:0}
.tcard .who{border-top:0;padding-top:0;margin-top:4px;gap:12px}
.tcard .av{width:40px;height:40px;flex:0 0 40px;font:600 15px/1 var(--font-plain);letter-spacing:.01em}
.tcard .who b{font:var(--type-title-small);color:var(--md-on-surface)}
.cx-reviews>.rating-tile{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);justify-content:space-between;padding:28px 24px 20px}
.rating-tile .g-stars{display:flex;gap:4px;color:var(--md-bright)}
.rating-tile .g-stars svg{width:24px;height:24px}
.rating-tile .g-score{font:400 22px/28px var(--font-brand);color:var(--md-inverse-on-surface);margin-top:8px}
.rating-tile .g-num{display:block;font:400 57px/64px var(--font-brand);letter-spacing:-.02em}
.rating-tile .g-sub{font:var(--type-body-medium);color:var(--md-inverse-variant)}
.rating-actions{display:flex;flex-direction:column;gap:4px;margin-top:12px}

/* ---------- FAQ: the heading (and its trailing action) beside the list on wide screens (H5, H29) ---------- */
.faq-layout .faq-list{max-width:none;margin:0}
@media(min-width:900px){
  .faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
  .faq-layout .section-head{grid-template-columns:minmax(0,1fr);margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
  .faq-layout .section-head>.section-head-action{grid-column:1;grid-row:auto;justify-self:start;margin-top:16px}
}

/* ---------- CTA: the same inset as the sheets, and no dead band before the footer (H8, H37) ---------- */
.cta-sec{padding-top:0}
.cta-sec>.cta-band{margin-inline:clamp(8px,1.4vw,20px)}

/* ---------- STORE LIST DIALOG: a two-line list, 40px avatar in the label face, an open-in-new cue (H26) ---------- */
.store-list{gap:2px;max-height:min(60vh,520px);padding-bottom:24px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
.store-row{min-height:72px;gap:16px;padding:12px 16px;border-radius:4px}
.store-row:first-child{border-top-left-radius:16px;border-top-right-radius:16px}
.store-row:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.store-row-ic{width:40px;height:40px;flex:0 0 40px;font:600 16px/1 var(--font-plain)}
.store-row-body b{font:var(--type-title-medium)}
.store-row-body small{font:var(--type-body-medium);margin-top:0}
.store-row-go,.store-row:hover .store-row-go{width:24px;height:24px;flex:0 0 24px;border-radius:0;background:transparent;color:var(--md-on-surface-variant)}
.store-row-go svg{width:20px;height:20px;transform:rotate(-45deg)}
@media(hover:hover) and (pointer:fine){.store-row:hover .store-row-go{color:var(--md-primary-text)}}

/* ============================================================
   MEDIUM AND COMPACT WINDOWS
   ============================================================ */
@media(max-width:899px){
  .guarantee-bento,.dest-grid{grid-template-columns:minmax(0,1fr)}
  .why-photo{max-width:520px}
}
@media(max-width:760px){
  /* the problems become list rows, icon leading (H9) */
  .problem-group{grid-template-columns:minmax(0,1fr)}
  .problem-group .card-problem{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px}
  .problem-group .card-problem .ic-shape{--ics:48px;grid-row:span 2;margin:0}
  .problem-group .card-problem h3{font-size:18px;line-height:24px;margin:0 0 4px}
  .problem-group .card-problem:first-child{border-radius:var(--sh-xl) var(--sh-xl) var(--sh-sm) var(--sh-sm)}
  .problem-group .card-problem:last-child{border-radius:var(--sh-sm) var(--sh-sm) var(--sh-xl) var(--sh-xl)}
  .offer-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .hero{margin:6px 6px 0;border-radius:var(--sh-xli);padding:40px 0 10px}
  .hero>.wrap{width:calc(100% - 20px)}
  .hero-copy{padding-inline:6px}
  .hero::before{width:280px;top:-130px;right:-120px}
  .hero::after{width:170px;left:-90px;bottom:220px}
  /* the stat tiles right below carry the orders and the rating: on a phone the label row keeps one */
  .hero-trust .htb-dup{display:none}
  .hero .stat-band{margin-top:32px}

  .svc-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-bento>.svc-tile{grid-column:span 1}
  .svc-bento>.svc-tile:nth-child(1),.svc-bento>.svc-tile:nth-child(4),.svc-bento>.svc-tile:nth-child(n+5){grid-column:1 / -1}
  .svc-tile{padding:20px 16px;gap:12px}
  .svc-tile h3{font-size:18px;line-height:24px}
  .svc-hero{padding:24px 20px}
  .svc-hero .ic-shape{--ics:72px}
  .svc-hero h3{font-size:28px;line-height:36px}
  .svc-hero .svc-cta{align-self:stretch}
  .svc-hero::after{width:200px;right:-70px;top:-70px}
  .svc-bento>.svc-tile:nth-child(4){flex-direction:row;align-items:flex-start;gap:16px}

  .dest-card{gap:16px;padding:20px 16px}
  .dest-card .ic-shape{--ics:48px}
  .dest-title{font-size:18px;line-height:24px}

  html .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html .cat-card{padding:16px;min-height:168px}
  .cat-card .cat-ic{width:48px;height:48px}
  .cat-card .cat-ic svg{width:22px;height:22px}
  .cat-card .cat-name{margin-top:16px;font-size:18px;line-height:24px}
  .cat-go{top:12px;right:12px}

  .rail-step{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:20px 16px}
  .rail-num{width:48px;height:48px;font-size:20px}
  .rail-body h3{font-size:18px;line-height:24px}

  .why-photo{aspect-ratio:1/1;border-radius:50% 50% var(--sh-xl) var(--sh-xl) / 50% 50% var(--sh-xl) var(--sh-xl);max-width:none}
  .values-list .m3-list-item{padding:14px 16px 14px 12px;gap:14px}

  .guarantee-item{padding:20px 16px;gap:16px}
  .guarantee-item .ic-shape{--ics:48px}

  .offer-price{padding:16px 20px}

  /* touch users swipe the carousels; the arrows are for a mouse and the keyboard */
  .cx-nav{display:none}
  .bg-surface>.cx-row{--cx-pad:10px}
  .cx-photos{--item-w:min(60%,240px)}
  .cx-reviews{--item-w:86%}

  .cta-sec>.cta-band{margin-inline:6px}

  .store-list{max-height:none;overflow:visible;padding-bottom:0;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:380px){
  .svc-bento>.svc-tile:nth-child(2),.svc-bento>.svc-tile:nth-child(3){grid-column:1 / -1;flex-direction:row;align-items:flex-start;gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .svc-hero::after,.guarantee-head::after{animation:none}
}

/* keyboard focus on a carousel photo: drawn inside, since the carousel's edge clip would hide an outside ring */
.cx-photo:focus-visible{outline-offset:-4px}


/* ============================================================
   AREA: CATALOGUE (the full Pixel pass, 2026-10-22)
   ============================================================ */
/* catalogue: the full Pixel pass (2026-10-21), merged into pixel.css when done.
   Pages: services, shop-uganda, shop-kenya, about, gallery. Built on the core classes in pixel.css
   (m3-list, m3-btn-group, stat tiles, card-ic shapes); only these pages' own markup carries the classes below. */

/* Breadcrumb (C36, X56): these pages use the shared markup (Home, an Iconly chevron .bc-sep, the current page);
   chrome.css styles it for every page. */

/* Shop page heads: one filled action and a tonal one. Tonal secondary would vanish on the head's own
   surface-container, so here it takes the primary container. */
body[data-page^="shop-"] .page-head .cta-actions{margin-top:24px;gap:12px}
body[data-page^="shop-"] .page-head .btn-tonal{background:var(--md-primary-container);color:var(--md-on-primary-container)}
/* "Dubai -> Uganda": the arrow stays inline in the label chip instead of breaking it onto three lines */
body[data-page^="shop-"] .page-head .eyebrow svg{display:inline-block;width:14px;height:14px;margin:0 6px;vertical-align:-2px}

/* ============================================================
   BENTO OF TONAL TILES (services C16, values C17): 6 columns, the tiles alternate wide and narrow
   (4 + 2, then 2 + 4), each in its own colour role. Shape icon on top, words at the foot.
   .px-bento.alt swaps the first and last colours (about's values).
   ============================================================ */
.px-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.px-bento>.px-tile{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:32px;
  min-height:240px;margin:0;padding:28px;border-radius:var(--sh-xl)}
.px-bento>.px-tile:nth-child(4n+1),.px-bento>.px-tile:nth-child(4n+4){grid-column:span 4}
.px-bento>.px-tile:nth-child(4n+1):last-child,.px-bento>.px-tile:nth-child(4n+3):last-child{grid-column:1 / -1}
.px-tile .px-tile-text{max-width:52ch}
.px-bento>.px-tile:nth-child(4n+1) .px-tile-text,.px-bento>.px-tile:nth-child(4n+4) .px-tile-text{max-width:min(64%,52ch)}
.px-tile h3{color:inherit;margin:0 0 8px}
.px-tile p{color:inherit;margin:0}
.px-tile .card-ic{width:64px;height:64px;flex:0 0 auto;margin:0;background:var(--md-surface-lowest)}
.px-tile .card-ic svg{width:28px;height:28px}
/* colour roles: primary container, tertiary container, secondary container, inverse (burnt black) */
.px-bento>.px-tile:nth-child(4n+1){background:var(--md-primary-container);color:var(--md-on-primary-container)}
.px-bento>.px-tile:nth-child(4n+2){background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.px-bento>.px-tile:nth-child(4n+3){background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.px-bento>.px-tile:nth-child(4n+4){background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}
.px-bento.alt>.px-tile:nth-child(4n+1){background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}
.px-bento.alt>.px-tile:nth-child(4n+4){background:var(--md-primary-container);color:var(--md-on-primary-container)}
.px-bento:not(.alt)>.px-tile:nth-child(4n+4) p,.px-bento.alt>.px-tile:nth-child(4n+1) p{color:var(--md-inverse-variant)}
/* on burnt black the icon sits in the logo orange */
.px-bento:not(.alt)>.px-tile:nth-child(4n+4) .card-ic,.px-bento.alt>.px-tile:nth-child(4n+1) .card-ic{background:var(--md-bright);color:var(--md-on-surface)}
.px-bento.alt>.px-tile:nth-child(4n+4) .card-ic{background:var(--md-surface-lowest)}
/* one solid expressive shape in the corner of each wide tile (decorative, behind the words) */
.px-bento>.px-tile{position:relative;overflow:hidden;isolation:isolate}
.px-bento>.px-tile:nth-child(4n+1)::after,.px-bento>.px-tile:nth-child(4n+4)::after{display:block;content:"";position:absolute;z-index:-1;pointer-events:none;
  width:240px;aspect-ratio:1;right:-48px;top:-72px;bottom:auto;left:auto;opacity:1;
  background:var(--md-tertiary-container);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;
  animation:shapeSpin 80s linear infinite}
.px-bento:not(.alt)>.px-tile:nth-child(4n+4)::after,.px-bento.alt>.px-tile:nth-child(4n+1)::after{background:var(--md-inverse-surface-2);
  -webkit-mask-image:var(--shape-cookie9);mask-image:var(--shape-cookie9);animation-direction:reverse}
@media(min-width:621px) and (max-width:900px){
  .px-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-bento>.px-tile,.px-bento>.px-tile:nth-child(n){grid-column:span 1;min-height:220px}
  .px-bento>.px-tile:nth-child(4n+1),.px-bento>.px-tile:nth-child(4n+4),.px-bento>.px-tile:last-child:nth-child(odd){grid-column:1 / -1}
}
/* compact: one column of short rows, the icon beside the words (C23) */
@media(max-width:620px){
  .px-bento{grid-template-columns:minmax(0,1fr)}
  .px-bento>.px-tile,.px-bento>.px-tile:nth-child(n){grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:16px;min-height:0;padding:20px}
  .px-tile .card-ic{width:48px;height:48px}
  .px-tile .card-ic svg{width:22px;height:22px}
  .px-tile h3{font-size:18px;line-height:24px;margin-bottom:4px}
  .px-bento>.px-tile::after,.px-bento>.px-tile:nth-child(n)::after{display:none}
}

/* ============================================================
   PRICING (C2, C3, C6, C39, C40, C45, C24)
   ============================================================ */
.price-grid{gap:8px}
.price-card{padding:28px}
.price-card>h3{margin-bottom:4px}
.price-card .sub{font-size:14px;line-height:20px;margin-bottom:16px;color:var(--md-on-surface-variant)}
.price-card.featured .sub{color:var(--md-inverse-variant)}
/* lists keep their own height; the action sits at the foot of an equal-height card */
.price-card ul{flex:0 0 auto;align-content:start}
.price-card>.btn{margin-top:auto}
/* amount: the unit never breaks word by word; the currency code is a small label beside the figure */
.price-card .amount{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;margin-top:8px}
.price-card .amount small{white-space:nowrap;font-size:14px;line-height:20px;color:var(--md-on-surface-variant)}
.price-card.featured .amount small{color:var(--md-inverse-variant)}
.price-card .amount .cur{font:700 18px/1 var(--font-plain);letter-spacing:0;align-self:flex-start;margin-top:6px}
/* feature list with Iconly ticks */
.price-card ul.pc-feats{margin:20px 0 24px;gap:12px}
.price-card .pc-feats li{align-items:center;gap:12px}
.price-card .pc-feats li svg{width:20px;height:20px;flex:0 0 20px;margin:0}
/* per-item charges: a segmented list (2px gaps, 16px outer and 4px inner corners) instead of ruled rows */
.price-card ul.pc-list{display:grid;gap:2px;margin:4px 0 24px;padding:0;list-style:none}
.price-card .pc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:8px 16px;
  border-radius:4px;background:var(--md-surface-low);color:var(--md-on-surface);font-size:14px;line-height:20px}
.price-card .pc-row:first-child{border-top-left-radius:var(--sh-lg);border-top-right-radius:var(--sh-lg)}
.price-card .pc-row:last-child{border-bottom-left-radius:var(--sh-lg);border-bottom-right-radius:var(--sh-lg)}
.price-card .pc-row strong{font-weight:700;white-space:nowrap;color:var(--md-on-surface)}
.price-card .pc-row.is-flat strong{font-weight:600;color:var(--md-on-surface-variant)}
/* medium: two columns; an odd last card takes the whole row instead of standing alone */
@media(min-width:621px) and (max-width:980px){.price-grid>.price-card:last-child:nth-child(odd){grid-column:1 / -1}}
/* compact: comparable offers in a carousel, the featured one first (C24) */
@media(max-width:620px){
  .price-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,340px);align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;scrollbar-width:none}
  .price-grid::-webkit-scrollbar{display:none}
  .price-grid>.price-card{scroll-snap-align:start}
  .price-grid>.price-card.featured{order:-1}
  .price-card{padding:24px 20px}
}

/* Region switch beside the pricing head: a connected button group driving the top bar's switch */
.price-region{margin-top:8px}
/* pixel.css gives unselected connected-group buttons more weight (six :not()) than the selected rule, so a selected
   item kept the unselected colour; the id restores the M3 selected colours here until core fixes it */
#priceRegion>.btn[aria-pressed="true"]{background:var(--md-primary);color:var(--md-on-primary)}
.price-region>.btn{min-width:96px}
@media(max-width:620px){.price-region{width:100%}.price-region>.btn{min-width:0}}

/* Reassurance as an inline info banner (C41) */
.note-banner{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:16px 0 0;padding:12px 16px;border-radius:var(--sh-lg);
  background:var(--md-surface-container);color:var(--md-on-surface-variant);font-size:14px;line-height:20px}
.note-banner svg{flex:0 0 20px;width:20px;height:20px;color:var(--md-primary-text)}

/* ============================================================
   Things we can't ship: an expressive segmented list (C26, C45)
   ============================================================ */
.no-list .m3-list-lead{background:var(--md-error-container);color:var(--md-on-error-container)}
.no-list .m3-list-label{font-weight:600;color:var(--md-on-surface)}

/* ============================================================
   BRANCH CARDS (C20, C46): a shape avatar, then address and phone as list rows, the chat action at the foot
   ============================================================ */
.loc-card.px-loc{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--sh-xl);background:var(--md-surface-lowest)}
.px-loc .loc-head{display:flex;align-items:center;gap:16px}
.px-loc .loc-head h3{margin:0 0 2px}
.px-loc .loc-sub{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;color:var(--md-on-surface-variant)}
.loc-card.px-loc .loc-flag,.loc-card.px-loc:hover .loc-flag{display:inline-grid;place-items:center;width:56px;height:56px;flex:0 0 56px;margin:0;
  border:0;border-radius:0;transform:none;background:var(--md-primary-container);color:var(--md-on-primary-container);
  font:700 18px/1 var(--font-plain);letter-spacing:.02em;
  -webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.loc-card.px-loc[data-loc="ke"] .loc-flag{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);
  -webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.loc-card.px-loc[data-loc="dubai"] .loc-flag{background:var(--md-secondary-container);color:var(--md-on-secondary-container);
  -webkit-mask-image:var(--shape-clover8);mask-image:var(--shape-clover8)}
.px-loc .loc-list{margin:0}
.px-loc .loc-list .m3-list-label{font:var(--type-body-medium);color:var(--md-on-surface)}
.px-loc .loc-list a .m3-list-label{font:var(--type-body-large);font-weight:600}
.px-loc>.btn{margin-top:auto;align-self:flex-start}

/* Shop pages: the branch card beside the numbers, one bento instead of a lone card and a near-empty sheet (C4, C31) */
.branch-bento{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:8px;align-items:stretch}
@media(max-width:840px){.branch-bento{grid-template-columns:minmax(0,1fr)}}

/* Stat tiles in a 2 x 2 group: large outer corners, small inner ones */
.stat-band.px-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:0;background:transparent}
.px-stats .stat,.px-stats .stat:first-child,.px-stats .stat:last-child{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:120px;border-radius:var(--sh-sm)}
.px-stats .stat:nth-child(1){border-top-left-radius:var(--sh-xl)}
.px-stats .stat:nth-child(2){border-top-right-radius:var(--sh-xl)}
.px-stats .stat:nth-last-child(2):nth-child(odd){border-bottom-left-radius:var(--sh-xl)}
.px-stats .stat:last-child{border-bottom-right-radius:var(--sh-xl)}
.px-stats .stat:last-child:nth-child(odd){grid-column:1 / -1;border-bottom-left-radius:var(--sh-xl)}

/* About: the branches scroll sideways below 900px, the visitor's region first (C25) */
.loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:900px){
  .loc-grid{--bleed:var(--gutter);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,360px);align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bleed);
    margin-inline:calc(var(--bleed) * -1);padding:4px var(--bleed) 8px;scrollbar-width:none}
  .loc-grid::-webkit-scrollbar{display:none}
  .loc-grid>.px-loc{scroll-snap-align:start}
}
@media(max-width:620px){.bg-surface .loc-grid{--bleed:10px}}

/* ============================================================
   ABOUT: story bento, copy and numbers beside one tall photo (C18), photo without the mount line or zoom (C19)
   ============================================================ */
.story-bento{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy photo" "stats photo";gap:8px}
.story-copy{grid-area:copy;padding:clamp(24px,3.5vw,44px);border-radius:var(--sh-xl);background:var(--md-surface-lowest)}
.story-copy .eyebrow{height:auto;padding:0;background:none;border-radius:0;color:var(--md-primary-text);font-weight:700}
.story-copy .eyebrow::before{display:none}
.story-copy h2{margin:12px 0 16px}
.story-copy .lede{margin-bottom:16px}
.story-copy p:not(.lede){font-size:16px;line-height:24px}
.story-copy .btn{margin-top:24px}
.story-photo.frame{grid-area:photo;position:relative;min-height:360px;border-radius:var(--sh-xl)}
.story-photo.frame img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.story-photo.frame::after{display:none}
.story-photo.frame:hover img{transform:none}
.story-stats{grid-area:stats}
@media(max-width:840px){
  .story-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "photo" "stats"}
  .story-photo.frame{min-height:0;aspect-ratio:4/3.4}
}
@media(max-width:620px){.story-copy{padding:24px 20px}}

/* ============================================================
   GALLERY: a dense image grid, larger tiles in a repeating rhythm (C28); state layer and a corner morph on
   press, no zoom, wash or shadow (C29)
   ============================================================ */
.gal-section{padding-top:clamp(24px,3vw,40px)}
.gal{position:relative;column-count:auto;columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(150px,17vw,220px);grid-auto-flow:dense;gap:8px}
.gal .gal-item{display:block;height:100%;margin:0;border:0;border-radius:var(--sh-lg);background:var(--md-surface-high);break-inside:auto;
  box-shadow:none;transform:none;transition:border-radius var(--m3-motion-fast-spatial)}
.gal .gal-item:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.gal .gal-item:nth-child(7n+5){grid-row:span 2}
/* no large tile among the last six photos: the final row then packs from single tiles the script can widen */
.gal .gal-item:nth-child(7n+1):nth-last-child(-n+6),.gal .gal-item:nth-child(7n+5):nth-last-child(-n+6){grid-column:auto;grid-row:auto}
.gal .gal-item img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:none;transition:none}
.gal .gal-item:hover{transform:none;box-shadow:none}
.gal .gal-item:hover img{transform:none}
.gal .gal-item::after{background:var(--md-on-surface);opacity:0;transition:opacity 15ms linear}
@media(hover:hover) and (pointer:fine){.gal .gal-item:hover::after{opacity:var(--md-state-hover)}}
.gal .gal-item:active{border-radius:var(--sh-xl)}
.gal .gal-item:focus-visible{outline-offset:-3px}
.gal .gal-item:active::after{opacity:var(--md-state-press)}
@media(max-width:980px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,24vw,220px)}}
@media(max-width:680px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:4px}
  .gal .gal-item{border-radius:var(--sh-md)}
  .gal .gal-item:active{border-radius:var(--sh-lgi)}
}

/* ============================================================
   IMAGE VIEWER: full-screen on burnt black, the photo with 16px corners, a floating toolbar (prev, count, next)
   below it and the close button at the top (C5, C37). The script moves it to <body> (C30).
   ============================================================ */
#lb.lb{z-index:980;flex-direction:column;justify-content:center;align-items:center;gap:0;
  padding:calc(76px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom));
  background:var(--md-inverse-surface);-webkit-backdrop-filter:none;backdrop-filter:none}
#lb.lb.has-cap{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
#lb.lb.open{animation:fade .2s var(--m3-default-effects)}
#lb img{display:block;max-width:min(100%,1100px);max-height:100%;width:auto;height:auto;min-height:0;object-fit:contain;
  border-radius:var(--sh-lg);box-shadow:none;animation:dialogIn .5s var(--m3-default-spatial)}
#lb .lb-cap{position:absolute;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));margin:0 auto;max-width:640px;
  text-align:center;font:var(--type-body-medium);color:var(--md-inverse-variant)}
/* icon buttons: 48px, state layer in the content colour, the corners tighten on press */
#lb .lb-btn{position:relative;inset:auto;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:var(--sh-full);
  background:transparent;color:var(--md-inverse-on-surface);overflow:hidden;cursor:pointer;transform:none;
  transition:border-radius var(--m3-motion-fast-spatial)}
#lb .lb-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover) and (pointer:fine){#lb .lb-btn:hover::before{opacity:var(--md-state-hover)}}
#lb .lb-btn:focus-visible{outline:3px solid var(--md-inverse-primary);outline-offset:-3px}
#lb .lb-btn:active{transform:none;border-radius:var(--sh-md)}
#lb .lb-btn:active::before{opacity:var(--md-state-press)}
#lb .lb-btn:hover{transform:none;background:transparent}
#lb .lb-btn svg{width:24px;height:24px}
#lb .lb-close{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;background:var(--md-inverse-surface-2)}
#lb .lb-close:hover{background:var(--md-inverse-surface-2)}
/* floating toolbar: 64px, full corners, level 3, 8px ends, 4px between items */
#lb .lb-bar{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;height:64px;padding:0 8px;border-radius:var(--sh-full);
  background:var(--md-inverse-surface-2);box-shadow:var(--el-3)}
#lb .lb-count{position:static;transform:none;min-width:72px;padding:0 8px;border:0;background:none;text-align:center;
  font:var(--type-label-large);font-variant-numeric:tabular-nums;color:var(--md-inverse-on-surface)}
@media(max-width:680px){#lb .lb-btn{width:48px;height:48px}}

/* Reduced motion: the corner shapes stand still, the viewer opens without the spring */
@media(prefers-reduced-motion:reduce){
  .px-bento>.px-tile::after{animation:none}
  #lb img,#lb.lb.open{animation:none}
  .gal .gal-item,#lb .lb-btn{transition:none}
}


/* ============================================================
   AREA: ACCOUNTS (the full Pixel pass, 2026-10-22)
   ============================================================ */
/* accounts: the full Pixel pass (2026-10-22), merged into pixel.css when done.
   The pieces the accounts pages share (track, account, dashboard, complaint, feedback). What only one page uses
   lives in that page's own <style>, which comes later in the document. */

/* ============================================================
   STATUS CHIP: an order's state on the track result and the dashboard (A12, A35).
   <span class="status-pill sp-in_transit"><svg class="ic">...</svg>In Transit</span>
   32px, 8px corners, label-large, an 18px Iconly icon; .sm = 28px for table rows. Colours are roles only.
   ============================================================ */
.status-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border-radius:var(--sh-sm);
  font:var(--type-label-large);letter-spacing:.007em;white-space:nowrap;vertical-align:middle}
.status-pill svg{width:18px;height:18px;flex:0 0 18px}
.status-pill.sm{height:28px;padding:0 10px 0 6px;gap:6px;font:var(--type-label-medium);letter-spacing:.02em}
.status-pill.sm svg{width:16px;height:16px;flex-basis:16px}
.sp-pending{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.sp-in_transit{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.sp-assigned{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.sp-delivered{background:var(--md-success-container);color:var(--md-on-success-container)}
.sp-failed{background:var(--md-error-container);color:var(--md-on-error-container)}

/* ============================================================
   CARE FORMS: /complaint and /feedback (A7, A8, A9, A29, A30, A53, A55)
   A step indicator over the card, filled fields with the label inside, errors under the field they belong to,
   a success mark in a tonal shape, and a star rating made of real buttons.
   ============================================================ */
.care-card{padding:clamp(20px,4vw,32px)}
.cc-steps{margin:0 0 20px}
.cc-step-lbl{display:block;font:var(--type-label-large);letter-spacing:.007em;color:var(--md-on-surface-variant);margin-bottom:8px}
.cc-steps .m3-progress::before{transition:width .5s var(--m-spring)}
.care-card .cc-greet{font:var(--type-title-medium);color:var(--md-on-surface);margin:0 0 16px}
/* .card p (site.css) would make supporting and error text 14px grey: they keep the field's 12/16 */
.care-card :is(.fld-hint,.fld-error){font:400 12px/16px var(--font-plain);margin:4px 16px 0;color:var(--md-on-surface-variant)}
.care-card .fld-error{color:var(--md-error)}
.care-card [id$="SubmitErr"]{margin:0}
.care-card .cc-field{margin-bottom:16px}
.cc-label{display:block;margin:0 0 4px;font:600 14px/20px var(--font-plain);letter-spacing:.01em;color:var(--md-on-surface-variant)}
.cc-field.is-error .cc-label{color:var(--md-error)}
/* in the error state the error text takes the supporting text's place */
.cc-field.is-error .fld-hint{display:none}
.care-card .fld-error{display:flex;align-items:center;gap:6px}
.care-card .fld-error svg{width:16px;height:16px;flex:0 0 16px}
.care-card .fld-error[hidden]{display:none}
.care-card .cc-actions{margin-top:24px}
.care-card .cc-actions .btn{width:100%}
.cc-done{text-align:center;padding:8px 0}
.cc-done .ic-shape{margin:0 auto 20px;animation:dialogIn .6s var(--m-spring) both}
.cc-done h3{font:var(--type-headline-small);margin:0 0 8px}
.care-card .cc-done p{font:var(--type-body-large);color:var(--md-on-surface-variant);margin:0 auto;max-width:40ch}
.cc-done .btn{margin-top:24px}
/* star rating: five 48px radio buttons, Iconly Light outline / Bold when chosen */
.cc-rating{display:flex;gap:4px;margin:4px 0 0 -4px}
.cc-rating .star{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--md-outline);cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform var(--m3-motion-fast-spatial),color .15s var(--m-effects)}
.cc-rating .star::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 15ms linear}
@media(hover:hover){.cc-rating .star:hover::after{opacity:var(--md-state-hover)}}
.cc-rating .star:focus-visible{outline:3px solid var(--md-primary);outline-offset:-3px}
.cc-rating .star:active::after{opacity:var(--md-state-press)}
.cc-rating .star svg{width:32px;height:32px}
.cc-rating .star .f,.cc-rating .star.on .o{display:none}
.cc-rating .star.on .f{display:block}
.cc-rating .star.on{color:var(--md-primary)}
.cc-rating .star[aria-checked="true"]{transform:scale(1.1)}
.cc-rating-val{display:block;min-height:16px;margin:4px 16px 0 4px;font:var(--type-body-small);color:var(--md-on-surface-variant)}
.cc-field.is-error .cc-rating .star{color:var(--md-error)}
@media(prefers-reduced-motion:reduce){.cc-done .ic-shape{animation:none}}

/* ============================================================
   THE CHAT FAB ON THE ACCOUNTS PAGES: it never rests on a button or a field. A small script on each accounts page
   puts .fab-fold on <html> where the extended FAB would cover a control (it shows the icon only, like .is-compact)
   and .fab-aside where even the 56px FAB would cover a button or a field (it scales down and fades out until the
   page scrolls them clear). List rows and chips may pass under it, as content does under any FAB.
   ============================================================ */
html body:is([data-page="track"],[data-page="account"],[data-page="dashboard"],[data-page="complaint"],[data-page="feedback"]) .wc-fab{
  transition:padding .45s var(--m-spring),border-radius .45s var(--m-spring-fast),box-shadow .2s var(--m-effects),
    opacity .2s var(--m-effects),transform .35s var(--m-spring-fast)}
html.fab-fold .wc-fab:not(.is-open){padding:0 16px}
html.fab-fold .wc-fab:not(.is-open) .wc-fab-label{max-width:0;margin-left:0;opacity:0}
html.fab-aside .wc-fab:not(.is-open){opacity:0;transform:scale(.6);pointer-events:none}

/* A back action in place of a "Home · Page" breadcrumb (A56) */
.crumb-back{margin:0 0 12px -12px}
@media(max-width:760px){.crumb-back{margin-bottom:8px}}


/* ============================================================
   ILLUSTRATIONS AND STORE LOGOS (owner, 2026-10-24: "let them be communicating what we do, shopping carts,
   shopping bags", "use shopping platforms logos"). The tonal shapes behind the hero, the tiles and the bands
   are now a bag, a cart, a parcel, a plane, a truck and a price tag in the same tones, floating instead of
   spinning. Cart, parcel, plane, truck and tag are Material icons (Apache-2.0); the bag is drawn here.
   ============================================================ */
:root{
  --art-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M31 33v-5a19 19 0 0 1 38 0v5' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath fill-rule='evenodd' d='M16 33h68l-5 58a5 5 0 0 1-5 4.6H26A5 5 0 0 1 21 91zM31 47a4 4 0 1 0 0.01 0zM69 47a4 4 0 1 0 0.01 0z'/%3E%3C/svg%3E");
  --art-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
  --art-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4l16-.02V7z'/%3E%3C/svg%3E");
  --art-plane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
  --art-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
  --art-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E");
}
@keyframes artFloat{0%,100%{transform:translateY(0) rotate(var(--art-tilt,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--art-tilt,0deg) + 3deg))}}
.hero::before,.hero::after,.svc-hero::after,.guarantee-head::after,.offer-featured::after,.cta-band::before,.cta-band::after,.page-head::before,.page-head::after{
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  transform:rotate(var(--art-tilt,0deg));animation:artFloat 9s ease-in-out infinite}
.hero::before{-webkit-mask-image:var(--art-bag);mask-image:var(--art-bag);--art-tilt:10deg;width:min(320px,28vw);top:48px;right:-12px}
.hero::after{-webkit-mask-image:var(--art-box);mask-image:var(--art-box);--art-tilt:-12deg;width:min(200px,18vw);left:-24px;bottom:190px;animation-delay:-4.5s}
.svc-hero::after{-webkit-mask-image:var(--art-cart);mask-image:var(--art-cart);--art-tilt:-8deg;width:230px;right:-34px;top:-26px}
.guarantee-head::after{-webkit-mask-image:var(--art-truck);mask-image:var(--art-truck);--art-tilt:-6deg;width:210px;right:-34px;bottom:-34px;animation-delay:-3s}
.offer-featured::after{-webkit-mask-image:var(--art-tag);mask-image:var(--art-tag);--art-tilt:16deg;width:170px;right:-34px;top:-40px;animation-delay:-6s}
.cta-band::before{-webkit-mask-image:var(--art-plane);mask-image:var(--art-plane);--art-tilt:45deg;width:280px;right:-30px;top:-56px}
.cta-band::after{-webkit-mask-image:var(--art-bag);mask-image:var(--art-bag);--art-tilt:-10deg;width:104px;bottom:-26px;animation-delay:-4s}
.page-head::before{-webkit-mask-image:var(--art-bag);mask-image:var(--art-bag);--art-tilt:10deg}
.page-head::after{-webkit-mask-image:var(--art-box);mask-image:var(--art-box);--art-tilt:-12deg;animation-delay:-4.5s}
/* each inner page shows the part of the job it is about */
body[data-page="track"] .page-head::before{-webkit-mask-image:var(--art-truck);mask-image:var(--art-truck);--art-tilt:-6deg}
body[data-page="services"] .page-head::before{-webkit-mask-image:var(--art-cart);mask-image:var(--art-cart);--art-tilt:-8deg}
body[data-page="services"] .page-head::after{-webkit-mask-image:var(--art-tag);mask-image:var(--art-tag)}
body:is([data-page="shop-uganda"],[data-page="shop-kenya"]) .page-head::before{-webkit-mask-image:var(--art-plane);mask-image:var(--art-plane);--art-tilt:45deg}
body:is([data-page="careers"],[data-page="gallery"]) .page-head::after{-webkit-mask-image:var(--art-bag);mask-image:var(--art-bag)}
/* the tracker's hero: the truck behind the tracker card, the parcel low enough to clear the heading */
body[data-page="track"] .hero::before{-webkit-mask-image:var(--art-truck);mask-image:var(--art-truck);--art-tilt:-6deg}
body[data-page="track"] .hero::after{width:150px;left:-56px;bottom:-24px}
@media(max-width:620px){
  .hero::before{width:150px;top:14px;right:-30px}
  .hero::after{width:104px;left:-30px;bottom:270px}
  .svc-hero::after{width:160px;right:-30px;top:-20px}
  .guarantee-head::after{width:150px}
  .offer-featured::after{width:130px}
  .cta-band::before{width:190px;right:-40px;top:-40px}
  .cta-band::after{width:76px}
  .page-head::before{width:118px;right:-18px;top:20px}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.svc-hero::after,.guarantee-head::after,.offer-featured::after,.cta-band::before,.cta-band::after,.page-head::before,.page-head::after{animation:none}
}

/* ---------- the top bar with 8 page links (Gift Cards joined, 2026-10-24): between 981 and 1100px the links stay
   on one line each, a little tighter, and Log In shows only its icon (its name stays for screen readers). ---------- */
@media(min-width:981px) and (max-width:1100px){
  .nav-links{gap:2px}
  .nav-links a{white-space:nowrap;padding:0 9px}
  .nav .nav-login{font-size:0;gap:0;width:40px;min-width:40px;padding:0;justify-content:center}
}

/* ---------- STORE LOGOS (index.php): SHEIN is the store we buy from, the rest are self orders to the Dubai
   address. One tone each (the mark's shape, the section's colour), so the wall reads as one design. ---------- */
.store-logos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;margin-top:8px}
.sl-card{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.8vw,32px);border-radius:var(--sh-xl);min-width:0}
.sl-card p{margin:0;font:var(--type-body-medium)}
.sl-label{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 14px 6px 10px;border-radius:999px;font:var(--type-label-large)}
.sl-buy{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);justify-content:space-between}
.sl-buy .sl-label{background:var(--md-bright);color:#1A1611}
.sl-buy p{color:var(--md-inverse-variant)}
.sl-ship{background:var(--md-surface-lowest);color:var(--md-on-surface)}
.sl-ship .sl-label{background:var(--md-surface-container);color:var(--md-on-surface)}
.sl-ship p{color:var(--md-on-surface-variant)}
.store-mark{display:block;flex:0 1 auto;height:var(--bh,24px);width:calc(var(--bh,24px) * var(--ar,3));max-width:100%;background:currentColor;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.sl-buy .store-mark{--bh:clamp(40px,4.4vw,54px);color:#fff;margin-block:8px}
.sl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:4px}
.sl-grid li{display:flex;align-items:center;justify-content:center;min-width:0;height:68px;padding:0 16px;border-radius:var(--sh-md);background:var(--md-surface-container);color:var(--md-on-surface-variant)}
.sl-grid .store-mark{max-width:100%}
.sl-grid .store-mark.tall{--bh:34px}
.sl-note{grid-column:1 / -1;margin:6px 4px 0;font:var(--type-body-small);color:var(--md-on-surface-variant)}
@media(max-width:820px){.store-logos{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.sl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sl-grid li{height:58px;padding:0 10px}.store-mark{--bh:20px}}

/* ---------- YPS, the site as an app (owner, 2026-10-24): the "Get the YPS app" buttons (assets/pwa.js shows them where the
   browser can install, or has steps to) and the sheet with the steps. ---------- */
[data-app-install][hidden]{display:none!important}
.topbar-app{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;margin-right:8px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;background:transparent;color:inherit;font:600 13px/1 var(--font-plain);white-space:nowrap;cursor:pointer;
  transition:background-color .2s var(--m-effects)}
.topbar-app:hover{background:rgba(255,255,255,.08)}
.topbar-app:focus-visible{outline:2px solid var(--md-bright);outline-offset:2px}
.topbar-app svg{width:16px;height:16px;color:var(--md-bright)}
.drawer-app{width:100%;margin-bottom:8px;justify-content:center}
.footer-app{margin-top:18px}
.app-modal-card .modal-head{display:block;text-align:center;padding:28px 56px 0}
.app-modal-card .modal-close{position:absolute;top:12px;right:12px}
@media(max-width:620px){.app-modal-card .modal-head{padding:56px 20px 0}.app-modal-card .modal-close{right:auto;left:8px;top:8px}}
.app-modal-icon img{display:block;width:64px;height:64px;margin:0 auto 12px;border-radius:50%}
.app-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:6px}
.app-steps li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;
  border-radius:var(--sh-md);background:var(--md-surface-container);font:var(--type-body-medium);color:var(--md-on-surface)}
.app-steps li>span{min-width:0;padding-top:3px}
.app-steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--md-primary);color:var(--md-on-primary);font:700 14px/1 var(--font-plain)}
.pwa-glyph{display:inline-block;vertical-align:-4px;margin:0 2px}
.app-note{margin:12px 4px 0;font:var(--type-body-small);color:var(--md-on-surface-variant)}