/** Shopify CDN: Minification failed

Line 328:0 All "@import" rules must come first
Line 329:0 All "@import" rules must come first
Line 330:0 All "@import" rules must come first

**/
/* ---- tokens/fonts.css ---- */
/* ===========================================================================
   Mushuda — Fonts
   Playfair Display (display serif), Inter (body/UI), Noto Sans JP (Japanese accent).
   Loaded from Google Fonts; @font-face rules arrive via the imported stylesheets.
   NOTE: brand-specified families. See readme.md "Typography" for substitution notes.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


/* ---- tokens/colors.css ---- */
/* ===========================================================================
   Mushuda — Color tokens
   Premium Japanese minimalism: deep teal, warm paper neutrals, soft ink.
   Base ramps first, then semantic aliases.
   =========================================================================== */
:root {
  /* --- Ink / neutral ramp (warm-tinted, never pure cold gray) --- */
  --ink-900: #111111;   /* primary text, logo */
  --ink-800: #1c1b1a;
  --ink-700: #2e2c2a;
  --ink-600: #4a4744;   /* secondary text */
  --ink-500: #6f6b66;   /* muted text, captions */
  --ink-400: #98938c;   /* placeholder, disabled text */
  --ink-300: #c4bfb8;   /* hairline on paper */
  --ink-200: #e2ddd6;   /* borders, dividers */
  --ink-100: #efebe5;   /* subtle fills */

  /* --- Teal (primary brand) --- */
  --teal-900: #0a4943;
  --teal-800: #0c5f58;  /* hover / pressed primary */
  --teal-700: #0f766e;  /* PRIMARY brand color */
  --teal-600: #2b8f86;
  --teal-500: #57aaa1;
  --teal-200: #bfe0db;  /* tint fills, focus ring bg */
  --teal-100: #e2f1ef;  /* lightest wash */
  --teal-050: #f1f8f7;

  /* --- Paper / surface neutrals (Muji warmth) --- */
  --white:     #ffffff;
  --paper:     #f8f8f8;  /* page background alt */
  --paper-warm:#f4f1ec;  /* warm sand section */
  --sand-200:  #efe9e1;  /* card on warm bg */
  --sand-300:  #e6ddd1;

  /* --- Clay accent (muted terracotta — urgency / offer, used sparingly) --- */
  --clay-700: #a8503a;
  --clay-600: #c25e44;  /* offer accent, countdown */
  --clay-100: #f6e7e1;

  /* --- Functional --- */
  --gold-500:  #c79a3e;  /* review stars */
  --whatsapp:  #25d366;  /* WhatsApp brand green */
  --whatsapp-700: #1da851;
  --success:   #0f766e;  /* reuse teal for success */
  --error:     #b4392a;

  /* ====================== SEMANTIC ALIASES ====================== */
  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-teal:  var(--white);
  --text-brand:    var(--teal-700);

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-alt:       var(--paper);
  --surface-warm:      var(--paper-warm);
  --surface-card:      var(--white);
  --surface-card-warm: var(--sand-200);
  --surface-invert:    var(--ink-900);
  --surface-brand:     var(--teal-700);
  --surface-brand-soft:var(--teal-100);

  /* Lines */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--teal-700);
  --divider:       var(--ink-100);

  /* Interactive */
  --action-primary:        var(--teal-700);
  --action-primary-hover:  var(--teal-800);
  --action-primary-press:  var(--teal-900);
  --action-accent:         var(--clay-600);
  --action-accent-hover:   var(--clay-700);
  --focus-ring:            var(--teal-500);
}


/* ---- tokens/typography.css ---- */
/* ===========================================================================
   Mushuda — Typography tokens
   Display = Playfair Display (luxury serif, large headings only)
   Body/UI = Inter
   Accent  = Noto Sans JP (Japanese characters: 消臭, 防虫 — authenticity marks)
   French-language site: generous spacing, strong hierarchy.
   =========================================================================== */
:root {
  /* Families */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-jp:      'Noto Sans JP', 'Inter', sans-serif;

  /* Fluid type scale (mobile-first; clamps to comfortable desktop sizes) */
  --fs-display:  clamp(2.75rem, 8vw, 4.5rem); /* @kind font */
  --fs-h1:       clamp(2.1rem, 6vw, 3.25rem);  /* @kind font */
  --fs-h2:       clamp(1.7rem, 4.6vw, 2.5rem); /* @kind font */
  --fs-h3:       clamp(1.35rem, 3.2vw, 1.75rem); /* @kind font */
  --fs-h4:       1.25rem; /* @kind font */
  --fs-lead:     clamp(1.05rem, 2.4vw, 1.3rem);  /* @kind font */
  --fs-body:     1.0625rem;   /* @kind font */
  --fs-sm:       0.9375rem;   /* @kind font */
  --fs-xs:       0.8125rem;   /* @kind font */
  --fs-label:    0.75rem;     /* @kind font */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Line heights */
  --lh-tight:   1.08;   /* @kind font */
  --lh-snug:    1.22;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em;  /* @kind font */
  --ls-normal:  0;  /* @kind font */
  --ls-wide:    0.04em;  /* @kind font */
  --ls-label:   0.18em;   /* @kind font */

  /* Semantic roles */
  --type-eyebrow-size:    var(--fs-label);
  --type-eyebrow-spacing: var(--ls-label);
}


/* ---- tokens/spacing.css ---- */
/* ===========================================================================
   Mushuda — Spacing & layout tokens
   8px base grid. Generous whitespace = luxury feel.
   =========================================================================== */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm (mobile-first vertical padding) */
  --section-y:       clamp(56px, 12vw, 120px); /* @kind spacing */
  --section-y-tight: clamp(40px, 8vw, 72px); /* @kind spacing */

  /* Container widths */
  --container:      1180px;  /* @kind spacing */
  --container-text: 720px;   /* @kind spacing */
  --container-mobile: 480px;  /* @kind spacing */
  --gutter:         clamp(20px, 5vw, 40px); /* @kind spacing */
}


/* ---- tokens/radius.css ---- */
/* ===========================================================================
   Mushuda — Radius & elevation tokens
   Soft, restrained corners. Shadows are diffuse and warm-tinted, never harsh.
   =========================================================================== */
:root {
  /* Corner radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;   /* cards */
  --radius-xl:  28px;   /* large feature panels */
  --radius-pill: 999px; /* buttons, badges, chips */
  --radius-full: 50%;

  /* Elevation — soft, low-spread, warm ink shadows */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.05);
  --shadow-sm: 0 2px 8px rgba(17,17,17,0.06);
  --shadow-md: 0 8px 24px rgba(17,17,17,0.08);
  --shadow-lg: 0 18px 48px rgba(17,17,17,0.10);
  --shadow-teal: 0 10px 30px rgba(15,118,110,0.22);   /* primary CTA lift */
  --shadow-sticky: 0 -6px 24px rgba(17,17,17,0.08);   /* sticky bottom bar */

  /* Hairline ring used on flat cards */
  --ring-hairline: inset 0 0 0 1px var(--border-subtle);
}


/* ---- tokens/motion.css ---- */
/* ===========================================================================
   Mushuda — Motion tokens
   Calm, confident motion. Gentle ease, short durations, no bounce.
   Fades + small transl(≤12px) on scroll-in. Press = subtle scale-down.
   =========================================================================== */
:root {
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
  --dur-reveal: 640ms;   /* @kind other */

  /* Easings */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-inout:    cubic-bezier(0.45, 0, 0.15, 1);  /* @kind other */

  /* Interaction primitives */
  --press-scale: 0.97;  /* @kind other */
  --hover-lift:  -2px;  /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}


/* ---- tokens/base.css ---- */
/* ===========================================================================
   Mushuda — Base element styles & helpers
   Applies the token system to raw HTML so specimens & kits inherit the brand.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--text-brand); text-decoration: none; }

/* --- Brand helpers --- */
.mushuda-logo {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-900);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--text-brand);
}

.jp-mark {
  font-family: var(--font-jp);
  font-weight: var(--fw-500);
  color: var(--text-muted);
}

.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); }
.lead    { font-size: var(--fs-lead); color: var(--text-muted); line-height: var(--lh-relaxed); }

/* --- Scroll reveal (used by kits; safe default = visible) --- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-emphasis), transform var(--dur-reveal) var(--ease-emphasis); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Layout helpers --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }


/* ---- page overrides (from helmet) ---- */

/* ---- tokens/fonts.css ---- */
/* ===========================================================================
   Mushuda — Fonts
   Playfair Display (display serif), Inter (body/UI), Noto Sans JP (Japanese accent).
   Loaded from Google Fonts; @font-face rules arrive via the imported stylesheets.
   NOTE: brand-specified families. See readme.md "Typography" for substitution notes.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


/* ---- tokens/colors.css ---- */
/* ===========================================================================
   Mushuda — Color tokens
   Premium Japanese minimalism: deep teal, warm paper neutrals, soft ink.
   Base ramps first, then semantic aliases.
   =========================================================================== */
:root {
  /* --- Ink / neutral ramp (warm-tinted, never pure cold gray) --- */
  --ink-900: #111111;   /* primary text, logo */
  --ink-800: #1c1b1a;
  --ink-700: #2e2c2a;
  --ink-600: #4a4744;   /* secondary text */
  --ink-500: #6f6b66;   /* muted text, captions */
  --ink-400: #98938c;   /* placeholder, disabled text */
  --ink-300: #c4bfb8;   /* hairline on paper */
  --ink-200: #e2ddd6;   /* borders, dividers */
  --ink-100: #efebe5;   /* subtle fills */

  /* --- Teal (primary brand) --- */
  --teal-900: #0a4943;
  --teal-800: #0c5f58;  /* hover / pressed primary */
  --teal-700: #0f766e;  /* PRIMARY brand color */
  --teal-600: #2b8f86;
  --teal-500: #57aaa1;
  --teal-200: #bfe0db;  /* tint fills, focus ring bg */
  --teal-100: #e2f1ef;  /* lightest wash */
  --teal-050: #f1f8f7;

  /* --- Paper / surface neutrals (Muji warmth) --- */
  --white:     #ffffff;
  --paper:     #f8f8f8;  /* page background alt */
  --paper-warm:#f4f1ec;  /* warm sand section */
  --sand-200:  #efe9e1;  /* card on warm bg */
  --sand-300:  #e6ddd1;

  /* --- Clay accent (muted terracotta — urgency / offer, used sparingly) --- */
  --clay-700: #a8503a;
  --clay-600: #c25e44;  /* offer accent, countdown */
  --clay-100: #f6e7e1;

  /* --- Functional --- */
  --gold-500:  #c79a3e;  /* review stars */
  --whatsapp:  #25d366;  /* WhatsApp brand green */
  --whatsapp-700: #1da851;
  --success:   #0f766e;  /* reuse teal for success */
  --error:     #b4392a;

  /* ====================== SEMANTIC ALIASES ====================== */
  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-teal:  var(--white);
  --text-brand:    var(--teal-700);

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-alt:       var(--paper);
  --surface-warm:      var(--paper-warm);
  --surface-card:      var(--white);
  --surface-card-warm: var(--sand-200);
  --surface-invert:    var(--ink-900);
  --surface-brand:     var(--teal-700);
  --surface-brand-soft:var(--teal-100);

  /* Lines */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--teal-700);
  --divider:       var(--ink-100);

  /* Interactive */
  --action-primary:        var(--teal-700);
  --action-primary-hover:  var(--teal-800);
  --action-primary-press:  var(--teal-900);
  --action-accent:         var(--clay-600);
  --action-accent-hover:   var(--clay-700);
  --focus-ring:            var(--teal-500);
}


/* ---- tokens/typography.css ---- */
/* ===========================================================================
   Mushuda — Typography tokens
   Display = Playfair Display (luxury serif, large headings only)
   Body/UI = Inter
   Accent  = Noto Sans JP (Japanese characters: 消臭, 防虫 — authenticity marks)
   French-language site: generous spacing, strong hierarchy.
   =========================================================================== */
:root {
  /* Families */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-jp:      'Noto Sans JP', 'Inter', sans-serif;

  /* Fluid type scale (mobile-first; clamps to comfortable desktop sizes) */
  --fs-display:  clamp(2.75rem, 8vw, 4.5rem); /* @kind font */
  --fs-h1:       clamp(2.1rem, 6vw, 3.25rem);  /* @kind font */
  --fs-h2:       clamp(1.7rem, 4.6vw, 2.5rem); /* @kind font */
  --fs-h3:       clamp(1.35rem, 3.2vw, 1.75rem); /* @kind font */
  --fs-h4:       1.25rem; /* @kind font */
  --fs-lead:     clamp(1.05rem, 2.4vw, 1.3rem);  /* @kind font */
  --fs-body:     1.0625rem;   /* @kind font */
  --fs-sm:       0.9375rem;   /* @kind font */
  --fs-xs:       0.8125rem;   /* @kind font */
  --fs-label:    0.75rem;     /* @kind font */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Line heights */
  --lh-tight:   1.08;   /* @kind font */
  --lh-snug:    1.22;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em;  /* @kind font */
  --ls-normal:  0;  /* @kind font */
  --ls-wide:    0.04em;  /* @kind font */
  --ls-label:   0.18em;   /* @kind font */

  /* Semantic roles */
  --type-eyebrow-size:    var(--fs-label);
  --type-eyebrow-spacing: var(--ls-label);
}


/* ---- tokens/spacing.css ---- */
/* ===========================================================================
   Mushuda — Spacing & layout tokens
   8px base grid. Generous whitespace = luxury feel.
   =========================================================================== */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm (mobile-first vertical padding) */
  --section-y:       clamp(56px, 12vw, 120px); /* @kind spacing */
  --section-y-tight: clamp(40px, 8vw, 72px); /* @kind spacing */

  /* Container widths */
  --container:      1180px;  /* @kind spacing */
  --container-text: 720px;   /* @kind spacing */
  --container-mobile: 480px;  /* @kind spacing */
  --gutter:         clamp(20px, 5vw, 40px); /* @kind spacing */
}


/* ---- tokens/radius.css ---- */
/* ===========================================================================
   Mushuda — Radius & elevation tokens
   Soft, restrained corners. Shadows are diffuse and warm-tinted, never harsh.
   =========================================================================== */
:root {
  /* Corner radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;   /* cards */
  --radius-xl:  28px;   /* large feature panels */
  --radius-pill: 999px; /* buttons, badges, chips */
  --radius-full: 50%;

  /* Elevation — soft, low-spread, warm ink shadows */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.05);
  --shadow-sm: 0 2px 8px rgba(17,17,17,0.06);
  --shadow-md: 0 8px 24px rgba(17,17,17,0.08);
  --shadow-lg: 0 18px 48px rgba(17,17,17,0.10);
  --shadow-teal: 0 10px 30px rgba(15,118,110,0.22);   /* primary CTA lift */
  --shadow-sticky: 0 -6px 24px rgba(17,17,17,0.08);   /* sticky bottom bar */

  /* Hairline ring used on flat cards */
  --ring-hairline: inset 0 0 0 1px var(--border-subtle);
}


/* ---- tokens/motion.css ---- */
/* ===========================================================================
   Mushuda — Motion tokens
   Calm, confident motion. Gentle ease, short durations, no bounce.
   Fades + small transl(≤12px) on scroll-in. Press = subtle scale-down.
   =========================================================================== */
:root {
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
  --dur-reveal: 640ms;   /* @kind other */

  /* Easings */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-inout:    cubic-bezier(0.45, 0, 0.15, 1);  /* @kind other */

  /* Interaction primitives */
  --press-scale: 0.97;  /* @kind other */
  --hover-lift:  -2px;  /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}


/* ---- tokens/base.css ---- */
/* ===========================================================================
   Mushuda — Base element styles & helpers
   Applies the token system to raw HTML so specimens & kits inherit the brand.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--text-brand); text-decoration: none; }

/* --- Brand helpers --- */
.mushuda-logo {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-900);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--text-brand);
}

.jp-mark {
  font-family: var(--font-jp);
  font-weight: var(--fw-500);
  color: var(--text-muted);
}

.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); }
.lead    { font-size: var(--fs-lead); color: var(--text-muted); line-height: var(--lh-relaxed); }

/* --- Scroll reveal (used by kits; safe default = visible) --- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-emphasis), transform var(--dur-reveal) var(--ease-emphasis); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Layout helpers --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }

  

/* ---- Shopify host-page fixes ---- */
html, body { height: auto !important; }
#dc-root, #dc-root > .sc-host { height: auto !important; }